185 lines
10 KiB
TypeScript
185 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { CheckCircle, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="large"
|
|
background="none"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Pricing", id: "#pricing" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
]}
|
|
brandName="Talkpik"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Master TOPIK with AI-Powered Intelligence"
|
|
description="Talkpik uses advanced AI to personalize your TOPIK learning journey, helping you speak, read, and write like a native Korean speaker."
|
|
tag="Revolutionize Your Studies"
|
|
buttons={[
|
|
{ text: "Get Started Free", href: "#pricing" },
|
|
{ text: "Learn More", href: "#about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/enthusiastic-asian-girl-with-digital-tablet-smiling-looking-amazed-happy-with-something-good-hol_1258-151474.jpg", imageAlt: "Dashboard" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-woman-eating-breakfast-cereals-with-milk-as-morning-meal-holding-bowl-spoon_1258-203949.jpg", imageAlt: "Tests" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/old-woman-with-disability-holding-green-screen-digital-tablet-senior-person-sitting-wheelchair-using-blank-copy-space-with-isolated-chroma-key-mock-up-background-display_482257-39047.jpg", imageAlt: "Writing" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg", imageAlt: "Listening" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/chrome-key-tablet-updating-ai-systems_482257-90828.jpg", imageAlt: "Reading" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-psd/remote-learning-landing-page_23-2148911010.jpg", imageAlt: "Group Study" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Why Talkpik?"
|
|
description={[
|
|
"Traditional learning is slow and impersonal. Talkpik adapts to your unique learning style, pinpointing weaknesses and accelerating your path to TOPIK mastery.", "With state-of-the-art AI, we simulate real test environments and provide instant feedback on your progress."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Interactive Test Simulator", description: "Practice with past exams simulated in real-time.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/beautiful-happy-young-woman-with-phone-emotion-concept_169016-66540.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/topview-notebook-mobile-phone-email-table-concept_53876-30091.jpg" }
|
|
},
|
|
{
|
|
title: "AI Vocabulary Coach", description: "AI-curated word banks based on frequency.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/goth-student-attending-school_23-2150576781.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/translator-dictionary-language-interpreter_53876-132693.jpg" }
|
|
},
|
|
{
|
|
title: "Real-time Speaking Feedback", description: "Instant correction for your pronunciation.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-female-student-wearing-glasses-bandana-headphones-around-neck-holding-note-pads-taking-photo-them-with-mobile-phone-isolated-olive-green-background_141793-134660.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/mobile-login-screen_23-2152004052.jpg" }
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Smart Features for Success"
|
|
description="Our AI-driven toolkit is designed to make learning intuitive and highly effective."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "95%", title: "Pass Rate", description: "Users passing their target level.", icon: CheckCircle },
|
|
{ id: "m2", value: "2x", title: "Learning Speed", description: "Faster than traditional courses.", icon: Zap },
|
|
{ id: "m3", value: "50k+", title: "Active Learners", description: "Global community growing.", icon: Users },
|
|
]}
|
|
title="Learning That Works"
|
|
description="Evidence-backed results for our users."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Min-ji Kim", role: "Student", testimonial: "Talkpik completely changed how I prep for TOPIK. The AI feedback is a game changer.", imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg" },
|
|
{ id: "2", name: "David Smith", role: "Professional", testimonial: "I passed TOPIK level 4 in just 3 months thanks to the adaptive curriculum.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-cheerful-african-woman-student-smiling-laughing-sitting-cafe-books-magazines-lying-table-learning-education_176420-12408.jpg" },
|
|
{ id: "3", name: "Yuki Tanaka", role: "Student", testimonial: "The mock tests feel so realistic. It made the real exam feel easy.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-pretty-student-girl-wearing-headphones-sitting-desk-with-school-tools-listening-music-looking-side-with-fingers-headphones-isolated-white-wall_141793-97677.jpg" },
|
|
{ id: "4", name: "Elena Rodriguez", role: "Educator", testimonial: "As a teacher, I recommend Talkpik to all my students for supplementary practice.", imageSrc: "http://img.b2bpic.net/free-photo/young-lady-with-pens-table_23-2147953159.jpg" },
|
|
{ id: "5", name: "Liam Connor", role: "Enthusiast", testimonial: "The vocabulary coach really helped me memorize words I struggled with.", imageSrc: "http://img.b2bpic.net/free-photo/happy-stylish-redhead-girl-student-red-hat-holds-digital-tablet-uses-social-media-app-searches-so_1258-151080.jpg" },
|
|
]}
|
|
title="Trusted by Students"
|
|
description="Join thousands of learners achieving their dreams."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{ id: "starter", badge: "Essential", price: "$19/mo", subtitle: "Basic access to AI tools.", features: ["TOPIK I material", "Daily vocabulary drill", "Community access"], buttons: [{ text: "Start Now", href: "#" }] },
|
|
{ id: "pro", badge: "Popular", price: "$39/mo", subtitle: "Complete exam mastery.", features: ["TOPIK I & II material", "Unlimited AI feedback", "Speaking simulator", "Priority support"], buttons: [{ text: "Get Pro", href: "#" }] },
|
|
{ id: "expert", badge: "Best", price: "$59/mo", subtitle: "Ultimate exam prep.", features: ["Everything in Pro", "1-on-1 tutoring sessions", "Customized learning path", "Performance analytics"], buttons: [{ text: "Get Expert", href: "#" }] },
|
|
]}
|
|
title="Simple Pricing"
|
|
description="Choose the right plan for your journey."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "q1", title: "Does this work for beginners?", content: "Yes! Talkpik adapts to any level, from complete beginner to advanced." },
|
|
{ id: "q2", title: "Can I cancel at any time?", content: "Absolutely. You can cancel your subscription whenever you wish." },
|
|
{ id: "q3", title: "How does AI help?", content: "Our AI analyzes your performance in real-time to provide personalized learning content and feedback." },
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Answers to commonly asked questions."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
text="Ready to ace your next TOPIK exam? Join Talkpik today."
|
|
buttons={[{ text: "Get Started", href: "#pricing" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }] },
|
|
{ items: [{ label: "Pricing", href: "#pricing" }, { label: "FAQ", href: "#faq" }] },
|
|
{ items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
|
]}
|
|
logoText="Talkpik"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |