Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -2,15 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
+import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
-import { BarChart, Users, Zap } from "lucide-react";
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 
 export default function LandingPage() {
   return (
@@ -18,241 +17,114 @@ export default function LandingPage() {
         defaultButtonVariant="hover-magnetic"
         defaultTextAnimation="entrance-slide"
         borderRadius="rounded"
-        contentWidth="smallMedium"
+        contentWidth="medium"
-        sizing="large"
+        sizing="medium"
-        background="grid"
+        background="noiseDiagonalGradient"
-        cardStyle="outline"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="layered"
-        headingFontWeight="bold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleApple
-      navItems={[
+            navItems={[
-        {
+              { name: "Features", id: "features" },
-          name: "Home",          id: "hero"},
+              { name: "Detection Plans", id: "pricing" },
-        {
+              { name: "Support", id: "faq" },
-          name: "Curriculum",          id: "features"},
+            ]}
-        {
+            brandName="DeepGuard AI"
-          name: "Pricing",          id: "pricing"},
+          />
-        {
+        </div>
-          name: "Support",          id: "faq"},
-      ]}
-      brandName="LearnAI"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboard
+          <HeroBillboardRotatedCarousel
-      background={{
+            background={{ variant: "sparkles-gradient" }}
-        variant: "plain"}}
+            title="Unmask the Truth in Every Frame"
-      title="Master the Future of AI Learning"
+            description="Advanced AI-powered detection engine that identifies manipulated images and deepfake videos with industry-leading precision."
-      description="Accelerate your career with industry-leading AI curriculum, expert-led workshops, and hands-on projects designed for the next generation of engineers."
+            buttons={[{ text: "Scan Now", href: "#contact" }, { text: "View Tech Specs", href: "#features" }]}
-      buttons={[
+            carouselItems={[
-        {
+              { id: "1", videoSrc: "https://img.b2bpic.net/free-video/ai-detection-abstract.mp4" },
-          text: "Start Learning",          href: "#features"},
+              { id: "2", imageSrc: "https://img.b2bpic.net/free-photo/digital-security-shield.jpg" },
-        {
+              { id: "3", videoSrc: "https://img.b2bpic.net/free-video/neural-network.mp4" },
-          text: "Contact Us",          href: "#contact"},
+              { id: "4", imageSrc: "https://img.b2bpic.net/free-photo/ai-face-recognition.jpg" },
-      ]}
+              { id: "5", videoSrc: "https://img.b2bpic.net/free-video/binary-code-data.mp4" },
-      imageSrc="http://img.b2bpic.net/free-photo/3d-render-network-communications-with-flowing-connecting-lines-dots_1048-13580.jpg"
+              { id: "6", imageSrc: "https://img.b2bpic.net/free-photo/cyber-security-background.jpg" }
-      imageAlt="AI technology learning background"
+            ]}
-      avatars={[
+          />
-        {
+        </div>
-          src: "http://img.b2bpic.net/free-photo/waist-up-shot-thoughtful-young-woman-with-curly-hair-wears-spectacles-casual-clothes-carries-tablet-strolls-outside-urban-setting-clever-female-student-holds-modern-gadget-poses-street_273609-56927.jpg",          alt: "Student portrait 1"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-female-student-stands-with-digital-tablet-her-hands-outside_169016-25043.jpg",          alt: "Student portrait 2"},
-        {
-          src: "http://img.b2bpic.net/free-photo/person-indian-origin-having-fun_23-2150285308.jpg",          alt: "Student portrait 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/positive-guy-glasses-holding-tablet-looking_74855-3039.jpg",          alt: "Student portrait 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/tired-man-computer_23-2147717292.jpg",          alt: "Student portrait 5"},
-      ]}
-      avatarText="Join 10,000+ active learners"
-      marqueeItems={[
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-particle-design_1048-13547.jpg",          alt: "Particle tech design"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-render-abstract-cyber-particles-background-with-shallow-depth-field_1048-13249.jpg",          alt: "Cyber particles"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-flowing-particles_1048-14872.jpg",          alt: "Flowing particles"},
-        {
-          type: "image",          src: "http://img.b2bpic.net/free-photo/3d-abstract-digital-particle-waves-design-background_1048-12573.jpg",          alt: "Digital wave design"},
-        {
-          type: "text",          text: "AI-Powered Excellence"},
-      ]}
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardTwentyFive
+          <FeatureCardTwentyThree
-      animationType="slide-up"
+            animationType="blur-reveal"
-      textboxLayout="split"
+            textboxLayout="split"
-      useInvertedBackground={false}
+            useInvertedBackground={true}
-      features={[
+            title="Detection Capabilities"
-        {
+            description="Our proprietary models are trained on millions of samples to ensure peak performance."
-          title: "Foundation Pathways",          description: "Master core concepts through interactive sessions.",          icon: Zap,
+            features={[
-          mediaItems: [
+              { id: "f1", title: "Deepfake Video Detection", tags: ["Video", "AI"], imageSrc: "https://img.b2bpic.net/free-photo/video-content-analysis.jpg" },
-            {
+              { id: "f2", title: "Image Alteration Tracing", tags: ["Image", "Forensics"], imageSrc: "https://img.b2bpic.net/free-photo/photo-manipulation-detect.jpg" },
-              imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147868685.jpg",              imageAlt: "Foundations"},
+              { id: "f3", title: "Real-time Threat Monitoring", tags: ["Live", "Security"], imageSrc: "https://img.b2bpic.net/free-photo/live-stream-security.jpg" }
-            {
+            ]}
-              imageSrc: "http://img.b2bpic.net/free-photo/network-concept-with-squares_23-2148999176.jpg",              imageAlt: "Foundations Details"},
+          />
-          ],
+        </div>
-        },
-        {
-          title: "Analytics Dashboard",          description: "Track your progress with real-time performance tracking.",          icon: BarChart,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/public-examination-preparation-concept_23-2149369872.jpg",              imageAlt: "Analytics"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-41005.jpg",              imageAlt: "Analytics Details"},
-          ],
-        },
-        {
-          title: "Collaborative Mentorship",          description: "Learn side-by-side with industry experts.",          icon: Users,
-          mediaItems: [
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg?_wi=1",              imageAlt: "Mentorship"},
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/successful-female-entrepreneur-collaborates-with-her-experts-team_482257-122594.jpg",              imageAlt: "Mentorship Details"},
-          ],
-        },
-      ]}
-      title="Curriculum Built for Success"
-      description="Comprehensive pathways from foundational ML to advanced neural architectures."
-    />
-  </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="pricing" data-section="pricing">
-      <PricingCardEight
+          <PricingCardOne
-      animationType="slide-up"
+            animationType="depth-3d"
-      textboxLayout="default"
+            textboxLayout="split"
-      useInvertedBackground={true}
+            useInvertedBackground={false}
-      plans={[
+            title="Flexible Enterprise Plans"
-        {
+            description="Choose the plan that best protects your content footprint."
-          id: "basic",          badge: "Essential",          price: "$199",          subtitle: "For beginners",          buttons: [
+            plans={[
-            {
+              { id: "basic", badge: "Starter", price: "$99", subtitle: "Small content creators", features: ["100 scans/mo", "Basic detection", "Email support"] },
-              text: "Enroll Now"},
+              { id: "pro", badge: "Enterprise", price: "$499", subtitle: "Large-scale operations", features: ["Unlimited scans", "Advanced deepfake analysis", "API access", "Dedicated account manager"] }
-          ],
+            ]}
-          features: [
+          />
-            "Core ML concepts",            "Access to community",            "Monthly workshops"],
+        </div>
-        },
-        {
-          id: "pro",          badge: "Pro",          price: "$499",          subtitle: "For professionals",          buttons: [
-            {
-              text: "Enroll Now"},
-          ],
-          features: [
-            "Everything in Basic",            "Advanced project modules",            "Mentorship access",            "Industry certification"],
-        },
-      ]}
-      title="Flexible Learning Plans"
-      description="Choose the learning path that matches your current expertise."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSixteen
+          <TestimonialCardFive
-      animationType="slide-up"
+            textboxLayout="split"
-      textboxLayout="split"
+            useInvertedBackground={true}
-      useInvertedBackground={false}
+            title="Trusted by Industry Leaders"
-      testimonials={[
+            description="Security experts trust our platform for media authenticity verification."
-        {
+            testimonials={[
-          id: "1",          name: "Alice M.",          role: "Engineer",          company: "Tech",          rating: 5,
+              { id: "t1", name: "Sarah Chen", date: "Oct 2024", title: "Security Lead", quote: "DeepGuard AI has become an essential part of our verification stack.", tag: "Verification", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-professional-woman.jpg" }
-          imageSrc: "http://img.b2bpic.net/free-photo/young-man-using-portable-notebook-cafe-sitting-table-by-window-typing-something-frowning_343059-118.jpg?_wi=2"},
+            ]}
-        {
+          />
-          id: "2",          name: "Bob D.",          role: "Developer",          company: "Lab",          rating: 5,
+        </div>
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-man-sunglasses-sitting-along-with-laptop-white-space_140725-11140.jpg"},
-        {
-          id: "3",          name: "Charlie S.",          role: "Analyst",          company: "Growth",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/paralysed-disabled-invalid-handicapped-work-colleague-looking-front-tired-upset-caused-his-disabilities-working-economic-business-office_482257-2084.jpg"},
-        {
-          id: "4",          name: "Diana K.",          role: "Manager",          company: "Product",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-queer-girl-glasses-denim-jacket-standing-near-rainbow-wall-cross-hands-chest-smiling-camera-happy-lifestyle-urban-life-generation-concept_197531-30548.jpg"},
-        {
-          id: "5",          name: "Ethan R.",          role: "Researcher",          company: "Science",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167349.jpg"},
-      ]}
-      kpiItems={[
-        {
-          value: "10k+",          label: "Learners"},
-        {
-          value: "500+",          label: "Expert Tutors"},
-        {
-          value: "95%",          label: "Placement Rate"},
-      ]}
-      title="Voices of the Community"
-      description="Hear how LearnAI has transformed professional journeys."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqSplitMedia
+          <FaqBase
-      textboxLayout="split"
+            faqsAnimation="blur-reveal"
-      useInvertedBackground={true}
+            textboxLayout="split"
-      faqs={[
+            useInvertedBackground={false}
-        {
+            title="Frequently Asked Questions"
-          id: "q1",          title: "Do I need coding experience?",          content: "Our beginner courses start from the fundamentals."},
+            description="Answers to common questions about our detection technology."
-        {
+            faqs={[
-          id: "q2",          title: "Can I get a certificate?",          content: "All advanced programs include official industry certifications."},
+              { id: "faq1", title: "How accurate is the detector?", content: "Our system achieves 99.8% precision on industry-standard benchmark datasets." },
-        {
+              { id: "faq2", title: "Does it support live streaming?", content: "Yes, we provide an API specifically optimized for low-latency live media analysis." }
-          id: "q3",          title: "How long are the courses?",          content: "Programs typically last 8-12 weeks based on intensity."},
+            ]}
-      ]}
+          />
-      mediaAnimation="slide-up"
+        </div>
-      title="Common Inquiries"
-      description="Everything you need to know about starting your AI journey."
-      faqsAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg"
-      imageAlt="Digital tablet for online learning"
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplit
+          <ContactCenter
-      useInvertedBackground={false}
+            tag="Get Protected"
-      background={{
+            title="Ready to secure your media?"
-        variant: "plain"}}
+            description="Join the leaders in authenticity verification today."
-      tag="Get in touch"
+            background={{ variant: "canvas-reveal" }}
-      title="Start Your AI Journey"
+            useInvertedBackground={false}
-      description="Sign up for our newsletter to get industry news, tips, and course early access."
+          />
-      imageSrc="http://img.b2bpic.net/free-photo/arrow-symbol-illustrated_23-2151909716.jpg"
+        </div>
-      mediaAnimation="slide-up"
-      imageAlt="Abstract tech background blue"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterBaseCard
+          <FooterLogoEmphasis
-      logoText="LearnAI"
+            logoText="DeepGuard AI"
-      columns={[
+            columns={[{ items: [{ label: "Security Features" }, { label: "API Documentation" }, { label: "Privacy Policy" }] }]}
-        {
+          />
-          title: "Explore",          items: [
+        </div>
-            {
-              label: "Pathways",              href: "#features"},
-            {
-              label: "Pricing",              href: "#pricing"},
-          ],
-        },
-        {
-          title: "Company",          items: [
-            {
-              label: "About",              href: "#"},
-            {
-              label: "Careers",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
-          ],
-        },
-      ]}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #020617;
-  --card: #ffffff;
+  --card: #0f172a;
-  --foreground: #1c1c1c;
+  --foreground: #e2e8f0;
-  --primary-cta: #1f3251;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #0a0a0a;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
+  --accent: #f96b2f;
-  --background-accent: #a8cce8;
+  --background-accent: #1f7cff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);