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>
+  )
+}
+