Update src/app/shop/page.tsx

src/app/shop/page.tsx

@@ -17,45 +17,6 @@ function ShopPageContent() {
         filters,
     } = useProductCatalog({ basePath: "/shop" });
 
-    if (isLoading) {
-        return (
-            <ThemeProvider
-                defaultButtonVariant="shift-hover"
-                defaultTextAnimation="entrance-slide"
-                borderRadius="pill"
-                contentWidth="mediumSmall"
-                sizing="mediumLargeSizeLargeTitles"
-                background="floatingGradient"
-                cardStyle="glass-elevated"
-                primaryButtonStyle="gradient"
-                secondaryButtonStyle="solid"
-                headingFontWeight="light"
-            >
-                <ReactLenis root>
-                    <div id="navbar" data-section="navbar">
-                        <NavbarStyleFullscreen
-                            navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "services" }, { name: "About", id: "about" }, { name: "Clients", id: "clients" }, { name: "Contact", id: "contact" }, { name: "Shop", id: "/shop" }]}
-                            brandName="DigitalEdge"
-                            bottomLeftText="Innovation in Digital"
-                            bottomRightText="info@digitaledge.com"
-                        />
-                    </div>
-                    <div id="loading-section" data-section="loading-section">
-                        <main className="min-h-screen flex items-center justify-center pt-20">
-                            <p className="text-foreground">Loading products...</p>
-                        </main>
-                    </div>
-                    <div id="footer" data-section="footer">
-                        <FooterLogoEmphasis
-                            columns={[{ items: [{ label: "Home", href: "home" }, { label: "Services", href: "services" }, { label: "About Us", href: "about" }] }, { items: [{ label: "Clients", href: "clients" }, { label: "Testimonials", href: "testimonials" }, { label: "Contact", href: "contact" }] }]}
-                            logoText="DigitalEdge"
-                        />
-                    </div>
-                </ReactLenis>
-            </ThemeProvider>
-        );
-    }
-
     return (
         <ThemeProvider
             defaultButtonVariant="shift-hover"
@@ -70,28 +31,38 @@ function ShopPageContent() {
             headingFontWeight="light"
         >
             <ReactLenis root>
-                <div id="navbar" data-section="navbar">
+                <div id="nav" data-section="nav">
                     <NavbarStyleFullscreen
-                        navItems={[{ name: "Home", id: "/" }, { name: "Services", id: "services" }, { name: "About", id: "about" }, { name: "Clients", id: "clients" }, { name: "Contact", id: "contact" }, { name: "Shop", id: "/shop" }]}
+                        navItems={[{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }]}
                         brandName="DigitalEdge"
                         bottomLeftText="Innovation in Digital"
                         bottomRightText="info@digitaledge.com"
                     />
                 </div>
-                <div id="product-catalog" data-section="product-catalog">
+                
-                    <ProductCatalog
+                {isLoading ? (
-                        layout="page"
+                    <div id="loading-section" data-section="loading-section">
-                        products={products}
+                        <main className="min-h-screen flex items-center justify-center pt-20">
-                        searchValue={search}
+                            <p className="text-foreground">Loading products...</p>
-                        onSearchChange={setSearch}
+                        </main>
-                        searchPlaceholder="Search products..."
+                    </div>
-                        filters={filters}
+                ) : (
-                        emptyMessage="No products found"
+                    <div id="product-catalog" data-section="product-catalog">
-                    />
+                        <ProductCatalog
-                </div>
+                            layout="page"
+                            products={products}
+                            searchValue={search}
+                            onSearchChange={setSearch}
+                            searchPlaceholder="Search products..."
+                            filters={filters}
+                            emptyMessage="No products found"
+                        />
+                    </div>
+                )}
+                
                 <div id="footer" data-section="footer">
                     <FooterLogoEmphasis
-                        columns={[{ items: [{ label: "Home", href: "home" }, { label: "Services", href: "services" }, { label: "About Us", href: "about" }] }, { items: [{ label: "Clients", href: "clients" }, { label: "Testimonials", href: "testimonials" }, { label: "Contact", href: "contact" }] }]}
+                        columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/#features" }, { label: "About Us", href: "/#about" }] }, { items: [{ label: "Clients", href: "/#social-proof" }, { label: "Testimonials", href: "/#testimonials" }, { label: "Contact", href: "/#contact" }] }]}
                         logoText="DigitalEdge"
                     />
                 </div>