2026-05-23 12:19:48 +00:00
9 changed files with 155 additions and 114 deletions
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -5,18 +5,17 @@ import ReactLenis from "lenis/react";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import { Shield } from "lucide-react";

 export default function AboutPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleApple
            navItems={[
              { name: "About", id: "/about" },
              { name: "Athletes", id: "/athletes" },
-              { name: "Shop", id: "/#products" },
+              { name: "Shop", id: "/" },
            ]}
            brandName="OKIRO"
          />
--- a/src/app/athletes/page.tsx
+++ b/src/app/athletes/page.tsx
@@ -8,14 +8,14 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

 export default function AthletesPage() {
  return (
-    <ThemeProvider>
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarStyleApple
            navItems={[
              { name: "About", id: "/about" },
              { name: "Athletes", id: "/athletes" },
-              { name: "Shop", id: "/#products" },
+              { name: "Shop", id: "/" },
            ]}
            brandName="OKIRO"
          />
@@ -26,6 +26,7 @@ export default function AthletesPage() {
              textboxLayout="split"
              title="Our Athlete Team"
              description="Meet the professionals who test our gear under the most extreme conditions."
+              useInvertedBackground={false}
              groups={[
                {
                  id: "g1",                  groupTitle: "Professional Grapplers",                  members: [
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -2,15 +2,21 @@

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import { ShoppingCart, ArrowRight } from "lucide-react";
+import { ArrowRight } from "lucide-react";

 export default function CartPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{ name: "Back to Store", id: "/" }]} 
-        brandName="OKIRO"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Athletes", id: "/athletes" }
+          ]} 
+          brandName="OKIRO"
+        />
+      </div>
      <div className="container mx-auto px-4 py-20 min-h-[80vh] flex flex-col items-center justify-center">
        <h1 className="text-4xl font-bold mb-8">Your Tactical Kit</h1>
        <div className="w-full max-w-2xl bg-zinc-900/50 p-8 rounded-xl border border-zinc-800">
--- a/src/app/checkout/page.tsx
+++ b/src/app/checkout/page.tsx
@@ -5,17 +5,22 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp

 export default function CheckoutPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{ name: "Cart", id: "/cart" }]} 
-        brandName="OKIRO"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Athletes", id: "/athletes" }
+          ]} 
+          brandName="OKIRO"
+        />
+      </div>
      <div className="container mx-auto px-4 py-20">
        <h1 className="text-4xl font-bold mb-12">Secure Checkout</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
          <div className="bg-zinc-900/50 p-8 rounded-xl border border-zinc-800">
            <h2 className="text-2xl font-semibold mb-6">Shipping Details</h2>
-            {/* Checkout Form placeholder */}
            <div className="space-y-4">
              <input type="text" placeholder="Full Name" className="w-full bg-black p-3 rounded border border-zinc-700" />
              <input type="email" placeholder="Email" className="w-full bg-black p-3 rounded border border-zinc-700" />
--- a/src/app/confirmation/page.tsx
+++ b/src/app/confirmation/page.tsx
@@ -6,11 +6,17 @@ import { CheckCircle } from "lucide-react";

 export default function ConfirmationPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple 
-        navItems={[{ name: "Home", id: "/" }]} 
-        brandName="OKIRO"
-      />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Athletes", id: "/athletes" }
+          ]} 
+          brandName="OKIRO"
+        />
+      </div>
      <div className="container mx-auto px-4 py-20 flex flex-col items-center justify-center min-h-[60vh]">
        <CheckCircle className="w-20 h-20 text-white mb-6" />
        <h1 className="text-4xl font-bold mb-4">Order Confirmed</h1>
--- a/src/app/fight-shorts/page.tsx
+++ b/src/app/fight-shorts/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

 export default function FightShortsPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Fight Shorts"
-        description="Lightweight, moisture-wicking shorts built for intense grappling sessions."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "s1", name: "Pro Training Short", price: "$55", variant: "Midnight", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-hoodie-having-her-eyes-closed_23-2148322452.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Fight Shorts"
+          description="Lightweight, moisture-wicking shorts built for intense grappling sessions."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "s1", name: "Pro Training Short", price: "$55", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-hoodie-having-her-eyes-closed_23-2148322452.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/gis/page.tsx
+++ b/src/app/gis/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

 export default function GisPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Gis"
-        description="Tournament-grade gis engineered for ultimate comfort and resilience."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "g1", name: "Elite GI", price: "$195", variant: "White/Gold", imageSrc: "http://img.b2bpic.net/free-photo/pair-gloves-boxing-sport_23-2150367640.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Gis"
+          description="Tournament-grade gis engineered for ultimate comfort and resilience."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "g1", name: "Elite GI", price: "$195", imageSrc: "http://img.b2bpic.net/free-photo/pair-gloves-boxing-sport_23-2150367640.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/rashguards/page.tsx
+++ b/src/app/rashguards/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

 export default function RashguardsPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Rashguards"
-        description="High-performance compression wear designed for durability and mobility."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "r1", name: "Long Sleeve Tactical", price: "$85", variant: "Black/Grey", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Rashguards"
+          description="High-performance compression wear designed for durability and mobility."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "r1", name: "Long Sleeve Tactical", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
    </ThemeProvider>
  );
 }
--- a/src/app/womens-apparel/page.tsx
+++ b/src/app/womens-apparel/page.tsx
@@ -7,29 +7,35 @@ import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

 export default function WomensApparelPage() {
  return (
-    <ThemeProvider>
-      <NavbarStyleApple
-        navItems={[
-          { name: "Shop", id: "/#products" },
-          { name: "Rashguards", id: "/rashguards" },
-          { name: "Fight Shorts", id: "/fight-shorts" },
-          { name: "Gis", id: "/gis" },
-          { name: "Women's", id: "/womens-apparel" },
-        ]}
-        brandName="OKIRO"
-      />
-      <ProductCardFour
-        title="Women's Apparel"
-        description="Performance gear tailored for women, blending style and functionality."
-        textboxLayout="default"
-        useInvertedBackground={true}
-        animationType="slide-up"
-        gridVariant="four-items-2x2-equal-grid"
-        products={[
-          { id: "w1", name: "Compression Leggings", price: "$70", variant: "Shadow", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
-        ]}
-      />
-      <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Rashguards", id: "/rashguards" },
+            { name: "Fight Shorts", id: "/fight-shorts" },
+            { name: "Gis", id: "/gis" },
+            { name: "Women's", id: "/womens-apparel" },
+          ]}
+          brandName="OKIRO"
+        />
+      </div>
+      <div id="products" data-section="products">
+        <ProductCardFour
+          title="Women's Apparel"
+          description="Performance gear tailored for women, blending style and functionality."
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+          gridVariant="four-items-2x2-equal-grid"
+          products={[
+            { id: "w1", name: "Compression Leggings", price: "$70", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-workout-with-battle-ropes_1303-32020.jpg" }
+          ]}
+        />
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal logoText="OKIRO" leftLink={{ text: "Back", href: "/" }} rightLink={{ text: "Terms", href: "#" }} />
+      </div>
    </ThemeProvider>
  );
 }