Update src/app/page.tsx

src/app/page.tsx

@@ -4,14 +4,13 @@ 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 FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
+import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Award, Shield, Zap } from "lucide-react";
+import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TextAbout from '@/components/sections/about/TextAbout';
 
 export default function LandingPage() {
   return (
@@ -29,149 +28,78 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Features",          id: "features"},
-        {
-          name: "Pricing",          id: "pricing"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "About", id: "about" },
+        { name: "Features", id: "features" },
+        { name: "Metrics", id: "metrics" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="AutoSite"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitKpi
-      background={{
-        variant: "plain"}}
+      <HeroOverlayTestimonial
       title="Build Your Website in Seconds"
       description="Transform a simple text prompt into a professional, fully functional website with our AI-powered generation platform."
-      kpis={[
-        {
-          value: "10s",          label: "Build Time"},
-        {
-          value: "5k+",          label: "Sites Created"},
-        {
-          value: "99.9%",          label: "Uptime"},
+      testimonials={[
+          { 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 }
       ]}
-      enableKpiAnimation={true}
+      buttons={[{ text: "Get Started", href: "#contact" }]}
       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">
-      <TextSplitAbout
+      <TextAbout
       useInvertedBackground={true}
       title="The Future of Web Development"
-      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."]}
+      buttons={[{ text: "Learn More" }]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSeven
+      <FeatureCardTwentySeven
       animationType="slide-up"
       textboxLayout="split"
-      useInvertedBackground={false}
-      features={[
-        {
-          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"},
-        {
-          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."
+      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."] },
+        { id: "f3", title: "Dynamic Content", descriptions: ["Intuitive dashboard for content updates."] },
+      ]}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardTwo
+      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">
-      <TestimonialCardSixteen
-      animationType="slide-up"
-      textboxLayout="split"
+      <TestimonialCardFifteen
+      testimonial="AutoSite has completely transformed how our agency delivers web projects."
+      rating={5}
+      author="Sarah Miller, CTO at TechInnovate"
+      ratingAnimation="slide-up"
+      avatarsAnimation="slide-up"
       useInvertedBackground={false}
-      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."
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg", alt: "Sarah" }]}
     />
   </div>
 
@@ -180,12 +108,8 @@ 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 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."},
+        { 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." },
       ]}
       title="Frequently Asked Questions"
       description="Quick answers to help you get started."
@@ -195,21 +119,13 @@ 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",          required: true,
-        },
-        {
-          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
-        },
+        { name: "name", type: "text", placeholder: "Your Name" },
+        { name: "email", type: "email", placeholder: "Email Address" },
       ]}
-      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>
@@ -217,29 +133,11 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
-          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"},
-          ],
-        },
+        { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
       ]}
-      bottomLeftText="© 2024 AutoSite. All rights reserved."
-      bottomRightText="Privacy Policy"
+      bottomLeftText="© 2025 AutoSite. All rights reserved."
+      bottomRightText=""
     />
   </div>
       </ReactLenis>