refonte du site
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>(RE)Sources Relationnelles - Ministère des Solidarités et de la Santé</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
/* Couleurs officielles du cahier des charges */
|
||||
.bg-niagara { background-color: #06989e; }
|
||||
.text-niagara { color: #06989e; }
|
||||
.border-niagara { border-color: #06989e; }
|
||||
.bg-candlelight { background-color: #fce117; }
|
||||
|
||||
/* Améliorations de style */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
.transition-smooth {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.glow-niagara {
|
||||
box-shadow: 0 0 20px rgba(6, 152, 158, 0.3);
|
||||
}
|
||||
.gradient-niagara {
|
||||
background: linear-gradient(135deg, #06989e 0%, #048a91 100%);
|
||||
}
|
||||
.gradient-light {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white text-gray-900 font-sans leading-relaxed">
|
||||
|
||||
<a href="#main-content" class="sr-only focus:not-sr-only aria-label font-bold p-4 bg-niagara text-white block text-center z-50">
|
||||
Aller au contenu principal
|
||||
</a>
|
||||
|
||||
<header class="border-b border-gray-200 bg-white shadow-sm transition-smooth">
|
||||
<div class="container mx-auto px-4 py-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="border-r border-gray-300 pr-4">
|
||||
<p class="text-xs font-bold uppercase leading-tight text-gray-700">Gouvernement</p>
|
||||
<p class="text-[10px] uppercase italic text-gray-600 mt-1">Liberté<br>Égalité<br>Fraternité</p>
|
||||
</div>
|
||||
<h1 class="text-xs font-bold uppercase max-w-[150px] text-gray-800 leading-snug">
|
||||
Ministère des Solidarités et de la Santé
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:block flex-grow text-center">
|
||||
<span class="text-3xl font-black italic tracking-tighter text-gray-900">
|
||||
(RE)SOURCES <span class="text-niagara underline decoration-candlelight decoration-4 underline-offset-2">RELATIONNELLES</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav class="flex items-center gap-2 whitespace-nowrap">
|
||||
<a href="/login" class="px-5 py-2.5 text-sm font-bold text-niagara border-2 border-niagara rounded-lg hover:bg-niagara hover:text-white transition-smooth duration-200">
|
||||
Connexion
|
||||
</a>
|
||||
<a href="/register" class="px-5 py-2.5 text-sm font-bold bg-candlelight text-gray-900 rounded-lg shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-smooth duration-200">
|
||||
S'inscrire
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="py-16 md:py-28 gradient-light">
|
||||
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
|
||||
<div class="md:w-1/2 text-center md:text-left">
|
||||
<h2 class="text-5xl md:text-6xl font-bold leading-tight mb-8">
|
||||
Créer, renforcer et enrichir vos <span class="text-niagara">relations</span>.
|
||||
</h2>
|
||||
<p class="text-lg md:text-xl text-gray-700 mb-10 leading-relaxed max-w-xl mx-auto md:mx-0">
|
||||
La plateforme citoyenne dédiée à la qualité des liens : famille, amis, couple ou collègues.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
|
||||
<a href="#catalogue" class="px-8 py-4 gradient-niagara text-white rounded-lg font-bold text-lg hover:shadow-lg hover:-translate-y-1 transition-smooth duration-200 inline-block">
|
||||
Explorer les ressources
|
||||
</a>
|
||||
<button class="px-8 py-4 bg-white border-2 border-gray-300 rounded-lg font-bold text-lg text-gray-900 hover:border-niagara hover:text-niagara transition-smooth duration-200">
|
||||
Aide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:w-1/2 mt-12 md:mt-0 flex justify-center">
|
||||
<div class="p-4 bg-white rounded-full shadow-2xl">
|
||||
<img
|
||||
src="{{ asset('img/logo.jpg') }}"
|
||||
alt="Logo officiel (RE)Sources Relationnelles"
|
||||
class="w-72 h-72 md:w-80 md:h-80 object-contain rounded-full border-4 border-candlelight"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 border-y border-gray-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Données Protégées -->
|
||||
<div class="p-8 bg-white rounded-xl border border-gray-200 hover:border-niagara hover:shadow-lg transition-smooth duration-300 group">
|
||||
<div class="text-5xl mb-4 group-hover:scale-110 transition-smooth duration-300">🛡️</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-800">Données Protégées</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Conformité RGPD et chiffrement de vos échanges.</p>
|
||||
</div>
|
||||
|
||||
<!-- Hébergement Français -->
|
||||
<div class="p-8 bg-white rounded-xl border border-gray-200 hover:border-niagara hover:shadow-lg transition-smooth duration-300 group">
|
||||
<div class="text-5xl mb-4 group-hover:scale-110 transition-smooth duration-300">🇫🇷</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-800">Hébergement Français</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Données stockées sur un Cloud Souverain.</p>
|
||||
</div>
|
||||
|
||||
<!-- Accessibilité -->
|
||||
<div class="p-8 bg-white rounded-xl border border-gray-200 hover:border-niagara hover:shadow-lg transition-smooth duration-300 group">
|
||||
<div class="text-5xl mb-4 group-hover:scale-110 transition-smooth duration-300">♿</div>
|
||||
<h3 class="font-bold text-xl mb-3 text-gray-800">Accessibilité</h3>
|
||||
<p class="text-gray-600 leading-relaxed">Interface optimisée pour tous les citoyens (RGAA).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="gradient-niagara text-white py-12 mt-16">
|
||||
<div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
|
||||
<div>
|
||||
<p class="font-bold text-lg mb-2">Projet (RE)Sources Relationnelles</p>
|
||||
<p class="text-sm text-blue-100">Un outil au service de la cohésion sociale.</p>
|
||||
</div>
|
||||
<ul class="flex flex-wrap gap-6 text-sm">
|
||||
<li><a href="#" class="text-blue-100 hover:text-candlelight hover:underline transition-smooth duration-200">Mentions Légales</a></li>
|
||||
<li><a href="#" class="text-blue-100 hover:text-candlelight hover:underline transition-smooth duration-200">Politique de Confidentialité</a></li>
|
||||
<li><a href="#" class="text-blue-100 hover:text-candlelight hover:underline transition-smooth duration-200">Contactez-nous</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user