Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -3,12 +3,12 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 
 export default function LandingPage() {
   return (
@@ -28,238 +28,97 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Features", id: "features" },
-          name: "Features",
+        { name: "Performance", id: "metrics" },
-          id: "features",
+        { name: "Insights", id: "testimonials" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "Metrics",
-          id: "metrics",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="CalenTech"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboard
+      <HeroSplitTestimonial
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
+      title="Ultra-Realistic Scheduling"
-      }}
+      description="A fluid, high-fidelity calendar interface that brings your time management to life with intuitive physics-based interactions."
-      title="Your Time, Perfectly Orchestrated"
-      description="Experience the next evolution of scheduling with an ultra-realistic calendar interface that syncs across every device in real-time."
-      buttons={[
-        {
-          text: "Get Started",
-          href: "#",
-        },
-        {
-          text: "View Demo",
-          href: "#",
-        },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/sound-button-closeup-laptop-keyboard_169016-62909.jpg"
-      imageAlt="Futuristic calendar app dashboard interface"
+      imageAlt="Fluid calendar interface"
-      mediaAnimation="slide-up"
+      testimonials={[
-      avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg",
+          name: "Alex Rivet",          handle: "@alexrivet",          testimonial: "The fluid physics make scheduling feel like a physical experience.",          rating: 5,
-          alt: "User 1",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg"
-        },
+        }
-        {
-          src: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
-          alt: "User 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
-          alt: "User 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg",
-          alt: "User 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096441.jpg",
-          alt: "User 5",
-        },
-      ]}
-      avatarText="Join 1.2M+ professionals"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Real-time Sync",
-        },
-        {
-          type: "text",
-          text: "Glassmorphism UI",
-        },
-        {
-          type: "text",
-          text: "Team Analytics",
-        },
-        {
-          type: "text",
-          text: "Global Availability",
-        },
-        {
-          type: "text",
-          text: "Secure Infrastructure",
-        },
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwelve
+      <FeatureCardTwentyFour
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="split"
       useInvertedBackground={true}
+      title="Fluid Interactions"
+      description="Designed for precision, our calendar uses real-time physics to make every drag and drop feel tangible."
       features={[
         {
-          id: "f1",
+          id: "physics",          title: "Realistic Dynamics",          author: "Physics Engine",          description: "Smooth motion that tracks your cursor with zero latency.",          tags: ["Responsive", "Physics-Enabled"],
-          label: "Sync",
+          imageSrc: "http://img.b2bpic.net/free-photo/technology-concept_1234-5678.jpg"
-          title: "Real-time Sync",
-          items: [
-            "Instant updates",
-            "Multi-platform sync",
-            "Offline access",
-          ],
         },
         {
-          id: "f2",
+          id: "calendar",          title: "Adaptive Grid",          author: "Layout Core",          description: "The grid adjusts automatically to your scheduling density.",          tags: ["Adaptive", "Real-Time"],
-          label: "Design",
+          imageSrc: "http://img.b2bpic.net/free-photo/layout-concept_8765-4321.jpg"
-          title: "Ultra-Realistic UI",
+        }
-          items: [
-            "Immersive glassmorphism",
-            "Intuitive gestures",
-            "Custom themes",
-          ],
-        },
-        {
-          id: "f3",
-          label: "Insights",
-          title: "Time Analytics",
-          items: [
-            "Deep insights",
-            "Project tracking",
-            "Efficiency metrics",
-          ],
-        },
       ]}
-      title="Designed for Efficiency"
-      description="Powerful tools built to keep your life balanced and your projects on track."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardFourteen
+      <MetricCardEleven
-      useInvertedBackground={false}
+      animationType="slide-up"
-      title="Performance at a Glance"
+      textboxLayout="split"
-      tag="Trusted by Thousands"
+      title="Precision Performance"
+      description="Track every millisecond of your day with professional-grade scheduling metrics."
+      useInvertedBackground={true}
       metrics={[
         {
-          id: "m1",
+          id: "perf",          value: "0ms",          title: "Latency",          description: "Zero latency input processing.",          imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg"
-          value: "1.2M+",
+        }
-          description: "Active Users Worldwide",
-        },
-        {
-          id: "m2",
-          value: "99.9%",
-          description: "Reliable Uptime Guaranteed",
-        },
-        {
-          id: "m3",
-          value: "500M+",
-          description: "Scheduled Events Synced",
-        },
       ]}
-      metricsAnimation="slide-up"
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
+      <TestimonialCardFifteen
-      animationType="slide-up"
+      testimonial="The most realistic calendar I've ever used. The fluidity is unmatched."
-      textboxLayout="split"
+      rating={5}
+      author="Sarah Chen"
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", alt: "Sarah" }]}
+      ratingAnimation="blur-reveal"
+      avatarsAnimation="slide-up"
       useInvertedBackground={true}
-      testimonials={[
-        {
-          id: "1",
-          name: "Alex Rivet",
-          handle: "@alexrivet",
-          testimonial: "The ultra-realistic UI makes planning feel natural and seamless.",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5104.jpg",
-        },
-        {
-          id: "2",
-          name: "Sarah Chen",
-          handle: "@schen_dev",
-          testimonial: "Absolutely the cleanest calendar app I've used. Efficiency is redefined.",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiley-tattoo-artist-indoors-side-view_23-2149445974.jpg",
-        },
-        {
-          id: "3",
-          name: "Markus Weber",
-          handle: "@m_weber",
-          testimonial: "Syncing is perfect and the design is simply top-notch.",
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg",
-        },
-        {
-          id: "4",
-          name: "Priya Singh",
-          handle: "@psingh",
-          testimonial: "Finally, a calendar that understands how I work. Essential for my team.",
-          imageSrc: "http://img.b2bpic.net/free-photo/working-man_1098-18366.jpg",
-        },
-        {
-          id: "5",
-          name: "Luca Moretti",
-          handle: "@luca_m",
-          testimonial: "A masterpiece of UX design. I can't imagine my workflow without it.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096441.jpg",
-        },
-      ]}
-      title="Loved by Professionals"
-      description="Discover why millions of users trust our calendar to manage their daily schedules."
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplit
+      tag="Join Now"
+      title="Start Your Fluid Journey"
+      description="Sign up today and experience scheduling redefined."
+      mediaAnimation="blur-reveal"
+      background={{ variant: "gradient-bars" }}
       useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
-      tag="Ready to get started?"
-      title="Join the Future of Scheduling"
-      description="Sign up today and get 30 days of premium features on us."
-      imageSrc="http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201858.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="CalenTech"
-      leftLink={{
+      leftLink={{ text: "Terms", href: "#" }}
-        text: "Terms of Service",
+      rightLink={{ text: "Privacy", href: "#" }}
-        href: "#",
-      }}
-      rightLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}