Bob AI: Replace all components on the page with fresh alternatives f

src/app/page.tsx

@@ -10,6 +10,10 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import { Sparkles, Music, Mic, Headphones, Volume2, Star, CheckCircle, User, Heart, Globe, Award, Clock, Users, FileText, Speaker } from 'lucide-react';
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboard from "@/components/sections/hero/HeroBillboard";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroSplit from "@/components/sections/hero/HeroSplit";
 
 export default function LandingPage() {
   return (
@@ -25,32 +29,32 @@ export default function LandingPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="normal"
     >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          navItems={[
-            { name: "Hero", id: "hero-section" },
-            { name: "About", id: "about-section" },
-            { name: "Feature", id: "features-section" },
-            { name: "Team", id: "team-section" },
-            { name: "Testimonial", id: "testimonials-section" },
-            { name: "Contact", id: "contact-section" }
-          ]}
-          brandName="Harmony Studios"
-          button={{
-            text: "Book a Session",            href: "#contact-section"
-          }}
-        />
-      </div>
+        <div id="nav" data-section="nav">
+           <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Hero", id: "hero-section" },
+              { name: "About", id: "about-section" },
+              { name: "Feature", id: "features-section" },
+              { name: "Team", id: "team-section" },
+              { name: "Testimonial", id: "testimonials-section" },
+              { name: "Contact", id: "contact-section" }
+            ]}
+            brandName="Harmony Studios"
+            button={{
+              text: "Book a Session",            href: "#contact-section"
+            }}
+          />
+        </div>
 
-      <div id="hero-section" data-section="hero-section">
-        <HeroBillboardDashboard
-          title="Elevate Your Sound with Professional Recording"
-          description="At SoundCraft Studios, we blend cutting-edge technology with artistic vision to deliver pristine audio experiences. From indie artists to established professionals, we're here to bring your musical ideas to life."
-          background={{ variant: "radial-gradient" }}
-          tag="Premium Audio Production"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          buttons={[
+        <div id="hero-section" data-section="hero-section">
+            <HeroSplit
+             title="Elevate Your Sound with Professional Recording"
+             description="At SoundCraft Studios, we blend cutting-edge technology with artistic vision to deliver pristine audio experiences. From indie artists to established professionals, we're here to bring your musical ideas to life."
+             background={{ variant: "radial-gradient" }}
+             tag="Premium Audio Production"
+             tagIcon={Sparkles}
+             tagAnimation="slide-up"
+             buttons={[
             { text: "Explore Services", href: "#features-section" },
             { text: "Book a Session", href: "#contact-section" }
           ]}
@@ -114,7 +118,7 @@ export default function LandingPage() {
               ]
             },
             {
-              title: "Project Management",              description: "Seamless collaboration tools designed for remote and on-site projects.",              bentoComponent: "3d-task-list",              items: [
+              title: "Project Management",              description: "Seamless collaboration tools designed for remote and on-site projects.",              bentoComponent: "3d-task-list",              title: "Real-time Updates",              items: [
                 { icon: Clock, label: "Real-time Updates", time: "Instant" },
                 { icon: Users, label: "Team Coordination", time: "Efficient" },
                 { icon: FileText, label: "Version Control", time: "Secure" }