Merge version_4 into main #4
208
src/app/page.tsx
208
src/app/page.tsx
@@ -27,116 +27,116 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "Chat", id: "chat" },
|
||||
{ name: "Fonctionnalités", id: "features" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MathIA Grok"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
background={{ variant: "plain" }}
|
||||
logoText="MathIA x Grok"
|
||||
description="Une interface de chat avancée combinant le raisonnement de Grok avec un espace de travail visuel. Posez vos questions, recevez des explications illustrées instantanément."
|
||||
buttons={[
|
||||
{ text: "Essayer la démo", href: "#contact" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
layoutOrder="default"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/a-highly-sophisticated-digital-classroom-1775133772930-0a6d301f.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="chat" data-section="chat">
|
||||
<CardStack
|
||||
title="Grok Chat Interface"
|
||||
description="Une interface de discussion ultra-minimaliste inspirée par l'esthétique xAI. Dialogue direct, clair et sans distraction pour vos besoins analytiques."
|
||||
textboxLayout="split"
|
||||
animationType="blur-reveal"
|
||||
ariaLabel="Chat interface"
|
||||
className="bg-black text-white"
|
||||
>
|
||||
<div className="flex flex-col gap-4 p-8 border border-neutral-800 rounded-lg">
|
||||
<div className="text-sm text-neutral-400">Grok: Comment puis-je vous aider aujourd'hui ?</div>
|
||||
<div className="h-px w-full bg-neutral-800 my-2" />
|
||||
<div className="text-white font-medium">User: Explique-moi le calcul intégral.</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "Chat", id: "chat" },
|
||||
{ name: "Fonctionnalités", id: "features" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MathIA Grok"
|
||||
/>
|
||||
</div>
|
||||
</CardStack>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Réflexion augmentée"
|
||||
description="MathIA utilise les capacités de raisonnement de Grok pour analyser des problèmes complexes et générer des solutions étape par étape sur un tableau blanc numérique, créant une expérience de chat interactive et visuelle."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/an-ai-powered-math-teacher-character-int-1775133776116-85c101a8.png"
|
||||
imageAlt="Interface de chat et tableau blanc"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboardSplit
|
||||
background={{ variant: "plain" }}
|
||||
logoText="MathIA x Grok"
|
||||
description="Une interface de chat avancée combinant le raisonnement de Grok avec un espace de travail visuel. Posez vos questions, recevez des explications illustrées instantanément."
|
||||
buttons={[
|
||||
{ text: "Essayer la démo", href: "#contact" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
layoutOrder="default"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/a-highly-sophisticated-digital-classroom-1775133772930-0a6d301f.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ icon: Lightbulb, title: "Chat Grok IA", description: "Interaction naturelle avec un modèle de langage performant." },
|
||||
{ icon: PenTool, title: "Visualisation", description: "Conversion automatique des concepts mathématiques en schémas." },
|
||||
{ icon: Monitor, title: "Interface épurée", description: "Design noir et blanc minimaliste pour se concentrer sur l'essentiel." },
|
||||
{ icon: Zap, title: "Réponses rapides", description: "Latence ultra-faible pour un apprentissage fluide." },
|
||||
{ icon: ShieldCheck, title: "Confidentialité", description: "Gestion sécurisée de vos clés API en local." },
|
||||
]}
|
||||
title="La puissance du visuel"
|
||||
description="Une interface pensée pour la clarté et l'efficacité."
|
||||
/>
|
||||
</div>
|
||||
<div id="chat" data-section="chat">
|
||||
<CardStack
|
||||
title="Grok Chat Interface"
|
||||
description="Une interface de discussion ultra-minimaliste inspirée par l'esthétique xAI. Dialogue direct, clair et sans distraction pour vos besoins analytiques."
|
||||
textboxLayout="split"
|
||||
animationType="blur-reveal"
|
||||
ariaLabel="Chat interface"
|
||||
className="bg-black text-white"
|
||||
>
|
||||
<div className="flex flex-col gap-4 p-8 border border-neutral-800 rounded-lg">
|
||||
<div className="text-sm text-neutral-400">Grok: Comment puis-je vous aider aujourd'hui ?</div>
|
||||
<div className="h-px w-full bg-neutral-800 my-2" />
|
||||
<div className="text-white font-medium">User: Explique-moi le calcul intégral.</div>
|
||||
</div>
|
||||
</CardStack>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Qu'est-ce que MathIA ?", content: "C'est une plateforme qui associe Grok AI à un canevas numérique interactif." },
|
||||
{ id: "2", title: "Besoin d'une clé API ?", content: "Oui, vous utilisez votre propre clé pour une confidentialité totale." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/clean-interface-showing-interactive-math-1775133774387-5fe1858a.png"
|
||||
title="Questions Fréquentes"
|
||||
description="Plus d'informations sur MathIA."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Réflexion augmentée"
|
||||
description="MathIA utilise les capacités de raisonnement de Grok pour analyser des problèmes complexes et générer des solutions étape par étape sur un tableau blanc numérique, créant une expérience de chat interactive et visuelle."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/an-ai-powered-math-teacher-character-int-1775133776116-85c101a8.png"
|
||||
imageAlt="Interface de chat et tableau blanc"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Accès au système"
|
||||
description="Configurez votre environnement."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Nom", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||||
{ name: "apiKey", type: "password", placeholder: "Clé API Grok", required: true },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/futuristic-digital-aesthetic-background--1775133773550-69c25a60.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{ icon: Lightbulb, title: "Chat Grok IA", description: "Interaction naturelle avec un modèle de langage performant." },
|
||||
{ icon: PenTool, title: "Visualisation", description: "Conversion automatique des concepts mathématiques en schémas." },
|
||||
{ icon: Monitor, title: "Interface épurée", description: "Design noir et blanc minimaliste pour se concentrer sur l'essentiel." },
|
||||
{ icon: Zap, title: "Réponses rapides", description: "Latence ultra-faible pour un apprentissage fluide." },
|
||||
{ icon: ShieldCheck, title: "Confidentialité", description: "Gestion sécurisée de vos clés API en local." },
|
||||
]}
|
||||
title="La puissance du visuel"
|
||||
description="Une interface pensée pour la clarté et l'efficacité."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MathIA"
|
||||
leftLink={{ text: "Confidentialité", href: "#" }}
|
||||
rightLink={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Qu'est-ce que MathIA ?", content: "C'est une plateforme qui associe Grok AI à un canevas numérique interactif." },
|
||||
{ id: "2", title: "Besoin d'une clé API ?", content: "Oui, vous utilisez votre propre clé pour une confidentialité totale." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/clean-interface-showing-interactive-math-1775133774387-5fe1858a.png"
|
||||
title="Questions Fréquentes"
|
||||
description="Plus d'informations sur MathIA."
|
||||
faqsAnimation="slide-up"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Accès au système"
|
||||
description="Configurez votre environnement."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Nom", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||||
{ name: "apiKey", type: "password", placeholder: "Clé API Grok", required: true },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BiavO3dCn02likxwS7upWoCIlU/futuristic-digital-aesthetic-background--1775133773550-69c25a60.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MathIA"
|
||||
leftLink={{ text: "Confidentialité", href: "#" }}
|
||||
rightLink={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user