Update src/app/page.tsx

Merge version_5 into main

src/app/for/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+
+export default function ForPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="directional-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="aurora"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="inset-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold">
+      <main>
+        <div id="productcatalog" data-section="productcatalog">
+        <ProductCatalog
+          layout="section"
+          products={[
+            {
+              id: "1",
+              name: "Pro Tennis Racket",
+              price: 299.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg",
+              imageAlt: "Pro Tennis Racket",
+              rating: 4.8,
+              reviewCount: 124,
+              category: "Rackets",
+              onProductClick: () => {}
+            },
+            {
+              id: "2",
+              name: "Custom Tennis Shoes",
+              price: 189.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930890.jpg",
+              imageAlt: "Custom Tennis Shoes",
+              rating: 4.9,
+              reviewCount: 89,
+              category: "Footwear",
+              onProductClick: () => {}
+            },
+            {
+              id: "3",
+              name: "Performance Tennis Apparel",
+              price: 129.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-city-architecture_23-2151918947.jpg",
+              imageAlt: "Performance Tennis Apparel",
+              rating: 4.7,
+              reviewCount: 156,
+              category: "Apparel",
+              onProductClick: () => {}
+            },
+            {
+              id: "4",
+              name: "Professional Tennis Bag",
+              price: 159.99,
+              imageSrc: "https://img.b2bpic.net/free-photo/futuristic-moon-background_23-2150930734.jpg",
+              imageAlt: "Professional Tennis Bag",
+              rating: 4.6,
+              reviewCount: 72,
+              category: "Accessories",
+              onProductClick: () => {}
+            }
+          ]}
+          searchPlaceholder="Search custom tennis gear..."
+          emptyMessage="No tennis products available"
+          className="w-full"
+          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+          cardClassName="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
+          imageClassName="w-full h-64 object-cover rounded-t-lg"
+          searchClassName="mb-8"
+          toolbarClassName="flex flex-col gap-4 mb-8"
+        />
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-font-family: var(--font-plus-jakarta-sans), sans-serif;), sans-serif;
+  font-family: var(--font-inter), sans-serif;), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-font-family: var(--font-plus-jakarta-sans), sans-serif;), sans-serif;
+  font-family: var(--font-libre-baskerville), serif;), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #e3deea;;
-  --card: #ffffff;;
-  --foreground: #27231f;;
-  --primary-cta: #27231f;;
-  --secondary-cta: #ffffff;;
-  --accent: #c68a62;;
-  --background-accent: #c68a62;; */
+  /* --background: #f5faff;;;
+  --card: #f1f8ff;;;
+  --foreground: #001122;;;
+  --primary-cta: #15479c;;;
+  --secondary-cta: #ffffff;;;
+  --accent: #a8cce8;;;
+  --background-accent: #7ba3cf;;; */
 
-  --background: #e3deea;;
-  --card: #ffffff;;
-  --foreground: #27231f;;
-  --primary-cta: #27231f;;
+  --background: #f5faff;;;
+  --card: #f1f8ff;;;
+  --foreground: #001122;;;
+  --primary-cta: #15479c;;;
   --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffffff;;;
   --secondary-cta-text: #1b0c25;
-  --accent: #c68a62;;
-  --background-accent: #c68a62;;
+  --accent: #a8cce8;;;
+  --background-accent: #7ba3cf;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen.tsx

@@ -13,7 +13,7 @@ import type { ButtonConfig } from "@/types/button";
 import "./NavbarStyleFullscreen.css";
 
 interface NavLinkProps {
-  item: NavItem;
+  item: NavItem & { href?: string };
   onClose: () => void;
 }
 
@@ -21,13 +21,13 @@ const NavLink = ({ item, onClose }: NavLinkProps) => {
   const handleClick = useButtonClick(item.id, onClose);
 
   return (
-    <button
-      type="button"
-      className="navbar-fullscreen__link text-background font-normal leading-[1.15] no-underline text-9xl bg-transparent border-none cursor-pointer"
+    <a
+      href={item.href || "#"}
+      className="navbar-fullscreen__link text-background font-normal leading-[1.15] no-underline text-9xl bg-transparent border-none cursor-pointer block"
       onClick={handleClick}
     >
       <span className="navbar-fullscreen__link-text block relative">{item.name}</span>
-    </button>
+    </a>
   );
 };