Update src/app/products/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -32,8 +32,8 @@ export default function PortfolioPage() {
             { name: "Work", id: "work" },
             { name: "About", id: "about" },
             { name: "Process", id: "process" },
+            { name: "Products", id: "/products" },
             { name: "Contact", id: "contact" },
-            { name: "Resume", id: "resume" },
           ]}
           button={{ text: "View My Work", href: "work" }}
           brandName="Design Studio"
@@ -78,22 +78,22 @@ export default function PortfolioPage() {
           textboxLayout="default"
           products={[
             {
-              id: "1",              name: "SaaS Dashboard Redesign",              price: "Product Design",              variant: "UX Research · Interaction Design · Design System",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-beautiful-product-design-case-study-mo-1773127143191-af40d82d.png",              imageAlt: "SaaS dashboard redesign project"
+              id: "1",              name: "SaaS Dashboard Redesign",              price: "Product Design",              variant: "UX Research · Interaction Design · Design System",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-beautiful-product-design-case-study-mo-1773127143191-af40d82d.png?_wi=1",              imageAlt: "SaaS dashboard redesign project"
             },
             {
-              id: "2",              name: "E-Commerce Mobile App",              price: "App Design",              variant: "iOS & Android · User Testing · Accessibility",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/an-e-commerce-mobile-app-interface-desig-1773127157439-66bda9ca.png",              imageAlt: "E-commerce mobile app design"
+              id: "2",              name: "E-Commerce Mobile App",              price: "App Design",              variant: "iOS & Android · User Testing · Accessibility",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/an-e-commerce-mobile-app-interface-desig-1773127157439-66bda9ca.png?_wi=1",              imageAlt: "E-commerce mobile app design"
             },
             {
-              id: "3",              name: "Design System Library",              price: "Design Systems",              variant: "Component Library · Documentation · Tokens",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-system-documentation-and-compon-1773127143881-d7a63477.png",              imageAlt: "Design system documentation"
+              id: "3",              name: "Design System Library",              price: "Design Systems",              variant: "Component Library · Documentation · Tokens",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-system-documentation-and-compon-1773127143881-d7a63477.png?_wi=1",              imageAlt: "Design system documentation"
             },
             {
-              id: "4",              name: "Tech Startup Website",              price: "Web Design",              variant: "Responsive Design · Animation · CMS Integration",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-website-redesign-case-study-for-a-tech-1773127144324-dc328fab.png",              imageAlt: "Startup website redesign"
+              id: "4",              name: "Tech Startup Website",              price: "Web Design",              variant: "Responsive Design · Animation · CMS Integration",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-website-redesign-case-study-for-a-tech-1773127144324-dc328fab.png?_wi=1",              imageAlt: "Startup website redesign"
             },
             {
               id: "5",              name: "User Research Sprint",              price: "Research",              variant: "Interviews · Analytics · Synthesis",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-thinking-workshop-or-research-p-1773127143858-c439d00e.png?_wi=1",              imageAlt: "User research and discovery"
             },
             {
-              id: "6",              name: "Brand Identity Project",              price: "Branding",              variant: "Logo Design · Guidelines · Applications",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-creative-branding-and-visual-identity--1773127143828-934de43d.png",              imageAlt: "Brand identity system"
+              id: "6",              name: "Brand Identity Project",              price: "Branding",              variant: "Logo Design · Guidelines · Applications",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-creative-branding-and-visual-identity--1773127143828-934de43d.png?_wi=1",              imageAlt: "Brand identity system"
             },
           ]}
           gridVariant="bento-grid"
@@ -216,7 +216,7 @@ export default function PortfolioPage() {
               title: "Work",              items: [
                 { label: "Featured Projects", href: "#work" },
                 { label: "Case Studies", href: "#work" },
-                { label: "View All", href: "#" },
+                { label: "View All", href: "/products" },
               ],
             },
             {

src/app/products/page.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
+import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { Sparkles } from "lucide-react";
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Work", id: "work" },
+            { name: "About", id: "about" },
+            { name: "Process", id: "process" },
+            { name: "Products", id: "/products" },
+            { name: "Contact", id: "contact" },
+          ]}
+          button={{ text: "View My Work", href: "/" }}
+          brandName="Design Studio"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardCarousel
+          title="Our Product Collection"
+          description="Explore our carefully curated selection of premium products designed with precision and care."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Products"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Explore All", href: "#products" },
+            { text: "Get In Touch", href: "/" },
+          ]}
+          buttonAnimation="slide-up"
+          mediaItems={[
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-beautiful-product-design-case-study-mo-1773127143191-af40d82d.png?_wi=2",              imageAlt: "Product 1"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/an-e-commerce-mobile-app-interface-desig-1773127157439-66bda9ca.png?_wi=2",              imageAlt: "Product 2"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-system-documentation-and-compon-1773127143881-d7a63477.png?_wi=2",              imageAlt: "Product 3"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-website-redesign-case-study-for-a-tech-1773127144324-dc328fab.png?_wi=2",              imageAlt: "Product 4"
+            },
+            {
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-thinking-workshop-or-research-p-1773127143858-c439d00e.png?_wi=1",              imageAlt: "Product 5"
+            },
+          ]}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardTwo
+          title="Featured Products"
+          description="Browse our premium collection of expertly designed products."
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          gridVariant="three-columns-all-equal-width"
+          products={[
+            {
+              id: "1",              brand: "Design Co",              name: "Premium UI Kit",              price: "$99.00",              rating: 5,
+              reviewCount: "128",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-beautiful-product-design-case-study-mo-1773127143191-af40d82d.png?_wi=3",              imageAlt: "Premium UI Kit"
+            },
+            {
+              id: "2",              brand: "Design Co",              name: "Component Library",              price: "$79.00",              rating: 5,
+              reviewCount: "89",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/an-e-commerce-mobile-app-interface-desig-1773127157439-66bda9ca.png?_wi=3",              imageAlt: "Component Library"
+            },
+            {
+              id: "3",              brand: "Design Co",              name: "Design System Template",              price: "$149.00",              rating: 5,
+              reviewCount: "156",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-system-documentation-and-compon-1773127143881-d7a63477.png?_wi=3",              imageAlt: "Design System Template"
+            },
+            {
+              id: "4",              brand: "Design Co",              name: "Interaction Patterns",              price: "$59.00",              rating: 4,
+              reviewCount: "72",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-website-redesign-case-study-for-a-tech-1773127144324-dc328fab.png?_wi=3",              imageAlt: "Interaction Patterns"
+            },
+            {
+              id: "5",              brand: "Design Co",              name: "Animation Library",              price: "$89.00",              rating: 5,
+              reviewCount: "104",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-design-thinking-workshop-or-research-p-1773127143858-c439d00e.png?_wi=1",              imageAlt: "Animation Library"
+            },
+            {
+              id: "6",              brand: "Design Co",              name: "Brand Kit Pro",              price: "$129.00",              rating: 5,
+              reviewCount: "92",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-creative-branding-and-visual-identity--1773127143828-934de43d.png?_wi=2",              imageAlt: "Brand Kit Pro"
+            },
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkBqJ9ymvbjbCXOeeaLZcoI1gK/a-modern-minimalist-ui-ux-designer-works-1773127142522-a6e247ac.png?_wi=2"
+          imageAlt="Footer design workspace image"
+          logoText="Design Studio"
+          copyrightText="© 2025 Design Studio. All rights reserved."
+          columns={[
+            {
+              title: "Navigation",              items: [
+                { label: "Home", href: "/" },
+                { label: "Products", href: "/products" },
+                { label: "Contact", href: "/#contact" },
+              ],
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "FAQ", href: "#" },
+                { label: "Support", href: "#" },
+              ],
+            },
+            {
+              title: "Connect",              items: [
+                { label: "Email", href: "mailto:hello@designstudio.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "Twitter", href: "https://twitter.com" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}