src/app/blog/page.tsx

@@ -10,6 +10,18 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 export default function BlogPage() {
     const { posts, isLoading } = useBlogPosts();
 
+    const commonNavItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "#about" },
+      { name: "Menu", id: "#products" },
+      { name: "Experience", id: "#features" },
+      { name: "Community", id: "#testimonials" },
+      { name: "Contact", id: "#contact" },
+      { name: "Blog", id: "/blog" },
+      { name: "Shop", id: "/shop" }
+    ];
+    const commonButton = { text: "Order Now", href: "/shop" };
+
     return (
         <ThemeProvider
             defaultButtonVariant="directional-hover"
@@ -27,15 +39,8 @@ export default function BlogPage() {
                 <div id="nav" data-section="nav">
                     <NavbarLayoutFloatingOverlay
                         brandName="Init"
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "About", id: "about" },
-                            { name: "Menu", id: "products" },
-                            { name: "Experience", id: "features" },
-                            { name: "Community", id: "testimonials" },
-                            { name: "Contact", id: "contact" }
-                        ]}
-                        button={{ text: "Order Now", href: "#products" }}
+                        navItems={commonNavItems}
+                        button={commonButton}
                     />
                 </div>
 
@@ -69,4 +74,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

@@ -1406,4 +1406,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
@@ -12,6 +12,18 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import { Award, Coffee, Heart, Leaf, MapPin, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
 
 export default function CoffeePage() {
+  const commonNavItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "#about" },
+    { name: "Menu", id: "#products" },
+    { name: "Experience", id: "#features" },
+    { name: "Community", id: "#testimonials" },
+    { name: "Contact", id: "#contact" },
+    { name: "Blog", id: "/blog" },
+    { name: "Shop", id: "/shop" }
+  ];
+  const commonButton = { text: "Order Now", href: "/shop" };
+
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
@@ -28,24 +40,15 @@ export default function CoffeePage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Init"
-          navItems={[
-            { name: "About", id: "about" },
-            { name: "Menu", id: "products" },
-            { name: "Experience", id: "features" },
-            { name: "Community", id: "testimonials" },
-            { name: "Contact", id: "contact" }
-          ]}
-          button={{ text: "Order Now", href: "#products" }}
+          navItems={commonNavItems}
+          button={commonButton}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
-          title="Craft Coffee, Crafted Moments"
+        <HeroLogoBillboard
+          logoText="Init Coffee"
           description="Welcome to Init, where every cup tells a story. We source the finest beans from around the world and brew with passion to create the perfect coffee experience for our community."
-          tag="Premium Coffeehouse"
-          tagIcon={Coffee}
-          tagAnimation="slide-up"
           buttons={[
             { text: "Explore Our Menu", href: "#products" },
             { text: "Visit Us Today", href: "#contact" }
@@ -55,7 +58,7 @@ export default function CoffeePage() {
           videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770649506170-pxkn8ubj.mp4"
           imageAlt="Init Coffeehouse - Premium espresso preparation"
           mediaAnimation="blur-reveal"
-          imagePosition="right"
+          frameStyle="card"
           className="py-24"
         />
       </div>
@@ -216,4 +219,4 @@ export default function CoffeePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/shop/[id]/page.tsx

@@ -66,6 +66,18 @@ export default function ProductPage({ params }: ProductPageProps) {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
+    const commonNavItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "#about" },
+      { name: "Menu", id: "#products" },
+      { name: "Experience", id: "#features" },
+      { name: "Community", id: "#testimonials" },
+      { name: "Contact", id: "#contact" },
+      { name: "Blog", id: "/blog" },
+      { name: "Shop", id: "/shop" }
+    ];
+    const commonButton = { text: "Order Now", href: "/shop" };
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -84,11 +96,8 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingOverlay
                             brandName="Init"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            navItems={commonNavItems}
+                            button={commonButton}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -125,11 +134,8 @@ export default function ProductPage({ params }: ProductPageProps) {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingOverlay
                             brandName="Init"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                            navItems={commonNavItems}
+                            button={commonButton}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -173,11 +179,8 @@ export default function ProductPage({ params }: ProductPageProps) {
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingOverlay
                         brandName="Init"
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
-                        button={{ text: "Cart", onClick: () => setCartOpen(true) }}
+                        navItems={commonNavItems}
+                        button={commonButton}
                     />
                 </div>
                 <div id="productDetailCard" data-section="productDetailCard">
@@ -227,4 +230,4 @@ export default function ProductPage({ params }: ProductPageProps) {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -16,6 +16,18 @@ export default function ShopPage() {
         filters,
     } = useProductCatalog({ basePath: "/shop" });
 
+    const commonNavItems = [
+      { name: "Home", id: "/" },
+      { name: "About", id: "#about" },
+      { name: "Menu", id: "#products" },
+      { name: "Experience", id: "#features" },
+      { name: "Community", id: "#testimonials" },
+      { name: "Contact", id: "#contact" },
+      { name: "Blog", id: "/blog" },
+      { name: "Shop", id: "/shop" }
+    ];
+    const commonButton = { text: "Order Now", href: "/shop" };
+
     if (isLoading) {
         return (
             <ThemeProvider
@@ -34,11 +46,8 @@ export default function ShopPage() {
                     <div id="navbar" data-section="navbar">
                         <NavbarLayoutFloatingOverlay
                             brandName="Init"
-                            navItems={[
-                                { name: "Home", id: "/" },
-                                { name: "Shop", id: "/shop" }
-                            ]}
-                            button={{ text: "Cart", onClick: () => console.log("cart") }}
+                            navItems={commonNavItems}
+                            button={commonButton}
                         />
                     </div>
                     <main className="min-h-screen flex items-center justify-center pt-20">
@@ -74,11 +83,8 @@ export default function ShopPage() {
                 <div id="navbar" data-section="navbar">
                     <NavbarLayoutFloatingOverlay
                         brandName="Init"
-                        navItems={[
-                            { name: "Home", id: "/" },
-                            { name: "Shop", id: "/shop" }
-                        ]}
-                        button={{ text: "Cart", onClick: () => console.log("cart") }}
+                        navItems={commonNavItems}
+                        button={commonButton}
                     />
                 </div>
                 <div id="productCatalog" data-section="productCatalog">
@@ -103,4 +109,4 @@ export default function ShopPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}