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 HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TextAbout from '@/components/sections/about/TextAbout';
-import { Award, Shield, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,234 +28,78 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        {
+        { name: "About", id: "about" },
-          name: "About",
+        { name: "Features", id: "features" },
-          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">
-      <HeroSplitKpi
+      <HeroOverlayTestimonial
-      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."
-      kpis={[
+      testimonials={[
-        {
+          { name: "Sarah Miller", handle: "@sarahm", testimonial: "The speed of deployment is unmatched.", rating: 5 },
-          value: "10s",
+          { name: "David Smith", handle: "@davids", testimonial: "Finally, a tool that understands my needs.", rating: 5 }
-          label: "Build Time",
-        },
-        {
-          value: "5k+",
-          label: "Sites Created",
-        },
-        {
-          value: "99.9%",
-          label: "Uptime",
-        },
       ]}
-      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={[
+      buttons={[{ text: "Learn More" }]}
-        "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">
-      <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
+      <TestimonialCardFifteen
-      animationType="slide-up"
+      testimonial="AutoSite has completely transformed how our agency delivers web projects."
-      textboxLayout="split"
+      rating={5}
+      author="Sarah Miller, CTO at TechInnovate"
+      ratingAnimation="slide-up"
+      avatarsAnimation="slide-up"
       useInvertedBackground={false}
-      testimonials={[
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/smiling-senior-engineer-solar-panels-plant-reading-documentation_482257-120499.jpg", alt: "Sarah" }]}
-        {
-          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>
 
@@ -265,21 +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." },
-          id: "q1",
+        { id: "q2", title: "Do I need coding skills?", content: "No, our AI handles the generation process." },
-          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."
@@ -289,29 +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" },
-          name: "name",
+        { name: "email", type: "email", placeholder: "Email Address" },
-          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>
@@ -319,43 +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" }] },
-          title: "Product",
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
-          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="© 2024 AutoSite. All rights reserved."
+      bottomLeftText="© 2025 AutoSite. All rights reserved."
-      bottomRightText="Privacy Policy"
+      bottomRightText=""
     />
   </div>
       </ReactLenis>