Update src/app/seo/page.tsx

Merge version_8 into main

src/app/layout.tsx

@@ -7,7 +7,8 @@ import "./styles/base.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "PerformanceHub - Performance Marketing Agency",  description: "Amsterdam-based performance marketing agency specializing in SEO, PPC, and conversion optimization."};
+  title: "PerformanceHub - Performance Marketing Agency",  description: "Amsterdam-based performance marketing agency specializing in SEO, PPC, and conversion optimization."
+};
 
 export default function RootLayout({
   children,

src/app/page.tsx

@@ -34,7 +34,7 @@ export default function LandingPage() {
             { name: "Services", id: "services" },
             { name: "Results", id: "metrics" },
             { name: "Case Studies", id: "casestudies" },
-            { name: "Ecommerce", id: "/ecommerce" },
+            { name: "Products", id: "/products" },
             { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "contact" }
           ]}
@@ -268,7 +268,7 @@ export default function LandingPage() {
             {
               items: [
                 { label: "Services", href: "services" },
-                { label: "Ecommerce", href: "/ecommerce" },
+                { label: "Products", href: "/products" },
                 { label: "PPC Advertising", href: "#" },
                 { label: "Social Media", href: "#" }
               ]

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: "Ecommerce", id: "/ecommerce" },
+            { name: "Products", id: "/products" },
             { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "contact" }
           ]}
@@ -154,7 +154,7 @@ export default function SEOPage() {
             {
               items: [
                 { label: "Services", href: "services" },
-                { label: "Ecommerce", href: "/ecommerce" },
+                { label: "Products", href: "/products" },
                 { label: "PPC Advertising", href: "#" },
                 { label: "Social Media", href: "#" }
               ]