| name | codenest-coding-platform |
| description | Use this plugin when the user wants a high-end, dark cinematic hero section for a coding-education / bootcamp landing page (CodeNest): full-screen HLS background video, liquid-glass card, green-accent typography, and a working mobile hamburger menu. Invoke for 'coding bootcamp hero', 'dev course landing page', 'liquid glass hero', 'video background hero', or when the user references the CodeNest template. |
| version | 0.1.0 |
| od | {"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}} |
CodeNest — Coding Platform Hero
Produce a high-end, dark-themed hero section for a coding-education platform called CodeNest. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, liquid-glass treatment, glow, grid lines, video wiring, and responsive behavior described below.
This is the authoritative build brief. Follow it exactly — the named colors, fonts, video stream, and effects are locked.
Stack
- Default output: a single self-contained HTML file (the
example.html seed). It includes everything inline (CSS + vanilla JS) and loads hls.js from a CDN.
- If the user explicitly asks for a React + Tailwind project, port the seed faithfully: same tokens, same markup structure,
lucide-react for icons (ArrowRight, Menu, X), Inter / Plus Jakarta Sans / Instrument Serif (italic) from Google Fonts, and hls.js for the video. Do not change the design while porting.
Background video (keep remote — do NOT inline)
- Full-screen background video via the HLS stream
https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8.
- Use
hls.js with enableWorker: false for sandbox stability. If the browser supports native HLS (video.canPlayType('application/vnd.apple.mpegurl')), assign video.src directly; otherwise attach via new Hls({ enableWorker: false }).
<video autoplay muted loop playsinline>, object-fit: cover, fixed full-screen, opacity 0.6.- This large CDN media stays a remote URL — never inline an HLS stream.
Overlays & atmosphere
- Left gradient:
linear-gradient(to right, #070b0a 0%, rgba(7,11,10,0.55) 35%, transparent 70%).
- Bottom-up gradient:
linear-gradient(to top, #070b0a 0%, rgba(7,11,10,0.4) 30%, transparent 60%) for readability.
- Grid system: three thin vertical lines,
rgba(255,255,255,0.10), 1px wide, positioned at 25% / 50% / 75%. Visible on desktop only (min-width: 900px).
- Central glow: a large horizontal SVG ellipse glow in the center-top area, cyan/dark-green hue, with a 25px Gaussian blur (
feGaussianBlur stdDeviation="25"). Implemented as an inline <svg> with a radialGradient (#5ed29c → #1f7a5a → transparent) and filter (the blur), positioned top: 4%; left: 50%; translateX(-50%).
Liquid Glass Card
- 200×200px floating card positioned above the headline, shifted up via
transform: translateY(-50px).
- CSS:
background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.backdrop-filter: blur(4px).box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).
- Border effect: a
::before pseudo-element with inset: 0, padding: 1.4px, a 180° white linear gradient, and -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) + -webkit-mask-composite: xor; mask-composite: exclude to draw a sharp 1.4px border frame.
- Content:
[ 2025 ] tag (14px) · headline Taught by <em>Industry</em> Professionals (18px, the word Industry in Instrument Serif italic) · small description (11px, muted).
Hero content & typography
- Eyebrow:
Career-Ready Curriculum — Plus Jakarta Sans, bold, 11px, uppercase, letter-spacing ~0.16em, color #5ed29c.
- Main headline:
LAUNCH YOUR CODING CAREER. — Inter ExtraBold (800), uppercase, letter-spacing: -0.03em, line-height ~0.98. Scale clamp(40px, 8vw, 72px) (40px mobile → 72px desktop). The final period must be green #5ed29c (wrap it in a .dot span).
- Description:
Master in-demand coding skills... — Inter, 14px, rgba(255,255,255,0.7), max-width: 512px.
- Primary CTA:
Get Started button with an ArrowRight icon. border-radius: 999px, background #5ed29c, text #070b0a, uppercase, bold.
Global navigation
- Header: absolute/sticky at top, transparent over the video. White minimalist logo (inline
</> chevron SVG + wordmark).
- Desktop menu: links
PROJECTS, BLOG, ABOUT, RESUME in Inter 16px; hover color #5ed29c. Shown at min-width: 900px.
- Mobile menu: a functional hamburger (
Menu icon) that toggles a full-screen dark overlay (X to close) listing the same links. JS toggles an .open class; closing also happens on link click.
Required imports
- Fonts: Inter (400–800), Plus Jakarta Sans (600–800), Instrument Serif (italic) from Google Fonts.
- Icons: inline SVG in the seed (in a React port use
lucide-react: ArrowRight, Menu, X).
- Library:
hls.js (CDN in the seed) for the video stream.
Animation / interaction (vanilla seed → framework map)
- CTA hover:
translateY(-2px) + green glow shadow.
- Nav-link hover: color →
#5ed29c.
- Mobile menu: class toggle drives an opacity/pointer-events transition (in React:
useState boolean).
- Video autoplay is wired on
canplay and immediately, with a guarded play().catch() so a blocked autoplay never throws.
Responsive
< 900px: hide desktop nav and grid lines, show hamburger; headline scales down toward 40px via the clamp.≥ 900px: desktop nav inline, vertical grid lines visible.
Color rules — hard
- Locked palette: base
#070b0a, single green accent #5ed29c (and its darker companion #1f7a5a only inside the glow gradient), neutral whites at reduced opacity. Avoid purple/indigo entirely. Do not substitute the green accent with teal/blue/lime — #5ed29c is locked.
