Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -2,13 +2,13 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
@@ -22,15 +22,15 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="small"
         sizing="large"
-        background="none"
+        background="fluid"
-        cardStyle="gradient-radial"
+        cardStyle="glass-depth"
         primaryButtonStyle="radial-glow"
         secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarLayoutFloatingOverlay
       navItems={[
         { name: "About", id: "#about" },
         { name: "Features", id: "#features" },
@@ -43,9 +43,9 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
-      background={{ variant: "gradient-bars" }}
+      background={{ variant: "sparkles-gradient" }}
       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."
+      description="Talkpik uses advanced AI to personalize your TOPIK learning journey, helping you speak, read, and write like a native Korean speaker with immersive 3D-enhanced visuals."
       tag="Revolutionize Your Studies"
       buttons={[
         { text: "Get Started Free", href: "#pricing" },
@@ -53,12 +53,8 @@ export default function LandingPage() {
       ]}
       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: "https://img.b2bpic.net/free-photo/3d-ai-learning-concept_1258-151474.jpg", imageAlt: "3D AI interface" },
-        { 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: "https://img.b2bpic.net/free-photo/3d-korean-characters_1258-203949.jpg", imageAlt: "3D Characters" },
-        { 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>
@@ -68,45 +64,45 @@ export default function LandingPage() {
       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."]}
+        "Traditional learning is slow and impersonal. Talkpik adapts to your unique learning style, using 3D visualization and AI to pinpoint weaknesses.",        "With state-of-the-art AI, we simulate real test environments and provide instant, accurate feedback on your progress."]}
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardNine
-      animationType="slide-up"
+      animationType="blur-reveal"
       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" },
+          title: "Interactive 3D Test Simulator",          description: "Practice with past exams simulated in a fully immersive 3D space.",          phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/3d-phone-mockup_169016-66540.jpg" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/topview-notebook-mobile-phone-email-table-concept_53876-30091.jpg" }
+          phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/3d-app-interface_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" },
+          title: "AI Vocabulary Coach",          description: "AI-curated word banks presented with 3D flashcards.",          phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/3d-vocab-cards_23-2150576781.jpg" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/translator-dictionary-language-interpreter_53876-132693.jpg" }
+          phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/3d-language-tool_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" },
+          title: "Real-time Speaking AI",          description: "Instant pronunciation correction using 3D audio synthesis.",          phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/3d-mic-interface_141793-134660.jpg" },
-          phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/mobile-login-screen_23-2152004052.jpg" }
+          phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/3d-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."
+      description="Our AI-driven 3D-enhanced toolkit makes learning intuitive."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardOne
-      animationType="slide-up"
+      animationType="depth-3d"
       textboxLayout="split"
       gridVariant="bento-grid"
       useInvertedBackground={true}
       metrics={[
-        { id: "m1", value: "95%", title: "Pass Rate", description: "Users passing their target level.", icon: CheckCircle },
+        { id: "m1", value: "98%", title: "Success Rate", description: "High pass rates with AI learning.", icon: CheckCircle },
-        { id: "m2", value: "2x", title: "Learning Speed", description: "Faster than traditional courses.", icon: Zap },
+        { id: "m2", value: "3x", title: "Efficiency", description: "Faster mastery with 3D visuals.", icon: Zap },
-        { id: "m3", value: "50k+", title: "Active Learners", description: "Global community growing.", icon: Users },
+        { id: "m3", value: "75k+", title: "Active Learners", description: "Join the global Talkpik community.", icon: Users },
       ]}
       title="Learning That Works"
       description="Evidence-backed results for our users."
@@ -115,68 +111,68 @@ export default function LandingPage() {
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTwo
-      animationType="slide-up"
+      animationType="depth-3d"
       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: "1", name: "Min-ji Kim", role: "Student", testimonial: "The 3D environment makes learning feel so real. I love it!", imageSrc: "https://img.b2bpic.net/free-photo/user-1_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: "2", name: "David Smith", role: "Professional", testimonial: "Talkpik is clearly superior. Best AI tool for TOPIK.", imageSrc: "https://img.b2bpic.net/free-photo/user-2_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: "3", name: "Yuki Tanaka", role: "Student", testimonial: "Passed with ease. The feedback was very precise.", imageSrc: "https://img.b2bpic.net/free-photo/user-3_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"
+      title="Trusted by Thousands"
-      description="Join thousands of learners achieving their dreams."
+      description="Join our growing community."
     />
   </div>
 
   <div id="pricing" data-section="pricing">
       <PricingCardEight
-      animationType="slide-up"
+      animationType="scale-rotate"
       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: "starter", badge: "Essential", price: "$19/mo", subtitle: "Get started today.", features: ["Core AI Tools", "Basic 3D Lessons", "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: "pro", badge: "Popular", price: "$39/mo", subtitle: "Perfect for exams.", features: ["Full AI Features", "Advanced 3D Lessons", "Speaking Simulator"], 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: "#" }] },
+        { id: "expert", badge: "Best", price: "$59/mo", subtitle: "Ultimate Mastery.", features: ["1-on-1 Tutoring", "Full 3D Content", "Analytics Dashboard"], buttons: [{ text: "Get Expert", href: "#" }] },
       ]}
       title="Simple Pricing"
-      description="Choose the right plan for your journey."
+      description="Pick the plan that works for you."
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitText
-      textboxLayout="split"
+      sideTitle="FAQ"
-      useInvertedBackground={false}
+      sideDescription="Learn how our AI-powered 3D platform accelerates your journey."
       faqs={[
-        { id: "q1", title: "Does this work for beginners?", content: "Yes! Talkpik adapts to any level, from complete beginner to advanced." },
+        { id: "q1", title: "Is it suitable for beginners?", content: "Yes, the 3D-enhanced curriculum is designed for all levels to build a strong foundation with AI guidance." },
-        { id: "q2", title: "Can I cancel at any time?", content: "Absolutely. You can cancel your subscription whenever you wish." },
+        { id: "q2", title: "Can I cancel easily?", content: "Yes, subscription control is simple through your AI-personalized dashboard." },
-        { 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"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactSplitForm
-      useInvertedBackground={true}
+      title="Start Your AI Journey"
-      background={{ variant: "sparkles-gradient" }}
+      description="Get in touch for custom 3D training plans and AI insights."
-      text="Ready to ace your next TOPIK exam? Join Talkpik today."
+      inputs={[
-      buttons={[{ text: "Get Started", href: "#pricing" }]}
+        { name: "name", type: "text", placeholder: "Full Name" },
+        { name: "email", type: "email", placeholder: "Email Address" }
+      ]}
+      imageSrc="https://img.b2bpic.net/free-photo/3d-ai-contact-design.jpg"
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterBaseReveal
-      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"
+      columns={[
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
+        { title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "AI 3D Guide", href: "#" }] },
+      ]}
     />
   </div>
       </ReactLenis>