Update src/app/seo/page.tsx

Merge version_8 into main

src/app/ecommerce/page.tsx

@@ -0,0 +1,251 @@
+"use client";
+
+import React from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Package, Sparkles, TrendingUp, Target, Rocket, Award } from "lucide-react";
+
+export default function EcommercePage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PerformanceHub"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Products", id: "products" },
+            { name: "Results", id: "metrics" },
+            { name: "Solutions", id: "solutions" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="E-Commerce Solutions That Drive Sales & Revenue"
+          description="Maximize your online store's potential with our comprehensive e-commerce marketing strategies. Amsterdam-based experts specializing in product visibility, conversion optimization, and sustainable growth."
+          tag="E-Commerce Marketing Experts"
+          tagIcon={Package}
+          background={{ variant: "radial-gradient" }}
+          imageSrc="https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg"
+          imageAlt="E-commerce marketplace with shopping products and retail items"
+          buttons={[
+            { text: "Grow Your Store", href: "contact" },
+            { text: "View Case Studies", href: "/" }
+          ]}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Featured Ecommerce Products"
+          description="Explore our curated collection of high-performing products optimized for maximum conversion and customer satisfaction"
+          tag="Product Showcase"
+          tagIcon={Package}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          gridVariant="uniform-all-items-equal"
+          products={[
+            {
+              id: "1",              name: "Premium Workflow Optimizer Pro",              price: "$129.99",              variant: "Black • 2 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg",              imageAlt: "Premium Workflow Optimizer Pro product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/1', '_blank')
+            },
+            {
+              id: "2",              name: "Business Intelligence Suite",              price: "$199.99",              variant: "Silver • 3 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",              imageAlt: "Business Intelligence Suite product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/2', '_blank')
+            },
+            {
+              id: "3",              name: "Team Collaboration Tool Premium",              price: "$149.99",              variant: "White • 4 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-talking-about-financial-project-taking-notes-discussing-start-up-ideas-using-laptop-diverse-employees-gathered-co-working-working-process-busy-company-teamwork-help-concept_482257-13564.jpg",              imageAlt: "Team Collaboration Tool Premium product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/3', '_blank')
+            },
+            {
+              id: "4",              name: "Analytics Dashboard Pro",              price: "$249.99",              variant: "Blue • 5 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-image-young-african-man-sitting-coworking_171337-13500.jpg",              imageAlt: "Analytics Dashboard Pro product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/4', '_blank')
+            }
+          ]}
+        />
+      </div>
+
+      <div id="services" data-section="services">
+        <FeatureCardTwentyThree
+          title="Our E-Commerce Marketing Services"
+          description="Complete strategies tailored to grow your online store, increase product visibility, and maximize conversion rates"
+          tag="E-Commerce Solutions"
+          tagIcon={Sparkles}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          features={[
+            {
+              id: "1",              title: "Product Visibility & SEO",              tags: ["Search Rankings", "Organic Traffic"],
+              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Product SEO and visibility optimization"
+            },
+            {
+              id: "2",              title: "Conversion Rate Optimization",              tags: ["Higher Sales", "Cart Optimization"],
+              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",              imageAlt: "Conversion optimization for e-commerce"
+            },
+            {
+              id: "3",              title: "Paid Product Advertising",              tags: ["Google Shopping", "Social Ads"],
+              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-talking-about-financial-project-taking-notes-discussing-start-up-ideas-using-laptop-diverse-employees-gathered-co-working-working-process-busy-company-teamwork-help-concept_482257-13564.jpg",              imageAlt: "Paid advertising and product promotion"
+            },
+            {
+              id: "4",              title: "Customer Retention & Analytics",              tags: ["Email Marketing", "Data Insights"],
+              imageSrc: "https://img.b2bpic.net/free-photo/top-view-image-young-african-man-sitting-coworking_171337-13500.jpg",              imageAlt: "Customer retention and analytics"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardEleven
+          title="E-Commerce Growth Results"
+          description="Real numbers from real stores - measurable growth in sales, traffic, and customer value"
+          tag="Proven E-Commerce Success"
+          tagIcon={TrendingUp}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          buttons={[
+            { text: "Grow Your Store", href: "contact" }
+          ]}
+          metrics={[
+            {
+              id: "1",              value: "285%",              title: "Average Sales Increase",              description: "Clients typically see 285% increase in revenue within first year",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-office-supplies_1098-3510.jpg",              imageAlt: "Sales growth metrics"
+            },
+            {
+              id: "2",              value: "3.2x",              title: "Average ROI Multiple",              description: "For every dollar spent on our e-commerce strategies, clients earn 3.2x returns",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-holding-laptop-showing-financial-data_9975-22146.jpg",              imageAlt: "ROI and return metrics"
+            },
+            {
+              id: "3",              value: "52%",              title: "Average Conversion Lift",              description: "Conversion rate improvements through optimization and A/B testing",              imageSrc: "https://img.b2bpic.net/free-photo/digital-laptop-working-global-business-concept_53876-23438.jpg",              imageAlt: "Conversion rate optimization results"
+            },
+            {
+              id: "4",              value: "180+",              title: "E-Commerce Stores Served",              description: "Successful partnerships with businesses of all sizes",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Customer portfolio and success stories"
+            }
+          ]}
+        />
+      </div>
+
+      <div id="solutions" data-section="solutions">
+        <PricingCardTwo
+          title="E-Commerce Marketing Plans"
+          description="Flexible plans designed for online retailers at every growth stage. All include strategy, implementation, and continuous optimization."
+          tag="Custom Solutions"
+          tagIcon={Target}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          plans={[
+            {
+              id: "1",              badge: "Startup Store",              badgeIcon: Rocket,
+              price: "$3,000/month",              subtitle: "Perfect for new and emerging online stores",              buttons: [
+                { text: "Get Started", href: "contact" },
+                { text: "Learn More", href: "#" }
+              ],
+              features: [
+                "Product SEO optimization",                "Basic paid advertising setup",                "Monthly analytics reports",                "Conversion testing"
+              ]
+            },
+            {
+              id: "2",              badge: "Growth Store",              badgeIcon: Sparkles,
+              price: "$6,500/month",              subtitle: "For established stores ready to scale",              buttons: [
+                { text: "Start Growing", href: "contact" },
+                { text: "Schedule Demo", href: "#" }
+              ],
+              features: [
+                "Complete product visibility strategy",                "Paid ads across all platforms",                "Advanced A/B testing & optimization",                "Dedicated account manager",                "Email marketing campaigns"
+              ]
+            },
+            {
+              id: "3",              badge: "Enterprise Store",              badgeIcon: Award,
+              price: "Custom",              subtitle: "For high-volume e-commerce operations",              buttons: [
+                { text: "Contact Sales", href: "contact" },
+                { text: "Request Proposal", href: "#" }
+              ],
+              features: [
+                "Custom omnichannel strategy",                "Real-time marketing adjustments",                "Inventory-based automation",                "Custom integrations & API access",                "Dedicated team allocation",                "24/7 priority support"
+              ]
+            }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Ready to transform your e-commerce business? Let's analyze your store, identify opportunities, and build a winning strategy together."
+          animationType="background-highlight"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Schedule Store Audit", href: "contact" },
+            { text: "Explore Solutions", href: "#" }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PerformanceHub"
+          columns={[
+            {
+              items: [
+                { label: "Services", href: "services" },
+                { label: "E-Commerce", href: "/ecommerce" },
+                { label: "Product Visibility", href: "#" },
+                { label: "Sales Optimization", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Company", href: "#" },
+                { label: "About Us", href: "#" },
+                { label: "Case Studies", href: "/" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Resources", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Webinars", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Legal", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Contact", href: "contact" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,60 +1,23 @@
 import type { Metadata } from "next";
-import { Public_Sans } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-import { Open_Sans } from "next/font/google";
-import { Work_Sans } from "next/font/google";
+import "./styles/variables.css";
+import "./styles/base.css";
 
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Performance Marketing Agency Amsterdam | Data-Driven Results",  description: "Amsterdam-based performance marketing agency specializing in SEO, PPC, and conversion optimization. 312% avg ROI increase for 500+ clients.",  keywords: "performance marketing Amsterdam, digital marketing agency, SEO services, PPC advertising, conversion optimization, growth marketing",  metadataBase: new URL("https://performancehub.example.com"),
-  alternates: {
-    canonical: "https://performancehub.example.com"
-  },
-  openGraph: {
-    title: "PerformanceHub - Performance Marketing Agency Amsterdam",    description: "Boost your ROI with data-driven marketing strategies. Proven expertise in SEO, PPC, and conversion optimization.",    url: "https://performancehub.example.com",    siteName: "PerformanceHub",    type: "website",    images: [{
-      url: "https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg",      alt: "Performance Marketing Dashboard"
-    }]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "PerformanceHub - Performance Marketing Agency",    description: "Data-driven marketing strategies that deliver results. Amsterdam-based experts in growth marketing.",    images: ["https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
+  title: "PerformanceHub - Performance Marketing Agency",  description: "Amsterdam-based performance marketing agency specializing in SEO, PPC, and conversion optimization."
 };
 
-const openSans = Open_Sans({
-  variable: "--font-open-sans",
-  subsets: ["latin"],
-});
-const workSans = Work_Sans({
-  variable: "--font-work-sans",
-  subsets: ["latin"],
-});
-
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body className={`${openSans.variable} ${workSans.variable} antialiased`}>
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body className={inter.className}>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1336,7 +1299,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -10,7 +10,8 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Award, Rocket, Sparkles, Star, Target, TrendingUp, Zap } from "lucide-react";
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import { Award, Package, Rocket, Sparkles, Star, Target, TrendingUp, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -33,7 +34,7 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Results", id: "metrics" },
             { name: "Case Studies", id: "casestudies" },
-            { name: "SEO", id: "/seo" },
+            { name: "Products", id: "/products" },
             { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "contact" }
           ]}
@@ -47,8 +48,8 @@ export default function LandingPage() {
           tag="Amsterdam-Based Performance Marketing"
           tagIcon={Sparkles}
           background={{ variant: "radial-gradient" }}
-          imageSrc="https://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg"
-          imageAlt="Performance marketing analytics dashboard showing real-time metrics"
+          imageSrc="https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg"
+          imageAlt="E-commerce marketplace with shopping products and retail items"
           buttons={[
             { text: "Start Your Growth", href: "contact" },
             { text: "View Case Studies", href: "casestudies" }
@@ -95,6 +96,9 @@ export default function LandingPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
+          buttons={[
+            { text: "Start Your Journey", href: "contact" }
+          ]}
           metrics={[
             {
               id: "1",              value: "312%",              title: "Average ROI Increase",              description: "Client average return on marketing investment within 6 months",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Revenue growth chart showing ROI improvement"
@@ -104,6 +108,9 @@ export default function LandingPage() {
             },
             {
               id: "3",              value: "500+",              title: "Clients Served",              description: "Businesses from startups to enterprises achieving growth goals",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-holding-laptop-showing-financial-data_9975-22146.jpg",              imageAlt: "Team collaboration and client success stories"
+            },
+            {
+              id: "4",              value: "2.3x",              title: "Average Traffic Growth",              description: "Typical increase in overall website traffic from optimized campaigns",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graph_1098-3523.jpg",              imageAlt: "Website traffic analytics and growth metrics"
             }
           ]}
         />
@@ -206,6 +213,41 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="ecommerce" data-section="ecommerce">
+        <ProductCardFour
+          title="Featured Ecommerce Products"
+          description="Explore our curated collection of high-performing products optimized for maximum conversion"
+          tag="Product Showcase"
+          tagIcon={Package}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          gridVariant="uniform-all-items-equal"
+          products={[
+            {
+              id: "1",              name: "Premium Workflow Optimizer",              price: "$129.99",              variant: "Black • 2 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg",              imageAlt: "Premium Workflow Optimizer product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/1', '_blank')
+            },
+            {
+              id: "2",              name: "Business Intelligence Suite",              price: "$199.99",              variant: "Silver • 3 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",              imageAlt: "Business Intelligence Suite product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/2', '_blank')
+            },
+            {
+              id: "3",              name: "Team Collaboration Tool",              price: "$149.99",              variant: "White • 4 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/business-woman-talking-about-financial-project-taking-notes-discussing-start-up-ideas-using-laptop-diverse-employees-gathered-co-working-working-process-busy-company-teamwork-help-concept_482257-13564.jpg",              imageAlt: "Team Collaboration Tool product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/3', '_blank')
+            },
+            {
+              id: "4",              name: "Analytics Dashboard Pro",              price: "$249.99",              variant: "Blue • 5 Colors",              imageSrc: "https://img.b2bpic.net/free-photo/top-view-image-young-african-man-sitting-coworking_171337-13500.jpg",              imageAlt: "Analytics Dashboard Pro product",              isFavorited: false,
+              onFavorite: () => console.log('favorited'),
+              onProductClick: () => window.open('/product/4', '_blank')
+            }
+          ]}
+        />
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactText
           text="Ready to transform your marketing performance? Let's discuss your growth goals and create a winning strategy together."
@@ -226,7 +268,7 @@ export default function LandingPage() {
             {
               items: [
                 { label: "Services", href: "services" },
-                { label: "SEO", href: "/seo" },
+                { label: "Products", href: "/products" },
                 { label: "PPC Advertising", href: "#" },
                 { label: "Social Media", href: "#" }
               ]
@@ -260,4 +302,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

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

@@ -0,0 +1,317 @@
+"use client";
+
+import React, { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Package, ShoppingCart, Heart, Star, ArrowLeft } from "lucide-react";
+
+const productsData: { [key: string]: any } = {
+  "1": {
+    id: "1",    name: "Premium Workflow Optimizer",    price: "$129.99",    variant: "Black • 2 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg",    imageAlt: "Premium Workflow Optimizer product",    description: "Streamline your workflow with our premium optimizer tool. Designed for professionals who need maximum efficiency and control.",    fullDescription: "The Premium Workflow Optimizer is the ultimate solution for professionals looking to maximize productivity and streamline their operations. With advanced automation capabilities and intuitive controls, you can manage complex workflows with ease.",    features: [
+      "Advanced automation capabilities",      "Real-time performance tracking",      "Customizable workflows",      "24/7 customer support",      "Unlimited integrations",      "Advanced analytics dashboard"
+    ],
+    rating: 4.8,
+    reviewCount: 245,
+    inStock: true,
+    colors: ["Black", "White"],
+    specifications: {
+      "System Requirements": "Windows 10+ or macOS 10.15+",      "Storage": "500 MB",      "RAM": "4 GB minimum",      "License": "Per User",      "Updates": "Lifetime free updates"
+    }
+  },
+  "2": {
+    id: "2",    name: "Business Intelligence Suite",    price: "$199.99",    variant: "Silver • 3 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",    imageAlt: "Business Intelligence Suite product",    description: "Comprehensive business intelligence solution providing deep insights into your operations and market data.",    fullDescription: "Transform your data into actionable insights with our Business Intelligence Suite. From real-time analytics to predictive modeling, get the information you need to make confident business decisions.",    features: [
+      "Real-time data analysis",      "Predictive analytics",      "Custom report generation",      "Team collaboration tools",      "API access",      "Enterprise-grade security"
+    ],
+    rating: 4.9,
+    reviewCount: 328,
+    inStock: true,
+    colors: ["Silver", "Gold", "Black"],
+    specifications: {
+      "Deployment": "Cloud-based",      "Users": "Unlimited",      "Storage": "Up to 1 TB",      "Integration": "100+ data sources",      "Support": "Priority 24/7"
+    }
+  },
+  "3": {
+    id: "3",    name: "Team Collaboration Tool",    price: "$149.99",    variant: "White • 4 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/business-woman-talking-about-financial-project-taking-notes-discussing-start-up-ideas-using-laptop-diverse-employees-gathered-co-working-working-process-busy-company-teamwork-help-concept_482257-13564.jpg",    imageAlt: "Team Collaboration Tool product",    description: "Empower your team with seamless collaboration features. Perfect for remote and distributed teams.",    fullDescription: "Stay connected with your team using our all-in-one collaboration platform. From instant messaging to video conferences, manage all your team communications in one unified workspace.",    features: [
+      "Video conferencing",      "File sharing and storage",      "Task management",      "Communication hub",      "Mobile apps",      "Integrations with 100+ tools"
+    ],
+    rating: 4.7,
+    reviewCount: 412,
+    inStock: true,
+    colors: ["White", "Black", "Gray", "Blue"],
+    specifications: {
+      "Team Size": "Unlimited",      "Storage": "Unlimited",      "Video Calls": "Up to 500 participants",      "Message History": "Forever",      "Uptime": "99.99% SLA"
+    }
+  },
+  "4": {
+    id: "4",    name: "Analytics Dashboard Pro",    price: "$249.99",    variant: "Blue • 5 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/top-view-image-young-african-man-sitting-coworking_171337-13500.jpg",    imageAlt: "Analytics Dashboard Pro product",    description: "Professional-grade analytics dashboard for detailed insights and data visualization.",    fullDescription: "Visualize your data like never before. Our professional Analytics Dashboard Pro provides stunning visualizations, custom reports, and deep insights to drive your decision-making.",    features: [
+      "Custom dashboards",      "Real-time metrics",      "Export capabilities",      "Data visualization tools",      "Historical data analysis",      "White-label options"
+    ],
+    rating: 4.9,
+    reviewCount: 156,
+    inStock: true,
+    colors: ["Blue", "Green", "Purple", "Orange", "Red"],
+    specifications: {
+      "Data Sources": "Unlimited",      "Dashboards": "Unlimited",      "Refresh Rate": "Real-time",      "Export Formats": "PDF, Excel, PNG",      "Team Users": "Unlimited"
+    }
+  }
+};
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const productId = params.id as string;
+  const product = productsData[productId];
+  const [quantity, setQuantity] = useState(1);
+  const [isFavorited, setIsFavorited] = useState(false);
+
+  if (!product) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="bounce-effect"
+        defaultTextAnimation="background-highlight"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumLargeSizeMediumTitles"
+        background="noiseDiagonalGradient"
+        cardStyle="gradient-mesh"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="layered"
+        headingFontWeight="extrabold"
+      >
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-center">
+            <h1 className="text-4xl font-bold mb-4">Product Not Found</h1>
+            <p className="mb-8">The product you're looking for doesn't exist.</p>
+            <button
+              onClick={() => router.push('/products')}
+              className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition"
+            >
+              Back to Products
+            </button>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PerformanceHub"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Results", id: "metrics" },
+            { name: "Case Studies", id: "casestudies" },
+            { name: "Products", id: "/products" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" }
+          ]}
+        />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-6 py-20">
+        <button
+          onClick={() => router.push('/products')}
+          className="flex items-center gap-2 text-blue-600 hover:text-blue-700 mb-8 transition"
+        >
+          <ArrowLeft size={20} />
+          Back to Products
+        </button>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
+          {/* Product Image */}
+          <div className="flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl overflow-hidden">
+            <img
+              src={product.imageSrc}
+              alt={product.imageAlt}
+              className="w-full h-full object-cover"
+            />
+          </div>
+
+          {/* Product Details */}
+          <div className="flex flex-col justify-start">
+            <h1 className="text-5xl font-bold mb-4">{product.name}</h1>
+
+            {/* Rating */}
+            <div className="flex items-center gap-2 mb-6">
+              <div className="flex gap-1">
+                {[...Array(5)].map((_, i) => (
+                  <Star
+                    key={i}
+                    size={20}
+                    className={i < Math.floor(product.rating) ? "fill-yellow-400 text-yellow-400" : "text-gray-300"}
+                  />
+                ))}
+              </div>
+              <span className="text-lg font-semibold">{product.rating}</span>
+              <span className="text-gray-600">({product.reviewCount} reviews)</span>
+            </div>
+
+            {/* Price */}
+            <div className="mb-6">
+              <p className="text-4xl font-bold text-blue-600 mb-2">{product.price}</p>
+              <p className="text-green-600 font-semibold">In Stock</p>
+            </div>
+
+            {/* Description */}
+            <p className="text-lg text-gray-700 mb-8">{product.fullDescription}</p>
+
+            {/* Color Selection */}
+            {product.colors && product.colors.length > 0 && (
+              <div className="mb-8">
+                <h3 className="text-lg font-semibold mb-3">Available Colors</h3>
+                <div className="flex gap-3 flex-wrap">
+                  {product.colors.map(color => (
+                    <button
+                      key={color}
+                      className="px-4 py-2 border-2 border-gray-300 rounded-lg hover:border-blue-600 transition"
+                    >
+                      {color}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Quantity & CTA */}
+            <div className="flex gap-4 mb-8">
+              <div className="flex items-center border-2 border-gray-300 rounded-lg">
+                <button
+                  onClick={() => setQuantity(Math.max(1, quantity - 1))}
+                  className="px-4 py-2 hover:bg-gray-100 transition"
+                >
+                  −
+                </button>
+                <input
+                  type="number"
+                  value={quantity}
+                  onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
+                  className="w-12 text-center border-0 focus:outline-none"
+                />
+                <button
+                  onClick={() => setQuantity(quantity + 1)}
+                  className="px-4 py-2 hover:bg-gray-100 transition"
+                >
+                  +
+                </button>
+              </div>
+
+              <button className="flex-1 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition flex items-center justify-center gap-2 font-semibold">
+                <ShoppingCart size={20} />
+                Add to Cart
+              </button>
+
+              <button
+                onClick={() => setIsFavorited(!isFavorited)}
+                className="px-6 py-3 border-2 border-gray-300 rounded-lg hover:border-red-600 transition"
+              >
+                <Heart
+                  size={20}
+                  className={isFavorited ? "fill-red-600 text-red-600" : "text-gray-600"}
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Features Section */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
+          <div>
+            <h2 className="text-3xl font-bold mb-8">Key Features</h2>
+            <ul className="space-y-4">
+              {product.features.map((feature: string, index: number) => (
+                <li key={index} className="flex items-start gap-3">
+                  <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white flex-shrink-0 mt-1">
+                    ✓
+                  </div>
+                  <span className="text-lg text-gray-700">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Specifications */}
+          <div>
+            <h2 className="text-3xl font-bold mb-8">Specifications</h2>
+            <div className="space-y-4">
+              {Object.entries(product.specifications).map(([key, value]: [string, any]) => (
+                <div key={key} className="border-b border-gray-200 pb-4">
+                  <p className="font-semibold text-gray-900">{key}</p>
+                  <p className="text-gray-700">{value}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Have questions about this product? Our team is here to help you make the right choice."
+          animationType="background-highlight"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Contact Support", href: "contact" },
+            { text: "Schedule Demo", href: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PerformanceHub"
+          columns={[
+            {
+              items: [
+                { label: "Services", href: "services" },
+                { label: "Products", href: "/products" },
+                { label: "PPC Advertising", href: "#" },
+                { label: "Social Media", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Company", href: "#" },
+                { label: "About Us", href: "#" },
+                { label: "Case Studies", href: "casestudies" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Resources", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Webinars", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Legal", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Contact", href: "contact" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/products/page.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import React, { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import { Package, Sparkles } from "lucide-react";
+
+const productsData = [
+  {
+    id: "1",    name: "Premium Workflow Optimizer",    price: "$129.99",    variant: "Black • 2 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg",    imageAlt: "Premium Workflow Optimizer product",    description: "Streamline your workflow with our premium optimizer tool. Designed for professionals who need maximum efficiency and control.",    features: [
+      "Advanced automation capabilities",      "Real-time performance tracking",      "Customizable workflows",      "24/7 customer support",      "Unlimited integrations",      "Advanced analytics dashboard"
+    ],
+    rating: 4.8,
+    reviewCount: 245,
+    inStock: true
+  },
+  {
+    id: "2",    name: "Business Intelligence Suite",    price: "$199.99",    variant: "Silver • 3 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg",    imageAlt: "Business Intelligence Suite product",    description: "Comprehensive business intelligence solution providing deep insights into your operations and market data.",    features: [
+      "Real-time data analysis",      "Predictive analytics",      "Custom report generation",      "Team collaboration tools",      "API access",      "Enterprise-grade security"
+    ],
+    rating: 4.9,
+    reviewCount: 328,
+    inStock: true
+  },
+  {
+    id: "3",    name: "Team Collaboration Tool",    price: "$149.99",    variant: "White • 4 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/business-woman-talking-about-financial-project-taking-notes-discussing-start-up-ideas-using-laptop-diverse-employees-gathered-co-working-working-process-busy-company-teamwork-help-concept_482257-13564.jpg",    imageAlt: "Team Collaboration Tool product",    description: "Empower your team with seamless collaboration features. Perfect for remote and distributed teams.",    features: [
+      "Video conferencing",      "File sharing and storage",      "Task management",      "Communication hub",      "Mobile apps",      "Integrations with 100+ tools"
+    ],
+    rating: 4.7,
+    reviewCount: 412,
+    inStock: true
+  },
+  {
+    id: "4",    name: "Analytics Dashboard Pro",    price: "$249.99",    variant: "Blue • 5 Colors",    imageSrc: "https://img.b2bpic.net/free-photo/top-view-image-young-african-man-sitting-coworking_171337-13500.jpg",    imageAlt: "Analytics Dashboard Pro product",    description: "Professional-grade analytics dashboard for detailed insights and data visualization.",    features: [
+      "Custom dashboards",      "Real-time metrics",      "Export capabilities",      "Data visualization tools",      "Historical data analysis",      "White-label options"
+    ],
+    rating: 4.9,
+    reviewCount: 156,
+    inStock: true
+  }
+];
+
+export default function ProductsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="PerformanceHub"
+          navItems={[
+            { name: "Services", id: "services" },
+            { name: "Results", id: "metrics" },
+            { name: "Case Studies", id: "casestudies" },
+            { name: "Products", id: "/products" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Explore Our Product Collection"
+          description="Discover high-quality products designed to boost your productivity, enhance collaboration, and drive business growth."
+          tag="Product Catalog"
+          tagIcon={Sparkles}
+          background={{ variant: "radial-gradient" }}
+          imageSrc="https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg"
+          imageAlt="Product showcase and catalog"
+          buttons={[
+            { text: "Browse All Products", href: "#products" },
+            { text: "View Pricing", href: "#" }
+          ]}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Our Product Lineup"
+          description="Each product is crafted to deliver exceptional value and performance for your business needs."
+          tag="Featured Products"
+          tagIcon={Package}
+          textboxLayout="default"
+          useInvertedBackground={false}
+          animationType="slide-up"
+          gridVariant="uniform-all-items-equal"
+          products={productsData.map(product => ({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            variant: product.variant,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt,
+            isFavorited: false,
+            onFavorite: () => console.log(`Favorited: ${product.id}`),
+            onProductClick: () => window.location.href = `/product/${product.id}`
+          }))}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Need help choosing the right product? Our team is ready to guide you through our full suite of solutions."
+          animationType="background-highlight"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Schedule a Demo", href: "contact" },
+            { text: "Contact Sales", href: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="PerformanceHub"
+          columns={[
+            {
+              items: [
+                { label: "Services", href: "services" },
+                { label: "Products", href: "/products" },
+                { label: "PPC Advertising", href: "#" },
+                { label: "Social Media", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Company", href: "#" },
+                { label: "About Us", href: "#" },
+                { label: "Case Studies", href: "casestudies" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Resources", href: "#" },
+                { label: "Blog", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Webinars", href: "#" }
+              ]
+            },
+            {
+              items: [
+                { label: "Legal", href: "#" },
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Contact", href: "contact" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/seo/page.tsx

@@ -32,7 +32,7 @@ export default function SEOPage() {
             { name: "Services", id: "services" },
             { name: "Results", id: "metrics" },
             { name: "Case Studies", id: "casestudies" },
-            { name: "SEO", id: "/seo" },
+            { name: "Products", id: "/products" },
             { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "contact" }
           ]}
@@ -46,8 +46,8 @@ export default function SEOPage() {
           tag="Professional SEO Services"
           tagIcon={Sparkles}
           background={{ variant: "radial-gradient" }}
-          imageSrc="https://img.b2bpic.net/free-photo/businesswoman-working-laptop_53876-163211.jpg"
-          imageAlt="SEO strategy and search engine optimization"
+          imageSrc="https://img.b2bpic.net/free-photo/businessman-working-laptop-internet-shopping-e-commerce-online-business-concept_1098-3489.jpg"
+          imageAlt="E-commerce marketplace displaying product listings and online sales optimization"
           buttons={[
             { text: "Get Your SEO Audit", href: "contact" },
             { text: "View SEO Case Studies", href: "/" }
@@ -94,6 +94,9 @@ export default function SEOPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           animationType="slide-up"
+          buttons={[
+            { text: "Start Your SEO Journey", href: "contact" }
+          ]}
           metrics={[
             {
               id: "1",              value: "156%",              title: "Average Organic Traffic Increase",              description: "Typical improvement in organic search traffic within 6-12 months",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-office-supplies_1098-3510.jpg",              imageAlt: "Organic traffic growth metrics"
@@ -151,7 +154,7 @@ export default function SEOPage() {
             {
               items: [
                 { label: "Services", href: "services" },
-                { label: "SEO", href: "/seo" },
+                { label: "Products", href: "/products" },
                 { label: "PPC Advertising", href: "#" },
                 { label: "Social Media", href: "#" }
               ]
@@ -185,4 +188,4 @@ export default function SEOPage() {
       </div>
     </ThemeProvider>
   );
-}
+}