Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -14,8 +14,11 @@ import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import { Activity, Gauge, Home } from "lucide-react";
+import { useRouter } from 'next/navigation';
 
 export default function LandingPage() {
+  const router = useRouter();
+
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
@@ -34,9 +37,9 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Home",          id: "#home"},
+          name: "Home",          id: "/"},
         {
-          name: "Shop Now",          id: "#products"},
+          name: "Shop Now",          id: "/products"},
         {
           name: "How It Works",          id: "#features"},
         {
@@ -58,7 +61,7 @@ export default function LandingPage() {
       tagAnimation="slide-up"
       buttons={[
         {
-          text: "Shop Nose Strips",          href: "#products"},
+          text: "Shop Nose Strips",          href: "/products"},
       ]}
       buttonAnimation="slide-up"
       mediaItems={[
@@ -83,7 +86,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="The world calls it a nose strip. JORDAN CALLS IT"
       description={[
-        "TAPE IT is engineered to enhance nasal breathing, offering immediate relief and promoting overall well-being. Improve your sleep quality, boost athletic performance, and reduce snoring with our scientifically designed strips. We believe that nothing matters more than how you breathe."]}
+        "TAPE IT is engineered to enhance nasal breathing, offering immediate relief and promoting overall well-being. Improve your sleep quality, boost athletic performance, and reduce snoring with our scientifically designed strips. We believe that nothing matters more than how you breathe." ]}
       buttons={[
         {
           text: "Learn More",          href: "#features"},
@@ -142,17 +145,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "nasal-strips-1",          name: "Original Nasal Strips (30-pack)",          price: "$19.99",          imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-puzzled-standing-white-wall_141793-56736.jpg",          imageAlt: "TAPE IT Original Nasal Strips 30-pack"},
+          id: "nasal-strips-1",          name: "Original Nasal Strips (30-pack)",          price: "$19.99",          imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-puzzled-standing-white-wall_141793-56736.jpg?_wi=1",          imageAlt: "TAPE IT Original Nasal Strips 30-pack",          onProductClick: () => router.push('/products/nasal-strips-1')
+        },
         {
-          id: "nasal-strips-2",          name: "Sensitive Skin Nasal Strips (30-pack)",          price: "$22.99",          imageSrc: "http://img.b2bpic.net/free-photo/future-mother-keeps-shoes-baby_8353-5121.jpg",          imageAlt: "TAPE IT Sensitive Skin Nasal Strips 30-pack"},
+          id: "nasal-strips-2",          name: "Sensitive Skin Nasal Strips (30-pack)",          price: "$22.99",          imageSrc: "http://img.b2bpic.net/free-photo/future-mother-keeps-shoes-baby_8353-5121.jpg?_wi=1",          imageAlt: "TAPE IT Sensitive Skin Nasal Strips 30-pack",          onProductClick: () => router.push('/products/nasal-strips-2')
+        },
         {
-          id: "nasal-strips-3",          name: "Extra Strength Nasal Strips (30-pack)",          price: "$21.99",          imageSrc: "http://img.b2bpic.net/free-photo/woman-folding-menstrual-cup-medium-shot_23-2149734183.jpg",          imageAlt: "TAPE IT Extra Strength Nasal Strips 30-pack"},
+          id: "nasal-strips-3",          name: "Extra Strength Nasal Strips (30-pack)",          price: "$21.99",          imageSrc: "http://img.b2bpic.net/free-photo/woman-folding-menstrual-cup-medium-shot_23-2149734183.jpg?_wi=1",          imageAlt: "TAPE IT Extra Strength Nasal Strips 30-pack",          onProductClick: () => router.push('/products/nasal-strips-3')
+        },
         {
-          id: "nasal-strips-4",          name: "Original Nasal Strips (90-pack)",          price: "$49.99",          imageSrc: "http://img.b2bpic.net/free-photo/young-female-doctor-holding-hands-head-medical-uniform-mask-looking-confident_176474-81552.jpg",          imageAlt: "TAPE IT Original Nasal Strips 90-pack"},
+          id: "nasal-strips-4",          name: "Original Nasal Strips (90-pack)",          price: "$49.99",          imageSrc: "http://img.b2bpic.net/free-photo/young-female-doctor-holding-hands-head-medical-uniform-mask-looking-confident_176474-81552.jpg?_wi=1",          imageAlt: "TAPE IT Original Nasal Strips 90-pack",          onProductClick: () => router.push('/products/nasal-strips-4')
+        },
         {
-          id: "nasal-strips-5",          name: "Travel Pack Assorted (10-pack)",          price: "$8.99",          imageSrc: "http://img.b2bpic.net/free-photo/collagen-white-stick-with-glass-water_185193-162486.jpg",          imageAlt: "TAPE IT Travel Pack Assorted Nasal Strips 10-pack"},
+          id: "nasal-strips-5",          name: "Travel Pack Assorted (10-pack)",          price: "$8.99",          imageSrc: "http://img.b2bpic.net/free-photo/collagen-white-stick-with-glass-water_185193-162486.jpg?_wi=1",          imageAlt: "TAPE IT Travel Pack Assorted Nasal Strips 10-pack",          onProductClick: () => router.push('/products/nasal-strips-5')
+        },
         {
-          id: "nasal-strips-6",          name: "Kids Nasal Strips (20-pack)",          price: "$14.99",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-putting-medical-mask-face-protection_23-2148802176.jpg",          imageAlt: "TAPE IT Kids Nasal Strips 20-pack"},
+          id: "nasal-strips-6",          name: "Kids Nasal Strips (20-pack)",          price: "$14.99",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-putting-medical-mask-face-protection_23-2148802176.jpg?_wi=1",          imageAlt: "TAPE IT Kids Nasal Strips 20-pack",          onProductClick: () => router.push('/products/nasal-strips-6')
+        },
       ]}
       title="Shop Our Collection"
       description="Find the perfect nasal strip to elevate your breathing, sleep, and performance."
@@ -222,21 +231,21 @@ export default function LandingPage() {
         {
           text: "Contact Support",          href: "mailto:support@tapeitjo.com"},
         {
-          text: "Visit Our Store",          href: "#products"},
+          text: "Visit Our Store",          href: "/products"},
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/yoga-mat-water-bottle-assortment_23-2149442713.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/yoga-mat-water-bottle-assortment_23-2149442713.jpg?_wi=1"
       imageAlt="Gym product nasal strips lifestyle"
       logoText="TAPE IT JO"
       columns={[
         {
           title: "Product",          items: [
             {
-              label: "Shop Now",              href: "#products"},
+              label: "Shop Now",              href: "/products"},
             {
               label: "How It Works",              href: "#features"},
             {

src/app/products/[productId]/page.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import Image from 'next/image';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+interface ProductDetail {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt: string;
+  description: string;
+  details: string[]; // e.g., features, benefits
+}
+
+const mockProducts: ProductDetail[] = [
+  {
+    id: "nasal-strips-1",    name: "Original Nasal Strips (30-pack)",    price: "$19.99",    imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-puzzled-standing-white-wall_141793-56736.jpg?_wi=1",    imageAlt: "TAPE IT Original Nasal Strips 30-pack",    description: "Enhance your breathing instantly with our original nasal strips. Designed for comfort and effective airflow improvement.",    details: [
+      "30 count pack for daily use",      "Hypoallergenic adhesive",      "Increases nasal airflow by up to 30%",      "Reduces snoring and improves sleep quality",      "Ideal for exercise and daily wear"
+    ]
+  },
+  {
+    id: "nasal-strips-2",    name: "Sensitive Skin Nasal Strips (30-pack)",    price: "$22.99",    imageSrc: "http://img.b2bpic.net/free-photo/future-mother-keeps-shoes-baby_8353-5121.jpg?_wi=1",    imageAlt: "TAPE IT Sensitive Skin Nasal Strips 30-pack",    description: "Gentle yet effective, our sensitive skin nasal strips provide optimal breathing support without irritation.",    details: [
+      "30 count pack",      "Extra gentle, latex-free adhesive",      "Dermatologist tested for sensitive skin",      "Improves breathing without causing redness",      "Perfect for extended wear"
+    ]
+  },
+  {
+    id: "nasal-strips-3",    name: "Extra Strength Nasal Strips (30-pack)",    price: "$21.99",    imageSrc: "http://img.b2bpic.net/free-photo/woman-folding-menstrual-cup-medium-shot_23-2149734183.jpg?_wi=1",    imageAlt: "TAPE IT Extra Strength Nasal Strips 30-pack",    description: "For maximum support, choose our extra strength nasal strips. Designed to provide powerful lift for severe congestion or intense activity.",    details: [
+      "30 count pack for robust support",      "Stronger adhesive for secure fit",      "Maximizes nasal passage opening",      "Ideal for athletes and heavy snorers",      "Long-lasting hold during vigorous activities"
+    ]
+  },
+  {
+    id: "nasal-strips-4",    name: "Original Nasal Strips (90-pack)",    price: "$49.99",    imageSrc: "http://img.b2bpic.net/free-photo/young-female-doctor-holding-hands-head-medical-uniform-mask-looking-confident_176474-81552.jpg?_wi=1",    imageAlt: "TAPE IT Original Nasal Strips 90-pack",    description: "Stock up and save with our 90-pack of original nasal strips, ensuring you never run out of breath-enhancing support.",    details: [
+      "90 count bulk pack",      "Economical and convenient",      "Same great original formula",      "Continuous supply for consistent relief",      "Perfect for regular users"
+    ]
+  },
+  {
+    id: "nasal-strips-5",    name: "Travel Pack Assorted (10-pack)",    price: "$8.99",    imageSrc: "http://img.b2bpic.net/free-photo/collagen-white-stick-with-glass-water_185193-162486.jpg?_wi=1",    imageAlt: "TAPE IT Travel Pack Assorted Nasal Strips 10-pack",    description: "Don't let travel disrupt your breathing. Our assorted travel pack offers a convenient mix of strips for any situation.",    details: [
+      "10 count assorted pack",      "Compact for travel",      "Includes a mix of original and sensitive strips",      "Always be prepared for better breathing on the go",      " resealable pouch"
+    ]
+  },
+  {
+    id: "nasal-strips-6",    name: "Kids Nasal Strips (20-pack)",    price: "$14.99",    imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-putting-medical-mask-face-protection_23-2148802176.jpg?_wi=1",    imageAlt: "TAPE IT Kids Nasal Strips 20-pack",    description: "Help your little ones breathe easier with our specially designed kids nasal strips. Gentle and perfectly sized for smaller noses.",    details: [
+      "20 count pack, kid-friendly design",      "Smaller size for children's noses",      "Hypoallergenic and gentle adhesive",      "Helps reduce nighttime stuffiness for better sleep",      "Fun, colorful designs"
+    ]
+  }
+];
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const productId = params.productId as string;
+  const [product, setProduct] = useState<ProductDetail | null>(null);
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Shop Now", id: "/products" },
+    { name: "How It Works", id: "/#features" },
+    { name: "Our Mission", id: "/#about" },
+    { name: "Contact Us", id: "/#contact" }
+  ];
+
+  useEffect(() => {
+    const foundProduct = mockProducts.find(p => p.id === productId);
+    if (foundProduct) {
+      setProduct(foundProduct);
+    } else {
+      // Optionally redirect to a 404 page or products list if not found
+      router.push('/products');
+    }
+  }, [productId, router]);
+
+  if (!product) {
+    return null; // Or a loading spinner
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="TAPE IT JO"
+          />
+        </div>
+
+        <div className="container mx-auto px-4 py-16" id="product-detail" data-section="product-detail">
+          <button
+            onClick={() => router.back()}
+            className="mb-8 text-primary-cta hover:underline focus:outline-none"
+          >
+            &larr; Back to Products
+          </button>
+          <div className="flex flex-col lg:flex-row gap-8 items-start">
+            <div className="w-full lg:w-1/2 relative bg-card rounded-lg overflow-hidden shadow-lg">
+              <Image
+                src={product.imageSrc.replace('?_wi=1', '?w=800&h=800&q=80')}
+                alt={product.imageAlt}
+                width={800}
+                height={800}
+                layout="responsive"
+                objectFit="contain"
+                className="rounded-lg"
+              />
+            </div>
+            <div className="w-full lg:w-1/2 p-4 md:p-8 bg-card rounded-lg shadow-lg">
+              <h1 className="text-4xl md:text-5xl font-bold mb-4 text-foreground leading-tight">
+                {product.name}
+              </h1>
+              <p className="text-3xl md:text-4xl font-semibold mb-6 text-primary-cta">
+                {product.price}
+              </p>
+              <p className="text-lg mb-6 text-foreground/80 leading-relaxed">
+                {product.description}
+              </p>
+              <h2 className="text-2xl font-semibold mb-3 text-foreground">
+                Product Features:
+              </h2>
+              <ul className="list-disc list-inside space-y-2 text-foreground/70">
+                {product.details.map((detail, index) => (
+                  <li key={index}>{detail}</li>
+                ))}
+              </ul>
+              <button
+                className="mt-8 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-md text-lg font-medium hover:opacity-90 transition-opacity duration-300"
+              >
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/yoga-mat-water-bottle-assortment_23-2149442713.jpg?_wi=1"
+            imageAlt="Gym product nasal strips lifestyle"
+            logoText="TAPE IT JO"
+            columns={[
+              {
+                title: "Product",                items: [
+                  { label: "Shop Now", href: "/products" },
+                  { label: "How It Works", href: "/#features" },
+                  { label: "FAQs", href: "/#faq" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "Our Mission", href: "/#about" },
+                  { label: "Contact Us", href: "/#contact" },
+                  { label: "Where to Find Us", href: "/locations" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "/privacy" },
+                  { label: "Terms of Service", href: "/terms" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 TAPE IT JO. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/products/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { useRouter } from 'next/navigation';
+
+export default function ProductsPage() {
+  const router = useRouter();
+
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "Products", id: "/products" },
+    { name: "How It Works", id: "/#features" },
+    { name: "Our Mission", id: "/#about" },
+    { name: "Contact Us", id: "/#contact" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="diagonal-gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleApple
+            navItems={navItems}
+            brandName="TAPE IT JO"
+          />
+        </div>
+
+        <div id="products-hero" data-section="products-hero">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "nasal-strips-1",                name: "Original Nasal Strips (30-pack)",                price: "$19.99",                imageSrc: "http://img.b2bpic.net/free-photo/young-fitness-girl-black-sportswear-with-headband-puzzled-standing-white-wall_141793-56736.jpg?_wi=2",                imageAlt: "TAPE IT Original Nasal Strips 30-pack",                onProductClick: () => router.push('/products/nasal-strips-1')
+              },
+              {
+                id: "nasal-strips-2",                name: "Sensitive Skin Nasal Strips (30-pack)",                price: "$22.99",                imageSrc: "http://img.b2bpic.net/free-photo/future-mother-keeps-shoes-baby_8353-5121.jpg?_wi=2",                imageAlt: "TAPE IT Sensitive Skin Nasal Strips 30-pack",                onProductClick: () => router.push('/products/nasal-strips-2')
+              },
+              {
+                id: "nasal-strips-3",                name: "Extra Strength Nasal Strips (30-pack)",                price: "$21.99",                imageSrc: "http://img.b2bpic.net/free-photo/woman-folding-menstrual-cup-medium-shot_23-2149734183.jpg?_wi=2",                imageAlt: "TAPE IT Extra Strength Nasal Strips 30-pack",                onProductClick: () => router.push('/products/nasal-strips-3')
+              },
+              {
+                id: "nasal-strips-4",                name: "Original Nasal Strips (90-pack)",                price: "$49.99",                imageSrc: "http://img.b2bpic.net/free-photo/young-female-doctor-holding-hands-head-medical-uniform-mask-looking-confident_176474-81552.jpg?_wi=2",                imageAlt: "TAPE IT Original Nasal Strips 90-pack",                onProductClick: () => router.push('/products/nasal-strips-4')
+              },
+              {
+                id: "nasal-strips-5",                name: "Travel Pack Assorted (10-pack)",                price: "$8.99",                imageSrc: "http://img.b2bpic.net/free-photo/collagen-white-stick-with-glass-water_185193-162486.jpg?_wi=2",                imageAlt: "TAPE IT Travel Pack Assorted Nasal Strips 10-pack",                onProductClick: () => router.push('/products/nasal-strips-5')
+              },
+              {
+                id: "nasal-strips-6",                name: "Kids Nasal Strips (20-pack)",                price: "$14.99",                imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-putting-medical-mask-face-protection_23-2148802176.jpg?_wi=2",                imageAlt: "TAPE IT Kids Nasal Strips 20-pack",                onProductClick: () => router.push('/products/nasal-strips-6')
+              }
+            ]}
+            title="Our Full Collection"
+            description="Explore all TAPE IT products designed for better breathing and enhanced well-being."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/yoga-mat-water-bottle-assortment_23-2149442713.jpg?_wi=2"
+            imageAlt="Gym product nasal strips lifestyle"
+            logoText="TAPE IT JO"
+            columns={[
+              {
+                title: "Product",                items: [
+                  { label: "Shop Now", href: "/products" },
+                  { label: "How It Works", href: "/#features" },
+                  { label: "FAQs", href: "/#faq" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "Our Mission", href: "/#about" },
+                  { label: "Contact Us", href: "/#contact" },
+                  { label: "Where to Find Us", href: "/locations" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "/privacy" },
+                  { label: "Terms of Service", href: "/terms" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 TAPE IT JO. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}