Language school website
An online language school site “Dialogue” in a notebook spirit — warm white, ruling, ink blue and terracotta: a hero where a word flips between languages and a dialogue types on a notebook page, a level test with an A1–C1 scale, how lessons go in a bento with a glowing timeline needle, a group schedule with the “next start” from today, a vocabulary graph with a week slider, teacher polaroids with a “hear the accent” wave, pricing with a format switch and a receipt with a smooth price counter, reviews with a “before → after” scale, a trial lesson and a footer with contacts. Onest, Golos Text and Marck Script.
A school site that helps people start: a short test shows a level on the A1–C1 scale, then visitors see how lessons work, who teaches and what it costs. The school in the demo is fictional.
What it is made of
12 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Language school navbar with a handwritten caption and language chipsnavbar-039
A logo with a handwritten signature, EN·ES·IT chips, turns into a floating capsule on scroll.
2. First screen
Language school hero: a flipping word and a live lesson dialoguehero-039
A word flips between languages, a dialogue types on a notebook page.
3. Level test
Level test: five chip questions and an A1–C1 scale with a markerlanguage-001
Five chip questions, the page flips, an A1–C1 scale with a marker.
4. How lessons go
“How lessons work” bento: a lesson timeline, a photo and live tilesbento-008
A lesson timeline, a 70 % ring, self-writing homework, native-speaker chips.
5. Schedule
Group schedule: week × time, filters and “next start in N days”language-002
Week × time, filters, “next start in N days”.
6. Progress
Three-month progress: a vocabulary chart with a week sliderlanguage-003
A vocabulary curve draws itself, a week slider moves the point.
7. Teachers
Teachers: polaroids with a 3D tilt and “hear the accent”people-019
Polaroids with a 3D tilt, a “hear the accent” wave.
8. Pricing
School pricing: a format switch, a lessons-per-week slider and “us vs app vs tutor”pricing-031
Group / pair / one-to-one, a lessons slider, a receipt, a comparison.
9. Reviews
Student reviews with a “before → after” level on an A1–C1 scaletestimonials-031
Sheets with a “before → after” scale, the fill grows on scroll.
10. Trial lesson
Trial lesson: a form on a ruled sheet with floating labelscta-032
A form on a page with floating labels and language chips.
11. FAQ
FAQ accordion with a plus-to-cross togglefaq-023
An accordion with a plus-to-cross toggle.
12. Footer
School footer with ruled lines, contacts and a giant outlined wordfooter-038
Ruling, contacts, columns.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Language school website” page made of?
- 12 catalog sections in order: Language school navbar with a handwritten caption and language chips, Language school hero, Level test, “How lessons work” bento, Group schedule, Three-month progress, Teachers, School pricing, Student reviews with a “before → after” level on an A1–C1 scale, Trial lesson, FAQ accordion with a plus-to-cross toggle, School footer with ruled lines, contacts and a giant outlined word. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.