Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,12 +4,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import { Shield, Terminal, Users } from "lucide-react";
+import { Shield, Terminal, Users, BookOpen, ChevronRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,21 +30,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Dashboard",
+          name: "Dashboard",          id: "#hero"},
-          id: "#hero",
-        },
         {
-          name: "Academy",
+          name: "Academy",          id: "#features"},
-          id: "#features",
-        },
         {
-          name: "Commands",
+          name: "Commands",          id: "#commands"},
-          id: "#commands",
-        },
         {
-          name: "About",
+          name: "About",          id: "#about"},
-          id: "#about",
-        },
       ]}
       brandName="MHI Cyber Shield"
     />
@@ -53,107 +45,52 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitKpi
       background={{
-        variant: "animated-grid",
+        variant: "animated-grid"}}
-      }}
       title="MHI Cyber Shield"
       description="Elite cybersecurity education platform. Master the craft of digital defense with our curated toolkit and modules."
       kpis={[
         {
-          value: "12+",
+          value: "12+",          label: "Modules"},
-          label: "Modules",
-        },
         {
-          value: "180+",
+          value: "180+",          label: "Commands"},
-          label: "Commands",
-        },
         {
-          value: "24/7",
+          value: "24/7",          label: "Updates"},
-          label: "Updates",
-        },
       ]}
       enableKpiAnimation={true}
       buttons={[
         {
-          text: "Enter Academy",
+          text: "Enter Academy",          href: "#features"},
-          href: "#academy",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/laser-show-glowing-lines-neon-lights-with-black-background_181624-19576.jpg?_wi=1"
       mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637781.jpg",
-          alt: "user-1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041839.jpg",
-          alt: "user-2",
-        },
-        {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ljn10u",
-          alt: "user-3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637781.jpg",
-          alt: "user-4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041839.jpg",
-          alt: "user-5",
-        },
-      ]}
-      avatarText="Join 5,000+ elite defenders"
       marqueeItems={[
-        {
+        { type: "text", text: "ENCRYPTED" },
-          type: "text",
+        { type: "text", text: "SECURE" },
-          text: "ENCRYPTED",
+        { type: "text", text: "VULNERABILITY SCAN" },
-        },
+        { type: "text", text: "PENTEST READY" },
-        {
+        { type: "text", text: "ADAPTIVE DEFENSE" },
-          type: "text",
-          text: "SECURE",
-        },
-        {
-          type: "text",
-          text: "VULNERABILITY SCAN",
-        },
-        {
-          type: "text",
-          text: "PENTEST READY",
-        },
-        {
-          type: "text",
-          text: "ADAPTIVE DEFENSE",
-        },
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardThree
+      <TimelineHorizontalCardStack
-      animationType="slide-up"
+        title="Academy Learning Path"
-      textboxLayout="default"
+        description="Interactive, bilingual modules designed to take you from foundational concepts to advanced threat hunting."
-      gridVariant="three-columns-all-equal-width"
+        tag="Structured Curriculum"
-      useInvertedBackground={false}
+        tagIcon={BookOpen}
-      features={[
+        textboxLayout="split"
-        {
+        mediaItems={[
-          title: "Network Security",
+            { imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637781.jpg", imageAlt: "Network Security" },
-          description: "Master protocol analysis and network hardening.",
+            { imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041839.jpg", imageAlt: "Encryption Mastery" }
-          imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-concept-digital-art_23-2151637781.jpg",
+        ]}
-        },
+      >
-        {
+        <div className="space-y-6">
-          title: "Encryption Mastery",
+            <p><strong>Module 01: Foundations (English/Hindi)</strong><br/>Comprehensive introduction to networking and security protocols.</p>
-          description: "Understand cryptography and secure communication.",
+            <p><strong>Module 02: Advanced Defense</strong><br/>Deep dive into defensive strategies and automated scripts.</p>
-          imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041839.jpg",
+            <p><strong>Module 03: Ethical Hacking</strong><br/>Real-world labs and penetration testing interactive simulations.</p>
-        },
+        </div>
-        {
+      </TimelineHorizontalCardStack>
-          title: "Penetration Testing",
-          description: "Learn to identify vulnerabilities ethically.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ljn10u",
-        },
-      ]}
-      title="Cyber Academy"
-      description="Advance your skills with our expert-led modules, designed for real-world scenarios."
-    />
   </div>
 
   <div id="faq" data-section="faq">
@@ -162,23 +99,14 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "1",
+          id: "1",          title: "How to use copy feature?",          content: "Simply click any command to copy it directly to your clipboard."},
-          title: "How to use copy feature?",
-          content: "Simply click any command to copy it directly to your clipboard.",
-        },
         {
-          id: "2",
+          id: "2",          title: "Is this content bilingual?",          content: "Yes, toggle between English and Hindi using the language switch."},
-          title: "Is this content bilingual?",
-          content: "Yes, toggle between English and Hindi using the language switch.",
-        },
         {
-          id: "3",
+          id: "3",          title: "Is MHI free to use?",          content: "Yes, our educational platform is open to all security enthusiasts."},
-          title: "Is MHI free to use?",
-          content: "Yes, our educational platform is open to all security enthusiasts.",
-        },
       ]}
-      title="Command Center Support"
+      title="Academy Support"
-      description="Common questions regarding our terminal commands and tool usage."
+      description="Resources and FAQ to support your learning journey."
       faqsAnimation="slide-up"
     />
   </div>
@@ -192,23 +120,14 @@ export default function LandingPage() {
       description="Real-time statistics of our growing security ecosystem."
       metrics={[
         {
-          id: "m1",
+          id: "m1",          icon: Shield,
-          icon: Shield,
+          title: "Active Defense",          value: "99.9%"},
-          title: "Active Defense",
-          value: "99.9%",
-        },
         {
-          id: "m2",
+          id: "m2",          icon: Terminal,
-          icon: Terminal,
+          title: "Total Scripts",          value: "1.2k+"},
-          title: "Total Scripts",
-          value: "1.2k+",
-        },
         {
-          id: "m3",
+          id: "m3",          icon: Users,
-          icon: Users,
+          title: "Active Users",          value: "15k+"},
-          title: "Active Users",
-          value: "15k+",
-        },
       ]}
     />
   </div>
@@ -217,8 +136,7 @@ export default function LandingPage() {
       <ContactSplit
       useInvertedBackground={false}
       background={{
-        variant: "animated-grid",
+        variant: "animated-grid"}}
-      }}
       tag="Newsletter"
       title="Stay Informed"
       description="Get the latest security threats and news delivered straight to your terminal."
@@ -231,29 +149,19 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Toolkit",
+          title: "Toolkit",          items: [
-          items: [
             {
-              label: "Command Center",
+              label: "Command Center",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Academy",
+              label: "Academy",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Company",
+          title: "Company",          items: [
-          items: [
             {
-              label: "About Us",
+              label: "About Us",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Contact",
+              label: "Contact",              href: "#"},
-              href: "#",
-            },
           ],
         },
       ]}