Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -3,15 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
-import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import SplitAbout from '@/components/sections/about/SplitAbout';
-import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { BarChart2, Mic, TrendingUp } from "lucide-react";
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import { BarChart2, Mic, TrendingUp, Users, Target, Zap, ChevronRight, CheckCircle, Clock, LayoutTemplate } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -68,90 +68,68 @@ export default function LandingPage() {
             useInvertedBackground={false}
             names={["Google", "Microsoft", "Amazon", "Meta", "Tesla", "Adobe", "Apple"]}
             title="Practice for roles at top companies"
-            description="Get ready for the biggest tech firms with BauxAI."
+            description="Used by top candidates at Google, Microsoft, and more to land their dream roles."
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentyFive
+          <FeatureHoverPattern
             animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={true}
-            features={[
-              {
-                title: "AI Interviewer",                description: "Talk to an AI interviewer that adapts to your answers in real time.",                icon: Mic,
-                mediaItems: [
-                  { imageSrc: "http://img.b2bpic.net/free-photo/woman-using-transparent-tablet-innovative-technology_53876-97074.jpg" },
-                  { imageSrc: "http://img.b2bpic.net/free-photo/devices-arrangement-desk_23-2148994217.jpg" }
-                ]
-              },
-              {
-                title: "Smart Feedback",                description: "Get detailed feedback, strengths, weaknesses, and improvement tips.",                icon: BarChart2,
-                mediaItems: [
-                  { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-data-logo-template_23-2149202844.jpg" },
-                  { imageSrc: "http://img.b2bpic.net/free-vector/colorful-infographic-element-collection-with-flat-design_23-2147911062.jpg" }
-                ]
-              },
-              {
-                title: "Track Progress",                description: "Monitor your performance over time and see how you improve.",                icon: TrendingUp,
-                mediaItems: [
-                  { imageSrc: "http://img.b2bpic.net/free-photo/support-staff_1048-5016.jpg" },
-                  { imageSrc: "http://img.b2bpic.net/free-photo/infrastructure-construction-chip-link-concept_53876-124760.jpg" }
-                ]
-              }
-            ]}
             title="Everything you need to ace your interview"
             description="Powerful tools designed to make you interview-ready in record time."
+            features={[
+              { icon: Mic, title: "AI Interviewer", description: "Talk to an AI interviewer that adapts to your answers in real time." },
+              { icon: BarChart2, title: "Smart Feedback", description: "Get detailed feedback, strengths, weaknesses, and improvement tips." },
+              { icon: TrendingUp, title: "Progress Tracking", description: "Monitor your performance over time and see how you improve." },
+              { icon: Target, title: "Role Customization", description: "Tailor your interview to specific job roles and seniority levels." },
+              { icon: Zap, title: "Rapid Coaching", description: "Get instant tips and tricks to refine your speaking skills." }
+            ]}
+          />
+        </div>
+
+        <div id="how-it-works" data-section="how-it-works">
+          <MetricCardThree
+            title="Four Steps to Success"
+            description="Simple, effective process to guide your interview preparation."
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "1", icon: LayoutTemplate, title: "Select Role", value: "Step 1" },
+              { id: "2", icon: Mic, title: "Practice Live", value: "Step 2" },
+              { id: "3", icon: CheckCircle, title: "Get Feedback", value: "Step 3" },
+              { id: "4", icon: TrendingUp, title: "Improve Skills", value: "Step 4" }
+            ]}
           />
         </div>
 
         <div id="about" data-section="about">
-          <SplitAbout
-            textboxLayout="split"
-            useInvertedBackground={false}
+          <MetricSplitMediaAbout
             title="Real conversations. Real growth."
             description="Experience a real interview environment with voice interaction, live transcription, and AI feedback."
-            bulletPoints={[
-              { title: "Voice Interaction", description: "Engage in natural, real-time voice conversations." },
-              { title: "Live Transcript", description: "View your live transcript for precise feedback." },
-              { title: "Actionable Insights", description: "Deep analysis to help you land the job." }
-            ]}
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CUVcXZAYwpoHfPBdAZxnHVggYi/uploaded-1776440235375-e8ksunv3.png"
-            imageAlt="BauxAI interface preview"
-            mediaAnimation="blur-reveal"
-          />
-        </div>
-
-        <div id="metrics" data-section="metrics">
-          <MetricCardFourteen
-            useInvertedBackground={true}
-            title="Trusted by thousands"
-            tag="Performance Stats"
             metrics={[
-              { id: "m1", value: "10K+", description: "Active Users" },
-              { id: "m2", value: "50K+", description: "Interviews Taken" },
-              { id: "m3", value: "95%", description: "Positive Feedback" },
-              { id: "m4", value: "100+", description: "Roles Covered" }
+              { title: "Active Users", value: "10K+" },
+              { title: "Interviews", value: "50K+" }
             ]}
-            metricsAnimation="slide-up"
+            useInvertedBackground={true}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CUVcXZAYwpoHfPBdAZxnHVggYi/uploaded-1776440235375-e8ksunv3.png"
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardThirteen
+          <TestimonialCardTwo
             animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={false}
-            testimonials={[
-              { id: "1", name: "Ananya S.", handle: "Software Engineer", testimonial: "BauxAI helped me crack interviews I never thought I could.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-startup-office-coding_482257-119443.jpg" },
-              { id: "2", name: "Rohit M.", handle: "Product Manager", testimonial: "The voice interaction feels so real. It's like talking to a human.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-businesswoman-posing-indoors_74855-2005.jpg" },
-              { id: "3", name: "Priya K.", handle: "Data Scientist", testimonial: "I improved my confidence significantly. Highly recommended!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-professional-woman-having-coffee-break-her-full-working-day-she-holds-paper-cup-outdoors-near-business-building-while-relaxing-enjoying-her-beverage_158595-6863.jpg" },
-              { id: "4", name: "John D.", handle: "Frontend Developer", testimonial: "The feedback is incredibly detailed and actionable.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-jeweler-working-shop_23-2150914309.jpg" },
-              { id: "5", name: "Sarah W.", handle: "UX Designer", testimonial: "Exactly what I needed to prepare for the big tech interviews.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-modern-male_23-2148514900.jpg" }
-            ]}
-            showRating={true}
-            title="Loved by learners and professionals worldwide"
+            title="Loved by learners worldwide"
             description="See why top talent chooses BauxAI to master their interviews."
+            testimonials={[
+              { id: "1", name: "Ananya S.", role: "Software Engineer", testimonial: "BauxAI helped me crack interviews I never thought I could.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-woman-startup-office-coding_482257-119443.jpg" },
+              { id: "2", name: "Rohit M.", role: "Product Manager", testimonial: "The voice interaction feels so real. It's like talking to a human.", imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-businesswoman-posing-indoors_74855-2005.jpg" },
+              { id: "3", name: "Priya K.", role: "Data Scientist", testimonial: "I improved my confidence significantly. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/young-smiling-professional-woman-having-coffee-break-her-full-working-day-she-holds-paper-cup-outdoors-near-business-building-while-relaxing-enjoying-her-beverage_158595-6863.jpg" }
+            ]}
           />
         </div>
 
@@ -166,39 +144,21 @@ export default function LandingPage() {
             ]}
             buttonText="Start Free Interview"
             imageSrc="http://img.b2bpic.net/free-photo/register-enquiry-online-web-page-concept_53876-132294.jpg"
-            imageAlt="Register Enquiry Online"
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterBase
-            columns={[
-              {
-                title: "Product",                items: [
-                  { label: "Features", href: "#features" },
-                  { label: "How It Works", href: "#how-it-works" },
-                  { label: "Pricing", href: "#pricing" }
-                ]
-              },
-              {
-                title: "Company",                items: [
-                  { label: "About Us", href: "#about" },
-                  { label: "Blog", href: "#" },
-                  { label: "Contact", href: "#contact" }
-                ]
-              },
-              {
-                title: "Resources",                items: [
-                  { label: "Interview Tips", href: "#" },
-                  { label: "FAQ", href: "#" },
-                  { label: "Help Center", href: "#" }
-                ]
-              }
-            ]}
+          <FooterMedia
             logoText="BauxAI"
+            imageSrc="http://img.b2bpic.net/free-photo/abstract-background-design-with-geometric-shapes_53876-124967.jpg"
+            columns={[
+              { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "How It Works", href: "#how-it-works" }, { label: "Pricing", href: "#pricing" }] },
+              { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
+            ]}
           />
         </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}