Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -12,6 +12,7 @@ import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatin
 import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import CardStack from '@/components/cardStack/CardStack';
 import { CheckCircle, Shield, Sparkles } from "lucide-react";
 
 export default function LandingPage() {
@@ -32,22 +33,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Examples", id: "examples" },
-          id: "hero",
+        { name: "Subjects", id: "features" },
-        },
+        { name: "Pricing", id: "pricing" },
-        {
+        { name: "Support", id: "faq" },
-          name: "Subjects",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Support",
-          id: "faq",
-        },
       ]}
       brandName="EduLogic"
     />
@@ -55,51 +45,47 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient",
-      }}
       title="Master the Science of Thinking"
       description="EduLogic Chatbot makes Pure Math, Computer Science, and Business Enterprise fun through interactive, explained, and gamified learning."
-      buttons={[
+      buttons={[{ text: "Start Learning", href: "#features" }]}
-        {
-          text: "Start Learning",
-          href: "#features",
-        },
-      ]}
       mediaItems={[
-        {
+        { imageSrc: "http://img.b2bpic.net/free-vector/pixel-rain-abstract-background_23-2148381456.jpg?_wi=1", imageAlt: "tech" },
-          imageSrc: "http://img.b2bpic.net/free-vector/pixel-rain-abstract-background_23-2148381456.jpg?_wi=1",
+        { imageSrc: "http://img.b2bpic.net/free-photo/goth-student-attending-school_23-2150576778.jpg", imageAlt: "tech" },
-          imageAlt: "math equation visualization tech",
+        { imageSrc: "http://img.b2bpic.net/free-photo/high-speed-optical-cable-fast-data-broadband-transfer-fiber-connection-abstract-tech-background_272375-5412.jpg", imageAlt: "tech" }
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/goth-student-attending-school_23-2150576778.jpg",
-          imageAlt: "math equation visualization tech",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-speed-optical-cable-fast-data-broadband-transfer-fiber-connection-abstract-tech-background_272375-5412.jpg",
-          imageAlt: "math equation visualization tech",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-female-teacher-finishing-draw-her-chart-mathematics-class-blackboard_346278-1175.jpg",
-          imageAlt: "Young female teacher finishing to draw her chart for a mathematics class at the blackboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/whiteboard-with-math_1160-868.jpg",
-          imageAlt: "Whiteboard with math",
-        },
       ]}
       mediaAnimation="slide-up"
     />
   </div>
 
+  <div id="examples" data-section="examples">
+      <CardStack 
+        title="Explained Examples" 
+        description="Step-by-step solutions for complex topics."
+        textboxLayout="split"
+        animationType="slide-up"
+      >
+        <div className="grid gap-6">
+          <div className="p-6 rounded-xl border bg-card">
+             <h3 className="text-xl font-bold mb-2">Calculus: Limits</h3>
+             <p className="text-sm text-muted-foreground mb-4">A clear explanation of limit laws with guided steps.</p>
+             <div className="bg-accent p-4 rounded text-xs font-mono">Step 1: Simplify expression...</div>
+          </div>
+          <div className="p-6 rounded-xl border bg-card">
+             <h3 className="text-xl font-bold mb-2">Algorithms: Big O</h3>
+             <p className="text-sm text-muted-foreground mb-4">Breaking down time complexity for common sorting tasks.</p>
+             <div className="bg-accent p-4 rounded text-xs font-mono">Step 1: Count basic operations...</div>
+          </div>
+        </div>
+      </CardStack>
+  </div>
+
   <div id="about" data-section="about">
       <TextSplitAbout
       useInvertedBackground={false}
       title="Your AI Tutor for Life"
       description={[
-        "Complex topics don't have to be boring. EduLogic breaks down abstract mathematics, coding logic, and business strategy into actionable, daily lessons.",
+        "Complex topics don't have to be boring. EduLogic breaks down abstract mathematics, coding logic, and business strategy into actionable, daily lessons.",        "Our intelligent chatbot provides step-by-step examples, transforming study time into an engaging experience that sticks."]}
-        "Our intelligent chatbot provides step-by-step examples, transforming study time into an engaging experience that sticks.",
-      ]}
     />
   </div>
 
@@ -109,36 +95,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "1", label: "Math", title: "Pure Mathematics", items: ["Set Theory & Logic", "Calculus Essentials", "Interactive Proofs"] },
-          id: "1",
+        { id: "2", label: "CS", title: "Computer Science", items: ["Algorithms & Data", "Database Management", "System Architecture"] },
-          label: "Math",
+        { id: "3", label: "Biz", title: "Business Enterprise", items: ["Market Analysis", "Strategic Planning", "Project Management"] },
-          title: "Pure Mathematics",
-          items: [
-            "Set Theory & Logic",
-            "Calculus Essentials",
-            "Interactive Proofs",
-          ],
-        },
-        {
-          id: "2",
-          label: "CS",
-          title: "Computer Science",
-          items: [
-            "Algorithms & Data",
-            "Database Management",
-            "System Architecture",
-          ],
-        },
-        {
-          id: "3",
-          label: "Biz",
-          title: "Business Enterprise",
-          items: [
-            "Market Analysis",
-            "Strategic Planning",
-            "Project Management",
-          ],
-        },
       ]}
       title="Core Learning Pillars"
       description="We specialize in three critical domains that build the foundation for any modern innovator."
@@ -151,38 +110,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
+        { id: "1", title: "Standard", price: "$19", period: "/mo", features: ["Chatbot Access", "Math Modules", "Basic CS"], button: { text: "Join Now" }, imageSrc: "http://img.b2bpic.net/free-photo/man-hanging-out-with-robot_23-2151112184.jpg" },
-          id: "1",
+        { id: "2", title: "Pro", price: "$49", period: "/mo", features: ["All Modules", "Business Skills", "Personal AI Tutor"], button: { text: "Get Pro" }, imageSrc: "http://img.b2bpic.net/free-vector/pixel-rain-abstract-background_23-2148381456.jpg?_wi=2" },
-          title: "Standard",
-          price: "$19",
-          period: "/mo",
-          features: [
-            "Chatbot Access",
-            "Math Modules",
-            "Basic CS",
-          ],
-          button: {
-            text: "Join Now",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/man-hanging-out-with-robot_23-2151112184.jpg",
-          imageAlt: "intelligent chatbot mascot professional",
-        },
-        {
-          id: "2",
-          title: "Pro",
-          price: "$49",
-          period: "/mo",
-          features: [
-            "All Modules",
-            "Business Skills",
-            "Personal AI Tutor",
-          ],
-          button: {
-            text: "Get Pro",
-          },
-          imageSrc: "http://img.b2bpic.net/free-vector/pixel-rain-abstract-background_23-2148381456.jpg?_wi=2",
-          imageAlt: "intelligent chatbot mascot professional",
-        },
       ]}
       title="Choose Your Path"
       description="Get access to our complete curriculum."
@@ -196,46 +125,8 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "Alex R.", role: "CS Student", company: "TechUni", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-table-with-book_273609-12711.jpg" },
-          id: "1",
+        { id: "2", name: "Sam P.", role: "Startup founder", company: "GrowthX", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing_23-2148634562.jpg" },
-          name: "Alex R.",
-          role: "CS Student",
-          company: "TechUni",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-table-with-book_273609-12711.jpg",
-        },
-        {
-          id: "2",
-          name: "Sam P.",
-          role: "Startup founder",
-          company: "GrowthX",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-posing_23-2148634562.jpg",
-        },
-        {
-          id: "3",
-          name: "Jamie L.",
-          role: "Math Major",
-          company: "MathLabs",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/pleased-woman-with-light-brown-skin-posing-with-crossed-arms-smiling-while-people-her-working-indoor-portrait-tired-students-with-laptop-african-curly-girl_197531-3760.jpg",
-        },
-        {
-          id: "4",
-          name: "Chris W.",
-          role: "Data Analyst",
-          company: "DataCorp",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-book_23-2149535705.jpg",
-        },
-        {
-          id: "5",
-          name: "Morgan D.",
-          role: "Software Dev",
-          company: "DevHub",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-charming-female-isolated_176474-79525.jpg",
-        },
       ]}
       title="Learner Success Stories"
       description="See how students transform their skills."
@@ -249,27 +140,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "1", value: "10k+", title: "Concepts Explained", description: "Across Math & CS", icon: Sparkles },
-          id: "1",
+        { id: "2", value: "95%", title: "User Engagement", description: "Learning made fun", icon: CheckCircle },
-          value: "10k+",
+        { id: "3", value: "24/7", title: "AI Availability", description: "Study whenever", icon: Shield },
-          title: "Concepts Explained",
-          description: "Across Math & CS",
-          icon: Sparkles,
-        },
-        {
-          id: "2",
-          value: "95%",
-          title: "User Engagement",
-          description: "Learning made fun",
-          icon: CheckCircle,
-        },
-        {
-          id: "3",
-          value: "24/7",
-          title: "AI Availability",
-          description: "Study whenever",
-          icon: Shield,
-        },
       ]}
       title="Learning Impact"
       description="Track your progress with measurable growth."
@@ -281,21 +154,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "How does it work?", content: "Our AI chatbot uses contextual learning to explain topics interactively." },
-          id: "1",
+        { id: "2", title: "Is it for beginners?", content: "Yes, lessons are tailored to your skill level, starting from basics." },
-          title: "How does it work?",
-          content: "Our AI chatbot uses contextual learning to explain topics interactively.",
-        },
-        {
-          id: "2",
-          title: "Is it for beginners?",
-          content: "Yes, lessons are tailored to your skill level, starting from basics.",
-        },
-        {
-          id: "3",
-          title: "Can I cancel anytime?",
-          content: "Yes, subscriptions are month-to-month.",
-        },
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know about EduLogic."
@@ -309,16 +169,8 @@ export default function LandingPage() {
       title="Get Started with EduLogic"
       description="Have questions or ready to learn? Contact us today."
       inputs={[
-        {
+        { name: "name", type: "text", placeholder: "Your Name" },
-          name: "name",
+        { name: "email", type: "email", placeholder: "Email Address" },
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/control-table-spacecraft-from-inside_23-2151828182.jpg"
     />
@@ -327,32 +179,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[
-        {
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
-          title: "Product",
+        { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
       ]}
       logoText="EduLogic"
     />