Update src/app/page.tsx
This commit is contained in:
250
src/app/page.tsx
250
src/app/page.tsx
@@ -6,178 +6,108 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Exercises",
|
||||
id: "#exercises",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
]}
|
||||
brandName="GrammarSync"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Exercises", id: "exercises" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "FAQ", id: "faq" }
|
||||
]}
|
||||
brandName="GrammarSync"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Master French & Spanish Grammar with AI"
|
||||
description="Adaptive, custom-tailored fill-in-the-gap exercises designed to turn your weaknesses into your greatest strengths."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Learning",
|
||||
href: "#exercises",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-sophisticated-digital-language-learnin-1774691044241-2b0f1ff3.png"
|
||||
imageAlt="GrammarSync learning interface"
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Master French & Spanish Grammar with AI"
|
||||
description="Adaptive, custom-tailored fill-in-the-gap exercises designed to turn your weaknesses into your greatest strengths."
|
||||
buttons={[{ text: "Start Learning", href: "#exercises" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-sophisticated-digital-language-learnin-1774691044241-2b0f1ff3.png"
|
||||
imageAlt="GrammarSync learning interface"
|
||||
showDimOverlay={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Adaptive AI Exercises",
|
||||
author: "Engine",
|
||||
description: "Generated cloze tests that evolve based on your accuracy, specifically targeting your weakest grammar concepts.",
|
||||
tags: [
|
||||
"AI",
|
||||
"Adaptive",
|
||||
"Personalized",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/an-icon-representation-of-personalized-a-1774691045593-84a47670.png",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Dual Language Support",
|
||||
author: "Core",
|
||||
description: "Switch seamlessly between French and Spanish with dedicated problem banks for common grammar struggles.",
|
||||
tags: [
|
||||
"French",
|
||||
"Spanish",
|
||||
"Grammar",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Progress & Streaks",
|
||||
author: "System",
|
||||
description: "Stay motivated with deep insights into your learning progress and daily practice streaks.",
|
||||
tags: [
|
||||
"Analytics",
|
||||
"Gamification",
|
||||
],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/an-analytical-chart-showing-progress-tra-1774691047432-d66aed8c.png",
|
||||
},
|
||||
]}
|
||||
title="Precision Learning"
|
||||
description="Our intelligent system generates exercises specifically for your language level and common pain points."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Adaptive AI Exercises", author: "Engine", description: "Generated cloze tests that evolve based on your accuracy, specifically targeting your weakest grammar concepts.", tags: ["AI", "Adaptive", "Personalized"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/an-icon-representation-of-personalized-a-1774691045593-84a47670.png"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Dual Language Support", author: "Core", description: "Switch seamlessly between French and Spanish with dedicated problem banks for common grammar struggles.", tags: ["French", "Spanish", "Grammar"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Progress & Streaks", author: "System", description: "Stay motivated with deep insights into your learning progress and daily practice streaks.", tags: ["Analytics", "Gamification"],
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/an-analytical-chart-showing-progress-tra-1774691047432-d66aed8c.png"
|
||||
}
|
||||
]}
|
||||
title="Precision Learning"
|
||||
description="Our intelligent system generates exercises specifically for your language level and common pain points."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="exercises" data-section="exercises">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "French Homophones",
|
||||
price: "a vs à",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Spanish Verbs",
|
||||
price: "ser vs estar",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Grammar Nuances",
|
||||
price: "Subjunctive",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png?_wi=4",
|
||||
},
|
||||
]}
|
||||
title="Example Problem Types"
|
||||
description="Explore the grammar concepts we cover, ranging from beginner essentials to advanced nuances."
|
||||
/>
|
||||
</div>
|
||||
<div id="exercises" data-section="exercises">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "French Homophones", price: "a vs à", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png" },
|
||||
{ id: "p2", name: "Spanish Verbs", price: "ser vs estar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png" },
|
||||
{ id: "p3", name: "Grammar Nuances", price: "Subjunctive", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-minimalist-representation-of-french-an-1774691045275-8f3db39a.png" }
|
||||
]}
|
||||
title="Example Problem Types"
|
||||
description="Explore the grammar concepts we cover, ranging from beginner essentials to advanced nuances."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How does the AI personalize exercises?",
|
||||
content: "Our system analyzes your response patterns and error frequency to prioritize topics you struggle with most.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I switch languages?",
|
||||
content: "Absolutely. You can toggle between French and Spanish at any time from your dashboard.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are there daily practice reminders?",
|
||||
content: "Yes, enable notifications for daily streaks to keep your language journey consistent.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-clean-modern-image-of-a-pen-and-notebo-1774691043843-047406e4.png?_wi=1"
|
||||
imageAlt="Study FAQ"
|
||||
mediaAnimation="blur-reveal"
|
||||
title="Frequently Asked Questions"
|
||||
description="Got questions about our platform? We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How does the AI personalize exercises?", content: "Our system analyzes your response patterns and error frequency to prioritize topics you struggle with most." },
|
||||
{ id: "q2", title: "Can I switch languages?", content: "Absolutely. You can toggle between French and Spanish at any time from your dashboard." },
|
||||
{ id: "q3", title: "Are there daily practice reminders?", content: "Yes, enable notifications for daily streaks to keep your language journey consistent." }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-clean-modern-image-of-a-pen-and-notebo-1774691043843-047406e4.png"
|
||||
imageAlt="Study FAQ"
|
||||
mediaAnimation="blur-reveal"
|
||||
faqsAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Got questions about our platform? We've got answers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Built for Focus"
|
||||
description="We stripped away the clutter found in typical language apps, creating a distraction-free environment that prioritizes deep grammar work."
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BZKBLWcA19sGjpwgCpRqdb1sLI/a-clean-modern-image-of-a-pen-and-notebo-1774691043843-047406e4.png?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="GrammarSync"
|
||||
copyrightText="© 2025 GrammarSync | Language Mastery"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard logoText="GrammarSync" copyrightText="© 2025 GrammarSync | Language Mastery" />
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user