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

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

@@ -74,93 +74,9 @@ function ProductPageContent({ params }: ProductPageProps) {
         await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
     }, [cartItems, checkout, getCheckoutItems]);
 
-    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"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </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 product...</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>
-        );
-    }
 
-    if (!product) {
+    const navItems = [{ name: "Home", id: "/" }, { name: "Blog", id: "/blog" }, { name: "Shop", id: "/shop" }];
-        return (
+    const footerColumns = [{ 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" }] }];
-            <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"
-                            button={{ text: "Cart", onClick: () => setCartOpen(true) }}
-                        />
-                    </div>
-                    <div id="not-found-section" data-section="not-found-section">
-                        <main className="min-h-screen flex items-center justify-center pt-20">
-                            <div className="text-center">
-                                <p className="text-foreground mb-4">Product not found</p>
-                                <button
-                                    onClick={() => router.push("/shop")}
-                                    className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
-                                >
-                                    Back to Shop
-                                </button>
-                            </div>
-                        </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
@@ -176,16 +92,42 @@ function ProductPageContent({ params }: ProductPageProps) {
             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={navItems}
                         brandName="DigitalEdge"
                         bottomLeftText="Innovation in Digital"
                         bottomRightText="info@digitaledge.com"
                         button={{ text: "Cart", onClick: () => setCartOpen(true) }}
                     />
                 </div>
-                <div id="product-detail-card" data-section="product-detail-card">
+
+                {isLoading && (
+                  <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 product...</p>
+                      </main>
+                  </div>
+                )}
+
+                {!isLoading && !product && (
+                  <div id="not-found-section" data-section="not-found-section">
+                      <main className="min-h-screen flex items-center justify-center pt-20">
+                          <div className="text-center">
+                              <p className="text-foreground mb-4">Product not found</p>
+                              <button
+                                  onClick={() => router.push("/shop")}
+                                  className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
+                              >
+                                  Back to Shop
+                              </button>
+                          </div>
+                      </main>
+                  </div>
+                )}
+
+                {!isLoading && product && (
+                  <div id="product-detail-card" data-section="product-detail-card">
                     <ProductDetailCard
                         layout="page"
                         name={product.name}
@@ -205,7 +147,9 @@ function ProductPageContent({ params }: ProductPageProps) {
                             { text: "Buy Now", onClick: handleBuyNow },
                         ]}
                     />
-                </div>
+                  </div>
+                )}
+
                 <div id="product-cart" data-section="product-cart">
                     <ProductCart
                         isOpen={cartOpen}
@@ -221,9 +165,10 @@ function ProductPageContent({ params }: ProductPageProps) {
                         ]}
                     />
                 </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={footerColumns}
                         logoText="DigitalEdge"
                     />
                 </div>