init

app/components/Drop.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+
+export default function Drop() {
+  const [selectedSize, setSelectedSize] = useState('50g')
+
+  return (
+    <div className="drop">
+      <Image
+        src="https://images.unsplash.com/photo-1604908554027-0b6c2c9c7e92"
+        alt="Harlequin CBD"
+        width={420}
+        height={420}
+        style={{ width: '100%', height: 'auto', borderRadius: '16px', objectFit: 'cover' }}
+      />
+      <div>
+        <h2>Harlequin – Collective Drop</h2>
+        <div className="meta">1kg Batch · Indoor · Switzerland</div>
+        <div className="price">2.50 CHF / g · incl. 2.5% VAT</div>
+
+        <div className="progress">
+          <span></span>
+        </div>
+        <div className="meta">620g of 1,000g reserved</div>
+
+        <div className="options">
+          <button
+            className={selectedSize === '50g' ? 'active' : ''}
+            onClick={() => setSelectedSize('50g')}
+          >
+            50g
+          </button>
+          <button
+            className={selectedSize === '100g' ? 'active' : ''}
+            onClick={() => setSelectedSize('100g')}
+          >
+            100g
+          </button>
+          <button
+            className={selectedSize === '250g' ? 'active' : ''}
+            onClick={() => setSelectedSize('250g')}
+          >
+            250g
+          </button>
+        </div>
+
+        <button className="cta">Join Drop</button>
+      </div>
+    </div>
+  )
+}
+

app/components/Footer.tsx

@@ -0,0 +1,8 @@
+export default function Footer() {
+  return (
+    <footer>
+      © 2025 420Deals.ch · CBD &lt; 1% THC · Sale from 18 years · Switzerland
+    </footer>
+  )
+}
+

app/components/InfoBox.tsx

@@ -0,0 +1,28 @@
+export default function InfoBox() {
+  return (
+    <div className="info-box">
+      <div>
+        <h3>Why so cheap?</h3>
+        <p>
+          Retail prices are around 10 CHF/g. Through collective
+          bulk orders, we buy like wholesalers – without
+          intermediaries.
+        </p>
+      </div>
+      <div>
+        <h3>Taxes & Legal</h3>
+        <p>
+          Bulk sale with 2.5% VAT. No retail packaging, no
+          tobacco tax.
+        </p>
+      </div>
+      <div>
+        <h3>Drop Model</h3>
+        <p>
+          One variety per drop. Only when sold out – then the next drop.
+        </p>
+      </div>
+    </div>
+  )
+}
+

app/components/Nav.tsx

@@ -0,0 +1,13 @@
+export default function Nav() {
+  return (
+    <nav>
+      <div className="brand">420Deals.ch</div>
+      <div className="links">
+        <a href="#drop">Drop</a>
+        <a href="#past">Past Drops</a>
+        <a href="#community">Community</a>
+      </div>
+    </nav>
+  )
+}
+

app/components/PastDrops.tsx

@@ -0,0 +1,47 @@
+import Image from 'next/image'
+
+interface PastDrop {
+  name: string
+  image: string
+  soldIn: string
+}
+
+const pastDrops: PastDrop[] = [
+  {
+    name: 'Swiss Gold',
+    image: 'https://images.unsplash.com/photo-1581091012184-5c7b4c101899',
+    soldIn: 'Sold out in 42h',
+  },
+  {
+    name: 'Lemon T1',
+    image: 'https://images.unsplash.com/photo-1512436991641-6745cdb1723f',
+    soldIn: 'Sold out in 19h',
+  },
+  {
+    name: 'Alpine Frost',
+    image: 'https://images.unsplash.com/photo-1600431521340-491eca880813',
+    soldIn: 'Sold out in 31h',
+  },
+]
+
+export default function PastDrops() {
+  return (
+    <div className="past">
+      {pastDrops.map((drop, index) => (
+        <div key={index} className="card">
+          <Image
+            src={drop.image}
+            alt={drop.name}
+            width={240}
+            height={240}
+            style={{ width: '100%', height: 'auto', borderRadius: '12px', marginBottom: '12px' }}
+          />
+          <strong>{drop.name}</strong>
+          <br />
+          <span className="meta">{drop.soldIn}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+

app/components/Signup.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Signup() {
+  const [email, setEmail] = useState('')
+  const [whatsapp, setWhatsapp] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Handle form submission
+    console.log('Form submitted', { email, whatsapp })
+  }
+
+  return (
+    <div className="signup">
+      <h2>Drop Notifications</h2>
+      <p>Receive updates about new drops via email or WhatsApp.</p>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="email"
+          placeholder="E-Mail"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <input
+          type="text"
+          placeholder="WhatsApp Number"
+          value={whatsapp}
+          onChange={(e) => setWhatsapp(e.target.value)}
+        />
+        <br />
+        <button type="submit">Get Notified</button>
+      </form>
+    </div>
+  )
+}
+