Merge version_2 into main

2026-03-06 22:21:14 +00:00 · 2026-03-06 22:19:49 +00:00 · 2026-03-06 22:18:40 +00:00 · 2026-03-06 22:16:52 +00:00 · 2026-03-06 22:15:04 +00:00 · 2026-03-06 22:09:31 +00:00
18 changed files with 2322 additions and 464 deletions
--- a/src/app/api/auth/login/route.ts
+++ b/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 }
    );
  }
 }
--- a/src/app/api/auth/register/route.ts
+++ b/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 }
    );
  }
 }
--- a/src/app/events/page.tsx
+++ b/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>
+    <ThemeProvider
-      <h1>Events Page</h1>
+      defaultButtonVariant="text-shift"
-    </div>
+      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>
  );
 }
--- a/src/app/login/page.tsx
+++ b/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>
  );
 }
--- a/src/app/schedule/page.tsx
+++ b/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>
+    <ThemeProvider
-      <h1>Schedule Page</h1>
+      defaultButtonVariant="text-shift"
-    </div>
+      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>
  );
 }
--- a/src/app/teachers/[id]/page.tsx
+++ b/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>
  );
 }
--- a/src/components/cardStack/CardStack.tsx
+++ b/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 {
+const CardStack = ({
-  children?: React.ReactNode;
+    children,
-  title: string;
+    mode = "buttons",
-  description?: string;
+    gridVariant = "uniform-all-items-equal",
-  mediaItems?: Array<{ id: string; imageSrc?: string; imageAlt?: string }>;
+    uniformGridCustomHeightClasses,
-  tag?: string;
+    gridRowsClassName,
-  tagIcon?: React.ComponentType<{ className?: string }>;
+    itemHeightClassesOverride,
-  textboxLayout?: string;
+    animationType,
-  animationType?: string;
+    supports3DAnimation = false,
-  useInvertedBackground?: boolean;
+    title,
-  ariaLabel?: string;
+    titleSegments,
-  className?: string;
+    description,
-  gridVariant?: string;
+    tag,
-  uniformGridCustomHeightClasses?: string;
+    tagIcon,
-  carouselThreshold?: number;
+    tagAnimation,
-  carouselMode?: "auto" | "buttons";
+    buttons,
-  carouselItemClassName?: string;
+    buttonAnimation,
-  mode?: "auto" | "buttons";
+    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> = ({
+    // Check if the current grid config has gridRows defined
-  children,
+    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
-  title,
+    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
  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);
-  return (
+    // If grid has fixed row heights and we have uniformGridCustomHeightClasses,
-    <TimelineBase title={title} description={description}>
+    // we need to use min-h-0 on md+ to prevent conflicts
-      {children}
+    let adjustedHeightClasses = uniformGridCustomHeightClasses;
-    </TimelineBase>
+    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);
--- a/src/components/cardStack/hooks/useCardAnimation.ts
+++ b/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() {
+gsap.registerPlugin(ScrollTrigger);
-  const [mounted, setMounted] = useState(false);
+
-  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+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>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
+  const perspectiveRef = useRef<HTMLDivElement | null>(null);
-  const perspectiveRef = useRef<HTMLDivElement>(null);
+  const bottomContentRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
+  // Enable 3D effect only when explicitly supported and conditions are met
-    setMounted(true);
+  const { isMobile } = useDepth3DAnimation({
  }, []);
  const setItemRef = (index: number, el: HTMLElement | null) => {
    if (!itemRefs.current) {
      itemRefs.current = [];
    }
    itemRefs.current[index] = el;
  };
  return {
    mounted,
    isMobile,
    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 };
 };
--- a/src/components/cardStack/hooks/useDepth3DAnimation.ts
+++ b/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 MOBILE_BREAKPOINT = 768;
-  const [mounted, setMounted] = useState(false);
+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 };
 };
--- a/src/components/cardStack/layouts/timelines/TimelineBase.tsx
+++ b/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> = ({
+const TimelineBase = ({
  title,
  description,
  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">
+    <section
-      <h2 className="text-2xl font-bold">{title}</h2>
+      className={cls(
-      {description && <p className="text-base text-accent/75">{description}</p>}
+        "relative py-20 w-full",
-      {children}
+        useInvertedBackground && "bg-foreground",
-    </div>
+        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);
--- a/src/components/sections/contact/ContactCenter.tsx
+++ b/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;
+    title: string;
-  description: string;
+    description: string;
-  tag?: 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> = ({
+const ContactCenter = ({
-  title,
+    title,
-  description,
+    description,
-  tag,
+    tag,
-}) => {
+    tagIcon,
-  const handleSubmit = (e: React.FormEvent) => {
+    tagAnimation,
-    e.preventDefault();
+    background,
-    console.log("Form submitted");
+    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 (
+    const handleSubmit = async (email: string) => {
-    <form onSubmit={handleSubmit} className="contact-center">
+        try {
-      {tag && <span className="text-sm">{tag}</span>}
+            await sendContactEmail({ email });
-      <h2 className="text-2xl font-bold">{title}</h2>
+            console.log("Email send successfully");
-      <p className="text-base">{description}</p>
+        } catch (error) {
-    </form>
+            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;
--- a/src/components/sections/contact/ContactSplit.tsx
+++ b/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;
+    title: string;
-  description: 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> = ({
+const ContactSplit = ({
-  title,
+    title,
-  description,
+    description,
-}) => {
+    tag,
-  const handleSubmit = (e: React.FormEvent) => {
+    tagIcon,
-    e.preventDefault();
+    tagAnimation,
-    console.log("Form submitted");
+    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 (
+    const handleSubmit = async (email: string) => {
-    <form onSubmit={handleSubmit} className="contact-split">
+        try {
-      <h2 className="text-2xl font-bold">{title}</h2>
+            await sendContactEmail({ email });
-      <p className="text-base">{description}</p>
+            console.log("Email send successfully");
-    </form>
+        } 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;
--- a/src/components/sections/contact/ContactSplitForm.tsx
+++ b/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 {
+export interface InputField {
-  title: string;
+    name: string;
    type: string;
    placeholder: string;
    required?: boolean;
    className?: string;
 }
-export const ContactSplitForm: React.FC<ContactSplitFormProps> = ({ title }) => {
+export interface TextareaField {
-  const handleSubmit = (e: React.FormEvent) => {
+    name: string;
-    e.preventDefault();
+    placeholder: string;
-    console.log("Form submitted");
+    rows?: number;
-  };
+    required?: boolean;
    className?: string;
 }
-  return (
+interface ContactSplitFormProps {
-    <form onSubmit={handleSubmit} className="contact-split-form">
+    title: string;
-      <h2 className="text-2xl font-bold">{title}</h2>
+    description: string;
-    </form>
+    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;
--- a/src/components/sections/pricing/PricingCardEight.tsx
+++ b/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 {
+type PricingPlan = {
-  title: string;
+    id: string;
-  price: string;
+    badge: string;
-}
+    badgeIcon?: LucideIcon;
-
+    price: string;
-export const PricingCardEight: React.FC<PricingCardEightProps> = ({
+    subtitle: string;
-  title,
+    buttons: ButtonConfig[];
-  price,
+    features: string[];
 }) => {
  return (
    <div className="pricing-card-eight">
      <h3 className="text-xl font-bold">{title}</h3>
      <p className="text-lg">{price}</p>
    </div>
  );
 };
 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;
--- a/src/hooks/useCheckout.ts
+++ b/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<{
+    const [isLoading, setIsLoading] = useState(false);
-    id: string;
+    const [error, setError] = useState<string | null>(null);
    name: string;
    quantity: number;
  }>>([]);
-  const handleCheckout = () => {
+    const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
-    console.log("Checking out with items:", cartItems);
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-  };
+        const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
-  return {
+        if (!apiUrl || !projectId) {
-    cartItems,
+            const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
-    setCartItems,
+            setError(errorMsg);
-    handleCheckout,
+            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),
    };
 }
--- a/src/hooks/useProductCatalog.ts
+++ b/src/hooks/useProductCatalog.ts
@@ -1,14 +1,115 @@
-import { useState, useEffect } from "react";
+"use client";
-export function useProductCatalog() {
+import { useState, useMemo, useCallback } from "react";
-  const [products, setProducts] = useState<Array<{
+import { useRouter } from "next/navigation";
-    id: string;
+import { useProducts } from "./useProducts";
-    name: string;
+import type { Product } from "@/lib/api/product";
-  }>>([]);
+import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
 import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-  useEffect(() => {
+export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
    console.log("Loading products");
  }, []);
-  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,
    };
 }
--- a/src/hooks/useProductDetail.ts
+++ b/src/hooks/useProductDetail.ts
@@ -1,14 +1,196 @@
-import { useState, useEffect } from "react";
+"use client";
-export function useProductDetail(id: string) {
+import { useState, useMemo, useCallback } from "react";
-  const [product, setProduct] = useState<{
+import { useProduct } from "./useProduct";
-    id: string;
+import type { Product } from "@/lib/api/product";
-    name: string;
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-  } | null>(null);
+import type { ExtendedCartItem } from "./useCart";
-  useEffect(() => {
+interface ProductImage {
-    console.log("Loading product:", id);
+    src: string;
-  }, [id]);
+    alt: string;
-
+}
-  return { product };
+
 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,
    };
 }
--- a/src/lib/api/product.ts
+++ b/src/lib/api/product.ts
@@ -1,44 +1,219 @@
-export interface Product {
+export type Product = {
-  id: string;
+    id: string;
-  name: string;
+    name: string;
-  price: string;
+    price: string;
-  imageSrc: string;
+    imageSrc: string;
-  imageAlt?: string;
+    imageAlt?: string;
-  rating?: number;
+    images?: string[];
-  reviewCount?: number;
+    brand?: 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 {
+export async function fetchProducts(): Promise<Product[]> {
-  id: string;
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-  name: string;
+    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
-  price: string;
+
-  imageSrc: string;
+    if (!apiUrl || !projectId) {
-  imageAlt?: string;
+        return [];
-  onFavorite?: () => void;
+    }
-  isFavorited?: boolean;
+
-  onProductClick?: () => void;
+    try {
-  rating?: number;
+        const url = `${apiUrl}/stripe/project/products?projectId=${projectId}&expandDefaultPrice=true`;
-  reviewCount?: number;
+        const response = await fetch(url, {
-  brand?: string;
+            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) {
+export async function fetchProduct(productId: string): Promise<Product | null> {
-  try {
+    const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-    console.log("Fetching product:", id);
+    const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
    return null;
  } catch (err) {
    console.log("Failed to fetch product");
    return null;
  }
 }
-export async function fetchProducts() {
+    if (!apiUrl || !projectId) {
-  try {
+        return null;
-    console.log("Fetching products");
+    }
-    return [];
+
-  } catch (err) {
+    try {
-    console.log("Failed to fetch products");
+        const url = `${apiUrl}/stripe/project/products/${productId}?projectId=${projectId}&expandDefaultPrice=true`;
-    return [];
+        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;
    }
 }
Author	SHA1	Message	Date
bender	d1df86219e	Merge version_2 into main Merge version_2 into main	2026-03-06 22:21:14 +00:00
bender	2c849e1bf8	Merge version_2 into main Merge version_2 into main	2026-03-06 22:19:49 +00:00
bender	7fb0941584	Merge version_2 into main Merge version_2 into main	2026-03-06 22:18:40 +00:00
bender	f13a3325c9	Merge version_2 into main Merge version_2 into main	2026-03-06 22:16:52 +00:00
bender	9f7b6cc123	Merge version_2 into main Merge version_2 into main	2026-03-06 22:15:04 +00:00
bender	60a276e40b	Merge version_2 into main Merge version_2 into main	2026-03-06 22:09:31 +00:00
bender	cb74bd6a08	Merge version_2 into main Merge version_2 into main	2026-03-06 21:55:49 +00:00
bender	ecec418b7a	Update src/app/contact/page.tsx	2026-03-06 21:54:31 +00:00
bender	7ccb762324	Update src/app/register/page.tsx	2026-03-06 21:51:34 +00:00
bender	acb0030513	Update src/app/contact/page.tsx	2026-03-06 21:51:34 +00:00
bender	7f0f34f7ca	Update src/app/teachers/page.tsx	2026-03-06 21:48:41 +00:00
bender	6825213821	Add src/app/teacher-dashboard/page.tsx	2026-03-06 21:48:40 +00:00
bender	baf13bce50	Add src/app/teacher-dashboard/layout.tsx	2026-03-06 21:48:40 +00:00
bender	d478955ac3	Update src/app/styles/variables.css	2026-03-06 21:48:39 +00:00
bender	9fcb0e446f	Update src/app/styles/base.css	2026-03-06 21:48:39 +00:00
bender	568c47867a	Add src/app/register/page.tsx	2026-03-06 21:48:38 +00:00
bender	f3c358c000	Update src/app/page.tsx	2026-03-06 21:48:38 +00:00
bender	b0c084ddad	Add src/app/not-found.tsx	2026-03-06 21:48:37 +00:00
bender	ff96007360	Update src/app/layout.tsx	2026-03-06 21:48:37 +00:00
bender	e5ebdb49fc	Add src/app/help/page.tsx	2026-03-06 21:48:36 +00:00
bender	e0c048b9c4	Add src/app/dashboard/page.tsx	2026-03-06 21:48:36 +00:00
bender	05be6e80bf	Add src/app/contact/page.tsx	2026-03-06 21:48:35 +00:00
bender	d127392ee8	Add public/site.webmanifest	2026-03-06 21:48:35 +00:00
bender	085cee5860	Add public/robots.txt	2026-03-06 21:48:34 +00:00
bender	536348a49a	Switch to version 1: remove src/app/teachers/[id]/page.tsx	2026-03-06 21:43:28 +00:00
bender	bbe53fb045	Switch to version 1: remove src/app/teacher-dashboard/page.tsx	2026-03-06 21:43:27 +00:00
bender	9a6b78854a	Switch to version 1: remove src/app/register/page.tsx	2026-03-06 21:43:27 +00:00
bender	9fee945c98	Switch to version 1: remove src/app/not-found.tsx	2026-03-06 21:43:26 +00:00
bender	f27c6debcc	Switch to version 1: remove src/app/login/page.tsx	2026-03-06 21:43:26 +00:00
bender	9e002aff62	Switch to version 1: remove src/app/dashboard/page.tsx	2026-03-06 21:43:25 +00:00
bender	76c6e4864b	Switch to version 1: remove src/app/contact/page.tsx	2026-03-06 21:43:25 +00:00
bender	e71318a94c	Switch to version 1: remove src/app/api/auth/register/route.ts	2026-03-06 21:43:24 +00:00
bender	25f8715b22	Switch to version 1: remove src/app/api/auth/login/route.ts	2026-03-06 21:43:24 +00:00
bender	ba3ee41d83	Switch to version 1: remove public/site.webmanifest	2026-03-06 21:43:23 +00:00
bender	3178315c66	Switch to version 1: modified src/lib/api/product.ts	2026-03-06 21:43:23 +00:00
bender	6616548a0b	Switch to version 1: modified src/hooks/useProductDetail.ts	2026-03-06 21:43:22 +00:00
bender	7948f1a727	Switch to version 1: modified src/hooks/useProductCatalog.ts	2026-03-06 21:43:22 +00:00
bender	664a624709	Switch to version 1: modified src/hooks/useCheckout.ts	2026-03-06 21:43:21 +00:00
bender	7a21b26360	Switch to version 1: modified src/components/sections/pricing/PricingCardEight.tsx	2026-03-06 21:43:21 +00:00
bender	83ad92b982	Switch to version 1: modified src/components/sections/contact/ContactSplitForm.tsx	2026-03-06 21:43:20 +00:00
bender	6b65c6bbe1	Switch to version 1: modified src/components/sections/contact/ContactSplit.tsx	2026-03-06 21:43:19 +00:00
bender	0bea53ab83	Switch to version 1: modified src/components/sections/contact/ContactCenter.tsx	2026-03-06 21:43:19 +00:00
bender	a5b051a2ca	Switch to version 1: modified src/components/cardStack/layouts/timelines/TimelineBase.tsx	2026-03-06 21:43:18 +00:00
bender	7c4cfe3b64	Switch to version 1: modified src/components/cardStack/hooks/useDepth3DAnimation.ts	2026-03-06 21:43:18 +00:00
bender	f6923aadd4	Switch to version 1: modified src/components/cardStack/hooks/useCardAnimation.ts	2026-03-06 21:43:17 +00:00
bender	7d9c48ae02	Switch to version 1: modified src/components/cardStack/CardStack.tsx	2026-03-06 21:43:17 +00:00
bender	d97972a3ff	Switch to version 1: modified src/app/teachers/page.tsx	2026-03-06 21:43:16 +00:00
bender	f56cc7e968	Switch to version 1: modified src/app/styles/variables.css	2026-03-06 21:43:16 +00:00
bender	fd26cb13cc	Switch to version 1: modified src/app/schedule/page.tsx	2026-03-06 21:43:15 +00:00
bender	408980bbd8	Switch to version 1: modified src/app/page.tsx	2026-03-06 21:43:14 +00:00
bender	f5ec9ea450	Switch to version 1: modified src/app/layout.tsx	2026-03-06 21:43:14 +00:00
bender	735e22a340	Switch to version 1: modified src/app/events/page.tsx	2026-03-06 21:43:13 +00:00
bender	1960d52149	Merge version_2 into main Merge version_2 into main	2026-03-06 21:38:33 +00:00
bender	ced50daa4a	Merge version_2 into main Merge version_2 into main	2026-03-06 21:37:42 +00:00
bender	271b199b22	Merge version_2 into main Merge version_2 into main	2026-03-06 21:36:49 +00:00
bender	47b76a49f1	Merge version_2 into main Merge version_2 into main	2026-03-06 21:35:11 +00:00
bender	2a63a64f07	Merge version_2 into main Merge version_2 into main	2026-03-06 21:34:04 +00:00