Update src/app/search/page.tsx

Merge version_2 into main

src/app/admin/page.tsx

@@ -2,54 +2,60 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
+import { useState } from "react";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
+import { BarChart3, Users, Briefcase, FileText, TrendingUp, LogOut } from "lucide-react";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import {
-  Users,
-  BarChart3,
-  Shield,
-  Activity,
-  TrendingUp,
-} from "lucide-react";
 
 const navItems = [
-  { name: "Dashboard", id: "/admin" },
+  { name: "Search Jobs", id: "" },
-  { name: "Jobs", id: "/admin#jobs" },
+  { name: "Post a Job", id: "" },
-  { name: "Users", id: "/admin#users" },
+  { name: "Admin", id: "/admin" },
-  { name: "Moderation", id: "/admin#moderation" },
+  { name: "Browse", id: "" },
-  { name: "Analytics", id: "/admin#analytics" },
+  { name: "Contact", id: "" },
 ];
 
-const footerColumns = [
+type TabType = "jobs" | "applications" | "users" | "analytics";
-  {
+
-    title: "Admin",    items: [
+export default function AdminDashboard() {
-      { label: "Dashboard", href: "/admin" },
+  const [activeTab, setActiveTab] = useState<TabType>("jobs");
-      { label: "Settings", href: "/admin#settings" },
+  const [jobs] = useState([
-      { label: "Reports", href: "/admin#reports" },
+    { id: 1, title: "Senior Developer", company: "Tech Corp", status: "Active", applications: 12, posted: "2 days ago" },
-    ],
+    { id: 2, title: "Product Manager", company: "Startup Inc", status: "Active", applications: 8, posted: "5 days ago" },
-  },
+    { id: 3, title: "Designer", company: "Creative Agency", status: "Inactive", applications: 5, posted: "10 days ago" },
-  {
+  ]);
-    title: "Quick Links",    items: [
+
-      { label: "Help", href: "#" },
+  const [applications] = useState([
-      { label: "Support", href: "#" },
+    { id: 1, candidate: "John Smith", position: "Senior Developer", status: "Under Review", appliedDate: "2025-01-20" },
-      { label: "Documentation", href: "#" },
+    { id: 2, candidate: "Sarah Johnson", position: "Product Manager", status: "Interview", appliedDate: "2025-01-19" },
-    ],
+    { id: 3, candidate: "Mike Davis", position: "Senior Developer", status: "Rejected", appliedDate: "2025-01-18" },
-  },
+  ]);
-];
+
+  const [users] = useState([
+    { id: 1, name: "Alice Chen", email: "alice@example.com", role: "Job Seeker", joined: "2025-01-10", status: "Active" },
+    { id: 2, name: "Bob Wilson", email: "bob@example.com", role: "Employer", joined: "2025-01-05", status: "Active" },
+    { id: 3, name: "Carol White", email: "carol@example.com", role: "Job Seeker", joined: "2024-12-20", status: "Inactive" },
+  ]);
+
+  const [analytics] = useState({
+    totalJobs: 284,
+    activeApplications: 156,
+    totalUsers: 2341,
+    avgTimeToHire: "18 days",    monthlyGrowth: "+12.5%",    conversionRate: "8.3%"});
+
+  const handleLogout = () => {
+    window.location.href = "/";
+  };
 
-export default function AdminPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="smallMedium"
+      contentWidth="medium"
       sizing="mediumLargeSizeLargeTitles"
-      background="circleGradient"
+      background="none"
-      cardStyle="gradient-radial"
+      cardStyle="solid"
-      primaryButtonStyle="double-inset"
+      primaryButtonStyle="gradient"
-      secondaryButtonStyle="glass"
+      secondaryButtonStyle="solid"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
@@ -57,180 +63,271 @@ export default function AdminPage() {
           brandName="Jobee Admin"
           navItems={navItems}
           button={{
-            text: "Logout",            onClick: () => console.log("logout"),
+            text: "Logout",            onClick: handleLogout,
           }}
         />
       </div>
 
-      <div id="jobs" data-section="jobs" className="pt-20">
+      <div className="min-h-screen bg-slate-50 pt-24 pb-12">
-        <MetricCardTen
+        <div className="mx-auto max-w-7xl px-4">
-          title="Job Management"
+          <h1 className="text-4xl font-bold text-slate-900 mb-8">Admin Dashboard</h1>
-          description="Monitor and manage all job postings across the platform"
+
-          tag="Active Jobs"
+          {/* Tab Navigation */}
-          textboxLayout="default"
+          <div className="flex gap-4 mb-8 border-b border-slate-200">
-          useInvertedBackground={false}
+            <button
-          animationType="slide-up"
+              onClick={() => setActiveTab("jobs")}
-          metrics={[
+              className={`pb-4 px-4 font-semibold transition-colors ${
-            {
+                activeTab === "jobs"
-              id: "1",              title: "Senior Software Engineer, Backend",              subtitle: "Amsterdam, Netherlands · Full-time · Remote eligible",              category: "Engineering",              value: "Posted 2 days ago",              buttons: [
+                  ? "text-blue-600 border-b-2 border-blue-600"
-                { text: "View", href: "#" },
+                  : "text-slate-600 hover:text-slate-900"
-                { text: "Manage", href: "#" },
+              }`}
-              ],
+            >
-            },
+              <div className="flex items-center gap-2">
-            {
+                <Briefcase size={20} />
-              id: "2",              title: "Product Manager, Enterprise",              subtitle: "Rotterdam, Netherlands · Full-time",              category: "Product",              value: "Posted 5 days ago",              buttons: [
+                Job Management
-                { text: "View", href: "#" },
+              </div>
-                { text: "Manage", href: "#" },
+            </button>
-              ],
+            <button
-            },
+              onClick={() => setActiveTab("applications")}
-            {
+              className={`pb-4 px-4 font-semibold transition-colors ${
-              id: "3",              title: "UX Designer, B2B",              subtitle: "Utrecht, Netherlands · Full-time",              category: "Design",              value: "Posted 1 week ago",              buttons: [
+                activeTab === "applications"
-                { text: "View", href: "#" },
+                  ? "text-blue-600 border-b-2 border-blue-600"
-                { text: "Manage", href: "#" },
+                  : "text-slate-600 hover:text-slate-900"
-              ],
+              }`}
-            },
+            >
-            {
+              <div className="flex items-center gap-2">
-              id: "4",              title: "Data Scientist, ML Platform",              subtitle: "Remote · Full-time",              category: "Data",              value: "Posted 10 days ago",              buttons: [
+                <FileText size={20} />
-                { text: "View", href: "#" },
+                Applications
-                { text: "Manage", href: "#" },
+              </div>
-              ],
+            </button>
-            },
+            <button
-            {
+              onClick={() => setActiveTab("users")}
-              id: "5",              title: "DevOps Engineer, Infrastructure",              subtitle: "Amsterdam, Netherlands · Full-time · Remote",              category: "Infrastructure",              value: "Posted 3 weeks ago",              buttons: [
+              className={`pb-4 px-4 font-semibold transition-colors ${
-                { text: "View", href: "#" },
+                activeTab === "users"
-                { text: "Manage", href: "#" },
+                  ? "text-blue-600 border-b-2 border-blue-600"
-              ],
+                  : "text-slate-600 hover:text-slate-900"
-            },
+              }`}
-            {
+            >
-              id: "6",              title: "Marketing Manager, Growth",              subtitle: "The Hague, Netherlands · Full-time",              category: "Marketing",              value: "Posted 1 month ago",              buttons: [
+              <div className="flex items-center gap-2">
-                { text: "View", href: "#" },
+                <Users size={20} />
-                { text: "Manage", href: "#" },
+                User Management
-              ],
+              </div>
-            },
+            </button>
-          ]}
+            <button
-        />
+              onClick={() => setActiveTab("analytics")}
+              className={`pb-4 px-4 font-semibold transition-colors ${
+                activeTab === "analytics"
+                  ? "text-blue-600 border-b-2 border-blue-600"
+                  : "text-slate-600 hover:text-slate-900"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <BarChart3 size={20} />
+                Analytics
+              </div>
+            </button>
           </div>
 
-      <div id="users" data-section="users">
+          {/* Job Management Tab */}
-        <MetricCardTen
+          {activeTab === "jobs" && (
-          title="User Management"
+            <div className="space-y-4">
-          description="Overview of registered users, job seekers, and employers"
+              <div className="flex justify-between items-center mb-6">
-          tag="Active Users"
+                <h2 className="text-2xl font-bold text-slate-900">Job Listings</h2>
-          textboxLayout="default"
+                <button className="px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
-          useInvertedBackground={true}
+                  + New Job
-          animationType="slide-up"
+                </button>
-          metrics={[
-            {
-              id: "1",              title: "Sarah van der Berg",              subtitle: "Amsterdam, Netherlands · Software Developer",              category: "Job Seeker",              value: "Active",              buttons: [
-                { text: "View Profile", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "2",              title: "Acme Corporation",              subtitle: "Rotterdam, Netherlands · Tech Company",              category: "Employer",              value: "Verified",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "3",              title: "Jan Pieterzoon",              subtitle: "Utrecht, Netherlands · HR Manager",              category: "Employer",              value: "Active",              buttons: [
-                { text: "View Profile", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "4",              title: "Emma Dijkstra",              subtitle: "The Hague, Netherlands · Marketing Specialist",              category: "Job Seeker",              value: "Active",              buttons: [
-                { text: "View Profile", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-          ]}
-        />
               </div>
-
+              <div className="bg-white rounded-lg shadow overflow-hidden">
-      <div id="analytics" data-section="analytics">
+                <table className="w-full">
-        <FeatureBento
+                  <thead className="bg-slate-100 border-b border-slate-200">
-          title="Platform Analytics & Insights"
+                    <tr>
-          description="Monitor key metrics and platform performance across all regions"
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Job Title</th>
-          tag="Real-time Data"
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Company</th>
-          tagIcon={Activity}
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
-          textboxLayout="default"
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applications</th>
-          useInvertedBackground={false}
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Posted</th>
-          animationType="slide-up"
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
-          carouselMode="buttons"
+                    </tr>
-          features={[
+                  </thead>
-            {
+                  <tbody>
-              title: "Job Applications Trend",              description: "Track weekly application volume and trends",              bentoComponent: "line-chart"},
+                    {jobs.map((job) => (
-            {
+                      <tr key={job.id} className="border-b border-slate-200 hover:bg-slate-50">
-              title: "Revenue by Province",              description: "Revenue distribution across Dutch provinces",              bentoComponent: "animated-bar-chart"},
+                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{job.title}</td>
-            {
+                        <td className="px-6 py-4 text-sm text-slate-600">{job.company}</td>
-              title: "User Growth Metrics",              description: "Active users and engagement statistics",              bentoComponent: "icon-info-cards",              items: [
+                        <td className="px-6 py-4 text-sm">
-                { icon: Users, label: "Total Users", value: "24,500+" },
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
-                { icon: Activity, label: "Job Postings", value: "3,240" },
+                            job.status === "Active"
-                { icon: TrendingUp, label: "Monthly Growth", value: "12.5%" },
+                              ? "bg-green-100 text-green-700"
-              ],
+                              : "bg-gray-100 text-gray-700"
-            },
+                          }`}>
-            {
+                            {job.status}
-              title: "Geographic Distribution",              description: "Job seeker and employer locations worldwide",              bentoComponent: "map"},
+                          </span>
-            {
+                        </td>
-              title: "Popular Job Categories",              description: "Most sought-after job positions and skills",              bentoComponent: "marquee",              centerIcon: Activity,
+                        <td className="px-6 py-4 text-sm text-slate-600">{job.applications}</td>
-              variant: "text",              texts: [
+                        <td className="px-6 py-4 text-sm text-slate-600">{job.posted}</td>
-                "Software Engineering",                "Product Management",                "Data Science",                "UX Design",                "Marketing",                "Sales"],
+                        <td className="px-6 py-4 text-sm space-x-2">
-            },
+                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
-            {
+                          <button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Delete</button>
-              title: "System Status Overview",              description: "Platform health and service monitoring",              bentoComponent: "3d-stack-cards",              items: [
+                        </td>
-                {
+                      </tr>
-                  icon: Activity,
+                    ))}
-                  title: "API Health",                  subtitle: "99.9% Uptime",                  detail: "All systems operational"},
+                  </tbody>
-                {
+                </table>
-                  icon: BarChart3,
-                  title: "Database",                  subtitle: "256 GB",                  detail: "45% capacity used"},
-                {
-                  icon: Shield,
-                  title: "Security",                  subtitle: "Secure",                  detail: "No active threats"},
-              ],
-            },
-          ]}
-        />
               </div>
-
-      <div id="moderation" data-section="moderation">
-        <MetricCardTen
-          title="Content Moderation"
-          description="Review and manage flagged content, reports, and user complaints"
-          tag="Flagged Content"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              title: "Job Post: Suspicious Salary Offer",              subtitle: "Posted by Employer XYZ · Flag reason: Unusually high salary",              category: "Review",              value: "Pending",              buttons: [
-                { text: "Review", href: "#" },
-                { text: "Action", href: "#" },
-              ],
-            },
-            {
-              id: "2",              title: "User Report: Inappropriate Profile",              subtitle: "Report from user about profile content violation",              category: "Report",              value: "2 days ago",              buttons: [
-                { text: "Investigate", href: "#" },
-                { text: "Resolve", href: "#" },
-              ],
-            },
-            {
-              id: "3",              title: "Automated Alert: Spam Job Posting",              subtitle: "System detected duplicate job posts from same employer",              category: "Alert",              value: "Flagged",              buttons: [
-                { text: "Review", href: "#" },
-                { text: "Remove", href: "#" },
-              ],
-            },
-          ]}
-        />
             </div>
+          )}
 
-      <div id="footer" data-section="footer">
+          {/* Applications Management Tab */}
-        <FooterBase
+          {activeTab === "applications" && (
-          logoText="Jobee Admin"
+            <div className="space-y-4">
-          copyrightText="© 2025 Jobee Admin Portal"
+              <h2 className="text-2xl font-bold text-slate-900 mb-6">Application Management</h2>
-          columns={footerColumns}
+              <div className="bg-white rounded-lg shadow overflow-hidden">
-        />
+                <table className="w-full">
+                  <thead className="bg-slate-100 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Candidate</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Position</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applied Date</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {applications.map((app) => (
+                      <tr key={app.id} className="border-b border-slate-200 hover:bg-slate-50">
+                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{app.candidate}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{app.position}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            app.status === "Interview"
+                              ? "bg-blue-100 text-blue-700"
+                              : app.status === "Under Review"
+                              ? "bg-yellow-100 text-yellow-700"
+                              : "bg-red-100 text-red-700"
+                          }`}>
+                            {app.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{app.appliedDate}</td>
+                        <td className="px-6 py-4 text-sm space-x-2">
+                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">View</button>
+                          <button className="px-3 py-1 text-green-600 hover:bg-green-50 rounded transition">Approve</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* User Management Tab */}
+          {activeTab === "users" && (
+            <div className="space-y-4">
+              <h2 className="text-2xl font-bold text-slate-900 mb-6">User Management</h2>
+              <div className="bg-white rounded-lg shadow overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-slate-100 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Name</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Email</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Role</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Joined</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id} className="border-b border-slate-200 hover:bg-slate-50">
+                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{user.name}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{user.email}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{user.role}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{user.joined}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            user.status === "Active"
+                              ? "bg-green-100 text-green-700"
+                              : "bg-gray-100 text-gray-700"
+                          }`}>
+                            {user.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm space-x-2">
+                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
+                          <button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Disable</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* Analytics Tab */}
+          {activeTab === "analytics" && (
+            <div className="space-y-6">
+              <h2 className="text-2xl font-bold text-slate-900 mb-6">Analytics Overview</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Total Jobs</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalJobs}</p>
+                    </div>
+                    <Briefcase className="text-blue-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Active Applications</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.activeApplications}</p>
+                    </div>
+                    <FileText className="text-green-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-purple-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Total Users</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalUsers}</p>
+                    </div>
+                    <Users className="text-purple-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Avg Time to Hire</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.avgTimeToHire}</p>
+                    </div>
+                    <TrendingUp className="text-yellow-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Monthly Growth</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.monthlyGrowth}</p>
+                    </div>
+                    <BarChart3 className="text-red-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Conversion Rate</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.conversionRate}</p>
+                    </div>
+                    <BarChart3 className="text-indigo-600" size={40} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </ThemeProvider>
   );

src/app/applications/page.tsx

@@ -2,43 +2,125 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import {
+import { useState } from "react";
-  Users,
+import { Briefcase, Clock, CheckCircle, AlertCircle, MapPin, DollarSign, Building2, Calendar, ArrowRight } from "lucide-react";
-  BarChart3,
-  Shield,
-  Activity,
-  TrendingUp,
-} from "lucide-react";
 
 const navItems = [
-  { name: "Dashboard", id: "/admin" },
+  { name: "Search Jobs", id: "search" },
-  { name: "Jobs", id: "/admin#jobs" },
+  { name: "Post a Job", id: "post-job" },
-  { name: "Users", id: "/admin#users" },
+  { name: "Admin", id: "admin-login" },
-  { name: "Moderation", id: "/admin#moderation" },
+  { name: "Browse", id: "browse" },
-  { name: "Analytics", id: "/admin#analytics" },
+  { name: "Contact", id: "contact" },
+  { name: "Applications", id: "/applications" },
 ];
 
 const footerColumns = [
   {
-    title: "Admin",    items: [
+    title: "Product",    items: [
-      { label: "Dashboard", href: "/admin" },
+      { label: "Search Jobs", href: "/search" },
-      { label: "Settings", href: "/admin#settings" },
+      { label: "Post a Job", href: "/post-job" },
-      { label: "Reports", href: "/admin#reports" },
+      { label: "Browse by Province", href: "#provinces" },
+      { label: "For Employers", href: "#" },
     ],
   },
   {
-    title: "Quick Links",    items: [
+    title: "Company",    items: [
-      { label: "Help", href: "#" },
+      { label: "About Jobee", href: "#about" },
+      { label: "Careers", href: "#" },
+      { label: "Contact Us", href: "#contact" },
+      { label: "Blog", href: "#" },
+    ],
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "FAQ", href: "#" },
       { label: "Support", href: "#" },
-      { label: "Documentation", href: "#" },
     ],
   },
 ];
 
+interface Application {
+  id: string;
+  jobTitle: string;
+  company: string;
+  location: string;
+  salary: string;
+  appliedDate: string;
+  status: "pending" | "reviewed" | "accepted" | "rejected";
+  logoSrc?: string;
+}
+
+const mockApplications: Application[] = [
+  {
+    id: "1",    jobTitle: "Senior React Developer",    company: "TechFlow Solutions",    location: "Amsterdam, Netherlands",    salary: "€65,000 - €80,000",    appliedDate: "2025-01-15",    status: "reviewed",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=TF"},
+  {
+    id: "2",    jobTitle: "UX/UI Designer",    company: "Creative Studios Amsterdam",    location: "Amsterdam, Netherlands",    salary: "€50,000 - €65,000",    appliedDate: "2025-01-10",    status: "accepted",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=CSA"},
+  {
+    id: "3",    jobTitle: "Full Stack Developer",    company: "Innovate Inc",    location: "Rotterdam, Netherlands",    salary: "€55,000 - €70,000",    appliedDate: "2025-01-12",    status: "pending",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=II"},
+  {
+    id: "4",    jobTitle: "Marketing Manager",    company: "Digital Growth Partners",    location: "Utrecht, Netherlands",    salary: "€48,000 - €60,000",    appliedDate: "2025-01-08",    status: "rejected",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=DGP"},
+  {
+    id: "5",    jobTitle: "Data Scientist",    company: "Analytics Pro",    location: "The Hague, Netherlands",    salary: "€60,000 - €75,000",    appliedDate: "2025-01-05",    status: "reviewed",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=AP"},
+  {
+    id: "6",    jobTitle: "Product Manager",    company: "Tech Ventures",    location: "Eindhoven, Netherlands",    salary: "€65,000 - €85,000",    appliedDate: "2025-01-02",    status: "pending",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=TV"},
+];
+
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case "accepted":
+      return "bg-green-100 text-green-800";
+    case "rejected":
+      return "bg-red-100 text-red-800";
+    case "reviewed":
+      return "bg-blue-100 text-blue-800";
+    case "pending":
+      return "bg-yellow-100 text-yellow-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+};
+
+const getStatusIcon = (status: string) => {
+  switch (status) {
+    case "accepted":
+      return <CheckCircle className="w-4 h-4" />;
+    case "rejected":
+      return <AlertCircle className="w-4 h-4" />;
+    case "reviewed":
+      return <Clock className="w-4 h-4" />;
+    case "pending":
+      return <Clock className="w-4 h-4" />;
+    default:
+      return <Clock className="w-4 h-4" />;
+  }
+};
+
+const getStatusLabel = (status: string) => {
+  switch (status) {
+    case "accepted":
+      return "Accepted";
+    case "rejected":
+      return "Rejected";
+    case "reviewed":
+      return "Under Review";
+    case "pending":
+      return "Pending";
+    default:
+      return status;
+  }
+};
+
 export default function ApplicationsPage() {
+  const [selectedApplication, setSelectedApplication] = useState<Application | null>(null);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+
+  const filteredApplications = statusFilter === "all"
+    ? mockApplications
+    : mockApplications.filter(app => app.status === statusFilter);
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -54,67 +136,218 @@ export default function ApplicationsPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Jobee Admin"
+          brandName="Jobee"
           navItems={navItems}
           button={{
-            text: "Logout",            onClick: () => console.log("logout"),
+            text: "Post a Job",            href: "/post-job"}}
-          }}
         />
       </div>
 
-      <div id="applications" data-section="applications" className="pt-20">
+      <main className="min-h-screen bg-gradient-to-br from-background via-card to-background">
-        <MetricCardTen
+        <div className="container mx-auto px-4 py-16">
-          title="Job Management"
+          {/* Header Section */}
-          description="Monitor and manage all job postings across the platform"
+          <div className="mb-12">
-          tag="Active Jobs"
+            <div className="flex items-center gap-3 mb-4">
-          textboxLayout="default"
+              <Briefcase className="w-8 h-8 text-primary-cta" />
-          useInvertedBackground={false}
+              <h1 className="text-4xl md:text-5xl font-bold text-foreground">My Applications</h1>
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              title: "Senior Software Engineer, Backend",              subtitle: "Amsterdam, Netherlands · Full-time · Remote eligible",              category: "Engineering",              value: "Posted 2 days ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "2",              title: "Product Manager, Enterprise",              subtitle: "Rotterdam, Netherlands · Full-time",              category: "Product",              value: "Posted 5 days ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "3",              title: "UX Designer, B2B",              subtitle: "Utrecht, Netherlands · Full-time",              category: "Design",              value: "Posted 1 week ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "4",              title: "Data Scientist, ML Platform",              subtitle: "Remote · Full-time",              category: "Data",              value: "Posted 10 days ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "5",              title: "DevOps Engineer, Infrastructure",              subtitle: "Amsterdam, Netherlands · Full-time · Remote",              category: "Infrastructure",              value: "Posted 3 weeks ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "6",              title: "Marketing Manager, Growth",              subtitle: "The Hague, Netherlands · Full-time",              category: "Marketing",              value: "Posted 1 month ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-          ]}
-        />
             </div>
+            <p className="text-lg text-foreground/70 mb-8">
+              Track and manage all your job applications in one place. Monitor your application status and stay updated on opportunities.
+            </p>
+
+            {/* Status Filter */}
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => setStatusFilter("all")}
+                className={`px-6 py-2 rounded-full font-medium transition-all ${
+                  statusFilter === "all"
+                    ? "bg-primary-cta text-white"
+                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
+                }`}
+              >
+                All Applications ({mockApplications.length})
+              </button>
+              <button
+                onClick={() => setStatusFilter("pending")}
+                className={`px-6 py-2 rounded-full font-medium transition-all ${
+                  statusFilter === "pending"
+                    ? "bg-yellow-500 text-white"
+                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
+                }`}
+              >
+                Pending
+              </button>
+              <button
+                onClick={() => setStatusFilter("reviewed")}
+                className={`px-6 py-2 rounded-full font-medium transition-all ${
+                  statusFilter === "reviewed"
+                    ? "bg-blue-500 text-white"
+                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
+                }`}
+              >
+                Under Review
+              </button>
+              <button
+                onClick={() => setStatusFilter("accepted")}
+                className={`px-6 py-2 rounded-full font-medium transition-all ${
+                  statusFilter === "accepted"
+                    ? "bg-green-500 text-white"
+                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
+                }`}
+              >
+                Accepted
+              </button>
+              <button
+                onClick={() => setStatusFilter("rejected")}
+                className={`px-6 py-2 rounded-full font-medium transition-all ${
+                  statusFilter === "rejected"
+                    ? "bg-red-500 text-white"
+                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
+                }`}
+              >
+                Rejected
+              </button>
+            </div>
+          </div>
+
+          {/* Applications Grid */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Application List */}
+            <div className="lg:col-span-2">
+              <div className="space-y-4">
+                {filteredApplications.length === 0 ? (
+                  <div className="bg-card border border-accent/20 rounded-2xl p-8 text-center">
+                    <Briefcase className="w-12 h-12 text-foreground/30 mx-auto mb-4" />
+                    <p className="text-foreground/60">No applications found with this status.</p>
+                  </div>
+                ) : (
+                  filteredApplications.map((app) => (
+                    <div
+                      key={app.id}
+                      onClick={() => setSelectedApplication(app)}
+                      className={`bg-card border border-accent/20 rounded-2xl p-6 cursor-pointer transition-all hover:border-accent/50 hover:shadow-lg ${
+                        selectedApplication?.id === app.id ? "border-primary-cta" : ""
+                      }`}
+                    >
+                      <div className="flex gap-4">
+                        {/* Company Logo */}
+                        <div className="flex-shrink-0">
+                          <div className="w-16 h-16 bg-gradient-to-br from-primary-cta/20 to-accent/20 rounded-xl flex items-center justify-center">
+                            <Building2 className="w-8 h-8 text-primary-cta" />
+                          </div>
+                        </div>
+
+                        {/* Application Info */}
+                        <div className="flex-grow">
+                          <div className="flex items-start justify-between mb-2">
+                            <div>
+                              <h3 className="text-lg font-bold text-foreground">{app.jobTitle}</h3>
+                              <p className="text-sm text-foreground/60">{app.company}</p>
+                            </div>
+                            <span
+                              className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${
+                                getStatusColor(app.status)
+                              }`}
+                            >
+                              {getStatusIcon(app.status)}
+                              {getStatusLabel(app.status)}
+                            </span>
+                          </div>
+
+                          <div className="flex flex-wrap gap-4 text-sm text-foreground/60 mt-3">
+                            <div className="flex items-center gap-1">
+                              <MapPin className="w-4 h-4" />
+                              {app.location}
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <DollarSign className="w-4 h-4" />
+                              {app.salary}
+                            </div>
+                            <div className="flex items-center gap-1">
+                              <Calendar className="w-4 h-4" />
+                              {new Date(app.appliedDate).toLocaleDateString()}
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Arrow Icon */}
+                        <div className="flex-shrink-0 flex items-center">
+                          <ArrowRight className="w-5 h-5 text-foreground/30" />
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+
+            {/* Application Details Panel */}
+            <div className="lg:col-span-1">
+              {selectedApplication ? (
+                <div className="bg-card border border-accent/20 rounded-2xl p-6 sticky top-24">
+                  <div className="mb-6">
+                    <h2 className="text-2xl font-bold text-foreground mb-2">{selectedApplication.jobTitle}</h2>
+                    <p className="text-foreground/60 mb-4">{selectedApplication.company}</p>
+                    <span
+                      className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium ${
+                        getStatusColor(selectedApplication.status)
+                      }`}
+                    >
+                      {getStatusIcon(selectedApplication.status)}
+                      {getStatusLabel(selectedApplication.status)}
+                    </span>
+                  </div>
+
+                  <div className="space-y-4 border-t border-accent/10 pt-6">
+                    <div>
+                      <p className="text-xs font-semibold text-foreground/50 uppercase tracking-wide mb-2">Location</p>
+                      <div className="flex items-center gap-2">
+                        <MapPin className="w-4 h-4 text-primary-cta" />
+                        <p className="text-foreground">{selectedApplication.location}</p>
+                      </div>
+                    </div>
+
+                    <div>
+                      <p className="text-xs font-semibold text-foreground/50 uppercase tracking-wide mb-2">Salary Range</p>
+                      <div className="flex items-center gap-2">
+                        <DollarSign className="w-4 h-4 text-primary-cta" />
+                        <p className="text-foreground">{selectedApplication.salary}</p>
+                      </div>
+                    </div>
+
+                    <div>
+                      <p className="text-xs font-semibold text-foreground/50 uppercase tracking-wide mb-2">Applied Date</p>
+                      <div className="flex items-center gap-2">
+                        <Calendar className="w-4 h-4 text-primary-cta" />
+                        <p className="text-foreground">{new Date(selectedApplication.appliedDate).toLocaleDateString()}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-6 space-y-2">
+                    <button className="w-full bg-primary-cta text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
+                      View Application
+                    </button>
+                    <button className="w-full bg-card border border-accent/30 text-foreground py-3 rounded-lg font-medium hover:border-accent transition-colors">
+                      Contact Company
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="bg-card border border-accent/20 rounded-2xl p-6 text-center">
+                  <Briefcase className="w-12 h-12 text-foreground/30 mx-auto mb-4" />
+                  <p className="text-foreground/60">Select an application to view details</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
 
       <div id="footer" data-section="footer">
         <FooterBase
-          logoText="Jobee Admin"
+          logoText="Jobee"
-          copyrightText="© 2025 Jobee Admin Portal"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
           columns={footerColumns}
         />
       </div>

src/app/apply/page.tsx

@@ -2,68 +2,134 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import FooterBase from "@/components/sections/footer/FooterBase";
+import { Sparkles } from "lucide-react";
 
+export default function ApplyPage() {
   const navItems = [
-  { name: "Dashboard", id: "/" },
+    { name: "Search Jobs", id: "search" },
-  { name: "Browse Jobs", id: "/search" },
+    { name: "Post a Job", id: "post-job" },
-  { name: "My Applications", id: "/applications" },
+    { name: "Admin", id: "admin-login" },
-  { name: "Settings", id: "#settings" },
+    { name: "Browse", id: "browse" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
     {
       title: "Product",      items: [
-      { label: "Browse Jobs", href: "/search" },
+        { label: "Search Jobs", href: "/search" },
-      { label: "Companies", href: "#" },
+        { label: "Post a Job", href: "/post-job" },
+        { label: "Browse by Province", href: "#provinces" },
         { label: "For Employers", href: "#" },
       ],
     },
     {
       title: "Company",      items: [
-      { label: "About", href: "#" },
+        { label: "About Jobee", href: "#about" },
+        { label: "Careers", href: "#" },
+        { label: "Contact Us", href: "#contact" },
         { label: "Blog", href: "#" },
-      { label: "Contact", href: "#" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "FAQ", href: "#" },
+        { label: "Support", href: "#" },
       ],
     },
   ];
 
-export default function ApplyPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="medium"
+      contentWidth="smallMedium"
-      sizing="medium"
+      sizing="mediumLargeSizeLargeTitles"
       background="circleGradient"
-      cardStyle="glass-elevated"
+      cardStyle="gradient-radial"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="double-inset"
       secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Jobee"
           navItems={navItems}
-          button={{
+          button={{ text: "Post a Job", href: "/post-job" }}
-            text: "Sign In",            onClick: () => console.log("sign-in"),
+          brandName="Jobee"
-          }}
         />
       </div>
 
-      <div id="apply" data-section="apply" className="py-20">
+      <div id="features" data-section="features">
-        <div className="container mx-auto px-4 text-center">
+        <FeatureCardEight
-          <h1 className="text-4xl font-bold mb-4">Job Application Form</h1>
+          features={[
-          <p className="text-lg text-gray-600">Complete your profile to apply for this position</p>
+            {
+              id: 1,
+              title: "Complete Your Profile",              description:
+                "Upload your resume, add a professional photo, and complete your profile information. Make a great first impression with employers.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=5",              imageAlt: "Profile completion step"},
+            {
+              id: 2,
+              title: "Submit Your Application",              description:
+                "Choose your desired position and submit your application with a personalized cover letter. It takes just minutes.",              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=5",              imageAlt: "Application submission process"},
+            {
+              id: 3,
+              title: "Track and Communicate",              description:
+                "Monitor your application status in real-time and communicate directly with employers through our messaging system.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=6",              imageAlt: "Application tracking dashboard"},
+          ]}
+          title="Apply to Jobs in Three Steps"
+          description="Streamlined application process designed to help you land your dream job in the Netherlands."
+          tag="Easy Application"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Find Jobs Now", href: "/search" }]}
+          buttonAnimation="slide-up"
+        />
       </div>
+
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardTwo
+          testimonials={[
+            {
+              id: "1",              name: "Sarah van der Berg",              role: "Software Developer",              testimonial:
+                "I found my perfect job within 2 weeks using Jobee. The search filters made it easy to find remote opportunities in Amsterdam that matched my skill set.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg?_wi=2",              imageAlt: "Sarah van der Berg"},
+            {
+              id: "2",              name: "Emma Dijkstra",              role: "Marketing Specialist",              testimonial:
+                "The application process on Jobee is so smooth. I applied for 5 positions and received 3 interview invitations within a week. Highly recommended!",              imageSrc:
+                "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=2",              imageAlt: "Emma Dijkstra"},
+            {
+              id: "3",              name: "Michael Houtstra",              role: "Finance Director",              testimonial:
+                "The platform's transparency about job requirements and company culture helped me find a role that was truly the right fit. Great experience!",              imageSrc:
+                "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg?_wi=2",              imageAlt: "Michael Houtstra"},
+            {
+              id: "4",              name: "Lisa Bertrand",              role: "UX Designer",              testimonial:
+                "Jobee's application tracking feature is excellent. I always knew exactly where I stood with each employer. Best job search experience yet!",              imageSrc:
+                "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-9543.jpg?_wi=2",              imageAlt: "Lisa Bertrand"},
+          ]}
+          title="Success Stories from Our Job Seekers"
+          description="Real experiences from candidates who found their dream jobs through Jobee."
+          tag="User Testimonials"
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          animationType="slide-up"
+        />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
-          logoText="Jobee"
-          copyrightText="© 2025 Jobee"
           columns={footerColumns}
+          logoText="Jobee"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
         />
       </div>
     </ThemeProvider>

src/app/layout.tsx

@@ -1,17 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
+import "./styles/variables.css";
+import "./styles/base.css";
 import "./globals.css";
 
-const geist = Geist({
+const inter = Inter({
-  variable: "--font-geist-sans",  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Jobee - Dutch Job Listings Platform",  description: "Find your dream job in the Netherlands across all 12 provinces. Connect with top employers and build your career with Jobee."};
+  title: "Jobee - Find Your Dream Job in the Netherlands",  description:
+    "Discover thousands of job opportunities across all 12 Dutch provinces. Connect with top employers and build your career with Jobee."};
 
 export default function RootLayout({
   children,
@@ -20,16 +19,21 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${geist.variable} ${geistMono.variable}`}>
+      <body className={`${inter.variable}`}>
         {children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
-              if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+              (function() {
-                document.documentElement.classList.add('dark')
+                try {
+                  const theme = localStorage.getItem('theme') || 'light';
+                  if (theme === 'dark') {
+                    document.documentElement.classList.add('dark');
                   } else {
-                document.documentElement.classList.remove('dark')
+                    document.documentElement.classList.remove('dark');
                   }
+                } catch (e) {}
+              })()
             `,
           }}
         />

src/app/page.tsx

@@ -2,139 +2,210 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
-import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Users, Star } from "lucide-react";
+import { Briefcase, Sparkles, Mail, Quote } from "lucide-react";
 
 const navItems = [
-  { name: "Home", id: "/" },
+  { name: "Search Jobs", id: "search" },
-  { name: "Features", id: "#features" },
+  { name: "Post a Job", id: "post-job" },
-  { name: "Testimonials", id: "#testimonials" },
+  { name: "Admin", id: "admin-login" },
-  { name: "Contact", id: "#contact" },
+  { name: "Browse", id: "browse" },
+  { name: "Contact", id: "contact" },
 ];
 
 const footerColumns = [
   {
     title: "Product",    items: [
-      { label: "Features", href: "#features" },
+      { label: "Search Jobs", href: "/search" },
-      { label: "Pricing", href: "#pricing" },
+      { label: "Post a Job", href: "/post-job" },
-      { label: "Security", href: "#security" },
+      { label: "Browse by Province", href: "#provinces" },
+      { label: "For Employers", href: "#" },
     ],
   },
   {
     title: "Company",    items: [
-      { label: "About", href: "#about" },
+      { label: "About Jobee", href: "#about" },
-      { label: "Blog", href: "#blog" },
+      { label: "Careers", href: "#" },
-      { label: "Careers", href: "#careers" },
+      { label: "Contact Us", href: "#contact" },
+      { label: "Blog", href: "#" },
+    ],
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "FAQ", href: "#" },
+      { label: "Support", href: "#" },
     ],
   },
 ];
 
-export default function Home() {
+export default function HomePage() {
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
-      defaultTextAnimation="entrance-slide"
+      defaultTextAnimation="reveal-blur"
-      borderRadius="rounded"
+      borderRadius="pill"
-      contentWidth="medium"
+      contentWidth="smallMedium"
-      sizing="medium"
+      sizing="mediumLargeSizeLargeTitles"
       background="circleGradient"
-      cardStyle="glass-elevated"
+      cardStyle="gradient-radial"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="double-inset"
       secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Webild"
+          brandName="Jobee"
           navItems={navItems}
           button={{
-            text: "Get Started",            onClick: () => console.log("cta clicked"),
+            text: "Post a Job",            href: "/post-job"}}
-          }}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroSplitDoubleCarousel
-          title="Experience the Future of Web Development"
+          title="Find Your Dream Job in the Netherlands"
-          description="Build stunning, responsive websites with our revolutionary platform and innovative tools."
+          description="Discover thousands of opportunities across all 12 Dutch provinces. Connect with top employers, build your career, and find the perfect role that matches your skills and ambitions."
-          background={{ variant: "sparkles-gradient" }}
+          tag="Dutch Job Market"
+          tagIcon={Briefcase}
+          tagAnimation="slide-up"
+          background={{
+            variant: "animated-grid"}}
           leftCarouselItems={[
-            { imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Feature 1" },
+            {
-            { imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Feature 2" },
+              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-bookkeeping-postcard-template_23-2149341358.jpg?_wi=1",              imageAlt: "Job Listing Card Design"},
+            {
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1",              imageAlt: "Advanced Search Filter Interface"},
+            {
+              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1",              imageAlt: "Admin Dashboard Management"},
+            {
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1",              imageAlt: "Application Process Flow"},
           ]}
           rightCarouselItems={[
-            { imageSrc: "/placeholders/placeholder3.webp", imageAlt: "Feature 3" },
+            {
-            { imageSrc: "/placeholders/placeholder4.webp", imageAlt: "Feature 4" },
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1",              imageAlt: "Professional Job Search Workspace"},
+            {
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=2",              imageAlt: "Recruitment Application Steps"},
+            {
+              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=2",              imageAlt: "Recruitment Analytics Dashboard"},
+            {
+              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=2",              imageAlt: "Job Search Filter Options"},
           ]}
           buttons={[
-            { text: "Get Started", href: "#contact" },
+            {
-            { text: "Learn More", href: "#features" },
+              text: "Start Searching",              href: "/search"},
+            {
+              text: "Post a Job",              href: "/post-job"},
           ]}
+          buttonAnimation="slide-up"
+          carouselPosition="right"
         />
       </div>
 
       <div id="features" data-section="features">
         <FeatureCardEight
-          title="Powerful Features"
+          title="How Jobee Works"
-          description="Everything you need to build amazing web experiences"
+          description="A seamless journey from job discovery to successful employment placement across the Netherlands."
-          tag="Features"
+          tag="Simple Process"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
           features={[
             {
               id: 1,
-              title: "Lightning Fast",              description: "Optimized for speed and performance",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Performance"},
+              title: "Search & Filter",              description:
+                "Browse thousands of jobs across all Dutch provinces with advanced filtering by location, salary, job type, and category.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=3",              imageAlt: "Advanced search interface"},
             {
               id: 2,
-              title: "Fully Responsive",              description: "Perfect on all devices and screen sizes",              imageSrc: "/placeholders/placeholder2.webp",              imageAlt: "Responsive"},
+              title: "Apply Easily",              description:
+                "Submit your application with your resume, cover letter, and personal information in just minutes.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=3",              imageAlt: "Application form process"},
             {
               id: 3,
-              title: "Easy to Use",              description: "Intuitive interface for seamless workflows",              imageSrc: "/placeholders/placeholder3.webp",              imageAlt: "Easy to use"},
+              title: "Connect with Employers",              description:
+                "Get matched with top Dutch companies actively hiring and receive direct opportunities from recruiters.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=2",              imageAlt: "Professional networking"},
             {
               id: 4,
-              title: "Secure by Default",              description: "Enterprise-grade security built-in",              imageSrc: "/placeholders/placeholder4.webp",              imageAlt: "Secure"},
+              title: "Land Your Dream Job",              description:
+                "Track your applications, receive updates, and secure your next career opportunity with confidence.",              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=3",              imageAlt: "Dashboard tracking"},
           ]}
+          buttons={[
+            {
+              text: "Browse Jobs",              href: "/search"},
+          ]}
+          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardTwo
-          title="What Our Customers Say"
+          title="Success Stories from Our Users"
-          description="Join thousands of satisfied users who've transformed their web development workflow"
+          description="Hear from job seekers and employers who have found success through Jobee."
-          tag="Testimonials"
+          tag="User Testimonials"
+          tagIcon={Quote}
+          tagAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
           animationType="slide-up"
           testimonials={[
             {
-              id: "1",              name: "Alex Chen",              role: "Frontend Developer",              testimonial: "This platform has completely transformed how I build websites. The features are intuitive and powerful."},
+              id: "1",              name: "Sarah van der Berg",              role: "Software Developer",              testimonial:
+                "I found my perfect job within 2 weeks using Jobee. The search filters made it easy to find remote opportunities in Amsterdam that matched my skill set.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg?_wi=1",              imageAlt: "Sarah van der Berg"},
             {
-              id: "2",              name: "Sarah Johnson",              role: "Product Manager",              testimonial: "Amazing tool that has saved our team countless hours. Highly recommended for any development team."},
+              id: "2",              name: "Jan Pieterzoon",              role: "HR Manager",              testimonial:
+                "As a recruiter, Jobee has revolutionized how we post jobs and connect with talented candidates across the Netherlands. The platform is intuitive and effective.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=1",              imageAlt: "Jan Pieterzoon"},
+            {
+              id: "3",              name: "Emma Dijkstra",              role: "Marketing Specialist",              testimonial:
+                "The application process on Jobee is so smooth. I applied for 5 positions and received 3 interview invitations within a week. Highly recommended!",              imageSrc:
+                "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg?_wi=1",              imageAlt: "Emma Dijkstra"},
+            {
+              id: "4",              name: "Michael Houtstra",              role: "Finance Director",              testimonial:
+                "We've hired 12 excellent team members through Jobee in the past year. The quality of candidates is outstanding and the platform is incredibly easy to use.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-9543.jpg?_wi=1",              imageAlt: "Michael Houtstra"},
           ]}
+          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="contact" data-section="contact">
         <ContactCenter
           tag="Newsletter"
-          title="Stay Updated"
+          title="Stay Updated with Job Opportunities"
-          description="Subscribe to our newsletter for the latest updates, tips, and exclusive content."
+          description="Subscribe to our newsletter and get notified about new jobs matching your profile, industry trends, and career tips for the Dutch job market."
-          background={{ variant: "sparkles-gradient" }}
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{
+            variant: "animated-grid"}}
           useInvertedBackground={false}
-          inputPlaceholder="Enter your email"
+          inputPlaceholder="Enter your email address"
           buttonText="Subscribe"
-          termsText="We respect your privacy. Unsubscribe at any time."
+          termsText="We respect your privacy. Unsubscribe anytime from our newsletter."
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
-          logoText="Webild"
+          logoText="Jobee"
-          copyrightText="© 2025 Webild. All rights reserved."
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
           columns={footerColumns}
         />
       </div>

src/app/post-job/page.tsx

@@ -1,17 +1,18 @@
 "use client";
 
-import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import Input from "@/components/form/Input";
+import { Sparkles, Mail } from "lucide-react";
-import { Upload, CheckCircle, X } from "lucide-react";
 
+export default function PostJobPage() {
   const navItems = [
-  { name: "Search Jobs", id: "/search" },
+    { name: "Search Jobs", id: "search" },
-  { name: "Post a Job", id: "/post-job" },
+    { name: "Post a Job", id: "post-job" },
     { name: "Admin", id: "admin-login" },
-  { name: "Browse", id: "/browse" },
+    { name: "Browse", id: "browse" },
     { name: "Contact", id: "contact" },
   ];
 
@@ -42,90 +43,6 @@ const footerColumns = [
     },
   ];
 
-interface FormData {
-  jobTitle: string;
-  companyName: string;
-  location: string;
-  jobType: string;
-  salary: string;
-  description: string;
-  requirements: string;
-  benefits: string;
-  contactEmail: string;
-}
-
-interface FormErrors {
-  [key: string]: string;
-}
-
-export default function PostJobPage() {
-  const [formData, setFormData] = useState<FormData>({
-    jobTitle: "",    companyName: "",    location: "",    jobType: "Full-time",    salary: "",    description: "",    requirements: "",    benefits: "",    contactEmail: ""});
-
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [submitted, setSubmitted] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const validateForm = (): boolean => {
-    const newErrors: FormErrors = {};
-
-    if (!formData.jobTitle.trim()) {
-      newErrors.jobTitle = "Job title is required";
-    }
-    if (!formData.companyName.trim()) {
-      newErrors.companyName = "Company name is required";
-    }
-    if (!formData.location.trim()) {
-      newErrors.location = "Location is required";
-    }
-    if (!formData.salary.trim()) {
-      newErrors.salary = "Salary range is required";
-    }
-    if (!formData.description.trim() || formData.description.trim().length < 20) {
-      newErrors.description = "Job description must be at least 20 characters";
-    }
-    if (!formData.requirements.trim() || formData.requirements.trim().length < 20) {
-      newErrors.requirements = "Requirements must be at least 20 characters";
-    }
-    if (!formData.contactEmail.trim()) {
-      newErrors.contactEmail = "Contact email is required";
-    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.contactEmail)) {
-      newErrors.contactEmail = "Please enter a valid email address";
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleInputChange = (field: keyof FormData, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      setErrors((prev) => {
-        const newErrors = { ...prev };
-        delete newErrors[field];
-        return newErrors;
-      });
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!validateForm()) return;
-
-    setIsLoading(true);
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 2000));
-      setSubmitted(true);
-      setFormData({
-        jobTitle: "",        companyName: "",        location: "",        jobType: "Full-time",        salary: "",        description: "",        requirements: "",        benefits: "",        contactEmail: ""});
-      setTimeout(() => setSubmitted(false), 5000);
-    } catch (error) {
-      console.error("Submission error:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -141,228 +58,63 @@ export default function PostJobPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Jobee"
           navItems={navItems}
-          button={{
+          button={{ text: "Post a Job", href: "/post-job" }}
-            text: "Post a Job",            href: "/post-job"}}
+          brandName="Jobee"
         />
       </div>
 
-      <div className="min-h-screen bg-background py-16 md:py-24">
+      <div id="features" data-section="features">
-        <div className="mx-auto w-full max-w-2xl px-4 md:px-8">
+        <FeatureCardEight
-          {/* Header */}
+          features={[
-          <div className="mb-12 text-center">
+            {
-            <h1 className="mb-4 text-4xl md:text-5xl font-bold text-foreground">
+              id: 1,
-              Post a Job
+              title: "Create a Job Posting",              description:
-            </h1>
+                "Fill in job details, requirements, and salary information. Our intuitive form guides you through every step to create a compelling job listing.",              imageSrc:
-            <p className="text-lg text-foreground/75">
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=4",              imageAlt: "Job posting creation interface"},
-              Reach thousands of qualified job seekers across the Netherlands
+            {
-            </p>
+              id: 2,
-          </div>
+              title: "Reach Qualified Candidates",              description:
-
+                "Your job posting is automatically distributed across our network of active job seekers across all 12 Dutch provinces.",              imageSrc:
-          {/* Success Message */}
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=5",              imageAlt: "Candidate reach visualization"},
-          {submitted && (
+            {
-            <div className="mb-8 flex items-center gap-3 rounded-lg bg-green-50 p-4 text-green-700 border border-green-200">
+              id: 3,
-              <CheckCircle size={20} />
+              title: "Review Applications",              description:
-              <div>
+                "Manage all incoming applications in one centralized dashboard. Review resumes, cover letters, and candidate profiles easily.",              imageSrc:
-                <p className="font-semibold">Job posted successfully!</p>
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=4",              imageAlt: "Application review dashboard"},
-                <p className="text-sm">Your job listing will be live shortly.</p>
+          ]}
-              </div>
+          title="Post a Job in Three Easy Steps"
-              <button
+          description="Reach thousands of qualified job seekers across the Netherlands and build your dream team."
-                onClick={() => setSubmitted(false)}
+          tag="Simple Process"
-                className="ml-auto p-1 hover:bg-green-100 rounded"
+          tagIcon={Sparkles}
-              >
+          tagAnimation="slide-up"
-                <X size={16} />
+          textboxLayout="default"
-              </button>
+          useInvertedBackground={false}
-            </div>
+          buttons={[{ text: "Start Posting", href: "/post-job" }]}
-          )}
+          buttonAnimation="slide-up"
-
-          {/* Form */}
-          <form
-            onSubmit={handleSubmit}
-            className="rounded-xl bg-card p-8 md:p-12 border border-accent/20 shadow-lg"
-          >
-            {/* Job Title */}
-            <div className="mb-6">
-              <label className="block mb-2 text-sm font-semibold text-foreground">
-                Job Title *
-              </label>
-              <Input
-                value={formData.jobTitle}
-                onChange={(value) => handleInputChange("jobTitle", value)}
-                placeholder="e.g., Senior Software Engineer"
-                required
-              />
-              {errors.jobTitle && (
-                <p className="mt-1 text-sm text-red-600">{errors.jobTitle}</p>
-              )}
-            </div>
-
-            {/* Company Name */}
-            <div className="mb-6">
-              <label className="block mb-2 text-sm font-semibold text-foreground">
-                Company Name *
-              </label>
-              <Input
-                value={formData.companyName}
-                onChange={(value) => handleInputChange("companyName", value)}
-                placeholder="Your company name"
-                required
-              />
-              {errors.companyName && (
-                <p className="mt-1 text-sm text-red-600">{errors.companyName}</p>
-              )}
-            </div>
-
-            {/* Location */}
-            <div className="mb-6">
-              <label className="block mb-2 text-sm font-semibold text-foreground">
-                Location *
-              </label>
-              <Input
-                value={formData.location}
-                onChange={(value) => handleInputChange("location", value)}
-                placeholder="e.g., Amsterdam, Netherlands"
-                required
-              />
-              {errors.location && (
-                <p className="mt-1 text-sm text-red-600">{errors.location}</p>
-              )}
-            </div>
-
-            {/* Job Type and Salary */}
-            <div className="mb-6 grid gap-6 md:grid-cols-2">
-              <div>
-                <label className="block mb-2 text-sm font-semibold text-foreground">
-                  Job Type *
-                </label>
-                <select
-                  value={formData.jobType}
-                  onChange={(e) => handleInputChange("jobType", e.target.value)}
-                  className="w-full rounded-lg bg-secondary-button px-4 py-2.5 text-foreground placeholder-foreground/75 border border-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta"
-                >
-                  <option>Full-time</option>
-                  <option>Part-time</option>
-                  <option>Contract</option>
-                  <option>Temporary</option>
-                  <option>Internship</option>
-                </select>
-              </div>
-              <div>
-                <label className="block mb-2 text-sm font-semibold text-foreground">
-                  Salary Range *
-                </label>
-                <Input
-                  value={formData.salary}
-                  onChange={(value) => handleInputChange("salary", value)}
-                  placeholder="e.g., €50,000 - €80,000"
-                  required
-                />
-                {errors.salary && (
-                  <p className="mt-1 text-sm text-red-600">{errors.salary}</p>
-                )}
-              </div>
-            </div>
-
-            {/* Job Description */}
-            <div className="mb-6">
-              <label className="block mb-2 text-sm font-semibold text-foreground">
-                Job Description *
-              </label>
-              <textarea
-                value={formData.description}
-                onChange={(e) => handleInputChange("description", e.target.value)}
-                placeholder="Describe the role, responsibilities, and key details..."
-                rows={6}
-                className="w-full rounded-lg bg-secondary-button px-4 py-2.5 text-foreground placeholder-foreground/75 border border-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
-                required
-              />
-              {errors.description && (
-                <p className="mt-1 text-sm text-red-600">{errors.description}</p>
-              )}
-            </div>
-
-            {/* Requirements */}
-            <div className="mb-6">
-              <label className="block mb-2 text-sm font-semibold text-foreground">
-                Requirements *
-              </label>
-              <textarea
-                value={formData.requirements}
-                onChange={(e) => handleInputChange("requirements", e.target.value)}
-                placeholder="List the key requirements and qualifications (e.g., skills, experience, education)..."
-                rows={5}
-                className="w-full rounded-lg bg-secondary-button px-4 py-2.5 text-foreground placeholder-foreground/75 border border-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
-                required
-              />
-              {errors.requirements && (
-                <p className="mt-1 text-sm text-red-600">{errors.requirements}</p>
-              )}
-            </div>
-
-            {/* Benefits */}
-            <div className="mb-6">
-              <label className="block mb-2 text-sm font-semibold text-foreground">
-                Benefits (Optional)
-              </label>
-              <textarea
-                value={formData.benefits}
-                onChange={(e) => handleInputChange("benefits", e.target.value)}
-                placeholder="Highlight benefits such as remote work, flexible hours, health insurance, training, etc."
-                rows={4}
-                className="w-full rounded-lg bg-secondary-button px-4 py-2.5 text-foreground placeholder-foreground/75 border border-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
         />
       </div>
 
-            {/* Contact Email */}
+      <div id="contact" data-section="contact">
-            <div className="mb-8">
+        <ContactCenter
-              <label className="block mb-2 text-sm font-semibold text-foreground">
+          tag="Newsletter"
-                Contact Email *
+          title="Get Notified About Top Talent"
-              </label>
+          description="Subscribe to receive alerts when qualified candidates match your job requirements. Stay ahead of the competition and hire the best talent."
-              <Input
+          tagIcon={Mail}
-                value={formData.contactEmail}
+          tagAnimation="slide-up"
-                onChange={(value) => handleInputChange("contactEmail", value)}
+          background={{ variant: "animated-grid" }}
-                type="email"
+          useInvertedBackground={false}
-                placeholder="your-email@company.com"
+          inputPlaceholder="Enter your company email"
-                required
+          buttonText="Subscribe"
+          termsText="We respect your privacy. Unsubscribe anytime from our notifications."
         />
-              {errors.contactEmail && (
-                <p className="mt-1 text-sm text-red-600">{errors.contactEmail}</p>
-              )}
-            </div>
-
-            {/* Submit Button */}
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full rounded-lg bg-primary-cta px-6 py-3 font-semibold text-white hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity flex items-center justify-center gap-2"
-            >
-              {isLoading ? (
-                <>
-                  <div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
-                  Posting...
-                </>
-              ) : (
-                <>
-                  <Upload size={18} />
-                  Post Job
-                </>
-              )}
-            </button>
-
-            {/* Form Info */}
-            <p className="mt-4 text-center text-sm text-foreground/60">
-              * Required fields. Your job will be reviewed before going live.
-            </p>
-          </form>
-        </div>
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
+          columns={footerColumns}
           logoText="Jobee"
           copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
-          columns={footerColumns}
         />
       </div>
     </ThemeProvider>

src/app/search/page.tsx

@@ -2,110 +2,123 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { useState } from "react";
+import { Sparkles, Mail } from "lucide-react";
 
 const navItems = [
-  { name: "Dashboard", id: "/" },
+  { name: "Search Jobs", id: "search" },
-  { name: "Browse Jobs", id: "/search" },
+  { name: "Post a Job", id: "post-job" },
-  { name: "My Applications", id: "/applications" },
+  { name: "Admin", id: "admin-login" },
-  { name: "Settings", id: "#settings" },
+  { name: "Browse", id: "browse" },
+  { name: "Contact", id: "contact" },
 ];
 
 const footerColumns = [
   {
     title: "Product",    items: [
-      { label: "Browse Jobs", href: "/search" },
+      { label: "Search Jobs", href: "/search" },
-      { label: "Companies", href: "#" },
+      { label: "Post a Job", href: "/post-job" },
+      { label: "Browse by Province", href: "#provinces" },
       { label: "For Employers", href: "#" },
     ],
   },
   {
     title: "Company",    items: [
-      { label: "About", href: "#" },
+      { label: "About Jobee", href: "#about" },
+      { label: "Careers", href: "#" },
+      { label: "Contact Us", href: "#contact" },
       { label: "Blog", href: "#" },
-      { label: "Contact", href: "#" },
+    ],
+  },
+  {
+    title: "Resources",    items: [
+      { label: "Privacy Policy", href: "#" },
+      { label: "Terms of Service", href: "#" },
+      { label: "FAQ", href: "#" },
+      { label: "Support", href: "#" },
     ],
   },
 ];
 
 export default function SearchPage() {
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const handleSearch = (callback: () => void) => {
-    callback();
-  };
-
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="medium"
+      contentWidth="smallMedium"
-      sizing="medium"
+      sizing="mediumLargeSizeLargeTitles"
       background="circleGradient"
-      cardStyle="glass-elevated"
+      cardStyle="gradient-radial"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="double-inset"
       secondaryButtonStyle="glass"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
           brandName="Jobee"
           navItems={navItems}
           button={{
-            text: "Sign In",            onClick: () => console.log("sign-in"),
+            text: "Post a Job",            href: "/post-job"}}
-          }}
         />
       </div>
 
-      <div id="search" data-section="search" className="py-20">
+      <div id="features" data-section="features">
-        <div className="container mx-auto px-4">
+        <FeatureCardEight
-          <h1 className="text-4xl font-bold mb-4 text-center">Find Your Dream Job</h1>
+          title="Search & Browse Jobs Across the Netherlands"
-          <p className="text-lg text-gray-600 text-center mb-8">Search across all job listings in the Netherlands</p>
+          description="Explore our comprehensive job search experience with advanced filters, diverse listings, and tailored opportunities for every career stage."
-          
+          tag="Advanced Search"
-          <div className="max-w-2xl mx-auto mb-12">
+          tagIcon={Sparkles}
-            <div className="flex gap-4">
+          tagAnimation="slide-up"
-              <input
+          textboxLayout="default"
-                type="text"
+          useInvertedBackground={false}
-                placeholder="Search jobs..."
+          features={[
-                value={searchQuery}
+            {
-                onChange={(e) => setSearchQuery(e.target.value)}
+              id: 1,
-                className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              title: "Filter by Province",              description:
+                "Search jobs from all 12 Dutch provinces including Amsterdam, Rotterdam, Utrecht, and beyond. Find opportunities near you or explore remote positions nationwide.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=4",              imageAlt: "Province filter interface"},
+            {
+              id: 2,
+              title: "Refine by Category",              description:
+                "Browse across multiple industries: Technology, Healthcare, Finance, Engineering, Marketing, Sales, and more. Find roles that match your expertise and interests.",              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-bookkeeping-postcard-template_23-2149341358.jpg?_wi=2",              imageAlt: "Job category options"},
+            {
+              id: 3,
+              title: "Salary & Experience Level",              description:
+                "Filter by salary range, job type (full-time, part-time, contract), and experience level (entry-level, mid-career, senior) to find the perfect match for your career goals.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=3",              imageAlt: "Salary and level filters"},
+          ]}
+          buttons={[
+            {
+              text: "Start Your Search",              href: "/search"},
+          ]}
+          buttonAnimation="slide-up"
         />
-              <button
-                onClick={() => handleSearch(() => console.log("Searching for:", searchQuery))}
-                className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
-              >
-                Search
-              </button>
-            </div>
       </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div id="contact" data-section="contact">
-            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
+        <ContactCenter
-              <h3 className="text-xl font-semibold mb-2">Senior Software Engineer</h3>
+          tag="Save Your Search"
-              <p className="text-gray-600 mb-4">Amsterdam, Netherlands · Full-time</p>
+          title="Get Personalized Job Recommendations"
-              <p className="text-sm text-gray-500">Posted 2 days ago</p>
+          description="Create an account and set up job alerts. We'll notify you about new positions matching your criteria so you never miss an opportunity."
-            </div>
+          tagIcon={Mail}
-            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
+          tagAnimation="slide-up"
-              <h3 className="text-xl font-semibold mb-2">Product Manager</h3>
+          background={{
-              <p className="text-gray-600 mb-4">Rotterdam, Netherlands · Full-time</p>
+            variant: "animated-grid"}}
-              <p className="text-sm text-gray-500">Posted 5 days ago</p>
+          useInvertedBackground={false}
-            </div>
+          inputPlaceholder="Enter your email to get started"
-            <div className="p-6 bg-white rounded-lg shadow-md border border-gray-200">
+          buttonText="Create Alert"
-              <h3 className="text-xl font-semibold mb-2">UX Designer</h3>
+          termsText="Your preferences are private and secure. Manage your alerts anytime."
-              <p className="text-gray-600 mb-4">Utrecht, Netherlands · Full-time</p>
+        />
-              <p className="text-sm text-gray-500">Posted 1 week ago</p>
-            </div>
-          </div>
-        </div>
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Jobee"
-          copyrightText="© 2025 Jobee"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
           columns={footerColumns}
         />
       </div>

src/components/cardStack/CardStack.tsx

@@ -1,69 +1,229 @@
-import React, { useEffect, useRef, useState } from 'react';
+"use client";
 
-interface TimelineBaseProps {
+import { memo, Children } from "react";
-  items: Array<{
+import { CardStackProps } from "./types";
-    id: string | number;
+import GridLayout from "./layouts/grid/GridLayout";
-    content: React.ReactNode;
+import AutoCarousel from "./layouts/carousels/AutoCarousel";
-    media: React.ReactNode;
+import ButtonCarousel from "./layouts/carousels/ButtonCarousel";
-    reverse?: boolean;
+import TimelineBase from "./layouts/timelines/TimelineBase";
-  }>;
+import { gridConfigs } from "./layouts/grid/gridConfigs";
-  reverse?: boolean;
+
-  className?: string;
+const CardStack = ({
-  containerClassName?: string;
+    children,
-  itemClassName?: string;
+    mode = "buttons",
-  mediaWrapperClassName?: string;
+    gridVariant = "uniform-all-items-equal",
-  numberClassName?: string;
+    uniformGridCustomHeightClasses,
-  contentWrapperClassName?: string;
+    gridRowsClassName,
-  gapClassName?: string;
+    itemHeightClassesOverride,
-  ariaLabel?: string;
+    animationType,
+    supports3DAnimation = false,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout = "default",
+    useInvertedBackground,
+    carouselThreshold = 5,
+    bottomContent,
+    className = "",
+    containerClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    carouselItemClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    ariaLabel = "Card stack",
+}: CardStackProps) => {
+    const childrenArray = Children.toArray(children);
+    const itemCount = childrenArray.length;
+
+    // Check if the current grid config has gridRows defined
+    const gridConfig = gridConfigs[gridVariant]?.[itemCount];
+    const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows;
+
+    // If grid has fixed row heights and we have uniformGridCustomHeightClasses,
+    // we need to use min-h-0 on md+ to prevent conflicts
+    let adjustedHeightClasses = uniformGridCustomHeightClasses;
+    if (hasFixedGridRows && uniformGridCustomHeightClasses) {
+        // Extract the mobile min-height and add md:min-h-0
+        const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0];
+        adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`;
     }
 
-const CardStack = React.forwardRef<HTMLDivElement, TimelineBaseProps>(
+    // 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)
-      items,
+        const timelineAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
-      reverse = false,
-      className,
-      containerClassName,
-      itemClassName,
-      mediaWrapperClassName,
-      numberClassName,
-      contentWrapperClassName,
-      gapClassName,
-      ariaLabel = 'Card stack timeline',
-    },
-    ref
-  ) => {
-    const [windowHeight, setWindowHeight] = useState(0);
-
-    useEffect(() => {
-      setWindowHeight(typeof window !== 'undefined' ? window.innerHeight : 0);
-    }, []);
 
         return (
-      <div
+            <TimelineBase
-        ref={ref}
+                variant={gridVariant}
-        className={`relative ${containerClassName || ''}`}
+                uniformGridCustomHeightClasses={adjustedHeightClasses}
-        aria-label={ariaLabel}
+                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}
             >
-        {items.map((item, index) => (
+                {childrenArray}
-          <div key={item.id} className={`flex gap-4 ${itemClassName || ''}`}>
+            </TimelineBase>
-            <div className={`w-1/2 ${mediaWrapperClassName || ''}`}>
-              {item.media}
-            </div>
-            <div className={`w-1/2 flex items-center ${contentWrapperClassName || ''}`}>
-              <span className={`inline-block mr-4 ${numberClassName || ''}`}>
-                {item.id}
-              </span>
-              {item.content}
-            </div>
-          </div>
-        ))}
-      </div>
         );
     }
+
+    // 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>
         );
+    }
 
-CardStack.displayName = 'CardStack';
+    // 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;
 
-export default CardStack;
+        return (
+            <AutoCarousel
+                uniformGridCustomHeightClasses={adjustedHeightClasses}
+                animationType={carouselAnimationType}
+                title={title}
+                titleSegments={titleSegments}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                tagAnimation={tagAnimation}
+                buttons={buttons}
+                buttonAnimation={buttonAnimation}
+                textboxLayout={textboxLayout}
+                useInvertedBackground={useInvertedBackground}
+                bottomContent={bottomContent}
+                className={className}
+                containerClassName={containerClassName}
+                carouselClassName={carouselClassName}
+                textBoxClassName={textBoxClassName}
+                titleClassName={titleClassName}
+                titleImageWrapperClassName={titleImageWrapperClassName}
+                titleImageClassName={titleImageClassName}
+                descriptionClassName={descriptionClassName}
+                tagClassName={tagClassName}
+                buttonContainerClassName={buttonContainerClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                ariaLabel={ariaLabel}
+            >
+                {childrenArray}
+            </AutoCarousel>
+        );
+    }
+
+    // Button-controlled carousel for 5+ items
+    // Convert depth-3d to scale-rotate for carousel (doesn't support 3D)
+    const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType;
+
+    return (
+        <ButtonCarousel
+            uniformGridCustomHeightClasses={adjustedHeightClasses}
+            animationType={carouselAnimationType}
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            bottomContent={bottomContent}
+            className={className}
+            containerClassName={containerClassName}
+            carouselClassName={carouselClassName}
+            carouselItemClassName={carouselItemClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={titleClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            descriptionClassName={descriptionClassName}
+            tagClassName={tagClassName}
+            buttonContainerClassName={buttonContainerClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {childrenArray}
+        </ButtonCarousel>
+    );
+};
+
+CardStack.displayName = "CardStack";
+
+export default memo(CardStack);

src/components/cardStack/hooks/useCardAnimation.ts

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

src/components/cardStack/hooks/useDepth3DAnimation.ts

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

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

@@ -1,37 +1,149 @@
-import React from "react";
+"use client";
 
-interface TimelineItem {
+import React, { Children, useCallback } from "react";
-  id: string;
+import { cls } from "@/lib/utils";
-  title: string;
+import CardStackTextBox from "../../CardStackTextBox";
-  description: string;
+import { useCardAnimation } from "../../hooks/useCardAnimation";
-  date?: string;
+import type { LucideIcon } from "lucide-react";
-}
+import type { ButtonConfig, CardAnimationType, TitleSegment, ButtonAnimationType } from "../../types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type TimelineVariant = "timeline";
 
 interface TimelineBaseProps {
-  items: TimelineItem[];
+  children: React.ReactNode;
-  layout?: "vertical" | "horizontal";
+  variant?: TimelineVariant;
-  animated?: boolean;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title?: string;
+  titleSegments?: TitleSegment[];
+  description?: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout?: TextboxLayout;
+  useInvertedBackground?: InvertedBackground;
   className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  ariaLabel?: string;
 }
 
-const TimelineBase: React.FC<TimelineBaseProps> = ({
+const TimelineBase = ({
-  items,
+  children,
-  layout = "vertical",  animated = true,
+  variant = "timeline",
-  className = ""}) => {
+  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 ${layout} ${animated ? "animated" : ""} ${className}`}>
+    <section
-      {items.map((item) => (
+      className={cls(
-        <div key={item.id} className="timeline-item">
+        "relative py-20 w-full",
-          <div className="timeline-marker" />
+        useInvertedBackground && "bg-foreground",
-          <div className="timeline-content">
+        className
-            <h3 className="timeline-title">{item.title}</h3>
+      )}
-            <p className="timeline-description">{item.description}</p>
+      aria-label={ariaLabel}
-            {item.date && <p className="timeline-date">{item.date}</p>}
+    >
-          </div>
+      <div
+        className={cls("w-content-width mx-auto flex flex-col gap-6", containerClassName)}
+      >
+        {(title || titleSegments || description) && (
+          <CardStackTextBox
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            textBoxClassName={textBoxClassName}
+            titleClassName={titleClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            descriptionClassName={descriptionClassName}
+            tagClassName={tagClassName}
+            buttonContainerClassName={buttonContainerClassName}
+            buttonClassName={buttonClassName}
+            buttonTextClassName={buttonTextClassName}
+          />
+        )}
+        <div
+          className={cls(
+            "relative z-10 flex flex-col gap-6 md:gap-15"
+          )}
+        >
+          {Children.map(childrenArray, (child, index) => (
+            <div
+              key={index}
+              className={cls("w-65 md:w-25", uniformGridCustomHeightClasses, getItemClasses(index))}
+              ref={(el) => { itemRefs.current[index] = el; }}
+            >
+              {child}
             </div>
           ))}
         </div>
+      </div>
+    </section>
   );
 };
 
-export default TimelineBase;
+TimelineBase.displayName = "TimelineBase";
+
+export default React.memo(TimelineBase);

src/components/sections/contact/ContactCenter.tsx

@@ -1,65 +1,131 @@
 "use client";
 
-import React, { useState } from "react";
+import ContactForm from "@/components/form/ContactForm";
-import { Mail } from "lucide-react";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+import { sendContactEmail } from "@/utils/sendContactEmail";
+import type { ButtonAnimationType } from "@/types/button";
+
+type ContactCenterBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
 
 interface ContactCenterProps {
-  tag: string;
     title: string;
     description: string;
-  tagIcon?: React.ComponentType<{ className?: string }>;
+    tag: string;
-  background?: { variant: string };
+    tagIcon?: LucideIcon;
-  useInvertedBackground?: boolean;
+    tagAnimation?: ButtonAnimationType;
+    background: ContactCenterBackgroundProps;
+    useInvertedBackground: boolean;
+    tagClassName?: string;
     inputPlaceholder?: string;
     buttonText?: string;
     termsText?: string;
+    onSubmit?: (email: string) => void;
+    ariaLabel?: string;
     className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
 }
 
-const ContactCenter: React.FC<ContactCenterProps> = ({
+const ContactCenter = ({
-  tag,
     title,
     description,
-  inputPlaceholder = "Enter your email",  buttonText = "Sign Up",  termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",  className = ""}) => {
+    tag,
-  const [email, setEmail] = useState("");
+    tagIcon,
+    tagAnimation,
+    background,
+    useInvertedBackground,
+    tagClassName = "",
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+}: ContactCenterProps) => {
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    const handleSubmit = async (email: string) => {
-    e.preventDefault();
+        try {
-    console.log("Email submitted:", email);
+            await sendContactEmail({ email });
-    setEmail("");
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
     };
 
     return (
-    <section className={`py-20 px-4 ${className}`}>
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
-      <div className="max-w-2xl mx-auto text-center">
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
-        <div className="mb-4 flex justify-center">
+                <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)}>
-          <span className="text-sm font-semibold text-blue-600">{tag}</span>
+                    <div className="relative z-10 w-full md:w-1/2">
-        </div>
+                        <ContactForm
-        <h2 className="text-4xl font-bold mb-4">{title}</h2>
+                            tag={tag}
-        <p className="text-lg text-gray-600 mb-8">{description}</p>
+                            tagIcon={tagIcon}
-
+                            tagAnimation={tagAnimation}
-        <form onSubmit={handleSubmit} className="max-w-md mx-auto mb-4">
+                            title={title}
-          <div className="flex gap-2 mb-4">
+                            description={description}
-            <input
+                            useInvertedBackground={useInvertedBackground}
-              type="email"
+                            inputPlaceholder={inputPlaceholder}
-              value={email}
+                            buttonText={buttonText}
-              onChange={(e) => setEmail(e.target.value)}
+                            termsText={termsText}
-              placeholder={inputPlaceholder}
+                            onSubmit={handleSubmit}
-              required
+                            centered={true}
-              className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            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}
                         />
-            <button
-              type="submit"
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              {buttonText}
-            </button>
                     </div>
-          <p className="text-xs text-gray-500">{termsText}</p>
+                    <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
-        </form>
+                        <HeroBackgrounds {...background} />
+                    </div>
+                </div>
             </div>
         </section>
     );
 };
 
+ContactCenter.displayName = "ContactCenter";
+
 export default ContactCenter;

src/components/sections/contact/ContactSplit.tsx

@@ -1,93 +1,164 @@
 "use client";
 
-import React, { useState } from "react";
+import ContactForm from "@/components/form/ContactForm";
+import MediaContent from "@/components/shared/MediaContent";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { LucideIcon } from "lucide-react";
+import { sendContactEmail } from "@/utils/sendContactEmail";
+import type { ButtonAnimationType } from "@/types/button";
+
+type ContactSplitBackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
 
 interface ContactSplitProps {
-  tag: string;
     title: string;
     description: string;
-  tagIcon?: React.ComponentType<{ className?: string }>;
+    tag: string;
-  background?: { variant: string };
+    tagIcon?: LucideIcon;
-  useInvertedBackground?: boolean;
+    tagAnimation?: ButtonAnimationType;
+    background: ContactSplitBackgroundProps;
+    useInvertedBackground: boolean;
     imageSrc?: string;
     videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
     mediaPosition?: "left" | "right";
+    mediaAnimation: ButtonAnimationType;
     inputPlaceholder?: string;
     buttonText?: string;
     termsText?: string;
+    onSubmit?: (email: string) => void;
+    ariaLabel?: string;
     className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    contactFormClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    formWrapperClassName?: string;
+    formClassName?: string;
+    inputClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    termsClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
 }
 
-const ContactSplit: React.FC<ContactSplitProps> = ({
+const ContactSplit = ({
-  tag,
     title,
     description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    background,
+    useInvertedBackground,
     imageSrc,
     videoSrc,
-  mediaPosition = "right",  inputPlaceholder = "Enter your email",  buttonText = "Sign Up",  termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",  className = ""}) => {
+    imageAlt = "",
-  const [email, setEmail] = useState("");
+    videoAriaLabel = "Contact section video",
+    mediaPosition = "right",
+    mediaAnimation,
+    inputPlaceholder = "Enter your email",
+    buttonText = "Sign Up",
+    termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
+    onSubmit,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    contactFormClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    formWrapperClassName = "",
+    formClassName = "",
+    inputClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    termsClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: ContactSplitProps) => {
+    const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    const handleSubmit = async (email: string) => {
-    e.preventDefault();
+        try {
-    console.log("Email submitted:", email);
+            await sendContactEmail({ email });
-    setEmail("");
+            console.log("Email send successfully");
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
     };
 
-  const formContent = (
+    const contactContent = (
-    <div className="flex-1">
+        <div className="relative card rounded-theme-capped p-6 py-15 md:py-6 flex items-center justify-center">
-      <div className="mb-4 text-sm font-semibold text-blue-600">{tag}</div>
+            <ContactForm
-      <h2 className="text-3xl font-bold mb-4">{title}</h2>
+                tag={tag}
-      <p className="text-gray-600 mb-8">{description}</p>
+                tagIcon={tagIcon}
-
+                tagAnimation={tagAnimation}
-      <form onSubmit={handleSubmit} className="space-y-4">
+                title={title}
-        <div className="flex gap-2">
+                description={description}
-          <input
+                useInvertedBackground={useInvertedBackground}
-            type="email"
+                inputPlaceholder={inputPlaceholder}
-            value={email}
+                buttonText={buttonText}
-            onChange={(e) => setEmail(e.target.value)}
+                termsText={termsText}
-            placeholder={inputPlaceholder}
+                onSubmit={handleSubmit}
-            required
+                centered={true}
-            className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className={cls("w-full", contactFormClassName)}
+                tagClassName={tagClassName}
+                titleClassName={titleClassName}
+                descriptionClassName={descriptionClassName}
+                formWrapperClassName={cls("w-full md:w-8/10 2xl:w-7/10", formWrapperClassName)}
+                formClassName={formClassName}
+                inputClassName={inputClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+                termsClassName={termsClassName}
             />
-          <button
+            <div className="absolute inset w-full h-full z-0 rounded-theme-capped overflow-hidden" >
-            type="submit"
+                <HeroBackgrounds {...background} />
-            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-          >
-            {buttonText}
-          </button>
             </div>
-        <p className="text-xs text-gray-500">{termsText}</p>
-      </form>
         </div>
     );
 
-  const mediaContent = imageSrc || videoSrc ? (
+    const mediaContent = (
-    <div className="flex-1">
+        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card h-130", mediaWrapperClassName)}>
-      {imageSrc && (
+            <MediaContent
-        <img
+                imageSrc={imageSrc}
-          src={imageSrc}
+                videoSrc={videoSrc}
-          alt="Contact"
+                imageAlt={imageAlt}
-          className="w-full h-full object-cover rounded-lg"
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
             />
-      )}
-      {videoSrc && (
-        <video
-          src={videoSrc}
-          autoPlay
-          loop
-          muted
-          className="w-full h-full object-cover rounded-lg"
-        />
-      )}
         </div>
-  ) : null;
+    );
 
     return (
-    <section className={`py-20 px-4 ${className}`}>
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
-      <div className="max-w-6xl mx-auto">
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
-        <div className="flex flex-col lg:flex-row gap-12 items-center">
+                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
                     {mediaPosition === "left" && mediaContent}
-          {formContent}
+                    {contactContent}
                     {mediaPosition === "right" && mediaContent}
                 </div>
             </div>
@@ -95,4 +166,6 @@ const ContactSplit: React.FC<ContactSplitProps> = ({
     );
 };
 
+ContactSplit.displayName = "ContactSplit";
+
 export default ContactSplit;

src/components/sections/contact/ContactSplitForm.tsx

@@ -1,81 +1,214 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import Input from "@/components/form/Input";
+import Textarea from "@/components/form/Textarea";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
+import { getButtonProps } from "@/lib/buttonUtils";
+import type { AnimationType } from "@/components/text/types";
+import type { ButtonAnimationType } from "@/types/button";
+import {sendContactEmail} from "@/utils/sendContactEmail";
 
-interface ContactSplitFormProps {
+export interface InputField {
-  tag: string;
+    name: string;
-  title: string;
+    type: string;
-  description: string;
+    placeholder: string;
-  formFields?: Array<{ name: string; label: string; type: string; required?: boolean }>;
+    required?: boolean;
-  buttonText?: string;
     className?: string;
 }
 
-const ContactSplitForm: React.FC<ContactSplitFormProps> = ({
+export interface TextareaField {
-  tag,
+    name: string;
+    placeholder: string;
+    rows?: number;
+    required?: boolean;
+    className?: string;
+}
+
+interface ContactSplitFormProps {
+    title: string;
+    description: string;
+    inputs: InputField[];
+    textarea?: TextareaField;
+    useInvertedBackground: boolean;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    mediaPosition?: "left" | "right";
+    mediaAnimation: ButtonAnimationType;
+    buttonText?: string;
+    onSubmit?: (data: Record<string, string>) => void;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    formCardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const ContactSplitForm = ({
     title,
     description,
-  formFields = [
+    inputs,
-    { name: "name", label: "Name", type: "text", required: true },
+    textarea,
-    { name: "email", label: "Email", type: "email", required: true },
+    useInvertedBackground,
-    { name: "message", label: "Message", type: "textarea", required: true },
+    imageSrc,
-  ],
+    videoSrc,
-  buttonText = "Send",  className = ""}) => {
+    imageAlt = "",
-  const [formData, setFormData] = useState<Record<string, string>>({});
+    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 });
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    // Validate minimum inputs requirement
-    const { name, value } = e.target;
+    if (inputs.length < 2) {
-    setFormData((prev) => ({ ...prev, [name]: value }));
+        throw new Error("ContactSplitForm requires at least 2 inputs");
-  };
+    }
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    // 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();
-    console.log("Form submitted:", formData);
+        try {
-    setFormData({});
+            await sendContactEmail({ formData });
+            console.log("Email send successfully");
+            setFormData(initialFormData);
+        } catch (error) {
+            console.error("Failed to send email:", error);
+        }
     };
 
-  return (
+    const getButtonConfigProps = () => {
-    <section className={`py-20 px-4 ${className}`}>
+        if (theme.defaultButtonVariant === "hover-bubble") {
-      <div className="max-w-2xl mx-auto">
+            return { bgClassName: "w-full" };
-        <div className="mb-4 text-sm font-semibold text-blue-600">{tag}</div>
+        }
-        <h2 className="text-3xl font-bold mb-4">{title}</h2>
+        if (theme.defaultButtonVariant === "icon-arrow") {
-        <p className="text-gray-600 mb-8">{description}</p>
+            return { className: "justify-between" };
+        }
+        return {};
+    };
 
-        <form onSubmit={handleSubmit} className="space-y-4">
+    const formContent = (
-          {formFields.map((field) => (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex items-center justify-center", formCardClassName)}>
-            <div key={field.name}>
+            <form onSubmit={handleSubmit} className="relative z-1 w-full flex flex-col gap-6">
-              <label className="block text-sm font-medium mb-2">{field.label}</label>
+                <div className="w-full flex flex-col gap-0 text-center">
-              {field.type === "textarea" ? (
+                    <TextAnimation
-                <textarea
+                        type={theme.defaultTextAnimation as AnimationType}
-                  name={field.name}
+                        text={title}
-                  value={formData[field.name] || ""}
+                        variant="trigger"
-                  onChange={handleChange}
+                        className={cls("text-4xl font-medium leading-[1.175] text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}
-                  required={field.required}
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  rows={4}
                     />
-              ) : (
+
-                <input
+                    <TextAnimation
-                  type={field.type}
+                        type={theme.defaultTextAnimation as AnimationType}
-                  name={field.name}
+                        text={description}
-                  value={formData[field.name] || ""}
+                        variant="words-trigger"
-                  onChange={handleChange}
+                        className={cls("text-base leading-[1.15] text-balance", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}
-                  required={field.required}
+                    />
-                  className="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                </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}
                         />
                     )}
-            </div>
+
-          ))}
+                    <Button
-          <button
+                        {...getButtonProps(
+                            { text: buttonText, props: getButtonConfigProps() },
+                            0,
+                            theme.defaultButtonVariant,
+                            cls("w-full", buttonClassName),
+                            cls("text-base", buttonTextClassName)
+                        )}
                         type="submit"
-            className="w-full px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                    />
-          >
+                </div>
-            {buttonText}
-          </button>
             </form>
         </div>
+    );
+
+    const mediaContent = (
+        <div ref={mediaContainerRef} className={cls("overflow-hidden rounded-theme-capped card md:relative md:h-full", mediaWrapperClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("w-full md:absolute md:inset-0 md:h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    return (
+        <section aria-label={ariaLabel} className={cls("relative py-20 w-full", useInvertedBackground && "bg-foreground", className)}>
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:auto-rows-fr", contentClassName)}>
+                    {mediaPosition === "left" && mediaContent}
+                    {formContent}
+                    {mediaPosition === "right" && mediaContent}
+                </div>
+            </div>
         </section>
     );
 };
 
+ContactSplitForm.displayName = "ContactSplitForm";
+
 export default ContactSplitForm;

src/components/sections/pricing/PricingCardEight.tsx

@@ -1,70 +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";
+
+type PricingPlan = {
+    id: string;
+    badge: string;
+    badgeIcon?: LucideIcon;
+    price: string;
+    subtitle: string;
+    buttons: ButtonConfig[];
+    features: string[];
+};
 
 interface PricingCardEightProps {
-  plans: Array<{
+    plans: PricingPlan[];
-    id: string;
+    carouselMode?: "auto" | "buttons";
-    title: string;
+    uniformGridCustomHeightClasses?: string;
-    price: string;
+    animationType: CardAnimationType;
-    period: string;
-    features: string[];
-    button: { text: string; href?: string; onClick?: () => void };
-    imageSrc?: string;
-  }>;
     title: string;
+    titleSegments?: TitleSegment[];
     description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
     className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    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;
 }
 
-const PricingCardEight: React.FC<PricingCardEightProps> = ({
+interface PricingCardItemProps {
-  plans,
+    plan: PricingPlan;
-  title,
+    shouldUseLightText: boolean;
-  description,
+    cardClassName?: string;
-  className = ""}) => {
+    badgeClassName?: string;
-  return (
+    priceClassName?: string;
-    <section className={`py-20 px-4 ${className}`}>
+    subtitleClassName?: string;
-      <div className="max-w-6xl mx-auto">
+    planButtonContainerClassName?: string;
-        <h2 className="text-4xl font-bold text-center mb-4">{title}</h2>
+    planButtonClassName?: string;
-        <p className="text-gray-600 text-center mb-12">{description}</p>
+    featuresClassName?: string;
+    featureItemClassName?: string;
+}
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+const PricingCardItem = memo(({
-          {plans.map((plan) => (
+    plan,
-            <div key={plan.id} className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
+    shouldUseLightText,
-              {plan.imageSrc && (
+    cardClassName = "",
-                <img
+    badgeClassName = "",
-                  src={plan.imageSrc}
+    priceClassName = "",
-                  alt={plan.title}
+    subtitleClassName = "",
-                  className="w-full h-64 object-cover"
+    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 className="p-6">
+                            />
-                <h3 className="text-2xl font-bold mb-2">{plan.title}</h3>
-                <div className="mb-6">
-                  <span className="text-3xl font-bold">{plan.price}</span>
-                  <span className="text-gray-600 ml-2">{plan.period}</span>
-                </div>
-                <ul className="mb-6 space-y-3">
-                  {plan.features.map((feature, idx) => (
-                    <li key={idx} className="text-gray-700 flex items-center">
-                      <span className="text-green-500 mr-3">✓</span>
-                      {feature}
-                    </li>
                         ))}
-                </ul>
+                    </div>
-                <button
+                )}
-                  onClick={plan.button.onClick}
+            </div>
-                  className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+
+            <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}
         >
-                  {plan.button.text}
+            {plans.map((plan, index) => (
-                </button>
+                <PricingCardItem
-              </div>
+                    key={`${plan.id}-${index}`}
-            </div>
+                    plan={plan}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    badgeClassName={badgeClassName}
+                    priceClassName={priceClassName}
+                    subtitleClassName={subtitleClassName}
+                    planButtonContainerClassName={planButtonContainerClassName}
+                    planButtonClassName={planButtonClassName}
+                    featuresClassName={featuresClassName}
+                    featureItemClassName={featureItemClassName}
+                />
             ))}
-        </div>
+        </CardStack>
-      </div>
-    </section>
     );
 };
 
+PricingCardEight.displayName = "PricingCardEight";
+
 export default PricingCardEight;

src/components/sections/product/ProductCardFour.tsx

@@ -1,29 +1,238 @@
-import React from 'react';
+"use client";
 
-interface Product {
+import { memo, useCallback } from "react";
-  id: string;
+import { useRouter } from "next/navigation";
-  name: string;
+import CardStack from "@/components/cardStack/CardStack";
-  price: string;
+import ProductImage from "@/components/shared/ProductImage";
-  imageSrc: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-  imageAlt?: string;
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-}
+import { useProducts } from "@/hooks/useProducts";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardFourGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+
+type ProductCard = Product & {
+  variant: string;
+};
 
 interface ProductCardFourProps {
-  products: Product[];
+  products?: ProductCard[];
+  carouselMode?: "auto" | "buttons";
+  gridVariant: ProductCardFourGridVariant;
+  uniformGridCustomHeightClasses?: string;
+  animationType: CardAnimationType;
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  tagAnimation?: ButtonAnimationType;
+  buttons?: ButtonConfig[];
+  buttonAnimation?: ButtonAnimationType;
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  imageClassName?: string;
+  textBoxTitleClassName?: string;
+  textBoxTitleImageWrapperClassName?: string;
+  textBoxTitleImageClassName?: string;
+  textBoxDescriptionClassName?: string;
+  cardNameClassName?: string;
+  cardPriceClassName?: string;
+  cardVariantClassName?: string;
+  actionButtonClassName?: string;
+  gridClassName?: string;
+  carouselClassName?: string;
+  controlsClassName?: string;
+  textBoxClassName?: string;
+  textBoxTagClassName?: string;
+  textBoxButtonContainerClassName?: string;
+  textBoxButtonClassName?: string;
+  textBoxButtonTextClassName?: string;
 }
 
-const ProductCardFour: React.FC<ProductCardFourProps> = ({ products }) => {
+interface ProductCardItemProps {
+  product: ProductCard;
+  shouldUseLightText: boolean;
+  cardClassName?: string;
+  imageClassName?: string;
+  cardNameClassName?: string;
+  cardPriceClassName?: string;
+  cardVariantClassName?: string;
+  actionButtonClassName?: string;
+}
+
+const ProductCardItem = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+}: ProductCardItemProps) => {
   return (
-    <div className="grid grid-cols-1 gap-4">
+    <article
-      {products.map((product) => (
+      className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-        <div key={product.id} className="product-card">
+      onClick={product.onProductClick}
-          <img src={product.imageSrc} alt={product.imageAlt || product.name} />
+      role="article"
-          <h3>{product.name}</h3>
+      aria-label={`${product.name} - ${product.price}`}
-          <p className="text-lg font-semibold">{product.price}</p>
+    >
+      <ProductImage
+        imageSrc={product.imageSrc}
+        imageAlt={product.imageAlt || product.name}
+        isFavorited={product.isFavorited}
+        onFavoriteToggle={product.onFavorite}
+        showActionButton={true}
+        actionButtonAriaLabel={`View ${product.name} details`}
+        imageClassName={imageClassName}
+        actionButtonClassName={actionButtonClassName}
+      />
+
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex flex-col gap-0 flex-1 min-w-0">
+            <h3 className={cls("text-base font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+              {product.name}
+            </h3>
+            <p className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background/60" : "text-foreground/60", cardVariantClassName)}>
+              {product.variant}
+            </p>
           </div>
+          <p className={cls("text-base font-medium leading-[1.3] flex-shrink-0", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+            {product.price}
+          </p>
+        </div>
+      </div>
+    </article>
+  );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardFour = ({
+  products: productsProp,
+  carouselMode = "buttons",
+  gridVariant,
+  uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+  animationType,
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  tagAnimation,
+  buttons,
+  buttonAnimation,
+  textboxLayout,
+  useInvertedBackground,
+  ariaLabel = "Product section",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  imageClassName = "",
+  textBoxTitleClassName = "",
+  textBoxTitleImageWrapperClassName = "",
+  textBoxTitleImageClassName = "",
+  textBoxDescriptionClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+  gridClassName = "",
+  carouselClassName = "",
+  controlsClassName = "",
+  textBoxClassName = "",
+  textBoxTagClassName = "",
+  textBoxButtonContainerClassName = "",
+  textBoxButtonClassName = "",
+  textBoxButtonTextClassName = "",
+}: ProductCardFourProps) => {
+  const theme = useTheme();
+  const router = useRouter();
+  const { products: fetchedProducts, isLoading } = useProducts();
+  const isFromApi = fetchedProducts.length > 0;
+  const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const handleProductClick = useCallback((product: ProductCard) => {
+    if (isFromApi) {
+      router.push(`/shop/${product.id}`);
+    } else {
+      product.onProductClick?.();
+    }
+  }, [isFromApi, router]);
+
+
+  if (isLoading && !productsProp) {
+    return (
+      <div className="w-content-width mx-auto py-20 text-center">
+        <p className="text-foreground">Loading products...</p>
+      </div>
+    );
+  }
+
+  if (!products || products.length === 0) {
+    return null;
+  }
+
+  return (
+    <CardStack
+      mode={carouselMode}
+      gridVariant={gridVariant}
+      uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+      animationType={animationType}
+
+      title={title}
+      titleSegments={titleSegments}
+      description={description}
+      tag={tag}
+      tagIcon={tagIcon}
+      tagAnimation={tagAnimation}
+      buttons={buttons}
+      buttonAnimation={buttonAnimation}
+      textboxLayout={textboxLayout}
+      useInvertedBackground={useInvertedBackground}
+      className={className}
+      containerClassName={containerClassName}
+      gridClassName={gridClassName}
+      carouselClassName={carouselClassName}
+      controlsClassName={controlsClassName}
+      textBoxClassName={textBoxClassName}
+      titleClassName={textBoxTitleClassName}
+      titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+      titleImageClassName={textBoxTitleImageClassName}
+      descriptionClassName={textBoxDescriptionClassName}
+      tagClassName={textBoxTagClassName}
+      buttonContainerClassName={textBoxButtonContainerClassName}
+      buttonClassName={textBoxButtonClassName}
+      buttonTextClassName={textBoxButtonTextClassName}
+      ariaLabel={ariaLabel}
+    >
+      {products?.map((product, index) => (
+        <ProductCardItem
+          key={`${product.id}-${index}`}
+          product={{ ...product, onProductClick: () => handleProductClick(product) }}
+          shouldUseLightText={shouldUseLightText}
+          cardClassName={cardClassName}
+          imageClassName={imageClassName}
+          cardNameClassName={cardNameClassName}
+          cardPriceClassName={cardPriceClassName}
+          cardVariantClassName={cardVariantClassName}
+          actionButtonClassName={actionButtonClassName}
+        />
       ))}
-    </div>
+    </CardStack>
   );
 };
 
+ProductCardFour.displayName = "ProductCardFour";
+
 export default ProductCardFour;

src/components/sections/product/ProductCardOne.tsx

@@ -1,29 +1,226 @@
-import React from 'react';
+"use client";
 
-interface Product {
+import { memo, useCallback } from "react";
-  id: string;
+import { useRouter } from "next/navigation";
-  name: string;
+import { ArrowUpRight } from "lucide-react";
-  price: string;
+import CardStack from "@/components/cardStack/CardStack";
-  imageSrc: string;
+import ProductImage from "@/components/shared/ProductImage";
-  imageAlt?: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-}
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardOneGridVariant = Exclude<GridVariant, "timeline">;
+
+type ProductCard = Product;
 
 interface ProductCardOneProps {
-  products: Product[];
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardOneGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
 }
 
-const ProductCardOne: React.FC<ProductCardOneProps> = ({ products }) => {
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+}: ProductCardItemProps) => {
     return (
-    <div className="grid grid-cols-1 gap-4">
+        <article
-      {products.map((product) => (
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-        <div key={product.id} className="product-card">
+            onClick={product.onProductClick}
-          <img src={product.imageSrc} alt={product.imageAlt || product.name} />
+            role="article"
-          <h3>{product.name}</h3>
+            aria-label={`${product.name} - ${product.price}`}
-          <p className="text-lg font-semibold">{product.price}</p>
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.name}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex items-center justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                    <h3 className={cls("text-base font-medium truncate leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                        {product.name}
+                    </h3>
+                    <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+                        {product.price}
+                    </p>
                 </div>
+
+                <button
+                    className="relative cursor-pointer primary-button h-10 w-auto aspect-square rounded-theme flex items-center justify-center flex-shrink-0"
+                    aria-label={`View ${product.name} details`}
+                    type="button"
+                >
+                    <ArrowUpRight className="h-4/10 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                </button>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardOne = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardOneProps) => {
+    const theme = useTheme();
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+    const isFromApi = fetchedProducts.length > 0;
+    const products = isFromApi ? fetchedProducts : productsProp;
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handleProductClick = useCallback((product: ProductCard) => {
+        if (isFromApi) {
+            router.push(`/shop/${product.id}`);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, router]);
+
+    if (isLoading && !productsProp) {
+        return (
+            <div className="w-content-width mx-auto py-20 text-center">
+                <p className="text-foreground">Loading products...</p>
+            </div>
+        );
+    }
+
+    if (!products || products.length === 0) {
+        return null;
+    }
+
+    return (
+        <CardStack
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {products?.map((product, index) => (
+                <ProductCardItem
+                    key={`${product.id}-${index}`}
+                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                />
             ))}
-    </div>
+        </CardStack>
     );
 };
 
+ProductCardOne.displayName = "ProductCardOne";
+
 export default ProductCardOne;

src/components/sections/product/ProductCardThree.tsx

@@ -1,29 +1,283 @@
-import React from 'react';
+"use client";
 
-interface Product {
+import { memo, useState, useCallback } from "react";
-  id: string;
+import { useRouter } from "next/navigation";
-  name: string;
+import { Plus, Minus } from "lucide-react";
-  price: string;
+import CardStack from "@/components/cardStack/CardStack";
-  imageSrc: string;
+import ProductImage from "@/components/shared/ProductImage";
-  imageAlt?: string;
+import QuantityButton from "@/components/shared/QuantityButton";
-}
+import Button from "@/components/button/Button";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, ButtonAnimationType, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardThreeGridVariant = Exclude<GridVariant, "timeline" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row">;
+
+type ProductCard = Product & {
+    onQuantityChange?: (quantity: number) => void;
+    initialQuantity?: number;
+    priceButtonProps?: Partial<ButtonPropsForVariant<CTAButtonVariant>>;
+};
 
 interface ProductCardThreeProps {
-  products: Product[];
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardThreeGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
 }
 
-const ProductCardThree: React.FC<ProductCardThreeProps> = ({ products }) => {
+
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    isFromApi: boolean;
+    onBuyClick?: (productId: string, quantity: number) => void;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardNameClassName?: string;
+    quantityControlsClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    isFromApi,
+    onBuyClick,
+    cardClassName = "",
+    imageClassName = "",
+    cardNameClassName = "",
+    quantityControlsClassName = "",
+}: ProductCardItemProps) => {
+    const theme = useTheme();
+    const [quantity, setQuantity] = useState(product.initialQuantity || 1);
+
+    const handleIncrement = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        const newQuantity = quantity + 1;
+        setQuantity(newQuantity);
+        product.onQuantityChange?.(newQuantity);
+    }, [quantity, product]);
+
+    const handleDecrement = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (quantity > 1) {
+            const newQuantity = quantity - 1;
+            setQuantity(newQuantity);
+            product.onQuantityChange?.(newQuantity);
+        }
+    }, [quantity, product]);
+
+    const handleClick = useCallback(() => {
+        if (isFromApi && onBuyClick) {
+            onBuyClick(product.id, quantity);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, onBuyClick, product, quantity]);
+
     return (
-    <div className="grid grid-cols-1 gap-4">
+        <article
-      {products.map((product) => (
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-        <div key={product.id} className="product-card">
+            onClick={handleClick}
-          <img src={product.imageSrc} alt={product.imageAlt || product.name} />
+            role="article"
-          <h3>{product.name}</h3>
+            aria-label={`${product.name} - ${product.price}`}
-          <p className="text-lg font-semibold">{product.price}</p>
+        >
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || product.name}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                imageClassName={imageClassName}
+            />
+
+            <div className="relative z-1 flex flex-col gap-3">
+                <h3 className={cls("text-xl font-medium leading-[1.15] truncate", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                    {product.name}
+                </h3>
+
+                <div className="flex items-center justify-between gap-4">
+                    <div className={cls("flex items-center gap-2", quantityControlsClassName)}>
+                        <QuantityButton
+                            onClick={handleDecrement}
+                            ariaLabel="Decrease quantity"
+                            Icon={Minus}
+                        />
+                        <span className={cls("text-base font-medium min-w-[2ch] text-center leading-[1]", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            {quantity}
+                        </span>
+                        <QuantityButton
+                            onClick={handleIncrement}
+                            ariaLabel="Increase quantity"
+                            Icon={Plus}
+                        />
                     </div>
+
+                    <Button
+                        {...getButtonProps(
+                            {
+                                text: product.price,
+                                props: product.priceButtonProps,
+                            },
+                            0,
+                            theme.defaultButtonVariant
+                        )}
+                    />
+                </div>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardThree = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardNameClassName = "",
+    quantityControlsClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardThreeProps) => {
+    const theme = useTheme();
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+    const isFromApi = fetchedProducts.length > 0;
+    const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[];
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handleProductClick = useCallback((product: ProductCard) => {
+        if (isFromApi) {
+            router.push(`/shop/${product.id}`);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, router]);
+
+    if (isLoading && !productsProp) {
+        return (
+            <div className="w-content-width mx-auto py-20 text-center">
+                <p className="text-foreground">Loading products...</p>
+            </div>
+        );
+    }
+
+    if (!products || products.length === 0) {
+        return null;
+    }
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {products?.map((product, index) => (
+                <ProductCardItem
+                    key={`${product.id}-${index}`}
+                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                    shouldUseLightText={shouldUseLightText}
+                    isFromApi={isFromApi}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardNameClassName={cardNameClassName}
+                    quantityControlsClassName={quantityControlsClassName}
+                />
             ))}
-    </div>
+        </CardStack>
     );
 };
 
+ProductCardThree.displayName = "ProductCardThree";
+
 export default ProductCardThree;

src/components/sections/product/ProductCardTwo.tsx

@@ -1,29 +1,267 @@
-import React from 'react';
+"use client";
 
-interface Product {
+import { memo, useCallback } from "react";
-  id: string;
+import { useRouter } from "next/navigation";
-  name: string;
+import { Star } from "lucide-react";
-  price: string;
+import CardStack from "@/components/cardStack/CardStack";
-  imageSrc: string;
+import ProductImage from "@/components/shared/ProductImage";
-  imageAlt?: string;
+import { cls, shouldUseInvertedText } from "@/lib/utils";
-}
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import { useProducts } from "@/hooks/useProducts";
+import type { Product } from "@/lib/api/product";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ProductCardTwoGridVariant = Exclude<GridVariant, "timeline" | "one-large-right-three-stacked-left" | "items-top-row-full-width-bottom" | "full-width-top-items-bottom-row" | "one-large-left-three-stacked-right">;
+
+type ProductCard = Product & {
+    brand: string;
+    rating: number;
+    reviewCount: string;
+};
 
 interface ProductCardTwoProps {
-  products: Product[];
+    products?: ProductCard[];
+    carouselMode?: "auto" | "buttons";
+    gridVariant: ProductCardTwoGridVariant;
+    uniformGridCustomHeightClasses?: string;
+    animationType: CardAnimationType;
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    tagAnimation?: ButtonAnimationType;
+    buttons?: ButtonConfig[];
+    buttonAnimation?: ButtonAnimationType;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    imageClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxTitleImageWrapperClassName?: string;
+    textBoxTitleImageClassName?: string;
+    textBoxDescriptionClassName?: string;
+    cardBrandClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    cardRatingClassName?: string;
+    actionButtonClassName?: string;
+    gridClassName?: string;
+    carouselClassName?: string;
+    controlsClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
 }
 
-const ProductCardTwo: React.FC<ProductCardTwoProps> = ({ products }) => {
+interface ProductCardItemProps {
+    product: ProductCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    imageClassName?: string;
+    cardBrandClassName?: string;
+    cardNameClassName?: string;
+    cardPriceClassName?: string;
+    cardRatingClassName?: string;
+    actionButtonClassName?: string;
+}
+
+const ProductCardItem = memo(({
+    product,
+    shouldUseLightText,
+    cardClassName = "",
+    imageClassName = "",
+    cardBrandClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    cardRatingClassName = "",
+    actionButtonClassName = "",
+}: ProductCardItemProps) => {
     return (
-    <div className="grid grid-cols-1 gap-4">
+        <article
-      {products.map((product) => (
+            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
-        <div key={product.id} className="product-card">
+            onClick={product.onProductClick}
-          <img src={product.imageSrc} alt={product.imageAlt || product.name} />
+            role="article"
-          <h3>{product.name}</h3>
+            aria-label={`${product.brand} ${product.name} - ${product.price}`}
-          <p className="text-lg font-semibold">{product.price}</p>
+        >
-        </div>
+            <ProductImage
+                imageSrc={product.imageSrc}
+                imageAlt={product.imageAlt || `${product.brand} ${product.name}`}
+                isFavorited={product.isFavorited}
+                onFavoriteToggle={product.onFavorite}
+                showActionButton={true}
+                actionButtonAriaLabel={`View ${product.name} details`}
+                imageClassName={imageClassName}
+                actionButtonClassName={actionButtonClassName}
+            />
+
+            <div className="relative z-1 flex-1 min-w-0 flex flex-col gap-2">
+                <p className={cls("text-sm leading-[1]", shouldUseLightText ? "text-background" : "text-foreground", cardBrandClassName)}>
+                    {product.brand}
+                </p>
+                <div className="flex flex-col gap-1" >
+                    <h3 className={cls("text-xl font-medium truncate leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground", cardNameClassName)}>
+                        {product.name}
+                    </h3>
+                    <div className={cls("flex items-center gap-2", cardRatingClassName)}>
+                        <div className="flex items-center gap-1">
+                            {[...Array(5)].map((_, i) => (
+                                <Star
+                                    key={i}
+                                    className={cls(
+                                        "h-4 w-auto",
+                                        i < Math.floor(product.rating)
+                                            ? "text-accent fill-accent"
+                                            : "text-accent opacity-20"
+                                    )}
+                                    strokeWidth={1.5}
+                                />
                             ))}
                         </div>
+                        <span className={cls("text-sm leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            ({product.reviewCount})
+                        </span>
+                    </div>
+                </div>
+                <p className={cls("text-2xl font-medium leading-[1.3]", shouldUseLightText ? "text-background" : "text-foreground", cardPriceClassName)}>
+                    {product.price}
+                </p>
+            </div>
+        </article>
+    );
+});
+
+ProductCardItem.displayName = "ProductCardItem";
+
+const ProductCardTwo = ({
+    products: productsProp,
+    carouselMode = "buttons",
+    gridVariant,
+    uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105",
+    animationType,
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    tagAnimation,
+    buttons,
+    buttonAnimation,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "Product section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    imageClassName = "",
+    textBoxTitleClassName = "",
+    textBoxTitleImageWrapperClassName = "",
+    textBoxTitleImageClassName = "",
+    textBoxDescriptionClassName = "",
+    cardBrandClassName = "",
+    cardNameClassName = "",
+    cardPriceClassName = "",
+    cardRatingClassName = "",
+    actionButtonClassName = "",
+    gridClassName = "",
+    carouselClassName = "",
+    controlsClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+}: ProductCardTwoProps) => {
+    const theme = useTheme();
+    const router = useRouter();
+    const { products: fetchedProducts, isLoading } = useProducts();
+    const isFromApi = fetchedProducts.length > 0;
+    const products = (fetchedProducts.length > 0 ? fetchedProducts : productsProp) as ProductCard[];
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const handleProductClick = useCallback((product: ProductCard) => {
+        if (isFromApi) {
+            router.push(`/shop/${product.id}`);
+        } else {
+            product.onProductClick?.();
+        }
+    }, [isFromApi, router]);
+
+    const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted")
+        ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]"
+        : undefined;
+
+    if (isLoading && !productsProp) {
+        return (
+            <div className="w-content-width mx-auto py-20 text-center">
+                <p className="text-foreground">Loading products...</p>
+            </div>
+        );
+    }
+
+    if (!products || products.length === 0) {
+        return null;
+    }
+
+    return (
+        <CardStack
+            useInvertedBackground={useInvertedBackground}
+            mode={carouselMode}
+            gridVariant={gridVariant}
+            uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
+            gridRowsClassName={customGridRows}
+            animationType={animationType}
+
+            title={title}
+            titleSegments={titleSegments}
+            description={description}
+            tag={tag}
+            tagIcon={tagIcon}
+            tagAnimation={tagAnimation}
+            buttons={buttons}
+            buttonAnimation={buttonAnimation}
+            textboxLayout={textboxLayout}
+            className={className}
+            containerClassName={containerClassName}
+            gridClassName={gridClassName}
+            carouselClassName={carouselClassName}
+            controlsClassName={controlsClassName}
+            textBoxClassName={textBoxClassName}
+            titleClassName={textBoxTitleClassName}
+            titleImageWrapperClassName={textBoxTitleImageWrapperClassName}
+            titleImageClassName={textBoxTitleImageClassName}
+            descriptionClassName={textBoxDescriptionClassName}
+            tagClassName={textBoxTagClassName}
+            buttonContainerClassName={textBoxButtonContainerClassName}
+            buttonClassName={textBoxButtonClassName}
+            buttonTextClassName={textBoxButtonTextClassName}
+            ariaLabel={ariaLabel}
+        >
+            {products?.map((product, index) => (
+                <ProductCardItem
+                    key={`${product.id}-${index}`}
+                    product={{ ...product, onProductClick: () => handleProductClick(product) }}
+                    shouldUseLightText={shouldUseLightText}
+                    cardClassName={cardClassName}
+                    imageClassName={imageClassName}
+                    cardBrandClassName={cardBrandClassName}
+                    cardNameClassName={cardNameClassName}
+                    cardPriceClassName={cardPriceClassName}
+                    cardRatingClassName={cardRatingClassName}
+                    actionButtonClassName={actionButtonClassName}
+                />
+            ))}
+        </CardStack>
     );
 };
 
+ProductCardTwo.displayName = "ProductCardTwo";
+
 export default ProductCardTwo;

src/hooks/useCheckout.ts

@@ -1,75 +1,117 @@
-import { useState, useCallback } from "react";
+"use client";
 
-interface CheckoutItem {
+import { useState } from "react";
-  id: string;
+import { Product } from "@/lib/api/product";
-  name: string;
+
-  price: number;
+export type CheckoutItem = {
+    productId: string;
     quantity: number;
-}
+    imageSrc?: string;
-
+    imageAlt?: string;
-interface CheckoutState {
+    metadata?: {
-  items: CheckoutItem[];
+        brand?: string;
-  total: number;
+        variant?: string;
-  loading: boolean;
+        rating?: number;
-  error: string | null;
+        reviewCount?: string;
-}
+        [key: string]: string | number | undefined;
-
+    };
-const useCheckout = () => {
-  const [state, setState] = useState<CheckoutState>({
-    items: [],
-    total: 0,
-    loading: false,
-    error: null,
-  });
-
-  const addItem = useCallback((item: CheckoutItem) => {
-    setState((prev) => ({
-      ...prev,
-      items: [...prev.items, item],
-      total: prev.total + item.price * item.quantity,
-    }));
-  }, []);
-
-  const removeItem = useCallback((itemId: string) => {
-    setState((prev) => {
-      const item = prev.items.find((i) => i.id === itemId);
-      return {
-        ...prev,
-        items: prev.items.filter((i) => i.id !== itemId),
-        total: prev.total - (item ? item.price * item.quantity : 0),
 };
-    });
-  }, []);
 
-  const clearCart = useCallback(() => {
+export type CheckoutResult = {
-    setState({
+    success: boolean;
-      items: [],
+    url?: string;
-      total: 0,
+    error?: string;
-      loading: false,
+};
-      error: null,
+
-    });
+export function useCheckout() {
-  }, []);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const checkout = async (items: CheckoutItem[], options?: { successUrl?: string; cancelUrl?: string }): Promise<CheckoutResult> => {
+        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+        const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
+
+        if (!apiUrl || !projectId) {
+            const errorMsg = "NEXT_PUBLIC_API_URL or NEXT_PUBLIC_PROJECT_ID not configured";
+            setError(errorMsg);
+            return { success: false, error: errorMsg };
+        }
+
+        setIsLoading(true);
+        setError(null);
 
-  const checkout = useCallback(async () => {
-    setState((prev) => ({ ...prev, loading: true, error: null }));
         try {
-      console.log("Processing checkout with items:", state.items);
+
-      setState((prev) => ({ ...prev, loading: false }));
+            const response = await fetch(`${apiUrl}/stripe/project/checkout-session`, {
-    } catch (err) {
+                method: "POST",
-      setState((prev) => ({
+                headers: {
-        ...prev,
+                    "Content-Type": "application/json",
-        loading: false,
+                },
-        error: err instanceof Error ? err.message : "Checkout failed"}));
+                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 };
             }
-  }, [state.items]);
+
+            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 {
-    ...state,
-    addItem,
-    removeItem,
-    clearCart,
         checkout,
+        buyNow,
+        isLoading,
+        error,
+        clearError: () => setError(null),
     };
-};
+}
-
-export default useCheckout;

src/hooks/useProduct.ts

@@ -1,38 +1,45 @@
-import { useState, useEffect } from 'react';
+"use client";
 
-interface Product {
+import { useEffect, useState } from "react";
-  id: string;
+import { Product, fetchProduct } from "@/lib/api/product";
-  name: string;
-  price: string;
-  imageSrc: string;
-}
 
 export function useProduct(productId: string) {
     const [product, setProduct] = useState<Product | null>(null);
-  const [loading, setLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+    const [error, setError] = useState<Error | null>(null);
 
     useEffect(() => {
-    const fetchProduct = async () => {
+        let isMounted = true;
-      try {
-        setLoading(true);
-        // Simulate fetch
-        const response = await fetch(`/api/products/${productId}`);
-        const data = await response.json();
-        setProduct(data);
-        setError(null);
-      } catch (err) {
-        setError('Failed to fetch product');
-        setProduct(null);
-      } finally {
-        setLoading(false);
-      }
-    };
 
-    if (productId) {
+        async function loadProduct() {
-      fetchProduct();
+            if (!productId) {
+                setIsLoading(false);
+                return;
             }
+
+            try {
+                setIsLoading(true);
+                const data = await fetchProduct(productId);
+                if (isMounted) {
+                    setProduct(data);
+                }
+            } catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error("Failed to fetch product"));
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        loadProduct();
+
+        return () => {
+            isMounted = false;
+        };
     }, [productId]);
 
-  return { product, loading, error };
+    return { product, isLoading, error };
 }

src/hooks/useProductCatalog.ts

@@ -1,46 +1,115 @@
-import { useState, useEffect } from "react";
+"use client";
 
-interface CatalogProduct {
+import { useState, useMemo, useCallback } from "react";
-  id: string;
+import { useRouter } from "next/navigation";
-  category?: string;
+import { useProducts } from "./useProducts";
-  name: string;
+import type { Product } from "@/lib/api/product";
-  price: string;
+import type { CatalogProduct } from "@/components/ecommerce/productCatalog/ProductCatalogItem";
-  rating: number;
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-  reviewCount?: string;
+
-  imageSrc: string;
+export type SortOption = "Newest" | "Price: Low-High" | "Price: High-Low";
-  imageAlt?: string;
+
+interface UseProductCatalogOptions {
+    basePath?: string;
 }
 
-const useProductCatalog = () => {
+export function useProductCatalog(options: UseProductCatalogOptions = {}) {
-  const [products, setProducts] = useState<CatalogProduct[]>([]);
+    const { basePath = "/shop" } = options;
-  const [loading, setLoading] = useState(true);
+    const router = useRouter();
-  const [error, setError] = useState<string | null>(null);
+    const { products: fetchedProducts, isLoading } = useProducts();
 
-  useEffect(() => {
+    const [search, setSearch] = useState("");
-    const fetchProducts = async () => {
+    const [category, setCategory] = useState("All");
-      try {
+    const [sort, setSort] = useState<SortOption>("Newest");
-        setLoading(true);
+
-        const mockProducts: CatalogProduct[] = [
+    const handleProductClick = useCallback((productId: string) => {
-          {
+        router.push(`${basePath}/${productId}`);
-            id: "1",            category: "Electronics",            name: "Laptop Pro",            price: "$999.99",            rating: 4.5,
+    }, [router, basePath]);
-            reviewCount: "128",            imageSrc: "/products/laptop.jpg",            imageAlt: "Laptop Pro"},
+
-          {
+    const catalogProducts: CatalogProduct[] = useMemo(() => {
-            id: "2",            category: "Electronics",            name: "Wireless Mouse",            price: "$29.99",            rating: 4,
+        if (fetchedProducts.length === 0) return [];
-            reviewCount: "87",            imageSrc: "/products/mouse.jpg",            imageAlt: "Wireless Mouse"},
+
-        ];
+        return fetchedProducts.map((product) => ({
-        setProducts(mockProducts);
+            id: product.id,
-        setError(null);
+            name: product.name,
-      } catch (err) {
+            price: product.price,
-        setError(err instanceof Error ? err.message : "Failed to fetch products");
+            imageSrc: product.imageSrc,
-      } finally {
+            imageAlt: product.imageAlt || product.name,
-        setLoading(false);
+            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,
     };
-
+}
-    fetchProducts();
-  }, []);
-
-  return { products, loading, error };
-};
-
-export default useProductCatalog;

src/hooks/useProductDetail.ts

@@ -1,46 +1,196 @@
-import { useState, useEffect } from "react";
+"use client";
 
-interface ProductDetail {
+import { useState, useMemo, useCallback } from "react";
-  id: string;
+import { useProduct } from "./useProduct";
-  name: string;
+import type { Product } from "@/lib/api/product";
-  price: string;
+import type { ProductVariant } from "@/components/ecommerce/productDetail/ProductDetailCard";
-  description: string;
+import type { ExtendedCartItem } from "./useCart";
-  imageSrc: string;
+
-  imageAlt?: string;
+interface ProductImage {
-  rating: number;
+    src: string;
-  reviewCount?: string;
+    alt: string;
-  inStock: boolean;
 }
 
-const useProductDetail = (productId: string) => {
+interface ProductMeta {
-  const [product, setProduct] = useState<ProductDetail | null>(null);
+    salePrice?: string;
-  const [loading, setLoading] = useState(true);
+    ribbon?: string;
-  const [error, setError] = useState<string | null>(null);
+    inventoryStatus?: string;
+    inventoryQuantity?: number;
+    sku?: string;
+}
 
-  useEffect(() => {
+export function useProductDetail(productId: string) {
-    const fetchProduct = async () => {
+    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 {
-        setLoading(true);
+                const variantOptionsStr = String(product.metadata.variantOptions);
-        const mockProduct: ProductDetail = {
+                const parsedOptions = JSON.parse(variantOptionsStr);
-          id: productId,
+
-          name: "Sample Product",          price: "$99.99",          description: "A great product with excellent features",          imageSrc: "/products/sample.jpg",          imageAlt: "Sample Product",          rating: 4.5,
+                if (Array.isArray(parsedOptions)) {
-          reviewCount: "42",          inStock: true,
+                    parsedOptions.forEach((option: any) => {
-        };
+                        if (option.name && option.values) {
-        setProduct(mockProduct);
+                            const values = typeof option.values === 'string'
-        setError(null);
+                                ? option.values.split(',').map((v: string) => v.trim())
-      } catch (err) {
+                                : Array.isArray(option.values)
-        setError(err instanceof Error ? err.message : "Failed to fetch product");
+                                    ? option.values.map((v: any) => String(v).trim())
-      } finally {
+                                    : [String(option.values)];
-        setLoading(false);
+
+                            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 (productId) {
-      fetchProduct();
         }
-  }, [productId]);
 
-  return { product, loading, 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]);
 
-export default useProductDetail;
+    return {
+        product,
+        isLoading,
+        error,
+        images,
+        meta,
+        variants,
+        quantityVariant,
+        selectedQuantity,
+        selectedVariants,
+        createCartItem,
+    };
+}

src/hooks/useProducts.ts

@@ -1,36 +1,39 @@
-import { useState, useEffect } from 'react';
+"use client";
 
-interface Product {
+import { useEffect, useState } from "react";
-  id: string;
+import { Product, fetchProducts } from "@/lib/api/product";
-  name: string;
-  price: string;
-  imageSrc: string;
-}
 
 export function useProducts() {
     const [products, setProducts] = useState<Product[]>([]);
-  const [loading, setLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+    const [error, setError] = useState<Error | null>(null);
 
     useEffect(() => {
-    const fetchProducts = async () => {
+        let isMounted = true;
-      try {
-        setLoading(true);
-        // Simulate fetch
-        const response = await fetch('/api/products');
-        const data = await response.json();
-        setProducts(data);
-        setError(null);
-      } catch (err) {
-        setError('Failed to fetch products');
-        setProducts([]);
-      } finally {
-        setLoading(false);
-      }
-    };
 
-    fetchProducts();
+        async function loadProducts() {
+            try {
+                const data = await fetchProducts();
+                if (isMounted) {
+                    setProducts(data);
+                }
+            } catch (err) {
+                if (isMounted) {
+                    setError(err instanceof Error ? err : new Error("Failed to fetch products"));
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        }
+
+        loadProducts();
+
+        return () => {
+            isMounted = false;
+        };
     }, []);
 
-  return { products, loading, error };
+    return { products, isLoading, error };
 }

src/lib/api/product.ts

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