From e3d5e75299b7f1a8f3ba31bb289ecb99ff016978 Mon Sep 17 00:00:00 2001
From: Rami Bitar <rbitar@gmail.com>
Date: Fri, 31 Jul 2026 22:12:19 -0400
Subject: [PATCH] Initial commit: Shopify storefront Next.js template

Next.js 16 + React 19 storefront template with Shopify Storefront API
integration, Tailwind v4, and shadcn/ui components.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0111qSr3KopyGRsJ6LznR1xZ
---
 .gitignore                                    |    5 +
 app.globals.json                              |    1 +
 app/collections/[handle]/page.tsx             |   26 +
 app/collections/page.tsx                      |   26 +
 app/components/ui/loader.tsx                  |   96 ++
 app/error.tsx                                 |   25 +
 app/globals.css                               |  112 ++
 app/layout.tsx                                |   40 +
 app/not-found.tsx                             |   20 +
 app/page.tsx                                  |   26 +
 app/products/[handle]/page.tsx                |   35 +
 app/shop/collections/page.tsx                 |   26 +
 components/About.tsx                          |   13 +
 components/magicui/aurora-text.tsx            |   40 +
 components/magicui/blur-fade.tsx              |   63 +
 components/shopify/cart-drawer.tsx            |  250 +++
 components/shopify/collection-card.tsx        |   71 +
 components/shopify/collection-detail.tsx      |  110 ++
 components/shopify/collections.tsx            |  121 ++
 components/shopify/footer.tsx                 |  121 ++
 components/shopify/header.tsx                 |  125 ++
 components/shopify/product-card.tsx           |  179 +++
 components/shopify/product-detail.tsx         |    3 +
 components/shopify/product-detail/index.tsx   |  223 +++
 .../product-detail/product-detail-gallery.tsx |   64 +
 .../product-detail/product-detail-info.tsx    |  240 +++
 .../shopify/product-recommendations.tsx       |   76 +
 components/shopify/products.tsx               |  238 +++
 components/ui/accordion.tsx                   |  197 +++
 components/ui/alert.tsx                       |   60 +
 components/ui/avatar.tsx                      |   81 +
 components/ui/badge.tsx                       |   54 +
 components/ui/breadcrumb.tsx                  |  149 ++
 components/ui/button-group.tsx                |   97 ++
 components/ui/button.tsx                      |   70 +
 components/ui/card.tsx                        |   92 ++
 components/ui/carousel.tsx                    |  245 +++
 components/ui/dialog.tsx                      |  268 ++++
 components/ui/empty.tsx                       |  105 ++
 components/ui/input-otp.tsx                   |   86 +
 components/ui/input.tsx                       |   21 +
 components/ui/item.tsx                        |  213 +++
 components/ui/pagination.tsx                  |  128 ++
 components/ui/progress.tsx                    |   44 +
 components/ui/remix-icon.tsx                  |   44 +
 components/ui/select.tsx                      |  287 ++++
 components/ui/sheet.tsx                       |  308 ++++
 components/ui/skeleton.tsx                    |   13 +
 components/ui/sonner.tsx                      |   23 +
 components/ui/spinner.tsx                     |   38 +
 components/ui/switch.tsx                      |   74 +
 components/ui/table.tsx                       |  113 ++
 components/ui/tabs.tsx                        |  143 ++
 components/ui/textarea.tsx                    |   18 +
 graphql/cart.js                               |  137 ++
 graphql/collections.js                        |   61 +
 graphql/products.js                           |  117 ++
 hooks/use-shopify-cart.ts                     |  379 +++++
 hooks/use-shopify-collections.ts              |  127 ++
 hooks/use-shopify-products.ts                 |  205 +++
 instrumentation.ts                            |    1 +
 lib/cloud.ts                                  |    7 +
 lib/utils.ts                                  |   12 +
 next.config.js                                |   33 +
 package.json                                  |   40 +
 postcss.config.mjs                            |    5 +
 services/shopify/client.js                    |   48 +
 tsconfig.json                                 |   41 +
 yarn.lock                                     | 1401 +++++++++++++++++
 69 files changed, 7960 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 app.globals.json
 create mode 100644 app/collections/[handle]/page.tsx
 create mode 100644 app/collections/page.tsx
 create mode 100644 app/components/ui/loader.tsx
 create mode 100644 app/error.tsx
 create mode 100644 app/globals.css
 create mode 100644 app/layout.tsx
 create mode 100644 app/not-found.tsx
 create mode 100644 app/page.tsx
 create mode 100644 app/products/[handle]/page.tsx
 create mode 100644 app/shop/collections/page.tsx
 create mode 100644 components/About.tsx
 create mode 100644 components/magicui/aurora-text.tsx
 create mode 100644 components/magicui/blur-fade.tsx
 create mode 100644 components/shopify/cart-drawer.tsx
 create mode 100644 components/shopify/collection-card.tsx
 create mode 100644 components/shopify/collection-detail.tsx
 create mode 100644 components/shopify/collections.tsx
 create mode 100644 components/shopify/footer.tsx
 create mode 100644 components/shopify/header.tsx
 create mode 100644 components/shopify/product-card.tsx
 create mode 100644 components/shopify/product-detail.tsx
 create mode 100644 components/shopify/product-detail/index.tsx
 create mode 100644 components/shopify/product-detail/product-detail-gallery.tsx
 create mode 100644 components/shopify/product-detail/product-detail-info.tsx
 create mode 100644 components/shopify/product-recommendations.tsx
 create mode 100644 components/shopify/products.tsx
 create mode 100644 components/ui/accordion.tsx
 create mode 100644 components/ui/alert.tsx
 create mode 100644 components/ui/avatar.tsx
 create mode 100644 components/ui/badge.tsx
 create mode 100644 components/ui/breadcrumb.tsx
 create mode 100644 components/ui/button-group.tsx
 create mode 100644 components/ui/button.tsx
 create mode 100644 components/ui/card.tsx
 create mode 100644 components/ui/carousel.tsx
 create mode 100644 components/ui/dialog.tsx
 create mode 100644 components/ui/empty.tsx
 create mode 100644 components/ui/input-otp.tsx
 create mode 100644 components/ui/input.tsx
 create mode 100644 components/ui/item.tsx
 create mode 100644 components/ui/pagination.tsx
 create mode 100644 components/ui/progress.tsx
 create mode 100644 components/ui/remix-icon.tsx
 create mode 100644 components/ui/select.tsx
 create mode 100644 components/ui/sheet.tsx
 create mode 100644 components/ui/skeleton.tsx
 create mode 100644 components/ui/sonner.tsx
 create mode 100644 components/ui/spinner.tsx
 create mode 100644 components/ui/switch.tsx
 create mode 100644 components/ui/table.tsx
 create mode 100644 components/ui/tabs.tsx
 create mode 100644 components/ui/textarea.tsx
 create mode 100644 graphql/cart.js
 create mode 100644 graphql/collections.js
 create mode 100644 graphql/products.js
 create mode 100644 hooks/use-shopify-cart.ts
 create mode 100644 hooks/use-shopify-collections.ts
 create mode 100644 hooks/use-shopify-products.ts
 create mode 100644 instrumentation.ts
 create mode 100644 lib/cloud.ts
 create mode 100644 lib/utils.ts
 create mode 100644 next.config.js
 create mode 100644 package.json
 create mode 100644 postcss.config.mjs
 create mode 100644 services/shopify/client.js
 create mode 100644 tsconfig.json
 create mode 100644 yarn.lock

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f69c3e6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/*
+.next
+next-env.d.ts
+.yarn/install-state.gz
diff --git a/app.globals.json b/app.globals.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/app.globals.json
@@ -0,0 +1 @@
+{}
diff --git a/app/collections/[handle]/page.tsx b/app/collections/[handle]/page.tsx
new file mode 100644
index 0000000..a2a3ba2
--- /dev/null
+++ b/app/collections/[handle]/page.tsx
@@ -0,0 +1,26 @@
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import CollectionDetail from '@/components/shopify/collection-detail';
+
+export default function Page() {
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/collections' },
+        ]}
+      />
+      <CollectionDetail />
+      <Footer
+        storeName="Stride"
+        logoUrl=""
+        tagline="Your premium shopping destination"
+        copyright="© 2026 Stride. All rights reserved."
+        links={[]}
+      />
+    </>
+  );
+}
diff --git a/app/collections/page.tsx b/app/collections/page.tsx
new file mode 100644
index 0000000..cf7beef
--- /dev/null
+++ b/app/collections/page.tsx
@@ -0,0 +1,26 @@
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import Collections from '@/components/shopify/collections';
+
+export default function Page() {
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/collections' },
+        ]}
+      />
+      <Collections title="Our Collections" />
+      <Footer
+        storeName="Stride"
+        logoUrl=""
+        tagline="Your premium shopping destination"
+        copyright="© 2026 Stride. All rights reserved."
+        links={[]}
+      />
+    </>
+  );
+}
diff --git a/app/components/ui/loader.tsx b/app/components/ui/loader.tsx
new file mode 100644
index 0000000..131ab8d
--- /dev/null
+++ b/app/components/ui/loader.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+interface LoaderIconProps {
+  size?: number;
+}
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);
diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..b3805e1
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import React from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center gap-6">
+        <div className="text-lg font-medium text-black font-sans whitespace-nowrap">
+          Something went wrong
+        </div>
+        <div className="border-l border-gray-300 h-6"></div>
+        <div className="text-sm text-gray-700 font-sans max-w-lg">
+          {error.message}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..5c2d098
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,112 @@
+@import 'tailwindcss';
+
+@theme {
+  /* Refined neutral modern palette */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(240 10% 3.9%);
+
+  /* Card */
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(240 10% 3.9%);
+
+  /* Popover */
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(240 10% 3.9%);
+
+  /* Primary - Deep neutral slate for professional look */
+  --color-primary: hsl(240 5.9% 10%);
+  --color-primary-foreground: hsl(0 0% 98%);
+
+  /* Secondary */
+  --color-secondary: hsl(240 4.8% 95.9%);
+  --color-secondary-foreground: hsl(240 5.9% 10%);
+
+  /* Muted */
+  --color-muted: hsl(240 4.8% 95.9%);
+  --color-muted-foreground: hsl(240 3.8% 46.1%);
+
+  /* Accent - Subtle warm gray */
+  --color-accent: hsl(30 6.7% 95%);
+  --color-accent-foreground: hsl(240 5.9% 10%);
+
+  /* Destructive */
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+
+  /* Border */
+  --color-border: hsl(240 5.9% 90%);
+  --color-input: hsl(240 5.9% 90%);
+  --color-ring: hsl(240 5.9% 10%);
+
+  /* Radius - Modern larger corners */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.25rem;
+
+  /* Enhanced typography scale */
+  --font-heading: 'Space Grotesk', system-ui, sans-serif;
+  --font-body: 'Inter', system-ui, sans-serif;
+  --font-poppins: 'Poppins', system-ui, sans-serif;
+}
+
+/* Base styles for light, modern Shopify storefront */
+body {
+  font-feature-settings:
+    'kern' 1,
+    'tnum' 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Modern card design for products and collections */
+.card-modern {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid var(--color-border);
+}
+
+.card-modern:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.1);
+  border-color: hsl(240 5.9% 85%);
+}
+
+/* Bold heading styles */
+h1,
+h2,
+.font-heading {
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+/* Enhanced button styles */
+button,
+.btn-modern {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.btn-modern:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* Hero section styles */
+.hero-bg {
+  background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);
+}
+
+/* Product gallery improvements */
+.product-gallery-main {
+  transition: box-shadow 0.3s ease;
+}
+
+.product-gallery-main:hover {
+  box-shadow: 0 0 0 1px hsl(240 5.9% 80%) inset;
+}
+
+/* Clean price display */
+.price-display {
+  font-feature-settings: 'tnum';
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..2eda368
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import './globals.css';
+import { Space_Grotesk, Inter, Poppins } from 'next/font/google';
+
+const poppins = Poppins({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-poppins',
+});
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-heading',
+});
+
+const inter = Inter({
+  subsets: ['latin'],
+  weight: ['400', '500', '600'],
+  variable: '--font-body',
+});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html
+      lang="en"
+      className={`${poppins.variable} ${spaceGrotesk.variable} ${inter.variable}`}
+    >
+      <body className="font-body antialiased bg-background text-foreground m-0 p-0">
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 0000000..3692439
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import React from 'react';
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="flex items-center gap-6">
+        <div className="text-lg font-medium text-black font-sans whitespace-nowrap">
+          404
+        </div>
+        <div className="border-l border-gray-300 h-6"></div>
+        <div className="text-sm text-gray-700 font-sans max-w-lg">
+          This page could not be found.
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..4e54346
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,26 @@
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import Products from '@/components/shopify/products';
+
+export default function Page() {
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/collections' },
+        ]}
+      />
+      <Products title="Shop All" />
+      <Footer
+        storeName="Stride"
+        logoUrl=""
+        tagline="Your premium shopping destination"
+        copyright="© 2026 Stride. All rights reserved."
+        links={[]}
+      />
+    </>
+  );
+}
diff --git a/app/products/[handle]/page.tsx b/app/products/[handle]/page.tsx
new file mode 100644
index 0000000..695051e
--- /dev/null
+++ b/app/products/[handle]/page.tsx
@@ -0,0 +1,35 @@
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import ProductDetail from '@/components/shopify/product-detail';
+import ProductRecommendations from '@/components/shopify/product-recommendations';
+
+export default function Page() {
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/collections' },
+        ]}
+      />
+      <ProductDetail
+        addToCartLabel="Add to Cart"
+        features={[
+          { icon: 'RiTruckLine', label: 'Free shipping on orders over $100' },
+          { icon: 'RiArrowGoBackLine', label: '30-day return policy' },
+          { icon: 'RiSecurePaymentLine', label: 'Secure payment' },
+        ]}
+      />
+      <ProductRecommendations title="You Might Also Like" />
+      <Footer
+        storeName="Stride"
+        logoUrl=""
+        tagline="Your premium shopping destination"
+        copyright="© 2026 Stride. All rights reserved."
+        links={[]}
+      />
+    </>
+  );
+}
diff --git a/app/shop/collections/page.tsx b/app/shop/collections/page.tsx
new file mode 100644
index 0000000..f9be1a6
--- /dev/null
+++ b/app/shop/collections/page.tsx
@@ -0,0 +1,26 @@
+import Header from '@/components/shopify/header';
+import Footer from '@/components/shopify/footer';
+import Collections from '@/components/shopify/collections';
+
+export default function Page() {
+  return (
+    <>
+      <Header
+        storeName="Stride"
+        logoUrl=""
+        links={[
+          { label: 'Products', url: '/' },
+          { label: 'Collections', url: '/shop/collections' },
+        ]}
+      />
+      <Collections title="Our Collections" />
+      <Footer
+        storeName="Stride"
+        logoUrl=""
+        tagline="Your premium shopping destination"
+        copyright="© 2026 Stride. All rights reserved."
+        links={[]}
+      />
+    </>
+  );
+}
diff --git a/components/About.tsx b/components/About.tsx
new file mode 100644
index 0000000..c42f9eb
--- /dev/null
+++ b/components/About.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const About: React.FC = () => {
+  return (
+    <div className="text-center">
+      <h1 className="text-5xl font-bold text-black mb-8" style={{fontFamily: 'Space Grotesk, sans-serif'}}>
+        About Page
+      </h1>
+    </div>
+  );
+};
+
+export default About;
\ No newline at end of file
diff --git a/components/magicui/aurora-text.tsx b/components/magicui/aurora-text.tsx
new file mode 100644
index 0000000..8b49e42
--- /dev/null
+++ b/components/magicui/aurora-text.tsx
@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AuroraTextProps {
+  children: React.ReactNode;
+  className?: string;
+  colors?: string[];
+  speed?: number;
+}
+
+export const AuroraText = memo(
+  ({
+    children,
+    className,
+    colors = ['#FF0080', '#7928CA', '#0070F3', '#38bdf8'],
+    speed = 1,
+  }: AuroraTextProps) => {
+    const animationDuration = `${10 / speed}s`;
+
+    const gradientStyle = {
+      backgroundImage: `linear-gradient(90deg, ${colors.join(', ')}, ${colors[0]})`,
+      backgroundSize: '200% 100%',
+      WebkitBackgroundClip: 'text',
+      WebkitTextFillColor: 'transparent',
+      backgroundClip: 'text',
+      animation: `aurora-flow ${animationDuration} ease-in-out infinite`,
+    } as React.CSSProperties;
+
+    return (
+      <span className={cn('relative inline-block', className)}>
+        <span className="sr-only">{children}</span>
+        <span className="relative" style={gradientStyle} aria-hidden="true">
+          {children}
+        </span>
+      </span>
+    );
+  }
+);
+
+AuroraText.displayName = 'AuroraText';
diff --git a/components/magicui/blur-fade.tsx b/components/magicui/blur-fade.tsx
new file mode 100644
index 0000000..682c2b3
--- /dev/null
+++ b/components/magicui/blur-fade.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { useRef, useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface BlurFadeProps {
+  children: React.ReactNode;
+  className?: string;
+  duration?: number;
+  delay?: number;
+  inView?: boolean;
+}
+
+export function BlurFade({
+  children,
+  className,
+  duration = 0.4,
+  delay = 0,
+  inView = false,
+}: BlurFadeProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(!inView);
+
+  useEffect(() => {
+    if (!inView) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
+      },
+      { threshold: 0.1, rootMargin: '-50px' }
+    );
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.unobserve(ref.current);
+      }
+    };
+  }, [inView]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        isVisible ? 'opacity-100 blur-none' : 'opacity-0 blur-sm',
+        className
+      )}
+      style={{
+        animation: isVisible
+          ? `blur-fade ${duration}s ease-out ${delay}s forwards`
+          : 'none',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/components/shopify/cart-drawer.tsx b/components/shopify/cart-drawer.tsx
new file mode 100644
index 0000000..ab882fc
--- /dev/null
+++ b/components/shopify/cart-drawer.tsx
@@ -0,0 +1,250 @@
+'use client';
+
+import React from 'react';
+import { useCartStore, redirectToCheckout } from '@/hooks/use-shopify-cart';
+import { Button } from '@/components/ui/button';
+import { Loader } from '@/app/components/ui/loader';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetBody,
+  AnimatePresence,
+} from '@/components/ui/sheet';
+import {
+  RiCloseLine,
+  RiImageLine,
+  RiSubtractLine,
+  RiAddLine,
+} from '@remixicon/react';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
+
+const CartDrawer: React.FC = () => {
+  const isOpen = useCartStore((s) => s.isOpen);
+  const closeCart = useCartStore((s) => s.closeCart);
+  const loading = useCartStore((s) => s.loading);
+  const cart = useCartStore((s) => s.cart);
+  const removeItem = useCartStore((s) => s.removeItem);
+  const updateItemQuantity = useCartStore((s) => s.updateItemQuantity);
+
+  const items = cart?.lines?.edges?.map((edge) => edge.node) ?? [];
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  const totalAmount = parseFloat(cart?.cost?.totalAmount?.amount ?? '0');
+  const checkoutUrl = cart?.checkoutUrl ?? null;
+
+  const handleCheckout = () => {
+    if (checkoutUrl) {
+      redirectToCheckout(checkoutUrl);
+    }
+  };
+
+  const getItemImage = (item: (typeof items)[0]) => {
+    return item.merchandise.image?.url;
+  };
+
+  const getSelectedOptions = (item: (typeof items)[0]) => {
+    return item.merchandise.selectedOptions ?? [];
+  };
+
+  return (
+    <Sheet
+      open={isOpen}
+      onOpenChange={(open) => !open && closeCart()}
+      side="right"
+    >
+      <AnimatePresence>
+        {isOpen && (
+          <SheetContent className="w-full max-w-md" showCloseButton={false}>
+            {/* Header */}
+            <SheetHeader className="h-14 min-h-0 px-4 py-3 flex items-center">
+              <div className="flex items-center justify-between w-full">
+                <SheetTitle className="text-base">
+                  Shopping Cart ({itemCount})
+                </SheetTitle>
+                <Button onClick={closeCart} variant="ghost" size="icon-sm">
+                  <RiCloseLine size={20} />
+                </Button>
+              </div>
+            </SheetHeader>
+
+            {/* Cart Items */}
+            <SheetBody>
+              {loading && items.length === 0 ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader size={32} />
+                </div>
+              ) : items.length === 0 ? (
+                <Empty>
+                  <EmptyHeader>
+                    <EmptyTitle>Your cart is empty</EmptyTitle>
+                    <EmptyDescription>
+                      Add some products to get started!
+                    </EmptyDescription>
+                  </EmptyHeader>
+                  <EmptyContent>
+                    <Button onClick={closeCart} className="w-full">
+                      Continue Shopping
+                    </Button>
+                  </EmptyContent>
+                </Empty>
+              ) : (
+                <div className="space-y-6">
+                  {items.map((item) => {
+                    const image = getItemImage(item);
+                    const selectedOptions = getSelectedOptions(item);
+
+                    return (
+                      <div
+                        key={item.id}
+                        className="flex items-start space-x-4 pb-6 border-b border-gray-200 last:border-b-0"
+                      >
+                        {/* Product Image */}
+                        <div className="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
+                          {image ? (
+                            <img
+                              src={image}
+                              alt={item.merchandise.product.title}
+                              className="w-full h-full object-cover"
+                            />
+                          ) : (
+                            <div className="w-full h-full flex items-center justify-center text-gray-400">
+                              <RiImageLine size={24} />
+                            </div>
+                          )}
+                        </div>
+
+                        {/* Product Details */}
+                        <div className="flex-1 min-w-0">
+                          <h4 className="font-semibold text-gray-900 mb-1 line-clamp-2">
+                            {item.merchandise.product.title}
+                          </h4>
+
+                          {/* Variant Info */}
+                          {selectedOptions.length > 0 && (
+                            <div className="text-sm text-gray-500 mb-2">
+                              {selectedOptions.map((option, index) => (
+                                <span key={option.name}>
+                                  {option.value}
+                                  {index < selectedOptions.length - 1
+                                    ? ' / '
+                                    : ''}
+                                </span>
+                              ))}
+                            </div>
+                          )}
+
+                          {/* Quantity Controls */}
+                          <div className="flex items-center mt-3">
+                            <div className="flex items-center border border-gray-300 rounded-lg">
+                              <Button
+                                onClick={() =>
+                                  updateItemQuantity(item.id, item.quantity - 1)
+                                }
+                                variant="ghost"
+                                size="icon-sm"
+                                disabled={item.quantity <= 1 || loading}
+                                className="h-7 w-7"
+                              >
+                                <RiSubtractLine size={14} />
+                              </Button>
+                              <span className="px-2 py-1 font-semibold min-w-[30px] text-center text-sm">
+                                {item.quantity}
+                              </span>
+                              <Button
+                                onClick={() =>
+                                  updateItemQuantity(item.id, item.quantity + 1)
+                                }
+                                variant="ghost"
+                                size="icon-sm"
+                                disabled={loading}
+                                className="h-7 w-7"
+                              >
+                                <RiAddLine size={14} />
+                              </Button>
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* Price */}
+                        <div className="flex-shrink-0">
+                          <span className="text-sm font-semibold text-gray-900">
+                            $
+                            {parseFloat(item.merchandise.price.amount).toFixed(
+                              2
+                            )}
+                          </span>
+                        </div>
+
+                        {/* Remove Button */}
+                        <div className="flex-shrink-0">
+                          <Button
+                            onClick={() => removeItem(item.id)}
+                            variant="ghost"
+                            size="icon-sm"
+                            disabled={loading}
+                            className="text-gray-400 hover:text-red-500"
+                          >
+                            <RiCloseLine size={18} />
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </SheetBody>
+
+            {/* Footer - Checkout Section */}
+            {items.length > 0 && (
+              <div className="border-t border-border p-6">
+                {/* Subtotal */}
+                <div className="flex items-center justify-between mb-4">
+                  <span className="text-base font-semibold">Subtotal</span>
+                  <span className="text-lg font-bold">
+                    ${totalAmount.toFixed(2)}
+                  </span>
+                </div>
+
+                <div className="text-sm text-gray-500 mb-4">
+                  Shipping and taxes calculated at checkout
+                </div>
+
+                {/* Action Buttons */}
+                <div className="space-y-3">
+                  <Button
+                    onClick={handleCheckout}
+                    disabled={loading || !checkoutUrl}
+                    className="w-full"
+                    size="lg"
+                  >
+                    {loading ? (
+                      <span className="flex items-center justify-center space-x-2">
+                        <Loader size={16} />
+                        <span>Processing...</span>
+                      </span>
+                    ) : (
+                      'Checkout'
+                    )}
+                  </Button>
+
+                  <Button onClick={closeCart} variant="link" className="w-full">
+                    Continue Shopping
+                  </Button>
+                </div>
+              </div>
+            )}
+          </SheetContent>
+        )}
+      </AnimatePresence>
+    </Sheet>
+  );
+};
+
+export default CartDrawer;
diff --git a/components/shopify/collection-card.tsx b/components/shopify/collection-card.tsx
new file mode 100644
index 0000000..ceba406
--- /dev/null
+++ b/components/shopify/collection-card.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import Link from 'next/link';
+import { Card, CardContent } from '@/components/ui/card';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  image?: CollectionImage;
+}
+
+interface CollectionCardProps {
+  collection: Collection;
+}
+
+const CollectionCard: React.FC<CollectionCardProps> = ({ collection }) => {
+  return (
+    <Link
+      href={`/collections/${collection.handle}`}
+      className="group block h-full"
+    >
+      <div className="card-modern bg-card rounded-3xl overflow-hidden h-full flex flex-col shadow-sm">
+        {/* Collection Image */}
+        <div className="aspect-[16/10] relative overflow-hidden bg-zinc-100">
+          {collection.image ? (
+            <img
+              src={collection.image.url}
+              alt={collection.image.altText || collection.title}
+              className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+            />
+          ) : (
+            <div className="absolute inset-0 flex flex-col items-center justify-center text-zinc-300">
+              <i className="ri-folder-line text-8xl mb-4"></i>
+              <span className="text-xs tracking-widest font-mono">
+                COLLECTION
+              </span>
+            </div>
+          )}
+
+          <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30"></div>
+        </div>
+
+        {/* Collection Info */}
+        <div className="p-8 flex flex-col flex-1">
+          <h3 className="font-heading text-3xl font-semibold tracking-tighter text-foreground mb-4 group-hover:text-primary transition-colors">
+            {collection.title}
+          </h3>
+
+          {collection.description && (
+            <p className="text-muted-foreground text-[15px] leading-relaxed line-clamp-3 flex-1">
+              {collection.description}
+            </p>
+          )}
+
+          <div className="mt-8 flex items-center text-sm font-semibold text-primary group-hover:gap-x-2 transition-all">
+            EXPLORE COLLECTION
+            <i className="ri-arrow-right-line ml-2 text-base transition-transform group-hover:translate-x-0.5"></i>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default CollectionCard;
diff --git a/components/shopify/collection-detail.tsx b/components/shopify/collection-detail.tsx
new file mode 100644
index 0000000..d35c733
--- /dev/null
+++ b/components/shopify/collection-detail.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import React from 'react';
+import { useParams } from 'next/navigation';
+import { useCollectionProducts } from '@/hooks/use-shopify-collections';
+import ProductCard from './product-card';
+
+const CollectionDetail: React.FC = () => {
+  const params = useParams();
+  const handle = params?.handle as string;
+  console.log('[CollectionDetail] params:', params, 'handle:', handle);
+
+  const { collection, loading, error, refetch } = useCollectionProducts(handle);
+
+  // Format title from handle
+  const formattedTitle = handle
+    ? handle.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
+    : 'Collection';
+
+  if (loading) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4">
+          <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+            {formattedTitle}
+          </h2>
+
+          {/* Loading Skeleton */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div
+                key={index}
+                className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"
+              >
+                <div className="aspect-square bg-gray-200"></div>
+                <div className="p-6">
+                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-12 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-16">
+        <div className="container mx-auto px-4 text-center">
+          <h2 className="text-5xl font-bold mb-8 font-heading">
+            {formattedTitle}
+          </h2>
+
+          <div className="bg-red-50 border border-red-200 rounded-lg p-8 max-w-md mx-auto">
+            <i className="ri-error-warning-line text-4xl text-red-500 mb-4"></i>
+            <h3 className="text-lg font-semibold text-red-800 mb-2">
+              Failed to Load Collection
+            </h3>
+            <p className="text-red-600 mb-4">{error}</p>
+            <button
+              onClick={() => refetch()}
+              className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const products = collection?.products || [];
+  const title = collection?.title || formattedTitle;
+
+  return (
+    <div className="py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-5xl font-bold text-center mb-16 text-gray-900 font-heading">
+          {title}
+        </h2>
+
+        {products.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 max-w-md mx-auto">
+              <i className="ri-shopping-bag-line text-4xl text-gray-400 mb-4"></i>
+              <h3 className="text-lg font-semibold text-gray-600 mb-2">
+                No Products in Collection
+              </h3>
+              <p className="text-gray-500">
+                This collection doesn&apos;t have any products yet.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CollectionDetail;
diff --git a/components/shopify/collections.tsx b/components/shopify/collections.tsx
new file mode 100644
index 0000000..38668ca
--- /dev/null
+++ b/components/shopify/collections.tsx
@@ -0,0 +1,121 @@
+'use client';
+
+import React from 'react';
+import { useCollections } from '@/hooks/use-shopify-collections';
+import CollectionCard from './collection-card';
+import { Button } from '@/components/ui/button';
+
+interface CollectionsProps {
+  title?: string;
+}
+
+const Collections: React.FC<CollectionsProps> = ({
+  title = 'Our Collections',
+}) => {
+  const { collections, loading, error, refetch } = useCollections(12);
+
+  if (loading) {
+    return (
+      <div className="py-20">
+        <div className="max-w-screen-2xl mx-auto px-8">
+          <div className="flex justify-center mb-6">
+            <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
+              EXPLORE
+            </div>
+          </div>
+          <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-6 text-foreground">
+            {title}
+          </h2>
+          <p className="text-center text-muted-foreground max-w-md mx-auto mb-16">
+            Handpicked stories and themes
+          </p>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div
+                key={index}
+                className="bg-white rounded-3xl overflow-hidden animate-pulse border border-border h-[520px]"
+              >
+                <div className="h-80 bg-zinc-100"></div>
+                <div className="p-10 space-y-4">
+                  <div className="h-8 bg-zinc-200 rounded-xl w-3/4"></div>
+                  <div className="h-4 bg-zinc-200 rounded w-full"></div>
+                  <div className="h-4 bg-zinc-200 rounded w-5/6"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="py-20">
+        <div className="max-w-screen-2xl mx-auto px-8 text-center">
+          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8">
+            {title}
+          </h2>
+          <div className="mx-auto max-w-sm bg-white border border-border rounded-3xl p-10">
+            <i className="ri-alert-line text-5xl text-rose-500 mb-4"></i>
+            <h3 className="text-xl font-semibold mb-2">
+              Unable to load collections
+            </h3>
+            <p className="text-muted-foreground mb-6">{error}</p>
+            <Button onClick={refetch} variant="outline" className="btn-modern">
+              Retry
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (collections.length === 0) {
+    return (
+      <div className="py-20 bg-zinc-50">
+        <div className="max-w-screen-2xl mx-auto px-8 text-center">
+          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8">
+            {title}
+          </h2>
+          <div className="mx-auto max-w-md p-12">
+            <i className="ri-folder-open-line text-6xl text-muted-foreground mb-6"></i>
+            <h3 className="text-2xl font-semibold mb-3">
+              No collections found
+            </h3>
+            <p className="text-muted-foreground">
+              Collections will appear here once added to your Shopify store.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-20">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <div className="flex justify-center mb-6">
+          <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
+            THEMES &amp; STORIES
+          </div>
+        </div>
+        <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-6 text-foreground">
+          {title}
+        </h2>
+        <p className="text-center text-muted-foreground max-w-md mx-auto mb-16 text-lg">
+          Discover our carefully crafted worlds
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {collections.map((collection) => (
+            <CollectionCard key={collection.id} collection={collection} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Collections;
diff --git a/components/shopify/footer.tsx b/components/shopify/footer.tsx
new file mode 100644
index 0000000..d9a09af
--- /dev/null
+++ b/components/shopify/footer.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+
+export interface FooterLink {
+  label: string;
+  url: string;
+}
+
+interface FooterProps {
+  storeName?: string;
+  logoUrl?: string;
+  tagline?: string;
+  copyright?: string;
+  links?: FooterLink[];
+}
+
+const Footer: React.FC<FooterProps> = ({
+  storeName = 'Stride',
+  logoUrl,
+  tagline = 'Performance in every stride.',
+  copyright = '© 2026 Stride. All rights reserved.',
+  links = [
+    { label: 'About', url: '#' },
+    { label: 'Athletes', url: '#' },
+    { label: 'Technology', url: '#' },
+    { label: 'Contact', url: '#' },
+  ],
+}) => {
+  return (
+    <footer className="bg-zinc-50 border-t border-border py-16 text-sm">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-y-12">
+          {/* Brand Column */}
+          <div className="md:col-span-5">
+            <div className="flex items-baseline mb-4">
+              {logoUrl ? (
+                <img
+                  src={logoUrl}
+                  alt={storeName}
+                  className="h-8 w-auto object-contain"
+                />
+              ) : (
+                <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground">
+                  {storeName}
+                </span>
+              )}
+            </div>
+
+            <p className="max-w-xs text-muted-foreground text-[15px] leading-relaxed">
+              {tagline}
+            </p>
+
+            <div className="mt-8 text-xs font-mono text-muted-foreground tracking-[1px]">
+              ENGINEERED FOR MOTION
+            </div>
+          </div>
+
+          {/* Links */}
+          <div className="md:col-span-3">
+            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
+              SHOP
+            </div>
+            <div className="flex flex-col gap-y-3 text-muted-foreground">
+              {links.map((link, index) => (
+                <a
+                  key={index}
+                  href={link.url}
+                  className="hover:text-foreground transition-colors w-fit"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+
+          <div className="md:col-span-4">
+            <div className="font-semibold text-foreground mb-5 text-xs tracking-widest">
+              CONNECT
+            </div>
+            <div className="flex flex-col gap-y-3 text-muted-foreground">
+              <a
+                href="#"
+                className="hover:text-foreground transition-colors w-fit"
+              >
+                Instagram
+              </a>
+              <a
+                href="#"
+                className="hover:text-foreground transition-colors w-fit"
+              >
+                Pinterest
+              </a>
+              <a
+                href="#"
+                className="hover:text-foreground transition-colors w-fit"
+              >
+                Newsletter
+              </a>
+            </div>
+
+            <div className="mt-auto pt-12 text-[10px] text-muted-foreground font-mono leading-loose">
+              CRAFTED WITH PRECISION
+              <br />
+              IN A NEUTRAL PALETTE
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-16 pt-8 border-t border-border text-xs text-muted-foreground flex flex-col md:flex-row justify-between items-center gap-4 font-mono tracking-widest">
+          <div>{copyright}</div>
+          <div className="flex gap-x-6">
+            <span>Privacy</span>
+            <span>Terms</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/shopify/header.tsx b/components/shopify/header.tsx
new file mode 100644
index 0000000..80a8002
--- /dev/null
+++ b/components/shopify/header.tsx
@@ -0,0 +1,125 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useCartStore } from '@/hooks/use-shopify-cart';
+import CartDrawer from '@/components/shopify/cart-drawer';
+import { RiShoppingCartLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
+
+const CartIcon: React.FC = () => {
+  const toggleCart = useCartStore((s) => s.toggleCart);
+  const cart = useCartStore((s) => s.cart);
+  const itemCount =
+    cart?.lines?.edges?.reduce((sum, { node }) => sum + node.quantity, 0) ?? 0;
+
+  return (
+    <button
+      onClick={toggleCart}
+      className="relative p-2.5 text-foreground hover:text-primary transition-all duration-200 rounded-full hover:bg-secondary"
+    >
+      <RiShoppingCartLine size={20} />
+      {itemCount > 0 && (
+        <span className="absolute -top-0.5 -right-0.5 bg-primary text-primary-foreground text-[10px] font-mono rounded-full w-5 h-5 flex items-center justify-center font-semibold shadow">
+          {itemCount > 99 ? '99+' : itemCount}
+        </span>
+      )}
+    </button>
+  );
+};
+
+export interface NavLink {
+  label: string;
+  url: string;
+}
+
+interface HeaderProps {
+  storeName?: string;
+  logoUrl?: string;
+  links?: NavLink[];
+}
+
+const Header: React.FC<HeaderProps> = ({
+  storeName = 'STRIDE',
+  logoUrl,
+  links = [
+    { label: 'Shop', url: '/' },
+    { label: 'Collections', url: '/collections' },
+  ],
+}) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  return (
+    <nav className="bg-white/95 backdrop-blur-md border-b border-border sticky top-0 z-50">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <div className="flex justify-between items-center h-20">
+          {/* Logo */}
+          <Link href="/" className="flex items-center group">
+            {logoUrl ? (
+              <img
+                src={logoUrl}
+                alt={storeName}
+                className="h-9 w-auto object-contain"
+              />
+            ) : (
+              <span className="text-4xl font-semibold tracking-tighter font-poppins text-foreground group-hover:text-primary transition-colors">
+                {storeName}
+              </span>
+            )}
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-x-10 text-sm font-medium">
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.url}
+                className="text-foreground hover:text-primary relative after:absolute after:bottom-[-2px] after:left-0 after:h-[2px] after:w-0 after:bg-primary after:transition-all hover:after:w-full"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center gap-x-2">
+            <CartIcon />
+
+            {/* Mobile hamburger */}
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              className="md:hidden p-2.5 text-foreground hover:text-primary transition-all rounded-full hover:bg-secondary"
+              aria-label="Toggle menu"
+            >
+              {menuOpen ? <RiCloseLine size={28} /> : <RiMenu3Line size={28} />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Menu */}
+      {menuOpen && (
+        <div className="md:hidden border-t bg-white">
+          <div className="max-w-screen-2xl mx-auto px-8 py-8 flex flex-col gap-y-6 text-lg font-medium">
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.url}
+                onClick={() => setMenuOpen(false)}
+                className="text-foreground hover:text-primary transition-colors py-1"
+              >
+                {link.label}
+              </Link>
+            ))}
+            <div className="pt-4 border-t text-xs text-muted-foreground font-mono tracking-widest">
+              PROFESSIONAL • CLEAN • MODERN
+            </div>
+          </div>
+        </div>
+      )}
+
+      <CartDrawer />
+    </nav>
+  );
+};
+
+export default Header;
diff --git a/components/shopify/product-card.tsx b/components/shopify/product-card.tsx
new file mode 100644
index 0000000..0c24cbf
--- /dev/null
+++ b/components/shopify/product-card.tsx
@@ -0,0 +1,179 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import { truncate } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Loader } from '@/app/components/ui/loader';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface ProductCardProps {
+  product: Product;
+  onAddToCart?: (product: Product) => void;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ product, onAddToCart }) => {
+  const { addItem, openCart } = useShopifyCart();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const firstImage = product.images.edges[0]?.node;
+  const price = product.priceRange.minVariantPrice;
+  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
+  const hasDiscount =
+    compareAtPrice &&
+    parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+  const firstVariant = product.variants.edges[0]?.node;
+  const isAvailable = firstVariant?.availableForSale || false;
+
+  const formatPrice = (amount: string) => {
+    return `$${parseFloat(amount).toFixed(2)}`;
+  };
+
+  const handleAddToCart = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!firstVariant || !isAvailable || isAdding) return;
+
+    try {
+      setIsAdding(true);
+      await addItem(firstVariant.id, 1);
+      openCart();
+      if (onAddToCart) onAddToCart(product);
+    } catch (err) {
+      console.error('Failed to add item to cart:', err);
+    } finally {
+      setIsAdding(false);
+    }
+  };
+
+  return (
+    <div className="card-modern group bg-card rounded-2xl overflow-hidden h-full flex flex-col">
+      {/* Product Image */}
+      <div className="relative aspect-[4/3.1] bg-zinc-100 overflow-hidden">
+        <Link href={`/products/${product.handle}`} className="block h-full">
+          {firstImage ? (
+            <img
+              src={firstImage.url}
+              alt={firstImage.altText || product.title}
+              className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.08]"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
+              <i className="ri-image-line text-8xl"></i>
+            </div>
+          )}
+        </Link>
+
+        {/* Badges */}
+        {hasDiscount && compareAtPrice && (
+          <Badge className="absolute top-4 left-4 bg-rose-600 hover:bg-rose-600 text-white text-xs font-medium px-3 py-1 shadow-sm">
+            SALE
+          </Badge>
+        )}
+
+        {!isAvailable && (
+          <div className="absolute top-4 right-4 bg-white/90 text-xs font-medium px-3 py-1 rounded-full border text-foreground/70">
+            SOLD OUT
+          </div>
+        )}
+      </div>
+
+      {/* Product Info */}
+      <div className="flex-1 p-6 flex flex-col">
+        <Link
+          href={`/products/${product.handle}`}
+          className="group-hover:text-primary transition-colors"
+        >
+          <h3 className="font-heading text-xl font-semibold tracking-tight text-foreground mb-2 line-clamp-2 min-h-[3.2em]">
+            {truncate(product.title, 65)}
+          </h3>
+        </Link>
+
+        <div className="mt-auto">
+          <div className="price-display flex items-baseline gap-x-3 mb-6">
+            <span className="text-2xl font-semibold text-foreground tracking-tighter">
+              {formatPrice(price.amount)}
+            </span>
+            {hasDiscount && compareAtPrice && (
+              <span className="text-base line-through text-muted-foreground">
+                {formatPrice(compareAtPrice.amount)}
+              </span>
+            )}
+          </div>
+
+          <div className="flex gap-3">
+            <Link href={`/products/${product.handle}`} className="flex-1">
+              <Button
+                variant="outline"
+                className="w-full btn-modern text-sm font-medium"
+              >
+                DETAILS
+              </Button>
+            </Link>
+
+            {isAvailable && (
+              <Button
+                onClick={handleAddToCart}
+                className="flex-1 btn-modern bg-primary hover:bg-primary/90 text-sm font-medium"
+                disabled={isAdding || !isAvailable}
+              >
+                {isAdding ? (
+                  <>
+                    <Loader size={16} className="mr-2" />
+                    ADDING...
+                  </>
+                ) : (
+                  'ADD TO BAG'
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;
diff --git a/components/shopify/product-detail.tsx b/components/shopify/product-detail.tsx
new file mode 100644
index 0000000..cca9c12
--- /dev/null
+++ b/components/shopify/product-detail.tsx
@@ -0,0 +1,3 @@
+import ProductDetail from './product-detail/index';
+
+export default ProductDetail;
diff --git a/components/shopify/product-detail/index.tsx b/components/shopify/product-detail/index.tsx
new file mode 100644
index 0000000..699121c
--- /dev/null
+++ b/components/shopify/product-detail/index.tsx
@@ -0,0 +1,223 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import Link from 'next/link';
+import { useProduct, type Product } from '@/hooks/use-shopify-products';
+import { useShopifyCart } from '@/hooks/use-shopify-cart';
+import ProductDetailGallery from './product-detail-gallery';
+import ProductDetailInfo, { type ProductFeature } from './product-detail-info';
+import { Button } from '@/components/ui/button';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+} from '@/components/ui/empty';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: {
+    amount: string;
+    currencyCode: string;
+  };
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+  image?: {
+    url: string;
+    altText?: string;
+  };
+}
+
+export type { Product };
+
+interface ProductDetailProps {
+  handle?: string;
+  addToCartLabel?: string;
+  features?: ProductFeature[];
+}
+
+const ProductDetail: React.FC<ProductDetailProps> = ({
+  handle: handleProp,
+  addToCartLabel = 'Add to Cart',
+  features,
+}) => {
+  const params = useParams();
+  const handle = handleProp || (params?.handle as string);
+  const { addItem, openCart } = useShopifyCart();
+
+  const { product, loading, error } = useProduct(handle);
+
+  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(
+    null
+  );
+  const [selectedOptions, setSelectedOptions] = useState<
+    Record<string, string>
+  >({});
+  const [quantity, setQuantity] = useState(1);
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+  const [addingToCart, setAddingToCart] = useState(false);
+
+  // Initialize variant when product loads
+  useEffect(() => {
+    if (product) {
+      const firstVariant = product.variants.edges[0]?.node;
+      if (firstVariant) {
+        setSelectedVariant(firstVariant);
+
+        const initialOptions: Record<string, string> = {};
+        firstVariant.selectedOptions.forEach(
+          (option: { name: string; value: string }) => {
+            initialOptions[option.name] = option.value;
+          }
+        );
+        setSelectedOptions(initialOptions);
+      }
+    }
+  }, [product]);
+
+  const handleOptionChange = (optionName: string, value: string) => {
+    const newOptions = { ...selectedOptions, [optionName]: value };
+    setSelectedOptions(newOptions);
+
+    // Find matching variant
+    const matchingVariant = product?.variants.edges.find(({ node }) => {
+      return node.selectedOptions.every(
+        (option) => newOptions[option.name] === option.value
+      );
+    });
+
+    if (matchingVariant) {
+      setSelectedVariant(matchingVariant.node);
+
+      // Update image if variant has an associated image
+      if (matchingVariant.node.image && product) {
+        const variantImageUrl = matchingVariant.node.image.url;
+        const imageIndex = product.images.edges.findIndex(
+          (edge) => edge.node.url === variantImageUrl
+        );
+        if (imageIndex !== -1) {
+          setSelectedImageIndex(imageIndex);
+        }
+      }
+    }
+  };
+
+  const handleAddToCart = async () => {
+    if (!selectedVariant || !product) return;
+
+    try {
+      setAddingToCart(true);
+      await addItem(selectedVariant.id, quantity);
+      openCart();
+    } catch (err) {
+      console.error('Failed to add item to cart:', err);
+    } finally {
+      setAddingToCart(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          {/* Image Gallery Skeleton */}
+          <div>
+            <div className="aspect-square bg-gray-200 rounded-lg animate-pulse mb-4"></div>
+            <div className="grid grid-cols-4 gap-2">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <div
+                  key={i}
+                  className="aspect-square bg-gray-200 rounded animate-pulse"
+                ></div>
+              ))}
+            </div>
+          </div>
+
+          {/* Product Info Skeleton */}
+          <div>
+            <div className="h-8 bg-gray-200 rounded mb-4 animate-pulse"></div>
+            <div className="h-6 bg-gray-200 rounded mb-6 w-1/3 animate-pulse"></div>
+            <div className="h-24 bg-gray-200 rounded mb-6 animate-pulse"></div>
+            <div className="h-12 bg-gray-200 rounded mb-4 animate-pulse"></div>
+            <div className="h-12 bg-gray-200 rounded animate-pulse"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !product) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Empty className="min-h-[400px]">
+          <EmptyHeader>
+            <EmptyTitle>Product Not Found</EmptyTitle>
+            <EmptyDescription>
+              {error || 'The requested product could not be found.'}
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button onClick={() => window.history.back()} variant="outline">
+              Go Back
+            </Button>
+          </EmptyContent>
+        </Empty>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white">
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumb className="mb-6">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink asChild>
+                <Link href="/">Home</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{product.title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
+          <ProductDetailGallery
+            images={product.images.edges.map((edge) => edge.node)}
+            selectedImageIndex={selectedImageIndex}
+            onImageSelect={setSelectedImageIndex}
+          />
+          <ProductDetailInfo
+            product={product}
+            selectedVariant={selectedVariant}
+            selectedOptions={selectedOptions}
+            quantity={quantity}
+            setQuantity={setQuantity}
+            handleAddToCart={handleAddToCart}
+            onOptionChange={handleOptionChange}
+            loading={addingToCart}
+            addToCartLabel={addToCartLabel}
+            features={features}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetail;
diff --git a/components/shopify/product-detail/product-detail-gallery.tsx b/components/shopify/product-detail/product-detail-gallery.tsx
new file mode 100644
index 0000000..306ba36
--- /dev/null
+++ b/components/shopify/product-detail/product-detail-gallery.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductDetailGalleryProps {
+  images: ProductImage[];
+  selectedImageIndex?: number;
+  onImageSelect?: (index: number) => void;
+}
+
+const ProductDetailGallery: React.FC<ProductDetailGalleryProps> = ({
+  images,
+  selectedImageIndex = 0,
+  onImageSelect,
+}) => {
+  const setSelectedImage = onImageSelect || (() => {});
+
+  return (
+    <div className="space-y-4">
+      {/* Main Image */}
+      <div className="product-gallery-main aspect-square bg-zinc-50 border border-border rounded-3xl overflow-hidden shadow-inner relative">
+        {images.length > 0 ? (
+          <img
+            src={images[selectedImageIndex].url}
+            alt={images[selectedImageIndex].altText || 'Product image'}
+            className="w-full h-full object-cover transition-all hover:scale-105 duration-700"
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-zinc-300">
+            <i className="ri-image-line text-[120px]"></i>
+          </div>
+        )}
+      </div>
+
+      {/* Image Thumbnails */}
+      {images.length > 1 && (
+        <div className="grid grid-cols-4 gap-3">
+          {images.map((image, index) => (
+            <button
+              key={index}
+              onClick={() => setSelectedImage(index)}
+              className={`aspect-square rounded-2xl overflow-hidden border transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/30 ${
+                selectedImageIndex === index
+                  ? 'border-primary shadow-md scale-[1.03]'
+                  : 'border-border hover:border-zinc-300'
+              }`}
+            >
+              <img
+                src={image.url}
+                alt={image.altText || 'Product thumbnail'}
+                className="w-full h-full object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductDetailGallery;
diff --git a/components/shopify/product-detail/product-detail-info.tsx b/components/shopify/product-detail/product-detail-info.tsx
new file mode 100644
index 0000000..a09617d
--- /dev/null
+++ b/components/shopify/product-detail/product-detail-info.tsx
@@ -0,0 +1,240 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Loader } from '@/app/components/ui/loader';
+import RemixIcon from '@/components/ui/remix-icon';
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+}
+
+interface ProductOption {
+  id: string;
+  name: string;
+  values: string[];
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  descriptionHtml?: string;
+  handle: string;
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  options: ProductOption[];
+}
+
+export interface ProductFeature {
+  icon: string;
+  label: string;
+}
+
+interface ProductDetailInfoProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  selectedOptions: Record<string, string>;
+  quantity: number;
+  setQuantity: (quantity: number) => void;
+  handleAddToCart: () => void;
+  onOptionChange: (optionName: string, value: string) => void;
+  loading?: boolean;
+  addToCartLabel?: string;
+  features?: ProductFeature[];
+}
+
+const ProductDetailInfo: React.FC<ProductDetailInfoProps> = ({
+  product,
+  selectedVariant,
+  selectedOptions,
+  quantity,
+  setQuantity,
+  handleAddToCart,
+  onOptionChange,
+  loading = false,
+  addToCartLabel = 'Add to Cart',
+  features = [
+    { icon: 'RiTruckLine', label: 'Free shipping on orders over $100' },
+    { icon: 'RiArrowGoBackLine', label: '30-day return policy' },
+    { icon: 'RiSecurePaymentLine', label: 'Secure payment' },
+  ],
+}) => {
+  const formatPrice = (amount: string) => {
+    return `$${parseFloat(amount).toFixed(2)}`;
+  };
+
+  const price = selectedVariant?.price || product.priceRange.minVariantPrice;
+  const compareAtPrice = product.compareAtPriceRange?.minVariantPrice;
+  const hasDiscount =
+    compareAtPrice &&
+    parseFloat(compareAtPrice.amount) > parseFloat(price.amount);
+
+  return (
+    <div className="pt-2">
+      <div className="mb-2">
+        <div className="uppercase tracking-[3px] text-xs font-mono text-muted-foreground mb-1">
+          LUMINA COLLECTION
+        </div>
+        <h1 className="text-5xl md:text-6xl font-bold tracking-tighter font-heading text-foreground leading-none mb-6">
+          {product.title}
+        </h1>
+      </div>
+
+      {/* Price */}
+      <div className="flex items-center gap-x-4 mb-10">
+        <span className="text-4xl font-semibold tracking-tighter text-foreground price-display">
+          {formatPrice(price.amount)}
+        </span>
+        {hasDiscount && compareAtPrice && (
+          <>
+            <span className="text-2xl text-muted-foreground line-through tracking-tight">
+              {formatPrice(compareAtPrice.amount)}
+            </span>
+            <Badge
+              variant="destructive"
+              className="text-xs font-mono px-4 py-1"
+            >
+              SAVE{' '}
+              {Math.round(
+                ((parseFloat(compareAtPrice.amount) -
+                  parseFloat(price.amount)) /
+                  parseFloat(compareAtPrice.amount)) *
+                  100
+              )}
+              %
+            </Badge>
+          </>
+        )}
+      </div>
+
+      {/* Description */}
+      {product.description && (
+        <div className="prose text-muted-foreground mb-10 text-[15px] leading-relaxed max-w-prose">
+          {product.descriptionHtml ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}
+            />
+          ) : (
+            <p>{product.description}</p>
+          )}
+        </div>
+      )}
+
+      {/* Product Options */}
+      {product.options &&
+        product.options.map((option) => (
+          <div key={option.id} className="mb-8">
+            <div className="text-xs uppercase font-mono tracking-widest text-muted-foreground mb-3">
+              {option.name}
+            </div>
+            <div className="flex flex-wrap gap-2">
+              {option.values.map((value) => (
+                <Button
+                  key={value}
+                  onClick={() => onOptionChange(option.name, value)}
+                  variant={
+                    selectedOptions[option.name] === value
+                      ? 'default'
+                      : 'outline'
+                  }
+                  className={`rounded-2xl px-6 py-2.5 text-sm font-medium transition-all ${
+                    selectedOptions[option.name] === value ? 'shadow-md' : ''
+                  }`}
+                >
+                  {value}
+                </Button>
+              ))}
+            </div>
+          </div>
+        ))}
+
+      {/* Quantity Selector */}
+      <div className="mb-8">
+        <div className="text-xs uppercase font-mono tracking-widest text-muted-foreground mb-3">
+          QUANTITY
+        </div>
+        <div className="inline-flex items-center border border-border rounded-2xl">
+          <Button
+            onClick={() => setQuantity(Math.max(1, quantity - 1))}
+            variant="ghost"
+            size="icon-sm"
+            className="rounded-l-2xl h-12 w-12"
+            disabled={quantity <= 1}
+          >
+            −
+          </Button>
+          <div className="px-8 font-mono text-lg font-semibold tabular-nums">
+            {quantity}
+          </div>
+          <Button
+            onClick={() => setQuantity(quantity + 1)}
+            variant="ghost"
+            size="icon-sm"
+            className="rounded-r-2xl h-12 w-12"
+          >
+            +
+          </Button>
+        </div>
+      </div>
+
+      {/* Add to Cart Button */}
+      <Button
+        onClick={handleAddToCart}
+        disabled={!selectedVariant?.availableForSale || loading}
+        size="lg"
+        className="w-full h-16 text-base font-medium tracking-wider rounded-3xl btn-modern"
+      >
+        {loading ? (
+          <>
+            <Loader size={18} className="mr-3" />
+            ADDING TO BAG...
+          </>
+        ) : selectedVariant?.availableForSale ? (
+          String(addToCartLabel ?? 'Add to Cart').toUpperCase()
+        ) : (
+          'OUT OF STOCK'
+        )}
+      </Button>
+
+      {/* Features */}
+      {features.length > 0 && (
+        <div className="mt-12 pt-10 border-t border-border">
+          <div className="space-y-6">
+            {features.map((feature, index) => (
+              <div key={index} className="flex gap-x-4 text-sm">
+                <div className="mt-0.5 text-primary">
+                  <RemixIcon name={feature.icon} size={18} />
+                </div>
+                <div className="text-muted-foreground leading-snug">
+                  {feature.label}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="mt-12 text-[10px] font-mono text-center text-muted-foreground tracking-widest">
+        FREE SHIPPING • EASY RETURNS • SECURE CHECKOUT
+      </div>
+    </div>
+  );
+};
+
+export default ProductDetailInfo;
diff --git a/components/shopify/product-recommendations.tsx b/components/shopify/product-recommendations.tsx
new file mode 100644
index 0000000..bb4cdbd
--- /dev/null
+++ b/components/shopify/product-recommendations.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import React from 'react';
+import { useParams } from 'next/navigation';
+import {
+  useProduct,
+  useProductRecommendations,
+} from '@/hooks/use-shopify-products';
+import ProductCard from './product-card';
+
+interface ProductRecommendationsProps {
+  productId?: string;
+  title?: string;
+}
+
+const ProductRecommendations: React.FC<ProductRecommendationsProps> = ({
+  productId: productIdProp,
+  title = 'You Might Also Like These Products 2',
+}) => {
+  const params = useParams();
+  const handle = params?.handle as string | undefined;
+  const { product } = useProduct(productIdProp ? null : (handle ?? null));
+  const resolvedProductId = productIdProp || product?.id || '';
+
+  const { recommendations, loading, error } = useProductRecommendations(
+    resolvedProductId || null
+  );
+
+  if (!loading && (!recommendations || recommendations.length === 0)) {
+    return null;
+  }
+
+  return (
+    <div className="bg-gray-50 py-16">
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-bold text-center mb-12 text-gray-900 font-heading">
+          {title}
+        </h2>
+
+        {loading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {Array.from({ length: 4 }).map((_, index) => (
+              <div
+                key={index}
+                className="bg-white rounded-lg shadow-md overflow-hidden animate-pulse"
+              >
+                <div className="aspect-square bg-gray-200"></div>
+                <div className="p-6">
+                  <div className="h-6 bg-gray-200 rounded mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-8 bg-gray-200 rounded mb-4"></div>
+                  <div className="h-12 bg-gray-200 rounded"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : error ? (
+          <div className="text-center py-8">
+            <p className="text-gray-500">Recommendations could not be loaded</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {recommendations.slice(0, 4).map((recommendedProduct) => (
+              <ProductCard
+                key={recommendedProduct.id}
+                product={recommendedProduct}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProductRecommendations;
diff --git a/components/shopify/products.tsx b/components/shopify/products.tsx
new file mode 100644
index 0000000..0b84538
--- /dev/null
+++ b/components/shopify/products.tsx
@@ -0,0 +1,238 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import ProductCard from './product-card';
+import { getProducts } from '@/hooks/use-shopify-products';
+import { Button } from '@/components/ui/button';
+import { Loader } from '@/app/components/ui/loader';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+}
+
+interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+}
+
+interface ProductsProps {
+  title?: string;
+  limit?: number;
+  showLoadMore?: boolean;
+}
+
+const Products: React.FC<ProductsProps> = ({
+  title = 'Our Products',
+  limit = 12,
+  showLoadMore = true,
+}) => {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMoreProducts, setHasMoreProducts] = useState(true);
+
+  const fetchProducts = async (
+    currentProducts: Product[] = [],
+    loadMore = false
+  ) => {
+    try {
+      if (loadMore) {
+        setLoadingMore(true);
+      } else {
+        setLoading(true);
+        setError(null);
+      }
+
+      const newProducts = await getProducts({
+        first: limit,
+        sortKey: 'CREATED_AT',
+        reverse: true,
+      });
+
+      if (loadMore) {
+        const existingIds = new Set(currentProducts.map((p) => p.id));
+        const uniqueNewProducts = newProducts.filter(
+          (p) => !existingIds.has(p.id)
+        );
+
+        if (uniqueNewProducts.length === 0) {
+          setHasMoreProducts(false);
+        } else {
+          setProducts((prev) => [...prev, ...uniqueNewProducts]);
+        }
+      } else {
+        setProducts(newProducts);
+        setHasMoreProducts(newProducts.length === limit);
+      }
+    } catch (err) {
+      console.error('Error fetching products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load products');
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchProducts();
+  }, [limit]);
+
+  const handleAddToCart = async (product: Product) => {
+    console.log('Adding to cart:', product);
+  };
+
+  const handleLoadMore = () => {
+    if (!loadingMore && hasMoreProducts) {
+      fetchProducts(products, true);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="py-20">
+        <div className="max-w-screen-2xl mx-auto px-8">
+          <div className="flex justify-center mb-6">
+            <div className="inline px-6 py-2 bg-white border rounded-3xl text-xs font-mono tracking-widest text-muted-foreground">
+              DISCOVER
+            </div>
+          </div>
+          <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-5 text-foreground">
+            {title}
+          </h2>
+          <p className="text-center text-muted-foreground max-w-md mx-auto mb-16">
+            Loading our finest selection...
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            {Array.from({ length: 8 }).map((_, index) => (
+              <div
+                key={index}
+                className="bg-white rounded-3xl overflow-hidden animate-pulse border border-border h-[460px]"
+              >
+                <div className="h-[280px] bg-zinc-100"></div>
+                <div className="p-8 space-y-6">
+                  <div className="h-6 bg-zinc-200 rounded-full w-4/5"></div>
+                  <div className="h-4 bg-zinc-200 rounded w-1/3"></div>
+                  <div className="pt-4 flex gap-3">
+                    <div className="h-11 flex-1 bg-zinc-200 rounded-2xl"></div>
+                    <div className="h-11 flex-1 bg-zinc-200 rounded-2xl"></div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || products.length === 0) {
+    return (
+      <div className="py-20 bg-zinc-50">
+        <div className="max-w-screen-2xl mx-auto px-8 text-center">
+          <h2 className="text-6xl font-bold tracking-tighter font-heading mb-8 text-foreground">
+            {title}
+          </h2>
+          <div className="mx-auto max-w-sm bg-white border border-border rounded-3xl p-12">
+            <i className="ri-inbox-line text-6xl text-muted-foreground mb-6 block"></i>
+            <h3 className="font-semibold text-2xl mb-3 tracking-tight">
+              {error ? 'Connection Error' : 'Coming Soon'}
+            </h3>
+            <p className="text-muted-foreground mb-8 text-base">
+              {error ||
+                'Our curated collection is being prepared. Please check back shortly.'}
+            </p>
+            {error && (
+              <Button onClick={() => fetchProducts()} className="btn-modern">
+                Try Again
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="py-20 bg-white">
+      <div className="max-w-screen-2xl mx-auto px-8">
+        <div className="flex justify-center mb-6">
+          <div className="inline px-6 py-2 bg-zinc-100 rounded-3xl text-xs font-mono tracking-[1.5px] text-muted-foreground">
+            CURATED SELECTION
+          </div>
+        </div>
+
+        <h2 className="text-center text-6xl font-bold tracking-tighter font-heading mb-5 text-foreground">
+          {title}
+        </h2>
+        <p className="text-center text-muted-foreground max-w-md mx-auto mb-16 text-lg">
+          Beautifully designed objects for everyday life
+        </p>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-8 gap-y-16 mb-20">
+          {products.map((product) => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              onAddToCart={handleAddToCart}
+            />
+          ))}
+        </div>
+
+        {showLoadMore && hasMoreProducts && (
+          <div className="flex justify-center">
+            <Button
+              onClick={handleLoadMore}
+              disabled={loadingMore}
+              size="lg"
+              className="btn-modern rounded-2xl px-14 py-7 text-sm tracking-widest font-medium border border-border"
+            >
+              {loadingMore ? (
+                <>
+                  <Loader size={18} className="mr-3" />
+                  LOADING MORE
+                </>
+              ) : (
+                'LOAD MORE PRODUCTS'
+              )}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Products;
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..9d3232c
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,197 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AccordionContextType {
+  value: string | string[];
+  onValueChange: (value: string) => void;
+  type: 'single' | 'multiple';
+}
+
+const AccordionContext = createContext<AccordionContextType | undefined>(
+  undefined
+);
+
+interface AccordionItemContextType {
+  value: string;
+}
+
+const AccordionItemContext = createContext<
+  AccordionItemContextType | undefined
+>(undefined);
+
+function useAccordion() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion components must be used within an Accordion');
+  }
+  return context;
+}
+
+function useAccordionItem() {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      'AccordionTrigger and AccordionContent must be used within an AccordionItem'
+    );
+  }
+  return context;
+}
+
+interface AccordionProps {
+  type?: 'single' | 'multiple';
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  children: React.ReactNode;
+}
+
+function Accordion({
+  type = 'single',
+  value: controlledValue,
+  onValueChange,
+  children,
+}: AccordionProps) {
+  const [internalValue, setInternalValue] = useState<string | string[]>(
+    type === 'single' ? '' : []
+  );
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (itemValue: string) => {
+      if (type === 'single') {
+        const newValue = value === itemValue ? '' : itemValue;
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      } else {
+        const valueArray = Array.isArray(value) ? value : [];
+        const newValue = valueArray.includes(itemValue)
+          ? valueArray.filter((v) => v !== itemValue)
+          : [...valueArray, itemValue];
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      }
+    },
+    [value, type, isControlled, onValueChange]
+  );
+
+  return (
+    <AccordionContext.Provider
+      value={{ value, onValueChange: handleValueChange, type }}
+    >
+      <div data-slot="accordion">{children}</div>
+    </AccordionContext.Provider>
+  );
+}
+
+interface AccordionItemProps {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+function AccordionItem({ value, children, className }: AccordionItemProps) {
+  return (
+    <AccordionItemContext.Provider value={{ value }}>
+      <div
+        data-slot="accordion-item"
+        className={cn('border-b border-border last:border-b-0', className)}
+        data-value={value}
+      >
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
+  );
+}
+
+interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionTriggerProps) {
+  const accordion = useAccordion();
+  const item = useAccordionItem();
+
+  const handleClick = () => {
+    accordion.onValueChange(item.value);
+  };
+
+  const isOpen =
+    accordion.type === 'single'
+      ? accordion.value === item.value
+      : Array.isArray(accordion.value) && accordion.value.includes(item.value);
+
+  return (
+    <div className="flex">
+      <button
+        data-slot="accordion-trigger"
+        className={cn(
+          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 px-0 text-left text-sm font-medium transition-all outline-none hover:cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-md disabled:pointer-events-none disabled:opacity-50',
+          isOpen && '[&>svg]:rotate-180',
+          className
+        )}
+        onClick={handleClick}
+        data-state={isOpen ? 'open' : 'closed'}
+        {...props}
+      >
+        {children}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionContentProps) {
+  const accordion = useAccordion();
+  const item = useAccordionItem();
+
+  const isOpen =
+    accordion.type === 'single'
+      ? accordion.value === item.value
+      : Array.isArray(accordion.value) && accordion.value.includes(item.value);
+
+  return (
+    <div
+      data-slot="accordion-content"
+      data-state={isOpen ? 'open' : 'closed'}
+      className={cn(
+        'overflow-hidden text-sm transition-all duration-200',
+        isOpen ? 'max-h-96' : 'max-h-0'
+      )}
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </div>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
new file mode 100644
index 0000000..3c5a3e4
--- /dev/null
+++ b/components/ui/alert.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type AlertVariant = "default" | "destructive"
+
+const baseClasses =
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+
+const variantClasses: Record<AlertVariant, string> = {
+  default: "bg-card text-card-foreground",
+  destructive:
+    "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+}
+
+function Alert({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & { variant?: AlertVariant }) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(baseClasses, variantClasses[variant], className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..6cd2e95
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface AvatarProps extends React.ComponentProps<'div'> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'size-6',
+  md: 'size-8',
+  lg: 'size-10',
+  xl: 'size-12',
+};
+
+function Avatar({ className, size = 'md', ...props }: AvatarProps) {
+  const [imageError, setImageError] = React.useState(false);
+
+  return (
+    <div
+      data-slot="avatar"
+      className={cn(
+        'relative flex shrink-0 overflow-hidden rounded-full',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  onError,
+  ...props
+}: React.ComponentProps<'img'>) {
+  const [hasError, setHasError] = React.useState(false);
+
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    setHasError(true);
+    onError?.(e as any);
+  };
+
+  if (hasError) {
+    return null;
+  }
+
+  return (
+    <img
+      data-slot="avatar-image"
+      className={cn('aspect-square h-full w-full object-cover', className)}
+      onError={handleError}
+      {...props}
+    />
+  );
+}
+
+interface AvatarFallbackProps extends React.ComponentProps<'div'> {
+  children: React.ReactNode;
+}
+
+function AvatarFallback({
+  className,
+  children,
+  ...props
+}: AvatarFallbackProps) {
+  return (
+    <div
+      data-slot="avatar-fallback"
+      className={cn(
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full font-medium text-sm',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };
+export type { AvatarProps };
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..20171c8
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+
+interface BadgeProps extends React.ComponentProps<'span'> {
+  variant?: BadgeVariant;
+  asChild?: boolean;
+}
+
+const badgeVariants: Record<BadgeVariant, string> = {
+  default:
+    'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary:
+    'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90',
+  destructive:
+    'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+  outline:
+    'text-foreground border-border hover:bg-accent hover:text-accent-foreground',
+};
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  children,
+  ...props
+}: BadgeProps) {
+  const baseClasses = cn(
+    'inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden',
+    '[&>svg]:size-3 [&>svg]:pointer-events-none [&>svg]:shrink-0'
+  );
+
+  const variantClasses = badgeVariants[variant];
+
+  const finalClassName = cn(baseClasses, variantClasses, className);
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    return React.cloneElement(child, {
+      className: cn(child.props.className, finalClassName),
+      ...props,
+    } as any);
+  }
+
+  return (
+    <span data-slot="badge" className={finalClassName} {...props}>
+      {children}
+    </span>
+  );
+}
+
+export { Badge, badgeVariants };
+export type { BadgeProps };
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..9313497
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    return React.cloneElement(child, {
+      className: cn(
+        'hover:text-foreground transition-colors',
+        child.props.className,
+        className
+      ),
+      ...props,
+    } as any);
+  }
+
+  return (
+    <a
+      data-slot="breadcrumb-link"
+      className={cn('hover:text-foreground transition-colors', className)}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('text-foreground font-normal', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="size-3.5"
+        >
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      )}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <circle cx="12" cy="12" r="1"></circle>
+        <circle cx="19" cy="12" r="1"></circle>
+        <circle cx="5" cy="12" r="1"></circle>
+      </svg>
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
diff --git a/components/ui/button-group.tsx b/components/ui/button-group.tsx
new file mode 100644
index 0000000..dc05be0
--- /dev/null
+++ b/components/ui/button-group.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// Button group variants helper
+function getButtonGroupVariants(
+  orientation: 'horizontal' | 'vertical'
+): string {
+  const baseStyles =
+    'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*="w-"])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2';
+
+  const orientationStyles = {
+    horizontal:
+      '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+    vertical:
+      'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+  };
+
+  return cn(baseStyles, orientationStyles[orientation]);
+}
+
+interface ButtonGroupProps extends React.ComponentProps<'div'> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+function ButtonGroup({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: ButtonGroupProps) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(getButtonGroupVariants(orientation), className)}
+      {...props}
+    />
+  );
+}
+
+interface ButtonGroupTextProps extends React.ComponentProps<'div'> {
+  asChild?: boolean;
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: ButtonGroupTextProps) {
+  const Comp = asChild ? 'div' : 'div';
+  return (
+    <Comp
+      data-slot="button-group-text"
+      className={cn(
+        'bg-muted flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ButtonGroupSeparatorProps extends React.ComponentProps<'div'> {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: ButtonGroupSeparatorProps) {
+  const separatorClasses =
+    orientation === 'vertical' ? 'w-px h-auto' : 'h-px w-auto';
+
+  return (
+    <div
+      data-slot="button-group-separator"
+      className={cn(
+        'bg-border relative !m-0 self-stretch',
+        separatorClasses,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };
+export type {
+  ButtonGroupProps,
+  ButtonGroupTextProps,
+  ButtonGroupSeparatorProps,
+};
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..d5ed246
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?:
+    | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link';
+  size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+  children?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
+    const baseClasses = cn(
+      // Base styles
+      'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all',
+      'disabled:pointer-events-none disabled:opacity-50',
+      '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4',
+      'shrink-0 [&_svg]:shrink-0',
+      'outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive'
+    );
+
+    const variantClasses = {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive:
+        'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+      outline:
+        'border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      ghost:
+        'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+      link: 'text-primary underline-offset-4 hover:underline',
+    };
+
+    const sizeClasses = {
+      default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+      sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+      lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+      icon: 'size-9',
+      'icon-sm': 'size-8',
+      'icon-lg': 'size-10',
+    };
+
+    return (
+      <button
+        ref={ref}
+        data-slot="button"
+        data-variant={variant}
+        data-size={size}
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+export { Button };
+export default Button;
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..4d61521
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100644
index 0000000..a5b130c
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,245 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
+import { cn } from '@/lib/utils';
+import { Button } from './button';
+
+interface CarouselContextType {
+  currentIndex: number;
+  totalItems: number;
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+  orientation: 'horizontal' | 'vertical';
+}
+
+const CarouselContext = createContext<CarouselContextType | undefined>(
+  undefined
+);
+
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('Carousel components must be used within a Carousel');
+  }
+  return context;
+}
+
+interface CarouselProps {
+  children: React.ReactNode;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+}
+
+function Carousel({
+  children,
+  orientation = 'horizontal',
+  className,
+  autoPlay = false,
+  autoPlayInterval = 3000,
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const itemCount = React.Children.count(children);
+  const autoPlayTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const canScrollPrev = currentIndex > 0;
+  const canScrollNext = currentIndex < itemCount - 1;
+
+  const scrollPrev = useCallback(() => {
+    setCurrentIndex((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const scrollNext = useCallback(() => {
+    setCurrentIndex((prev) => Math.min(itemCount - 1, prev + 1));
+  }, [itemCount]);
+
+  useEffect(() => {
+    if (!autoPlay) return;
+
+    autoPlayTimerRef.current = setInterval(() => {
+      setCurrentIndex((prev) => {
+        if (prev >= itemCount - 1) {
+          return 0;
+        }
+        return prev + 1;
+      });
+    }, autoPlayInterval);
+
+    return () => {
+      if (autoPlayTimerRef.current) {
+        clearInterval(autoPlayTimerRef.current);
+      }
+    };
+  }, [autoPlay, autoPlayInterval, itemCount]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        currentIndex,
+        totalItems: itemCount,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        orientation,
+      }}
+    >
+      <div
+        className={cn('relative', className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+}
+
+interface CarouselContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselContent({ className, children }: CarouselContentProps) {
+  const { currentIndex, orientation } = useCarousel();
+
+  return (
+    <div
+      className={cn('overflow-hidden', className)}
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          'flex transition-transform duration-300 ease-out',
+          orientation === 'horizontal' ? 'flex-row' : 'flex-col'
+        )}
+        style={{
+          transform:
+            orientation === 'horizontal'
+              ? `translateX(-${currentIndex * 100}%)`
+              : `translateY(-${currentIndex * 100}%)`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface CarouselItemProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function CarouselItem({ className, children }: CarouselItemProps) {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn('min-w-0 shrink-0 grow-0 basis-full', className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface CarouselPreviousProps {
+  className?: string;
+}
+
+function CarouselPrevious({ className }: CarouselPreviousProps) {
+  const { scrollPrev, canScrollPrev, orientation } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant="outline"
+      onClick={scrollPrev}
+      disabled={!canScrollPrev}
+      className={cn(
+        'absolute size-10 rounded-full p-0 flex items-center justify-center',
+        orientation === 'horizontal'
+          ? 'top-1/2 left-2 -translate-y-1/2'
+          : 'top-2 left-1/2 -translate-x-1/2 -rotate-90',
+        className
+      )}
+      aria-label="Previous slide"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
+    </Button>
+  );
+}
+
+interface CarouselNextProps {
+  className?: string;
+}
+
+function CarouselNext({ className }: CarouselNextProps) {
+  const { scrollNext, canScrollNext, orientation } = useCarousel();
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant="outline"
+      onClick={scrollNext}
+      disabled={!canScrollNext}
+      className={cn(
+        'absolute size-10 rounded-full p-0 flex items-center justify-center',
+        orientation === 'horizontal'
+          ? 'top-1/2 right-2 -translate-y-1/2'
+          : 'bottom-2 left-1/2 -translate-x-1/2 rotate-90',
+        className
+      )}
+      aria-label="Next slide"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </Button>
+  );
+}
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+};
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..0ea8f84
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,268 @@
+import React, { useState, useCallback, useContext, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { clsx } from 'clsx';
+
+interface DialogContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DialogContext = createContext<DialogContextType | undefined>(undefined);
+
+function useDialog() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+}
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+function Dialog({ open: controlledOpen, onOpenChange, children }: DialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  return (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+function DialogTrigger({
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { setOpen } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    return React.cloneElement(child, {
+      ...props,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(true);
+        child.props.onClick?.(e);
+      },
+    } as any);
+  }
+
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        setOpen(true);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DialogPortal({ children }: { children: React.ReactNode }) {
+  return createPortal(children, document.body);
+}
+
+function DialogClose({
+  children,
+  asChild,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }) {
+  const { setOpen } = useDialog();
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    return React.cloneElement(child, {
+      ...props,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(false);
+        child.props.onClick?.(e);
+      },
+    } as any);
+  }
+
+  return (
+    <button
+      {...props}
+      onClick={(e) => {
+        setOpen(false);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function DialogOverlay({ className, onClick, ...props }: DialogOverlayProps) {
+  const { setOpen } = useDialog();
+
+  return (
+    <motion.div
+      data-slot="dialog-overlay"
+      className={clsx('fixed inset-0 z-50 bg-black/50', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      onClick={(e) => {
+        setOpen(false);
+        onClick?.(e as any);
+      }}
+      {...(props as any)}
+    />
+  );
+}
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogContentProps) {
+  const { open } = useDialog();
+
+  return (
+    <DialogPortal>
+      <AnimatePresence>
+        {open && (
+          <>
+            <DialogOverlay />
+            <motion.div
+              data-slot="dialog-content"
+              className={clsx(
+                'bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-screen-md max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border p-6 shadow-lg',
+                className
+              )}
+              initial={{ opacity: 0, scale: 0.95, y: 0 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 0 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+              {...(props as any)}
+            >
+              {children}
+              {showCloseButton && (
+                <DialogClose
+                  data-slot="dialog-close"
+                  className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+                  aria-label="Close"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="size-4"
+                  >
+                    <path d="M18 6l-12 12M6 6l12 12" />
+                  </svg>
+                </DialogClose>
+              )}
+            </motion.div>
+          </>
+        )}
+      </AnimatePresence>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={clsx(
+        'flex flex-col gap-2 text-center sm:text-left',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={clsx(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h2
+      data-slot="dialog-title"
+      className={clsx('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      data-slot="dialog-description"
+      className={clsx('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  AnimatePresence,
+};
diff --git a/components/ui/empty.tsx b/components/ui/empty.tsx
new file mode 100644
index 0000000..64f3428
--- /dev/null
+++ b/components/ui/empty.tsx
@@ -0,0 +1,105 @@
+import React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
new file mode 100644
index 0000000..0df41c4
--- /dev/null
+++ b/components/ui/input-otp.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { cn } from '@/lib/utils';
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        'flex items-center gap-2 has-disabled:opacity-50',
+        containerClassName
+      )}
+      className={cn('disabled:cursor-not-allowed', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn('flex items-center', className)}
+      {...props}
+    />
+  );
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & {
+  index: number;
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r border-border text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l first:border-border last:rounded-r-md last:border-border data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4"
+      >
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+      </svg>
+    </div>
+  );
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..1a6d2e3
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/components/ui/item.tsx b/components/ui/item.tsx
new file mode 100644
index 0000000..88360f0
--- /dev/null
+++ b/components/ui/item.tsx
@@ -0,0 +1,213 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+// Item variants helper
+function getItemVariants(
+  variant: 'default' | 'outline' | 'muted',
+  size: 'default' | 'sm'
+): string {
+  const baseStyles =
+    'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
+
+  const variantStyles = {
+    default: 'bg-transparent',
+    outline: 'border-border',
+    muted: 'bg-muted/50',
+  };
+
+  const sizeStyles = {
+    default: 'p-4 gap-4',
+    sm: 'py-3 px-4 gap-2.5',
+  };
+
+  return cn(baseStyles, variantStyles[variant], sizeStyles[size]);
+}
+
+// Item media variants helper
+function getItemMediaVariants(variant: 'default' | 'icon' | 'image'): string {
+  const baseStyles =
+    'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5';
+
+  const variantStyles = {
+    default: 'bg-transparent',
+    icon: "size-8 border border-border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+    image:
+      'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+  };
+
+  return cn(baseStyles, variantStyles[variant]);
+}
+
+interface ItemGroupProps extends React.ComponentProps<'div'> {}
+
+function ItemGroup({ className, ...props }: ItemGroupProps) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn('group/item-group flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemSeparatorProps extends React.ComponentProps<'div'> {}
+
+function ItemSeparator({ className, ...props }: ItemSeparatorProps) {
+  return (
+    <div
+      data-slot="item-separator"
+      className={cn('my-0 border-t border-border', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'outline' | 'muted';
+  size?: 'default' | 'sm';
+  asChild?: boolean;
+}
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: ItemProps) {
+  const Comp = asChild ? 'div' : 'div';
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(getItemVariants(variant, size), className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemMediaProps extends React.ComponentProps<'div'> {
+  variant?: 'default' | 'icon' | 'image';
+}
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: ItemMediaProps) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(getItemMediaVariants(variant), className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemContentProps extends React.ComponentProps<'div'> {}
+
+function ItemContent({ className, ...props }: ItemContentProps) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemTitleProps extends React.ComponentProps<'div'> {}
+
+function ItemTitle({ className, ...props }: ItemTitleProps) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemDescriptionProps extends React.ComponentProps<'p'> {}
+
+function ItemDescription({ className, ...props }: ItemDescriptionProps) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemActionsProps extends React.ComponentProps<'div'> {}
+
+function ItemActions({ className, ...props }: ItemActionsProps) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn('flex items-center gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+interface ItemHeaderProps extends React.ComponentProps<'div'> {}
+
+function ItemHeader({ className, ...props }: ItemHeaderProps) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+interface ItemFooterProps extends React.ComponentProps<'div'> {}
+
+function ItemFooter({ className, ...props }: ItemFooterProps) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        'flex basis-full items-center justify-between gap-2',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+};
diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
new file mode 100644
index 0000000..2d461c8
--- /dev/null
+++ b/components/ui/pagination.tsx
@@ -0,0 +1,128 @@
+import * as React from 'react';
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center', className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn('flex flex-row items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
+  React.ComponentProps<'a'>;
+
+function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...props
+}: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50',
+        isActive
+          ? 'border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground'
+          : 'hover:bg-accent hover:text-accent-foreground',
+        size === 'icon' && 'size-9',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..85c867e
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+// Utility function to combine classNames
+function cn(...classes: (string | undefined | null | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface ProgressProps extends React.ComponentProps<'div'> {
+  value?: number;
+  max?: number;
+}
+
+function Progress({
+  className,
+  value = 0,
+  max = 100,
+  ...props
+}: ProgressProps) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  return (
+    <div
+      data-slot="progress"
+      className={cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        className
+      )}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      {...props}
+    >
+      <div
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - percentage}%)` }}
+      />
+    </div>
+  );
+}
+
+export { Progress };
+export type { ProgressProps };
diff --git a/components/ui/remix-icon.tsx b/components/ui/remix-icon.tsx
new file mode 100644
index 0000000..831cf3c
--- /dev/null
+++ b/components/ui/remix-icon.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import * as RemixIcons from '@remixicon/react';
+
+interface RemixIconProps {
+  name: string; // e.g. "RiTruckLine"
+  className?: string;
+  size?: number;
+}
+
+const RemixIcon: React.FC<RemixIconProps> = ({
+  name,
+  className,
+  size = 16,
+}) => {
+  if (!name) return null;
+
+  // Normalise: accept "RiTruckLine", "ri-truck-line", or "riTruckLine"
+  const normalised = name
+    // ri-truck-line → RiTruckLine
+    .replace(/^ri-/, 'Ri')
+    .replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+    // ensure first char is uppercase
+    .replace(/^./, (c) => c.toUpperCase());
+
+  const IconComponent = (
+    RemixIcons as Record<
+      string,
+      React.FC<{ className?: string; size?: number }>
+    >
+  )[normalised];
+
+  if (!IconComponent) {
+    console.warn(
+      `[RemixIcon] Icon "${name}" (resolved: "${normalised}") not found.`
+    );
+    return null;
+  }
+
+  return <IconComponent className={className} size={size} />;
+};
+
+export default RemixIcon;
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..c5adcec
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,287 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+} from 'react';
+import { cn } from '@/lib/utils';
+
+interface SelectContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value: string;
+  setValue: (value: string) => void;
+}
+
+const SelectContext = createContext<SelectContextType | undefined>(undefined);
+
+function useSelect() {
+  const context = useContext(SelectContext);
+  if (!context) {
+    throw new Error('Select components must be used within a Select');
+  }
+  return context;
+}
+
+interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+
+function Select({
+  value: controlledValue,
+  onValueChange,
+  children,
+}: SelectProps) {
+  const [internalValue, setInternalValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isControlled = controlledValue !== undefined;
+  const value = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+      setOpen(false);
+    },
+    [isControlled, onValueChange]
+  );
+
+  // Handle clicking outside to close the menu
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [open]);
+
+  return (
+    <SelectContext.Provider
+      value={{ open, setOpen, value, setValue: handleValueChange }}
+    >
+      <div ref={containerRef} data-slot="select" className="relative">
+        {children}
+      </div>
+    </SelectContext.Provider>
+  );
+}
+
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  placeholder?: string;
+}
+
+function SelectTrigger({
+  className,
+  children,
+  placeholder = 'Select...',
+  ...props
+}: SelectTriggerProps) {
+  const { open, setOpen, value } = useSelect();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <button
+      ref={triggerRef}
+      data-slot="select-trigger"
+      onClick={() => setOpen(!open)}
+      className={cn(
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*="text-"])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        className
+      )}
+      {...props}
+    >
+      {children || <span className="text-muted-foreground">{placeholder}</span>}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(
+          'size-4 opacity-50 transition-transform',
+          open && 'rotate-180'
+        )}
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+  );
+}
+
+interface SelectValueProps {
+  children?: React.ReactNode;
+  placeholder?: string;
+}
+
+function SelectValue({
+  children,
+  placeholder = 'Select...',
+}: SelectValueProps) {
+  const { value } = useSelect();
+
+  return (
+    <span data-slot="select-value">{children || value || placeholder}</span>
+  );
+}
+
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectContent({ className, children, ...props }: SelectContentProps) {
+  const { open } = useSelect();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={contentRef}
+      data-slot="select-content"
+      className={cn(
+        'bg-popover text-popover-foreground absolute z-50 min-w-[8rem] rounded-md border border-border shadow-md overflow-hidden top-full mt-2 left-0',
+        className
+      )}
+      {...props}
+    >
+      <div className="p-1 overflow-y-auto max-h-60">{children}</div>
+    </div>
+  );
+}
+
+interface SelectItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+function SelectItem({
+  value,
+  children,
+  disabled = false,
+  className,
+  ...props
+}: SelectItemProps) {
+  const { value: selectedValue, setValue } = useSelect();
+  const isSelected = selectedValue === value;
+
+  return (
+    <div
+      data-slot="select-item"
+      onClick={() => !disabled && setValue(value)}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*="text-"])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none transition-colors',
+        !disabled &&
+          'hover:bg-accent hover:text-accent-foreground cursor-pointer',
+        disabled && 'pointer-events-none opacity-50',
+        isSelected && 'bg-accent text-accent-foreground',
+        className
+      )}
+      {...props}
+    >
+      {isSelected && (
+        <span className="absolute right-2 flex size-3.5 items-center justify-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="size-4"
+          >
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </span>
+      )}
+      {children}
+    </div>
+  );
+}
+
+interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectGroup({ className, children, ...props }: SelectGroupProps) {
+  return (
+    <div
+      data-slot="select-group"
+      className={cn('overflow-hidden', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SelectLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SelectLabel({ className, children, ...props }: SelectLabelProps) {
+  return (
+    <div
+      data-slot="select-label"
+      className={cn(
+        'text-muted-foreground px-2 py-1.5 text-xs font-semibold',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface SelectSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  return (
+    <div
+      data-slot="select-separator"
+      className={cn(
+        'bg-border pointer-events-none -mx-1 my-1 h-px',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
+};
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..435880e
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,308 @@
+import React, { useState, useCallback, useContext, createContext } from 'react';
+import { createPortal } from 'react-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+interface SheetContextType {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  side: 'top' | 'right' | 'bottom' | 'left';
+}
+
+const SheetContext = createContext<SheetContextType | undefined>(undefined);
+
+function useSheet() {
+  const context = useContext(SheetContext);
+  if (!context) {
+    throw new Error('Sheet components must be used within a Sheet');
+  }
+  return context;
+}
+
+interface SheetProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+function Sheet({
+  open: controlledOpen,
+  onOpenChange,
+  children,
+  side = 'right',
+}: SheetProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  return (
+    <SheetContext.Provider value={{ open, setOpen, side }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+
+function SheetTrigger(
+  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
+) {
+  const { setOpen } = useSheet();
+  const { children, asChild, ...rest } = props;
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    return React.cloneElement(child, {
+      ...rest,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(true);
+        child.props.onClick?.(e);
+      },
+    } as any);
+  }
+
+  return (
+    <button
+      data-slot="sheet-trigger"
+      {...rest}
+      onClick={(e) => {
+        setOpen(true);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SheetPortal({ children }: { children: React.ReactNode }) {
+  return createPortal(children, document.body);
+}
+
+function SheetOverlay({
+  className,
+  onClick,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { setOpen } = useSheet();
+
+  return (
+    <motion.div
+      data-slot="sheet-overlay"
+      className={cn('fixed inset-0 z-50 bg-black/50', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3 }}
+      onClick={(e) => {
+        setOpen(false);
+        onClick?.(e);
+      }}
+      {...(props as any)}
+    />
+  );
+}
+
+interface SheetContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  showCloseButton?: boolean;
+}
+
+function SheetContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: SheetContentProps) {
+  const { setOpen, side } = useSheet();
+
+  const sideClasses = {
+    right: 'inset-y-0 right-0 h-full w-3/4 sm:max-w-sm border-l',
+    left: 'inset-y-0 left-0 h-full w-3/4 sm:max-w-sm border-r',
+    top: 'inset-x-0 top-0 h-auto border-b',
+    bottom: 'inset-x-0 bottom-0 h-auto border-t',
+  };
+
+  const slideVariants = {
+    right: {
+      initial: { x: 400, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: 400, opacity: 0 },
+    },
+    left: {
+      initial: { x: -400, opacity: 0 },
+      animate: { x: 0, opacity: 1 },
+      exit: { x: -400, opacity: 0 },
+    },
+    top: {
+      initial: { y: -400, opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: -400, opacity: 0 },
+    },
+    bottom: {
+      initial: { y: 400, opacity: 0 },
+      animate: { y: 0, opacity: 1 },
+      exit: { y: 400, opacity: 0 },
+    },
+  };
+
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <motion.div
+        data-slot="sheet-content"
+        className={cn(
+          'bg-background fixed z-50 flex flex-col gap-0 shadow-lg',
+          sideClasses[side]
+        )}
+        variants={slideVariants[side]}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+        {...(props as any)}
+      >
+        {children}
+        {showCloseButton && (
+          <button
+            data-slot="sheet-close"
+            onClick={() => setOpen(false)}
+            className="absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+            aria-label="Close"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="size-4"
+            >
+              <path d="M18 6l-12 12M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </motion.div>
+    </SheetPortal>
+  );
+}
+
+function SheetClose(
+  props: React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }
+) {
+  const { setOpen } = useSheet();
+  const { children, asChild, ...rest } = props;
+
+  if (asChild && React.isValidElement(children)) {
+    const child = children as React.ReactElement<any>;
+    return React.cloneElement(child, {
+      ...rest,
+      onClick: (e: React.MouseEvent) => {
+        setOpen(false);
+        child.props.onClick?.(e);
+      },
+    } as any);
+  }
+
+  return (
+    <button
+      data-slot="sheet-close"
+      {...rest}
+      onClick={(e) => {
+        setOpen(false);
+        props.onClick?.(e);
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn(
+        'flex flex-col gap-1.5 p-6 border-b border-border',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 p-6 border-t border-border sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {
+  return (
+    <h2
+      data-slot="sheet-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="sheet-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function SheetBody({ className, children, ...props }: SheetBodyProps) {
+  return (
+    <div
+      data-slot="sheet-body"
+      className={cn('flex-1 overflow-y-auto px-6 py-4', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  SheetPortal,
+  SheetOverlay,
+  AnimatePresence,
+};
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..32ea0ef
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
new file mode 100644
index 0000000..76b7843
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { toast } from 'sonner';
+
+import Button from '@/components/ui/button';
+
+export function SonnerDemo() {
+  return (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast('Event has been created', {
+          description: 'Sunday, December 03, 2023 at 9:00 AM',
+          action: {
+            label: 'Undo',
+            onClick: () => console.log('Undo'),
+          },
+        })
+      }
+    >
+      Show Toast
+    </Button>
+  );
+}
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
new file mode 100644
index 0000000..485ea8d
--- /dev/null
+++ b/components/ui/spinner.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SpinnerProps extends React.ComponentProps<'svg'> {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+const sizeClasses = {
+  sm: 'size-3',
+  md: 'size-4',
+  lg: 'size-6',
+  xl: 'size-8',
+};
+
+function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
+  return (
+    <svg
+      role="status"
+      aria-label="Loading"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn('animate-spin', sizeClasses[size], className)}
+      {...props}
+    >
+      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+    </svg>
+  );
+}
+
+export { Spinner };
+export type { SpinnerProps };
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..1e1bc94
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface SwitchProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+    const [isChecked, setIsChecked] = React.useState(checked ?? false);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newChecked = e.target.checked;
+      setIsChecked(newChecked);
+      onCheckedChange?.(newChecked);
+      props.onChange?.(e);
+    };
+
+    React.useEffect(() => {
+      if (checked !== undefined) {
+        setIsChecked(checked);
+      }
+    }, [checked]);
+
+    return (
+      <div className="relative inline-flex">
+        <input
+          ref={ref}
+          type="checkbox"
+          checked={isChecked}
+          onChange={handleChange}
+          disabled={disabled}
+          className="sr-only"
+          {...props}
+        />
+        <div
+          data-slot="switch"
+          className={cn(
+            'inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px]',
+            isChecked
+              ? 'bg-primary focus-visible:ring-ring/50 focus-visible:border-ring'
+              : 'bg-input dark:bg-input/80 focus-visible:ring-ring/50 focus-visible:border-ring',
+            disabled && 'cursor-not-allowed opacity-50',
+            className
+          )}
+          onClick={() => {
+            if (!disabled) {
+              setIsChecked(!isChecked);
+              onCheckedChange?.(!isChecked);
+            }
+          }}
+        >
+          <div
+            data-slot="switch-thumb"
+            className={cn(
+              'bg-background dark:bg-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform',
+              isChecked
+                ? 'translate-x-[calc(100%-2px)] dark:bg-primary-foreground'
+                : 'translate-x-0'
+            )}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+
+Switch.displayName = 'Switch';
+
+export { Switch };
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 0000000..c2c6a44
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto rounded-md border border-border"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b border-border', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t border-border font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground bg-muted/30 h-10 px-4 py-2 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-4 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..b1c1b2d
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,143 @@
+import React, { createContext, useContext, useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface TabsContextType {
+  activeTab: string;
+  setActiveTab: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextType | undefined>(undefined);
+
+function useTabs() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tabs components must be used within a Tabs component');
+  }
+  return context;
+}
+
+interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+function Tabs({
+  className,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  children,
+  ...props
+}: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue || '');
+  const isControlled = controlledValue !== undefined;
+  const activeTab = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = (newValue: string) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabsContext.Provider
+      value={{ activeTab, setActiveTab: handleValueChange }}
+    >
+      <div
+        data-slot="tabs"
+        className={cn('flex flex-col gap-2', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+function TabsList({ className, children, ...props }: TabsListProps) {
+  return (
+    <div
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className
+      )}
+      role="tablist"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+  children: React.ReactNode;
+}
+
+function TabsTrigger({
+  className,
+  value,
+  children,
+  ...props
+}: TabsTriggerProps) {
+  const { activeTab, setActiveTab } = useTabs();
+  const isActive = activeTab === value;
+
+  return (
+    <button
+      data-slot="tabs-trigger"
+      role="tab"
+      aria-selected={isActive}
+      aria-controls={`tabs-content-${value}`}
+      className={cn(
+        'text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+        isActive &&
+          'bg-background dark:bg-input/30 dark:border-input shadow-sm',
+        className
+      )}
+      onClick={() => setActiveTab(value)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+  children: React.ReactNode;
+}
+
+function TabsContent({
+  className,
+  value,
+  children,
+  ...props
+}: TabsContentProps) {
+  const { activeTab } = useTabs();
+
+  if (activeTab !== value) {
+    return null;
+  }
+
+  return (
+    <div
+      data-slot="tabs-content"
+      role="tabpanel"
+      id={`tabs-content-${value}`}
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/graphql/cart.js b/graphql/cart.js
new file mode 100644
index 0000000..1615db1
--- /dev/null
+++ b/graphql/cart.js
@@ -0,0 +1,137 @@
+// Cart Fragment for consistent cart data
+const CartFragment = `
+  fragment CartFragment on Cart {
+    id
+    checkoutUrl
+    totalQuantity
+    cost {
+      subtotalAmount {
+        amount
+        currencyCode
+      }
+      totalAmount {
+        amount
+        currencyCode
+      }
+      totalTaxAmount {
+        amount
+        currencyCode
+      }
+    }
+    lines(first: 100) {
+      edges {
+        node {
+          id
+          quantity
+          cost {
+            totalAmount {
+              amount
+              currencyCode
+            }
+          }
+          merchandise {
+            ... on ProductVariant {
+              id
+              title
+              selectedOptions {
+                name
+                value
+              }
+              price {
+                amount
+                currencyCode
+              }
+              image {
+                id
+                url
+                altText
+                width
+                height
+              }
+              product {
+                id
+                title
+                handle
+                vendor
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+// Create a new cart
+export const CREATE_CART_MUTATION = `
+  ${CartFragment}
+  mutation CreateCart($lines: [CartLineInput!]) {
+    cartCreate(input: { lines: $lines }) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Add lines to cart
+export const ADD_CART_LINES_MUTATION = `
+  ${CartFragment}
+  mutation AddCartLines($cartId: ID!, $lines: [CartLineInput!]!) {
+    cartLinesAdd(cartId: $cartId, lines: $lines) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Update cart lines
+export const UPDATE_CART_LINES_MUTATION = `
+  ${CartFragment}
+  mutation UpdateCartLines($cartId: ID!, $lines: [CartLineUpdateInput!]!) {
+    cartLinesUpdate(cartId: $cartId, lines: $lines) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Remove lines from cart
+export const REMOVE_CART_LINES_MUTATION = `
+  ${CartFragment}
+  mutation RemoveCartLines($cartId: ID!, $lineIds: [ID!]!) {
+    cartLinesRemove(cartId: $cartId, lineIds: $lineIds) {
+      cart {
+        ...CartFragment
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;
+
+// Get cart by ID
+export const GET_CART_QUERY = `
+  ${CartFragment}
+  query GetCart($cartId: ID!) {
+    cart(id: $cartId) {
+      ...CartFragment
+    }
+  }
+`;
diff --git a/graphql/collections.js b/graphql/collections.js
new file mode 100644
index 0000000..4723f02
--- /dev/null
+++ b/graphql/collections.js
@@ -0,0 +1,61 @@
+import { ProductFragment } from '@/graphql/products';
+
+// Get all collections
+export const GET_COLLECTIONS_QUERY = `
+  query GetCollections($first: Int!) {
+    collections(first: $first) {
+      edges {
+        node {
+          id
+          title
+          handle
+          description
+          descriptionHtml
+          image {
+            id
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
+// Get products in a collection
+export const GET_COLLECTION_PRODUCTS_QUERY = `
+  ${ProductFragment}
+  query GetCollectionProducts($handle: String!, $first: Int!, $sortKey: ProductCollectionSortKeys, $reverse: Boolean) {
+    collection(handle: $handle) {
+      id
+      title
+      handle
+      description
+      descriptionHtml
+      image {
+        id
+        url
+        altText
+        width
+        height
+      }
+      products(first: $first, sortKey: $sortKey, reverse: $reverse) {
+        edges {
+          node {
+            ...ProductFragment
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`;
diff --git a/graphql/products.js b/graphql/products.js
new file mode 100644
index 0000000..c1ba95b
--- /dev/null
+++ b/graphql/products.js
@@ -0,0 +1,117 @@
+// Product Fragment for consistent product data
+export const ProductFragment = `
+  fragment ProductFragment on Product {
+    id
+    title
+    handle
+    description
+    descriptionHtml
+    vendor
+    productType
+    tags
+    availableForSale
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    compareAtPriceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+      maxVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    images(first: 10) {
+      edges {
+        node {
+          id
+          url
+          altText
+          width
+          height
+        }
+      }
+    }
+    variants(first: 100) {
+      edges {
+        node {
+          id
+          title
+          availableForSale
+          quantityAvailable
+          selectedOptions {
+            name
+            value
+          }
+          price {
+            amount
+            currencyCode
+          }
+          compareAtPrice {
+            amount
+            currencyCode
+          }
+          image {
+            id
+            url
+            altText
+            width
+            height
+          }
+        }
+      }
+    }
+    options {
+      id
+      name
+      values
+    }
+  }
+`;
+
+// Get multiple products
+export const GET_PRODUCTS_QUERY = `
+  ${ProductFragment}
+  query GetProducts($first: Int!, $query: String, $sortKey: ProductSortKeys, $reverse: Boolean) {
+    products(first: $first, query: $query, sortKey: $sortKey, reverse: $reverse) {
+      edges {
+        node {
+          ...ProductFragment
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+`;
+
+// Get a single product by handle
+export const GET_PRODUCT_QUERY = `
+  ${ProductFragment}
+  query GetProduct($handle: String!) {
+    product(handle: $handle) {
+      ...ProductFragment
+    }
+  }
+`;
+
+// Get product recommendations
+export const QUERY_PRODUCT_RECOMMENDATIONS = `
+  ${ProductFragment}
+  query GetProductRecommendations($productId: ID!) {
+    productRecommendations(productId: $productId) {
+      ...ProductFragment
+    }
+  }
+`;
diff --git a/hooks/use-shopify-cart.ts b/hooks/use-shopify-cart.ts
new file mode 100644
index 0000000..3507b9a
--- /dev/null
+++ b/hooks/use-shopify-cart.ts
@@ -0,0 +1,379 @@
+'use client';
+
+import { create } from 'zustand';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  CREATE_CART_MUTATION,
+  ADD_CART_LINES_MUTATION,
+  UPDATE_CART_LINES_MUTATION,
+  REMOVE_CART_LINES_MUTATION,
+  GET_CART_QUERY,
+} from '@/graphql/cart';
+import { useEffect } from 'react';
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface CartLineInput {
+  merchandiseId: string;
+  quantity: number;
+}
+
+export interface CartLineUpdateInput {
+  id: string;
+  quantity: number;
+}
+
+interface CartLine {
+  id: string;
+  quantity: number;
+  cost: {
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  merchandise: {
+    id: string;
+    title: string;
+    selectedOptions: Array<{
+      name: string;
+      value: string;
+    }>;
+    price: {
+      amount: string;
+      currencyCode: string;
+    };
+    image?: {
+      id: string;
+      url: string;
+      altText?: string;
+      width: number;
+      height: number;
+    };
+    product: {
+      id: string;
+      title: string;
+      handle: string;
+      vendor?: string;
+    };
+  };
+}
+
+export interface Cart {
+  id: string;
+  checkoutUrl: string;
+  totalQuantity: number;
+  cost: {
+    subtotalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalAmount: {
+      amount: string;
+      currencyCode: string;
+    };
+    totalTaxAmount?: {
+      amount: string;
+      currencyCode: string;
+    };
+  };
+  lines: {
+    edges: Array<{
+      node: CartLine;
+    }>;
+  };
+}
+
+// ─── Shopify API functions ───────────────────────────────────────────
+
+async function createCartApi(lines: CartLineInput[] = []): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: CREATE_CART_MUTATION,
+    variables: { lines: lines.length > 0 ? lines : null },
+  });
+
+  if (response.data.cartCreate.userErrors.length > 0) {
+    throw new Error(response.data.cartCreate.userErrors[0].message);
+  }
+
+  return response.data.cartCreate.cart;
+}
+
+async function addCartLinesApi(
+  cartId: string,
+  lines: CartLineInput[]
+): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: ADD_CART_LINES_MUTATION,
+    variables: { cartId, lines },
+  });
+
+  if (response.data.cartLinesAdd.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesAdd.userErrors[0].message);
+  }
+
+  return response.data.cartLinesAdd.cart;
+}
+
+async function updateCartLinesApi(
+  cartId: string,
+  lines: CartLineUpdateInput[]
+): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: UPDATE_CART_LINES_MUTATION,
+    variables: { cartId, lines },
+  });
+
+  if (response.data.cartLinesUpdate.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesUpdate.userErrors[0].message);
+  }
+
+  return response.data.cartLinesUpdate.cart;
+}
+
+async function removeCartLinesApi(
+  cartId: string,
+  lineIds: string[]
+): Promise<Cart> {
+  const response = await shopifyFetch({
+    query: REMOVE_CART_LINES_MUTATION,
+    variables: { cartId, lineIds },
+  });
+
+  if (response.data.cartLinesRemove.userErrors.length > 0) {
+    throw new Error(response.data.cartLinesRemove.userErrors[0].message);
+  }
+
+  return response.data.cartLinesRemove.cart;
+}
+
+async function getCartApi(cartId: string): Promise<Cart | null> {
+  const response = await shopifyFetch({
+    query: GET_CART_QUERY,
+    variables: { cartId },
+  });
+
+  return response.data.cart;
+}
+
+export function redirectToCheckout(checkoutUrl: string): void {
+  if (checkoutUrl) {
+    window.location.href = checkoutUrl;
+  }
+}
+
+// ─── Zustand Store ───────────────────────────────────────────────────
+
+const CART_ID_KEY = 'cartId';
+
+interface CartState {
+  // State
+  isOpen: boolean;
+  cartId: string | null;
+  cart: Cart | null;
+  loading: boolean;
+  error: string | null;
+  _initialized: boolean;
+
+  // Computed (derived in the hook)
+  // items, itemCount, totalAmount, checkoutUrl
+
+  // Actions
+  openCart: () => void;
+  closeCart: () => void;
+  toggleCart: () => void;
+  initCart: () => void;
+  addItem: (variantId: string, quantity?: number) => Promise<Cart>;
+  removeItem: (lineId: string) => Promise<Cart>;
+  updateItemQuantity: (lineId: string, quantity: number) => Promise<Cart>;
+  refreshCart: () => Promise<void>;
+}
+
+export const useCartStore = create<CartState>((set, get) => ({
+  // Initial state
+  isOpen: false,
+  cartId: null,
+  cart: null,
+  loading: true,
+  error: null,
+  _initialized: false,
+
+  // UI actions
+  openCart: () => set({ isOpen: true }),
+  closeCart: () => set({ isOpen: false }),
+  toggleCart: () => set((s) => ({ isOpen: !s.isOpen })),
+
+  // Initialize cart from localStorage
+  initCart: () => {
+    if (get()._initialized) return;
+    set({ _initialized: true });
+
+    if (typeof window === 'undefined') return;
+
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (!storedCartId) {
+      set({ loading: false });
+      return;
+    }
+
+    set({ loading: true });
+    getCartApi(storedCartId)
+      .then((fetchedCart) => {
+        if (fetchedCart) {
+          set({ cart: fetchedCart, cartId: storedCartId, loading: false });
+        } else {
+          localStorage.removeItem(CART_ID_KEY);
+          set({ cartId: null, cart: null, loading: false });
+        }
+      })
+      .catch(() => {
+        localStorage.removeItem(CART_ID_KEY);
+        set({
+          cartId: null,
+          cart: null,
+          loading: false,
+          error: 'Failed to fetch cart',
+        });
+      });
+  },
+
+  // Add item to cart (creates cart if needed)
+  addItem: async (variantId: string, quantity: number = 1) => {
+    try {
+      set({ loading: true, error: null });
+
+      // Get or create cart
+      let currentCartId = get().cartId;
+      if (!currentCartId) {
+        const storedCartId = localStorage.getItem(CART_ID_KEY);
+        if (storedCartId) {
+          currentCartId = storedCartId;
+          set({ cartId: storedCartId });
+        } else {
+          const newCart = await createCartApi();
+          localStorage.setItem(CART_ID_KEY, newCart.id);
+          set({ cart: newCart, cartId: newCart.id });
+          currentCartId = newCart.id;
+        }
+      }
+
+      const updatedCart = await addCartLinesApi(currentCartId, [
+        { merchandiseId: variantId, quantity },
+      ]);
+      set({ cart: updatedCart, loading: false });
+      return updatedCart;
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to add item to cart';
+      set({ error: errorMessage, loading: false });
+      throw err;
+    }
+  },
+
+  // Remove item from cart
+  removeItem: async (lineId: string) => {
+    const { cartId } = get();
+    if (!cartId) throw new Error('No cart exists');
+
+    try {
+      set({ loading: true, error: null });
+      const updatedCart = await removeCartLinesApi(cartId, [lineId]);
+      set({ cart: updatedCart, loading: false });
+      return updatedCart;
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to remove item from cart';
+      set({ error: errorMessage, loading: false });
+      throw err;
+    }
+  },
+
+  // Update item quantity
+  updateItemQuantity: async (lineId: string, quantity: number) => {
+    const { cartId, removeItem } = get();
+    if (!cartId) throw new Error('No cart exists');
+
+    if (quantity <= 0) {
+      return removeItem(lineId);
+    }
+
+    try {
+      set({ loading: true, error: null });
+      const updatedCart = await updateCartLinesApi(cartId, [
+        { id: lineId, quantity },
+      ]);
+      set({ cart: updatedCart, loading: false });
+      return updatedCart;
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to update item quantity';
+      set({ error: errorMessage, loading: false });
+      throw err;
+    }
+  },
+
+  // Refresh cart from Shopify
+  refreshCart: async () => {
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (!storedCartId) {
+      set({ loading: false });
+      return;
+    }
+
+    try {
+      set({ loading: true, error: null });
+      const fetchedCart = await getCartApi(storedCartId);
+      if (fetchedCart) {
+        set({ cart: fetchedCart, cartId: storedCartId, loading: false });
+      } else {
+        localStorage.removeItem(CART_ID_KEY);
+        set({ cartId: null, cart: null, loading: false });
+      }
+    } catch (err) {
+      localStorage.removeItem(CART_ID_KEY);
+      set({
+        cartId: null,
+        cart: null,
+        loading: false,
+        error: 'Failed to fetch cart',
+      });
+    }
+  },
+}));
+
+// ─── Hook (backwards-compatible API) ─────────────────────────────────
+
+export function useShopifyCart() {
+  const store = useCartStore();
+
+  // Initialize cart safely in an effect, not during render
+  useEffect(() => {
+    if (!store._initialized) {
+      store.initCart();
+    }
+  }, []);
+
+  const items = store.cart?.lines?.edges?.map((edge) => edge.node) ?? [];
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  const totalAmount = parseFloat(store.cart?.cost?.totalAmount?.amount ?? '0');
+  const checkoutUrl = store.cart?.checkoutUrl ?? null;
+
+  return {
+    isOpen: store.isOpen,
+    openCart: store.openCart,
+    closeCart: store.closeCart,
+    toggleCart: store.toggleCart,
+    cartId: store.cartId,
+    cart: store.cart,
+    items,
+    itemCount,
+    totalAmount,
+    checkoutUrl,
+    loading: store.loading,
+    error: store.error,
+    addItem: store.addItem,
+    removeItem: store.removeItem,
+    updateItemQuantity: store.updateItemQuantity,
+    refreshCart: store.refreshCart,
+  };
+}
diff --git a/hooks/use-shopify-collections.ts b/hooks/use-shopify-collections.ts
new file mode 100644
index 0000000..5d39dea
--- /dev/null
+++ b/hooks/use-shopify-collections.ts
@@ -0,0 +1,127 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  GET_COLLECTIONS_QUERY,
+  GET_COLLECTION_PRODUCTS_QUERY,
+} from '@/graphql/collections';
+import type { Product } from '@/hooks/use-shopify-products';
+
+interface CollectionImage {
+  url: string;
+  altText?: string;
+}
+
+export interface Collection {
+  id: string;
+  title: string;
+  handle: string;
+  description?: string;
+  descriptionHtml?: string;
+  image?: CollectionImage;
+}
+
+export interface CollectionWithProducts extends Collection {
+  products: Product[];
+}
+
+interface UseCollectionProductsOptions {
+  first?: number;
+  sortKey?: 'BEST_SELLING' | 'CREATED' | 'PRICE' | 'TITLE';
+  reverse?: boolean;
+}
+
+// Fetch all collections
+export async function getCollections(first = 50): Promise<Collection[]> {
+  const response = await shopifyFetch({
+    query: GET_COLLECTIONS_QUERY,
+    variables: { first },
+  });
+
+  return response.data.collections.edges.map((edge: { node: Collection }) => edge.node);
+}
+
+// Fetch products in a collection by handle
+export async function getCollectionProducts(
+  handle: string,
+  { first = 50, sortKey = 'BEST_SELLING', reverse = false }: UseCollectionProductsOptions = {}
+): Promise<CollectionWithProducts | null> {
+  const response = await shopifyFetch({
+    query: GET_COLLECTION_PRODUCTS_QUERY,
+    variables: { handle, first, sortKey, reverse },
+  });
+
+  const collection = response.data.collection;
+  if (!collection) return null;
+
+  return {
+    ...collection,
+    products: collection.products.edges.map((edge: { node: Product }) => edge.node),
+  };
+}
+
+// Hook for fetching all collections
+export function useCollections(first = 50) {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollections = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getCollections(first);
+      setCollections(data);
+    } catch (err) {
+      console.error('Error fetching collections:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load collections');
+    } finally {
+      setLoading(false);
+    }
+  }, [first]);
+
+  useEffect(() => {
+    fetchCollections();
+  }, [fetchCollections]);
+
+  return { collections, loading, error, refetch: fetchCollections };
+}
+
+// Hook for fetching products in a collection
+export function useCollectionProducts(
+  handle: string | null,
+  options: UseCollectionProductsOptions = {}
+) {
+  const [collection, setCollection] = useState<CollectionWithProducts | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchCollection = useCallback(async () => {
+    if (!handle) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getCollectionProducts(handle, options);
+      setCollection(data);
+      if (!data) {
+        setError('Collection not found');
+      }
+    } catch (err) {
+      console.error('Error fetching collection products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load collection');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle, options.first, options.sortKey, options.reverse]);
+
+  useEffect(() => {
+    fetchCollection();
+  }, [fetchCollection]);
+
+  return { collection, loading, error, refetch: fetchCollection };
+}
diff --git a/hooks/use-shopify-products.ts b/hooks/use-shopify-products.ts
new file mode 100644
index 0000000..d0ce0a3
--- /dev/null
+++ b/hooks/use-shopify-products.ts
@@ -0,0 +1,205 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { shopifyFetch } from '@/services/shopify/client';
+import {
+  GET_PRODUCTS_QUERY,
+  GET_PRODUCT_QUERY,
+  QUERY_PRODUCT_RECOMMENDATIONS,
+} from '@/graphql/products';
+
+interface ProductImage {
+  url: string;
+  altText?: string;
+}
+
+interface ProductPrice {
+  amount: string;
+  currencyCode: string;
+}
+
+interface ProductVariant {
+  id: string;
+  title: string;
+  price: ProductPrice;
+  availableForSale: boolean;
+  selectedOptions: Array<{
+    name: string;
+    value: string;
+  }>;
+  image?: ProductImage;
+}
+
+interface ProductOption {
+  id: string;
+  name: string;
+  values: string[];
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  description?: string;
+  descriptionHtml?: string;
+  handle: string;
+  images: {
+    edges: Array<{
+      node: ProductImage;
+    }>;
+  };
+  priceRange: {
+    minVariantPrice: ProductPrice;
+  };
+  compareAtPriceRange?: {
+    minVariantPrice: ProductPrice;
+  };
+  variants: {
+    edges: Array<{
+      node: ProductVariant;
+    }>;
+  };
+  options: ProductOption[];
+}
+
+interface UseProductsOptions {
+  first?: number;
+  query?: string;
+  sortKey?: 'BEST_SELLING' | 'CREATED_AT' | 'PRICE' | 'TITLE';
+  reverse?: boolean;
+}
+
+interface UseProductsReturn {
+  products: Product[];
+  loading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+}
+
+// Fetch multiple products
+export async function getProducts({
+  first = 20,
+  query = '',
+  sortKey = 'BEST_SELLING',
+  reverse = false,
+}: UseProductsOptions = {}): Promise<Product[]> {
+  const response = await shopifyFetch({
+    query: GET_PRODUCTS_QUERY,
+    variables: { first, query, sortKey, reverse },
+  });
+
+  return response.data.products.edges.map((edge: { node: Product }) => edge.node);
+}
+
+// Fetch a single product by handle
+export async function getProduct(handle: string): Promise<Product | null> {
+  const response = await shopifyFetch({
+    query: GET_PRODUCT_QUERY,
+    variables: { handle },
+  });
+
+  return response.data.product;
+}
+
+// Fetch product recommendations
+export async function getProductRecommendations(productId: string): Promise<Product[]> {
+  const response = await shopifyFetch({
+    query: QUERY_PRODUCT_RECOMMENDATIONS,
+    variables: { productId },
+  });
+
+  return response.data.productRecommendations || [];
+}
+
+// Hook for fetching multiple products
+export function useProducts(options: UseProductsOptions = {}): UseProductsReturn {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchProducts = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProducts(options);
+      setProducts(data);
+    } catch (err) {
+      console.error('Error fetching products:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load products');
+    } finally {
+      setLoading(false);
+    }
+  }, [options.first, options.query, options.sortKey, options.reverse]);
+
+  useEffect(() => {
+    fetchProducts();
+  }, [fetchProducts]);
+
+  return { products, loading, error, refetch: fetchProducts };
+}
+
+// Hook for fetching a single product
+export function useProduct(handle: string | null) {
+  const [product, setProduct] = useState<Product | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchProduct = useCallback(async () => {
+    if (!handle) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProduct(handle);
+      setProduct(data);
+      if (!data) {
+        setError('Product not found');
+      }
+    } catch (err) {
+      console.error('Error fetching product:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load product');
+    } finally {
+      setLoading(false);
+    }
+  }, [handle]);
+
+  useEffect(() => {
+    fetchProduct();
+  }, [fetchProduct]);
+
+  return { product, loading, error, refetch: fetchProduct };
+}
+
+// Hook for fetching product recommendations
+export function useProductRecommendations(productId: string | null) {
+  const [recommendations, setRecommendations] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchRecommendations = useCallback(async () => {
+    if (!productId) {
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await getProductRecommendations(productId);
+      setRecommendations(data);
+    } catch (err) {
+      console.error('Error fetching recommendations:', err);
+      setError(err instanceof Error ? err.message : 'Failed to load recommendations');
+    } finally {
+      setLoading(false);
+    }
+  }, [productId]);
+
+  useEffect(() => {
+    fetchRecommendations();
+  }, [fetchRecommendations]);
+
+  return { recommendations, loading, error, refetch: fetchRecommendations };
+}
diff --git a/instrumentation.ts b/instrumentation.ts
new file mode 100644
index 0000000..51a45f3
--- /dev/null
+++ b/instrumentation.ts
@@ -0,0 +1 @@
+export function register() {}
\ No newline at end of file
diff --git a/lib/cloud.ts b/lib/cloud.ts
new file mode 100644
index 0000000..cb3b1a0
--- /dev/null
+++ b/lib/cloud.ts
@@ -0,0 +1,7 @@
+// Server-only config for the Frontend Cloud proxy routes.
+// The API key lives here (read from a non-public env var) so it is never
+// shipped to the browser bundle.
+
+export const CLOUD_BASE = "https://cloud.frontend.co";
+
+export const FRONTEND_API_KEY = process.env.FRONTEND_API_KEY ?? "";
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..0225e59
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,12 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function truncate(str: string, maxLength: number): string {
+  if (!str) return '';
+  if (str.length <= maxLength) return str;
+  return str.slice(0, maxLength).trim() + '...';
+}
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..abcf060
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,33 @@
+export default {
+  reactStrictMode: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: { 
+    unoptimized: true,
+    remotePatterns: [
+    {
+      protocol: 'https',
+      hostname: 'images.unsplash.com',
+    },
+    {
+      protocol: 'https',
+      hostname: 'cdn.shopify.com',
+    },
+    {
+      protocol: 'https',
+      hostname: '**.frontend.co',
+    },
+  ], 
+  }, 
+  experimental: { 
+    reactDebugChannel: false 
+  }, 
+  webpack: (config, { isServer }) => { 
+    config.cache = { type: "memory" }; 
+    if (isServer) { 
+      config.optimization = config.optimization || {}; 
+      config.optimization.splitChunks = false; 
+    } return config; 
+  } 
+};
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..f81fe9b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+    "name": "nextjs-app",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "next dev --webpack",
+        "build": "next build --webpack",
+        "start": "next start"
+    },
+    "version": "0.0.0",
+    "dependencies": {
+        "@next/swc-wasm-web": "16.2.10",
+        "@remixicon/react": "^4.9.0",
+        "@shopify/storefront-api-client": "^1.0.0",
+        "@supabase/supabase-js": "^2.51.0",
+        "class-variance-authority": "0.7.1",
+        "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.6.0",
+        "framer-motion": "12.42.2",
+        "input-otp": "^1.4.2",
+        "lucide-react": "^0.562.0",
+        "motion": "^12.23.26",
+        "next": "16.2.10",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "sonner": "^2.0.7",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4",
+        "tw-animate-css": "1.4.0",
+        "zustand": "^5.0.11"
+    },
+    "devDependencies": {
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "^22",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "typescript": "^5.7.3"
+    },
+    "packageManager": "yarn@4.18.0+sha512.fcb8716fe7cd0eece141ffc18b92193a9df9204c1ba83189c288835223fc0bbe64af473bab0d5e9927a7daeb5caf2bb07eb2787cc9338ca040ea125f2a1f2f7e"
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..7ec6819
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default { 
+  plugins: { 
+    '@tailwindcss/postcss': {} 
+  } 
+};
\ No newline at end of file
diff --git a/services/shopify/client.js b/services/shopify/client.js
new file mode 100644
index 0000000..318248e
--- /dev/null
+++ b/services/shopify/client.js
@@ -0,0 +1,48 @@
+// Shopify Storefront API Service
+const SHOPIFY_STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN;
+const SHOPIFY_STOREFRONT_ACCESS_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+const SHOPIFY_API_VERSION = process.env.NEXT_PUBLIC_SHOPIFY_API_VERSION || '2025-07';
+const SHOPIFY_STOREFRONT_API_URL = `https://${SHOPIFY_STORE_DOMAIN}/api/${SHOPIFY_API_VERSION}/graphql.json`;
+
+// Shopify API request with optional access token
+async function shopifyFetch({ query, variables = {} }) {
+  try {
+    const headers = {
+      'Content-Type': 'application/json',
+    };
+
+    // Add access token if available
+    if (SHOPIFY_STOREFRONT_ACCESS_TOKEN) {
+      headers['X-Shopify-Storefront-Access-Token'] = SHOPIFY_STOREFRONT_ACCESS_TOKEN;
+    }
+
+    const response = await fetch(SHOPIFY_STOREFRONT_API_URL, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({
+        query,
+        variables,
+      }),
+      cache: 'no-store', // Ensure fresh data for cart operations
+    });
+
+    if (!response.ok) {
+      const errorBody = await response.text();
+      throw new Error(`Shopify API HTTP error! Status: ${response.status}, Body: ${errorBody}`);
+    }
+
+    const json = await response.json();
+
+    if (json.errors) {
+      console.error('Shopify API errors:', json.errors);
+      throw new Error(`Shopify GraphQL errors: ${JSON.stringify(json.errors)}`);
+    }
+
+    return json;
+  } catch (error) {
+    console.error('Shopify fetch error:', error);
+    throw error;
+  }
+}
+
+export { shopifyFetch, SHOPIFY_STORE_DOMAIN, SHOPIFY_STOREFRONT_API_URL };
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e7ff3a2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..5b6bdf2
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,1401 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 10
+  cacheKey: 10c0
+
+"@alloc/quick-lru@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "@alloc/quick-lru@npm:5.2.0"
+  checksum: 10c0/7b878c48b9d25277d0e1a9b8b2f2312a314af806b4129dc902f2bc29ab09b58236e53964689feec187b28c80d2203aff03829754773a707a8a5987f1b7682d92
+  languageName: node
+  linkType: hard
+
+"@emnapi/core@npm:^1.11.1":
+  version: 1.11.3
+  resolution: "@emnapi/core@npm:1.11.3"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.2.3"
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/4ca08d349a82d5d2887ccc9e12df630877b0412ddcd59b9faee61e3c3947ccead27a18257a18bfe17abdf2b0709857808ad75d423ac49edd50c32fb140a7ed6e
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:^1.11.1, @emnapi/runtime@npm:^1.7.0":
+  version: 1.11.3
+  resolution: "@emnapi/runtime@npm:1.11.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/a00f1020fefb9d4145c367f93a9fddb383a00da8ffd7871e20b19659890379b83aeecb9f84d7d0eda5456343f4a09eb05b0acb5153b0d3d889539dedb1ed87c3
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.2.3, @emnapi/wasi-threads@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "@emnapi/wasi-threads@npm:1.2.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/5aed84bc5dbe867973b20406ca1ed95661a4892ecaef80378fdf2d37424b3f7b9c428df8a3e1d82b783a3345a530032bf049e699e1f113ea52203c3e9b4e6ce5
+  languageName: node
+  linkType: hard
+
+"@img/colour@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "@img/colour@npm:1.1.0"
+  checksum: 10c0/2ebea2c0bbaee73b99badcefa04e1e71d83f36e5369337d3121dca841f4569533c4e2faddda6d62dd247f0d5cca143711f9446c59bcce81e427ba433a7a94a17
+  languageName: node
+  linkType: hard
+
+"@img/sharp-darwin-arm64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-darwin-arm64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-arm64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-darwin-x64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-darwin-x64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-darwin-x64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-arm64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.2.4"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-darwin-x64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-darwin-x64@npm:1.2.4"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linux-arm64@npm:1.2.4"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-arm@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linux-arm@npm:1.2.4"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-ppc64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linux-ppc64@npm:1.2.4"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-riscv64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linux-riscv64@npm:1.2.4"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-s390x@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linux-s390x@npm:1.2.4"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linux-x64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linux-x64@npm:1.2.4"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-arm64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.2.4"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-libvips-linuxmusl-x64@npm:1.2.4":
+  version: 1.2.4
+  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.2.4"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linux-arm64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-arm@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linux-arm@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linux-arm": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-ppc64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linux-ppc64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linux-ppc64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-ppc64":
+      optional: true
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-riscv64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linux-riscv64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linux-riscv64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-riscv64":
+      optional: true
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-s390x@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linux-s390x@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linux-s390x": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linux-x64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linux-x64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linux-x64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-arm64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linuxmusl-arm64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-linuxmusl-x64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-linuxmusl-x64@npm:0.34.5"
+  dependencies:
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.2.4"
+  dependenciesMeta:
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@img/sharp-wasm32@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-wasm32@npm:0.34.5"
+  dependencies:
+    "@emnapi/runtime": "npm:^1.7.0"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-arm64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-win32-arm64@npm:0.34.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-ia32@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-win32-ia32@npm:0.34.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@img/sharp-win32-x64@npm:0.34.5":
+  version: 0.34.5
+  resolution: "@img/sharp-win32-x64@npm:0.34.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.13
+  resolution: "@jridgewell/gen-mapping@npm:0.3.13"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10c0/9a7d65fb13bd9aec1fbab74cda08496839b7e2ceb31f5ab922b323e94d7c481ce0fc4fd7e12e2610915ed8af51178bdc61e168e92a8c8b8303b030b03489b13b
+  languageName: node
+  linkType: hard
+
+"@jridgewell/remapping@npm:^2.3.5":
+  version: 2.3.5
+  resolution: "@jridgewell/remapping@npm:2.3.5"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10c0/3de494219ffeb2c5c38711d0d7bb128097edf91893090a2dbc8ee0b55d092bb7347b1fd0f478486c5eab010e855c73927b1666f2107516d472d24a73017d1194
+  languageName: node
+  linkType: hard
+
+"@jridgewell/resolve-uri@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
+  checksum: 10c0/d502e6fb516b35032331406d4e962c21fe77cdf1cbdb49c6142bcbd9e30507094b18972778a6e27cbad756209cfe34b1a27729e6fa08a2eb92b33943f680cf1e
+  languageName: node
+  linkType: hard
+
+"@jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0, @jridgewell/sourcemap-codec@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
+  checksum: 10c0/f9e538f302b63c0ebc06eecb1dd9918dd4289ed36147a0ddce35d6ea4d7ebbda243cda7b2213b6a5e1d8087a298d5cf630fb2bd39329cdecb82017023f6081a0
+  languageName: node
+  linkType: hard
+
+"@jridgewell/trace-mapping@npm:^0.3.24":
+  version: 0.3.31
+  resolution: "@jridgewell/trace-mapping@npm:0.3.31"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10c0/4b30ec8cd56c5fd9a661f088230af01e0c1a3888d11ffb6b47639700f71225be21d1f7e168048d6d4f9449207b978a235c07c8f15c07705685d16dc06280e9d9
+  languageName: node
+  linkType: hard
+
+"@napi-rs/wasm-runtime@npm:^1.1.4":
+  version: 1.2.1
+  resolution: "@napi-rs/wasm-runtime@npm:1.2.1"
+  dependencies:
+    "@tybys/wasm-util": "npm:^0.10.3"
+  peerDependencies:
+    "@emnapi/core": ^1.7.1 || ^2.0.0-alpha.3
+    "@emnapi/runtime": ^1.7.1 || ^2.0.0-alpha.3
+  checksum: 10c0/33532973e573e566536b9c342caea85a504e1e6332d1dc6aeb55de4b476dea215db271ce0c1e044d0ddc121ef9ef9caec8654c8937c9f5330db4f0051e9ff8d1
+  languageName: node
+  linkType: hard
+
+"@next/env@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/env@npm:16.2.10"
+  checksum: 10c0/712d2aaa313e133c86103772015da2393e1d68092b55ac4c8842d5b7205d2152acf2098eaed5137e39979ad0c26dd951e82bc3ab43c2beb33a4f88498051d574
+  languageName: node
+  linkType: hard
+
+"@next/swc-darwin-arm64@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-darwin-arm64@npm:16.2.10"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@next/swc-darwin-x64@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-darwin-x64@npm:16.2.10"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-arm64-gnu@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-linux-arm64-gnu@npm:16.2.10"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-arm64-musl@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-linux-arm64-musl@npm:16.2.10"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-x64-gnu@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-linux-x64-gnu@npm:16.2.10"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@next/swc-linux-x64-musl@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-linux-x64-musl@npm:16.2.10"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@next/swc-wasm-web@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-wasm-web@npm:16.2.10"
+  checksum: 10c0/cec051e5e167951f558d00109abd8dc9a9ebacbf3946033add2fa9ba9f2c1775e9f64c32c812cad23dfc6ee00cb1d4f93b4e4416358cd2f124058e53a7ade4ac
+  languageName: node
+  linkType: hard
+
+"@next/swc-win32-arm64-msvc@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-win32-arm64-msvc@npm:16.2.10"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@next/swc-win32-x64-msvc@npm:16.2.10":
+  version: 16.2.10
+  resolution: "@next/swc-win32-x64-msvc@npm:16.2.10"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@remixicon/react@npm:^4.9.0":
+  version: 4.9.0
+  resolution: "@remixicon/react@npm:4.9.0"
+  peerDependencies:
+    react: ">=18.2.0"
+  checksum: 10c0/91bbadb677f45cf8b6687fdf9d273511fddb4e862f1da6c11bc7932acb578bcb26ae5b9e1eb62143a4e916b71797739a36d689866d5b0949f0f0f22c1684cb96
+  languageName: node
+  linkType: hard
+
+"@shopify/graphql-client@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@shopify/graphql-client@npm:1.4.2"
+  checksum: 10c0/f18d898ec3fb12a819b6c2941d9ddaebd1ab7152ffe55450ab9255c11860de9422ba1e9eadee5f44ef314f664fe411c642ba3debd6671851b9cdc647eb85e0be
+  languageName: node
+  linkType: hard
+
+"@shopify/storefront-api-client@npm:^1.0.0":
+  version: 1.0.10
+  resolution: "@shopify/storefront-api-client@npm:1.0.10"
+  dependencies:
+    "@shopify/graphql-client": "npm:^1.4.2"
+  checksum: 10c0/e8eff260e91857e87cffb543ca57c8a4a6e549316e0b6ccef2c345b857ef59e4092e92ecd2904706aa386bca1d21af4ef3e7447f9966b8dcceda06b3ad7dadc9
+  languageName: node
+  linkType: hard
+
+"@supabase/auth-js@npm:2.111.0":
+  version: 2.111.0
+  resolution: "@supabase/auth-js@npm:2.111.0"
+  dependencies:
+    tslib: "npm:2.8.1"
+  checksum: 10c0/665f05b4a78f021e39d16fffce1b7759a77413388d9849a68ffe4da79e76db709fe12e2f8bd464bda97d82e92257f25916e694365dfa7cb81f29d84be6d09af9
+  languageName: node
+  linkType: hard
+
+"@supabase/functions-js@npm:2.111.0":
+  version: 2.111.0
+  resolution: "@supabase/functions-js@npm:2.111.0"
+  dependencies:
+    tslib: "npm:2.8.1"
+  checksum: 10c0/00211a3e96eb1de2dcb501fe3d1565fa95441141477df3b56f3284c6247f0fe62e413ab0edf35c0505e5f5701a4c1d1d4cbf7c5301366b211d75b02cdef2b1a8
+  languageName: node
+  linkType: hard
+
+"@supabase/phoenix@npm:0.4.5":
+  version: 0.4.5
+  resolution: "@supabase/phoenix@npm:0.4.5"
+  checksum: 10c0/33be3994c870eb3a5f89d3bf6d57783a14f49f710b15e852f85c9750b45f3db5a637b30f7046474fa88f40cce50620e3bce18a27d9819ae16be792776bbfeb9c
+  languageName: node
+  linkType: hard
+
+"@supabase/postgrest-js@npm:2.111.0":
+  version: 2.111.0
+  resolution: "@supabase/postgrest-js@npm:2.111.0"
+  dependencies:
+    tslib: "npm:2.8.1"
+  checksum: 10c0/205e804a285183321102a5eb33160f86818c0592a1ef2df326ad3701a71d23a4f2c44059942458d1f3373d2a92d9f4b4731e292c69f7af0fca8d4ade0bf81e7c
+  languageName: node
+  linkType: hard
+
+"@supabase/realtime-js@npm:2.111.0":
+  version: 2.111.0
+  resolution: "@supabase/realtime-js@npm:2.111.0"
+  dependencies:
+    "@supabase/phoenix": "npm:0.4.5"
+    tslib: "npm:2.8.1"
+  checksum: 10c0/c1ed1e1dd3f995ef9b19292b6c324c83354873d80f6ad85c97ef84f773943594722a5a4d6dc54a882047d91e2b789b374310396b76c21fc824ad85dc93904684
+  languageName: node
+  linkType: hard
+
+"@supabase/storage-js@npm:2.111.0":
+  version: 2.111.0
+  resolution: "@supabase/storage-js@npm:2.111.0"
+  dependencies:
+    iceberg-js: "npm:^0.8.1"
+    tslib: "npm:2.8.1"
+  checksum: 10c0/8b14ab6e287993563eec374f653b340afc73d88e941426826bfc849cdcfd1f9b6bde9346013370c6bf130d520a605d5e85ff64d056de6d9505ac0425800056ed
+  languageName: node
+  linkType: hard
+
+"@supabase/supabase-js@npm:^2.51.0":
+  version: 2.111.0
+  resolution: "@supabase/supabase-js@npm:2.111.0"
+  dependencies:
+    "@supabase/auth-js": "npm:2.111.0"
+    "@supabase/functions-js": "npm:2.111.0"
+    "@supabase/postgrest-js": "npm:2.111.0"
+    "@supabase/realtime-js": "npm:2.111.0"
+    "@supabase/storage-js": "npm:2.111.0"
+  checksum: 10c0/a000947ef4b9001be34fe313ffc7eb79249fae765e695992f1e550a525fedd0fac17bb544acb31ee750ba8d303afa610d33ec2cd0d7251363810649503f17239
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:0.5.15":
+  version: 0.5.15
+  resolution: "@swc/helpers@npm:0.5.15"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: 10c0/33002f74f6f885f04c132960835fdfc474186983ea567606db62e86acd0680ca82f34647e8e610f4e1e422d1c16fce729dde22cd3b797ab1fd9061a825dabca4
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/node@npm:4.3.3"
+  dependencies:
+    "@jridgewell/remapping": "npm:^2.3.5"
+    enhanced-resolve: "npm:^5.24.1"
+    jiti: "npm:^2.7.0"
+    lightningcss: "npm:1.32.0"
+    magic-string: "npm:^0.30.21"
+    source-map-js: "npm:^1.2.1"
+    tailwindcss: "npm:4.3.3"
+  checksum: 10c0/0123669be5b3e78d42b0e10cb34d547fb8574c8e7dc7a97a141c8a4ab4215852b5b1b99b97763e898e1da1493ee8424cb72e28225cc4876828c95156f94d7f0e
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.3.3"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.3.3"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.3.3"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.3.3"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.3.3"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.3.3"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.3.3"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.3.3"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.3.3"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.3.3"
+  dependencies:
+    "@emnapi/core": "npm:^1.11.1"
+    "@emnapi/runtime": "npm:^1.11.1"
+    "@emnapi/wasi-threads": "npm:^1.2.2"
+    "@napi-rs/wasm-runtime": "npm:^1.1.4"
+    "@tybys/wasm-util": "npm:^0.10.2"
+    tslib: "npm:^2.8.1"
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.3.3"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.3.3"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.3.3":
+  version: 4.3.3
+  resolution: "@tailwindcss/oxide@npm:4.3.3"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.3.3"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.3.3"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.3.3"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.3.3"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.3.3"
+    "@tailwindcss/oxide-wasm32-wasi": "npm:4.3.3"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.3.3"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.3.3"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10c0/6c38b25226dad252347451ed8953a998432b51f1e068b25e021215b886ccf8bcf3af58faf5f4ab50368091e657ca2fa341df1deca6101651eddb567122f2acb5
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/postcss@npm:^4":
+  version: 4.3.3
+  resolution: "@tailwindcss/postcss@npm:4.3.3"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    "@tailwindcss/node": "npm:4.3.3"
+    "@tailwindcss/oxide": "npm:4.3.3"
+    postcss: "npm:^8.5.16"
+    tailwindcss: "npm:4.3.3"
+  checksum: 10c0/50b33643a4ba50c0d2ea0fd769d16072b0b3d2f31180df667fe5ad4ef60464b5f00931cfd5f2de2116a91219edb7a2dbd4c073b5c2f23393eab6ef1163db8dbf
+  languageName: node
+  linkType: hard
+
+"@tybys/wasm-util@npm:^0.10.2, @tybys/wasm-util@npm:^0.10.3":
+  version: 0.10.3
+  resolution: "@tybys/wasm-util@npm:0.10.3"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/fd2bd2a79c6cd8c79ed1cf7a0fa375c64589264c88a27acaf9756d556b453ea222b62a4f68dd2fbb8b3a78b6bab3b1f4fb2431b6afc6aeda8344b53a521a1cd3
+  languageName: node
+  linkType: hard
+
+"@types/node@npm:^22":
+  version: 22.20.1
+  resolution: "@types/node@npm:22.20.1"
+  dependencies:
+    undici-types: "npm:~6.21.0"
+  checksum: 10c0/f2ba54d3d1fb92e1c57c78d32c3a17655b1e87363b707136f55c422b4838d4054901ce5d27f75bb0e5ecb7ebfee3804e0987822d22b473473008091857a09353
+  languageName: node
+  linkType: hard
+
+"@types/react-dom@npm:^19":
+  version: 19.2.4
+  resolution: "@types/react-dom@npm:19.2.4"
+  peerDependencies:
+    "@types/react": ^19.2.0
+  checksum: 10c0/b7d854ce17bb51a3a067168268a90f0123d10dc490f63f1ff5409f07ac715febeb8f5b7b473404a9d437106571e0312fc2937a945634d590abfc9aa46a14b01b
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:^19":
+  version: 19.2.18
+  resolution: "@types/react@npm:19.2.18"
+  dependencies:
+    csstype: "npm:^3.2.2"
+  checksum: 10c0/d04216172b4b4362b310017c210dfbe019fb4f4e7dffd0313e70b3acb3051d5c3e76e7e84e3cf4c6a3c824993ffadfe3949e589a6398a09d4200e7670e2962de
+  languageName: node
+  linkType: hard
+
+"baseline-browser-mapping@npm:^2.9.19":
+  version: 2.11.8
+  resolution: "baseline-browser-mapping@npm:2.11.8"
+  bin:
+    baseline-browser-mapping: dist/cli.cjs
+  checksum: 10c0/4fd0ba04e96d9139827eb0aed4b086c789ca9062877a17946b7b51a5be5959412c4919d6c017ad8d233445cbef48716e409e0256326b789a435c699e4c5c7a49
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001579":
+  version: 1.0.30001806
+  resolution: "caniuse-lite@npm:1.0.30001806"
+  checksum: 10c0/9442c8afff0968e9b2ce0104a7340c1ce4a5c09f469ccb9eef10d25712ea0afe542486e5318c697c70dd502f988cfc04eaa1c9438c92ac3bcf4d708a2a17bee1
+  languageName: node
+  linkType: hard
+
+"class-variance-authority@npm:0.7.1":
+  version: 0.7.1
+  resolution: "class-variance-authority@npm:0.7.1"
+  dependencies:
+    clsx: "npm:^2.1.1"
+  checksum: 10c0/0f438cea22131808b99272de0fa933c2532d5659773bfec0c583de7b3f038378996d3350683426b8e9c74a6286699382106d71fbec52f0dd5fbb191792cccb5b
+  languageName: node
+  linkType: hard
+
+"client-only@npm:0.0.1":
+  version: 0.0.1
+  resolution: "client-only@npm:0.0.1"
+  checksum: 10c0/9d6cfd0c19e1c96a434605added99dff48482152af791ec4172fb912a71cff9027ff174efd8cdb2160cc7f377543e0537ffc462d4f279bc4701de3f2a3c4b358
+  languageName: node
+  linkType: hard
+
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
+  languageName: node
+  linkType: hard
+
+"csstype@npm:^3.2.2":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
+  languageName: node
+  linkType: hard
+
+"detect-libc@npm:^2.0.3, detect-libc@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "detect-libc@npm:2.1.2"
+  checksum: 10c0/acc675c29a5649fa1fb6e255f993b8ee829e510b6b56b0910666949c80c364738833417d0edb5f90e4e46be17228b0f2b66a010513984e18b15deeeac49369c4
+  languageName: node
+  linkType: hard
+
+"embla-carousel-react@npm:^8.6.0":
+  version: 8.6.0
+  resolution: "embla-carousel-react@npm:8.6.0"
+  dependencies:
+    embla-carousel: "npm:8.6.0"
+    embla-carousel-reactive-utils: "npm:8.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/461b0c427a6fca62e730c7b39d08e9c55b01a2138c173d5b9ebf77ec92092a900b45ac384731c77382b48d5d65946994d3abba6e9899a66d6e16f8ddf191ed1c
+  languageName: node
+  linkType: hard
+
+"embla-carousel-reactive-utils@npm:8.6.0":
+  version: 8.6.0
+  resolution: "embla-carousel-reactive-utils@npm:8.6.0"
+  peerDependencies:
+    embla-carousel: 8.6.0
+  checksum: 10c0/33d07e6df4d8dec9b4fc95858838ea2d5e5df078039c05b2a342c05ba4979d8d18564a1c607da445fed744daf969a0b5a90124ce487a854e86ced6f0458b51e9
+  languageName: node
+  linkType: hard
+
+"embla-carousel@npm:8.6.0":
+  version: 8.6.0
+  resolution: "embla-carousel@npm:8.6.0"
+  checksum: 10c0/f4c598e7be28b70340d31ffd2bebb2472db370b0c81d9b089bf9555cf618695f35dc4a0694565c994c9ab972731123063f945aa09ff485df0df761d79c6a08ef
+  languageName: node
+  linkType: hard
+
+"enhanced-resolve@npm:^5.24.1":
+  version: 5.24.5
+  resolution: "enhanced-resolve@npm:5.24.5"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.3.3"
+  checksum: 10c0/76c32ce5485ecea0ef808c9289bc6f7c49ce85142943598d89a23a846f2909556d3dc6db97a007442a48c185baad5514c1c76d20a2656497f9511d13ccfab73b
+  languageName: node
+  linkType: hard
+
+"framer-motion@npm:12.42.2":
+  version: 12.42.2
+  resolution: "framer-motion@npm:12.42.2"
+  dependencies:
+    motion-dom: "npm:^12.42.2"
+    motion-utils: "npm:^12.39.0"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/2e514e0e303c0c01bc7d6a1028f7722ec17fc307922c6770a8dc5f7782521c60254f9c265329b887a29b32e2c730742328ecae468be626406afa5db1e6c0aa01
+  languageName: node
+  linkType: hard
+
+"framer-motion@npm:^12.43.0":
+  version: 12.43.0
+  resolution: "framer-motion@npm:12.43.0"
+  dependencies:
+    motion-dom: "npm:^12.43.0"
+    motion-utils: "npm:^12.39.0"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/cce3c1daf8f53da4d9299e6bdd2a1e9f08a30e13d84ce1e468cf25285f9ec2a900c812e0aa3dce79e7453a2a3cf328a717451beef9bf0a6175a3d3794116e36a
+  languageName: node
+  linkType: hard
+
+"graceful-fs@npm:^4.2.4":
+  version: 4.2.11
+  resolution: "graceful-fs@npm:4.2.11"
+  checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
+  languageName: node
+  linkType: hard
+
+"iceberg-js@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "iceberg-js@npm:0.8.1"
+  checksum: 10c0/e504da64cc26e8ad7c5344353a7203c671a740c14eb6086f20505f5e9739cab774493e616032530c962df97f2a855115cc2e89a47dd81581df5917b21a69ec48
+  languageName: node
+  linkType: hard
+
+"input-otp@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "input-otp@npm:1.4.2"
+  peerDependencies:
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/d3a3216a75ed832993f3f2852edd7a85c5bae30ea6d251182119120488bbf9fed7cfdd91819bcee6daff57b3cfcbca94fd16d6a7c92cee4d806c0d4fa6ff1128
+  languageName: node
+  linkType: hard
+
+"jiti@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "jiti@npm:2.7.0"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 10c0/1b1e2310a490dce1aeea3da5f5dfe18273516c20ce48be2e98eb8ea452d5f3dcc8fd0cfd6d28b4052a24c5dbab6e3089b2d7e79f0bce7915b10d750929563c42
+  languageName: node
+  linkType: hard
+
+"lightningcss-android-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-android-arm64@npm:1.32.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-arm64@npm:1.32.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-darwin-x64@npm:1.32.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-freebsd-x64@npm:1.32.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.32.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.32.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-arm64-musl@npm:1.32.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-gnu@npm:1.32.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-linux-x64-musl@npm:1.32.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.32.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss-win32-x64-msvc@npm:1.32.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.32.0":
+  version: 1.32.0
+  resolution: "lightningcss@npm:1.32.0"
+  dependencies:
+    detect-libc: "npm:^2.0.3"
+    lightningcss-android-arm64: "npm:1.32.0"
+    lightningcss-darwin-arm64: "npm:1.32.0"
+    lightningcss-darwin-x64: "npm:1.32.0"
+    lightningcss-freebsd-x64: "npm:1.32.0"
+    lightningcss-linux-arm-gnueabihf: "npm:1.32.0"
+    lightningcss-linux-arm64-gnu: "npm:1.32.0"
+    lightningcss-linux-arm64-musl: "npm:1.32.0"
+    lightningcss-linux-x64-gnu: "npm:1.32.0"
+    lightningcss-linux-x64-musl: "npm:1.32.0"
+    lightningcss-win32-arm64-msvc: "npm:1.32.0"
+    lightningcss-win32-x64-msvc: "npm:1.32.0"
+  dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10c0/70945bd55097af46fc9fab7f5ed09cd5869d85940a2acab7ee06d0117004a1d68155708a2d462531cea2fc3c67aefc9333a7068c80b0b78dd404c16838809e03
+  languageName: node
+  linkType: hard
+
+"lucide-react@npm:^0.562.0":
+  version: 0.562.0
+  resolution: "lucide-react@npm:0.562.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/c713a2490916e42c678b9df0d7309d8cdb715af1d7139c7eb49c45547901b276a7cf722548012a668dc0e337eeadf5141d5af8c8fcda6721fc58fb2d288efcba
+  languageName: node
+  linkType: hard
+
+"magic-string@npm:^0.30.21":
+  version: 0.30.21
+  resolution: "magic-string@npm:0.30.21"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.5"
+  checksum: 10c0/299378e38f9a270069fc62358522ddfb44e94244baa0d6a8980ab2a9b2490a1d03b236b447eee309e17eb3bddfa482c61259d47960eb018a904f0ded52780c4a
+  languageName: node
+  linkType: hard
+
+"motion-dom@npm:^12.42.2, motion-dom@npm:^12.43.0":
+  version: 12.43.0
+  resolution: "motion-dom@npm:12.43.0"
+  dependencies:
+    motion-utils: "npm:^12.39.0"
+  checksum: 10c0/ef7d3f6eaa6cfeb1a939847a8b2581d119f2efc054948921ece0e2b1091f0969c15ca7707b87a46dddac7f156a714878f168e7b9f6ea189eeb7d5d9fbbb99d26
+  languageName: node
+  linkType: hard
+
+"motion-utils@npm:^12.39.0":
+  version: 12.39.0
+  resolution: "motion-utils@npm:12.39.0"
+  checksum: 10c0/6d7a2a2cc0797b72410a666a9cc1c201c8e39bf9669670464e433fe1e72af5f0217154c869867b34fbadf3664cf222c0d022bbc4eed7927f201ae971918e7440
+  languageName: node
+  linkType: hard
+
+"motion@npm:^12.23.26":
+  version: 12.43.0
+  resolution: "motion@npm:12.43.0"
+  dependencies:
+    framer-motion: "npm:^12.43.0"
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0 || ^19.0.0
+    react-dom: ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/15544ecc71d356661a959c78c4f84b3ca91728f5d17265b68912d2bbcf86f20409ebf5acf2f6c82e0c0425d1024267b04abd5b786177a3694bf706f7a3a529d6
+  languageName: node
+  linkType: hard
+
+"nanoid@npm:^3.3.16, nanoid@npm:^3.3.6":
+  version: 3.3.16
+  resolution: "nanoid@npm:3.3.16"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10c0/bbf2dcffe22d2b62d16de2711752070b539c0f644c7916f823ad6521986b2078cbe524f2d6240f58c46e9141ea0c7b87a029e100c0f7f175228cacaf30e41bba
+  languageName: node
+  linkType: hard
+
+"next@npm:16.2.10":
+  version: 16.2.10
+  resolution: "next@npm:16.2.10"
+  dependencies:
+    "@next/env": "npm:16.2.10"
+    "@next/swc-darwin-arm64": "npm:16.2.10"
+    "@next/swc-darwin-x64": "npm:16.2.10"
+    "@next/swc-linux-arm64-gnu": "npm:16.2.10"
+    "@next/swc-linux-arm64-musl": "npm:16.2.10"
+    "@next/swc-linux-x64-gnu": "npm:16.2.10"
+    "@next/swc-linux-x64-musl": "npm:16.2.10"
+    "@next/swc-win32-arm64-msvc": "npm:16.2.10"
+    "@next/swc-win32-x64-msvc": "npm:16.2.10"
+    "@swc/helpers": "npm:0.5.15"
+    baseline-browser-mapping: "npm:^2.9.19"
+    caniuse-lite: "npm:^1.0.30001579"
+    postcss: "npm:8.4.31"
+    sharp: "npm:^0.34.5"
+    styled-jsx: "npm:5.1.6"
+  peerDependencies:
+    "@opentelemetry/api": ^1.1.0
+    "@playwright/test": ^1.51.1
+    babel-plugin-react-compiler: "*"
+    react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+    react-dom: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+    sass: ^1.3.0
+  dependenciesMeta:
+    "@next/swc-darwin-arm64":
+      optional: true
+    "@next/swc-darwin-x64":
+      optional: true
+    "@next/swc-linux-arm64-gnu":
+      optional: true
+    "@next/swc-linux-arm64-musl":
+      optional: true
+    "@next/swc-linux-x64-gnu":
+      optional: true
+    "@next/swc-linux-x64-musl":
+      optional: true
+    "@next/swc-win32-arm64-msvc":
+      optional: true
+    "@next/swc-win32-x64-msvc":
+      optional: true
+    sharp:
+      optional: true
+  peerDependenciesMeta:
+    "@opentelemetry/api":
+      optional: true
+    "@playwright/test":
+      optional: true
+    babel-plugin-react-compiler:
+      optional: true
+    sass:
+      optional: true
+  bin:
+    next: dist/bin/next
+  checksum: 10c0/e242f60b3caaf05bdf62a9ca85cea774f3081e1e900ac9ffe5b5975ca10584a904cf566873812abf1f25b965ef3de6451e7790e947800616909c2d4ecb54d1b9
+  languageName: node
+  linkType: hard
+
+"nextjs-app@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "nextjs-app@workspace:."
+  dependencies:
+    "@next/swc-wasm-web": "npm:16.2.10"
+    "@remixicon/react": "npm:^4.9.0"
+    "@shopify/storefront-api-client": "npm:^1.0.0"
+    "@supabase/supabase-js": "npm:^2.51.0"
+    "@tailwindcss/postcss": "npm:^4"
+    "@types/node": "npm:^22"
+    "@types/react": "npm:^19"
+    "@types/react-dom": "npm:^19"
+    class-variance-authority: "npm:0.7.1"
+    clsx: "npm:^2.1.1"
+    embla-carousel-react: "npm:^8.6.0"
+    framer-motion: "npm:12.42.2"
+    input-otp: "npm:^1.4.2"
+    lucide-react: "npm:^0.562.0"
+    motion: "npm:^12.23.26"
+    next: "npm:16.2.10"
+    react: "npm:^19.0.0"
+    react-dom: "npm:^19.0.0"
+    sonner: "npm:^2.0.7"
+    tailwind-merge: "npm:^3.4.0"
+    tailwindcss: "npm:^4"
+    tw-animate-css: "npm:1.4.0"
+    typescript: "npm:^5.7.3"
+    zustand: "npm:^5.0.11"
+  languageName: unknown
+  linkType: soft
+
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58
+  languageName: node
+  linkType: hard
+
+"postcss@npm:8.4.31":
+  version: 8.4.31
+  resolution: "postcss@npm:8.4.31"
+  dependencies:
+    nanoid: "npm:^3.3.6"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.0.2"
+  checksum: 10c0/748b82e6e5fc34034dcf2ae88ea3d11fd09f69b6c50ecdd3b4a875cfc7cdca435c958b211e2cb52355422ab6fccb7d8f2f2923161d7a1b281029e4a913d59acf
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.5.16":
+  version: 8.5.25
+  resolution: "postcss@npm:8.5.25"
+  dependencies:
+    nanoid: "npm:^3.3.16"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/0a12c1e74b456c57122e81f684e02fd98ff4d57526f794d10c996df1147158808f5ae373ac82b988c8de6cbbaa82dbd7b13803b14f5dd3cf7cc6a42ccad5c9f2
+  languageName: node
+  linkType: hard
+
+"react-dom@npm:^19.0.0":
+  version: 19.2.8
+  resolution: "react-dom@npm:19.2.8"
+  dependencies:
+    scheduler: "npm:^0.27.0"
+  peerDependencies:
+    react: ^19.2.8
+  checksum: 10c0/41ba2247b76f687fcfe5bbc99f514d6b851d8c8041c2f5ded36ed05bd7fdc5208cacbac9de51e3e6633e77f96f44cec9f0d4a5a55184dba4e00738f224439134
+  languageName: node
+  linkType: hard
+
+"react@npm:^19.0.0":
+  version: 19.2.8
+  resolution: "react@npm:19.2.8"
+  checksum: 10c0/5f86bdb56426652fd6d989d30a6f2e603c057272c47c9ca3a3fbe190a3a39ee9ccce937d63cfc039717abed1b8891d6a499134bc35311acc07eafdacd86537cd
+  languageName: node
+  linkType: hard
+
+"scheduler@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "scheduler@npm:0.27.0"
+  checksum: 10c0/4f03048cb05a3c8fddc45813052251eca00688f413a3cee236d984a161da28db28ba71bd11e7a3dd02f7af84ab28d39fb311431d3b3772fed557945beb00c452
+  languageName: node
+  linkType: hard
+
+"semver@npm:^7.7.3":
+  version: 7.8.5
+  resolution: "semver@npm:7.8.5"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/b1f3127a5be8125a94f37188b361c212466c292c6910adce3ec106cff5dc211ccaedc4739c11bb70fda59d6fc1f040a9bca289f4e093451521a2372e5231fe0c
+  languageName: node
+  linkType: hard
+
+"sharp@npm:^0.34.5":
+  version: 0.34.5
+  resolution: "sharp@npm:0.34.5"
+  dependencies:
+    "@img/colour": "npm:^1.0.0"
+    "@img/sharp-darwin-arm64": "npm:0.34.5"
+    "@img/sharp-darwin-x64": "npm:0.34.5"
+    "@img/sharp-libvips-darwin-arm64": "npm:1.2.4"
+    "@img/sharp-libvips-darwin-x64": "npm:1.2.4"
+    "@img/sharp-libvips-linux-arm": "npm:1.2.4"
+    "@img/sharp-libvips-linux-arm64": "npm:1.2.4"
+    "@img/sharp-libvips-linux-ppc64": "npm:1.2.4"
+    "@img/sharp-libvips-linux-riscv64": "npm:1.2.4"
+    "@img/sharp-libvips-linux-s390x": "npm:1.2.4"
+    "@img/sharp-libvips-linux-x64": "npm:1.2.4"
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.2.4"
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.2.4"
+    "@img/sharp-linux-arm": "npm:0.34.5"
+    "@img/sharp-linux-arm64": "npm:0.34.5"
+    "@img/sharp-linux-ppc64": "npm:0.34.5"
+    "@img/sharp-linux-riscv64": "npm:0.34.5"
+    "@img/sharp-linux-s390x": "npm:0.34.5"
+    "@img/sharp-linux-x64": "npm:0.34.5"
+    "@img/sharp-linuxmusl-arm64": "npm:0.34.5"
+    "@img/sharp-linuxmusl-x64": "npm:0.34.5"
+    "@img/sharp-wasm32": "npm:0.34.5"
+    "@img/sharp-win32-arm64": "npm:0.34.5"
+    "@img/sharp-win32-ia32": "npm:0.34.5"
+    "@img/sharp-win32-x64": "npm:0.34.5"
+    detect-libc: "npm:^2.1.2"
+    semver: "npm:^7.7.3"
+  dependenciesMeta:
+    "@img/sharp-darwin-arm64":
+      optional: true
+    "@img/sharp-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-darwin-arm64":
+      optional: true
+    "@img/sharp-libvips-darwin-x64":
+      optional: true
+    "@img/sharp-libvips-linux-arm":
+      optional: true
+    "@img/sharp-libvips-linux-arm64":
+      optional: true
+    "@img/sharp-libvips-linux-ppc64":
+      optional: true
+    "@img/sharp-libvips-linux-riscv64":
+      optional: true
+    "@img/sharp-libvips-linux-s390x":
+      optional: true
+    "@img/sharp-libvips-linux-x64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-libvips-linuxmusl-x64":
+      optional: true
+    "@img/sharp-linux-arm":
+      optional: true
+    "@img/sharp-linux-arm64":
+      optional: true
+    "@img/sharp-linux-ppc64":
+      optional: true
+    "@img/sharp-linux-riscv64":
+      optional: true
+    "@img/sharp-linux-s390x":
+      optional: true
+    "@img/sharp-linux-x64":
+      optional: true
+    "@img/sharp-linuxmusl-arm64":
+      optional: true
+    "@img/sharp-linuxmusl-x64":
+      optional: true
+    "@img/sharp-wasm32":
+      optional: true
+    "@img/sharp-win32-arm64":
+      optional: true
+    "@img/sharp-win32-ia32":
+      optional: true
+    "@img/sharp-win32-x64":
+      optional: true
+  checksum: 10c0/fd79e29df0597a7d5704b8461c51f944ead91a5243691697be6e8243b966402beda53ddc6f0a53b96ea3cb8221f0b244aa588114d3ebf8734fb4aefd41ab802f
+  languageName: node
+  linkType: hard
+
+"sonner@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "sonner@npm:2.0.7"
+  peerDependencies:
+    react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+  checksum: 10c0/6966ab5e892ed6aab579a175e4a24f3b48747f0fc21cb68c3e33cb41caa7a0eebeb098c210545395e47a18d585eb8734ae7dd12d2bd18c8a3294a1ee73f997d9
+  languageName: node
+  linkType: hard
+
+"source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf
+  languageName: node
+  linkType: hard
+
+"styled-jsx@npm:5.1.6":
+  version: 5.1.6
+  resolution: "styled-jsx@npm:5.1.6"
+  dependencies:
+    client-only: "npm:0.0.1"
+  peerDependencies:
+    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    babel-plugin-macros:
+      optional: true
+  checksum: 10c0/ace50e7ea5ae5ae6a3b65a50994c51fca6ae7df9c7ecfd0104c36be0b4b3a9c5c1a2374d16e2a11e256d0b20be6d47256d768ecb4f91ab390f60752a075780f5
+  languageName: node
+  linkType: hard
+
+"tailwind-merge@npm:^3.4.0":
+  version: 3.6.0
+  resolution: "tailwind-merge@npm:3.6.0"
+  checksum: 10c0/a728d929f4786bcb48641db4228cc8c006a7545491783a658fb4d24d177dab960620991d17805a047309228de50ab949ca8d9e112c30183da0432367796ae186
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.3.3, tailwindcss@npm:^4":
+  version: 4.3.3
+  resolution: "tailwindcss@npm:4.3.3"
+  checksum: 10c0/7e9cd7553cd890ffa5350efb0ca8971ba5435257d0f98bf0714994ac8f1fee5c7cdf9a9da47fe83e8ac995d728410837ac49d3ef5ea66b5afe1db312086ffae2
+  languageName: node
+  linkType: hard
+
+"tapable@npm:^2.3.3":
+  version: 2.3.3
+  resolution: "tapable@npm:2.3.3"
+  checksum: 10c0/47992e861053f861154e92fb4a98ac4ab47b6463717e60792dd1e8c755da0c4964cd8bb68c308a9066d6da89000b6310457b4d5d985c30de4ccc29066068cc17
+  languageName: node
+  linkType: hard
+
+"tslib@npm:2.8.1, tslib@npm:^2.4.0, tslib@npm:^2.8.0, tslib@npm:^2.8.1":
+  version: 2.8.1
+  resolution: "tslib@npm:2.8.1"
+  checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
+  languageName: node
+  linkType: hard
+
+"tw-animate-css@npm:1.4.0":
+  version: 1.4.0
+  resolution: "tw-animate-css@npm:1.4.0"
+  checksum: 10c0/6cfbc19ccc73883ec80ef1f9147f43e736cb01ee99c8172968b37eb81b720523d30e38b1a96aef92db3c586d864204db5510b51744ddacbbf0ad8e3c7fb56ec7
+  languageName: node
+  linkType: hard
+
+"typescript@npm:^5.7.3":
+  version: 5.9.3
+  resolution: "typescript@npm:5.9.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/6bd7552ce39f97e711db5aa048f6f9995b53f1c52f7d8667c1abdc1700c68a76a308f579cd309ce6b53646deb4e9a1be7c813a93baaf0a28ccd536a30270e1c5
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^5.7.3#optional!builtin<compat/typescript>":
+  version: 5.9.3
+  resolution: "typescript@patch:typescript@npm%3A5.9.3#optional!builtin<compat/typescript>::version=5.9.3&hash=5786d5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/ad09fdf7a756814dce65bc60c1657b40d44451346858eea230e10f2e95a289d9183b6e32e5c11e95acc0ccc214b4f36289dcad4bf1886b0adb84d711d336a430
+  languageName: node
+  linkType: hard
+
+"undici-types@npm:~6.21.0":
+  version: 6.21.0
+  resolution: "undici-types@npm:6.21.0"
+  checksum: 10c0/c01ed51829b10aa72fc3ce64b747f8e74ae9b60eafa19a7b46ef624403508a54c526ffab06a14a26b3120d055e1104d7abe7c9017e83ced038ea5cf52f8d5e04
+  languageName: node
+  linkType: hard
+
+"zustand@npm:^5.0.11":
+  version: 5.0.14
+  resolution: "zustand@npm:5.0.14"
+  peerDependencies:
+    "@types/react": ">=18.0.0"
+    immer: ">=9.0.6"
+    react: ">=18.0.0"
+    use-sync-external-store: ">=1.2.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+    use-sync-external-store:
+      optional: true
+  checksum: 10c0/89de0c8119f1e0861b2f896a0b4df0d67994a373ecee02628d4e7b97cee1885207f646917d3ede395c3a5083316d48846855cfbc84aced7cd23a6db3238930a8
+  languageName: node
+  linkType: hard