Update src/app/product/page.tsx

Merge version_4 into main

src/app/layout.tsx

@@ -16,7 +16,8 @@ export const metadata: Metadata = {
   openGraph: {
     title: "Professional Design Studio | Creative Branding & Design",    description: "Award-winning design studio creating compelling brand identities and digital experiences.",    type: "website",    siteName: "Studio",    images: [
       {
-        url: "http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg",        alt: "Studio Design Portfolio"},
+        url: "http://img.b2bpic.net/free-photo/workplace-with-laptop_23-2147651756.jpg",        alt: "Studio Design Portfolio"
+      },
     ],
   },
   twitter: {
@@ -1406,4 +1407,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -32,7 +32,7 @@ export default function LandingPage() {
           navItems={[
             { name: "About", id: "about" },
             { name: "Portfolio", id: "portfolio" },
-            { name: "Projects", id: "/projects" },
+            { name: "Product", id: "/product" },
             { name: "Team", id: "team" },
             { name: "Contact", id: "contact" }
           ]}
@@ -57,7 +57,7 @@ export default function LandingPage() {
           ]}
           mediaAnimation="blur-reveal"
           buttons={[
-            { text: "View Our Work", href: "/projects" },
+            { text: "View Our Work", href: "/product" },
             { text: "Start a Project", href: "contact" }
           ]}
           buttonAnimation="slide-up"
@@ -241,7 +241,7 @@ export default function LandingPage() {
               title: "Navigate",              items: [
                 { label: "Home", href: "/" },
                 { label: "About", href: "#about" },
-                { label: "Projects", href: "/projects" },
+                { label: "Product", href: "/product" },
                 { label: "Team", href: "#team" }
               ]
             },
@@ -275,4 +275,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/product/page.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Package, Sparkles } from "lucide-react";
+
+export default function ProductPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="mediumSmall"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered 
+          navItems={[
+            { name: "About", id: "about" },
+            { name: "Portfolio", id: "portfolio" },
+            { name: "Product", id: "/product" },
+            { name: "Team", id: "team" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Get Started", href: "contact" }}
+          brandName="Studio"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardGallery
+          title="Our Product Portfolio"
+          description="A comprehensive showcase of all the brands and companies we have worked with. From startups to established enterprises, we deliver exceptional design solutions across diverse industries."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Complete Portfolio"
+          tagAnimation="slide-up"
+          mediaItems={[
+            { imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=7", imageAlt: "Project 1" },
+            { imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=7", imageAlt: "Project 2" },
+            { imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=8", imageAlt: "Project 3" },
+            { imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&h=600&fit=crop&_wi=1", imageAlt: "Project 4" },
+            { imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop&_wi=1", imageAlt: "Project 5" },
+            { imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=800&h=600&fit=crop&_wi=1", imageAlt: "Project 6" },
+            { imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=800&h=600&fit=crop&_wi=1", imageAlt: "Project 7" }
+          ]}
+          mediaAnimation="blur-reveal"
+          buttons={[
+            { text: "Start Your Project", href: "contact" },
+            { text: "Back to Home", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="portfolio" data-section="portfolio">
+        <ProductCardFour 
+          title="Featured Client Projects"
+          description="A diverse selection of brands and companies across industries that have trusted us with their design challenges"
+          tag="Client Work"
+          tagIcon={Package}
+          tagAnimation="slide-up"
+          products={[
+            {
+              id: "client-1",              name: "TechFlow Solutions",              price: "Tech Startup",              variant: "Brand Identity, Digital Platform",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=8",              imageAlt: "TechFlow project"
+            },
+            {
+              id: "client-2",              name: "Luxe Cosmetics Co.",              price: "Beauty Brand",              variant: "Packaging Design, Branding",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=9",              imageAlt: "Luxe Cosmetics project"
+            },
+            {
+              id: "client-3",              name: "EcoMove Transportation",              price: "Mobility Startup",              variant: "UI/UX, App Design, Branding",              imageSrc: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&h=600&fit=crop&_wi=8",              imageAlt: "EcoMove project"
+            },
+            {
+              id: "client-4",              name: "Heritage Foods Ltd.",              price: "Food & Beverage",              variant: "Logo, Packaging, Guidelines",              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Heritage Foods project"
+            },
+            {
+              id: "client-5",              name: "FinanceFlow Bank",              price: "Financial Services",              variant: "Website Redesign, Mobile App",              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop&_wi=2",              imageAlt: "FinanceFlow project"
+            },
+            {
+              id: "client-6",              name: "Creative Studio Collective",              price: "Design Agency",              variant: "Brand Refresh, Portfolio Site",              imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Creative Studio project"
+            },
+            {
+              id: "client-7",              name: "AquaPure Water Systems",              price: "Environmental Tech",              variant: "B2B Branding, Marketing Materials",              imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=800&h=600&fit=crop&_wi=2",              imageAlt: "AquaPure project"
+            },
+            {
+              id: "client-8",              name: "Horizon Education Platform",              price: "EdTech Company",              variant: "Product Design, Learning Portal",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&h=600&fit=crop&_wi=9",              imageAlt: "Horizon Education project"
+            },
+            {
+              id: "client-9",              name: "Nexus Global Consulting",              price: "Consulting Firm",              variant: "Corporate Identity, Website",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=10",              imageAlt: "Nexus Consulting project"
+            },
+            {
+              id: "client-10",              name: "ZenLife Wellness Brand",              price: "Wellness & Health",              variant: "Complete Brand System",              imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&h=600&fit=crop&_wi=3",              imageAlt: "ZenLife project"
+            },
+            {
+              id: "client-11",              name: "VenturePath Capital",              price: "Investment Firm",              variant: "Brand Positioning, Pitch Deck",              imageSrc: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop&_wi=3",              imageAlt: "VenturePath project"
+            },
+            {
+              id: "client-12",              name: "StyleHub Fashion Collective",              price: "Fashion Brand",              variant: "E-commerce Design, Lookbooks",              imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=800&h=600&fit=crop&_wi=3",              imageAlt: "StyleHub project"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="clientlogos" data-section="clientlogos">
+        <SocialProofOne
+          title="Trusted by Leading Brands"
+          description="We have had the privilege of working with companies across diverse industries, from innovative startups to established corporations"
+          tag="Our Clients"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          names={[
+            "TechFlow Solutions",            "Luxe Cosmetics",            "EcoMove",            "Heritage Foods",            "FinanceFlow Bank",            "Creative Studio Collective",            "AquaPure Systems",            "Horizon Education",            "Nexus Global",            "ZenLife Wellness",            "VenturePath Capital",            "StyleHub Fashion"
+          ]}
+          speed={40}
+          showCard={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA 
+          tag="Your Project Awaits"
+          tagIcon={Sparkles}
+          title="Ready to Join Our Portfolio?"
+          description="Whether you're a startup with a big vision or an established brand looking to evolve, we'd love to discuss how we can help bring your vision to life."
+          buttons={[
+            { text: "Get In Touch", href: "contact" },
+            { text: "View Our Process", href: "/" }
+          ]}
+          buttonAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple 
+          columns={[
+            {
+              title: "Navigate",              items: [
+                { label: "Home", href: "/" },
+                { label: "Product", href: "/product" },
+                { label: "Team", href: "#team" },
+                { label: "Contact", href: "#contact" }
+              ]
+            },
+            {
+              title: "Services",              items: [
+                { label: "Brand Strategy", href: "#" },
+                { label: "Design Systems", href: "#" },
+                { label: "Digital Design", href: "#" },
+                { label: "Packaging", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "#about" },
+                { label: "Contact", href: "#contact" },
+                { label: "Careers", href: "#" },
+                { label: "Blog", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Cookie Policy", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 Studio. All rights reserved."
+          bottomRightText="Crafting excellence in design"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}