<aside> 💎
Chceš jít hlouběji? Podej si přihlášku a vydělávej kreativní prací, co tě baví - odkudkoliv! Začni s Webdesignem 🙌
Procesy, cenotvorba, klientský servis, positioning, mrkni na odkaz níže. Přihláška je nezávazná a zdarma.
👉 Přidej se na waitlist ZDE (klik)
P.S. Nebereme ale každého, proto je nutné přihlášku vyplnit na 100 % upřímně v rámci vlastní motivace.
</aside>
👇 ZKOPÍRUJ A VLOŽ DO CLAUDE/GEMINI/GPT 👇
Build a single-page hero section with a full-screen looping background video, liquid glass UI elements, fade-to-black edge overlays, and a dark cinematic aesthetic. Use React, TypeScript, Tailwind CSS, and Lucide React icons. Czech UI copy throughout. The layout MUST fit perfectly in a single viewport (100vh / 100dvh) on BOTH desktop and mobile — no scrolling required. The content stack must sit in the UPPER PORTION of the viewport, positioned ABOVE the video subject (not vertically centered) — leaving the bottom half clear for the cinematic video subject to breathe. Here are the exact specifications:
BACKGROUND VIDEO:
- Full-screen muted autoplaying video covering the entire viewport, positioned absolutely with object-cover, inset-0
- Video source URL: <https://kurz.ondrejdusek.com/wp-content/uploads/2026/05/Vibedesign-Hero-exp-fhd-MIN.webm>
- The video is shifted down by 17% on desktop (translate-y-[17%]) so the top portion is cropped — the interesting subject is in the lower portion of the frame
- On mobile (below md breakpoint), use translate-y-[0%] or slight adjustment — the goal is the subject visible in the lower portion of the screen
- The video is a PRE-RENDERED SEAMLESS LOOP — use a simple native loop: <video autoPlay muted loop playsInline> with the WebM source. No JavaScript fade system needed.
- The outer container is h-screen w-screen bg-black with overflow-hidden — use h-[100dvh] on mobile to handle iOS Safari URL bar properly
FADE-TO-BLACK EDGE OVERLAY:
- An absolutely positioned div covering the entire viewport (absolute inset-0 pointer-events-none z-[5]), placed directly above the video element but below all UI content
- Use multi-layered CSS background gradients (inline style):
background: `
linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 35%),
linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 12%),
linear-gradient(to left, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 12%),
linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 10%)
`
FONT:
- Import Google Font "Instrument Serif" (both regular and italic) via CSS @import url('<https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap>')
- The heading uses fontFamily: "'Instrument Serif', serif" applied via inline style
- Body and UI text uses the system UI sans-serif stack (default Tailwind font-sans)
LIQUID GLASS CSS (.liquid-glass class):
- background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity
- backdrop-filter: blur(4px) and -webkit-backdrop-filter: blur(4px)
- border: none
- box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)
- position: relative; overflow: hidden
- A ::before pseudo-element creates the glass border effect:
position: absolute; inset: 0; border-radius: inherit; padding: 1.4px
background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)
Mask trick for border-only rendering: -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude
pointer-events: none
EXTERNAL LINK TARGET:
All interactive elements (logo, waitlist button, email submit, rating pill) link to: <https://webdesignhero.cz/>
- Wrap each in <a href="<https://webdesignhero.cz/>" target="_blank" rel="noopener noreferrer">
- All clickable elements should have cursor-pointer
LAYOUT — VIEWPORT-LOCKED + CONTENT POSITIONED IN UPPER HALF:
The outer container is h-screen h-[100dvh] w-screen flex flex-col overflow-hidden bg-black.
Structure:
1. <nav> flex-shrink-0 (top, fixed height)
2. <main> flex-1 flex flex-col items-center pt-8 md:pt-12 — content STARTS FROM TOP with padding, NOT vertically centered. The content stack stays in the upper portion of the viewport, leaving the lower half open for the video subject to remain visually clear.
CRITICAL POSITIONING NOTE: Do NOT use justify-center on the main content area. The content should naturally sit at the top with padding, anchored to the upper third of the screen. The video subject (person + spiral) lives in the lower half. This creates visual hierarchy where text content reads first, video provides ambient depth below.
NAVIGATION BAR (relative z-20, p-4 md:py-6 md:px-6, flex-shrink-0):
- Inner container: flex items-center justify-between max-w-5xl mx-auto w-full
- Left side: PNG logo image from <https://kurz.ondrejdusek.com/wp-content/uploads/2026/05/vhero.png> — render as <img> with alt="Vibedesign Hero", height h-8 md:h-10, width auto, object-contain. Wrap in <a> linking to webdesignhero.cz
- Right side: SINGLE button "Přidat se na waitlist" — liquid-glass rounded-full px-4 py-2 md:px-6 md:py-2.5 text-white text-xs md:text-sm font-medium whitespace-nowrap, wrapped in <a> linking to webdesignhero.cz
HERO CONTENT (relative z-10 flex-1 flex flex-col items-center pt-6 md:pt-10 px-4 md:px-6 text-center min-h-0):
CONTENT ORDER (top to bottom, positioned in UPPER portion of viewport):
1. RATING PILL (mb-5 md:mb-7):
- liquid-glass rounded-full px-4 py-2 md:px-5 md:py-2.5 inline-flex items-center gap-2
- Star icon from lucide-react (size 14) with fill="#FBBF24" stroke="#FBBF24"
- Text: text-white text-xs md:text-sm — "4.9 z 5 průměrné hodnocení"
- Wrap in <a> linking to webdesignhero.cz
2. HEADING with PERFECT TYPOGRAPHIC BALANCE:
"Nauč se strategický AI design,
100% bez kódu"
- Two-line balanced wrap, BREAK AFTER COMMA. The line break is HARD-CODED via <br /> tag (not relying on natural wrapping) to ensure consistent typographic rhythm.
- Structure: <h1>Nauč se strategický <span className="italic">AI design</span>,<br /><span className="italic">100% bez kódu</span></h1>
- Italic on "AI design" AND "100% bez kódu" — the regular-italic alternation creates visual rhythm
- Sizing: text-4xl sm:text-5xl md:text-6xl lg:text-7xl
- text-white tracking-tight leading-[1.05] mb-6 md:mb-8
- Apply Instrument Serif via inline style: fontFamily: "'Instrument Serif', serif"
- max-w-5xl mx-auto on the h1 to prevent text from getting too wide on ultra-wide screens
- On mobile, the <br /> still produces a clean two-line break; if "Nauč se strategický AI design," gets too long for mobile width, allow natural wrapping while keeping the manual break point after the comma
- DO NOT use text-balance or text-wrap CSS — the manual <br /> handles it
3. BENEFITS ROW (mb-6 md:mb-8, flex flex-wrap items-center justify-center gap-x-6 md:gap-x-8 gap-y-2 md:gap-y-3):
Three benefit items, each:
- flex items-center gap-2
- Icon: Check icon from lucide-react (size 14 md:size 16) inside a glass-style circle: rounded-full bg-white/[0.08] border border-white/25 w-[20px] h-[20px] md:w-[22px] md:h-[22px] flex items-center justify-center flex-shrink-0
- Label: text-white/90 text-xs md:text-sm font-medium whitespace-nowrap
Final Czech copy:
- "Získej nejnovější AI workflows"
- "12.400+ odběratelů"
- "0 bullshit"
4. EMAIL INPUT BAR (max-w-xl w-full):
- liquid-glass rounded-full pl-4 md:pl-6 pr-2 py-2 flex items-center gap-3
- Inside: transparent email input (placeholder: "Zadejte svůj email", className: bg-transparent flex-1 outline-none text-white placeholder:text-white/40 text-sm md:text-base min-w-0)
- White circular submit button: bg-white rounded-full p-2.5 md:p-3 text-black hover:bg-white/90 transition-colors flex-shrink-0, containing ArrowRight icon (size 18 md:size 20). On click, redirect to webdesignhero.cz
NO SOCIAL ICONS FOOTER. NO MANIFESTO BUTTON. The email input is the last content element. Below the email input is just open space (showing the video subject through the fade gradient).
CRITICAL MOBILE OPTIMIZATION:
- The entire hero (nav + content) MUST fit in 100dvh on mobile without scrolling
- Content sits in the UPPER half of the viewport (pt-6 md:pt-10 below nav, no vertical centering)
- Headline scales: text-4xl mobile → text-7xl on lg
- The <br /> in the headline produces a clean two-line break across all viewports
- Benefits row stays horizontal in flex-wrap with small gaps — never stacks vertically into a column unless truly necessary
- Test viewport: should work on iPhone SE (375x667) through 1920x1080+ and ultrawide
- Use h-[100dvh] for mobile to handle iOS Safari dynamic viewport correctly
TYPOGRAPHIC BALANCE PRINCIPLES (UI DESIGNER MINDSET):
- The two-line headline creates near-equal visual mass on both lines: "Nauč se strategický AI design," is approximately the same character width as "100% bez kódu" when sized to fit naturally — the comma + line break enforce a clean caesura that reads like premium editorial typography
- Italic emphasis on "AI design" + "100% bez kódu" alternates with regular weight — this rhythm is the visual hook (Instrument Serif italic is highly distinctive)
- Optical alignment: the rating pill, headline, benefits row, and input are all horizontally centered with consistent vertical rhythm (mb-5/6/7/8 progression)
- Negative space below the email input is INTENTIONAL — it lets the looping video subject become the visual anchor of the lower half
TECH STACK: Vite + React 18 + TypeScript, Tailwind CSS 3, lucide-react for all icons (Check, ArrowRight, Star). Default Tailwind config. No other UI libraries.
Z-INDEX STACKING (bottom to top):
- Video: z-0
- Fade-to-black overlay: z-[5] (pointer-events-none)
- Navigation: z-20
- Hero content: z-10
The end result: a single locked-to-viewport hero (no scroll, fits exactly in 100dvh on both mobile and desktop), with content stack anchored to the upper portion (not vertically centered), looping cinematic video filling the lower visual space, glass-treated UI elements, Czech copy with hard-coded two-line headline break "Nauč se strategický AI design, / 100% bez kódu" with italic emphasis on both highlighted phrases, all interactive elements link to webdesignhero.cz, and edge-fade gradients smoothing the video into surrounding black. Visual rhythm follows premium editorial typography conventions — content reads first, video provides cinematic depth below.