diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 5c63286..ff8a4da 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -26,9 +26,7 @@ export default function BlogPage() {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleCentered
-                        navItems={[
-                            { name: "Home", id: "/" },
-                        ]}
+                        navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
                         button={{ text: "Shop Now", href: "/shop" }}
                         brandName="Hookah Haven"
                         className="py-4"
@@ -59,22 +57,22 @@ export default function BlogPage() {
                             columns={[
                                 {
                                     title: "Shop",                                    items: [
-                                        { label: "Hookahs", href: "products" },
-                                        { label: "Tobacco", href: "products" },
-                                        { label: "Charcoal", href: "products" },
-                                        { label: "Accessories", href: "products" },
+                                        { label: "Hookahs", href: "/shop" },
+                                        { label: "Tobacco", href: "/shop" },
+                                        { label: "Charcoal", href: "/shop" },
+                                        { label: "Accessories", href: "/shop" },
                                     ],
                                 },
                                 {
                                     title: "About Us",                                    items: [
-                                        { label: "Our Story", href: "about" },
-                                        { label: "Customer Reviews", href: "testimonials" },
+                                        { label: "Our Story", href: "#about" },
+                                        { label: "Customer Reviews", href: "#testimonials" },
                                     ],
                                 },
                                 {
                                     title: "Support",                                    items: [
-                                        { label: "FAQ", href: "faq" },
-                                        { label: "Contact", href: "contact" },
+                                        { label: "FAQ", href: "#faq" },
+                                        { label: "Contact", href: "#contact" },
                                         { label: "Shipping & Returns", href: "#" },
                                     ],
                                 },
@@ -85,4 +83,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ef59b0b..df39ad2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@
 import React from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroCentered from '@/components/sections/hero/HeroCentered';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
@@ -29,23 +29,33 @@ export default function LandingPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered 
-          navItems={[{name:"Home",id:"hero"},{name:"Products",id:"products"},{name:"About",id:"about"},{name:"Testimonials",id:"testimonials"},{name:"FAQ",id:"faq"}]} 
-          button={{text:"Shop Now",href:"products"}} 
+          navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
+          button={{text:"Shop Now",href:"/shop"}}
           brandName="Hookah Haven" 
           className="py-4" 
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroCentered 
-          title="Unwind with Hookah Haven" 
-          description="Discover the finest selection of hookah, tobacco, and accessories. Elevate your smoking experience." 
-          background={{variant: 'radial-gradient'}} 
-          avatars={[{src:"https://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg",alt:"User 1"},{src:"https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",alt:"User 2"},{src:"https://img.b2bpic.net/free-photo/women-shopping-buying-consumer-products-customer-day-celebration_23-2151623394.jpg",alt:"User 3"}]} 
-          avatarText="Loved by thousands of enthusiasts" 
-          buttons={[{text:"Explore Our Collection",href:"products"},{text:"Learn More",href:"about"}]} 
-          buttonAnimation="slide-up" 
-          className="h-svh lg:h-screen" 
+        <HeroSplitKpi
+          title="Unwind with Hookah Haven"
+          description="Discover the finest selection of hookah, tobacco, and accessories. Elevate your smoking experience."
+          background={{ variant: 'radial-gradient' }}
+          kpis={[
+            { value: '500+', label: 'Premium Products' },
+            { value: '10K+', label: 'Happy Customers' },
+            { value: 'Fast', label: 'Delivery' },
+          ]}
+          enableKpiAnimation={true}
+          buttons={[{ text: "Explore Our Collection", href: "/shop" }, { text: "Learn More", href: "#about" }]} 
+          buttonAnimation="slide-up"
+          avatars={[{ src: "https://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-happy_1298-197.jpg", alt: "User 1" }, { src: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", alt: "User 2" }, { src: "https://img.b2bpic.net/free-photo/women-shopping-buying-consumer-products-customer-day-celebration_23-2151623394.jpg", alt: "User 3" }]} 
+          avatarText="Loved by thousands of enthusiasts"
+          imageSrc="https://img.b2bpic.net/free-photo/pensive-tattooed-man-is-sitting-armchair-starting-smoke-hookah-there-are-nice-vapour_613910-20763.jpg"
+          imageAlt="Man enjoying hookah"
+          imagePosition="right"
+          mediaAnimation="slide-up"
+          className="h-svh lg:h-screen"
         />
       </div>
 
@@ -65,7 +75,7 @@ export default function LandingPage() {
         <InlineImageSplitTextAbout 
           heading={[{type:'text',content:"Bringing you the "},{type:'image',src:"https://img.b2bpic.net/free-photo/pensive-tattooed-man-is-sitting-armchair-starting-smoke-hookah-there-are-nice-vapour_613910-20763.jpg",alt:"Hookah smoke"},{type:'text',content:" best of hookah culture."}]} 
           useInvertedBackground={true} 
-          buttons={[{text:"Our Story",href:"#about"},{text:"Shop Now",href:"products"}]} 
+          buttons={[{text:"Our Story",href:"#about"},{text:"Shop Now",href:"/shop"}]} 
           buttonAnimation="slide-up" 
         />
       </div>
@@ -110,7 +120,7 @@ export default function LandingPage() {
           tagIcon={Mail} 
           title="Ready to Elevate Your Hookah Experience?" 
           description="Whether you have questions, need recommendations, or want to place a bulk order, our team is here to help." 
-          buttons={[{text:"Contact Us",href:"#contact"},{text:"Shop All Products",href:"products"}]} 
+          buttons={[{text:"Contact Us",href:"#contact"},{text:"Shop All Products",href:"/shop"}]} 
           background={{variant: 'sparkles-gradient'}} 
           useInvertedBackground={true} 
         />
@@ -119,10 +129,10 @@ export default function LandingPage() {
       <div id="footer" data-section="footer">
         <FooterBaseCard 
           logoText="Hookah Haven" 
-          columns={[{title:"Shop",items:[{label:"Hookahs",href:"products"},{label:"Tobacco",href:"products"},{label:"Charcoal",href:"products"},{label:"Accessories",href:"products"}]},{title:"About Us",items:[{label:"Our Story",href:"about"},{label:"Customer Reviews",href:"testimonials"}]},{title:"Support",items:[{label:"FAQ",href:"faq"},{label:"Contact",href:"contact"},{label:"Shipping & Returns",href:"#"}]}]} 
+          columns={[{title:"Shop",items:[{label:"Hookahs",href:"/shop"},{label:"Tobacco",href:"/shop"},{label:"Charcoal",href:"/shop"},{label:"Accessories",href:"/shop"}]},{title:"About Us",items:[{label:"Our Story",href:"#about"},{label:"Customer Reviews",href:"#testimonials"}]},{title:"Support",items:[{label:"FAQ",href:"#faq"},{label:"Contact",href:"#contact"},{label:"Shipping & Returns",href:"#"}]}]} 
           copyrightText="© 2024 Hookah Haven. All rights reserved." 
         />
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/shop/[id]/page.tsx b/src/app/shop/[id]/page.tsx
index 72089a6..a950ace 100644
--- a/src/app/shop/[id]/page.tsx
+++ b/src/app/shop/[id]/page.tsx
@@ -91,7 +91,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarStyleCentered
-                            navItems={[{ name: "Home", id: "/" }]}
+                            navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
                             brandName="Hookah Haven"
                             className="py-4"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -105,7 +105,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <div id="footer" data-section="footer">
                         <FooterBaseCard 
                             logoText="Hookah Haven"
-                            columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "products" }, { label: "Tobacco", href: "products" }, { label: "Charcoal", href: "products" }, { label: "Accessories", href: "products" }] }, { title: "About Us", items: [{ label: "Our Story", href: "about" }, { label: "Customer Reviews", href: "testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "faq" }, { label: "Contact", href: "contact" }, { label: "Shipping & Returns", href: "#" }] }]}
+                            columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "/shop" }, { label: "Tobacco", href: "/shop" }, { label: "Charcoal", href: "/shop" }, { label: "Accessories", href: "/shop" }] }, { title: "About Us", items: [{ label: "Our Story", href: "#about" }, { label: "Customer Reviews", href: "#testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] }]} 
                             copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
@@ -131,7 +131,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarStyleCentered
-                            navItems={[{ name: "Home", id: "/" }]}
+                            navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
                             brandName="Hookah Haven"
                             className="py-4"
                             button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -153,7 +153,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                     <div id="footer" data-section="footer">
                         <FooterBaseCard 
                             logoText="Hookah Haven"
-                            columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "products" }, { label: "Tobacco", href: "products" }, { label: "Charcoal", href: "products" }, { label: "Accessories", href: "products" }] }, { title: "About Us", items: [{ label: "Our Story", href: "about" }, { label: "Customer Reviews", href: "testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "faq" }, { label: "Contact", href: "contact" }, { label: "Shipping & Returns", href: "#" }] }]}
+                            columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "/shop" }, { label: "Tobacco", href: "/shop" }, { label: "Charcoal", href: "/shop" }, { label: "Accessories", href: "/shop" }] }, { title: "About Us", items: [{ label: "Our Story", href: "#about" }, { label: "Customer Reviews", href: "#testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] }]} 
                             copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
@@ -178,7 +178,7 @@ function ProductPageContent({ params }: ProductPageProps) {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleCentered
-                        navItems={[{ name: "Home", id: "/" }]}
+                        navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
                         brandName="Hookah Haven"
                         className="py-4"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
@@ -223,11 +223,11 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <div id="footer" data-section="footer">
                     <FooterBaseCard 
                         logoText="Hookah Haven"
-                        columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "products" }, { label: "Tobacco", href: "products" }, { label: "Charcoal", href: "products" }, { label: "Accessories", href: "products" }] }, { title: "About Us", items: [{ label: "Our Story", href: "about" }, { label: "Customer Reviews", href: "testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "faq" }, { label: "Contact", href: "contact" }, { label: "Shipping & Returns", href: "#" }] }]}
-                        copyrightText="© 2024 Hookah Haven. All rights reserved."
-                    />
-                </div>
+                        columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "/shop" }, { label: "Tobacco", href: "/shop" }, { label: "Charcoal", href: "/shop" }, { label: "Accessories", href: "/shop" }] }, { title: "About Us", items: [{ label: "Our Story", href: "#about" }, { label: "Customer Reviews", href: "#testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] }]} 
+                            copyrightText="© 2024 Hookah Haven. All rights reserved."
+                        />
+                    </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}
\ No newline at end of file
diff --git a/src/app/shop/page.tsx b/src/app/shop/page.tsx
index 2952e8c..4dd964a 100644
--- a/src/app/shop/page.tsx
+++ b/src/app/shop/page.tsx
@@ -34,7 +34,7 @@ function ShopPageContent() {
                 <ReactLenis root>
                     <div id="nav" data-section="nav">
                         <NavbarStyleCentered
-                            navItems={[{ name: "Home", id: "/" }]}
+                            navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
                             brandName="Hookah Haven"
                             className="py-4"
                             button={{ text: "Cart" }}
@@ -48,7 +48,7 @@ function ShopPageContent() {
                     <div id="footer" data-section="footer">
                         <FooterBaseCard 
                             logoText="Hookah Haven"
-                            columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "products" }, { label: "Tobacco", href: "products" }, { label: "Charcoal", href: "products" }, { label: "Accessories", href: "products" }] }, { title: "About Us", items: [{ label: "Our Story", href: "about" }, { label: "Customer Reviews", href: "testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "faq" }, { label: "Contact", href: "contact" }, { label: "Shipping & Returns", href: "#" }] }]}
+                            columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "/shop" }, { label: "Tobacco", href: "/shop" }, { label: "Charcoal", href: "/shop" }, { label: "Accessories", href: "/shop" }] }, { title: "About Us", items: [{ label: "Our Story", href: "#about" }, { label: "Customer Reviews", href: "#testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] }]} 
                             copyrightText="© 2024 Hookah Haven. All rights reserved."
                         />
                     </div>
@@ -73,7 +73,7 @@ function ShopPageContent() {
             <ReactLenis root>
                 <div id="nav" data-section="nav">
                     <NavbarStyleCentered
-                        navItems={[{ name: "Home", id: "/" }]}
+                        navItems={[{name:"Home",id:"/"},{name:"Shop",id:"/shop"},{name:"Blog",id:"/blog"},{name:"About",id:"#about"},{name:"Testimonials",id:"#testimonials"},{name:"FAQ",id:"#faq"}]}
                         brandName="Hookah Haven"
                         className="py-4"
                         button={{ text: "Cart" }}
@@ -93,19 +93,11 @@ function ShopPageContent() {
                 <div id="footer" data-section="footer">
                     <FooterBaseCard 
                         logoText="Hookah Haven"
-                        columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "products" }, { label: "Tobacco", href: "products" }, { label: "Charcoal", href: "products" }, { label: "Accessories", href: "products" }] }, { title: "About Us", items: [{ label: "Our Story", href: "about" }, { label: "Customer Reviews", href: "testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "faq" }, { label: "Contact", href: "contact" }, { label: "Shipping & Returns", href: "#" }] }]}
+                        columns={[{ title: "Shop", items: [{ label: "Hookahs", href: "/shop" }, { label: "Tobacco", href: "/shop" }, { label: "Charcoal", href: "/shop" }, { label: "Accessories", href: "/shop" }] }, { title: "About Us", items: [{ label: "Our Story", href: "#about" }, { label: "Customer Reviews", href: "#testimonials" }] }, { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Shipping & Returns", href: "#" }] }]} 
                         copyrightText="© 2024 Hookah Haven. All rights reserved."
                     />
                 </div>
             </ReactLenis>
         </ThemeProvider>
     );
-}
-
-export default function ShopPage() {
-    return (
-        <Suspense>
-            <ShopPageContent />
-        </Suspense>
-    );
-}
+}
\ No newline at end of file