Landing pages · React
Coffee subscription
Warm subscription page for a small-batch coffee roaster with this month's beans, three plans, roasting story and reviews.
What you get
A subscription page for a coffee roaster: an editorial hero, how the subscription works, this month's filter and espresso coffees with prices, three plans, the roastery story, customer quotes, an FAQ and a closing call to action. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Low Tide Coffee", "nav": [ { "label": "How it works", "href": "#how" }, { "label": "This month", "href": "#beans" }, { "label": "Plans", "href": "#plans" } ], "navCta": { "label": "Subscribe", "href": "#plans" }, "sections": [ { "kind": "hero", "variant": "editorial", "eyebrow": "Coffee subscription · Roasted in Portland, Maine", "title": "Fresh coffee through the letterbox, every two weeks.", "text": "Two seasonal coffees a month, roasted on Tuesday and shipped on Wednesday. Pick whole bean or ground for your brewer, and change, skip or pause whenever you like.", "primary": { "label": "Choose a plan", "href": "#plans" }, "secondary": { "label": "This month's coffees", "href": "#beans" }, "visual": { "type": "tiles", "tones": [ "#78350f", "#b45309", "#44403c", "#292524" ], "caption": "Roasted Tuesday, shipped Wednesday" } }, { "kind": "steps", "id": "how", "eyebrow": "How it works", "title": "Three choices, then we handle it", "items": [ { "title": "Pick a plan", "text": "One bag, two bags or a kilo for the office, every two or four weeks." }, { "title": "Tell us how you brew", "text": "Whole bean, or ground for espresso, filter, cafetière or stovetop." }, { "title": "We roast and ship", "text": "Your coffee leaves the roastery the day after roasting, in a letterbox-sized box." } ] }, { "kind": "menu", "id": "beans", "eyebrow": "November", "title": "This month's coffees", "text": "Prices per 250 g bag. Subscribers get both, alternating each delivery.", "groups": [ { "name": "Filter", "items": [ { "name": "Kiambu AA, Kenya", "text": "Blackcurrant, grapefruit, brown sugar", "price": "$19" }, { "name": "Finca El Mirador, Colombia", "text": "Red apple, caramel, cocoa", "price": "$17" } ] }, { "name": "Espresso", "items": [ { "name": "Harbour blend", "text": "Brazil and Guatemala. Milk chocolate, hazelnut", "price": "$16" }, { "name": "Sidamo natural, Ethiopia", "text": "Strawberry, dark chocolate, jasmine", "price": "$18" } ] } ] }, { "kind": "pricing", "id": "plans", "eyebrow": "Plans", "title": "Choose how much coffee", "text": "Shipping included. Pause, skip or cancel online.", "plans": [ { "name": "One bag", "price": "$17", "period": "/delivery", "text": "250 g every two or four weeks.", "features": [ "Rotating seasonal coffee", "Whole bean or ground", "Free shipping" ], "cta": { "label": "Start with one bag", "href": "#subscribe" } }, { "name": "Two bags", "price": "$31", "period": "/delivery", "text": "Both of this month's coffees.", "features": [ "One filter, one espresso", "Whole bean or ground", "Free shipping", "Tasting notes card" ], "featured": true, "cta": { "label": "Start with two bags", "href": "#subscribe" } }, { "name": "Office kilo", "price": "$58", "period": "/delivery", "text": "1 kg of the house blend.", "features": [ "Harbour blend, whole bean", "Weekly or fortnightly", "One invoice a month" ], "cta": { "label": "Set up for the office", "href": "#subscribe" } } ] }, { "kind": "split", "id": "roastery", "eyebrow": "The roastery", "title": "A 15 kg roaster in an old boatyard", "text": "Low Tide is two roasters and a packer working out of a former boatyard shed. We buy from the same farms year after year and roast small batches so nothing sits on a shelf.", "bullets": [ "Every coffee roasted to order", "Farm-gate prices published for every lot", "Compostable bags and paper tape" ], "visual": { "type": "card", "tone": "#78350f", "title": "This week at the roastery", "lines": [ "Roasting: Tuesday from 6 am", "Shipping: Wednesday by noon", "Cupping open to all: Friday 4 pm" ] }, "reverse": true }, { "kind": "quotes", "eyebrow": "Subscribers", "title": "What arrives in other people's mugs", "items": [ { "quote": "It's the freshness. The bag still puffs when I open it on Thursday.", "name": "Erin C.", "role": "Two bags, every two weeks" }, { "quote": "Our office voted to keep it over the pod machine. Unanimously, which never happens.", "name": "Dev P.", "role": "Office kilo subscriber" }, { "quote": "The Kenya last spring was the best coffee I've had at home.", "name": "Mike H.", "role": "Subscriber since 2023" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions", "items": [ { "q": "Do you ship nationwide?", "a": "Yes, anywhere in the continental US, with free shipping on every subscription." }, { "q": "Can I choose a specific coffee?", "a": "Subscriptions rotate, but you can lock in a favourite from your account for any delivery." }, { "q": "How do I pause?", "a": "From your account, any time up to the Sunday before your next delivery." } ] }, { "kind": "cta", "title": "First bag ships next Wednesday", "text": "Subscribe by Sunday and your coffee is roasted on Tuesday.", "primary": { "label": "Subscribe", "href": "#subscribe" }, "secondary": { "label": "See this month's coffees", "href": "#beans" } }, { "kind": "contact", "id": "subscribe", "eyebrow": "Subscribe", "title": "Start your subscription", "text": "Tell us your plan and how you brew. We'll send a secure checkout link, and your first bag ships the Wednesday after.", "fields": [ "name", "email", "message" ], "button": "Start my subscription" } ], "footer": { "text": "Small-batch coffee roasted in a former boatyard shed.", "columns": [ { "title": "Coffee", "links": [ "Subscriptions", "This month", "Gift subscriptions" ] }, { "title": "Roastery", "links": [ "Our farms", "Friday cupping", "Wholesale" ] }, { "title": "Help", "links": [ "Shipping", "Brew guides", "Contact" ] } ], "legal": "© Low Tide Coffee. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Coffee subscription's files. The box is already started for you: finish “Start from Coffee subscription and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Budgeting app launch
Launch page for a household budgeting app with a live budget mock, pricing, beta reviews and an early-access form.
Design conference
Bold two-day design conference page with speakers, programme, venue, ticket tiers and an FAQ, ready for ticket sales.
30-day running plan
Friendly sign-up page for a free 30-day plan that takes beginners from walking to running 20 minutes without stopping.
Build on Coffee subscription
Create a free account, start from this template, and ask the AI agent to turn it into your app.