Merge version_1 into main #2
330
src/app/page.tsx
330
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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user