Update src/components/sections/product/ProductCardOneWithSaving.tsx

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

@@ -1,61 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import crypto from "crypto";
-
-// Mock user database - replace with actual database
-const mockUsers = [
-  {
-    id: "user_1",    email: "teste@fitflow.com",    passwordHash: crypto.createHash("sha256").update("senha123").digest("hex"),
-    name: "Usuário Teste"},
-];
-
-export async function POST(request: NextRequest) {
-  try {
-    const { email, password } = await request.json();
-
-    // Validate inputs
-    if (!email || !password) {
-      return NextResponse.json(
-        { message: "Email e senha são obrigatórios" },
-        { status: 400 }
-      );
-    }
-
-    // Hash password
-    const passwordHash = crypto
-      .createHash("sha256")
-      .update(password)
-      .digest("hex");
-
-    // Find user
-    const user = mockUsers.find(
-      (u) => u.email === email && u.passwordHash === passwordHash
-    );
-
-    if (!user) {
-      return NextResponse.json(
-        { message: "Email ou senha incorretos" },
-        { status: 401 }
-      );
-    }
-
-    // Generate token (in production, use JWT)
-    const token = crypto.randomBytes(32).toString("hex");
-
-    return NextResponse.json(
-      {
-        token,
-        user: {
-          id: user.id,
-          email: user.email,
-          name: user.name,
-        },
-      },
-      { status: 200 }
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Erro interno do servidor" },
-      { status: 500 }
-    );
-  }
-}

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

@@ -1,18 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-export async function POST(request: NextRequest) {
-  try {
-    // Clear user session from storage (client-side handling recommended)
-    // Server-side: you could invalidate tokens here
-
-    return NextResponse.json(
-      { message: "Logout realizado com sucesso" },
-      { status: 200 }
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Erro ao fazer logout" },
-      { status: 500 }
-    );
-  }
-}

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

@@ -1,36 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-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);
-
-    // Validate token (in production, verify JWT signature)
-    if (token.length !== 64) {
-      return NextResponse.json(
-        { message: "Token inválido" },
-        { status: 401 }
-      );
-    }
-
-    return NextResponse.json(
-      {
-        valid: true,
-        message: "Sessão válida"},
-      { status: 200 }
-    );
-  } catch (error) {
-    return NextResponse.json(
-      { message: "Erro ao verificar sessão" },
-      { status: 500 }
-    );
-  }
-}

src/app/components/WorkoutDataIntegration.tsx

@@ -1,23 +1,62 @@
-"use client";
+'use client';
 
-import React from 'react';
+import React, { useCallback } from 'react';
-import { WorkoutSession } from '@/app/lib/storage/workoutStorage';
+import { useWorkoutTracking } from '@/app/hooks/useWorkoutTracking';
+import { WorkoutSession, CardioSession, NutritionLog } from '@/app/lib/storage/workoutStorage';
 
-interface WorkoutDataIntegrationProps {
+export interface WorkoutDataIntegrationProps {
-  workoutData: WorkoutSession[];
+  onSave?: (data: any) => void;
+  autoSave?: boolean;
 }
 
-const WorkoutDataIntegration: React.FC<WorkoutDataIntegrationProps> = ({ workoutData }) => {
+/**
+ * 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 className="workout-data-integration">
+    <div data-workout-integration="true" data-context={JSON.stringify(contextValue)}>
-      <h2>Workout Data</h2>
+      {children}
-      <ul>
-        {workoutData.map((workout) => (
-          <li key={workout.id}>
-            {workout.date} - {workout.duration} minutes - {workout.totalCalories} calories
-          </li>
-        ))}
-      </ul>
     </div>
   );
 };

src/app/dashboard/page.tsx

@@ -1,219 +0,0 @@
-"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, Settings, Bell } from 'lucide-react';
-
-interface UserSession {
-  email: string;
-  loginTime: string;
-  token: string;
-}
-
-export default function DashboardPage() {
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(true);
-  const [userSession, setUserSession] = useState<UserSession | null>(null);
-  const [lastActivityTime, setLastActivityTime] = useState<string>("");
-
-  useEffect(() => {
-    // Check if user is logged in
-    const isLoggedIn = sessionStorage.getItem('isLoggedIn');
-    if (!isLoggedIn) {
-      router.push('/login');
-      return;
-    }
-
-    // Retrieve session data
-    const sessionData = localStorage.getItem('userSession');
-    if (sessionData) {
-      const parsed = JSON.parse(sessionData);
-      setUserSession(parsed);
-      const loginTime = new Date(parsed.loginTime);
-      setLastActivityTime(loginTime.toLocaleString('pt-BR'));
-    }
-
-    setIsLoading(false);
-  }, [router]);
-
-  const handleLogout = () => {
-    if (window.confirm('Deseja sair da sua conta?')) {
-      localStorage.removeItem('userSession');
-      sessionStorage.removeItem('isLoggedIn');
-      router.push('/');
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-background via-background to-background-accent">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-cta"></div>
-      </div>
-    );
-  }
-
-  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", onClick: handleLogout }}
-          brandName="FitFlow Pro"
-        />
-      </div>
-
-      <div className="min-h-screen bg-gradient-to-br from-background via-background to-background-accent py-12 px-4">
-        <div className="max-w-6xl mx-auto">
-          {/* Welcome Header */}
-          <div className="mb-12">
-            <h1 className="text-5xl font-extrabold text-foreground mb-2">Bem-vindo de Volta! 👋</h1>
-            <p className="text-foreground/60 text-lg">Sua jornada de fitness começa aqui</p>
-          </div>
-
-          {/* User Info Card */}
-          {userSession && (
-            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur mb-8">
-              <div className="flex items-start justify-between">
-                <div className="flex items-center gap-4">
-                  <div className="w-16 h-16 rounded-full bg-primary-cta/20 border-2 border-primary-cta flex items-center justify-center">
-                    <User className="w-8 h-8 text-primary-cta" />
-                  </div>
-                  <div>
-                    <p className="text-sm text-foreground/60">Email da Conta</p>
-                    <p className="text-2xl font-semibold text-foreground">{userSession.email}</p>
-                    <p className="text-sm text-foreground/50 mt-1">Login: {lastActivityTime}</p>
-                  </div>
-                </div>
-                <div className="flex gap-2">
-                  <button className="p-3 rounded-full bg-secondary-cta/20 hover:bg-secondary-cta/30 transition-colors text-secondary-cta">
-                    <Settings className="w-6 h-6" />
-                  </button>
-                  <button className="p-3 rounded-full bg-secondary-cta/20 hover:bg-secondary-cta/30 transition-colors text-secondary-cta">
-                    <Bell className="w-6 h-6" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Dashboard Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-            {/* Stats Card 1 */}
-            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
-              <p className="text-foreground/60 text-sm mb-2">Treinos Completos</p>
-              <p className="text-4xl font-extrabold text-primary-cta mb-2">12</p>
-              <p className="text-sm text-accent">↑ 2 mais que a semana passada</p>
-            </div>
-
-            {/* Stats Card 2 */}
-            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
-              <p className="text-foreground/60 text-sm mb-2">Calorias Queimadas</p>
-              <p className="text-4xl font-extrabold text-secondary-cta mb-2">2,450</p>
-              <p className="text-sm text-accent">Meta: 2,000 calorias</p>
-            </div>
-
-            {/* Stats Card 3 */}
-            <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
-              <p className="text-foreground/60 text-sm mb-2">Sequência de Dias</p>
-              <p className="text-4xl font-extrabold text-accent mb-2">8</p>
-              <p className="text-sm text-accent">dias consecutivos ✨</p>
-            </div>
-          </div>
-
-          {/* Quick Actions */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
-              <h3 className="text-2xl font-bold text-foreground mb-4">🏋️ Iniciar Treino</h3>
-              <p className="text-foreground/60 mb-6">Comece um treino personalizado com base em sua biometria</p>
-              <button className="w-full py-3 px-4 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold rounded-full transition-all duration-300">
-                Começar Agora
-              </button>
-            </div>
-
-            <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
-              <h3 className="text-2xl font-bold text-foreground mb-4">🥗 Plano Nutricional</h3>
-              <p className="text-foreground/60 mb-6">Veja suas refeições planejadas para hoje e suas macros</p>
-              <button className="w-full py-3 px-4 bg-secondary-cta hover:bg-secondary-cta/90 text-white font-semibold rounded-full transition-all duration-300">
-                Ver Plano
-              </button>
-            </div>
-          </div>
-
-          {/* Session Info */}
-          <div className="rounded-2xl p-6 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
-            <h3 className="text-lg font-semibold text-foreground mb-4">Informações da Sessão</h3>
-            <div className="space-y-2 text-sm text-foreground/60">
-              <p>🔐 Token de Sessão: {userSession?.token?.substring(0, 20)}...</p>
-              <p>📱 Navegador: {typeof navigator !== 'undefined' ? navigator.userAgent.substring(0, 50) : 'N/A'}...</p>
-              <p>🌐 Plataforma: {typeof window !== 'undefined' ? window.location.hostname : 'N/A'}</p>
-            </div>
-          </div>
-
-          {/* Logout Button */}
-          <div className="mt-8 flex justify-center">
-            <button
-              onClick={handleLogout}
-              className="px-8 py-3 bg-red-500/20 hover:bg-red-500/30 border border-red-500/50 text-red-500 font-semibold rounded-full transition-all duration-300 flex items-center gap-2"
-            >
-              <LogOut className="w-5 h-5" />
-              Sair da Conta
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <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,24 +1,56 @@
-"use client";
+'use client';
 
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
-import { WorkoutSession, NutritionLog } from '@/app/lib/storage/workoutStorage';
+import {
+  saveWorkoutSession,
+  saveCardioSession,
+  saveNutritionLog,
+  getUserMetrics,
+  getWorkoutSessions,
+  getCardioSessions,
+  getNutritionLogs,
+  WorkoutSession,
+  CardioSession,
+  NutritionLog,
+  UserMetrics,
+} from '@/app/lib/storage/workoutStorage';
 
 export const useWorkoutTracking = () => {
-  const [workouts, setWorkouts] = useState<WorkoutSession[]>([]);
+  const [metrics, setMetrics] = useState<UserMetrics>(getUserMetrics());
-  const [nutritionLogs, setNutritionLogs] = useState<NutritionLog[]>([]);
+  const [workouts, setWorkouts] = useState<WorkoutSession[]>(getWorkoutSessions());
+  const [cardioSessions, setCardioSessions] = useState<CardioSession[]>(getCardioSessions());
+  const [nutritionLogs, setNutritionLogs] = useState<NutritionLog[]>(getNutritionLogs());
 
-  const addWorkout = (workout: WorkoutSession) => {
+  const addWorkoutSession = useCallback((session: WorkoutSession) => {
-    setWorkouts([...workouts, workout]);
+    saveWorkoutSession(session);
-  };
+    setWorkouts(getWorkoutSessions());
+    setMetrics(getUserMetrics());
+  }, []);
 
-  const addNutritionLog = (log: NutritionLog) => {
+  const addCardioSession = useCallback((session: CardioSession) => {
-    setNutritionLogs([...nutritionLogs, log]);
+    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,
-    addWorkout,
+    addWorkoutSession,
+    addCardioSession,
     addNutritionLog,
+    refreshMetrics,
   };
 };

src/app/lib/storage/workoutStorage.ts

@@ -1,99 +1,309 @@
-// This file contains workout storage utilities
+/**
+ * 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;
-  duration: number;
+  sets: WorkoutSet[];
-  exercises: Exercise[];
+  duration: number; // in seconds
-  totalCalories: number;
+  caloriesBurned: number;
+  notes?: string;
 }
 
-export interface Exercise {
+export interface CardioSession {
   id: string;
-  name: string;
+  type: 'running' | 'walking' | 'cycling';
-  sets: number;
+  date: string;
-  reps: number;
+  distance: number; // in km
-  weight: number;
+  duration: number; // in seconds
+  caloriesBurned: number;
+  pace: number; // km/h
+  steps?: number;
+  route?: string;
 }
 
 export interface NutritionLog {
   id: string;
   date: string;
-  meals: Meal[];
-  totalCalories: number;
-}
-
-export interface Meal {
-  id: string;
-  name: string;
   calories: number;
-  macros: {
+  protein: number;
-    protein: number;
+  carbs: number;
-    carbs: number;
+  fats: number;
-    fats: number;
+  meals: string[];
-  };
 }
 
-export const workoutStorage = {
+export interface UserMetrics {
-  // Store workout session
+  totalWorkouts: number;
-  saveWorkout: (session: WorkoutSession): void => {
+  totalCardioDistance: number;
-    const workouts = JSON.parse(localStorage.getItem('workouts') || '[]');
+  totalCaloriesBurned: number;
-    workouts.push(session);
+  currentStreak: number;
-    localStorage.setItem('workouts', JSON.stringify(workouts));
+  personalRecords: Record<string, number>;
-  },
+  lastUpdated: number;
+}
 
-  // Get all workouts
+const STORAGE_KEYS = {
-  getAllWorkouts: (): WorkoutSession[] => {
+  WORKOUT_SESSIONS: 'fitflow_workout_sessions',
-    const workouts = localStorage.getItem('workouts');
+  CARDIO_SESSIONS: 'fitflow_cardio_sessions',
-    return workouts ? JSON.parse(workouts) : [];
+  NUTRITION_LOGS: 'fitflow_nutrition_logs',
-  },
+  USER_METRICS: 'fitflow_user_metrics',
+};
 
-  // Get workouts by date range
+/**
-  getWorkoutsByDateRange: (startDate: Date, endDate: Date): WorkoutSession[] => {
+ * Save a workout session to localStorage
-    const allWorkouts = workoutStorage.getAllWorkouts();
+ */
-    return allWorkouts.filter(w => {
+export const saveWorkoutSession = (session: WorkoutSession): void => {
-      const workoutDate = new Date(w.date);
+  if (typeof window === 'undefined') return;
-      return workoutDate >= startDate && workoutDate <= endDate;
+  
-    });
+  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);
+  }
+};
 
-  // Delete workout
+/**
-  deleteWorkout: (id: string): void => {
+ * Get all workout sessions from localStorage
-    const workouts = JSON.parse(localStorage.getItem('workouts') || '[]');
+ */
-    const filtered = workouts.filter((w: WorkoutSession) => w.id !== id);
+export const getWorkoutSessions = (): WorkoutSession[] => {
-    localStorage.setItem('workouts', JSON.stringify(filtered));
+  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 [];
+  }
+};
 
-  // Get statistics
+/**
-  getStatistics: (): { totalWorkouts: number; totalCardioDistance: number; totalCaloriesBurned: number } => {
+ * Save a cardio session to localStorage
-    const allWorkouts = workoutStorage.getAllWorkouts();
+ */
-    const totalWorkouts = allWorkouts.length;
+export const saveCardioSession = (session: CardioSession): void => {
-    const totalCardioDistance = allWorkouts.reduce((sum, w) => sum + (w.duration * 0.15), 0);
+  if (typeof window === 'undefined') return;
-    const totalCaloriesBurned = allWorkouts.reduce((sum, w) => sum + w.totalCalories, 0);
+  
+  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(),
     };
-  },
 
-  // Save nutrition log
+    localStorage.setItem(STORAGE_KEYS.USER_METRICS, JSON.stringify(metrics));
-  saveNutritionLog: (log: NutritionLog): void => {
+  } catch (error) {
-    const logs = JSON.parse(localStorage.getItem('nutritionLogs') || '[]');
+    console.error('Error updating user metrics:', error);
-    logs.push(log);
+  }
-    localStorage.setItem('nutritionLogs', JSON.stringify(logs));
+};
-  },
+
-
+/**
-  // Get nutrition logs
+ * Calculate consecutive days with activity
-  getNutritionLogs: (): NutritionLog[] => {
+ */
-    const logs = localStorage.getItem('nutritionLogs');
+const calculateStreak = (sessions: Array<WorkoutSession | CardioSession>): number => {
-    return logs ? JSON.parse(logs) : [];
+  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());
-  // Clear all data
+
-  clearAll: (): void => {
+  let streak = 1;
-    localStorage.removeItem('workouts');
+  for (let i = 1; i < dates.length; i++) {
-    localStorage.removeItem('nutritionLogs');
+    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,109 +1,73 @@
 "use client";
 
-import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import { Mail, Lock, Eye, EyeOff, ArrowRight } from 'lucide-react';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-
+import { Mail, Lock, ArrowRight, AlertCircle } from 'lucide-react';
-interface LoginFormData {
+import { useState } from 'react';
-  email: string;
-  password: string;
-}
-
-interface LoginErrors {
-  email?: string;
-  password?: string;
-  general?: string;
-}
 
 export default function LoginPage() {
-  const [formData, setFormData] = useState<LoginFormData>({
+  const [formData, setFormData] = useState({
     email: '',
     password: ''
   });
-  const [errors, setErrors] = useState<LoginErrors>({});
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
-  const [successMessage, setSuccessMessage] = useState('');
-
-  const validateForm = (): boolean => {
-    const newErrors: LoginErrors = {};
 
+  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 handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData(prev => ({
       ...prev,
       [name]: value
     }));
-    // Clear error for this field when user starts typing
+    if (errors[name]) {
-    if (errors[name as keyof LoginErrors]) {
       setErrors(prev => ({
         ...prev,
-        [name]: undefined
+        [name]: ''
       }));
     }
   };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setSuccessMessage('');
+    
-
     if (!validateForm()) {
       return;
     }
-
+    
-    setIsLoading(true);
+    setIsSubmitting(true);
     try {
-      // Simulate API call
       await new Promise(resolve => setTimeout(resolve, 1000));
-
+      console.log('Login attempt:', formData);
-      // Store session data in localStorage
+      alert('Login bem-sucedido!');
-      const sessionData = {
-        email: formData.email,
-        loginTime: new Date().toISOString(),
-        token: 'mock_token_' + Math.random().toString(36).substr(2, 9)
-      };
-      localStorage.setItem('userSession', JSON.stringify(sessionData));
-      sessionStorage.setItem('isLoggedIn', 'true');
-
-      setSuccessMessage('Login realizado com sucesso! Redirecionando...');
       setFormData({ email: '', password: '' });
-
-      // Simulate redirect after success
-      setTimeout(() => {
-        window.location.href = '/dashboard';
-      }, 1500);
     } catch (error) {
-      setErrors(prev => ({
+      setErrors({ submit: 'Erro ao fazer login. Tente novamente.' });
-        ...prev,
-        general: 'Erro ao fazer login. Tente novamente.'
-      }));
     } finally {
-      setIsLoading(false);
+      setIsSubmitting(false);
     }
   };
 
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -120,181 +84,174 @@ export default function LoginPage() {
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           navItems={[
-            { name: "Dashboard", id: "dashboard" },
+            { name: "Dashboard", id: "/" },
-            { name: "Treino", id: "training" },
+            { name: "Sobre", id: "#hero" },
-            { name: "Nutrição", id: "nutrition" },
+            { name: "Features", id: "#onboarding" },
-            { name: "Comunidade", id: "community" },
+            { name: "Contato", id: "#contact" },
-            { name: "Perfil", id: "profile" }
+            { name: "Signup", id: "/signup" }
           ]}
-          button={{ text: "Começar Agora", href: "contact" }}
+          button={{ text: "Fazer Login", href: "/login" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-screen bg-gradient-to-br from-background via-background to-background-accent flex items-center justify-center py-12 px-4">
+      <div 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">
+        <div className="w-full max-w-md space-y-8">
-          <div className="rounded-3xl p-8 shadow-lg border border-accent/20 bg-card/50 backdrop-blur">
+          <div className="text-center space-y-3">
-            <div className="mb-8 text-center">
+            <h1 className="text-4xl font-extrabold tracking-tight">Bem-vindo de volta</h1>
-              <h1 className="text-4xl font-extrabold text-foreground mb-2">Bem-vindo</h1>
+            <p className="text-base text-gray-600 dark:text-gray-400">Faça login na sua conta FitFlow Pro</p>
-              <p className="text-foreground/60">Faça login na sua conta FitFlow Pro</p>
+          </div>
-            </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>
+              <div className="space-y-2">
-                <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-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-accent/50" />
+                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
                   <input
-                    type="email"
                     id="email"
                     name="email"
+                    type="email"
                     value={formData.email}
-                    onChange={handleInputChange}
+                    onChange={handleChange}
-                    placeholder="seu.email@exemplo.com"
+                    placeholder="seu@email.com"
-                    className="w-full pl-10 pr-4 py-3 rounded-full border border-accent/20 bg-background/50 text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition-all"
+                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                    disabled={isLoading}
+                      errors.email
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-primary-cta'
+                    }`}
                   />
                 </div>
                 {errors.email && (
-                  <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+                  <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>
+              <div className="space-y-2">
-                <label htmlFor="password" className="block text-sm font-semibold text-foreground mb-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-accent/50" />
+                  <Lock className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
                   <input
-                    type={showPassword ? "text" : "password"}
                     id="password"
                     name="password"
+                    type="password"
                     value={formData.password}
-                    onChange={handleInputChange}
+                    onChange={handleChange}
                     placeholder="••••••••"
-                    className="w-full pl-10 pr-12 py-3 rounded-full border border-accent/20 bg-background/50 text-foreground placeholder-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 transition-all"
+                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                    disabled={isLoading}
+                      errors.password
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-primary-cta'
+                    }`}
                   />
-                  <button
-                    type="button"
-                    onClick={togglePasswordVisibility}
-                    className="absolute right-3 top-3.5 text-accent/50 hover:text-accent transition-colors"
-                    disabled={isLoading}
-                  >
-                    {showPassword ? (
-                      <EyeOff className="w-5 h-5" />
-                    ) : (
-                      <Eye className="w-5 h-5" />
-                    )}
-                  </button>
                 </div>
                 {errors.password && (
-                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
+                    <AlertCircle className="w-4 h-4" />
+                    {errors.password}
+                  </div>
                 )}
               </div>
 
-              {/* General Error Message */}
+              {/* Submit Errors */}
-              {errors.general && (
+              {errors.submit && (
-                <div className="bg-red-500/10 border border-red-500/20 rounded-full px-4 py-3 text-red-500 text-sm">
+                <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">
-                  {errors.general}
+                  <AlertCircle className="w-4 h-4 flex-shrink-0" />
-                </div>
+                  {errors.submit}
-              )}
-
-              {/* Success Message */}
-              {successMessage && (
-                <div className="bg-green-500/10 border border-green-500/20 rounded-full px-4 py-3 text-green-500 text-sm">
-                  {successMessage}
                 </div>
               )}
 
               {/* Submit Button */}
               <button
                 type="submit"
-                disabled={isLoading}
+                disabled={isSubmitting}
-                className="w-full py-3 px-4 bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold rounded-full transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                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"
               >
-                {isLoading ? (
+                {isSubmitting ? 'Entrando...' : 'Fazer Login'}
-                  <>
+                {!isSubmitting && <ArrowRight className="w-4 h-4" />}
-                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                    Entrando...
-                  </>
-                ) : (
-                  <>
-                    Entrar
-                    <ArrowRight className="w-5 h-5" />
-                  </>
-                )}
               </button>
-
-              {/* Forgot Password Link */}
-              <div className="text-center">
-                <a
-                  href="#"
-                  className="text-sm text-accent hover:text-accent/80 transition-colors"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    alert('Funcionalidade de recuperação de senha em desenvolvimento');
-                  }}
-                >
-                  Esqueceu sua senha?
-                </a>
-              </div>
-
-              {/* Sign Up Link */}
-              <div className="text-center text-sm text-foreground/60">
-                Não tem uma conta?{' '}
-                <a
-                  href="/signup"
-                  className="text-primary-cta hover:text-primary-cta/80 font-semibold transition-colors"
-                >
-                  Cadastre-se aqui
-                </a>
-              </div>
             </form>
+
+            {/* 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>
 
-          {/* Security Notice */}
+          {/* Sign Up Link */}
-          <div className="mt-8 text-center text-sm text-foreground/50">
+          <p className="text-center text-gray-600 dark:text-gray-400 text-sm">
-            <p>🔒 Sua conexão é segura e criptografada</p>
+            Não tem conta?{' '}
-          </div>
+            <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">
-        <FooterBase
+        <FooterLogoEmphasis
           columns={[
             {
-              title: "Produto",              items: [
+              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { label: "Home", href: "/" },
-                { label: "Treino", href: "training" },
+                { label: "Sobre", href: "/#hero" },
-                { label: "Nutrição", href: "nutrition" },
+                { label: "Features", href: "/#onboarding" }
-                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
-              title: "Comunidade",              items: [
+              items: [
-                { label: "Comunidade", href: "community" },
+                { label: "Blog", href: "#" },
-                { label: "Perfil", href: "profile" },
+                { label: "Ajuda", href: "#" },
-                { label: "Rankings", href: "rankings" },
+                { label: "Suporte", href: "#" }
-                { label: "Blog", href: "blog" }
               ]
             },
             {
-              title: "Empresa",              items: [
+              items: [
-                { label: "Sobre", href: "about" },
+                { label: "Privacidade", href: "#" },
-                { label: "Contato", href: "contact" },
+                { label: "Termos", href: "#" },
-                { label: "Privacidade", href: "privacy" },
+                { label: "Contato", href: "#" }
-                { label: "Termos", href: "terms" }
+              ]
+            },
+            {
+              items: [
+                { label: "Login", href: "/login" },
+                { label: "Signup", href: "/signup" },
+                { label: "Dashboard", href: "/" }
               ]
             }
           ]}
           logoText="FitFlow Pro"
-          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
         />
       </div>
     </ThemeProvider>

src/app/onboarding/page.tsx

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

src/app/page.tsx

@@ -10,11 +10,34 @@ 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 ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactText from '@/components/sections/contact/ContactText';
-import FooterBase from '@/components/sections/footer/FooterBase';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Activity, Apple, Brain, Dumbbell, Heart, Target, Zap, Users, Star, TrendingDown, TrendingUp, Mail } from 'lucide-react';
+import { Activity, Apple, Brain, Dumbbell, Heart, Target, Zap, Users, Star, TrendingDown, TrendingUp } 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"
@@ -37,7 +60,7 @@ export default function LandingPage() {
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
-          button={{ text: "Começar Agora", href: "/onboarding" }}
+          button={{ text: "Começar Agora", href: "contact" }}
           brandName="FitFlow Pro"
         />
       </div>
@@ -60,7 +83,7 @@ export default function LandingPage() {
           imagePosition="right"
           mediaAnimation="slide-up"
           buttons={[
-            { text: "Começar Teste Grátis", href: "/onboarding" },
+            { text: "Começar Teste Grátis", href: "contact" },
             { text: "Ver Demo", href: "#features" }
           ]}
           avatars={[
@@ -188,13 +211,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"
+              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: "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: "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: "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"
+              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")
             }
           ]}
           animationType="slide-up"
@@ -235,20 +258,7 @@ export default function LandingPage() {
           title="Suas Conquistas Importam. Veja Cada Número."
           tag="Performance Metrics"
           tagAnimation="slide-up"
-          metrics={[
+          metrics={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."
-            }
-          ]}
           metricsAnimation="slide-up"
           useInvertedBackground={false}
         />
@@ -331,53 +341,51 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplit
+        <ContactText
-          tag="Transforme Sua Vida"
+          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."
-          tagIcon={Mail}
+          animationType="entrance-slide"
-          title="Pronto para Começar?"
+          buttons={[
-          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."
+            { text: "Começar Teste Grátis", href: "contact" },
+            { text: "Conversar com Especialista", href: "#contact" }
+          ]}
           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">
-        <FooterBase
+        <FooterLogoEmphasis
           columns={[
             {
-              title: "Produto",              items: [
+              items: [
-                { label: "Dashboard", href: "dashboard" },
+                { label: "Dashboard", href: "#dashboard" },
-                { label: "Treino", href: "training" },
+                { label: "Treino", href: "#training" },
-                { label: "Nutrição", href: "nutrition" },
+                { label: "Nutrição", href: "#nutrition" }
-                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
-              title: "Comunidade",              items: [
+              items: [
-                { label: "Comunidade", href: "community" },
+                { label: "Cardio Hub", href: "#cardio" },
-                { label: "Perfil", href: "profile" },
+                { label: "Comunidade", href: "#community" },
-                { label: "Rankings", href: "rankings" },
+                { label: "Perfil", href: "#profile" }
-                { label: "Blog", href: "blog" }
               ]
             },
             {
-              title: "Empresa",              items: [
+              items: [
-                { label: "Sobre", href: "about" },
+                { label: "Blog", href: "#blog" },
-                { label: "Contato", href: "contact" },
+                { label: "Ajuda", href: "#help" },
-                { label: "Privacidade", href: "privacy" },
+                { label: "Suporte", href: "#support" }
-                { label: "Termos", href: "terms" }
+              ]
+            },
+            {
+              items: [
+                { label: "Privacidade", href: "#privacy" },
+                { label: "Termos", href: "#terms" },
+                { label: "Contato", href: "#contact" }
               ]
             }
           ]}
           logoText="FitFlow Pro"
-          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
         />
       </div>
     </ThemeProvider>

src/app/signup/page.tsx

@@ -2,91 +2,139 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import { useState } from "react";
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import { Eye, EyeOff, Mail, Lock, User, CheckCircle2, AlertCircle } from 'lucide-react';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import Input from '@/components/form/Input';
+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({
+  const [formData, setFormData] = useState<SignupFormData>({
-    name: "",    email: "",    password: "",    confirmPassword: ""
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    agreedToTerms: false
   });
-  const [showPassword, setShowPassword] = useState(false);
+  const [errors, setErrors] = useState<FormErrors>({});
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [passwordStrength, setPasswordStrength] = useState(0);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const [passwordStrength, setPasswordStrength] = useState<"weak" | "medium" | "strong" | "">("");
 
-  const calculatePasswordStrength = (pwd: string): "weak" | "medium" | "strong" | "" => {
+  const calculatePasswordStrength = (password: string) => {
-    if (!pwd) return "";
+    let strength = 0;
-    if (pwd.length < 8) return "weak";
+    if (password.length >= 8) strength++;
-    if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{8}$/.test(pwd)) return "strong";
+    if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
-    return "medium";
+    if (/\d/.test(password)) strength++;
-  };
+    if (/[^a-zA-Z\d]/.test(password)) strength++;
-
+    setPasswordStrength(strength);
-  const handleInputChange = (field: string, value: string) => {
-    setFormData(prev => ({
-      ...prev,
-      [field]: value
-    }));
-    
-    if (field === "password") {
-      setPasswordStrength(calculatePasswordStrength(value));
-    }
   };
 
   const validateForm = () => {
-    const newErrors: { [key: string]: string } = {};
+    const newErrors: FormErrors = {};
     
     if (!formData.name.trim()) {
-      newErrors.name = "Nome é obrigatório";
+      newErrors.name = 'Nome é obrigatório';
-    } else if (formData.name.trim().length < 2) {
+    } else if (formData.name.length < 2) {
-      newErrors.name = "Nome deve ter no mínimo 2 caracteres";
+      newErrors.name = 'Nome deve ter pelo menos 2 caracteres';
     }
     
     if (!formData.email) {
-      newErrors.email = "Email é obrigatório";
+      newErrors.email = 'Email é obrigatório';
     } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
-      newErrors.email = "Email inválido";
+      newErrors.email = 'Email inválido';
     }
     
     if (!formData.password) {
-      newErrors.password = "Senha é obrigatória";
+      newErrors.password = 'Senha é obrigatória';
     } else if (formData.password.length < 8) {
-      newErrors.password = "Senha deve ter no mínimo 8 caracteres";
+      newErrors.password = 'Senha deve ter pelo menos 8 caracteres';
     }
     
     if (formData.password !== formData.confirmPassword) {
-      newErrors.confirmPassword = "As senhas não correspondem";
+      newErrors.confirmPassword = 'As senhas não correspondem';
+    }
+    
+    if (!formData.agreedToTerms) {
+      newErrors.agreedToTerms = 'Você deve aceitar os termos e condições';
     }
     
-    return newErrors;
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const newErrors = validateForm();
     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;
     
-    if (Object.keys(newErrors).length === 0) {
+    setFormData(prev => ({
-      setIsSubmitted(true);
+      ...prev,
-      console.log("Signup attempt:", formData);
+      [name]: newValue
-      setTimeout(() => {
+    }));
-        setIsSubmitted(false);
+    
-      }, 2000);
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+    
+    if (name === 'password') {
+      calculatePasswordStrength(value);
     }
   };
 
-  const getStrengthColor = () => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    switch (passwordStrength) {
+    e.preventDefault();
-      case "weak":
+    
-        return "text-red-500";
+    if (!validateForm()) {
-      case "medium":
+      return;
-        return "text-yellow-500";
-      case "strong":
-        return "text-green-500";
-      default:
-        return "text-foreground/30";
     }
+    
+    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 (
@@ -106,168 +154,275 @@ export default function SignupPage() {
         <NavbarStyleCentered
           navItems={[
             { name: "Dashboard", id: "/" },
-            { name: "Treino", id: "training" },
+            { name: "Sobre", id: "#hero" },
-            { name: "Nutrição", id: "nutrition" },
+            { name: "Features", id: "#onboarding" },
-            { name: "Comunidade", id: "community" },
+            { name: "Contato", id: "#contact" },
-            { name: "Perfil", id: "profile" }
+            { name: "Login", id: "/login" }
           ]}
-          button={{ text: "Entrar", href: "/login" }}
+          button={{ text: "Criar Conta", href: "/signup" }}
           brandName="FitFlow Pro"
         />
       </div>
 
-      <div className="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4">
+      <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">
+        <div className="w-full max-w-md space-y-8">
-          <div className="bg-card rounded-3xl shadow-lg p-8 border border-accent/10">
+          <div className="text-center space-y-3">
-            <div className="mb-8">
+            <h1 className="text-4xl font-extrabold tracking-tight">Comece sua jornada</h1>
-              <h1 className="text-3xl font-extrabold text-foreground mb-2">Começar Agora</h1>
+            <p className="text-base text-gray-600 dark:text-gray-400">Crie sua conta FitFlow Pro e transforme seu corpo</p>
-              <p className="text-foreground/70">Crie sua conta e inicie sua transformação</p>
+          </div>
-            </div>
 
-            <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="bg-card rounded-2xl border border-primary-cta/20 p-8 shadow-lg">
-              <div>
+            <form onSubmit={handleSubmit} className="space-y-5">
-                <label className="block text-sm font-medium text-foreground mb-2">
+              {/* Name Field */}
-                  <div className="flex items-center gap-2">
+              <div className="space-y-2">
-                    <User size={16} />
+                <label htmlFor="name" className="block text-sm font-medium text-foreground">
-                    Nome Completo
+                  Nome Completo
-                  </div>
                 </label>
-                <Input
+                <div className="relative">
-                  value={formData.name}
+                  <User className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  onChange={(value) => handleInputChange("name", value)}
+                  <input
-                  type="text"
+                    id="name"
-                  placeholder="Seu nome"
+                    name="name"
-                  required
+                    type="text"
-                  className={errors.name ? "border-red-500" : ""}
+                    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-1 text-red-500 text-sm mt-1">
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle size={14} />
+                    <AlertCircle className="w-4 h-4" />
                     {errors.name}
                   </div>
                 )}
               </div>
 
-              <div>
+              {/* Email Field */}
-                <label className="block text-sm font-medium text-foreground mb-2">
+              <div className="space-y-2">
-                  <div className="flex items-center gap-2">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
-                    <Mail size={16} />
+                  Email
-                    Email
-                  </div>
                 </label>
-                <Input
+                <div className="relative">
-                  value={formData.email}
+                  <Mail className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" />
-                  onChange={(value) => handleInputChange("email", value)}
+                  <input
-                  type="email"
+                    id="email"
-                  placeholder="seu@email.com"
+                    name="email"
-                  required
+                    type="email"
-                  className={errors.email ? "border-red-500" : ""}
+                    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-1 text-red-500 text-sm mt-1">
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle size={14} />
+                    <AlertCircle className="w-4 h-4" />
                     {errors.email}
                   </div>
                 )}
               </div>
 
-              <div>
+              {/* Password Field */}
-                <label className="block text-sm font-medium text-foreground mb-2">
+              <div className="space-y-2">
-                  <div className="flex items-center gap-2">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
-                    <Lock size={16} />
+                  Senha
-                    Senha
-                  </div>
                 </label>
                 <div className="relative">
-                  <Input
+                  <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={(value) => handleInputChange("password", value)}
+                    onChange={handleChange}
-                    type={showPassword ? "text" : "password"}
+                    placeholder="••••••••••"
-                    placeholder="••••••••"
+                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                    required
+                      errors.password
-                    className={errors.password ? "border-red-500" : "pr-10"}
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-primary-cta'
+                    }`}
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
-                    aria-label={showPassword ? "Ocultar senha" : "Mostrar senha"}
-                  >
-                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                  </button>
                 </div>
-                {passwordStrength && (
+                {formData.password && (
-                  <div className={`flex items-center gap-1 text-xs mt-2 ${getStrengthColor()}`}>
+                  <div className="space-y-2">
-                    <CheckCircle2 size={12} />
+                    <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 overflow-hidden">
-                    Força: {passwordStrength === "weak" ? "Fraca" : passwordStrength === "medium" ? "Média" : "Forte"}
+                      <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-1 text-red-500 text-sm mt-1">
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle size={14} />
+                    <AlertCircle className="w-4 h-4" />
                     {errors.password}
                   </div>
                 )}
               </div>
 
-              <div>
+              {/* Confirm Password Field */}
-                <label className="block text-sm font-medium text-foreground mb-2">
+              <div className="space-y-2">
-                  <div className="flex items-center gap-2">
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground">
-                    <Lock size={16} />
+                  Confirmar Senha
-                    Confirmar Senha
-                  </div>
                 </label>
                 <div className="relative">
-                  <Input
+                  <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={(value) => handleInputChange("confirmPassword", value)}
+                    onChange={handleChange}
-                    type={showConfirmPassword ? "text" : "password"}
+                    placeholder="••••••••••"
-                    placeholder="••••••••"
+                    className={`w-full pl-10 pr-4 py-2.5 bg-background border rounded-lg focus:outline-none focus:ring-2 transition-all ${
-                    required
+                      errors.confirmPassword
-                    className={errors.confirmPassword ? "border-red-500" : "pr-10"}
+                        ? 'border-red-500 focus:ring-red-500'
+                        : 'border-gray-300 focus:ring-primary-cta'
+                    }`}
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
-                    aria-label={showConfirmPassword ? "Ocultar senha" : "Mostrar senha"}
-                  >
-                    {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                  </button>
                 </div>
+                {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-1 text-red-500 text-sm mt-1">
+                  <div className="flex items-center gap-2 text-red-500 text-sm">
-                    <AlertCircle size={14} />
+                    <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={isSubmitted}
+                disabled={isSubmitting}
-                className="w-full py-3 px-4 bg-primary-cta hover:opacity-90 disabled:opacity-50 text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105"
+                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"
               >
-                {isSubmitted ? "Criando conta..." : "Criar Conta"}
+                {isSubmitting ? 'Criando conta...' : 'Criar Conta'}
+                {!isSubmitting && <ArrowRight className="w-4 h-4" />}
               </button>
             </form>
 
-            <div className="mt-6 text-center text-sm text-foreground/70">
+            {/* Divider */}
-              <p>
+            <div className="mt-6 relative">
-                Já tem conta?{" "}
+              <div className="absolute inset-0 flex items-center">
-                <a href="/login" className="text-primary-cta font-semibold hover:underline">
+                <div className="w-full border-t border-gray-300 dark:border-gray-600"></div>
-                  Fazer login
+              </div>
-                </a>
+              <div className="relative flex justify-center text-sm">
-              </p>
+                <span className="px-2 bg-card text-gray-500">ou continue com</span>
+              </div>
             </div>
 
-            <div className="mt-6 pt-6 border-t border-accent/10 text-center text-xs text-foreground/50">
+            {/* Social Signup Buttons */}
-              <p>Teste gratuito por 30 dias. Sem cartão de crédito necessário.</p>
+            <div className="mt-6 space-y-3">
-              <p className="mt-2">Ao criar uma conta, você concorda com nossos Termos de Serviço e Política de Privacidade.</p>
+              <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/ProtectedRoute.tsx

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

src/components/cardStack/CardList.tsx

@@ -1,25 +1,26 @@
-import { ReactNode } from 'react';
+'use client';
-import { useCardStack } from './CardStackContext';
 
-export interface CardListProps {
+import React, { useRef } from 'react';
-  children: ReactNode;
+import { ButtonConfig, ButtonAnimationType, CardAnimationType, TitleSegment } from '@/components/cardStack/types';
+
+interface CardListProps {
+  items: any[];
   className?: string;
-  ariaLabel?: string;
 }
 
-export function CardList({ children, className = '', ariaLabel = 'Card list' }: CardListProps) {
+const CardList: React.FC<CardListProps> = ({ items, className = '' }) => {
-  const { isVisible, getAnimationProps } = useCardStack();
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
-  const animationProps = getAnimationProps();
 
   return (
-    <div
+    <div className={`card-list ${className}`}>
-      className={className}
+      {items.map((item, index) => (
-      aria-label={ariaLabel}
+        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="card-list-item">
-      data-is-visible={animationProps.isVisible}
+          {item.title && <h3>{item.title}</h3>}
-    >
+          {item.description && <p>{item.description}</p>}
-      {children}
+        </div>
+      ))}
     </div>
   );
-}
+};
 
 export default CardList;

src/components/cardStack/CardStack.tsx

@@ -1,24 +1,20 @@
-import { ReactNode } from 'react';
+'use client';
-import { CardStackProvider, CardStackContextType } from './CardStackContext';
 
-export interface CardStackProps {
+import React from 'react';
-  children: ReactNode;
+import TimelineBase from './layouts/timelines/TimelineBase';
+import { CardStackItemShape } from '@/components/cardStack/types';
+
+interface CardStackProps {
+  items: CardStackItemShape[];
   className?: string;
-  ariaLabel?: string;
 }
 
-export default function CardStack({ children, className = '', ariaLabel = 'Card stack' }: CardStackProps) {
+const CardStack: React.FC<CardStackProps> = ({ items, className = '' }) => {
-  const contextValue: CardStackContextType = {
-    isVisible: true,
-    getAnimationProps: () => ({ isVisible: true }),
-    itemRefs: {}
-  };
-
   return (
-    <CardStackProvider value={contextValue}>
+    <div className={`card-stack ${className}`}>
-      <div className={className} aria-label={ariaLabel}>
+      <TimelineBase items={items} />
-        {children}
+    </div>
-      </div>
-    </CardStackProvider>
   );
-}
+};
+
+export default CardStack;

src/components/cardStack/CardStackContext.tsx

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

src/components/cardStack/CardStackTextBox.tsx

@@ -1,92 +1,15 @@
-"use client";
+'use client';
 
-import { memo, useMemo } from "react";
+import React from 'react';
-import TextBox from "@/components/Textbox";
+import { TextBoxProps } from '@/components/cardStack/types';
-import { cls } from "@/lib/utils";
-import type { TextBoxProps } from "./types";
 
-const CardStackTextBox = ({
+const CardStackTextBox: React.FC<TextBoxProps> = ({ title, description, className = '' }) => {
-    title,
+  return (
-    titleSegments,
+    <div className={`card-stack-textbox ${className}`}>
-    description,
+      <h2>{title}</h2>
-    tag,
+      <p>{description}</p>
-    tagIcon,
+    </div>
-    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}
-        />
-    );
 };
 
-CardStackTextBox.displayName = "CardStackTextBox";
+export default CardStackTextBox;
-
-export default memo(CardStackTextBox);

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,15 +1,35 @@
-import { useEffect, useState, useCallback } from 'react';
+'use client';
 
-export const useCardAnimation = () => {
+import { useEffect, useRef, useState } from 'react';
-  const [isVisible, setIsVisible] = useState(false);
+import { UseCardAnimationReturn } from '@/components/cardStack/types';
+
+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);
 
   useEffect(() => {
-    setIsVisible(true);
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
   }, []);
 
-  const getAnimationProps = useCallback(() => {
+  const itemRefs = itemRefsArray.current.map((el) => ({
-    return { isVisible };
+    current: el,
-  }, [isVisible]);
+  })) as React.RefObject<HTMLElement>[];
 
-  return { isVisible, getAnimationProps };
+  return {
-};
+    isActive,
+    isMobile,
+    itemRefs,
+    containerRef,
+    perspectiveRef,
+    bottomContentRef,
+  };
+}

src/components/cardStack/hooks/useDepth3DAnimation.ts

@@ -1,11 +1,25 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
-export const useDepth3DAnimation = () => {
+export const useDepth3DAnimation = (elementRef: React.RefObject<HTMLElement>) => {
-  const [isVisible, setIsVisible] = useState(false);
+  const [isActive, setIsActive] = useState(false);
 
   useEffect(() => {
-    setIsVisible(true);
+    if (!elementRef.current) return;
-  }, []);
 
-  return { isVisible };
+    const handleMouseEnter = () => setIsActive(true);
+    const handleMouseLeave = () => setIsActive(false);
+
+    const element = elementRef.current;
+    element.addEventListener('mouseenter', handleMouseEnter);
+    element.addEventListener('mouseleave', handleMouseLeave);
+
+    return () => {
+      element.removeEventListener('mouseenter', handleMouseEnter);
+      element.removeEventListener('mouseleave', handleMouseLeave);
+    };
+  }, [elementRef]);
+
+  return { isActive };
 };

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

@@ -1,144 +1,18 @@
-"use client";
+'use client';
 
-import { memo, Children, useCallback, useEffect, useState } from "react";
+import React from 'react';
-import useEmblaCarousel from "embla-carousel-react";
+import { ArrowCarouselProps } from '@/components/cardStack/types';
-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 = ({
+const ArrowCarousel: React.FC<ArrowCarouselProps> = ({ items, className = '' }) => {
-    children,
+  return (
-    title,
+    <div className={`arrow-carousel ${className}`}>
-    titleSegments,
+      {items.map((item, index) => (
-    description,
+        <div key={item.id || index} className="carousel-item">
-    tag,
+          {item.title}
-    tagIcon,
+        </div>
-    tagAnimation,
+      ))}
-    buttons,
+    </div>
-    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>
-    );
 };
 
-ArrowCarousel.displayName = "ArrowCarousel";
+export default ArrowCarousel;
-
-export default memo(ArrowCarousel);

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

@@ -1,25 +1,22 @@
-import { ReactNode } from 'react';
+'use client';
-import { useCardStack } from '../../CardStackContext';
 
-export interface AutoCarouselProps {
+import React from 'react';
-  children: ReactNode;
+import { AutoCarouselProps } from '@/components/cardStack/types';
-  className?: string;
+import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
-  ariaLabel?: string;
-}
 
-export function AutoCarousel({ children, className = '', ariaLabel = 'Auto carousel' }: AutoCarouselProps) {
+const AutoCarousel: React.FC<AutoCarouselProps> = ({ items, className = '' }) => {
-  const { isVisible, getAnimationProps } = useCardStack();
+  const animation = useCardAnimation();
-  const animationProps = getAnimationProps();
+  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
 
   return (
-    <div
+    <div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className={`auto-carousel ${className}`}>
-      className={className}
+      {items.map((item, index) => (
-      aria-label={ariaLabel}
+        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="carousel-item">
-      data-is-visible={animationProps.isVisible}
+          {item.title}
-    >
+        </div>
-      {children}
+      ))}
     </div>
   );
-}
+};
 
 export default AutoCarousel;

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

@@ -1,25 +1,22 @@
-import { ReactNode } from 'react';
+'use client';
-import { useCardStack } from '../../CardStackContext';
 
-export interface ButtonCarouselProps {
+import React from 'react';
-  children: ReactNode;
+import { ButtonCarouselProps } from '@/components/cardStack/types';
-  className?: string;
+import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
-  ariaLabel?: string;
-}
 
-export function ButtonCarousel({ children, className = '', ariaLabel = 'Button carousel' }: ButtonCarouselProps) {
+const ButtonCarousel: React.FC<ButtonCarouselProps> = ({ items, className = '' }) => {
-  const { isVisible, getAnimationProps } = useCardStack();
+  const animation = useCardAnimation();
-  const animationProps = getAnimationProps();
+  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
 
   return (
-    <div
+    <div ref={animation.bottomContentRef as React.Ref<HTMLDivElement>} className={`button-carousel ${className}`}>
-      className={className}
+      {items.map((item, index) => (
-      aria-label={ariaLabel}
+        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="carousel-item">
-      data-is-visible={animationProps.isVisible}
+          {item.title}
-    >
+        </div>
-      {children}
+      ))}
     </div>
   );
-}
+};
 
 export default ButtonCarousel;

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

@@ -1,155 +1,18 @@
-"use client";
+'use client';
 
-import { memo, Children, cloneElement, isValidElement, useCallback, useEffect, useState } from "react";
+import React from 'react';
-import useEmblaCarousel from "embla-carousel-react";
+import { FullWidthCarouselProps } from '@/components/cardStack/types';
-import { EmblaCarouselType } from "embla-carousel";
-import CardStackTextBox from "../../CardStackTextBox";
-import { cls } from "@/lib/utils";
-import { FullWidthCarouselProps } from "../../types";
 
-const FullWidthCarousel = ({
+const FullWidthCarousel: React.FC<FullWidthCarouselProps> = ({ items, className = '' }) => {
-    children,
+  return (
-    title,
+    <div className={`full-width-carousel ${className}`}>
-    titleSegments,
+      {items.map((item, index) => (
-    description,
+        <div key={item.id || index} className="carousel-item">
-    tag,
+          {item.title}
-    tagIcon,
+        </div>
-    tagAnimation,
+      ))}
-    buttons,
+    </div>
-    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>
-    );
 };
 
-FullWidthCarousel.displayName = "FullWidthCarousel";
+export default FullWidthCarousel;
-
-export default memo(FullWidthCarousel);

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

@@ -1,26 +1,26 @@
-import React, { useContext } from 'react';
+'use client';
-import { CardStackContext } from '../../CardStackContext';
 
-interface GridLayoutProps {
+import React from 'react';
-  children: React.ReactNode;
+import { GridLayoutProps } from '@/components/cardStack/types';
-  className?: string;
+import { useCardAnimation } from '@/components/cardStack/hooks/useCardAnimation';
-}
 
-export const GridLayout: React.FC<GridLayoutProps> = ({ children, className = '' }) => {
+const GridLayout: React.FC<GridLayoutProps> = ({ items, className = '' }) => {
-  const context = useContext(CardStackContext);
+  const animation = useCardAnimation();
-
+  const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
-  if (!context) {
-    return <div className={className}>{children}</div>;
-  }
-
-  const { isVisible, getAnimationProps } = context;
-  const animationProps = getAnimationProps();
 
   return (
-    <div className={className} {...animationProps}>
+    <div ref={animation.containerRef as React.Ref<HTMLDivElement>} className={`grid-layout ${className}`}>
-      {children}
+      <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}
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };
 
-export default GridLayout;
+export default GridLayout;

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

@@ -1,27 +1,26 @@
-"use client";
+'use client';
 
-import React from 'react';
+import React, { useRef } from 'react';
-
+import { CardStackItemShape } from '@/components/cardStack/types';
-interface TimelineItem {
-  id: string;
-  title: string;
-  description: string;
-}
 
 interface TimelineBaseProps {
-  items: TimelineItem[];
+  items: CardStackItemShape[];
   className?: string;
 }
 
-export const TimelineBase: React.FC<TimelineBaseProps> = ({ items, className = '' }) => {
+const TimelineBase: React.FC<TimelineBaseProps> = ({ items, className = '' }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
   return (
-    <div className={`timeline ${className}`}>
+    <div ref={containerRef} className={`timeline-container ${className}`}>
-      {items.map((item) => (
+      {items.map((item, index) => (
-        <div key={item.id} className="timeline-item">
+        <div key={item.id || index} className="timeline-item">
-          <h3>{item.title}</h3>
+          <div className="timeline-marker" />
-          <p>{item.description}</p>
+          <div className="timeline-content">{item.title}</div>
         </div>
       ))}
     </div>
   );
 };
+
+export default TimelineBase;

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

@@ -1,147 +1,27 @@
-"use client";
+'use client';
 
-import React, { useEffect, useRef, memo, Children } from "react";
+import React from 'react';
-import { gsap } from "gsap";
+import {
-import { ScrollTrigger } from "gsap/ScrollTrigger";
+  ButtonConfig,
-import CardStackTextBox from "../../CardStackTextBox";
+  ButtonAnimationType,
-import { cls } from "@/lib/utils";
+  TitleSegment,
-import type { LucideIcon } from "lucide-react";
+} from '@/components/cardStack/types';
-import type { ButtonConfig, ButtonAnimationType, TitleSegment } from "../../types";
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-gsap.registerPlugin(ScrollTrigger);
 
 interface TimelineCardStackProps {
-    children: React.ReactNode;
+  items: any[];
-    title: string;
+  className?: 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 = ({
+const TimelineCardStack: React.FC<TimelineCardStackProps> = ({ items, className = '' }) => {
-    children,
+  return (
-    title,
+    <div className={`timeline-card-stack ${className}`}>
-    titleSegments,
+      {items.map((item, index) => (
-    description,
+        <div key={item.id || index} className="timeline-card">
-    tag,
+          {item.title}
-    tagIcon,
+        </div>
-    tagAnimation,
+      ))}
-    buttons,
+    </div>
-    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>
-    );
 };
 
-TimelineCardStack.displayName = "TimelineCardStack";
+export default TimelineCardStack;
-
-export default memo(TimelineCardStack);

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

@@ -1,175 +1,29 @@
-"use client";
+'use client';
 
-import React, { Children, useCallback } from "react";
+import React from 'react';
-import { cls } from "@/lib/utils";
+import {
-import CardStackTextBox from "../../CardStackTextBox";
+  ButtonConfig,
-import { useTimelineHorizontal, type MediaItem } from "../../hooks/useTimelineHorizontal";
+  ButtonAnimationType,
-import MediaContent from "@/components/shared/MediaContent";
+  TitleSegment,
-import type { LucideIcon } from "lucide-react";
+  TextboxLayout,
-import type { ButtonConfig, ButtonAnimationType, TitleSegment, TextboxLayout, InvertedBackground } from "../../types";
+  InvertedBackground,
+} from '@/components/cardStack/types';
 
 interface TimelineHorizontalCardStackProps {
-  children: React.ReactNode;
+  items: any[];
-  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 = ({
+const TimelineHorizontalCardStack: React.FC<TimelineHorizontalCardStackProps> = ({ items, className = '' }) => {
-  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 (
-    <section
+    <div className={`timeline-horizontal-card-stack ${className}`}>
-      className={cls(
+      {items.map((item, index) => (
-        "relative py-20 w-full",
+        <div key={item.id || index} className="timeline-horizontal-card">
-        useInvertedBackground && "bg-foreground",
+          {item.title}
-        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>
+      ))}
-    </section>
+    </div>
   );
 };
 
-TimelineHorizontalCardStack.displayName = "TimelineHorizontalCardStack";
+export default TimelineHorizontalCardStack;
-
-export default React.memo(TimelineHorizontalCardStack);

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

@@ -1,26 +1,30 @@
-import React, { useContext } from 'react';
+'use client';
-import { CardStackContext } from '../../CardStackContext';
+
+import React from 'react';
+import {
+  ButtonConfig,
+  ButtonAnimationType,
+  TitleSegment,
+  CardAnimationType,
+} from '@/components/cardStack/types';
 
 interface TimelinePhoneViewProps {
-  children: React.ReactNode;
+  items: any[];
   className?: string;
 }
 
-export const TimelinePhoneView: React.FC<TimelinePhoneViewProps> = ({ children, className = '' }) => {
+const TimelinePhoneView: React.FC<TimelinePhoneViewProps> = ({ items, className = '' }) => {
-  const context = useContext(CardStackContext);
+  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
-
-  if (!context) {
-    return <div className={className}>{children}</div>;
-  }
-
-  const { isVisible, getAnimationProps } = context;
-  const animationProps = getAnimationProps();
 
   return (
-    <div className={className} {...animationProps}>
+    <div className={`timeline-phone-view ${className}`}>
-      {children}
+      {items.map((item, index) => (
+        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="timeline-phone-item">
+          {item.title}
+        </div>
+      ))}
     </div>
   );
 };
 
-export default TimelinePhoneView;
+export default TimelinePhoneView;

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

@@ -1,26 +1,30 @@
-import React, { useContext } from 'react';
+'use client';
-import { CardStackContext } from '../../CardStackContext';
+
+import React from 'react';
+import {
+  ButtonConfig,
+  ButtonAnimationType,
+  CardAnimationType,
+  TitleSegment,
+} from '@/components/cardStack/types';
 
 interface TimelineProcessFlowProps {
-  children: React.ReactNode;
+  items: any[];
   className?: string;
 }
 
-export const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({ children, className = '' }) => {
+const TimelineProcessFlow: React.FC<TimelineProcessFlowProps> = ({ items, className = '' }) => {
-  const context = useContext(CardStackContext);
+  const itemRefs = React.useRef<(HTMLElement | null)[]>([]);
-
-  if (!context) {
-    return <div className={className}>{children}</div>;
-  }
-
-  const { isVisible, getAnimationProps } = context;
-  const animationProps = getAnimationProps();
 
   return (
-    <div className={className} {...animationProps}>
+    <div className={`timeline-process-flow ${className}`}>
-      {children}
+      {items.map((item, index) => (
+        <div key={item.id || index} ref={(el) => { if (el) itemRefs.current[index] = el; }} className="timeline-process-item">
+          {item.title}
+        </div>
+      ))}
     </div>
   );
 };
 
-export default TimelineProcessFlow;
+export default TimelineProcessFlow;

src/components/cardStack/types.ts

@@ -1,149 +1,69 @@
-import type { LucideIcon } from "lucide-react";
+export interface CardStackItemShape {
-import type { ButtonConfig, ButtonAnimationType } from "@/types/button";
+  id?: string;
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+  title: string;
-
-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 type GridVariant =
+export interface ButtonConfig {
-    | "uniform-all-items-equal"
+  text: string;
-    | "bento-grid"
+  onClick?: () => void;
-    | "bento-grid-inverted"
+  href?: string;
-    | "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 =
+export type ButtonAnimationType = 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-    | "none"
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-    | "opacity"
+export type CardAnimationTypeWith3D = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
-    | "slide-up"
+export type TextboxLayout = 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-    | "scale-rotate"
+export type InvertedBackground = boolean;
-    | "blur-reveal";
+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 CardAnimationTypeWith3D = CardAnimationType | "depth-3d";
+export interface TitleSegment {
+  type: 'text' | 'image';
+  content?: string;
+  src?: string;
+  alt?: string;
+}
+
+export interface CardStackProps {
+  children: React.ReactNode;
+  className?: string;
+}
 
 export interface TextBoxProps {
-    title?: string;
+  title: string;
-    titleSegments?: TitleSegment[];
+  description: string;
-    description?: string;
+  className?: 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 CardStackProps extends TextBoxProps {
+export interface UseCardAnimationReturn {
-    children: React.ReactNode;
+  isActive: boolean;
-    mode?: "auto" | "buttons";
+  isMobile: boolean;
-    gridVariant?: GridVariant;
+  itemRefs: React.RefObject<HTMLElement>[];
-    uniformGridCustomHeightClasses?: string;
+  containerRef?: React.RefObject<HTMLElement>;
-    gridRowsClassName?: string;
+  perspectiveRef?: React.RefObject<HTMLElement>;
-    itemHeightClassesOverride?: string[];
+  bottomContentRef?: React.RefObject<HTMLElement>;
-    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 GridLayoutProps extends TextBoxProps {
+export interface ArrowCarouselProps {
-    children: React.ReactNode;
+  items: CardStackItemShape[];
-    itemCount: number;
+  className?: string;
-    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 extends TextBoxProps {
+export interface AutoCarouselProps {
-    children: React.ReactNode;
+  items: CardStackItemShape[];
-    uniformGridCustomHeightClasses?: string;
+  className?: 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 extends TextBoxProps {
+export interface ButtonCarouselProps {
-    children: React.ReactNode;
+  items: CardStackItemShape[];
-    uniformGridCustomHeightClasses?: string;
+  className?: string;
-    animationType: CardAnimationType;
-    bottomContent?: React.ReactNode;
-    className?: string;
-    containerClassName?: string;
-    carouselClassName?: string;
-    carouselItemClassName?: string;
-    controlsClassName?: string;
-    ariaLabel: string;
 }
 
-export interface FullWidthCarouselProps extends TextBoxProps {
+export interface FullWidthCarouselProps {
-    children: React.ReactNode;
+  items: CardStackItemShape[];
-    className?: string;
+  className?: string;
-    containerClassName?: string;
-    carouselClassName?: string;
-    dotsClassName?: string;
-    ariaLabel: string;
 }
 
-export interface ArrowCarouselProps extends TextBoxProps {
+export interface GridLayoutProps {
-    children: React.ReactNode;
+  items: CardStackItemShape[];
-    className?: string;
+  className?: string;
-    containerClassName?: string;
-    carouselClassName?: string;
-    controlsClassName?: string;
-    ariaLabel: string;
 }

src/components/ecommerce/productCatalog/ProductCatalog.tsx

@@ -1,41 +1,29 @@
-"use client";
+'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
-
+import { Product } from '@/lib/api/product';
-interface CatalogProduct {
-  id: string;
-  name: string;
-  price: string;
-  imageSrc: string;
-  imageAlt: string;
-  rating: string;
-  reviewCount: string;
-  category: string;
-  onProductClick: () => void;
-}
 
 interface ProductCatalogProps {
-  products?: CatalogProduct[];
+  products?: Product[];
+  loading?: boolean;
+  className?: string;
 }
 
-const ProductCatalog: React.FC<ProductCatalogProps> = ({ products = [] }) => {
+const ProductCatalog: React.FC<ProductCatalogProps> = ({ products = [], loading = false, className = '' }) => {
-  const [filteredProducts, setFilteredProducts] = useState<CatalogProduct[]>(products);
-
   return (
-    <div className="product-catalog">
+    <div className={`product-catalog ${className}`}>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {loading ? (
-        {filteredProducts.map((product) => (
+        <div>Loading...</div>
-          <div key={product.id} className="product-card cursor-pointer" onClick={product.onProductClick}>
+      ) : (
-            <img src={product.imageSrc} alt={product.imageAlt} className="w-full h-48 object-cover rounded-lg" />
+        <div className="product-list">
-            <h3 className="mt-2 font-semibold">{product.name}</h3>
+          {products.map((product) => (
-            <p className="text-primary-cta font-bold">{product.price}</p>
+            <div key={product.id} className="product-item">
-            <div className="flex items-center gap-2 text-sm">
+              <h3>{product.name}</h3>
-              <span className="text-yellow-500">★ {product.rating}</span>
+              <p>{product.price}</p>
-              <span className="text-foreground/60">({product.reviewCount} reviews)</span>
             </div>
-          </div>
+          ))}
-        ))}
+        </div>
-      </div>
+      )}
     </div>
   );
 };

src/components/sections/about/SplitAbout.tsx

@@ -1,182 +1,21 @@
-"use client";
+'use client';
 
-import { Fragment } from "react";
+import React from 'react';
-import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { TitleSegment, ButtonAnimationType } from '@/components/cardStack/types';
-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 = ({
+const SplitAbout: React.FC<SplitAboutProps> = ({ title, description, className = '' }) => {
-  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
+    <div className={`split-about ${className}`}>
-      aria-label={ariaLabel}
+      <h2>{title}</h2>
-      className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}
+      <p>{description}</p>
-    >
+    </div>
-      <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,65 +1,244 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
+
+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";
+
+type BlogCard = BlogPost;
 
 interface BlogCardOneProps {
-  blogs: Array<{
+    blogs: BlogCard[];
-    id: string;
+    carouselMode?: "auto" | "buttons";
-    category: string;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
     title: string;
-    excerpt: string;
+    titleSegments?: TitleSegment[];
-    imageSrc: string;
+    description: string;
-    imageAlt?: string;
+    tag?: string;
-    authorName: string;
+    tagIcon?: LucideIcon;
-    authorAvatar: string;
+    tagAnimation?: ButtonAnimationType;
-    date: string;
+    buttons?: ButtonConfig[];
-    onBlogClick?: () => void;
+    buttonAnimation?: ButtonAnimationType;
-  }>;
+    textboxLayout: TextboxLayout;
-  title: string;
+    useInvertedBackground: InvertedBackground;
-  description: string;
+    ariaLabel?: string;
-  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+    className?: string;
-  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+    containerClassName?: string;
-  useInvertedBackground?: boolean;
+    cardClassName?: string;
-  [key: string]: any;
+    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;
 }
 
-const BlogCardOne: React.FC<BlogCardOneProps> = ({
+interface BlogCardItemProps {
-  blogs,
+    blog: BlogCard;
-  title,
+    shouldUseLightText: boolean;
-  description,
+    cardClassName?: string;
-  animationType = 'slide-up',
+    imageWrapperClassName?: string;
-  textboxLayout = 'default',
+    imageClassName?: string;
-  useInvertedBackground = false,
+    categoryClassName?: string;
-  ...props
+    cardTitleClassName?: string;
-}) => {
+    excerptClassName?: string;
-  const blogItems = blogs.map((blog) => (
+    authorContainerClassName?: string;
-    <div key={blog.id} className="flex flex-col gap-4">
+    authorAvatarClassName?: string;
-      <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} className="w-full rounded" />
+    authorNameClassName?: string;
-      <span className="text-sm font-medium text-primary-cta">{blog.category}</span>
+    dateClassName?: string;
-      <h3 className="text-xl font-semibold">{blog.title}</h3>
+}
-      <p className="text-sm text-foreground/75">{blog.excerpt}</p>
-      <div className="flex items-center gap-2">
-        <img src={blog.authorAvatar} alt={blog.authorName} className="w-8 h-8 rounded-full" />
-        <div>
-          <p className="text-sm font-medium">{blog.authorName}</p>
-          <p className="text-xs text-foreground/60">{blog.date}</p>
-        </div>
-      </div>
-    </div>
-  ));
 
-  return (
+const BlogCardItem = memo(({
-    <CardStack
+    blog,
-      gridVariant="uniform-all-items-equal"
+    shouldUseLightText,
-      animationType={animationType}
+    cardClassName = "",
-      title={title}
+    imageWrapperClassName = "",
-      description={description}
+    imageClassName = "",
-      textboxLayout={textboxLayout}
+    categoryClassName = "",
-      useInvertedBackground={useInvertedBackground}
+    cardTitleClassName = "",
-      {...props}
+    excerptClassName = "",
-    >
+    authorContainerClassName = "",
-      {blogItems}
+    authorAvatarClassName = "",
-    </CardStack>
+    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>
+
+            <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} />
+
+                    <h3 className={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+                        {blog.title}
+                    </h3>
+
+                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+                        {blog.excerpt}
+                    </p>
+                </div>
+
+                <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>
+    );
+});
+
+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}
+            
+            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}
+        >
+            {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>
+    );
 };
 
-export default BlogCardOne;
+BlogCardOne.displayName = "BlogCardOne";
+
+export default BlogCardOne;

src/components/sections/blog/BlogCardThree.tsx

@@ -1,65 +1,288 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
+
+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";
+
+type BlogCard = BlogPost;
 
 interface BlogCardThreeProps {
-  blogs: Array<{
+    blogs: BlogCard[];
-    id: string;
+    carouselMode?: "auto" | "buttons";
-    category: string;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
     title: string;
-    excerpt: string;
+    titleSegments?: TitleSegment[];
-    imageSrc: string;
+    description: string;
-    imageAlt?: string;
+    tag?: string;
-    authorName: string;
+    tagIcon?: LucideIcon;
-    authorAvatar: string;
+    tagAnimation?: ButtonAnimationType;
-    date: string;
+    buttons?: ButtonConfig[];
-    onBlogClick?: () => void;
+    buttonAnimation?: ButtonAnimationType;
-  }>;
+    textboxLayout: TextboxLayout;
-  title: string;
+    useInvertedBackground: InvertedBackground;
-  description: string;
+    ariaLabel?: string;
-  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+    className?: string;
-  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+    containerClassName?: string;
-  useInvertedBackground?: boolean;
+    cardClassName?: string;
-  [key: string]: any;
+    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;
 }
 
-const BlogCardThree: React.FC<BlogCardThreeProps> = ({
+interface BlogCardItemProps {
-  blogs,
+    blog: BlogCard;
-  title,
+    useInvertedBackground: boolean;
-  description,
+    cardClassName?: string;
-  animationType = 'slide-up',
+    cardContentClassName?: string;
-  textboxLayout = 'default',
+    categoryTagClassName?: string;
-  useInvertedBackground = false,
+    cardTitleClassName?: string;
-  ...props
+    excerptClassName?: string;
-}) => {
+    authorContainerClassName?: string;
-  const blogItems = blogs.map((blog) => (
+    authorAvatarClassName?: string;
-    <div key={blog.id} className="flex flex-col gap-4">
+    authorNameClassName?: string;
-      <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} className="w-full rounded" />
+    dateClassName?: string;
-      <span className="text-sm font-medium text-primary-cta">{blog.category}</span>
+    mediaWrapperClassName?: string;
-      <h3 className="text-xl font-semibold">{blog.title}</h3>
+    mediaClassName?: string;
-      <p className="text-sm text-foreground/75">{blog.excerpt}</p>
+}
-      <div className="flex items-center gap-2">
-        <img src={blog.authorAvatar} alt={blog.authorName} className="w-8 h-8 rounded-full" />
-        <div>
-          <p className="text-sm font-medium">{blog.authorName}</p>
-          <p className="text-xs text-foreground/60">{blog.date}</p>
-        </div>
-      </div>
-    </div>
-  ));
 
-  return (
+const BlogCardItem = memo(({
-    <CardStack
+    blog,
-      gridVariant="uniform-all-items-equal"
+    useInvertedBackground,
-      animationType={animationType}
+    cardClassName = "",
-      title={title}
+    cardContentClassName = "",
-      description={description}
+    categoryTagClassName = "",
-      textboxLayout={textboxLayout}
+    cardTitleClassName = "",
-      useInvertedBackground={useInvertedBackground}
+    excerptClassName = "",
-      {...props}
+    authorContainerClassName = "",
-    >
+    authorAvatarClassName = "",
-      {blogItems}
+    authorNameClassName = "",
-    </CardStack>
+    dateClassName = "",
-  );
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: BlogCardItemProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    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}
+                />
+
+                <h3 className={cls(
+                    "text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    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>
+
+                {(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={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}
+            
+            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}
+        >
+            {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>
+    );
 };
 
-export default BlogCardThree;
+BlogCardThree.displayName = "BlogCardThree";
+
+export default BlogCardThree;

src/components/sections/blog/BlogCardTwo.tsx

@@ -1,65 +1,241 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface BlogCardTwoProps {
+import { memo } from "react";
-  blogs: Array<{
+import Image from "next/image";
-    id: string;
+import CardStack from "@/components/cardStack/CardStack";
-    category: string;
+import Badge from "@/components/shared/Badge";
-    title: string;
+import OverlayArrowButton from "@/components/shared/OverlayArrowButton";
-    excerpt: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-    imageSrc: string;
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-    imageAlt?: string;
+import type { BlogPost } from "@/lib/api/blog";
-    authorName: string;
+import type { LucideIcon } from "lucide-react";
-    authorAvatar: string;
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
-    date: string;
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-    onBlogClick?: () => void;
-  }>;
-  title: string;
-  description: string;
-  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
-  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground?: boolean;
-  [key: string]: any;
-}
 
-const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
+type BlogCard = Omit<BlogPost, 'category'> & {
-  blogs,
+    category: string | string[];
-  title,
-  description,
-  animationType = 'slide-up',
-  textboxLayout = 'default',
-  useInvertedBackground = false,
-  ...props
-}) => {
-  const blogItems = blogs.map((blog) => (
-    <div key={blog.id} className="flex flex-col gap-4">
-      <img src={blog.imageSrc} alt={blog.imageAlt || blog.title} className="w-full rounded" />
-      <span className="text-sm font-medium text-primary-cta">{blog.category}</span>
-      <h3 className="text-xl font-semibold">{blog.title}</h3>
-      <p className="text-sm text-foreground/75">{blog.excerpt}</p>
-      <div className="flex items-center gap-2">
-        <img src={blog.authorAvatar} alt={blog.authorName} className="w-8 h-8 rounded-full" />
-        <div>
-          <p className="text-sm font-medium">{blog.authorName}</p>
-          <p className="text-xs text-foreground/60">{blog.date}</p>
-        </div>
-      </div>
-    </div>
-  ));
-
-  return (
-    <CardStack
-      gridVariant="uniform-all-items-equal"
-      animationType={animationType}
-      title={title}
-      description={description}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      {...props}
-    >
-      {blogItems}
-    </CardStack>
-  );
 };
 
-export default BlogCardTwo;
+interface BlogCardTwoProps {
+    blogs: BlogCard[];
+    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;
+    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;
+}
+
+interface BlogCardItemProps {
+    blog: BlogCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageWrapperClassName?: string;
+    imageClassName?: string;
+    authorAvatarClassName?: string;
+    authorDateClassName?: string;
+    cardTitleClassName?: string;
+    excerptClassName?: string;
+    categoryClassName?: string;
+}
+
+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>
+
+            <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>
+
+                    <h3 className={cls("text-2xl font-medium leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+                        {blog.title}
+                    </h3>
+
+                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+                        {blog.excerpt}
+                    </p>
+                </div>
+
+                <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>
+    );
+});
+
+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}
+            
+            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}
+        >
+            {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>
+    );
+};
+
+BlogCardTwo.displayName = "BlogCardTwo";
+
+export default BlogCardTwo;

src/components/sections/contact/ContactCenter.tsx

@@ -1,57 +1,91 @@
-"use client";
+'use client';
 
 import React, { useState } from 'react';
-import Input from '@/components/form/Input';
+import TextAnimation from '@/components/text/TextAnimation';
 
 interface ContactCenterProps {
+  tag: string;
   title: string;
-  description?: string;
+  description: string;
-  placeholder?: 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;
 }
 
-export const ContactCenter: React.FC<ContactCenterProps> = ({
+const ContactCenter: React.FC<ContactCenterProps> = ({
+  tag,
   title,
   description,
-  placeholder = 'Enter your email',
+  background,
-  buttonText = 'Submit',
+  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 [submitted, setSubmitted] = useState(false);
 
-  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = () => {
-    e.preventDefault();
+    if (onSubmit && email) {
-    setSubmitted(true);
+      onSubmit(email);
-    setEmail('');
+    }
-    setTimeout(() => setSubmitted(false), 3000);
   };
 
   return (
-    <div className="flex flex-col items-center gap-6">
+    <section className={`contact-center ${className}`}>
-      <div className="text-center">
+      <div className={`container ${containerClassName}`}>
-        <h2 className="text-3xl font-bold">{title}</h2>
+        <div className={`content ${contentClassName}`}>
-        {description && <p className="text-foreground/70 mt-2">{description}</p>}
+          {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>
+            </div>
+          </div>
+          {termsText && <p className={`terms ${termsClassName}`}>{termsText}</p>}
+        </div>
       </div>
-
+    </section>
-      <form onSubmit={handleSubmitForm} className="w-full max-w-md">
-        <Input
-          value={email}
-          onChange={setEmail}
-          type="email"
-          placeholder={placeholder}
-          required
-        />
-        <button
-          type="submit"
-          className="w-full mt-4 bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
-        >
-          {buttonText}
-        </button>
-      </form>
-
-      {submitted && (
-        <p className="text-green-600 font-semibold">Thank you for your submission!</p>
-      )}
-    </div>
   );
 };
+
+export default ContactCenter;

src/components/sections/contact/ContactFaq.tsx

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

src/components/sections/contact/ContactSplit.tsx

@@ -1,112 +1,48 @@
-"use client";
+'use client';
 
 import React, { useState } from 'react';
-import Input from '@/components/form/Input';
 
 interface ContactSplitProps {
-  tag: string;
   title: string;
   description: string;
-  tagIcon?: React.ComponentType<any>;
+  contactInfo: string;
-  tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
+  onSubmit?: (email: string) => void;
-  background: { variant: string };
-  useInvertedBackground: boolean;
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  videoAriaLabel?: string;
-  mediaAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal';
-  mediaPosition?: 'left' | 'right';
-  inputPlaceholder?: string;
-  buttonText?: string;
-  termsText?: string;
-  ariaLabel?: string;
   className?: string;
-  containerClassName?: string;
-  contentClassName?: string;
-  contactFormClassName?: string;
-  tagClassName?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-  formWrapperClassName?: string;
-  formClassName?: string;
-  inputClassName?: string;
-  buttonClassName?: string;
-  buttonTextClassName?: string;
-  termsClassName?: string;
-  mediaWrapperClassName?: string;
-  mediaClassName?: string;
 }
 
 const ContactSplit: React.FC<ContactSplitProps> = ({
-  tag,
   title,
   description,
-  tagIcon: TagIcon,
+  contactInfo,
-  useInvertedBackground,
+  onSubmit,
-  imageSrc,
+  className = '',
-  videoSrc,
-  imageAlt,
-  inputPlaceholder = 'Enter your email',
-  buttonText = 'Sign Up',
-  termsText = 'By clicking Sign Up you are agreeing to our terms and conditions.',
 }) => {
   const [email, setEmail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleEmailSubmit = () => {
-    e.preventDefault();
+    if (onSubmit && email) {
-    setSubmitted(true);
+      onSubmit(email);
-    setEmail('');
+    }
-    setTimeout(() => setSubmitted(false), 3000);
   };
 
   return (
-    <section className={`w-full py-20 px-4 ${useInvertedBackground ? 'bg-background-accent' : ''}`}>
+    <section className={`contact-split ${className}`}>
-      <div className="max-w-6xl mx-auto">
+      <div className="contact-split-container">
-        <div className="grid md:grid-cols-2 gap-12 items-center">
+        <div className="contact-split-left">
-          {/* Text Content */}
+          <h2>{title}</h2>
-          <div className="space-y-6">
+          <p>{description}</p>
-            {TagIcon && (
+        </div>
-              <div className="flex items-center gap-2 w-fit">
+        <div className="contact-split-right">
-                <TagIcon className="w-4 h-4" />
+          <div className="form-group">
-                <span className="text-sm font-semibold text-primary-cta">{tag}</span>
+            <input
-              </div>
+              type="email"
-            )}
+              value={email}
-            <h2 className="text-4xl font-bold">{title}</h2>
+              onChange={(e) => setEmail(e.target.value)}
-            <p className="text-lg text-foreground/70">{description}</p>
+              placeholder="Enter your email"
-
+            />
-            {/* Form */}
+            <button onClick={handleEmailSubmit}>Get Started</button>
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <Input
-                value={email}
-                onChange={setEmail}
-                type="email"
-                placeholder={inputPlaceholder}
-                required
-              />
-              <button
-                type="submit"
-                className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
-              >
-                {buttonText}
-              </button>
-            </form>
-
-            {submitted && (
-              <p className="text-green-600 font-semibold">Thank you for signing up!</p>
-            )}
-
-            <p className="text-sm text-foreground/60">{termsText}</p>
           </div>
-
+          <p className="contact-info">{contactInfo}</p>
-          {/* Media */}
-          {(imageSrc || videoSrc) && (
-            <div className="rounded-lg overflow-hidden">
-              {imageSrc && <img src={imageSrc} alt={imageAlt || 'Contact section'} className="w-full h-auto" />}
-              {videoSrc && <video src={videoSrc} className="w-full h-auto" autoPlay loop muted />}
-            </div>
-          )}
         </div>
       </div>
     </section>

src/components/sections/contact/ContactSplitForm.tsx

@@ -1,58 +1,42 @@
-"use client";
+'use client';
 
 import React, { useState } from 'react';
-import Input from '@/components/form/Input';
 
 interface ContactSplitFormProps {
   title: string;
-  description?: string;
+  description: string;
-  placeholder?: string;
+  className?: string;
-  buttonText?: string;
 }
 
 const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
   title,
   description,
-  placeholder = 'Enter your email',
+  className = '',
-  buttonText = 'Submit',
 }) => {
   const [email, setEmail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
 
-  const handleSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = () => {
-    e.preventDefault();
+    if (email) {
-    setSubmitted(true);
+      console.log('Form submitted with email:', email);
-    setEmail('');
+    }
-    setTimeout(() => setSubmitted(false), 3000);
   };
 
   return (
-    <div className="w-full max-w-2xl mx-auto">
+    <section className={`contact-split-form ${className}`}>
-      <div className="text-center mb-8">
+      <div className="contact-form-container">
-        <h2 className="text-3xl font-bold">{title}</h2>
+        <h2>{title}</h2>
-        {description && <p className="text-foreground/70 mt-2">{description}</p>}
+        <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>
+        </div>
       </div>
-
+    </section>
-      <form onSubmit={handleSubmitForm} className="space-y-4">
-        <Input
-          value={email}
-          onChange={setEmail}
-          type="email"
-          placeholder={placeholder}
-          required
-        />
-        <button
-          type="submit"
-          className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
-        >
-          {buttonText}
-        </button>
-      </form>
-
-      {submitted && (
-        <p className="text-center text-green-600 font-semibold mt-4">Thank you for your submission!</p>
-      )}
-    </div>
   );
 };
 

src/components/sections/feature/FeatureBento.tsx

@@ -1,47 +1,300 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface FeatureBentoProps {
+import CardStack from "@/components/cardStack/CardStack";
-  features: Array<{
+import Button from "@/components/button/Button";
-    id: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-    title: string;
+import { getButtonProps } from "@/lib/buttonUtils";
-    description: string;
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-    imageSrc?: string;
+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";
+
+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;
-  animationType?: string;
+  button?: ButtonConfig;
-  [key: string]: any;
+};
+
+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[];
+  carouselMode?: "auto" | "buttons";
+  animationType: BentoAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-const FeatureBento: React.FC<FeatureBentoProps> = ({
+const FeatureBento = ({
   features,
+  carouselMode = "buttons",
+  animationType,
   title,
+  titleSegments,
   description,
-  animationType = 'slide-up',
+  tag,
-  ...props
+  tagIcon,
-}) => {
+  tagAnimation,
-  const featureItems = features.map((feature) => (
+  buttons,
-    <div key={feature.id} className="flex flex-col gap-4">
+  buttonAnimation,
-      {feature.imageSrc && (
+  textboxLayout,
-        <img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
+  useInvertedBackground,
-      )}
+  ariaLabel = "Feature section",
-      <h3 className="text-xl font-semibold">{feature.title}</h3>
+  className = "",
-      <p className="text-sm text-foreground/75">{feature.description}</p>
+  containerClassName = "",
-    </div>
+  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
-      gridVariant="bento-grid"
+      mode={carouselMode}
+      gridVariant="uniform-all-items-equal"
+      uniformGridCustomHeightClasses="min-h-0"
       animationType={animationType}
+      carouselThreshold={4}
+
       title={title}
+      titleSegments={titleSegments}
       description={description}
-      {...props}
+      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}
     >
-      {featureItems}
+      {features.map((feature, index) => (
+        <div
+          key={`${feature.title}-${index}`}
+          className={cls("card flex flex-col gap-4 p-5 rounded-theme-capped min-h-0 h-full", 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)} />
+          )}
+        </div>
+      ))}
     </CardStack>
   );
 };
 
-export default FeatureBento;
+FeatureBento.displayName = "FeatureBento";
+
+export default FeatureBento;

src/components/sections/feature/FeatureCardMedia.tsx

@@ -1,55 +1,261 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface FeatureCardMediaProps {
+import { memo } from "react";
-  features: Array<{
+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";
+
+type FeatureCard = {
     id: string;
     title: string;
     description: string;
     tag: string;
     imageSrc?: string;
-  }>;
+    videoSrc?: string;
-  title: string;
+    imageAlt?: string;
-  description: string;
+    videoAriaLabel?: string;
-  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+    buttons?: ButtonConfig[];
-  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
+    onCardClick?: () => void;
-  useInvertedBackground?: boolean;
-  [key: string]: any;
-}
-
-const FeatureCardMedia: React.FC<FeatureCardMediaProps> = ({
-  features,
-  title,
-  description,
-  animationType = 'slide-up',
-  textboxLayout = 'default',
-  useInvertedBackground = false,
-  ...props
-}) => {
-  const featureItems = features.map((feature) => (
-    <div key={feature.id} className="flex flex-col gap-4">
-      {feature.imageSrc && (
-        <img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
-      )}
-      <span className="text-sm font-medium text-primary-cta">{feature.tag}</span>
-      <h3 className="text-xl font-semibold">{feature.title}</h3>
-      <p className="text-sm text-foreground/75">{feature.description}</p>
-    </div>
-  ));
-
-  return (
-    <CardStack
-      gridVariant="uniform-all-items-equal"
-      animationType={animationType}
-      title={title}
-      description={description}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      {...props}
-    >
-      {featureItems}
-    </CardStack>
-  );
 };
 
-export default FeatureCardMedia;
+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;
+}
+
+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}
+        >
+            <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)}
+                />
+                <div className="absolute top-4 right-4">
+                    <Tag
+                        text={feature.tag}
+                        useInvertedBackground={useInvertedBackground}
+                        className={tagClassName}
+                    />
+                </div>
+            </div>
+
+            <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}
+            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}
+        >
+            {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}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+FeatureCardMedia.displayName = "FeatureCardMedia";
+
+export default FeatureCardMedia;

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,45 +1,196 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface FeatureCardOneProps {
+import CardStack from "@/components/cardStack/CardStack";
-  features: Array<{
+import MediaContent from "@/components/shared/MediaContent";
-    id: string;
+import Button from "@/components/button/Button";
-    title: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-    description: string;
+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 type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
   title: string;
   description: string;
-  gridVariant?: string;
+  button?: ButtonConfig;
-  animationType?: string;
+} & (
-  [key: string]: any;
+    | {
+      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;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationTypeWith3D;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  mediaClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardButtonClassName?: string;
+  cardButtonTextClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardOne: React.FC<FeatureCardOneProps> = ({
+const FeatureCardOne = ({
   features,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses,
+  animationType,
   title,
+  titleSegments,
   description,
-  gridVariant = 'uniform-all-items-equal',
+  tag,
-  animationType = 'slide-up',
+  tagIcon,
-  ...props
+  tagAnimation,
-}) => {
+  buttons,
-  const featureItems = features.map((feature) => (
+  buttonAnimation,
-    <div key={feature.id} className="flex flex-col gap-4">
+  textboxLayout,
-      <h3 className="text-xl font-semibold">{feature.title}</h3>
+  useInvertedBackground,
-      <p className="text-sm text-foreground/75">{feature.description}</p>
+  ariaLabel = "Feature section",
-    </div>
+  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}
-      {...props}
+      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}
     >
-      {featureItems}
+      {features.map((feature, index) => (
+        <div
+          key={`${feature.title}-${index}`}
+          className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", 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
+              )}
+            />
+          )}
+        </div>
+      ))}
     </CardStack>
   );
 };
 
-export default FeatureCardOne;
+FeatureCardOne.displayName = "FeatureCardOne";
+
+export default FeatureCardOne;

src/components/sections/feature/FeatureCardSixteen.tsx

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

src/components/sections/feature/FeatureCardTwentyFive.tsx

@@ -1,58 +1,178 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface FeatureCardTwentyFiveProps {
+import CardStack from "@/components/cardStack/CardStack";
-  features: Array<{
+import MediaContent from "@/components/shared/MediaContent";
-    id?: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-    title: string;
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-    description: string;
+import type { LucideIcon } from "lucide-react";
-    icon?: any;
+import type { CardAnimationTypeWith3D, TitleSegment, ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types";
-    mediaItems?: Array<{ imageSrc: string; imageAlt?: string }>;
+
-  }>;
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-  title: string;
+
-  description: string;
+interface MediaItem {
-  animationType?: string;
+  imageSrc?: string;
-  textboxLayout?: string;
+  videoSrc?: string;
-  useInvertedBackground?: boolean;
+  imageAlt?: string;
-  [key: string]: any;
+  videoAriaLabel?: string;
 }
 
-const FeatureCardTwentyFive: React.FC<FeatureCardTwentyFiveProps> = ({
+type FeatureCard = {
+  title: string;
+  description: string;
+  icon: LucideIcon;
+  mediaItems: [MediaItem, MediaItem];
+};
+
+interface FeatureCardTwentyFiveProps {
+  features: FeatureCard[];
+  carouselMode?: "auto" | "buttons";
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationTypeWith3D;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  mediaClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardTwentyFive = ({
   features,
+  carouselMode = "buttons",
+  uniformGridCustomHeightClasses,
+  animationType,
   title,
+  titleSegments,
   description,
-  animationType = 'slide-up',
+  tag,
-  textboxLayout = 'default',
+  tagIcon,
-  useInvertedBackground = false,
+  tagAnimation,
-  ...props
+  buttons,
-}) => {
+  buttonAnimation,
-  const featureItems = features.map((feature, index) => (
+  textboxLayout,
-    <div key={feature.id || index} className="flex flex-col gap-4">
+  useInvertedBackground,
-      <h3 className="text-xl font-semibold">{feature.title}</h3>
+  ariaLabel = "Feature section",
-      <p className="text-sm text-foreground/75">{feature.description}</p>
+  className = "",
-      {feature.mediaItems && feature.mediaItems.length > 0 && (
+  containerClassName = "",
-        <div className="flex gap-2">
+  cardClassName = "",
-          {feature.mediaItems.map((media, idx) => (
+  mediaClassName = "",
-            <img key={idx} src={media.imageSrc} alt={media.imageAlt || ''} className="w-24 h-24 rounded" />
+  textBoxTitleClassName = "",
-          ))}
+  textBoxTitleImageWrapperClassName = "",
-        </div>
+  textBoxTitleImageClassName = "",
-      )}
+  textBoxDescriptionClassName = "",
-    </div>
+  cardTitleClassName = "",
-  ));
+  cardDescriptionClassName = "",
+  cardIconClassName = "",
+  cardIconWrapperClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureCardTwentyFiveProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
 
   return (
     <CardStack
-      gridVariant="uniform-all-items-equal"
+      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}
-      {...props}
+      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}
     >
-      {featureItems}
+      {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>
+            </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>
+              ))}
+            </div>
+          </div>
+        );
+      })}
     </CardStack>
   );
 };
 
-export default FeatureCardTwentyFive;
+FeatureCardTwentyFive.displayName = "FeatureCardTwentyFive";
+
+export default FeatureCardTwentyFive;

src/components/sections/feature/FeatureCardTwentyFiveWithSaving.tsx

@@ -0,0 +1,53 @@
+'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/FeatureCardTwentySeven.tsx

@@ -1,45 +1,221 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface FeatureCardTwentySevenProps {
+import { useState } from "react";
-  features: Array<{
+import { Plus } from "lucide-react";
-    id: string;
+import CardStack from "@/components/cardStack/CardStack";
-    title: string;
+import MediaContent from "@/components/shared/MediaContent";
-    description: string;
+import { cls } from "@/lib/utils";
-  }>;
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type FeatureCard = {
+  id: string;
   title: string;
-  description: string;
+  descriptions: string[];
-  gridVariant?: string;
+  imageSrc?: string;
-  animationType?: string;
+  videoSrc?: string;
-  [key: string]: any;
+  imageAlt?: string;
+};
+
+interface FeatureCardTwentySevenItemProps {
+  title: string;
+  descriptions: string[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  className?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
 }
 
-const FeatureCardTwentySeven: React.FC<FeatureCardTwentySevenProps> = ({
+const FeatureCardTwentySevenItem = ({
-  features,
   title,
-  description,
+  descriptions,
-  gridVariant = 'uniform-all-items-equal',
+  imageSrc,
-  animationType = 'slide-up',
+  videoSrc,
-  ...props
+  imageAlt = "",
-}) => {
+  className = "",
-  const featureItems = features.map((feature) => (
+  titleClassName = "",
-    <div key={feature.id} className="flex flex-col gap-4">
+  descriptionClassName = "",
-      <h3 className="text-xl font-semibold">{feature.title}</h3>
+}: FeatureCardTwentySevenItemProps) => {
-      <p className="text-sm text-foreground/75">{feature.description}</p>
+  const [isFlipped, setIsFlipped] = useState(false);
-    </div>
-  ));
 
+  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;
+  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;
+  cardTitleClassName?: string;
+  cardDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
+}
+
+const FeatureCardTwentySeven = ({
+  features,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses = "min-h-none",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Feature section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardTitleClassName = "",
+  cardDescriptionClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: FeatureCardTwentySevenProps) => {
   return (
     <CardStack
+      mode={carouselMode}
       gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
       animationType={animationType}
       title={title}
+      titleSegments={titleSegments}
       description={description}
-      {...props}
+      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}
     >
-      {featureItems}
+      {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>
   );
 };
 
-export default FeatureCardTwentySeven;
+FeatureCardTwentySeven.displayName = "FeatureCardTwentySeven";
+
+export default FeatureCardTwentySeven;

src/components/sections/feature/FeatureCardTwentyThree.tsx

@@ -1,53 +1,241 @@
-import React from 'react';
+"use client";
-import { CardStack } from '@/components/cardStack/CardStack';
 
-interface FeatureCardTwentyThreeProps {
+import { memo } from "react";
-  features: Array<{
+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";
+
+type FeatureItem = {
     id: string;
     title: string;
-    description: string;
+    tags: string[];
     imageSrc?: string;
-  }>;
+    videoSrc?: string;
-  title: string;
+    imageAlt?: string;
-  description: string;
+    videoAriaLabel?: string;
-  animationType?: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+    onFeatureClick?: () => void;
-  textboxLayout?: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
-  useInvertedBackground?: boolean;
-  [key: string]: any;
-}
-
-const FeatureCardTwentyThree: React.FC<FeatureCardTwentyThreeProps> = ({
-  features,
-  title,
-  description,
-  animationType = 'slide-up',
-  textboxLayout = 'default',
-  useInvertedBackground = false,
-  ...props
-}) => {
-  const featureItems = features.map((feature) => (
-    <div key={feature.id} className="flex flex-col gap-4">
-      {feature.imageSrc && (
-        <img src={feature.imageSrc} alt={feature.title} className="w-full rounded" />
-      )}
-      <h3 className="text-xl font-semibold">{feature.title}</h3>
-      <p className="text-sm text-foreground/75">{feature.description}</p>
-    </div>
-  ));
-
-  return (
-    <CardStack
-      gridVariant="uniform-all-items-equal"
-      animationType={animationType}
-      title={title}
-      description={description}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      {...props}
-    >
-      {featureItems}
-    </CardStack>
-  );
 };
 
-export default FeatureCardTwentyThree;
+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;
+}
+
+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}
+        >
+            <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)}
+                />
+            </div>
+
+            <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}
+
+            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}
+        >
+            {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}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+FeatureCardTwentyThree.displayName = "FeatureCardTwentyThree";
+
+export default FeatureCardTwentyThree;

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

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

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

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

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

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

src/components/sections/metrics/MetricCardEleven.tsx

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

src/components/sections/metrics/MetricCardFourteenWithSaving.tsx

@@ -0,0 +1,70 @@
+'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/metrics/MetricCardOne.tsx

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

src/components/sections/metrics/MetricCardSeven.tsx

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

src/components/sections/metrics/MetricCardTen.tsx

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

src/components/sections/metrics/MetricCardThree.tsx

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

src/components/sections/metrics/MetricCardTwo.tsx

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

src/components/sections/pricing/PricingCardEight.tsx

@@ -1,71 +1,35 @@
-"use client";
+'use client';
 
 import React from 'react';
 
-interface PricingCardEightProps {
+interface PricingCard {
-  plans: Array<{
+  id: string;
-    id: string;
+  name: string;
-    badge: string;
+  price: string;
-    badgeIcon?: React.ComponentType<any>;
+  features: string[];
-    price: string;
-    subtitle: string;
-    buttons: Array<{ text: string; onClick?: () => void; href?: string }>;
-    features: string[];
-  }>;
-  animationType?: string;
-  title?: string;
-  description?: string;
-  textboxLayout?: string;
-  useInvertedBackground?: boolean;
 }
 
-const PricingCardEight: React.FC<PricingCardEightProps> = ({
+interface PricingCardEightProps {
-  plans,
+  cards: PricingCard[];
-  title,
+  className?: string;
-  description,
+}
-  useInvertedBackground = false,
+
-}) => {
+const PricingCardEight: React.FC<PricingCardEightProps> = ({ cards, className = '' }) => {
   return (
-    <div className={`w-full py-20 px-4 ${useInvertedBackground ? 'bg-background-accent' : ''}`}>
+    <div className={`pricing-card-eight ${className}`}>
-      <div className="max-w-6xl mx-auto">
+      {cards.map((card) => (
-        {title && <h2 className="text-4xl font-bold mb-4">{title}</h2>}
+        <div key={card.id} className="pricing-card">
-        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+          <h3>{card.name}</h3>
-
+          <div className="price-section">
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <span>{card.price}</span>
-          {plans.map((plan) => (
+          </div>
-            <div key={plan.id} className="bg-card rounded-lg p-8 border border-card/50">
+          <ul className="features-list">
-              <div className="flex items-center gap-2 mb-4">
+            {card.features.map((feature, index) => (
-                {plan.badgeIcon && <plan.badgeIcon className="w-4 h-4" />}
+              <li key={index}>{feature}</li>
-                <span className="text-sm font-semibold text-primary-cta">{plan.badge}</span>
+            ))}
-              </div>
+          </ul>
-
-              <h3 className="text-2xl font-bold mb-2">{plan.price}</h3>
-              <p className="text-foreground/70 mb-6">{plan.subtitle}</p>
-
-              <div className="space-y-3 mb-8">
-                {plan.buttons.map((btn, idx) => (
-                  <button
-                    key={idx}
-                    onClick={btn.onClick}
-                    className="w-full bg-primary-cta text-white font-semibold py-3 rounded-lg hover:opacity-90 transition-opacity"
-                  >
-                    {btn.text}
-                  </button>
-                ))}
-              </div>
-
-              <ul className="space-y-2">
-                {plan.features.map((feature, idx) => (
-                  <li key={idx} className="text-sm text-foreground/70 flex items-start gap-2">
-                    <span className="text-primary-cta mt-1">✓</span>
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
         </div>
-      </div>
+      ))}
     </div>
   );
 };

src/components/sections/pricing/PricingCardOne.tsx

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

src/components/sections/pricing/PricingCardOneWithSaving.tsx

@@ -0,0 +1,68 @@
+'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/pricing/PricingCardThree.tsx

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

src/components/sections/pricing/PricingCardTwo.tsx

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

src/components/sections/product/ProductCardFour.tsx

@@ -1,105 +1,18 @@
-"use client";
+'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
-
+import { Product } from '@/lib/api/product';
-interface ProductCard {
-  id: string;
-  name: string;
-  price: string;
-  imageSrc: string;
-  imageAlt?: string;
-  isFavorited?: boolean;
-}
 
 interface ProductCardFourProps {
-  products?: ProductCard[];
+  product: Product;
-  title: string;
-  description?: string;
-  gridVariant: string;
-  animationType: string;
-  textboxLayout: string;
-  useInvertedBackground?: boolean;
-  onProductClick?: (id: string) => void;
-  onFavorite?: (id: string) => void;
-  onQuantityChange?: (id: string, quantity: number) => void;
 }
 
-const ProductCardFour: React.FC<ProductCardFourProps> = ({
+const ProductCardFour: React.FC<ProductCardFourProps> = ({ product }) => {
-  products = [],
-  title,
-  description,
-  gridVariant,
-  animationType,
-  textboxLayout,
-  useInvertedBackground = false,
-  onProductClick,
-  onFavorite,
-  onQuantityChange,
-}) => {
-  const [quantities, setQuantities] = useState<Record<string, number>>(
-    products.reduce((acc, p) => ({ ...acc, [p.id]: 1 }), {})
-  );
-
-  const handleQuantityChange = (id: string, quantity: number) => {
-    setQuantities(prev => ({ ...prev, [id]: Math.max(1, quantity) }));
-    onQuantityChange?.(id, Math.max(1, quantity));
-  };
-
   return (
-    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+    <div className="product-card-four">
-      <div className="max-w-6xl mx-auto px-4 py-20">
+      <h3>{product.name}</h3>
-        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+      <p>{product.price}</p>
-        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+    </div>
-        
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {products.map((product) => (
-            <div key={product.id} className="bg-card rounded-lg overflow-hidden">
-              <div className="relative">
-                <img
-                  src={product.imageSrc}
-                  alt={product.imageAlt || product.name}
-                  className="w-full h-48 object-cover cursor-pointer hover:scale-105 transition-transform"
-                  onClick={() => onProductClick?.(product.id)}
-                />
-                <button
-                  onClick={() => onFavorite?.(product.id)}
-                  className="absolute top-2 right-2 w-8 h-8 bg-white/80 rounded-full flex items-center justify-center hover:bg-white"
-                >
-                  {product.isFavorited ? '♥' : '♡'}
-                </button>
-              </div>
-              <div className="p-4">
-                <h3 className="font-semibold text-lg">{product.name}</h3>
-                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
-                
-                <div className="flex items-center gap-2 mt-4">
-                  <button
-                    onClick={() => handleQuantityChange(product.id, (quantities[product.id] || 1) - 1)}
-                    className="px-3 py-1 bg-foreground/10 rounded hover:bg-foreground/20"
-                  >
-                    −
-                  </button>
-                  <span className="flex-1 text-center">{quantities[product.id] || 1}</span>
-                  <button
-                    onClick={() => handleQuantityChange(product.id, (quantities[product.id] || 1) + 1)}
-                    className="px-3 py-1 bg-foreground/10 rounded hover:bg-foreground/20"
-                  >
-                    +
-                  </button>
-                </div>
-
-                <button
-                  onClick={() => onProductClick?.(product.id)}
-                  className="w-full mt-4 py-2 bg-primary-cta text-white rounded hover:opacity-90"
-                >
-                  Add to Cart
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
   );
 };
 

src/components/sections/product/ProductCardOne.tsx

@@ -1,75 +1,28 @@
-"use client";
+'use client';
 
 import React from 'react';
 
-interface Product {
-  id: string;
-  name: string;
-  price: string;
-  imageSrc: string;
-  imageAlt?: string;
-  isFavorited?: boolean;
-}
-
 interface ProductCardOneProps {
-  products?: Product[];
+  product?: {
-  title: string;
+    id: string;
-  description?: string;
+    name: string;
-  gridVariant: string;
+    price: string;
-  animationType: string;
+    imageSrc?: string;
-  textboxLayout: string;
+    imageAlt?: string;
-  useInvertedBackground?: boolean;
+  };
-  onProductClick?: (id: string) => void;
-  onFavorite?: (id: string) => void;
 }
 
-const ProductCardOne: React.FC<ProductCardOneProps> = ({
+const ProductCardOne: React.FC<ProductCardOneProps> = ({ product }) => {
-  products = [],
+  if (!product) return null;
-  title,
+
-  description,
-  gridVariant,
-  animationType,
-  textboxLayout,
-  useInvertedBackground = false,
-  onProductClick,
-  onFavorite,
-}) => {
   return (
-    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+    <div className="product-card-one">
-      <div className="max-w-6xl mx-auto px-4 py-20">
+      {product.imageSrc && (
-        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+        <img src={product.imageSrc} alt={product.imageAlt || 'Product'} />
-        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+      )}
-        
+      <h3>{product.name}</h3>
-        <div className="grid md:grid-cols-3 gap-6">
+      <p>{product.price}</p>
-          {products.map((product) => (
+    </div>
-            <div
-              key={product.id}
-              className="bg-card rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
-              onClick={() => onProductClick?.(product.id)}
-            >
-              <img
-                src={product.imageSrc}
-                alt={product.imageAlt || product.name}
-                className="w-full h-48 object-cover"
-              />
-              <div className="p-4">
-                <h3 className="font-semibold text-lg">{product.name}</h3>
-                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onFavorite?.(product.id);
-                  }}
-                  className="mt-4 w-full py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity"
-                >
-                  {product.isFavorited ? 'Remove from Favorites' : 'Add to Favorites'}
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
   );
 };
 

src/components/sections/product/ProductCardOneWithSaving.tsx

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

src/components/sections/product/ProductCardTwo.tsx

@@ -1,75 +1,18 @@
-"use client";
+'use client';
 
 import React from 'react';
-
+import { Product } from '@/lib/api/product';
-interface ProductCard {
-  id: string;
-  name: string;
-  price: string;
-  imageSrc: string;
-  imageAlt?: string;
-  isFavorited?: boolean;
-}
 
 interface ProductCardTwoProps {
-  products?: ProductCard[];
+  product: Product;
-  title: string;
-  description?: string;
-  gridVariant: string;
-  animationType: string;
-  textboxLayout: string;
-  useInvertedBackground?: boolean;
-  onProductClick?: (id: string) => void;
-  onFavorite?: (id: string) => void;
 }
 
-const ProductCardTwo: React.FC<ProductCardTwoProps> = ({
+const ProductCardTwo: React.FC<ProductCardTwoProps> = ({ product }) => {
-  products = [],
-  title,
-  description,
-  gridVariant,
-  animationType,
-  textboxLayout,
-  useInvertedBackground = false,
-  onProductClick,
-  onFavorite,
-}) => {
   return (
-    <section className={useInvertedBackground ? 'bg-background-accent' : ''}>
+    <div className="product-card-two">
-      <div className="max-w-6xl mx-auto px-4 py-20">
+      <h3>{product.name}</h3>
-        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+      <p>{product.price}</p>
-        {description && <p className="text-lg text-foreground/70 mb-12">{description}</p>}
+    </div>
-        
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
-          {products.map((product) => (
-            <div
-              key={product.id}
-              className="bg-card rounded-lg overflow-hidden cursor-pointer hover:shadow-lg transition-shadow"
-              onClick={() => onProductClick?.(product.id)}
-            >
-              <img
-                src={product.imageSrc}
-                alt={product.imageAlt || product.name}
-                className="w-full h-48 object-cover"
-              />
-              <div className="p-4">
-                <h3 className="font-semibold text-lg">{product.name}</h3>
-                <p className="text-primary-cta font-bold mt-2">{product.price}</p>
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onFavorite?.(product.id);
-                  }}
-                  className="mt-4 w-full py-2 bg-primary-cta text-white rounded hover:opacity-90 transition-opacity"
-                >
-                  {product.isFavorited ? 'Remove from Favorites' : 'Add to Favorites'}
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
   );
 };
 

src/components/sections/team/TeamCardFive.tsx

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

src/components/sections/team/TeamCardOne.tsx

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

src/components/sections/team/TeamCardSix.tsx

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

src/components/sections/team/TeamCardTwo.tsx

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

src/components/sections/testimonial/TestimonialCardOne.tsx

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

src/components/sections/testimonial/TestimonialCardThirteen.tsx

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

src/components/sections/testimonial/TestimonialCardTwo.tsx

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

src/components/workout/WorkoutMetricsDisplay.tsx

@@ -0,0 +1,31 @@
+'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

@@ -0,0 +1,41 @@
+'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/context/AuthContext.tsx

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

src/hooks/useAuth.ts

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

src/hooks/useAuthGuard.ts

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

src/hooks/useCheckout.ts

@@ -1,75 +1,81 @@
-"use client";
+'use client';
 
 import { useState } from 'react';
 
-export interface CartItem {
+interface CartItem {
   id: string;
   name: string;
   price: number;
   quantity: number;
-  variants?: string[];
+}
+
+interface CheckoutState {
+  items: CartItem[];
+  total: number;
+  isProcessing: boolean;
+  error: string | null;
+}
+
+interface Product {
+  id: string;
+  name: string;
+  price: number;
 }
 
 export const useCheckout = () => {
-  const [items, setItems] = useState<CartItem[]>([]);
+  const [checkoutState, setCheckoutState] = useState<CheckoutState>({
-  const [isProcessing, setIsProcessing] = useState(false);
+    items: [],
-  const [error, setError] = useState<string | null>(null);
+    total: 0,
+    isProcessing: false,
+    error: null,
+  });
 
   const addItem = (item: CartItem) => {
-    setItems(prev => {
+    setCheckoutState((prev) => ({
-      const existing = prev.find(i => i.id === item.id);
+      ...prev,
-      if (existing) {
+      items: [...prev.items, item],
-        return prev.map(i => i.id === item.id ? { ...i, quantity: i.quantity + item.quantity } : i);
+      total: prev.total + item.price * item.quantity,
-      }
+    }));
-      return [...prev, item];
+  };
+
+  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 removeItem = (id: string) => {
-    setItems(prev => prev.filter(i => i.id !== id));
-  };
-
-  const updateQuantity = (id: string, quantity: number) => {
-    setItems(prev => prev.map(i => i.id === id ? { ...i, quantity } : i));
-  };
-
-  const getTotalPrice = () => {
-    return items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
-  };
-
   const processCheckout = async () => {
-    setIsProcessing(true);
+    setCheckoutState((prev) => ({ ...prev, isProcessing: true, error: null }));
-    setError(null);
 
     try {
-      const response = await fetch('/api/checkout', {
+      // Simulate API call
-        method: 'POST',
+      await new Promise((resolve) => setTimeout(resolve, 1000));
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ items, total: getTotalPrice() }),
-      });
 
-      if (!response.ok) {
+      setCheckoutState((prev) => ({
-        throw new Error('Checkout failed');
+        ...prev,
-      }
+        isProcessing: false,
-
+        items: [],
-      setItems([]);
+        total: 0,
-      return true;
+      }));
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
+      setCheckoutState((prev) => ({
-      return false;
+        ...prev,
-    } finally {
+        isProcessing: false,
-      setIsProcessing(false);
+        error: 'Checkout failed',
+      }));
     }
   };
 
   return {
-    items,
+    checkoutState,
     addItem,
     removeItem,
-    updateQuantity,
-    getTotalPrice,
     processCheckout,
-    isProcessing,
-    error,
   };
 };

src/hooks/useProduct.ts

@@ -1,30 +1,24 @@
-"use client";
+'use client';
 
 import { useState, useEffect } from 'react';
-import { getProduct } from '@/lib/api/product';
+import { Product, fetchProductList } from '@/lib/api/product';
 
-export const useProduct = (productId: string) => {
+export function useProduct(id: string) {
-  const [product, setProduct] = useState<any>(null);
+  const [product, setProduct] = useState<Product | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const fetchData = async () => {
+    const loadProduct = async () => {
       try {
-        setIsLoading(true);
+        const products = await fetchProductList();
-        const data = await getProduct(productId);
+        const found = products.find(p => p.id === id);
-        setProduct(data);
+        setProduct(found || null);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'An error occurred');
       } finally {
-        setIsLoading(false);
+        setLoading(false);
       }
     };
+    loadProduct();
+  }, [id]);
 
-    if (productId) {
+  return { product, loading };
-      fetchData();
+}
-    }
-  }, [productId]);
-
-  return { product, isLoading, error };
-};

src/hooks/useProductCatalog.ts

@@ -1,50 +1,49 @@
-"use client";
+'use client';
 
 import { useState, useEffect } from 'react';
 
-interface ProductItem {
+interface CatalogProduct {
   id: string;
   name: string;
   price: number;
   category: string;
 }
 
+interface UseProductCatalogState {
+  products: CatalogProduct[];
+  loading: boolean;
+  error: string | null;
+}
+
 export const useProductCatalog = () => {
-  const [products, setProducts] = useState<ProductItem[]>([]);
+  const [state, setState] = useState<UseProductCatalogState>({
-  const [isLoading, setIsLoading] = useState(false);
+    products: [],
-  const [error, setError] = useState<string | null>(null);
+    loading: false,
+    error: null,
+  });
 
   useEffect(() => {
-    const fetchProducts = async () => {
+    // Simulate loading products
-      setIsLoading(true);
+    const loadProducts = async () => {
+      setState((prev) => ({ ...prev, loading: true }));
       try {
-        const response = await fetch('/api/products');
+        // Mock data
-        if (!response.ok) throw new Error('Failed to fetch products');
+        const mockProducts: CatalogProduct[] = [
-        const data = await response.json();
+          { id: '1', name: 'Product 1', price: 99.99, category: 'Electronics' },
-        setProducts(data);
+          { id: '2', name: 'Product 2', price: 149.99, category: 'Sports' },
+        ];
+        setState({ products: mockProducts, loading: false, error: null });
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'An error occurred');
+        setState((prev) => ({
-      } finally {
+          ...prev,
-        setIsLoading(false);
+          loading: false,
+          error: 'Failed to load products',
+        }));
       }
     };
 
-    fetchProducts();
+    loadProducts();
   }, []);
 
-  const filterByCategory = (category: string) => {
+  return state;
-    return products.filter(p => p.category === category);
-  };
-
-  const searchProducts = (query: string) => {
-    return products.filter(p => p.name.toLowerCase().includes(query.toLowerCase()));
-  };
-
-  return {
-    products,
-    isLoading,
-    error,
-    filterByCategory,
-    searchProducts,
-  };
 };

src/hooks/useProductDetail.ts

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import { useState, useEffect } from 'react';
 
@@ -7,37 +7,46 @@ interface ProductDetail {
   name: string;
   price: number;
   description: string;
-  images: string[];
+}
-  stock: number;
+
+interface UseProductDetailState {
+  product: ProductDetail | null;
+  loading: boolean;
+  error: string | null;
 }
 
 export const useProductDetail = (productId: string) => {
-  const [product, setProduct] = useState<ProductDetail | null>(null);
+  const [state, setState] = useState<UseProductDetailState>({
-  const [isLoading, setIsLoading] = useState(true);
+    product: null,
-  const [error, setError] = useState<string | null>(null);
+    loading: false,
+    error: null,
+  });
 
   useEffect(() => {
-    const fetchProduct = async () => {
+    if (!productId) return;
+
+    const loadProduct = async () => {
+      setState((prev) => ({ ...prev, loading: true }));
       try {
-        const response = await fetch(`/api/products/${productId}`);
+        // Mock data
-        if (!response.ok) throw new Error('Product not found');
+        const mockProduct: ProductDetail = {
-        const data = await response.json();
+          id: productId,
-        setProduct(data);
+          name: 'Sample Product',
+          price: 99.99,
+          description: 'This is a sample product',
+        };
+        setState({ product: mockProduct, loading: false, error: null });
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'An error occurred');
+        setState((prev) => ({
-      } finally {
+          ...prev,
-        setIsLoading(false);
+          loading: false,
+          error: 'Failed to load product',
+        }));
       }
     };
 
-    if (productId) {
+    loadProduct();
-      fetchProduct();
-    }
   }, [productId]);
 
-  return {
+  return state;
-    product,
-    isLoading,
-    error,
-  };
 };

src/hooks/useProducts.ts

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

src/hooks/useWorkoutData.ts

@@ -0,0 +1,53 @@
+'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

@@ -0,0 +1,120 @@
+'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,34 +1,10 @@
 export interface Product {
   id: string;
   name: string;
-  price: number;
+  price: string;
-  description: string;
+  description?: string;
 }
 
-export const getProduct = async (id: string) => {
+export async function fetchProductList(): Promise<Product[]> {
-  try {
+  return [];
-    const response = await fetch(`/api/products/${id}`);
+}
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch {
-    console.error('Failed to fetch product');
-    return null;
-  }
-};
-
-export const getProducts = async () => {
-  try {
-    const response = await fetch('/api/products');
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch {
-    console.error('Failed to fetch products');
-    return [];
-  }
-};

src/lib/storage/workoutStorage.ts

@@ -0,0 +1,185 @@
+// 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/utils/auth.ts

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