Landing pages · React
Photography course
Dark sales page for a six-week online photography course with curriculum, student work, teacher bio and two plans.
What you get
A sales page for an online course: a dark hero with student work, course numbers, a week-by-week curriculum, a student gallery, the teacher's story, two plans, an FAQ and an enrolment 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": "Available Light", "nav": [ { "label": "Curriculum", "href": "#curriculum" }, { "label": "Your teacher", "href": "#teacher" }, { "label": "Pricing", "href": "#pricing" } ], "navCta": { "label": "Enrol", "href": "#pricing" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Online course · Next cohort starts 11 January 2027", "title": "Learn to see light, then learn to use it.", "text": "A six-week course in natural-light photography for people with any camera, including a phone. Short lessons, weekly assignments, and real critique from a working photographer.", "primary": { "label": "See plans", "href": "#pricing" }, "secondary": { "label": "What you'll learn", "href": "#curriculum" }, "visual": { "type": "tiles", "tones": [ "#78350f", "#a16207", "#44403c", "#292524" ], "caption": "Student work: window light, week 2" }, "note": "14-day refund, no questions asked." }, { "kind": "stats", "items": [ { "value": "6 weeks", "label": "About 3 hours a week" }, { "value": "24", "label": "Video lessons" }, { "value": "3,100", "label": "Students since 2021" }, { "value": "4", "label": "Live group critiques" } ] }, { "kind": "timeline", "id": "curriculum", "eyebrow": "Curriculum", "title": "Six weeks, one skill at a time", "items": [ { "period": "Week 1", "title": "Seeing direction", "text": "Front, side and back light. Assignment: one object, photographed every two hours." }, { "period": "Week 2", "title": "Window light", "text": "The most useful light you own. Portraits and still life without any kit." }, { "period": "Week 3", "title": "Golden and blue hour", "text": "Planning around the sun, and what to do when the weather won't cooperate." }, { "period": "Week 4", "title": "Hard light and shadow", "text": "Midday sun, graphic shapes, and exposing for the highlights." }, { "period": "Week 5", "title": "Light in the street", "text": "Reflections, open shade and working quickly with people in the frame." }, { "period": "Week 6", "title": "Your series", "text": "Edit and sequence a set of eight images for a final group critique." } ] }, { "kind": "gallery", "id": "work", "eyebrow": "Student work", "title": "Made by people in the last cohort", "text": "Shared with permission. Most were taken on a phone.", "items": [ { "title": "Kitchen, 7 am", "caption": "Ana P., week 2", "tone": "#78350f" }, { "title": "Stairwell", "caption": "Jonas K., week 4", "tone": "#3f3f46" }, { "title": "Low tide", "caption": "Mei L., week 3", "tone": "#a16207" }, { "title": "Market stall", "caption": "Sam O., week 5", "tone": "#57534e" }, { "title": "Grandfather", "caption": "Leila H., week 2", "tone": "#44403c" }, { "title": "Bus window", "caption": "Chris W., week 5", "tone": "#7c2d12" } ] }, { "kind": "split", "id": "teacher", "eyebrow": "Your teacher", "title": "Tomas Reyes, photographer for 18 years", "text": "Tomas shoots food and interiors for magazines and restaurants, almost always with available light. He started teaching in 2021 because most courses spent weeks on settings and minutes on light.", "bullets": [ "Gives written feedback on every assignment", "Runs the four live critiques himself", "Replies in the course forum within two working days" ], "visual": { "type": "card", "tone": "#292524", "title": "What Tomas shoots with", "lines": [ "One body, two prime lenses", "A white foam board", "A phone for scouting" ] }, "reverse": true }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Two ways to take the course", "plans": [ { "name": "Self-paced", "price": "$149", "text": "All lessons and assignments, at your own speed.", "features": [ "24 video lessons", "Downloadable assignment guides", "Course forum", "Lifetime access" ], "cta": { "label": "Enrol self-paced", "href": "#enrol" } }, { "name": "Cohort", "price": "$289", "text": "The full course with feedback and live critiques.", "features": [ "Everything in self-paced", "Written feedback on 6 assignments", "4 live group critiques", "Final portfolio review" ], "featured": true, "cta": { "label": "Join January cohort", "href": "#enrol" } } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Common questions", "items": [ { "q": "Do I need a proper camera?", "a": "No. Every assignment works with a recent phone. If you have a camera, you'll learn to use it better." }, { "q": "What if I miss a live critique?", "a": "Critiques are recorded, and you can submit work for written feedback instead." }, { "q": "How many people are in a cohort?", "a": "No more than 40, so every assignment gets read." }, { "q": "Can I get a refund?", "a": "Yes, within 14 days of the start date, for any reason." } ] }, { "kind": "cta", "title": "January cohort: 40 places", "text": "Enrolment closes on 4 January 2027 or when the cohort is full.", "primary": { "label": "Enrol now", "href": "#enrol" }, "secondary": { "label": "Compare plans", "href": "#pricing" } }, { "kind": "contact", "id": "enrol", "eyebrow": "Enrol", "title": "Reserve your place", "text": "Tell us which plan you'd like. We'll email a payment link and your welcome pack, with the first lesson unlocked straight away.", "fields": [ "name", "email", "message" ], "button": "Reserve my place" } ], "footer": { "text": "A six-week online course in natural-light photography.", "columns": [ { "title": "Course", "links": [ "Curriculum", "Student work", "Pricing" ] }, { "title": "Help", "links": [ "FAQ", "Refunds", "Contact" ] }, { "title": "Follow", "links": [ "Instagram", "Newsletter" ] } ], "legal": "© Available Light. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Photography course's files. The box is already started for you: finish “Start from Photography course 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 Photography course
Create a free account, start from this template, and ask the AI agent to turn it into your app.