Merge version_6 into main

Merge version_6 into main

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

@@ -0,0 +1,61 @@
+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 { email, password } = await request.json();
+
+    // Validation
+    if (!email || !password) {
+      return NextResponse.json(
+        { message: "Email e senha são obrigatórios" },
+        { status: 400 }
+      );
+    }
+
+    // Find user
+    const user = users.find((u) => u.email === email);
+    if (!user) {
+      return NextResponse.json(
+        { message: "Email ou senha incorretos" },
+        { status: 401 }
+      );
+    }
+
+    // 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" }
+    );
+
+    return NextResponse.json(
+      {
+        token,
+        user: { id: user.id, name: user.name, email: user.email },
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Login error:", error);
+    return NextResponse.json(
+      { message: "Erro ao fazer login" },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    // Clear session/token
+    const response = NextResponse.json(
+      { message: 'Logout successful' },
+      { status: 200 }
+    );
+
+    // Clear auth cookie if used
+    response.cookies.delete('auth_token');
+
+    return response;
+  } catch (error) {
+    return NextResponse.json(
+      { message: 'Logout failed' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,67 @@
+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/route.ts

@@ -0,0 +1,30 @@
+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" },
+        { status: 401 }
+      );
+    }
+
+    const token = authHeader.substring(7);
+    const decoded = jwt.verify(token, JWT_SECRET) as any;
+
+    return NextResponse.json(
+      { user: { id: decoded.id, email: decoded.email, name: decoded.name } },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Verify error:", error);
+    return NextResponse.json(
+      { message: "Token inválido ou expirado" },
+      { status: 401 }
+    );
+  }
+}

src/app/auth/login/page.tsx

@@ -0,0 +1,182 @@
+"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

@@ -0,0 +1,317 @@
+"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

@@ -0,0 +1,267 @@
+"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

@@ -1,64 +0,0 @@
-'use client';
-
-import React, { useCallback } from 'react';
-import { useWorkoutTracking } from '@/app/hooks/useWorkoutTracking';
-import { WorkoutSession, CardioSession, NutritionLog } from '@/app/lib/storage/workoutStorage';
-
-export interface WorkoutDataIntegrationProps {
-  onSave?: (data: any) => void;
-  autoSave?: boolean;
-}
-
-/**
- * WorkoutDataIntegration component that provides workout tracking context
- * Use this component to wrap sections that need to save workout data
- */
-export const WorkoutDataIntegration: React.FC<{
-  children: React.ReactNode;
-} & WorkoutDataIntegrationProps> = ({ children, onSave, autoSave = true }) => {
-  const { metrics, addWorkoutSession, addCardioSession, addNutritionLog, refreshMetrics } =
-    useWorkoutTracking();
-
-  const handleWorkoutSave = useCallback(
-    (session: WorkoutSession) => {
-      addWorkoutSession(session);
-      if (onSave) onSave({ type: 'workout', data: session });
-    },
-    [addWorkoutSession, onSave]
-  );
-
-  const handleCardioSave = useCallback(
-    (session: CardioSession) => {
-      addCardioSession(session);
-      if (onSave) onSave({ type: 'cardio', data: session });
-    },
-    [addCardioSession, onSave]
-  );
-
-  const handleNutritionSave = useCallback(
-    (log: NutritionLog) => {
-      addNutritionLog(log);
-      if (onSave) onSave({ type: 'nutrition', data: log });
-    },
-    [addNutritionLog, onSave]
-  );
-
-  // Expose save functions via context or props
-  const contextValue = {
-    metrics,
-    handleWorkoutSave,
-    handleCardioSave,
-    handleNutritionSave,
-    refreshMetrics,
-    autoSave,
-  };
-
-  // Clone children and pass context data as props
-  return (
-    <div data-workout-integration="true" data-context={JSON.stringify(contextValue)}>
-      {children}
-    </div>
-  );
-};
-
-export default WorkoutDataIntegration;

src/app/dashboard/page.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useEffect, 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 { LogOut, User, Mail, Zap } from 'lucide-react';
+
+interface UserData {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [user, setUser] = useState<UserData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem("authToken");
+      const userData = localStorage.getItem("user");
+
+      if (!token || !userData) {
+        router.push("/auth/login");
+        return;
+      }
+
+      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();
+  }, [router]);
+
+  const handleLogout = () => {
+    localStorage.removeItem("authToken");
+    localStorage.removeItem("user");
+    router.push("/");
+  };
+
+  if (loading) {
+    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>
+    );
+  }
+
+  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: "Sair", href: "/" }}
+          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>
+
+          {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>
+                  </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>
+                </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>
+              </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>
+          )}
+        </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/hooks/useWorkoutTracking.ts

@@ -1,56 +0,0 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-import {
-  saveWorkoutSession,
-  saveCardioSession,
-  saveNutritionLog,
-  getUserMetrics,
-  getWorkoutSessions,
-  getCardioSessions,
-  getNutritionLogs,
-  WorkoutSession,
-  CardioSession,
-  NutritionLog,
-  UserMetrics,
-} from '@/app/lib/storage/workoutStorage';
-
-export const useWorkoutTracking = () => {
-  const [metrics, setMetrics] = useState<UserMetrics>(getUserMetrics());
-  const [workouts, setWorkouts] = useState<WorkoutSession[]>(getWorkoutSessions());
-  const [cardioSessions, setCardioSessions] = useState<CardioSession[]>(getCardioSessions());
-  const [nutritionLogs, setNutritionLogs] = useState<NutritionLog[]>(getNutritionLogs());
-
-  const addWorkoutSession = useCallback((session: WorkoutSession) => {
-    saveWorkoutSession(session);
-    setWorkouts(getWorkoutSessions());
-    setMetrics(getUserMetrics());
-  }, []);
-
-  const addCardioSession = useCallback((session: CardioSession) => {
-    saveCardioSession(session);
-    setCardioSessions(getCardioSessions());
-    setMetrics(getUserMetrics());
-  }, []);
-
-  const addNutritionLog = useCallback((log: NutritionLog) => {
-    saveNutritionLog(log);
-    setNutritionLogs(getNutritionLogs());
-    setMetrics(getUserMetrics());
-  }, []);
-
-  const refreshMetrics = useCallback(() => {
-    setMetrics(getUserMetrics());
-  }, []);
-
-  return {
-    metrics,
-    workouts,
-    cardioSessions,
-    nutritionLogs,
-    addWorkoutSession,
-    addCardioSession,
-    addNutritionLog,
-    refreshMetrics,
-  };
-};

src/app/lib/storage/workoutStorage.ts

@@ -1,309 +0,0 @@
-/**
- * Workout and metrics data persistence layer
- * Handles saving and retrieving workout data from localStorage
- */
-
-export interface WorkoutSet {
-  reps: number;
-  weight: number;
-  timestamp: number;
-}
-
-export interface WorkoutSession {
-  id: string;
-  exerciseName: string;
-  date: string;
-  sets: WorkoutSet[];
-  duration: number; // in seconds
-  caloriesBurned: number;
-  notes?: string;
-}
-
-export interface CardioSession {
-  id: string;
-  type: 'running' | 'walking' | 'cycling';
-  date: string;
-  distance: number; // in km
-  duration: number; // in seconds
-  caloriesBurned: number;
-  pace: number; // km/h
-  steps?: number;
-  route?: string;
-}
-
-export interface NutritionLog {
-  id: string;
-  date: string;
-  calories: number;
-  protein: number;
-  carbs: number;
-  fats: number;
-  meals: string[];
-}
-
-export interface UserMetrics {
-  totalWorkouts: number;
-  totalCardioDistance: number;
-  totalCaloriesBurned: number;
-  currentStreak: number;
-  personalRecords: Record<string, number>;
-  lastUpdated: number;
-}
-
-const STORAGE_KEYS = {
-  WORKOUT_SESSIONS: 'fitflow_workout_sessions',
-  CARDIO_SESSIONS: 'fitflow_cardio_sessions',
-  NUTRITION_LOGS: 'fitflow_nutrition_logs',
-  USER_METRICS: 'fitflow_user_metrics',
-};
-
-/**
- * Save a workout session to localStorage
- */
-export const saveWorkoutSession = (session: WorkoutSession): void => {
-  if (typeof window === 'undefined') return;
-  
-  try {
-    const sessions = getWorkoutSessions();
-    sessions.push(session);
-    localStorage.setItem(STORAGE_KEYS.WORKOUT_SESSIONS, JSON.stringify(sessions));
-    updateUserMetrics();
-  } catch (error) {
-    console.error('Error saving workout session:', error);
-  }
-};
-
-/**
- * Get all workout sessions from localStorage
- */
-export const getWorkoutSessions = (): WorkoutSession[] => {
-  if (typeof window === 'undefined') return [];
-  
-  try {
-    const data = localStorage.getItem(STORAGE_KEYS.WORKOUT_SESSIONS);
-    return data ? JSON.parse(data) : [];
-  } catch (error) {
-    console.error('Error retrieving workout sessions:', error);
-    return [];
-  }
-};
-
-/**
- * Save a cardio session to localStorage
- */
-export const saveCardioSession = (session: CardioSession): void => {
-  if (typeof window === 'undefined') return;
-  
-  try {
-    const sessions = getCardioSessions();
-    sessions.push(session);
-    localStorage.setItem(STORAGE_KEYS.CARDIO_SESSIONS, JSON.stringify(sessions));
-    updateUserMetrics();
-  } catch (error) {
-    console.error('Error saving cardio session:', error);
-  }
-};
-
-/**
- * Get all cardio sessions from localStorage
- */
-export const getCardioSessions = (): CardioSession[] => {
-  if (typeof window === 'undefined') return [];
-  
-  try {
-    const data = localStorage.getItem(STORAGE_KEYS.CARDIO_SESSIONS);
-    return data ? JSON.parse(data) : [];
-  } catch (error) {
-    console.error('Error retrieving cardio sessions:', error);
-    return [];
-  }
-};
-
-/**
- * Save a nutrition log to localStorage
- */
-export const saveNutritionLog = (log: NutritionLog): void => {
-  if (typeof window === 'undefined') return;
-  
-  try {
-    const logs = getNutritionLogs();
-    logs.push(log);
-    localStorage.setItem(STORAGE_KEYS.NUTRITION_LOGS, JSON.stringify(logs));
-    updateUserMetrics();
-  } catch (error) {
-    console.error('Error saving nutrition log:', error);
-  }
-};
-
-/**
- * Get all nutrition logs from localStorage
- */
-export const getNutritionLogs = (): NutritionLog[] => {
-  if (typeof window === 'undefined') return [];
-  
-  try {
-    const data = localStorage.getItem(STORAGE_KEYS.NUTRITION_LOGS);
-    return data ? JSON.parse(data) : [];
-  } catch (error) {
-    console.error('Error retrieving nutrition logs:', error);
-    return [];
-  }
-};
-
-/**
- * Get user metrics from localStorage
- */
-export const getUserMetrics = (): UserMetrics => {
-  if (typeof window === 'undefined') {
-    return {
-      totalWorkouts: 0,
-      totalCardioDistance: 0,
-      totalCaloriesBurned: 0,
-      currentStreak: 0,
-      personalRecords: {},
-      lastUpdated: Date.now(),
-    };
-  }
-  
-  try {
-    const data = localStorage.getItem(STORAGE_KEYS.USER_METRICS);
-    return data
-      ? JSON.parse(data)
-      : {
-          totalWorkouts: 0,
-          totalCardioDistance: 0,
-          totalCaloriesBurned: 0,
-          currentStreak: 0,
-          personalRecords: {},
-          lastUpdated: Date.now(),
-        };
-  } catch (error) {
-    console.error('Error retrieving user metrics:', error);
-    return {
-      totalWorkouts: 0,
-      totalCardioDistance: 0,
-      totalCaloriesBurned: 0,
-      currentStreak: 0,
-      personalRecords: {},
-      lastUpdated: Date.now(),
-    };
-  }
-};
-
-/**
- * Update user metrics based on saved sessions
- */
-export const updateUserMetrics = (): void => {
-  if (typeof window === 'undefined') return;
-  
-  try {
-    const workoutSessions = getWorkoutSessions();
-    const cardioSessions = getCardioSessions();
-    const nutritionLogs = getNutritionLogs();
-
-    let totalWorkouts = workoutSessions.length;
-    let totalCardioDistance = cardioSessions.reduce((sum, session) => sum + session.distance, 0);
-    let totalCaloriesBurned = workoutSessions.reduce((sum, session) => sum + session.caloriesBurned, 0)
-      + cardioSessions.reduce((sum, session) => sum + session.caloriesBurned, 0);
-
-    // Calculate streak (consecutive days with activity)
-    const currentStreak = calculateStreak([...workoutSessions, ...cardioSessions]);
-
-    // Extract personal records from workouts
-    const personalRecords: Record<string, number> = {};
-    workoutSessions.forEach((session) => {
-      const maxWeight = Math.max(...session.sets.map((s) => s.weight));
-      const key = `${session.exerciseName}_pr`;
-      if (!personalRecords[key] || maxWeight > personalRecords[key]) {
-        personalRecords[key] = maxWeight;
-      }
-    });
-
-    const metrics: UserMetrics = {
-      totalWorkouts,
-      totalCardioDistance,
-      totalCaloriesBurned,
-      currentStreak,
-      personalRecords,
-      lastUpdated: Date.now(),
-    };
-
-    localStorage.setItem(STORAGE_KEYS.USER_METRICS, JSON.stringify(metrics));
-  } catch (error) {
-    console.error('Error updating user metrics:', error);
-  }
-};
-
-/**
- * Calculate consecutive days with activity
- */
-const calculateStreak = (sessions: Array<WorkoutSession | CardioSession>): number => {
-  if (sessions.length === 0) return 0;
-
-  const dates = sessions.map((session) => new Date(session.date).toDateString()).filter((date, index, self) => self.indexOf(date) === index).sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
-
-  let streak = 1;
-  for (let i = 1; i < dates.length; i++) {
-    const currentDate = new Date(dates[i]);
-    const previousDate = new Date(dates[i - 1]);
-    const diffTime = Math.abs(previousDate.getTime() - currentDate.getTime());
-    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-
-    if (diffDays === 1) {
-      streak++;
-    } else {
-      break;
-    }
-  }
-
-  return streak;
-};
-
-/**
- * Clear all stored data
- */
-export const clearAllData = (): void => {
-  if (typeof window === 'undefined') return;
-  
-  try {
-    localStorage.removeItem(STORAGE_KEYS.WORKOUT_SESSIONS);
-    localStorage.removeItem(STORAGE_KEYS.CARDIO_SESSIONS);
-    localStorage.removeItem(STORAGE_KEYS.NUTRITION_LOGS);
-    localStorage.removeItem(STORAGE_KEYS.USER_METRICS);
-  } catch (error) {
-    console.error('Error clearing data:', error);
-  }
-};
-
-/**
- * Export data as JSON for backup
- */
-export const exportData = (): string => {
-  const data = {
-    workouts: getWorkoutSessions(),
-    cardio: getCardioSessions(),
-    nutrition: getNutritionLogs(),
-    metrics: getUserMetrics(),
-    exportDate: new Date().toISOString(),
-  };
-  return JSON.stringify(data, null, 2);
-};
-
-/**
- * Import data from JSON backup
- */
-export const importData = (jsonData: string): boolean => {
-  if (typeof window === 'undefined') return false;
-  
-  try {
-    const data = JSON.parse(jsonData);
-    if (data.workouts) localStorage.setItem(STORAGE_KEYS.WORKOUT_SESSIONS, JSON.stringify(data.workouts));
-    if (data.cardio) localStorage.setItem(STORAGE_KEYS.CARDIO_SESSIONS, JSON.stringify(data.cardio));
-    if (data.nutrition) localStorage.setItem(STORAGE_KEYS.NUTRITION_LOGS, JSON.stringify(data.nutrition));
-    if (data.metrics) localStorage.setItem(STORAGE_KEYS.USER_METRICS, JSON.stringify(data.metrics));
-    return true;
-  } catch (error) {
-    console.error('Error importing data:', error);
-    return false;
-  }
-};

src/app/login/page.tsx

@@ -1,259 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Mail, Lock, ArrowRight, AlertCircle } from 'lucide-react';
-import { useState } from 'react';
-
-export default function LoginPage() {
-  const [formData, setFormData] = useState({
-    email: '',
-    password: ''
-  });
-  const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const validateForm = () => {
-    const newErrors: { [key: string]: string } = {};
-    
-    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 handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
-    if (errors[name]) {
-      setErrors(prev => ({
-        ...prev,
-        [name]: ''
-      }));
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      return;
-    }
-    
-    setIsSubmitting(true);
-    try {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      console.log('Login attempt:', formData);
-      alert('Login bem-sucedido!');
-      setFormData({ email: '', password: '' });
-    } catch (error) {
-      setErrors({ submit: 'Erro ao fazer login. Tente novamente.' });
-    } finally {
-      setIsSubmitting(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: "/" },
-            { name: "Sobre", id: "#hero" },
-            { name: "Features", id: "#onboarding" },
-            { name: "Contato", id: "#contact" },
-            { name: "Signup", id: "/signup" }
-          ]}
-          button={{ text: "Fazer Login", href: "/login" }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div id="login" data-section="login" 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">
-          <div className="text-center space-y-3">
-            <h1 className="text-4xl font-extrabold tracking-tight">Bem-vindo de volta</h1>
-            <p className="text-base text-gray-600 dark:text-gray-400">Faça login na sua conta FitFlow Pro</p>
-          </div>
-
-          <div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {/* Email Field */}
-              <div className="space-y-2">
-                <label htmlFor="email" className="block text-sm font-medium text-foreground">
-                  Email
-                </label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    placeholder="seu@email.com"
-                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                      errors.email
-                        ? 'border-red-500 focus:ring-red-500'
-                        : 'border-gray-300 focus:ring-primary-cta'
-                    }`}
-                  />
-                </div>
-                {errors.email && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.email}
-                  </div>
-                )}
-              </div>
-
-              {/* Password Field */}
-              <div className="space-y-2">
-                <label htmlFor="password" className="block text-sm font-medium text-foreground">
-                  Senha
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  <input
-                    id="password"
-                    name="password"
-                    type="password"
-                    value={formData.password}
-                    onChange={handleChange}
-                    placeholder="••••••••"
-                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                      errors.password
-                        ? 'border-red-500 focus:ring-red-500'
-                        : 'border-gray-300 focus:ring-primary-cta'
-                    }`}
-                  />
-                </div>
-                {errors.password && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.password}
-                  </div>
-                )}
-              </div>
-
-              {/* Submit Errors */}
-              {errors.submit && (
-                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 flex items-center gap-2 text-red-700 dark:text-red-400 text-sm">
-                  <AlertCircle className="w-4 h-4 flex-shrink-0" />
-                  {errors.submit}
-                </div>
-              )}
-
-              {/* Submit Button */}
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2.5 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {isSubmitting ? 'Entrando...' : 'Fazer Login'}
-                {!isSubmitting && <ArrowRight className="w-4 h-4" />}
-              </button>
-            </form>
-
-            {/* Divider */}
-            <div className="mt-6 relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-card text-gray-500">ou continue com</span>
-              </div>
-            </div>
-
-            {/* Social Login Buttons */}
-            <div className="mt-6 space-y-3">
-              <button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
-                Google
-              </button>
-              <button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
-                Apple
-              </button>
-            </div>
-          </div>
-
-          {/* Sign Up Link */}
-          <p className="text-center text-gray-600 dark:text-gray-400 text-sm">
-            Não tem conta?{' '}
-            <a href="/signup" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
-              Criar conta
-            </a>
-          </p>
-
-          {/* Forgot Password Link */}
-          <p className="text-center text-gray-600 dark:text-gray-400 text-sm">
-            <a href="#" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
-              Esqueceu sua senha?
-            </a>
-          </p>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          columns={[
-            {
-              items: [
-                { label: "Home", href: "/" },
-                { label: "Sobre", href: "/#hero" },
-                { label: "Features", href: "/#onboarding" }
-              ]
-            },
-            {
-              items: [
-                { label: "Blog", href: "#" },
-                { label: "Ajuda", href: "#" },
-                { label: "Suporte", href: "#" }
-              ]
-            },
-            {
-              items: [
-                { label: "Privacidade", href: "#" },
-                { label: "Termos", href: "#" },
-                { label: "Contato", href: "#" }
-              ]
-            },
-            {
-              items: [
-                { label: "Login", href: "/login" },
-                { label: "Signup", href: "/signup" },
-                { label: "Dashboard", href: "/" }
-              ]
-            }
-          ]}
-          logoText="FitFlow Pro"
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/app/page.tsx

@@ -10,34 +10,11 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import TeamCardOne from '@/components/sections/team/TeamCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import ContactText from '@/components/sections/contact/ContactText';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Activity, Apple, Brain, Dumbbell, Heart, Target, Zap, Users, Star, TrendingDown, TrendingUp } from 'lucide-react';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Activity, Apple, Brain, Dumbbell, Heart, Target, Zap, Users, Star, TrendingDown, TrendingUp, Mail } from 'lucide-react';
 
 export default function LandingPage() {
-  const displayMetrics = [
-    { id: "1", value: "10.000+", description: "Passos diários rastreados em tempo real com motivação visual de progresso." },
-    { id: "2", value: "500 kg", description: "Volume total de peso levantado monitorado com progressão semanal automática." },
-    { id: "3", value: "150+ km", description: "Distância corrida mapeada com GPS, ritmo calculado e calorias precisas." },
-    { id: "4", value: "42 dias", description: "Sequência de treinos consistentes com badges de dedicação desbloqueados." }
-  ];
-
-  const handleCardioInteraction = (data: any) => {
-    console.log('Cardio interaction:', data);
-  };
-
-  const handleTrainingInteraction = (data: any) => {
-    console.log('Training interaction:', data);
-  };
-
-  const handleWorkoutMode = (productId: string, productName: string) => {
-    console.log('Workout mode:', productId, productName);
-  };
-
-  const handleNutritionSelect = (planId: string, planName: string) => {
-    console.log('Nutrition select:', planId, planName);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -56,7 +33,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
-            { name: "Nutrição", id: "nutrition" },
+            { name: "Receitas", id: "/recipes" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
@@ -106,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: [
                 {
-                  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/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/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  imageAlt: "Dashboard adaptado"
+                  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"
                 }
               ]
             },
@@ -117,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: [
                 {
-                  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/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/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  imageAlt: "Métricas de progresso"
+                  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"
                 }
               ]
             }
@@ -142,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: [
                 {
-                  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/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/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  imageAlt: "Métricas de cardio"
+                  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"
                 }
               ]
             },
@@ -153,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: [
                 {
-                  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/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/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  imageAlt: "Progresso de atividade"
+                  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"
                 }
               ]
             }
@@ -178,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: [
                 {
-                  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/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/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  imageAlt: "Execução de treino"
+                  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"
                 }
               ]
             },
@@ -189,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: [
                 {
-                  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/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/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  imageAlt: "Exercícios filtrados"
+                  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"
                 }
               ]
             }
@@ -211,13 +188,13 @@ export default function LandingPage() {
           tagIcon={Target}
           products={[
             {
-              id: "1",              name: "Iniciar Série",              price: "Botão Proeminente",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=3",              imageAlt: "Tela de série",              onProductClick: () => handleWorkoutMode("1", "Iniciar Série")
+              id: "1",              name: "Iniciar Série",              price: "Botão Proeminente",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=3",              imageAlt: "Tela de série"
             },
             {
-              id: "2",              name: "Cronômetro de Descanso",              price: "Automático",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=4",              imageAlt: "Descanso entre séries",              onProductClick: () => handleWorkoutMode("2", "Cronômetro de Descanso")
+              id: "2",              name: "Cronômetro de Descanso",              price: "Automático",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=4",              imageAlt: "Descanso entre séries"
             },
             {
-              id: "3",              name: "Registrar Progresso",              price: "Carga + Reps",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=4",              imageAlt: "Progresso salvo",              onProductClick: () => handleWorkoutMode("3", "Registrar Progresso")
+              id: "3",              name: "Registrar Progresso",              price: "Carga + Reps",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=4",              imageAlt: "Progresso salvo"
             }
           ]}
           animationType="slide-up"
@@ -258,7 +235,20 @@ export default function LandingPage() {
           title="Suas Conquistas Importam. Veja Cada Número."
           tag="Performance Metrics"
           tagAnimation="slide-up"
-          metrics={displayMetrics}
+          metrics={[
+            {
+              id: "1",              value: "10.000+",              description: "Passos diários rastreados em tempo real com motivação visual de progresso."
+            },
+            {
+              id: "2",              value: "500 kg",              description: "Volume total de peso levantado monitorado com progressão semanal automática."
+            },
+            {
+              id: "3",              value: "150+ km",              description: "Distância corrida mapeada com GPS, ritmo calculado e calorias precisas."
+            },
+            {
+              id: "4",              value: "42 dias",              description: "Sequência de treinos consistentes com badges de dedicação desbloqueados."
+            }
+          ]}
           metricsAnimation="slide-up"
           useInvertedBackground={false}
         />
@@ -341,53 +331,55 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
-          text="Pronto para transformar seu corpo? Começar seu teste gratuito de 30 dias agora e veja por que 150 mil atletas confiam em FitFlow Pro."
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Começar Teste Grátis", href: "contact" },
-            { text: "Conversar com Especialista", href: "#contact" }
-          ]}
+        <ContactSplit
+          tag="Transforme Sua Vida"
+          tagIcon={Mail}
+          title="Pronto para Começar?"
+          description="Inscreva-se para receber atualizações exclusivas, dicas de treino e um acesso especial ao nosso programa de beta testers premium. Seu email está seguro conosco."
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=1"
+          imageAlt="Transforme seu corpo"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          inputPlaceholder="seu.email@exemplo.com"
+          buttonText="Inscrever-se Agora"
+          termsText="Respeitamos sua privacidade. Você pode desinscrever-se a qualquer momento. Sem spam, promessa."
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
+        <FooterBase
           columns={[
             {
-              items: [
-                { label: "Dashboard", href: "#dashboard" },
-                { label: "Treino", href: "#training" },
-                { label: "Nutrição", href: "#nutrition" }
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Receitas", href: "/recipes" },
+                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
-              items: [
-                { label: "Cardio Hub", href: "#cardio" },
-                { label: "Comunidade", href: "#community" },
-                { label: "Perfil", href: "#profile" }
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
               ]
             },
             {
-              items: [
-                { label: "Blog", href: "#blog" },
-                { label: "Ajuda", href: "#help" },
-                { label: "Suporte", href: "#support" }
-              ]
-            },
-            {
-              items: [
-                { label: "Privacidade", href: "#privacy" },
-                { label: "Termos", href: "#terms" },
-                { label: "Contato", href: "#contact" }
+              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/recipes/page.tsx

@@ -0,0 +1,311 @@
+"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

@@ -1,428 +0,0 @@
-"use client";
-
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Mail, Lock, User, AlertCircle, Check, ArrowRight } from 'lucide-react';
-import { useState } from 'react';
-
-interface FormErrors {
-  [key: string]: string;
-}
-
-interface SignupFormData {
-  name: string;
-  email: string;
-  password: string;
-  confirmPassword: string;
-  agreedToTerms: boolean;
-}
-
-export default function SignupPage() {
-  const [formData, setFormData] = useState<SignupFormData>({
-    name: '',
-    email: '',
-    password: '',
-    confirmPassword: '',
-    agreedToTerms: false
-  });
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [passwordStrength, setPasswordStrength] = useState(0);
-
-  const calculatePasswordStrength = (password: string) => {
-    let strength = 0;
-    if (password.length >= 8) strength++;
-    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
-    if (/\d/.test(password)) strength++;
-    if (/[^a-zA-Z\d]/.test(password)) strength++;
-    setPasswordStrength(strength);
-  };
-
-  const validateForm = () => {
-    const newErrors: FormErrors = {};
-    
-    if (!formData.name.trim()) {
-      newErrors.name = 'Nome é obrigatório';
-    } else if (formData.name.length < 2) {
-      newErrors.name = 'Nome deve ter pelo menos 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 pelo menos 8 caracteres';
-    }
-    
-    if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = 'As senhas não correspondem';
-    }
-    
-    if (!formData.agreedToTerms) {
-      newErrors.agreedToTerms = 'Você deve aceitar os termos e condições';
-    }
-    
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value, type, checked } = e.target;
-    const newValue = type === 'checkbox' ? checked : value;
-    
-    setFormData(prev => ({
-      ...prev,
-      [name]: newValue
-    }));
-    
-    if (errors[name]) {
-      setErrors(prev => ({
-        ...prev,
-        [name]: ''
-      }));
-    }
-    
-    if (name === 'password') {
-      calculatePasswordStrength(value);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    
-    if (!validateForm()) {
-      return;
-    }
-    
-    setIsSubmitting(true);
-    try {
-      await new Promise(resolve => setTimeout(resolve, 1500));
-      console.log('Signup attempt:', formData);
-      alert('Conta criada com sucesso! Faça login para continuar.');
-      setFormData({
-        name: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-        agreedToTerms: false
-      });
-      setPasswordStrength(0);
-    } catch (error) {
-      setErrors({ submit: 'Erro ao criar conta. Tente novamente.' });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const getPasswordStrengthColor = () => {
-    if (passwordStrength === 0) return 'bg-gray-300';
-    if (passwordStrength === 1) return 'bg-red-500';
-    if (passwordStrength === 2) return 'bg-yellow-500';
-    if (passwordStrength === 3) return 'bg-blue-500';
-    return 'bg-green-500';
-  };
-
-  const getPasswordStrengthLabel = () => {
-    if (passwordStrength === 0) return '';
-    if (passwordStrength === 1) return 'Fraca';
-    if (passwordStrength === 2) return 'Média';
-    if (passwordStrength === 3) return 'Forte';
-    return 'Muito Forte';
-  };
-
-  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: "Sobre", id: "#hero" },
-            { name: "Features", id: "#onboarding" },
-            { name: "Contato", id: "#contact" },
-            { name: "Login", id: "/login" }
-          ]}
-          button={{ text: "Criar Conta", href: "/signup" }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div id="signup" data-section="signup" 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">
-          <div className="text-center space-y-3">
-            <h1 className="text-4xl font-extrabold tracking-tight">Comece sua jornada</h1>
-            <p className="text-base text-gray-600 dark:text-gray-400">Crie sua conta FitFlow Pro e transforme seu corpo</p>
-          </div>
-
-          <div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
-            <form onSubmit={handleSubmit} className="space-y-5">
-              {/* Name Field */}
-              <div className="space-y-2">
-                <label htmlFor="name" className="block text-sm font-medium text-foreground">
-                  Nome Completo
-                </label>
-                <div className="relative">
-                  <User className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  <input
-                    id="name"
-                    name="name"
-                    type="text"
-                    value={formData.name}
-                    onChange={handleChange}
-                    placeholder="Seu nome"
-                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                      errors.name
-                        ? 'border-red-500 focus:ring-red-500'
-                        : 'border-gray-300 focus:ring-primary-cta'
-                    }`}
-                  />
-                </div>
-                {errors.name && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.name}
-                  </div>
-                )}
-              </div>
-
-              {/* Email Field */}
-              <div className="space-y-2">
-                <label htmlFor="email" className="block text-sm font-medium text-foreground">
-                  Email
-                </label>
-                <div className="relative">
-                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  <input
-                    id="email"
-                    name="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    placeholder="seu@email.com"
-                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                      errors.email
-                        ? 'border-red-500 focus:ring-red-500'
-                        : 'border-gray-300 focus:ring-primary-cta'
-                    }`}
-                  />
-                </div>
-                {errors.email && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.email}
-                  </div>
-                )}
-              </div>
-
-              {/* Password Field */}
-              <div className="space-y-2">
-                <label htmlFor="password" className="block text-sm font-medium text-foreground">
-                  Senha
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  <input
-                    id="password"
-                    name="password"
-                    type="password"
-                    value={formData.password}
-                    onChange={handleChange}
-                    placeholder="••••••••••"
-                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                      errors.password
-                        ? 'border-red-500 focus:ring-red-500'
-                        : 'border-gray-300 focus:ring-primary-cta'
-                    }`}
-                  />
-                </div>
-                {formData.password && (
-                  <div className="space-y-2">
-                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
-                      <div
-                        className={`h-full transition-all ${getPasswordStrengthColor()}`}
-                        style={{ width: `${(passwordStrength / 4) * 100}%` }}
-                      ></div>
-                    </div>
-                    <p className="text-xs text-gray-600 dark:text-gray-400">
-                      Força: <span className="font-semibold">{getPasswordStrengthLabel()}</span>
-                    </p>
-                  </div>
-                )}
-                {errors.password && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.password}
-                  </div>
-                )}
-              </div>
-
-              {/* Confirm Password Field */}
-              <div className="space-y-2">
-                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
-                  Confirmar Senha
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  <input
-                    id="confirmPassword"
-                    name="confirmPassword"
-                    type="password"
-                    value={formData.confirmPassword}
-                    onChange={handleChange}
-                    placeholder="••••••••••"
-                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                      errors.confirmPassword
-                        ? 'border-red-500 focus:ring-red-500'
-                        : 'border-gray-300 focus:ring-primary-cta'
-                    }`}
-                  />
-                </div>
-                {formData.confirmPassword && formData.password === formData.confirmPassword && !errors.confirmPassword && (
-                  <div className="flex items-center gap-2 text-green-500 text-sm">
-                    <Check className="w-4 h-4" />
-                    Senhas correspondem
-                  </div>
-                )}
-                {errors.confirmPassword && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.confirmPassword}
-                  </div>
-                )}
-              </div>
-
-              {/* Terms Checkbox */}
-              <div className="space-y-2">
-                <div className="flex items-start gap-3">
-                  <input
-                    id="agreedToTerms"
-                    name="agreedToTerms"
-                    type="checkbox"
-                    checked={formData.agreedToTerms}
-                    onChange={handleChange}
-                    className="w-5 h-5 mt-0.5 rounded border-gray-300 accent-primary-cta cursor-pointer"
-                  />
-                  <label htmlFor="agreedToTerms" className="text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
-                    Concordo com os{' '}
-                    <a href="#" className="text-primary-cta hover:underline font-semibold">
-                      termos de serviço
-                    </a>
-                    {' '}e{' '}
-                    <a href="#" className="text-primary-cta hover:underline font-semibold">
-                      política de privacidade
-                    </a>
-                  </label>
-                </div>
-                {errors.agreedToTerms && (
-                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle className="w-4 h-4" />
-                    {errors.agreedToTerms}
-                  </div>
-                )}
-              </div>
-
-              {/* Submit Errors */}
-              {errors.submit && (
-                <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 flex items-center gap-2 text-red-700 dark:text-red-400 text-sm">
-                  <AlertCircle className="w-4 h-4 flex-shrink-0" />
-                  {errors.submit}
-                </div>
-              )}
-
-              {/* Submit Button */}
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-2.5 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {isSubmitting ? 'Criando conta...' : 'Criar Conta'}
-                {!isSubmitting && <ArrowRight className="w-4 h-4" />}
-              </button>
-            </form>
-
-            {/* Divider */}
-            <div className="mt-6 relative">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-card text-gray-500">ou continue com</span>
-              </div>
-            </div>
-
-            {/* Social Signup Buttons */}
-            <div className="mt-6 space-y-3">
-              <button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
-                Google
-              </button>
-              <button className="w-full bg-background hover:bg-gray-50 dark:hover:bg-gray-800 border border-gray-300 dark:border-gray-600 text-foreground font-medium py-2.5 rounded-lg transition-all">
-                Apple
-              </button>
-            </div>
-          </div>
-
-          {/* Login Link */}
-          <p className="text-center text-gray-600 dark:text-gray-400 text-sm">
-            Já tem conta?{' '}
-            <a href="/login" className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors">
-              Fazer login
-            </a>
-          </p>
-        </div>
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterLogoEmphasis
-          columns={[
-            {
-              items: [
-                { label: "Home", href: "/" },
-                { label: "Sobre", href: "/#hero" },
-                { label: "Features", href: "/#onboarding" }
-              ]
-            },
-            {
-              items: [
-                { label: "Blog", href: "#" },
-                { label: "Ajuda", href: "#" },
-                { label: "Suporte", href: "#" }
-              ]
-            },
-            {
-              items: [
-                { label: "Privacidade", href: "#" },
-                { label: "Termos", href: "#" },
-                { label: "Contato", href: "#" }
-              ]
-            },
-            {
-              items: [
-                { label: "Login", href: "/login" },
-                { label: "Signup", href: "/signup" },
-                { label: "Dashboard", href: "/" }
-              ]
-            }
-          ]}
-          logoText="FitFlow Pro"
-        />
-      </div>
-    </ThemeProvider>
-  );
-}

src/components/cardStack/CardList.tsx

@@ -1,26 +1,123 @@
-'use client';
+"use client";
 
-import React, { useRef } from 'react';
-import { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from '@/components/cardStack/types';
+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 {
-  items: any[];
+  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;
   className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
 }
 
-const CardList: React.FC<CardListProps> = ({ items, className = '' }) => {
-  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+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 });
 
   return (
-    <div className={`card-list ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="card-list-item">
-          {item.title && <h3>{item.title}</h3>}
-          {item.description && <p>{item.description}</p>}
+    <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={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>
+      </div>
+    </section>
   );
 };
 
-export default CardList;
+CardList.displayName = "CardList";
+
+export default memo(CardList);

src/components/cardStack/CardStack.tsx

@@ -1,20 +1,229 @@
-'use client';
+"use client";
 
-import React from 'react';
-import TimelineBase from './layouts/timelines/TimelineBase';
-import { CardStackItemShape } from '@/components/cardStack/types';
+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";
 
-interface CardStackProps {
-  items: CardStackItemShape[];
-  className?: 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;
 
-const CardStack: React.FC<CardStackProps> = ({ items, className = '' }) => {
-  return (
-    <div className={`card-stack ${className}`}>
-      <TimelineBase items={items} />
-    </div>
-  );
+    // 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>
+    );
 };
 
-export default CardStack;
+CardStack.displayName = "CardStack";
+
+export default memo(CardStack);

src/components/cardStack/CardStackTextBox.tsx

@@ -1,15 +1,92 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { TextBoxProps } from '@/components/cardStack/types';
+import { memo, useMemo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import type { TextBoxProps } from "./types";
 
-const CardStackTextBox: React.FC<TextBoxProps> = ({ title, description, className = '' }) => {
-  return (
-    <div className={`card-stack-textbox ${className}`}>
-      <h2>{title}</h2>
-      <p>{description}</p>
-    </div>
-  );
+const CardStackTextBox = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: TextBoxProps) => {
+    const styles = useMemo(() => {
+        if (textboxLayout === "default") {
+            return {
+                className: cls("flex flex-col gap-3 md:gap-2", textBoxClassName),
+                titleClassName: cls("text-6xl font-medium text-center", titleClassName),
+                descriptionClassName: cls("text-lg leading-tight text-center md:max-w-6/10", descriptionClassName),
+                tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-0 mx-auto", tagClassName),
+                buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center mt-1 md:mt-3 justify-center", buttonContainerClassName),
+                center: true,
+            };
+        }
+
+        if (textboxLayout === "inline-image") {
+            return {
+                className: cls("flex flex-col gap-3 md:gap-2", textBoxClassName),
+                titleClassName: cls("text-4xl md:text-5xl font-medium text-center", titleClassName),
+                descriptionClassName: cls("text-lg leading-tight text-center", descriptionClassName),
+                tagClassName: cls("w-fit px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-0 mx-auto", tagClassName),
+                buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center mt-1 md:mt-3 justify-center", buttonContainerClassName),
+                center: true,
+            };
+        }
+
+        return {
+            className: textBoxClassName,
+            titleClassName: cls("text-6xl font-medium", titleClassName),
+            descriptionClassName: cls("text-lg leading-tight", descriptionClassName),
+            tagClassName: cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2", tagClassName),
+            buttonContainerClassName: cls("flex flex-wrap gap-4 max-md:justify-center", buttonContainerClassName),
+            center: false,
+        };
+    }, [textboxLayout, textBoxClassName, titleClassName, descriptionClassName, tagClassName, buttonContainerClassName]);
+
+    if (!title && !titleSegments && !description) return null;
+
+    return (
+        <TextBox
+            title={title!}
+            titleSegments={titleSegments}
+            description={description!}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={styles.className}
+            titleClassName={styles.titleClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            descriptionClassName={styles.descriptionClassName}
+            tagClassName={styles.tagClassName}
+            buttonContainerClassName={styles.buttonContainerClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            center={styles.center}
+        />
+    );
 };
 
-export default CardStackTextBox;
+CardStackTextBox.displayName = "CardStackTextBox";
+
+export default memo(CardStackTextBox);

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,35 +1,187 @@
-'use client';
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { CardAnimationType, GridVariant } from "../types";
+import { useDepth3DAnimation } from "./useDepth3DAnimation";
 
-import { useEffect, useRef, useState } from 'react';
-import { UseCardAnimationReturn } from '@/components/cardStack/types';
+gsap.registerPlugin(ScrollTrigger);
 
-export function useCardAnimation(): UseCardAnimationReturn {
-  const [isActive, setIsActive] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-  const itemRefsArray = useRef<(HTMLElement | null)[]>([]);
-  const containerRef = useRef<HTMLElement>(null);
-  const perspectiveRef = useRef<HTMLElement>(null);
-  const bottomContentRef = useRef<HTMLElement>(null);
+interface UseCardAnimationProps {
+  animationType: CardAnimationType | "depth-3d";
+  itemCount: number;
+  isGrid?: boolean;
+  supports3DAnimation?: boolean;
+  gridVariant?: GridVariant;
+  useIndividualTriggers?: boolean;
+}
 
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768);
-    };
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
+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 itemRefs = itemRefsArray.current.map((el) => ({
-    current: el,
-  })) as React.RefObject<HTMLElement>[];
-
-  return {
-    isActive,
-    isMobile,
+  // Enable 3D effect only when explicitly supported and conditions are met
+  const { isMobile } = useDepth3DAnimation({
     itemRefs,
     containerRef,
     perspectiveRef,
-    bottomContentRef,
-  };
-}
+    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 };
+};

src/components/cardStack/hooks/useDepth3DAnimation.ts

@@ -1,25 +1,118 @@
-'use client';
+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 = (elementRef: React.RefObject<HTMLElement>) => {
-  const [isActive, setIsActive] = 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(() => {
-    if (!elementRef.current) return;
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
 
-    const handleMouseEnter = () => setIsActive(true);
-    const handleMouseLeave = () => setIsActive(false);
-
-    const element = elementRef.current;
-    element.addEventListener('mouseenter', handleMouseEnter);
-    element.addEventListener('mouseleave', handleMouseLeave);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
 
     return () => {
-      element.removeEventListener('mouseenter', handleMouseEnter);
-      element.removeEventListener('mouseleave', handleMouseLeave);
+      window.removeEventListener("resize", checkMobile);
     };
-  }, [elementRef]);
+  }, []);
 
-  return { isActive };
+  // 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 };
 };

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

@@ -1,18 +1,144 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { ArrowCarouselProps } from '@/components/cardStack/types';
+import { memo, Children, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { EmblaCarouselType } from "embla-carousel";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowCarouselProps } from "../../types";
 
-const ArrowCarousel: React.FC<ArrowCarouselProps> = ({ items, className = '' }) => {
-  return (
-    <div className={`arrow-carousel ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} className="carousel-item">
-          {item.title}
-        </div>
-      ))}
-    </div>
-  );
+const ArrowCarousel = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Carousel section",
+}: ArrowCarouselProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const childrenArray = Children.toArray(children);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+    }, []);
+
+    const scrollPrev = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const scrollNext = useCallback(() => emblaApi?.scrollNext(), [emblaApi]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("select", onSelect).on("reInit", onSelect);
+
+        return () => {
+            emblaApi.off("select", onSelect).off("reInit", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    return (
+        <section
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+                <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="relative w-full">
+                    <div
+                        className={cls(
+                            "overflow-hidden w-full relative z-10 mask-fade-x",
+                            carouselClassName
+                        )}
+                        ref={emblaRef}
+                    >
+                        <div className="flex w-full">
+                            {childrenArray.map((child, index) => (
+                                <div
+                                    key={index}
+                                    className="flex-none w-60 md:w-40 mr-6"
+                                >
+                                    <div className={cls(
+                                        "transition-all duration-500 ease-out",
+                                        selectedIndex === index ? "opacity-100 scale-100" : "opacity-70 scale-90"
+                                    )}>
+                                        {child}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className={cls("absolute inset-y-0 w-content-width mx-auto left-0 right-0 flex items-center justify-between pointer-events-none z-10", controlsClassName)}>
+                        <button
+                            onClick={scrollPrev}
+                            className="pointer-events-auto primary-button h-8 w-auto aspect-square rounded-theme flex items-center justify-center cursor-pointer"
+                            aria-label="Previous slide"
+                        >
+                            <ChevronLeft className="w-4/10 h-4/10 text-primary-cta-text" />
+                        </button>
+                        <button
+                            onClick={scrollNext}
+                            className="pointer-events-auto primary-button h-8 w-auto aspect-square rounded-theme flex items-center justify-center cursor-pointer"
+                            aria-label="Next slide"
+                        >
+                            <ChevronRight className="w-4/10 h-4/10 text-primary-cta-text" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
 };
 
-export default ArrowCarousel;
+ArrowCarousel.displayName = "ArrowCarousel";
+
+export default memo(ArrowCarousel);

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

@@ -1,22 +1,148 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { AutoCarouselProps } from '@/components/cardStack/types';
-import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
+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";
 
-const AutoCarousel: React.FC<AutoCarouselProps> = ({ items, className = '' }) => {
-  const animation = useCardAnimation();
-  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+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
+    });
 
-  return (
-    <div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className={`auto-carousel ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="carousel-item">
-          {item.title}
-        </div>
-      ))}
-    </div>
-  );
+    // Bottom marquee direction is opposite of top
+    const bottomMarqueeDirection = topMarqueeDirection === "left" ? "right" : "left";
+
+    // 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>
+    );
 };
 
-export default AutoCarousel;
+AutoCarousel.displayName = "AutoCarousel";
+
+export default memo(AutoCarousel);

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

@@ -1,22 +1,182 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { ButtonCarouselProps } from '@/components/cardStack/types';
-import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
+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";
 
-const ButtonCarousel: React.FC<ButtonCarouselProps> = ({ items, className = '' }) => {
-  const animation = useCardAnimation();
-  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+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 });
 
-  return (
-    <div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className={`button-carousel ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="carousel-item">
-          {item.title}
-        </div>
-      ))}
-    </div>
-  );
+    const {
+        prevBtnDisabled,
+        nextBtnDisabled,
+        onPrevButtonClick,
+        onNextButtonClick,
+    } = usePrevNextButtons(emblaApi);
+
+    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>
+    );
 };
 
-export default ButtonCarousel;
+ButtonCarousel.displayName = "ButtonCarousel";
+
+export default memo(ButtonCarousel);

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

@@ -1,18 +1,155 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { FullWidthCarouselProps } from '@/components/cardStack/types';
+import { memo, Children, cloneElement, isValidElement, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { EmblaCarouselType } from "embla-carousel";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import { FullWidthCarouselProps } from "../../types";
 
-const FullWidthCarousel: React.FC<FullWidthCarouselProps> = ({ items, className = '' }) => {
-  return (
-    <div className={`full-width-carousel ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} className="carousel-item">
-          {item.title}
-        </div>
-      ))}
-    </div>
-  );
+const FullWidthCarousel = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    carouselClassName = "",
+    dotsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Carousel section",
+}: FullWidthCarouselProps) => {
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: "center" });
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const childrenArray = Children.toArray(children);
+
+    const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+        setSelectedIndex(emblaApi.selectedScrollSnap());
+    }, []);
+
+    const scrollTo = useCallback(
+        (index: number) => {
+            if (!emblaApi) return;
+            emblaApi.scrollTo(index);
+        },
+        [emblaApi]
+    );
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        onSelect(emblaApi);
+        emblaApi.on("select", onSelect).on("reInit", onSelect);
+
+        return () => {
+            emblaApi.off("select", onSelect).off("reInit", onSelect);
+        };
+    }, [emblaApi, onSelect]);
+
+    useEffect(() => {
+        if (!emblaApi) return;
+
+        const autoplay = setInterval(() => {
+            emblaApi.scrollNext();
+        }, 5000);
+
+        return () => clearInterval(autoplay);
+    }, [emblaApi]);
+
+    return (
+        <section
+            className={cls(
+                "relative py-20 w-full",
+                useInvertedBackground && "bg-foreground",
+                className
+            )}
+            aria-label={ariaLabel}
+        >
+            <div className={cls("w-full mx-auto flex flex-col gap-6", containerClassName)}>
+                <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="w-full">
+                    <div
+                        className={cls(
+                            "overflow-hidden w-full relative z-10",
+                            carouselClassName
+                        )}
+                        ref={emblaRef}
+                    >
+                        <div className="flex w-full">
+                            {Children.map(childrenArray, (child, index) => (
+                                <div
+                                    key={index}
+                                    className="flex-none w-70 mr-6"
+                                >
+                                    {isValidElement(child)
+                                        ? cloneElement(child, { isActive: selectedIndex === index } as Record<string, unknown>)
+                                        : child}
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div className={cls("flex items-center justify-center gap-2", dotsClassName)}>
+                    {childrenArray.map((_, index) => (
+                        <button
+                            key={index}
+                            type="button"
+                            onClick={() => scrollTo(index)}
+                            className={cls(
+                                "relative cursor-pointer h-2 rounded-theme bg-accent transition-all duration-300",
+                                selectedIndex === index
+                                    ? "w-8 opacity-100"
+                                    : "w-2 opacity-20"
+                            )}
+                            aria-label={`Go to slide ${index + 1}`}
+                            aria-current={selectedIndex === index}
+                        />
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
 };
 
-export default FullWidthCarousel;
+FullWidthCarousel.displayName = "FullWidthCarousel";
+
+export default memo(FullWidthCarousel);

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

@@ -1,26 +1,150 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { GridLayoutProps } from '@/components/cardStack/types';
-import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
+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";
 
-const GridLayout: React.FC<GridLayoutProps> = ({ items, className = '' }) => {
-  const animation = useCardAnimation();
-  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+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];
 
-  return (
-    <div ref={animation.containerRef as React.Ref<HTMLDivElement>} className={`grid-layout ${className}`}>
-      <div ref={animation.perspectiveRef as React.Ref<HTMLDivElement>} className="grid-perspective">
-        <div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className="grid-container">
-          {items.map((item, index) => (
-            <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="grid-item">
-              {item.title}
+    // 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";
+
+    // 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 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>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
+        </section>
+    );
 };
 
-export default GridLayout;
+GridLayout.displayName = "GridLayout";
+
+export default memo(GridLayout);

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

@@ -1,26 +1,149 @@
-'use client';
+"use client";
 
-import React, { useRef } from 'react';
-import { CardStackItemShape } from '@/components/cardStack/types';
+import React, { Children, useCallback } from "react";
+import { cls } from "@/lib/utils";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TimelineVariant = "timeline";
 
 interface TimelineBaseProps {
-  items: CardStackItemShape[];
+  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;
 }
 
-const TimelineBase: React.FC<TimelineBaseProps> = ({ items, className = '' }) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+const TimelineBase = ({
+  children,
+  variant = "timeline",
+  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout = "default",
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  ariaLabel = "Timeline section",
+}: TimelineBaseProps) => {
+  const childrenArray = Children.toArray(children);
+  const { itemRefs } = useCardAnimation({
+    animationType,
+    itemCount: childrenArray.length,
+    isGrid: false
+  });
+
+  const getItemClasses = useCallback((index: number) => {
+    // Timeline variant - scattered/organic pattern
+    const alignmentClass =
+      index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
+
+    const marginClasses = cls(
+      index % 4 === 0 && "md:ml-0",
+      index % 4 === 1 && "md:mr-20",
+      index % 4 === 2 && "md:ml-15",
+      index % 4 === 3 && "md:mr-30"
+    );
+
+    return cls(alignmentClass, marginClasses);
+  }, []);
 
   return (
-    <div ref={containerRef} className={`timeline-container ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} className="timeline-item">
-          <div className="timeline-marker" />
-          <div className="timeline-content">{item.title}</div>
+    <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>
-      ))}
-    </div>
+      </div>
+    </section>
   );
 };
 
-export default TimelineBase;
+TimelineBase.displayName = "TimelineBase";
+
+export default React.memo(TimelineBase);

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

@@ -1,27 +1,147 @@
-'use client';
+"use client";
 
-import React from 'react';
-import {
-  ButtonConfig,
-  ButtonAnimationType,
-  TitleSegment,
-} from '@/components/cardStack/types';
+import React, { useEffect, useRef, memo, Children } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import CardStackTextBox from "../../CardStackTextBox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+gsap.registerPlugin(ScrollTrigger);
 
 interface TimelineCardStackProps {
-  items: any[];
-  className?: string;
+    children: React.ReactNode;
+    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;
 }
 
-const TimelineCardStack: React.FC<TimelineCardStackProps> = ({ items, className = '' }) => {
-  return (
-    <div className={`timeline-card-stack ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} className="timeline-card">
-          {item.title}
-        </div>
-      ))}
-    </div>
-  );
+const TimelineCardStack = ({
+    children,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    className = "",
+    containerClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Timeline section",
+}: TimelineCardStackProps) => {
+    const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const childrenArray = Children.toArray(children);
+
+    useEffect(() => {
+        const ctx = gsap.context(() => {
+            itemRefs.current.forEach((ref, position) => {
+                if (!ref) return;
+
+                const isLast = position === itemRefs.current.length - 1;
+
+                const timeline = gsap.timeline({
+                    scrollTrigger: {
+                        trigger: ref,
+                        start: "center center",
+                        end: "+=100%",
+                        scrub: true,
+                    },
+                });
+
+                timeline.set(ref, { willChange: "opacity" }).to(ref, {
+                    ease: "none",
+                    opacity: isLast ? 1 : 0,
+                });
+            });
+        });
+
+        return () => {
+            ctx.revert();
+        };
+    }, [childrenArray.length]);
+
+    return (
+        <section
+            className={cls(
+                "relative overflow-visible h-fit 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)}>
+                <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="w-full flex flex-col gap-[var(--width-25)] md:gap-[6.25vh]">
+                    {Children.map(childrenArray, (child, index) => (
+                        <div
+                            key={index}
+                            ref={(el) => {
+                                itemRefs.current[index] = el;
+                            }}
+                            className="!sticky w-full card backdrop-blur-xs rounded-theme-capped h-[140vw] md:h-[75vh] top-[25vw] md:top-[12.5vh]"
+                        >
+                            {child}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
 };
 
-export default TimelineCardStack;
+TimelineCardStack.displayName = "TimelineCardStack";
+
+export default memo(TimelineCardStack);

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

@@ -1,29 +1,175 @@
-'use client';
+"use client";
 
-import React from 'react';
-import {
-  ButtonConfig,
-  ButtonAnimationType,
-  TitleSegment,
-  TextboxLayout,
-  InvertedBackground,
-} from '@/components/cardStack/types';
+import React, { Children, useCallback } from "react";
+import { cls } from "@/lib/utils";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useTimelineHorizontal, type MediaItem } from "../../hooks/useTimelineHorizontal";
+import MediaContent from "@/components/shared/MediaContent";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "../../types";
 
 interface TimelineHorizontalCardStackProps {
-  items: any[];
+  children: React.ReactNode;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  mediaItems?: MediaItem[];
   className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  cardClassName?: string;
+  progressBarClassName?: string;
+  mediaContainerClassName?: string;
+  mediaClassName?: string;
+  ariaLabel?: string;
 }
 
-const TimelineHorizontalCardStack: React.FC<TimelineHorizontalCardStackProps> = ({ items, className = '' }) => {
+const TimelineHorizontalCardStack = ({
+  children,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  mediaItems,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  cardClassName = "",
+  progressBarClassName = "",
+  mediaContainerClassName = "",
+  mediaClassName = "",
+  ariaLabel = "Timeline section",
+}: TimelineHorizontalCardStackProps) => {
+  const childrenArray = Children.toArray(children);
+  const itemCount = childrenArray.length;
+
+  const { activeIndex, progressRefs, handleItemClick, imageOpacity, currentMediaSrc } = useTimelineHorizontal({
+    itemCount,
+    mediaItems,
+  });
+
+  const getGridColumns = useCallback(() => {
+    if (itemCount === 2) return "md:grid-cols-2";
+    if (itemCount === 3) return "md:grid-cols-3";
+    return "md:grid-cols-4";
+  }, [itemCount]);
+
+  const getItemOpacity = useCallback(
+    (index: number) => {
+      return index <= activeIndex ? "opacity-100" : "opacity-50";
+    },
+    [activeIndex]
+  );
+
   return (
-    <div className={`timeline-horizontal-card-stack ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} className="timeline-horizontal-card">
-          {item.title}
+    <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)}>
+        <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}
+        />
+        {mediaItems && mediaItems.length > 0 && (
+          <div className={cls("relative card rounded-theme-capped overflow-hidden aspect-square md:aspect-[17/9]", mediaContainerClassName)}>
+            <div
+              className="absolute inset-6 z-1 transition-opacity duration-300 overflow-hidden"
+              style={{ opacity: imageOpacity }}
+            >
+              <MediaContent
+                imageSrc={currentMediaSrc.imageSrc}
+                videoSrc={currentMediaSrc.videoSrc}
+                imageAlt={mediaItems[activeIndex]?.imageAlt}
+                videoAriaLabel={mediaItems[activeIndex]?.videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+              />
+            </div>
+          </div>
+        )}
+        <div className={cls("relative grid grid-cols-1 gap-6 md:gap-6", getGridColumns())}>
+          {Children.map(childrenArray, (child, index) => (
+            <div
+              key={index}
+              className={cls(
+                "card rounded-theme-capped p-6 flex flex-col justify-between gap-6 transition-all duration-300",
+                index === activeIndex ? "cursor-default" : "cursor-pointer hover:shadow-lg",
+                getItemOpacity(index),
+                cardClassName
+              )}
+              onClick={() => handleItemClick(index)}
+            >
+              {child}
+              <div className="relative w-full h-px overflow-hidden">
+                <div className="absolute z-0 w-full h-full bg-foreground/20" />
+                <div
+                  ref={(el) => {
+                    if (el !== null) {
+                      progressRefs.current[index] = el;
+                    }
+                  }}
+                  className={cls("absolute z-10 h-full w-full bg-foreground origin-left", progressBarClassName)}
+                  style={{ transform: "scaleX(0)" }}
+                />
+              </div>
+            </div>
+          ))}
         </div>
-      ))}
-    </div>
+      </div>
+    </section>
   );
 };
 
-export default TimelineHorizontalCardStack;
+TimelineHorizontalCardStack.displayName = "TimelineHorizontalCardStack";
+
+export default React.memo(TimelineHorizontalCardStack);

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

@@ -1,30 +1,275 @@
-'use client';
+"use client";
 
-import React from 'react';
-import {
-  ButtonConfig,
-  ButtonAnimationType,
-  TitleSegment,
-  CardAnimationType,
-} from '@/components/cardStack/types';
+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 TimelinePhoneViewProps {
-  items: any[];
+interface PhoneFrameProps {
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  phoneRef: (el: HTMLDivElement | null) => void;
   className?: string;
 }
 
-const TimelinePhoneView: React.FC<TimelinePhoneViewProps> = ({ items, className = '' }) => {
-  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
+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";
+
+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;
+  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` };
 
   return (
-    <div className={`timeline-phone-view ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="timeline-phone-item">
-          {item.title}
+    <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>
+        <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>
   );
 };
 
-export default TimelinePhoneView;
+TimelinePhoneView.displayName = "TimelinePhoneView";
+
+export default memo(TimelinePhoneView);

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

@@ -1,30 +1,202 @@
-'use client';
+"use client";
 
-import React from 'react';
-import {
-  ButtonConfig,
-  ButtonAnimationType,
-  CardAnimationType,
-  TitleSegment,
-} from '@/components/cardStack/types';
+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";
 
-interface TimelineProcessFlowProps {
-  items: any[];
-  className?: string;
+gsap.registerPlugin(ScrollTrigger);
+
+interface TimelineProcessFlowItem {
+  id: string;
+  content: React.ReactNode;
+  media: React.ReactNode;
+  reverse: boolean;
 }
 
-const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({ items, className = '' }) => {
-  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
+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;
+  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);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMdScreen(window.innerWidth >= 768);
+    };
+
+    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());
+    };
+  }, []);
 
   return (
-    <div className={`timeline-process-flow ${className}`}>
-      {items.map((item, index) => (
-        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="timeline-process-item">
-          {item.title}
+    <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>
+        <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>
   );
 };
 
-export default TimelineProcessFlow;
+TimelineProcessFlow.displayName = "TimelineProcessFlow";
+
+export default memo(TimelineProcessFlow);

src/components/cardStack/types.ts

@@ -1,69 +1,149 @@
-export interface CardStackItemShape {
-  id?: string;
-  title: string;
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+export type { ButtonConfig, ButtonAnimationType, TextboxLayout, InvertedBackground };
+
+export type TitleSegment =
+    | { type: "text"; content: string }
+    | { type: "image"; src: string; alt?: string };
+
+export interface TimelineCardStackItem {
+    id: number;
+    title: string;
+    description: string;
+    image: string;
+    imageAlt?: string;
 }
 
-export interface ButtonConfig {
-  text: string;
-  onClick?: () => void;
-  href?: string;
-}
+export type GridVariant =
+    | "uniform-all-items-equal"
+    | "bento-grid"
+    | "bento-grid-inverted"
+    | "two-columns-alternating-heights"
+    | "asymmetric-60-wide-40-narrow"
+    | "three-columns-all-equal-width"
+    | "four-items-2x2-equal-grid"
+    | "one-large-right-three-stacked-left"
+    | "items-top-row-full-width-bottom"
+    | "full-width-top-items-bottom-row"
+    | "one-large-left-three-stacked-right"
+    | "two-items-per-row"
+    | "timeline";
 
-export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-export type CardAnimationTypeWith3D = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
-export type TextboxLayout = 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-export type InvertedBackground = boolean;
-export type GridVariant = 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right' | 'two-items-per-row' | 'timeline';
+export type CardAnimationType =
+    | "none"
+    | "opacity"
+    | "slide-up"
+    | "scale-rotate"
+    | "blur-reveal";
 
-export interface TitleSegment {
-  type: 'text' | 'image';
-  content?: string;
-  src?: string;
-  alt?: string;
-}
-
-export interface CardStackProps {
-  children: React.ReactNode;
-  className?: string;
-}
+export type CardAnimationTypeWith3D = CardAnimationType | "depth-3d";
 
 export interface TextBoxProps {
-  title: string;
-  description: string;
-  className?: string;
+    title?: string;
+    titleSegments?: TitleSegment[];
+    description?: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground?: InvertedBackground;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
 }
 
-export interface UseCardAnimationReturn {
-  isActive: boolean;
-  isMobile: boolean;
-  itemRefs: React.RefObject<HTMLElement>[];
-  containerRef?: React.RefObject<HTMLElement>;
-  perspectiveRef?: React.RefObject<HTMLElement>;
-  bottomContentRef?: React.RefObject<HTMLElement>;
+export interface CardStackProps extends TextBoxProps {
+    children: React.ReactNode;
+    mode?: "auto" | "buttons";
+    gridVariant?: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    gridRowsClassName?: string;
+    itemHeightClassesOverride?: string[];
+    animationType: CardAnimationType | CardAnimationTypeWith3D;
+    supports3DAnimation?: boolean;
+    carouselThreshold?: number;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    carouselItemClassName?: string;
+    controlsClassName?: string;
+    ariaLabel?: string;
 }
 
-export interface ArrowCarouselProps {
-  items: CardStackItemShape[];
-  className?: string;
+export interface GridLayoutProps extends TextBoxProps {
+    children: React.ReactNode;
+    itemCount: number;
+    gridVariant?: GridVariant;
+    uniformGridCustomHeightClasses?: string;
+    gridRowsClassName?: string;
+    itemHeightClassesOverride?: string[];
+    animationType: CardAnimationType | CardAnimationTypeWith3D;
+    supports3DAnimation?: boolean;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    gridClassName?: string;
+    ariaLabel: string;
 }
 
-export interface AutoCarouselProps {
-  items: CardStackItemShape[];
-  className?: string;
+export interface AutoCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    speed?: number;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    itemClassName?: string;
+    ariaLabel: string;
+    showTextBox?: boolean;
+    dualMarquee?: boolean;
+    topMarqueeDirection?: "left" | "right";
+    bottomMarqueeDirection?: "left" | "right";
+    bottomCarouselClassName?: string;
+    marqueeGapClassName?: string;
 }
 
-export interface ButtonCarouselProps {
-  items: CardStackItemShape[];
-  className?: string;
+export interface ButtonCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    bottomContent?: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    carouselItemClassName?: string;
+    controlsClassName?: string;
+    ariaLabel: string;
 }
 
-export interface FullWidthCarouselProps {
-  items: CardStackItemShape[];
-  className?: string;
+export interface FullWidthCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    dotsClassName?: string;
+    ariaLabel: string;
 }
 
-export interface GridLayoutProps {
-  items: CardStackItemShape[];
-  className?: string;
+export interface ArrowCarouselProps extends TextBoxProps {
+    children: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    ariaLabel: string;
 }

src/components/ecommerce/productCatalog/ProductCatalog.tsx

@@ -1,31 +1,156 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Product } from '@/lib/api/product';
+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";
 
 interface ProductCatalogProps {
-  products?: Product[];
-  loading?: boolean;
-  className?: string;
+    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;
 }
 
-const ProductCatalog: React.FC<ProductCatalogProps> = ({ products = [], loading = false, className = '' }) => {
-  return (
-    <div className={`product-catalog ${className}`}>
-      {loading ? (
-        <div>Loading...</div>
-      ) : (
-        <div className="product-list">
-          {products.map((product) => (
-            <div key={product.id} className="product-item">
-              <h3>{product.name}</h3>
-              <p>{product.price}</p>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
+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();
+
+    const handleProductClick = useCallback((productId: string) => {
+        router.push(`/shop/${productId}`);
+    }, [router]);
+
+    const products: CatalogProduct[] = useMemo(() => {
+        if (productsProp && productsProp.length > 0) {
+            return productsProp;
+        }
+
+        if (fetchedProducts.length === 0) {
+            return [];
+        }
+
+        return fetchedProducts.map((product) => ({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
+            rating: product.rating || 0,
+            reviewCount: product.reviewCount,
+            category: product.brand,
+            onProductClick: () => handleProductClick(product.id),
+        }));
+    }, [productsProp, fetchedProducts, handleProductClick]);
+
+    if (isLoading && (!productsProp || productsProp.length === 0)) {
+        return (
+            <section
+                className={cls(
+                    "relative w-content-width mx-auto",
+                    layout === "page" ? "pt-hero-page-padding pb-20" : "py-20",
+                    className
+                )}
+            >
+                <p className="text-sm text-foreground/50 text-center py-20">
+                    Loading products...
+                </p>
+            </section>
+        );
+    }
+
+    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>
+    );
 };
 
-export default ProductCatalog;
+ProductCatalog.displayName = "ProductCatalog";
+
+export default memo(ProductCatalog);

src/components/sections/about/SplitAbout.tsx

@@ -1,21 +1,182 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { TitleSegment, ButtonAnimationType } from '@/components/cardStack/types';
+import { Fragment } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+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 type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface BulletPoint {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+}
 
 interface SplitAboutProps {
   title: string;
+  titleSegments?: TitleSegment[];
   description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  bulletPoints: BulletPoint[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  mediaAnimation: 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;
+  contentClassName?: string;
+  bulletPointClassName?: string;
+  bulletTitleClassName?: string;
+  bulletDescriptionClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
 }
 
-const SplitAbout: React.FC<SplitAboutProps> = ({ title, description, className = '' }) => {
-  return (
-    <div className={`split-about ${className}`}>
-      <h2>{title}</h2>
-      <p>{description}</p>
+const SplitAbout = ({
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  bulletPoints,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "About section video",
+  ariaLabel = "About section",
+  imagePosition = "right",
+  mediaAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  contentClassName = "",
+  bulletPointClassName = "",
+  bulletTitleClassName = "",
+  bulletDescriptionClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: SplitAboutProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+  const { containerRef: bulletPointsContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+
+  const mediaContent = (
+    <div className={cls("w-full md:w-6/10 2xl:w-7/10 overflow-hidden rounded-theme-capped card md:relative p-4", mediaWrapperClassName)}>
+      <div ref={mediaContainerRef} className="md:relative w-full md:h-full">
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("z-1 w-full h-auto object-cover rounded-theme-capped md:absolute md:inset-0 md:h-full", imageClassName)}
+        />
+      </div>
     </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 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={cls("flex flex-col md:flex-row gap-6 md:items-stretch")}>
+          {imagePosition === "left" && mediaContent}
+
+          <div ref={bulletPointsContainerRef} className={cls("w-full md:w-4/10 2xl:w-3/10 rounded-theme-capped card p-6 flex flex-col gap-6 justify-center", contentClassName)}>
+            {bulletPoints.map((point, index) => {
+              const Icon = point.icon;
+              return (
+                <Fragment key={index}>
+                  <div className={cls("relative z-1 flex flex-col gap-2", bulletPointClassName)}>
+                    {Icon && (
+                      <div className="h-10 w-fit aspect-square rounded-theme primary-button flex items-center justify-center flex-shrink-0 mb-1">
+                        <Icon className="h-[40%] w-[40%] text-primary-cta-text" strokeWidth={1.5} />
+                      </div>
+                    )}
+                    <div className="flex flex-col gap-0">
+                      <h3 className={cls("text-xl font-medium", shouldUseLightText && "text-background", bulletTitleClassName)}>
+                        {point.title}
+                      </h3>
+                      <p className={cls("text-base leading-[1.4]", shouldUseLightText ? "text-background" : "text-foreground", bulletDescriptionClassName)}>
+                        {point.description}
+                      </p>
+                    </div>
+                  </div>
+                  {index < bulletPoints.length - 1 && (
+                    <div className="relative z-1 w-full border-b border-accent/40" />
+                  )}
+                </Fragment>
+              );
+            })}
+          </div>
+
+          {imagePosition === "right" && mediaContent}
+        </div>
+      </div>
+    </section>
+  );
 };
 
+SplitAbout.displayName = "SplitAbout";
+
 export default SplitAbout;

src/components/sections/blog/BlogCardOne.tsx

@@ -1,244 +1,174 @@
 "use client";
 
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import Badge from "@/components/shared/Badge";
-import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { BlogPost } from "@/lib/api/blog";
-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 React, { useState, useMemo } from "react";
+import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
+import TextBox from "@/components/Textbox";
 
-type BlogCard = BlogPost;
-
-interface BlogCardOneProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+export interface BlogCardOneProps {
+  blogs: Array<{
+    id: string;
+    category: 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;
-    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;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    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";
+  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;
 }
 
-interface BlogCardItemProps {
-    blog: BlogCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    categoryClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-}
+const BlogCardOne: React.FC<BlogCardOneProps> = ({
+  blogs,
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  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 BlogCardItem = memo(({
-    blog,
-    shouldUseLightText,
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    categoryClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    authorContainerClassName = "",
-    authorAvatarClassName = "",
-    authorNameClassName = "",
-    dateClassName = "",
-}: BlogCardItemProps) => {
-    return (
-        <article
-            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={blog.onBlogClick}
-            role="article"
-            aria-label={`${blog.title} by ${blog.authorName}`}
-        >
-            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
-                <Image
-                    src={blog.imageSrc}
-                    alt={blog.imageAlt || blog.title}
-                    fill
-                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
-                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
-                />
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
-            </div>
+  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="relative z-1 flex flex-col justify-between gap-6 flex-1">
-                <div className="flex flex-col gap-2">
-                    <Badge text={blog.category} variant="primary" className={categoryClassName} />
+      <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={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
-                        {blog.title}
-                    </h3>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
+          cardTitleClassName || ""
+        }`}>
+          {blog.title}
+        </h3>
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
-                        {blog.excerpt}
-                    </p>
-                </div>
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
+          excerptClassName || ""
+        }`}>
+          {blog.excerpt}
+        </p>
 
-                <div className={cls("flex items-center gap-3", authorContainerClassName)}>
-                    <Image
-                        src={blog.authorAvatar}
-                        alt={blog.authorName}
-                        width={40}
-                        height={40}
-                        className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
-                        unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
-                    />
-                    <div className="flex flex-col">
-                        <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
-                            {blog.authorName}
-                        </p>
-                        <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
-                            {blog.date}
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </article>
-    );
-});
+        <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>
+        </div>
+      </div>
+    </div>
+  ));
 
-BlogCardItem.displayName = "BlogCardItem";
-
-const BlogCardOne = ({
-    blogs = [],
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    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 = "",
-}: BlogCardOneProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
+  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}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
+            textboxLayout={textboxLayout || "default"}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
             buttonTextClassName={textBoxButtonTextClassName}
-        >
-            {blogs.map((blog) => (
-                <BlogCardItem
-                    key={blog.id}
-                    blog={blog}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageWrapperClassName={imageWrapperClassName}
-                    imageClassName={imageClassName}
-                    categoryClassName={categoryClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    authorContainerClassName={authorContainerClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorNameClassName={authorNameClassName}
-                    dateClassName={dateClassName}
-                />
-            ))}
-        </CardStack>
-    );
+          />
+        </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>
+  );
 };
 
-BlogCardOne.displayName = "BlogCardOne";
-
 export default BlogCardOne;

src/components/sections/blog/BlogCardThree.tsx

@@ -1,288 +1,174 @@
 "use client";
 
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import Tag from "@/components/shared/Tag";
-import MediaContent from "@/components/shared/MediaContent";
-import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { BlogPost } from "@/lib/api/blog";
-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 React, { useState } from "react";
+import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
+import TextBox from "@/components/Textbox";
 
-type BlogCard = BlogPost;
-
-interface BlogCardThreeProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+export interface BlogCardThreeProps {
+  blogs: Array<{
+    id: string;
+    category: 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;
-    cardContentClassName?: string;
-    categoryTagClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: 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;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    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";
+  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;
 }
 
-interface BlogCardItemProps {
-    blog: BlogCard;
-    useInvertedBackground: boolean;
-    cardClassName?: string;
-    cardContentClassName?: string;
-    categoryTagClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    authorContainerClassName?: string;
-    authorAvatarClassName?: string;
-    authorNameClassName?: string;
-    dateClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-}
+const BlogCardThree: React.FC<BlogCardThreeProps> = ({
+  blogs,
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  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 BlogCardItem = memo(({
-    blog,
-    useInvertedBackground,
-    cardClassName = "",
-    cardContentClassName = "",
-    categoryTagClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    authorContainerClassName = "",
-    authorAvatarClassName = "",
-    authorNameClassName = "",
-    dateClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-}: BlogCardItemProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  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>
 
-    return (
-        <article
-            className={cls(
-                "relative h-full card group flex flex-col justify-between gap-6 p-6 cursor-pointer rounded-theme-capped overflow-hidden",
-                cardClassName
-            )}
-            onClick={blog.onBlogClick}
-            role="article"
-            aria-label={blog.title}
-        >
-            <div className={cls("relative z-1 flex flex-col gap-3", cardContentClassName)}>
-                <Tag
-                    text={blog.category}
-                    useInvertedBackground={useInvertedBackground}
-                    className={categoryTagClassName}
-                />
+      <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={cls(
-                    "text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {blog.title}
-                </h3>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
+          cardTitleClassName || ""
+        }`}>
+          {blog.title}
+        </h3>
 
-                <p className={cls(
-                    "text-base leading-tight line-clamp-2",
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                    excerptClassName
-                )}>
-                    {blog.excerpt}
-                </p>
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
+          excerptClassName || ""
+        }`}>
+          {blog.excerpt}
+        </p>
 
-                {(blog.authorName || blog.date) && (
-                    <div className={cls(
-                        "flex",
-                        blog.authorAvatar ? "items-center gap-3" : "flex-row justify-between items-center",
-                        authorContainerClassName
-                    )}>
-                        {blog.authorAvatar && (
-                            <Image
-                                src={blog.authorAvatar}
-                                alt={blog.authorName || "Author"}
-                                width={40}
-                                height={40}
-                                className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
-                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
-                            />
-                        )}
-                        {blog.authorAvatar ? (
-                            <div className="flex flex-col">
-                                {blog.authorName && (
-                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
-                                        {blog.authorName}
-                                    </p>
-                                )}
-                                {blog.date && (
-                                    <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
-                                        {blog.date}
-                                    </p>
-                                )}
-                            </div>
-                        ) : (
-                            <>
-                                {blog.authorName && (
-                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
-                                        {blog.authorName}
-                                    </p>
-                                )}
-                                {blog.date && (
-                                    <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
-                                        {blog.date}
-                                    </p>
-                                )}
-                            </>
-                        )}
-                    </div>
-                )}
-            </div>
+        <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>
+        </div>
+      </div>
+    </div>
+  ));
 
-            <div className={cls("relative z-1 w-full aspect-square", mediaWrapperClassName)}>
-                <MediaContent
-                    imageSrc={blog.imageSrc}
-                    imageAlt={blog.imageAlt || blog.title}
-                    imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
-                />
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
-            </div>
-        </article>
-    );
-});
-
-BlogCardItem.displayName = "BlogCardItem";
-
-const BlogCardThree = ({
-    blogs = [],
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses = "min-h-none",
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Blog section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    cardContentClassName = "",
-    categoryTagClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    authorContainerClassName = "",
-    authorAvatarClassName = "",
-    authorNameClassName = "",
-    dateClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: BlogCardThreeProps) => {
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
+  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}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
+            textboxLayout={textboxLayout || "default"}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
             buttonTextClassName={textBoxButtonTextClassName}
-        >
-            {blogs.map((blog) => (
-                <BlogCardItem
-                    key={blog.id}
-                    blog={blog}
-                    useInvertedBackground={useInvertedBackground}
-                    cardClassName={cardClassName}
-                    cardContentClassName={cardContentClassName}
-                    categoryTagClassName={categoryTagClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    authorContainerClassName={authorContainerClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorNameClassName={authorNameClassName}
-                    dateClassName={dateClassName}
-                    mediaWrapperClassName={mediaWrapperClassName}
-                    mediaClassName={mediaClassName}
-                />
-            ))}
-        </CardStack>
-    );
+          />
+        </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>
+  );
 };
 
-BlogCardThree.displayName = "BlogCardThree";
-
 export default BlogCardThree;

src/components/sections/blog/BlogCardTwo.tsx

@@ -1,241 +1,174 @@
 "use client";
 
-import { memo } from "react";
-import Image from "next/image";
-import CardStack from "@/components/cardStack/CardStack";
-import Badge from "@/components/shared/Badge";
-import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { BlogPost } from "@/lib/api/blog";
-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 React, { useState } from "react";
+import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
+import TextBox from "@/components/Textbox";
 
-type BlogCard = Omit<BlogPost, 'category'> & {
-    category: string | string[];
-};
-
-interface BlogCardTwoProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
+export interface BlogCardTwoProps {
+  blogs: Array<{
+    id: string;
+    category: 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;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    authorAvatarClassName?: string;
-    authorDateClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    categoryClassName?: 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;
+    excerpt: string;
+    imageSrc: string;
+    imageAlt?: string;
+    authorName: string;
+    authorAvatar: string;
+    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";
+  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;
 }
 
-interface BlogCardItemProps {
-    blog: BlogCard;
-    shouldUseLightText: boolean;
-    cardClassName?: string;
-    imageWrapperClassName?: string;
-    imageClassName?: string;
-    authorAvatarClassName?: string;
-    authorDateClassName?: string;
-    cardTitleClassName?: string;
-    excerptClassName?: string;
-    categoryClassName?: string;
-}
+const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
+  blogs,
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
+  titleSegments,
+  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 BlogCardItem = memo(({
-    blog,
-    shouldUseLightText,
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    authorAvatarClassName = "",
-    authorDateClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    categoryClassName = "",
-}: BlogCardItemProps) => {
-    return (
-        <article
-            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-            onClick={blog.onBlogClick}
-            role="article"
-            aria-label={`${blog.title} by ${blog.authorName}`}
-        >
-            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
-                <Image
-                    src={blog.imageSrc}
-                    alt={blog.imageAlt || blog.title}
-                    fill
-                    className={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", imageClassName)}
-                    unoptimized={blog.imageSrc.startsWith('http') || blog.imageSrc.startsWith('//')}
-                />
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
-            </div>
+  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="relative z-1 flex flex-col justify-between gap-6 flex-1">
-                <div className="flex flex-col gap-2">
-                    <div className="flex items-center gap-2">
-                        {blog.authorAvatar && (
-                            <Image
-                                src={blog.authorAvatar}
-                                alt={blog.authorName}
-                                width={24}
-                                height={24}
-                                className={cls("h-[var(--text-xs)] w-auto aspect-square rounded-theme object-cover bg-background-accent", authorAvatarClassName)}
-                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
-                            />
-                        )}
-                        <p className={cls("text-xs", shouldUseLightText ? "text-background" : "text-foreground", authorDateClassName)}>
-                            {blog.authorName} • {blog.date}
-                        </p>
-                    </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={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
-                        {blog.title}
-                    </h3>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
+          cardTitleClassName || ""
+        }`}>
+          {blog.title}
+        </h3>
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
-                        {blog.excerpt}
-                    </p>
-                </div>
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
+          excerptClassName || ""
+        }`}>
+          {blog.excerpt}
+        </p>
 
-                <div className="flex flex-wrap gap-2">
-                    {Array.isArray(blog.category) ? (
-                        blog.category.map((cat, index) => (
-                            <Badge key={`${cat}-${index}`} text={cat} variant="primary" className={categoryClassName} />
-                        ))
-                    ) : (
-                        <Badge text={blog.category} variant="primary" className={categoryClassName} />
-                    )}
-                </div>
-            </div>
-        </article>
-    );
-});
+        <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>
+        </div>
+      </div>
+    </div>
+  ));
 
-BlogCardItem.displayName = "BlogCardItem";
-
-const BlogCardTwo = ({
-    blogs = [],
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Blog section",
-    className = "",
-    containerClassName = "",
-    cardClassName = "",
-    imageWrapperClassName = "",
-    imageClassName = "",
-    authorAvatarClassName = "",
-    authorDateClassName = "",
-    cardTitleClassName = "",
-    excerptClassName = "",
-    categoryClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: BlogCardTwoProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-            
+  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}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            className={className}
-            containerClassName={containerClassName}
-            gridClassName={gridClassName}
-            carouselClassName={carouselClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
+            textboxLayout={textboxLayout || "default"}
             titleClassName={textBoxTitleClassName}
-            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-            titleImageClassName={textBoxTitleImageClassName}
             descriptionClassName={textBoxDescriptionClassName}
             tagClassName={textBoxTagClassName}
             buttonContainerClassName={textBoxButtonContainerClassName}
             buttonClassName={textBoxButtonClassName}
             buttonTextClassName={textBoxButtonTextClassName}
-        >
-            {blogs.map((blog) => (
-                <BlogCardItem
-                    key={blog.id}
-                    blog={blog}
-                    shouldUseLightText={shouldUseLightText}
-                    cardClassName={cardClassName}
-                    imageWrapperClassName={imageWrapperClassName}
-                    imageClassName={imageClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorDateClassName={authorDateClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    categoryClassName={categoryClassName}
-                />
-            ))}
-        </CardStack>
-    );
+          />
+        </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>
+  );
 };
 
-BlogCardTwo.displayName = "BlogCardTwo";
-
 export default BlogCardTwo;

src/components/sections/contact/ContactCenter.tsx

@@ -1,91 +1,131 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
-import TextAnimation from '@/components/text/TextAnimation';
+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" }
+>;
 
 interface ContactCenterProps {
-  tag: string;
-  title: string;
-  description: string;
-  background: { variant: string };
-  useInvertedBackground: boolean;
-  inputPlaceholder?: string;
-  buttonText?: string;
-  termsText?: string;
-  onSubmit?: (email: string) => void;
-  className?: string;
-  containerClassName?: string;
-  contentClassName?: string;
-  tagClassName?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-  formWrapperClassName?: string;
-  formClassName?: string;
-  inputClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  termsClassName?: string;
+    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;
 }
 
-const ContactCenter: React.FC<ContactCenterProps> = ({
-  tag,
-  title,
-  description,
-  background,
-  useInvertedBackground,
-  inputPlaceholder = 'Enter your email',
-  buttonText = 'Sign Up',
-  termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",  onSubmit,
-  className = '',
-  containerClassName = '',
-  contentClassName = '',
-  tagClassName = '',
-  titleClassName = '',
-  descriptionClassName = '',
-  formWrapperClassName = '',
-  formClassName = '',
-  inputClassName = '',
-  buttonClassName = '',
-  buttonTextClassName = '',
-  termsClassName = '',
-}) => {
-  const [email, setEmail] = useState('');
+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) => {
 
-  const handleSubmit = () => {
-    if (onSubmit && email) {
-      onSubmit(email);
-    }
-  };
+    const handleSubmit = async (email: string) => {
+        try {
+            await sendContactEmail({ email });
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
 
-  return (
-    <section className={`contact-center ${className}`}>
-      <div className={`container ${containerClassName}`}>
-        <div className={`content ${contentClassName}`}>
-          {tag && <div className={`tag ${tagClassName}`}>{tag}</div>}
-          <TextAnimation text={title} className={titleClassName} />
-          <p className={descriptionClassName}>{description}</p>
-          <div className={`form-wrapper ${formWrapperClassName}`}>
-            <div className={formClassName}>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder={inputPlaceholder}
-                className={inputClassName}
-              />
-              <button
-                onClick={handleSubmit}
-                className={buttonClassName}
-              >
-                <span className={buttonTextClassName}>{buttonText}</span>
-              </button>
+    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>
-          </div>
-          {termsText && <p className={`terms ${termsClassName}`}>{termsText}</p>}
-        </div>
-      </div>
-    </section>
-  );
+        </section>
+    );
 };
 
+ContactCenter.displayName = "ContactCenter";
+
 export default ContactCenter;

src/components/sections/contact/ContactSplit.tsx

@@ -1,52 +1,171 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
+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" }
+>;
 
 interface ContactSplitProps {
-  title: string;
-  description: string;
-  contactInfo: string;
-  onSubmit?: (email: string) => void;
-  className?: string;
+    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;
 }
 
-const ContactSplit: React.FC<ContactSplitProps> = ({
-  title,
-  description,
-  contactInfo,
-  onSubmit,
-  className = '',
-}) => {
-  const [email, setEmail] = useState('');
+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 handleEmailSubmit = () => {
-    if (onSubmit && email) {
-      onSubmit(email);
-    }
-  };
+    const handleSubmit = async (email: string) => {
+        try {
+            await sendContactEmail({ email });
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
 
-  return (
-    <section className={`contact-split ${className}`}>
-      <div className="contact-split-container">
-        <div className="contact-split-left">
-          <h2>{title}</h2>
-          <p>{description}</p>
-        </div>
-        <div className="contact-split-right">
-          <div className="form-group">
-            <input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter your email"
+    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}
             />
-            <button onClick={handleEmailSubmit}>Get Started</button>
-          </div>
-          <p className="contact-info">{contactInfo}</p>
+            <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
+                <HeroBackgrounds {...background} />
+            </div>
         </div>
-      </div>
-    </section>
-  );
+    );
+
+    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>
+    );
 };
 
+ContactSplit.displayName = "ContactSplit";
+
 export default ContactSplit;

src/components/sections/contact/ContactSplitForm.tsx

@@ -1,43 +1,214 @@
-'use client';
+"use client";
 
-import React, { useState } from 'react';
+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";
 
-interface ContactSplitFormProps {
-  title: string;
-  description: string;
-  className?: string;
+export interface InputField {
+    name: string;
+    type: string;
+    placeholder: string;
+    required?: boolean;
+    className?: string;
 }
 
-const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
-  title,
-  description,
-  className = '',
-}) => {
-  const [email, setEmail] = useState('');
+export interface TextareaField {
+    name: string;
+    placeholder: string;
+    rows?: number;
+    required?: boolean;
+    className?: string;
+}
 
-  const handleSubmit = () => {
-    if (email) {
-      console.log('Form submitted with email:', email);
+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;
+}
+
+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 });
+
+    // Validate minimum inputs requirement
+    if (inputs.length < 2) {
+        throw new Error("ContactSplitForm requires at least 2 inputs");
     }
-  };
 
-  return (
-    <section className={`contact-split-form ${className}`}>
-      <div className="contact-form-container">
-        <h2>{title}</h2>
-        <p>{description}</p>
-        <div className="form-group">
-          <input
-            type="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="Enter your email"
-          />
-          <button onClick={handleSubmit}>Submit</button>
+    // Initialize form data dynamically
+    const initialFormData: Record<string, string> = {};
+    inputs.forEach(input => {
+        initialFormData[input.name] = "";
+    });
+    if (textarea) {
+        initialFormData[textarea.name] = "";
+    }
+
+    const [formData, setFormData] = useState(initialFormData);
+
+    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>
-      </div>
-    </section>
-  );
+    );
+
+    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>
+    );
 };
 
+ContactSplitForm.displayName = "ContactSplitForm";
+
 export default ContactSplitForm;

src/components/sections/feature/FeatureBento.tsx

@@ -1,146 +1,44 @@
 "use client";
 
-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 { BentoGlobe } from "@/components/bento/BentoGlobe";
-import BentoIconInfoCards from "@/components/bento/BentoIconInfoCards";
-import BentoAnimatedBarChart from "@/components/bento/BentoAnimatedBarChart";
-import Bento3DStackCards from "@/components/bento/Bento3DStackCards";
-import Bento3DTaskList, { type TaskItem } from "@/components/bento/Bento3DTaskList";
-import BentoOrbitingIcons, { type OrbitingItem } from "@/components/bento/BentoOrbitingIcons";
-import BentoMap from "@/components/bento/BentoMap";
-import BentoMarquee from "@/components/bento/BentoMarquee";
-import BentoLineChart from "@/components/bento/BentoLineChart/BentoLineChart";
-import BentoPhoneAnimation, { type PhoneApp, type PhoneApps8 } from "@/components/bento/BentoPhoneAnimation";
-import BentoChatAnimation, { type ChatExchange } from "@/components/bento/BentoChatAnimation";
-import Bento3DCardGrid from "@/components/bento/Bento3DCardGrid";
-import BentoRevealIcon from "@/components/bento/BentoRevealIcon";
-import BentoTimeline, { type TimelineItem } from "@/components/bento/BentoTimeline";
-import BentoMediaStack, { type MediaStackItem } from "@/components/bento/BentoMediaStack";
-import type { LucideIcon } from "lucide-react";
+import React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { BentoAnimationType } from "@/types/animations";
 
-export type { PhoneApp, PhoneApps8, ChatExchange, TimelineItem, MediaStackItem };
-import type { ButtonConfig, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type BentoAnimationType = Exclude<CardAnimationTypeWith3D, "depth-3d" | "scale-rotate">;
-
-export type BentoInfoItem = {
-  icon: LucideIcon;
-  label: string;
-  value: string;
-};
-
-export type Bento3DItem = {
-  icon: LucideIcon;
-  title: string;
-  subtitle: string;
-  detail: string;
-};
-
-type BaseFeatureCard = {
-  title: string;
-  description: string;
-  button?: ButtonConfig;
-};
-
-export type FeatureCard = BaseFeatureCard & (
-  | {
-      bentoComponent: "icon-info-cards";
-      items: BentoInfoItem[];
-    }
-  | {
-      bentoComponent: "3d-stack-cards";
-      items: [Bento3DItem, Bento3DItem, Bento3DItem];
-    }
-  | {
-      bentoComponent: "3d-task-list";
-      title: string;
-      items: TaskItem[];
-    }
-  | {
-      bentoComponent: "orbiting-icons";
-      centerIcon: LucideIcon;
-      items: OrbitingItem[];
-    }
-  | ({
-      bentoComponent: "marquee";
-      centerIcon: LucideIcon;
-    } & (
-      | { variant: "text"; texts: string[] }
-      | { variant: "icon"; icons: LucideIcon[] }
-    ))
-  | {
-      bentoComponent: "globe" | "animated-bar-chart" | "map" | "line-chart";
-      items?: never;
-    }
-  | {
-      bentoComponent: "3d-card-grid";
-      items: [{ name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }, { name: string; icon: LucideIcon }];
-      centerIcon: LucideIcon;
-    }
-  | {
-      bentoComponent: "phone";
-      statusIcon: LucideIcon;
-      alertIcon: LucideIcon;
-      alertTitle: string;
-      alertMessage: string;
-      apps: PhoneApps8;
-    }
-  | {
-      bentoComponent: "chat";
-      aiIcon: LucideIcon;
-      userIcon: LucideIcon;
-      exchanges: ChatExchange[];
-      placeholder: string;
-    }
-  | {
-      bentoComponent: "reveal-icon";
-      icon: LucideIcon;
-    }
-  | {
-      bentoComponent: "timeline";
-      heading: string;
-      subheading: string;
-      items: [TimelineItem, TimelineItem, TimelineItem];
-      completedLabel: string;
-    }
-  | {
-      bentoComponent: "media-stack";
-      items: [MediaStackItem, MediaStackItem, MediaStackItem];
-    }
-);
-
-interface FeatureBentoProps {
-  features: FeatureCard[];
+export interface FeatureBentoProps {
+  features?: Array<{
+    id: string;
+    title: string;
+    description: string;
+    icon?: React.ReactNode;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+  }>;
   carouselMode?: "auto" | "buttons";
-  animationType: BentoAnimationType;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
+  gridVariant?: string;
+  uniformGridCustomHeightClasses?: string;
+  animationType?: BentoAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  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;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
   gridClassName?: string;
   carouselClassName?: string;
   controlsClassName?: string;
@@ -151,150 +49,94 @@ interface FeatureBentoProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureBento = ({
-  features,
-  carouselMode = "buttons",
-  animationType,
-  title,
+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,
-  tagIcon,
+  description = "",  tag,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureBentoProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  const getBentoComponent = (feature: FeatureCard) => {
-    switch (feature.bentoComponent) {
-      case "globe":
-        return (
-          <div className="relative w-full h-full min-h-0" style={{
-            maskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
-            WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%), linear-gradient(to bottom, black 40%, transparent 100%)",
-            maskComposite: "intersect",
-            WebkitMaskComposite: "source-in"
-          }}>
-            <BentoGlobe className="w-full scale-150 mt-[15%]" />
-          </div>
-        );
-      case "icon-info-cards":
-        return <BentoIconInfoCards items={feature.items} useInvertedBackground={useInvertedBackground} />;
-      case "animated-bar-chart":
-        return <BentoAnimatedBarChart />;
-      case "3d-stack-cards":
-        return <Bento3DStackCards cards={feature.items.map(item => ({ Icon: item.icon, title: item.title, subtitle: item.subtitle, detail: item.detail }))} useInvertedBackground={useInvertedBackground} />;
-      case "3d-task-list":
-        return <Bento3DTaskList title={feature.title} items={feature.items} useInvertedBackground={useInvertedBackground} />;
-      case "orbiting-icons":
-        return <BentoOrbitingIcons centerIcon={feature.centerIcon} items={feature.items} useInvertedBackground={useInvertedBackground} />;
-      case "marquee":
-        return feature.variant === "text"
-          ? <BentoMarquee centerIcon={feature.centerIcon} variant="text" texts={feature.texts} useInvertedBackground={useInvertedBackground} />
-          : <BentoMarquee centerIcon={feature.centerIcon} variant="icon" icons={feature.icons} useInvertedBackground={useInvertedBackground} />;
-      case "map":
-        return <BentoMap useInvertedBackground={useInvertedBackground} />;
-      case "line-chart":
-        return <BentoLineChart useInvertedBackground={useInvertedBackground} />;
-      case "3d-card-grid":
-        return <Bento3DCardGrid items={feature.items} centerIcon={feature.centerIcon} useInvertedBackground={useInvertedBackground} />;
-      case "phone":
-        return <BentoPhoneAnimation statusIcon={feature.statusIcon} alertIcon={feature.alertIcon} alertTitle={feature.alertTitle} alertMessage={feature.alertMessage} apps={feature.apps} useInvertedBackground={useInvertedBackground} />;
-      case "chat":
-        return <BentoChatAnimation aiIcon={feature.aiIcon} userIcon={feature.userIcon} exchanges={feature.exchanges} placeholder={feature.placeholder} useInvertedBackground={useInvertedBackground} />;
-      case "reveal-icon":
-        return <BentoRevealIcon icon={feature.icon} useInvertedBackground={useInvertedBackground} />;
-      case "timeline":
-        return <BentoTimeline heading={feature.heading} subheading={feature.subheading} items={feature.items} completedLabel={feature.completedLabel} useInvertedBackground={useInvertedBackground} />;
-      case "media-stack":
-        return <BentoMediaStack items={feature.items} useInvertedBackground={useInvertedBackground} />;
-    }
-  };
-
-  return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant="uniform-all-items-equal"
-      uniformGridCustomHeightClasses="min-h-0"
-      animationType={animationType}
-      carouselThreshold={4}
-
-      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}
-      carouselItemClassName="w-carousel-item-3 xl:w-carousel-item-3!"
-      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) => (
+  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.title}-${index}`}
-          className={cls("card flex flex-col gap-4 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
+          key={feature.id}
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
         >
-          <div className="relative w-full h-70 min-h-0 overflow-hidden">
-            {getBentoComponent(feature)}
-          </div>
-          <div className="relative z-1 flex flex-col gap-1">
-            <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
-              {feature.title}
-            </h3>
-            <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-              {feature.description}
-            </p>
-          </div>
-          {feature.button && (
-            <Button {...getButtonProps(feature.button, 0, theme.defaultButtonVariant, cls("w-full", cardButtonClassName), cardButtonTextClassName)} />
+          {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>
-      ))}
-    </CardStack>
+      )),
+    [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}
+          />
+        </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>
   );
 };
 
-FeatureBento.displayName = "FeatureBento";
-
-export default FeatureBento;
+export default FeatureBento;

src/components/sections/feature/FeatureCardMedia.tsx

@@ -1,261 +1,141 @@
 "use client";
 
-import { memo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import Tag from "@/components/shared/Tag";
-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 React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { CardAnimationType } from "@/types/animations";
 
-type FeatureCard = {
+export interface FeatureCardMediaProps {
+  features?: Array<{
     id: string;
     title: string;
     description: string;
-    tag: string;
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    buttons?: ButtonConfig[];
-    onCardClick?: () => void;
-};
-
-interface FeatureCardMediaProps {
-    features: FeatureCard[];
-    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;
-    itemClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    tagClassName?: string;
-    contentClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-    cardButtonContainerClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: 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;
+    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;
+  buttonTextClassName?: string;
 }
 
-interface FeatureCardItemProps {
-    feature: FeatureCard;
-    shouldUseLightText: boolean;
-    useInvertedBackground: InvertedBackground;
-    itemClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    tagClassName?: string;
-    contentClassName?: string;
-    cardTitleClassName?: string;
-    cardDescriptionClassName?: string;
-    cardButtonContainerClassName?: string;
-    cardButtonClassName?: string;
-    cardButtonTextClassName?: string;
-}
-
-const FeatureCardItem = memo(({
-    feature,
-    shouldUseLightText,
-    useInvertedBackground,
-    itemClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    tagClassName = "",
-    contentClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-    cardButtonContainerClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-}: FeatureCardItemProps) => {
-    const theme = useTheme();
-
-    return (
-        <article
-            className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
-            onClick={feature.onCardClick}
-            role="article"
-            aria-label={feature.title}
+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}`}
         >
-            <div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
-                <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 transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+          {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 className="absolute top-4 right-4">
-                    <Tag
-                        text={feature.tag}
-                        useInvertedBackground={useInvertedBackground}
-                        className={tagClassName}
-                    />
-                </div>
+              ))}
             </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
 
-            <div className={cls("relative z-1 card rounded-theme-capped p-6 flex flex-col gap-2 flex-1", contentClassName)}>
-                <h3 className={cls(
-                    "text-xl md:text-2xl font-medium leading-tight",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {feature.title}
-                </h3>
-
-                <p className={cls(
-                    "text-base leading-tight",
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
-                    cardDescriptionClassName
-                )}>
-                    {feature.description}
-                </p>
-
-                {feature.buttons && feature.buttons.length > 0 && (
-                    <div className={cls("flex flex-wrap gap-4 max-md:justify-center mt-2", cardButtonContainerClassName)}>
-                        {feature.buttons.slice(0, 2).map((button, index) => (
-                            <Button
-                                key={`${button.text}-${index}`}
-                                {...getButtonProps(button, index, theme.defaultButtonVariant, cardButtonClassName, cardButtonTextClassName)}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-        </article>
-    );
-});
-
-FeatureCardItem.displayName = "FeatureCardItem";
-
-const FeatureCardMedia = ({
-    features,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Features section",
-    className = "",
-    containerClassName = "",
-    itemClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    tagClassName = "",
-    contentClassName = "",
-    cardTitleClassName = "",
-    cardDescriptionClassName = "",
-    cardButtonContainerClassName = "",
-    cardButtonClassName = "",
-    cardButtonTextClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: FeatureCardMediaProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
+  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}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
             textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            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}
+            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}
         >
-            {features.map((feature) => (
-                <FeatureCardItem
-                    key={feature.id}
-                    feature={feature}
-                    shouldUseLightText={shouldUseLightText}
-                    useInvertedBackground={useInvertedBackground}
-                    itemClassName={itemClassName}
-                    mediaWrapperClassName={mediaWrapperClassName}
-                    mediaClassName={mediaClassName}
-                    tagClassName={tagClassName}
-                    contentClassName={contentClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    cardDescriptionClassName={cardDescriptionClassName}
-                    cardButtonContainerClassName={cardButtonContainerClassName}
-                    cardButtonClassName={cardButtonClassName}
-                    cardButtonTextClassName={cardButtonTextClassName}
-                />
-            ))}
+          {cardItems.map((item) => item)}
         </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardMedia.displayName = "FeatureCardMedia";
-
-export default FeatureCardMedia;
+export default FeatureCardMedia;

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,51 +1,31 @@
 "use client";
 
-import CardStack from "@/components/cardStack/CardStack";
-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, GridVariant, CardAnimationTypeWith3D, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+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";
 
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type FeatureCard = {
-  title: string;
-  description: string;
-  button?: ButtonConfig;
-} & (
-    | {
-      imageSrc: string;
-      imageAlt?: string;
-      videoSrc?: never;
-      videoAriaLabel?: never;
-    }
-    | {
-      videoSrc: string;
-      videoAriaLabel?: string;
-      imageSrc?: never;
-      imageAlt?: never;
-    }
-  );
-
-interface FeatureCardOneProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: GridVariant;
+export 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?: TitleSegment[];
-  description: string;
+  animationType?: CardAnimationTypeWith3D;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  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;
@@ -57,8 +37,8 @@ interface FeatureCardOneProps {
   textBoxDescriptionClassName?: string;
   cardTitleClassName?: string;
   cardDescriptionClassName?: string;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
   gridClassName?: string;
   carouselClassName?: string;
   controlsClassName?: string;
@@ -69,128 +49,94 @@ interface FeatureCardOneProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardOne = ({
-  features,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses,
-  animationType,
-  title,
+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,
-  tagIcon,
+  description = "",  tag,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  mediaClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureCardOneProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  const getButtonConfigProps = () => {
-    if (theme.defaultButtonVariant === "hover-bubble") {
-      return { bgClassName: "w-full" };
-    }
-    if (theme.defaultButtonVariant === "icon-arrow") {
-      return { className: "justify-between" };
-    }
-    return {};
-  };
-
-  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}
-    >
-      {features.map((feature, index) => (
+  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.title}-${index}`}
-          className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", cardClassName)}
+          key={feature.id}
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
         >
-          <MediaContent
-            imageSrc={feature.imageSrc}
-            videoSrc={feature.videoSrc}
-            imageAlt={feature.imageAlt || "Feature image"}
-            videoAriaLabel={feature.videoAriaLabel || "Feature video"}
-            imageClassName={cls("relative z-1 min-h-0 h-full", mediaClassName)}
-          />
-          <div className="relative z-1 flex flex-col gap-1">
-            <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
-              {feature.title}
-            </h3>
-            <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-              {feature.description}
-            </p>
-          </div>
-          {feature.button && (
-            <Button
-              {...getButtonProps(
-                { ...feature.button, props: { ...feature.button.props, ...getButtonConfigProps() } },
-                0,
-                theme.defaultButtonVariant,
-                cls("w-full", cardButtonClassName),
-                cardButtonTextClassName
-              )}
-            />
+          {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>
-      ))}
-    </CardStack>
+      )),
+    [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}
+          />
+        </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>
   );
 };
 
-FeatureCardOne.displayName = "FeatureCardOne";
-
-export default FeatureCardOne;
+export default FeatureCardOne;

src/components/sections/feature/FeatureCardSeven.tsx

@@ -1,179 +1,94 @@
 "use client";
 
-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 React, { useMemo } from "react";
+import CardList from "@/components/card/CardList";
+import TextBox from "@/components/Textbox";
+import type { ButtonAnimationType } from "@/types/animations";
 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";
 
-type FeatureCard = {
-    id: number;
+export interface FeatureCardSevenProps {
+  features?: Array<{
+    id: string;
     title: string;
     description: string;
-    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;
+    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 = ({
-    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);
+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 (
+  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
-            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}
+          animationType={animationType}
+          ariaLabel={ariaLabel}
+          className={className}
+          listClassName={listClassName}
         >
-            {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>
-            ))}
+          {listItems.map((item) => item)}
         </CardList>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardSeven.displayName = "FeatureCardSeven";
-
 export default FeatureCardSeven;

src/components/sections/feature/FeatureCardTwelve.tsx

@@ -1,182 +1,93 @@
 "use client";
 
-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 React, { useMemo } from "react";
+import CardList from "@/components/card/CardList";
+import type { ButtonAnimationType } from "@/types/animations";
 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 FeatureCard {
-  id: string;
-  label: string;
-  title: string;
-  items: string[];
-  buttons?: ButtonConfig[];
-}
-
-interface FeatureCardTwelveProps {
-  features: FeatureCard[];
-  animationType: CardAnimationType;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
+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;
   tag?: string;
   tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  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;
-  titleImageWrapperClassName?: string;
-  titleImageClassName?: string;
-  cardContentClassName?: string;
-  labelClassName?: string;
-  cardTitleClassName?: string;
-  itemsContainerClassName?: string;
-  itemTextClassName?: string;
-  cardButtonClassName?: string;
-  cardButtonTextClassName?: string;
 }
 
-const FeatureCardTwelve = ({
-  features,
-  animationType,
-  title,
-  titleSegments,
-  description,
-  tag,
+const FeatureCardTwelve: React.FC<FeatureCardTwelveProps> = ({
+  features = [],
+  animationType = "slide-up",  textboxLayout = "default",  description = "",  tag,
   tagIcon,
   tagAnimation,
   buttons,
   buttonAnimation,
-  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 (
-    <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) => (
-        <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
+  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="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
-            )}>
+          <div className="flex-1 min-w-0">
+            <h3 className={`text-sm font-semibold 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>
-            )}
+            <p className={`text-xs text-foreground/70 ${cardDescriptionClassName}`}>
+              {feature.description}
+            </p>
           </div>
         </div>
-      ))}
-    </CardList>
+      )),
+    [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>
   );
 };
 
-FeatureCardTwelve.displayName = "FeatureCardTwelve";
-
-export default FeatureCardTwelve;
+export default FeatureCardTwelve;

src/components/sections/feature/FeatureCardTwentyFive.tsx

@@ -1,43 +1,30 @@
 "use client";
 
-import CardStack from "@/components/cardStack/CardStack";
-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 { CardAnimationTypeWith3D, TitleSegment, ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types";
+import React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { CardAnimationTypeWith3D } from "@/types/animations";
 
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-interface MediaItem {
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  videoAriaLabel?: string;
-}
-
-type FeatureCard = {
-  title: string;
-  description: string;
-  icon: LucideIcon;
-  mediaItems: [MediaItem, MediaItem];
-};
-
-interface FeatureCardTwentyFiveProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
+export interface FeatureCardTwentyFiveProps {
+  features?: Array<{
+    id: string;
+    title: string;
+    description: string;
+    icon?: React.ReactNode;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
+  }>;
+  gridVariant?: string;
   uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationTypeWith3D;
-  title: string;
-  titleSegments?: TitleSegment[];
-  description: string;
+  animationType?: CardAnimationTypeWith3D;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  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;
@@ -61,118 +48,94 @@ interface FeatureCardTwentyFiveProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardTwentyFive = ({
-  features,
-  carouselMode = "buttons",
-  uniformGridCustomHeightClasses,
-  animationType,
-  title,
+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,
-  tagIcon,
+  description = "",  tag,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  mediaClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  cardIconClassName = "",
-  cardIconWrapperClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureCardTwentyFiveProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant="two-items-per-row"
-      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}
-    >
-      {features.map((feature, index) => {
-        const IconComponent = feature.icon;
-        return (
-          <div
-            key={`${feature.title}-${index}`}
-            className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
-          >
-            <div className="relative z-1 flex flex-col gap-1">
-              <div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
-                <IconComponent className={cls("h-4/10 w-4/10 text-primary-cta-text", cardIconClassName)} strokeWidth={1.5} />
-              </div>
-              <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
-                {feature.title}
-              </h3>
-              <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-                {feature.description}
-              </p>
+  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>
-            <div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
-              {feature.mediaItems.map((item, mediaIndex) => (
-                <div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
-                  <MediaContent
-                    imageSrc={item.imageSrc}
-                    videoSrc={item.videoSrc}
-                    imageAlt={item.imageAlt || "Feature image"}
-                    videoAriaLabel={item.videoAriaLabel || "Feature video"}
-                    imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
-                  />
-                </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>
-        );
-      })}
-    </CardStack>
+          )}
+        </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}
+          />
+        </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>
   );
 };
 
-FeatureCardTwentyFive.displayName = "FeatureCardTwentyFive";
-
-export default FeatureCardTwentyFive;
+export default FeatureCardTwentyFive;

src/components/sections/feature/FeatureCardTwentyFiveWithSaving.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import FeatureCardTwentyFive from './FeatureCardTwentyFive';
-
-interface FeatureCardTwentyFiveWithSavingProps {
-  title: string;
-  description: string;
-  tag?: string;
-  tagIcon?: any;
-  features: Array<{
-    title: string;
-    description: string;
-    icon: any;
-    mediaItems: Array<{ imageSrc: string; imageAlt: string }>;
-  }>;
-  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
-  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground: boolean;
-  onFeatureInteraction?: (featureData: any) => void;
-  workoutType?: 'cardio' | 'training';
-}
-
-export function FeatureCardTwentyFiveWithSaving({
-  title,
-  description,
-  tag,
-  tagIcon,
-  features,
-  animationType,
-  textboxLayout,
-  useInvertedBackground,
-  onFeatureInteraction,
-  workoutType,
-}: FeatureCardTwentyFiveWithSavingProps) {
-  const handleFeatureInteraction = (featureIndex: number, data?: any) => {
-    onFeatureInteraction?.(data);
-  };
-
-  return (
-    <FeatureCardTwentyFive
-      title={title}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      features={features}
-      animationType={animationType}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-    />
-  );
-}
-
-export default FeatureCardTwentyFiveWithSaving;

src/components/sections/feature/FeatureCardTwentyFour.tsx

@@ -1,199 +1,93 @@
 "use client";
 
-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 React, { useMemo } from "react";
+import CardList from "@/components/card/CardList";
+import type { ButtonAnimationType } from "@/types/animations";
 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";
 
-type MediaProps =
-    | {
-        imageSrc: string;
-        imageAlt?: string;
-        videoSrc?: never;
-        videoAriaLabel?: never;
-    }
-    | {
-        videoSrc: string;
-        videoAriaLabel?: string;
-        imageSrc?: never;
-        imageAlt?: never;
-    };
-
-type FeatureItem = MediaProps & {
+export interface FeatureCardTwentyFourProps {
+  features?: Array<{
     id: string;
     title: string;
-    author: string;
     description: string;
-    tags: string[];
-    onFeatureClick?: () => void;
-};
-
-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;
+    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 = ({
-    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);
+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 (
+  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
-            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}
+          animationType={animationType}
+          ariaLabel={ariaLabel}
+          className={className}
+          listClassName={listClassName}
         >
-            {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>
-            ))}
+          {listItems.map((item) => item)}
         </CardList>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardTwentyFour.displayName = "FeatureCardTwentyFour";
-
-export default FeatureCardTwentyFour;
+export default FeatureCardTwentyFour;

src/components/sections/feature/FeatureCardTwentySeven.tsx

@@ -1,127 +1,44 @@
 "use client";
 
-import { useState } from "react";
-import { Plus } from "lucide-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";
+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";
 
-type FeatureCard = {
-  id: string;
-  title: string;
-  descriptions: string[];
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-};
-
-interface FeatureCardTwentySevenItemProps {
-  title: string;
-  descriptions: string[];
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  className?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-}
-
-const FeatureCardTwentySevenItem = ({
-  title,
-  descriptions,
-  imageSrc,
-  videoSrc,
-  imageAlt = "",
-  className = "",
-  titleClassName = "",
-  descriptionClassName = "",
-}: FeatureCardTwentySevenItemProps) => {
-  const [isFlipped, setIsFlipped] = useState(false);
-
-  return (
-    <div
-      className={cls(
-        "relative w-full h-full min-h-0 group [perspective:3000px] cursor-pointer",
-        className
-      )}
-      onClick={() => setIsFlipped(!isFlipped)}
-    >
-      <div
-        className={cls(
-          "relative w-full h-full transition-transform duration-500 [transform-style:preserve-3d]",
-          isFlipped && "[transform:rotateY(180deg)]"
-        )}
-      >
-        <div className="relative w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col [backface-visibility:hidden]">
-          <div className="flex justify-between items-start">
-            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
-              {title}
-            </h3>
-            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
-              <Plus className="h-1/2 w-1/2 text-primary-cta-text" />
-            </div>
-          </div>
-          <div className="w-full aspect-square md:aspect-[10/11] flex items-center justify-center rounded-theme-capped overflow-hidden">
-            <MediaContent
-              imageSrc={imageSrc}
-              videoSrc={videoSrc}
-              imageAlt={imageAlt}
-              imageClassName="w-full h-full object-cover"
-            />
-          </div>
-        </div>
-
-        <div className="absolute! inset-0 w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col justify-between [backface-visibility:hidden] [transform:rotateY(180deg)]">
-          <div className="flex justify-between items-start">
-            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
-              {title}
-            </h3>
-            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
-              <Plus className="h-1/2 w-1/2 rotate-45 text-primary-cta-text" />
-            </div>
-          </div>
-          <div className="w-full flex flex-col gap-3">
-            {descriptions.map((desc, index) => (
-              <p key={index} className={cls("text-lg text-foreground/75 leading-tight", descriptionClassName)}>
-                {desc}
-              </p>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface FeatureCardTwentySevenProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: GridVariant;
+export 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?: TitleSegment[];
-  description: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  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;
@@ -132,90 +49,94 @@ interface FeatureCardTwentySevenProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardTwentySeven = ({
-  features,
-  carouselMode = "buttons",
-  gridVariant,
-  uniformGridCustomHeightClasses = "min-h-none",
-  animationType,
-  title,
+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,
-  tagIcon,
+  description = "",  tag,
   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 = "",
-}: FeatureCardTwentySevenProps) => {
+  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 (
-    <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}
+    <div
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
+      aria-label={ariaLabel}
     >
-      {features.map((feature, index) => (
-        <FeatureCardTwentySevenItem
-          key={`${feature.id}-${index}`}
-          title={feature.title}
-          descriptions={feature.descriptions}
-          imageSrc={feature.imageSrc}
-          videoSrc={feature.videoSrc}
-          imageAlt={feature.imageAlt}
-          className={cardClassName}
-          titleClassName={cardTitleClassName}
-          descriptionClassName={cardDescriptionClassName}
-        />
-      ))}
-    </CardStack>
+      {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>
   );
 };
 
-FeatureCardTwentySeven.displayName = "FeatureCardTwentySeven";
-
-export default FeatureCardTwentySeven;
+export default FeatureCardTwentySeven;

src/components/sections/feature/FeatureCardTwentyThree.tsx

@@ -1,241 +1,141 @@
 "use client";
 
-import { memo } from "react";
-import { ArrowRight } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import Tag from "@/components/shared/Tag";
-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";
+import React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { CardAnimationType } from "@/types/animations";
 
-type FeatureItem = {
+export interface FeatureCardTwentyThreeProps {
+  features?: Array<{
     id: string;
     title: string;
-    tags: string[];
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    onFeatureClick?: () => void;
-};
-
-interface FeatureCardTwentyThreeProps {
-    features: FeatureItem[];
-    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;
-    itemClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    cardClassName?: string;
-    cardTitleClassName?: string;
-    tagsContainerClassName?: string;
-    tagClassName?: string;
-    arrowClassName?: 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;
+    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;
+  buttonTextClassName?: string;
 }
 
-interface FeatureCardItemProps {
-    feature: FeatureItem;
-    shouldUseLightText: boolean;
-    useInvertedBackground: InvertedBackground;
-    itemClassName?: string;
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-    cardClassName?: string;
-    cardTitleClassName?: string;
-    tagsContainerClassName?: string;
-    tagClassName?: string;
-    arrowClassName?: string;
-}
-
-const FeatureCardItem = memo(({
-    feature,
-    shouldUseLightText,
-    useInvertedBackground,
-    itemClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    cardClassName = "",
-    cardTitleClassName = "",
-    tagsContainerClassName = "",
-    tagClassName = "",
-    arrowClassName = "",
-}: FeatureCardItemProps) => {
-    return (
-        <article
-            className={cls("relative h-full flex flex-col gap-6 cursor-pointer group", itemClassName)}
-            onClick={feature.onFeatureClick}
-            role="article"
-            aria-label={feature.title}
+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}`}
         >
-            <div className={cls("relative w-full aspect-square overflow-hidden rounded-theme-capped", mediaWrapperClassName)}>
-                <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 transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+          {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]
+  );
 
-            <div className={cls("relative z-1 card rounded-theme-capped p-5 flex-1 flex flex-col justify-between gap-4", cardClassName)}>
-                <h3 className={cls(
-                    "text-xl md:text-2xl font-medium leading-tight",
-                    shouldUseLightText ? "text-background" : "text-foreground",
-                    cardTitleClassName
-                )}>
-                    {feature.title}
-                </h3>
-
-                <div className="flex items-center justify-between gap-4">
-                    <div className={cls("flex items-center gap-2 flex-wrap", tagsContainerClassName)}>
-                        {feature.tags.map((tag, index) => (
-                            <Tag
-                                key={index}
-                                text={tag}
-                                useInvertedBackground={useInvertedBackground}
-                                className={tagClassName}
-                            />
-                        ))}
-                    </div>
-                    <ArrowRight
-                        className={cls(
-                            "h-[var(--text-base)] w-auto shrink-0 transition-transform duration-300 group-hover:-rotate-45",
-                            shouldUseLightText ? "text-background" : "text-foreground",
-                            arrowClassName
-                        )}
-                        strokeWidth={1.5}
-                    />
-                </div>
-            </div>
-        </article>
-    );
-});
-
-FeatureCardItem.displayName = "FeatureCardItem";
-
-const FeatureCardTwentyThree = ({
-    features,
-    carouselMode = "buttons",
-    uniformGridCustomHeightClasses,
-    animationType,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout,
-    useInvertedBackground,
-    ariaLabel = "Features section",
-    className = "",
-    containerClassName = "",
-    itemClassName = "",
-    mediaWrapperClassName = "",
-    mediaClassName = "",
-    cardClassName = "",
-    cardTitleClassName = "",
-    tagsContainerClassName = "",
-    tagClassName = "",
-    arrowClassName = "",
-    textBoxTitleClassName = "",
-    textBoxTitleImageWrapperClassName = "",
-    textBoxTitleImageClassName = "",
-    textBoxDescriptionClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    textBoxTagClassName = "",
-    textBoxButtonContainerClassName = "",
-    textBoxButtonClassName = "",
-    textBoxButtonTextClassName = "",
-}: FeatureCardTwentyThreeProps) => {
-    const theme = useTheme();
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-    return (
-        <CardStack
-            mode={carouselMode}
-            gridVariant="uniform-all-items-equal"
-            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-            animationType={animationType}
-
+  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}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
             textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            ariaLabel={ariaLabel}
-            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}
+            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}
         >
-            {features.map((feature) => (
-                <FeatureCardItem
-                    key={feature.id}
-                    feature={feature}
-                    shouldUseLightText={shouldUseLightText}
-                    useInvertedBackground={useInvertedBackground}
-                    itemClassName={itemClassName}
-                    mediaWrapperClassName={mediaWrapperClassName}
-                    mediaClassName={mediaClassName}
-                    cardClassName={cardClassName}
-                    cardTitleClassName={cardTitleClassName}
-                    tagsContainerClassName={tagsContainerClassName}
-                    tagClassName={tagClassName}
-                    arrowClassName={arrowClassName}
-                />
-            ))}
+          {cardItems.map((item) => item)}
         </CardStack>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardTwentyThree.displayName = "FeatureCardTwentyThree";
-
-export default FeatureCardTwentyThree;
+export default FeatureCardTwentyThree;

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

@@ -1,54 +1,43 @@
 "use client";
 
-import CardStack from "@/components/cardStack/CardStack";
-import FeatureBorderGlowItem from "./FeatureBorderGlowItem";
-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";
+import React, { useMemo } from "react";
+import CardStack from "@/components/card/CardStack";
+import TextBox from "@/components/Textbox";
+import type { CardAnimationType } from "@/types/animations";
 
-interface FeatureCard {
-  icon: LucideIcon;
-  title: string;
-  description: string;
-}
-
-interface FeatureBorderGlowProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
+export 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?: TitleSegment[];
-  description: string;
+  animationType?: CardAnimationType;
+  title?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
-  tagAnimation?: ButtonAnimationType;
-  buttons?: ButtonConfig[];
-  buttonAnimation?: ButtonAnimationType;
-  textboxLayout: TextboxLayout;
-  useInvertedBackground: InvertedBackground;
+  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;
-  iconContainerClassName?: string;
-  iconClassName?: 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;
@@ -59,97 +48,94 @@ interface FeatureBorderGlowProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureBorderGlow = ({
-  features,
-  carouselMode = "buttons",
-  uniformGridCustomHeightClasses = "min-h-75 2xl:min-h-85",
-  animationType,
-  title,
+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,
-  tagIcon,
+  description = "",  tag,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
-  useInvertedBackground,
-  ariaLabel = "Feature section",
-  className = "",
-  containerClassName = "",
-  cardClassName = "",
-  iconContainerClassName = "",
-  iconClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureBorderGlowProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(
-    useInvertedBackground,
-    theme.cardStyle
+  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 (
-    <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}
+    <div
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
+      aria-label={ariaLabel}
     >
-      {features.map((feature, index) => (
-        <FeatureBorderGlowItem
-          key={`${feature.title}-${index}`}
-          item={feature}
-          index={index}
-          className={cardClassName}
-          iconContainerClassName={iconContainerClassName}
-          iconClassName={iconClassName}
-          titleClassName={cardTitleClassName}
-          descriptionClassName={cardDescriptionClassName}
-          shouldUseLightText={shouldUseLightText}
-        />
-      ))}
-    </CardStack>
+      {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>
   );
 };
 
-FeatureBorderGlow.displayName = "FeatureBorderGlow";
-
-export default FeatureBorderGlow;
+export default FeatureBorderGlow;

src/components/sections/metrics/MetricCardFourteenWithSaving.tsx

@@ -1,70 +0,0 @@
-'use client';
-
-import { useWorkoutStorage } from '@/hooks/useWorkoutStorage';
-import MetricCardFourteen from './MetricCardFourteen';
-import { useEffect, useState } from 'react';
-
-interface MetricCardFourteenWithSavingProps {
-  title: string;
-  tag: string;
-  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  metrics: Array<{
-    id: string;
-    value: string;
-    description: string;
-  }>;
-  metricsAnimation: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  useInvertedBackground: boolean;
-}
-
-export function MetricCardFourteenWithSaving({
-  title,
-  tag,
-  tagAnimation,
-  metrics,
-  metricsAnimation,
-  useInvertedBackground,
-}: MetricCardFourteenWithSavingProps) {
-  const { metrics: userMetrics, updateMetrics } = useWorkoutStorage();
-  const [displayMetrics, setDisplayMetrics] = useState(metrics);
-
-  useEffect(() => {
-    if (userMetrics) {
-      // Dynamically update metrics based on saved data
-      const updatedMetrics = metrics.map(metric => {
-        let value = metric.value;
-        
-        if (metric.id === '1' && userMetrics.totalDistance > 0) {
-          // Update steps/distance metric
-          value = `${Math.round(userMetrics.totalDistance).toLocaleString()}+`;
-        } else if (metric.id === '2' && userMetrics.totalWeight > 0) {
-          // Update volume metric
-          value = `${Math.round(userMetrics.totalWeight)} kg`;
-        } else if (metric.id === '3' && userMetrics.totalDistance > 0) {
-          // Update distance metric
-          value = `${Math.round(userMetrics.totalDistance)}+ km`;
-        } else if (metric.id === '4' && userMetrics.consistency > 0) {
-          // Update consistency metric
-          value = `${userMetrics.consistency} days`;
-        }
-        
-        return { ...metric, value };
-      });
-      
-      setDisplayMetrics(updatedMetrics);
-    }
-  }, [userMetrics, metrics]);
-
-  return (
-    <MetricCardFourteen
-      title={title}
-      tag={tag}
-      tagAnimation={tagAnimation}
-      metrics={displayMetrics}
-      metricsAnimation={metricsAnimation}
-      useInvertedBackground={useInvertedBackground}
-    />
-  );
-}
-
-export default MetricCardFourteenWithSaving;

src/components/sections/pricing/PricingCardEight.tsx

@@ -1,37 +1,248 @@
-'use client';
+"use client";
 
-import React from 'react';
+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";
 
-interface PricingCard {
-  id: string;
-  name: string;
-  price: string;
-  features: string[];
-}
-
-interface PricingCardEightProps {
-  cards: PricingCard[];
-  className?: string;
-}
-
-const PricingCardEight: React.FC<PricingCardEightProps> = ({ cards, className = '' }) => {
-  return (
-    <div className={`pricing-card-eight ${className}`}>
-      {cards.map((card) => (
-        <div key={card.id} className="pricing-card">
-          <h3>{card.name}</h3>
-          <div className="price-section">
-            <span>{card.price}</span>
-          </div>
-          <ul className="features-list">
-            {card.features.map((feature, index) => (
-              <li key={index}>{feature}</li>
-            ))}
-          </ul>
-        </div>
-      ))}
-    </div>
-  );
+type PricingPlan = {
+    id: string;
+    badge: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    subtitle: string;
+    buttons: ButtonConfig[];
+    features: string[];
 };
 
+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;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+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-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="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}
+                />
+            </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>
+    );
+};
+
+PricingCardEight.displayName = "PricingCardEight";
+
 export default PricingCardEight;

src/components/sections/pricing/PricingCardOneWithSaving.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import PricingCardOne from './PricingCardOne';
-
-interface NutritionPlan {
-  id: string;
-  badge: string;
-  badgeIcon?: any;
-  price: string;
-  subtitle: string;
-  features: string[];
-}
-
-interface PricingCardOneWithSavingProps {
-  title: string;
-  description: string;
-  tag?: string;
-  tagIcon?: any;
-  plans: NutritionPlan[];
-  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
-  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground: boolean;
-  onNutritionPlanSelected?: (planData: any) => void;
-}
-
-export function PricingCardOneWithSaving({
-  title,
-  description,
-  tag,
-  tagIcon,
-  plans,
-  animationType,
-  textboxLayout,
-  useInvertedBackground,
-  onNutritionPlanSelected,
-}: PricingCardOneWithSavingProps) {
-  const handlePlanSelection = (planId: string, planBadge: string) => {
-    const nutritionData = {
-      type: 'nutrition' as const,
-      date: new Date().toISOString().split('T')[0],
-      data: {
-        plan: planBadge,
-        planId,
-        selectedAt: Date.now(),
-      },
-    };
-    onNutritionPlanSelected?.(nutritionData);
-  };
-
-  const enhancedPlans = plans.map(plan => ({
-    ...plan,
-  }));
-
-  return (
-    <PricingCardOne
-      title={title}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      plans={enhancedPlans as any}
-      animationType={animationType}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-    />
-  );
-}
-
-export default PricingCardOneWithSaving;

src/components/sections/product/ProductCardFour.tsx

@@ -1,19 +1,238 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Product } from '@/lib/api/product';
+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";
+
+type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+
+type ProductCard = Product & {
+  variant: string;
+};
 
 interface ProductCardFourProps {
-  product: Product;
+  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;
 }
 
-const ProductCardFour: React.FC<ProductCardFourProps> = ({ product }) => {
+interface ProductCardItemProps {
+  product: ProductCard;
+  shouldUseLightText: boolean;
+  cardClassName?: string;
+  imageClassName?: string;
+  cardNameClassName?: string;
+  cardPriceClassName?: string;
+  cardVariantClassName?: string;
+  actionButtonClassName?: string;
+}
+
+const ProductCardItem = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+}: ProductCardItemProps) => {
   return (
-    <div className="product-card-four">
-      <h3>{product.name}</h3>
-      <p>{product.price}</p>
-    </div>
+    <article
+      className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+      onClick={product.onProductClick}
+      role="article"
+      aria-label={`${product.name} - ${product.price}`}
+    >
+      <ProductImage
+        imageSrc={product.imageSrc}
+        imageAlt={product.imageAlt || product.name}
+        isFavorited={product.isFavorited}
+        onFavoriteToggle={product.onFavorite}
+        showActionButton={true}
+        actionButtonAriaLabel={`View ${product.name} details`}
+        imageClassName={imageClassName}
+        actionButtonClassName={actionButtonClassName}
+      />
+
+      <div 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>
+        </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>
   );
 };
 
+ProductCardFour.displayName = "ProductCardFour";
+
 export default ProductCardFour;

src/components/sections/product/ProductCardOne.tsx

@@ -1,29 +1,226 @@
-'use client';
+"use client";
 
-import React from 'react';
+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";
+
+type ProductCardOneGridVariant = Exclude<GridVariant, "timeline">;
+
+type ProductCard = Product;
 
 interface ProductCardOneProps {
-  product?: {
-    id: string;
-    name: string;
-    price: string;
-    imageSrc?: string;
-    imageAlt?: string;
-  };
+    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;
 }
 
-const ProductCardOne: React.FC<ProductCardOneProps> = ({ product }) => {
-  if (!product) return null;
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+}
 
-  return (
-    <div className="product-card-one">
-      {product.imageSrc && (
-        <img src={product.imageSrc} alt={product.imageAlt || 'Product'} />
-      )}
-      <h3>{product.name}</h3>
-      <p>{product.price}</p>
-    </div>
-  );
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+}: ProductCardItemProps) => {
+    return (
+        <article
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={product.onProductClick}
+            role="article"
+            aria-label={`${product.name} - ${product.price}`}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.name}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex items-center justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                    <h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                        {product.name}
+                    </h3>
+                    <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+                        {product.price}
+                    </p>
+                </div>
+
+                <button
+                    className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0"
+                    aria-label={`View ${product.name} details`}
+                    type="button"
+                >
+                    <ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                </button>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardOne = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    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>
+    );
 };
 
+ProductCardOne.displayName = "ProductCardOne";
+
 export default ProductCardOne;

src/components/sections/product/ProductCardOneWithSaving.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import ProductCardOne from './ProductCardOne';
-
-interface ProductCardOneWithSavingProps {
-  title: string;
-  description: string;
-  tag?: string;
-  tagIcon?: any;
-  products: Array<{
-    id: string;
-    name: string;
-    price: string;
-    imageSrc: string;
-    imageAlt?: string;
-    onFavorite?: () => void;
-    onProductClick?: () => void;
-    isFavorited?: boolean;
-  }>;
-  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground: boolean;
-  gridVariant:
-    | 'uniform-all-items-equal'
-    | 'bento-grid'
-    | 'bento-grid-inverted'
-    | 'two-columns-alternating-heights'
-    | 'asymmetric-60-wide-40-narrow'
-    | 'three-columns-all-equal-width'
-    | 'four-items-2x2-equal-grid'
-    | 'one-large-right-three-stacked-left'
-    | 'items-top-row-full-width-bottom'
-    | 'full-width-top-items-bottom-row'
-    | 'one-large-left-three-stacked-right';
-  onWorkoutStart?: (workoutData: any) => void;
-}
-
-export function ProductCardOneWithSaving({
-  title,
-  description,
-  tag,
-  tagIcon,
-  products,
-  animationType,
-  textboxLayout,
-  useInvertedBackground,
-  gridVariant,
-  onWorkoutStart,
-}: ProductCardOneWithSavingProps) {
-  const handleProductClick = (productId: string, productName: string) => {
-    const workoutData = {
-      type: 'training' as const,
-      date: new Date().toISOString().split('T')[0],
-      data: {
-        workout: productName,
-        startTime: Date.now(),
-        productId,
-      },
-    };
-    onWorkoutStart?.(workoutData);
-  };
-
-  const enhancedProducts = products.map(product => ({
-    ...product,
-    onProductClick: () => handleProductClick(product.id, product.name),
-  }));
-
-  return (
-    <ProductCardOne
-      title={title}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      products={enhancedProducts}
-      animationType={animationType}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      gridVariant={gridVariant}
-    />
-  );
-}
-
-export default ProductCardOneWithSaving;

src/components/sections/product/ProductCardThree.tsx

@@ -1,19 +1,283 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Product } from '@/lib/api/product';
+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";
 
-interface ProductCardThreeProps {
-  product: Product;
-}
+type ProductCardThreeGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
 
-const ProductCardThree: React.FC<ProductCardThreeProps> = ({ product }) => {
-  return (
-    <div className="product-card-three">
-      <h3>{product.name}</h3>
-      <p>{product.price}</p>
-    </div>
-  );
+type ProductCard = Product & {
+    onQuantityChange?: (quantity: number) => void;
+    initialQuantity?: number;
+    priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
 };
 
+interface ProductCardThreeProps {
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardThreeGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    isFromApi: boolean;
+    onBuyClick?: (productId: string, quantity: number) => void;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    isFromApi,
+    onBuyClick,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+    quantityControlsClassName = "",
+}: ProductCardItemProps) => {
+    const theme = useTheme();
+    const [quantity, setQuantity] = useState(product.initialQuantity || 1);
+
+    const handleIncrement = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        const newQuantity = quantity + 1;
+        setQuantity(newQuantity);
+        product.onQuantityChange?.(newQuantity);
+    }, [quantity, product]);
+
+    const handleDecrement = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (quantity > 1) {
+            const newQuantity = quantity - 1;
+            setQuantity(newQuantity);
+            product.onQuantityChange?.(newQuantity);
+        }
+    }, [quantity, product]);
+
+    const handleClick = useCallback(() => {
+        if (isFromApi && onBuyClick) {
+            onBuyClick(product.id, quantity);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, onBuyClick, product, quantity]);
+
+    return (
+        <article
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            onClick={handleClick}
+            role="article"
+            aria-label={`${product.name} - ${product.price}`}
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.name}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex flex-col gap-3">
+                <h3 className={cls("text-xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                    {product.name}
+                </h3>
+
+                <div className="flex items-center justify-between gap-4">
+                    <div className={cls("flex items-center gap-2", quantityControlsClassName)}>
+                        <QuantityButton
+                            onClick={handleDecrement}
+                            ariaLabel="Decrease quantity"
+                            Icon={Minus}
+                        />
+                        <span className={cls("text-base font-medium min-w-[2ch] text-center leading-[1]", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            {quantity}
+                        </span>
+                        <QuantityButton
+                            onClick={handleIncrement}
+                            ariaLabel="Increase quantity"
+                            Icon={Plus}
+                        />
+                    </div>
+
+                    <Button
+                        {...getButtonProps(
+                            {
+                                text: product.price,
+                                props: product.priceButtonProps,
+                            },
+                            0,
+                            theme.defaultButtonVariant
+                        )}
+                    />
+                </div>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardThree = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    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>
+    );
+};
+
+ProductCardThree.displayName = "ProductCardThree";
+
 export default ProductCardThree;

src/components/sections/product/ProductCardTwo.tsx

@@ -1,19 +1,267 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Product } from '@/lib/api/product';
+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";
 
-interface ProductCardTwoProps {
-  product: Product;
-}
+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">;
 
-const ProductCardTwo: React.FC<ProductCardTwoProps> = ({ product }) => {
-  return (
-    <div className="product-card-two">
-      <h3>{product.name}</h3>
-      <p>{product.price}</p>
-    </div>
-  );
+type ProductCard = Product & {
+    brand: string;
+    rating: number;
+    reviewCount: string;
 };
 
+interface ProductCardTwoProps {
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardTwoGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardBrandClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    cardRatingClassName?: string;
+    actionButtonClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+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>
+            </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>
+    );
+};
+
+ProductCardTwo.displayName = "ProductCardTwo";
+
 export default ProductCardTwo;

src/components/workout/WorkoutMetricsDisplay.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import React from 'react';
-
-interface MetricDisplay {
-  label: string;
-  value: string | number;
-}
-
-interface WorkoutMetricsDisplayProps {
-  metrics: MetricDisplay[];
-  className?: string;
-}
-
-const WorkoutMetricsDisplay: React.FC<WorkoutMetricsDisplayProps> = ({
-  metrics,
-  className = '',
-}) => {
-  return (
-    <div className={`workout-metrics-display ${className}`}>
-      {metrics.map((metric, index) => (
-        <div key={index} className="metric-item">
-          <span className="metric-label">{metric.label}</span>
-          <span className="metric-value">{metric.value}</span>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default WorkoutMetricsDisplay;

src/components/workout/WorkoutSaver.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { saveWorkoutSession } from '@/lib/storage/workoutStorage';
-
-interface WorkoutSaverProps {
-  onSave?: () => void;
-}
-
-const WorkoutSaver: React.FC<WorkoutSaverProps> = ({ onSave }) => {
-  const [formData, setFormData] = useState({
-    date: new Date().toISOString().split('T')[0],
-    type: 'cardio' as const,
-    duration: 30,
-    calories: 0,
-    notes: '',
-  });
-
-  const handleSave = async () => {
-    try {
-      await saveWorkoutSession({
-        date: formData.date,
-        type: formData.type,
-        duration: formData.duration,
-        calories: formData.calories,
-        notes: formData.notes,
-      });
-      onSave?.();
-    } catch (error) {
-      console.error('Error saving workout:', error);
-    }
-  };
-
-  return (
-    <div className="workout-saver">
-      <button onClick={handleSave}>Save Workout</button>
-    </div>
-  );
-};
-
-export default WorkoutSaver;

src/hooks/useCheckout.ts

@@ -1,81 +1,117 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
+import { useState } from "react";
+import { Product } from "@/lib/api/product";
 
-interface CartItem {
-  id: string;
-  name: string;
-  price: number;
-  quantity: number;
-}
-
-interface CheckoutState {
-  items: CartItem[];
-  total: number;
-  isProcessing: boolean;
-  error: string | null;
-}
-
-interface Product {
-  id: string;
-  name: string;
-  price: number;
-}
-
-export const useCheckout = () => {
-  const [checkoutState, setCheckoutState] = useState<CheckoutState>({
-    items: [],
-    total: 0,
-    isProcessing: false,
-    error: null,
-  });
-
-  const addItem = (item: CartItem) => {
-    setCheckoutState((prev) => ({
-      ...prev,
-      items: [...prev.items, item],
-      total: prev.total + item.price * item.quantity,
-    }));
-  };
-
-  const removeItem = (itemId: string) => {
-    setCheckoutState((prev) => {
-      const item = prev.items.find((i) => i.id === itemId);
-      const removedPrice = item ? item.price * item.quantity : 0;
-      return {
-        ...prev,
-        items: prev.items.filter((i) => i.id !== itemId),
-        total: Math.max(0, prev.total - removedPrice),
-      };
-    });
-  };
-
-  const processCheckout = async () => {
-    setCheckoutState((prev) => ({ ...prev, isProcessing: true, error: null }));
-
-    try {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      setCheckoutState((prev) => ({
-        ...prev,
-        isProcessing: false,
-        items: [],
-        total: 0,
-      }));
-    } catch (err) {
-      setCheckoutState((prev) => ({
-        ...prev,
-        isProcessing: false,
-        error: 'Checkout failed',
-      }));
-    }
-  };
-
-  return {
-    checkoutState,
-    addItem,
-    removeItem,
-    processCheckout,
-  };
+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 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,24 +1,45 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { Product, fetchProductList } from '@/lib/api/product';
+import { useEffect, useState } from "react";
+import { Product, fetchProduct } from "@/lib/api/product";
 
-export function useProduct(id: string) {
-  const [product, setProduct] = useState<Product | null>(null);
-  const [loading, setLoading] = useState(true);
+export function useProduct(productId: string) {
+    const [product, setProduct] = useState<Product | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
 
-  useEffect(() => {
-    const loadProduct = async () => {
-      try {
-        const products = await fetchProductList();
-        const found = products.find(p => p.id === id);
-        setProduct(found || null);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadProduct();
-  }, [id]);
+    useEffect(() => {
+        let isMounted = true;
 
-  return { product, loading };
+        async function loadProduct() {
+            if (!productId) {
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                setIsLoading(true);
+                const data = await fetchProduct(productId);
+                if (isMounted) {
+                    setProduct(data);
+                }
+            } catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error("Failed to fetch product"));
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        loadProduct();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [productId]);
+
+    return { product, isLoading, error };
 }

src/hooks/useProductCatalog.ts

@@ -1,49 +1,115 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
+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";
 
-interface CatalogProduct {
-  id: string;
-  name: string;
-  price: number;
-  category: string;
+export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
+
+interface UseProductCatalogOptions {
+    basePath?: string;
 }
 
-interface UseProductCatalogState {
-  products: CatalogProduct[];
-  loading: boolean;
-  error: string | null;
-}
+export function useProductCatalog(options: UseProductCatalogOptions = {}) {
+    const { basePath = "/shop" } = options;
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
 
-export const useProductCatalog = () => {
-  const [state, setState] = useState<UseProductCatalogState>({
-    products: [],
-    loading: false,
-    error: null,
-  });
+    const [search, setSearch] = useState("");
+    const [category, setCategory] = useState("All");
+    const [sort, setSort] = useState<SortOption>("Newest");
 
-  useEffect(() => {
-    // Simulate loading products
-    const loadProducts = async () => {
-      setState((prev) => ({ ...prev, loading: true }));
-      try {
-        // Mock data
-        const mockProducts: CatalogProduct[] = [
-          { id: '1', name: 'Product 1', price: 99.99, category: 'Electronics' },
-          { id: '2', name: 'Product 2', price: 149.99, category: 'Sports' },
-        ];
-        setState({ products: mockProducts, loading: false, error: null });
-      } catch (err) {
-        setState((prev) => ({
-          ...prev,
-          loading: false,
-          error: 'Failed to load products',
+    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,
     };
-
-    loadProducts();
-  }, []);
-
-  return state;
-};
+}

src/hooks/useProductDetail.ts

@@ -1,52 +1,196 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
+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";
 
-interface ProductDetail {
-  id: string;
-  name: string;
-  price: number;
-  description: string;
+interface ProductImage {
+    src: string;
+    alt: string;
 }
 
-interface UseProductDetailState {
-  product: ProductDetail | null;
-  loading: boolean;
-  error: string | null;
+interface ProductMeta {
+    salePrice?: string;
+    ribbon?: string;
+    inventoryStatus?: string;
+    inventoryQuantity?: number;
+    sku?: string;
 }
 
-export const useProductDetail = (productId: string) => {
-  const [state, setState] = useState<UseProductDetailState>({
-    product: null,
-    loading: false,
-    error: null,
-  });
+export function useProductDetail(productId: string) {
+    const { product, isLoading, error } = useProduct(productId);
+    const [selectedQuantity, setSelectedQuantity] = useState(1);
+    const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
 
-  useEffect(() => {
-    if (!productId) return;
+    const images = useMemo<ProductImage[]>(() => {
+        if (!product) return [];
 
-    const loadProduct = async () => {
-      setState((prev) => ({ ...prev, loading: true }));
-      try {
-        // Mock data
-        const mockProduct: ProductDetail = {
-          id: productId,
-          name: 'Sample Product',
-          price: 99.99,
-          description: 'This is a sample product',
+        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,
         };
-        setState({ product: mockProduct, loading: false, error: null });
-      } catch (err) {
-        setState((prev) => ({
-          ...prev,
-          loading: false,
-          error: 'Failed to load product',
-        }));
-      }
+    }, [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,
     };
-
-    loadProduct();
-  }, [productId]);
-
-  return state;
-};
+}

src/hooks/useProducts.ts

@@ -1,23 +1,39 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { Product, fetchProductList } from '@/lib/api/product';
+import { useEffect, useState } from "react";
+import { Product, fetchProducts } from "@/lib/api/product";
 
 export function useProducts() {
-  const [products, setProducts] = useState<Product[]>([]);
-  const [loading, setLoading] = useState(true);
+    const [products, setProducts] = useState<Product[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
 
-  useEffect(() => {
-    const loadProducts = async () => {
-      try {
-        const data = await fetchProductList();
-        setProducts(data);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadProducts();
-  }, []);
+    useEffect(() => {
+        let isMounted = true;
 
-  return { products, loading };
+        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);
+                }
+            }
+        }
+
+        loadProducts();
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    return { products, isLoading, error };
 }

src/hooks/useWorkoutData.ts

@@ -1,53 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import {
-  UserMetrics,
-  WorkoutSession,
-  saveWorkoutSession,
-  getWorkoutSessions,
-  updateWorkoutSession,
-  deleteWorkoutSession,
-  getWorkoutsByType,
-  getWorkoutsByDateRange,
-  saveUserMetrics,
-  getUserMetrics,
-  updateUserMetrics,
-  calculateMetricsFromSessions,
-} from '@/lib/storage/workoutStorage';
-
-export function useWorkoutData() {
-  const [workouts, setWorkouts] = useState<WorkoutSession[]>([]);
-  const [metrics, setMetrics] = useState<UserMetrics | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const [workoutList, userMetrics] = await Promise.all([
-          getWorkoutSessions(),
-          getUserMetrics(),
-        ]);
-        setWorkouts(workoutList);
-        setMetrics(userMetrics);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadData();
-  }, []);
-
-  return {
-    workouts,
-    metrics,
-    loading,
-    saveWorkoutSession,
-    updateWorkoutSession,
-    deleteWorkoutSession,
-    getWorkoutsByType,
-    getWorkoutsByDateRange,
-    saveUserMetrics,
-    updateUserMetrics,
-    calculateMetricsFromSessions,
-  };
-}

src/hooks/useWorkoutStorage.ts

@@ -1,120 +0,0 @@
-'use client';
-
-import { useState, useCallback, useEffect } from 'react';
-import { WorkoutStorageService, WorkoutSession, UserMetrics } from '@/lib/storage/workoutStorage';
-
-export function useWorkoutStorage() {
-  const [workouts, setWorkouts] = useState<WorkoutSession[]>([]);
-  const [metrics, setMetrics] = useState<UserMetrics | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Load initial data
-  useEffect(() => {
-    setIsLoading(true);
-    try {
-      const loadedWorkouts = WorkoutStorageService.getWorkoutSessions();
-      const loadedMetrics = WorkoutStorageService.getMetrics();
-      setWorkouts(loadedWorkouts);
-      setMetrics(loadedMetrics);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  const saveWorkout = useCallback((session: Omit<WorkoutSession, 'id' | 'createdAt'>) => {
-    try {
-      const saved = WorkoutStorageService.saveWorkoutSession(session);
-      setWorkouts(prev => [...prev, saved]);
-      // Recalculate metrics
-      const updated = WorkoutStorageService.calculateMetricsFromSessions();
-      setMetrics(updated);
-      return saved;
-    } catch (error) {
-      console.error('Error saving workout:', error);
-      return null;
-    }
-  }, []);
-
-  const updateWorkout = useCallback((id: string, updates: Partial<WorkoutSession>) => {
-    try {
-      const updated = WorkoutStorageService.updateWorkoutSession(id, updates);
-      if (updated) {
-        setWorkouts(prev => prev.map(w => w.id === id ? updated : w));
-        // Recalculate metrics
-        const newMetrics = WorkoutStorageService.calculateMetricsFromSessions();
-        setMetrics(newMetrics);
-      }
-      return updated;
-    } catch (error) {
-      console.error('Error updating workout:', error);
-      return null;
-    }
-  }, []);
-
-  const deleteWorkout = useCallback((id: string) => {
-    try {
-      const success = WorkoutStorageService.deleteWorkoutSession(id);
-      if (success) {
-        setWorkouts(prev => prev.filter(w => w.id !== id));
-        // Recalculate metrics
-        const updated = WorkoutStorageService.calculateMetricsFromSessions();
-        setMetrics(updated);
-      }
-      return success;
-    } catch (error) {
-      console.error('Error deleting workout:', error);
-      return false;
-    }
-  }, []);
-
-  const getWorkoutsByType = useCallback((type: WorkoutSession['type']) => {
-    return workouts.filter(w => w.type === type);
-  }, [workouts]);
-
-  const getWorkoutsByDate = useCallback((date: string) => {
-    return workouts.filter(w => w.date === date);
-  }, [workouts]);
-
-  const updateMetrics = useCallback((updates: Partial<UserMetrics>) => {
-    try {
-      const updated = WorkoutStorageService.updateMetrics(updates);
-      setMetrics(updated);
-      return updated;
-    } catch (error) {
-      console.error('Error updating metrics:', error);
-      return metrics;
-    }
-  }, [metrics]);
-
-  const clearAllData = useCallback(() => {
-    try {
-      WorkoutStorageService.clearAllData();
-      setWorkouts([]);
-      setMetrics({
-        totalWorkouts: 0,
-        totalDistance: 0,
-        totalCalories: 0,
-        totalWeight: 0,
-        consistency: 0,
-        lastUpdated: Date.now(),
-      });
-    } catch (error) {
-      console.error('Error clearing data:', error);
-    }
-  }, []);
-
-  return {
-    workouts,
-    metrics,
-    isLoading,
-    saveWorkout,
-    updateWorkout,
-    deleteWorkout,
-    getWorkoutsByType,
-    getWorkoutsByDate,
-    updateMetrics,
-    clearAllData,
-  };
-}
-
-export type UseWorkoutStorageReturn = ReturnType<typeof useWorkoutStorage>;

src/lib/api/product.ts

@@ -1,10 +1,219 @@
-export interface Product {
-  id: string;
-  name: string;
-  price: string;
-  description?: string;
+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 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 fetchProductList(): Promise<Product[]> {
-  return [];
+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 [];
+    }
+
+    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;
+    }
+}

src/lib/storage/workoutStorage.ts

@@ -1,185 +0,0 @@
-// Workout and metrics persistence layer
-
-interface WorkoutSession {
-  id: string;
-  type: 'cardio' | 'training' | 'nutrition';
-  date: string;
-  data: Record<string, any>;
-  createdAt: number;
-}
-
-interface UserMetrics {
-  totalWorkouts: number;
-  totalDistance: number;
-  totalCalories: number;
-  totalWeight: number;
-  consistency: number; // days in a row
-  lastUpdated: number;
-}
-
-const STORAGE_KEYS = {
-  WORKOUTS: 'fitflow_workouts',
-  METRICS: 'fitflow_metrics',
-  USER_PROFILE: 'fitflow_user_profile',
-} as const;
-
-export class WorkoutStorageService {
-  // Workout Session Management
-  static saveWorkoutSession(session: Omit<WorkoutSession, 'id' | 'createdAt'>): WorkoutSession {
-    try {
-      const sessions = this.getWorkoutSessions();
-      const newSession: WorkoutSession = {
-        id: `workout_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-        ...session,
-        createdAt: Date.now(),
-      };
-      sessions.push(newSession);
-      localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(sessions));
-      return newSession;
-    } catch (error) {
-      console.error('Error saving workout session:', error);
-      throw error;
-    }
-  }
-
-  static getWorkoutSessions(): WorkoutSession[] {
-    try {
-      const data = localStorage.getItem(STORAGE_KEYS.WORKOUTS);
-      return data ? JSON.parse(data) : [];
-    } catch (error) {
-      console.error('Error retrieving workout sessions:', error);
-      return [];
-    }
-  }
-
-  static getWorkoutSessionsByType(type: WorkoutSession['type']): WorkoutSession[] {
-    const sessions = this.getWorkoutSessions();
-    return sessions.filter(session => session.type === type);
-  }
-
-  static getWorkoutSessionsByDate(date: string): WorkoutSession[] {
-    const sessions = this.getWorkoutSessions();
-    return sessions.filter(session => session.date === date);
-  }
-
-  static updateWorkoutSession(id: string, updates: Partial<WorkoutSession>): WorkoutSession | null {
-    try {
-      const sessions = this.getWorkoutSessions();
-      const index = sessions.findIndex(s => s.id === id);
-      if (index === -1) return null;
-      
-      const updated = { ...sessions[index], ...updates, id: sessions[index].id, createdAt: sessions[index].createdAt };
-      sessions[index] = updated;
-      localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(sessions));
-      return updated;
-    } catch (error) {
-      console.error('Error updating workout session:', error);
-      return null;
-    }
-  }
-
-  static deleteWorkoutSession(id: string): boolean {
-    try {
-      const sessions = this.getWorkoutSessions();
-      const filtered = sessions.filter(s => s.id !== id);
-      localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(filtered));
-      return filtered.length < sessions.length;
-    } catch (error) {
-      console.error('Error deleting workout session:', error);
-      return false;
-    }
-  }
-
-  // Metrics Management
-  static saveMetrics(metrics: UserMetrics): void {
-    try {
-      localStorage.setItem(STORAGE_KEYS.METRICS, JSON.stringify(metrics));
-    } catch (error) {
-      console.error('Error saving metrics:', error);
-    }
-  }
-
-  static getMetrics(): UserMetrics {
-    try {
-      const data = localStorage.getItem(STORAGE_KEYS.METRICS);
-      if (!data) {
-        return {
-          totalWorkouts: 0,
-          totalDistance: 0,
-          totalCalories: 0,
-          totalWeight: 0,
-          consistency: 0,
-          lastUpdated: Date.now(),
-        };
-      }
-      return JSON.parse(data);
-    } catch (error) {
-      console.error('Error retrieving metrics:', error);
-      return {
-        totalWorkouts: 0,
-        totalDistance: 0,
-        totalCalories: 0,
-        totalWeight: 0,
-        consistency: 0,
-        lastUpdated: Date.now(),
-      };
-    }
-  }
-
-  static updateMetrics(updates: Partial<UserMetrics>): UserMetrics {
-    const current = this.getMetrics();
-    const updated: UserMetrics = { ...current, ...updates, lastUpdated: Date.now() };
-    this.saveMetrics(updated);
-    return updated;
-  }
-
-  // Calculated Metrics
-  static calculateMetricsFromSessions(): UserMetrics {
-    const sessions = this.getWorkoutSessions();
-    let totalDistance = 0;
-    let totalCalories = 0;
-    let totalWeight = 0;
-
-    sessions.forEach(session => {
-      if (session.data.distance) totalDistance += Number(session.data.distance) || 0;
-      if (session.data.calories) totalCalories += Number(session.data.calories) || 0;
-      if (session.data.weight) totalWeight += Number(session.data.weight) || 0;
-    });
-
-    return this.updateMetrics({
-      totalWorkouts: sessions.length,
-      totalDistance,
-      totalCalories,
-      totalWeight,
-    });
-  }
-
-  // Batch Operations
-  static clearAllData(): void {
-    try {
-      localStorage.removeItem(STORAGE_KEYS.WORKOUTS);
-      localStorage.removeItem(STORAGE_KEYS.METRICS);
-      localStorage.removeItem(STORAGE_KEYS.USER_PROFILE);
-    } catch (error) {
-      console.error('Error clearing data:', error);
-    }
-  }
-
-  static exportData(): { workouts: WorkoutSession[]; metrics: UserMetrics } {
-    return {
-      workouts: this.getWorkoutSessions(),
-      metrics: this.getMetrics(),
-    };
-  }
-
-  static importData(data: { workouts: WorkoutSession[]; metrics: UserMetrics }): void {
-    try {
-      localStorage.setItem(STORAGE_KEYS.WORKOUTS, JSON.stringify(data.workouts));
-      this.saveMetrics(data.metrics);
-    } catch (error) {
-      console.error('Error importing data:', error);
-    }
-  }
-}
-
-export type { WorkoutSession, UserMetrics };

src/middleware.ts

@@ -0,0 +1,33 @@
+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).*)'],
+};