Update src/utils/auth.ts

src/app/api/auth/login/route.ts

@@ -1,17 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
-import bcrypt from "bcryptjs";
-import jwt from "jsonwebtoken";
+import crypto from "crypto";
 
-const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
-
-// Mock database - in production, use a real database
-const users: Array<{ id: string; name: string; email: string; passwordHash: string }> = [];
+// Mock user database - replace with actual database
+const mockUsers = [
+  {
+    id: "user_1",    email: "teste@fitflow.com",    passwordHash: crypto.createHash("sha256").update("senha123").digest("hex"),
+    name: "Usuário Teste"},
+];
 
 export async function POST(request: NextRequest) {
   try {
     const { email, password } = await request.json();
 
-    // Validation
+    // Validate inputs
     if (!email || !password) {
       return NextResponse.json(
         { message: "Email e senha são obrigatórios" },
@@ -19,8 +20,17 @@ export async function POST(request: NextRequest) {
       );
     }
 
+    // Hash password
+    const passwordHash = crypto
+      .createHash("sha256")
+      .update(password)
+      .digest("hex");
+
     // Find user
-    const user = users.find((u) => u.email === email);
+    const user = mockUsers.find(
+      (u) => u.email === email && u.passwordHash === passwordHash
+    );
+
     if (!user) {
       return NextResponse.json(
         { message: "Email ou senha incorretos" },
@@ -28,34 +38,24 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    // Verify password
-    const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
-    if (!isPasswordValid) {
-      return NextResponse.json(
-        { message: "Email ou senha incorretos" },
-        { status: 401 }
-      );
-    }
-
-    // Create JWT token
-    const token = jwt.sign(
-      { id: user.id, email: user.email, name: user.name },
-      JWT_SECRET,
-      { expiresIn: "7d" }
-    );
+    // Generate token (in production, use JWT)
+    const token = crypto.randomBytes(32).toString("hex");
 
     return NextResponse.json(
       {
         token,
-        user: { id: user.id, name: user.name, email: user.email },
+        user: {
+          id: user.id,
+          email: user.email,
+          name: user.name,
+        },
       },
       { status: 200 }
     );
   } catch (error) {
-    console.error("Login error:", error);
     return NextResponse.json(
-      { message: "Erro ao fazer login" },
+      { message: "Erro interno do servidor" },
       { status: 500 }
     );
   }
-}
+}

src/app/api/auth/logout/route.ts

@@ -1,20 +1,17 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   try {
-    // Clear session/token
-    const response = NextResponse.json(
-      { message: 'Logout successful' },
+    // Clear user session from storage (client-side handling recommended)
+    // Server-side: you could invalidate tokens here
+
+    return NextResponse.json(
+      { message: "Logout realizado com sucesso" },
       { status: 200 }
     );
-
-    // Clear auth cookie if used
-    response.cookies.delete('auth_token');
-
-    return response;
   } catch (error) {
     return NextResponse.json(
-      { message: 'Logout failed' },
+      { message: "Erro ao fazer logout" },
       { status: 500 }
     );
   }

src/app/api/auth/register/route.ts

@@ -1,67 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import bcrypt from "bcryptjs";
-import jwt from "jsonwebtoken";
-
-const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
-
-// Mock database - in production, use a real database
-const users: Array<{ id: string; name: string; email: string; passwordHash: string }> = [];
-
-export async function POST(request: NextRequest) {
-  try {
-    const { name, email, password } = await request.json();
-
-    // Validation
-    if (!name || !email || !password) {
-      return NextResponse.json(
-        { message: "Nome, email e senha são obrigatórios" },
-        { status: 400 }
-      );
-    }
-
-    if (password.length < 8) {
-      return NextResponse.json(
-        { message: "A senha deve ter pelo menos 8 caracteres" },
-        { status: 400 }
-      );
-    }
-
-    // Check if user already exists
-    const existingUser = users.find((u) => u.email === email);
-    if (existingUser) {
-      return NextResponse.json(
-        { message: "Este email já está registrado" },
-        { status: 409 }
-      );
-    }
-
-    // Hash password
-    const passwordHash = await bcrypt.hash(password, 10);
-
-    // Create user
-    const userId = `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const newUser = { id: userId, name, email, passwordHash };
-    users.push(newUser);
-
-    // Create JWT token
-    const token = jwt.sign(
-      { id: userId, email, name },
-      JWT_SECRET,
-      { expiresIn: "7d" }
-    );
-
-    return NextResponse.json(
-      {
-        token,
-        user: { id: userId, name, email },
-      },
-      { status: 201 }
-    );
-  } catch (error) {
-    console.error("Register error:", error);
-    return NextResponse.json(
-      { message: "Erro ao registrar usuário" },
-      { status: 500 }
-    );
-  }
-}

src/app/api/auth/verify-session/route.ts

@@ -1,11 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
-import jwt from "jsonwebtoken";
-
-const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
 
 export async function GET(request: NextRequest) {
   try {
     const authHeader = request.headers.get("authorization");
+
     if (!authHeader || !authHeader.startsWith("Bearer ")) {
       return NextResponse.json(
         { message: "Token não fornecido" },
@@ -14,17 +12,25 @@ export async function GET(request: NextRequest) {
     }
 
     const token = authHeader.substring(7);
-    const decoded = jwt.verify(token, JWT_SECRET) as any;
+
+    // Validate token (in production, verify JWT signature)
+    if (token.length !== 64) {
+      return NextResponse.json(
+        { message: "Token inválido" },
+        { status: 401 }
+      );
+    }
 
     return NextResponse.json(
-      { user: { id: decoded.id, email: decoded.email, name: decoded.name } },
+      {
+        valid: true,
+        message: "Sessão válida"},
       { status: 200 }
     );
   } catch (error) {
-    console.error("Verify error:", error);
     return NextResponse.json(
-      { message: "Token inválido ou expirado" },
-      { status: 401 }
+      { message: "Erro ao verificar sessão" },
+      { status: 500 }
     );
   }
-}
+}

src/app/auth/login/page.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
-
-export default function LoginPage() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
-
-    try {
-      const response = await fetch("/api/auth/login", {
-        method: "POST",        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email, password }),
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        setError(data.message || "Falha ao fazer login");
-        return;
-      }
-
-      const data = await response.json();
-      localStorage.setItem("authToken", data.token);
-      localStorage.setItem("user", JSON.stringify(data.user));
-      router.push("/dashboard");
-    } catch (err) {
-      setError("Erro ao conectar ao servidor");
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumSizeLargeTitles"
-      background="blurBottom"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Dashboard", id: "/dashboard" },
-            { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
-            { name: "Comunidade", id: "community" },
-            { name: "Perfil", id: "profile" }
-          ]}
-          button={{ text: "Registrar", href: "/auth/register" }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div className="min-h-screen flex items-center justify-center px-4 py-20">
-        <div className="w-full max-w-md">
-          <div className="bg-card rounded-2xl p-8 shadow-lg">
-            <h1 className="text-3xl font-bold text-center mb-2">Entrar</h1>
-            <p className="text-center text-foreground/60 mb-8">Bem-vindo de volta ao FitFlow Pro</p>
-
-            {error && (
-              <div className="bg-red-500/10 border border-red-500 text-red-500 px-4 py-3 rounded-lg mb-6">
-                {error}
-              </div>
-            )}
-
-            <form onSubmit={handleLogin} className="space-y-6">
-              <div>
-                <label className="block text-sm font-medium mb-2">Email</label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                  <input
-                    type="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    placeholder="seu.email@exemplo.com"
-                    required
-                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium mb-2">Senha</label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                  <input
-                    type={showPassword ? "text" : "password"}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    placeholder="Digite sua senha"
-                    required
-                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-3 text-foreground/40"
-                  >
-                    {showPassword ? (
-                      <EyeOff className="w-5 h-5" />
-                    ) : (
-                      <Eye className="w-5 h-5" />
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
-              >
-                {loading ? "Entrando..." : "Entrar"}
-              </button>
-            </form>
-
-            <p className="text-center mt-6 text-foreground/60">
-              Não tem conta?{" "}
-              <Link href="/auth/register" className="text-primary-cta font-semibold hover:underline">
-                Registre-se aqui
-              </Link>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={[
-            {
-              title: "Produto",              items: [
-                { label: "Dashboard", href: "/dashboard" },
-                { label: "Treino", href: "training" },
-                { label: "Nutrição", href: "nutrition" },
-                { label: "Cardio Hub", href: "cardio" }
-              ]
-            },
-            {
-              title: "Comunidade",              items: [
-                { label: "Comunidade", href: "community" },
-                { label: "Perfil", href: "profile" },
-                { label: "Rankings", href: "rankings" },
-                { label: "Blog", href: "blog" }
-              ]
-            },
-            {
-              title: "Empresa",              items: [
-                { label: "Sobre", href: "about" },
-                { label: "Contato", href: "contact" },
-                { label: "Privacidade", href: "privacy" },
-                { label: "Termos", href: "terms" }
-              ]
-            }
-          ]}
-          logoText="FitFlow Pro"
-          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/auth/page.tsx

@@ -1,317 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import { Mail, Lock, Eye, EyeOff, LogIn, UserPlus } from 'lucide-react';
-
-export default function AuthPage() {
-  const router = useRouter();
-  const [isLogin, setIsLogin] = useState(true);
-  const [showPassword, setShowPassword] = useState(false);
-  const [formData, setFormData] = useState({
-    email: '',
-    password: '',
-    confirmPassword: '',
-    name: ''
-  });
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
-    setError('');
-  };
-
-  const validateForm = () => {
-    if (!formData.email) {
-      setError('Email é obrigatório');
-      return false;
-    }
-    if (!formData.password) {
-      setError('Senha é obrigatória');
-      return false;
-    }
-    if (!isLogin) {
-      if (!formData.name) {
-        setError('Nome é obrigatório');
-        return false;
-      }
-      if (formData.password !== formData.confirmPassword) {
-        setError('As senhas não coincidem');
-        return false;
-      }
-      if (formData.password.length < 6) {
-        setError('Senha deve ter no mínimo 6 caracteres');
-        return false;
-      }
-    }
-    return true;
-  };
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';
-      const payload = isLogin
-        ? { email: formData.email, password: formData.password }
-        : { name: formData.name, email: formData.email, password: formData.password };
-
-      const response = await fetch(endpoint, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(payload),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        setError(data.message || 'Erro ao processar requisição');
-        setLoading(false);
-        return;
-      }
-
-      // Store token and user data
-      localStorage.setItem('token', data.token);
-      localStorage.setItem('user', JSON.stringify(data.user));
-
-      // Redirect to dashboard
-      router.push('/dashboard');
-    } catch (err) {
-      setError('Erro de conexão. Tente novamente.');
-      setLoading(false);
-    }
-  };
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumSizeLargeTitles"
-      background="blurBottom"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Dashboard", id: "/dashboard" },
-            { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
-            { name: "Comunidade", id: "community" },
-            { name: "Perfil", id: "profile" }
-          ]}
-          button={{ text: "Começar Agora", href: "/auth" }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div className="w-full max-w-md space-y-8">
-          {/* Header */}
-          <div className="text-center">
-            <h1 className="text-4xl font-extrabold text-foreground mb-2">
-              {isLogin ? 'Bem-vindo de Volta' : 'Crie sua Conta'}
-            </h1>
-            <p className="text-foreground/60">
-              {isLogin ? 'Acesse sua jornada de fitness' : 'Comece sua transformação hoje'}
-            </p>
-          </div>
-
-          {/* Form Card */}
-          <div className="bg-card rounded-2xl p-8 border border-background-accent shadow-lg">
-            {error && (
-              <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
-                <p className="text-red-700 text-sm font-medium">{error}</p>
-              </div>
-            )}
-
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {/* Name field (Registration only) */}
-              {!isLogin && (
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
-                    Nome Completo
-                  </label>
-                  <input
-                    id="name"
-                    name="name"
-                    type="text"
-                    value={formData.name}
-                    onChange={handleInputChange}
-                    className="w-full px-4 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
-                    placeholder="Seu nome completo"
-                  />
-                </div>
-              )}
-
-              {/* Email field */}
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
-                  Email
-                </label>
-                <div className="relative">
-                  <Mail className="absolute left-4 top-3.5 h-5 w-5 text-foreground/40" />
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={handleInputChange}
-                    className="w-full pl-12 pr-4 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
-                    placeholder="seu.email@exemplo.com"
-                  />
-                </div>
-              </div>
-
-              {/* Password field */}
-              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
-                  Senha
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-4 top-3.5 h-5 w-5 text-foreground/40" />
-                  <input
-                    id="password"
-                    name="password"
-                    type={showPassword ? 'text' : 'password'}
-                    value={formData.password}
-                    onChange={handleInputChange}
-                    className="w-full pl-12 pr-12 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
-                    placeholder="Sua senha segura"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-4 top-3.5 text-foreground/40 hover:text-foreground"
-                  >
-                    {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
-                  </button>
-                </div>
-              </div>
-
-              {/* Confirm Password field (Registration only) */}
-              {!isLogin && (
-                <div>
-                  <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-2">
-                    Confirmar Senha
-                  </label>
-                  <div className="relative">
-                    <Lock className="absolute left-4 top-3.5 h-5 w-5 text-foreground/40" />
-                    <input
-                      id="confirmPassword"
-                      name="confirmPassword"
-                      type={showPassword ? 'text' : 'password'}
-                      value={formData.confirmPassword}
-                      onChange={handleInputChange}
-                      className="w-full pl-12 pr-12 py-3 border border-background-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta bg-background text-foreground placeholder-foreground/40"
-                      placeholder="Confirme sua senha"
-                    />
-                  </div>
-                </div>
-              )}
-
-              {/* Submit Button */}
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full py-3 px-4 bg-primary-cta text-background font-semibold rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 flex items-center justify-center gap-2"
-              >
-                {loading ? (
-                  <>
-                    <div className="w-4 h-4 border-2 border-background border-t-transparent rounded-full animate-spin" />
-                    Processando...
-                  </>
-                ) : isLogin ? (
-                  <>
-                    <LogIn className="h-5 w-5" />
-                    Entrar
-                  </>
-                ) : (
-                  <>
-                    <UserPlus className="h-5 w-5" />
-                    Criar Conta
-                  </>
-                )}
-              </button>
-            </form>
-
-            {/* Toggle Login/Register */}
-            <div className="mt-6 text-center">
-              <p className="text-foreground/60 text-sm">
-                {isLogin ? 'Não tem conta? ' : 'Já tem conta? '}
-                <button
-                  onClick={() => {
-                    setIsLogin(!isLogin);
-                    setFormData({ email: '', password: '', confirmPassword: '', name: '' });
-                    setError('');
-                  }}
-                  className="text-primary-cta font-semibold hover:underline"
-                >
-                  {isLogin ? 'Criar conta' : 'Entrar'}
-                </button>
-              </p>
-            </div>
-          </div>
-
-          {/* Security Note */}
-          <p className="text-center text-xs text-foreground/40">
-            Seu email e senha estão protegidos com criptografia de ponta a ponta.
-          </p>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={[
-            {
-              title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
-                { label: "Treino", href: "training" },
-                { label: "Nutrição", href: "nutrition" },
-                { label: "Cardio Hub", href: "cardio" }
-              ]
-            },
-            {
-              title: "Comunidade",              items: [
-                { label: "Comunidade", href: "community" },
-                { label: "Perfil", href: "profile" },
-                { label: "Rankings", href: "rankings" },
-                { label: "Blog", href: "blog" }
-              ]
-            },
-            {
-              title: "Empresa",              items: [
-                { label: "Sobre", href: "about" },
-                { label: "Contato", href: "contact" },
-                { label: "Privacidade", href: "privacy" },
-                { label: "Termos", href: "terms" }
-              ]
-            }
-          ]}
-          logoText="FitFlow Pro"
-          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/auth/register/page.tsx

@@ -1,267 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import { Mail, Lock, User, Eye, EyeOff, Check } from 'lucide-react';
-
-export default function RegisterPage() {
-  const router = useRouter();
-  const [formData, setFormData] = useState({
-    name: "",    email: "",    password: "",    confirmPassword: ""});
-  const [showPassword, setShowPassword] = useState(false);
-  const [showConfirm, setShowConfirm] = useState(false);
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [agreedToTerms, setAgreedToTerms] = useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleRegister = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError("");
-
-    if (!agreedToTerms) {
-      setError("Você deve concordar com os Termos e Condições");
-      return;
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      setError("As senhas não conferem");
-      return;
-    }
-
-    if (formData.password.length < 8) {
-      setError("A senha deve ter pelo menos 8 caracteres");
-      return;
-    }
-
-    setLoading(true);
-
-    try {
-      const response = await fetch("/api/auth/register", {
-        method: "POST",        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          name: formData.name,
-          email: formData.email,
-          password: formData.password,
-        }),
-      });
-
-      if (!response.ok) {
-        const data = await response.json();
-        setError(data.message || "Falha ao registrar");
-        return;
-      }
-
-      const data = await response.json();
-      localStorage.setItem("authToken", data.token);
-      localStorage.setItem("user", JSON.stringify(data.user));
-      router.push("/dashboard");
-    } catch (err) {
-      setError("Erro ao conectar ao servidor");
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumSizeLargeTitles"
-      background="blurBottom"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Dashboard", id: "/dashboard" },
-            { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
-            { name: "Comunidade", id: "community" },
-            { name: "Perfil", id: "profile" }
-          ]}
-          button={{ text: "Entrar", href: "/auth/login" }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div className="min-h-screen flex items-center justify-center px-4 py-20">
-        <div className="w-full max-w-md">
-          <div className="bg-card rounded-2xl p-8 shadow-lg">
-            <h1 className="text-3xl font-bold text-center mb-2">Registre-se</h1>
-            <p className="text-center text-foreground/60 mb-8">Comece sua transformação com FitFlow Pro</p>
-
-            {error && (
-              <div className="bg-red-500/10 border border-red-500 text-red-500 px-4 py-3 rounded-lg mb-6">
-                {error}
-              </div>
-            )}
-
-            <form onSubmit={handleRegister} className="space-y-6">
-              <div>
-                <label className="block text-sm font-medium mb-2">Nome Completo</label>
-                <div className="relative">
-                  <User className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                  <input
-                    type="text"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    placeholder="Seu nome completo"
-                    required
-                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium mb-2">Email</label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                  <input
-                    type="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    placeholder="seu.email@exemplo.com"
-                    required
-                    className="w-full pl-10 pr-4 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium mb-2">Senha</label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                  <input
-                    type={showPassword ? "text" : "password"}
-                    name="password"
-                    value={formData.password}
-                    onChange={handleChange}
-                    placeholder="Mínimo 8 caracteres"
-                    required
-                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-3 text-foreground/40"
-                  >
-                    {showPassword ? (
-                      <EyeOff className="w-5 h-5" />
-                    ) : (
-                      <Eye className="w-5 h-5" />
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium mb-2">Confirmar Senha</label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
-                  <input
-                    type={showConfirm ? "text" : "password"}
-                    name="confirmPassword"
-                    value={formData.confirmPassword}
-                    onChange={handleChange}
-                    placeholder="Confirme sua senha"
-                    required
-                    className="w-full pl-10 pr-10 py-3 border border-foreground/20 rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirm(!showConfirm)}
-                    className="absolute right-3 top-3 text-foreground/40"
-                  >
-                    {showConfirm ? (
-                      <EyeOff className="w-5 h-5" />
-                    ) : (
-                      <Eye className="w-5 h-5" />
-                    )}
-                  </button>
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-3">
-                <input
-                  type="checkbox"
-                  id="terms"
-                  checked={agreedToTerms}
-                  onChange={(e) => setAgreedToTerms(e.target.checked)}
-                  className="mt-1 w-5 h-5 rounded cursor-pointer"
-                />
-                <label htmlFor="terms" className="text-sm text-foreground/60 cursor-pointer">
-                  Concordo com os <Link href="/terms" className="text-primary-cta hover:underline">Termos e Condições</Link> e a <Link href="/privacy" className="text-primary-cta hover:underline">Política de Privacidade</Link>
-                </label>
-              </div>
-
-              <button
-                type="submit"
-                disabled={loading}
-                className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition"
-              >
-                {loading ? "Registrando..." : "Criar Conta"}
-              </button>
-            </form>
-
-            <p className="text-center mt-6 text-foreground/60">
-              Já tem uma conta?{" "}
-              <Link href="/auth/login" className="text-primary-cta font-semibold hover:underline">
-                Faça login aqui
-              </Link>
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={[
-            {
-              title: "Produto",              items: [
-                { label: "Dashboard", href: "/dashboard" },
-                { label: "Treino", href: "training" },
-                { label: "Nutrição", href: "nutrition" },
-                { label: "Cardio Hub", href: "cardio" }
-              ]
-            },
-            {
-              title: "Comunidade",              items: [
-                { label: "Comunidade", href: "community" },
-                { label: "Perfil", href: "profile" },
-                { label: "Rankings", href: "rankings" },
-                { label: "Blog", href: "blog" }
-              ]
-            },
-            {
-              title: "Empresa",              items: [
-                { label: "Sobre", href: "about" },
-                { label: "Contato", href: "contact" },
-                { label: "Privacidade", href: "privacy" },
-                { label: "Termos", href: "terms" }
-              ]
-            }
-          ]}
-          logoText="FitFlow Pro"
-          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/components/WorkoutDataIntegration.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import React from 'react';
+import { WorkoutSession } from '@/app/lib/storage/workoutStorage';
+
+interface WorkoutDataIntegrationProps {
+  workoutData: WorkoutSession[];
+}
+
+const WorkoutDataIntegration: React.FC<WorkoutDataIntegrationProps> = ({ workoutData }) => {
+  return (
+    <div className="workout-data-integration">
+      <h2>Workout Data</h2>
+      <ul>
+        {workoutData.map((workout) => (
+          <li key={workout.id}>
+            {workout.date} - {workout.duration} minutes - {workout.totalCalories} calories
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default WorkoutDataIntegration;

src/app/dashboard/page.tsx

@@ -5,104 +5,53 @@ import { useRouter } from "next/navigation";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { LogOut, User, Mail, Zap } from 'lucide-react';
+import { LogOut, User, Settings, Bell } from 'lucide-react';
 
-interface UserData {
-  id: string;
-  name: string;
+interface UserSession {
   email: string;
+  loginTime: string;
+  token: string;
 }
 
 export default function DashboardPage() {
   const router = useRouter();
-  const [user, setUser] = useState<UserData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(true);
+  const [userSession, setUserSession] = useState<UserSession | null>(null);
+  const [lastActivityTime, setLastActivityTime] = useState<string>("");
 
   useEffect(() => {
-    const checkAuth = async () => {
-      const token = localStorage.getItem("authToken");
-      const userData = localStorage.getItem("user");
+    // Check if user is logged in
+    const isLoggedIn = sessionStorage.getItem('isLoggedIn');
+    if (!isLoggedIn) {
+      router.push('/login');
+      return;
+    }
 
-      if (!token || !userData) {
-        router.push("/auth/login");
-        return;
-      }
+    // Retrieve session data
+    const sessionData = localStorage.getItem('userSession');
+    if (sessionData) {
+      const parsed = JSON.parse(sessionData);
+      setUserSession(parsed);
+      const loginTime = new Date(parsed.loginTime);
+      setLastActivityTime(loginTime.toLocaleString('pt-BR'));
+    }
 
-      try {
-        const response = await fetch("/api/auth/verify", {
-          headers: { Authorization: `Bearer ${token}` },
-        });
-
-        if (!response.ok) {
-          localStorage.removeItem("authToken");
-          localStorage.removeItem("user");
-          router.push("/auth/login");
-          return;
-        }
-
-        setUser(JSON.parse(userData));
-      } catch (err) {
-        setError("Erro ao verificar sessão");
-        console.error(err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    checkAuth();
+    setIsLoading(false);
   }, [router]);
 
   const handleLogout = () => {
-    localStorage.removeItem("authToken");
-    localStorage.removeItem("user");
-    router.push("/");
+    if (window.confirm('Deseja sair da sua conta?')) {
+      localStorage.removeItem('userSession');
+      sessionStorage.removeItem('isLoggedIn');
+      router.push('/');
+    }
   };
 
-  if (loading) {
+  if (isLoading) {
     return (
-      <ThemeProvider
-        defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
-        contentWidth="smallMedium"
-        sizing="mediumSizeLargeTitles"
-        background="blurBottom"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="glass"
-        headingFontWeight="extrabold"
-      >
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="text-center">
-            <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-cta"></div>
-            <p className="mt-4 text-foreground/60">Carregando...</p>
-          </div>
-        </div>
-      </ThemeProvider>
-    );
-  }
-
-  if (error) {
-    return (
-      <ThemeProvider
-        defaultButtonVariant="elastic-effect"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
-        contentWidth="smallMedium"
-        sizing="mediumSizeLargeTitles"
-        background="blurBottom"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="glass"
-        headingFontWeight="extrabold"
-      >
-        <div className="min-h-screen flex items-center justify-center">
-          <div className="text-center">
-            <p className="text-red-500">{error}</p>
-          </div>
-        </div>
-      </ThemeProvider>
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-background via-background to-background-accent">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-cta"></div>
+      </div>
     );
   }
 
@@ -122,88 +71,114 @@ export default function DashboardPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Dashboard", id: "/dashboard" },
+            { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
             { name: "Nutrição", id: "nutrition" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Sair", href: "/" }}
+          button={{ text: "Sair", onClick: handleLogout }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-screen px-4 py-20">
-        <div className="max-w-4xl mx-auto">
-          <h1 className="text-4xl font-bold mb-8">Dashboard</h1>
+      <div className="min-h-screen bg-gradient-to-br from-background via-background to-background-accent py-12 px-4">
+        <div className="max-w-6xl mx-auto">
+          {/* Welcome Header */}
+          <div className="mb-12">
+            <h1 className="text-5xl font-extrabold text-foreground mb-2">Bem-vindo de Volta! 👋</h1>
+            <p className="text-foreground/60 text-lg">Sua jornada de fitness começa aqui</p>
+          </div>
 
-          {user && (
-            <div className="grid gap-6">
-              <div className="bg-card rounded-2xl p-8 shadow-lg border border-foreground/10">
-                <h2 className="text-2xl font-bold mb-6">Bem-vindo, {user.name}!</h2>
-                
-                <div className="grid md:grid-cols-2 gap-8">
-                  <div className="space-y-4">
-                    <div className="flex items-center space-x-3">
-                      <User className="w-6 h-6 text-primary-cta" />
-                      <div>
-                        <p className="text-sm text-foreground/60">Nome</p>
-                        <p className="font-semibold">{user.name}</p>
-                      </div>
-                    </div>
-                    <div className="flex items-center space-x-3">
-                      <Mail className="w-6 h-6 text-primary-cta" />
-                      <div>
-                        <p className="text-sm text-foreground/60">Email</p>
-                        <p className="font-semibold">{user.email}</p>
-                      </div>
-                    </div>
+          {/* User Info Card */}
+          {userSession && (
+            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur mb-8">
+              <div className="flex items-start justify-between">
+                <div className="flex items-center gap-4">
+                  <div className="w-16 h-16 rounded-full bg-primary-cta/20 border-2 border-primary-cta flex items-center justify-center">
+                    <User className="w-8 h-8 text-primary-cta" />
                   </div>
-
-                  <div className="space-y-4">
-                    <div className="bg-background rounded-lg p-4">
-                      <p className="text-sm text-foreground/60 mb-2">Status da Sessão</p>
-                      <div className="flex items-center space-x-2">
-                        <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
-                        <p className="font-semibold text-green-500">Conectado</p>
-                      </div>
-                    </div>
+                  <div>
+                    <p className="text-sm text-foreground/60">Email da Conta</p>
+                    <p className="text-2xl font-semibold text-foreground">{userSession.email}</p>
+                    <p className="text-sm text-foreground/50 mt-1">Login: {lastActivityTime}</p>
                   </div>
                 </div>
-              </div>
-
-              <div className="grid md:grid-cols-3 gap-6">
-                <div className="bg-gradient-to-br from-primary-cta/20 to-accent/20 rounded-2xl p-6 border border-primary-cta/20">
-                  <Zap className="w-8 h-8 text-primary-cta mb-2" />
-                  <h3 className="text-lg font-semibold mb-1">Treinos</h3>
-                  <p className="text-3xl font-bold text-primary-cta">0</p>
-                  <p className="text-sm text-foreground/60 mt-2">Treinos concluídos</p>
-                </div>
-
-                <div className="bg-gradient-to-br from-accent/20 to-secondary-cta/20 rounded-2xl p-6 border border-accent/20">
-                  <Zap className="w-8 h-8 text-accent mb-2" />
-                  <h3 className="text-lg font-semibold mb-1">Nutrição</h3>
-                  <p className="text-3xl font-bold text-accent">0</p>
-                  <p className="text-sm text-foreground/60 mt-2">Refeições rastreadas</p>
-                </div>
-
-                <div className="bg-gradient-to-br from-secondary-cta/20 to-primary-cta/20 rounded-2xl p-6 border border-secondary-cta/20">
-                  <Zap className="w-8 h-8 text-secondary-cta mb-2" />
-                  <h3 className="text-lg font-semibold mb-1">Cardio</h3>
-                  <p className="text-3xl font-bold text-secondary-cta">0 km</p>
-                  <p className="text-sm text-foreground/60 mt-2">Distância total</p>
+                <div className="flex gap-2">
+                  <button className="p-3 rounded-full bg-secondary-cta/20 hover:bg-secondary-cta/30 transition-colors text-secondary-cta">
+                    <Settings className="w-6 h-6" />
+                  </button>
+                  <button className="p-3 rounded-full bg-secondary-cta/20 hover:bg-secondary-cta/30 transition-colors text-secondary-cta">
+                    <Bell className="w-6 h-6" />
+                  </button>
                 </div>
               </div>
-
-              <button
-                onClick={handleLogout}
-                className="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-semibold transition flex items-center justify-center space-x-2"
-              >
-                <LogOut className="w-5 h-5" />
-                <span>Sair da Conta</span>
-              </button>
             </div>
           )}
+
+          {/* Dashboard Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+            {/* Stats Card 1 */}
+            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <p className="text-foreground/60 text-sm mb-2">Treinos Completos</p>
+              <p className="text-4xl font-extrabold text-primary-cta mb-2">12</p>
+              <p className="text-sm text-accent">↑ 2 mais que a semana passada</p>
+            </div>
+
+            {/* Stats Card 2 */}
+            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <p className="text-foreground/60 text-sm mb-2">Calorias Queimadas</p>
+              <p className="text-4xl font-extrabold text-secondary-cta mb-2">2,450</p>
+              <p className="text-sm text-accent">Meta: 2,000 calorias</p>
+            </div>
+
+            {/* Stats Card 3 */}
+            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <p className="text-foreground/60 text-sm mb-2">Sequência de Dias</p>
+              <p className="text-4xl font-extrabold text-accent mb-2">8</p>
+              <p className="text-sm text-accent">dias consecutivos ✨</p>
+            </div>
+          </div>
+
+          {/* Quick Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <h3 className="text-2xl font-bold text-foreground mb-4">🏋️ Iniciar Treino</h3>
+              <p className="text-foreground/60 mb-6">Comece um treino personalizado com base em sua biometria</p>
+              <button className="w-full py-3 px-4 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold rounded-full transition-all duration-300">
+                Começar Agora
+              </button>
+            </div>
+
+            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+              <h3 className="text-2xl font-bold text-foreground mb-4">🥗 Plano Nutricional</h3>
+              <p className="text-foreground/60 mb-6">Veja suas refeições planejadas para hoje e suas macros</p>
+              <button className="w-full py-3 px-4 bg-secondary-cta hover:bg-secondary-cta/90 text-white font-semibold rounded-full transition-all duration-300">
+                Ver Plano
+              </button>
+            </div>
+          </div>
+
+          {/* Session Info */}
+          <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+            <h3 className="text-lg font-semibold text-foreground mb-4">Informações da Sessão</h3>
+            <div className="space-y-2 text-sm text-foreground/60">
+              <p>🔐 Token de Sessão: {userSession?.token?.substring(0, 20)}...</p>
+              <p>📱 Navegador: {typeof navigator !== 'undefined' ? navigator.userAgent.substring(0, 50) : 'N/A'}...</p>
+              <p>🌐 Plataforma: {typeof window !== 'undefined' ? window.location.hostname : 'N/A'}</p>
+            </div>
+          </div>
+
+          {/* Logout Button */}
+          <div className="mt-8 flex justify-center">
+            <button
+              onClick={handleLogout}
+              className="px-8 py-3 bg-red-500/20 hover:bg-red-500/30 border border-red-500/50 text-red-500 font-semibold rounded-full transition-all duration-300 flex items-center gap-2"
+            >
+              <LogOut className="w-5 h-5" />
+              Sair da Conta
+            </button>
+          </div>
         </div>
       </div>
 
@@ -212,7 +187,7 @@ export default function DashboardPage() {
           columns={[
             {
               title: "Produto",              items: [
-                { label: "Dashboard", href: "/dashboard" },
+                { label: "Dashboard", href: "dashboard" },
                 { label: "Treino", href: "training" },
                 { label: "Nutrição", href: "nutrition" },
                 { label: "Cardio Hub", href: "cardio" }

src/app/hooks/useWorkoutTracking.ts

@@ -0,0 +1,24 @@
+"use client";
+
+import { useState } from 'react';
+import { WorkoutSession, NutritionLog } from '@/app/lib/storage/workoutStorage';
+
+export const useWorkoutTracking = () => {
+  const [workouts, setWorkouts] = useState<WorkoutSession[]>([]);
+  const [nutritionLogs, setNutritionLogs] = useState<NutritionLog[]>([]);
+
+  const addWorkout = (workout: WorkoutSession) => {
+    setWorkouts([...workouts, workout]);
+  };
+
+  const addNutritionLog = (log: NutritionLog) => {
+    setNutritionLogs([...nutritionLogs, log]);
+  };
+
+  return {
+    workouts,
+    nutritionLogs,
+    addWorkout,
+    addNutritionLog,
+  };
+};

src/app/lib/storage/workoutStorage.ts

@@ -0,0 +1,99 @@
+// This file contains workout storage utilities
+
+export interface WorkoutSession {
+  id: string;
+  date: string;
+  duration: number;
+  exercises: Exercise[];
+  totalCalories: number;
+}
+
+export interface Exercise {
+  id: string;
+  name: string;
+  sets: number;
+  reps: number;
+  weight: number;
+}
+
+export interface NutritionLog {
+  id: string;
+  date: string;
+  meals: Meal[];
+  totalCalories: number;
+}
+
+export interface Meal {
+  id: string;
+  name: string;
+  calories: number;
+  macros: {
+    protein: number;
+    carbs: number;
+    fats: number;
+  };
+}
+
+export const workoutStorage = {
+  // Store workout session
+  saveWorkout: (session: WorkoutSession): void => {
+    const workouts = JSON.parse(localStorage.getItem('workouts') || '[]');
+    workouts.push(session);
+    localStorage.setItem('workouts', JSON.stringify(workouts));
+  },
+
+  // Get all workouts
+  getAllWorkouts: (): WorkoutSession[] => {
+    const workouts = localStorage.getItem('workouts');
+    return workouts ? JSON.parse(workouts) : [];
+  },
+
+  // Get workouts by date range
+  getWorkoutsByDateRange: (startDate: Date, endDate: Date): WorkoutSession[] => {
+    const allWorkouts = workoutStorage.getAllWorkouts();
+    return allWorkouts.filter(w => {
+      const workoutDate = new Date(w.date);
+      return workoutDate >= startDate && workoutDate <= endDate;
+    });
+  },
+
+  // Delete workout
+  deleteWorkout: (id: string): void => {
+    const workouts = JSON.parse(localStorage.getItem('workouts') || '[]');
+    const filtered = workouts.filter((w: WorkoutSession) => w.id !== id);
+    localStorage.setItem('workouts', JSON.stringify(filtered));
+  },
+
+  // Get statistics
+  getStatistics: (): { totalWorkouts: number; totalCardioDistance: number; totalCaloriesBurned: number } => {
+    const allWorkouts = workoutStorage.getAllWorkouts();
+    const totalWorkouts = allWorkouts.length;
+    const totalCardioDistance = allWorkouts.reduce((sum, w) => sum + (w.duration * 0.15), 0);
+    const totalCaloriesBurned = allWorkouts.reduce((sum, w) => sum + w.totalCalories, 0);
+
+    return {
+      totalWorkouts,
+      totalCardioDistance,
+      totalCaloriesBurned,
+    };
+  },
+
+  // Save nutrition log
+  saveNutritionLog: (log: NutritionLog): void => {
+    const logs = JSON.parse(localStorage.getItem('nutritionLogs') || '[]');
+    logs.push(log);
+    localStorage.setItem('nutritionLogs', JSON.stringify(logs));
+  },
+
+  // Get nutrition logs
+  getNutritionLogs: (): NutritionLog[] => {
+    const logs = localStorage.getItem('nutritionLogs');
+    return logs ? JSON.parse(logs) : [];
+  },
+
+  // Clear all data
+  clearAll: (): void => {
+    localStorage.removeItem('workouts');
+    localStorage.removeItem('nutritionLogs');
+  },
+};

src/app/login/page.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
+
+interface LoginFormData {
+  email: string;
+  password: string;
+}
+
+interface LoginErrors {
+  email?: string;
+  password?: string;
+  general?: string;
+}
+
+export default function LoginPage() {
+  const [formData, setFormData] = useState<LoginFormData>({
+    email: '',
+    password: ''
+  });
+  const [errors, setErrors] = useState<LoginErrors>({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const validateForm = (): boolean => {
+    const newErrors: LoginErrors = {};
+
+    if (!formData.email) {
+      newErrors.email = 'Email é obrigatório';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Email inválido';
+    }
+
+    if (!formData.password) {
+      newErrors.password = 'Senha é obrigatória';
+    } else if (formData.password.length < 6) {
+      newErrors.password = 'Senha deve ter pelo menos 6 caracteres';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error for this field when user starts typing
+    if (errors[name as keyof LoginErrors]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: undefined
+      }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSuccessMessage('');
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      // Store session data in localStorage
+      const sessionData = {
+        email: formData.email,
+        loginTime: new Date().toISOString(),
+        token: 'mock_token_' + Math.random().toString(36).substr(2, 9)
+      };
+      localStorage.setItem('userSession', JSON.stringify(sessionData));
+      sessionStorage.setItem('isLoggedIn', 'true');
+
+      setSuccessMessage('Login realizado com sucesso! Redirecionando...');
+      setFormData({ email: '', password: '' });
+
+      // Simulate redirect after success
+      setTimeout(() => {
+        window.location.href = '/dashboard';
+      }, 1500);
+    } catch (error) {
+      setErrors(prev => ({
+        ...prev,
+        general: 'Erro ao fazer login. Tente novamente.'
+      }));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Começar Agora", href: "contact" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-br from-background via-background to-background-accent flex items-center justify-center py-12 px-4">
+        <div className="w-full max-w-md">
+          <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+            <div className="mb-8 text-center">
+              <h1 className="text-4xl font-extrabold text-foreground mb-2">Bem-vindo</h1>
+              <p className="text-foreground/60">Faça login na sua conta FitFlow Pro</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Email Field */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-2">
+                  Email
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-accent/50" />
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    placeholder="seu.email@exemplo.com"
+                    className="w-full pl-10 pr-4 py-3 rounded-full border border-accent/20 bg-background/50 text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition-all"
+                    disabled={isLoading}
+                  />
+                </div>
+                {errors.email && (
+                  <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+                )}
+              </div>
+
+              {/* Password Field */}
+              <div>
+                <label htmlFor="password" className="block text-sm font-semibold text-foreground mb-2">
+                  Senha
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3.5 w-5 h-5 text-accent/50" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    id="password"
+                    name="password"
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    placeholder="••••••••"
+                    className="w-full pl-10 pr-12 py-3 rounded-full border border-accent/20 bg-background/50 text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition-all"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={togglePasswordVisibility}
+                    className="absolute right-3 top-3.5 text-accent/50 hover:text-accent transition-colors"
+                    disabled={isLoading}
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
+                {errors.password && (
+                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+                )}
+              </div>
+
+              {/* General Error Message */}
+              {errors.general && (
+                <div className="bg-red-500/10 border border-red-500/20 rounded-full px-4 py-3 text-red-500 text-sm">
+                  {errors.general}
+                </div>
+              )}
+
+              {/* Success Message */}
+              {successMessage && (
+                <div className="bg-green-500/10 border border-green-500/20 rounded-full px-4 py-3 text-green-500 text-sm">
+                  {successMessage}
+                </div>
+              )}
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full py-3 px-4 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold rounded-full transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                    Entrando...
+                  </>
+                ) : (
+                  <>
+                    Entrar
+                    <ArrowRight className="w-5 h-5" />
+                  </>
+                )}
+              </button>
+
+              {/* Forgot Password Link */}
+              <div className="text-center">
+                <a
+                  href="#"
+                  className="text-sm text-accent hover:text-accent/80 transition-colors"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    alert('Funcionalidade de recuperação de senha em desenvolvimento');
+                  }}
+                >
+                  Esqueceu sua senha?
+                </a>
+              </div>
+
+              {/* Sign Up Link */}
+              <div className="text-center text-sm text-foreground/60">
+                Não tem uma conta?{' '}
+                <a
+                  href="/signup"
+                  className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors"
+                >
+                  Cadastre-se aqui
+                </a>
+              </div>
+            </form>
+          </div>
+
+          {/* Security Notice */}
+          <div className="mt-8 text-center text-sm text-foreground/50">
+            <p>🔒 Sua conexão é segura e criptografada</p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/onboarding/page.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Mail } from 'lucide-react';
+import Input from '@/components/form/Input';
+
+type Step = 'name-gender' | 'biometrics' | 'complete';
+
+export default function OnboardingPage() {
+  const [currentStep, setCurrentStep] = useState<Step>('name-gender');
+  const [name, setName] = useState('');
+  const [gender, setGender] = useState('');
+  const [height, setHeight] = useState('');
+  const [weight, setWeight] = useState('');
+  const [age, setAge] = useState('');
+  const [profileData, setProfileData] = useState<{
+    name: string;
+    gender: string;
+    height: string;
+    weight: string;
+    age: string;
+  } | null>(null);
+
+  const handleNameGenderSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (name.trim() && gender) {
+      setCurrentStep('biometrics');
+    }
+  };
+
+  const handleBiometricsSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (height && weight && age) {
+      const profile = {
+        name,
+        gender,
+        height,
+        weight,
+        age,
+      };
+      setProfileData(profile);
+      setCurrentStep('complete');
+      console.log('Profile created:', profile);
+    }
+  };
+
+  const handleReset = () => {
+    setName('');
+    setGender('');
+    setHeight('');
+    setWeight('');
+    setAge('');
+    setProfileData(null);
+    setCurrentStep('name-gender');
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Começar Agora", href: "contact" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-screen flex items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md">
+          {currentStep === 'name-gender' && (
+            <div className="space-y-8">
+              <div className="text-center space-y-3">
+                <h1 className="text-4xl font-bold">Vamos começar</h1>
+                <p className="text-lg opacity-75">Primeiro, nos conte um pouco sobre você</p>
+              </div>
+
+              <form onSubmit={handleNameGenderSubmit} className="space-y-6">
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium">Nome Completo</label>
+                  <Input
+                    value={name}
+                    onChange={setName}
+                    type="text"
+                    placeholder="Seu nome"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium">Gênero</label>
+                  <select
+                    value={gender}
+                    onChange={(e) => setGender(e.target.value)}
+                    required
+                    className="w-full px-4 py-2 rounded-lg border bg-secondary-button text-foreground placeholder:opacity-75 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                  >
+                    <option value="">Selecione seu gênero</option>
+                    <option value="masculino">Masculino</option>
+                    <option value="feminino">Feminino</option>
+                    <option value="outro">Outro</option>
+                    <option value="preferir-nao-dizer">Preferir não dizer</option>
+                  </select>
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full px-6 py-3 rounded-lg bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity"
+                >
+                  Próximo
+                </button>
+              </form>
+            </div>
+          )}
+
+          {currentStep === 'biometrics' && (
+            <div className="space-y-8">
+              <div className="text-center space-y-3">
+                <h1 className="text-4xl font-bold">Dados Biométricos</h1>
+                <p className="text-lg opacity-75">Agora, nos conte sobre suas medidas</p>
+              </div>
+
+              <form onSubmit={handleBiometricsSubmit} className="space-y-6">
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium">Altura (cm)</label>
+                  <Input
+                    value={height}
+                    onChange={setHeight}
+                    type="number"
+                    placeholder="Ex: 180"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium">Peso (kg)</label>
+                  <Input
+                    value={weight}
+                    onChange={setWeight}
+                    type="number"
+                    placeholder="Ex: 75"
+                    required
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <label className="block text-sm font-medium">Idade</label>
+                  <Input
+                    value={age}
+                    onChange={setAge}
+                    type="number"
+                    placeholder="Ex: 25"
+                    required
+                  />
+                </div>
+
+                <div className="flex gap-4">
+                  <button
+                    type="button"
+                    onClick={() => setCurrentStep('name-gender')}
+                    className="flex-1 px-6 py-3 rounded-lg bg-secondary-cta text-foreground font-semibold hover:opacity-80 transition-opacity"
+                  >
+                    Voltar
+                  </button>
+                  <button
+                    type="submit"
+                    className="flex-1 px-6 py-3 rounded-lg bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity"
+                  >
+                    Criar Perfil
+                  </button>
+                </div>
+              </form>
+            </div>
+          )}
+
+          {currentStep === 'complete' && profileData && (
+            <div className="space-y-8">
+              <div className="text-center space-y-3">
+                <h1 className="text-4xl font-bold">Perfil Criado!</h1>
+                <p className="text-lg opacity-75">Bem-vindo ao FitFlow Pro, {profileData.name}!</p>
+              </div>
+
+              <div className="bg-card rounded-lg p-6 space-y-4 border border-accent/20">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm opacity-75">Nome</p>
+                    <p className="font-semibold">{profileData.name}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm opacity-75">Gênero</p>
+                    <p className="font-semibold capitalize">{profileData.gender}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm opacity-75">Altura</p>
+                    <p className="font-semibold">{profileData.height} cm</p>
+                  </div>
+                  <div>
+                    <p className="text-sm opacity-75">Peso</p>
+                    <p className="font-semibold">{profileData.weight} kg</p>
+                  </div>
+                  <div>
+                    <p className="text-sm opacity-75">Idade</p>
+                    <p className="font-semibold">{profileData.age} anos</p>
+                  </div>
+                  <div>
+                    <p className="text-sm opacity-75">IMC</p>
+                    <p className="font-semibold">
+                      {(parseInt(profileData.weight) / ((parseInt(profileData.height) / 100) ** 2)).toFixed(1)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-3">
+                <button
+                  onClick={() => window.location.href = '/'}
+                  className="w-full px-6 py-3 rounded-lg bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity"
+                >
+                  Ir para Dashboard
+                </button>
+                <button
+                  onClick={handleReset}
+                  className="w-full px-6 py-3 rounded-lg bg-secondary-cta text-foreground font-semibold hover:opacity-80 transition-opacity"
+                >
+                  Editar Dados
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -33,11 +33,11 @@ export default function LandingPage() {
           navItems={[
             { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
-            { name: "Receitas", id: "/recipes" },
+            { name: "Nutrição", id: "nutrition" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Começar Agora", href: "contact" }}
+          button={{ text: "Começar Agora", href: "/onboarding" }}
           brandName="FitFlow Pro"
         />
       </div>
@@ -60,7 +60,7 @@ export default function LandingPage() {
           imagePosition="right"
           mediaAnimation="slide-up"
           buttons={[
-            { text: "Começar Teste Grátis", href: "contact" },
+            { text: "Começar Teste Grátis", href: "/onboarding" },
             { text: "Ver Demo", href: "#features" }
           ]}
           avatars={[
@@ -83,10 +83,10 @@ export default function LandingPage() {
               title: "Perfil Biométrico",              description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.",              icon: Target,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  alt: "Tela de biometria"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  imageAlt: "Tela de biometria"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  alt: "Dashboard adaptado"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  imageAlt: "Dashboard adaptado"
                 }
               ]
             },
@@ -94,10 +94,10 @@ export default function LandingPage() {
               title: "Metas Inteligentes",              description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.",              icon: Zap,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Plano de nutrição"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  imageAlt: "Plano de nutrição"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  alt: "Métricas de progresso"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  imageAlt: "Métricas de progresso"
                 }
               ]
             }
@@ -119,10 +119,10 @@ export default function LandingPage() {
               title: "Running Tracker Avançado",              description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.",              icon: Zap,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  alt: "Rastreamento GPS"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  imageAlt: "Rastreamento GPS"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  alt: "Métricas de cardio"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  imageAlt: "Métricas de cardio"
                 }
               ]
             },
@@ -130,10 +130,10 @@ export default function LandingPage() {
               title: "Pedômetro & Caminhada",              description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.",              icon: Activity,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  alt: "Dashboard de passos"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  imageAlt: "Dashboard de passos"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  alt: "Progresso de atividade"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  imageAlt: "Progresso de atividade"
                 }
               ]
             }
@@ -155,10 +155,10 @@ export default function LandingPage() {
               title: "Dualidade de Ambientes",              description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.",              icon: Dumbbell,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  alt: "Seleção de exercícios"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  imageAlt: "Seleção de exercícios"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  alt: "Execução de treino"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  imageAlt: "Execução de treino"
                 }
               ]
             },
@@ -166,10 +166,10 @@ export default function LandingPage() {
               title: "Isolamento por Grupo Muscular",              description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.",              icon: Zap,
               mediaItems: [
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  alt: "Anatomia interativa"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  imageAlt: "Anatomia interativa"
                 },
                 {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  alt: "Exercícios filtrados"
+                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  imageAlt: "Exercícios filtrados"
                 }
               ]
             }
@@ -355,7 +355,7 @@ export default function LandingPage() {
               title: "Produto",              items: [
                 { label: "Dashboard", href: "dashboard" },
                 { label: "Treino", href: "training" },
-                { label: "Receitas", href: "/recipes" },
+                { label: "Nutrição", href: "nutrition" },
                 { label: "Cardio Hub", href: "cardio" }
               ]
             },
@@ -382,4 +382,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/recipes/page.tsx

@@ -1,311 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import { Apple, Filter, Flame, TrendingDown, TrendingUp } from 'lucide-react';
-
-const recipeDatabase = [
-  {
-    id: "1",    name: "Grilled Chicken Breast with Quinoa",    category: "Protein",    calories: 450,
-    protein: 45,
-    carbs: 35,
-    fats: 12,
-    prepTime: "25 min",    goals: ["muscle-gain"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Grilled Chicken with Quinoa"
-  },
-  {
-    id: "2",    name: "Veggie Stir-Fry with Tofu",    category: "Vegetarian",    calories: 280,
-    protein: 18,
-    carbs: 42,
-    fats: 8,
-    prepTime: "20 min",    goals: ["weight-loss"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Veggie Stir-Fry"
-  },
-  {
-    id: "3",    name: "Salmon with Sweet Potato",    category: "Fish",    calories: 520,
-    protein: 38,
-    carbs: 48,
-    fats: 18,
-    prepTime: "30 min",    goals: ["muscle-gain"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Salmon with Sweet Potato"
-  },
-  {
-    id: "4",    name: "Egg White Omelet with Veggies",    category: "Breakfast",    calories: 180,
-    protein: 22,
-    carbs: 12,
-    fats: 4,
-    prepTime: "15 min",    goals: ["weight-loss", "muscle-gain"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Egg White Omelet"
-  },
-  {
-    id: "5",    name: "Turkey Meatballs with Zucchini Noodles",    category: "Protein",    calories: 320,
-    protein: 35,
-    carbs: 18,
-    fats: 10,
-    prepTime: "28 min",    goals: ["weight-loss"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Turkey Meatballs"
-  },
-  {
-    id: "6",    name: "Lean Beef with Brown Rice",    category: "Protein",    calories: 580,
-    protein: 42,
-    carbs: 58,
-    fats: 14,
-    prepTime: "35 min",    goals: ["muscle-gain"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Lean Beef with Rice"
-  },
-  {
-    id: "7",    name: "Green Salad with Grilled Chicken",    category: "Salad",    calories: 280,
-    protein: 32,
-    carbs: 22,
-    fats: 6,
-    prepTime: "18 min",    goals: ["weight-loss"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "Green Salad"
-  },
-  {
-    id: "8",    name: "High-Protein Pasta with Lean Ground Meat",    category: "Pasta",    calories: 480,
-    protein: 40,
-    carbs: 52,
-    fats: 8,
-    prepTime: "25 min",    goals: ["muscle-gain"],
-    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",    imageAlt: "High-Protein Pasta"
-  }
-];
-
-export default function RecipesPage() {
-  const [selectedGoal, setSelectedGoal] = useState<"all" | "weight-loss" | "muscle-gain">("all");
-
-  const filteredRecipes = selectedGoal === "all" 
-    ? recipeDatabase 
-    : recipeDatabase.filter(recipe => recipe.goals.includes(selectedGoal));
-
-  return (
-    <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="entrance-slide"
-      borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumSizeLargeTitles"
-      background="blurBottom"
-      cardStyle="gradient-bordered"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
-    >
-      <div id="nav" data-section="nav">
-        <NavbarStyleCentered
-          navItems={[
-            { name: "Dashboard", id: "dashboard" },
-            { name: "Treino", id: "training" },
-            { name: "Receitas", id: "/recipes" },
-            { name: "Comunidade", id: "community" },
-            { name: "Perfil", id: "profile" }
-          ]}
-          button={{ text: "Começar Agora", href: "contact" }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div id="recipes-hero" data-section="recipes-hero">
-        <HeroSplitKpi
-          title="Receitas Inteligentes Alinhadas com Suas Metas"
-          description="Acesso a um banco de receitas nutricionais desenvolvidas por especialistas. Cada receita é otimizada para seu objetivo: perda de peso ou ganho de massa muscular."
-          tag="Nutrição Estratégica"
-          tagIcon={Flame}
-          background={{ variant: "glowing-orb" }}
-          kpis={[
-            { value: "100+", label: "Receitas Disponíveis" },
-            { value: "2", label: "Filtros por Objetivo" },
-            { value: "4.8★", label: "Avaliação Média" }
-          ]}
-          enableKpiAnimation={true}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png"
-          imageAlt="Dashboard de receitas nutricionais"
-          imagePosition="right"
-          mediaAnimation="slide-up"
-          buttons={[
-            { text: "Explorar Receitas", href: "#recipes-grid" }
-          ]}
-        />
-      </div>
-
-      <div id="recipes-filter" data-section="recipes-filter">
-        <FeatureCardTwentyFive
-          title="Filtre Receitas por Objetivo"
-          description="Selecione seu objetivo atual e o sistema recomendará as melhores receitas para atingir suas metas nutricionais e de transformação corporal."
-          tag="Recomendação Inteligente"
-          tagIcon={Filter}
-          features={[
-            {
-              title: "Perda de Peso",              description: "Receitas com déficit calórico otimizado. Alto em proteína para preservar músculos, baixo em carboidratos estratégicos. Ideal para queimar gordura mantendo a força.",              icon: TrendingDown,
-              mediaItems: [
-                {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Receitas para perda de peso"
-                },
-                {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  alt: "Progresso de déficit calórico"
-                }
-              ]
-            },
-            {
-              title: "Ganho de Massa",              description: "Receitas com superávit calórico controlado. Proteína máxima (2g por kg), carboidratos pré e pós-treino, gorduras saudáveis. Perfeito para crescimento muscular.",              icon: TrendingUp,
-              mediaItems: [
-                {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Receitas para ganho de massa"
-                },
-                {
-                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",                  alt: "Progresso de ganho muscular"
-                }
-              ]
-            }
-          ]}
-          animationType="blur-reveal"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="recipes-grid" data-section="recipes-grid">
-        <div className="w-full py-20">
-          <div className="max-w-7xl mx-auto px-6">
-            <div className="flex flex-col items-center gap-8 mb-16">
-              <div className="text-center">
-                <h2 className="text-4xl font-extrabold mb-4">Receitas Recomendadas</h2>
-                <p className="text-lg text-foreground/75">Selecione seu objetivo para ver receitas personalizadas</p>
-              </div>
-              <div className="flex gap-4 flex-wrap justify-center">
-                <button
-                  onClick={() => setSelectedGoal("all")}
-                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
-                    selectedGoal === "all"
-                      ? "bg-primary-cta text-white"
-                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
-                  }`}
-                >
-                  Todas as Receitas
-                </button>
-                <button
-                  onClick={() => setSelectedGoal("weight-loss")}
-                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
-                    selectedGoal === "weight-loss"
-                      ? "bg-primary-cta text-white"
-                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
-                  }`}
-                >
-                  Perda de Peso
-                </button>
-                <button
-                  onClick={() => setSelectedGoal("muscle-gain")}
-                  className={`px-6 py-3 rounded-full font-semibold transition-all ${
-                    selectedGoal === "muscle-gain"
-                      ? "bg-primary-cta text-white"
-                      : "bg-secondary-cta/20 text-foreground hover:bg-secondary-cta/40"
-                  }`}
-                >
-                  Ganho de Massa
-                </button>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-              {filteredRecipes.map(recipe => (
-                <div key={recipe.id} className="bg-card rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
-                  <div className="relative h-64 overflow-hidden">
-                    <img
-                      src={recipe.imageSrc}
-                      alt={recipe.imageAlt}
-                      className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
-                    />
-                  </div>
-                  <div className="p-6">
-                    <div className="flex items-start justify-between mb-3">
-                      <h3 className="text-xl font-bold text-foreground">{recipe.name}</h3>
-                      <span className="text-xs font-semibold bg-primary-cta/20 text-primary-cta px-3 py-1 rounded-full">
-                        {recipe.category}
-                      </span>
-                    </div>
-                    <p className="text-sm text-foreground/75 mb-4">Tempo: {recipe.prepTime}</p>
-                    
-                    <div className="grid grid-cols-4 gap-2 mb-4">
-                      <div className="text-center">
-                        <p className="text-xs text-foreground/60">Calorias</p>
-                        <p className="font-bold text-foreground">{recipe.calories}</p>
-                      </div>
-                      <div className="text-center">
-                        <p className="text-xs text-foreground/60">Proteína</p>
-                        <p className="font-bold text-foreground">{recipe.protein}g</p>
-                      </div>
-                      <div className="text-center">
-                        <p className="text-xs text-foreground/60">Carbs</p>
-                        <p className="font-bold text-foreground">{recipe.carbs}g</p>
-                      </div>
-                      <div className="text-center">
-                        <p className="text-xs text-foreground/60">Gordura</p>
-                        <p className="font-bold text-foreground">{recipe.fats}g</p>
-                      </div>
-                    </div>
-
-                    <div className="flex flex-wrap gap-2">
-                      {recipe.goals.includes("weight-loss") && (
-                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Perda</span>
-                      )}
-                      {recipe.goals.includes("muscle-gain") && (
-                        <span className="text-xs bg-accent/20 text-accent px-2 py-1 rounded-full">Ganho</span>
-                      )}
-                    </div>
-
-                    <button className="w-full mt-4 bg-primary-cta text-white font-semibold py-2 rounded-lg hover:opacity-90 transition-opacity">
-                      Ver Detalhes
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            {filteredRecipes.length === 0 && (
-              <div className="text-center py-12">
-                <p className="text-lg text-foreground/75">Nenhuma receita encontrada para este objetivo.</p>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBase
-          columns={[
-            {
-              title: "Produto",              items: [
-                { label: "Dashboard", href: "dashboard" },
-                { label: "Treino", href: "training" },
-                { label: "Receitas", href: "/recipes" },
-                { label: "Cardio Hub", href: "cardio" }
-              ]
-            },
-            {
-              title: "Comunidade",              items: [
-                { label: "Comunidade", href: "community" },
-                { label: "Perfil", href: "profile" },
-                { label: "Rankings", href: "rankings" },
-                { label: "Blog", href: "blog" }
-              ]
-            },
-            {
-              title: "Empresa",              items: [
-                { label: "Sobre", href: "about" },
-                { label: "Contato", href: "contact" },
-                { label: "Privacidade", href: "privacy" },
-                { label: "Termos", href: "terms" }
-              ]
-            }
-          ]}
-          logoText="FitFlow Pro"
-          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/signup/page.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import { useState } from "react";
+import { Eye, EyeOff, Mail, Lock, User, CheckCircle2, AlertCircle } from 'lucide-react';
+import Input from '@/components/form/Input';
+
+export default function SignupPage() {
+  const [formData, setFormData] = useState({
+    name: "",    email: "",    password: "",    confirmPassword: ""
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [passwordStrength, setPasswordStrength] = useState<"weak" | "medium" | "strong" | "">("");
+
+  const calculatePasswordStrength = (pwd: string): "weak" | "medium" | "strong" | "" => {
+    if (!pwd) return "";
+    if (pwd.length < 8) return "weak";
+    if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8}$/.test(pwd)) return "strong";
+    return "medium";
+  };
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    
+    if (field === "password") {
+      setPasswordStrength(calculatePasswordStrength(value));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors: { [key: string]: string } = {};
+    
+    if (!formData.name.trim()) {
+      newErrors.name = "Nome é obrigatório";
+    } else if (formData.name.trim().length < 2) {
+      newErrors.name = "Nome deve ter no mínimo 2 caracteres";
+    }
+    
+    if (!formData.email) {
+      newErrors.email = "Email é obrigatório";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = "Email inválido";
+    }
+    
+    if (!formData.password) {
+      newErrors.password = "Senha é obrigatória";
+    } else if (formData.password.length < 8) {
+      newErrors.password = "Senha deve ter no mínimo 8 caracteres";
+    }
+    
+    if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = "As senhas não correspondem";
+    }
+    
+    return newErrors;
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newErrors = validateForm();
+    setErrors(newErrors);
+    
+    if (Object.keys(newErrors).length === 0) {
+      setIsSubmitted(true);
+      console.log("Signup attempt:", formData);
+      setTimeout(() => {
+        setIsSubmitted(false);
+      }, 2000);
+    }
+  };
+
+  const getStrengthColor = () => {
+    switch (passwordStrength) {
+      case "weak":
+        return "text-red-500";
+      case "medium":
+        return "text-yellow-500";
+      case "strong":
+        return "text-green-500";
+      default:
+        return "text-foreground/30";
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Entrar", href: "/login" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-3xl shadow-lg p-8 border border-accent/10">
+            <div className="mb-8">
+              <h1 className="text-3xl font-extrabold text-foreground mb-2">Começar Agora</h1>
+              <p className="text-foreground/70">Crie sua conta e inicie sua transformação</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  <div className="flex items-center gap-2">
+                    <User size={16} />
+                    Nome Completo
+                  </div>
+                </label>
+                <Input
+                  value={formData.name}
+                  onChange={(value) => handleInputChange("name", value)}
+                  type="text"
+                  placeholder="Seu nome"
+                  required
+                  className={errors.name ? "border-red-500" : ""}
+                />
+                {errors.name && (
+                  <div className="flex items-center gap-1 text-red-500 text-sm mt-1">
+                    <AlertCircle size={14} />
+                    {errors.name}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  <div className="flex items-center gap-2">
+                    <Mail size={16} />
+                    Email
+                  </div>
+                </label>
+                <Input
+                  value={formData.email}
+                  onChange={(value) => handleInputChange("email", value)}
+                  type="email"
+                  placeholder="seu@email.com"
+                  required
+                  className={errors.email ? "border-red-500" : ""}
+                />
+                {errors.email && (
+                  <div className="flex items-center gap-1 text-red-500 text-sm mt-1">
+                    <AlertCircle size={14} />
+                    {errors.email}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  <div className="flex items-center gap-2">
+                    <Lock size={16} />
+                    Senha
+                  </div>
+                </label>
+                <div className="relative">
+                  <Input
+                    value={formData.password}
+                    onChange={(value) => handleInputChange("password", value)}
+                    type={showPassword ? "text" : "password"}
+                    placeholder="••••••••"
+                    required
+                    className={errors.password ? "border-red-500" : "pr-10"}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
+                    aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                {passwordStrength && (
+                  <div className={`flex items-center gap-1 text-xs mt-2 ${getStrengthColor()}`}>
+                    <CheckCircle2 size={12} />
+                    Força: {passwordStrength === "weak" ? "Fraca" : passwordStrength === "medium" ? "Média" : "Forte"}
+                  </div>
+                )}
+                {errors.password && (
+                  <div className="flex items-center gap-1 text-red-500 text-sm mt-1">
+                    <AlertCircle size={14} />
+                    {errors.password}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  <div className="flex items-center gap-2">
+                    <Lock size={16} />
+                    Confirmar Senha
+                  </div>
+                </label>
+                <div className="relative">
+                  <Input
+                    value={formData.confirmPassword}
+                    onChange={(value) => handleInputChange("confirmPassword", value)}
+                    type={showConfirmPassword ? "text" : "password"}
+                    placeholder="••••••••"
+                    required
+                    className={errors.confirmPassword ? "border-red-500" : "pr-10"}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
+                    aria-label={showConfirmPassword ? "Ocultar senha" : "Mostrar senha"}
+                  >
+                    {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                {errors.confirmPassword && (
+                  <div className="flex items-center gap-1 text-red-500 text-sm mt-1">
+                    <AlertCircle size={14} />
+                    {errors.confirmPassword}
+                  </div>
+                )}
+              </div>
+
+              <button
+                type="submit"
+                disabled={isSubmitted}
+                className="w-full py-3 px-4 bg-primary-cta hover:opacity-90 disabled:opacity-50 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105"
+              >
+                {isSubmitted ? "Criando conta..." : "Criar Conta"}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center text-sm text-foreground/70">
+              <p>
+                Já tem conta?{" "}
+                <a href="/login" className="text-primary-cta font-semibold hover:underline">
+                  Fazer login
+                </a>
+              </p>
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-accent/10 text-center text-xs text-foreground/50">
+              <p>Teste gratuito por 30 dias. Sem cartão de crédito necessário.</p>
+              <p className="mt-2">Ao criar uma conta, você concorda com nossos Termos de Serviço e Política de Privacidade.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/components/ProtectedRoute.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useAuth } from "@/hooks/useAuth";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function ProtectedRoute({ children, fallback }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push("/login");
+    }
+  }, [isLoading, isAuthenticated, router]);
+
+  if (isLoading) {
+    return fallback || <div className="flex items-center justify-center min-h-screen">Carregando...</div>;
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

src/components/cardStack/CardList.tsx

@@ -1,123 +1,25 @@
-"use client";
+import { ReactNode } from 'react';
+import { useCardStack } from './CardStackContext';
 
-import { memo, Children } from "react";
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-interface CardListProps {
-  children: React.ReactNode;
-  animationType: CardAnimationType;
-  useUncappedRounding?: boolean;
-  title?: string;
-  titleSegments?: TitleSegment[];
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
-  disableCardWrapper?: boolean;
-  ariaLabel?: string;
+export interface CardListProps {
+  children: ReactNode;
   className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
+  ariaLabel?: string;
 }
 
-const CardList = ({
-  children,
-  animationType,
-  useUncappedRounding = false,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  disableCardWrapper = false,
-  ariaLabel = "Card list",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-}: CardListProps) => {
-  const childrenArray = Children.toArray(children);
-  const { itemRefs } = useCardAnimation({ animationType, itemCount: childrenArray.length, useIndividualTriggers: true });
+export function CardList({ children, className = '', ariaLabel = 'Card list' }: CardListProps) {
+  const { isVisible, getAnimationProps } = useCardStack();
+  const animationProps = getAnimationProps();
 
   return (
-    <section
+    <div
+      className={className}
       aria-label={ariaLabel}
-      className={cls(
-        "relative py-20 w-full",
-        useInvertedBackground && "bg-foreground",
-        className
-      )}
+      data-is-visible={animationProps.isVisible}
     >
-      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
-        <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}
-        />
-
-        <div className="flex flex-col gap-6">
-          {childrenArray.map((child, index) => (
-            <div
-              key={index}
-              ref={(el) => { itemRefs.current[index] = el; }}
-              className={cls(!disableCardWrapper && "card", !disableCardWrapper && (useUncappedRounding ? "rounded-theme" : "rounded-theme-capped"), cardClassName)}
-            >
-              {child}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
+      {children}
+    </div>
   );
-};
+}
 
-CardList.displayName = "CardList";
-
-export default memo(CardList);
+export default CardList;

src/components/cardStack/CardStack.tsx

@@ -1,229 +1,24 @@
-"use client";
+import { ReactNode } from 'react';
+import { CardStackProvider, CardStackContextType } from './CardStackContext';
 
-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";
+export interface CardStackProps {
+  children: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
 
-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 default function CardStack({ children, className = '', ariaLabel = 'Card stack' }: CardStackProps) {
+  const contextValue: CardStackContextType = {
+    isVisible: true,
+    getAnimationProps: () => ({ isVisible: true }),
+    itemRefs: {}
+  };
 
-    // Check if the current grid config has gridRows defined
-    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
-    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
-
-    // 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;
-
-    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>
-    );
-};
-
-CardStack.displayName = "CardStack";
-
-export default memo(CardStack);
+  return (
+    <CardStackProvider value={contextValue}>
+      <div className={className} aria-label={ariaLabel}>
+        {children}
+      </div>
+    </CardStackProvider>
+  );
+}

src/components/cardStack/CardStackContext.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, ReactNode } from 'react';
+
+export interface CardStackContextType {
+  isVisible: boolean;
+  getAnimationProps: () => { isVisible: boolean };
+  itemRefs?: Record<string, HTMLElement | null>;
+}
+
+const CardStackContext = createContext<CardStackContextType | undefined>(undefined);
+
+export function useCardStack() {
+  const context = useContext(CardStackContext);
+  if (!context) {
+    return {
+      isVisible: false,
+      getAnimationProps: () => ({ isVisible: false }),
+      itemRefs: {}
+    };
+  }
+  return context;
+}
+
+export function CardStackProvider({ children, value }: { children: ReactNode; value: CardStackContextType }) {
+  return (
+    <CardStackContext.Provider value={value}>
+      {children}
+    </CardStackContext.Provider>
+  );
+}
+
+export default CardStackContext;

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,187 +1,15 @@
-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, useState, useCallback } from 'react';
 
-gsap.registerPlugin(ScrollTrigger);
+export const useCardAnimation = () => {
+  const [isVisible, setIsVisible] = useState(false);
 
-interface UseCardAnimationProps {
-  animationType: CardAnimationType | "depth-3d";
-  itemCount: number;
-  isGrid?: boolean;
-  supports3DAnimation?: boolean;
-  gridVariant?: GridVariant;
-  useIndividualTriggers?: boolean;
-}
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
 
-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);
+  const getAnimationProps = useCallback(() => {
+    return { isVisible };
+  }, [isVisible]);
 
-  // Enable 3D effect only when explicitly supported and conditions are met
-  const { isMobile } = useDepth3DAnimation({
-    itemRefs,
-    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 };
+  return { isVisible, getAnimationProps };
 };

src/components/cardStack/hooks/useDepth3DAnimation.ts

@@ -1,118 +1,11 @@
-import { useEffect, useState, useRef, RefObject } from "react";
+import { useEffect, useState } from 'react';
 
-const MOBILE_BREAKPOINT = 768;
-const ANIMATION_SPEED = 0.05;
-const ROTATION_SPEED = 0.1;
-const MOUSE_MULTIPLIER = 0.5;
-const ROTATION_MULTIPLIER = 0.25;
+export const useDepth3DAnimation = () => {
+  const [isVisible, setIsVisible] = useState(false);
 
-interface UseDepth3DAnimationProps {
-  itemRefs: RefObject<(HTMLElement | null)[]>;
-  containerRef: RefObject<HTMLDivElement | null>;
-  perspectiveRef?: RefObject<HTMLDivElement | null>;
-  isEnabled: boolean;
-}
-
-export const useDepth3DAnimation = ({
-  itemRefs,
-  containerRef,
-  perspectiveRef,
-  isEnabled,
-}: UseDepth3DAnimationProps) => {
-  const [isMobile, setIsMobile] = useState(false);
-
-  // Detect mobile viewport
   useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-
-    return () => {
-      window.removeEventListener("resize", checkMobile);
-    };
+    setIsVisible(true);
   }, []);
 
-  // 3D mouse-tracking effect (desktop only)
-  useEffect(() => {
-    if (!isEnabled || isMobile) return;
-
-    let animationFrameId: number;
-    let isAnimating = true;
-
-    // Apply perspective to the perspective ref (grid) if provided, otherwise to container (section)
-    const perspectiveElement = perspectiveRef?.current || containerRef.current;
-    if (perspectiveElement) {
-      perspectiveElement.style.perspective = "1200px";
-      perspectiveElement.style.transformStyle = "preserve-3d";
-    }
-
-    let mouseX = 0;
-    let mouseY = 0;
-    let isMouseInSection = false;
-
-    let currentX = 0;
-    let currentY = 0;
-    let currentRotationX = 0;
-    let currentRotationY = 0;
-
-    const handleMouseMove = (event: MouseEvent): void => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        isMouseInSection =
-          event.clientX >= rect.left &&
-          event.clientX <= rect.right &&
-          event.clientY >= rect.top &&
-          event.clientY <= rect.bottom;
-      }
-
-      if (isMouseInSection) {
-        mouseX = (event.clientX / window.innerWidth) * 100 - 50;
-        mouseY = (event.clientY / window.innerHeight) * 100 - 50;
-      }
-    };
-
-    const animate = (): void => {
-      if (!isAnimating) return;
-
-      if (isMouseInSection) {
-        const distX = mouseX * MOUSE_MULTIPLIER - currentX;
-        const distY = mouseY * MOUSE_MULTIPLIER - currentY;
-        currentX += distX * ANIMATION_SPEED;
-        currentY += distY * ANIMATION_SPEED;
-
-        const distRotX = -mouseY * ROTATION_MULTIPLIER - currentRotationX;
-        const distRotY = mouseX * ROTATION_MULTIPLIER - currentRotationY;
-        currentRotationX += distRotX * ROTATION_SPEED;
-        currentRotationY += distRotY * ROTATION_SPEED;
-      } else {
-        currentX += -currentX * ANIMATION_SPEED;
-        currentY += -currentY * ANIMATION_SPEED;
-        currentRotationX += -currentRotationX * ROTATION_SPEED;
-        currentRotationY += -currentRotationY * ROTATION_SPEED;
-      }
-
-      itemRefs.current?.forEach((ref) => {
-        if (!ref) return;
-        ref.style.transform = `translate(${currentX}px, ${currentY}px) rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
-      });
-
-      animationFrameId = requestAnimationFrame(animate);
-    };
-
-    animate();
-    window.addEventListener("mousemove", handleMouseMove);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      isAnimating = false;
-    };
-  }, [isEnabled, isMobile, itemRefs, containerRef]);
-
-  return { isMobile };
+  return { isVisible };
 };

src/components/cardStack/layouts/carousels/AutoCarousel.tsx

@@ -1,148 +1,25 @@
-"use client";
+import { ReactNode } from 'react';
+import { useCardStack } from '../../CardStackContext';
 
-import { memo, Children } from "react";
-import Marquee from "react-fast-marquee";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { AutoCarouselProps } from "../../types";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
+export interface AutoCarouselProps {
+  children: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
 
-const AutoCarousel = ({
-    children,
-    uniformGridCustomHeightClasses,
-    animationType,
-    speed = 50,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout = "default",
-    useInvertedBackground,
-    bottomContent,
-    className = "",
-    containerClassName = "",
-    carouselClassName = "",
-    itemClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    ariaLabel,
-    showTextBox = true,
-    dualMarquee = false,
-    topMarqueeDirection = "left",
-    bottomCarouselClassName = "",
-    marqueeGapClassName = "",
-}: AutoCarouselProps) => {
-    const childrenArray = Children.toArray(children);
-    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
-    const { itemRefs, bottomContentRef } = useCardAnimation({
-        animationType,
-        itemCount: childrenArray.length,
-        isGrid: false
-    });
+export function AutoCarousel({ children, className = '', ariaLabel = 'Auto carousel' }: AutoCarouselProps) {
+  const { isVisible, getAnimationProps } = useCardStack();
+  const animationProps = getAnimationProps();
 
-    // Bottom marquee direction is opposite of top
-    const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
+  return (
+    <div
+      className={className}
+      aria-label={ariaLabel}
+      data-is-visible={animationProps.isVisible}
+    >
+      {children}
+    </div>
+  );
+}
 
-    // Reverse order for bottom marquee to avoid alignment with top
-    const bottomChildren = dualMarquee ? [...childrenArray].reverse() : [];
-
-    return (
-        <section
-            className={cls(
-                "relative py-20 w-full",
-                useInvertedBackground && "bg-foreground",
-                className
-            )}
-            aria-label={ariaLabel}
-            aria-live="off"
-        >
-            <div className={cls("w-full md:w-content-width mx-auto", containerClassName)}>
-                <div className="w-full flex flex-col items-center">
-                    <div className="w-full flex flex-col gap-6">
-                        {showTextBox && (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}
-                            />
-                        )}
-
-                        <div
-                            className={cls(
-                                "w-full flex flex-col",
-                                marqueeGapClassName || "gap-6"
-                            )}
-                        >
-                            {/* Top/Single Marquee */}
-                            <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", carouselClassName)}>
-                                <Marquee gradient={false} speed={speed} direction={topMarqueeDirection}>
-                                    {Children.map(childrenArray, (child, index) => (
-                                        <div
-                                            key={index}
-                                            className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
-                                            ref={(el) => { itemRefs.current[index] = el; }}
-                                        >
-                                            {child}
-                                        </div>
-                                    ))}
-                                </Marquee>
-                            </div>
-
-                            {/* Bottom Marquee (only if dualMarquee is true) - Reversed order, opposite direction */}
-                            {dualMarquee && (
-                                <div className={cls("overflow-hidden w-full relative z-10 mask-padding-x", bottomCarouselClassName || carouselClassName)}>
-                                    <Marquee gradient={false} speed={speed} direction={bottomMarqueeDirection}>
-                                        {Children.map(bottomChildren, (child, index) => (
-                                            <div
-                                                key={`bottom-${index}`}
-                                                className={cls("flex-none w-carousel-item-3 xl:w-carousel-item-4 mb-1 mr-6", heightClasses, itemClassName)}
-                                            >
-                                                {child}
-                                            </div>
-                                        ))}
-                                    </Marquee>
-                                </div>
-                            )}
-                        </div>
-                        {bottomContent && (
-                            <div ref={bottomContentRef}>
-                                {bottomContent}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-AutoCarousel.displayName = "AutoCarousel";
-
-export default memo(AutoCarousel);
+export default AutoCarousel;

src/components/cardStack/layouts/carousels/ButtonCarousel.tsx

@@ -1,182 +1,25 @@
-"use client";
+import { ReactNode } from 'react';
+import { useCardStack } from '../../CardStackContext';
 
-import { memo, Children } from "react";
-import useEmblaCarousel from "embla-carousel-react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { ButtonCarouselProps } from "../../types";
-import { usePrevNextButtons } from "../../hooks/usePrevNextButtons";
-import { useScrollProgress } from "../../hooks/useScrollProgress";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
+export interface ButtonCarouselProps {
+  children: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
 
-const ButtonCarousel = ({
-    children,
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout = "default",
-    useInvertedBackground,
-    bottomContent,
-    className = "",
-    containerClassName = "",
-    carouselClassName = "",
-    carouselItemClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    ariaLabel,
-}: ButtonCarouselProps) => {
-    const [emblaRef, emblaApi] = useEmblaCarousel({ dragFree: true });
+export function ButtonCarousel({ children, className = '', ariaLabel = 'Button carousel' }: ButtonCarouselProps) {
+  const { isVisible, getAnimationProps } = useCardStack();
+  const animationProps = getAnimationProps();
 
-    const {
-        prevBtnDisabled,
-        nextBtnDisabled,
-        onPrevButtonClick,
-        onNextButtonClick,
-    } = usePrevNextButtons(emblaApi);
+  return (
+    <div
+      className={className}
+      aria-label={ariaLabel}
+      data-is-visible={animationProps.isVisible}
+    >
+      {children}
+    </div>
+  );
+}
 
-    const scrollProgress = useScrollProgress(emblaApi);
-
-    const childrenArray = Children.toArray(children);
-    const heightClasses = uniformGridCustomHeightClasses || "min-h-80 2xl:min-h-90";
-    const { itemRefs, bottomContentRef } = useCardAnimation({
-        animationType,
-        itemCount: childrenArray.length,
-        isGrid: false
-    });
-
-    return (
-        <section
-            className={cls(
-                "relative px-[var(--width-0)] py-20 w-full",
-                useInvertedBackground && "bg-foreground",
-                className
-            )}
-            aria-label={ariaLabel}
-        >
-            <div className={cls("w-full mx-auto", containerClassName)}>
-                <div className="w-full flex flex-col items-center">
-                    <div className="w-full flex flex-col gap-6">
-                        {(title || titleSegments || description) && (
-                            <div className="w-content-width mx-auto">
-                                <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}
-                                />
-                            </div>
-                        )}
-                        <div
-                            className={cls(
-                                "w-full flex flex-col gap-6"
-                            )}
-                        >
-                            <div
-                                className={cls(
-                                    "overflow-hidden w-full relative z-10 flex cursor-grab",
-                                    carouselClassName
-                                )}
-                                ref={emblaRef}
-                            >
-                                <div className="flex gap-6 w-full">
-                                    <div className="flex-shrink-0 w-carousel-padding" />
-                                    {Children.map(childrenArray, (child, index) => (
-                                        <div
-                                            key={index}
-                                            className={cls("flex-none select-none w-carousel-item-3 xl:w-carousel-item-4 mb-6", heightClasses, carouselItemClassName)}
-                                            ref={(el) => { itemRefs.current[index] = el; }}
-                                        >
-                                            {child}
-                                        </div>
-                                    ))}
-                                    <div className="flex-shrink-0 w-carousel-padding" />
-                                </div>
-                            </div>
-
-                            <div className={cls("w-full flex", controlsClassName)}>
-                                <div className="flex-shrink-0 w-carousel-padding-controls" />
-                                <div className="flex justify-between items-center w-full">
-                                    <div
-                                        className="rounded-theme card relative h-2 w-50 overflow-hidden"
-                                        role="progressbar"
-                                        aria-label="Carousel progress"
-                                        aria-valuenow={Math.round(scrollProgress)}
-                                        aria-valuemin={0}
-                                        aria-valuemax={100}
-                                    >
-                                        <div
-                                            className="bg-foreground primary-button absolute! w-full top-0 bottom-0 -left-full rounded-theme"
-                                            style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
-                                        />
-                                    </div>
-
-                                    <div className="flex items-center gap-3">
-                                        <button
-                                            onClick={onPrevButtonClick}
-                                            disabled={prevBtnDisabled}
-                                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-                                            type="button"
-                                            aria-label="Previous slide"
-                                        >
-                                            <ChevronLeft className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
-                                        </button>
-                                        <button
-                                            onClick={onNextButtonClick}
-                                            disabled={nextBtnDisabled}
-                                            className="secondary-button h-8 aspect-square flex items-center justify-center rounded-theme cursor-pointer transition-colors disabled:cursor-not-allowed disabled:opacity-50"
-                                            type="button"
-                                            aria-label="Next slide"
-                                        >
-                                            <ChevronRight className="h-[40%] w-auto aspect-square text-secondary-cta-text" />
-                                        </button>
-                                    </div>
-                                </div>
-                                <div className="flex-shrink-0 w-carousel-padding-controls" />
-                            </div>
-                        </div>
-                        {bottomContent && (
-                            <div ref={bottomContentRef} className="w-content-width mx-auto">
-                                {bottomContent}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-};
-
-ButtonCarousel.displayName = "ButtonCarousel";
-
-export default memo(ButtonCarousel);
+export default ButtonCarousel;

src/components/cardStack/layouts/grid/GridLayout.tsx

@@ -1,150 +1,26 @@
-"use client";
+import React, { useContext } from 'react';
+import { CardStackContext } from '../../CardStackContext';
 
-import { memo, Children } from "react";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { GridLayoutProps } from "../../types";
-import { gridConfigs } from "./gridConfigs";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
+interface GridLayoutProps {
+  children: React.ReactNode;
+  className?: string;
+}
 
-const GridLayout = ({
-    children,
-    itemCount,
-    gridVariant = "uniform-all-items-equal",
-    uniformGridCustomHeightClasses,
-    gridRowsClassName,
-    itemHeightClassesOverride,
-    animationType,
-    supports3DAnimation = false,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout = "default",
-    useInvertedBackground,
-    bottomContent,
-    className = "",
-    containerClassName = "",
-    gridClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    ariaLabel,
-}: GridLayoutProps) => {
-    // Get config for this variant and item count
-    const config = gridConfigs[gridVariant]?.[itemCount];
+export const GridLayout: React.FC<GridLayoutProps> = ({ children, className = '' }) => {
+  const context = useContext(CardStackContext);
 
-    // Fallback to default uniform grid if no config
-    const gridColsMap = {
-        1: "md:grid-cols-1",
-        2: "md:grid-cols-2",
-        3: "md:grid-cols-3",
-        4: "md:grid-cols-4",
-    };
-    const defaultGridCols = gridColsMap[itemCount as keyof typeof gridColsMap] || "md:grid-cols-4";
+  if (!context) {
+    return <div className={className}>{children}</div>;
+  }
 
-    // Use config values or fallback
-    const gridCols = config?.gridCols || defaultGridCols;
-    const gridRows = gridRowsClassName || config?.gridRows || "";
-    const itemClasses = config?.itemClasses || [];
-    const itemHeightClasses = itemHeightClassesOverride || config?.itemHeightClasses || [];
-    const heightClasses = uniformGridCustomHeightClasses || config?.heightClasses || "";
-    const itemWrapperClass = config?.itemWrapperClass || "";
+  const { isVisible, getAnimationProps } = context;
+  const animationProps = getAnimationProps();
 
-    const childrenArray = Children.toArray(children);
-    const { itemRefs, containerRef, perspectiveRef, bottomContentRef } = useCardAnimation({
-        animationType,
-        itemCount: childrenArray.length,
-        isGrid: true,
-        supports3DAnimation,
-        gridVariant
-    });
-
-    return (
-        <section
-            ref={containerRef}
-            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}
-                    />
-                )}
-                <div
-                    ref={perspectiveRef}
-                    className={cls(
-                        "grid grid-cols-1 gap-6",
-                        gridCols,
-                        gridRows,
-                        gridClassName
-                    )}
-                >
-                    {childrenArray.map((child, index) => {
-                        const itemClass = itemClasses[index] || "";
-                        const itemHeightClass = itemHeightClasses[index] || "";
-                        const combinedClass = cls(itemWrapperClass, itemClass, itemHeightClass, heightClasses);
-                        return combinedClass ? (
-                            <div
-                                key={index}
-                                className={combinedClass}
-                                ref={(el) => { itemRefs.current[index] = el; }}
-                            >
-                                {child}
-                            </div>
-                        ) : (
-                            <div
-                                key={index}
-                                ref={(el) => { itemRefs.current[index] = el; }}
-                            >
-                                {child}
-                            </div>
-                        );
-                    })}
-                </div>
-                {bottomContent && (
-                    <div ref={bottomContentRef}>
-                        {bottomContent}
-                    </div>
-                )}
-            </div>
-        </section>
-    );
+  return (
+    <div className={className} {...animationProps}>
+      {children}
+    </div>
+  );
 };
 
-GridLayout.displayName = "GridLayout";
-
-export default memo(GridLayout);
+export default GridLayout;

src/components/cardStack/layouts/timelines/TimelineBase.tsx

@@ -1,149 +1,27 @@
 "use client";
 
-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";
+import React from 'react';
 
-type TimelineVariant = "timeline";
-
-interface TimelineBaseProps {
-  children: React.ReactNode;
-  variant?: TimelineVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
-  title?: string;
-  titleSegments?: TitleSegment[];
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout?: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
-  className?: string;
-  containerClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  ariaLabel?: string;
+interface TimelineItem {
+  id: string;
+  title: string;
+  description: string;
 }
 
-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);
-  }, []);
+interface TimelineBaseProps {
+  items: TimelineItem[];
+  className?: string;
+}
 
+export const TimelineBase: React.FC<TimelineBaseProps> = ({ items, className = '' }) => {
   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}
-          />
-        )}
-        <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={`timeline ${className}`}>
+      {items.map((item) => (
+        <div key={item.id} className="timeline-item">
+          <h3>{item.title}</h3>
+          <p>{item.description}</p>
         </div>
-      </div>
-    </section>
+      ))}
+    </div>
   );
 };
-
-TimelineBase.displayName = "TimelineBase";
-
-export default React.memo(TimelineBase);

src/components/cardStack/layouts/timelines/TimelinePhoneView.tsx

@@ -1,275 +1,26 @@
-"use client";
-
-import React, { memo } from "react";
-import MediaContent from "@/components/shared/MediaContent";
-import CardStackTextBox from "../../CardStackTextBox";
-import { usePhoneAnimations, type TimelinePhoneViewItem } from "../../hooks/usePhoneAnimations";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, TitleSegment, CardAnimationType } from "../../types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-interface PhoneFrameProps {
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  videoAriaLabel?: string;
-  phoneRef: (el: HTMLDivElement | null) => void;
-  className?: string;
-}
-
-const PhoneFrame = memo(({
-  imageSrc,
-  videoSrc,
-  imageAlt,
-  videoAriaLabel,
-  phoneRef,
-  className = "",
-}: PhoneFrameProps) => (
-  <div
-    ref={phoneRef}
-    className={cls("card rounded-theme-capped p-1 overflow-hidden", className)}
-  >
-    <MediaContent
-      imageSrc={imageSrc}
-      videoSrc={videoSrc}
-      imageAlt={imageAlt}
-      videoAriaLabel={videoAriaLabel}
-      imageClassName="w-full h-full object-cover rounded-theme-capped"
-    />
-  </div>
-));
-
-PhoneFrame.displayName = "PhoneFrame";
+import React, { useContext } from 'react';
+import { CardStackContext } from '../../CardStackContext';
 
 interface TimelinePhoneViewProps {
-  items: TimelinePhoneViewItem[];
-  showTextBox?: boolean;
-  showDivider?: boolean;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  animationType: CardAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground?: InvertedBackground;
+  children: React.ReactNode;
   className?: string;
-  containerClassName?: string;
-  textBoxClassName?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-  tagClassName?: string;
-  buttonContainerClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  desktopContainerClassName?: string;
-  mobileContainerClassName?: string;
-  desktopContentClassName?: string;
-  desktopWrapperClassName?: string;
-  mobileWrapperClassName?: string;
-  phoneFrameClassName?: string;
-  mobilePhoneFrameClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  ariaLabel?: string;
 }
 
-const TimelinePhoneView = ({
-  items,
-  showTextBox = true,
-  showDivider = false,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  animationType,
-  textboxLayout,
-  useInvertedBackground,
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  titleClassName = "",
-  descriptionClassName = "",
-  tagClassName = "",
-  buttonContainerClassName = "",
-  buttonClassName = "",
-  buttonTextClassName = "",
-  desktopContainerClassName = "",
-  mobileContainerClassName = "",
-  desktopContentClassName = "",
-  desktopWrapperClassName = "",
-  mobileWrapperClassName = "",
-  phoneFrameClassName = "",
-  mobilePhoneFrameClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-  ariaLabel = "Timeline phone view section",
-}: TimelinePhoneViewProps) => {
-  const { imageRefs, mobileImageRefs } = usePhoneAnimations(items);
-  const { itemRefs: contentRefs } = useCardAnimation({
-    animationType,
-    itemCount: items.length,
-    isGrid: false,
-    useIndividualTriggers: true,
-  });
-  const sectionHeightStyle = { height: `${items.length * 100}vh` };
+export const TimelinePhoneView: React.FC<TimelinePhoneViewProps> = ({ children, className = '' }) => {
+  const context = useContext(CardStackContext);
+
+  if (!context) {
+    return <div className={className}>{children}</div>;
+  }
+
+  const { isVisible, getAnimationProps } = context;
+  const animationProps = getAnimationProps();
 
   return (
-    <section
-      className={cls(
-        "relative py-20 overflow-hidden md:overflow-visible w-full",
-        useInvertedBackground && "bg-foreground",
-        className
-      )}
-      aria-label={ariaLabel}
-    >
-      <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
-        {showTextBox && (
-          <div className="relative w-content-width mx-auto" >
-            <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}
-              descriptionClassName={descriptionClassName}
-              tagClassName={tagClassName}
-              buttonContainerClassName={buttonContainerClassName}
-              buttonClassName={buttonClassName}
-              buttonTextClassName={buttonTextClassName}
-              titleImageWrapperClassName={titleImageWrapperClassName}
-              titleImageClassName={titleImageClassName}
-            />
-          </div>
-        )}
-        {showDivider && (
-          <div className="relative w-content-width mx-auto h-px bg-accent md:hidden" />
-        )}
-        <div className="hidden md:flex relative" style={sectionHeightStyle}>
-          <div
-            className={cls(
-              "absolute top-0 left-0 flex flex-col w-[calc(var(--width-content-width)-var(--width-20)*2)] 2xl:w-[calc(var(--width-content-width)-var(--width-25)*2)] mx-auto right-0 z-10",
-              desktopContainerClassName
-            )}
-            style={sectionHeightStyle}
-          >
-            {items.map((item, index) => (
-              <div
-                key={`content-${index}`}
-                className={cls(
-                  item.trigger,
-                  "w-full mx-auto h-screen flex justify-center items-center",
-                  desktopContentClassName
-                )}
-              >
-                <div
-                  ref={(el) => { contentRefs.current[index] = el; }}
-                  className={desktopWrapperClassName}
-                >
-                  {item.content}
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="sticky top-0 left-0 h-screen w-full overflow-hidden">
-            {items.map((item, itemIndex) => (
-              <div
-                key={`phones-${itemIndex}`}
-                className="h-screen w-full absolute top-0 left-0"
-              >
-                <div className="w-content-width mx-auto h-full flex flex-row justify-between items-center">
-                  <PhoneFrame
-                    key={`phone-${itemIndex}-1`}
-                    imageSrc={item.imageOne}
-                    videoSrc={item.videoOne}
-                    imageAlt={item.imageAltOne}
-                    videoAriaLabel={item.videoAriaLabelOne}
-                    phoneRef={(el) => {
-                      if (imageRefs.current) {
-                        imageRefs.current[itemIndex * 2] = el;
-                      }
-                    }}
-                    className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
-                  />
-                  <PhoneFrame
-                    key={`phone-${itemIndex}-2`}
-                    imageSrc={item.imageTwo}
-                    videoSrc={item.videoTwo}
-                    imageAlt={item.imageAltTwo}
-                    videoAriaLabel={item.videoAriaLabelTwo}
-                    phoneRef={(el) => {
-                      if (imageRefs.current) {
-                        imageRefs.current[itemIndex * 2 + 1] = el;
-                      }
-                    }}
-                    className={cls("w-20 2xl:w-25 h-[70vh]", phoneFrameClassName)}
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <div className={cls("md:hidden flex flex-col gap-20", mobileContainerClassName)}>
-          {items.map((item, itemIndex) => (
-            <div
-              key={`mobile-item-${itemIndex}`}
-              className="flex flex-col gap-10"
-            >
-              <div className={mobileWrapperClassName}>
-                {item.content}
-              </div>
-              <div className="flex flex-row gap-6 justify-center">
-                <PhoneFrame
-                  key={`mobile-phone-${itemIndex}-1`}
-                  imageSrc={item.imageOne}
-                  videoSrc={item.videoOne}
-                  imageAlt={item.imageAltOne}
-                  videoAriaLabel={item.videoAriaLabelOne}
-                  phoneRef={(el) => {
-                    if (mobileImageRefs.current) {
-                      mobileImageRefs.current[itemIndex * 2] = el;
-                    }
-                  }}
-                  className={cls("w-40 h-80", mobilePhoneFrameClassName)}
-                />
-                <PhoneFrame
-                  key={`mobile-phone-${itemIndex}-2`}
-                  imageSrc={item.imageTwo}
-                  videoSrc={item.videoTwo}
-                  imageAlt={item.imageAltTwo}
-                  videoAriaLabel={item.videoAriaLabelTwo}
-                  phoneRef={(el) => {
-                    if (mobileImageRefs.current) {
-                      mobileImageRefs.current[itemIndex * 2 + 1] = el;
-                    }
-                  }}
-                  className={cls("w-40 h-80", mobilePhoneFrameClassName)}
-                />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
+    <div className={className} {...animationProps}>
+      {children}
+    </div>
   );
 };
 
-TimelinePhoneView.displayName = "TimelinePhoneView";
-
-export default memo(TimelinePhoneView);
+export default TimelinePhoneView;

src/components/cardStack/layouts/timelines/TimelineProcessFlow.tsx

@@ -1,202 +1,26 @@
-"use client";
-
-import React, { useEffect, useRef, memo, useState } from "react";
-import { gsap } from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import CardStackTextBox from "../../CardStackTextBox";
-import { useCardAnimation } from "../../hooks/useCardAnimation";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "../../types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-gsap.registerPlugin(ScrollTrigger);
-
-interface TimelineProcessFlowItem {
-  id: string;
-  content: React.ReactNode;
-  media: React.ReactNode;
-  reverse: boolean;
-}
+import React, { useContext } from 'react';
+import { CardStackContext } from '../../CardStackContext';
 
 interface TimelineProcessFlowProps {
-  items: TimelineProcessFlowItem[];
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  animationType: CardAnimationType;
-  useInvertedBackground?: InvertedBackground;
-  ariaLabel?: string;
+  children: React.ReactNode;
   className?: string;
-  containerClassName?: string;
-  textBoxClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxDescriptionClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-  itemClassName?: string;
-  mediaWrapperClassName?: string;
-  numberClassName?: string;
-  contentWrapperClassName?: string;
-  gapClassName?: string;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
 }
 
-const TimelineProcessFlow = ({
-  items,
-  title,
-  titleSegments,
-  description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  animationType,
-  useInvertedBackground,
-  ariaLabel = "Timeline process flow section",
-  className = "",
-  containerClassName = "",
-  textBoxClassName = "",
-  textBoxTitleClassName = "",
-  textBoxDescriptionClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-  itemClassName = "",
-  mediaWrapperClassName = "",
-  numberClassName = "",
-  contentWrapperClassName = "",
-  gapClassName = "",
-  titleImageWrapperClassName = "",
-  titleImageClassName = "",
-}: TimelineProcessFlowProps) => {
-  const processLineRef = useRef<HTMLDivElement>(null);
-  const { itemRefs } = useCardAnimation({ animationType, itemCount: items.length, useIndividualTriggers: true });
-  const [isMdScreen, setIsMdScreen] = useState(false);
+export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({ children, className = '' }) => {
+  const context = useContext(CardStackContext);
 
-  useEffect(() => {
-    const checkScreenSize = () => {
-      setIsMdScreen(window.innerWidth >= 768);
-    };
+  if (!context) {
+    return <div className={className}>{children}</div>;
+  }
 
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
-
-    return () => window.removeEventListener('resize', checkScreenSize);
-  }, []);
-
-  useEffect(() => {
-    if (!processLineRef.current) return;
-
-    gsap.fromTo(
-      processLineRef.current,
-      { yPercent: -100 },
-      {
-        yPercent: 0,
-        ease: "none",
-        scrollTrigger: {
-          trigger: ".timeline-line",
-          start: "top center",
-          end: "bottom center",
-          scrub: true,
-        },
-      }
-    );
-
-    return () => {
-      ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
-    };
-  }, []);
+  const { isVisible, getAnimationProps } = context;
+  const animationProps = getAnimationProps();
 
   return (
-    <section
-      className={cls(
-        "relative py-20 w-full",
-        useInvertedBackground && "bg-foreground",
-        className
-      )}
-      aria-label={ariaLabel}
-    >
-      <div className={cls("w-full flex flex-col gap-6", containerClassName)}>
-        <div className="relative w-content-width mx-auto">
-          <CardStackTextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            textBoxClassName={textBoxClassName}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-          />
-        </div>
-        <div className="relative w-full">
-          <div className="pointer-events-none absolute top-0 right-[var(--width-10)] md:right-auto md:left-1/2 md:-translate-x-1/2 w-px h-full z-10 overflow-hidden md:py-6" >
-            <div className="relative timeline-line h-full bg-foreground overflow-hidden">
-              <div className="w-full h-full bg-accent" ref={processLineRef} />
-            </div>
-          </div>
-          <ol className={cls("relative w-content-width mx-auto flex flex-col gap-10 md:gap-20 md:p-6", isMdScreen && "card", "md:rounded-theme-capped", gapClassName)}>
-            {items.map((item, index) => (
-              <li
-                key={item.id}
-                ref={(el) => {
-                  itemRefs.current[index] = el;
-                }}
-                className={cls(
-                  "relative z-10 w-full flex flex-col gap-6 md:gap-0 md:flex-row justify-between",
-                  item.reverse && "flex-col md:flex-row-reverse",
-                  itemClassName
-                )}
-              >
-                <div
-                  className={cls("relative w-70 md:w-[calc(50%-var(--width-5))]", mediaWrapperClassName)}
-                >
-                  {item.media}
-                </div>
-                <div
-                  className={cls(
-                    "absolute! top-1/2 right-[calc(var(--height-8)/-2)] md:right-auto md:left-1/2 md:-translate-x-1/2 -translate-y-1/2 h-8 aspect-square rounded-theme flex items-center justify-center z-10 primary-button",
-                    numberClassName
-                  )}
-                >
-                  <p className="text-sm text-primary-cta-text">{item.id}</p>
-                </div>
-                <div className={cls("relative w-70 md:w-[calc(50%-var(--width-5))]", contentWrapperClassName)}>
-                  {item.content}
-                </div>
-              </li>
-            ))}
-          </ol>
-        </div>
-      </div>
-    </section>
+    <div className={className} {...animationProps}>
+      {children}
+    </div>
   );
 };
 
-TimelineProcessFlow.displayName = "TimelineProcessFlow";
-
-export default memo(TimelineProcessFlow);
+export default TimelineProcessFlow;

src/components/ecommerce/productCatalog/ProductCatalog.tsx

@@ -1,156 +1,43 @@
 "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 ProductCatalogItem from "./ProductCatalogItem";
-import type { CatalogProduct } from "./ProductCatalogItem";
+import React, { useState } from 'react';
 
-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;
+interface CatalogProduct {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt: string;
+  rating: string;
+  reviewCount: string;
+  category: string;
+  onProductClick: () => void;
 }
 
-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();
+interface ProductCatalogProps {
+  products?: CatalogProduct[];
+}
 
-    const handleProductClick = useCallback((productId: string) => {
-        router.push(`/shop/${productId}`);
-    }, [router]);
+const ProductCatalog: React.FC<ProductCatalogProps> = ({ products = [] }) => {
+  const [filteredProducts, setFilteredProducts] = useState<CatalogProduct[]>(products);
 
-    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>
-        );
-    }
-
-    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>
-    );
+  return (
+    <div className="product-catalog">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {filteredProducts.map((product) => (
+          <div key={product.id} className="product-card cursor-pointer" onClick={product.onProductClick}>
+            <img src={product.imageSrc} alt={product.imageAlt} className="w-full h-48 object-cover rounded-lg" />
+            <h3 className="mt-2 font-semibold">{product.name}</h3>
+            <p className="text-primary-cta font-bold">{product.price}</p>
+            <div className="flex items-center gap-2 text-sm">
+              <span className="text-yellow-500">★ {product.rating}</span>
+              <span className="text-foreground/60">({product.reviewCount} reviews)</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };
 
-ProductCatalog.displayName = "ProductCatalog";
-
-export default memo(ProductCatalog);
+export default ProductCatalog;

src/components/sections/blog/BlogCardOne.tsx

@@ -1,10 +1,7 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useState, useMemo } from "react";
-import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
-import TextBox from "@/components/Textbox";
-
-export interface BlogCardOneProps {
+interface BlogCardOneProps {
   blogs: Array<{
     id: string;
     category: string;
@@ -17,158 +14,52 @@ export interface BlogCardOneProps {
     date: string;
     onBlogClick?: () => void;
   }>;
-  carouselMode?: "auto" | "buttons";
-  uniformGridCustomHeightClasses?: string;
-  animationType?: string;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  title: string;
+  description: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
   useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  imageWrapperClassName?: string;
-  imageClassName?: string;
-  categoryClassName?: string;
-  cardTitleClassName?: string;
-  excerptClassName?: string;
-  authorContainerClassName?: string;
-  authorAvatarClassName?: string;
-  authorNameClassName?: string;
-  dateClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  [key: string]: any;
 }
 
 const BlogCardOne: React.FC<BlogCardOneProps> = ({
   blogs,
-  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
+  title,
   description,
-  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "" }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const blogCards = blogs.map((blog) => (
-    <div
-      key={blog.id}
-      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
-        cardClassName || ""
-      }`}
-      onClick={blog.onBlogClick}
-    >
-      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
-        <img
-          src={blog.imageSrc}
-          alt={blog.imageAlt || blog.title}
-          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
-            imageClassName || ""
-          }`}
-        />
-        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
-          <ArrowRight className="w-4 h-4 text-foreground" />
-        </button>
-      </div>
-
-      <div className="flex-1 p-6 flex flex-col gap-3">
-        <span className={`text-xs font-semibold text-primary-cta uppercase ${
-          categoryClassName || ""
-        }`}>
-          {blog.category}
-        </span>
-
-        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
-          cardTitleClassName || ""
-        }`}>
-          {blog.title}
-        </h3>
-
-        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
-          excerptClassName || ""
-        }`}>
-          {blog.excerpt}
-        </p>
-
-        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
-          authorContainerClassName || ""
-        }`}>
-          <img
-            src={blog.authorAvatar}
-            alt={blog.authorName}
-            className={`w-8 h-8 rounded-full object-cover ${
-              authorAvatarClassName || ""
-            }`}
-          />
-          <div className="flex-1 min-w-0">
-            <p className={`text-sm font-medium text-foreground truncate ${
-              authorNameClassName || ""
-            }`}>
-              {blog.authorName}
-            </p>
-            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
-              {blog.date}
-            </p>
-          </div>
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const blogItems = blogs.map((blog) => (
+    <div key={blog.id} className="flex flex-col gap-4">
+      <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} className="w-full rounded" />
+      <span className="text-sm font-medium text-primary-cta">{blog.category}</span>
+      <h3 className="text-xl font-semibold">{blog.title}</h3>
+      <p className="text-sm text-foreground/75">{blog.excerpt}</p>
+      <div className="flex items-center gap-2">
+        <img src={blog.authorAvatar} alt={blog.authorName} className="w-8 h-8 rounded-full" />
+        <div>
+          <p className="text-sm font-medium">{blog.authorName}</p>
+          <p className="text-xs text-foreground/60">{blog.date}</p>
         </div>
       </div>
     </div>
   ));
 
   return (
-    <div
-      className={`w-full py-20 ${
-        useInvertedBackground ? "bg-background/50" : ""
-      } ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description || ""}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout || "default"}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
-          {blogCards}
-        </div>
-      </div>
-    </div>
+      {blogItems}
+    </CardStack>
   );
 };
 
-export default BlogCardOne;
+export default BlogCardOne;

src/components/sections/blog/BlogCardThree.tsx

@@ -1,10 +1,7 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useState } from "react";
-import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
-import TextBox from "@/components/Textbox";
-
-export interface BlogCardThreeProps {
+interface BlogCardThreeProps {
   blogs: Array<{
     id: string;
     category: string;
@@ -17,158 +14,52 @@ export interface BlogCardThreeProps {
     date: string;
     onBlogClick?: () => void;
   }>;
-  carouselMode?: "auto" | "buttons";
-  uniformGridCustomHeightClasses?: string;
-  animationType?: string;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  title: string;
+  description: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
   useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  imageWrapperClassName?: string;
-  imageClassName?: string;
-  categoryClassName?: string;
-  cardTitleClassName?: string;
-  excerptClassName?: string;
-  authorContainerClassName?: string;
-  authorAvatarClassName?: string;
-  authorNameClassName?: string;
-  dateClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  [key: string]: any;
 }
 
 const BlogCardThree: React.FC<BlogCardThreeProps> = ({
   blogs,
-  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
+  title,
   description,
-  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "" }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const blogCards = blogs.map((blog) => (
-    <div
-      key={blog.id}
-      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
-        cardClassName || ""
-      }`}
-      onClick={blog.onBlogClick}
-    >
-      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
-        <img
-          src={blog.imageSrc}
-          alt={blog.imageAlt || blog.title}
-          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
-            imageClassName || ""
-          }`}
-        />
-        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
-          <ArrowRight className="w-4 h-4 text-foreground" />
-        </button>
-      </div>
-
-      <div className="flex-1 p-6 flex flex-col gap-3">
-        <span className={`text-xs font-semibold text-primary-cta uppercase ${
-          categoryClassName || ""
-        }`}>
-          {blog.category}
-        </span>
-
-        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
-          cardTitleClassName || ""
-        }`}>
-          {blog.title}
-        </h3>
-
-        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
-          excerptClassName || ""
-        }`}>
-          {blog.excerpt}
-        </p>
-
-        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
-          authorContainerClassName || ""
-        }`}>
-          <img
-            src={blog.authorAvatar}
-            alt={blog.authorName}
-            className={`w-8 h-8 rounded-full object-cover ${
-              authorAvatarClassName || ""
-            }`}
-          />
-          <div className="flex-1 min-w-0">
-            <p className={`text-sm font-medium text-foreground truncate ${
-              authorNameClassName || ""
-            }`}>
-              {blog.authorName}
-            </p>
-            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
-              {blog.date}
-            </p>
-          </div>
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const blogItems = blogs.map((blog) => (
+    <div key={blog.id} className="flex flex-col gap-4">
+      <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} className="w-full rounded" />
+      <span className="text-sm font-medium text-primary-cta">{blog.category}</span>
+      <h3 className="text-xl font-semibold">{blog.title}</h3>
+      <p className="text-sm text-foreground/75">{blog.excerpt}</p>
+      <div className="flex items-center gap-2">
+        <img src={blog.authorAvatar} alt={blog.authorName} className="w-8 h-8 rounded-full" />
+        <div>
+          <p className="text-sm font-medium">{blog.authorName}</p>
+          <p className="text-xs text-foreground/60">{blog.date}</p>
         </div>
       </div>
     </div>
   ));
 
   return (
-    <div
-      className={`w-full py-20 ${
-        useInvertedBackground ? "bg-background/50" : ""
-      } ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description || ""}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout || "default"}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
-          {blogCards}
-        </div>
-      </div>
-    </div>
+      {blogItems}
+    </CardStack>
   );
 };
 
-export default BlogCardThree;
+export default BlogCardThree;

src/components/sections/blog/BlogCardTwo.tsx

@@ -1,10 +1,7 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useState } from "react";
-import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
-import TextBox from "@/components/Textbox";
-
-export interface BlogCardTwoProps {
+interface BlogCardTwoProps {
   blogs: Array<{
     id: string;
     category: string;
@@ -17,158 +14,52 @@ export interface BlogCardTwoProps {
     date: string;
     onBlogClick?: () => void;
   }>;
-  carouselMode?: "auto" | "buttons";
-  uniformGridCustomHeightClasses?: string;
-  animationType?: string;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  title: string;
+  description: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
   useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  imageWrapperClassName?: string;
-  imageClassName?: string;
-  categoryClassName?: string;
-  cardTitleClassName?: string;
-  excerptClassName?: string;
-  authorContainerClassName?: string;
-  authorAvatarClassName?: string;
-  authorNameClassName?: string;
-  dateClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  [key: string]: any;
 }
 
 const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
   blogs,
-  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
+  title,
   description,
-  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "" }) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  const blogCards = blogs.map((blog) => (
-    <div
-      key={blog.id}
-      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
-        cardClassName || ""
-      }`}
-      onClick={blog.onBlogClick}
-    >
-      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
-        <img
-          src={blog.imageSrc}
-          alt={blog.imageAlt || blog.title}
-          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
-            imageClassName || ""
-          }`}
-        />
-        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
-          <ArrowRight className="w-4 h-4 text-foreground" />
-        </button>
-      </div>
-
-      <div className="flex-1 p-6 flex flex-col gap-3">
-        <span className={`text-xs font-semibold text-primary-cta uppercase ${
-          categoryClassName || ""
-        }`}>
-          {blog.category}
-        </span>
-
-        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
-          cardTitleClassName || ""
-        }`}>
-          {blog.title}
-        </h3>
-
-        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
-          excerptClassName || ""
-        }`}>
-          {blog.excerpt}
-        </p>
-
-        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
-          authorContainerClassName || ""
-        }`}>
-          <img
-            src={blog.authorAvatar}
-            alt={blog.authorName}
-            className={`w-8 h-8 rounded-full object-cover ${
-              authorAvatarClassName || ""
-            }`}
-          />
-          <div className="flex-1 min-w-0">
-            <p className={`text-sm font-medium text-foreground truncate ${
-              authorNameClassName || ""
-            }`}>
-              {blog.authorName}
-            </p>
-            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
-              {blog.date}
-            </p>
-          </div>
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const blogItems = blogs.map((blog) => (
+    <div key={blog.id} className="flex flex-col gap-4">
+      <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} className="w-full rounded" />
+      <span className="text-sm font-medium text-primary-cta">{blog.category}</span>
+      <h3 className="text-xl font-semibold">{blog.title}</h3>
+      <p className="text-sm text-foreground/75">{blog.excerpt}</p>
+      <div className="flex items-center gap-2">
+        <img src={blog.authorAvatar} alt={blog.authorName} className="w-8 h-8 rounded-full" />
+        <div>
+          <p className="text-sm font-medium">{blog.authorName}</p>
+          <p className="text-xs text-foreground/60">{blog.date}</p>
         </div>
       </div>
     </div>
   ));
 
   return (
-    <div
-      className={`w-full py-20 ${
-        useInvertedBackground ? "bg-background/50" : ""
-      } ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description || ""}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout || "default"}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
-          {blogCards}
-        </div>
-      </div>
-    </div>
+      {blogItems}
+    </CardStack>
   );
 };
 
-export default BlogCardTwo;
+export default BlogCardTwo;

src/components/sections/contact/ContactCenter.tsx

@@ -1,131 +1,57 @@
 "use client";
 
-import ContactForm from "@/components/form/ContactForm";
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
-import { cls } from "@/lib/utils";
-import { LucideIcon } from "lucide-react";
-import { sendContactEmail } from "@/utils/sendContactEmail";
-import type { ButtonAnimationType } from "@/types/button";
-
-type ContactCenterBackgroundProps = 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" }
->;
+import React, { useState } from 'react';
+import Input from '@/components/form/Input';
 
 interface ContactCenterProps {
-    title: string;
-    description: string;
-    tag: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    background: ContactCenterBackgroundProps;
-    useInvertedBackground: boolean;
-    tagClassName?: string;
-    inputPlaceholder?: string;
-    buttonText?: string;
-    termsText?: string;
-    onSubmit?: (email: string) => void;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    contentClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    formWrapperClassName?: string;
-    formClassName?: string;
-    inputClassName?: string;
-    buttonClassName?: string;
-    buttonTextClassName?: string;
-    termsClassName?: string;
+  title: string;
+  description?: string;
+  placeholder?: string;
+  buttonText?: string;
 }
 
-const ContactCenter = ({
-    title,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    background,
-    useInvertedBackground,
-    tagClassName = "",
-    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 = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    formWrapperClassName = "",
-    formClassName = "",
-    inputClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    termsClassName = "",
-}: ContactCenterProps) => {
+export const ContactCenter: React.FC<ContactCenterProps> = ({
+  title,
+  description,
+  placeholder = 'Enter your email',
+  buttonText = 'Submit',
+}) => {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
 
-    const handleSubmit = async (email: string) => {
-        try {
-            await sendContactEmail({ email });
-            console.log("Email send successfully");
-        } catch (error) {
-            console.error("Failed to send email:", error);
-        }
-    };
+  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setEmail('');
+    setTimeout(() => setSubmitted(false), 3000);
+  };
 
-    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("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
-                    <div className="relative z-10 w-full md:w-1/2">
-                        <ContactForm
-                            tag={tag}
-                            tagIcon={tagIcon}
-                            tagAnimation={tagAnimation}
-                            title={title}
-                            description={description}
-                            useInvertedBackground={useInvertedBackground}
-                            inputPlaceholder={inputPlaceholder}
-                            buttonText={buttonText}
-                            termsText={termsText}
-                            onSubmit={handleSubmit}
-                            centered={true}
-                            tagClassName={tagClassName}
-                            titleClassName={titleClassName}
-                            descriptionClassName={descriptionClassName}
-                            formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
-                            formClassName={formClassName}
-                            inputClassName={inputClassName}
-                            buttonClassName={buttonClassName}
-                            buttonTextClassName={buttonTextClassName}
-                            termsClassName={termsClassName}
-                        />
-                    </div>
-                    <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
-                        <HeroBackgrounds {...background} />
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <div className="text-center">
+        <h2 className="text-3xl font-bold">{title}</h2>
+        {description && <p className="text-foreground/70 mt-2">{description}</p>}
+      </div>
+
+      <form onSubmit={handleSubmitForm} className="w-full max-w-md">
+        <Input
+          value={email}
+          onChange={setEmail}
+          type="email"
+          placeholder={placeholder}
+          required
+        />
+        <button
+          type="submit"
+          className="w-full mt-4 bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+        >
+          {buttonText}
+        </button>
+      </form>
+
+      {submitted && (
+        <p className="text-green-600 font-semibold">Thank you for your submission!</p>
+      )}
+    </div>
+  );
 };
-
-ContactCenter.displayName = "ContactCenter";
-
-export default ContactCenter;

src/components/sections/contact/ContactFaq.tsx

@@ -1,188 +1,31 @@
-"use client";
-
-import { useState, Fragment } from "react";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import Accordion from "@/components/Accordion";
-import Button from "@/components/button/Button";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
-import type { CardAnimationType } from "@/components/cardStack/types";
-import type { ButtonConfig } from "@/types/button";
-
-interface FaqItem {
-  id: string;
-  title: string;
-  content: string;
-}
+import React, { useContext } from 'react';
+import { CardStackContext } from '@/components/cardStack/CardStackContext';
 
 interface ContactFaqProps {
-  faqs: FaqItem[];
-  ctaTitle: string;
-  ctaDescription: string;
-  ctaButton: ButtonConfig;
-  ctaIcon: LucideIcon;
-  useInvertedBackground: InvertedBackground;
-  animationType: CardAnimationType;
-  accordionAnimationType?: "smooth" | "instant";
-  showCard?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  ctaPanelClassName?: string;
-  ctaIconClassName?: string;
-  ctaTitleClassName?: string;
-  ctaDescriptionClassName?: string;
-  ctaButtonClassName?: string;
-  ctaButtonTextClassName?: string;
-  faqsPanelClassName?: string;
-  faqsContainerClassName?: string;
-  accordionClassName?: string;
-  accordionTitleClassName?: string;
-  accordionIconContainerClassName?: string;
-  accordionIconClassName?: string;
-  accordionContentClassName?: string;
-  separatorClassName?: string;
+  faqs: Array<{
+    id: string;
+    title: string;
+    content: string;
+  }>;
+  title: string;
+  [key: string]: any;
 }
 
-const ContactFaq = ({
-  faqs,
-  ctaTitle,
-  ctaDescription,
-  ctaButton,
-  ctaIcon: CtaIcon,
-  useInvertedBackground,
-  animationType,
-  accordionAnimationType = "smooth",
-  showCard = true,
-  ariaLabel = "Contact and FAQ section",
-  className = "",
-  containerClassName = "",
-  ctaPanelClassName = "",
-  ctaIconClassName = "",
-  ctaTitleClassName = "",
-  ctaDescriptionClassName = "",
-  ctaButtonClassName = "",
-  ctaButtonTextClassName = "",
-  faqsPanelClassName = "",
-  faqsContainerClassName = "",
-  accordionClassName = "",
-  accordionTitleClassName = "",
-  accordionIconContainerClassName = "",
-  accordionIconClassName = "",
-  accordionContentClassName = "",
-  separatorClassName = "",
-}: ContactFaqProps) => {
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-  const { itemRefs } = useCardAnimation({ animationType, itemCount: 2 });
-
-  const handleToggle = (index: number) => {
-    setActiveIndex(activeIndex === index ? null : index);
-  };
-
-  const getButtonConfigProps = () => {
-    if (theme.defaultButtonVariant === "hover-bubble") {
-      return { bgClassName: "w-full" };
-    }
-    if (theme.defaultButtonVariant === "icon-arrow") {
-      return { className: "justify-between" };
-    }
-    return {};
-  };
+const ContactFaq: React.FC<ContactFaqProps> = ({ faqs, title, ...props }) => {
+  const context = useContext(CardStackContext);
+  const animationProps = context ? context.getAnimationProps() : {};
 
   return (
-    <section
-      aria-label={ariaLabel}
-      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
-    >
-      <div className={cls("w-content-width mx-auto", containerClassName)}>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
-          <div
-            ref={(el) => { itemRefs.current[0] = el; }}
-            className={cls(
-              "md:col-span-4 card rounded-theme-capped p-6 md:p-8 flex flex-col items-center justify-center gap-6 text-center",
-              ctaPanelClassName
-            )}
-          >
-            <div className={cls("h-16 w-auto aspect-square rounded-theme primary-button flex items-center justify-center", ctaIconClassName)}>
-              <CtaIcon className="h-4/10 w-4/10 text-primary-cta-text" strokeWidth={1.5} />
-            </div>
-
-            <div className="flex flex-col" >
-              <h2 className={cls(
-                "text-2xl md:text-3xl font-medium",
-                shouldUseLightText ? "text-background" : "text-foreground",
-                ctaTitleClassName
-              )}>
-                {ctaTitle}
-              </h2>
-
-              <p className={cls(
-                "text-base",
-                shouldUseLightText ? "text-background/70" : "text-foreground/70",
-                ctaDescriptionClassName
-              )}>
-                {ctaDescription}
-              </p>
-            </div>
-
-            <Button
-              {...getButtonProps(
-                { ...ctaButton, props: { ...ctaButton.props, ...getButtonConfigProps() } },
-                0,
-                theme.defaultButtonVariant,
-                cls("w-full", ctaButtonClassName),
-                ctaButtonTextClassName
-              )}
-            />
-          </div>
-
-          <div
-            ref={(el) => { itemRefs.current[1] = el; }}
-            className={cls(
-              "md:col-span-8 flex flex-col gap-4",
-              faqsPanelClassName
-            )}
-          >
-            <div className={cls("flex flex-col gap-4", faqsContainerClassName)}>
-              {faqs.map((faq, index) => (
-                <Fragment key={faq.id}>
-                  <Accordion
-                    index={index}
-                    isActive={activeIndex === index}
-                    onToggle={handleToggle}
-                    title={faq.title}
-                    content={faq.content}
-                    animationType={accordionAnimationType}
-                    showCard={showCard}
-                    useInvertedBackground={useInvertedBackground}
-                    className={accordionClassName}
-                    titleClassName={accordionTitleClassName}
-                    iconContainerClassName={accordionIconContainerClassName}
-                    iconClassName={accordionIconClassName}
-                    contentClassName={accordionContentClassName}
-                  />
-                  {!showCard && index < faqs.length - 1 && (
-                    <div className={cls(
-                      "w-full border-b",
-                      shouldUseLightText ? "border-background/10" : "border-foreground/10",
-                      separatorClassName
-                    )} />
-                  )}
-                </Fragment>
-              ))}
-            </div>
-          </div>
+    <div {...animationProps} {...props}>
+      <h2>{title}</h2>
+      {faqs.map((faq) => (
+        <div key={faq.id}>
+          <h3>{faq.title}</h3>
+          <p>{faq.content}</p>
         </div>
-      </div>
-    </section>
+      ))}
+    </div>
   );
 };
 
-ContactFaq.displayName = "ContactFaq";
-
-export default ContactFaq;
+export default ContactFaq;

src/components/sections/contact/ContactSplit.tsx

@@ -1,171 +1,116 @@
 "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";
-
-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" }
->;
+import React, { useState } from 'react';
+import Input from '@/components/form/Input';
 
 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;
+  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;
+  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;
 }
 
-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.FC<ContactSplitProps> = ({
+  tag,
+  title,
+  description,
+  tagIcon: TagIcon,
+  useInvertedBackground,
+  imageSrc,
+  videoSrc,
+  imageAlt,
+  inputPlaceholder = 'Enter your email',
+  buttonText = 'Sign Up',
+  termsText = 'By clicking Sign Up you are agreeing to our terms and conditions.',
+}) => {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
 
-    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<HTMLFormElement>) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setEmail('');
+    setTimeout(() => setSubmitted(false), 3000);
+  };
 
-    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} />
+  return (
+    <section className={`w-full py-20 px-4 ${useInvertedBackground ? 'bg-background-accent' : ''}`}>
+      <div className="max-w-6xl mx-auto">
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          {/* Text Content */}
+          <div className="space-y-6">
+            {TagIcon && (
+              <div className="flex items-center gap-2 w-fit">
+                <TagIcon className="w-4 h-4" />
+                <span className="text-sm font-semibold text-primary-cta">{tag}</span>
+              </div>
+            )}
+            <h2 className="text-4xl font-bold">{title}</h2>
+            <p className="text-lg text-foreground/70">{description}</p>
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <Input
+                value={email}
+                onChange={setEmail}
+                type="email"
+                placeholder={inputPlaceholder}
+                required
+              />
+              <button
+                type="submit"
+                className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+              >
+                {buttonText}
+              </button>
+            </form>
+
+            {submitted && (
+              <p className="text-green-600 font-semibold">Thank you for signing up!</p>
+            )}
+
+            <p className="text-sm text-foreground/60">{termsText}</p>
+          </div>
+
+          {/* Media */}
+          {(imageSrc || videoSrc) && (
+            <div className="rounded-lg overflow-hidden">
+              {imageSrc && <img src={imageSrc} alt={imageAlt || 'Contact section'} className="w-full h-auto" />}
+              {videoSrc && <video src={videoSrc} className="w-full h-auto" autoPlay loop muted />}
             </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>
-            </div>
-        </section>
-    );
+      </div>
+    </section>
+  );
 };
 
-ContactSplit.displayName = "ContactSplit";
-
 export default ContactSplit;

src/components/sections/contact/ContactSplitForm.tsx

@@ -1,214 +1,59 @@
 "use client";
 
-import { useState } from "react";
-import TextAnimation from "@/components/text/TextAnimation";
-import Button from "@/components/button/Button";
-import Input from "@/components/form/Input";
-import Textarea from "@/components/form/Textarea";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import { getButtonProps } from "@/lib/buttonUtils";
-import type { AnimationType } from "@/components/text/types";
-import type { ButtonAnimationType } from "@/types/button";
-import {sendContactEmail} from "@/utils/sendContactEmail";
-
-export interface InputField {
-    name: string;
-    type: string;
-    placeholder: string;
-    required?: boolean;
-    className?: string;
-}
-
-export interface TextareaField {
-    name: string;
-    placeholder: string;
-    rows?: number;
-    required?: boolean;
-    className?: string;
-}
+import React, { useState } from 'react';
+import Input from '@/components/form/Input';
 
 interface ContactSplitFormProps {
-    title: string;
-    description: string;
-    inputs: InputField[];
-    textarea?: TextareaField;
-    useInvertedBackground: boolean;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    mediaPosition?: "left" | "right";
-    mediaAnimation: ButtonAnimationType;
-    buttonText?: string;
-    onSubmit?: (data: Record<string, string>) => void;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    contentClassName?: string;
-    formCardClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    buttonClassName?: string;
-    buttonTextClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
+  title: string;
+  description?: string;
+  placeholder?: string;
+  buttonText?: string;
 }
 
-const ContactSplitForm = ({
-    title,
-    description,
-    inputs,
-    textarea,
-    useInvertedBackground,
-    imageSrc,
-    videoSrc,
-    imageAlt = "",
-    videoAriaLabel = "Contact section video",
-    mediaPosition = "right",
-    mediaAnimation,
-    buttonText = "Submit",
-    onSubmit,
-    ariaLabel = "Contact section",
-    className = "",
-    containerClassName = "",
-    contentClassName = "",
-    formCardClassName = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-}: ContactSplitFormProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
+  title,
+  description,
+  placeholder = 'Enter your email',
+  buttonText = 'Submit',
+}) => {
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
 
-    // Validate minimum inputs requirement
-    if (inputs.length < 2) {
-        throw new Error("ContactSplitForm requires at least 2 inputs");
-    }
+  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setSubmitted(true);
+    setEmail('');
+    setTimeout(() => setSubmitted(false), 3000);
+  };
 
-    // Initialize form data dynamically
-    const initialFormData: Record<string, string> = {};
-    inputs.forEach(input => {
-        initialFormData[input.name] = "";
-    });
-    if (textarea) {
-        initialFormData[textarea.name] = "";
-    }
+  return (
+    <div className="w-full max-w-2xl mx-auto">
+      <div className="text-center mb-8">
+        <h2 className="text-3xl font-bold">{title}</h2>
+        {description && <p className="text-foreground/70 mt-2">{description}</p>}
+      </div>
 
-    const [formData, setFormData] = useState(initialFormData);
+      <form onSubmit={handleSubmitForm} className="space-y-4">
+        <Input
+          value={email}
+          onChange={setEmail}
+          type="email"
+          placeholder={placeholder}
+          required
+        />
+        <button
+          type="submit"
+          className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+        >
+          {buttonText}
+        </button>
+      </form>
 
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        try {
-            await sendContactEmail({ formData });
-            console.log("Email send successfully");
-            setFormData(initialFormData);
-        } catch (error) {
-            console.error("Failed to send email:", error);
-        }
-    };
-
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
-
-    const formContent = (
-        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
-            <form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
-                <div className="w-full flex flex-col gap-0 text-center">
-                    <TextAnimation
-                        type={theme.defaultTextAnimation as AnimationType}
-                        text={title}
-                        variant="trigger"
-                        className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
-                    />
-
-                    <TextAnimation
-                        type={theme.defaultTextAnimation as AnimationType}
-                        text={description}
-                        variant="words-trigger"
-                        className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
-                    />
-                </div>
-
-                <div className="w-full flex flex-col gap-4">
-                    {inputs.map((input) => (
-                        <Input
-                            key={input.name}
-                            type={input.type}
-                            placeholder={input.placeholder}
-                            value={formData[input.name] || ""}
-                            onChange={(value) => setFormData({ ...formData, [input.name]: value })}
-                            required={input.required}
-                            ariaLabel={input.placeholder}
-                            className={input.className}
-                        />
-                    ))}
-
-                    {textarea && (
-                        <Textarea
-                            placeholder={textarea.placeholder}
-                            value={formData[textarea.name] || ""}
-                            onChange={(value) => setFormData({ ...formData, [textarea.name]: value })}
-                            required={textarea.required}
-                            rows={textarea.rows || 5}
-                            ariaLabel={textarea.placeholder}
-                            className={textarea.className}
-                        />
-                    )}
-
-                    <Button
-                        {...getButtonProps(
-                            { text: buttonText, props: getButtonConfigProps() },
-                            0,
-                            theme.defaultButtonVariant,
-                            cls("w-full", buttonClassName),
-                            cls("text-base", buttonTextClassName)
-                        )}
-                        type="submit"
-                    />
-                </div>
-            </form>
-        </div>
-    );
-
-    const mediaContent = (
-        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
-            <MediaContent
-                imageSrc={imageSrc}
-                videoSrc={videoSrc}
-                imageAlt={imageAlt}
-                videoAriaLabel={videoAriaLabel}
-                imageClassName={cls("w-full md:absolute md:inset-0 md: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", containerClassName)}>
-                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
-                    {mediaPosition === "left" && mediaContent}
-                    {formContent}
-                    {mediaPosition === "right" && mediaContent}
-                </div>
-            </div>
-        </section>
-    );
+      {submitted && (
+        <p className="text-center text-green-600 font-semibold mt-4">Thank you for your submission!</p>
+      )}
+    </div>
+  );
 };
 
-ContactSplitForm.displayName = "ContactSplitForm";
-
 export default ContactSplitForm;

src/components/sections/feature/FeatureBento.tsx

@@ -1,141 +1,46 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { BentoAnimationType } from "@/types/animations";
-
-export interface FeatureBentoProps {
-  features?: Array<{
+interface FeatureBentoProps {
+  features: Array<{
     id: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+    imageSrc?: string;
   }>;
-  carouselMode?: "auto" | "buttons";
-  gridVariant?: string;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: BentoAnimationType;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  title: string;
+  description: string;
+  animationType?: string;
+  [key: string]: any;
 }
 
 const FeatureBento: React.FC<FeatureBentoProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
+  features,
+  title,
+  description,
+  animationType = 'slide-up',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      {feature.imageSrc && (
+        <img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
+      )}
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="bento-grid"
+      animationType={animationType}
+      title={title}
+      description={description}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
-    </div>
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/FeatureCardMedia.tsx

@@ -1,140 +1,54 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { CardAnimationType } from "@/types/animations";
-
-export interface FeatureCardMediaProps {
-  features?: Array<{
+interface FeatureCardMediaProps {
+  features: Array<{
     id: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+    tag: string;
+    imageSrc?: string;
   }>;
-  gridVariant?: string;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationType;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  title: string;
+  description: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
   useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  buttonTextClassName?: string;
+  [key: string]: any;
 }
 
 const FeatureCardMedia: React.FC<FeatureCardMediaProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  buttonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
+  features,
+  title,
+  description,
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      {feature.imageSrc && (
+        <img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
+      )}
+      <span className="text-sm font-medium text-primary-cta">{feature.tag}</span>
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={buttonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
-    </div>
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,141 +1,44 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { CardAnimationTypeWith3D } from "@/types/animations";
-import type { GridVariant } from "@/types/grid";
-
-export interface FeatureCardOneProps {
-  features?: Array<{
+interface FeatureCardOneProps {
+  features: Array<{
     id: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
   }>;
-  gridVariant?: GridVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationTypeWith3D;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  [key: string]: any;
 }
 
 const FeatureCardOne: React.FC<FeatureCardOneProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
+  features,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
-    </div>
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/FeatureCardSeven.tsx

@@ -1,94 +1,179 @@
 "use client";
 
-import React, { useMemo } from "react";
-import CardList from "@/components/card/CardList";
-import TextBox from "@/components/Textbox";
-import type { ButtonAnimationType } from "@/types/animations";
+import CardList from "@/components/cardStack/CardList";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
 
-export interface FeatureCardSevenProps {
-  features?: Array<{
-    id: string;
+type FeatureCard = {
+    id: number;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-  }>;
-  animationType?: ButtonAnimationType;
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  listClassName?: string;
-  itemClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-}
-
-const FeatureCardSeven: React.FC<FeatureCardSevenProps> = ({
-  features = [],
-  animationType = "slide-up",  textboxLayout = "default",  description = "",  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  textBoxTitleClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  listClassName = "",  itemClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const listItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div key={feature.id} className={`flex gap-4 p-4 rounded-lg bg-card/50 ${itemClassName}`}>
-          {feature.icon && (
-            <div className={`flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-lg ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <div className="flex-1 min-w-0">
-            <h3 className={`text-sm font-semibold text-foreground ${cardTitleClassName}`}>
-              {feature.title}
-            </h3>
-            <p className={`text-xs text-foreground/70 ${cardDescriptionClassName}`}>
-              {feature.description}
-            </p>
-          </div>
-        </div>
-      )),
-    [features, itemClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName]
-  );
-
-  return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
-    >
-      <div className="max-w-content-width mx-auto px-4">
-        <CardList
-          animationType={animationType}
-          ariaLabel={ariaLabel}
-          className={className}
-          listClassName={listClassName}
-        >
-          {listItems.map((item) => item)}
-        </CardList>
-      </div>
-    </div>
-  );
+    buttons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
 };
 
+interface FeatureCardSevenProps {
+    features: FeatureCard[];
+    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;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    stepNumberClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    imageContainerClassName?: string;
+    imageClassName?: string;
+    cardButtonClassName?: string;
+    cardButtonTextClassName?: string;
+}
+
+const FeatureCardSeven = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Feature section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    stepNumberClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    imageContainerClassName = "",
+    imageClassName = "",
+    cardButtonClassName = "",
+    cardButtonTextClassName = "",
+}: FeatureCardSevenProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature, index) => (
+                <div
+                    key={feature.id}
+                    className={cls("relative z-1 w-full min-h-0 h-full flex flex-col justify-between items-center p-6 gap-6 md:p-15 md:gap-15", index % 2 === 0 ? "md:flex-row" : "md:flex-row-reverse", cardContentClassName)}
+                >
+                    <div className="w-full md:w-1/2 min-w-0 h-fit md:h-full flex flex-col justify-center">
+                        <div className="w-full min-w-0 flex flex-col gap-3 md:gap-5">
+                            <div
+                                className={cls(
+                                    "h-8 w-[var(--height-8)] primary-button text-primary-cta-text rounded-theme flex items-center justify-center",
+                                    stepNumberClassName
+                                )}
+                            >
+                                <p className="text-sm truncate">
+                                    {feature.id}
+                                </p>
+                            </div>
+                            <h2 className={cls("mt-1 text-4xl md:text-5xl font-medium leading-[1.15] text-balance", shouldUseLightText && "text-background", cardTitleClassName)}>
+                                {feature.title}
+                            </h2>
+                            <p className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+                                {feature.description}
+                            </p>
+                            {feature.buttons && feature.buttons.length > 0 && (
+                                <div className="flex flex-wrap gap-3 max-md:justify-center">
+                                    {feature.buttons.slice(0, 2).map((button, index) => (
+                                        <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                    <div
+                        className={cls(
+                            "relative w-full md:w-1/2 aspect-square overflow-hidden rounded-theme-capped",
+                            imageContainerClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={feature.imageSrc}
+                            videoSrc={feature.videoSrc}
+                            imageAlt={feature.imageAlt || feature.title}
+                            videoAriaLabel={feature.videoAriaLabel || feature.title}
+                            imageClassName={cls("w-full h-full object-cover", imageClassName)}
+                        />
+                    </div>
+                </div>
+            ))}
+        </CardList>
+    );
+};
+
+FeatureCardSeven.displayName = "FeatureCardSeven";
+
 export default FeatureCardSeven;

src/components/sections/feature/FeatureCardSixteen.tsx

@@ -1,167 +1,31 @@
-"use client";
-
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-import { Check, X } from "lucide-react";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type ComparisonItem = {
-    items: string[];
-};
+import React, { useContext } from 'react';
+import { CardStackContext } from '@/components/cardStack/CardStackContext';
 
 interface FeatureCardSixteenProps {
-    negativeCard: ComparisonItem;
-    positiveCard: ComparisonItem;
-    animationType: CardAnimationTypeWith3D;
+  features: Array<{
+    id: string;
     title: string;
-    titleSegments?: TitleSegment[];
     description: string;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    textBoxTitleClassName?: string;
-    titleImageWrapperClassName?: string;
-    titleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    gridClassName?: string;
-    cardClassName?: string;
-    itemsListClassName?: string;
-    itemClassName?: string;
-    itemIconClassName?: string;
-    itemTextClassName?: string;
+  }>;
+  title: string;
+  [key: string]: any;
 }
 
-const FeatureCardSixteen = ({
-    negativeCard,
-    positiveCard,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    textboxLayout,
-    useInvertedBackground,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    ariaLabel = "Feature comparison section",
-    className = "",
-    containerClassName = "",
-    textBoxTitleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    gridClassName = "",
-    cardClassName = "",
-    itemsListClassName = "",
-    itemClassName = "",
-    itemIconClassName = "",
-    itemTextClassName = "",
-}: FeatureCardSixteenProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-    const { itemRefs, containerRef, perspectiveRef } = useCardAnimation({
-        animationType,
-        itemCount: 2,
-        isGrid: true,
-        supports3DAnimation: true,
-        gridVariant: "uniform-all-items-equal"
-    });
+const FeatureCardSixteen: React.FC<FeatureCardSixteenProps> = ({ features, title, ...props }) => {
+  const context = useContext(CardStackContext);
+  const animationProps = context ? context.getAnimationProps() : {};
 
-    const cards = [
-        { ...negativeCard, variant: "negative" as const },
-        { ...positiveCard, variant: "positive" as const },
-    ];
-
-    return (
-        <section
-            ref={containerRef}
-            aria-label={ariaLabel}
-            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
-        >
-            <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
-                <CardStackTextBox
-                    title={title}
-                    titleSegments={titleSegments}
-                    description={description}
-                    tag={tag}
-                    tagIcon={tagIcon}
-                    tagAnimation={tagAnimation}
-                    buttons={buttons}
-                    buttonAnimation={buttonAnimation}
-                    textboxLayout={textboxLayout}
-                    useInvertedBackground={useInvertedBackground}
-                    textBoxClassName={textBoxClassName}
-                    titleClassName={textBoxTitleClassName}
-                    titleImageWrapperClassName={titleImageWrapperClassName}
-                    titleImageClassName={titleImageClassName}
-                    descriptionClassName={textBoxDescriptionClassName}
-                    tagClassName={textBoxTagClassName}
-                    buttonContainerClassName={textBoxButtonContainerClassName}
-                    buttonClassName={textBoxButtonClassName}
-                    buttonTextClassName={textBoxButtonTextClassName}
-                />
-
-                <div
-                    ref={perspectiveRef}
-                    className={cls(
-                        "relative mx-auto w-full md:w-60 grid grid-cols-1 gap-6",
-                        cards.length >= 2 ? "md:grid-cols-2" : "md:grid-cols-1",
-                        gridClassName
-                    )}
-                >
-                    {cards.map((card, index) => (
-                        <div
-                            key={card.variant}
-                            ref={(el) => { itemRefs.current[index] = el; }}
-                            className={cls(
-                                "relative h-full card rounded-theme-capped p-6",
-                                cardClassName
-                            )}
-                        >
-                            <div className={cls("flex flex-col gap-6", card.variant === "negative" && "opacity-50")}>
-                                <PricingFeatureList
-                                    features={card.items}
-                                    icon={card.variant === "positive" ? Check : X}
-                                    shouldUseLightText={shouldUseLightText}
-                                    className={itemsListClassName}
-                                    featureItemClassName={itemClassName}
-                                    featureIconWrapperClassName=""
-                                    featureIconClassName={itemIconClassName}
-                                    featureTextClassName={cls("truncate", itemTextClassName)}
-                                />
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
+  return (
+    <div {...animationProps} {...props}>
+      <h2>{title}</h2>
+      {features.map((feature) => (
+        <div key={feature.id}>
+          <h3>{feature.title}</h3>
+          <p>{feature.description}</p>
+        </div>
+      ))}
+    </div>
+  );
 };
 
-FeatureCardSixteen.displayName = "FeatureCardSixteen";
-
 export default FeatureCardSixteen;

src/components/sections/feature/FeatureCardTwelve.tsx

@@ -1,93 +1,182 @@
 "use client";
 
-import React, { useMemo } from "react";
-import CardList from "@/components/card/CardList";
-import type { ButtonAnimationType } from "@/types/animations";
+import { Fragment } from "react";
+import CardList from "@/components/cardStack/CardList";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
 
-export interface FeatureCardTwelveProps {
-  features?: Array<{
-    id: string;
-    title: string;
-    description: string;
-    icon?: React.ReactNode;
-  }>;
-  animationType?: ButtonAnimationType;
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  description?: string;
+interface FeatureCard {
+  id: string;
+  label: string;
+  title: string;
+  items: string[];
+  buttons?: ButtonConfig[];
+}
+
+interface FeatureCardTwelveProps {
+  features: FeatureCard[];
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
   tag?: string;
   tagIcon?: LucideIcon;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  useInvertedBackground?: boolean;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
   ariaLabel?: string;
   className?: string;
   containerClassName?: string;
   cardClassName?: string;
   textBoxTitleClassName?: string;
   textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  listClassName?: string;
-  itemClassName?: string;
   textBoxClassName?: string;
   textBoxTagClassName?: string;
   textBoxButtonContainerClassName?: string;
   textBoxButtonClassName?: string;
   textBoxButtonTextClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  cardContentClassName?: string;
+  labelClassName?: string;
+  cardTitleClassName?: string;
+  itemsContainerClassName?: string;
+  itemTextClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
 }
 
-const FeatureCardTwelve: React.FC<FeatureCardTwelveProps> = ({
-  features = [],
-  animationType = "slide-up",  textboxLayout = "default",  description = "",  tag,
+const FeatureCardTwelve = ({
+  features,
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
   tagIcon,
   tagAnimation,
   buttons,
   buttonAnimation,
-  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  textBoxTitleClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  listClassName = "",  itemClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const listItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div key={feature.id} className={`flex gap-4 p-4 rounded-lg bg-card/50 ${itemClassName}`}>
-          {feature.icon && (
-            <div className={`flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-lg ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <div className="flex-1 min-w-0">
-            <h3 className={`text-sm font-semibold text-foreground ${cardTitleClassName}`}>
-              {feature.title}
-            </h3>
-            <p className={`text-xs text-foreground/70 ${cardDescriptionClassName}`}>
-              {feature.description}
-            </p>
-          </div>
-        </div>
-      )),
-    [features, itemClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName]
-  );
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxDescriptionClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  cardContentClassName = "",
+  labelClassName = "",
+  cardTitleClassName = "",
+  itemsContainerClassName = "",
+  itemTextClassName = "",
+  cardButtonClassName = "",
+  cardButtonTextClassName = "",
+}: FeatureCardTwelveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardList
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      animationType={animationType}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      cardClassName={cardClassName}
+      titleClassName={textBoxTitleClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      textBoxClassName={textBoxClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      titleImageWrapperClassName={titleImageWrapperClassName}
+      titleImageClassName={titleImageClassName}
+      ariaLabel={ariaLabel}
     >
-      <div className="max-w-content-width mx-auto px-4">
-        <CardList
-          animationType={animationType}
-          ariaLabel={ariaLabel}
-          className={className}
-          listClassName={listClassName}
+      {features.map((feature) => (
+        <div
+          key={feature.id}
+          className={cls(
+            "relative z-1 w-full min-h-0 h-full flex flex-col md:flex-row gap-6 p-6 md:p-15",
+            cardContentClassName
+          )}
         >
-          {listItems.map((item) => item)}
-        </CardList>
-      </div>
-    </div>
+          <div className="relative z-1 w-full md:w-1/2 flex md:justify-start">
+            <h2 className={cls(
+              "text-5xl md:text-6xl font-medium leading-[1.1]",
+              shouldUseLightText && "text-background",
+              labelClassName
+            )}>
+              {feature.label}
+            </h2>
+          </div>
+
+          <div className="relative z-1 w-full h-px bg-foreground/20 md:hidden" />
+
+          <div className="relative z-1 w-full md:w-1/2 flex flex-col gap-4">
+            <h3 className={cls(
+              "text-xl md:text-3xl font-medium leading-tight",
+              shouldUseLightText ? "text-background" : "text-foreground",
+              cardTitleClassName
+            )}>
+              {feature.title}
+            </h3>
+
+            <div className={cls("flex flex-wrap items-center gap-2", itemsContainerClassName)}>
+              {feature.items.map((item, index) => (
+                <Fragment key={index}>
+                  <span className={cls(
+                    "text-base",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    itemTextClassName
+                  )}>
+                    {item}
+                  </span>
+                  {index < feature.items.length - 1 && (
+                    <span className="text-base text-accent">•</span>
+                  )}
+                </Fragment>
+              ))}
+            </div>
+
+            {feature.buttons && feature.buttons.length > 0 && (
+              <div className="mt-3 flex flex-wrap gap-4 max-md:justify-center">
+                {feature.buttons.slice(0, 2).map((button, index) => (
+                  <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </CardList>
   );
 };
 
-export default FeatureCardTwelve;
+FeatureCardTwelve.displayName = "FeatureCardTwelve";
+
+export default FeatureCardTwelve;

src/components/sections/feature/FeatureCardTwentyFive.tsx

@@ -1,140 +1,57 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { CardAnimationTypeWith3D } from "@/types/animations";
-
-export interface FeatureCardTwentyFiveProps {
-  features?: Array<{
-    id: string;
+interface FeatureCardTwentyFiveProps {
+  features: Array<{
+    id?: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+    icon?: any;
+    mediaItems?: Array<{ imageSrc: string; imageAlt?: string }>;
   }>;
-  gridVariant?: string;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationTypeWith3D;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  title: string;
+  description: string;
+  animationType?: string;
+  textboxLayout?: string;
   useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  [key: string]: any;
 }
 
 const FeatureCardTwentyFive: React.FC<FeatureCardTwentyFiveProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
-
-  return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
-    >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
+  features,
+  title,
+  description,
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const featureItems = features.map((feature, index) => (
+    <div key={feature.id || index} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+      {feature.mediaItems && feature.mediaItems.length > 0 && (
+        <div className="flex gap-2">
+          {feature.mediaItems.map((media, idx) => (
+            <img key={idx} src={media.imageSrc} alt={media.imageAlt || ''} className="w-24 h-24 rounded" />
+          ))}
         </div>
       )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
     </div>
+  ));
+
+  return (
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/FeatureCardTwentyFour.tsx

@@ -1,93 +1,199 @@
 "use client";
 
-import React, { useMemo } from "react";
-import CardList from "@/components/card/CardList";
-import type { ButtonAnimationType } from "@/types/animations";
+import CardList from "@/components/cardStack/CardList";
+import Tag from "@/components/shared/Tag";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
 import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
 
-export interface FeatureCardTwentyFourProps {
-  features?: Array<{
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type FeatureItem = MediaProps & {
     id: string;
     title: string;
+    author: string;
     description: string;
-    icon?: React.ReactNode;
-  }>;
-  animationType?: ButtonAnimationType;
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  description?: string;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  listClassName?: string;
-  itemClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-}
-
-const FeatureCardTwentyFour: React.FC<FeatureCardTwentyFourProps> = ({
-  features = [],
-  animationType = "slide-up",  textboxLayout = "default",  description = "",  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  textBoxTitleClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  listClassName = "",  itemClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const listItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div key={feature.id} className={`flex gap-4 p-4 rounded-lg bg-card/50 ${itemClassName}`}>
-          {feature.icon && (
-            <div className={`flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-lg ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <div className="flex-1 min-w-0">
-            <h3 className={`text-sm font-semibold text-foreground ${cardTitleClassName}`}>
-              {feature.title}
-            </h3>
-            <p className={`text-xs text-foreground/70 ${cardDescriptionClassName}`}>
-              {feature.description}
-            </p>
-          </div>
-        </div>
-      )),
-    [features, itemClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName]
-  );
-
-  return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
-    >
-      <div className="max-w-content-width mx-auto px-4">
-        <CardList
-          animationType={animationType}
-          ariaLabel={ariaLabel}
-          className={className}
-          listClassName={listClassName}
-        >
-          {listItems.map((item) => item)}
-        </CardList>
-      </div>
-    </div>
-  );
+    tags: string[];
+    onFeatureClick?: () => void;
 };
 
-export default FeatureCardTwentyFour;
+interface FeatureCardTwentyFourProps {
+    features: FeatureItem[];
+    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;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    cardContentClassName?: string;
+    cardTitleClassName?: string;
+    authorClassName?: string;
+    cardDescriptionClassName?: string;
+    tagsContainerClassName?: string;
+    tagClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const FeatureCardTwentyFour = ({
+    features,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Features section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    cardContentClassName = "",
+    cardTitleClassName = "",
+    authorClassName = "",
+    cardDescriptionClassName = "",
+    tagsContainerClassName = "",
+    tagClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: FeatureCardTwentyFourProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardList
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            animationType={animationType}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            cardClassName={cardClassName}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            textBoxClassName={textBoxClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        >
+            {features.map((feature) => (
+                <article
+                    key={feature.id}
+                    className={cls(
+                        "relative z-1 w-full min-h-0 h-full flex flex-col md:grid md:grid-cols-10 gap-6 md:gap-10 cursor-pointer group p-6 md:p-10",
+                        cardContentClassName
+                    )}
+                    onClick={feature.onFeatureClick}
+                    role="article"
+                    aria-label={feature.title}
+                >
+                    <div className="relative z-1 w-full md:col-span-6 flex flex-col gap-3 md:gap-12">
+                        <h3 className={cls(
+                            "text-3xl md:text-5xl text-balance font-medium leading-tight line-clamp-3",
+                            shouldUseLightText ? "text-background" : "text-foreground",
+                            cardTitleClassName
+                        )}>
+                            {feature.title}{" "}
+                            <span className={cls(
+                                shouldUseLightText ? "text-background/50" : "text-foreground/50",
+                                authorClassName
+                            )}>
+                                by {feature.author}
+                            </span>
+                        </h3>
+
+                        <div className="mt-auto flex flex-col gap-4">
+                            <div className={cls("flex flex-wrap gap-2", tagsContainerClassName)}>
+                                {feature.tags.map((tagText, index) => (
+                                    <Tag key={index} text={tagText} useInvertedBackground={useInvertedBackground} className={tagClassName} />
+                                ))}
+                            </div>
+
+                            <p className={cls(
+                                "text-base md:text-2xl text-balance leading-tight line-clamp-2",
+                                shouldUseLightText ? "text-background" : "text-foreground",
+                                cardDescriptionClassName
+                            )}>
+                                {feature.description}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className={cls(
+                        "relative z-1 w-full md:col-span-4 aspect-square md:aspect-auto overflow-hidden rounded-theme-capped",
+                        mediaWrapperClassName
+                    )}>
+                        <MediaContent
+                            imageSrc={feature.imageSrc}
+                            videoSrc={feature.videoSrc}
+                            imageAlt={feature.imageAlt}
+                            videoAriaLabel={feature.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+                </article>
+            ))}
+        </CardList>
+    );
+};
+
+FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour";
+
+export default FeatureCardTwentyFour;

src/components/sections/feature/FeatureCardTwentySeven.tsx

@@ -1,141 +1,44 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { CardAnimationType } from "@/types/animations";
-import type { GridVariant } from "@/types/grid";
-
-export interface FeatureCardTwentySevenProps {
-  features?: Array<{
+interface FeatureCardTwentySevenProps {
+  features: Array<{
     id: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
   }>;
-  gridVariant?: GridVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationType;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  [key: string]: any;
 }
 
 const FeatureCardTwentySeven: React.FC<FeatureCardTwentySevenProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
+  features,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
-    </div>
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/FeatureCardTwentyThree.tsx

@@ -1,140 +1,52 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { CardAnimationType } from "@/types/animations";
-
-export interface FeatureCardTwentyThreeProps {
-  features?: Array<{
+interface FeatureCardTwentyThreeProps {
+  features: Array<{
     id: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+    imageSrc?: string;
   }>;
-  gridVariant?: string;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationType;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
+  title: string;
+  description: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
   useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  buttonTextClassName?: string;
+  [key: string]: any;
 }
 
 const FeatureCardTwentyThree: React.FC<FeatureCardTwentyThreeProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  buttonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
+  features,
+  title,
+  description,
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      {feature.imageSrc && (
+        <img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
+      )}
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={buttonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
-    </div>
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/featureBorderGlow/FeatureBorderGlow.tsx

@@ -1,140 +1,45 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import React, { useMemo } from "react";
-import CardStack from "@/components/card/CardStack";
-import TextBox from "@/components/Textbox";
-import type { CardAnimationType } from "@/types/animations";
-
-export interface FeatureBorderGlowProps {
-  features?: Array<{
+interface FeatureBorderGlowProps {
+  features: Array<{
     id: string;
     title: string;
     description: string;
-    icon?: React.ReactNode;
-    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
   }>;
-  gridVariant?: string;
-  uniformGridCustomHeightClasses?: string;
-  animationType?: CardAnimationType;
-  title?: string;
-  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description?: string;
-  tag?: string;
-  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  useInvertedBackground?: boolean;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  cardClassName?: string;
-  mediaClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  cardIconClassName?: string;
-  cardIconWrapperClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
+  title: string;
+  description: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+  [key: string]: any;
 }
 
 const FeatureBorderGlow: React.FC<FeatureBorderGlowProps> = ({
-  features = [],
-  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  titleSegments,
-  description = "",  tag,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout = "default",  useInvertedBackground = false,
-  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  const cardItems = useMemo(
-    () =>
-      features.map((feature) => (
-        <div
-          key={feature.id}
-          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-        >
-          {feature.icon && (
-            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            </div>
-          )}
-          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-            {feature.title}
-          </h3>
-          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-            {feature.description}
-          </p>
-          {feature.mediaItems && (
-            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-              {feature.mediaItems.map((media, idx) => (
-                <img
-                  key={idx}
-                  src={media.src}
-                  alt={media.alt || "Feature media"}
-                  className="w-full h-20 object-cover rounded-lg"
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )),
-    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
-  );
+  features,
+  title,
+  description,
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div
-      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      aria-label={ariaLabel}
+    <CardStack
+      gridVariant="uniform-all-items-equal"
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      {...props}
     >
-      {title && (
-        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          <TextBox
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            titleClassName={textBoxTitleClassName}
-            descriptionClassName={textBoxDescriptionClassName}
-            tagClassName={textBoxTagClassName}
-            buttonContainerClassName={textBoxButtonContainerClassName}
-            buttonClassName={textBoxButtonClassName}
-            buttonTextClassName={textBoxButtonTextClassName}
-          />
-        </div>
-      )}
-
-      <div className="max-w-content-width mx-auto px-4">
-        <CardStack
-          gridVariant={gridVariant}
-          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-          animationType={animationType}
-          carouselMode="buttons"
-          ariaLabel={ariaLabel}
-          className={className}
-          gridClassName={gridClassName}
-          carouselClassName={carouselClassName}
-          controlsClassName={controlsClassName}
-        >
-          {cardItems.map((item) => item)}
-        </CardStack>
-      </div>
-    </div>
+      {featureItems}
+    </CardStack>
   );
 };
 

src/components/sections/feature/featureCardThree/FeatureCardThree.tsx

@@ -1,182 +1,45 @@
-"use client";
-
-import "./FeatureCardThree.css";
-import { useRef, useCallback, useState } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import FeatureCardThreeItem from "./FeatureCardThreeItem";
-import { useDynamicDimensions } from "./useDynamicDimensions";
-import { useClickOutside } from "@/hooks/useClickOutside";
-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";
-
-type FeatureCard = {
-  id: string;
-  title: string;
-  description: string;
-  imageSrc: string;
-  imageAlt?: string;
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface FeatureCardThreeProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: GridVariant;
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
+  features: Array<{
+    id: string;
+    title: string;
+    description: string;
+  }>;
   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;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-  itemContentClassName?: string;
+  gridVariant?: string;
+  animationType?: string;
+  [key: string]: any;
 }
 
-const FeatureCardThree = ({
+const FeatureCardThree: React.FC<FeatureCardThreeProps> = ({
   features,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses,
-  animationType,
   title,
-  titleSegments,
   description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-  itemContentClassName = "",
-}: FeatureCardThreeProps) => {
-  const featureCardThreeRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [activeIndex, setActiveIndex] = useState<number | null>(null);
-
-
-  const setRef = useCallback(
-    (index: number) => (el: HTMLDivElement | null) => {
-      if (featureCardThreeRefs.current) {
-        featureCardThreeRefs.current[index] = el;
-      }
-    },
-    []
-  );
-
-  // Check if device supports hover (desktop) or not (mobile/touch)
-  const isTouchDevice = typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
-
-  // Handle click outside to deactivate on mobile
-  useClickOutside(
-    containerRef,
-    () => setActiveIndex(null),
-    activeIndex !== null && isTouchDevice
-  );
-
-  const handleItemClick = useCallback((index: number) => {
-    if (typeof window !== "undefined" && !window.matchMedia("(hover: none)").matches) return;
-    setActiveIndex((prev) => (prev === index ? null : index));
-  }, []);
-
-  useDynamicDimensions([featureCardThreeRefs], {
-    titleSelector: ".feature-card-three-title-row .feature-card-three-title",
-    descriptionSelector: ".feature-card-three-description-wrapper .feature-card-three-description",
-  });
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
-    <div ref={containerRef}>
-      <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}
-      >
-        {features.map((feature, index) => (
-          <FeatureCardThreeItem
-            key={`${feature.id}-${index}`}
-            ref={setRef(index)}
-            item={feature}
-            isActive={activeIndex === index}
-            onItemClick={() => handleItemClick(index)}
-            className={cardClassName}
-            itemContentClassName={itemContentClassName}
-            itemTitleClassName={cardTitleClassName}
-            itemDescriptionClassName={cardDescriptionClassName}
-          />
-        ))}
-      </CardStack>
-    </div>
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      {...props}
+    >
+      {featureItems}
+    </CardStack>
   );
 };
 
-FeatureCardThree.displayName = "FeatureCardThree";
-
-export default FeatureCardThree;
+export default FeatureCardThree;

src/components/sections/feature/featureHoverPattern/FeatureHoverPattern.tsx

@@ -1,165 +1,46 @@
-"use client";
-
-import CardStack from "@/components/cardStack/CardStack";
-import FeatureHoverPatternItem from "./FeatureHoverPatternItem";
-import { shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type {
-  ButtonConfig,
-  CardAnimationType,
-  TitleSegment,
-  ButtonAnimationType,
-} from "@/components/cardStack/types";
-import type {
-  TextboxLayout,
-  InvertedBackground,
-} from "@/providers/themeProvider/config/constants";
-
-interface FeatureCard {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-  button?: ButtonConfig;
-}
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface FeatureHoverPatternProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
+  features: Array<{
+    id: string;
+    title: string;
+    description: string;
+  }>;
   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;
-  iconContainerClassName?: string;
-  iconClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  cardTitleClassName?: string;
-  cardDescriptionClassName?: string;
-  gradientClassName?: string;
-  gridClassName?: string;
-  carouselClassName?: string;
-  controlsClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
+  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+  [key: string]: any;
 }
 
-const FeatureHoverPattern = ({
+const FeatureHoverPattern: React.FC<FeatureHoverPatternProps> = ({
   features,
-  carouselMode = "buttons",
-  uniformGridCustomHeightClasses = "min-h-85 2xl:min-h-95",
-  animationType,
   title,
-  titleSegments,
   description,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  iconContainerClassName = "",
-  iconClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  gradientClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-}: FeatureHoverPatternProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(
-    useInvertedBackground,
-    theme.cardStyle
-  );
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  ...props
+}) => {
+  const featureItems = features.map((feature) => (
+    <div key={feature.id} className="flex flex-col gap-4">
+      <h3 className="text-xl font-semibold">{feature.title}</h3>
+      <p className="text-sm text-foreground/75">{feature.description}</p>
+    </div>
+  ));
 
   return (
     <CardStack
-      mode={carouselMode}
       gridVariant="uniform-all-items-equal"
-      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}
+      {...props}
     >
-      {features.map((feature, index) => (
-        <FeatureHoverPatternItem
-          key={`${feature.title}-${index}`}
-          item={feature}
-          index={index}
-          className={cardClassName}
-          iconContainerClassName={iconContainerClassName}
-          iconClassName={iconClassName}
-          titleClassName={cardTitleClassName}
-          descriptionClassName={cardDescriptionClassName}
-          gradientClassName={gradientClassName}
-          shouldUseLightText={shouldUseLightText}
-          buttonClassName={cardButtonClassName}
-          buttonTextClassName={cardButtonTextClassName}
-        />
-      ))}
+      {featureItems}
     </CardStack>
   );
 };
 
-FeatureHoverPattern.displayName = "FeatureHoverPattern";
-
-export default FeatureHoverPattern;
+export default FeatureHoverPattern;

src/components/sections/metrics/MetricCardEleven.tsx

@@ -1,274 +1,35 @@
-"use client";
-
-import { memo } from "react";
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
-import MediaContent from "@/components/shared/MediaContent";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type MediaProps =
-    | {
-        imageSrc: string;
-        imageAlt?: string;
-        videoSrc?: never;
-        videoAriaLabel?: never;
-    }
-    | {
-        videoSrc: string;
-        videoAriaLabel?: string;
-        imageSrc?: never;
-        imageAlt?: never;
-    };
-
-type Metric = MediaProps & {
-    id: string;
-    value: string;
-    title: string;
-    description: string;
-};
+import React, { useContext } from 'react';
+import { CardStackContext } from '@/components/cardStack/CardStackContext';
 
 interface MetricCardElevenProps {
-    metrics: Metric[];
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
+  metrics: Array<{
+    id: string;
+    value: string;
     description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    textBoxClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
-    gridClassName?: string;
-    cardClassName?: string;
-    valueClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-    mediaCardClassName?: string;
-    mediaClassName?: string;
+    imageSrc?: string;
+  }>;
+  title: string;
+  [key: string]: any;
 }
 
-interface MetricTextCardProps {
-    metric: Metric;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    valueClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-}
+const MetricCardEleven: React.FC<MetricCardElevenProps> = ({ metrics, title, ...props }) => {
+  const context = useContext(CardStackContext);
+  const animationProps = context ? context.getAnimationProps() : {};
 
-interface MetricMediaCardProps {
-    metric: Metric;
-    mediaCardClassName?: string;
-    mediaClassName?: string;
-}
-
-const MetricTextCard = memo(({
-    metric,
-    shouldUseLightText,
-    cardClassName = "",
-    valueClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-}: MetricTextCardProps) => {
-    return (
-        <div className={cls(
-            "relative w-full min-w-0 max-w-full h-full card text-foreground rounded-theme-capped flex flex-col justify-between p-6 md:p-8",
-            cardClassName
-        )}>
-            <h3 className={cls(
-                "text-5xl md:text-6xl font-medium leading-tight truncate",
-                shouldUseLightText ? "text-background" : "text-foreground",
-                valueClassName
-            )}>
-                {metric.value}
-            </h3>
-
-            <div className="w-full min-w-0 flex flex-col gap-2 mt-auto">
-                <p className={cls(
-                    "text-xl md:text-2xl font-medium leading-tight truncate",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {metric.title}
-                </p>
-                <div className="w-full h-px bg-accent" />
-                <p className={cls(
-                    "text-base truncate leading-tight",
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                    cardDescriptionClassName
-                )}>
-                    {metric.description}
-                </p>
-            </div>
+  return (
+    <div {...animationProps} {...props}>
+      <h2>{title}</h2>
+      {metrics.map((metric) => (
+        <div key={metric.id}>
+          <p className="text-3xl font-bold">{metric.value}</p>
+          <p>{metric.description}</p>
+          {metric.imageSrc && (
+            <img src={metric.imageSrc} alt={metric.description} className="w-24 h-24 rounded" />
+          )}
         </div>
-    );
-});
-
-MetricTextCard.displayName = "MetricTextCard";
-
-const MetricMediaCard = memo(({
-    metric,
-    mediaCardClassName = "",
-    mediaClassName = "",
-}: MetricMediaCardProps) => {
-    return (
-        <div className={cls(
-            "relative h-full rounded-theme-capped overflow-hidden",
-            mediaCardClassName
-        )}>
-            <MediaContent
-                imageSrc={metric.imageSrc}
-                videoSrc={metric.videoSrc}
-                imageAlt={metric.imageAlt}
-                videoAriaLabel={metric.videoAriaLabel}
-                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
-            />
-        </div>
-    );
-});
-
-MetricMediaCard.displayName = "MetricMediaCard";
-
-const MetricCardEleven = ({
-    metrics,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Metrics section",
-    className = "",
-    containerClassName = "",
-    textBoxClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-    gridClassName = "",
-    cardClassName = "",
-    valueClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-    mediaCardClassName = "",
-    mediaClassName = "",
-}: MetricCardElevenProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    // Inner grid for each metric item (text + media side by side)
-    const innerGridCols = "grid-cols-2";
-
-    const { itemRefs } = useCardAnimation({ animationType, itemCount: metrics.length });
-
-    return (
-        <section
-            aria-label={ariaLabel}
-            className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
-        >
-            <div className={cls("w-content-width mx-auto", containerClassName)}>
-                <CardStackTextBox
-                    title={title}
-                    titleSegments={titleSegments}
-                    description={description}
-                    tag={tag}
-                    tagIcon={tagIcon}
-                    tagAnimation={tagAnimation}
-                    buttons={buttons}
-                    buttonAnimation={buttonAnimation}
-                    textboxLayout={textboxLayout}
-                    useInvertedBackground={useInvertedBackground}
-                    textBoxClassName={textBoxClassName}
-                    titleClassName={textBoxTitleClassName}
-                    titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-                    titleImageClassName={textBoxTitleImageClassName}
-                    descriptionClassName={textBoxDescriptionClassName}
-                    tagClassName={textBoxTagClassName}
-                    buttonContainerClassName={textBoxButtonContainerClassName}
-                    buttonClassName={textBoxButtonClassName}
-                    buttonTextClassName={textBoxButtonTextClassName}
-                />
-
-                <div className={cls(
-                    "grid gap-4 mt-8 md:mt-12",
-                    metrics.length === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
-                    gridClassName
-                )}>
-                    {metrics.map((metric, index) => {
-                        const isLastItem = index === metrics.length - 1;
-                        const isOddTotal = metrics.length % 2 !== 0;
-                        const isSingleItem = metrics.length === 1;
-                        const shouldSpanFull = isSingleItem || (isLastItem && isOddTotal);
-                        // On mobile, even items (2nd, 4th, 6th - index 1, 3, 5) have media first
-                        const isEvenItem = (index + 1) % 2 === 0;
-
-                        return (
-                            <div
-                                key={`${metric.id}-${index}`}
-                                ref={(el) => { itemRefs.current[index] = el; }}
-                                className={cls(
-                                    "grid gap-4",
-                                    innerGridCols,
-                                    shouldSpanFull && "md:col-span-2"
-                                )}
-                            >
-                                <MetricTextCard
-                                    metric={metric}
-                                    shouldUseLightText={shouldUseLightText}
-                                    cardClassName={cls(
-                                        shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
-                                        isEvenItem && "order-2 md:order-1",
-                                        cardClassName
-                                    )}
-                                    valueClassName={valueClassName}
-                                    cardTitleClassName={cardTitleClassName}
-                                    cardDescriptionClassName={cardDescriptionClassName}
-                                />
-                                <MetricMediaCard
-                                    metric={metric}
-                                    mediaCardClassName={cls(
-                                        shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
-                                        isEvenItem && "order-1 md:order-2",
-                                        mediaCardClassName
-                                    )}
-                                    mediaClassName={mediaClassName}
-                                />
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-        </section>
-    );
+      ))}
+    </div>
+  );
 };
 
-MetricCardEleven.displayName = "MetricCardEleven";
-
 export default MetricCardEleven;

src/components/sections/metrics/MetricCardOne.tsx

@@ -1,212 +1,48 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type MetricCardOneGridVariant = Extract<GridVariant, "uniform-all-items-equal" | "bento-grid" | "bento-grid-inverted">;
-
-type Metric = {
-    id: string;
-    value: string;
-    title: string;
-    description: string;
-    icon: LucideIcon;
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface MetricCardOneProps {
-    metrics: Metric[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: MetricCardOneGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    title: string;
-    titleSegments?: TitleSegment[];
+  metrics: Array<{
+    id: string;
+    value: string;
     description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    valueClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    iconContainerClassName?: string;
-    iconClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface MetricCardItemProps {
-    metric: Metric;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    valueClassName?: string;
-    titleClassName?: string;
-    descriptionClassName?: string;
-    iconContainerClassName?: string;
-    iconClassName?: string;
-}
+const MetricCardOne: React.FC<MetricCardOneProps> = ({
+  metrics,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const metricItems = metrics.map((metric) => (
+    <div key={metric.id} className="flex flex-col gap-4">
+      <p className="text-3xl font-bold">{metric.value}</p>
+      <p className="text-sm text-foreground/75">{metric.description}</p>
+    </div>
+  ));
 
-const MetricCardItem = memo(({
-    metric,
-    shouldUseLightText,
-    cardClassName = "",
-    valueClassName = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    iconContainerClassName = "",
-    iconClassName = "",
-}: MetricCardItemProps) => {
-    return (
-        <div className={cls("relative w-full min-w-0 h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-0", cardClassName)}>
-            <h2
-                className={cls("relative z-1 w-full text-9xl font-foreground font-medium leading-[1.1] truncate text-center", valueClassName)}
-                style={{
-                    backgroundImage: shouldUseLightText
-                        ? `linear-gradient(to bottom, var(--color-background) 0%, var(--color-background) 20%, transparent 72%, transparent 80%, transparent 100%)`
-                        : `linear-gradient(to bottom, var(--color-foreground) 0%, var(--color-foreground) 20%, transparent 72%, transparent 80%, transparent 100%)`,
-                    WebkitBackgroundClip: "text",
-                    backgroundClip: "text",
-                    WebkitTextFillColor: "transparent",
-                    color: "transparent",
-                }}
-            >
-                {metric.value}
-            </h2>
-            <p className={cls("relative w-full z-1 mt-[calc(var(--text-4xl)*-0.75)] md:mt-[calc(var(--text-4xl)*-1.15)] text-4xl font-medium text-center truncate", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
-                {metric.title}
-            </p>
-            <p className={cls("relative line-clamp-2 z-1 max-w-9/10 md:max-w-7/10 text-base text-center leading-[1.1] mt-2", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}>
-                {metric.description}
-            </p>
-            <div className={cls("absolute! z-1 left-6 bottom-6 h-10 aspect-square primary-button rounded-theme flex items-center justify-center", iconContainerClassName)}>
-                <metric.icon className={cls("h-4/10 text-primary-cta-text", iconClassName)} />
-            </div>
-        </div>
-    );
-});
-
-MetricCardItem.displayName = "MetricCardItem";
-
-const MetricCardOne = ({
-    metrics,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Metrics section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    valueClassName = "",
-    titleClassName = "",
-    descriptionClassName = "",
-    iconContainerClassName = "",
-    iconClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: MetricCardOneProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    const customUniformHeight = gridVariant === "uniform-all-items-equal"
-        ? "min-h-70 2xl:min-h-80"
-        : uniformGridCustomHeightClasses;
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={customUniformHeight}
-            animationType={animationType}
-            supports3DAnimation={true}
-            carouselThreshold={4}
-            carouselItemClassName="w-carousel-item-3!"
-
-            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}
-        >
-            {metrics.map((metric, index) => (
-                <MetricCardItem
-                    key={`${metric.id}-${index}`}
-                    metric={metric}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    valueClassName={valueClassName}
-                    titleClassName={titleClassName}
-                    descriptionClassName={descriptionClassName}
-                    iconContainerClassName={iconContainerClassName}
-                    iconClassName={iconClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {metricItems}
+    </CardStack>
+  );
 };
 
-MetricCardOne.displayName = "MetricCardOne";
-
-export default MetricCardOne;
+export default MetricCardOne;

src/components/sections/metrics/MetricCardSeven.tsx

@@ -1,194 +1,48 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type Metric = {
-    id: string;
-    value: string;
-    title: string;
-    items: string[];
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface MetricCardSevenProps {
-    metrics: Metric[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    title: string;
-    titleSegments?: TitleSegment[];
+  metrics: Array<{
+    id: string;
+    value: string;
     description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    valueClassName?: string;
-    metricTitleClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface MetricCardItemProps {
-    metric: Metric;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    valueClassName?: string;
-    metricTitleClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-}
+const MetricCardSeven: React.FC<MetricCardSevenProps> = ({
+  metrics,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const metricItems = metrics.map((metric) => (
+    <div key={metric.id} className="flex flex-col gap-4">
+      <p className="text-3xl font-bold">{metric.value}</p>
+      <p className="text-sm text-foreground/75">{metric.description}</p>
+    </div>
+  ));
 
-const MetricCardItem = memo(({
-    metric,
-    shouldUseLightText,
-    cardClassName = "",
-    valueClassName = "",
-    metricTitleClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-}: MetricCardItemProps) => {
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col justify-between gap-4", cardClassName)}>
-            <div className="flex flex-col gap-0" >
-                <h3 className={cls("relative z-1 text-9xl md:text-8xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
-                    {metric.value}
-                </h3>
-                <p className={cls("relative z-1 text-2xl md:text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
-                    {metric.title}
-                </p>
-            </div>
-            <div className="pt-4 border-t border-t-accent" >
-                {metric.items.length > 0 && (
-                    <PricingFeatureList
-                        features={metric.items}
-                        shouldUseLightText={shouldUseLightText}
-                        className={cls("mt-1", featuresClassName)}
-                        featureItemClassName={featureItemClassName}
-                    />
-                )}
-            </div>
-        </div>
-    );
-});
-
-MetricCardItem.displayName = "MetricCardItem";
-
-const MetricCardSeven = ({
-    metrics,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Metrics section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    valueClassName = "",
-    metricTitleClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: MetricCardSevenProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    const customUniformHeight = uniformGridCustomHeightClasses || "min-h-70 2xl:min-h-80";
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={customUniformHeight}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {metrics.map((metric, index) => (
-                <MetricCardItem
-                    key={`${metric.id}-${index}`}
-                    metric={metric}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    valueClassName={valueClassName}
-                    metricTitleClassName={metricTitleClassName}
-                    featuresClassName={featuresClassName}
-                    featureItemClassName={featureItemClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {metricItems}
+    </CardStack>
+  );
 };
 
-MetricCardSeven.displayName = "MetricCardSeven";
-
-export default MetricCardSeven;
+export default MetricCardSeven;

src/components/sections/metrics/MetricCardTen.tsx

@@ -1,245 +1,50 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import Button from "@/components/button/Button";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-import type { CTAButtonVariant } from "@/components/button/types";
-
-type Metric = {
-    id: string;
-    title: string;
-    subtitle: string;
-    category: string;
-    value: string;
-    buttons?: ButtonConfig[];
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface MetricCardTenProps {
-    metrics: Metric[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
+  metrics: Array<{
+    id: string;
+    value: string;
     description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    cardTitleClassName?: string;
-    subtitleClassName?: string;
-    categoryClassName?: string;
-    valueClassName?: string;
-    footerClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  carouselThreshold?: number;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface MetricCardItemProps {
-    metric: Metric;
-    shouldUseLightText: boolean;
-    defaultButtonVariant: CTAButtonVariant;
-    cardClassName?: string;
-    cardTitleClassName?: string;
-    subtitleClassName?: string;
-    categoryClassName?: string;
-    valueClassName?: string;
-    footerClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: string;
-}
+const MetricCardTen: React.FC<MetricCardTenProps> = ({
+  metrics,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  carouselThreshold = 5,
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const metricItems = metrics.map((metric) => (
+    <div key={metric.id} className="flex flex-col gap-4">
+      <p className="text-3xl font-bold">{metric.value}</p>
+      <p className="text-sm text-foreground/75">{metric.description}</p>
+    </div>
+  ));
 
-const MetricCardItem = memo(({
-    metric,
-    shouldUseLightText,
-    defaultButtonVariant,
-    cardClassName = "",
-    cardTitleClassName = "",
-    subtitleClassName = "",
-    categoryClassName = "",
-    valueClassName = "",
-    footerClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-}: MetricCardItemProps) => {
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped flex flex-col", cardClassName)}>
-            <div className="flex flex-col gap-6 p-6 flex-1">
-                <div className="flex flex-col gap-1">
-                    <h3 className={cls(
-                        "text-2xl md:text-3xl font-medium leading-tight truncate",
-                        shouldUseLightText ? "text-background" : "text-foreground",
-                        cardTitleClassName
-                    )}>
-                        {metric.title}
-                    </h3>
-                    <p className={cls(
-                        "text-base md:text-lg",
-                        shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                        subtitleClassName
-                    )}>
-                        {metric.subtitle}
-                    </p>
-                </div>
-
-                <div className="flex items-center justify-between gap-2 mt-auto">
-                    <div className="flex items-center gap-2 min-w-0 flex-1">
-                        <span className="h-[var(--text-base)] w-auto aspect-square rounded-theme shrink-0 bg-accent" />
-                        <span className={cls(
-                            "text-base truncate",
-                            shouldUseLightText ? "text-background" : "text-foreground",
-                            categoryClassName
-                        )}>
-                            {metric.category}
-                        </span>
-                    </div>
-                    <span className={cls(
-                        "text-xl md:text-2xl font-medium",
-                        shouldUseLightText ? "text-background" : "text-foreground",
-                        valueClassName
-                    )}>
-                        {metric.value}
-                    </span>
-                </div>
-            </div>
-
-            {metric.buttons && metric.buttons.length > 0 && (
-                <div className={cls("bg-background-accent/50 p-4 rounded-b-theme-capped", footerClassName)}>
-                    <div className="flex flex-wrap gap-4 max-md:justify-center">
-                        {metric.buttons.slice(0, 2).map((button, index) => (
-                            <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)} />
-                        ))}
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-});
-
-MetricCardItem.displayName = "MetricCardItem";
-
-const MetricCardTen = ({
-    metrics,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Metrics section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    cardTitleClassName = "",
-    subtitleClassName = "",
-    categoryClassName = "",
-    valueClassName = "",
-    footerClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: MetricCardTenProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            carouselThreshold={4}
-            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}
-            carouselItemClassName="!w-carousel-item-3"
-        >
-            {metrics.map((metric, index) => (
-                <MetricCardItem
-                    key={`${metric.id}-${index}`}
-                    metric={metric}
-                    shouldUseLightText={shouldUseLightText}
-                    defaultButtonVariant={theme.defaultButtonVariant}
-                    cardClassName={cardClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    subtitleClassName={subtitleClassName}
-                    categoryClassName={categoryClassName}
-                    valueClassName={valueClassName}
-                    footerClassName={footerClassName}
-                    cardButtonClassName={cardButtonClassName}
-                    cardButtonTextClassName={cardButtonTextClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {metricItems}
+    </CardStack>
+  );
 };
 
-MetricCardTen.displayName = "MetricCardTen";
-
-export default MetricCardTen;
+export default MetricCardTen;

src/components/sections/metrics/MetricCardThree.tsx

@@ -1,186 +1,48 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type Metric = {
-    id: string;
-    icon: LucideIcon;
-    title: string;
-    value: string;
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface MetricCardThreeProps {
-    metrics: Metric[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    title: string;
-    titleSegments?: TitleSegment[];
+  metrics: Array<{
+    id: string;
+    value: string;
     description: string;
-    tag?: string;
-    tagIcon?: LucideIcon;
-    tagAnimation?: ButtonAnimationType;
-    buttons?: ButtonConfig[];
-    buttonAnimation?: ButtonAnimationType;
-    textboxLayout: TextboxLayout;
-    useInvertedBackground: InvertedBackground;
-    ariaLabel?: string;
-    className?: string;
-    containerClassName?: string;
-    cardClassName?: string;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    iconContainerClassName?: string;
-    iconClassName?: string;
-    metricTitleClassName?: string;
-    valueClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface MetricCardItemProps {
-    metric: Metric;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    iconContainerClassName?: string;
-    iconClassName?: string;
-    metricTitleClassName?: string;
-    valueClassName?: string;
-}
+const MetricCardThree: React.FC<MetricCardThreeProps> = ({
+  metrics,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const metricItems = metrics.map((metric) => (
+    <div key={metric.id} className="flex flex-col gap-4">
+      <p className="text-3xl font-bold">{metric.value}</p>
+      <p className="text-sm text-foreground/75">{metric.description}</p>
+    </div>
+  ));
 
-const MetricCardItem = memo(({
-    metric,
-    shouldUseLightText,
-    cardClassName = "",
-    iconContainerClassName = "",
-    iconClassName = "",
-    metricTitleClassName = "",
-    valueClassName = "",
-}: MetricCardItemProps) => {
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center justify-center gap-3", cardClassName)}>
-            <div className="relative z-1 w-full flex items-center justify-center gap-2">
-                <div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", iconContainerClassName)}>
-                    <metric.icon className={cls("h-4/10 text-primary-cta-text", iconClassName)} strokeWidth={1.5} />
-                </div>
-                <h3 className={cls("text-xl truncate", shouldUseLightText ? "text-background" : "text-foreground", metricTitleClassName)}>
-                    {metric.title}
-                </h3>
-            </div>
-            <div className="relative z-1 w-full flex items-center justify-center">
-                <h4 className={cls("text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
-                    {metric.value}
-                </h4>
-            </div>
-        </div>
-    );
-});
-
-MetricCardItem.displayName = "MetricCardItem";
-
-const MetricCardThree = ({
-    metrics,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-70 2xl:min-h-80",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Metrics section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    iconContainerClassName = "",
-    iconClassName = "",
-    metricTitleClassName = "",
-    valueClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: MetricCardThreeProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {metrics.map((metric, index) => (
-                <MetricCardItem
-                    key={`${metric.id}-${index}`}
-                    metric={metric}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    iconContainerClassName={iconContainerClassName}
-                    iconClassName={iconClassName}
-                    metricTitleClassName={metricTitleClassName}
-                    valueClassName={valueClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {metricItems}
+    </CardStack>
+  );
 };
 
-MetricCardThree.displayName = "MetricCardThree";
-
 export default MetricCardThree;

src/components/sections/metrics/MetricCardTwo.tsx

@@ -1,183 +1,48 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type MetricCardTwoGridVariant = Extract<GridVariant, "uniform-all-items-equal" | "bento-grid" | "bento-grid-inverted">;
-
-type Metric = {
+interface MetricCardTwoProps {
+  metrics: Array<{
     id: string;
     value: string;
     description: string;
-};
-
-interface MetricCardTwoProps {
-    metrics: Metric[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: MetricCardTwoGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    valueClassName?: string;
-    metricDescriptionClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface MetricCardItemProps {
-    metric: Metric;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    valueClassName?: string;
-    metricDescriptionClassName?: string;
-}
+const MetricCardTwo: React.FC<MetricCardTwoProps> = ({
+  metrics,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const metricItems = metrics.map((metric) => (
+    <div key={metric.id} className="flex flex-col gap-4">
+      <p className="text-3xl font-bold">{metric.value}</p>
+      <p className="text-sm text-foreground/75">{metric.description}</p>
+    </div>
+  ));
 
-const MetricCardItem = memo(({
-    metric,
-    shouldUseLightText,
-    cardClassName = "",
-    valueClassName = "",
-    metricDescriptionClassName = "",
-}: MetricCardItemProps) => {
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col justify-between", cardClassName)}>
-            <h3 className={cls("relative z-1 text-9xl md:text-7xl font-medium truncate", shouldUseLightText ? "text-background" : "text-foreground", valueClassName)}>
-                {metric.value}
-            </h3>
-            <p className={cls("relative z-1 text-xl", shouldUseLightText ? "text-background" : "text-foreground", metricDescriptionClassName)}>
-                {metric.description}
-            </p>
-        </div>
-    );
-});
-
-MetricCardItem.displayName = "MetricCardItem";
-
-const MetricCardTwo = ({
-    metrics,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Metrics section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    valueClassName = "",
-    metricDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: MetricCardTwoProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    const customUniformHeight = gridVariant === "uniform-all-items-equal"
-        ? "min-h-70 2xl:min-h-80"
-        : uniformGridCustomHeightClasses;
-
-    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
-        ? "md:grid-rows-[14rem_14rem] 2xl:grid-rows-[17rem_17rem]"
-        : undefined;
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={customUniformHeight}
-            gridRowsClassName={customGridRows}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-            carouselThreshold={4}
-            carouselItemClassName="w-carousel-item-3!"
-        >
-            {metrics.map((metric, index) => (
-                <MetricCardItem
-                    key={`${metric.id}-${index}`}
-                    metric={metric}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    valueClassName={valueClassName}
-                    metricDescriptionClassName={metricDescriptionClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {metricItems}
+    </CardStack>
+  );
 };
 
-MetricCardTwo.displayName = "MetricCardTwo";
-
-export default MetricCardTwo;
+export default MetricCardTwo;

src/components/sections/pricing/PricingCardEight.tsx

@@ -1,248 +1,73 @@
 "use client";
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import Button from "@/components/button/Button";
-import PricingBadge from "@/components/shared/PricingBadge";
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type PricingPlan = {
-    id: string;
-    badge: string;
-    badgeIcon?: LucideIcon;
-    price: string;
-    subtitle: string;
-    buttons: ButtonConfig[];
-    features: string[];
-};
+import React from 'react';
 
 interface PricingCardEightProps {
-    plans: PricingPlan[];
-    carouselMode?: "auto" | "buttons";
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  plans: Array<{
+    id: string;
+    badge: string;
+    badgeIcon?: React.ComponentType<any>;
+    price: string;
+    subtitle: string;
+    buttons: Array<{ text: string; onClick?: () => void; href?: string }>;
+    features: string[];
+  }>;
+  animationType?: string;
+  title?: string;
+  description?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
 }
 
-interface PricingCardItemProps {
-    plan: PricingPlan;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-}
+const PricingCardEight: React.FC<PricingCardEightProps> = ({
+  plans,
+  title,
+  description,
+  useInvertedBackground = false,
+}) => {
+  return (
+    <div className={`w-full py-20 px-4 ${useInvertedBackground ? 'bg-background-accent' : ''}`}>
+      <div className="max-w-6xl mx-auto">
+        {title && <h2 className="text-4xl font-bold mb-4">{title}</h2>}
+        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
 
-const PricingCardItem = memo(({
-    plan,
-    shouldUseLightText,
-    cardClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-}: PricingCardItemProps) => {
-    const theme = useTheme();
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {plans.map((plan) => (
+            <div key={plan.id} className="bg-card rounded-lg p-8 border border-card/50">
+              <div className="flex items-center gap-2 mb-4">
+                {plan.badgeIcon && <plan.badgeIcon className="w-4 h-4" />}
+                <span className="text-sm font-semibold text-primary-cta">{plan.badge}</span>
+              </div>
 
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
+              <h3 className="text-2xl font-bold mb-2">{plan.price}</h3>
+              <p className="text-foreground/70 mb-6">{plan.subtitle}</p>
 
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
-            <div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
-                <PricingBadge
-                    badge={plan.badge}
-                    badgeIcon={plan.badgeIcon}
-                    className={badgeClassName}
-                />
+              <div className="space-y-3 mb-8">
+                {plan.buttons.map((btn, idx) => (
+                  <button
+                    key={idx}
+                    onClick={btn.onClick}
+                    className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
+                  >
+                    {btn.text}
+                  </button>
+                ))}
+              </div>
 
-                <div className="relative z-1 flex flex-col gap-1">
-                    <div className="text-5xl font-medium text-foreground">
-                        {plan.price}
-                    </div>
-
-                    <p className="text-base text-foreground">
-                        {plan.subtitle}
-                    </p>
-                </div>
-
-                {plan.buttons && plan.buttons.length > 0 && (
-                    <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
-                        {plan.buttons.slice(0, 2).map((button, index) => (
-                            <Button
-                                key={`${button.text}-${index}`}
-                                {...getButtonProps(
-                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
-                                    index,
-                                    theme.defaultButtonVariant,
-                                    cls("w-full", planButtonClassName)
-                                )}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-
-            <div className="p-3 pt-0" >
-                <PricingFeatureList
-                    features={plan.features}
-                    shouldUseLightText={shouldUseLightText}
-                    className={cls("mt-1", featuresClassName)}
-                    featureItemClassName={featureItemClassName}
-                />
+              <ul className="space-y-2">
+                {plan.features.map((feature, idx) => (
+                  <li key={idx} className="text-sm text-foreground/70 flex items-start gap-2">
+                    <span className="text-primary-cta mt-1">✓</span>
+                    {feature}
+                  </li>
+                ))}
+              </ul>
             </div>
+          ))}
         </div>
-    );
-});
-
-PricingCardItem.displayName = "PricingCardItem";
-
-const PricingCardEight = ({
-    plans,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Pricing section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: PricingCardEightProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            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}
-        >
-            {plans.map((plan, index) => (
-                <PricingCardItem
-                    key={`${plan.id}-${index}`}
-                    plan={plan}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    badgeClassName={badgeClassName}
-                    priceClassName={priceClassName}
-                    subtitleClassName={subtitleClassName}
-                    planButtonContainerClassName={planButtonContainerClassName}
-                    planButtonClassName={planButtonClassName}
-                    featuresClassName={featuresClassName}
-                    featureItemClassName={featureItemClassName}
-                />
-            ))}
-        </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-PricingCardEight.displayName = "PricingCardEight";
-
 export default PricingCardEight;

src/components/sections/pricing/PricingCardOne.tsx

@@ -1,206 +1,56 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import PricingBadge from "@/components/shared/PricingBadge";
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type PricingPlan = {
+interface PricingCardOneProps {
+  plans: Array<{
     id: string;
     badge: string;
-    badgeIcon?: LucideIcon;
     price: string;
     subtitle: string;
     features: string[];
-};
-
-interface PricingCardOneProps {
-    plans: PricingPlan[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface PricingCardItemProps {
-    plan: PricingPlan;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-}
+const PricingCardOne: React.FC<PricingCardOneProps> = ({
+  plans,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const planItems = plans.map((plan) => (
+    <div key={plan.id} className="flex flex-col gap-4">
+      <span className="text-sm font-medium text-primary-cta">{plan.badge}</span>
+      <p className="text-3xl font-bold">{plan.price}</p>
+      <p className="text-sm text-foreground/75">{plan.subtitle}</p>
+      <ul className="flex flex-col gap-2">
+        {plan.features.map((feature, idx) => (
+          <li key={idx} className="text-sm">{feature}</li>
+        ))}
+      </ul>
+    </div>
+  ));
 
-const PricingCardItem = memo(({
-    plan,
-    shouldUseLightText,
-    cardClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-}: PricingCardItemProps) => {
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col gap-6 md:gap-8", cardClassName)}>
-            <PricingBadge
-                badge={plan.badge}
-                badgeIcon={plan.badgeIcon}
-                className={badgeClassName}
-            />
-
-            <div className="relative z-1 flex flex-col gap-1">
-                <div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
-                    {plan.price}
-                </div>
-
-                <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
-                    {plan.subtitle}
-                </p>
-            </div>
-
-            <div className="relative z-1 w-full h-px bg-foreground/20" />
-
-            <PricingFeatureList
-                features={plan.features}
-                shouldUseLightText={shouldUseLightText}
-                className={cls("mt-1", featuresClassName)}
-                featureItemClassName={featureItemClassName}
-            />
-        </div>
-    );
-});
-
-PricingCardItem.displayName = "PricingCardItem";
-
-const PricingCardOne = ({
-    plans,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Pricing section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: PricingCardOneProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {plans.map((plan, index) => (
-                <PricingCardItem
-                    key={`${plan.id}-${index}`}
-                    plan={plan}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    badgeClassName={badgeClassName}
-                    priceClassName={priceClassName}
-                    subtitleClassName={subtitleClassName}
-                    featuresClassName={featuresClassName}
-                    featureItemClassName={featureItemClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {planItems}
+    </CardStack>
+  );
 };
 
-PricingCardOne.displayName = "PricingCardOne";
-
-export default PricingCardOne;
+export default PricingCardOne;

src/components/sections/pricing/PricingCardThree.tsx

@@ -1,247 +1,56 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
-import Button from "@/components/button/Button";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type PricingPlan = {
-    id: string;
-    badge?: string;
-    badgeIcon?: LucideIcon;
-    price: string;
-    name: string;
-    buttons: ButtonConfig[];
-    features: string[];
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface PricingCardThreeProps {
-    plans: PricingPlan[];
-    carouselMode?: "auto" | "buttons";
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    nameClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  plans: Array<{
+    id: string;
+    badge: string;
+    price: string;
+    subtitle: string;
+    features: string[];
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface PricingCardItemProps {
-    plan: PricingPlan;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    nameClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-}
+const PricingCardThree: React.FC<PricingCardThreeProps> = ({
+  plans,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const planItems = plans.map((plan) => (
+    <div key={plan.id} className="flex flex-col gap-4">
+      <span className="text-sm font-medium text-primary-cta">{plan.badge}</span>
+      <p className="text-3xl font-bold">{plan.price}</p>
+      <p className="text-sm text-foreground/75">{plan.subtitle}</p>
+      <ul className="flex flex-col gap-2">
+        {plan.features.map((feature, idx) => (
+          <li key={idx} className="text-sm">{feature}</li>
+        ))}
+      </ul>
+    </div>
+  ));
 
-const PricingCardItem = memo(({
-    plan,
-    shouldUseLightText,
-    cardClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    nameClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-}: PricingCardItemProps) => {
-    const theme = useTheme();
-
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
-
-    return (
-        <div className="relative h-full flex flex-col">
-            <div className={cls("px-4 py-3 primary-button rounded-t-theme-capped rounded-b-none text-base text-primary-cta-text whitespace-nowrap z-10 flex items-center justify-center gap-2", plan.badge ? "visible" : "invisible", badgeClassName)}>
-                {plan.badgeIcon && <plan.badgeIcon className="inline h-[1em] w-auto" />}
-                {plan.badge || "placeholder"}
-            </div>
-            <div className={cls("relative min-h-0 h-full card text-foreground p-6 flex flex-col justify-between items-center gap-6 md:gap-8", plan.badge ? "rounded-t-none rounded-b-theme-capped" : "rounded-theme-capped", cardClassName)}>
-                <div className="flex flex-col items-center gap-6 md:gap-8" >
-                    <div className="relative z-1 flex flex-col gap-2 text-center">
-                        <div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
-                            {plan.price}
-                        </div>
-
-                        <h3 className={cls("text-xl font-medium leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
-                            {plan.name}
-                        </h3>
-                    </div>
-
-                    <div className="relative z-1 w-full h-px bg-foreground/10" />
-
-                    <PricingFeatureList
-                        features={plan.features}
-                        shouldUseLightText={shouldUseLightText}
-                        className={featuresClassName}
-                        featureItemClassName={featureItemClassName}
-                    />
-                </div>
-
-                {plan.buttons && plan.buttons.length > 0 && (
-                    <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
-                        {plan.buttons.slice(0, 2).map((button, index) => (
-                            <Button
-                                key={`${button.text}-${index}`}
-                                {...getButtonProps(
-                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
-                                    index,
-                                    theme.defaultButtonVariant,
-                                    cls("w-full", planButtonClassName)
-                                )}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});
-
-PricingCardItem.displayName = "PricingCardItem";
-
-const PricingCardThree = ({
-    plans,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Pricing section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    nameClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: PricingCardThreeProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            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}
-        >
-            {plans.map((plan, index) => (
-                <PricingCardItem
-                    key={`${plan.id}-${index}`}
-                    plan={plan}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    badgeClassName={badgeClassName}
-                    priceClassName={priceClassName}
-                    nameClassName={nameClassName}
-                    planButtonContainerClassName={planButtonContainerClassName}
-                    planButtonClassName={planButtonClassName}
-                    featuresClassName={featuresClassName}
-                    featureItemClassName={featureItemClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {planItems}
+    </CardStack>
+  );
 };
 
-PricingCardThree.displayName = "PricingCardThree";
-
-export default PricingCardThree;
+export default PricingCardThree;

src/components/sections/pricing/PricingCardTwo.tsx

@@ -1,246 +1,56 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import PricingBadge from "@/components/shared/PricingBadge";
-import PricingFeatureList from "@/components/shared/PricingFeatureList";
-import Button from "@/components/button/Button";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type PricingPlan = {
-    id: string;
-    badge: string;
-    badgeIcon?: LucideIcon;
-    price: string;
-    subtitle: string;
-    buttons: ButtonConfig[];
-    features: string[];
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface PricingCardTwoProps {
-    plans: PricingPlan[];
-    carouselMode?: "auto" | "buttons";
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  plans: Array<{
+    id: string;
+    badge: string;
+    price: string;
+    subtitle: string;
+    features: string[];
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface PricingCardItemProps {
-    plan: PricingPlan;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    badgeClassName?: string;
-    priceClassName?: string;
-    subtitleClassName?: string;
-    planButtonContainerClassName?: string;
-    planButtonClassName?: string;
-    featuresClassName?: string;
-    featureItemClassName?: string;
-}
+const PricingCardTwo: React.FC<PricingCardTwoProps> = ({
+  plans,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const planItems = plans.map((plan) => (
+    <div key={plan.id} className="flex flex-col gap-4">
+      <span className="text-sm font-medium text-primary-cta">{plan.badge}</span>
+      <p className="text-3xl font-bold">{plan.price}</p>
+      <p className="text-sm text-foreground/75">{plan.subtitle}</p>
+      <ul className="flex flex-col gap-2">
+        {plan.features.map((feature, idx) => (
+          <li key={idx} className="text-sm">{feature}</li>
+        ))}
+      </ul>
+    </div>
+  ));
 
-const PricingCardItem = memo(({
-    plan,
-    shouldUseLightText,
-    cardClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-}: PricingCardItemProps) => {
-    const theme = useTheme();
-
-    const getButtonConfigProps = () => {
-        if (theme.defaultButtonVariant === "hover-bubble") {
-            return { bgClassName: "w-full" };
-        }
-        if (theme.defaultButtonVariant === "icon-arrow") {
-            return { className: "justify-between" };
-        }
-        return {};
-    };
-
-    return (
-        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-6 flex flex-col items-center gap-6 md:gap-8", cardClassName)}>
-            <PricingBadge
-                badge={plan.badge}
-                badgeIcon={plan.badgeIcon}
-                className={badgeClassName}
-            />
-
-            <div className="relative z-1 flex flex-col gap-1 text-center">
-                <div className={cls("text-5xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", priceClassName)}>
-                    {plan.price}
-                </div>
-
-                <p className={cls("text-base", shouldUseLightText ? "text-background" : "text-foreground", subtitleClassName)}>
-                    {plan.subtitle}
-                </p>
-            </div>
-
-            {plan.buttons && plan.buttons.length > 0 && (
-                <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
-                    {plan.buttons.slice(0, 2).map((button, index) => (
-                        <Button
-                            key={`${button.text}-${index}`}
-                            {...getButtonProps(
-                                { ...button, props: { ...button.props, ...getButtonConfigProps() } },
-                                index,
-                                theme.defaultButtonVariant,
-                                cls("w-full", planButtonClassName)
-                            )}
-                        />
-                    ))}
-                </div>
-            )}
-
-            <div className="relative z-1 w-full h-px bg-foreground/10 my-3" />
-
-            <PricingFeatureList
-                features={plan.features}
-                shouldUseLightText={shouldUseLightText}
-                className={featuresClassName}
-                featureItemClassName={featureItemClassName}
-            />
-        </div>
-    );
-});
-
-PricingCardItem.displayName = "PricingCardItem";
-
-const PricingCardTwo = ({
-    plans,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Pricing section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    badgeClassName = "",
-    priceClassName = "",
-    subtitleClassName = "",
-    planButtonContainerClassName = "",
-    planButtonClassName = "",
-    featuresClassName = "",
-    featureItemClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: PricingCardTwoProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            useInvertedBackground={useInvertedBackground}
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            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}
-        >
-            {plans.map((plan, index) => (
-                <PricingCardItem
-                    key={`${plan.id}-${index}`}
-                    plan={plan}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    badgeClassName={badgeClassName}
-                    priceClassName={priceClassName}
-                    subtitleClassName={subtitleClassName}
-                    planButtonContainerClassName={planButtonContainerClassName}
-                    planButtonClassName={planButtonClassName}
-                    featuresClassName={featuresClassName}
-                    featureItemClassName={featureItemClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {planItems}
+    </CardStack>
+  );
 };
 
-PricingCardTwo.displayName = "PricingCardTwo";
-
-export default PricingCardTwo;
+export default PricingCardTwo;

src/components/sections/product/ProductCardFour.tsx

@@ -1,238 +1,106 @@
 "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, { useState } from 'react';
 
-type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
-
-type ProductCard = Product & {
-  variant: string;
-};
+interface ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  isFavorited?: boolean;
+}
 
 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;
-  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;
+  description?: string;
+  gridVariant: string;
+  animationType: string;
+  textboxLayout: string;
+  useInvertedBackground?: boolean;
+  onProductClick?: (id: string) => void;
+  onFavorite?: (id: string) => void;
+  onQuantityChange?: (id: string, quantity: number) => void;
 }
 
-interface ProductCardItemProps {
-  product: ProductCard;
-  shouldUseLightText: boolean;
-  cardClassName?: string;
-  imageClassName?: string;
-  cardNameClassName?: string;
-  cardPriceClassName?: string;
-  cardVariantClassName?: string;
-  actionButtonClassName?: string;
-}
+const ProductCardFour: React.FC<ProductCardFourProps> = ({
+  products = [],
+  title,
+  description,
+  gridVariant,
+  animationType,
+  textboxLayout,
+  useInvertedBackground = false,
+  onProductClick,
+  onFavorite,
+  onQuantityChange,
+}) => {
+  const [quantities, setQuantities] = useState<Record<string, number>>(
+    products.reduce((acc, p) => ({ ...acc, [p.id]: 1 }), {})
+  );
+
+  const handleQuantityChange = (id: string, quantity: number) => {
+    setQuantities(prev => ({ ...prev, [id]: Math.max(1, quantity) }));
+    onQuantityChange?.(id, Math.max(1, quantity));
+  };
 
-const ProductCardItem = memo(({
-  product,
-  shouldUseLightText,
-  cardClassName = "",
-  imageClassName = "",
-  cardNameClassName = "",
-  cardPriceClassName = "",
-  cardVariantClassName = "",
-  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.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}
-      />
+    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+      <div className="max-w-6xl mx-auto px-4 py-20">
+        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+        
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {products.map((product) => (
+            <div key={product.id} className="bg-card rounded-lg overflow-hidden">
+              <div className="relative">
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt || product.name}
+                  className="w-full h-48 object-cover cursor-pointer hover:scale-105 transition-transform"
+                  onClick={() => onProductClick?.(product.id)}
+                />
+                <button
+                  onClick={() => onFavorite?.(product.id)}
+                  className="absolute top-2 right-2 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center hover:bg-white"
+                >
+                  {product.isFavorited ? '♥' : '♡'}
+                </button>
+              </div>
+              <div className="p-4">
+                <h3 className="font-semibold text-lg">{product.name}</h3>
+                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
+                
+                <div className="flex items-center gap-2 mt-4">
+                  <button
+                    onClick={() => handleQuantityChange(product.id, (quantities[product.id] || 1) - 1)}
+                    className="px-3 py-1 bg-foreground/10 rounded hover:bg-foreground/20"
+                  >
+                    −
+                  </button>
+                  <span className="flex-1 text-center">{quantities[product.id] || 1}</span>
+                  <button
+                    onClick={() => handleQuantityChange(product.id, (quantities[product.id] || 1) + 1)}
+                    className="px-3 py-1 bg-foreground/10 rounded hover:bg-foreground/20"
+                  >
+                    +
+                  </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>
-          </div>
-          <p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
-            {product.price}
-          </p>
+                <button
+                  onClick={() => onProductClick?.(product.id)}
+                  className="w-full mt-4 py-2 bg-primary-cta text-white rounded hover:opacity-90"
+                >
+                  Add to Cart
+                </button>
+              </div>
+            </div>
+          ))}
         </div>
       </div>
-    </article>
-  );
-});
-
-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>
+    </section>
   );
 };
 
-ProductCardFour.displayName = "ProductCardFour";
-
 export default ProductCardFour;

src/components/sections/product/ProductCardOne.tsx

@@ -1,226 +1,76 @@
 "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';
 
-type ProductCardOneGridVariant = Exclude<GridVariant, "timeline">;
-
-type ProductCard = Product;
+interface Product {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  isFavorited?: boolean;
+}
 
 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;
+  products?: Product[];
+  title: string;
+  description?: string;
+  gridVariant: string;
+  animationType: string;
+  textboxLayout: string;
+  useInvertedBackground?: boolean;
+  onProductClick?: (id: string) => void;
+  onFavorite?: (id: string) => void;
 }
 
-interface ProductCardItemProps {
-    product: ProductCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: 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>
-
+const ProductCardOne: React.FC<ProductCardOneProps> = ({
+  products = [],
+  title,
+  description,
+  gridVariant,
+  animationType,
+  textboxLayout,
+  useInvertedBackground = false,
+  onProductClick,
+  onFavorite,
+}) => {
+  return (
+    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+      <div className="max-w-6xl mx-auto px-4 py-20">
+        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+        
+        <div className="grid md:grid-cols-3 gap-6">
+          {products.map((product) => (
+            <div
+              key={product.id}
+              className="bg-card rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
+              onClick={() => onProductClick?.(product.id)}
+            >
+              <img
+                src={product.imageSrc}
+                alt={product.imageAlt || product.name}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-4">
+                <h3 className="font-semibold text-lg">{product.name}</h3>
+                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
                 <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"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onFavorite?.(product.id);
+                  }}
+                  className="mt-4 w-full py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity"
                 >
-                    <ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                  {product.isFavorited ? 'Remove from Favorites' : 'Add to Favorites'}
                 </button>
+              </div>
             </div>
-        </article>
-    );
-});
-
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardOne = ({
-    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 = "",
-    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}
-                />
-            ))}
-        </CardStack>
-    );
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 };
 
-ProductCardOne.displayName = "ProductCardOne";
-
 export default ProductCardOne;

src/components/sections/product/ProductCardThree.tsx

@@ -1,283 +1,106 @@
 "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, { useState } from '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 ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  isFavorited?: boolean;
+}
 
 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;
+  products?: ProductCard[];
+  title: string;
+  description?: string;
+  gridVariant: string;
+  animationType: string;
+  textboxLayout: string;
+  useInvertedBackground?: boolean;
+  onProductClick?: (id: string) => void;
+  onFavorite?: (id: string) => void;
+  onQuantityChange?: (id: string, quantity: number) => void;
 }
 
+const ProductCardThree: React.FC<ProductCardThreeProps> = ({
+  products = [],
+  title,
+  description,
+  gridVariant,
+  animationType,
+  textboxLayout,
+  useInvertedBackground = false,
+  onProductClick,
+  onFavorite,
+  onQuantityChange,
+}) => {
+  const [quantities, setQuantities] = useState<Record<string, number>>(
+    products.reduce((acc, p) => ({ ...acc, [p.id]: 1 }), {})
+  );
 
-interface ProductCardItemProps {
-    product: ProductCard;
-    shouldUseLightText: boolean;
-    isFromApi: boolean;
-    onBuyClick?: (productId: string, quantity: number) => void;
-    cardClassName?: string;
-    imageClassName?: string;
-    cardNameClassName?: string;
-    quantityControlsClassName?: string;
-}
+  const handleQuantityChange = (id: string, quantity: number) => {
+    setQuantities(prev => ({ ...prev, [id]: Math.max(1, quantity) }));
+    onQuantityChange?.(id, Math.max(1, quantity));
+  };
 
-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
-                        )}
-                    />
+  return (
+    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+      <div className="max-w-6xl mx-auto px-4 py-20">
+        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+        
+        <div className="grid md:grid-cols-3 gap-6">
+          {products.map((product) => (
+            <div key={product.id} className="bg-card rounded-lg overflow-hidden">
+              <img
+                src={product.imageSrc}
+                alt={product.imageAlt || product.name}
+                className="w-full h-48 object-cover cursor-pointer hover:scale-105 transition-transform"
+                onClick={() => onProductClick?.(product.id)}
+              />
+              <div className="p-4">
+                <h3 className="font-semibold text-lg">{product.name}</h3>
+                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
+                
+                <div className="flex items-center gap-2 mt-4">
+                  <button
+                    onClick={() => handleQuantityChange(product.id, (quantities[product.id] || 1) - 1)}
+                    className="px-3 py-1 bg-foreground/10 rounded hover:bg-foreground/20"
+                  >
+                    −
+                  </button>
+                  <span className="flex-1 text-center">{quantities[product.id] || 1}</span>
+                  <button
+                    onClick={() => handleQuantityChange(product.id, (quantities[product.id] || 1) + 1)}
+                    className="px-3 py-1 bg-foreground/10 rounded hover:bg-foreground/20"
+                  >
+                    +
+                  </button>
                 </div>
+
+                <div className="flex gap-2 mt-4">
+                  <button
+                    onClick={() => onFavorite?.(product.id)}
+                    className="flex-1 py-2 bg-foreground/10 rounded hover:bg-foreground/20"
+                  >
+                    ♡
+                  </button>
+                  <button
+                    onClick={() => onProductClick?.(product.id)}
+                    className="flex-1 py-2 bg-primary-cta text-white rounded hover:opacity-90"
+                  >
+                    {product.price}
+                  </button>
+                </div>
+              </div>
             </div>
-        </article>
-    );
-});
-
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardThree = ({
-    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 = "",
-    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}
-                />
-            ))}
-        </CardStack>
-    );
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 };
 
-ProductCardThree.displayName = "ProductCardThree";
-
 export default ProductCardThree;

src/components/sections/product/ProductCardTwo.tsx

@@ -1,267 +1,76 @@
 "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';
 
-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 ProductCard {
+  id: string;
+  name: string;
+  price: string;
+  imageSrc: string;
+  imageAlt?: string;
+  isFavorited?: boolean;
+}
 
 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;
+  products?: ProductCard[];
+  title: string;
+  description?: string;
+  gridVariant: string;
+  animationType: string;
+  textboxLayout: string;
+  useInvertedBackground?: boolean;
+  onProductClick?: (id: string) => void;
+  onFavorite?: (id: string) => void;
 }
 
-interface ProductCardItemProps {
-    product: ProductCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageClassName?: string;
-    cardBrandClassName?: string;
-    cardNameClassName?: string;
-    cardPriceClassName?: string;
-    cardRatingClassName?: string;
-    actionButtonClassName?: 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>
+const ProductCardTwo: React.FC<ProductCardTwoProps> = ({
+  products = [],
+  title,
+  description,
+  gridVariant,
+  animationType,
+  textboxLayout,
+  useInvertedBackground = false,
+  onProductClick,
+  onFavorite,
+}) => {
+  return (
+    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+      <div className="max-w-6xl mx-auto px-4 py-20">
+        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+        
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {products.map((product) => (
+            <div
+              key={product.id}
+              className="bg-card rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
+              onClick={() => onProductClick?.(product.id)}
+            >
+              <img
+                src={product.imageSrc}
+                alt={product.imageAlt || product.name}
+                className="w-full h-48 object-cover"
+              />
+              <div className="p-4">
+                <h3 className="font-semibold text-lg">{product.name}</h3>
+                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onFavorite?.(product.id);
+                  }}
+                  className="mt-4 w-full py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity"
+                >
+                  {product.isFavorited ? 'Remove from Favorites' : 'Add to Favorites'}
+                </button>
+              </div>
             </div>
-        </article>
-    );
-});
-
-ProductCardItem.displayName = "ProductCardItem";
-
-const ProductCardTwo = ({
-    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 = "",
-    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}
-                />
-            ))}
-        </CardStack>
-    );
+          ))}
+        </div>
+      </div>
+    </section>
+  );
 };
 
-ProductCardTwo.displayName = "ProductCardTwo";
-
 export default ProductCardTwo;

src/components/sections/team/TeamCardFive.tsx

@@ -1,148 +1,35 @@
-"use client";
-
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
-import MediaContent from "@/components/shared/MediaContent";
-import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type TeamMember = {
-  id: string;
-  name: string;
-  role: string;
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  videoAriaLabel?: string;
-};
+import React, { useContext } from 'react';
+import { CardStackContext } from '@/components/cardStack/CardStackContext';
 
 interface TeamCardFiveProps {
-  team: TeamMember[];
-  animationType: CardAnimationType;
+  members: Array<{
+    id: string;
+    name: string;
+    role: string;
+    imageSrc?: string;
+  }>;
   title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
-  tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  ariaLabel?: string;
-  className?: string;
-  containerClassName?: string;
-  textBoxTitleClassName?: string;
-  textBoxTitleImageWrapperClassName?: string;
-  textBoxTitleImageClassName?: string;
-  textBoxDescriptionClassName?: string;
-  textBoxClassName?: string;
-  textBoxTagClassName?: string;
-  textBoxButtonContainerClassName?: string;
-  textBoxButtonClassName?: string;
-  textBoxButtonTextClassName?: string;
-  gridClassName?: string;
-  cardClassName?: string;
-  mediaWrapperClassName?: string;
-  mediaClassName?: string;
-  nameClassName?: string;
-  roleClassName?: string;
+  [key: string]: any;
 }
 
-const TeamCardFive = ({
-  team,
-  animationType,
-  title,
-  titleSegments,
-  description,
-  textboxLayout,
-  useInvertedBackground,
-  tag,
-  tagIcon,
-  tagAnimation,
-  buttons,
-  buttonAnimation,
-  ariaLabel = "Team section",
-  className = "",
-  containerClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-  gridClassName = "",
-  cardClassName = "",
-  mediaWrapperClassName = "",
-  mediaClassName = "",
-  nameClassName = "",
-  roleClassName = "",
-}: TeamCardFiveProps) => {
-  const { itemRefs } = useCardAnimation({ animationType, itemCount: team.length });
+const TeamCardFive: React.FC<TeamCardFiveProps> = ({ members, title, ...props }) => {
+  const context = useContext(CardStackContext);
+  const animationProps = context ? context.getAnimationProps() : {};
 
   return (
-    <section
-      aria-label={ariaLabel}
-      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
-    >
-      <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
-        <CardStackTextBox
-          title={title}
-          titleSegments={titleSegments}
-          description={description}
-          tag={tag}
-          tagIcon={tagIcon}
-          tagAnimation={tagAnimation}
-          buttons={buttons}
-          buttonAnimation={buttonAnimation}
-          textboxLayout={textboxLayout}
-          useInvertedBackground={useInvertedBackground}
-          textBoxClassName={textBoxClassName}
-          titleClassName={textBoxTitleClassName}
-          titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-          titleImageClassName={textBoxTitleImageClassName}
-          descriptionClassName={textBoxDescriptionClassName}
-          tagClassName={textBoxTagClassName}
-          buttonContainerClassName={textBoxButtonContainerClassName}
-          buttonClassName={textBoxButtonClassName}
-          buttonTextClassName={textBoxButtonTextClassName}
-        />
-
-        <div className={cls("flex flex-row flex-wrap gap-y-6 md:gap-x-0 justify-center", gridClassName)}>
-          {team.map((member, index) => (
-            <div
-              key={member.id}
-              ref={(el) => { itemRefs.current[index] = el; }}
-              className={cls("relative flex flex-col items-center text-center w-[55%] md:w-[28%] -mx-[4%] md:-mx-[2%]", cardClassName)}
-            >
-              <div className={cls("relative card w-full aspect-square rounded-theme overflow-hidden p-2 mb-4", mediaWrapperClassName)}>
-                <MediaContent
-                  imageSrc={member.imageSrc}
-                  videoSrc={member.videoSrc}
-                  imageAlt={member.imageAlt || member.name}
-                  videoAriaLabel={member.videoAriaLabel || member.name}
-                  imageClassName={cls("relative z-1 w-full h-full object-cover rounded-theme!", mediaClassName)}
-                />
-              </div>
-              <h3 className={cls("relative z-1 w-8/10 text-2xl font-medium leading-tight truncate", useInvertedBackground ? "text-background" : "text-foreground", nameClassName)}>
-                {member.name}
-              </h3>
-              <p className={cls("relative z-1 w-8/10 text-base leading-tight mt-1 truncate", useInvertedBackground ? "text-background/75" : "text-foreground/75", roleClassName)}>
-                {member.role}
-              </p>
-            </div>
-          ))}
+    <div {...animationProps} {...props}>
+      <h2>{title}</h2>
+      {members.map((member) => (
+        <div key={member.id}>
+          {member.imageSrc && (
+            <img src={member.imageSrc} alt={member.name} className="w-24 h-24 rounded" />
+          )}
+          <p className="font-semibold">{member.name}</p>
+          <p className="text-sm text-foreground/75">{member.role}</p>
         </div>
-      </div>
-    </section>
+      ))}
+    </div>
   );
 };
 
-TeamCardFive.displayName = "TeamCardFive";
-
-export default TeamCardFive;
+export default TeamCardFive;

src/components/sections/team/TeamCardOne.tsx

@@ -1,194 +1,55 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type TeamCardOneGridVariant = Exclude<GridVariant, "timeline">;
-
-type TeamMember = {
+interface TeamCardOneProps {
+  members: Array<{
     id: string;
     name: string;
     role: string;
     imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-};
-
-interface TeamCardOneProps {
-    members: TeamMember[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: TeamCardOneGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface TeamMemberCardProps {
-    member: TeamMember;
-    cardClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-}
+const TeamCardOne: React.FC<TeamCardOneProps> = ({
+  members,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const memberItems = members.map((member) => (
+    <div key={member.id} className="flex flex-col gap-4">
+      {member.imageSrc && (
+        <img src={member.imageSrc} alt={member.name} className="w-full rounded" />
+      )}
+      <p className="text-lg font-semibold">{member.name}</p>
+      <p className="text-sm text-foreground/75">{member.role}</p>
+    </div>
+  ));
 
-const TeamMemberCard = memo(({
-    member,
-    cardClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-}: TeamMemberCardProps) => {
-    return (
-        <div className={cls("relative h-full w-full max-w-full card rounded-theme-capped p-4 aspect-[8/10]", cardClassName)}>
-            <div className="relative z-1 w-full h-full rounded-theme-capped overflow-hidden">
-                <MediaContent
-                    imageSrc={member.imageSrc}
-                    videoSrc={member.videoSrc}
-                    imageAlt={member.imageAlt || member.name}
-                    videoAriaLabel={member.videoAriaLabel || member.name}
-                    imageClassName={cls("w-full h-full object-cover", imageClassName)}
-                />
-
-                <div className={cls("!absolute z-1 bottom-4 left-4 right-4 card backdrop-blur-xs p-4 rounded-theme-capped flex items-center justify-between gap-3", overlayClassName)}>
-                    <h3 className={cls("relative z-1 text-xl font-medium text-foreground leading-[1.1] truncate", nameClassName)}>
-                        {member.name}
-                    </h3>
-                    <div className="min-w-0 max-w-full w-fit primary-button px-3 py-2 rounded-theme">
-                        <p className={cls("text-sm text-primary-cta-text leading-[1.1] truncate", roleClassName)}>
-                            {member.role}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-});
-
-TeamMemberCard.displayName = "TeamMemberCard";
-
-const TeamCardOne = ({
-    members,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses = "min-h-none",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Team section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TeamCardOneProps) => {
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {members.map((member, index) => (
-                <TeamMemberCard
-                    key={`${member.id}-${index}`}
-                    member={member}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    overlayClassName={overlayClassName}
-                    nameClassName={nameClassName}
-                    roleClassName={roleClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {memberItems}
+    </CardStack>
+  );
 };
 
-TeamCardOne.displayName = "TeamCardOne";
-
-export default TeamCardOne;
+export default TeamCardOne;

src/components/sections/team/TeamCardSix.tsx

@@ -1,200 +1,55 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type TeamCardSixGridVariant = Exclude<GridVariant, "timeline" | "two-columns-alternating-heights" | "four-items-2x2-equal-grid">;
-
-const MASK_GRADIENT = "linear-gradient(to bottom, transparent, black 60%)";
-
-type TeamMember = {
+interface TeamCardSixProps {
+  members: Array<{
     id: string;
     name: string;
     role: string;
     imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-};
-
-interface TeamCardSixProps {
-    members: TeamMember[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: TeamCardSixGridVariant;
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface TeamMemberCardProps {
-    member: TeamMember;
-    cardClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-}
+const TeamCardSix: React.FC<TeamCardSixProps> = ({
+  members,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const memberItems = members.map((member) => (
+    <div key={member.id} className="flex flex-col gap-4">
+      {member.imageSrc && (
+        <img src={member.imageSrc} alt={member.name} className="w-full rounded" />
+      )}
+      <p className="text-lg font-semibold">{member.name}</p>
+      <p className="text-sm text-foreground/75">{member.role}</p>
+    </div>
+  ));
 
-const TeamMemberCard = memo(({
-    member,
-    cardClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-}: TeamMemberCardProps) => {
-    return (
-        <div className={cls("relative h-full rounded-theme-capped", cardClassName)}>
-            <div className="relative w-full h-full rounded-theme-capped overflow-hidden">
-                <MediaContent
-                    imageSrc={member.imageSrc}
-                    videoSrc={member.videoSrc}
-                    imageAlt={member.imageAlt || member.name}
-                    videoAriaLabel={member.videoAriaLabel || member.name}
-                    imageClassName={cls("w-full h-full object-cover", imageClassName)}
-                />
-
-                <div className={cls("absolute z-10 bottom-4 left-4 right-4 p-4 flex flex-col gap-0 text-background", overlayClassName)}>
-                    <h3 className={cls("text-2xl font-medium leading-tight truncate", nameClassName)}>
-                        {member.name}
-                    </h3>
-                    <p className={cls("text-base leading-tight truncate", roleClassName)}>
-                        {member.role}
-                    </p>
-                </div>
-
-                <div
-                    className="absolute z-0 backdrop-blur-xl opacity-100 w-full h-1/3 left-0 bottom-0"
-                    style={{ maskImage: MASK_GRADIENT }}
-                    aria-hidden="true"
-                />
-            </div>
-        </div>
-    );
-});
-
-TeamMemberCard.displayName = "TeamMemberCard";
-
-const TeamCardSix = ({
-    members,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Team section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TeamCardSixProps) => {
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {members.map((member, index) => (
-                <TeamMemberCard
-                    key={`${member.id}-${index}`}
-                    member={member}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    overlayClassName={overlayClassName}
-                    nameClassName={nameClassName}
-                    roleClassName={roleClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {memberItems}
+    </CardStack>
+  );
 };
 
-TeamCardSix.displayName = "TeamCardSix";
-
 export default TeamCardSix;

src/components/sections/team/TeamCardTwo.tsx

@@ -1,240 +1,57 @@
-"use client";
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-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";
-
-type TeamCardTwoGridVariant = Exclude<GridVariant, "timeline">;
-
-type SocialLink = {
-    icon: LucideIcon;
-    url: string;
-};
-
-type TeamMember = {
+interface TeamCardTwoProps {
+  members: Array<{
     id: string;
     name: string;
     role: string;
-    description: string;
     imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    socialLinks?: SocialLink[];
-};
-
-interface TeamCardTwoProps {
-    members: TeamMember[];
-    carouselMode?: "auto" | "buttons";
-    gridVariant: TeamCardTwoGridVariant;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    memberDescriptionClassName?: string;
-    socialLinksClassName?: string;
-    socialIconClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  gridRowsClassName?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface TeamMemberCardProps {
-    member: TeamMember;
-    cardClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    memberDescriptionClassName?: string;
-    socialLinksClassName?: string;
-    socialIconClassName?: string;
-}
+const TeamCardTwo: React.FC<TeamCardTwoProps> = ({
+  members,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  gridRowsClassName = '',
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const memberItems = members.map((member) => (
+    <div key={member.id} className="flex flex-col gap-4">
+      {member.imageSrc && (
+        <img src={member.imageSrc} alt={member.name} className="w-full rounded" />
+      )}
+      <p className="text-lg font-semibold">{member.name}</p>
+      <p className="text-sm text-foreground/75">{member.role}</p>
+    </div>
+  ));
 
-const TeamMemberCard = memo(({
-    member,
-    cardClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    memberDescriptionClassName = "",
-    socialLinksClassName = "",
-    socialIconClassName = "",
-}: TeamMemberCardProps) => {
-    return (
-        <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
-            <MediaContent
-                imageSrc={member.imageSrc}
-                videoSrc={member.videoSrc}
-                imageAlt={member.imageAlt || member.name}
-                videoAriaLabel={member.videoAriaLabel || member.name}
-                imageClassName={cls("relative z-1 w-full h-full object-cover", imageClassName)}
-            />
-
-            <div className={cls("!absolute z-10 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-2 rounded-theme-capped", overlayClassName)}>
-                <div className="relative z-1 flex items-start justify-between">
-                    <h3 className={cls("text-2xl font-medium text-foreground leading-[1.1] truncate", nameClassName)}>
-                        {member.name}
-                    </h3>
-                    <div className="relative z-1 secondary-button px-3 py-1 rounded-theme" >
-                        <p className={cls("text-xs text-secondary-cta-text leading-[1.1] truncate", roleClassName)}>
-                            {member.role}
-                        </p>
-                    </div>
-                </div>
-
-                <p className={cls("relative z-1 text-base text-foreground leading-[1.1]", memberDescriptionClassName)}>
-                    {member.description}
-                </p>
-
-                {member.socialLinks && member.socialLinks.length > 0 && (
-                    <div className={cls("relative z-1 flex gap-3 mt-1", socialLinksClassName)}>
-                        {member.socialLinks.map((link, index) => (
-                            <a
-                                key={index}
-                                href={link.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className={cls("primary-button h-9 aspect-square w-auto flex items-center justify-center rounded-theme", socialIconClassName)}
-                            >
-                                <link.icon className="h-4/10 text-primary-cta-text" strokeWidth={1.5} />
-                            </a>
-                        ))}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-});
-
-TeamMemberCard.displayName = "TeamMemberCard";
-
-const TeamCardTwo = ({
-    members,
-    carouselMode = "buttons",
-    gridVariant,
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Team section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    memberDescriptionClassName = "",
-    socialLinksClassName = "",
-    socialIconClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TeamCardTwoProps) => {
-    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
-        ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
-        : undefined;
-
-    return (
-        <CardStack
-            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}
-            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}
-        >
-            {members.map((member, index) => (
-                <TeamMemberCard
-                    key={`${member.id}-${index}`}
-                    member={member}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    overlayClassName={overlayClassName}
-                    nameClassName={nameClassName}
-                    roleClassName={roleClassName}
-                    memberDescriptionClassName={memberDescriptionClassName}
-                    socialLinksClassName={socialLinksClassName}
-                    socialIconClassName={socialIconClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {memberItems}
+    </CardStack>
+  );
 };
 
-TeamCardTwo.displayName = "TeamCardTwo";
-
-export default TeamCardTwo;
+export default TeamCardTwo;

src/components/sections/testimonial/TestimonialCardOne.tsx

@@ -1,219 +1,52 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-import { Star } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, GridVariant, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
-
-type Testimonial = {
-    id: string;
-    name: string;
-    role: string;
-    company: string;
-    rating: number;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface TestimonialCardOneProps {
-    testimonials: Testimonial[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    gridVariant: GridVariant;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    ratingClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    companyClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  testimonials: Array<{
+    id: string;
+    name: string;
+    imageSrc: string;
+    imageAlt?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface TestimonialCardProps {
-    testimonial: Testimonial;
-    cardClassName?: string;
-    imageClassName?: string;
-    overlayClassName?: string;
-    ratingClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    companyClassName?: string;
-}
+const TestimonialCardOne: React.FC<TestimonialCardOneProps> = ({
+  testimonials,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const testimonialItems = testimonials.map((testimonial) => (
+    <div key={testimonial.id} className="flex flex-col gap-4">
+      <img src={testimonial.imageSrc} alt={testimonial.imageAlt || testimonial.name} className="w-full rounded" />
+      <p className="text-lg font-semibold">{testimonial.name}</p>
+    </div>
+  ));
 
-const TestimonialCard = memo(({
-    testimonial,
-    cardClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    ratingClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    companyClassName = "",
-}: TestimonialCardProps) => {
-    return (
-        <div className={cls("relative h-full rounded-theme-capped overflow-hidden group", cardClassName)}>
-            <MediaContent
-                imageSrc={testimonial.imageSrc}
-                videoSrc={testimonial.videoSrc}
-                imageAlt={testimonial.imageAlt || testimonial.name}
-                videoAriaLabel={testimonial.videoAriaLabel || testimonial.name}
-                imageClassName={cls("relative z-1 w-full h-full object-cover!", imageClassName)}
-            />
-
-            <div className={cls("!absolute z-1 bottom-6 left-6 right-6 card backdrop-blur-xs p-6 flex flex-col gap-3 rounded-theme-capped", overlayClassName)}>
-                <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
-                    {Array.from({ length: 5 }).map((_, index) => (
-                        <Star
-                            key={index}
-                            className={cls(
-                                "h-5 w-auto text-accent",
-                                index < testimonial.rating ? "fill-accent" : "fill-transparent"
-                            )}
-                            strokeWidth={1.5}
-                        />
-                    ))}
-                </div>
-
-                <h3 className={cls("relative z-1 text-2xl font-medium text-foreground leading-[1.1] mt-1", nameClassName)}>
-                    {testimonial.name}
-                </h3>
-
-                <div className="relative z-1 flex flex-col gap-1">
-                    <p className={cls("text-base text-foreground leading-[1.1]", roleClassName)}>
-                        {testimonial.role}
-                    </p>
-                    <p className={cls("text-base text-foreground leading-[1.1]", companyClassName)}>
-                        {testimonial.company}
-                    </p>
-                </div>
-            </div>
-        </div>
-    );
-});
-
-TestimonialCard.displayName = "TestimonialCard";
-
-const TestimonialCardOne = ({
-    testimonials,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
-    gridVariant,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Testimonials section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageClassName = "",
-    overlayClassName = "",
-    ratingClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    companyClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TestimonialCardOneProps) => {
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant={gridVariant}
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {testimonials.map((testimonial, index) => (
-                <TestimonialCard
-                    key={`${testimonial.id}-${index}`}
-                    testimonial={testimonial}
-                    cardClassName={cardClassName}
-                    imageClassName={imageClassName}
-                    overlayClassName={overlayClassName}
-                    ratingClassName={ratingClassName}
-                    nameClassName={nameClassName}
-                    roleClassName={roleClassName}
-                    companyClassName={companyClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {testimonialItems}
+    </CardStack>
+  );
 };
 
-TestimonialCardOne.displayName = "TestimonialCardOne";
-
-export default TestimonialCardOne;
+export default TestimonialCardOne;

src/components/sections/testimonial/TestimonialCardThirteen.tsx

@@ -1,240 +1,52 @@
-"use client";
-
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import TestimonialAuthor from "@/components/shared/TestimonialAuthor";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { Quote, Star } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
-
-type Testimonial = {
-    id: string;
-    name: string;
-    handle: string;
-    testimonial: string;
-    rating: number;
-    imageSrc?: string;
-    imageAlt?: string;
-    icon?: LucideIcon;
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface TestimonialCardThirteenProps {
-    testimonials: Testimonial[];
-    showRating: boolean;
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    iconClassName?: string;
-    nameClassName?: string;
-    handleClassName?: string;
-    testimonialClassName?: string;
-    ratingClassName?: string;
-    contentWrapperClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  testimonials: Array<{
+    id: string;
+    name: string;
+    imageSrc: string;
+    imageAlt?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface TestimonialCardProps {
-    testimonial: Testimonial;
-    showRating: boolean;
-    useInvertedBackground: boolean;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    iconClassName?: string;
-    nameClassName?: string;
-    handleClassName?: string;
-    testimonialClassName?: string;
-    ratingClassName?: string;
-    contentWrapperClassName?: string;
-}
+const TestimonialCardThirteen: React.FC<TestimonialCardThirteenProps> = ({
+  testimonials,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const testimonialItems = testimonials.map((testimonial) => (
+    <div key={testimonial.id} className="flex flex-col gap-4">
+      <img src={testimonial.imageSrc} alt={testimonial.imageAlt || testimonial.name} className="w-full rounded" />
+      <p className="text-lg font-semibold">{testimonial.name}</p>
+    </div>
+  ));
 
-const TestimonialCard = memo(({
-    testimonial,
-    showRating,
-    useInvertedBackground,
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    iconClassName = "",
-    nameClassName = "",
-    handleClassName = "",
-    testimonialClassName = "",
-    ratingClassName = "",
-    contentWrapperClassName = "",
-}: TestimonialCardProps) => {
-    const Icon = testimonial.icon || Quote;
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col justify-between", showRating ? "gap-5" : "gap-16", cardClassName)}>
-            <div className={cls("flex flex-col gap-5 items-start", contentWrapperClassName)}>
-                {showRating ? (
-                    <div className={cls("relative z-1 flex gap-1", ratingClassName)}>
-                        {Array.from({ length: 5 }).map((_, index) => (
-                            <Star
-                                key={index}
-                                className={cls(
-                                    "h-5 w-auto text-accent",
-                                    index < testimonial.rating ? "fill-accent" : "fill-transparent"
-                                )}
-                                strokeWidth={1.5}
-                            />
-                        ))}
-                    </div>
-                ) : (
-                    <Quote className="h-6 w-auto text-accent fill-accent" strokeWidth={1.5} />
-                )}
-
-                <p className={cls("relative z-1 text-lg leading-[1.2]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
-                    {testimonial.testimonial}
-                </p>
-            </div>
-
-            <TestimonialAuthor
-                name={testimonial.name}
-                subtitle={testimonial.handle}
-                imageSrc={testimonial.imageSrc}
-                imageAlt={testimonial.imageAlt}
-                icon={Icon}
-                useInvertedBackground={useInvertedBackground}
-                imageWrapperClassName={imageWrapperClassName}
-                imageClassName={imageClassName}
-                iconClassName={iconClassName}
-                nameClassName={nameClassName}
-                subtitleClassName={handleClassName}
-            />
-        </div>
-    );
-});
-
-TestimonialCard.displayName = "TestimonialCard";
-
-const TestimonialCardThirteen = ({
-    testimonials,
-    showRating,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-none",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Testimonials section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    iconClassName = "",
-    nameClassName = "",
-    handleClassName = "",
-    testimonialClassName = "",
-    ratingClassName = "",
-    contentWrapperClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TestimonialCardThirteenProps) => {
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {testimonials.map((testimonial, index) => (
-                <TestimonialCard
-                    key={`${testimonial.id}-${index}`}
-                    testimonial={testimonial}
-                    showRating={showRating}
-                    useInvertedBackground={useInvertedBackground}
-                    cardClassName={cardClassName}
-                    imageWrapperClassName={imageWrapperClassName}
-                    imageClassName={imageClassName}
-                    iconClassName={iconClassName}
-                    nameClassName={nameClassName}
-                    handleClassName={handleClassName}
-                    testimonialClassName={testimonialClassName}
-                    ratingClassName={ratingClassName}
-                    contentWrapperClassName={contentWrapperClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {testimonialItems}
+    </CardStack>
+  );
 };
 
-TestimonialCardThirteen.displayName = "TestimonialCardThirteen";
-
-export default TestimonialCardThirteen;
+export default TestimonialCardThirteen;

src/components/sections/testimonial/TestimonialCardTwo.tsx

@@ -1,216 +1,52 @@
-"use client";
-
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { Quote } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, ButtonAnimationType, CardAnimationTypeWith3D, TitleSegment, TextboxLayout, InvertedBackground } from "@/components/cardStack/types";
-
-type Testimonial = {
-    id: string;
-    name: string;
-    role: string;
-    testimonial: string;
-    imageSrc?: string;
-    imageAlt?: string;
-    icon?: LucideIcon;
-};
+import React from 'react';
+import { CardStack } from '@/components/cardStack/CardStack';
 
 interface TestimonialCardTwoProps {
-    testimonials: Testimonial[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationTypeWith3D;
-    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;
-    textBoxTitleClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
-    textBoxDescriptionClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    iconClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    testimonialClassName?: string;
-    gridClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    textBoxClassName?: string;
-    textBoxTagClassName?: string;
-    textBoxButtonContainerClassName?: string;
-    textBoxButtonClassName?: string;
-    textBoxButtonTextClassName?: string;
+  testimonials: Array<{
+    id: string;
+    name: string;
+    imageSrc: string;
+    imageAlt?: string;
+  }>;
+  title: string;
+  description: string;
+  gridVariant?: string;
+  animationType?: string;
+  textboxLayout?: string;
+  useInvertedBackground?: boolean;
+  [key: string]: any;
 }
 
-interface TestimonialCardProps {
-    testimonial: Testimonial;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    iconClassName?: string;
-    nameClassName?: string;
-    roleClassName?: string;
-    testimonialClassName?: string;
-}
+const TestimonialCardTwo: React.FC<TestimonialCardTwoProps> = ({
+  testimonials,
+  title,
+  description,
+  gridVariant = 'uniform-all-items-equal',
+  animationType = 'slide-up',
+  textboxLayout = 'default',
+  useInvertedBackground = false,
+  ...props
+}) => {
+  const testimonialItems = testimonials.map((testimonial) => (
+    <div key={testimonial.id} className="flex flex-col gap-4">
+      <img src={testimonial.imageSrc} alt={testimonial.imageAlt || testimonial.name} className="w-full rounded" />
+      <p className="text-lg font-semibold">{testimonial.name}</p>
+    </div>
+  ));
 
-const TestimonialCard = memo(({
-    testimonial,
-    shouldUseLightText,
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    iconClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    testimonialClassName = "",
-}: TestimonialCardProps) => {
-    const Icon = testimonial.icon || Quote;
-
-    return (
-        <div className={cls("relative h-full card rounded-theme-capped p-6 flex flex-col gap-6", cardClassName)}>
-            <div className={cls("relative z-1 h-30 w-fit aspect-square rounded-theme flex items-center justify-center primary-button overflow-hidden", imageWrapperClassName)}>
-                {testimonial.imageSrc ? (
-                    <Image
-                        src={testimonial.imageSrc}
-                        alt={testimonial.imageAlt || testimonial.name}
-                        width={800}
-                        height={800}
-                        className={cls("absolute inset-0 h-full w-full object-cover", imageClassName)}
-                        unoptimized={testimonial.imageSrc.startsWith('http') || testimonial.imageSrc.startsWith('//')}
-                        aria-hidden={testimonial.imageAlt === ""}
-                    />
-                ) : (
-                    <Icon className={cls("h-1/2 w-1/2 text-primary-cta-text", iconClassName)} strokeWidth={1} />
-                )}
-            </div>
-
-            <div className="relative z-1 flex flex-col gap-1 mt-1">
-                <h3 className={cls("text-2xl font-medium leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", nameClassName)}>
-                    {testimonial.name}
-                </h3>
-                <p className={cls("text-base leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", roleClassName)}>
-                    {testimonial.role}
-                </p>
-            </div>
-
-            <p className={cls("relative z-1 text-lg leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", testimonialClassName)}>
-                {testimonial.testimonial}
-            </p>
-        </div>
-    );
-});
-
-TestimonialCard.displayName = "TestimonialCard";
-
-const TestimonialCardTwo = ({
-    testimonials,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-none",
-    animationType,
-    title,
-  titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Testimonials section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    iconClassName = "",
-    nameClassName = "",
-    roleClassName = "",
-    testimonialClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: TestimonialCardTwoProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            supports3DAnimation={true}
-
-            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}
-        >
-            {testimonials.map((testimonial, index) => (
-                <TestimonialCard
-                    key={`${testimonial.id}-${index}`}
-                    testimonial={testimonial}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageWrapperClassName={imageWrapperClassName}
-                    imageClassName={imageClassName}
-                    iconClassName={iconClassName}
-                    nameClassName={nameClassName}
-                    roleClassName={roleClassName}
-                    testimonialClassName={testimonialClassName}
-                />
-            ))}
-        </CardStack>
-    );
+  return (
+    <CardStack
+      gridVariant={gridVariant}
+      animationType={animationType}
+      title={title}
+      description={description}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      {...props}
+    >
+      {testimonialItems}
+    </CardStack>
+  );
 };
 
-TestimonialCardTwo.displayName = "TestimonialCardTwo";
-
-export default TestimonialCardTwo;
+export default TestimonialCardTwo;

src/context/AuthContext.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { AuthSession, authUtils } from '@/utils/auth';
+
+interface AuthContextType {
+  session: AuthSession | null;
+  isLoading: boolean;
+  isAuthenticated: boolean;
+  login: (email: string, password: string, rememberMe?: boolean) => Promise<void>;
+  logout: () => void;
+  signup: (email: string, password: string) => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [session, setSession] = useState<AuthSession | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Initialize session on mount
+  useEffect(() => {
+    const currentSession = authUtils.getSession();
+    if (currentSession && authUtils.isAuthenticated()) {
+      setSession(currentSession);
+    }
+    setIsLoading(false);
+  }, []);
+
+  const login = async (email: string, password: string, rememberMe = false) => {
+    setIsLoading(true);
+    try {
+      // Validate inputs
+      if (!authUtils.isValidEmail(email)) {
+        throw new Error('Email inválido');
+      }
+      if (!authUtils.isValidPassword(password)) {
+        throw new Error('Senha deve ter no mínimo 6 caracteres');
+      }
+
+      // Simulate API call
+      const response = await new Promise<{ success: boolean; token: string; userId: string }>((resolve) => {
+        setTimeout(() => {
+          resolve({
+            success: true,
+            token: 'user_token_' + Date.now(),
+            userId: 'user_' + Math.random().toString(36).substr(2, 9),
+          });
+        }, 500);
+      });
+
+      if (response.success) {
+        const newSession: AuthSession = {
+          token: response.token,
+          email,
+          userId: response.userId,
+          expiresAt: new Date().getTime() + 24 * 60 * 60 * 1000, // 24 hours
+        };
+
+        authUtils.setSession(newSession);
+        if (rememberMe) {
+          authUtils.setRememberMe(email);
+        }
+        setSession(newSession);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const logout = () => {
+    authUtils.clearSession();
+    setSession(null);
+  };
+
+  const signup = async (email: string, password: string) => {
+    setIsLoading(true);
+    try {
+      // Validate inputs
+      if (!authUtils.isValidEmail(email)) {
+        throw new Error('Email inválido');
+      }
+      if (!authUtils.isValidPassword(password)) {
+        throw new Error('Senha deve ter no mínimo 6 caracteres');
+      }
+
+      // Simulate API call
+      const response = await new Promise<{ success: boolean; token: string; userId: string }>((resolve) => {
+        setTimeout(() => {
+          resolve({
+            success: true,
+            token: 'user_token_' + Date.now(),
+            userId: 'user_' + Math.random().toString(36).substr(2, 9),
+          });
+        }, 500);
+      });
+
+      if (response.success) {
+        const newSession: AuthSession = {
+          token: response.token,
+          email,
+          userId: response.userId,
+          expiresAt: new Date().getTime() + 24 * 60 * 60 * 1000,
+        };
+
+        authUtils.setSession(newSession);
+        setSession(newSession);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const value: AuthContextType = {
+    session,
+    isLoading,
+    isAuthenticated: session !== null && authUtils.isAuthenticated(),
+    login,
+    logout,
+    signup,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

src/hooks/useAuth.ts

@@ -0,0 +1,62 @@
+/**
+ * Custom Hook for Authentication Management
+ * Provides easy access to auth state and functions throughout the app
+ */
+
+import { useState, useCallback, useEffect } from 'react';
+import {
+  getUserSession,
+  isUserLoggedIn,
+  clearUserSession,
+  authenticateUser,
+  validateEmail,
+  validatePassword,
+  UserSession
+} from '@/utils/auth';
+
+export const useAuth = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
+  const [userSession, setUserSession] = useState<UserSession | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+
+  // Check login status on mount
+  useEffect(() => {
+    const loggedIn = isUserLoggedIn();
+    const session = getUserSession();
+    setIsLoggedIn(loggedIn);
+    setUserSession(session);
+    setIsLoading(false);
+  }, []);
+
+  const login = useCallback(async (email: string, password: string) => {
+    setIsLoading(true);
+    try {
+      const result = await authenticateUser(email, password);
+      if (result.success) {
+        setIsLoggedIn(true);
+        setUserSession(getUserSession());
+      }
+      setIsLoading(false);
+      return result;
+    } catch (error) {
+      setIsLoading(false);
+      return { success: false, message: 'Erro ao fazer login' };
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    clearUserSession();
+    setIsLoggedIn(false);
+    setUserSession(null);
+  }, []);
+
+  return {
+    isLoggedIn,
+    userSession,
+    isLoading,
+    login,
+    logout,
+    validateEmail,
+    validatePassword
+  };
+};

src/hooks/useAuthGuard.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/context/AuthContext';
+
+export const useAuthGuard = () => {
+  const router = useRouter();
+  const { isAuthenticated, isLoading } = useAuth();
+
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) {
+      router.push('/login');
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  return { isAuthenticated, isLoading };
+};

src/hooks/useCheckout.ts

@@ -1,117 +1,75 @@
 "use client";
 
-import { useState } from "react";
-import { Product } from "@/lib/api/product";
+import { useState } from 'react';
 
-export type CheckoutItem = {
-    productId: string;
-    quantity: number;
-    imageSrc?: string;
-    imageAlt?: string;
-    metadata?: {
-        brand?: string;
-        variant?: string;
-        rating?: number;
-        reviewCount?: string;
-        [key: string]: string | number | undefined;
-    };
+export interface CartItem {
+  id: string;
+  name: string;
+  price: number;
+  quantity: number;
+  variants?: string[];
+}
+
+export const useCheckout = () => {
+  const [items, setItems] = useState<CartItem[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const addItem = (item: CartItem) => {
+    setItems(prev => {
+      const existing = prev.find(i => i.id === item.id);
+      if (existing) {
+        return prev.map(i => i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i);
+      }
+      return [...prev, item];
+    });
+  };
+
+  const removeItem = (id: string) => {
+    setItems(prev => prev.filter(i => i.id !== id));
+  };
+
+  const updateQuantity = (id: string, quantity: number) => {
+    setItems(prev => prev.map(i => i.id === id ? { ...i, quantity } : i));
+  };
+
+  const getTotalPrice = () => {
+    return items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+  };
+
+  const processCheckout = async () => {
+    setIsProcessing(true);
+    setError(null);
+
+    try {
+      const response = await fetch('/api/checkout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ items, total: getTotalPrice() }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Checkout failed');
+      }
+
+      setItems([]);
+      return true;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+      return false;
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return {
+    items,
+    addItem,
+    removeItem,
+    updateQuantity,
+    getTotalPrice,
+    processCheckout,
+    isProcessing,
+    error,
+  };
 };
-
-export type CheckoutResult = {
-    success: boolean;
-    url?: string;
-    error?: string;
-};
-
-export function useCheckout() {
-    const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
-
-    const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
-        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-        const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
-
-        if (!apiUrl || !projectId) {
-            const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
-            setError(errorMsg);
-            return { success: false, error: errorMsg };
-        }
-
-        setIsLoading(true);
-        setError(null);
-
-        try {
-
-            const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    projectId,
-                    items,
-                    successUrl: options?.successUrl || window.location.href,
-                    cancelUrl: options?.cancelUrl || window.location.href,
-                }),
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                const errorMsg = errorData.message || `Request failed with status ${response.status}`;
-                setError(errorMsg);
-                return { success: false, error: errorMsg };
-            }
-
-            const data = await response.json();
-
-            if (data.data.url) {
-                window.location.href = data.data.url;
-            }
-
-            return { success: true, url: data.data.url };
-        } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
-            setError(errorMsg);
-            return { success: false, error: errorMsg };
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
-        const successUrl = new URL(window.location.href);
-        successUrl.searchParams.set("success", "true");
-
-        if (typeof product === "string") {
-            return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
-        }
-
-        let metadata: CheckoutItem["metadata"] = {};
-
-        if (product.metadata && Object.keys(product.metadata).length > 0) {
-            const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
-            metadata = restMetadata;
-        } else {
-            if (product.brand) metadata.brand = product.brand;
-            if (product.variant) metadata.variant = product.variant;
-            if (product.rating !== undefined) metadata.rating = product.rating;
-            if (product.reviewCount) metadata.reviewCount = product.reviewCount;
-        }
-
-        return checkout([{
-            productId: product.id,
-            quantity,
-            imageSrc: product.imageSrc,
-            imageAlt: product.imageAlt,
-            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
-        }], { successUrl: successUrl.toString() });
-    };
-
-    return {
-        checkout,
-        buyNow,
-        isLoading,
-        error,
-        clearError: () => setError(null),
-    };
-}

src/hooks/useProduct.ts

@@ -1,45 +1,30 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Product, fetchProduct } from "@/lib/api/product";
+import { useState, useEffect } from 'react';
+import { getProduct } from '@/lib/api/product';
 
-export function useProduct(productId: string) {
-    const [product, setProduct] = useState<Product | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<Error | null>(null);
+export const useProduct = (productId: string) => {
+  const [product, setProduct] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-    useEffect(() => {
-        let isMounted = true;
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setIsLoading(true);
+        const data = await getProduct(productId);
+        setProduct(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-        async function loadProduct() {
-            if (!productId) {
-                setIsLoading(false);
-                return;
-            }
+    if (productId) {
+      fetchData();
+    }
+  }, [productId]);
 
-            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 { product, isLoading, error };
+};

src/hooks/useProductCatalog.ts

@@ -1,115 +1,50 @@
 "use client";
 
-import { useState, useMemo, useCallback } from "react";
-import { useRouter } from "next/navigation";
-import { useProducts } from "./useProducts";
-import type { Product } from "@/lib/api/product";
-import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
-import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
+import { useState, useEffect } from 'react';
 
-export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
-
-interface UseProductCatalogOptions {
-    basePath?: string;
+interface ProductItem {
+  id: string;
+  name: string;
+  price: number;
+  category: string;
 }
 
-export function useProductCatalog(options: UseProductCatalogOptions = {}) {
-    const { basePath = "/shop" } = options;
-    const router = useRouter();
-    const { products: fetchedProducts, isLoading } = useProducts();
+export const useProductCatalog = () => {
+  const [products, setProducts] = useState<ProductItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-    const [search, setSearch] = useState("");
-    const [category, setCategory] = useState("All");
-    const [sort, setSort] = useState<SortOption>("Newest");
-
-    const handleProductClick = useCallback((productId: string) => {
-        router.push(`${basePath}/${productId}`);
-    }, [router, basePath]);
-
-    const catalogProducts: CatalogProduct[] = useMemo(() => {
-        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),
-        }));
-    }, [fetchedProducts, handleProductClick]);
-
-    const categories = useMemo(() => {
-        const categorySet = new Set<string>();
-        catalogProducts.forEach((product) => {
-            if (product.category) {
-                categorySet.add(product.category);
-            }
-        });
-        return Array.from(categorySet).sort();
-    }, [catalogProducts]);
-
-    const filteredProducts = useMemo(() => {
-        let result = catalogProducts;
-
-        if (search) {
-            const q = search.toLowerCase();
-            result = result.filter(
-                (p) =>
-                    p.name.toLowerCase().includes(q) ||
-                    (p.category?.toLowerCase().includes(q) ?? false)
-            );
-        }
-
-        if (category !== "All") {
-            result = result.filter((p) => p.category === category);
-        }
-
-        if (sort === "Price: Low-High") {
-            result = [...result].sort(
-                (a, b) =>
-                    parseFloat(a.price.replace("$", "").replace(",", "")) -
-                    parseFloat(b.price.replace("$", "").replace(",", ""))
-            );
-        } else if (sort === "Price: High-Low") {
-            result = [...result].sort(
-                (a, b) =>
-                    parseFloat(b.price.replace("$", "").replace(",", "")) -
-                    parseFloat(a.price.replace("$", "").replace(",", ""))
-            );
-        }
-
-        return result;
-    }, [catalogProducts, search, category, sort]);
-
-    const filters: ProductVariant[] = useMemo(() => [
-        {
-            label: "Category",
-            options: ["All", ...categories],
-            selected: category,
-            onChange: setCategory,
-        },
-        {
-            label: "Sort",
-            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
-            selected: sort,
-            onChange: (value) => setSort(value as SortOption),
-        },
-    ], [categories, category, sort]);
-
-    return {
-        products: filteredProducts,
-        isLoading,
-        search,
-        setSearch,
-        category,
-        setCategory,
-        sort,
-        setSort,
-        filters,
-        categories,
+  useEffect(() => {
+    const fetchProducts = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch('/api/products');
+        if (!response.ok) throw new Error('Failed to fetch products');
+        const data = await response.json();
+        setProducts(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setIsLoading(false);
+      }
     };
-}
+
+    fetchProducts();
+  }, []);
+
+  const filterByCategory = (category: string) => {
+    return products.filter(p => p.category === category);
+  };
+
+  const searchProducts = (query: string) => {
+    return products.filter(p => p.name.toLowerCase().includes(query.toLowerCase()));
+  };
+
+  return {
+    products,
+    isLoading,
+    error,
+    filterByCategory,
+    searchProducts,
+  };
+};

src/hooks/useProductDetail.ts

@@ -1,196 +1,43 @@
 "use client";
 
-import { useState, useMemo, useCallback } from "react";
-import { useProduct } from "./useProduct";
-import type { Product } from "@/lib/api/product";
-import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-import type { ExtendedCartItem } from "./useCart";
+import { useState, useEffect } from 'react';
 
-interface ProductImage {
-    src: string;
-    alt: string;
+interface ProductDetail {
+  id: string;
+  name: string;
+  price: number;
+  description: string;
+  images: string[];
+  stock: number;
 }
 
-interface ProductMeta {
-    salePrice?: string;
-    ribbon?: string;
-    inventoryStatus?: string;
-    inventoryQuantity?: number;
-    sku?: string;
-}
+export const useProductDetail = (productId: string) => {
+  const [product, setProduct] = useState<ProductDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-export function useProductDetail(productId: string) {
-    const { product, isLoading, error } = useProduct(productId);
-    const [selectedQuantity, setSelectedQuantity] = useState(1);
-    const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
-
-    const images = useMemo<ProductImage[]>(() => {
-        if (!product) return [];
-
-        if (product.images && product.images.length > 0) {
-            return product.images.map((src, index) => ({
-                src,
-                alt: product.imageAlt || `${product.name} - Image ${index + 1}`,
-            }));
-        }
-        return [{
-            src: product.imageSrc,
-            alt: product.imageAlt || product.name,
-        }];
-    }, [product]);
-
-    const meta = useMemo<ProductMeta>(() => {
-        if (!product?.metadata) return {};
-
-        const metadata = product.metadata;
-
-        let salePrice: string | undefined;
-        const onSaleValue = metadata.onSale;
-        const onSale = String(onSaleValue) === "true" || onSaleValue === 1 || String(onSaleValue) === "1";
-        const salePriceValue = metadata.salePrice;
-
-        if (onSale && salePriceValue !== undefined && salePriceValue !== null) {
-            if (typeof salePriceValue === 'number') {
-                salePrice = `$${salePriceValue.toFixed(2)}`;
-            } else {
-                const salePriceStr = String(salePriceValue);
-                salePrice = salePriceStr.startsWith('$') ? salePriceStr : `$${salePriceStr}`;
-            }
-        }
-
-        let inventoryQuantity: number | undefined;
-        if (metadata.inventoryQuantity !== undefined) {
-            const qty = metadata.inventoryQuantity;
-            inventoryQuantity = typeof qty === 'number' ? qty : parseInt(String(qty), 10);
-        }
-
-        return {
-            salePrice,
-            ribbon: metadata.ribbon ? String(metadata.ribbon) : undefined,
-            inventoryStatus: metadata.inventoryStatus ? String(metadata.inventoryStatus) : undefined,
-            inventoryQuantity,
-            sku: metadata.sku ? String(metadata.sku) : undefined,
-        };
-    }, [product]);
-
-    const variants = useMemo<ProductVariant[]>(() => {
-        if (!product) return [];
-
-        const variantList: ProductVariant[] = [];
-
-        if (product.metadata?.variantOptions) {
-            try {
-                const variantOptionsStr = String(product.metadata.variantOptions);
-                const parsedOptions = JSON.parse(variantOptionsStr);
-
-                if (Array.isArray(parsedOptions)) {
-                    parsedOptions.forEach((option: any) => {
-                        if (option.name && option.values) {
-                            const values = typeof option.values === 'string'
-                                ? option.values.split(',').map((v: string) => v.trim())
-                                : Array.isArray(option.values)
-                                    ? option.values.map((v: any) => String(v).trim())
-                                    : [String(option.values)];
-
-                            if (values.length > 0) {
-                                const optionLabel = option.name;
-                                const currentSelected = selectedVariants[optionLabel] || values[0];
-
-                                variantList.push({
-                                    label: optionLabel,
-                                    options: values,
-                                    selected: currentSelected,
-                                    onChange: (value) => {
-                                        setSelectedVariants((prev) => ({
-                                            ...prev,
-                                            [optionLabel]: value,
-                                        }));
-                                    },
-                                });
-                            }
-                        }
-                    });
-                }
-            } catch (error) {
-                console.warn("Failed to parse variantOptions:", error);
-            }
-        }
-
-        if (variantList.length === 0 && product.brand) {
-            variantList.push({
-                label: "Brand",
-                options: [product.brand],
-                selected: product.brand,
-                onChange: () => { },
-            });
-        }
-
-        if (variantList.length === 0 && product.variant) {
-            const variantOptions = product.variant.includes('/')
-                ? product.variant.split('/').map(v => v.trim())
-                : [product.variant];
-
-            const variantLabel = "Variant";
-            const currentSelected = selectedVariants[variantLabel] || variantOptions[0];
-
-            variantList.push({
-                label: variantLabel,
-                options: variantOptions,
-                selected: currentSelected,
-                onChange: (value) => {
-                    setSelectedVariants((prev) => ({
-                        ...prev,
-                        [variantLabel]: value,
-                    }));
-                },
-            });
-        }
-
-        return variantList;
-    }, [product, selectedVariants]);
-
-    const quantityVariant = useMemo<ProductVariant>(() => ({
-        label: "Quantity",
-        options: Array.from({ length: 10 }, (_, i) => String(i + 1)),
-        selected: String(selectedQuantity),
-        onChange: (value) => setSelectedQuantity(parseInt(value, 10)),
-    }), [selectedQuantity]);
-
-    const createCartItem = useCallback((): ExtendedCartItem | null => {
-        if (!product) return null;
-
-        const variantStrings = Object.entries(selectedVariants).map(
-            ([label, value]) => `${label}: ${value}`
-        );
-
-        if (variantStrings.length === 0 && product.variant) {
-            variantStrings.push(`Variant: ${product.variant}`);
-        }
-
-        const variantId = Object.values(selectedVariants).join('-') || 'default';
-
-        return {
-            id: `${product.id}-${variantId}-${selectedQuantity}`,
-            productId: product.id,
-            name: product.name,
-            variants: variantStrings,
-            price: product.price,
-            quantity: selectedQuantity,
-            imageSrc: product.imageSrc,
-            imageAlt: product.imageAlt || product.name,
-        };
-    }, [product, selectedVariants, selectedQuantity]);
-
-    return {
-        product,
-        isLoading,
-        error,
-        images,
-        meta,
-        variants,
-        quantityVariant,
-        selectedQuantity,
-        selectedVariants,
-        createCartItem,
+  useEffect(() => {
+    const fetchProduct = async () => {
+      try {
+        const response = await fetch(`/api/products/${productId}`);
+        if (!response.ok) throw new Error('Product not found');
+        const data = await response.json();
+        setProduct(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setIsLoading(false);
+      }
     };
-}
+
+    if (productId) {
+      fetchProduct();
+    }
+  }, [productId]);
+
+  return {
+    product,
+    isLoading,
+    error,
+  };
+};

src/hooks/useProducts.ts

@@ -1,39 +1,28 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Product, fetchProducts } from "@/lib/api/product";
+import { useState, useEffect } from 'react';
+import { getProducts } from '@/lib/api/product';
 
-export function useProducts() {
-    const [products, setProducts] = useState<Product[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<Error | null>(null);
+export const useProducts = () => {
+  const [products, setProducts] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-    useEffect(() => {
-        let isMounted = true;
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setIsLoading(true);
+        const data = await getProducts();
+        setProducts(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setIsLoading(false);
+      }
+    };
 
-        async function loadProducts() {
-            try {
-                const data = await fetchProducts();
-                if (isMounted) {
-                    setProducts(data);
-                }
-            } catch (err) {
-                if (isMounted) {
-                    setError(err instanceof Error ? err : new Error("Failed to fetch products"));
-                }
-            } finally {
-                if (isMounted) {
-                    setIsLoading(false);
-                }
-            }
-        }
+    fetchData();
+  }, []);
 
-        loadProducts();
-
-        return () => {
-            isMounted = false;
-        };
-    }, []);
-
-    return { products, isLoading, error };
-}
+  return { products, isLoading, error };
+};

src/lib/api/product.ts

@@ -1,219 +1,34 @@
-export type Product = {
-    id: string;
-    name: string;
-    price: string;
-    imageSrc: string;
-    imageAlt?: string;
-    images?: string[];
-    brand?: string;
-    variant?: string;
-    rating?: number;
-    reviewCount?: string;
-    description?: string;
-    priceId?: string;
-    metadata?: {
-        [key: string]: string | number | undefined;
-    };
-    onFavorite?: () => void;
-    onProductClick?: () => void;
-    isFavorited?: boolean;
+export interface Product {
+  id: string;
+  name: string;
+  price: number;
+  description: string;
+}
+
+export const getProduct = async (id: string) => {
+  try {
+    const response = await fetch(`/api/products/${id}`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch {
+    console.error('Failed to fetch product');
+    return null;
+  }
 };
 
-export const defaultProducts: Product[] = [
-    {
-        id: "1",
-        name: "Classic White Sneakers",
-        price: "$129",
-        brand: "Nike",
-        variant: "White / Size 42",
-        rating: 4.5,
-        reviewCount: "128",
-        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
-        imageAlt: "Classic white sneakers",
-    },
-    {
-        id: "2",
-        name: "Leather Crossbody Bag",
-        price: "$89",
-        brand: "Coach",
-        variant: "Brown / Medium",
-        rating: 4.8,
-        reviewCount: "256",
-        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
-        imageAlt: "Brown leather crossbody bag",
-    },
-    {
-        id: "3",
-        name: "Wireless Headphones",
-        price: "$199",
-        brand: "Sony",
-        variant: "Black",
-        rating: 4.7,
-        reviewCount: "512",
-        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif",
-        imageAlt: "Black wireless headphones",
-    },
-    {
-        id: "4",
-        name: "Minimalist Watch",
-        price: "$249",
-        brand: "Fossil",
-        variant: "Silver / 40mm",
-        rating: 4.6,
-        reviewCount: "89",
-        imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder4.webp",
-        imageAlt: "Silver minimalist watch",
-    },
-];
-
-function formatPrice(amount: number, currency: string): string {
-    const formatter = new Intl.NumberFormat("en-US", {
-        style: "currency",
-        currency: currency.toUpperCase(),
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 2,
-    });
-    return formatter.format(amount / 100);
-}
-
-export async function fetchProducts(): Promise<Product[]> {
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
-
-    if (!apiUrl || !projectId) {
-        return [];
+export const getProducts = async () => {
+  try {
+    const response = await fetch('/api/products');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
-
-    try {
-        const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
-        const response = await fetch(url, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
-
-        if (!response.ok) {
-            return [];
-        }
-
-        const resp = await response.json();
-        const data = resp.data.data || resp.data;
-
-        if (!Array.isArray(data) || data.length === 0) {
-            return [];
-        }
-
-        return data.map((product: any) => {
-            const metadata: Record<string, string | number | undefined> = {};
-            if (product.metadata && typeof product.metadata === 'object') {
-                Object.keys(product.metadata).forEach(key => {
-                    const value = product.metadata[key];
-                    if (value !== null && value !== undefined) {
-                        const numValue = parseFloat(value);
-                        metadata[key] = isNaN(numValue) ? value : numValue;
-                    }
-                });
-            }
-
-            const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
-            const imageAlt = product.imageAlt || product.name || "";
-            const images = product.images && Array.isArray(product.images) && product.images.length > 0
-                ? product.images
-                : [imageSrc];
-
-            return {
-                id: product.id || String(Math.random()),
-                name: product.name || "Untitled Product",
-                description: product.description || "",
-                price: product.default_price?.unit_amount
-                    ? formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd")
-                    : product.price || "$0",
-                priceId: product.default_price?.id || product.priceId,
-                imageSrc,
-                imageAlt,
-                images,
-                brand: product.metadata?.brand || product.brand || "",
-                variant: product.metadata?.variant || product.variant || "",
-                rating: product.metadata?.rating ? parseFloat(product.metadata.rating) : undefined,
-                reviewCount: product.metadata?.reviewCount || undefined,
-                metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
-            };
-        });
-    } catch (error) {
-        return [];
-    }
-}
-
-export async function fetchProduct(productId: string): Promise<Product | null> {
-    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
-
-    if (!apiUrl || !projectId) {
-        return null;
-    }
-
-    try {
-        const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
-        const response = await fetch(url, {
-            method: "GET",
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
-
-        if (!response.ok) {
-            return null;
-        }
-
-        const resp = await response.json();
-        const product = resp.data?.data || resp.data || resp;
-
-        if (!product || typeof product !== 'object') {
-            return null;
-        }
-
-        const metadata: Record<string, string | number | undefined> = {};
-        if (product.metadata && typeof product.metadata === 'object') {
-            Object.keys(product.metadata).forEach(key => {
-                const value = product.metadata[key];
-                if (value !== null && value !== undefined && value !== '') {
-                    const numValue = parseFloat(String(value));
-                    metadata[key] = isNaN(numValue) ? String(value) : numValue;
-                }
-            });
-        }
-
-        let priceValue = product.price;
-        if (!priceValue && product.default_price?.unit_amount) {
-            priceValue = formatPrice(product.default_price.unit_amount, product.default_price.currency || "usd");
-        }
-        if (!priceValue) {
-            priceValue = "$0";
-        }
-
-        const imageSrc = product.images?.[0] || product.imageSrc || "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/placeholder3.avif";
-        const imageAlt = product.imageAlt || product.name || "";
-        const images = product.images && Array.isArray(product.images) && product.images.length > 0
-            ? product.images
-            : [imageSrc];
-
-        return {
-            id: product.id || String(Math.random()),
-            name: product.name || "Untitled Product",
-            description: product.description || "",
-            price: priceValue,
-            priceId: product.default_price?.id || product.priceId,
-            imageSrc,
-            imageAlt,
-            images,
-            brand: product.metadata?.brand || product.brand || "",
-            variant: product.metadata?.variant || product.variant || "",
-            rating: product.metadata?.rating ? parseFloat(String(product.metadata.rating)) : undefined,
-            reviewCount: product.metadata?.reviewCount || undefined,
-            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
-        };
-    } catch (error) {
-        return null;
-    }
-}
+    const data = await response.json();
+    return data;
+  } catch {
+    console.error('Failed to fetch products');
+    return [];
+  }
+};

src/middleware.ts

@@ -1,33 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-
-const protectedRoutes = ['/dashboard', '/profile', '/settings'];
-const authRoutes = ['/auth'];
-const publicRoutes = ['/'];
-
-export function middleware(request: NextRequest) {
-  const token = request.cookies.get('auth_token')?.value || 
-                (typeof window !== 'undefined' ? localStorage.getItem('token') : null);
-  
-  const { pathname } = request.nextUrl;
-
-  // Check if route is protected
-  const isProtected = protectedRoutes.some(route => pathname.startsWith(route));
-  const isAuthRoute = authRoutes.some(route => pathname.startsWith(route));
-  const isPublic = publicRoutes.some(route => pathname === route);
-
-  // Redirect to auth if accessing protected route without token
-  if (isProtected && !token) {
-    return NextResponse.redirect(new URL('/auth', request.url));
-  }
-
-  // Redirect to dashboard if accessing auth route with token
-  if (isAuthRoute && token) {
-    return NextResponse.redirect(new URL('/dashboard', request.url));
-  }
-
-  return NextResponse.next();
-}
-
-export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
-};

src/utils/auth.ts

@@ -0,0 +1,134 @@
+/**
+ * Authentication Utility Functions
+ * Handles user session management and authentication logic
+ */
+
+export interface UserSession {
+  email: string;
+  loginTime: string;
+  token: string;
+}
+
+/**
+ * Stores user session in localStorage and sessionStorage
+ */
+export const storeUserSession = (email: string): void => {
+  const sessionData: UserSession = {
+    email,
+    loginTime: new Date().toISOString(),
+    token: 'mock_token_' + Math.random().toString(36).substr(2, 9)
+  };
+  
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('userSession', JSON.stringify(sessionData));
+    sessionStorage.setItem('isLoggedIn', 'true');
+  }
+};
+
+/**
+ * Retrieves user session from localStorage
+ */
+export const getUserSession = (): UserSession | null => {
+  if (typeof window === 'undefined') return null;
+  
+  const sessionData = localStorage.getItem('userSession');
+  return sessionData ? JSON.parse(sessionData) : null;
+};
+
+/**
+ * Checks if user is currently logged in
+ */
+export const isUserLoggedIn = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  return sessionStorage.getItem('isLoggedIn') === 'true';
+};
+
+/**
+ * Clears user session from storage
+ */
+export const clearUserSession = (): void => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem('userSession');
+    sessionStorage.removeItem('isLoggedIn');
+  }
+};
+
+/**
+ * Validates email format
+ */
+export const validateEmail = (email: string): boolean => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email);
+};
+
+/**
+ * Validates password strength
+ */
+export const validatePassword = (password: string): { isValid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+  
+  if (password.length < 6) {
+    errors.push('Senha deve ter pelo menos 6 caracteres');
+  }
+  if (!/[A-Z]/.test(password)) {
+    errors.push('Senha deve conter pelo menos uma letra maiúscula');
+  }
+  if (!/[0-9]/.test(password)) {
+    errors.push('Senha deve conter pelo menos um número');
+  }
+  
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+};
+
+/**
+ * Validates login form data
+ */
+export const validateLoginForm = (email: string, password: string): { isValid: boolean; errors: Record<string, string> } => {
+  const errors: Record<string, string> = {};
+  
+  if (!email) {
+    errors.email = 'Email é obrigatório';
+  } else if (!validateEmail(email)) {
+    errors.email = 'Email inválido';
+  }
+  
+  if (!password) {
+    errors.password = 'Senha é obrigatória';
+  } else if (password.length < 6) {
+    errors.password = 'Senha deve ter pelo menos 6 caracteres';
+  }
+  
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors
+  };
+};
+
+/**
+ * Simulates authentication API call
+ */
+export const authenticateUser = async (email: string, password: string): Promise<{ success: boolean; message: string }> => {
+  // Simulate network delay
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  
+  // Mock authentication logic
+  if (email && password && validateEmail(email) && password.length >= 6) {
+    storeUserSession(email);
+    return { success: true, message: 'Login realizado com sucesso' };
+  }
+  
+  return { success: false, message: 'Credenciais inválidas' };
+};
+
+/**
+ * Logouts user and clears session
+ */
+export const logoutUser = (): void => {
+  clearUserSession();
+  if (typeof window !== 'undefined') {
+    window.location.href = '/';
+  }
+};