Skip to content
codexa

Landing pages · React

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.

30-day running plan starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A sign-up page for a beginner running programme: a hero with day one's session, how the plan works, the plan week by week, the coach and a progress preview, runner quotes, an FAQ and an email sign-up. All content lives in src/site.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/landing-running-plan

src/site.ts
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = {  "brand": "Thirty Mornings",  "nav": [    {      "label": "How it works",      "href": "#how"    },    {      "label": "The plan",      "href": "#plan"    },    {      "label": "Coach",      "href": "#coach"    }  ],  "navCta": {    "label": "Start free",    "href": "#start"  },  "sections": [    {      "kind": "hero",      "variant": "split",      "eyebrow": "Free 30-day plan for beginners",      "title": "From walking to running 20 minutes, in 30 mornings.",      "text": "One short session a day, sent to your inbox at 6 am. Three days of running a week, gentle walks in between, and nothing that needs a gym.",      "primary": {        "label": "Send me day one",        "href": "#start"      },      "secondary": {        "label": "See the full plan",        "href": "#plan"      },      "visual": {        "type": "card",        "tone": "#9a3412",        "title": "Day 1 · 20 minutes",        "lines": [          "5 min brisk walk to warm up",          "6 × 1 min easy jog, 1.5 min walk",          "Stretch for 5 minutes"        ]      },      "note": "Free. One email a day for 30 days, then it stops."    },    {      "kind": "steps",      "id": "how",      "eyebrow": "How it works",      "title": "Built so you actually finish",      "items": [        {          "title": "One email at 6 am",          "text": "Today's session, how long it takes, and one tip. Readable in under a minute."        },        {          "title": "Run three days, walk two",          "text": "Running days are Monday, Wednesday and Saturday. Rest days are part of the plan."        },        {          "title": "Repeat a week if you need to",          "text": "Reply 'repeat' to any email and the plan quietly slides back a week. No guilt."        }      ]    },    {      "kind": "timeline",      "id": "plan",      "eyebrow": "The plan",      "title": "Thirty days, one step at a time",      "items": [        {          "period": "Days 1–7",          "title": "Find a rhythm",          "text": "Short jogs of one minute with longer walks. The goal is to finish feeling you could do more."        },        {          "period": "Days 8–14",          "title": "Longer intervals",          "text": "Jogs of two and three minutes. Most people notice their breathing settle this week."        },        {          "period": "Days 15–21",          "title": "Fewer walks",          "text": "Five-minute jogs with one-minute walks. Your first 10-minute continuous run on day 21."        },        {          "period": "Days 22–28",          "title": "Building time",          "text": "Continuous runs of 12, 15 and 17 minutes, at a pace where you can still talk."        },        {          "period": "Days 29–30",          "title": "Twenty minutes",          "text": "A rest day, then your first 20-minute run without stopping. And a plan for what's next."        }      ]    },    {      "kind": "split",      "id": "coach",      "eyebrow": "Your coach",      "title": "Written by Rachel Odum, running coach",      "text": "Rachel has coached beginner groups in parks for eleven years. Thirty Mornings is the plan she gives friends who say they 'aren't runners', tested with 400 of them before it was published.",      "bullets": [        "Qualified run leader and sports therapist",        "Every session tested with real beginners",        "Reply to any email and Rachel reads it"      ],      "visual": {        "type": "mock",        "title": "Your progress",        "rows": [          {            "label": "Day",            "value": "12 of 30"          },          {            "label": "Sessions done",            "value": "11",            "tone": "#047857"          },          {            "label": "Longest run",            "value": "3 min"          },          {            "label": "Next session",            "value": "Wed · 24 min"          }        ],        "footer": "Track it in the weekly summary email"      },      "reverse": true    },    {      "kind": "quotes",      "eyebrow": "Finishers",      "title": "People who said they weren't runners",      "items": [        {          "quote": "I repeated week two twice and still finished. Day 30 I cried a bit in the park.",          "name": "Debbie L.",          "role": "Finished in 37 days"        },        {          "quote": "The 6 am email is the trick. It's done before I've thought of an excuse.",          "name": "Imran S.",          "role": "Finished in 30 days"        },        {          "quote": "Ran my first parkrun a month later. Last place, very happy.",          "name": "Clare P.",          "role": "Finished in 32 days"        }      ]    },    {      "kind": "faq",      "eyebrow": "FAQ",      "title": "Before you start",      "items": [        {          "q": "I haven't exercised in years. Is this for me?",          "a": "Yes, it's written for exactly that. If you have a heart condition, joint problems or are unsure, check with your doctor before starting."        },        {          "q": "What do I need?",          "a": "Comfortable shoes you can jog in and 20 to 30 minutes. A watch or phone timer helps."        },        {          "q": "What if something hurts?",          "a": "Stop and rest. Mild muscle soreness is normal; sharp pain is not. Reply to any email and we'll suggest an easier version."        },        {          "q": "Is it really free?",          "a": "Yes. After day 30 we'll offer a paid 10K plan once. If you don't want it, that's the last you'll hear from us."        }      ]    },    {      "kind": "contact",      "id": "start",      "eyebrow": "Start",      "title": "Get day one tomorrow at 6 am",      "text": "Sign up today and your first session arrives tomorrow morning. Unsubscribe from any email.",      "fields": [        "name",        "email"      ],      "button": "Send me day one"    }  ],  "footer": {    "text": "A free 30-day plan from walking to running.",    "columns": [      {        "title": "Plan",        "links": [          "How it works",          "Week by week",          "After day 30"        ]      },      {        "title": "About",        "links": [          "Rachel Odum",          "Contact"        ]      },      {        "title": "Legal",        "links": [          "Health disclaimer",          "Privacy"        ]      }    ],    "legal": "© Thirty Mornings. Sample content: replace it in src/site.ts."  }};

Remix

Remix this template

Describe what to change and the agent starts from 30-day running plan's files. The box is already started for you: finish “Start from 30-day running plan and …”

Agent ready

Creates a free account first; your idea is carried over.

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.

All templates

Build on 30-day running plan

Create a free account, start from this template, and ask the AI agent to turn it into your app.