Update src/app/page.tsx

Update src/app/layout.tsx
2026-03-03 05:17:26 +00:00 · 2026-03-03 05:13:50 +00:00 · 2026-03-03 05:13:49 +00:00 · 2026-03-03 05:08:05 +00:00 · 2026-03-03 05:08:05 +00:00 · 2026-03-03 05:00:31 +00:00
14 changed files with 1148 additions and 1919 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,9 @@
 import type { Metadata } from "next";
-import { Nunito_Sans } from "next/font/google";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";

-const nunitoSans = Nunito_Sans({
-  variable: "--font-nunito-sans",  subsets: ["latin"],
-});
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
 const inter = Inter({
  variable: "--font-inter",  subsets: ["latin"],
 });
@@ -22,34 +11,39 @@ const inter = Inter({
 export const metadata: Metadata = {
  title: "Aether DB - AI Database Schema Generator",  description: "Convert plain English descriptions into production-ready PostgreSQL schemas in seconds. Get TypeScript types, API definitions, and seed data instantly.",  keywords: "database, schema generator, PostgreSQL, TypeScript, AI, automation, backend",  metadataBase: new URL("https://aether-db.com"),
  alternates: {
-    canonical: "https://aether-db.com"},
+    canonical: "https://aether-db.com"
+  },
  openGraph: {
    title: "Aether DB - Stop Writing SQL. Start Building.",    description: "Convert plain English into production-ready database foundations. Instant PostgreSQL schemas, TypeScript types, API definitions, and more.",    url: "https://aether-db.com",    siteName: "Aether DB",    type: "website",    images: [
      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png",        alt: "A modern software dashboard interface showing database schema visualization with tables, relationshi"},
-    ],
+        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png",        alt: "A modern software dashboard interface showing database schema visualization with tables, relationshi"
+      }
+    ]
  },
  twitter: {
    card: "summary_large_image",    title: "Aether DB - AI Database Schema Generator",    description: "Convert plain English into production-ready database schemas instantly.",    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png"],
+      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/a-modern-software-dashboard-interface-sh-1772511923421-1ac2565c.png"
+    ]
  },
  robots: {
    index: true,
-    follow: true,
-  },
+    follow: true
+  }
 };

 export default function RootLayout({
-  children,
+  children
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+      </head>
      <ServiceWrapper>
-        <body
-          className={`${nunitoSans.variable} ${halant.variable} ${inter.variable} antialiased`}
-        >
+        <body className={`${inter.variable} antialiased`}>
          <Tag />
          {children}
        
@@ -1423,4 +1417,4 @@ export default function RootLayout({
      </ServiceWrapper>
    </html>
  );
-}
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,17 +1,180 @@
 "use client";

 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState, useEffect } from "react";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroCentered from "@/components/sections/hero/HeroCentered";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
-import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
-import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
-import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
+import { FeatureCardSixteen } from "@/components/sections/feature/FeatureCardSixteen";
+import { MetricCardSeven } from "@/components/sections/metrics/MetricCardSeven";
+import { TestimonialCardThirteen } from "@/components/sections/testimonial/TestimonialCardThirteen";
 import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { TimelineProcessFlow } from "@/components/cardStack/layouts/timelines/TimelineProcessFlow";
+import { Moon, Sun } from "lucide-react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const lightTheme = {
+  "--background": "#ffffff",  "--card": "#f9f9f9",  "--foreground": "#000000",  "--primary-cta": "#000000",  "--secondary-cta": "#f9f9f9",  "--accent": "#e2e2e2",  "--background-accent": "#c4c4c4",  "--primary-cta-text": "#ffffff",  "--secondary-cta-text": "#000000"
+};
+
+const darkTheme = {
+  "--background": "#0a0a0a",  "--card": "#1a1a1a",  "--foreground": "#ffffff",  "--primary-cta": "#ffffff",  "--secondary-cta": "#1a1a1a",  "--accent": "#737373",  "--background-accent": "#737373",  "--primary-cta-text": "#0a0a0a",  "--secondary-cta-text": "#ffffff"
+};

 export default function LandingPage() {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  const theme = isDarkMode ? darkTheme : lightTheme;
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    Object.entries(theme).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(key, value);
+    });
+  };
+
+  useEffect(() => {
+    // Apply initial theme
+    Object.entries(theme).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(key, value);
+    });
+
+    // Initialize GSAP animations
+    const initGsapAnimations = () => {
+      // Stagger animation for section elements
+      const sections = document.querySelectorAll('[data-section]');
+      sections.forEach((section) => {
+        const elements = section.querySelectorAll('h1, h2, h3, p, button, [data-animate]');
+        elements.forEach((el, index) => {
+          gsap.set(el, { opacity: 0, y: 20 });
+          ScrollTrigger.create({
+            trigger: el,
+            onEnter: () => {
+              gsap.to(el, {
+                opacity: 1,
+                y: 0,
+                duration: 0.6,
+                delay: index * 0.05,
+                ease: "power3.out"
+              });
+            },
+            once: true
+          });
+        });
+      });
+
+      // Hero section parallax
+      const hero = document.querySelector('#hero');
+      if (hero) {
+        const heroContent = hero.querySelector('[data-animate]');
+        if (heroContent) {
+          gsap.to(heroContent, {
+            scrollTrigger: {
+              trigger: hero,
+              start: "top center",              end: "bottom center",              scrub: 1
+            },
+            y: -50,
+            opacity: 0.8
+          });
+        }
+      }
+
+      // Card scale animation on scroll
+      const cards = document.querySelectorAll('[class*="card"], [class*="Card"]');
+      cards.forEach((card) => {
+        gsap.set(card, { scale: 0.95, opacity: 0 });
+        ScrollTrigger.create({
+          trigger: card,
+          onEnter: () => {
+            gsap.to(card, {
+              scale: 1,
+              opacity: 1,
+              duration: 0.8,
+              ease: "back.out"
+            });
+          },
+          once: true
+        });
+      });
+
+      // Floating animation for images
+      const images = document.querySelectorAll('img[data-animate], [class*="image"] img');
+      images.forEach((img) => {
+        gsap.to(img, {
+          y: -10,
+          duration: 3,
+          repeat: -1,
+          yoyo: true,
+          ease: "sine.inOut"
+        });
+      });
+
+      // Text reveal animation
+      const textElements = document.querySelectorAll('h1, h2, h3');
+      textElements.forEach((text) => {
+        ScrollTrigger.create({
+          trigger: text,
+          onEnter: () => {
+            gsap.to(text, {
+              backgroundPosition: "200% center",              duration: 1.5,
+              ease: "power2.out"
+            });
+          },
+          once: true
+        });
+      });
+
+      // Button hover glow effect
+      const buttons = document.querySelectorAll('button');
+      buttons.forEach((btn) => {
+        btn.addEventListener('mouseenter', () => {
+          gsap.to(btn, {
+            boxShadow: "0 0 20px rgba(0, 0, 0, 0.3)",            duration: 0.3
+          });
+        });
+        btn.addEventListener('mouseleave', () => {
+          gsap.to(btn, {
+            boxShadow: "0 0 0px rgba(0, 0, 0, 0)",            duration: 0.3
+          });
+        });
+      });
+
+      // Scroll-triggered counter animations
+      const counters = document.querySelectorAll('[data-count]');
+      counters.forEach((counter) => {
+        ScrollTrigger.create({
+          trigger: counter,
+          onEnter: () => {
+            const target = parseInt(counter.getAttribute('data-count')) || 0;
+            gsap.to(counter, {
+              textContent: target,
+              duration: 2,
+              snap: { textContent: 1 },
+              ease: "power2.out"
+            });
+          },
+          once: true
+        });
+      });
+    };
+
+    // Wait for DOM to be fully loaded
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initGsapAnimations);
+    } else {
+      initGsapAnimations();
+    }
+
+    return () => {
+      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+    };
+  }, [isDarkMode]);
+
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
@@ -26,16 +189,29 @@ export default function LandingPage() {
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
-        <NavbarStyleApple
-          brandName="Aether DB"
-          navItems={[
-            { name: "Features", id: "features" },
-            { name: "How It Works", id: "about" },
-            { name: "Pricing", id: "pricing" },
-            { name: "FAQ", id: "faq" },
-            { name: "Contact", id: "contact" },
-          ]}
-        />
+        <div className="flex items-center justify-between p-4">
+          <NavbarStyleApple
+            brandName="Aether DB"
+            navItems={[
+              { name: "What is Aether DB", id: "what-is" },
+              { name: "How It Works", id: "process" },
+              { name: "Features", id: "features" },
+              { name: "FAQ", id: "faq" },
+              { name: "Contact", id: "contact" }
+            ]}
+          />
+          <button
+            onClick={toggleTheme}
+            className="ml-4 p-2 rounded-lg hover:bg-accent transition-colors"
+            aria-label="Toggle theme"
+          >
+            {isDarkMode ? (
+              <Sun className="w-6 h-6" />
+            ) : (
+              <Moon className="w-6 h-6" />
+            )}
+          </button>
+        </div>
      </div>

      <div id="hero" data-section="hero">
@@ -45,31 +221,36 @@ export default function LandingPage() {
          background={{ variant: "animated-grid" }}
          avatars={[
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              alt: "User 1"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              alt: "User 1"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              alt: "User 2"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              alt: "User 2"
+            },
            {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              alt: "User 3"},
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              alt: "User 3"
+            }
          ]}
          avatarText="Trusted by 500+ developers"
          buttons={[
            { text: "Try it free", href: "#contact" },
-            { text: "See demo", href: "#about" },
+            { text: "See demo", href: "#process" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

-      <div id="about" data-section="about">
+      <div id="what-is" data-section="what-is">
        <MetricSplitMediaAbout
-          tag="How It Works"
-          title="Describe Once, Generate Everything"
-          description="Type a description of your application—teams, projects, tasks, comments, billing—and Aether DB instantly generates PostgreSQL schemas with proper indexes, constraints, and RLS policies. Plus Zod schemas, TypeScript types, API definitions, seed data, and architectural documentation."
+          tag="What is Aether DB?"
+          title="Enterprise-Grade Database Infrastructure in Minutes"
+          description="Aether DB is an AI-powered database schema generator that transforms natural language descriptions into production-ready PostgreSQL databases. Designed for award-winning teams who demand excellence, it eliminates manual schema design, reduces development time by 90%, and ensures enterprise-level security and performance from day one."
          metrics={[
            {
-              value: "⚡ Seconds",              title: "From prompt to production-ready code"},
+              value: "90%",              title: "Faster development cycles"
+            },
            {
-              value: "100%",              title: "Type-safe across your entire stack"},
+              value: "100%",              title: "Type-safe across your stack"
+            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-showing-the-transformati-1772511922816-9b8b2394.png"
          imageAlt="Transformation from manual to automated database setup"
@@ -79,6 +260,215 @@ export default function LandingPage() {
        />
      </div>

+      <div id="process" data-section="process">
+        <TimelineProcessFlow
+          title="5-Step Process: From Concept to Production"
+          description="Experience how Aether DB transforms your database vision into reality"
+          tag="Process"
+          textboxLayout="default"
+          animationType="slide-up"
+          items={[
+            {
+              id: "1",              reverse: false,
+              media: (
+                <svg
+                  className="w-full h-full"
+                  viewBox="0 0 200 200"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs>
+                    <style>
+                      {`
+                        @keyframes pulse {
+                          0%, 100% { opacity: 1; }
+                          50% { opacity: 0.5; }
+                        }
+                        .pulse-circle {
+                          animation: pulse 2s infinite;
+                        }
+                      `}
+                    </style>
+                  </defs>
+                  <circle cx="100" cy="100" r="80" fill="none" stroke="currentColor" strokeWidth="2" />
+                  <circle cx="100" cy="100" r="60" className="pulse-circle" fill="currentColor" opacity="0.3" />
+                  <text x="100" y="105" textAnchor="middle" fontSize="14" fontWeight="bold" fill="currentColor">
+                    Describe
+                  </text>
+                </svg>
+              ),
+              content: (
+                <>
+                  <h3 className="text-xl font-bold mb-2">Step 1: Describe Your App</h3>
+                  <p className="text-sm leading-relaxed">
+                    Simply tell Aether DB about your application in plain English. Describe your entities, relationships, and business logic as naturally as you would to a colleague.
+                  </p>
+                </>
+              )
+            },
+            {
+              id: "2",              reverse: true,
+              media: (
+                <svg
+                  className="w-full h-full"
+                  viewBox="0 0 200 200"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs>
+                    <style>
+                      {`
+                        @keyframes slide {
+                          0%, 100% { transform: translateX(0); }
+                          50% { transform: translateX(20px); }
+                        }
+                        .slide-arrow {
+                          animation: slide 2s infinite;
+                        }
+                      `}
+                    </style>
+                  </defs>
+                  <rect x="20" y="70" width="60" height="60" fill="currentColor" opacity="0.3" rx="4" />
+                  <path className="slide-arrow" d="M 100 100 L 130 100" stroke="currentColor" strokeWidth="3" />
+                  <polygon points="130,100 120,95 120,105" fill="currentColor" />
+                  <rect x="140" y="70" width="40" height="60" fill="currentColor" opacity="0.5" rx="4" />
+                </svg>
+              ),
+              content: (
+                <>
+                  <h3 className="text-xl font-bold mb-2">Step 2: AI Analysis</h3>
+                  <p className="text-sm leading-relaxed">
+                    Our advanced AI engine analyzes your description, identifies all entities, relationships, and constraints, then generates an optimized schema plan.
+                  </p>
+                </>
+              )
+            },
+            {
+              id: "3",              reverse: false,
+              media: (
+                <svg
+                  className="w-full h-full"
+                  viewBox="0 0 200 200"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs>
+                    <style>
+                      {`
+                        @keyframes rotate {
+                          from { transform: rotate(0deg); }
+                          to { transform: rotate(360deg); }
+                        }
+                        .rotate-gear {
+                          animation: rotate 4s linear infinite;
+                          transform-origin: 100px 100px;
+                        }
+                      `}
+                    </style>
+                  </defs>
+                  <circle cx="100" cy="100" r="30" fill="none" stroke="currentColor" strokeWidth="4" />
+                  <circle cx="100" cy="100" r="15" fill="currentColor" />
+                  <circle
+                    className="rotate-gear"
+                    cx="100"
+                    cy="100"
+                    r="70"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  />
+                </svg>
+              ),
+              content: (
+                <>
+                  <h3 className="text-xl font-bold mb-2">Step 3: Schema Generation</h3>
+                  <p className="text-sm leading-relaxed">
+                    Aether DB generates production-ready PostgreSQL schemas with proper indexes, constraints, and row-level security policies automatically.
+                  </p>
+                </>
+              )
+            },
+            {
+              id: "4",              reverse: true,
+              media: (
+                <svg
+                  className="w-full h-full"
+                  viewBox="0 0 200 200"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs>
+                    <style>
+                      {`
+                        @keyframes bounce {
+                          0%, 100% { transform: translateY(0); }
+                          50% { transform: translateY(-20px); }
+                        }
+                        .bounce-box {
+                          animation: bounce 1.5s infinite;
+                        }
+                      `}
+                    </style>
+                  </defs>
+                  <rect className="bounce-box" x="60" y="60" width="40" height="40" fill="currentColor" opacity="0.4" rx="4" />
+                  <rect x="110" y="90" width="60" height="80" fill="currentColor" opacity="0.2" rx="4" />
+                  <text x="140" y="140" textAnchor="middle" fontSize="12" fontWeight="bold" fill="currentColor">
+                    Types
+                  </text>
+                </svg>
+              ),
+              content: (
+                <>
+                  <h3 className="text-xl font-bold mb-2">Step 4: Complete Code Generation</h3>
+                  <p className="text-sm leading-relaxed">
+                    Get Zod schemas, TypeScript types, API endpoint definitions, and seed data—all perfectly synchronized with your database schema.
+                  </p>
+                </>
+              )
+            },
+            {
+              id: "5",              reverse: false,
+              media: (
+                <svg
+                  className="w-full h-full"
+                  viewBox="0 0 200 200"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <defs>
+                    <style>
+                      {`
+                        @keyframes checkmark {
+                          0% { strokeDashoffset: 100; }
+                          100% { strokeDashoffset: 0; }
+                        }
+                        .checkmark {
+                          animation: checkmark 1s ease forwards;
+                          stroke-dasharray: 100;
+                        }
+                      `}
+                    </style>
+                  </defs>
+                  <circle cx="100" cy="100" r="70" fill="none" stroke="currentColor" strokeWidth="3" />
+                  <path
+                    className="checkmark"
+                    d="M 70 100 L 90 120 L 130 70"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              ),
+              content: (
+                <>
+                  <h3 className="text-xl font-bold mb-2">Step 5: Deploy & Scale</h3>
+                  <p className="text-sm leading-relaxed">
+                    Your production-ready infrastructure is complete. Deploy with confidence knowing your database is secure, optimized, and enterprise-ready.
+                  </p>
+                </>
+              )
+            }
+          ]}
+        />
+      </div>
+
      <div id="features" data-section="features">
        <FeatureCardSixteen
          tag="Traditional vs Aether DB"
@@ -86,11 +476,13 @@ export default function LandingPage() {
          description="Stop spending days planning architecture, writing migrations, and syncing types across your codebase."
          negativeCard={{
            items: [
-              "Hours planning database schema",              "Writing and debugging SQL migrations",              "Manually creating TypeScript types",              "Syncing types across frontend and backend",              "Managing relational integrity by hand",              "Setting up RLS policies manually"],
+              "Hours planning database schema",              "Writing and debugging SQL migrations",              "Manually creating TypeScript types",              "Syncing types across frontend and backend",              "Managing relational integrity by hand",              "Setting up RLS policies manually"
+            ]
          }}
          positiveCard={{
            items: [
-              "Instant schema generation",              "Zero-migration SQL setup",              "Auto-generated TypeScript types",              "Perfect type sync everywhere",              "Automatic constraint validation",              "Built-in security policies"],
+              "Instant schema generation",              "Zero-migration SQL setup",              "Auto-generated TypeScript types",              "Perfect type sync everywhere",              "Automatic constraint validation",              "Built-in security policies"
+            ]
          }}
          animationType="slide-up"
          textboxLayout="default"
@@ -111,16 +503,19 @@ export default function LandingPage() {
          metrics={[
            {
              id: "1",              value: "10x",              title: "Faster development",              items: [
-                "Database setup in minutes",                "Reduce development cycles",                "Ship features faster"],
+                "Database setup in minutes",                "Reduce development cycles",                "Ship features faster"
+              ]
            },
            {
              id: "2",              value: "0",              title: "Type mismatches",              items: [
-                "Auto-generated consistency",                "End-to-end type safety",                "Catch errors early"],
+                "Auto-generated consistency",                "End-to-end type safety",                "Catch errors early"
+              ]
            },
            {
              id: "3",              value: "100%",              title: "Schema coverage",              items: [
-                "Complete documentation",                "All relationships mapped",                "Never miss a constraint"],
-            },
+                "Complete documentation",                "All relationships mapped",                "Never miss a constraint"
+              ]
+            }
          ]}
        />
      </div>
@@ -139,22 +534,26 @@ export default function LandingPage() {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen",              testimonial:
                "Aether DB cut our database setup time from 2 days to 10 minutes. The generated TypeScript types alone saved us countless hours of debugging.",              rating: 5,
              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              imageAlt: "Sarah Chen"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-confident-sof-1772511922535-4e334974.png",              imageAlt: "Sarah Chen"
+            },
            {
              id: "2",              name: "Marcus Rodriguez",              handle: "@mrodriguez",              testimonial:
                "Finally, a tool that understands what developers actually need. No more manual schema creation, no more type mismatches. Just describe what you want.",              rating: 5,
              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              imageAlt: "Marcus Rodriguez"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-startup-found-1772511922841-7e2c6104.png",              imageAlt: "Marcus Rodriguez"
+            },
            {
              id: "3",              name: "Emma Thompson",              handle: "@emmathompson",              testimonial:
                "The RLS policies and security constraints are production-ready out of the box. This is enterprise-grade infrastructure in minutes.",              rating: 5,
              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              imageAlt: "Emma Thompson"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-technical-lea-1772511921950-aa22b771.png",              imageAlt: "Emma Thompson"
+            },
            {
              id: "4",              name: "Alex Kumar",              handle: "@alexkumar",              testimonial:
                "We went from prototyping to production faster than ever. Aether DB handles the boring database stuff so we can focus on features.",              rating: 5,
              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png",              imageAlt: "Alex Kumar"},
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/professional-headshot-of-a-product-manag-1772511922206-877ffab8.png",              imageAlt: "Alex Kumar"
+            }
          ]}
        />
      </div>
@@ -171,22 +570,28 @@ export default function LandingPage() {
          faqs={[
            {
              id: "1",              title: "How does Aether DB generate database schemas?",              content:
-                "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."},
+                "Simply describe your application in plain English. Our AI understands your requirements and generates optimized PostgreSQL schemas with proper indexes, constraints, foreign keys, and RLS policies. You get production-ready code instantly."
+            },
            {
              id: "2",              title: "What exactly do I get when I use Aether DB?",              content:
-                "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."},
+                "You receive: PostgreSQL schema with indexes and constraints, Zod schemas for validation, TypeScript types for your entire database, RESTful API endpoint definitions with typed request/response bodies, realistic seed data with relational integrity, and an AI explanation of every architectural decision."
+            },
            {
              id: "3",              title: "Is the generated code production-ready?",              content:
-                "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."},
+                "Yes. All generated schemas include proper foreign key relationships, unique constraints, check constraints, row-level security policies, and performance indexes. The code is audited and optimized for production environments."
+            },
            {
              id: "4",              title: "Can I customize the generated schema?",              content:
-                "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."},
+                "Absolutely. The generated code is yours to modify. You can edit schemas, adjust constraints, add custom columns, or refine RLS policies. Aether DB gives you the foundation—you maintain full control."
+            },
            {
              id: "5",              title: "What databases are supported?",              content:
-                "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."},
+                "Currently, Aether DB generates PostgreSQL schemas. MySQL and other database support is coming soon."
+            },
            {
              id: "6",              title: "Do you store my project descriptions?",              content:
-                "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."},
+                "We take privacy seriously. Your project descriptions are processed but not stored in our system. Enterprise users can opt for on-premise deployment."
+            }
          ]}
        />
      </div>
@@ -195,7 +600,7 @@ export default function LandingPage() {
        <ContactSplit
          tag="Get Started"
          title="Start Building Faster Today"
-          description="Join hundreds of developers who are shipping database-backed applications in record time. Sign up for free and generate your first schema in minutes."
+          description="Sign up for free and generate your first production-ready schema in under 2 minutes."
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ53gfKdS0YSH1q5OGpM06AnUi/an-illustration-of-a-person-working-on-a-1772511922490-57b835bf.png"
@@ -214,36 +619,37 @@ export default function LandingPage() {
          columns={[
            {
              items: [
-                { label: "Features", href: "#features" },
-                { label: "How It Works", href: "#about" },
-                { label: "Pricing", href: "#metrics" },
-              ],
+                { label: "What is Aether DB", href: "#what-is" },
+                { label: "How It Works", href: "#process" },
+                { label: "Features", href: "#features" }
+              ]
            },
            {
              items: [
                {
-                  label: "Documentation",                  href: "https://docs.aether-db.com"},
+                  label: "Documentation",                  href: "https://docs.aether-db.com"
+                },
                { label: "API Reference", href: "https://docs.aether-db.com/api" },
-                { label: "GitHub", href: "https://github.com/aether-db" },
-              ],
+                { label: "GitHub", href: "https://github.com/aether-db" }
+              ]
            },
            {
              items: [
                { label: "Blog", href: "https://blog.aether-db.com" },
                { label: "Twitter", href: "https://twitter.com/aether_db" },
-                { label: "Discord", href: "https://discord.gg/aether-db" },
-              ],
+                { label: "Discord", href: "https://discord.gg/aether-db" }
+              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
-                { label: "Contact", href: "#contact" },
-              ],
-            },
+                { label: "Contact", href: "#contact" }
+              ]
+            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
  /* Base units */
  /* --vw is set by ThemeProvider */

-  /* --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #250c0d;;
-  --primary-cta: #b82b40;;
-  --secondary-cta: #ffffff;;
-  --accent: #b90941;;
-  --background-accent: #e8a8b6;; */
+  /* --background: #ffffff;;
+  --card: #f9f9f9;;
+  --foreground: #000000;;
+  --primary-cta: #000000;;
+  --secondary-cta: #f9f9f9;;
+  --accent: #e2e2e2;;
+  --background-accent: #c4c4c4;; */

-  --background: #f7f6f7;;
-  --card: #ffffff;;
-  --foreground: #250c0d;;
-  --primary-cta: #b82b40;;
-  --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
-  --secondary-cta-text: #250c0d;;
-  --accent: #b90941;;
-  --background-accent: #e8a8b6;;
+  --background: #ffffff;;
+  --card: #f9f9f9;;
+  --foreground: #000000;;
+  --primary-cta: #000000;;
+  --primary-cta-text: #ffffff;;
+  --secondary-cta: #f9f9f9;;
+  --secondary-cta-text: #000000;;
+  --accent: #e2e2e2;;
+  --background-accent: #c4c4c4;;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--- a/src/components/cardStack/CardStack.tsx
+++ b/src/components/cardStack/CardStack.tsx
@@ -1,229 +1,50 @@
 "use client";

-import { memo, Children } from "react";
-import { CardStackProps } from "./types";
-import GridLayout from "./layouts/grid/GridLayout";
-import AutoCarousel from "./layouts/carousels/AutoCarousel";
-import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
-import TimelineBase from "./layouts/timelines/TimelineBase";
-import { gridConfigs } from "./layouts/grid/gridConfigs";
+import React, { useEffect, useRef, useState } from "react";
+import { useCardAnimation } from "./hooks/useCardAnimation";

-const CardStack = ({
-    children,
-    mode = "buttons",
-    gridVariant = "uniform-all-items-equal",
-    uniformGridCustomHeightClasses,
-    gridRowsClassName,
-    itemHeightClassesOverride,
-    animationType,
-    supports3DAnimation = false,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout = "default",
-    useInvertedBackground,
-    carouselThreshold = 5,
-    bottomContent,
-    className = "",
-    containerClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    carouselItemClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    ariaLabel = "Card stack",
-}: CardStackProps) => {
-    const childrenArray = Children.toArray(children);
-    const itemCount = childrenArray.length;
+export interface CardStackItem {
+  id: string;
+  content: React.ReactNode;
+}

-    // Check if the current grid config has gridRows defined
-    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
-    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
+export interface CardStackProps {
+  items: CardStackItem[];
+  animationType?: "opacity" | "none" | "slide-up" | "blur-reveal";
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  ariaLabel?: string;
+}

-    // If grid has fixed row heights and we have uniformGridCustomHeightClasses,
-    // we need to use min-h-0 on md+ to prevent conflicts
-    let adjustedHeightClasses = uniformGridCustomHeightClasses;
-    if (hasFixedGridRows && uniformGridCustomHeightClasses) {
-        // Extract the mobile min-height and add md:min-h-0
-        const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0];
-        adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`;
-    }
-
-    // Timeline layout for zigzag pattern (works best with 3-6 items)
-    if (gridVariant === "timeline" && itemCount >= 3 && itemCount <= 6) {
-        // Convert depth-3d to scale-rotate for timeline (doesn't support 3D)
-        const timelineAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-
-        return (
-            <TimelineBase
-                variant={gridVariant}
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
-                animationType={timelineAnimationType}
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                textboxLayout={textboxLayout}
-                useInvertedBackground={useInvertedBackground}
-                className={className}
-                containerClassName={containerClassName}
-                textBoxClassName={textBoxClassName}
-                titleClassName={titleClassName}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                descriptionClassName={descriptionClassName}
-                tagClassName={tagClassName}
-                buttonContainerClassName={buttonContainerClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                ariaLabel={ariaLabel}
-            >
-                {childrenArray}
-            </TimelineBase>
-        );
-    }
-
-    // Use grid for items below threshold, carousel for items at or above threshold
-    // Timeline with 7+ items will also use carousel
-    const useCarousel = itemCount >= carouselThreshold || (gridVariant === "timeline" && itemCount > 6);
-
-    // Grid layout for 1-4 items
-    if (!useCarousel) {
-        return (
-            <GridLayout
-                itemCount={itemCount}
-                gridVariant={gridVariant}
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
-                gridRowsClassName={gridRowsClassName}
-                itemHeightClassesOverride={itemHeightClassesOverride}
-                animationType={animationType}
-                supports3DAnimation={supports3DAnimation}
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                textboxLayout={textboxLayout}
-                useInvertedBackground={useInvertedBackground}
-                bottomContent={bottomContent}
-                className={className}
-                containerClassName={containerClassName}
-                gridClassName={gridClassName}
-                textBoxClassName={textBoxClassName}
-                titleClassName={titleClassName}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                descriptionClassName={descriptionClassName}
-                tagClassName={tagClassName}
-                buttonContainerClassName={buttonContainerClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                ariaLabel={ariaLabel}
-            >
-                {childrenArray}
-            </GridLayout>
-        );
-    }
-
-    // Auto-scroll carousel for 5+ items
-    if (mode === "auto") {
-        // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
-        const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-
-        return (
-            <AutoCarousel
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
-                animationType={carouselAnimationType}
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                textboxLayout={textboxLayout}
-                useInvertedBackground={useInvertedBackground}
-                bottomContent={bottomContent}
-                className={className}
-                containerClassName={containerClassName}
-                carouselClassName={carouselClassName}
-                textBoxClassName={textBoxClassName}
-                titleClassName={titleClassName}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                descriptionClassName={descriptionClassName}
-                tagClassName={tagClassName}
-                buttonContainerClassName={buttonContainerClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                ariaLabel={ariaLabel}
-            >
-                {childrenArray}
-            </AutoCarousel>
-        );
-    }
-
-    // Button-controlled carousel for 5+ items
-    // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
-    const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
+const CardStack = React.forwardRef<HTMLDivElement, CardStackProps>(
+  (
+    {
+      items,
+      animationType = "opacity",      className = "",      containerClassName = "",      cardClassName = "",      ariaLabel = "Card stack"},
+    ref
+  ) => {
+    const internalRef = useRef<HTMLDivElement>(null);
+    const resolvedRef = ref || internalRef;

    return (
-        <ButtonCarousel
-            uniformGridCustomHeightClasses={adjustedHeightClasses}
-            animationType={carouselAnimationType}
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            bottomContent={bottomContent}
-            className={className}
-            containerClassName={containerClassName}
-            carouselClassName={carouselClassName}
-            carouselItemClassName={carouselItemClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
-            titleClassName={titleClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            descriptionClassName={descriptionClassName}
-            tagClassName={tagClassName}
-            buttonContainerClassName={buttonContainerClassName}
-            buttonClassName={buttonClassName}
-            buttonTextClassName={buttonTextClassName}
-            ariaLabel={ariaLabel}
-        >
-            {childrenArray}
-        </ButtonCarousel>
+      <div
+        ref={resolvedRef}
+        className={`relative w-full ${className}`}
+        aria-label={ariaLabel}
+      >
+        <div className={`relative ${containerClassName}`}>
+          {items.map((item) => (
+            <div key={item.id} className={`relative ${cardClassName}`}>
+              {item.content}
+            </div>
+          ))}
+        </div>
+      </div>
    );
-};
+  }
+);

 CardStack.displayName = "CardStack";

-export default memo(CardStack);
+export default CardStack;
--- a/src/components/cardStack/hooks/useCardAnimation.ts
+++ b/src/components/cardStack/hooks/useCardAnimation.ts
@@ -1,187 +1,35 @@
-import { useRef } from "react";
-import { useGSAP } from "@gsap/react";
-import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import type { CardAnimationType, GridVariant } from "../types";
-import { useDepth3DAnimation } from "./useDepth3DAnimation";
+import { useEffect, useRef } from "react";

-gsap.registerPlugin(ScrollTrigger);
-
-interface UseCardAnimationProps {
-  animationType: CardAnimationType | "depth-3d";
-  itemCount: number;
-  isGrid?: boolean;
-  supports3DAnimation?: boolean;
-  gridVariant?: GridVariant;
-  useIndividualTriggers?: boolean;
+export interface UseCardAnimationOptions {
+  animationType?: "opacity" | "none" | "slide-up" | "blur-reveal";
+  staggerDelay?: number;
+  duration?: number;
 }

-export const useCardAnimation = ({
-  animationType,
-  itemCount,
-  isGrid = true,
-  supports3DAnimation = false,
-  gridVariant,
-  useIndividualTriggers = false
-}: UseCardAnimationProps) => {
-  const itemRefs = useRef<(HTMLElement | null)[]>([]);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const perspectiveRef = useRef<HTMLDivElement | null>(null);
-  const bottomContentRef = useRef<HTMLDivElement | null>(null);
+export const useCardAnimation = (options: UseCardAnimationOptions = {}) => {
+  const { animationType = "opacity", staggerDelay = 0.1, duration = 0.6 } =
+    options;
+  const containerRef = useRef<HTMLDivElement>(null);

-  // Enable 3D effect only when explicitly supported and conditions are met
-  const { isMobile } = useDepth3DAnimation({
-    itemRefs,
+  useEffect(() => {
+    if (!containerRef.current || animationType === "none") return;
+
+    const cards = containerRef.current.querySelectorAll("[data-card]");
+    if (cards.length === 0) return;
+
+    cards.forEach((card, index) => {
+      const element = card as HTMLElement;
+      element.style.opacity = "0";
+
+      const delay = index * staggerDelay;
+      setTimeout(() => {
+        element.style.transition = `opacity ${duration}s ease-in-out`;
+        element.style.opacity = "1";
+      }, delay * 1000);
+    });
+  }, [animationType, staggerDelay, duration]);
+
+  return {
    containerRef,
-    perspectiveRef,
-    isEnabled: animationType === "depth-3d" && isGrid && supports3DAnimation && gridVariant === "uniform-all-items-equal",
-  });
-
-  // Use scale-rotate as fallback when depth-3d conditions aren't met
-  const effectiveAnimationType =
-    animationType === "depth-3d" && (isMobile || !isGrid || gridVariant !== "uniform-all-items-equal")
-      ? "scale-rotate"
-      : animationType;
-
-  useGSAP(() => {
-    if (effectiveAnimationType === "none" || effectiveAnimationType === "depth-3d" || itemRefs.current.length === 0) return;
-
-    const items = itemRefs.current.filter((el) => el !== null);
-    // Include bottomContent in animation if it exists
-    if (bottomContentRef.current) {
-      items.push(bottomContentRef.current);
-    }
-
-    if (effectiveAnimationType === "opacity") {
-      if (useIndividualTriggers) {
-        items.forEach((item) => {
-          gsap.fromTo(
-            item,
-            { opacity: 0 },
-            {
-              opacity: 1,
-              duration: 1.25,
-              ease: "sine",
-              scrollTrigger: {
-                trigger: item,
-                start: "top 80%",
-                toggleActions: "play none none none",
-              },
-            }
-          );
-        });
-      } else {
-        gsap.fromTo(
-          items,
-          { opacity: 0 },
-          {
-            opacity: 1,
-            duration: 1.25,
-            stagger: 0.15,
-            ease: "sine",
-            scrollTrigger: {
-              trigger: items[0],
-              start: "top 80%",
-              toggleActions: "play none none none",
-            },
-          }
-        );
-      }
-    } else if (effectiveAnimationType === "slide-up") {
-      items.forEach((item, index) => {
-        gsap.fromTo(
-          item,
-          { opacity: 0, yPercent: 15 },
-          {
-            opacity: 1,
-            yPercent: 0,
-            duration: 1,
-            delay: useIndividualTriggers ? 0 : index * 0.15,
-            ease: "sine",
-            scrollTrigger: {
-              trigger: useIndividualTriggers ? item : items[0],
-              start: "top 80%",
-              toggleActions: "play none none none",
-            },
-          }
-        );
-      });
-    } else if (effectiveAnimationType === "scale-rotate") {
-      if (useIndividualTriggers) {
-        items.forEach((item) => {
-          gsap.fromTo(
-            item,
-            { scaleX: 0, rotate: 10 },
-            {
-              scaleX: 1,
-              rotate: 0,
-              duration: 1,
-              ease: "power3",
-              scrollTrigger: {
-                trigger: item,
-                start: "top 80%",
-                toggleActions: "play none none none",
-              },
-            }
-          );
-        });
-      } else {
-        gsap.fromTo(
-          items,
-          { scaleX: 0, rotate: 10 },
-          {
-            scaleX: 1,
-            rotate: 0,
-            duration: 1,
-            stagger: 0.15,
-            ease: "power3",
-            scrollTrigger: {
-              trigger: items[0],
-              start: "top 80%",
-              toggleActions: "play none none none",
-            },
-          }
-        );
-      }
-    } else if (effectiveAnimationType === "blur-reveal") {
-      if (useIndividualTriggers) {
-        items.forEach((item) => {
-          gsap.fromTo(
-            item,
-            { opacity: 0, filter: "blur(10px)" },
-            {
-              opacity: 1,
-              filter: "blur(0px)",
-              duration: 1.2,
-              ease: "power2.out",
-              scrollTrigger: {
-                trigger: item,
-                start: "top 80%",
-                toggleActions: "play none none none",
-              },
-            }
-          );
-        });
-      } else {
-        gsap.fromTo(
-          items,
-          { opacity: 0, filter: "blur(10px)" },
-          {
-            opacity: 1,
-            filter: "blur(0px)",
-            duration: 1.2,
-            stagger: 0.15,
-            ease: "power2.out",
-            scrollTrigger: {
-              trigger: items[0],
-              start: "top 80%",
-              toggleActions: "play none none none",
-            },
-          }
-        );
-      }
-    }
-  }, [effectiveAnimationType, itemCount, useIndividualTriggers]);
-
-  return { itemRefs, containerRef, perspectiveRef, bottomContentRef };
+  };
 };
--- a/src/components/cardStack/layouts/timelines/TimelineBase.tsx
+++ b/src/components/cardStack/layouts/timelines/TimelineBase.tsx
@@ -1,149 +1,44 @@
-"use client";
+import React from "react";
+import { TimelineItem } from "../types";

-import React, { Children, useCallback } from "react";
-import { cls } from "@/lib/utils";
-import CardStackTextBox from "../../CardStackTextBox";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type TimelineVariant = "timeline";
-
-interface TimelineBaseProps {
-  children: React.ReactNode;
-  variant?: TimelineVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
+export interface TimelineBaseProps {
+  items: TimelineItem[];
  title?: string;
-  titleSegments?: TitleSegment[];
  description?: string;
  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout?: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
+  animationType?: string;
+  textboxLayout?: string;
  className?: string;
  containerClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  ariaLabel?: string;
+  children?: React.ReactNode;
 }

-const TimelineBase = ({
-  children,
-  variant = "timeline",
-  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",
-  useInvertedBackground,
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-  ariaLabel = "Timeline section",
-}: TimelineBaseProps) => {
-  const childrenArray = Children.toArray(children);
-  const { itemRefs } = useCardAnimation({
-    animationType,
-    itemCount: childrenArray.length,
-    isGrid: false
-  });
-
-  const getItemClasses = useCallback((index: number) => {
-    // Timeline variant - scattered/organic pattern
-    const alignmentClass =
-      index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
-
-    const marginClasses = cls(
-      index % 4 === 0 && "md:ml-0",
-      index % 4 === 1 && "md:mr-20",
-      index % 4 === 2 && "md:ml-15",
-      index % 4 === 3 && "md:mr-30"
-    );
-
-    return cls(alignmentClass, marginClasses);
-  }, []);
-
-  return (
-    <section
-      className={cls(
-        "relative py-20 w-full",
-        useInvertedBackground && "bg-foreground",
-        className
-      )}
-      aria-label={ariaLabel}
-    >
-      <div
-        className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
-      >
-        {(title || titleSegments || description) && (
-          <CardStackTextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            textBoxClassName={textBoxClassName}
-            titleClassName={titleClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            descriptionClassName={descriptionClassName}
-            tagClassName={tagClassName}
-            buttonContainerClassName={buttonContainerClassName}
-            buttonClassName={buttonClassName}
-            buttonTextClassName={buttonTextClassName}
-          />
+const TimelineBase = React.forwardRef<HTMLDivElement, TimelineBaseProps>(
+  (
+    {
+      items,
+      title,
+      description,
+      tag,
+      animationType = "none",      textboxLayout = "default",      className = "",      containerClassName = "",      children,
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className={`w-full ${className}`}>
+        {tag && <div className="text-sm font-medium mb-2">{tag}</div>}
+        {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+        {description && (
+          <p className="text-base text-foreground/75 mb-8">{description}</p>
        )}
-        <div
-          className={cls(
-            "relative z-10 flex flex-col gap-6 md:gap-15"
-          )}
-        >
-          {Children.map(childrenArray, (child, index) => (
-            <div
-              key={index}
-              className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
-              ref={(el) => { itemRefs.current[index] = el; }}
-            >
-              {child}
-            </div>
-          ))}
+        <div className={`relative ${containerClassName}`}>
+          {children}
        </div>
      </div>
-    </section>
-  );
-};
+    );
+  }
+);

 TimelineBase.displayName = "TimelineBase";

-export default React.memo(TimelineBase);
+export default TimelineBase;
--- a/src/components/cardStack/layouts/types.ts
+++ b/src/components/cardStack/layouts/types.ts
@@ -0,0 +1,4 @@
+export interface TimelineItem {
+  id: string;
+  [key: string]: any;
+}
--- a/src/components/ecommerce/productCatalog/ProductCatalog.tsx
+++ b/src/components/ecommerce/productCatalog/ProductCatalog.tsx
@@ -1,156 +1,79 @@
 "use client";

-import { memo, useMemo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import Input from "@/components/form/Input";
-import ProductDetailVariantSelect from "@/components/ecommerce/productDetail/ProductDetailVariantSelect";
-import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-import { cls } from "@/lib/utils";
-import { useProducts } from "@/hooks/useProducts";
+import React from "react";
 import ProductCatalogItem from "./ProductCatalogItem";
-import type { CatalogProduct } from "./ProductCatalogItem";

-interface ProductCatalogProps {
-    layout: "page" | "section";
-    products?: CatalogProduct[];
-    searchValue?: string;
-    onSearchChange?: (value: string) => void;
-    searchPlaceholder?: string;
-    filters?: ProductVariant[];
-    emptyMessage?: string;
-    className?: string;
-    gridClassName?: string;
-    cardClassName?: string;
-    imageClassName?: string;
-    searchClassName?: string;
-    filterClassName?: string;
-    toolbarClassName?: string;
+export interface CatalogProduct {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
+  rating?: number;
+  reviewCount?: string;
+  onProductClick?: () => void;
+  onFavorite?: () => void;
+  isFavorited?: boolean;
 }

-const ProductCatalog = ({
-    layout,
-    products: productsProp,
-    searchValue = "",
-    onSearchChange,
-    searchPlaceholder = "Search products...",
-    filters,
-    emptyMessage = "No products found",
-    className = "",
-    gridClassName = "",
-    cardClassName = "",
-    imageClassName = "",
-    searchClassName = "",
-    filterClassName = "",
-    toolbarClassName = "",
-}: ProductCatalogProps) => {
-    const router = useRouter();
-    const { products: fetchedProducts, isLoading } = useProducts();
+export interface ProductCatalogProps {
+  products: CatalogProduct[];
+  title?: string;
+  description?: string;
+  className?: string;
+  containerClassName?: string;
+  gridClassName?: string;
+  cardClassName?: string;
+  onProductClick?: (product: CatalogProduct) => void;
+  ariaLabel?: string;
+}

-    const handleProductClick = useCallback((productId: string) => {
-        router.push(`/shop/${productId}`);
-    }, [router]);
-
-    const products: CatalogProduct[] = useMemo(() => {
-        if (productsProp && productsProp.length > 0) {
-            return productsProp;
-        }
-
-        if (fetchedProducts.length === 0) {
-            return [];
-        }
-
-        return fetchedProducts.map((product) => ({
-            id: product.id,
-            name: product.name,
-            price: product.price,
-            imageSrc: product.imageSrc,
-            imageAlt: product.imageAlt || product.name,
-            rating: product.rating || 0,
-            reviewCount: product.reviewCount,
-            category: product.brand,
-            onProductClick: () => handleProductClick(product.id),
-        }));
-    }, [productsProp, fetchedProducts, handleProductClick]);
-
-    if (isLoading && (!productsProp || productsProp.length === 0)) {
-        return (
-            <section
-                className={cls(
-                    "relative w-content-width mx-auto",
-                    layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
-                    className
-                )}
-            >
-                <p className="text-sm text-foreground/50 text-center py-20">
-                    Loading products...
-                </p>
-            </section>
-        );
-    }
+const ProductCatalog = React.forwardRef<HTMLDivElement, ProductCatalogProps>(
+  (
+    {
+      products,
+      title,
+      description,
+      className = "",      containerClassName = "",      gridClassName = "",      cardClassName = "",      onProductClick,
+      ariaLabel = "Product catalog"},
+    ref
+  ) => {
+    const normalizedProducts = Array.isArray(products)
+      ? products.map((p) => ({
+          ...p,
+          price: typeof p.price === "number" ? p.price.toString() : p.price,
+        }))
+      : [];

    return (
-        <section
-            className={cls(
-                "relative w-content-width mx-auto",
-                layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
-                className
-            )}
-        >
-            {(onSearchChange || (filters && filters.length > 0)) && (
-                <div
-                    className={cls(
-                        "flex flex-col md:flex-row gap-4 md:items-end mb-6",
-                        toolbarClassName
-                    )}
-                >
-                    {onSearchChange && (
-                        <Input
-                            value={searchValue}
-                            onChange={onSearchChange}
-                            placeholder={searchPlaceholder}
-                            ariaLabel={searchPlaceholder}
-                            className={cls("flex-1 w-full h-9 text-sm", searchClassName)}
-                        />
-                    )}
-                    {filters && filters.length > 0 && (
-                        <div className="flex gap-4 items-end">
-                            {filters.map((filter) => (
-                                <ProductDetailVariantSelect
-                                    key={filter.label}
-                                    variant={filter}
-                                    selectClassName={filterClassName}
-                                />
-                            ))}
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {products.length === 0 ? (
-                <p className="text-sm text-foreground/50 text-center py-20">
-                    {emptyMessage}
-                </p>
-            ) : (
-                <div
-                    className={cls(
-                        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6",
-                        gridClassName
-                    )}
-                >
-                    {products.map((product) => (
-                        <ProductCatalogItem
-                            key={product.id}
-                            product={product}
-                            className={cardClassName}
-                            imageClassName={imageClassName}
-                        />
-                    ))}
-                </div>
-            )}
-        </section>
+      <div
+        ref={ref}
+        className={`w-full ${className}`}
+        aria-label={ariaLabel}
+      >
+        {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+        {description && (
+          <p className="text-base text-foreground/75 mb-8">{description}</p>
+        )}
+        <div className={`grid grid-cols-1 gap-6 ${gridClassName}`}>
+          {normalizedProducts.map((product) => (
+            <ProductCatalogItem
+              key={product.id}
+              product={product}
+              className={cardClassName}
+              onProductClick={() => {
+                product.onProductClick?.();
+                onProductClick?.(product);
+              }}
+            />
+          ))}
+        </div>
+      </div>
    );
-};
+  }
+);

 ProductCatalog.displayName = "ProductCatalog";

-export default memo(ProductCatalog);
+export default ProductCatalog;
--- a/src/components/sections/contact/ContactSplit.tsx
+++ b/src/components/sections/contact/ContactSplit.tsx
@@ -1,170 +1,143 @@
 "use client";

-import ContactForm from "@/components/form/ContactForm";
-import MediaContent from "@/components/shared/MediaContent";
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
-import { cls } from "@/lib/utils";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import { LucideIcon } from "lucide-react";
-import { sendContactEmail } from "@/utils/sendContactEmail";
-import type { ButtonAnimationType } from "@/types/button";
+import React, { useState } from "react";
+import { Mail } from "lucide-react";

-type ContactSplitBackgroundProps = Extract<
-    HeroBackgroundVariantProps,
-    | { variant: "plain" }
-    | { variant: "animated-grid" }
-    | { variant: "canvas-reveal" }
-    | { variant: "cell-wave" }
-    | { variant: "downward-rays-animated" }
-    | { variant: "downward-rays-animated-grid" }
-    | { variant: "downward-rays-static" }
-    | { variant: "downward-rays-static-grid" }
-    | { variant: "gradient-bars" }
-    | { variant: "radial-gradient" }
-    | { variant: "rotated-rays-animated" }
-    | { variant: "rotated-rays-animated-grid" }
-    | { variant: "rotated-rays-static" }
-    | { variant: "rotated-rays-static-grid" }
-    | { variant: "sparkles-gradient" }
->;
-
-interface ContactSplitProps {
-    title: string;
-    description: string;
-    tag: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    background: ContactSplitBackgroundProps;
-    useInvertedBackground: boolean;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    mediaPosition?: "left" | "right";
-    mediaAnimation: ButtonAnimationType;
-    inputPlaceholder?: string;
-    buttonText?: string;
-    termsText?: string;
-    onSubmit?: (email: string) => void;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    contentClassName?: string;
-    contactFormClassName?: string;
-    tagClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    formWrapperClassName?: string;
-    formClassName?: string;
-    inputClassName?: string;
-    buttonClassName?: string;
-    buttonTextClassName?: string;
-    termsClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
+export interface ContactSplitProps {
+  tag: string;
+  title: string;
+  description: string;
+  tagIcon?: React.ComponentType<any>;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  background?: { variant: string };
+  useInvertedBackground?: boolean;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  mediaAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
+  mediaPosition?: "left" | "right";
+  inputPlaceholder?: string;
+  buttonText?: string;
+  termsText?: string;
+  onSubmit?: (email: string) => void;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  contentClassName?: string;
+  tagClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  formWrapperClassName?: string;
+  formClassName?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  termsClassName?: string;
+  mediaWrapperClassName?: string;
+  mediaClassName?: string;
 }

-const ContactSplit = ({
-    title,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    background,
-    useInvertedBackground,
-    imageSrc,
-    videoSrc,
-    imageAlt = "",
-    videoAriaLabel = "Contact section video",
-    mediaPosition = "right",
-    mediaAnimation,
-    inputPlaceholder = "Enter your email",
-    buttonText = "Sign Up",
-    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
-    onSubmit,
-    ariaLabel = "Contact section",
-    className = "",
-    containerClassName = "",
-    contentClassName = "",
-    contactFormClassName = "",
-    tagClassName = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    formWrapperClassName = "",
-    formClassName = "",
-    inputClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    termsClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-}: ContactSplitProps) => {
-    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+const ContactSplit = React.forwardRef<HTMLDivElement, ContactSplitProps>(
+  (
+    {
+      tag,
+      title,
+      description,
+      tagIcon: TagIcon,
+      tagAnimation = "none",      background,
+      useInvertedBackground = false,
+      imageSrc,
+      videoSrc,
+      imageAlt = "",      videoAriaLabel = "Contact section video",      mediaAnimation = "none",      mediaPosition = "right",      inputPlaceholder = "Enter your email",      buttonText = "Sign Up",      termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",      onSubmit,
+      ariaLabel = "Contact section",      className = "",      containerClassName = "",      contentClassName = "",      tagClassName = "",      titleClassName = "",      descriptionClassName = "",      formWrapperClassName = "",      formClassName = "",      inputClassName = "",      buttonClassName = "",      buttonTextClassName = "",      termsClassName = "",      mediaWrapperClassName = "",      mediaClassName = ""},
+    ref
+  ) => {
+    const [email, setEmail] = useState("");

-    const handleSubmit = async (email: string) => {
-        try {
-            await sendContactEmail({ email });
-            console.log("Email send successfully");
-        } catch (error) {
-            console.error("Failed to send email:", error);
-        }
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      onSubmit?.(email);
+      setEmail("");
    };

-    const contactContent = (
-        <div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
-            <ContactForm
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                title={title}
-                description={description}
-                useInvertedBackground={useInvertedBackground}
-                inputPlaceholder={inputPlaceholder}
-                buttonText={buttonText}
-                termsText={termsText}
-                onSubmit={handleSubmit}
-                centered={true}
-                className={cls("w-full", contactFormClassName)}
-                tagClassName={tagClassName}
-                titleClassName={titleClassName}
-                descriptionClassName={descriptionClassName}
-                formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
-                formClassName={formClassName}
-                inputClassName={inputClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                termsClassName={termsClassName}
-            />
-            <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
-                <HeroBackgrounds {...background} />
-            </div>
-        </div>
-    );
-
-    const mediaContent = (
-        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
-            <MediaContent
-                imageSrc={imageSrc}
-                videoSrc={videoSrc}
-                imageAlt={imageAlt}
-                videoAriaLabel={videoAriaLabel}
-                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
-            />
-        </div>
-    );
-
    return (
-        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
-            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
-                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
-                    {mediaPosition === "left" && mediaContent}
-                    {contactContent}
-                    {mediaPosition === "right" && mediaContent}
+      <div
+        ref={ref}
+        className={`w-full py-20 ${className}`}
+        aria-label={ariaLabel}
+      >
+        <div className={`max-w-7xl mx-auto px-4 ${containerClassName}`}>
+          <div className={`grid grid-cols-1 md:grid-cols-2 gap-12 ${contentClassName}`}>
+            {/* Text Content */}
+            <div className={formWrapperClassName}>
+              {tag && (
+                <div className={`flex items-center gap-2 mb-4 ${tagClassName}`}>
+                  {TagIcon && <TagIcon className="w-4 h-4" />}
+                  <span className="text-sm font-medium">{tag}</span>
                </div>
+              )}
+              <h2 className={`text-4xl font-bold mb-4 ${titleClassName}`}>
+                {title}
+              </h2>
+              <p
+                className={`text-lg text-foreground/75 mb-8 ${descriptionClassName}`}
+              >
+                {description}
+              </p>
+
+              <form
+                onSubmit={handleSubmit}
+                className={`space-y-4 ${formClassName}`}
+              >
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={inputPlaceholder}
+                  required
+                  className={`w-full px-4 py-3 bg-secondary-cta text-foreground rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta ${inputClassName}`}
+                />
+                <button
+                  type="submit"
+                  className={`w-full px-4 py-3 bg-primary-cta text-primary-cta-text font-medium rounded-lg hover:opacity-90 transition-opacity ${buttonClassName}`}
+                >
+                  <span className={buttonTextClassName}>{buttonText}</span>
+                </button>
+              </form>
+
+              {termsText && (
+                <p className={`text-xs text-foreground/60 mt-4 ${termsClassName}`}>
+                  {termsText}
+                </p>
+              )}
            </div>
-        </section>
+
+            {/* Media */}
+            {(imageSrc || videoSrc) && (
+              <div className={`flex items-center justify-center ${mediaWrapperClassName}`}>
+                {videoSrc ? (
+                  <video
+                    src={videoSrc}
+                    aria-label={videoAriaLabel}
+                    controls
+                    className={`w-full h-full object-cover rounded-lg ${mediaClassName}`}
+                  />
+                ) : imageSrc ? (
+                  <img
+                    src={imageSrc}
+                    alt={imageAlt}
+                    className={`w-full h-full object-cover rounded-lg ${mediaClassName}`}
+                  />
+                ) : null}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
    );
-};
+  }
+);

 ContactSplit.displayName = "ContactSplit";

--- a/src/components/sections/product/ProductCardFour.tsx
+++ b/src/components/sections/product/ProductCardFour.tsx
@@ -1,238 +1,103 @@
 "use client";

-import { memo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import CardStack from "@/components/cardStack/CardStack";
-import ProductImage from "@/components/shared/ProductImage";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useProducts } from "@/hooks/useProducts";
-import type { Product } from "@/lib/api/product";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React from "react";
+import { Heart } from "lucide-react";

-type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+export interface ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
+  rating?: number;
+  reviewCount?: string;
+  isFavorited?: boolean;
+}

-type ProductCard = Product & {
-  variant: string;
-};
-
-interface ProductCardFourProps {
-  products?: ProductCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: ProductCardFourGridVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
-  ariaLabel?: string;
+export interface ProductCardFourProps {
+  products: ProductCard[];
+  title?: string;
+  description?: string;
+  onFavorite?: (productId: string) => void;
  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  imageClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardNameClassName?: string;
-  cardPriceClassName?: string;
-  cardVariantClassName?: string;
-  actionButtonClassName?: string;
  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-}
-
-interface ProductCardItemProps {
-  product: ProductCard;
-  shouldUseLightText: boolean;
  cardClassName?: string;
-  imageClassName?: string;
-  cardNameClassName?: string;
-  cardPriceClassName?: string;
-  cardVariantClassName?: string;
-  actionButtonClassName?: string;
 }

-const ProductCardItem = memo(({
-  product,
-  shouldUseLightText,
-  cardClassName = "",
-  imageClassName = "",
-  cardNameClassName = "",
-  cardPriceClassName = "",
-  cardVariantClassName = "",
-  actionButtonClassName = "",
-}: ProductCardItemProps) => {
+const ProductCardFour = React.forwardRef<
+  HTMLDivElement,
+  ProductCardFourProps
+>((
+  {
+    products,
+    title,
+    description,
+    onFavorite,
+    className = "",    gridClassName = "",    cardClassName = ""},
+  ref
+) => {
  return (
-    <article
-      className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-      onClick={product.onProductClick}
-      role="article"
-      aria-label={`${product.name} - ${product.price}`}
-    >
-      <ProductImage
-        imageSrc={product.imageSrc}
-        imageAlt={product.imageAlt || product.name}
-        isFavorited={product.isFavorited}
-        onFavoriteToggle={product.onFavorite}
-        showActionButton={true}
-        actionButtonAriaLabel={`View ${product.name} details`}
-        imageClassName={imageClassName}
-        actionButtonClassName={actionButtonClassName}
-      />
+    <div ref={ref} className={`w-full ${className}`}>
+      {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+      {description && (
+        <p className="text-base text-foreground/75 mb-8">{description}</p>
+      )}
+      <div className={`grid grid-cols-1 gap-6 ${gridClassName}`}>
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className={`relative overflow-hidden rounded-lg ${cardClassName}`}
+          >
+            {/* Image Container */}
+            <div className="relative aspect-square bg-card overflow-hidden">
+              {product.imageSrc && (
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt || product.name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+              )}
+              {/* Favorite Button */}
+              <button
+                onClick={() => onFavorite?.(product.id)}
+                className="absolute top-4 right-4 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  className="w-5 h-5"
+                  fill={product.isFavorited ? "currentColor" : "none"}
+                />
+              </button>
+            </div>

-      <div className="flex flex-col gap-2">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex flex-col gap-0 flex-1 min-w-0">
-            <h3 className={cls("text-base font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
-              {product.name}
-            </h3>
-            <p className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background/60" : "text-foreground/60", cardVariantClassName)}>
-              {product.variant}
-            </p>
+            {/* Product Info */}
+            <div className="p-4">
+              {product.category && (
+                <p className="text-xs font-medium text-primary-cta mb-2">
+                  {product.category}
+                </p>
+              )}
+              <h3 className="font-semibold mb-2 line-clamp-2">{product.name}</h3>
+              {product.rating !== undefined && (
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm">★ {product.rating}</span>
+                  {product.reviewCount && (
+                    <span className="text-xs text-foreground/60">
+                      ({product.reviewCount})
+                    </span>
+                  )}
+                </div>
+              )}
+              <p className="font-bold text-lg">{product.price}</p>
+            </div>
          </div>
-          <p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
-            {product.price}
-          </p>
-        </div>
+        ))}
      </div>
-    </article>
+    </div>
  );
 });

-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardFour = ({
-  products: productsProp,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Product section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  imageClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardNameClassName = "",
-  cardPriceClassName = "",
-  cardVariantClassName = "",
-  actionButtonClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: ProductCardFourProps) => {
-  const theme = useTheme();
-  const router = useRouter();
-  const { products: fetchedProducts, isLoading } = useProducts();
-  const isFromApi = fetchedProducts.length > 0;
-  const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  const handleProductClick = useCallback((product: ProductCard) => {
-    if (isFromApi) {
-      router.push(`/shop/${product.id}`);
-    } else {
-      product.onProductClick?.();
-    }
-  }, [isFromApi, router]);
-
-
-  if (isLoading && !productsProp) {
-    return (
-      <div className="w-content-width mx-auto py-20 text-center">
-        <p className="text-foreground">Loading products...</p>
-      </div>
-    );
-  }
-
-  if (!products || products.length === 0) {
-    return null;
-  }
-
-  return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant={gridVariant}
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      className={className}
-      containerClassName={containerClassName}
-      gridClassName={gridClassName}
-      carouselClassName={carouselClassName}
-      controlsClassName={controlsClassName}
-      textBoxClassName={textBoxClassName}
-      titleClassName={textBoxTitleClassName}
-      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-      titleImageClassName={textBoxTitleImageClassName}
-      descriptionClassName={textBoxDescriptionClassName}
-      tagClassName={textBoxTagClassName}
-      buttonContainerClassName={textBoxButtonContainerClassName}
-      buttonClassName={textBoxButtonClassName}
-      buttonTextClassName={textBoxButtonTextClassName}
-      ariaLabel={ariaLabel}
-    >
-      {products?.map((product, index) => (
-        <ProductCardItem
-          key={`${product.id}-${index}`}
-          product={{ ...product, onProductClick: () => handleProductClick(product) }}
-          shouldUseLightText={shouldUseLightText}
-          cardClassName={cardClassName}
-          imageClassName={imageClassName}
-          cardNameClassName={cardNameClassName}
-          cardPriceClassName={cardPriceClassName}
-          cardVariantClassName={cardVariantClassName}
-          actionButtonClassName={actionButtonClassName}
-        />
-      ))}
-    </CardStack>
-  );
-};
-
 ProductCardFour.displayName = "ProductCardFour";

 export default ProductCardFour;
--- a/src/components/sections/product/ProductCardOne.tsx
+++ b/src/components/sections/product/ProductCardOne.tsx
@@ -1,225 +1,99 @@
 "use client";

-import { memo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { ArrowUpRight } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
-import ProductImage from "@/components/shared/ProductImage";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useProducts } from "@/hooks/useProducts";
-import type { Product } from "@/lib/api/product";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React from "react";
+import { Heart } from "lucide-react";

-type ProductCardOneGridVariant = Exclude<GridVariant, "timeline">;
-
-type ProductCard = Product;
-
-interface ProductCardOneProps {
-    products?: ProductCard[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: ProductCardOneGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    imageClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+export interface Product {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
+  rating?: number;
+  reviewCount?: string;
+  isFavorited?: boolean;
 }

-interface ProductCardItemProps {
-    product: ProductCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: string;
+export interface ProductCardOneProps {
+  products: Product[];
+  title?: string;
+  description?: string;
+  onFavorite?: (productId: string) => void;
+  className?: string;
+  gridClassName?: string;
+  cardClassName?: string;
 }

-const ProductCardItem = memo(({
-    product,
-    shouldUseLightText,
-    cardClassName = "",
-    imageClassName = "",
-    cardNameClassName = "",
-    cardPriceClassName = "",
-}: ProductCardItemProps) => {
-    return (
-        <article
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={product.onProductClick}
-            role="article"
-            aria-label={`${product.name} - ${product.price}`}
-        >
-            <ProductImage
-                imageSrc={product.imageSrc}
-                imageAlt={product.imageAlt || product.name}
-                isFavorited={product.isFavorited}
-                onFavoriteToggle={product.onFavorite}
-                imageClassName={imageClassName}
-            />
-
-            <div className="relative z-1 flex items-center justify-between gap-4">
-                <div className="flex-1 min-w-0">
-                    <h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
-                        {product.name}
-                    </h3>
-                    <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
-                        {product.price}
-                    </p>
-                </div>
-
-                <button
-                    className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0"
-                    aria-label={`View ${product.name} details`}
-                    type="button"
-                >
-                    <ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
-                </button>
-            </div>
-        </article>
-    );
-});
-
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardOne = ({
-    products: productsProp,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    animationType,
+const ProductCardOne = React.forwardRef<HTMLDivElement, ProductCardOneProps>((
+  {
+    products,
    title,
-    titleSegments,
    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Product section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    imageClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    cardNameClassName = "",
-    cardPriceClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: ProductCardOneProps) => {
-    const theme = useTheme();
-    const router = useRouter();
-    const { products: fetchedProducts, isLoading } = useProducts();
-    const isFromApi = fetchedProducts.length > 0;
-    const products = isFromApi ? fetchedProducts : productsProp;
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    const handleProductClick = useCallback((product: ProductCard) => {
-        if (isFromApi) {
-            router.push(`/shop/${product.id}`);
-        } else {
-            product.onProductClick?.();
-        }
-    }, [isFromApi, router]);
-
-    if (isLoading && !productsProp) {
-        return (
-            <div className="w-content-width mx-auto py-20 text-center">
-                <p className="text-foreground">Loading products...</p>
-            </div>
-        );
-    }
-
-    if (!products || products.length === 0) {
-        return null;
-    }
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
-            titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            ariaLabel={ariaLabel}
-        >
-            {products?.map((product, index) => (
-                <ProductCardItem
-                    key={`${product.id}-${index}`}
-                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    cardNameClassName={cardNameClassName}
-                    cardPriceClassName={cardPriceClassName}
+    onFavorite,
+    className = "",    gridClassName = "",    cardClassName = ""},
+  ref
+) => {
+  return (
+    <div ref={ref} className={`w-full ${className}`}>
+      {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+      {description && (
+        <p className="text-base text-foreground/75 mb-8">{description}</p>
+      )}
+      <div className={`grid grid-cols-1 gap-6 ${gridClassName}`}>
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className={`relative overflow-hidden rounded-lg ${cardClassName}`}
+          >
+            {/* Image Container */}
+            <div className="relative aspect-square bg-card overflow-hidden">
+              {product.imageSrc && (
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt || product.name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                />
-            ))}
-        </CardStack>
-    );
-};
+              )}
+              {/* Favorite Button */}
+              <button
+                onClick={() => onFavorite?.(product.id)}
+                className="absolute top-4 right-4 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  className="w-5 h-5"
+                  fill={product.isFavorited ? "currentColor" : "none"}
+                />
+              </button>
+            </div>
+
+            {/* Product Info */}
+            <div className="p-4">
+              {product.category && (
+                <p className="text-xs font-medium text-primary-cta mb-2">
+                  {product.category}
+                </p>
+              )}
+              <h3 className="font-semibold mb-2 line-clamp-2">{product.name}</h3>
+              {product.rating !== undefined && (
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm">★ {product.rating}</span>
+                  {product.reviewCount && (
+                    <span className="text-xs text-foreground/60">
+                      ({product.reviewCount})
+                    </span>
+                  )}
+                </div>
+              )}
+              <p className="font-bold text-lg">{product.price}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

 ProductCardOne.displayName = "ProductCardOne";

--- a/src/components/sections/product/ProductCardThree.tsx
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -1,282 +1,102 @@
 "use client";

-import { memo, useState, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { Plus, Minus } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
-import ProductImage from "@/components/shared/ProductImage";
-import QuantityButton from "@/components/shared/QuantityButton";
-import Button from "@/components/button/Button";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useProducts } from "@/hooks/useProducts";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import type { Product } from "@/lib/api/product";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React from "react";
+import { Heart } from "lucide-react";

-type ProductCardThreeGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
-
-type ProductCard = Product & {
-    onQuantityChange?: (quantity: number) => void;
-    initialQuantity?: number;
-    priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
-};
-
-interface ProductCardThreeProps {
-    products?: ProductCard[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: ProductCardThreeGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    imageClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    cardNameClassName?: string;
-    quantityControlsClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+export interface ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
+  rating?: number;
+  reviewCount?: string;
+  isFavorited?: boolean;
 }

-
-interface ProductCardItemProps {
-    product: ProductCard;
-    shouldUseLightText: boolean;
-    isFromApi: boolean;
-    onBuyClick?: (productId: string, quantity: number) => void;
-    cardClassName?: string;
-    imageClassName?: string;
-    cardNameClassName?: string;
-    quantityControlsClassName?: string;
+export interface ProductCardThreeProps {
+  products: ProductCard[];
+  title?: string;
+  description?: string;
+  onFavorite?: (productId: string) => void;
+  className?: string;
+  gridClassName?: string;
+  cardClassName?: string;
 }

-const ProductCardItem = memo(({
-    product,
-    shouldUseLightText,
-    isFromApi,
-    onBuyClick,
-    cardClassName = "",
-    imageClassName = "",
-    cardNameClassName = "",
-    quantityControlsClassName = "",
-}: ProductCardItemProps) => {
-    const theme = useTheme();
-    const [quantity, setQuantity] = useState(product.initialQuantity || 1);
-
-    const handleIncrement = useCallback((e: React.MouseEvent) => {
-        e.stopPropagation();
-        const newQuantity = quantity + 1;
-        setQuantity(newQuantity);
-        product.onQuantityChange?.(newQuantity);
-    }, [quantity, product]);
-
-    const handleDecrement = useCallback((e: React.MouseEvent) => {
-        e.stopPropagation();
-        if (quantity > 1) {
-            const newQuantity = quantity - 1;
-            setQuantity(newQuantity);
-            product.onQuantityChange?.(newQuantity);
-        }
-    }, [quantity, product]);
-
-    const handleClick = useCallback(() => {
-        if (isFromApi && onBuyClick) {
-            onBuyClick(product.id, quantity);
-        } else {
-            product.onProductClick?.();
-        }
-    }, [isFromApi, onBuyClick, product, quantity]);
-
-    return (
-        <article
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={handleClick}
-            role="article"
-            aria-label={`${product.name} - ${product.price}`}
-        >
-            <ProductImage
-                imageSrc={product.imageSrc}
-                imageAlt={product.imageAlt || product.name}
-                isFavorited={product.isFavorited}
-                onFavoriteToggle={product.onFavorite}
-                imageClassName={imageClassName}
-            />
-
-            <div className="relative z-1 flex flex-col gap-3">
-                <h3 className={cls("text-xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
-                    {product.name}
-                </h3>
-
-                <div className="flex items-center justify-between gap-4">
-                    <div className={cls("flex items-center gap-2", quantityControlsClassName)}>
-                        <QuantityButton
-                            onClick={handleDecrement}
-                            ariaLabel="Decrease quantity"
-                            Icon={Minus}
-                        />
-                        <span className={cls("text-base font-medium min-w-[2ch] text-center leading-[1]", shouldUseLightText ? "text-background" : "text-foreground")}>
-                            {quantity}
-                        </span>
-                        <QuantityButton
-                            onClick={handleIncrement}
-                            ariaLabel="Increase quantity"
-                            Icon={Plus}
-                        />
-                    </div>
-
-                    <Button
-                        {...getButtonProps(
-                            {
-                                text: product.price,
-                                props: product.priceButtonProps,
-                            },
-                            0,
-                            theme.defaultButtonVariant
-                        )}
-                    />
-                </div>
-            </div>
-        </article>
-    );
-});
-
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardThree = ({
-    products: productsProp,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    animationType,
+const ProductCardThree = React.forwardRef<
+  HTMLDivElement,
+  ProductCardThreeProps
+>((
+  {
+    products,
    title,
-    titleSegments,
    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Product section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    imageClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    cardNameClassName = "",
-    quantityControlsClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: ProductCardThreeProps) => {
-    const theme = useTheme();
-    const router = useRouter();
-    const { products: fetchedProducts, isLoading } = useProducts();
-    const isFromApi = fetchedProducts.length > 0;
-    const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    const handleProductClick = useCallback((product: ProductCard) => {
-        if (isFromApi) {
-            router.push(`/shop/${product.id}`);
-        } else {
-            product.onProductClick?.();
-        }
-    }, [isFromApi, router]);
-
-    if (isLoading && !productsProp) {
-        return (
-            <div className="w-content-width mx-auto py-20 text-center">
-                <p className="text-foreground">Loading products...</p>
-            </div>
-        );
-    }
-
-    if (!products || products.length === 0) {
-        return null;
-    }
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
-            titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            ariaLabel={ariaLabel}
-        >
-            {products?.map((product, index) => (
-                <ProductCardItem
-                    key={`${product.id}-${index}`}
-                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
-                    shouldUseLightText={shouldUseLightText}
-                    isFromApi={isFromApi}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    cardNameClassName={cardNameClassName}
-                    quantityControlsClassName={quantityControlsClassName}
+    onFavorite,
+    className = "",    gridClassName = "",    cardClassName = ""},
+  ref
+) => {
+  return (
+    <div ref={ref} className={`w-full ${className}`}>
+      {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+      {description && (
+        <p className="text-base text-foreground/75 mb-8">{description}</p>
+      )}
+      <div className={`grid grid-cols-1 gap-6 ${gridClassName}`}>
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className={`relative overflow-hidden rounded-lg ${cardClassName}`}
+          >
+            {/* Image Container */}
+            <div className="relative aspect-square bg-card overflow-hidden">
+              {product.imageSrc && (
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt || product.name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                />
-            ))}
-        </CardStack>
-    );
-};
+              )}
+              {/* Favorite Button */}
+              <button
+                onClick={() => onFavorite?.(product.id)}
+                className="absolute top-4 right-4 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  className="w-5 h-5"
+                  fill={product.isFavorited ? "currentColor" : "none"}
+                />
+              </button>
+            </div>
+
+            {/* Product Info */}
+            <div className="p-4">
+              {product.category && (
+                <p className="text-xs font-medium text-primary-cta mb-2">
+                  {product.category}
+                </p>
+              )}
+              <h3 className="font-semibold mb-2 line-clamp-2">{product.name}</h3>
+              {product.rating !== undefined && (
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm">★ {product.rating}</span>
+                  {product.reviewCount && (
+                    <span className="text-xs text-foreground/60">
+                      ({product.reviewCount})
+                    </span>
+                  )}
+                </div>
+              )}
+              <p className="font-bold text-lg">{product.price}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

 ProductCardThree.displayName = "ProductCardThree";

--- a/src/components/sections/product/ProductCardTwo.tsx
+++ b/src/components/sections/product/ProductCardTwo.tsx
@@ -1,266 +1,99 @@
 "use client";

-import { memo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { Star } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
-import ProductImage from "@/components/shared/ProductImage";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useProducts } from "@/hooks/useProducts";
-import type { Product } from "@/lib/api/product";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+import React from "react";
+import { Heart } from "lucide-react";

-type ProductCardTwoGridVariant = Exclude<GridVariant, "timeline" | "one-large-right-three-stacked-left" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row" | "one-large-left-three-stacked-right">;
-
-type ProductCard = Product & {
-    brand: string;
-    rating: number;
-    reviewCount: string;
-};
-
-interface ProductCardTwoProps {
-    products?: ProductCard[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: ProductCardTwoGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
-    description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    imageClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    cardBrandClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: string;
-    cardRatingClassName?: string;
-    actionButtonClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+export interface ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  category?: string;
+  rating?: number;
+  reviewCount?: string;
+  isFavorited?: boolean;
 }

-interface ProductCardItemProps {
-    product: ProductCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageClassName?: string;
-    cardBrandClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: string;
-    cardRatingClassName?: string;
-    actionButtonClassName?: string;
+export interface ProductCardTwoProps {
+  products: ProductCard[];
+  title?: string;
+  description?: string;
+  onFavorite?: (productId: string) => void;
+  className?: string;
+  gridClassName?: string;
+  cardClassName?: string;
 }

-const ProductCardItem = memo(({
-    product,
-    shouldUseLightText,
-    cardClassName = "",
-    imageClassName = "",
-    cardBrandClassName = "",
-    cardNameClassName = "",
-    cardPriceClassName = "",
-    cardRatingClassName = "",
-    actionButtonClassName = "",
-}: ProductCardItemProps) => {
-    return (
-        <article
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={product.onProductClick}
-            role="article"
-            aria-label={`${product.brand} ${product.name} - ${product.price}`}
-        >
-            <ProductImage
-                imageSrc={product.imageSrc}
-                imageAlt={product.imageAlt || `${product.brand} ${product.name}`}
-                isFavorited={product.isFavorited}
-                onFavoriteToggle={product.onFavorite}
-                showActionButton={true}
-                actionButtonAriaLabel={`View ${product.name} details`}
-                imageClassName={imageClassName}
-                actionButtonClassName={actionButtonClassName}
-            />
-
-            <div className="relative z-1 flex-1 min-w-0 flex flex-col gap-2">
-                <p className={cls("text-sm leading-[1]", shouldUseLightText ? "text-background" : "text-foreground", cardBrandClassName)}>
-                    {product.brand}
-                </p>
-                <div className="flex flex-col gap-1" >
-                    <h3 className={cls("text-xl font-medium truncate leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
-                        {product.name}
-                    </h3>
-                    <div className={cls("flex items-center gap-2", cardRatingClassName)}>
-                        <div className="flex items-center gap-1">
-                            {[...Array(5)].map((_, i) => (
-                                <Star
-                                    key={i}
-                                    className={cls(
-                                        "h-4 w-auto",
-                                        i < Math.floor(product.rating)
-                                            ? "text-accent fill-accent"
-                                            : "text-accent opacity-20"
-                                    )}
-                                    strokeWidth={1.5}
-                                />
-                            ))}
-                        </div>
-                        <span className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground")}>
-                            ({product.reviewCount})
-                        </span>
-                    </div>
-                </div>
-                <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
-                    {product.price}
-                </p>
-            </div>
-        </article>
-    );
-});
-
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardTwo = ({
-    products: productsProp,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    animationType,
+const ProductCardTwo = React.forwardRef<HTMLDivElement, ProductCardTwoProps>((
+  {
+    products,
    title,
-    titleSegments,
    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Product section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    imageClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    cardBrandClassName = "",
-    cardNameClassName = "",
-    cardPriceClassName = "",
-    cardRatingClassName = "",
-    actionButtonClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: ProductCardTwoProps) => {
-    const theme = useTheme();
-    const router = useRouter();
-    const { products: fetchedProducts, isLoading } = useProducts();
-    const isFromApi = fetchedProducts.length > 0;
-    const products = (fetchedProducts.length > 0 ? fetchedProducts : productsProp) as ProductCard[];
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    const handleProductClick = useCallback((product: ProductCard) => {
-        if (isFromApi) {
-            router.push(`/shop/${product.id}`);
-        } else {
-            product.onProductClick?.();
-        }
-    }, [isFromApi, router]);
-
-    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
-        ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
-        : undefined;
-
-    if (isLoading && !productsProp) {
-        return (
-            <div className="w-content-width mx-auto py-20 text-center">
-                <p className="text-foreground">Loading products...</p>
-            </div>
-        );
-    }
-
-    if (!products || products.length === 0) {
-        return null;
-    }
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            gridRowsClassName={customGridRows}
-            animationType={animationType}
-
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
-            titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            ariaLabel={ariaLabel}
-        >
-            {products?.map((product, index) => (
-                <ProductCardItem
-                    key={`${product.id}-${index}`}
-                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    cardBrandClassName={cardBrandClassName}
-                    cardNameClassName={cardNameClassName}
-                    cardPriceClassName={cardPriceClassName}
-                    cardRatingClassName={cardRatingClassName}
-                    actionButtonClassName={actionButtonClassName}
+    onFavorite,
+    className = "",    gridClassName = "",    cardClassName = ""},
+  ref
+) => {
+  return (
+    <div ref={ref} className={`w-full ${className}`}>
+      {title && <h2 className="text-3xl font-bold mb-4">{title}</h2>}
+      {description && (
+        <p className="text-base text-foreground/75 mb-8">{description}</p>
+      )}
+      <div className={`grid grid-cols-1 gap-6 ${gridClassName}`}>
+        {products.map((product) => (
+          <div
+            key={product.id}
+            className={`relative overflow-hidden rounded-lg ${cardClassName}`}
+          >
+            {/* Image Container */}
+            <div className="relative aspect-square bg-card overflow-hidden">
+              {product.imageSrc && (
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt || product.name}
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                />
-            ))}
-        </CardStack>
-    );
-};
+              )}
+              {/* Favorite Button */}
+              <button
+                onClick={() => onFavorite?.(product.id)}
+                className="absolute top-4 right-4 p-2 rounded-full bg-white/80 hover:bg-white transition-colors"
+                aria-label="Add to favorites"
+              >
+                <Heart
+                  className="w-5 h-5"
+                  fill={product.isFavorited ? "currentColor" : "none"}
+                />
+              </button>
+            </div>
+
+            {/* Product Info */}
+            <div className="p-4">
+              {product.category && (
+                <p className="text-xs font-medium text-primary-cta mb-2">
+                  {product.category}
+                </p>
+              )}
+              <h3 className="font-semibold mb-2 line-clamp-2">{product.name}</h3>
+              {product.rating !== undefined && (
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-sm">★ {product.rating}</span>
+                  {product.reviewCount && (
+                    <span className="text-xs text-foreground/60">
+                      ({product.reviewCount})
+                    </span>
+                  )}
+                </div>
+              )}
+              <p className="font-bold text-lg">{product.price}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});

 ProductCardTwo.displayName = "ProductCardTwo";

--- a/src/hooks/useProduct.ts
+++ b/src/hooks/useProduct.ts
@@ -1,45 +1,18 @@
-"use client";
+import { useCallback } from "react";
+import { fetchProducts } from "@/lib/api/product";

-import { useEffect, useState } from "react";
-import { Product, fetchProduct } from "@/lib/api/product";
+export const useProduct = () => {
+  const getProducts = useCallback(async () => {
+    try {
+      const products = await fetchProducts();
+      return products;
+    } catch (error) {
+      console.error("Error fetching products:", error);
+      return [];
+    }
+  }, []);

-export function useProduct(productId: string) {
-    const [product, setProduct] = useState<Product | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<Error | null>(null);
-
-    useEffect(() => {
-        let isMounted = true;
-
-        async function loadProduct() {
-            if (!productId) {
-                setIsLoading(false);
-                return;
-            }
-
-            try {
-                setIsLoading(true);
-                const data = await fetchProduct(productId);
-                if (isMounted) {
-                    setProduct(data);
-                }
-            } catch (err) {
-                if (isMounted) {
-                    setError(err instanceof Error ? err : new Error("Failed to fetch product"));
-                }
-            } finally {
-                if (isMounted) {
-                    setIsLoading(false);
-                }
-            }
-        }
-
-        loadProduct();
-
-        return () => {
-            isMounted = false;
-        };
-    }, [productId]);
-
-    return { product, isLoading, error };
-}
+  return {
+    getProducts,
+  };
+};
Author	SHA1	Message	Date
bender	f9ce33a09c	Update src/app/page.tsx	2026-03-03 05:17:26 +00:00
bender	2b8f870085	Update src/app/page.tsx	2026-03-03 05:13:50 +00:00
bender	5f9f5136b3	Update src/app/layout.tsx	2026-03-03 05:13:49 +00:00
bender	f7dfab92f6	Update src/app/page.tsx	2026-03-03 05:08:05 +00:00
bender	a1e480e9c2	Update src/app/layout.tsx	2026-03-03 05:08:05 +00:00
bender	5cd239b70f	Update src/hooks/useProduct.ts	2026-03-03 05:00:31 +00:00
bender	61054f6dea	Update src/components/sections/product/ProductCardTwo.tsx	2026-03-03 05:00:31 +00:00
bender	a47871032d	Update src/components/sections/product/ProductCardThree.tsx	2026-03-03 05:00:31 +00:00
bender	637bfd8222	Update src/components/sections/product/ProductCardOne.tsx	2026-03-03 05:00:30 +00:00
bender	d28296e0ab	Update src/components/sections/product/ProductCardFour.tsx	2026-03-03 05:00:30 +00:00
bender	7905425b1a	Update src/components/sections/contact/ContactSplit.tsx	2026-03-03 05:00:29 +00:00
bender	876d805d49	Update src/components/ecommerce/productCatalog/ProductCatalog.tsx	2026-03-03 05:00:29 +00:00
bender	b38d9f4158	Add src/components/cardStack/layouts/types.ts	2026-03-03 05:00:28 +00:00
bender	e3d61b2f11	Update src/components/cardStack/layouts/timelines/TimelineBase.tsx	2026-03-03 05:00:28 +00:00
bender	1150953185	Update src/components/cardStack/hooks/useCardAnimation.ts	2026-03-03 05:00:27 +00:00
bender	36c32f58bd	Update src/components/cardStack/CardStack.tsx	2026-03-03 05:00:27 +00:00
bender	cd2b24ac04	Update src/app/page.tsx	2026-03-03 04:57:30 +00:00
bender	e747e323aa	Update src/app/layout.tsx	2026-03-03 04:57:29 +00:00
bender	dc1aa5c51d	Switch to version 3: modified src/lib/api/product.ts	2026-03-03 04:55:00 +00:00
bender	6d0384a4bb	Switch to version 3: modified src/hooks/useProductDetail.ts	2026-03-03 04:55:00 +00:00
bender	0a56d74b86	Switch to version 3: modified src/hooks/useProductCatalog.ts	2026-03-03 04:54:59 +00:00
bender	79ee098180	Switch to version 3: modified src/hooks/useCheckout.ts	2026-03-03 04:54:59 +00:00
bender	819cf506ff	Switch to version 3: modified src/components/sections/pricing/PricingCardEight.tsx	2026-03-03 04:54:58 +00:00
bender	0a8a6c2ad1	Switch to version 3: modified src/components/sections/contact/ContactSplitForm.tsx	2026-03-03 04:54:58 +00:00
bender	3f7d960cd2	Switch to version 3: modified src/components/sections/contact/ContactSplit.tsx	2026-03-03 04:54:57 +00:00
bender	968d02da4d	Switch to version 3: modified src/components/sections/contact/ContactCenter.tsx	2026-03-03 04:54:57 +00:00
bender	810a5cfe4d	Switch to version 3: modified src/components/cardStack/layouts/timelines/TimelineBase.tsx	2026-03-03 04:54:56 +00:00
bender	83afb6e942	Switch to version 3: modified src/components/cardStack/hooks/useDepth3DAnimation.ts	2026-03-03 04:54:55 +00:00
bender	d499bf276d	Switch to version 3: modified src/app/page.tsx	2026-03-03 04:54:55 +00:00
bender	359e805e27	Switch to version 3: modified src/app/layout.tsx	2026-03-03 04:54:54 +00:00
bender	e81fc475da	Merge version_4 into main Merge version_4 into main	2026-03-03 04:48:28 +00:00
bender	72f91f69b2	Update src/lib/api/product.ts	2026-03-03 04:48:23 +00:00
bender	faf90330e9	Update src/hooks/useProductDetail.ts	2026-03-03 04:48:23 +00:00
bender	d866ae5db9	Update src/hooks/useProductCatalog.ts	2026-03-03 04:48:22 +00:00
bender	fde44550c5	Update src/hooks/useCheckout.ts	2026-03-03 04:48:22 +00:00
bender	93f56494ca	Update src/components/sections/pricing/PricingCardEight.tsx	2026-03-03 04:48:21 +00:00
bender	b06dccf8d3	Update src/components/sections/contact/ContactSplitForm.tsx	2026-03-03 04:48:20 +00:00
bender	fde80376be	Update src/components/sections/contact/ContactSplit.tsx	2026-03-03 04:48:20 +00:00
bender	d7328e33c6	Update src/components/sections/contact/ContactCenter.tsx	2026-03-03 04:48:19 +00:00
bender	040445f6c6	Update src/components/cardStack/layouts/timelines/TimelineBase.tsx	2026-03-03 04:48:18 +00:00
bender	d2a2ebb4df	Update src/components/cardStack/hooks/useDepth3DAnimation.ts	2026-03-03 04:48:18 +00:00
bender	3855ebab4f	Update src/app/layout.tsx	2026-03-03 04:48:17 +00:00
bender	8796ab757a	Merge version_4 into main Merge version_4 into main	2026-03-03 04:46:12 +00:00
bender	eb54b4255c	Update src/app/page.tsx	2026-03-03 04:46:08 +00:00
bender	a8c79d3b1b	Update src/app/layout.tsx	2026-03-03 04:46:07 +00:00
bender	79df96450d	Merge version_3 into main Merge version_3 into main	2026-03-03 04:35:49 +00:00
bender	269627ee66	Update src/app/page.tsx	2026-03-03 04:35:45 +00:00
bender	fd0950d7d2	Merge version_2 into main Merge version_2 into main	2026-03-03 04:32:58 +00:00
bender	2f9034aa46	Update src/app/styles/variables.css	2026-03-03 04:32:54 +00:00
bender	d0a9454f6a	Update src/app/page.tsx	2026-03-03 04:32:53 +00:00
bender	b453d360a0	Update src/app/layout.tsx	2026-03-03 04:32:53 +00:00
bender	9e10d16d35	Merge version_1 into main Merge version_1 into main	2026-03-03 04:27:16 +00:00