Initial commit

app/error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+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>
+  );
+}

app/globals.css

@@ -0,0 +1,93 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Background and foreground */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+
+  /* Card */
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+
+  /* Popover */
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+
+  /* Primary */
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+
+  /* Secondary */
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+  /* Muted */
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  /* Accent */
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+
+  /* Destructive */
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+
+  /* Border, input, ring */
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+
+  /* Sidebar */
+  --color-sidebar: hsl(0 0% 98%);
+  --color-sidebar-foreground: hsl(240 5.3% 26.1%);
+  --color-sidebar-primary: hsl(240 5.9% 10%);
+  --color-sidebar-primary-foreground: hsl(0 0% 98%);
+  --color-sidebar-accent: hsl(240 4.8% 95.9%);
+  --color-sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --color-sidebar-border: hsl(220 13% 91%);
+  --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* Fonts */
+  --font-heading: "Space Grotesk", sans-serif;
+  --font-body: "Inter", sans-serif;
+}
+
+/* Dark mode */
+.dark {
+  --color-background: hsl(222.2 84% 4.9%);
+  --color-foreground: hsl(210 40% 98%);
+  --color-card: hsl(222.2 84% 4.9%);
+  --color-card-foreground: hsl(210 40% 98%);
+  --color-popover: hsl(222.2 84% 4.9%);
+  --color-popover-foreground: hsl(210 40% 98%);
+  --color-primary: hsl(210 40% 98%);
+  --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-secondary: hsl(217.2 32.6% 17.5%);
+  --color-secondary-foreground: hsl(210 40% 98%);
+  --color-muted: hsl(217.2 32.6% 17.5%);
+  --color-muted-foreground: hsl(215 20.2% 65.1%);
+  --color-accent: hsl(217.2 32.6% 17.5%);
+  --color-accent-foreground: hsl(210 40% 98%);
+  --color-destructive: hsl(0 62.8% 30.6%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(217.2 32.6% 17.5%);
+  --color-input: hsl(217.2 32.6% 17.5%);
+  --color-ring: hsl(212.7 26.8% 83.9%);
+  --color-sidebar: hsl(240 5.9% 10%);
+  --color-sidebar-foreground: hsl(240 4.8% 95.9%);
+  --color-sidebar-primary: hsl(224.3 76.3% 48%);
+  --color-sidebar-primary-foreground: hsl(0 0% 100%);
+  --color-sidebar-accent: hsl(240 3.7% 15.9%);
+  --color-sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --color-sidebar-border: hsl(240 3.7% 15.9%);
+  --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
+}

app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next';
+import { Toaster } from 'sonner';
+import { ShopifyProvider } from '@/contexts/shopify-context';
+import CartDrawer from '@/components/CartDrawer';
+import Theme from '@/components/Theme';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Frontend',
+  description: 'Start prompting',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body className="m-0 p-0 font-body">
+        <ShopifyProvider>
+          <Theme />
+          <div className="w-full flex flex-col min-h-[calc(100vh-80px)]">
+            {children}
+          </div>
+          <Toaster />
+          <CartDrawer />
+        </ShopifyProvider>
+      </body>
+    </html>
+  );
+}

app/not-found.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+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>
+  );
+}

app/page.tsx

@@ -0,0 +1,18 @@
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import ProductDetail from '@/components/product-detail/ProductDetail';
+import config from '@/lib/config.json';
+
+export default function Page() {
+  const productHandle = config.data.product;
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Header />
+      <main className="flex-1">
+        <ProductDetail handle={productHandle} />
+      </main>
+      <Footer />
+    </div>
+  );
+}