diff --git a/.env.example b/.env.example
index e84cc33..848721b 100644
--- a/.env.example
+++ b/.env.example
@@ -36,6 +36,13 @@ SMTP_ALLOW_SELFSIGNED=
# Optional webhook fallback (JSON POST). Only used if SMTP_HOST is unset.
# CONTACT_WEBHOOK_URL=
+# --- Store order form -> /api/order -----------------------------------------
+# Reuses the SMTP/relay settings above. ORDER_TO is the inbox that receives
+# order requests; if blank it falls back to CONTACT_TO. No payment is taken;
+# the form only collects an order request that is emailed to you. The order
+# form is hard-gated by src/data/store-availability.json (ordersOpen).
+ORDER_TO=orders@gregkilmer.com
+
# Honeypot / basic abuse control. Maximum submissions per IP per window.
CONTACT_RATE_LIMIT=5
CONTACT_RATE_WINDOW_MIN=15
diff --git a/.zcode/plans/plan-sess_cfbaea37-9611-497f-804c-b438e5e659b3.md b/.zcode/plans/plan-sess_cfbaea37-9611-497f-804c-b438e5e659b3.md
new file mode 100644
index 0000000..c54f190
--- /dev/null
+++ b/.zcode/plans/plan-sess_cfbaea37-9611-497f-804c-b438e5e659b3.md
@@ -0,0 +1,92 @@
+# Store (store.gregkilmer.com) — MTG Proxy Cards & 3D-Printed Deck Boxes / Counters
+
+## Summary
+Add a self-contained **store** section to this repo that renders a commerce-style storefront for your proxy-card printing and 3D-printing services, with a gated email-submission order form. It lives at `/store` (and is reachable via `store.gregkilmer.com`), reuses the existing mystic night-sky aesthetic, and shares **no nav links** with the main site. A single JSON file you edit controls order-open/closed, per-category slot counts, and turnaround messaging.
+
+**Key constraint honored:** no payment is taken; the order form is **hard-locked** until you flip a flag in the JSON.
+
+---
+
+## Architecture decision (defaulting, since the question went unanswered)
+- **Same app, `/store` route set, with a store-only nav and zero cross-links from the main site.** Store pages are reachable only by direct URL or the `store.gregkilmer.com` subdomain (the subdomain routing is a reverse-proxy concern, not code). This reuses BaseLayout, the theme system, Icon, Reveal, SectionHeader, the contact/email pipeline, and Turnstile — no new dependencies.
+- **Order lock = hard gate.** When `ordersOpen` is false the order page shows a clear "orders currently closed" notice, links to your email, and **renders no form at all**. When true, the full order form appears.
+- **Capacity JSON drives:** overall store open/closed flag, open-slot counts for cards and for 3D-print jobs (shown as "X of Y open"), an estimated turnaround string, and a last-updated timestamp.
+
+---
+
+## Files to create
+
+### 1. Store data + availability (the "simple JSON file you edit")
+- **`src/data/store-availability.json`** — the single file you edit to control the storefront. Schema:
+ ```json
+ {
+ "ordersOpen": false, // master gate — false = form hidden
+ "lastUpdated": "2026-08-04",
+ "turnaround": "Estimated turnaround: ~2 weeks once a list is confirmed.",
+ "maxNote": "I take a limited number of orders at a time so each gets full attention.",
+ "slots": {
+ "cards": { "open": 0, "total": 5 },
+ "deckBoxes": { "open": 0, "total": 4 }
+ }
+ }
+ ```
+- **`src/data/store-products.ts`** — typed product/pricing data (cards, deck boxes, finishes, sizing), authored in TS for type-safety and kept here (not JSON) so it's version-controlled with the components that render it. Pricing tables and product specs read from here.
+
+### 2. Store-only layout + nav
+- **`src/layouts/StoreLayout.astro`** — wraps `BaseLayout` with `surface="interest"` (warm candlelit tone, clearly distinct from the dark professional wing but still on-brand). Passes a `noindex` option (store can be noindexed until you're ready to promote). Renders a **store-specific top nav** (`/store`, `/store/cards`, `/store/deck-boxes`, `/store/order`) with a store wordmark and a small "store.gregkilmer.com" label, and a store footer variant that points to your email — **no links back to the main site**, per your request.
+- **`src/components/store/StoreNav.astro`** — the store nav bar (mirrors `NavBar.astro`'s scroll-blur treatment and StarBurst mark, but store items only).
+
+### 3. Reusable store UI components
+- **`src/components/store/ProductCard.astro`** — image + spec list (size, thickness, finish, white back, etc.) for a product.
+- **`src/components/store/PricingTable.astro`** — generic pricing-by-quantity table (takes rows of `{ quantity, price, note? }`).
+- **`src/components/store/SlotMeter.astro`** — visual "X of Y slots open" meter with open/closed pill.
+- **`src/components/store/RequirementList.astro`** — the rules/requirements list with mdi check/alert icons.
+
+### 4. Pages
+- **`src/pages/store/index.astro`** — Storefront home: hero (uses existing `/images/proxies.jpg` / `/images/deckboxes.jpg`), intro, **clear disclaimer block** (not affiliated with WotC/any game company; these are clearly-marked proxies, not counterfeits; will not print offensive content or custom art), capacity/availability summary from the JSON, links to the two product lines + order page.
+- **`src/pages/store/cards.astro`** — Proxy MTG cards product line: example images, spec details (size = standard MTG 63×88mm, cardstock thickness/finish options, white back, etc.), pricing table for sets (e.g. 1–9 / 10–39 / 40–99 / 100+ tiers), double-sided-counts-as-two rule callout.
+- **`src/pages/store/deck-boxes.astro`** — 3D-printed deck box & counter product line: example images (`/images/deckboxes.jpg`), sizing/finish/material details, pricing table for prints.
+- **`src/pages/store/order.astro`** — Order page. Reads `store-availability.json`; when `ordersOpen === false`, renders the **closed notice + email link, no form**. When open, renders the order form island and shows the slot meters + requirements inline.
+
+### 5. Order form + API
+- **`src/components/store/OrderForm.tsx`** — React island modeled on the existing `ContactForm.tsx` (same idle/submitting/success/error states, honeypot, optional Turnstile, aria-live, same input styling). Fields: name, email, order type (cards / deck-box print / both), card list / deck-box spec (textarea), quantity/finish selectors, notes, honeypot, Turnstile token. **Posts to `/api/order`.**
+- **`src/pages/api/order.ts`** — new POST endpoint cloned from `/api/contact.ts`'s proven pipeline: Zod validation, per-IP rate limit, Turnstile verification (reusing `@lib/env`), SMTP-or-webhook delivery to your inbox with a subject like `New store order — ${type}`. **Server-side hard gate:** even if a client POSTs while `ordersOpen` is false, the endpoint reads the JSON and returns 403 "Orders are currently closed." This makes the lock enforced both in UI and on the server.
+
+### 6. Env additions
+- Append to **`.env.example`** (and document in the new docs file): an optional `ORDER_TO` inbox (defaults to `CONTACT_TO`), and reuse existing `TURNSTILE_*`, `SMTP_*`, and rate-limit vars — **no new dependencies**. Order emails reuse the same `deliver()` pattern.
+
+### 7. Docs
+- **`docs/STORE.md`** — how to edit `store-availability.json` to open/close orders and update slots/turnaround, how the hard gate works (UI + API), how to point `store.gregkilmer.com` at the same server via your reverse proxy, and the "no cross-links" rule.
+
+---
+
+## Files modified
+- **`src/lib/env.ts`** — add `orderTo()` helper (falls back to `contactTo()`).
+- **`.env.example`** — add `ORDER_TO=` with a comment.
+- **`src/middleware.ts`** — no change needed; CSP already allows `'self'` form-action, Turnstile origins, and same-origin connect. (I'll add a comment noting `/api/order` reuses the existing policy.)
+- No change to the main site nav (`site.ts`), Footer, or any main-site page — **zero cross-links**, as requested.
+
+---
+
+## How each of your requirements is met
+| Requirement | Where |
+|---|---|
+| Order form submits an email | `OrderForm.tsx` → `/api/order` → SMTP/webhook (cloned from working `/api/contact`) |
+| Example images + product details | `cards.astro` / `deck_boxes.astro` + `ProductCard.astro` (size, thickness, finishes, white back, etc.) |
+| Pricing tables for card sets & deck-box prints | `PricingTable.astro` fed by `store-products.ts` |
+| Hosted at store.gregkilmer.com, no clear link between sites | `/store` route set, store-only nav, no main-site links; subdomain is a reverse-proxy mapping to the same server |
+| No payment taken | Form collects a *request* only; no payment fields, no checkout |
+| Order form locked until you choose to accept | Hard gate: `ordersOpen` in JSON hides the form (UI) **and** 403s the API (server) |
+| Number of card + 3D-print slots, updatable from a simple JSON | `slots.cards` / `slots.deckBoxes` in `store-availability.json`, rendered by `SlotMeter.astro` |
+| Clear "I can only take so many at a time" | `maxNote` + slot meters prominently on storefront and order page |
+| Stated requirements (card list final, double-sided = 2 slots, payment is final, not affiliated with WotC, no counterfeits — clearly proxies, no offensive/custom art, etc.) | `RequirementList.astro` on storefront + repeated on the order page; order form requires an explicit acknowledgment checkbox |
+
+---
+
+## Defaults I'll use (flag any you want changed)
+- **Disclaimer copy** drafted to match your wording (not affiliated with WotC / any game company; clearly-marked proxies, never counterfeits; no offensive or unauthorized custom art; card list is final once received; double-sided = two cards/two slots; all sales final). You can tweak exact phrasing after.
+- **Pricing & specs** are placeholder structure with clearly-marked `[Greg to fill]` values (you'll swap in your real tier prices, cardstock GSM, finish names, deck-box dimensions). I won't invent real prices.
+- **Slot counts** default to `{ cards: 0/5, deckBoxes: 0/4 }` and `ordersOpen: false`, so the site launches visibly "closed."
+- **`noindex`** on by default for store pages until you say otherwise.
+
+I will not commit or push anything. Ready to implement on approval.
\ No newline at end of file
diff --git a/docs/STORE.md b/docs/STORE.md
new file mode 100644
index 0000000..276772f
--- /dev/null
+++ b/docs/STORE.md
@@ -0,0 +1,129 @@
+# Store (`store.gregkilmer.com`)
+
+A small storefront for Greg's **proxy MTG card** and **3D-printed deck box /
+counter** services. It lives at `/store` inside the same app, reuses the main
+site's aesthetic, and is reachable directly or via the `store.gregkilmer.com`
+subdomain. It takes **no payment** — the order form only emails a request — and
+the form is **hard-locked** until you choose to accept orders.
+
+## Pages
+
+| Route | What it is |
+| ------------------ | ------------------------------------------------ |
+| `/store` | Storefront: intro, products, live slots, policies |
+| `/store/cards` | Proxy MTG cards specs + pricing |
+| `/store/deck-boxes`| 3D-printed deck boxes & counters specs + pricing |
+| `/store/order` | Order request form (gated) or "closed" notice |
+
+The store uses its own nav (`StoreNav.astro`) and has **no links back to the
+main site**. The two sites are intentionally not connected from the UI.
+
+## Opening and closing orders
+
+Everything customer-facing about availability is driven by **one file**:
+
+```
+src/data/store-availability.json
+```
+
+```json
+{
+ "ordersOpen": false,
+ "lastUpdated": "2026-08-04",
+ "turnaround": "Estimated turnaround: ~2 weeks once a list is confirmed.",
+ "maxNote": "I take a limited number of orders at a time...",
+ "slots": {
+ "cards": { "open": 0, "total": 5 },
+ "deckBoxes": { "open": 0, "total": 4 }
+ }
+}
+```
+
+- **`ordersOpen`** is the master switch.
+ - `false` → the order page shows a "closed" notice and renders **no form**.
+ - `true` → the order form appears.
+- **`slots.cards` / `slots.deckBoxes`** drive the "X of Y open" meters on the
+ storefront and order page. Set `open` to 0 to show a category as Closed.
+- **`turnaround`**, **`maxNote`**, and **`lastUpdated`** are shown verbatim.
+
+Edit the file, commit, and redeploy. That's it.
+
+### The lock is enforced in two places
+
+1. **UI**: `/store/order` reads the file at render and hides the form when
+ `ordersOpen` is false.
+2. **Server**: `/api/order` reads the file again and returns **403** if
+ `ordersOpen` is false — *before* doing any validation or delivery. So even a
+ direct POST can't bypass the lock.
+
+## Editing products, specs, and pricing
+
+Those live in version-controlled TypeScript (not the availability JSON):
+
+```
+src/data/store-products.ts
+```
+
+Each product has an `icon`, `title`, `summary`, example `image`, a `specs` list
+(size, thickness, finishes, white back, etc.), and `pricing` tiers. Search for
+`[Greg to fill]` to find the placeholder prices and concrete specs to replace.
+
+The shared **requirements / policies** list is also in this file (`requirements`)
+and is rendered on the storefront, the order page, and required as a checkbox on
+the order form.
+
+## Order delivery (email)
+
+Order requests are emailed using the **same SMTP/webhook pipeline as the contact
+form** (see `docs/DEPLOYMENT.md`). The only addition is the inbox:
+
+```
+ORDER_TO=orders@gregkilmer.com
+```
+
+If `ORDER_TO` is blank, it falls back to `CONTACT_TO`. Configure `SMTP_*` vars
+as usual; if neither SMTP nor `CONTACT_WEBHOOK_URL` is set, `/api/order` returns
+503 (delivery not configured) so it's visibly a config gap.
+
+Rate limiting reuses `CONTACT_RATE_LIMIT` / `CONTACT_RATE_WINDOW_MIN` unless you
+set `ORDER_RATE_LIMIT` / `ORDER_RATE_WINDOW_MIN` to give orders a separate budget.
+
+Bot protection reuses the Cloudflare **Turnstile** keys (`TURNSTILE_SITE_KEY` /
+`TURNSTILE_SECRET_KEY`). Leave both blank to skip Turnstile (e.g. local dev).
+
+## Pointing `store.gregkilmer.com` at the store
+
+The store is part of the same app — no separate server. The subdomain is purely
+a reverse-proxy concern (Cosmos / Traefik / Nginx Proxy Manager):
+
+1. Create a DNS record for `store.gregkilmer.com`.
+2. In your reverse proxy, point `store.gregkilmer.com` at the same container on
+ port 4321, with TLS.
+3. (Optional) Add a redirect or rewrite so `store.gregkilmer.com/` maps to
+ `/store`. The store pages are reachable at `/store*` on the main domain too,
+ so a redirect isn't strictly required — visitors who know the path can reach
+ it either way.
+
+No code change is needed to enable the subdomain.
+
+## Search visibility
+
+Store pages are **`noindex` by default** (set in `StoreLayout.astro`). When
+you're ready for the store to be indexed, change `noindex` to `false` there (or
+override it per page via the `noindex` prop).
+
+## Files added / changed
+
+- `src/data/store-availability.json` — **the file you edit**
+- `src/data/store-availability.ts` — typed reader (used by pages + API)
+- `src/data/store-products.ts` — products, specs, pricing, requirements
+- `src/components/store/` — `StoreNav`, `ProductCard`, `PricingTable`,
+ `SlotMeter`, `RequirementList`, `OrderForm.tsx`
+- `src/layouts/StoreLayout.astro` — store wrapper (surface, store nav, noindex)
+- `src/pages/store/` — `index`, `cards`, `deck-boxes`, `order`
+- `src/pages/api/order.ts` — order endpoint with hard gate
+- `src/layouts/BaseLayout.astro` — added optional `storeNav` prop (renders
+ `StoreNav` instead of the main `NavBar` on store pages)
+- `src/components/nav/MobileMenu.tsx` — added store icon paths
+- `src/lib/env.ts` — added `orderTo()` helper
+- `.env.example` — added `ORDER_TO`
diff --git a/public/images/deckboxes-example-1.svg b/public/images/deckboxes-example-1.svg
new file mode 100644
index 0000000..ecb20cb
--- /dev/null
+++ b/public/images/deckboxes-example-1.svg
@@ -0,0 +1,27 @@
+
diff --git a/public/images/deckboxes-example-2.svg b/public/images/deckboxes-example-2.svg
new file mode 100644
index 0000000..668fa19
--- /dev/null
+++ b/public/images/deckboxes-example-2.svg
@@ -0,0 +1,25 @@
+
diff --git a/public/images/proxies-example-1.svg b/public/images/proxies-example-1.svg
new file mode 100644
index 0000000..0b200aa
--- /dev/null
+++ b/public/images/proxies-example-1.svg
@@ -0,0 +1,25 @@
+
diff --git a/public/images/proxies-example-2.svg b/public/images/proxies-example-2.svg
new file mode 100644
index 0000000..4cc7c69
--- /dev/null
+++ b/public/images/proxies-example-2.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/components/nav/MobileMenu.tsx b/src/components/nav/MobileMenu.tsx
index cfb5250..b976da7 100644
--- a/src/components/nav/MobileMenu.tsx
+++ b/src/components/nav/MobileMenu.tsx
@@ -38,6 +38,13 @@ const ICON_PATHS: Record = {
'M6 3h5v5H6V3zm7 0h5v5h-5V3zM3 11h5v5H3v-5zm7 0h5v5h-5v-5zm7 0h-5v5h5v-5z',
email:
'M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm8 7L4 6v1l8 5 8-5V6l-8 5z',
+ // Store nav icons (kept here so the store mobile menu is self-contained).
+ store: 'M4 7h16l-1 13H5L4 7zm5-3a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0 3 3',
+ 'cards-playing': 'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm3 4v3m6 7v-3',
+ 'printer-3d-nozzle':
+ 'M7 2h10v4l3 3-4 2H8L4 9l3-3V2zm5 11v9',
+ 'clipboard-list':
+ 'M9 3h6v2H9V3zm-2 0v2H6a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3M7 11h2m4 0h4M7 15h2m4 0h4',
};
function Icon({ name, className }: { name: string; className?: string }) {
diff --git a/src/components/store/Carousel.tsx b/src/components/store/Carousel.tsx
new file mode 100644
index 0000000..b68bf0f
--- /dev/null
+++ b/src/components/store/Carousel.tsx
@@ -0,0 +1,240 @@
+/**
+ * Carousel.tsx
+ * ---------------------------------------------------------------------------
+ * Server-driven image carousel for store product pages. The list of slides
+ * comes from the product's `images` array (defined in store-products.ts), so
+ * you manage what's shown purely from the data file.
+ *
+ * Features:
+ * - Swipe / drag via pointer events (works for touch + mouse).
+ * - A caption (label) rendered on each slide.
+ * - Prev/next buttons + dot indicators.
+ * - Keyboard accessible (buttons + left/right arrows when focused).
+ * - Respects prefers-reduced-motion (no slide animation, instant swap).
+ *
+ * The carousel is presentation-only on the image; each slide's alt text
+ * carries the meaning for screen readers, and the caption is rendered as
+ * visible text (not aria-hidden) so it's announced.
+ */
+import { useState, useRef, useCallback, type PointerEvent } from 'react';
+
+export interface CarouselSlide {
+ src: string;
+ alt: string;
+ label: string;
+}
+
+interface Props {
+ slides: CarouselSlide[];
+ /** Optional aria-label for the carousel region. */
+ label?: string;
+}
+
+export default function Carousel({ slides, label = 'Product examples' }: Props) {
+ const [index, setIndex] = useState(0);
+ const [dragging, setDragging] = useState(false);
+ // Horizontal drag delta in px accumulated during the current gesture.
+ const dragDeltaRef = useRef(0);
+ const startXRef = useRef(0);
+ // Live offset applied to the track during a drag (px), for visual feedback.
+ const [liveOffset, setLiveOffset] = useState(0);
+ const trackRef = useRef(null);
+
+ const count = slides.length;
+
+ const goTo = useCallback(
+ (i: number) => {
+ if (count === 0) return;
+ const next = (i + count) % count;
+ setIndex(next);
+ },
+ [count],
+ );
+
+ const next = useCallback(() => goTo(index + 1), [goTo, index]);
+ const prev = useCallback(() => goTo(index - 1), [goTo, index]);
+
+ // --- Pointer (touch + mouse) drag handling --------------------------------
+ // Threshold in px before a drag counts as a swipe. Below it, the gesture is
+ // treated as a click (ignored), so taps on the image don't advance.
+ const SWIPE_THRESHOLD = 40;
+
+ const onPointerDown = (e: PointerEvent) => {
+ // Only react to primary button / touch.
+ if (e.button !== 0 && e.pointerType === 'mouse') return;
+ setDragging(true);
+ startXRef.current = e.clientX;
+ dragDeltaRef.current = 0;
+ (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+ };
+
+ const onPointerMove = (e: PointerEvent) => {
+ if (!dragging) return;
+ const delta = e.clientX - startXRef.current;
+ dragDeltaRef.current = delta;
+ setLiveOffset(delta);
+ };
+
+ const finishDrag = () => {
+ if (!dragging) return;
+ const delta = dragDeltaRef.current;
+ setDragging(false);
+ setLiveOffset(0);
+ if (delta <= -SWIPE_THRESHOLD) {
+ next();
+ } else if (delta >= SWIPE_THRESHOLD) {
+ prev();
+ }
+ };
+
+ const onKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === 'ArrowLeft') {
+ e.preventDefault();
+ prev();
+ } else if (e.key === 'ArrowRight') {
+ e.preventDefault();
+ next();
+ }
+ };
+
+ if (count === 0) return null;
+
+ const slide = slides[index]!;
+
+ return (
+
+
+ {/* Slides track. We translate by -index*100% and apply the live drag
+ offset for feedback. touch-action: pan-y lets vertical scroll pass
+ through while we capture horizontal swipes. */}
+
+ {slides.map((s, i) => (
+
+
+ {/* Caption gradient + label, always visible for the active slide. */}
+
diff --git a/src/components/store/ProductCard.astro b/src/components/store/ProductCard.astro
new file mode 100644
index 0000000..6870ead
--- /dev/null
+++ b/src/components/store/ProductCard.astro
@@ -0,0 +1,59 @@
+---
+/**
+ * ProductCard.astro
+ * ---------------------------------------------------------------------------
+ * Product specification block: a title + summary and a spec definition list
+ * (size, thickness, finishes, white back, etc.). Example IMAGES live in the
+ * product-page Carousel, not here, so this component is specs-only now.
+ *
+ * Used on the product detail pages (cards / deck-boxes). On the storefront we
+ * use the compact ProductTile instead (image + title + summary).
+ */
+import Icon from '@components/Icon.astro';
+import type { Product } from '@data/store-products';
+
+interface Props {
+ product: Product;
+ /** When true, show the full spec list (detail pages). When false, just
+ * title + summary. */
+ detailed?: boolean;
+ /** Optional link wrapped around the compact card (storefront tiles). */
+ href?: string;
+}
+
+const { product, detailed = false, href } = Astro.props;
+const Wrapper = href ? 'a' : 'div';
+---
+
+
+
+ )}
+
diff --git a/src/components/store/ProductTile.astro b/src/components/store/ProductTile.astro
new file mode 100644
index 0000000..e795e25
--- /dev/null
+++ b/src/components/store/ProductTile.astro
@@ -0,0 +1,65 @@
+---
+/**
+ * ProductTile.astro
+ * ---------------------------------------------------------------------------
+ * Compact storefront tile for a product line: the first example image (from the
+ * product's `images` array), the title, the summary, and a "View details" hint.
+ * Wraps the whole tile in a link to the product page.
+ *
+ * The full image carousel lives on the product page; this is just the storefront
+ * teaser. ProductCard.astro (specs-only) is used on the detail pages.
+ */
+import Icon from '@components/Icon.astro';
+import type { Product } from '@data/store-products';
+
+interface Props {
+ product: Product;
+ href: string;
+}
+
+const { product, href } = Astro.props;
+const cover = product.images[0];
+---
+
+
+ {cover && (
+
+
+ {product.images.length > 1 && (
+
+
+ {product.images.length}
+
+ )}
+
+ )}
+
+
+
diff --git a/src/components/store/RequirementList.astro b/src/components/store/RequirementList.astro
new file mode 100644
index 0000000..edca582
--- /dev/null
+++ b/src/components/store/RequirementList.astro
@@ -0,0 +1,57 @@
+---
+/**
+ * RequirementList.astro
+ * ---------------------------------------------------------------------------
+ * Renders the store rules / requirements. Each item has an mdi icon that
+ * signals tone: 'check-decagram' / 'information' = neutral rule,
+ * 'alert' = caution, 'close-circle' = hard no / final.
+ *
+ * Used on the storefront and repeated on the order page; the OrderForm also
+ * requires an explicit acknowledgment of these.
+ */
+import Icon from '@components/Icon.astro';
+import type { Requirement } from '@data/store-products';
+
+interface Props {
+ items: Requirement[];
+ /** Optional heading shown above the list. */
+ heading?: string;
+}
+
+const { items, heading } = Astro.props;
+
+// Map the requirement icon to a tone color.
+function toneColor(icon: Requirement['icon']): string {
+ switch (icon) {
+ case 'alert':
+ return '#e8b54a'; // amber — caution
+ case 'close-circle':
+ return '#e5655a'; // red — hard no
+ case 'check-decagram':
+ case 'information':
+ default:
+ return 'var(--color-accent)';
+ }
+}
+---
+
+{heading && (
+
{heading}
+)}
+
+
+ {items.map((item) => (
+
+
+
+
+
+ {item.title}
+ {item.body}
+
+
+ ))}
+
diff --git a/src/components/store/SlotMeter.astro b/src/components/store/SlotMeter.astro
new file mode 100644
index 0000000..3acea45
--- /dev/null
+++ b/src/components/store/SlotMeter.astro
@@ -0,0 +1,66 @@
+---
+/**
+ * SlotMeter.astro
+ * ---------------------------------------------------------------------------
+ * Visual "X of Y slots open" capacity meter for a store category. Reads a slot
+ * status (open + total) and renders a progress-style bar plus an open/closed
+ * pill. The fill width reflects open/total; when open === 0 it shows CLOSED.
+ */
+import Icon from '@components/Icon.astro';
+
+interface Props {
+ /** Category label, e.g. "Card orders" or "3D-print slots". */
+ label: string;
+ /** mdi icon for the row. */
+ icon: string;
+ /** Number of currently open slots. */
+ open: number;
+ /** Total slots for the category. */
+ total: number;
+}
+
+const { label, icon, open, total } = Astro.props;
+const closed = open <= 0;
+const pct = total > 0 ? Math.max(0, Math.min(100, (open / total) * 100)) : 0;
+---
+
+
+ {open} of {total} slots open
+ {closed ? '0%' : `${Math.round(pct)}%`}
+
+
+
+
+
+
+
diff --git a/src/components/store/StoreNav.astro b/src/components/store/StoreNav.astro
new file mode 100644
index 0000000..4370778
--- /dev/null
+++ b/src/components/store/StoreNav.astro
@@ -0,0 +1,137 @@
+---
+/**
+ * StoreNav.astro
+ * ---------------------------------------------------------------------------
+ * Store-only top navigation. Deliberately separate from the main NavBar: this
+ * renders ONLY store links (Storefront, Cards, Deck Boxes, Order) and contains
+ * NO links back to the main gregkilmer.com site, per Greg's request that the
+ * two sites not be clearly linked yet.
+ *
+ * Visually it mirrors NavBar.astro's treatment — the dark nebula band, the
+ * scroll blur, and the StarBurst mark — so it reads as the same house while
+ * being unmistakably a store (a "Store" wordmark + the store.gregkilmer.com
+ * domain label).
+ */
+import Icon from '@components/Icon.astro';
+import MobileMenu from '@components/nav/MobileMenu.tsx';
+import StarBurst from '@components/mystic/StarBurst.astro';
+
+interface NavEntry {
+ label: string;
+ href: string;
+ icon: string;
+}
+
+// Single flat group (no "two wings" divider — the store is one thing).
+const storeNav: NavEntry[] = [
+ { label: 'Store', href: '/store', icon: 'store' },
+ { label: 'Cards', href: '/store/cards', icon: 'cards-playing' },
+ { label: 'Deck Boxes', href: '/store/deck-boxes', icon: 'printer-3d-nozzle' },
+ { label: 'Order', href: '/store/order', icon: 'clipboard-list' },
+];
+
+const path = Astro.url.pathname;
+const isActive = (href: string) =>
+ href === '/store' ? path === '/store' : path === href || path.startsWith(href + '/');
+
+// MobileMenu expects the { items: [] }[] shape.
+const groups = [{ items: storeNav }];
+---
+---
+
+
+
+
+
+
+
+
+
diff --git a/src/data/store-availability.json b/src/data/store-availability.json
new file mode 100644
index 0000000..50da5fc
--- /dev/null
+++ b/src/data/store-availability.json
@@ -0,0 +1,10 @@
+{
+ "ordersOpen": false,
+ "lastUpdated": "2026-08-04",
+ "turnaround": "Estimated turnaround: ~2 weeks once a list is confirmed.",
+ "maxNote": "I take a limited number of orders at a time so each one gets full attention. Slots reopen as current orders finish.",
+ "slots": {
+ "cards": { "open": 0, "total": 5 },
+ "deckBoxes": { "open": 0, "total": 4 }
+ }
+}
diff --git a/src/data/store-availability.ts b/src/data/store-availability.ts
new file mode 100644
index 0000000..7a681bf
--- /dev/null
+++ b/src/data/store-availability.ts
@@ -0,0 +1,39 @@
+/**
+ * store-availability.ts
+ * ---------------------------------------------------------------------------
+ * Typed reader for store-availability.json. Both the storefront pages and the
+ * /api/order endpoint read through here, so the hard order gate (ordersOpen)
+ * is enforced from a single source of truth.
+ *
+ * To open orders: edit `./store-availability.json` and set `"ordersOpen": true`,
+ * then (optionally) bump the `slots.*.open` counts and `lastUpdated`.
+ */
+import raw from './store-availability.json';
+
+export interface SlotStatus {
+ open: number;
+ total: number;
+}
+
+export interface StoreAvailability {
+ /** Master gate. false => order form hidden + /api/order returns 403. */
+ ordersOpen: boolean;
+ /** Free-form date string shown as "Updated ". */
+ lastUpdated: string;
+ /** Turnaround estimate shown on storefront + order page. */
+ turnaround: string;
+ /** Note explaining the limited-capacity model. */
+ maxNote: string;
+ slots: {
+ cards: SlotStatus;
+ deckBoxes: SlotStatus;
+ };
+}
+
+/** The parsed availability, asserted to the shape above. */
+export const storeAvailability = raw as StoreAvailability;
+
+/** True when at least one slot is open in a category. */
+export function categoryOpen(slot: SlotStatus): boolean {
+ return slot.open > 0;
+}
diff --git a/src/data/store-products.ts b/src/data/store-products.ts
new file mode 100644
index 0000000..ada1386
--- /dev/null
+++ b/src/data/store-products.ts
@@ -0,0 +1,216 @@
+/**
+ * store-products.ts
+ * ---------------------------------------------------------------------------
+ * Typed product + pricing data for the store. This is version-controlled source
+ * (not the user-editable availability file) so the storefront and pricing stay
+ * in sync with the components that render them.
+ *
+ * - Availability (orders open/closed, slot counts, turnaround) lives in
+ * `./store-availability.json`, which is the simple file Greg edits.
+ * - Product specs and pricing tiers live HERE.
+ *
+ * Prices and concrete specs are deliberately left as [Greg to fill] placeholders
+ * so real numbers can be dropped in without touching component code.
+ */
+
+export interface SpecRow {
+ /** Label, e.g. "Size". */
+ label: string;
+ /** Value, e.g. "63 x 88 mm (standard MTG)". */
+ value: string;
+}
+
+/**
+ * A single example image for a product. Rendered in the product-page carousel;
+ * `label` is shown as a caption on/under the image.
+ */
+export interface ProductImage {
+ /** Public path, e.g. "/images/proxies.jpg". */
+ src: string;
+ /** Alt text for accessibility. */
+ alt: string;
+ /** Caption shown on the slide, e.g. "Front finish \u2014 matte". */
+ label: string;
+}
+
+export interface PriceTier {
+ /** Quantity band label, e.g. "1-9 cards". */
+ band: string;
+ /** Price for that band. Placeholder until Greg sets real prices. */
+ price: string;
+ /** Optional note, e.g. "per card". */
+ note?: string;
+}
+
+export interface Product {
+ /** mdi icon used as the decorative mark. */
+ icon: string;
+ /** Product name. */
+ title: string;
+ /** One-line summary shown on cards + the storefront. */
+ summary: string;
+ /**
+ * Which availability slot category this product belongs to. Used so the
+ * product page can show the matching SlotMeter at the top.
+ */
+ slotKey: 'cards' | 'deckBoxes';
+ /**
+ * Example images for the product-page carousel, in display order. Each slide
+ * shows the image plus its `label` caption. Add/remove entries here to
+ * manage the carousel from the server side.
+ */
+ images: ProductImage[];
+ /** Detailed spec list rendered as a definition list. */
+ specs: SpecRow[];
+ /** Pricing tiers rendered as a pricing table. */
+ pricing: PriceTier[];
+}
+
+/**
+ * Proxy MTG card product line. Sizes/finishes are standard for the format; the
+ * exact cardstock weights and finish names are Greg's to fill.
+ */
+export const cardProduct: Product = {
+ icon: 'cards-playing',
+ title: 'Proxy MTG Cards',
+ summary:
+ 'High-quality printed proxy cards for casual play, sized to match real Magic cards and clearly marked as proxies.',
+ slotKey: 'cards',
+ images: [
+ {
+ src: '/images/proxies.jpg',
+ alt: 'Example printed proxy MTG cards, front faces',
+ label: 'Card fronts \u2014 full-color print',
+ },
+ {
+ src: '/images/proxies-example-1.svg',
+ alt: 'Placeholder: close-up of card finish and cut',
+ label: 'Placeholder \u2014 close-up of finish & cut',
+ },
+ {
+ src: '/images/proxies-example-2.svg',
+ alt: 'Placeholder: white card back showing the proxy marking',
+ label: 'Placeholder \u2014 solid white back',
+ },
+ ],
+ specs: [
+ { label: 'Size', value: '63 x 88 mm (standard MTG card size)' },
+ { label: 'Thickness', value: '[Greg to fill] (e.g. 300 gsm / 350 gsm cardstock)' },
+ { label: 'Back', value: 'Solid white back (clearly not tournament-legal)' },
+ {
+ label: 'Finishes',
+ value: '[Greg to fill] (e.g. matte, linen, glossy)',
+ },
+ {
+ label: 'Double-sided cards',
+ value: 'Printed as two separate cards and count as 2 card slots',
+ },
+ { label: 'Art', value: 'Official card art only. No custom or offensive art (see Requirements)' },
+ ],
+ pricing: [
+ { band: '1-9 cards', price: '[Greg to fill]', note: 'per card' },
+ { band: '10-39 cards', price: '[Greg to fill]', note: 'per card' },
+ { band: '40-99 cards', price: '[Greg to fill]', note: 'per card' },
+ { band: '100+ cards', price: '[Greg to fill]', note: 'per card' },
+ ],
+};
+
+/**
+ * 3D-printed deck box + counters product line.
+ */
+export const deckBoxProduct: Product = {
+ icon: 'printer-3d-nozzle',
+ title: '3D-Printed Deck Boxes & Counters',
+ summary:
+ 'Custom 3D-printed deck boxes, life counters, and tokens to store and track your games.',
+ slotKey: 'deckBoxes',
+ images: [
+ {
+ src: '/images/deckboxes.jpg',
+ alt: 'Example 3D-printed deck boxes and counters',
+ label: 'Deck box & counters \u2014 assembled',
+ },
+ {
+ src: '/images/deckboxes-example-1.svg',
+ alt: 'Placeholder: deck box open showing card capacity',
+ label: 'Placeholder \u2014 open, showing capacity',
+ },
+ {
+ src: '/images/deckboxes-example-2.svg',
+ alt: 'Placeholder: counter close-up with life totals',
+ label: 'Placeholder \u2014 counter detail',
+ },
+ ],
+ specs: [
+ { label: 'Capacity', value: '[Greg to fill] (e.g. 100 double-sleeved cards)' },
+ { label: 'Material', value: '[Greg to fill] (e.g. PLA / PETG)' },
+ { label: 'Finish', value: '[Greg to fill] (e.g. as-printed, sanded, painted)' },
+ { label: 'Sizing', value: '[Greg to fill] (deck box + matching counters)' },
+ { label: 'Customization', value: 'Color selection from available filament' },
+ ],
+ pricing: [
+ { band: 'Single deck box', price: '[Greg to fill]', note: 'per print' },
+ { band: 'Deck box + counter set', price: '[Greg to fill]', note: 'per set' },
+ { band: 'Counter / token only', price: '[Greg to fill]', note: 'per print' },
+ ],
+};
+
+/** Both product lines, for storefront iteration. */
+export const products = [cardProduct, deckBoxProduct];
+
+/**
+ * The store requirements / rules. Rendered on the storefront and repeated on
+ * the order page; the order form requires an explicit acknowledgment of these.
+ * Wording mirrors what Greg asked to state clearly.
+ */
+export interface Requirement {
+ /** mdi icon: 'check' for a rule, 'alert' for a hard limit/warning. */
+ icon: 'check-decagram' | 'alert' | 'close-circle' | 'information';
+ /** Short title. */
+ title: string;
+ /** One-to-two sentence explanation. */
+ body: string;
+}
+
+export const requirements: Requirement[] = [
+ {
+ icon: 'information',
+ title: 'Card list is final',
+ body: 'You must provide a complete card list up front. Once the list is received, the cards in that order cannot be changed.',
+ },
+ {
+ icon: 'alert',
+ title: 'Double-sided cards = 2 slots',
+ body: 'Double-sided cards are printed as two separate cards (front and back) and count as 2 card slots in your order.',
+ },
+ {
+ icon: 'close-circle',
+ title: 'All sales are final',
+ body: 'Payment is final. Because each order is printed to spec, refunds and exchanges are not available.',
+ },
+ {
+ icon: 'alert',
+ title: 'These are proxies, not counterfeits',
+ body: 'All cards are clearly marked as proxies with a solid white back. They are not tournament-legal and are not made to pass as genuine.',
+ },
+ {
+ icon: 'close-circle',
+ title: 'No affiliation with Wizards of the Coast',
+ body: 'I am not associated with Wizards of the Coast or any game company. Magic: The Gathering and all related properties belong to their respective owners.',
+ },
+ {
+ icon: 'close-circle',
+ title: 'No counterfeiting',
+ body: 'I will not counterfeit cards. Every card is produced as a clearly identifiable proxy for casual play.',
+ },
+ {
+ icon: 'alert',
+ title: 'No custom or offensive art',
+ body: 'I will not print custom art or any cards I find to be offensive. Only official card art is used.',
+ },
+ {
+ icon: 'information',
+ title: 'Limited capacity',
+ body: 'I can only take a limited number of orders at a time. Slots are shown live on the order page and reopen as orders finish.',
+ },
+];
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b7baa31..8154355 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -21,6 +21,7 @@ import "@fontsource-variable/jetbrains-mono";
import { ClientRouter } from "astro:transitions";
import NavBar from "@components/nav/NavBar.astro";
+import StoreNav from "@components/store/StoreNav.astro";
import Footer from "@components/layout/Footer.astro";
import { themeInitScript } from "@/scripts/theme-init";
import { siteIdentity } from "@lib/site";
@@ -37,6 +38,9 @@ interface Props {
/** When true, emit . Use on
pages that shouldn't be indexed (e.g. /contact, to reduce scraping). */
noindex?: boolean;
+ /** When true, render the store-only nav (StoreNav) instead of the main NavBar.
+ Used by store pages, which intentionally share no links with the main site. */
+ storeNav?: boolean;
}
const {
@@ -45,6 +49,7 @@ const {
surface = "neutral",
ogImage,
noindex = false,
+ storeNav = false,
} = Astro.props;
// True on the Home page. Used to switch the NavBar's view-transition-name so
@@ -134,7 +139,7 @@ const ogImageUrl = ogImage
Skip to content
-
+ {storeNav ? : }
diff --git a/src/layouts/StoreLayout.astro b/src/layouts/StoreLayout.astro
new file mode 100644
index 0000000..3a91081
--- /dev/null
+++ b/src/layouts/StoreLayout.astro
@@ -0,0 +1,40 @@
+---
+/**
+ * StoreLayout.astro
+ * ---------------------------------------------------------------------------
+ * Thin wrapper around BaseLayout for all store pages. Pins:
+ * - surface="interest" (warm candlelit tone — clearly a store, still on-brand)
+ * - storeNav (renders StoreNav, NOT the main NavBar — no cross-links)
+ * - noindex=true by default (store stays out of search until Greg is ready)
+ *
+ * Store pages pass their own title/description; everything else is defaulted
+ * here so each page stays short.
+ */
+import BaseLayout from '@layouts/BaseLayout.astro';
+
+interface Props {
+ title?: string;
+ description?: string;
+ ogImage?: string;
+ /** Override the default noindex=true if you want the store indexed. */
+ noindex?: boolean;
+}
+
+const {
+ title,
+ description = 'Greg Kilmer\u2019s store: clearly-marked proxy MTG cards and 3D-printed deck boxes & counters. Order requests by email.',
+ ogImage,
+ noindex = true,
+} = Astro.props;
+---
+
+
+
+
diff --git a/src/lib/env.ts b/src/lib/env.ts
index cb0d19c..5b080c0 100644
--- a/src/lib/env.ts
+++ b/src/lib/env.ts
@@ -79,6 +79,12 @@ export const smtpPass = (): string | undefined => env('SMTP_PASS');
/** Inbox that receives contact form submissions. */
export const contactTo = (): string | undefined => env('CONTACT_TO');
+/**
+ * Inbox that receives store order submissions. Falls back to CONTACT_TO so the
+ * store works without a separate inbox configured. Used by /api/order.
+ */
+export const orderTo = (): string | undefined => env('ORDER_TO') ?? contactTo();
+
/** From address for outgoing mail. */
export const smtpFrom = (): string | undefined => env('SMTP_FROM');
diff --git a/src/pages/api/order.ts b/src/pages/api/order.ts
new file mode 100644
index 0000000..99a6534
--- /dev/null
+++ b/src/pages/api/order.ts
@@ -0,0 +1,238 @@
+/**
+ * /api/order
+ * ---------------------------------------------------------------------------
+ * POST endpoint for store order requests. Pipeline mirrors /api/contact:
+ * 1. Reject non-POST.
+ * 2. HARD GATE: read store-availability.json; if ordersOpen is false, return
+ * 403 immediately. This enforces the lock server-side so it can't be
+ * bypassed by POSTing directly while the client form is hidden.
+ * 3. Validate JSON body with Zod.
+ * 4. Rate-limit per IP (in-memory windowed counter).
+ * 5. Verify Cloudflare Turnstile token (if TURNSTILE_SECRET_KEY is set).
+ * 6. Deliver via SMTP (nodemailer) if configured, else webhook, else 503.
+ *
+ * This collects an ORDER REQUEST only — no payment is processed. The payload is
+ * emailed to the configured inbox (ORDER_TO, falling back to CONTACT_TO).
+ */
+import type { APIRoute } from 'astro';
+import { z } from 'zod/v4';
+import {
+ contactWebhookUrl,
+ env,
+ orderTo,
+ smtpFrom,
+ smtpHost,
+ smtpPass,
+ smtpPort,
+ smtpUser,
+ turnstileSecretKey,
+} from '@lib/env';
+import { storeAvailability } from '@data/store-availability';
+
+// --- Validation schema ------------------------------------------------------
+const orderTypeEnum = z.enum(['cards', 'deckBoxes', 'both']);
+
+const schema = z.object({
+ name: z.string().min(1).max(120),
+ email: z.string().email().max(200),
+ orderType: orderTypeEnum.default('cards'),
+ quantity: z.string().min(1).max(200),
+ details: z.string().min(10).max(20000),
+ notes: z.string().max(5000).optional().or(z.literal('')),
+ // Policy acknowledgment checkbox must be ticked.
+ agree: z.literal(true),
+ // Honeypot: must be empty.
+ company: z.string().max(0).optional().or(z.literal('')),
+ // Turnstile token (required when TURNSTILE_SECRET_KEY is set).
+ turnstileToken: z.string().optional(),
+});
+
+// Human-readable label for the order type, used in the email subject/body.
+const orderTypeLabel: Record = {
+ cards: 'Proxy MTG cards',
+ deckBoxes: '3D-printed deck box / counters',
+ both: 'Cards + 3D prints',
+};
+
+// --- In-memory rate limiter (per worker) ------------------------------------
+// Separate counter namespace from /api/contact so order submits don't share
+// the contact budget. Tunables read via env helper for dev + Docker parity.
+const hits = new Map();
+
+function rateLimited(ip: string): boolean {
+ const rateWindowMin = Number(env('ORDER_RATE_WINDOW_MIN') ?? env('CONTACT_RATE_WINDOW_MIN') ?? 15);
+ const rateLimit = Number(env('ORDER_RATE_LIMIT') ?? env('CONTACT_RATE_LIMIT') ?? 5);
+ const now = Date.now();
+ const entry = hits.get(ip);
+ if (!entry || now > entry.reset) {
+ hits.set(ip, { count: 1, reset: now + rateWindowMin * 60_000 });
+ return false;
+ }
+ entry.count += 1;
+ return entry.count > rateLimit;
+}
+
+// --- Helpers ----------------------------------------------------------------
+function json(body: unknown, status: number) {
+ return new Response(JSON.stringify(body), {
+ status,
+ headers: { 'Content-Type': 'application/json' },
+ });
+}
+
+function clientIp(request: Request): string {
+ const fwd = request.headers.get('x-forwarded-for');
+ if (fwd) return fwd.split(',')[0]!.trim();
+ return request.headers.get('x-real-ip') ?? 'unknown';
+}
+
+// --- Turnstile verification (same logic as /api/contact) --------------------
+async function verifyTurnstile(token: string | undefined, ip: string): Promise {
+ const secret = turnstileSecretKey();
+ if (!secret) return true; // Turnstile not configured -> skip.
+ if (!token) return false;
+ try {
+ const form = new URLSearchParams();
+ form.set('secret', secret);
+ form.set('response', token);
+ if (ip && ip !== 'unknown') form.set('remoteip', ip);
+ const res = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+ method: 'POST',
+ body: form,
+ });
+ const data = (await res.json()) as { success: boolean };
+ return Boolean(data.success);
+ } catch (err) {
+ console.error('[order] turnstile verification failed:', err);
+ return false;
+ }
+}
+
+// --- Route handler ----------------------------------------------------------
+export const POST: APIRoute = async ({ request }) => {
+ if (request.method !== 'POST') {
+ return json({ error: 'Method not allowed.' }, 405);
+ }
+
+ // HARD GATE: orders closed -> reject before any other work. Re-reading the
+ // JSON module here reflects whatever Greg committed to the file at deploy.
+ if (!storeAvailability.ordersOpen) {
+ return json({ error: 'Orders are currently closed. Please check back soon.' }, 403);
+ }
+
+ // Parse + validate.
+ let payload: unknown;
+ try {
+ payload = await request.json();
+ } catch {
+ return json({ error: 'Invalid JSON body.' }, 400);
+ }
+ const parsed = schema.safeParse(payload);
+ if (!parsed.success) {
+ return json({ error: 'Please complete all fields correctly, including the policy acknowledgment.', issues: parsed.error.issues }, 400);
+ }
+ const { name, email, orderType, quantity, details, notes, turnstileToken } = parsed.data;
+
+ // Rate limit.
+ const ip = clientIp(request);
+ if (rateLimited(ip)) {
+ return json({ error: 'Too many submissions. Please try again later.' }, 429);
+ }
+
+ // Turnstile.
+ const turnstileOk = await verifyTurnstile(turnstileToken, ip);
+ if (!turnstileOk) {
+ return json({ error: 'Bot check failed. Please refresh and try again.' }, 400);
+ }
+
+ // Deliver.
+ try {
+ const delivered = await deliver({ name, email, orderType, quantity, details, notes: notes ?? '' });
+ if (!delivered) {
+ return json({ error: 'Order delivery is not configured yet. Please email me directly.' }, 503);
+ }
+ return json({ ok: true }, 200);
+ } catch (err) {
+ console.error('[order] delivery failed:', err);
+ return json({ error: 'Could not send your order right now. Please try again later.' }, 502);
+ }
+};
+
+// --- Delivery: SMTP first, webhook fallback ---------------------------------
+interface OrderMessage {
+ name: string;
+ email: string;
+ orderType: string;
+ quantity: string;
+ details: string;
+ notes: string;
+}
+
+async function deliver(msg: OrderMessage): Promise {
+ const host = smtpHost();
+ const webhook = contactWebhookUrl();
+ const typeLabel = orderTypeLabel[msg.orderType] ?? msg.orderType;
+
+ // Plain-text body for the email.
+ const text = [
+ `New store order request`,
+ ``,
+ `Name: ${msg.name}`,
+ `Email: ${msg.email}`,
+ `Order type: ${typeLabel}`,
+ `Approx quantity: ${msg.quantity}`,
+ ``,
+ `Details:`,
+ msg.details,
+ ``,
+ msg.notes ? `Notes:\n${msg.notes}` : '',
+ ].join('\n');
+
+ if (host) {
+ const nodemailer = (await import('nodemailer')).default;
+ const port = Number(smtpPort() ?? 587);
+ const user = smtpUser();
+ const allowSelfSigned = env('SMTP_ALLOW_SELFSIGNED') === 'true';
+ const transport = nodemailer.createTransport({
+ host,
+ port,
+ secure: port === 465,
+ auth: user ? { user, pass: smtpPass() } : undefined,
+ ...(allowSelfSigned ? { tls: { rejectUnauthorized: false } } : {}),
+ });
+ const hostname = (() => {
+ try {
+ return new URL(process.env.SITE_URL ?? 'https://gregkilmer.com').hostname;
+ } catch {
+ return 'gregkilmer.com';
+ }
+ })();
+ await transport.sendMail({
+ from: smtpFrom() ?? `Greg's Store `,
+ to: orderTo() ?? 'greg@gregkilmer.com',
+ replyTo: `${msg.name} <${msg.email}>`,
+ subject: `New store order — ${typeLabel} (${msg.name})`,
+ text,
+ });
+ return true;
+ }
+
+ if (webhook) {
+ const res = await fetch(webhook, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ text: `New store order from ${msg.name} (${msg.email}) — ${typeLabel}`,
+ name: msg.name,
+ email: msg.email,
+ orderType: typeLabel,
+ quantity: msg.quantity,
+ details: msg.details,
+ notes: msg.notes,
+ }),
+ });
+ return res.ok;
+ }
+
+ return false;
+}
diff --git a/src/pages/store/cards.astro b/src/pages/store/cards.astro
new file mode 100644
index 0000000..0db461b
--- /dev/null
+++ b/src/pages/store/cards.astro
@@ -0,0 +1,126 @@
+---
+/**
+ * /store/cards — Proxy MTG cards product line
+ * ---------------------------------------------------------------------------
+ * Order: back-link + title → live slot tracker → image carousel → specs →
+ * pricing → double-sided callout → key requirements → CTA.
+ *
+ * The carousel images + labels are managed server-side in store-products.ts
+ * (cardProduct.images). The specs block is image-free now; examples live in
+ * the carousel only.
+ */
+import StoreLayout from '@layouts/StoreLayout.astro';
+import Reveal from '@components/motion/Reveal.astro';
+import SectionHeader from '@components/layout/SectionHeader.astro';
+import Icon from '@components/Icon.astro';
+import Carousel from '@components/store/Carousel.tsx';
+import ProductCard from '@components/store/ProductCard.astro';
+import PricingTable from '@components/store/PricingTable.astro';
+import SlotMeter from '@components/store/SlotMeter.astro';
+import RequirementList from '@components/store/RequirementList.astro';
+import { cardProduct, requirements } from '@data/store-products';
+import { storeAvailability } from '@data/store-availability';
+
+const av = storeAvailability;
+const slot = av.slots[cardProduct.slotKey];
+// The double-sided rule is important enough to surface as its own callout.
+const doubleSided = requirements.find((r) => r.title.toLowerCase().includes('double-sided'))!;
+const keyReqs = requirements.filter((r) =>
+ r.title.toLowerCase().includes('card list')
+ || r.title.toLowerCase().includes('double-sided')
+ || r.title.toLowerCase().includes('proxies')
+ || r.title.toLowerCase().includes('custom'),
+);
+---
+
+
+
+ {/* Header */}
+
+
+
+
+ Back to store
+
+
+
+
+
+
+
+ {/* Live slot tracker for this product line (top of content). */}
+
+
+
+
+
+
+ {/* Image carousel (server-driven, swipeable). */}
+
+
+
+
+
+
+
+ {/* Specifications (no image — examples live in the carousel). */}
+
+
+
+
+
+
+
+ {/* Pricing */}
+
+
+
+
+
+
+
+ {/* Double-sided callout */}
+
+
+
diff --git a/src/pages/store/index.astro b/src/pages/store/index.astro
new file mode 100644
index 0000000..02c93b8
--- /dev/null
+++ b/src/pages/store/index.astro
@@ -0,0 +1,206 @@
+---
+/**
+ * /store — Storefront
+ * ---------------------------------------------------------------------------
+ * The store home: hero on the animated field, intro, the two product lines,
+ * live availability (slots) from store-availability.json, the disclaimer /
+ * requirements block, and a CTA to the order page.
+ *
+ * Reuses the main site's aesthetic (InterestHero-style hero, Reveal, cards)
+ * but is rendered through StoreLayout so it gets the store-only nav and
+ * noindex by default. No links back to the main site.
+ */
+import StoreLayout from '@layouts/StoreLayout.astro';
+import Reveal from '@components/motion/Reveal.astro';
+import SectionHeader from '@components/layout/SectionHeader.astro';
+import AnimatedBackground from '@components/hero/AnimatedBackground.tsx';
+import StarBurst from '@components/mystic/StarBurst.astro';
+import Icon from '@components/Icon.astro';
+import ProductTile from '@components/store/ProductTile.astro';
+import SlotMeter from '@components/store/SlotMeter.astro';
+import RequirementList from '@components/store/RequirementList.astro';
+import { cardProduct, deckBoxProduct, requirements } from '@data/store-products';
+import { storeAvailability } from '@data/store-availability';
+
+const av = storeAvailability;
+const orderHref = '/store/order';
+---
+
+
+ {/* --- Hero --- */}
+
+
+
+
+ The order form collects your request and emails it to me. No payment is taken through
+ the site. {av.ordersOpen ? '' : 'Orders are currently closed — check back soon.'}
+
+ This form sends me an order request by email. No payment is taken through the site.
+ {av.turnaround}
+
+
+
+
+ {/* Availability meters — shown first so visitors immediately see whether
+ there's capacity before reading the rest of the page. */}
+
+
+
+
+
+
+
+
+
+ {/* Open/closed status banner (under the meters). */}
+
+
+
+
+
+ {open ? 'Orders are open. Slots are limited.' : 'Orders are currently closed.'}
+
+
+
+ Updated {av.lastUpdated}
+
+
+
+
+
+ {/* Either the form (open) or the closed notice (no form). */}
+ {open ? (
+
+
+
+
Your request
+
+ Fill in the details below. Remember: the card list is final once received, and
+ double-sided cards count as 2 slots.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
Orders are not being taken right now
+
+ I open a limited number of slots at a time. Check back here — the meters above
+ show live availability, and the order form appears as soon as orders reopen. You can
+ also email me directly with questions.
+
+