SaaS · React
Appointment scheduling
Marketing site for a booking-link tool with a live calendar mock, pricing, setup steps and an FAQ.
What you get
A product site for an appointment scheduling app: a hero with today's bookings, features, a three-step setup, a reminders section, monthly pricing, customer quotes and an FAQ. 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": "Slotwise", "nav": [ { "label": "Features", "href": "#features" }, { "label": "How it works", "href": "#how" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Start free", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Scheduling for people who meet clients", "title": "Share one link. Stop trading emails about Tuesday.", "text": "Clients pick a time that is actually free across your calendars, pay a deposit if you ask for one, and get a reminder the day before. You get your afternoons back.", "primary": { "label": "Create your booking page", "href": "#start" }, "secondary": { "label": "See pricing", "href": "#pricing" }, "visual": { "type": "mock", "title": "Today · Thursday 14 May", "rows": [ { "label": "09:30 Intro call · Dana Whitfield", "value": "30 min", "tone": "#0f766e" }, { "label": "11:00 Follow-up · Marcus Lee", "value": "45 min", "tone": "#0f766e" }, { "label": "13:15 Buffer (auto)", "value": "15 min", "tone": "#94a3b8" }, { "label": "14:00 Strategy session · Ines Varga", "value": "Deposit paid", "tone": "#047857" }, { "label": "16:30 Rescheduled by client", "value": "Moved to Fri", "tone": "#b45309" } ], "footer": "3 open slots left this week · Reminders sent at 9:00" }, "note": "Free for one calendar and one booking type. No card needed." }, { "kind": "features", "id": "features", "eyebrow": "Features", "title": "The boring parts of booking, handled", "text": "Everything a consultant, tutor or clinic needs to take bookings without a receptionist.", "columns": 3, "items": [ { "title": "Calendar sync", "text": "Connects to Google, Outlook and iCloud calendars and checks all of them before offering a slot.", "icon": "calendar" }, { "title": "Buffers and limits", "text": "Add breathing room between meetings and cap how many bookings you take in a day.", "icon": "clock" }, { "title": "Time zones, solved", "text": "Visitors see slots in their own time zone. Confirmations show both.", "icon": "globe" }, { "title": "Deposits and no-show fees", "text": "Take a card at booking and charge only if someone misses the appointment.", "icon": "lock" }, { "title": "Reminders by email and SMS", "text": "Sent 24 hours and 1 hour before, with a one-tap reschedule link.", "icon": "mail" }, { "title": "Team routing", "text": "Round-robin or by specialty, so new enquiries land with the right person.", "icon": "users" } ] }, { "kind": "steps", "id": "how", "eyebrow": "How it works", "title": "Live in about ten minutes", "items": [ { "title": "Connect your calendar", "text": "Slotwise reads your busy times only. It never shows event details to visitors." }, { "title": "Set your hours and meeting types", "text": "Choose lengths, buffers, questions to ask and whether to take a deposit." }, { "title": "Share your link", "text": "Put it in your email signature, on your site, or send it after a first call." } ] }, { "kind": "split", "eyebrow": "Fewer no-shows", "title": "Reminders that people actually read", "text": "Short, plain messages with the time in the client's own zone and a link to move the meeting instead of skipping it.", "bullets": [ "Custom wording per meeting type", "Reschedule link respects your availability", "Weekly digest of upcoming bookings" ], "visual": { "type": "card", "tone": "#134e4a", "title": "Reminder · tomorrow 14:00", "lines": [ "Strategy session with Ines", "Video link attached", "Need to move it? One tap" ] }, "reverse": true }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Simple monthly plans", "text": "Prices per user, billed monthly. Cancel any time.", "plans": [ { "name": "Solo", "price": "$0", "period": "/month", "text": "For trying it out or light use.", "features": [ "1 calendar", "1 booking type", "Email reminders" ], "cta": { "label": "Start free", "href": "#start" } }, { "name": "Pro", "price": "$12", "period": "/month", "text": "For people who book clients every day.", "features": [ "6 calendars", "Unlimited booking types", "SMS reminders", "Deposits and no-show fees" ], "featured": true, "cta": { "label": "Try Pro free for 14 days", "href": "#start" } }, { "name": "Team", "price": "$20", "period": "/month", "text": "For practices and small agencies.", "features": [ "Everything in Pro", "Round-robin routing", "Shared team page", "Admin controls" ], "cta": { "label": "Set up a team", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "From customers", "title": "Less admin, more appointments", "items": [ { "quote": "I used to spend Monday mornings confirming the week. Now the confirmations go out without me.", "name": "Hannah K.", "role": "Physiotherapist" }, { "quote": "The deposit option cut our no-shows roughly in half within a couple of months.", "name": "Óscar P.", "role": "Owner, tutoring practice" }, { "quote": "Clients in three time zones and nobody has turned up an hour early since.", "name": "Leah M.", "role": "Independent consultant" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions, answered", "items": [ { "q": "Can visitors see what's in my calendar?", "a": "No. Slotwise only reads whether a time is busy or free. Titles, attendees and notes stay private." }, { "q": "Which payment providers do deposits use?", "a": "Deposits go through your own Stripe account, so money lands with you directly." }, { "q": "Do SMS reminders cost extra?", "a": "Pro and Team include 300 SMS per user each month. Beyond that, texts are billed at cost." }, { "q": "Can I embed the booking page on my site?", "a": "Yes. Copy a snippet for an inline calendar or a pop-up button." } ] }, { "kind": "cta", "id": "start", "title": "Your next booking can be the first one you didn't chase", "text": "Set up your page now and send the link with your next email.", "primary": { "label": "Create your booking page", "href": "#pricing" }, "secondary": { "label": "Read the FAQ", "href": "#faq" } } ], "footer": { "text": "Booking pages, reminders and deposits for independent professionals.", "columns": [ { "title": "Product", "links": [ "Features", "Pricing", "Integrations" ] }, { "title": "Company", "links": [ "About", "Contact", "Status" ] } ], "legal": "© Slotwise. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Appointment scheduling's files. The box is already started for you: finish “Start from Appointment scheduling 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
Error monitoring
Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.
Product analytics
Crisp site for a product analytics tool with a funnel mock, retention features, event pricing and FAQ.
- Featured
SaaS starter
Marketing pages, sign-in and sign-up screens, and an authenticated app area with a mocked session you replace with real auth.
Build on Appointment scheduling
Create a free account, start from this template, and ask the AI agent to turn it into your app.