Update src/app/portfolio/page.tsx

src/app/portfolio/page.tsx

@@ -14,45 +14,49 @@ export default function PortfolioPage() {
         borderRadius="pill"
         contentWidth="small"
         sizing="medium"
-        background="noiseDiagonalGradient"
-        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
-        secondaryButtonStyle="glass"
+        background="none"
+        cardStyle="outline"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="solid"
         headingFontWeight="bold"
     >
       <ReactLenis root>
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "About", id: "/about" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Open Vibes"
-        />
-        <div className="pt-32 pb-20">
-            <ProductCardFour
-                title="Selected Works"
-                description="A curated showcase of luxury digital transformations."
-                gridVariant="bento-grid"
-                animationType="blur-reveal"
-                textboxLayout="default"
-                useInvertedBackground={false}
-                products={[
-                    { id: "1", name: "Gold Horizon Campaign", price: "Premium", variant: "Digital Marketing", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-particles_1048-14716.jpg?_wi=1" },
-                    { id: "2", name: "Midnight Aura Branding", price: "Exclusive", variant: "Identity", imageSrc: "http://img.b2bpic.net/free-photo/self-assured-business-leader-conference-room_1262-3068.jpg?_wi=2" }
-                ]}
-            />
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Pricing", id: "/pricing" },
+              { name: "Contact", id: "/contact" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Services", id: "/services" },
+            ]}
+            brandName="Open Vibes"
+          />
+        </div>
+        <div id="portfolio" data-section="portfolio">
+          <ProductCardFour
+            title="Selected Works"
+            description="A curated showcase of luxury digital transformations."
+            gridVariant="bento-grid"
+            animationType="blur-reveal"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            products={[
+                { id: "1", name: "Gold Horizon Campaign", price: "Premium", variant: "Digital Marketing", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-particles_1048-14716.jpg?_wi=1" },
+                { id: "2", name: "Midnight Aura Branding", price: "Exclusive", variant: "Identity", imageSrc: "http://img.b2bpic.net/free-photo/self-assured-business-leader-conference-room_1262-3068.jpg?_wi=2" }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoText="Open Vibes"
+            columns={[
+              { items: [{ label: "About", href: "/about" }, { label: "Pricing", href: "/pricing" }, { label: "Portfolio", href: "/portfolio" }] },
+              { items: [{ label: "Contact", href: "/contact" }, { label: "Services", href: "/services" }] },
+            ]}
+          />
         </div>
-        <FooterLogoEmphasis
-          logoText="Open Vibes"
-          columns={[
-            { items: [{ label: "About", href: "/about" }, { label: "Services", href: "/services" }] },
-            { items: [{ label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] },
-          ]}
-        />
       </ReactLenis>
     </ThemeProvider>
   );