Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -4,13 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqBase from '@/components/sections/faq/FaqBase';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
+import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import TextAbout from '@/components/sections/about/TextAbout';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import { Award, Shield, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,78 +29,149 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleCentered
+      <NavbarStyleFullscreen
       navItems={[
-        { name: "About", id: "about" },
+        {
-        { name: "Features", id: "features" },
+          name: "About",          id: "about"},
-        { name: "Metrics", id: "metrics" },
+        {
-        { name: "Contact", id: "contact" },
+          name: "Features",          id: "features"},
+        {
+          name: "Pricing",          id: "pricing"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="AutoSite"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroOverlayTestimonial
+      <HeroSplitKpi
+      background={{
+        variant: "plain"}}
       title="Build Your Website in Seconds"
       description="Transform a simple text prompt into a professional, fully functional website with our AI-powered generation platform."
-      testimonials={[
+      kpis={[
-          { name: "Sarah Miller", handle: "@sarahm", testimonial: "The speed of deployment is unmatched.", rating: 5 },
+        {
-          { name: "David Smith", handle: "@davids", testimonial: "Finally, a tool that understands my needs.", rating: 5 }
+          value: "10s",          label: "Build Time"},
+        {
+          value: "5k+",          label: "Sites Created"},
+        {
+          value: "99.9%",          label: "Uptime"},
       ]}
-      buttons={[{ text: "Get Started", href: "#contact" }]}
+      enableKpiAnimation={true}
       imageSrc="http://img.b2bpic.net/free-photo/view-3d-gaming-device_23-2151005796.jpg"
+      imageAlt="AI Website Generator Interface"
+      mediaAnimation="slide-up"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg",          alt: "User 1"},
+        {
+          src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg",          alt: "User 2"},
+        {
+          src: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg",          alt: "User 3"},
+        {
+          src: "http://img.b2bpic.net/free-photo/luxurious-business-environment-used-corporate-culture-industry_482257-125612.jpg",          alt: "User 4"},
+        {
+          src: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",          alt: "User 5"},
+      ]}
+      avatarText="Loved by 5,000+ developers"
+      marqueeItems={[
+        {
+          type: "text",          text: "Ultra-Fast Deployment"},
+        {
+          type: "text-icon",          text: "Secure Infrastructure",          icon: Shield,
+        },
+        {
+          type: "text",          text: "AI-Driven Design"},
+        {
+          type: "text-icon",          text: "Optimized Performance",          icon: Zap,
+        },
+        {
+          type: "text",          text: "Global Scaling"},
+      ]}
     />
   </div>
 
   <div id="about" data-section="about">
-      <TextAbout
+      <TextSplitAbout
       useInvertedBackground={true}
       title="The Future of Web Development"
-      buttons={[{ text: "Learn More" }]}
+      description={[
+        "Our platform leverages advanced AI models to interpret natural language, translating your ideas into clean, professional code structure.",        "Forget long development cycles. Our system automates the design, deployment, and optimization process, giving you back time to focus on your core business."]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentySeven
+      <FeatureCardSeven
       animationType="slide-up"
       textboxLayout="split"
-      title="Powerful Features"
-      description="Everything you need to launch professional web projects at scale."
       useInvertedBackground={false}
       features={[
-        { id: "f1", title: "Instant Deployment", descriptions: ["Go live in seconds with built-in hosting."] },
+        {
-        { id: "f2", title: "Auto-UX Design", descriptions: ["Responsive layouts and accessibility built-in."] },
+          title: "Instant Deployment",          description: "Go live in seconds with built-in hosting and global CDN integration.",          imageSrc: "http://img.b2bpic.net/free-photo/data-center-admin-using-virtual-reality-setup-machine-learning-systems_482257-126322.jpg"},
-        { id: "f3", title: "Dynamic Content", descriptions: ["Intuitive dashboard for content updates."] },
+        {
+          title: "Auto-UX Design",          description: "Our AI handles responsive layout, typography, and accessibility best practices automatically.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-workspace-equipped-digital-design-photo-editing_482257-126934.jpg"},
+        {
+          title: "Dynamic Content",          description: "Easily update content and manage sections with our intuitive dashboard.",          imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896830.jpg"},
       ]}
+      title="Powerful Features"
+      description="Everything you need to launch professional web projects at scale."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardTwo
+      <MetricCardThree
-      gridVariant="uniform-all-items-equal"
       animationType="slide-up"
       textboxLayout="split"
+      useInvertedBackground={true}
+      metrics={[
+        {
+          id: "m1",          icon: Zap,
+          title: "Time Saved",          value: "95%"},
+        {
+          id: "m2",          icon: Shield,
+          title: "Security Rate",          value: "99.9%"},
+        {
+          id: "m3",          icon: Award,
+          title: "User Rating",          value: "4.9/5"},
+      ]}
       title="Proven Results"
       description="Our platform has accelerated project timelines for thousands of businesses."
-      useInvertedBackground={false}
-      metrics={[
-        { id: "m1", value: "95%", description: "Average reduction in development time." },
-        { id: "m2", value: "99.9%", description: "Industry-leading uptime and safety." },
-        { id: "m3", value: "4.9/5", description: "Highly recommended by developers." },
-      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardSixteen
-      testimonial="AutoSite has completely transformed how our agency delivers web projects."
+      animationType="slide-up"
-      rating={5}
+      textboxLayout="split"
-      author="Sarah Miller, CTO at TechInnovate"
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
       useInvertedBackground={false}
-      avatars={[{ src: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg", alt: "Sarah" }]}
+      testimonials={[
+        {
+          id: "t1",          name: "Sarah Miller",          role: "CTO",          company: "TechInnovate",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg"},
+        {
+          id: "t2",          name: "Jessica Chen",          role: "Lead Designer",          company: "CreativeOps",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg"},
+        {
+          id: "t3",          name: "David Smith",          role: "Product Manager",          company: "GrowthLogic",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-14708.jpg"},
+        {
+          id: "t4",          name: "Emily Davis",          role: "UX Researcher",          company: "UserFlow",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/luxurious-business-environment-used-corporate-culture-industry_482257-125612.jpg"},
+        {
+          id: "t5",          name: "Mark Wilson",          role: "CEO",          company: "StartUpDirect",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg"},
+      ]}
+      kpiItems={[
+        {
+          value: "10k+",          label: "Projects"},
+        {
+          value: "450+",          label: "Agencies"},
+        {
+          value: "1M+",          label: "Components"},
+      ]}
+      title="Trusted by Professionals"
+      description="See why industry leaders trust us for their web development needs."
     />
   </div>
 
@@ -108,8 +180,12 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        { id: "q1", title: "Is the code exportable?", content: "Yes, you can export your site code at any time." },
+        {
-        { id: "q2", title: "Do I need coding skills?", content: "No, our AI handles the generation process." },
+          id: "q1",          title: "Is the code exportable?",          content: "Yes, you can export your site code at any time for custom hosting."},
+        {
+          id: "q2",          title: "Do I need coding skills?",          content: "Absolutely not. Our platform generates production-ready code based on your prompt."},
+        {
+          id: "q3",          title: "Can I customize the design?",          content: "Yes, you can refine any generated section using our intuitive design editor."},
       ]}
       title="Frequently Asked Questions"
       description="Quick answers to help you get started."
@@ -119,13 +195,21 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactSplitForm
+      useInvertedBackground={false}
       title="Get Started Today"
       description="Ready to build your next project? Reach out and we'll help you start your journey."
-      useInvertedBackground={false}
       inputs={[
-        { name: "name", type: "text", placeholder: "Your Name" },
+        {
-        { name: "email", type: "email", placeholder: "Email Address" },
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
+        },
+        {
+          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
+        },
       ]}
+      textarea={{
+        name: "message",        placeholder: "Tell us about your project...",        rows: 4,
+        required: true,
+      }}
       imageSrc="http://img.b2bpic.net/free-photo/computer-keyboard-cup-tea-wooden-table-night_169016-50573.jpg"
     />
   </div>
@@ -133,11 +217,29 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+        {
-        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
+          title: "Product",          items: [
+            {
+              label: "Features",              href: "#features"},
+            {
+              label: "Pricing",              href: "#pricing"},
+            {
+              label: "Security",              href: "#"},
+          ],
+        },
+        {
+          title: "Company",          items: [
+            {
+              label: "About",              href: "#about"},
+            {
+              label: "Careers",              href: "#"},
+            {
+              label: "Contact",              href: "#contact"},
+          ],
+        },
       ]}
-      bottomLeftText="© 2025 AutoSite. All rights reserved."
+      bottomLeftText="© 2024 AutoSite. All rights reserved."
-      bottomRightText=""
+      bottomRightText="Privacy Policy"
     />
   </div>
       </ReactLenis>