Merge version_2 into main

Merge version_2 into main

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

@@ -1,95 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-interface LoginRequest {
-  email: string;
-  password: string;
-  rememberMe: boolean;
-}
-
-// Mock user storage for demonstration
-const mockUsers: {
-  [key: string]: {
-    id: string;
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-    userType: "student" | "teacher";
-  };
-} = {
-  "demo@example.com": {
-    id: "user_1",    firstName: "Demo",    lastName: "User",    email: "demo@example.com",    password: "DemoPassword123", // Demo password
-    userType: "student"},
-  "teacher@example.com": {
-    id: "user_2",    firstName: "Demo",    lastName: "Teacher",    email: "teacher@example.com",    password: "TeacherPassword123",    userType: "teacher"},
-};
-
-export async function POST(request: NextRequest) {
-  try {
-    const body: LoginRequest = await request.json();
-
-    // Validate input
-    if (!body.email || !body.password) {
-      return NextResponse.json(
-        { message: "E-posta ve şifre gereklidir" },
-        { status: 400 }
-      );
-    }
-
-    // Find user
-    const user = mockUsers[body.email];
-
-    if (!user) {
-      return NextResponse.json(
-        { message: "E-posta veya şifre hatalı" },
-        { status: 401 }
-      );
-    }
-
-    // In production, use bcrypt.compare()
-    // const passwordMatch = await bcrypt.compare(body.password, user.password);
-
-    if (user.password !== body.password) {
-      return NextResponse.json(
-        { message: "E-posta veya şifre hatalı" },
-        { status: 401 }
-      );
-    }
-
-    // Create response with user data
-    const response = NextResponse.json(
-      {
-        message: "Giriş başarıyla gerçekleştirildi",        user: {
-          id: user.id,
-          firstName: user.firstName,
-          lastName: user.lastName,
-          email: user.email,
-          userType: user.userType,
-        },
-      },
-      { status: 200 }
-    );
-
-    // In production, set secure HTTP-only cookies
-    if (body.rememberMe) {
-      // Set longer expiration for "remember me"
-      response.cookies.set("authToken", `token_${user.id}`, {
-        maxAge: 30 * 24 * 60 * 60, // 30 days
-        httpOnly: true,
-        secure: process.env.NODE_ENV === "production",        sameSite: "lax"});
-    } else {
-      response.cookies.set("authToken", `token_${user.id}`, {
-        maxAge: 24 * 60 * 60, // 24 hours
-        httpOnly: true,
-        secure: process.env.NODE_ENV === "production",        sameSite: "lax"});
-    }
-
-    return response;
-  } catch (error) {
-    console.error("Login error:", error);
-    return NextResponse.json(
-      { message: "Sunucu hatası oluştu" },
-      { status: 500 }
-    );
-  }
-}

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

@@ -1,84 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-
-interface RegisterRequest {
-  firstName: string;
-  lastName: string;
-  email: string;
-  password: string;
-  userType: "student" | "teacher";
-}
-
-// This is a mock implementation. In production, you would:
-// 1. Hash the password using bcrypt or similar
-// 2. Store the user in a database
-// 3. Send verification email
-// 4. Create JWT tokens
-
-const mockUsers: { [key: string]: RegisterRequest & { id: string } } = {};
-
-export async function POST(request: NextRequest) {
-  try {
-    const body: RegisterRequest = await request.json();
-
-    // Validate input
-    if (
-      !body.firstName ||
-      !body.lastName ||
-      !body.email ||
-      !body.password ||
-      !body.userType
-    ) {
-      return NextResponse.json(
-        { message: "Tüm alanlar zorunludur" },
-        { status: 400 }
-      );
-    }
-
-    // Check if user already exists
-    if (mockUsers[body.email]) {
-      return NextResponse.json(
-        { message: "Bu e-posta adresi zaten kullanımda" },
-        { status: 409 }
-      );
-    }
-
-    // In production, hash the password
-    // const hashedPassword = await bcrypt.hash(body.password, 10);
-
-    // Create new user
-    const newUser = {
-      id: `user_${Date.now()}`,
-      firstName: body.firstName,
-      lastName: body.lastName,
-      email: body.email,
-      password: body.password, // Never store plaintext in production!
-      userType: body.userType,
-    };
-
-    mockUsers[body.email] = newUser;
-
-    // In production, you would:
-    // 1. Create a JWT token
-    // 2. Set secure HTTP-only cookie
-    // 3. Send verification email
-
-    return NextResponse.json(
-      {
-        message: "Kayıt başarıyla tamamlandı",        user: {
-          id: newUser.id,
-          firstName: newUser.firstName,
-          lastName: newUser.lastName,
-          email: newUser.email,
-          userType: newUser.userType,
-        },
-      },
-      { status: 201 }
-    );
-  } catch (error) {
-    console.error("Registration error:", error);
-    return NextResponse.json(
-      { message: "Sunucu hatası oluştu" },
-      { status: 500 }
-    );
-  }
-}

src/app/events/page.tsx

@@ -1,9 +1,167 @@
 "use client";
 
+import Link from "next/link";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
+import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
 export default function EventsPage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "/events" },
+    { name: "Çalışma Programı", id: "/schedule" },
+  ];
+
   return (
-    <div>
-      <h1>Events Page</h1>
-    </div>
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Öğretmen Platformu"
+          bottomLeftText="Eğitim Topluluğu"
+          bottomRightText="info@platform.com"
+        />
+      </div>
+
+      <div id="events" data-section="events">
+        <BlogCardTwo
+          blogs={[
+            {
+              id: "1",
+              category: ["Matematik"],
+              title: "Trigonometri Ustalaşma Sürümü",
+              excerpt:
+                "Trigonometri kurallarını derinlemesine öğrenin, örnekler ve pratik problemlerle desteklenen kapsamlı ders.",
+              imageSrc:
+                "http://img.b2bpic.net/free-vector/modern-background-with-geometric-shapes_23-2147546962.jpg?_wi=2",
+              imageAlt: "mathematics geometry trigonometry education board",
+              authorName: "Ayşe Kaya",
+              authorAvatar:
+                "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg",
+              date: "25 Ocak 2025",
+            },
+            {
+              id: "2",
+              category: ["İngilizce"],
+              title: "İngilizce Konuşma Atölyesi",
+              excerpt:
+                "Günlük İngilizce konuşma becerilerinizi geliştirin, doğal diyaloglar ve kültürel bağlam ile.",
+              imageSrc:
+                "http://img.b2bpic.net/free-vector/language-concept-background_23-2147872796.jpg?_wi=2",
+              imageAlt: "english language learning book study",
+              authorName: "Mehmet Yıldız",
+              authorAvatar:
+                "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg",
+              date: "27 Ocak 2025",
+            },
+            {
+              id: "3",
+              category: ["Kimya"],
+              title: "Kimya Deneyimleri Laboratuvarı",
+              excerpt:
+                "Sanal laboratuvarıyla pratik deneyimler gain ve kimyasal reaksiyonları canlı tutun.",
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/close-up-laboratory-test-tubes_23-2148891898.jpg?_wi=2",
+              imageAlt: "chemistry laboratory science experiment beakers",
+              authorName: "Zeynep Demir",
+              authorAvatar:
+                "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg",
+              date: "29 Ocak 2025",
+            },
+            {
+              id: "4",
+              category: ["Tarih"],
+              title: "Osmanlı İmparatorluğu Hikayesi",
+              excerpt:
+                "Osmanlı tarihinin önemli dönemleri, simgesel olaylar ve kültürel etkilerin kapsamlı incelemesi.",
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/view-ancient-paper-scroll-writing-documenting_23-2151751754.jpg?_wi=2",
+              imageAlt: "history book ancient civilization artifacts",
+              authorName: "İbrahim Çelik",
+              authorAvatar:
+                "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg",
+              date: "31 Ocak 2025",
+            },
+          ]}
+          title="Yaklaşan Etkinlikler"
+          description="Etkileşimli ders saatleri ve webinarlar"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          carouselMode="buttons"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitText
+          faqs={[
+            {
+              id: "1",
+              title: "Öğretmen seçerken nelere dikkat etmeliyim?",
+              content:
+                "Öğretmen profillerinde deneyim, uzmanlık alanı ve öğrenci puanlarını inceleyebilirsiniz. İlk dersini denemek için \"İletişime Geç\" düğmesini kullanarak öğretmenle bağlantı kurabilirsiniz.",
+            },
+            {
+              id: "2",
+              title: "Ders saatlerini nasıl düzenleyebilirim?",
+              content:
+                "Çalışma Programı sayfasında haftalık ders takvimini görebilirsiniz. Istediğiniz ders saatine tıklayarak \"Katıl\" butonu ile kaydolabilirsiniz.",
+            },
+            {
+              id: "3",
+              title: "Etkinliklere nasıl katılabilirim?",
+              content:
+                "Etkinlikler sayfasında tüm yaklaşan dersleri ve webinarları görebilirsiniz. İlgilendiğiniz etkinliğin \"Kayıt Ol\" düğmesine tıklayarak katılabilirsiniz.",
+            },
+            {
+              id: "4",
+              title: "Ödeme seçenekleri nelerdir?",
+              content:
+                "Kredi kartı, banka havalesi ve e-cüzdan gibi çeşitli ödeme yöntemlerini destekliyoruz. Ödeme bilgileri gizli ve güvenlidir.",
+            },
+            {
+              id: "5",
+              title: "Dersi iptal etmek istiyorsam ne yapmalıyım?",
+              content:
+                "Dersin başlamasından en az 24 saat önce iptal edebilirsiniz. Profil bölümünde 'Kayıtlı Dersler' kısmından ders iptalini gerçekleştirebilirsiniz.",
+            },
+          ]}
+          sideTitle="Sık Sorulan Sorular"
+          sideDescription="Platformumuz hakkında bilmeniz gereken her şey"
+          textPosition="left"
+          useInvertedBackground={false}
+          animationType="smooth"
+          faqsAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",
+            href: "#",
+          }}
+          rightLink={{
+            text: "Kullanım Şartları",
+            href: "#",
+          }}
+        />
+      </div>
+    </ThemeProvider>
   );
-}
+}

src/app/login/page.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      console.log("Logging in with:", email, password);
-    } catch (err) {
-      console.log("Login failed");
-    }
-  };
-
-  return (
-    <div className="min-h-screen flex items-center justify-center">
-      <form onSubmit={handleLogin} className="w-full max-w-md">
-        <h1 className="text-2xl font-bold mb-6">Login</h1>
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="Email"
-          className="w-full p-2 mb-4 border rounded"
-        />
-        <input
-          type="password"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          placeholder="Password"
-          className="w-full p-2 mb-4 border rounded"
-        />
-        <button type="submit" className="w-full p-2 bg-blue-500 text-white rounded">
-          Login
-        </button>
-      </form>
-    </div>
-  );
-}

src/app/schedule/page.tsx

@@ -1,9 +1,154 @@
 "use client";
 
+import Link from "next/link";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
+import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+
 export default function SchedulePage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "/events" },
+    { name: "Çalışma Programı", id: "/schedule" },
+  ];
+
   return (
-    <div>
-      <h1>Schedule Page</h1>
-    </div>
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="noise"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Öğretmen Platformu"
+          bottomLeftText="Eğitim Topluluğu"
+          bottomRightText="info@platform.com"
+        />
+      </div>
+
+      <div id="schedule-overview" data-section="schedule-overview">
+        <MetricCardEleven
+          metrics={[
+            {
+              id: "1",
+              value: "15",
+              title: "Pazartesi Dersleri",
+              description: "Sabah ve öğleden sonra zaman dilimleri",
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/senior-people-school-class-with-laptop-computer_23-2150104980.jpg?_wi=2",
+              imageAlt: "online course learning platform screen",
+            },
+            {
+              id: "2",
+              value: "18",
+              title: "Çarşamba Dersleri",
+              description: "Öğleden sonra ve akşam saatleri",
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/friends-learning-study-group_23-2149257210.jpg?_wi=2",
+              imageAlt: "education app notification schedule planning",
+            },
+            {
+              id: "3",
+              value: "12",
+              title: "Cuma Dersleri",
+              description: "Hafta sonu yoğunlaştırılmış dersler",
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/crop-men-discussing-graph-tablet_23-2147785037.jpg?_wi=2",
+              imageAlt: "digital education platform analytics dashboard",
+            },
+          ]}
+          title="Haftalık Ders Programı"
+          description="Bütün haftanın ders saatlerini ve öğretmenleri görüntüleyin"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="teachers-schedule" data-section="teachers-schedule">
+        <TeamCardEleven
+          groups={[
+            {
+              id: "monday",
+              groupTitle: "Pazartesi - Sabah Seansı (09:00-12:00)",
+              members: [
+                {
+                  id: "1",
+                  title: "Ayşe Kaya",
+                  subtitle: "Matematik & Fizik",
+                  detail: "09:00 - 10:30 | Sınıf A",
+                  imageSrc:
+                    "http://img.b2bpic.net/free-photo/young-female-glasses-workplace_1301-980.jpg?_wi=2",
+                  imageAlt: "professional woman teacher portrait headshot",
+                },
+                {
+                  id: "2",
+                  title: "Mehmet Yıldız",
+                  subtitle: "İngilizce & Dil",
+                  detail: "10:30 - 12:00 | Sınıf B",
+                  imageSrc:
+                    "http://img.b2bpic.net/free-photo/portrait-businessman-office-3_1262-1489.jpg?_wi=2",
+                  imageAlt: "professional man teacher portrait headshot",
+                },
+              ],
+            },
+            {
+              id: "wednesday",
+              groupTitle: "Çarşamba - Öğleden Sonra (14:00-18:00)",
+              members: [
+                {
+                  id: "3",
+                  title: "Zeynep Demir",
+                  subtitle: "Kimya & Biyoloji",
+                  detail: "14:00 - 15:30 | Lab A",
+                  imageSrc:
+                    "http://img.b2bpic.net/free-photo/woman-posing-with-books_23-2148680219.jpg?_wi=2",
+                  imageAlt: "female scientist professor portrait headshot",
+                },
+                {
+                  id: "4",
+                  title: "İbrahim Çelik",
+                  subtitle: "Tarih & Sosyal Bilgiler",
+                  detail: "16:00 - 17:30 | Sınıf C",
+                  imageSrc:
+                    "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-looking-satisfied_1298-169.jpg?_wi=2",
+                  imageAlt: "male professor teacher history expert portrait",
+                },
+              ],
+            },
+          ]}
+          animationType="slide-up"
+          title="Haftalık Öğretmen Programı"
+          description="Her gün ve saate göre öğretmen atamalarını kontrol edin"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",
+            href: "#",
+          }}
+          rightLink={{
+            text: "Kullanım Şartları",
+            href: "#",
+          }}
+        />
+      </div>
+    </ThemeProvider>
   );
-}
+}

src/app/teachers/[id]/page.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import { useParams } from "next/navigation";
-
-export default function TeacherDetailPage() {
-  const params = useParams();
-  const id = params?.id;
-
-  return (
-    <div>
-      <h1>Teacher Detail Page - ID: {id}</h1>
-    </div>
-  );
-}

src/components/cardStack/CardStack.tsx

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

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,31 +1,187 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import type { CardAnimationType, GridVariant } from "../types";
+import { useDepth3DAnimation } from "./useDepth3DAnimation";
 
-export function useCardAnimation() {
-  const [mounted, setMounted] = useState(false);
-  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+gsap.registerPlugin(ScrollTrigger);
+
+interface UseCardAnimationProps {
+  animationType: CardAnimationType | "depth-3d";
+  itemCount: number;
+  isGrid?: boolean;
+  supports3DAnimation?: boolean;
+  gridVariant?: GridVariant;
+  useIndividualTriggers?: boolean;
+}
+
+export const useCardAnimation = ({
+  animationType,
+  itemCount,
+  isGrid = true,
+  supports3DAnimation = false,
+  gridVariant,
+  useIndividualTriggers = false
+}: UseCardAnimationProps) => {
   const itemRefs = useRef<(HTMLElement | null)[]>([]);
-  const bottomContentRef = useRef<HTMLDivElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const perspectiveRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const perspectiveRef = useRef<HTMLDivElement | null>(null);
+  const bottomContentRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const setItemRef = (index: number, el: HTMLElement | null) => {
-    if (!itemRefs.current) {
-      itemRefs.current = [];
-    }
-    itemRefs.current[index] = el;
-  };
-
-  return {
-    mounted,
-    isMobile,
+  // Enable 3D effect only when explicitly supported and conditions are met
+  const { isMobile } = useDepth3DAnimation({
     itemRefs,
-    setItemRef,
-    bottomContentRef,
     containerRef,
     perspectiveRef,
-  };
-}
+    isEnabled: animationType === "depth-3d" && isGrid && supports3DAnimation && gridVariant === "uniform-all-items-equal",
+  });
+
+  // Use scale-rotate as fallback when depth-3d conditions aren't met
+  const effectiveAnimationType =
+    animationType === "depth-3d" && (isMobile || !isGrid || gridVariant !== "uniform-all-items-equal")
+      ? "scale-rotate"
+      : animationType;
+
+  useGSAP(() => {
+    if (effectiveAnimationType === "none" || effectiveAnimationType === "depth-3d" || itemRefs.current.length === 0) return;
+
+    const items = itemRefs.current.filter((el) => el !== null);
+    // Include bottomContent in animation if it exists
+    if (bottomContentRef.current) {
+      items.push(bottomContentRef.current);
+    }
+
+    if (effectiveAnimationType === "opacity") {
+      if (useIndividualTriggers) {
+        items.forEach((item) => {
+          gsap.fromTo(
+            item,
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 1.25,
+              ease: "sine",
+              scrollTrigger: {
+                trigger: item,
+                start: "top 80%",
+                toggleActions: "play none none none",
+              },
+            }
+          );
+        });
+      } else {
+        gsap.fromTo(
+          items,
+          { opacity: 0 },
+          {
+            opacity: 1,
+            duration: 1.25,
+            stagger: 0.15,
+            ease: "sine",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      }
+    } else if (effectiveAnimationType === "slide-up") {
+      items.forEach((item, index) => {
+        gsap.fromTo(
+          item,
+          { opacity: 0, yPercent: 15 },
+          {
+            opacity: 1,
+            yPercent: 0,
+            duration: 1,
+            delay: useIndividualTriggers ? 0 : index * 0.15,
+            ease: "sine",
+            scrollTrigger: {
+              trigger: useIndividualTriggers ? item : items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      });
+    } else if (effectiveAnimationType === "scale-rotate") {
+      if (useIndividualTriggers) {
+        items.forEach((item) => {
+          gsap.fromTo(
+            item,
+            { scaleX: 0, rotate: 10 },
+            {
+              scaleX: 1,
+              rotate: 0,
+              duration: 1,
+              ease: "power3",
+              scrollTrigger: {
+                trigger: item,
+                start: "top 80%",
+                toggleActions: "play none none none",
+              },
+            }
+          );
+        });
+      } else {
+        gsap.fromTo(
+          items,
+          { scaleX: 0, rotate: 10 },
+          {
+            scaleX: 1,
+            rotate: 0,
+            duration: 1,
+            stagger: 0.15,
+            ease: "power3",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      }
+    } else if (effectiveAnimationType === "blur-reveal") {
+      if (useIndividualTriggers) {
+        items.forEach((item) => {
+          gsap.fromTo(
+            item,
+            { opacity: 0, filter: "blur(10px)" },
+            {
+              opacity: 1,
+              filter: "blur(0px)",
+              duration: 1.2,
+              ease: "power2.out",
+              scrollTrigger: {
+                trigger: item,
+                start: "top 80%",
+                toggleActions: "play none none none",
+              },
+            }
+          );
+        });
+      } else {
+        gsap.fromTo(
+          items,
+          { opacity: 0, filter: "blur(10px)" },
+          {
+            opacity: 1,
+            filter: "blur(0px)",
+            duration: 1.2,
+            stagger: 0.15,
+            ease: "power2.out",
+            scrollTrigger: {
+              trigger: items[0],
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+          }
+        );
+      }
+    }
+  }, [effectiveAnimationType, itemCount, useIndividualTriggers]);
+
+  return { itemRefs, containerRef, perspectiveRef, bottomContentRef };
+};

src/components/cardStack/hooks/useDepth3DAnimation.ts

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

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

@@ -1,25 +1,149 @@
 "use client";
 
-import React from "react";
+import React, { Children, useCallback } from "react";
+import { cls } from "@/lib/utils";
+import CardStackTextBox from "../../CardStackTextBox";
+import { useCardAnimation } from "../../hooks/useCardAnimation";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TimelineVariant = "timeline";
 
 interface TimelineBaseProps {
-  title: string;
+  children: React.ReactNode;
+  variant?: TimelineVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title?: string;
+  titleSegments?: TitleSegment[];
   description?: string;
-  children?: React.ReactNode;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout?: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  ariaLabel?: string;
 }
 
-export const TimelineBase: React.FC<TimelineBaseProps> = ({
-  title,
-  description,
+const TimelineBase = ({
   children,
-}) => {
+  variant = "timeline",
+  uniformGridCustomHeightClasses = "min-h-80 2xl:min-h-90",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout = "default",
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  ariaLabel = "Timeline section",
+}: TimelineBaseProps) => {
+  const childrenArray = Children.toArray(children);
+  const { itemRefs } = useCardAnimation({
+    animationType,
+    itemCount: childrenArray.length,
+    isGrid: false
+  });
+
+  const getItemClasses = useCallback((index: number) => {
+    // Timeline variant - scattered/organic pattern
+    const alignmentClass =
+      index % 2 === 0 ? "self-start ml-0" : "self-end mr-0";
+
+    const marginClasses = cls(
+      index % 4 === 0 && "md:ml-0",
+      index % 4 === 1 && "md:mr-20",
+      index % 4 === 2 && "md:ml-15",
+      index % 4 === 3 && "md:mr-30"
+    );
+
+    return cls(alignmentClass, marginClasses);
+  }, []);
+
   return (
-    <div className="timeline-base">
-      <h2 className="text-2xl font-bold">{title}</h2>
-      {description && <p className="text-base text-accent/75">{description}</p>}
-      {children}
-    </div>
+    <section
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground && "bg-foreground",
+        className
+      )}
+      aria-label={ariaLabel}
+    >
+      <div
+        className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
+      >
+        {(title || titleSegments || description) && (
+          <CardStackTextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            textBoxClassName={textBoxClassName}
+            titleClassName={titleClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            descriptionClassName={descriptionClassName}
+            tagClassName={tagClassName}
+            buttonContainerClassName={buttonContainerClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+          />
+        )}
+        <div
+          className={cls(
+            "relative z-10 flex flex-col gap-6 md:gap-15"
+          )}
+        >
+          {Children.map(childrenArray, (child, index) => (
+            <div
+              key={index}
+              className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
+              ref={(el) => { itemRefs.current[index] = el; }}
+            >
+              {child}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
   );
 };
 
-export default TimelineBase;
+TimelineBase.displayName = "TimelineBase";
+
+export default React.memo(TimelineBase);

src/components/sections/contact/ContactCenter.tsx

@@ -1,30 +1,131 @@
 "use client";
 
-import React from "react";
+import ContactForm from "@/components/form/ContactForm";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { sendContactEmail } from "@/utils/sendContactEmail";
+import type { ButtonAnimationType } from "@/types/button";
+
+type ContactCenterBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
 
 interface ContactCenterProps {
-  title: string;
-  description: string;
-  tag?: string;
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    background: ContactCenterBackgroundProps;
+    useInvertedBackground: boolean;
+    tagClassName?: string;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    termsText?: string;
+    onSubmit?: (email: string) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
 }
 
-export const ContactCenter: React.FC<ContactCenterProps> = ({
-  title,
-  description,
-  tag,
-}) => {
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("Form submitted");
-  };
+const ContactCenter = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    background,
+    useInvertedBackground,
+    tagClassName = "",
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+}: ContactCenterProps) => {
 
-  return (
-    <form onSubmit={handleSubmit} className="contact-center">
-      {tag && <span className="text-sm">{tag}</span>}
-      <h2 className="text-2xl font-bold">{title}</h2>
-      <p className="text-base">{description}</p>
-    </form>
-  );
+    const handleSubmit = async (email: string) => {
+        try {
+            await sendContactEmail({ email });
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("relative w-full card p-6 md:p-0 py-20 md:py-20 rounded-theme-capped flex items-center justify-center", contentClassName)}>
+                    <div className="relative z-10 w-full md:w-1/2">
+                        <ContactForm
+                            tag={tag}
+                            tagIcon={tagIcon}
+                            tagAnimation={tagAnimation}
+                            title={title}
+                            description={description}
+                            useInvertedBackground={useInvertedBackground}
+                            inputPlaceholder={inputPlaceholder}
+                            buttonText={buttonText}
+                            termsText={termsText}
+                            onSubmit={handleSubmit}
+                            centered={true}
+                            tagClassName={tagClassName}
+                            titleClassName={titleClassName}
+                            descriptionClassName={descriptionClassName}
+                            formWrapperClassName={cls("md:w-8/10 2xl:w-6/10", formWrapperClassName)}
+                            formClassName={formClassName}
+                            inputClassName={inputClassName}
+                            buttonClassName={buttonClassName}
+                            buttonTextClassName={buttonTextClassName}
+                            termsClassName={termsClassName}
+                        />
+                    </div>
+                    <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
+                        <HeroBackgrounds {...background} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
 };
 
+ContactCenter.displayName = "ContactCenter";
+
 export default ContactCenter;

src/components/sections/contact/ContactSplit.tsx

@@ -1,27 +1,171 @@
 "use client";
 
-import React from "react";
+import ContactForm from "@/components/form/ContactForm";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { LucideIcon } from "lucide-react";
+import { sendContactEmail } from "@/utils/sendContactEmail";
+import type { ButtonAnimationType } from "@/types/button";
+
+type ContactSplitBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
 
 interface ContactSplitProps {
-  title: string;
-  description: string;
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    background: ContactSplitBackgroundProps;
+    useInvertedBackground: boolean;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    mediaAnimation: ButtonAnimationType;
+    inputPlaceholder?: string;
+    buttonText?: string;
+    termsText?: string;
+    onSubmit?: (email: string) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    contactFormClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
 }
 
-export const ContactSplit: React.FC<ContactSplitProps> = ({
-  title,
-  description,
-}) => {
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    console.log("Form submitted");
-  };
+const ContactSplit = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    background,
+    useInvertedBackground,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Contact section video",
+    mediaPosition = "right",
+    mediaAnimation,
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    contactFormClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: ContactSplitProps) => {
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
 
-  return (
-    <form onSubmit={handleSubmit} className="contact-split">
-      <h2 className="text-2xl font-bold">{title}</h2>
-      <p className="text-base">{description}</p>
-    </form>
-  );
+    const handleSubmit = async (email: string) => {
+        try {
+            await sendContactEmail({ email });
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
+    };
+
+    const contactContent = (
+        <div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
+            <ContactForm
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                title={title}
+                description={description}
+                useInvertedBackground={useInvertedBackground}
+                inputPlaceholder={inputPlaceholder}
+                buttonText={buttonText}
+                termsText={termsText}
+                onSubmit={handleSubmit}
+                centered={true}
+                className={cls("w-full", contactFormClassName)}
+                tagClassName={tagClassName}
+                titleClassName={titleClassName}
+                descriptionClassName={descriptionClassName}
+                formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
+                formClassName={formClassName}
+                inputClassName={inputClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                termsClassName={termsClassName}
+            />
+            <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
+                <HeroBackgrounds {...background} />
+            </div>
+        </div>
+    );
+
+    const mediaContent = (
+        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
+                    {mediaPosition === "left" && mediaContent}
+                    {contactContent}
+                    {mediaPosition === "right" && mediaContent}
+                </div>
+            </div>
+        </section>
+    );
 };
 
+ContactSplit.displayName = "ContactSplit";
+
 export default ContactSplit;

src/components/sections/contact/ContactSplitForm.tsx

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

src/components/sections/pricing/PricingCardEight.tsx

@@ -1,22 +1,248 @@
 "use client";
 
-import React from "react";
+import { memo } from "react";
+import CardStack from "@/components/cardStack/CardStack";
+import Button from "@/components/button/Button";
+import PricingBadge from "@/components/shared/PricingBadge";
+import PricingFeatureList from "@/components/shared/PricingFeatureList";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
 
-interface PricingCardEightProps {
-  title: string;
-  price: string;
-}
-
-export const PricingCardEight: React.FC<PricingCardEightProps> = ({
-  title,
-  price,
-}) => {
-  return (
-    <div className="pricing-card-eight">
-      <h3 className="text-xl font-bold">{title}</h3>
-      <p className="text-lg">{price}</p>
-    </div>
-  );
+type PricingPlan = {
+    id: string;
+    badge: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    subtitle: string;
+    buttons: ButtonConfig[];
+    features: string[];
 };
 
+interface PricingCardEightProps {
+    plans: PricingPlan[];
+    carouselMode?: "auto" | "buttons";
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+}
+
+interface PricingCardItemProps {
+    plan: PricingPlan;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    badgeClassName?: string;
+    priceClassName?: string;
+    subtitleClassName?: string;
+    planButtonContainerClassName?: string;
+    planButtonClassName?: string;
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
+
+const PricingCardItem = memo(({
+    plan,
+    shouldUseLightText,
+    cardClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+}: PricingCardItemProps) => {
+    const theme = useTheme();
+
+    const getButtonConfigProps = () => {
+        if (theme.defaultButtonVariant === "hover-bubble") {
+            return { bgClassName: "w-full" };
+        }
+        if (theme.defaultButtonVariant === "icon-arrow") {
+            return { className: "justify-between" };
+        }
+        return {};
+    };
+
+    return (
+        <div className={cls("relative h-full card text-foreground rounded-theme-capped p-3 flex flex-col gap-3", cardClassName)}>
+            <div className="relative secondary-button p-3 flex flex-col gap-3 rounded-theme-capped" >
+                <PricingBadge
+                    badge={plan.badge}
+                    badgeIcon={plan.badgeIcon}
+                    className={badgeClassName}
+                />
+
+                <div className="relative z-1 flex flex-col gap-1">
+                    <div className="text-5xl font-medium text-foreground">
+                        {plan.price}
+                    </div>
+
+                    <p className="text-base text-foreground">
+                        {plan.subtitle}
+                    </p>
+                </div>
+
+                {plan.buttons && plan.buttons.length > 0 && (
+                    <div className={cls("relative z-1 w-full flex flex-col gap-3", planButtonContainerClassName)}>
+                        {plan.buttons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(
+                                    { ...button, props: { ...button.props, ...getButtonConfigProps() } },
+                                    index,
+                                    theme.defaultButtonVariant,
+                                    cls("w-full", planButtonClassName)
+                                )}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            <div className="p-3 pt-0" >
+                <PricingFeatureList
+                    features={plan.features}
+                    shouldUseLightText={shouldUseLightText}
+                    className={cls("mt-1", featuresClassName)}
+                    featureItemClassName={featureItemClassName}
+                />
+            </div>
+        </div>
+    );
+});
+
+PricingCardItem.displayName = "PricingCardItem";
+
+const PricingCardEight = ({
+    plans,
+    carouselMode = "buttons",
+    uniformGridCustomHeightClasses,
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Pricing section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    badgeClassName = "",
+    priceClassName = "",
+    subtitleClassName = "",
+    planButtonContainerClassName = "",
+    planButtonClassName = "",
+    featuresClassName = "",
+    featureItemClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: PricingCardEightProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant="uniform-all-items-equal"
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+            
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {plans.map((plan, index) => (
+                <PricingCardItem
+                    key={`${plan.id}-${index}`}
+                    plan={plan}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    badgeClassName={badgeClassName}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
+            ))}
+        </CardStack>
+    );
+};
+
+PricingCardEight.displayName = "PricingCardEight";
+
 export default PricingCardEight;

src/hooks/useCheckout.ts

@@ -1,19 +1,117 @@
+"use client";
+
 import { useState } from "react";
+import { Product } from "@/lib/api/product";
+
+export type CheckoutItem = {
+    productId: string;
+    quantity: number;
+    imageSrc?: string;
+    imageAlt?: string;
+    metadata?: {
+        brand?: string;
+        variant?: string;
+        rating?: number;
+        reviewCount?: string;
+        [key: string]: string | number | undefined;
+    };
+};
+
+export type CheckoutResult = {
+    success: boolean;
+    url?: string;
+    error?: string;
+};
 
 export function useCheckout() {
-  const [cartItems, setCartItems] = useState<Array<{
-    id: string;
-    name: string;
-    quantity: number;
-  }>>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
 
-  const handleCheckout = () => {
-    console.log("Checking out with items:", cartItems);
-  };
+    const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+        const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
 
-  return {
-    cartItems,
-    setCartItems,
-    handleCheckout,
-  };
-}
+        if (!apiUrl || !projectId) {
+            const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
+            setError(errorMsg);
+            return { success: false, error: errorMsg };
+        }
+
+        setIsLoading(true);
+        setError(null);
+
+        try {
+
+            const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    projectId,
+                    items,
+                    successUrl: options?.successUrl || window.location.href,
+                    cancelUrl: options?.cancelUrl || window.location.href,
+                }),
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                const errorMsg = errorData.message || `Request failed with status ${response.status}`;
+                setError(errorMsg);
+                return { success: false, error: errorMsg };
+            }
+
+            const data = await response.json();
+
+            if (data.data.url) {
+                window.location.href = data.data.url;
+            }
+
+            return { success: true, url: data.data.url };
+        } catch (err) {
+            const errorMsg = err instanceof Error ? err.message : "Failed to create checkout session";
+            setError(errorMsg);
+            return { success: false, error: errorMsg };
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const buyNow = async (product: Product | string, quantity: number = 1): Promise<CheckoutResult> => {
+        const successUrl = new URL(window.location.href);
+        successUrl.searchParams.set("success", "true");
+
+        if (typeof product === "string") {
+            return checkout([{ productId: product, quantity }], { successUrl: successUrl.toString() });
+        }
+
+        let metadata: CheckoutItem["metadata"] = {};
+
+        if (product.metadata && Object.keys(product.metadata).length > 0) {
+            const { imageSrc, imageAlt, images, ...restMetadata } = product.metadata;
+            metadata = restMetadata;
+        } else {
+            if (product.brand) metadata.brand = product.brand;
+            if (product.variant) metadata.variant = product.variant;
+            if (product.rating !== undefined) metadata.rating = product.rating;
+            if (product.reviewCount) metadata.reviewCount = product.reviewCount;
+        }
+
+        return checkout([{
+            productId: product.id,
+            quantity,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt,
+            metadata: Object.keys(metadata).length > 0 ? metadata : undefined,
+        }], { successUrl: successUrl.toString() });
+    };
+
+    return {
+        checkout,
+        buyNow,
+        isLoading,
+        error,
+        clearError: () => setError(null),
+    };
+}

src/hooks/useProductCatalog.ts

@@ -1,14 +1,115 @@
-import { useState, useEffect } from "react";
+"use client";
 
-export function useProductCatalog() {
-  const [products, setProducts] = useState<Array<{
-    id: string;
-    name: string;
-  }>>([]);
+import { useState, useMemo, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { useProducts } from "./useProducts";
+import type { Product } from "@/lib/api/product";
+import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
 
-  useEffect(() => {
-    console.log("Loading products");
-  }, []);
+export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
 
-  return { products };
+interface UseProductCatalogOptions {
+    basePath?: string;
+}
+
+export function useProductCatalog(options: UseProductCatalogOptions = {}) {
+    const { basePath = "/shop" } = options;
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+
+    const [search, setSearch] = useState("");
+    const [category, setCategory] = useState("All");
+    const [sort, setSort] = useState<SortOption>("Newest");
+
+    const handleProductClick = useCallback((productId: string) => {
+        router.push(`${basePath}/${productId}`);
+    }, [router, basePath]);
+
+    const catalogProducts: CatalogProduct[] = useMemo(() => {
+        if (fetchedProducts.length === 0) return [];
+
+        return fetchedProducts.map((product) => ({
+            id: product.id,
+            name: product.name,
+            price: product.price,
+            imageSrc: product.imageSrc,
+            imageAlt: product.imageAlt || product.name,
+            rating: product.rating || 0,
+            reviewCount: product.reviewCount,
+            category: product.brand,
+            onProductClick: () => handleProductClick(product.id),
+        }));
+    }, [fetchedProducts, handleProductClick]);
+
+    const categories = useMemo(() => {
+        const categorySet = new Set<string>();
+        catalogProducts.forEach((product) => {
+            if (product.category) {
+                categorySet.add(product.category);
+            }
+        });
+        return Array.from(categorySet).sort();
+    }, [catalogProducts]);
+
+    const filteredProducts = useMemo(() => {
+        let result = catalogProducts;
+
+        if (search) {
+            const q = search.toLowerCase();
+            result = result.filter(
+                (p) =>
+                    p.name.toLowerCase().includes(q) ||
+                    (p.category?.toLowerCase().includes(q) ?? false)
+            );
+        }
+
+        if (category !== "All") {
+            result = result.filter((p) => p.category === category);
+        }
+
+        if (sort === "Price: Low-High") {
+            result = [...result].sort(
+                (a, b) =>
+                    parseFloat(a.price.replace("$", "").replace(",", "")) -
+                    parseFloat(b.price.replace("$", "").replace(",", ""))
+            );
+        } else if (sort === "Price: High-Low") {
+            result = [...result].sort(
+                (a, b) =>
+                    parseFloat(b.price.replace("$", "").replace(",", "")) -
+                    parseFloat(a.price.replace("$", "").replace(",", ""))
+            );
+        }
+
+        return result;
+    }, [catalogProducts, search, category, sort]);
+
+    const filters: ProductVariant[] = useMemo(() => [
+        {
+            label: "Category",
+            options: ["All", ...categories],
+            selected: category,
+            onChange: setCategory,
+        },
+        {
+            label: "Sort",
+            options: ["Newest", "Price: Low-High", "Price: High-Low"] as SortOption[],
+            selected: sort,
+            onChange: (value) => setSort(value as SortOption),
+        },
+    ], [categories, category, sort]);
+
+    return {
+        products: filteredProducts,
+        isLoading,
+        search,
+        setSearch,
+        category,
+        setCategory,
+        sort,
+        setSort,
+        filters,
+        categories,
+    };
 }

src/hooks/useProductDetail.ts

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

src/lib/api/product.ts

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