Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,203 +1,24 @@
-"use client";
-
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroBillboard from "@/components/sections/hero/HeroBillboard";
-import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
-import MediaAbout from "@/components/sections/about/MediaAbout";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import FaqBase from "@/components/sections/faq/FaqBase";
-import ContactText from "@/components/sections/contact/ContactText";
-import FooterMedia from "@/components/sections/footer/FooterMedia";
-import { Sparkles, Zap, Users, Pen, Vote, Trophy, MessageCircle, Share2, Smartphone, Flame, HelpCircle } from "lucide-react";
-
-export default function HomePage() {
+export default function Home() {
   return (
-    <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="largeSizeMediumTitles"
-      background="circleGradient"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="bold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "home" },
-            { name: "How It Works", id: "how-it-works" },
-            { name: "Features", id: "features" },
-            { name: "Play Now", id: "play-now" },
-            { name: "FAQ", id: "faq" },
-          ]}
-          brandName="La Cochonne"
-          bottomLeftText="Party Game"
-          bottomRightText="Friends & Fun"
-        />
+    <div className="min-h-screen bg-gradient-to-b from-slate-950 to-slate-900">
+      <div id="hero" data-section="hero" className="w-full py-20 px-4">
+        <div className="max-w-4xl mx-auto text-center space-y-6">
+          <h1 className="text-5xl md:text-7xl font-bold text-white leading-tight">
+            La Cochonne des Problèmes
+          </h1>
+          <p className="text-xl md:text-2xl text-slate-300 font-semibold">
+            The Ultimate Party Game for Friends
+          </p>
+          <p className="text-lg text-slate-400 max-w-2xl mx-auto">
+            Write anonymously, vote to guess, and discover hilarious truths that embarrass! Create unforgettable moments of laughter with your friends.
+          </p>
+          <div className="pt-4">
+            <button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors">
+              Start Playing Now
+            </button>
+          </div>
+        </div>
       </div>
-
-      <div id="hero" data-section="hero">
-        <HeroBillboard
-          title="La Cochonne des Problèmes"
-          description="Le jeu de soirée ultime entre amis. Écrivez anonymement, votez pour deviner, et découvrez les vérités amusantes qui dérangent!"
-          background={{ variant: "sparkles-gradient" }}
-          tag="Party Game 🎉"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          buttons={[
-            { text: "Créer une partie", href: "/create" },
-            { text: "Rejoindre une partie", href: "/join" },
-          ]}
-          buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/stylish-friends-sitting-cafe_273609-5473.jpg?_wi=1"
-          imageAlt="Friends playing party game on smartphones"
-          mediaAnimation="slide-up"
-        />
-      </div>
-
-      <div id="how-it-works" data-section="how-it-works">
-        <FeatureHoverPattern
-          title="Comment ça marche?"
-          description="Un processus simple et rapide pour des soirées inoubliables"
-          tag="Règles du Jeu"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          features={[
-            {
-              icon: Users,
-              title: "Rejoindre",              description: "Entrez un code de partie ou créez-en une nouvelle. Choisissez votre pseudo anonyme et rejoignez vos amis."},
-            {
-              icon: Pen,
-              title: "Écrire",              description: "Écrivez des phrases amusantes et anonymes sur vos amis. Accusez-les, taquinez-les, soyez créatif!"},
-            {
-              icon: Vote,
-              title: "Voter",              description: "Les messages apparaissent un par un. Votez pour la personne qui correspond le mieux à chaque phrase."},
-            {
-              icon: Trophy,
-              title: "Gagner",              description: "Les résultats des votes créent des moments hilarants. Découvrez qui pensait quoi de vous!"},
-            {
-              icon: MessageCircle,
-              title: "Rire",              description: "Révélations amusantes, réactions gênées et souvenirs inoubliables avec vos amis."},
-            {
-              icon: Share2,
-              title: "Partager",              description: "Consultez les statistiques amusantes et les résultats globaux de la partie."},
-          ]}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <MediaAbout
-          title="Pourquoi La Cochonne des Problèmes?"
-          description="Design optimisé pour smartphone, jeu en temps réel avec synchronisation instantanée entre tous les joueurs, totalement anonyme et hilarant."
-          tag="Expérience Mobile"
-          tagIcon={Smartphone}
-          tagAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/group-close-friends-playing-space-sim-videogame-modern-gaming-console-young-adult-people-sitting-sofa-home-while-enjoying-time-together-fun-leisure-activity-entertainment-device_482257-43301.jpg?_wi=1"
-          imageAlt="Game room interface showing voting screen"
-          buttons={[{ text: "Commencer maintenant", href: "/create" }]}
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Parfait pour les soirées entre amis"
-          description="Créez des moments inoubliables avec ce jeu révolutionnaire"
-          tag="Trending"
-          tagIcon={Flame}
-          tagAnimation="slide-up"
-          names={[
-            "Idéal pour 4-12 joueurs",            "Pas d'installation requise",            "Fonctionne sur tous les navigateurs",            "Anonyme à 100%",            "Jeu en temps réel",            "Sans pub",            "Gratuit et amusant"]}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          showCard={true}
-          speed={40}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqBase
-          faqs={[
-            {
-              id: "1",              title: "Combien de joueurs peuvent jouer?",              content: "Le jeu fonctionne mieux avec 4 à 12 joueurs. Vous pouvez jouer à plus, mais l'expérience peut être affectée. Minimum 2 joueurs, maximum illimité techniquement."},
-            {
-              id: "2",              title: "Les messages restent-ils vraiment anonymes?",              content: "Oui! Les messages sont 100% anonymes. Le système ne garde pas trace de qui a écrit quoi. C'est le cœur du jeu - la sécurité de l'anonymat pour plus de fun."},
-            {
-              id: "3",              title: "Est-ce que j'ai besoin d'installer une application?",              content: "Non! La Cochonne des Problèmes est une web-app. Elle fonctionne directement dans votre navigateur. Pas d'installation, pas de mise à jour, juste accédez et jouez."},
-            {
-              id: "4",              title: "Combien de temps dure une partie?",              content: "Une partie typique dure entre 15 et 45 minutes selon le nombre de joueurs et de messages. C'est parfait pour une pause soirée!"},
-            {
-              id: "5",              title: "Peut-on rejouer avec le même groupe?",              content: "Absolument! Vous pouvez jouer autant de fois que vous voulez. Les résultats sont réinitialisés à chaque nouvelle partie, donc c'est toujours frais et amusant."},
-            {
-              id: "6",              title: "Comment fonctionne la création de partie?",              content: "L'hôte crée une partie, et le système génère un code unique. Les autres joueurs rejoignent simplement avec ce code. L'hôte peut lancer la partie quand tout le monde est prêt."},
-          ]}
-          title="Questions Fréquentes"
-          description="Trouvez les réponses à vos questions sur le jeu et comment l'utiliser"
-          tag="Aide & Support"
-          tagIcon={HelpCircle}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          faqsAnimation="slide-up"
-          animationType="smooth"
-        />
-      </div>
-
-      <div id="play-now" data-section="play-now">
-        <ContactText
-          text="Prêt à créer des moments hilarants et gênants avec vos amis? Lancez une partie maintenant!"
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Créer une partie", href: "/create" },
-            { text: "Rejoindre une partie", href: "/join" },
-          ]}
-          background={{ variant: "plain" }}
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterMedia
-          imageSrc="http://img.b2bpic.net/free-photo/four-beautiful-girls-resting-party_176420-6194.jpg?_wi=1"
-          imageAlt="Friends celebrating at a party"
-          columns={[
-            {
-              title: "Jeu",              items: [
-                { label: "Créer une partie", href: "/create" },
-                { label: "Rejoindre une partie", href: "/join" },
-                { label: "Comment jouer", href: "#how-it-works" },
-                { label: "Règles", href: "#faq" },
-              ],
-            },
-            {
-              title: "Ressources",              items: [
-                { label: "À propos", href: "/about" },
-                { label: "Conditions d'utilisation", href: "#" },
-                { label: "Politique de confidentialité", href: "#" },
-                { label: "Contact", href: "#" },
-              ],
-            },
-            {
-              title: "Suivez-nous",              items: [
-                { label: "Instagram", href: "https://instagram.com" },
-                { label: "Twitter", href: "https://twitter.com" },
-                { label: "TikTok", href: "https://tiktok.com" },
-                { label: "Discord", href: "https://discord.com" },
-              ],
-            },
-          ]}
-          logoText="La Cochonne"
-          copyrightText="© 2025 La Cochonne des Problèmes. Tous droits réservés."
-        />
-      </div>
-    </ThemeProvider>
+    </div>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
-  --card: #efe7dd;
-  --foreground: #2b180a;
-  --primary-cta: #2b180a;
+  --background: #fef5f0;
+  --card: #fde8df;
+  --foreground: #3d1a1a;
+  --primary-cta: #d4567d;
   --primary-cta-text: #f6f0e9;
-  --secondary-cta: #efe7dd;
+  --secondary-cta: #fde8df;
   --secondary-cta-text: #2b180a;
-  --accent: #94877c;
-  --background-accent: #afa094;
+  --accent: #f5c6d4;
+  --background-accent: #e89ab0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);