Update src/app/recipes/page.tsx

Merge version_5 into main

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

@@ -0,0 +1,61 @@
+import { NextRequest, NextResponse } from "next/server";
+import bcrypt from "bcryptjs";
+import jwt from "jsonwebtoken";
+
+const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
+
+// Mock database - in production, use a real database
+const users: Array<{ id: string; name: string; email: string; passwordHash: string }> = [];
+
+export async function POST(request: NextRequest) {
+  try {
+    const { email, password } = await request.json();
+
+    // Validation
+    if (!email || !password) {
+      return NextResponse.json(
+        { message: "Email e senha são obrigatórios" },
+        { status: 400 }
+      );
+    }
+
+    // Find user
+    const user = users.find((u) => u.email === email);
+    if (!user) {
+      return NextResponse.json(
+        { message: "Email ou senha incorretos" },
+        { status: 401 }
+      );
+    }
+
+    // Verify password
+    const isPasswordValid = await bcrypt.compare(password, user.passwordHash);
+    if (!isPasswordValid) {
+      return NextResponse.json(
+        { message: "Email ou senha incorretos" },
+        { status: 401 }
+      );
+    }
+
+    // Create JWT token
+    const token = jwt.sign(
+      { id: user.id, email: user.email, name: user.name },
+      JWT_SECRET,
+      { expiresIn: "7d" }
+    );
+
+    return NextResponse.json(
+      {
+        token,
+        user: { id: user.id, name: user.name, email: user.email },
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Login error:", error);
+    return NextResponse.json(
+      { message: "Erro ao fazer login" },
+      { status: 500 }
+    );
+  }
+}

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

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

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

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

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

@@ -0,0 +1,36 @@
+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/api/auth/verify/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from "next/server";
+import jwt from "jsonwebtoken";
+
+const JWT_SECRET = process.env.JWT_SECRET || "your-secret-key-change-in-production";
+
+export async function GET(request: NextRequest) {
+  try {
+    const authHeader = request.headers.get("authorization");
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+      return NextResponse.json(
+        { message: "Token não fornecido" },
+        { status: 401 }
+      );
+    }
+
+    const token = authHeader.substring(7);
+    const decoded = jwt.verify(token, JWT_SECRET) as any;
+
+    return NextResponse.json(
+      { user: { id: decoded.id, email: decoded.email, name: decoded.name } },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error("Verify error:", error);
+    return NextResponse.json(
+      { message: "Token inválido ou expirado" },
+      { status: 401 }
+    );
+  }
+}

src/app/auth/login/page.tsx

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

src/app/auth/page.tsx

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

src/app/auth/register/page.tsx

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

src/app/dashboard/page.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { LogOut, User, Mail, Zap } from 'lucide-react';
+
+interface UserData {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const [user, setUser] = useState<UserData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      const token = localStorage.getItem("authToken");
+      const userData = localStorage.getItem("user");
+
+      if (!token || !userData) {
+        router.push("/auth/login");
+        return;
+      }
+
+      try {
+        const response = await fetch("/api/auth/verify", {
+          headers: { Authorization: `Bearer ${token}` },
+        });
+
+        if (!response.ok) {
+          localStorage.removeItem("authToken");
+          localStorage.removeItem("user");
+          router.push("/auth/login");
+          return;
+        }
+
+        setUser(JSON.parse(userData));
+      } catch (err) {
+        setError("Erro ao verificar sessão");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    checkAuth();
+  }, [router]);
+
+  const handleLogout = () => {
+    localStorage.removeItem("authToken");
+    localStorage.removeItem("user");
+    router.push("/");
+  };
+
+  if (loading) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumSizeLargeTitles"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+      >
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-center">
+            <div className="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-cta"></div>
+            <p className="mt-4 text-foreground/60">Carregando...</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  if (error) {
+    return (
+      <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumSizeLargeTitles"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="extrabold"
+      >
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-center">
+            <p className="text-red-500">{error}</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Sair", href: "/" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div className="min-h-screen px-4 py-20">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold mb-8">Dashboard</h1>
+
+          {user && (
+            <div className="grid gap-6">
+              <div className="bg-card rounded-2xl p-8 shadow-lg border border-foreground/10">
+                <h2 className="text-2xl font-bold mb-6">Bem-vindo, {user.name}!</h2>
+                
+                <div className="grid md:grid-cols-2 gap-8">
+                  <div className="space-y-4">
+                    <div className="flex items-center space-x-3">
+                      <User className="w-6 h-6 text-primary-cta" />
+                      <div>
+                        <p className="text-sm text-foreground/60">Nome</p>
+                        <p className="font-semibold">{user.name}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-3">
+                      <Mail className="w-6 h-6 text-primary-cta" />
+                      <div>
+                        <p className="text-sm text-foreground/60">Email</p>
+                        <p className="font-semibold">{user.email}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="bg-background rounded-lg p-4">
+                      <p className="text-sm text-foreground/60 mb-2">Status da Sessão</p>
+                      <div className="flex items-center space-x-2">
+                        <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
+                        <p className="font-semibold text-green-500">Conectado</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="grid md:grid-cols-3 gap-6">
+                <div className="bg-gradient-to-br from-primary-cta/20 to-accent/20 rounded-2xl p-6 border border-primary-cta/20">
+                  <Zap className="w-8 h-8 text-primary-cta mb-2" />
+                  <h3 className="text-lg font-semibold mb-1">Treinos</h3>
+                  <p className="text-3xl font-bold text-primary-cta">0</p>
+                  <p className="text-sm text-foreground/60 mt-2">Treinos concluídos</p>
+                </div>
+
+                <div className="bg-gradient-to-br from-accent/20 to-secondary-cta/20 rounded-2xl p-6 border border-accent/20">
+                  <Zap className="w-8 h-8 text-accent mb-2" />
+                  <h3 className="text-lg font-semibold mb-1">Nutrição</h3>
+                  <p className="text-3xl font-bold text-accent">0</p>
+                  <p className="text-sm text-foreground/60 mt-2">Refeições rastreadas</p>
+                </div>
+
+                <div className="bg-gradient-to-br from-secondary-cta/20 to-primary-cta/20 rounded-2xl p-6 border border-secondary-cta/20">
+                  <Zap className="w-8 h-8 text-secondary-cta mb-2" />
+                  <h3 className="text-lg font-semibold mb-1">Cardio</h3>
+                  <p className="text-3xl font-bold text-secondary-cta">0 km</p>
+                  <p className="text-sm text-foreground/60 mt-2">Distância total</p>
+                </div>
+              </div>
+
+              <button
+                onClick={handleLogout}
+                className="w-full bg-red-500 hover:bg-red-600 text-white py-3 rounded-lg font-semibold transition flex items-center justify-center space-x-2"
+              >
+                <LogOut className="w-5 h-5" />
+                <span>Sair da Conta</span>
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          columns={[
+            {
+              title: "Produto",              items: [
+                { label: "Dashboard", href: "/dashboard" },
+                { label: "Treino", href: "training" },
+                { label: "Nutrição", href: "nutrition" },
+                { label: "Cardio Hub", href: "cardio" }
+              ]
+            },
+            {
+              title: "Comunidade",              items: [
+                { label: "Comunidade", href: "community" },
+                { label: "Perfil", href: "profile" },
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
+              ]
+            },
+            {
+              title: "Empresa",              items: [
+                { label: "Sobre", href: "about" },
+                { label: "Contato", href: "contact" },
+                { label: "Privacidade", href: "privacy" },
+                { label: "Termos", href: "terms" }
+              ]
+            }
+          ]}
+          logoText="FitFlow Pro"
+          copyrightText="© 2025 FitFlow Pro. Todos os direitos reservados."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Mail, Lock } from 'lucide-react';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      // Validate inputs
+      if (!email || !password) {
+        setError("Por favor, preencha todos os campos.");
+        setLoading(false);
+        return;
+      }
+
+      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+        setError("Por favor, insira um email válido.");
+        setLoading(false);
+        return;
+      }
+
+      if (password.length < 6) {
+        setError("A senha deve ter pelo menos 6 caracteres.");
+        setLoading(false);
+        return;
+      }
+
+      // Call login API
+      const response = await fetch("/api/auth/login", {
+        method: "POST",        headers: {
+          "Content-Type": "application/json"},
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        setError(data.message || "Erro ao fazer login. Tente novamente.");
+        setLoading(false);
+        return;
+      }
+
+      // Store user session
+      localStorage.setItem("userSession", JSON.stringify({
+        token: data.token,
+        user: data.user,
+        expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+      }));
+
+      // Redirect to dashboard
+      window.location.href = "/dashboard";
+    } catch (err) {
+      setError("Erro de conexão. Tente novamente mais tarde.");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Dashboard", id: "/dashboard" },
+            { name: "Treino", id: "training" },
+            { name: "Nutrição", id: "nutrition" },
+            { name: "Comunidade", id: "community" },
+            { name: "Perfil", id: "profile" }
+          ]}
+          button={{ text: "Começar Agora", href: "contact" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div id="login" data-section="login" className="min-h-screen flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-md">
+          <div className="rounded-2xl border border-primary-cta/20 bg-card p-8 shadow-lg">
+            <h1 className="text-3xl font-bold text-foreground mb-2">Bem-vindo de Volta</h1>
+            <p className="text-foreground/60 mb-8">Faça login em sua conta FitFlow Pro</p>
+
+            {error && (
+              <div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-600 text-sm">
+                {error}
+              </div>
+            )}
+
+            <form onSubmit={handleLogin} className="space-y-5">
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Email
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/40" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="seu.email@exemplo.com"
+                    className="w-full pl-10 pr-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta/50 text-foreground placeholder-foreground/40 transition"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Senha
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/40" />
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••"
+                    className="w-full pl-10 pr-4 py-2 rounded-lg border border-foreground/10 bg-background focus:outline-none focus:border-primary-cta/50 text-foreground placeholder-foreground/40 transition"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 rounded-lg bg-primary-cta text-white font-medium hover:bg-primary-cta/90 transition disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? "Entrando..." : "Entrar"}
+              </button>
+            </form>
+
+            <div className="mt-6 text-center">
+              <p className="text-foreground/60 text-sm">
+                Não tem uma conta?{" "}
+                <a href="/signup" className="text-primary-cta hover:underline font-medium">
+                  Cadastre-se aqui
+                </a>
+              </p>
+            </div>
+
+            <div className="mt-6 text-center">
+              <a href="/" className="text-primary-cta hover:underline font-medium text-sm">
+                Voltar para Home
+              </a>
+            </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/onboarding/page.tsx

@@ -0,0 +1,332 @@
+"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 { ChevronRight, User, Users } from 'lucide-react';
+
+interface UserProfile {
+  name: string;
+  gender: string;
+  height: string;
+  weight: string;
+  age: string;
+}
+
+type OnboardingStep = 'basic' | 'biometric' | 'complete';
+
+export default function OnboardingPage() {
+  const [step, setStep] = useState<OnboardingStep>('basic');
+  const [profile, setProfile] = useState<UserProfile>({
+    name: '',
+    gender: '',
+    height: '',
+    weight: '',
+    age: ''
+  });
+
+  const handleBasicChange = (field: keyof Pick<UserProfile, 'name' | 'gender'>, value: string) => {
+    setProfile(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleBiometricChange = (field: keyof Pick<UserProfile, 'height' | 'weight' | 'age'>, value: string) => {
+    setProfile(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleBasicSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (profile.name && profile.gender) {
+      setStep('biometric');
+    }
+  };
+
+  const handleBiometricSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (profile.height && profile.weight && profile.age) {
+      saveProfile();
+      setStep('complete');
+    }
+  };
+
+  const saveProfile = () => {
+    localStorage.setItem('userProfile', JSON.stringify(profile));
+    console.log('Profile saved:', profile);
+  };
+
+  const handleReset = () => {
+    setProfile({ name: '', gender: '', height: '', weight: '', age: '' });
+    setStep('basic');
+  };
+
+  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: "onboarding" }
+          ]}
+          button={{ text: "Começar Agora", href: "contact" }}
+          brandName="FitFlow Pro"
+        />
+      </div>
+
+      <div id="onboarding-flow" data-section="onboarding-flow" className="min-h-screen flex items-center justify-center py-20">
+        <div className="w-full max-w-2xl px-6">
+          {/* Progress Indicator */}
+          <div className="mb-12">
+            <div className="flex items-center justify-between mb-4">
+              <div className={`flex items-center gap-2 ${
+                step === 'basic' || step === 'biometric' || step === 'complete'
+                  ? 'text-primary-cta'
+                  : 'text-gray-400'
+              }`}>
+                <div className="w-8 h-8 rounded-full bg-primary-cta flex items-center justify-center text-white text-sm font-bold">1</div>
+                <span className="font-semibold">Dados Pessoais</span>
+              </div>
+              <div className="flex-1 h-1 mx-4 bg-gray-300"></div>
+              <div className={`flex items-center gap-2 ${
+                step === 'biometric' || step === 'complete'
+                  ? 'text-primary-cta'
+                  : 'text-gray-400'
+              }`}>
+                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
+                  step === 'biometric' || step === 'complete'
+                    ? 'bg-primary-cta text-white'
+                    : 'bg-gray-300 text-gray-600'
+                }`}>2</div>
+                <span className="font-semibold">Biometria</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Step 1: Basic Information */}
+          {step === 'basic' && (
+            <div className="bg-card rounded-2xl p-8 shadow-lg">
+              <div className="mb-8">
+                <h1 className="text-4xl font-extrabold mb-2">Vamos Começar!</h1>
+                <p className="text-gray-600">Primeiro, precisamos conhecer você melhor.</p>
+              </div>
+
+              <form onSubmit={handleBasicSubmit} className="space-y-6">
+                {/* Name Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Nome Completo</label>
+                  <input
+                    type="text"
+                    value={profile.name}
+                    onChange={(e) => handleBasicChange('name', e.target.value)}
+                    placeholder="Digite seu nome"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
+                </div>
+
+                {/* Gender Selection */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Gênero</label>
+                  <div className="grid grid-cols-2 gap-4">
+                    {['Masculino', 'Feminino'].map((gender) => (
+                      <button
+                        key={gender}
+                        type="button"
+                        onClick={() => handleBasicChange('gender', gender)}
+                        className={`py-3 px-4 rounded-lg font-semibold transition-all ${
+                          profile.gender === gender
+                            ? 'bg-primary-cta text-white'
+                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        {gender}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Submit Button */}
+                <button
+                  type="submit"
+                  disabled={!profile.name || !profile.gender}
+                  className="w-full bg-primary-cta text-white py-3 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
+                >
+                  Próximo <ChevronRight size={18} />
+                </button>
+              </form>
+            </div>
+          )}
+
+          {/* Step 2: Biometric Information */}
+          {step === 'biometric' && (
+            <div className="bg-card rounded-2xl p-8 shadow-lg">
+              <div className="mb-8">
+                <h1 className="text-4xl font-extrabold mb-2">Dados Biométricos</h1>
+                <p className="text-gray-600">Agora, alguns dados de biometria para personalizar seu treino.</p>
+              </div>
+
+              <form onSubmit={handleBiometricSubmit} className="space-y-6">
+                {/* Height Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Altura (cm)</label>
+                  <input
+                    type="number"
+                    value={profile.height}
+                    onChange={(e) => handleBiometricChange('height', e.target.value)}
+                    placeholder="Ex: 175"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
+                </div>
+
+                {/* Weight Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Peso (kg)</label>
+                  <input
+                    type="number"
+                    value={profile.weight}
+                    onChange={(e) => handleBiometricChange('weight', e.target.value)}
+                    placeholder="Ex: 75"
+                    step="0.1"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
+                </div>
+
+                {/* Age Input */}
+                <div>
+                  <label className="block text-sm font-semibold mb-2">Idade</label>
+                  <input
+                    type="number"
+                    value={profile.age}
+                    onChange={(e) => handleBiometricChange('age', e.target.value)}
+                    placeholder="Ex: 28"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-primary-cta focus:outline-none transition"
+                    required
+                  />
+                </div>
+
+                {/* Buttons */}
+                <div className="grid grid-cols-2 gap-4">
+                  <button
+                    type="button"
+                    onClick={() => setStep('basic')}
+                    className="py-3 px-4 rounded-lg font-semibold border-2 border-gray-300 hover:bg-gray-100 transition"
+                  >
+                    Voltar
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={!profile.height || !profile.weight || !profile.age}
+                    className="bg-primary-cta text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
+                  >
+                    Concluir <ChevronRight size={18} />
+                  </button>
+                </div>
+              </form>
+            </div>
+          )}
+
+          {/* Step 3: Completion */}
+          {step === 'complete' && (
+            <div className="bg-card rounded-2xl p-8 shadow-lg text-center">
+              <div className="mb-8">
+                <div className="w-16 h-16 bg-primary-cta rounded-full flex items-center justify-center mx-auto mb-6">
+                  <User size={32} className="text-white" />
+                </div>
+                <h1 className="text-4xl font-extrabold mb-2">Perfil Criado com Sucesso!</h1>
+                <p className="text-gray-600 mb-6">Bem-vindo ao FitFlow Pro, {profile.name}!</p>
+
+                {/* Profile Summary */}
+                <div className="bg-gray-50 rounded-lg p-6 mb-8 text-left space-y-3">
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Nome:</span>
+                    <span className="text-gray-600">{profile.name}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Gênero:</span>
+                    <span className="text-gray-600">{profile.gender}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Altura:</span>
+                    <span className="text-gray-600">{profile.height} cm</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Peso:</span>
+                    <span className="text-gray-600">{profile.weight} kg</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="font-semibold text-gray-700">Idade:</span>
+                    <span className="text-gray-600">{profile.age} anos</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={handleReset}
+                  className="py-3 px-4 rounded-lg font-semibold border-2 border-gray-300 hover:bg-gray-100 transition"
+                >
+                  Editar Dados
+                </button>
+                <a
+                  href="/"
+                  className="bg-primary-cta text-white py-3 px-4 rounded-lg font-semibold hover:opacity-90 transition flex items-center justify-center gap-2"
+                >
+                  Ir para Dashboard <ChevronRight size={18} />
+                </a>
+              </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: "onboarding" },
+                { 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,10 +10,9 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import TeamCardOne from '@/components/sections/team/TeamCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBase from '@/components/sections/footer/FooterBase';
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+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, ChefHat } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -34,8 +33,7 @@ export default function LandingPage() {
           navItems={[
             { name: "Dashboard", id: "dashboard" },
             { name: "Treino", id: "training" },
-            { name: "Receitas", id: "recipes" },
+            { name: "Receitas", id: "/recipes" },
-            { name: "Nutrição", id: "nutrition" },
             { name: "Comunidade", id: "community" },
             { name: "Perfil", id: "profile" }
           ]}
@@ -85,10 +83,10 @@ export default function LandingPage() {
               title: "Perfil Biométrico",              description: "Coloque seus dados (gênero, altura, peso, idade) e veja o app adaptar todas as demonstrações, avatares e ilustrações anatomicamente.",              icon: Target,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  imageAlt: "Tela de biometria"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/premium-onboarding-screen-for-fitness-ap-1773256981180-774b293c.png",                  alt: "Tela de biometria"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  imageAlt: "Dashboard adaptado"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=2",                  alt: "Dashboard adaptado"
                 }
               ]
             },
@@ -96,10 +94,10 @@ export default function LandingPage() {
               title: "Metas Inteligentes",              description: "Escolha: Perder Peso ou Ganhar Massa. O sistema calcula TMB, projeta planilha de metas e mostra exatamente quando você atingirá seu objetivo.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png?_wi=1",                  imageAlt: "Plano de nutrição"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png",                  alt: "Plano de nutrição"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  imageAlt: "Métricas de progresso"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=1",                  alt: "Métricas de progresso"
                 }
               ]
             }
@@ -121,10 +119,10 @@ export default function LandingPage() {
               title: "Running Tracker Avançado",              description: "GPS ativado em tempo real. Mapeia sua rota, calcula queima de calorias baseado no peso, mostra ritmo ao vivo em painel estilo smartwatch.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png?_wi=1",                  imageAlt: "Rastreamento GPS"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png",                  alt: "Rastreamento GPS"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  imageAlt: "Métricas de cardio"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=2",                  alt: "Métricas de cardio"
                 }
               ]
             },
@@ -132,10 +130,10 @@ export default function LandingPage() {
               title: "Pedômetro & Caminhada",              description: "Contador de passos embutido com rastreamento de distância e calorias. Vença suas metas de 10.000 passos com visual de anéis de progresso motivacional.",              icon: Activity,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  imageAlt: "Dashboard de passos"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png?_wi=3",                  alt: "Dashboard de passos"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  imageAlt: "Progresso de atividade"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png?_wi=3",                  alt: "Progresso de atividade"
                 }
               ]
             }
@@ -157,10 +155,10 @@ export default function LandingPage() {
               title: "Dualidade de Ambientes",              description: "Treinos em Casa (peso corporal, calistenia) ou Ginásio (máquinas, pesos livres). Sistema diferencia automaticamente baseado em sua escolha e disponibilidade de equipamento.",              icon: Dumbbell,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  imageAlt: "Seleção de exercícios"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=1",                  alt: "Seleção de exercícios"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  imageAlt: "Execução de treino"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=1",                  alt: "Execução de treino"
                 }
               ]
             },
@@ -168,10 +166,10 @@ export default function LandingPage() {
               title: "Isolamento por Grupo Muscular",              description: "Modelo anatômico 3D/2D interativo. Clique em um músculo (peitoral, glúteo, etc.) e veja lista filtrada de exercícios com foco nesse músculo específico.",              icon: Zap,
               mediaItems: [
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  imageAlt: "Anatomia interativa"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png?_wi=2",                  alt: "Anatomia interativa"
                 },
                 {
-                  imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  imageAlt: "Exercícios filtrados"
+                  type: "image",                  src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/workout-execution-interface-showing-set--1773256980664-da11c464.png?_wi=2",                  alt: "Exercícios filtrados"
                 }
               ]
             }
@@ -206,39 +204,6 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="recipes" data-section="recipes">
-        <BlogCardOne
-          title="Receitas por Objetivo"
-          description="Explore receitas deliciosas e saudáveis adaptadas ao seu objetivo: perder peso com déficit calórico ou ganhar massa com superávit estratégico."
-          tag="Culinária Fitness"
-          tagIcon={ChefHat}
-          blogs={[
-            {
-              id: "1",              category: "Perda de Peso",              title: "Frango Grelhado com Brócolis e Batata Doce",              excerpt: "Receita de 380 kcal com alto teor proteico. Preparo em 25 minutos com macros otimizados para déficit calórico.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/nutrition-dashboard-showing-meal-plans-d-1773256981349-9348b6d9.png?_wi=2",              imageAlt: "Frango grelhado",              authorName: "Chef Nutrição",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png",              date: "15 Jan 2025"
-            },
-            {
-              id: "2",              category: "Ganho de Massa",              title: "Pasta de Frango com Abacate e Ovos",              excerpt: "Refeição de 850 kcal ideal para pós-treino. Alto em proteína (45g) e gorduras saudáveis para crescimento muscular.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/performance-metrics-showcase-displaying--1773256982260-f9a5cff0.png",              imageAlt: "Pasta de frango",              authorName: "Chef Nutrição",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/fit-female-athlete-portrait-determined-e-1773256980310-c05dce2f.png",              date: "14 Jan 2025"
-            },
-            {
-              id: "3",              category: "Perda de Peso",              title: "Sopa de Legumes com Peito de Frango",              excerpt: "Receita saciante com apenas 220 kcal. Fibras e proteína para manter a saciedade e acelerar a perda de peso.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/ultra-modern-fitness-app-dashboard-with--1773256981295-f56c580b.png",              imageAlt: "Sopa de legumes",              authorName: "Chef Nutrição",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/athletic-male-trainer-portrait-confident-1773256979906-c5e05a88.png",              date: "13 Jan 2025"
-            },
-            {
-              id: "4",              category: "Ganho de Massa",              title: "Smoothie Pré-Treino: Aveia com Banana e Mantega de Amendoim",              excerpt: "Preparação energética com 620 kcal. Carbos de rápida absorção e proteína para potencializar seus treinos.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/gps-running-tracker-interface-with-real--1773256980694-2abe167e.png?_wi=2",              imageAlt: "Smoothie",              authorName: "Chef Nutrição",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-fitness-coach-portrait-profession-1773256979710-97e8b5fe.png",              date: "12 Jan 2025"
-            },
-            {
-              id: "5",              category: "Perda de Peso",              title: "Salada de Atum com Azeite Extra Virgem",              excerpt: "Opção leve e rápida com 280 kcal. Ômega-3 e proteína para acelerar metabolismo e queimar calorias.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/interactive-anatomical-body-model-showin-1773256980448-3cccd7b3.png",              imageAlt: "Salada de atum",              authorName: "Chef Nutrição",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/young-athlete-male-portrait-energetic-ex-1773256982698-63e4e494.png",              date: "11 Jan 2025"
-            },
-            {
-              id: "6",              category: "Ganho de Massa",              title: "Arroz Integral com Carne Vermelha e Batata Inglesa",              excerpt: "Refeição completa com 950 kcal ideal para dias de treino intenso. Ferro, carbos complexos e proteína muscular.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-athlete-portrait-fit-build-profes-1773256980134-0faaa8fa.png?_wi=1",              imageAlt: "Arroz com carne",              authorName: "Chef Nutrição",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/professional-athlete-portrait-male-fitne-1773256979726-5009f852.png",              date: "10 Jan 2025"
-            }
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          carouselMode="buttons"
-        />
-      </div>
-
       <div id="nutrition" data-section="nutrition">
         <PricingCardOne
           title="Nutrição Inteligente & Receituário"
@@ -335,7 +300,7 @@ export default function LandingPage() {
               id: "5",              name: "Lucas F.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/young-athlete-male-portrait-energetic-ex-1773256982698-63e4e494.png",              imageAlt: "Lucas F."
             },
             {
-              id: "6",              name: "Marina S.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-athlete-portrait-fit-build-profes-1773256980134-0faaa8fa.png?_wi=2",              imageAlt: "Marina S."
+              id: "6",              name: "Marina S.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoRNSPr0mCBj85JKsHl7qxTHsl/female-athlete-portrait-fit-build-profes-1773256980134-0faaa8fa.png",              imageAlt: "Marina S."
             }
           ]}
           cardTitle="Mais de 150 mil atletas já transformaram seu corpo com FitFlow Pro"
@@ -366,53 +331,55 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
+        <ContactSplit
-          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."
+          tag="Transforme Sua Vida"
-          animationType="entrance-slide"
+          tagIcon={Mail}
-          buttons={[
+          title="Pronto para Começar?"
-            { text: "Começar Teste Grátis", href: "contact" },
+          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: "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">
-        <FooterLogoEmphasis
+        <FooterBase
           columns={[
             {
-              items: [
+              title: "Produto",              items: [
-                { label: "Dashboard", href: "#dashboard" },
+                { label: "Dashboard", href: "dashboard" },
-                { label: "Treino", href: "#training" },
+                { label: "Treino", href: "training" },
-                { label: "Receitas", href: "#recipes" }
+                { label: "Receitas", href: "/recipes" },
+                { label: "Cardio Hub", href: "cardio" }
               ]
             },
             {
-              items: [
+              title: "Comunidade",              items: [
-                { label: "Cardio Hub", href: "#cardio" },
+                { label: "Comunidade", href: "community" },
-                { label: "Nutrição", href: "#nutrition" },
+                { label: "Perfil", href: "profile" },
-                { label: "Perfil", href: "#profile" }
+                { label: "Rankings", href: "rankings" },
+                { label: "Blog", href: "blog" }
               ]
             },
             {
-              items: [
+              title: "Empresa",              items: [
-                { label: "Blog", href: "#blog" },
+                { label: "Sobre", href: "about" },
-                { label: "Ajuda", href: "#help" },
+                { label: "Contato", href: "contact" },
-                { label: "Suporte", href: "#support" }
+                { label: "Privacidade", href: "privacy" },
-              ]
+                { 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/recipes/page.tsx

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

src/components/ProtectedRoute.tsx

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

src/components/cardStack/CardList.tsx

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

src/components/cardStack/CardStack.tsx

@@ -1,229 +1,24 @@
-"use client";
+import { ReactNode } from 'react';
+import { CardStackProvider, CardStackContextType } from './CardStackContext';
 
-import { memo, Children } from "react";
+export interface CardStackProps {
-import { CardStackProps } from "./types";
+  children: ReactNode;
-import GridLayout from "./layouts/grid/GridLayout";
+  className?: string;
-import AutoCarousel from "./layouts/carousels/AutoCarousel";
+  ariaLabel?: string;
-import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
+}
-import TimelineBase from "./layouts/timelines/TimelineBase";
-import { gridConfigs } from "./layouts/grid/gridConfigs";
 
-const CardStack = ({
+export default function CardStack({ children, className = '', ariaLabel = 'Card stack' }: CardStackProps) {
-    children,
+  const contextValue: CardStackContextType = {
-    mode = "buttons",
+    isVisible: true,
-    gridVariant = "uniform-all-items-equal",
+    getAnimationProps: () => ({ isVisible: true }),
-    uniformGridCustomHeightClasses,
+    itemRefs: {}
-    gridRowsClassName,
+  };
-    itemHeightClassesOverride,
-    animationType,
-    supports3DAnimation = false,
-    title,
-    titleSegments,
-    description,
-    tag,
-    tagIcon,
-    tagAnimation,
-    buttons,
-    buttonAnimation,
-    textboxLayout = "default",
-    useInvertedBackground,
-    carouselThreshold = 5,
-    bottomContent,
-    className = "",
-    containerClassName = "",
-    gridClassName = "",
-    carouselClassName = "",
-    carouselItemClassName = "",
-    controlsClassName = "",
-    textBoxClassName = "",
-    titleClassName = "",
-    titleImageWrapperClassName = "",
-    titleImageClassName = "",
-    descriptionClassName = "",
-    tagClassName = "",
-    buttonContainerClassName = "",
-    buttonClassName = "",
-    buttonTextClassName = "",
-    ariaLabel = "Card stack",
-}: CardStackProps) => {
-    const childrenArray = Children.toArray(children);
-    const itemCount = childrenArray.length;
 
-    // Check if the current grid config has gridRows defined
+  return (
-    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
+    <CardStackProvider value={contextValue}>
-    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
+      <div className={className} aria-label={ariaLabel}>
-
+        {children}
-    // If grid has fixed row heights and we have uniformGridCustomHeightClasses,
+      </div>
-    // we need to use min-h-0 on md+ to prevent conflicts
+    </CardStackProvider>
-    let adjustedHeightClasses = uniformGridCustomHeightClasses;
+  );
-    if (hasFixedGridRows && uniformGridCustomHeightClasses) {
+}
-        // Extract the mobile min-height and add md:min-h-0
-        const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0];
-        adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`;
-    }
-
-    // Timeline layout for zigzag pattern (works best with 3-6 items)
-    if (gridVariant === "timeline" && itemCount >= 3 && itemCount <= 6) {
-        // Convert depth-3d to scale-rotate for timeline (doesn't support 3D)
-        const timelineAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-
-        return (
-            <TimelineBase
-                variant={gridVariant}
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
-                animationType={timelineAnimationType}
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                textboxLayout={textboxLayout}
-                useInvertedBackground={useInvertedBackground}
-                className={className}
-                containerClassName={containerClassName}
-                textBoxClassName={textBoxClassName}
-                titleClassName={titleClassName}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                descriptionClassName={descriptionClassName}
-                tagClassName={tagClassName}
-                buttonContainerClassName={buttonContainerClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                ariaLabel={ariaLabel}
-            >
-                {childrenArray}
-            </TimelineBase>
-        );
-    }
-
-    // Use grid for items below threshold, carousel for items at or above threshold
-    // Timeline with 7+ items will also use carousel
-    const useCarousel = itemCount >= carouselThreshold || (gridVariant === "timeline" && itemCount > 6);
-
-    // Grid layout for 1-4 items
-    if (!useCarousel) {
-        return (
-            <GridLayout
-                itemCount={itemCount}
-                gridVariant={gridVariant}
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
-                gridRowsClassName={gridRowsClassName}
-                itemHeightClassesOverride={itemHeightClassesOverride}
-                animationType={animationType}
-                supports3DAnimation={supports3DAnimation}
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                textboxLayout={textboxLayout}
-                useInvertedBackground={useInvertedBackground}
-                bottomContent={bottomContent}
-                className={className}
-                containerClassName={containerClassName}
-                gridClassName={gridClassName}
-                textBoxClassName={textBoxClassName}
-                titleClassName={titleClassName}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                descriptionClassName={descriptionClassName}
-                tagClassName={tagClassName}
-                buttonContainerClassName={buttonContainerClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                ariaLabel={ariaLabel}
-            >
-                {childrenArray}
-            </GridLayout>
-        );
-    }
-
-    // Auto-scroll carousel for 5+ items
-    if (mode === "auto") {
-        // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
-        const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-
-        return (
-            <AutoCarousel
-                uniformGridCustomHeightClasses={adjustedHeightClasses}
-                animationType={carouselAnimationType}
-                title={title}
-                titleSegments={titleSegments}
-                description={description}
-                tag={tag}
-                tagIcon={tagIcon}
-                tagAnimation={tagAnimation}
-                buttons={buttons}
-                buttonAnimation={buttonAnimation}
-                textboxLayout={textboxLayout}
-                useInvertedBackground={useInvertedBackground}
-                bottomContent={bottomContent}
-                className={className}
-                containerClassName={containerClassName}
-                carouselClassName={carouselClassName}
-                textBoxClassName={textBoxClassName}
-                titleClassName={titleClassName}
-                titleImageWrapperClassName={titleImageWrapperClassName}
-                titleImageClassName={titleImageClassName}
-                descriptionClassName={descriptionClassName}
-                tagClassName={tagClassName}
-                buttonContainerClassName={buttonContainerClassName}
-                buttonClassName={buttonClassName}
-                buttonTextClassName={buttonTextClassName}
-                ariaLabel={ariaLabel}
-            >
-                {childrenArray}
-            </AutoCarousel>
-        );
-    }
-
-    // Button-controlled carousel for 5+ items
-    // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
-    const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-
-    return (
-        <ButtonCarousel
-            uniformGridCustomHeightClasses={adjustedHeightClasses}
-            animationType={carouselAnimationType}
-            title={title}
-            titleSegments={titleSegments}
-            description={description}
-            tag={tag}
-            tagIcon={tagIcon}
-            tagAnimation={tagAnimation}
-            buttons={buttons}
-            buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
-            useInvertedBackground={useInvertedBackground}
-            bottomContent={bottomContent}
-            className={className}
-            containerClassName={containerClassName}
-            carouselClassName={carouselClassName}
-            carouselItemClassName={carouselItemClassName}
-            controlsClassName={controlsClassName}
-            textBoxClassName={textBoxClassName}
-            titleClassName={titleClassName}
-            titleImageWrapperClassName={titleImageWrapperClassName}
-            titleImageClassName={titleImageClassName}
-            descriptionClassName={descriptionClassName}
-            tagClassName={tagClassName}
-            buttonContainerClassName={buttonContainerClassName}
-            buttonClassName={buttonClassName}
-            buttonTextClassName={buttonTextClassName}
-            ariaLabel={ariaLabel}
-        >
-            {childrenArray}
-        </ButtonCarousel>
-    );
-};
-
-CardStack.displayName = "CardStack";
-
-export default memo(CardStack);

src/components/cardStack/CardStackContext.tsx

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

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

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

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

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

src/components/sections/blog/BlogCardOne.tsx

@@ -1,244 +1,174 @@
 "use client";
 
-import { memo } from "react";
+import React, { useState, useMemo } from "react";
-import Image from "next/image";
+import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
+import TextBox from "@/components/Textbox";
-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;
+export interface BlogCardOneProps {
-
+  blogs: Array<{
-interface BlogCardOneProps {
+    id: string;
-    blogs: BlogCard[];
+    category: string;
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
     title: string;
-    titleSegments?: TitleSegment[];
+    excerpt: string;
-    description: string;
+    imageSrc: string;
-    tag?: string;
+    imageAlt?: string;
-    tagIcon?: LucideIcon;
+    authorName: string;
-    tagAnimation?: ButtonAnimationType;
+    authorAvatar: string;
-    buttons?: ButtonConfig[];
+    date: string;
-    buttonAnimation?: ButtonAnimationType;
+    onBlogClick?: () => void;
-    textboxLayout: TextboxLayout;
+  }>;
-    useInvertedBackground: InvertedBackground;
+  carouselMode?: "auto" | "buttons";
-    ariaLabel?: string;
+  uniformGridCustomHeightClasses?: string;
-    className?: string;
+  animationType?: string;
-    containerClassName?: string;
+  title?: string;
-    cardClassName?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-    imageWrapperClassName?: string;
+  description?: string;
-    imageClassName?: string;
+  tag?: string;
-    categoryClassName?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    cardTitleClassName?: string;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    excerptClassName?: string;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    authorContainerClassName?: string;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-    authorAvatarClassName?: string;
+  useInvertedBackground?: boolean;
-    authorNameClassName?: string;
+  ariaLabel?: string;
-    dateClassName?: string;
+  className?: string;
-    textBoxTitleClassName?: string;
+  containerClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  cardClassName?: string;
-    textBoxTitleImageClassName?: string;
+  imageWrapperClassName?: string;
-    textBoxDescriptionClassName?: string;
+  imageClassName?: string;
-    gridClassName?: string;
+  categoryClassName?: string;
-    carouselClassName?: string;
+  cardTitleClassName?: string;
-    controlsClassName?: string;
+  excerptClassName?: string;
-    textBoxClassName?: string;
+  authorContainerClassName?: string;
-    textBoxTagClassName?: string;
+  authorAvatarClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  authorNameClassName?: string;
-    textBoxButtonClassName?: string;
+  dateClassName?: string;
-    textBoxButtonTextClassName?: 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 {
+const BlogCardOne: React.FC<BlogCardOneProps> = ({
-    blog: BlogCard;
+  blogs,
-    shouldUseLightText: boolean;
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-    cardClassName?: string;
+  titleSegments,
-    imageWrapperClassName?: string;
+  description,
-    imageClassName?: string;
+  tag,
-    categoryClassName?: string;
+  tagAnimation,
-    cardTitleClassName?: string;
+  buttons,
-    excerptClassName?: string;
+  buttonAnimation,
-    authorContainerClassName?: string;
+  textboxLayout = "default",  useInvertedBackground = false,
-    authorAvatarClassName?: string;
+  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 = "" }) => {
-    authorNameClassName?: string;
+  const [currentIndex, setCurrentIndex] = useState(0);
-    dateClassName?: string;
-}
 
-const BlogCardItem = memo(({
+  const blogCards = blogs.map((blog) => (
-    blog,
+    <div
-    shouldUseLightText,
+      key={blog.id}
-    cardClassName = "",
+      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
-    imageWrapperClassName = "",
+        cardClassName || ""
-    imageClassName = "",
+      }`}
-    categoryClassName = "",
+      onClick={blog.onBlogClick}
-    cardTitleClassName = "",
+    >
-    excerptClassName = "",
+      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
-    authorContainerClassName = "",
+        <img
-    authorAvatarClassName = "",
+          src={blog.imageSrc}
-    authorNameClassName = "",
+          alt={blog.imageAlt || blog.title}
-    dateClassName = "",
+          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
-}: BlogCardItemProps) => {
+            imageClassName || ""
-    return (
+          }`}
-        <article
+        />
-            className={cls("relative h-full card group flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
-            onClick={blog.onBlogClick}
+          <ArrowRight className="w-4 h-4 text-foreground" />
-            role="article"
+        </button>
-            aria-label={`${blog.title} by ${blog.authorName}`}
+      </div>
-        >
-            <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-1 p-6 flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
+        <span className={`text-xs font-semibold text-primary-cta uppercase ${
-                    <Badge text={blog.category} variant="primary" className={categoryClassName} />
+          categoryClassName || ""
+        }`}>
+          {blog.category}
+        </span>
 
-                    <h3 className={cls("text-2xl font-medium leading-[1.25] mt-1", shouldUseLightText ? "text-background" : "text-foreground", cardTitleClassName)}>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
-                        {blog.title}
+          cardTitleClassName || ""
-                    </h3>
+        }`}>
+          {blog.title}
+        </h3>
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
-                        {blog.excerpt}
+          excerptClassName || ""
-                    </p>
+        }`}>
-                </div>
+          {blog.excerpt}
+        </p>
 
-                <div className={cls("flex items-center gap-3", authorContainerClassName)}>
+        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
-                    <Image
+          authorContainerClassName || ""
-                        src={blog.authorAvatar}
+        }`}>
-                        alt={blog.authorName}
+          <img
-                        width={40}
+            src={blog.authorAvatar}
-                        height={40}
+            alt={blog.authorName}
-                        className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
+            className={`w-8 h-8 rounded-full object-cover ${
-                        unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
+              authorAvatarClassName || ""
-                    />
+            }`}
-                    <div className="flex flex-col">
+          />
-                        <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
+          <div className="flex-1 min-w-0">
-                            {blog.authorName}
+            <p className={`text-sm font-medium text-foreground truncate ${
-                        </p>
+              authorNameClassName || ""
-                        <p className={cls("text-xs", shouldUseLightText ? "text-background/75" : "text-foreground/75", dateClassName)}>
+            }`}>
-                            {blog.date}
+              {blog.authorName}
-                        </p>
+            </p>
-                    </div>
+            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
-                </div>
+              {blog.date}
-            </div>
+            </p>
-        </article>
+          </div>
-    );
+        </div>
-});
+      </div>
+    </div>
+  ));
 
-BlogCardItem.displayName = "BlogCardItem";
+  return (
-
+    <div
-const BlogCardOne = ({
+      className={`w-full py-20 ${
-    blogs = [],
+        useInvertedBackground ? "bg-background/50" : ""
-    carouselMode = "buttons",
+      } ${containerClassName}`}
-    uniformGridCustomHeightClasses,
+      aria-label={ariaLabel}
-    animationType,
+    >
-    title,
+      {title && (
-    titleSegments,
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
-    description,
+          <TextBox
-    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}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
+            textboxLayout={textboxLayout || "default"}
-            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) => (
+        </div>
-                <BlogCardItem
+      )}
-                    key={blog.id}
+
-                    blog={blog}
+      <div className="max-w-content-width mx-auto px-4">
-                    shouldUseLightText={shouldUseLightText}
+        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
-                    cardClassName={cardClassName}
+          {blogCards}
-                    imageWrapperClassName={imageWrapperClassName}
+        </div>
-                    imageClassName={imageClassName}
+      </div>
-                    categoryClassName={categoryClassName}
+    </div>
-                    cardTitleClassName={cardTitleClassName}
+  );
-                    excerptClassName={excerptClassName}
-                    authorContainerClassName={authorContainerClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorNameClassName={authorNameClassName}
-                    dateClassName={dateClassName}
-                />
-            ))}
-        </CardStack>
-    );
 };
 
-BlogCardOne.displayName = "BlogCardOne";
-
 export default BlogCardOne;

src/components/sections/blog/BlogCardThree.tsx

@@ -1,288 +1,174 @@
 "use client";
 
-import { memo } from "react";
+import React, { useState } from "react";
-import Image from "next/image";
+import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
+import TextBox from "@/components/Textbox";
-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;
+export interface BlogCardThreeProps {
-
+  blogs: Array<{
-interface BlogCardThreeProps {
+    id: string;
-    blogs: BlogCard[];
+    category: string;
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
     title: string;
-    titleSegments?: TitleSegment[];
+    excerpt: string;
-    description: string;
+    imageSrc: string;
-    tag?: string;
+    imageAlt?: string;
-    tagIcon?: LucideIcon;
+    authorName: string;
-    tagAnimation?: ButtonAnimationType;
+    authorAvatar: string;
-    buttons?: ButtonConfig[];
+    date: string;
-    buttonAnimation?: ButtonAnimationType;
+    onBlogClick?: () => void;
-    textboxLayout: TextboxLayout;
+  }>;
-    useInvertedBackground: InvertedBackground;
+  carouselMode?: "auto" | "buttons";
-    ariaLabel?: string;
+  uniformGridCustomHeightClasses?: string;
-    className?: string;
+  animationType?: string;
-    containerClassName?: string;
+  title?: string;
-    cardClassName?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-    cardContentClassName?: string;
+  description?: string;
-    categoryTagClassName?: string;
+  tag?: string;
-    cardTitleClassName?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    excerptClassName?: string;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    authorContainerClassName?: string;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    authorAvatarClassName?: string;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-    authorNameClassName?: string;
+  useInvertedBackground?: boolean;
-    dateClassName?: string;
+  ariaLabel?: string;
-    mediaWrapperClassName?: string;
+  className?: string;
-    mediaClassName?: string;
+  containerClassName?: string;
-    textBoxTitleClassName?: string;
+  cardClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  imageWrapperClassName?: string;
-    textBoxTitleImageClassName?: string;
+  imageClassName?: string;
-    textBoxDescriptionClassName?: string;
+  categoryClassName?: string;
-    gridClassName?: string;
+  cardTitleClassName?: string;
-    carouselClassName?: string;
+  excerptClassName?: string;
-    controlsClassName?: string;
+  authorContainerClassName?: string;
-    textBoxClassName?: string;
+  authorAvatarClassName?: string;
-    textBoxTagClassName?: string;
+  authorNameClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  dateClassName?: string;
-    textBoxButtonClassName?: string;
+  textBoxTitleClassName?: string;
-    textBoxButtonTextClassName?: 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 {
+const BlogCardThree: React.FC<BlogCardThreeProps> = ({
-    blog: BlogCard;
+  blogs,
-    useInvertedBackground: boolean;
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-    cardClassName?: string;
+  titleSegments,
-    cardContentClassName?: string;
+  description,
-    categoryTagClassName?: string;
+  tag,
-    cardTitleClassName?: string;
+  tagAnimation,
-    excerptClassName?: string;
+  buttons,
-    authorContainerClassName?: string;
+  buttonAnimation,
-    authorAvatarClassName?: string;
+  textboxLayout = "default",  useInvertedBackground = false,
-    authorNameClassName?: string;
+  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 = "" }) => {
-    dateClassName?: string;
+  const [currentIndex, setCurrentIndex] = useState(0);
-    mediaWrapperClassName?: string;
-    mediaClassName?: string;
-}
 
-const BlogCardItem = memo(({
+  const blogCards = blogs.map((blog) => (
-    blog,
+    <div
-    useInvertedBackground,
+      key={blog.id}
-    cardClassName = "",
+      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
-    cardContentClassName = "",
+        cardClassName || ""
-    categoryTagClassName = "",
+      }`}
-    cardTitleClassName = "",
+      onClick={blog.onBlogClick}
-    excerptClassName = "",
+    >
-    authorContainerClassName = "",
+      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
-    authorAvatarClassName = "",
+        <img
-    authorNameClassName = "",
+          src={blog.imageSrc}
-    dateClassName = "",
+          alt={blog.imageAlt || blog.title}
-    mediaWrapperClassName = "",
+          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
-    mediaClassName = "",
+            imageClassName || ""
-}: BlogCardItemProps) => {
+          }`}
-    const theme = useTheme();
+        />
-    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
+          <ArrowRight className="w-4 h-4 text-foreground" />
+        </button>
+      </div>
 
-    return (
+      <div className="flex-1 p-6 flex flex-col gap-3">
-        <article
+        <span className={`text-xs font-semibold text-primary-cta uppercase ${
-            className={cls(
+          categoryClassName || ""
-                "relative h-full card group flex flex-col justify-between gap-6 p-6 cursor-pointer rounded-theme-capped overflow-hidden",
+        }`}>
-                cardClassName
+          {blog.category}
-            )}
+        </span>
-            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(
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
-                    "text-3xl md:text-4xl font-medium leading-tight line-clamp-2",
+          cardTitleClassName || ""
-                    shouldUseLightText ? "text-background" : "text-foreground",
+        }`}>
-                    cardTitleClassName
+          {blog.title}
-                )}>
+        </h3>
-                    {blog.title}
-                </h3>
 
-                <p className={cls(
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
-                    "text-base leading-tight line-clamp-2",
+          excerptClassName || ""
-                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
+        }`}>
-                    excerptClassName
+          {blog.excerpt}
-                )}>
+        </p>
-                    {blog.excerpt}
-                </p>
 
-                {(blog.authorName || blog.date) && (
+        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
-                    <div className={cls(
+          authorContainerClassName || ""
-                        "flex",
+        }`}>
-                        blog.authorAvatar ? "items-center gap-3" : "flex-row justify-between items-center",
+          <img
-                        authorContainerClassName
+            src={blog.authorAvatar}
-                    )}>
+            alt={blog.authorName}
-                        {blog.authorAvatar && (
+            className={`w-8 h-8 rounded-full object-cover ${
-                            <Image
+              authorAvatarClassName || ""
-                                src={blog.authorAvatar}
+            }`}
-                                alt={blog.authorName || "Author"}
+          />
-                                width={40}
+          <div className="flex-1 min-w-0">
-                                height={40}
+            <p className={`text-sm font-medium text-foreground truncate ${
-                                className={cls("h-9 w-auto aspect-square rounded-theme object-cover", authorAvatarClassName)}
+              authorNameClassName || ""
-                                unoptimized={blog.authorAvatar.startsWith('http') || blog.authorAvatar.startsWith('//')}
+            }`}>
-                            />
+              {blog.authorName}
-                        )}
+            </p>
-                        {blog.authorAvatar ? (
+            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
-                            <div className="flex flex-col">
+              {blog.date}
-                                {blog.authorName && (
+            </p>
-                                    <p className={cls("text-sm font-medium", shouldUseLightText ? "text-background" : "text-foreground", authorNameClassName)}>
+          </div>
-                                        {blog.authorName}
+        </div>
-                                    </p>
+      </div>
-                                )}
+    </div>
-                                {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)}>
+  return (
-                <MediaContent
+    <div
-                    imageSrc={blog.imageSrc}
+      className={`w-full py-20 ${
-                    imageAlt={blog.imageAlt || blog.title}
+        useInvertedBackground ? "bg-background/50" : ""
-                    imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
+      } ${containerClassName}`}
-                />
+      aria-label={ariaLabel}
-                <OverlayArrowButton ariaLabel={`Read ${blog.title}`} />
+    >
-            </div>
+      {title && (
-        </article>
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
-    );
+          <TextBox
-});
-
-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}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
+            textboxLayout={textboxLayout || "default"}
-            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) => (
+        </div>
-                <BlogCardItem
+      )}
-                    key={blog.id}
+
-                    blog={blog}
+      <div className="max-w-content-width mx-auto px-4">
-                    useInvertedBackground={useInvertedBackground}
+        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
-                    cardClassName={cardClassName}
+          {blogCards}
-                    cardContentClassName={cardContentClassName}
+        </div>
-                    categoryTagClassName={categoryTagClassName}
+      </div>
-                    cardTitleClassName={cardTitleClassName}
+    </div>
-                    excerptClassName={excerptClassName}
+  );
-                    authorContainerClassName={authorContainerClassName}
-                    authorAvatarClassName={authorAvatarClassName}
-                    authorNameClassName={authorNameClassName}
-                    dateClassName={dateClassName}
-                    mediaWrapperClassName={mediaWrapperClassName}
-                    mediaClassName={mediaClassName}
-                />
-            ))}
-        </CardStack>
-    );
 };
 
-BlogCardThree.displayName = "BlogCardThree";
-
 export default BlogCardThree;

src/components/sections/blog/BlogCardTwo.tsx

@@ -1,241 +1,174 @@
 "use client";
 
-import { memo } from "react";
+import React, { useState } from "react";
-import Image from "next/image";
+import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react";
-import CardStack from "@/components/cardStack/CardStack";
+import TextBox from "@/components/Textbox";
-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 = Omit<BlogPost, 'category'> & {
+export interface BlogCardTwoProps {
-    category: string | string[];
+  blogs: Array<{
-};
+    id: string;
-
+    category: string;
-interface BlogCardTwoProps {
-    blogs: BlogCard[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
     title: string;
-    titleSegments?: TitleSegment[];
+    excerpt: string;
-    description: string;
+    imageSrc: string;
-    tag?: string;
+    imageAlt?: string;
-    tagIcon?: LucideIcon;
+    authorName: string;
-    tagAnimation?: ButtonAnimationType;
+    authorAvatar: string;
-    buttons?: ButtonConfig[];
+    date: string;
-    buttonAnimation?: ButtonAnimationType;
+    onBlogClick?: () => void;
-    textboxLayout: TextboxLayout;
+  }>;
-    useInvertedBackground: InvertedBackground;
+  carouselMode?: "auto" | "buttons";
-    ariaLabel?: string;
+  uniformGridCustomHeightClasses?: string;
-    className?: string;
+  animationType?: string;
-    containerClassName?: string;
+  title?: string;
-    cardClassName?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-    imageWrapperClassName?: string;
+  description?: string;
-    imageClassName?: string;
+  tag?: string;
-    authorAvatarClassName?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    authorDateClassName?: string;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    cardTitleClassName?: string;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    excerptClassName?: string;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-    categoryClassName?: string;
+  useInvertedBackground?: boolean;
-    textBoxTitleClassName?: string;
+  ariaLabel?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  className?: string;
-    textBoxTitleImageClassName?: string;
+  containerClassName?: string;
-    textBoxDescriptionClassName?: string;
+  cardClassName?: string;
-    gridClassName?: string;
+  imageWrapperClassName?: string;
-    carouselClassName?: string;
+  imageClassName?: string;
-    controlsClassName?: string;
+  categoryClassName?: string;
-    textBoxClassName?: string;
+  cardTitleClassName?: string;
-    textBoxTagClassName?: string;
+  excerptClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  authorContainerClassName?: string;
-    textBoxButtonClassName?: string;
+  authorAvatarClassName?: string;
-    textBoxButtonTextClassName?: string;
+  authorNameClassName?: string;
+  dateClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-interface BlogCardItemProps {
+const BlogCardTwo: React.FC<BlogCardTwoProps> = ({
-    blog: BlogCard;
+  blogs,
-    shouldUseLightText: boolean;
+  carouselMode = "buttons",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-    cardClassName?: string;
+  titleSegments,
-    imageWrapperClassName?: string;
+  description,
-    imageClassName?: string;
+  tag,
-    authorAvatarClassName?: string;
+  tagAnimation,
-    authorDateClassName?: string;
+  buttons,
-    cardTitleClassName?: string;
+  buttonAnimation,
-    excerptClassName?: string;
+  textboxLayout = "default",  useInvertedBackground = false,
-    categoryClassName?: string;
+  ariaLabel = "Blog section",  className = "",  containerClassName = "",  cardClassName = "",  imageWrapperClassName = "",  imageClassName = "",  categoryClassName = "",  cardTitleClassName = "",  excerptClassName = "",  authorContainerClassName = "",  authorAvatarClassName = "",  authorNameClassName = "",  dateClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = "" }) => {
-}
+  const [currentIndex, setCurrentIndex] = useState(0);
 
-const BlogCardItem = memo(({
+  const blogCards = blogs.map((blog) => (
-    blog,
+    <div
-    shouldUseLightText,
+      key={blog.id}
-    cardClassName = "",
+      className={`flex flex-col h-full rounded-lg overflow-hidden bg-card hover:shadow-lg transition-shadow cursor-pointer ${
-    imageWrapperClassName = "",
+        cardClassName || ""
-    imageClassName = "",
+      }`}
-    authorAvatarClassName = "",
+      onClick={blog.onBlogClick}
-    authorDateClassName = "",
+    >
-    cardTitleClassName = "",
+      <div className={`relative overflow-hidden bg-foreground/5 ${imageWrapperClassName}`}>
-    excerptClassName = "",
+        <img
-    categoryClassName = "",
+          src={blog.imageSrc}
-}: BlogCardItemProps) => {
+          alt={blog.imageAlt || blog.title}
-    return (
+          className={`w-full h-60 object-cover hover:scale-105 transition-transform duration-300 ${
-        <article
+            imageClassName || ""
-            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"
+        <button className="absolute top-4 right-4 bg-primary-cta/90 hover:bg-primary-cta p-2 rounded-full transition-colors">
-            aria-label={`${blog.title} by ${blog.authorName}`}
+          <ArrowRight className="w-4 h-4 text-foreground" />
-        >
+        </button>
-            <div className={cls("relative z-1 w-full aspect-[4/3] overflow-hidden rounded-theme-capped", imageWrapperClassName)}>
+      </div>
-                <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-1 p-6 flex flex-col gap-3">
-                <div className="flex flex-col gap-2">
+        <span className={`text-xs font-semibold text-primary-cta uppercase ${
-                    <div className="flex items-center gap-2">
+          categoryClassName || ""
-                        {blog.authorAvatar && (
+        }`}>
-                            <Image
+          {blog.category}
-                                src={blog.authorAvatar}
+        </span>
-                                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)}>
+        <h3 className={`text-lg font-semibold text-foreground line-clamp-2 ${
-                        {blog.title}
+          cardTitleClassName || ""
-                    </h3>
+        }`}>
+          {blog.title}
+        </h3>
 
-                    <p className={cls("text-base leading-[1.25]", shouldUseLightText ? "text-background" : "text-foreground", excerptClassName)}>
+        <p className={`text-sm text-foreground/70 line-clamp-2 flex-1 ${
-                        {blog.excerpt}
+          excerptClassName || ""
-                    </p>
+        }`}>
-                </div>
+          {blog.excerpt}
+        </p>
 
-                <div className="flex flex-wrap gap-2">
+        <div className={`flex items-center gap-3 pt-4 border-t border-foreground/10 ${
-                    {Array.isArray(blog.category) ? (
+          authorContainerClassName || ""
-                        blog.category.map((cat, index) => (
+        }`}>
-                            <Badge key={`${cat}-${index}`} text={cat} variant="primary" className={categoryClassName} />
+          <img
-                        ))
+            src={blog.authorAvatar}
-                    ) : (
+            alt={blog.authorName}
-                        <Badge text={blog.category} variant="primary" className={categoryClassName} />
+            className={`w-8 h-8 rounded-full object-cover ${
-                    )}
+              authorAvatarClassName || ""
-                </div>
+            }`}
-            </div>
+          />
-        </article>
+          <div className="flex-1 min-w-0">
-    );
+            <p className={`text-sm font-medium text-foreground truncate ${
-});
+              authorNameClassName || ""
+            }`}>
+              {blog.authorName}
+            </p>
+            <p className={`text-xs text-foreground/60 ${dateClassName || ""}`}>
+              {blog.date}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ));
 
-BlogCardItem.displayName = "BlogCardItem";
+  return (
-
+    <div
-const BlogCardTwo = ({
+      className={`w-full py-20 ${
-    blogs = [],
+        useInvertedBackground ? "bg-background/50" : ""
-    carouselMode = "buttons",
+      } ${containerClassName}`}
-    uniformGridCustomHeightClasses,
+      aria-label={ariaLabel}
-    animationType,
+    >
-    title,
+      {title && (
-    titleSegments,
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName || ""}`}>
-    description,
+          <TextBox
-    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}
+            description={description || ""}
             tag={tag}
-            tagIcon={tagIcon}
             tagAnimation={tagAnimation}
             buttons={buttons}
             buttonAnimation={buttonAnimation}
-            textboxLayout={textboxLayout}
+            textboxLayout={textboxLayout || "default"}
-            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) => (
+        </div>
-                <BlogCardItem
+      )}
-                    key={blog.id}
+
-                    blog={blog}
+      <div className="max-w-content-width mx-auto px-4">
-                    shouldUseLightText={shouldUseLightText}
+        <div className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ${gridClassName}`}>
-                    cardClassName={cardClassName}
+          {blogCards}
-                    imageWrapperClassName={imageWrapperClassName}
+        </div>
-                    imageClassName={imageClassName}
+      </div>
-                    authorAvatarClassName={authorAvatarClassName}
+    </div>
-                    authorDateClassName={authorDateClassName}
+  );
-                    cardTitleClassName={cardTitleClassName}
-                    excerptClassName={excerptClassName}
-                    categoryClassName={categoryClassName}
-                />
-            ))}
-        </CardStack>
-    );
 };
 
-BlogCardTwo.displayName = "BlogCardTwo";
-
 export default BlogCardTwo;

src/components/sections/feature/FeatureBento.tsx

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

src/components/sections/feature/FeatureCardMedia.tsx

@@ -1,261 +1,141 @@
 "use client";
 
-import { memo } from "react";
+import React, { useMemo } from "react";
-import CardStack from "@/components/cardStack/CardStack";
+import CardStack from "@/components/card/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
+import TextBox from "@/components/Textbox";
-import Tag from "@/components/shared/Tag";
+import type { CardAnimationType } from "@/types/animations";
-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 = {
+export interface FeatureCardMediaProps {
+  features?: Array<{
     id: string;
     title: string;
     description: string;
-    tag: string;
+    icon?: React.ReactNode;
-    imageSrc?: string;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
-    videoSrc?: string;
+  }>;
-    imageAlt?: string;
+  gridVariant?: string;
-    videoAriaLabel?: string;
+  uniformGridCustomHeightClasses?: string;
-    buttons?: ButtonConfig[];
+  animationType?: CardAnimationType;
-    onCardClick?: () => void;
+  title?: string;
-};
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-
+  description?: string;
-interface FeatureCardMediaProps {
+  tag?: string;
-    features: FeatureCard[];
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    carouselMode?: "auto" | "buttons";
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    uniformGridCustomHeightClasses?: string;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    animationType: CardAnimationType;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-    title: string;
+  useInvertedBackground?: boolean;
-    titleSegments?: TitleSegment[];
+  ariaLabel?: string;
-    description: string;
+  className?: string;
-    tag?: string;
+  containerClassName?: string;
-    tagIcon?: LucideIcon;
+  cardClassName?: string;
-    tagAnimation?: ButtonAnimationType;
+  mediaClassName?: string;
-    buttons?: ButtonConfig[];
+  textBoxTitleClassName?: string;
-    buttonAnimation?: ButtonAnimationType;
+  textBoxTitleImageWrapperClassName?: string;
-    textboxLayout: TextboxLayout;
+  textBoxTitleImageClassName?: string;
-    useInvertedBackground: InvertedBackground;
+  textBoxDescriptionClassName?: string;
-    ariaLabel?: string;
+  cardTitleClassName?: string;
-    className?: string;
+  cardDescriptionClassName?: string;
-    containerClassName?: string;
+  cardIconClassName?: string;
-    itemClassName?: string;
+  cardIconWrapperClassName?: string;
-    mediaWrapperClassName?: string;
+  gridClassName?: string;
-    mediaClassName?: string;
+  carouselClassName?: string;
-    tagClassName?: string;
+  controlsClassName?: string;
-    contentClassName?: string;
+  textBoxClassName?: string;
-    cardTitleClassName?: string;
+  textBoxTagClassName?: string;
-    cardDescriptionClassName?: string;
+  textBoxButtonContainerClassName?: string;
-    cardButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
-    cardButtonClassName?: string;
+  buttonTextClassName?: 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 {
+const FeatureCardMedia: React.FC<FeatureCardMediaProps> = ({
-    feature: FeatureCard;
+  features = [],
-    shouldUseLightText: boolean;
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-    useInvertedBackground: InvertedBackground;
+  titleSegments,
-    itemClassName?: string;
+  description = "",  tag,
-    mediaWrapperClassName?: string;
+  tagAnimation,
-    mediaClassName?: string;
+  buttons,
-    tagClassName?: string;
+  buttonAnimation,
-    contentClassName?: string;
+  textboxLayout = "default",  useInvertedBackground = false,
-    cardTitleClassName?: string;
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  buttonTextClassName = ""}) => {
-    cardDescriptionClassName?: string;
+  const cardItems = useMemo(
-    cardButtonContainerClassName?: string;
+    () =>
-    cardButtonClassName?: string;
+      features.map((feature) => (
-    cardButtonTextClassName?: string;
+        <div
-}
+          key={feature.id}
-
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-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)}>
+          {feature.icon && (
-                <MediaContent
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-                    imageSrc={feature.imageSrc}
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-                    videoSrc={feature.videoSrc}
+            </div>
-                    imageAlt={feature.imageAlt || feature.title}
+          )}
-                    videoAriaLabel={feature.videoAriaLabel || feature.title}
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-                    imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+            {feature.title}
+          </h3>
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
+            {feature.description}
+          </p>
+          {feature.mediaItems && (
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
+              {feature.mediaItems.map((media, idx) => (
+                <img
+                  key={idx}
+                  src={media.src}
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
                 />
-                <div className="absolute top-4 right-4">
+              ))}
-                    <Tag
-                        text={feature.tag}
-                        useInvertedBackground={useInvertedBackground}
-                        className={tagClassName}
-                    />
-                </div>
             </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
 
-            <div className={cls("relative z-1 card rounded-theme-capped p-6 flex flex-col gap-2 flex-1", contentClassName)}>
+  return (
-                <h3 className={cls(
+    <div
-                    "text-xl md:text-2xl font-medium leading-tight",
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-                    shouldUseLightText ? "text-background" : "text-foreground",
+      aria-label={ariaLabel}
-                    cardTitleClassName
+    >
-                )}>
+      {title && (
-                    {feature.title}
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-                </h3>
+          <TextBox
-
-                <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}
+            buttonTextClassName={buttonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
         >
-            {features.map((feature) => (
+          {cardItems.map((item) => item)}
-                <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>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardMedia.displayName = "FeatureCardMedia";
+export default FeatureCardMedia;
-
-export default FeatureCardMedia;

src/components/sections/feature/FeatureCardOne.tsx

@@ -1,51 +1,31 @@
 "use client";
 
-import CardStack from "@/components/cardStack/CardStack";
+import React, { useMemo } from "react";
-import MediaContent from "@/components/shared/MediaContent";
+import CardStack from "@/components/card/CardStack";
-import Button from "@/components/button/Button";
+import TextBox from "@/components/Textbox";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
+import type { CardAnimationTypeWith3D } from "@/types/animations";
-import { getButtonProps } from "@/lib/buttonUtils";
+import type { GridVariant } from "@/types/grid";
-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";
+export interface FeatureCardOneProps {
-
+  features?: Array<{
-type FeatureCard = {
+    id: string;
-  title: string;
+    title: string;
-  description: string;
+    description: string;
-  button?: ButtonConfig;
+    icon?: React.ReactNode;
-} & (
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
-    | {
+  }>;
-      imageSrc: string;
+  gridVariant?: GridVariant;
-      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;
+  animationType?: CardAnimationTypeWith3D;
-  title: string;
+  title?: string;
-  titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description: string;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  tagAnimation?: ButtonAnimationType;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttons?: ButtonConfig[];
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttonAnimation?: ButtonAnimationType;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  textboxLayout: TextboxLayout;
+  useInvertedBackground?: boolean;
-  useInvertedBackground: InvertedBackground;
   ariaLabel?: string;
   className?: string;
   containerClassName?: string;
@@ -57,8 +37,8 @@ interface FeatureCardOneProps {
   textBoxDescriptionClassName?: string;
   cardTitleClassName?: string;
   cardDescriptionClassName?: string;
-  cardButtonClassName?: string;
+  cardIconClassName?: string;
-  cardButtonTextClassName?: string;
+  cardIconWrapperClassName?: string;
   gridClassName?: string;
   carouselClassName?: string;
   controlsClassName?: string;
@@ -69,128 +49,94 @@ interface FeatureCardOneProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardOne = ({
+const FeatureCardOne: React.FC<FeatureCardOneProps> = ({
-  features,
+  features = [],
-  carouselMode = "buttons",
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  gridVariant,
-  uniformGridCustomHeightClasses,
-  animationType,
-  title,
   titleSegments,
-  description,
+  description = "",  tag,
-  tag,
-  tagIcon,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
+  textboxLayout = "default",  useInvertedBackground = false,
-  useInvertedBackground,
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  ariaLabel = "Feature section",
+  const cardItems = useMemo(
-  className = "",
+    () =>
-  containerClassName = "",
+      features.map((feature) => (
-  cardClassName = "",
-  mediaClassName = "",
-  textBoxTitleClassName = "",
-  textBoxTitleImageWrapperClassName = "",
-  textBoxTitleImageClassName = "",
-  textBoxDescriptionClassName = "",
-  cardTitleClassName = "",
-  cardDescriptionClassName = "",
-  cardButtonClassName = "",
-  cardButtonTextClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureCardOneProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  const getButtonConfigProps = () => {
-    if (theme.defaultButtonVariant === "hover-bubble") {
-      return { bgClassName: "w-full" };
-    }
-    if (theme.defaultButtonVariant === "icon-arrow") {
-      return { className: "justify-between" };
-    }
-    return {};
-  };
-
-  return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant={gridVariant}
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-      supports3DAnimation={true}
-
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      className={className}
-      containerClassName={containerClassName}
-      gridClassName={gridClassName}
-      carouselClassName={carouselClassName}
-      controlsClassName={controlsClassName}
-      textBoxClassName={textBoxClassName}
-      titleClassName={textBoxTitleClassName}
-      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-      titleImageClassName={textBoxTitleImageClassName}
-      descriptionClassName={textBoxDescriptionClassName}
-      tagClassName={textBoxTagClassName}
-      buttonContainerClassName={textBoxButtonContainerClassName}
-      buttonClassName={textBoxButtonClassName}
-      buttonTextClassName={textBoxButtonTextClassName}
-      ariaLabel={ariaLabel}
-    >
-      {features.map((feature, index) => (
         <div
-          key={`${feature.title}-${index}`}
+          key={feature.id}
-          className={cls("card flex flex-col gap-4 p-4 rounded-theme-capped min-h-0 h-full", cardClassName)}
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
         >
-          <MediaContent
+          {feature.icon && (
-            imageSrc={feature.imageSrc}
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-            videoSrc={feature.videoSrc}
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-            imageAlt={feature.imageAlt || "Feature image"}
+            </div>
-            videoAriaLabel={feature.videoAriaLabel || "Feature video"}
+          )}
-            imageClassName={cls("relative z-1 min-h-0 h-full", mediaClassName)}
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-          />
+            {feature.title}
-          <div className="relative z-1 flex flex-col gap-1">
+          </h3>
-            <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-              {feature.title}
+            {feature.description}
-            </h3>
+          </p>
-            <p className={cls("text-sm leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
+          {feature.mediaItems && (
-              {feature.description}
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-            </p>
+              {feature.mediaItems.map((media, idx) => (
-          </div>
+                <img
-          {feature.button && (
+                  key={idx}
-            <Button
+                  src={media.src}
-              {...getButtonProps(
+                  alt={media.alt || "Feature media"}
-                { ...feature.button, props: { ...feature.button.props, ...getButtonConfigProps() } },
+                  className="w-full h-20 object-cover rounded-lg"
-                0,
+                />
-                theme.defaultButtonVariant,
+              ))}
-                cls("w-full", cardButtonClassName),
+            </div>
-                cardButtonTextClassName
-              )}
-            />
           )}
         </div>
-      ))}
+      )),
-    </CardStack>
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
+
+  return (
+    <div
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
+      aria-label={ariaLabel}
+    >
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
+          <TextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
+        >
+          {cardItems.map((item) => item)}
+        </CardStack>
+      </div>
+    </div>
   );
 };
 
-FeatureCardOne.displayName = "FeatureCardOne";
+export default FeatureCardOne;
-
-export default FeatureCardOne;

src/components/sections/feature/FeatureCardSeven.tsx

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

src/components/sections/feature/FeatureCardTwelve.tsx

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

src/components/sections/feature/FeatureCardTwentyFive.tsx

@@ -1,43 +1,30 @@
 "use client";
 
-import CardStack from "@/components/cardStack/CardStack";
+import React, { useMemo } from "react";
-import MediaContent from "@/components/shared/MediaContent";
+import CardStack from "@/components/card/CardStack";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
+import TextBox from "@/components/Textbox";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { CardAnimationTypeWith3D } from "@/types/animations";
-import type { LucideIcon } from "lucide-react";
-import type { CardAnimationTypeWith3D, TitleSegment, ButtonConfig, ButtonAnimationType } from "@/components/cardStack/types";
 
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+export interface FeatureCardTwentyFiveProps {
-
+  features?: Array<{
-interface MediaItem {
+    id: string;
-  imageSrc?: string;
+    title: string;
-  videoSrc?: string;
+    description: string;
-  imageAlt?: string;
+    icon?: React.ReactNode;
-  videoAriaLabel?: string;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
-}
+  }>;
-
+  gridVariant?: string;
-type FeatureCard = {
-  title: string;
-  description: string;
-  icon: LucideIcon;
-  mediaItems: [MediaItem, MediaItem];
-};
-
-interface FeatureCardTwentyFiveProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
   uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationTypeWith3D;
+  animationType?: CardAnimationTypeWith3D;
-  title: string;
+  title?: string;
-  titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description: string;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  tagAnimation?: ButtonAnimationType;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttons?: ButtonConfig[];
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttonAnimation?: ButtonAnimationType;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  textboxLayout: TextboxLayout;
+  useInvertedBackground?: boolean;
-  useInvertedBackground: InvertedBackground;
   ariaLabel?: string;
   className?: string;
   containerClassName?: string;
@@ -61,118 +48,94 @@ interface FeatureCardTwentyFiveProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardTwentyFive = ({
+const FeatureCardTwentyFive: React.FC<FeatureCardTwentyFiveProps> = ({
-  features,
+  features = [],
-  carouselMode = "buttons",
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  uniformGridCustomHeightClasses,
-  animationType,
-  title,
   titleSegments,
-  description,
+  description = "",  tag,
-  tag,
-  tagIcon,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
+  textboxLayout = "default",  useInvertedBackground = false,
-  useInvertedBackground,
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  ariaLabel = "Feature section",
+  const cardItems = useMemo(
-  className = "",
+    () =>
-  containerClassName = "",
+      features.map((feature) => (
-  cardClassName = "",
+        <div
-  mediaClassName = "",
+          key={feature.id}
-  textBoxTitleClassName = "",
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-  textBoxTitleImageWrapperClassName = "",
+        >
-  textBoxTitleImageClassName = "",
+          {feature.icon && (
-  textBoxDescriptionClassName = "",
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-  cardTitleClassName = "",
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-  cardDescriptionClassName = "",
-  cardIconClassName = "",
-  cardIconWrapperClassName = "",
-  gridClassName = "",
-  carouselClassName = "",
-  controlsClassName = "",
-  textBoxClassName = "",
-  textBoxTagClassName = "",
-  textBoxButtonContainerClassName = "",
-  textBoxButtonClassName = "",
-  textBoxButtonTextClassName = "",
-}: FeatureCardTwentyFiveProps) => {
-  const theme = useTheme();
-  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
-
-  return (
-    <CardStack
-      mode={carouselMode}
-      gridVariant="two-items-per-row"
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-      supports3DAnimation={true}
-
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      className={className}
-      containerClassName={containerClassName}
-      gridClassName={gridClassName}
-      carouselClassName={carouselClassName}
-      controlsClassName={controlsClassName}
-      textBoxClassName={textBoxClassName}
-      titleClassName={textBoxTitleClassName}
-      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-      titleImageClassName={textBoxTitleImageClassName}
-      descriptionClassName={textBoxDescriptionClassName}
-      tagClassName={textBoxTagClassName}
-      buttonContainerClassName={textBoxButtonContainerClassName}
-      buttonClassName={textBoxButtonClassName}
-      buttonTextClassName={textBoxButtonTextClassName}
-      ariaLabel={ariaLabel}
-    >
-      {features.map((feature, index) => {
-        const IconComponent = feature.icon;
-        return (
-          <div
-            key={`${feature.title}-${index}`}
-            className={cls("card flex flex-col gap-5 p-5 rounded-theme-capped min-h-0 h-full", cardClassName)}
-          >
-            <div className="relative z-1 flex flex-col gap-1">
-              <div className={cls("h-15 w-[3.75rem] mb-1 aspect-square rounded-theme primary-button flex items-center justify-center", cardIconWrapperClassName)}>
-                <IconComponent className={cls("h-4/10 w-4/10 text-primary-cta-text", cardIconClassName)} strokeWidth={1.5} />
-              </div>
-              <h3 className={cls("text-2xl font-medium leading-tight", shouldUseLightText && "text-background", cardTitleClassName)}>
-                {feature.title}
-              </h3>
-              <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background" : "text-foreground", cardDescriptionClassName)}>
-                {feature.description}
-              </p>
             </div>
-            <div className="mt-auto flex-1 min-h-0 grid grid-cols-2 gap-5 overflow-hidden">
+          )}
-              {feature.mediaItems.map((item, mediaIndex) => (
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-                <div key={mediaIndex} className="overflow-hidden rounded-theme-capped">
+            {feature.title}
-                  <MediaContent
+          </h3>
-                    imageSrc={item.imageSrc}
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-                    videoSrc={item.videoSrc}
+            {feature.description}
-                    imageAlt={item.imageAlt || "Feature image"}
+          </p>
-                    videoAriaLabel={item.videoAriaLabel || "Feature video"}
+          {feature.mediaItems && (
-                    imageClassName={cls("relative z-1 h-full w-full object-cover", mediaClassName)}
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-                  />
+              {feature.mediaItems.map((media, idx) => (
-                </div>
+                <img
+                  key={idx}
+                  src={media.src}
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
+                />
               ))}
             </div>
-          </div>
+          )}
-        );
+        </div>
-      })}
+      )),
-    </CardStack>
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
+
+  return (
+    <div
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
+      aria-label={ariaLabel}
+    >
+      {title && (
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
+          <TextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            titleClassName={textBoxTitleClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
+        >
+          {cardItems.map((item) => item)}
+        </CardStack>
+      </div>
+    </div>
   );
 };
 
-FeatureCardTwentyFive.displayName = "FeatureCardTwentyFive";
+export default FeatureCardTwentyFive;
-
-export default FeatureCardTwentyFive;

src/components/sections/feature/FeatureCardTwentyFour.tsx

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

src/components/sections/feature/FeatureCardTwentySeven.tsx

@@ -1,127 +1,44 @@
 "use client";
 
-import { useState } from "react";
+import React, { useMemo } from "react";
-import { Plus } from "lucide-react";
+import CardStack from "@/components/card/CardStack";
-import CardStack from "@/components/cardStack/CardStack";
+import TextBox from "@/components/Textbox";
-import MediaContent from "@/components/shared/MediaContent";
+import type { CardAnimationType } from "@/types/animations";
-import { cls } from "@/lib/utils";
+import type { GridVariant } from "@/types/grid";
-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 = {
+export interface FeatureCardTwentySevenProps {
-  id: string;
+  features?: Array<{
-  title: string;
+    id: string;
-  descriptions: string[];
+    title: string;
-  imageSrc?: string;
+    description: string;
-  videoSrc?: string;
+    icon?: React.ReactNode;
-  imageAlt?: string;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
-};
+  }>;
-
+  gridVariant?: GridVariant;
-interface FeatureCardTwentySevenItemProps {
-  title: string;
-  descriptions: string[];
-  imageSrc?: string;
-  videoSrc?: string;
-  imageAlt?: string;
-  className?: string;
-  titleClassName?: string;
-  descriptionClassName?: string;
-}
-
-const FeatureCardTwentySevenItem = ({
-  title,
-  descriptions,
-  imageSrc,
-  videoSrc,
-  imageAlt = "",
-  className = "",
-  titleClassName = "",
-  descriptionClassName = "",
-}: FeatureCardTwentySevenItemProps) => {
-  const [isFlipped, setIsFlipped] = useState(false);
-
-  return (
-    <div
-      className={cls(
-        "relative w-full h-full min-h-0 group [perspective:3000px] cursor-pointer",
-        className
-      )}
-      onClick={() => setIsFlipped(!isFlipped)}
-    >
-      <div
-        className={cls(
-          "relative w-full h-full transition-transform duration-500 [transform-style:preserve-3d]",
-          isFlipped && "[transform:rotateY(180deg)]"
-        )}
-      >
-        <div className="relative w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col [backface-visibility:hidden]">
-          <div className="flex justify-between items-start">
-            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
-              {title}
-            </h3>
-            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
-              <Plus className="h-1/2 w-1/2 text-primary-cta-text" />
-            </div>
-          </div>
-          <div className="w-full aspect-square md:aspect-[10/11] flex items-center justify-center rounded-theme-capped overflow-hidden">
-            <MediaContent
-              imageSrc={imageSrc}
-              videoSrc={videoSrc}
-              imageAlt={imageAlt}
-              imageClassName="w-full h-full object-cover"
-            />
-          </div>
-        </div>
-
-        <div className="absolute! inset-0 w-full h-full card rounded-theme-capped p-6 gap-6 flex flex-col justify-between [backface-visibility:hidden] [transform:rotateY(180deg)]">
-          <div className="flex justify-between items-start">
-            <h3 className={cls("text-2xl font-medium leading-tight", titleClassName)}>
-              {title}
-            </h3>
-            <div className="h-[calc(var(--text-2xl)*1.25)] w-[calc(var(--text-2xl)*1.25)] aspect-square rounded-theme primary-button flex items-center justify-center shrink-0">
-              <Plus className="h-1/2 w-1/2 rotate-45 text-primary-cta-text" />
-            </div>
-          </div>
-          <div className="w-full flex flex-col gap-3">
-            {descriptions.map((desc, index) => (
-              <p key={index} className={cls("text-lg text-foreground/75 leading-tight", descriptionClassName)}>
-                {desc}
-              </p>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface FeatureCardTwentySevenProps {
-  features: FeatureCard[];
-  carouselMode?: "auto" | "buttons";
-  gridVariant: GridVariant;
   uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
+  animationType?: CardAnimationType;
-  title: string;
+  title?: string;
-  titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description: string;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  tagAnimation?: ButtonAnimationType;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttons?: ButtonConfig[];
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttonAnimation?: ButtonAnimationType;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  textboxLayout: TextboxLayout;
+  useInvertedBackground?: boolean;
-  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;
@@ -132,90 +49,94 @@ interface FeatureCardTwentySevenProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureCardTwentySeven = ({
+const FeatureCardTwentySeven: React.FC<FeatureCardTwentySevenProps> = ({
-  features,
+  features = [],
-  carouselMode = "buttons",
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  gridVariant,
-  uniformGridCustomHeightClasses = "min-h-none",
-  animationType,
-  title,
   titleSegments,
-  description,
+  description = "",  tag,
-  tag,
-  tagIcon,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
+  textboxLayout = "default",  useInvertedBackground = false,
-  useInvertedBackground,
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  ariaLabel = "Feature section",
+  const cardItems = useMemo(
-  className = "",
+    () =>
-  containerClassName = "",
+      features.map((feature) => (
-  cardClassName = "",
+        <div
-  textBoxTitleClassName = "",
+          key={feature.id}
-  textBoxTitleImageWrapperClassName = "",
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-  textBoxTitleImageClassName = "",
+        >
-  textBoxDescriptionClassName = "",
+          {feature.icon && (
-  cardTitleClassName = "",
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-  cardDescriptionClassName = "",
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-  gridClassName = "",
+            </div>
-  carouselClassName = "",
+          )}
-  controlsClassName = "",
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-  textBoxClassName = "",
+            {feature.title}
-  textBoxTagClassName = "",
+          </h3>
-  textBoxButtonContainerClassName = "",
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-  textBoxButtonClassName = "",
+            {feature.description}
-  textBoxButtonTextClassName = "",
+          </p>
-}: FeatureCardTwentySevenProps) => {
+          {feature.mediaItems && (
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
+              {feature.mediaItems.map((media, idx) => (
+                <img
+                  key={idx}
+                  src={media.src}
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
+
   return (
-    <CardStack
+    <div
-      mode={carouselMode}
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      gridVariant={gridVariant}
+      aria-label={ariaLabel}
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      className={className}
-      containerClassName={containerClassName}
-      gridClassName={gridClassName}
-      carouselClassName={carouselClassName}
-      controlsClassName={controlsClassName}
-      textBoxClassName={textBoxClassName}
-      titleClassName={textBoxTitleClassName}
-      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-      titleImageClassName={textBoxTitleImageClassName}
-      descriptionClassName={textBoxDescriptionClassName}
-      tagClassName={textBoxTagClassName}
-      buttonContainerClassName={textBoxButtonContainerClassName}
-      buttonClassName={textBoxButtonClassName}
-      buttonTextClassName={textBoxButtonTextClassName}
-      ariaLabel={ariaLabel}
     >
-      {features.map((feature, index) => (
+      {title && (
-        <FeatureCardTwentySevenItem
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          key={`${feature.id}-${index}`}
+          <TextBox
-          title={feature.title}
+            title={title}
-          descriptions={feature.descriptions}
+            titleSegments={titleSegments}
-          imageSrc={feature.imageSrc}
+            description={description}
-          videoSrc={feature.videoSrc}
+            tag={tag}
-          imageAlt={feature.imageAlt}
+            tagAnimation={tagAnimation}
-          className={cardClassName}
+            buttons={buttons}
-          titleClassName={cardTitleClassName}
+            buttonAnimation={buttonAnimation}
-          descriptionClassName={cardDescriptionClassName}
+            textboxLayout={textboxLayout}
-        />
+            titleClassName={textBoxTitleClassName}
-      ))}
+            descriptionClassName={textBoxDescriptionClassName}
-    </CardStack>
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
+        >
+          {cardItems.map((item) => item)}
+        </CardStack>
+      </div>
+    </div>
   );
 };
 
-FeatureCardTwentySeven.displayName = "FeatureCardTwentySeven";
+export default FeatureCardTwentySeven;
-
-export default FeatureCardTwentySeven;

src/components/sections/feature/FeatureCardTwentyThree.tsx

@@ -1,241 +1,141 @@
 "use client";
 
-import { memo } from "react";
+import React, { useMemo } from "react";
-import { ArrowRight } from "lucide-react";
+import CardStack from "@/components/card/CardStack";
-import CardStack from "@/components/cardStack/CardStack";
+import TextBox from "@/components/Textbox";
-import MediaContent from "@/components/shared/MediaContent";
+import type { CardAnimationType } from "@/types/animations";
-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 = {
+export interface FeatureCardTwentyThreeProps {
+  features?: Array<{
     id: string;
     title: string;
-    tags: string[];
-    imageSrc?: string;
-    videoSrc?: string;
-    imageAlt?: string;
-    videoAriaLabel?: string;
-    onFeatureClick?: () => void;
-};
-
-interface FeatureCardTwentyThreeProps {
-    features: FeatureItem[];
-    carouselMode?: "auto" | "buttons";
-    uniformGridCustomHeightClasses?: string;
-    animationType: CardAnimationType;
-    title: string;
-    titleSegments?: TitleSegment[];
     description: string;
-    tag?: string;
+    icon?: React.ReactNode;
-    tagIcon?: LucideIcon;
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
-    tagAnimation?: ButtonAnimationType;
+  }>;
-    buttons?: ButtonConfig[];
+  gridVariant?: string;
-    buttonAnimation?: ButtonAnimationType;
+  uniformGridCustomHeightClasses?: string;
-    textboxLayout: TextboxLayout;
+  animationType?: CardAnimationType;
-    useInvertedBackground: InvertedBackground;
+  title?: string;
-    ariaLabel?: string;
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-    className?: string;
+  description?: string;
-    containerClassName?: string;
+  tag?: string;
-    itemClassName?: string;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    mediaWrapperClassName?: string;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-    mediaClassName?: string;
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-    cardClassName?: string;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-    cardTitleClassName?: string;
+  useInvertedBackground?: boolean;
-    tagsContainerClassName?: string;
+  ariaLabel?: string;
-    tagClassName?: string;
+  className?: string;
-    arrowClassName?: string;
+  containerClassName?: string;
-    textBoxTitleClassName?: string;
+  cardClassName?: string;
-    textBoxTitleImageWrapperClassName?: string;
+  mediaClassName?: string;
-    textBoxTitleImageClassName?: string;
+  textBoxTitleClassName?: string;
-    textBoxDescriptionClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
-    gridClassName?: string;
+  textBoxTitleImageClassName?: string;
-    carouselClassName?: string;
+  textBoxDescriptionClassName?: string;
-    controlsClassName?: string;
+  cardTitleClassName?: string;
-    textBoxClassName?: string;
+  cardDescriptionClassName?: string;
-    textBoxTagClassName?: string;
+  cardIconClassName?: string;
-    textBoxButtonContainerClassName?: string;
+  cardIconWrapperClassName?: string;
-    textBoxButtonClassName?: string;
+  gridClassName?: string;
-    textBoxButtonTextClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  buttonTextClassName?: string;
 }
 
-interface FeatureCardItemProps {
+const FeatureCardTwentyThree: React.FC<FeatureCardTwentyThreeProps> = ({
-    feature: FeatureItem;
+  features = [],
-    shouldUseLightText: boolean;
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-    useInvertedBackground: InvertedBackground;
+  titleSegments,
-    itemClassName?: string;
+  description = "",  tag,
-    mediaWrapperClassName?: string;
+  tagAnimation,
-    mediaClassName?: string;
+  buttons,
-    cardClassName?: string;
+  buttonAnimation,
-    cardTitleClassName?: string;
+  textboxLayout = "default",  useInvertedBackground = false,
-    tagsContainerClassName?: string;
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  buttonTextClassName = ""}) => {
-    tagClassName?: string;
+  const cardItems = useMemo(
-    arrowClassName?: string;
+    () =>
-}
+      features.map((feature) => (
-
+        <div
-const FeatureCardItem = memo(({
+          key={feature.id}
-    feature,
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-    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)}>
+          {feature.icon && (
-                <MediaContent
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-                    imageSrc={feature.imageSrc}
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-                    videoSrc={feature.videoSrc}
+            </div>
-                    imageAlt={feature.imageAlt || feature.title}
+          )}
-                    videoAriaLabel={feature.videoAriaLabel || feature.title}
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-                    imageClassName={cls("w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-105", mediaClassName)}
+            {feature.title}
+          </h3>
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
+            {feature.description}
+          </p>
+          {feature.mediaItems && (
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
+              {feature.mediaItems.map((media, idx) => (
+                <img
+                  key={idx}
+                  src={media.src}
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
                 />
+              ))}
             </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
+  );
 
-            <div className={cls("relative z-1 card rounded-theme-capped p-5 flex-1 flex flex-col justify-between gap-4", cardClassName)}>
+  return (
-                <h3 className={cls(
+    <div
-                    "text-xl md:text-2xl font-medium leading-tight",
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-                    shouldUseLightText ? "text-background" : "text-foreground",
+      aria-label={ariaLabel}
-                    cardTitleClassName
+    >
-                )}>
+      {title && (
-                    {feature.title}
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-                </h3>
+          <TextBox
-
-                <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}
+            buttonTextClassName={buttonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
         >
-            {features.map((feature) => (
+          {cardItems.map((item) => item)}
-                <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>
-    );
+      </div>
+    </div>
+  );
 };
 
-FeatureCardTwentyThree.displayName = "FeatureCardTwentyThree";
+export default FeatureCardTwentyThree;
-
-export default FeatureCardTwentyThree;

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

@@ -1,54 +1,43 @@
 "use client";
 
-import CardStack from "@/components/cardStack/CardStack";
+import React, { useMemo } from "react";
-import FeatureBorderGlowItem from "./FeatureBorderGlowItem";
+import CardStack from "@/components/card/CardStack";
-import { shouldUseInvertedText } from "@/lib/utils";
+import TextBox from "@/components/Textbox";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { CardAnimationType } from "@/types/animations";
-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 {
+export interface FeatureBorderGlowProps {
-  icon: LucideIcon;
+  features?: Array<{
-  title: string;
+    id: string;
-  description: string;
+    title: string;
-}
+    description: string;
-
+    icon?: React.ReactNode;
-interface FeatureBorderGlowProps {
+    mediaItems?: Array<{ type: string; src: string; alt?: string }>;
-  features: FeatureCard[];
+  }>;
-  carouselMode?: "auto" | "buttons";
+  gridVariant?: string;
   uniformGridCustomHeightClasses?: string;
-  animationType: CardAnimationType;
+  animationType?: CardAnimationType;
-  title: string;
+  title?: string;
-  titleSegments?: TitleSegment[];
+  titleSegments?: Array<{ type: "text"; content: string } | { type: "image"; src: string; alt?: string }>;
-  description: string;
+  description?: string;
   tag?: string;
-  tagIcon?: LucideIcon;
+  tagAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  tagAnimation?: ButtonAnimationType;
+  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
-  buttons?: ButtonConfig[];
+  buttonAnimation?: "none" | "opacity" | "slide-up" | "blur-reveal";
-  buttonAnimation?: ButtonAnimationType;
+  textboxLayout?: "default" | "split" | "split-actions" | "split-description" | "inline-image";
-  textboxLayout: TextboxLayout;
+  useInvertedBackground?: boolean;
-  useInvertedBackground: InvertedBackground;
   ariaLabel?: string;
   className?: string;
   containerClassName?: string;
   cardClassName?: string;
-  iconContainerClassName?: string;
+  mediaClassName?: string;
-  iconClassName?: string;
   textBoxTitleClassName?: string;
   textBoxTitleImageWrapperClassName?: string;
   textBoxTitleImageClassName?: string;
   textBoxDescriptionClassName?: string;
   cardTitleClassName?: string;
   cardDescriptionClassName?: string;
+  cardIconClassName?: string;
+  cardIconWrapperClassName?: string;
   gridClassName?: string;
   carouselClassName?: string;
   controlsClassName?: string;
@@ -59,97 +48,94 @@ interface FeatureBorderGlowProps {
   textBoxButtonTextClassName?: string;
 }
 
-const FeatureBorderGlow = ({
+const FeatureBorderGlow: React.FC<FeatureBorderGlowProps> = ({
-  features,
+  features = [],
-  carouselMode = "buttons",
+  gridVariant = "uniform-all-items-equal",  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",  animationType = "slide-up",  title,
-  uniformGridCustomHeightClasses = "min-h-75 2xl:min-h-85",
-  animationType,
-  title,
   titleSegments,
-  description,
+  description = "",  tag,
-  tag,
-  tagIcon,
   tagAnimation,
   buttons,
   buttonAnimation,
-  textboxLayout,
+  textboxLayout = "default",  useInvertedBackground = false,
-  useInvertedBackground,
+  ariaLabel = "Feature section",  className = "",  containerClassName = "",  cardClassName = "",  mediaClassName = "",  textBoxTitleClassName = "",  textBoxTitleImageWrapperClassName = "",  textBoxTitleImageClassName = "",  textBoxDescriptionClassName = "",  cardTitleClassName = "",  cardDescriptionClassName = "",  cardIconClassName = "",  cardIconWrapperClassName = "",  gridClassName = "",  carouselClassName = "",  controlsClassName = "",  textBoxClassName = "",  textBoxTagClassName = "",  textBoxButtonContainerClassName = "",  textBoxButtonClassName = "",  textBoxButtonTextClassName = ""}) => {
-  ariaLabel = "Feature section",
+  const cardItems = useMemo(
-  className = "",
+    () =>
-  containerClassName = "",
+      features.map((feature) => (
-  cardClassName = "",
+        <div
-  iconContainerClassName = "",
+          key={feature.id}
-  iconClassName = "",
+          className={`h-full flex flex-col gap-4 p-6 rounded-lg bg-card ${cardClassName}`}
-  textBoxTitleClassName = "",
+        >
-  textBoxTitleImageWrapperClassName = "",
+          {feature.icon && (
-  textBoxTitleImageClassName = "",
+            <div className={`flex items-center justify-center w-12 h-12 rounded-lg bg-primary-cta/10 ${cardIconWrapperClassName}`}>
-  textBoxDescriptionClassName = "",
+              <span className={`text-2xl ${cardIconClassName}`}>{feature.icon}</span>
-  cardTitleClassName = "",
+            </div>
-  cardDescriptionClassName = "",
+          )}
-  gridClassName = "",
+          <h3 className={`text-xl font-semibold text-foreground ${cardTitleClassName}`}>
-  carouselClassName = "",
+            {feature.title}
-  controlsClassName = "",
+          </h3>
-  textBoxClassName = "",
+          <p className={`text-sm text-foreground/70 flex-1 ${cardDescriptionClassName}`}>
-  textBoxTagClassName = "",
+            {feature.description}
-  textBoxButtonContainerClassName = "",
+          </p>
-  textBoxButtonClassName = "",
+          {feature.mediaItems && (
-  textBoxButtonTextClassName = "",
+            <div className={`flex gap-2 mt-auto ${mediaClassName}`}>
-}: FeatureBorderGlowProps) => {
+              {feature.mediaItems.map((media, idx) => (
-  const theme = useTheme();
+                <img
-  const shouldUseLightText = shouldUseInvertedText(
+                  key={idx}
-    useInvertedBackground,
+                  src={media.src}
-    theme.cardStyle
+                  alt={media.alt || "Feature media"}
+                  className="w-full h-20 object-cover rounded-lg"
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )),
+    [features, cardClassName, cardIconWrapperClassName, cardIconClassName, cardTitleClassName, cardDescriptionClassName, mediaClassName]
   );
 
   return (
-    <CardStack
+    <div
-      mode={carouselMode}
+      className={`w-full py-20 ${useInvertedBackground ? "bg-background/50" : ""} ${containerClassName}`}
-      gridVariant="uniform-all-items-equal"
+      aria-label={ariaLabel}
-      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
-      animationType={animationType}
-      title={title}
-      titleSegments={titleSegments}
-      description={description}
-      tag={tag}
-      tagIcon={tagIcon}
-      tagAnimation={tagAnimation}
-      buttons={buttons}
-      buttonAnimation={buttonAnimation}
-      textboxLayout={textboxLayout}
-      useInvertedBackground={useInvertedBackground}
-      className={className}
-      containerClassName={containerClassName}
-      gridClassName={gridClassName}
-      carouselClassName={carouselClassName}
-      controlsClassName={controlsClassName}
-      textBoxClassName={textBoxClassName}
-      titleClassName={textBoxTitleClassName}
-      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
-      titleImageClassName={textBoxTitleImageClassName}
-      descriptionClassName={textBoxDescriptionClassName}
-      tagClassName={textBoxTagClassName}
-      buttonContainerClassName={textBoxButtonContainerClassName}
-      buttonClassName={textBoxButtonClassName}
-      buttonTextClassName={textBoxButtonTextClassName}
-      ariaLabel={ariaLabel}
     >
-      {features.map((feature, index) => (
+      {title && (
-        <FeatureBorderGlowItem
+        <div className={`max-w-content-width mx-auto px-4 mb-12 ${textBoxClassName}`}>
-          key={`${feature.title}-${index}`}
+          <TextBox
-          item={feature}
+            title={title}
-          index={index}
+            titleSegments={titleSegments}
-          className={cardClassName}
+            description={description}
-          iconContainerClassName={iconContainerClassName}
+            tag={tag}
-          iconClassName={iconClassName}
+            tagAnimation={tagAnimation}
-          titleClassName={cardTitleClassName}
+            buttons={buttons}
-          descriptionClassName={cardDescriptionClassName}
+            buttonAnimation={buttonAnimation}
-          shouldUseLightText={shouldUseLightText}
+            textboxLayout={textboxLayout}
-        />
+            titleClassName={textBoxTitleClassName}
-      ))}
+            descriptionClassName={textBoxDescriptionClassName}
-    </CardStack>
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+          />
+        </div>
+      )}
+
+      <div className="max-w-content-width mx-auto px-4">
+        <CardStack
+          gridVariant={gridVariant}
+          uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+          animationType={animationType}
+          carouselMode="buttons"
+          ariaLabel={ariaLabel}
+          className={className}
+          gridClassName={gridClassName}
+          carouselClassName={carouselClassName}
+          controlsClassName={controlsClassName}
+        >
+          {cardItems.map((item) => item)}
+        </CardStack>
+      </div>
+    </div>
   );
 };
 
-FeatureBorderGlow.displayName = "FeatureBorderGlow";
+export default FeatureBorderGlow;
-
-export default FeatureBorderGlow;

src/hooks/useAuth.ts

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+}
+
+interface UserSession {
+  token: string;
+  user: User;
+  expiresAt: string;
+}
+
+export function useAuth() {
+  const [user, setUser] = useState<User | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  // Initialize auth state from localStorage
+  useEffect(() => {
+    const storedSession = localStorage.getItem("userSession");
+    if (storedSession) {
+      try {
+        const session: UserSession = JSON.parse(storedSession);
+        
+        // Check if session has expired
+        if (new Date(session.expiresAt) > new Date()) {
+          setUser(session.user);
+          setToken(session.token);
+          setIsAuthenticated(true);
+        } else {
+          // Session expired, clear it
+          localStorage.removeItem("userSession");
+          setIsAuthenticated(false);
+        }
+      } catch (error) {
+        console.error("Failed to parse session:", error);
+        localStorage.removeItem("userSession");
+        setIsAuthenticated(false);
+      }
+    }
+    setIsLoading(false);
+  }, []);
+
+  const login = useCallback((sessionData: UserSession) => {
+    setUser(sessionData.user);
+    setToken(sessionData.token);
+    setIsAuthenticated(true);
+    localStorage.setItem("userSession", JSON.stringify(sessionData));
+  }, []);
+
+  const logout = useCallback(async () => {
+    try {
+      await fetch("/api/auth/logout", { method: "POST" });
+    } catch (error) {
+      console.error("Logout error:", error);
+    } finally {
+      setUser(null);
+      setToken(null);
+      setIsAuthenticated(false);
+      localStorage.removeItem("userSession");
+      window.location.href = "/";
+    }
+  }, []);
+
+  const verifySession = useCallback(async (): Promise<boolean> => {
+    if (!token) return false;
+
+    try {
+      const response = await fetch("/api/auth/verify-session", {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      return response.ok;
+    } catch (error) {
+      console.error("Session verification error:", error);
+      return false;
+    }
+  }, [token]);
+
+  const updateUser = useCallback((updatedUser: Partial<User>) => {
+    setUser((prev) => (prev ? { ...prev, ...updatedUser } : null));
+    
+    const storedSession = localStorage.getItem("userSession");
+    if (storedSession) {
+      try {
+        const session: UserSession = JSON.parse(storedSession);
+        session.user = { ...session.user, ...updatedUser };
+        localStorage.setItem("userSession", JSON.stringify(session));
+      } catch (error) {
+        console.error("Failed to update session:", error);
+      }
+    }
+  }, []);
+
+  return {
+    user,
+    token,
+    isLoading,
+    isAuthenticated,
+    login,
+    logout,
+    verifySession,
+    updateUser,
+  };
+}

src/middleware.ts

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