From d412dc2d05e9fb6a4f0678216921b22efe34ddfc Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Tue, 7 Oct 2025 00:02:35 +0000
Subject: [PATCH] feat: add "coming soon" shop page with email signup

Create stylish placeholder page for MycoFi shop with branding and email form.

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
---
 app/shop/page.tsx       | 65 +++++++++++++++++++++++++++++++++++++++++
 components/ui/input.tsx | 21 +++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 app/shop/page.tsx
 create mode 100644 components/ui/input.tsx

diff --git a/app/shop/page.tsx b/app/shop/page.tsx
new file mode 100644
index 0000000..49057e5
--- /dev/null
+++ b/app/shop/page.tsx
@@ -0,0 +1,65 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ArrowLeft, ShoppingBag, Sparkles } from "lucide-react"
+
+export default function ShopPage() {
+  return (
+    <div className="relative min-h-screen bg-background">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,_hsl(var(--primary))_1px,_transparent_1px)] bg-[size:24px_24px]" />
+      </div>
+
+      {/* Content */}
+      <div className="relative flex min-h-screen flex-col items-center justify-center px-4 py-16">
+        <Link
+          href="/"
+          className="absolute left-4 top-4 inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground md:left-8 md:top-8"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to MycoFi
+        </Link>
+
+        <div className="mx-auto max-w-2xl text-center">
+          {/* Icon */}
+          <div className="mb-8 inline-flex items-center justify-center rounded-full bg-primary/10 p-6">
+            <ShoppingBag className="h-16 w-16 text-primary" />
+          </div>
+
+          {/* Title */}
+          <h1 className="mb-4 font-serif text-5xl font-bold text-foreground md:text-6xl">MycoFi Swag</h1>
+
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full bg-secondary/20 px-4 py-2 text-sm font-medium text-secondary">
+            <Sparkles className="h-4 w-4" />
+            <span>Coming Soon</span>
+          </div>
+
+          {/* Description */}
+          <p className="mb-12 text-lg leading-relaxed text-muted-foreground">
+            We're cultivating something special. Soon you'll be able to wear the mycelial revolution with exclusive
+            MycoFi merchandise, books, and more.
+          </p>
+
+          {/* Email Signup */}
+          <div className="mx-auto max-w-md">
+            <form className="flex flex-col gap-3 sm:flex-row">
+              <Input type="email" placeholder="Enter your email" className="flex-1 bg-card" />
+              <Button type="submit" className="whitespace-nowrap">
+                Notify Me
+              </Button>
+            </form>
+            <p className="mt-3 text-xs text-muted-foreground">Be the first to know when the shop launches</p>
+          </div>
+
+          {/* Decorative Elements */}
+          <div className="mt-16 flex items-center justify-center gap-8 text-muted-foreground/30">
+            <div className="h-px w-16 bg-current" />
+            <span className="text-sm">Growing Soon</span>
+            <div className="h-px w-16 bg-current" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..f199a06
--- /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(
+        '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-transparent 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 }