Update shopify collection

app/api/hello/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  return NextResponse.json({ message: 'Hello, World' });
+}

app/collections/[handle]/page.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import CollectionDetail from '@/components/shopify/collection-detail';
+import { useCollectionProducts } from '@/hooks/use-shopify-collections';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+export default function CollectionPage() {
+  const params = useParams();
+  const handle = params?.handle as string;
+  const { collection } = useCollectionProducts(handle);
+
+  // Format title from handle as fallback
+  const formattedTitle = handle
+    ? handle.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+    : 'Collection';
+
+  const title = collection?.title || formattedTitle;
+
+  return (
+    <div className="min-h-screen 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>
+              <BreadcrumbLink asChild>
+                <Link href="/collections">Collections</Link>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>{title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+      <CollectionDetail />
+    </div>
+  );
+}

app/collections/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import Collections from '@/components/shopify/collections';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+export default function CollectionsPage() {
+  return (
+    <div className="min-h-screen 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>Collections</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+      <Collections />
+    </div>
+  );
+}

app/error.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from 'react';
+
 export default function Error({
   error,
   reset,

app/globals.css

@@ -1,8 +1,10 @@
 @import 'tailwindcss';
+@import "tw-animate-css";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+
   /* Background and foreground */
   --color-background: hsl(0 0% 100%);
   --color-foreground: hsl(222.2 84% 4.9%);
@@ -16,16 +18,16 @@
   --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%);
+  --color-primary: hsl(0 0% 0%);
+  --color-primary-foreground: hsl(0 0% 100%);
 
   /* 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%);
+  --color-muted: hsl(0 0% 96.1%);
+  --color-muted-foreground: hsl(0 0% 45%);
 
   /* Accent */
   --color-accent: hsl(210 40% 96.1%);
@@ -57,8 +59,9 @@
   --radius-xl: 0.75rem;
 
   /* Fonts */
-  --font-heading: "Space Grotesk", sans-serif;
-  --font-body: "Inter", sans-serif;
+  --font-heading: var(--font-poppins), 'Poppins', sans-serif;
+  --font-body: 'Inter', sans-serif;
+
 }
 
 /* Dark mode */
@@ -91,3 +94,12 @@
   --color-sidebar-border: hsl(240 3.7% 15.9%);
   --color-sidebar-ring: hsl(217.2 91.2% 59.8%);
 }
+
+/* Set border color for all elements */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--color-border);
+}

app/layout.tsx

@@ -1,13 +1,22 @@
+import React from 'react';
 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 { Poppins } from 'next/font/google';
 import './globals.css';
+import { Providers } from './providers';
+import ShopifyCart from '@/components/shopify/cart-drawer';
+import ShopHeader from '@/components/shopify/shop-header';
+import PromoBanner from '@/components/shopify/promo-banner';
+import ShopFooter from '@/components/shopify/shop-footer';
+
+const poppins = Poppins({
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700', '800'],
+  variable: '--font-poppins',
+});
 
 export const metadata: Metadata = {
-  title: 'Frontend',
-  description: 'Start prompting',
+  title: 'Frontend | Shopify',
+  description: 'Frontend Shopify Storefront',
 };
 
 export default function RootLayout({
@@ -16,19 +25,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-      </head>
+    <html lang="en" className={poppins.variable}>
+      <head></head>
       <body className="m-0 p-0 font-body">
-        <ShopifyProvider>
-          <Theme />
-          <div className="w-full flex flex-col min-h-[calc(100vh-80px)]">
+        <Providers>
+          <PromoBanner />
+          <ShopHeader />
+          <main className="min-h-screen">
             {children}
-          </div>
-          <Toaster />
-          <CartDrawer />
-        </ShopifyProvider>
+          </main>
+          <ShopFooter />
+          <ShopifyCart />
+        </Providers>
       </body>
     </html>
   );

app/not-found.tsx

@@ -1,5 +1,8 @@
 "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">

app/page.tsx

@@ -1,18 +1,11 @@
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import CollectionDetail from '@/components/CollectionDetail';
+import React from 'react';
+import CollectionDetail from '@/components/shopify/collection-detail';
 import config from '@/lib/config.json';
 
-export default function Home() {
-  const collectionHandle = config.data.collection;
-
+const Home: React.FC = () => {
   return (
-    <div className="flex flex-col min-h-screen">
-      <Header />
-      <main className="flex-1">
-        <CollectionDetail collectionHandle={collectionHandle} />
-      </main>
-      <Footer />
-    </div>
+    <CollectionDetail handle={config.data.collection} />
   );
-}
+};
+
+export default Home;

app/products/[handle]/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import ProductDetail from '@/components/shopify/product-detail';
+
+export default function ProductDetailPage() {
+  return <ProductDetail />;
+}

app/providers.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import React from 'react';
+import { ShopifyProvider } from '@/contexts/shopify-context';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ShopifyProvider>
+      {children}
+    </ShopifyProvider>
+  );
+}