Bob AI: Replace all sections on the page with different component va

src/app/page.tsx

@@ -11,6 +11,8 @@ import FaqDouble from '@/components/sections/faq/FaqDouble';
 import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Coffee, Star, Sparkles, MessageCircle, Heart } from "lucide-react";
+import { NavbarStyleApple } from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import { HeroSplit } from "@/components/sections/hero/HeroSplit";
 
 export default function CoffeePage() {
   return (
@@ -27,7 +29,7 @@ export default function CoffeePage() {
       headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleCentered
+        <NavbarStyleApple
           navItems={[
             { name: "Hero", id: "hero-section" },
             { name: "About", id: "about-section" },
@@ -43,7 +45,7 @@ export default function CoffeePage() {
       </div>
 
       <div id="hero-section" data-section="hero-section">
-        <HeroLogoBillboardSplit
+        <HeroSplit
           logoText="Brew & Bean"
           description="Where every cup tells a story. Experience the finest single-origin beans, carefully roasted to perfection in our cozy, earth-toned space."
           background={{ variant: "radial-gradient" }}