A dark, media-first design system for AI institutes, bootcamps, creator-led academies, and founder communities. Pure black base lit by a green glow rising from the bottom-left corner, one electric lime accent, two-tone headings, a floating pill navigation, large-radius cards, and a bi-directional photo marquee in the hero. Built around instructors you can see: program cards, free-resource book mockups, video testimonials, and course-by-field cards that all lead to one action, enroll.
What Is Edtech UI?
Edtech UI is a dark, media-first landing page system for education brands that sell through a visible instructor. It is built for AI institutes, bootcamps, founder communities, and cohort-based programs where the visitor needs to see a real person, see real people succeed, and be able to start for free before committing.
The Look
A black page lit from the bottom-left by a green glow. A single electric lime accent. Two-tone headings where the important words glow. A floating pill navigation, soft 24px cards, and a hero where rows of photos drift in opposite directions. The combination feels energetic and modern without being loud, closer to a creator brand than a university.
The Funnel Inside the Page
Every section has a job in a learner's decision:
- Hero marquee: this is a living community, not a static brochure.
- Programs: here is exactly what you can join, how long it takes, and who teaches it.
- Free resources: start now without paying, which builds trust and captures leads.
- Video testimonials: people like you, with names and platforms, vouch for it.
- Courses by field: find the version built for your profession and city.
- FAQ and final CTA: remove the last objections and ask once, clearly.
Why the Hero Marquee Matters
Static hero images tell visitors what the brand claims. A 50/50 hero gives the headline and the photo marquee equal space. A small, well-chosen library of learner and workshop photos can be reused across the three rows in different orders. The opposing row directions create motion without text competing for attention, leaving the left half free for one headline and one button. Because the tiles are real photographs with a unified dark treatment, the effect reads as authentic rather than decorative.
Using This Prompt With an AI Coding Agent
Give the agent this whole prompt plus your own content (brand, programs, resources,
testimonials, courses, and 6 to 8 images or Unsplash search terms). Ask it to build
section by section in the order listed, to use CSS-only marquee rows with duplicated
tracks, and to verify that every image URL loads before finishing. If your images are
not ready, tell the agent to use dark #1A1A1A tiles with the olive gradient as
temporary placeholders, so the layout and motion can be reviewed first.