From fc21d8c7ba757c1a4d0015739688bdbb9013d5cb Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 3 Apr 2026 14:53:18 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 330 +++++++++++++++--------------------------------
 1 file changed, 107 insertions(+), 223 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0f80cfb..b447048 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -14,237 +14,121 @@ import { ArrowRight } from "lucide-react";
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-stagger"
-        defaultTextAnimation="background-highlight"
-        borderRadius="rounded"
-        contentWidth="mediumSmall"
-        sizing="largeSmallSizeLargeTitles"
-        background="circleGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="solid"
-        headingFontWeight="extrabold"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumSmall"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        {
-          name: "Accueil",
-          id: "hero",
-        },
-        {
-          name: "L'Univers",
-          id: "about",
-        },
-        {
-          name: "Personnages",
-          id: "team",
-        },
-        {
-          name: "Précommander",
-          id: "contact",
-        },
-      ]}
-      brandName="Structural Color // RED"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Accueil", id: "hero" },
+              { name: "L'Univers", id: "about" },
+              { name: "Personnages", id: "team" },
+              { name: "Précommander", id: "contact" },
+            ]}
+            brandName="Structural Color // RED"
+            button={{ text: "Précommander", href: "#contact" }}
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboardSplit
-      background={{
-        variant: "radial-gradient",
-      }}
-      logoText="Structural Color // RED"
-      description="Là où la lumière structure la réalité, le rouge définit la fin des temps."
-      buttons={[
-        {
-          text: "Découvrir l'univers",
-          href: "#about",
-        },
-        {
-          text: "Précommander",
-          href: "#contact",
-        },
-      ]}
-      layoutOrder="default"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png?_wi=1"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboardSplit
+            background={{ variant: "radial-gradient" }}
+            logoText="Structural Color // RED"
+            description="Là où la lumière structure la réalité, le rouge définit la fin des temps."
+            buttons={[
+              { text: "Découvrir l'univers", href: "#about" },
+              { text: "Précommander", href: "#contact" },
+            ]}
+            layoutOrder="default"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png"
+            mediaAnimation="blur-reveal"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={true}
-      title="L'Immersion Totale"
-      description="Structural Color // RED n'est pas qu'un livre. C'est une descente dans un monde où la perception est une arme. Explorez un univers dystopique où la couleur dicte la survie."
-      metrics={[
-        {
-          value: "2025",
-          title: "Sortie mondiale",
-        },
-        {
-          value: "8",
-          title: "Destins entrelacés",
-        },
-        {
-          value: "450",
-          title: "Pages d'ombre",
-        },
-      ]}
-      mediaAnimation="slide-up"
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png?_wi=2"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+          <MetricSplitMediaAbout
+            useInvertedBackground={true}
+            title="L'Immersion Totale"
+            description="Structural Color // RED n'est pas qu'un livre. C'est une descente dans un monde où la perception est une arme. Explorez un univers dystopique où la couleur dicte la survie."
+            metrics={[
+              { value: "2025", title: "Sortie mondiale" },
+              { value: "8", title: "Destins entrelacés" },
+              { value: "450", title: "Pages d'ombre" },
+            ]}
+            mediaAnimation="slide-up"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png"
+            metricsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardEleven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      groups={[
-        {
-          id: "chars",
-          groupTitle: "Les Visages de l'Ombre",
-          members: [
-            {
-              id: "1",
-              title: "Elias",
-              subtitle: "Le Traqueur",
-              detail: "La vérité est une fréquence qu'il n'entend plus.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227944020-4e47b2f1.png",
-            },
-            {
-              id: "2",
-              title: "Sora",
-              subtitle: "La Spectrale",
-              detail: "Elle vit entre les nuances de rouge.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227943620-fde09d35.png",
-            },
-            {
-              id: "3",
-              title: "Kael",
-              subtitle: "Le Gardien",
-              detail: "Il protège le secret que tout le monde cherche.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227944320-51cad73d.png",
-            },
-            {
-              id: "4",
-              title: "Lyra",
-              subtitle: "L'Architecte",
-              detail: "Elle reconstruit le monde à chaque seconde.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227943733-445d7726.png",
-            },
-            {
-              id: "5",
-              title: "Jaxon",
-              subtitle: "Le Rebelle",
-              detail: "Il ne croit plus aux couleurs.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227944056-508f2199.png",
-            },
-            {
-              id: "6",
-              title: "Mira",
-              subtitle: "La Chroniqueuse",
-              detail: "Chaque mot écrit est une plaie ouverte.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227945647-ddca17c6.png",
-            },
-            {
-              id: "7",
-              title: "Vane",
-              subtitle: "Le Silencieux",
-              detail: "Son ombre en dit plus que ses actes.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227942397-c847a902.png",
-            },
-            {
-              id: "8",
-              title: "Orion",
-              subtitle: "Le Visionnaire",
-              detail: "Il voit le rouge même dans le noir.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227952229-50568432.jpg",
-            },
-          ],
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png?_wi=3",
-          imageAlt: "Abstract background for a dystopian book cover, deep black and vibrant red light streaks, particles,",
-        },
-      ]}
-      title="Personnages"
-      description="Huit trajectoires brisées au sein d'une réalité sans issue."
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardEleven
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            groups={[
+              {
+                id: "chars",                groupTitle: "Les Visages de l'Ombre",                members: [
+                  { id: "1", title: "Elias", subtitle: "Le Traqueur", detail: "La vérité est une fréquence qu'il n'entend plus.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227944020-4e47b2f1.png" },
+                  { id: "2", title: "Sora", subtitle: "La Spectrale", detail: "Elle vit entre les nuances de rouge.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227943620-fde09d35.png" },
+                  { id: "3", title: "Kael", subtitle: "Le Gardien", detail: "Il protège le secret que tout le monde cherche.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227944320-51cad73d.png" },
+                  { id: "4", title: "Lyra", subtitle: "L'Architecte", detail: "Elle reconstruit le monde à chaque seconde.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227943733-445d7726.png" },
+                  { id: "5", title: "Jaxon", subtitle: "Le Rebelle", detail: "Il ne croit plus aux couleurs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227944056-508f2199.png" },
+                  { id: "6", title: "Mira", subtitle: "La Chroniqueuse", detail: "Chaque mot écrit est une plaie ouverte.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227945647-ddca17c6.png" },
+                  { id: "7", title: "Vane", subtitle: "Le Silencieux", detail: "Son ombre en dit plus que ses actes.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227942397-c847a902.png" },
+                  { id: "8", title: "Orion", subtitle: "Le Visionnaire", detail: "Il voit le rouge même dans le noir.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/stylized-character-portrait-dystopian-ae-1775227952229-50568432.jpg" },
+                ]
+              }
+            ]}
+            title="Personnages"
+            description="Huit trajectoires brisées au sein d'une réalité sans issue."
+          />
+        </div>
 
-  <div id="ecommerce" data-section="ecommerce">
-      <ProductDetailCard
-      layout="section"
-      name="Édition Collector 'Sang et Ombre'"
-      price="49.99€"
-      description="L'édition limitée incluant une couverture texturée, des illustrations exclusives et un accès anticipé à l'audio-livre immersif."
-      images={[
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png",
-          alt: "Édition collector livre",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Ajouter au panier",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="ecommerce" data-section="ecommerce">
+          <ProductDetailCard
+            layout="section"
+            name="Édition Collector 'Sang et Ombre'"
+            price="49.99€"
+            description="L'édition limitée incluant une couverture texturée, des illustrations exclusives et un accès anticipé à l'audio-livre immersif."
+            images={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BLgh5meiyFFxdyU9YEOi16Nr6V/abstract-background-for-a-dystopian-book-1775227941243-0d772f68.png", alt: "Édition collector livre" }]}
+            buttons={[{ text: "Ajouter au panier", href: "#" }]}
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactFaq
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "f1",
-          title: "Où commander ?",
-          content: "Disponible chez tous les bons libraires et en ligne.",
-        },
-        {
-          id: "f2",
-          title: "Format disponible ?",
-          content: "Version papier, ebook et livre audio immersif.",
-        },
-      ]}
-      ctaTitle="Structural Color // RED"
-      ctaDescription="Prêt à voir le monde en rouge ? Précommandez votre exemplaire et recevez un contenu bonus exclusif."
-      ctaButton={{
-        text: "Précommander maintenant",
-        href: "#",
-      }}
-      ctaIcon={ArrowRight}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactFaq
+            useInvertedBackground={true}
+            animationType="slide-up"
+            faqs={[
+              { id: "f1", title: "Où commander ?", content: "Disponible chez tous les bons libraires et en ligne." },
+              { id: "f2", title: "Format disponible ?", content: "Version papier, ebook et livre audio immersif." },
+            ]}
+            ctaTitle="Structural Color // RED"
+            ctaDescription="Prêt à voir le monde en rouge ? Précommandez votre exemplaire et recevez un contenu bonus exclusif."
+            ctaButton={{ text: "Précommander maintenant", href: "#" }}
+            ctaIcon={ArrowRight}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Structure",
-          items: [
-            {
-              label: "Le Livre",
-              href: "#",
-            },
-            {
-              label: "Personnages",
-              href: "#",
-            },
-            {
-              label: "Précommander",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="Structural Color // RED"
-      copyrightText="© 2025 Structural Color // RED"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Structure", items: [{ label: "Le Livre", href: "#" }, { label: "Personnages", href: "#" }, { label: "Précommander", href: "#" }] }
+            ]}
+            logoText="Structural Color // RED"
+            copyrightText="© 2025 Structural Color // RED"
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1