308 lines
19 KiB
TypeScript
308 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
|
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import { Sparkles, Zap, Brain, Clock, BarChart3, Wifi, BookOpen, Globe, TrendingUp, HelpCircle } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Learn", id: "learn" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "/pricing" },
|
|
{ label: "Languages", href: "#vocabulary-system" },
|
|
{ label: "Dashboard", href: "/learn" },
|
|
],
|
|
},
|
|
{
|
|
title: "Learning", items: [
|
|
{ label: "How It Works", href: "#learning-engine" },
|
|
{ label: "Blog", href: "/blog" },
|
|
{ label: "Resources", href: "#" },
|
|
{ label: "Support", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "/about" },
|
|
{ label: "Career", href: "#" },
|
|
{ label: "Contact", href: "/contact" },
|
|
{ label: "Partners", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "GDPR", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple brandName="WordMaster" navItems={navItems} />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Master Languages While Reading Real Content"
|
|
description="Translate words instantly. Learn naturally. Remember forever. WordMaster combines AI-powered translation, spaced repetition, and intelligent tutoring to make language learning effortless and engaging."
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="AI-Powered Learning"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Start Learning Free", href: "/learn" },
|
|
{ text: "See How It Works", href: "#features" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-modern-clean-ai-language-learning-dash-1773938106783-7d434a23.png"
|
|
imageAlt="WordMaster learning interface"
|
|
mediaAnimation="slide-up"
|
|
marqueeItems={[
|
|
{ text: "English" },
|
|
{ text: "German" },
|
|
{ text: "Spanish" },
|
|
{ text: "Chinese" },
|
|
{ text: "Arabic" },
|
|
{ text: "Russian" },
|
|
{ text: "Turkish" },
|
|
]}
|
|
marqueeSpeed={40}
|
|
showMarqueeCard={true}
|
|
ariaLabel="WordMaster hero section showcasing AI language learning platform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardThree
|
|
title="Powerful Features for Effective Learning"
|
|
description="Everything you need to master a language through real-world content consumption. Our AI handles translation, learning, and progress tracking automatically."
|
|
tag="Core Capabilities"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Explore Features", href: "#learn" }]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "Instant Web Translation", description: "Translate any webpage dynamically while preserving layout and structure. No code or UI elements are translated—only the content you need.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-web-browser-showing-dynamic-text-trans-1773938107281-409499c5.png?_wi=1", imageAlt: "Web translation interface"},
|
|
{
|
|
id: "2", title: "Vocabulary Learning Engine", description: "Access 10,000+ curated words across 7 languages with CEFR levels from A1 to C1. Organized, searchable, and always at your fingertips.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-comprehensive-vocabulary-database-inte-1773938109642-8084c0d2.png", imageAlt: "Vocabulary database"},
|
|
{
|
|
id: "3", title: "SM-2 Spaced Repetition", description: "Advanced algorithm tracks your learning progress, optimizes review intervals, and adapts difficulty. Remember words longer with less effort.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-visual-representation-of-the-sm-2-spac-1773938109525-69b6d965.png?_wi=1", imageAlt: "Spaced repetition algorithm"},
|
|
{
|
|
id: "4", title: "AI Tutoring System", description: "Real-time grammar checking, mistake correction, and explanations tailored to your level. Get instant feedback on your language usage.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/an-ai-tutoring-interface-showing-grammar-1773938107629-60172540.png?_wi=1", imageAlt: "AI tutoring interface"},
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
ariaLabel="Core features of WordMaster platform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="learning-engine" data-section="learning-engine">
|
|
<SplitAbout
|
|
title="How WordMaster's Learning Engine Works"
|
|
description="Our intelligent system adapts to your pace, tracks your progress, and optimizes every learning session. Spaced repetition combined with AI tutoring creates the perfect learning environment."
|
|
tag="Learning Science"
|
|
tagIcon={Brain}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Start Your Journey", href: "/learn" }]}
|
|
buttonAnimation="blur-reveal"
|
|
bulletPoints={[
|
|
{
|
|
title: "Adaptive Intervals", description: "The SM-2 algorithm adjusts review timing based on your performance. Study smarter, not harder.", icon: Clock,
|
|
},
|
|
{
|
|
title: "Progress Analytics", description: "Track words learned per day, accuracy rates, streaks, and visual progress charts in real-time.", icon: BarChart3,
|
|
},
|
|
{
|
|
title: "Offline-First Design", description: "All your progress syncs locally first. Continue learning anywhere, sync when you're online.", icon: Wifi,
|
|
},
|
|
{
|
|
title: "Real Content Integration", description: "Learn by reading actual websites. Context-based vocabulary acquisition is proven to work.", icon: BookOpen,
|
|
},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-comprehensive-diagram-showing-the-word-1773938107175-94a68627.png"
|
|
imageAlt="WordMaster learning engine visualization"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="right"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
ariaLabel="How WordMaster's AI-powered learning engine works"
|
|
/>
|
|
</div>
|
|
|
|
<div id="vocabulary-system" data-section="vocabulary-system">
|
|
<ProductCardThree
|
|
title="Comprehensive Vocabulary Database"
|
|
description="Choose your target language and proficiency level. Learn from our expertly curated vocabulary across CEFR levels A1 through C1."
|
|
tag="7 Languages Supported"
|
|
tagIcon={Globe}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Browse Vocabulary", href: "/learn" }]}
|
|
buttonAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "english", name: "English Vocabulary", price: "A1 - C1 Levels", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/english-language-flag-and-vocabulary-dat-1773938107588-b8884c16.png?_wi=1", imageAlt: "English language"},
|
|
{
|
|
id: "german", name: "German Vocabulary", price: "A1 - C1 Levels", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/german-language-flag-and-vocabulary-data-1773938108173-95710bcb.png?_wi=1", imageAlt: "German language"},
|
|
{
|
|
id: "spanish", name: "Spanish Vocabulary", price: "A1 - C1 Levels", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/spanish-language-flag-and-vocabulary-dat-1773938107133-06722b8e.png?_wi=1", imageAlt: "Spanish language"},
|
|
{
|
|
id: "chinese", name: "Chinese Vocabulary", price: "A1 - C1 Levels", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/chinese-language-flag-and-vocabulary-dat-1773938106926-50ff7548.png?_wi=1", imageAlt: "Chinese language"},
|
|
{
|
|
id: "arabic", name: "Arabic Vocabulary", price: "A1 - C1 Levels", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/arabic-language-flag-and-vocabulary-data-1773938107654-9f4cce72.png?_wi=1", imageAlt: "Arabic language"},
|
|
{
|
|
id: "russian", name: "Russian Vocabulary", price: "A1 - C1 Levels", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/russian-language-flag-and-vocabulary-dat-1773938108218-13f96432.png?_wi=1", imageAlt: "Russian language"},
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="scale-rotate"
|
|
ariaLabel="Vocabulary database with 7 languages and CEFR levels"
|
|
/>
|
|
</div>
|
|
|
|
<div id="analytics" data-section="analytics">
|
|
<MetricCardSeven
|
|
title="Your Learning Dashboard"
|
|
description="Monitor every aspect of your language learning journey. Track daily progress, accuracy, review counts, and maintain your learning streak."
|
|
tag="Progress Tracking"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "View Your Dashboard", href: "/learn" }]}
|
|
buttonAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "words-learned", value: "100+", title: "Words Learned", items: ["This Week", "New Records", "Mastered"],
|
|
},
|
|
{
|
|
id: "accuracy", value: "94%", title: "Accuracy Rate", items: ["Today", "This Month", "All Time"],
|
|
},
|
|
{
|
|
id: "streak", value: "42", title: "Day Streak", items: ["Keep Going", "Consistent", "Motivated"],
|
|
},
|
|
{
|
|
id: "reviews", value: "1,250", title: "Total Reviews", items: ["Reinforced", "Remembered", "Mastered"],
|
|
},
|
|
]}
|
|
animationType="depth-3d"
|
|
ariaLabel="Learning analytics and progress metrics dashboard"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="WordMaster transformed how I learn languages. Reading real websites while learning vocabulary feels natural, and the spaced repetition algorithm keeps me engaged without overwhelming me. I've learned more in 3 months than I did in a year of traditional classes."
|
|
rating={5}
|
|
author="Alex Chen"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/professional-headshot-of-a-confident-asi-1773938106332-c9735bb5.png", alt: "Alex Chen"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/professional-headshot-of-a-confident-his-1773938106261-85ec4675.png", alt: "Maria Rodriguez"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/professional-headshot-of-a-confident-cau-1773938105954-1595266c.png", alt: "James Thompson"},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/professional-headshot-of-a-confident-fre-1773938107674-1a794f83.png", alt: "Sophie Laurent"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
ariaLabel="User testimonial about WordMaster's effectiveness"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about WordMaster, how it works, and how to get started with AI-powered language learning."
|
|
tag="Help Center"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
buttons={[{ text: "Contact Support", href: "/contact" }]}
|
|
buttonAnimation="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does WordMaster's translation work?", content: "WordMaster uses advanced NLP to detect and translate text nodes on any webpage while preserving layout and structure. The system intelligently skips code, UI elements, and metadata to ensure only content is translated. Translations are cached for performance."},
|
|
{
|
|
id: "2", title: "What is the SM-2 spaced repetition algorithm?", content: "SM-2 is a scientifically proven algorithm that optimizes review intervals based on your performance. It tracks repetitions, interval, ease factor, and next review date. Words you struggle with appear more frequently, while mastered words space out naturally."},
|
|
{
|
|
id: "3", title: "Is there an offline mode?", content: "Yes! WordMaster is offline-first. All your progress, vocabulary, and learning data syncs to localStorage. When you're back online, changes automatically sync with our backend without interrupting your learning flow."},
|
|
{
|
|
id: "4", title: "How does the AI tutoring work?", content: "Our AI tutor checks your sentences, fixes grammatical errors, and explains corrections tailored to your proficiency level. It generates contextual examples and dialogue suggestions. The system outputs structured JSON for seamless integration into your learning session."},
|
|
{
|
|
id: "5", title: "What languages does WordMaster support?", content: "We support 7 languages: English, German, Turkish, Spanish, Chinese, Arabic, and Russian. Each language has a comprehensive vocabulary database organized by CEFR level (A1 through C1)."},
|
|
{
|
|
id: "6", title: "How is my data secured?", content: "WordMaster uses Supabase with PostgreSQL and Row-Level Security (RLS). All user data is encrypted, and RLS policies ensure you only see your own learning data. Authentication is handled securely with persistent sessions."},
|
|
]}
|
|
ariaLabel="Common questions and answers about WordMaster platform"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get in Touch"
|
|
title="Ready to Master Languages?"
|
|
description="Join thousands of learners using WordMaster to learn naturally through real content. Start your free trial today—no credit card required."
|
|
background={{ variant: "canvas-reveal" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Start Learning Free"
|
|
termsText="By clicking Start Learning you're confirming that you agree with our Terms and Conditions and Privacy Policy."
|
|
ariaLabel="Contact and signup form for WordMaster"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BAhaIpFAYLNzimScpNmULHDHVq/a-diverse-group-of-learners-collaboratin-1773938107383-699a2705.png?_wi=1"
|
|
imageAlt="WordMaster community learning"
|
|
logoText="WordMaster"
|
|
copyrightText="© 2025 WordMaster | AI Language Learning Platform"
|
|
columns={footerColumns}
|
|
ariaLabel="WordMaster footer navigation and information"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |