// Edit Me

Make it yours

in an afternoon.

Everything you need to change the text, the terminal, the art and the content. This page is hidden from search engines; delete it before you publish.

1. The terminal in the hero

The terminal is one code component called Terminal. Select it on the Home page and open Runs in the properties panel. Each run is one tab. You can have up to four.

Tab label, Repo · branch and Task are plain text. The task is typed out letter by letter. Steps take one line each, in the form Verb | detail | time. Read, Search and Plan get a blue dot, Edit gets amber, Run and Test get green. Numbers like +12 and −3 are coloured automatically.

Read | src/routes/login.ts | 0.3s
Edit | src/routes/login.ts +6 −2 | 0.8s
Run | npm test ✓ 42 passed | 6.4s

Diff lines start with + (added), - (removed) or a space (unchanged), then the line number, a bar, and the code. Summary and Done label fill the footer once the run finishes.

+ 13 | import { rateLimit } from “../middleware/rateLimit”;
- 21 | router.post(“/login”, handler);

Autoplay, Loop, Speed and Hold control the playback. Replay and the tabs are real buttons for visitors. Merge plays a short merged state; add a Merge link if you want it to go to a page instead. With reduced motion, on the canvas and before the script runs, the terminal shows the finished frame.

2. The activity grid

The grid on Home is made of plain frames, so it always renders, even with motion turned off. Change a square’s fill to change its state: light grey is queued, orange is running, an outline is in review and dark is merged. Orange squares pulse gently. Update the totals line underneath to match.

3. Courses, posts and FAQs

Content lives in three CMS collections. Courses has a number, file name, format, level, length, price, image and body. If you sell consulting or templates, rename the Courses page and nav link to Services and keep using the Format field. Posts powers the blog. FAQs feeds every FAQ list, in the order of the Order field.

4. The landscape art

The sunrise, dusk and night plates are still WebP images made from text characters. Replace any of them by selecting the frame and changing its fill image. They work best at 2x size: 3200 × 2400 for the hero, 1600 × 1000 for course images.

5. Colours and type

Colours are tokens in the Assets panel: Paper, Ink, Accent and the Term colours for dark panels. Type uses Geist Mono for text and Instrument Serif italic for big moments. Change a text style once and every page follows.

6. Forms and links

The newsletter and contact forms work out of the box. Connect them to your email tool or a webhook in the form settings. Every button already links to a page; swap in your checkout links on Pricing and course pages.

7. Before you publish

Change the copyright line in the footer, replace hello@example.com, update the site title and social image in Site Settings, and delete this page.

Create a free website with Framer, the website builder loved by startups, designers and agencies.