PromptSites

Kup pakiet — 99 zł

50 szablonów • ChatGPT • Claude

Gotowa strona WWW
z jednej komendy

Wklej komendę do ChatGPT lub Claude — i masz profesjonalną, animowaną stronę w 60 sekund. Zero kodowania.

50

Szablonów

99 zł

Pakiet wszystkich

60s

Czas generowania

100%

Twój kod

Jak to działa?

Od podglądu do gotowej strony w 3 krokach

Krok 01

Wybierz szablon

Przeglądaj galerię, kliknij "Podgląd" i wybierz styl który Ci pasuje. Każdy szablon możesz zobaczyć w pełnym rozmiarze.

Krok 02

Skopiuj komendę

Po zakupie pakietu klikasz "Kopiuj komendę". W sekcji na górze wpisujesz swoje dane — nazwę, opis, kontakt.

Krok 03

Wklej do ChatGPT lub Claude

Wklejasz komendę z Twoimi danymi i w 60 sekund masz gotową, profesjonalną stronę — identyczną jak w podglądzie.

Krok 04

Gotowe — Twoja strona

Pobierasz kod HTML, wrzucasz na hosting lub przekazujesz klientowi. Zero programowania, zero Bolt.new, zero komplikacji.

Jednorazowy zakup

Pakiet 50 komend
do stron WWW

Jeden zakup — dostęp do wszystkich szablonów na zawsze. Wklej do ChatGPT lub Claude i masz gotową stronę w 60 sekund.

99 zł jednorazowo

50 gotowych komend do stron WWW
Działa w ChatGPT i Claude — bez Bolt.new
Wynik identyczny jak podgląd na stronie
Podmień swoje dane → gotowa strona w 60s
Nowe szablony w pakiecie bez dopłat
Dostęp na zawsze — bez subskrypcji

Kup pakiet — 99 zł →

Po zakupie otrzymasz email z dostępem do wszystkich komend

PromptSites – Teksty prompt

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa aplikacji: Drift → np. Focus
Hasło hero (linia 1): "Own your time" → np. "Reclaim your focus"
Hasło hero (linia 2): "without the stress" → np. "without the chaos"
Podtytuł: "Drift is a calm, ADHD-friendly planner..." → swój opis
Tekst CTA bar: "No noise. No complicated systems. Just your day, gently sorted." → swój
Tekst przycisku CTA: "Start for free" → np. "Try it free"
Nav linki: Features / Drift AI / FAQ → swoje sekcje
Kolory: bg-[#F6E4CF] / #321C04 / #D9C4AA → swoja paleta
Tekst sekcji About: "We craft tools that move with your rhythm..." → swój
Heading features: "Software that flows with your mind, not over it" → swój
Opis funkcji 1: "Built for ease, not urgency" + opis → swój
Opis funkcji 2: "The gentlest way to start" + opis → swój
Opis funkcji 3: "Deep, undivided focus" + opis → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page landing site for "Drift" -- a calm, ADHD-friendly planner app. Use React + Vite + TypeScript + Tailwind CSS + lucide-react for icons. No other UI libraries.

### Fonts
Import via Google Fonts in index.css:
- Inter (weights 400, 500, 600)
- Instrument Serif (italic only)

Body: font-family: 'Inter', sans-serif; with antialiased rendering. overflow-x: clip on body.

### Color Palette
- Hero overlay: bg-black/20
- About section background: #F6E4CF
- Dark text / icons in About: #321C04
- Light cream (button backgrounds in About): #FFF9F2
- Muted accent (divider, secondary button bg): #D9C4AA
- Secondary button hover: #CEBA9E
- Dark button hover: #1F1003

### Tailwind Config
Add a custom keyframe fade-in-down (0%: opacity 0, translateY -8px; 100%: opacity 1, translateY 0) with 0.2s ease-out animation.

### SECTION 1: HERO (full viewport height)
- Full-screen section (h-screen, overflow-hidden, mb-[-25px])
- Background video (autoPlay, muted, loop, playsInline, object-cover, absolute inset-0):
  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260711_090308_1dd0cea7-f9ba-4db4-8147-c7d746061c9e.mp4
- Semi-transparent overlay: absolute inset-0 bg-black/20

#### Navbar (centered floating pill)
- Positioned absolute top-6 left-1/2 -translate-x-1/2 z-50
- White rounded-full pill with shadow-lg:
  - Brand text "Drift." (text-lg, font-bold, tracking-tight, text-black)
  - Animated hamburger icon (two lines animate to X on click, cubic-bezier(0.77,0,0.175,1), 300ms)
- Dropdown: white rounded-2xl with links "Features", "Drift AI", "FAQ"

#### Hero Content (bottom-aligned)
- Heading:
  - Line 1: "Own your time" -- text-5xl/sm:text-7xl/md:text-8xl/lg:text-[96px], font-normal, text-white
  - Line 2: "without the stress" -- "the stress" in Instrument Serif italic
- Subtitle: "Drift is a calm, ADHD-friendly planner that turns scattered ideas into a clear path" -- text-white/80
- CTA Bar: bg-black/25 backdrop-blur-md rounded-xl, pl-6 pr-1 py-1
  - Desktop text: "No noise. No complicated systems. Just your day, gently sorted."
  - Mobile text: "No noise. Just your day, gently sorted."
  - Button: "Start for free" -- bg-white text-black rounded-xl

### SECTION 2: ABOUT SECTION
- Background: bg-[#F6E4CF]
- Rounded top corners: rounded-t-[25px] z-10
- Top paragraph: "We craft tools that move with your rhythm, not over it."
- Two buttons: "Say hello" (dark pill, Mail icon) + "Stay informed" (muted pill, Plus icon)
- Decorative divider: circle + line + circle in #D9C4AA
- Bottom area: SVG logo (40x40, abstract geometric, fill #321C04) + "Calm / Amplified" label
- Large paragraph: "We make AI tools and assistants. But, most importantly, we help you remember what gentle productivity looks like..."

### SECTION 3: FEATURES SECTION (scroll-driven cards)
- Fixed background image:
  https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260709_082449_46df5cc4-ad98-4541-9236-a2659c1478a4.png&w=1920&q=85
- Left column (lg:sticky lg:top-0): heading + feature nav buttons + CTA
- Right column: 3 scrolling feature cards with IntersectionObserver reveal

Feature 1: "Built for ease, not urgency"
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_102608_5fa1187d-9ac6-44fb-82ab-54376200abc0.mp4

Feature 2: "The gentlest way to start"
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260625_174131_395bc785-bb21-4e65-abf6-27c56f0764b6.mp4

Feature 3: "Deep, undivided focus"
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260525_052706_d2e390fd-1846-4fe7-a4d8-8d2f1c875358.mp4

SVG Logo path: M 256 256 L 178 256 C 150.386 256 128 233.614 128 206 L 128 256 L 0 256 L 0 192 C 0 156.654 28.654 128 64 128 C 99.346 128 128 156.654 128 192 L 128 128 L 256 128 Z M 78 0 C 105.614 0 128 22.386 128 50 L 128 0 L 256 0 L 256 64 C 256 99.346 227.346 128 192 128 C 156.654 128 128 99.346 128 64 L 128 128 L 0 128 L 0 0 Z

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa marki: Aethera® → np. Lumina®
Hasło: "Beyond silence, we build the eternal." → swoje (kursywą: "silence," + "the eternal.")
Opis: "Building platforms for brilliant minds..." → swój
CTA: "Begin Journey" → np. "Get Started"
Nav linki: Home / Studio / About / Journal / Reach Us → swoje
Kolor logo/headlines: #000000; opisy: #6F6F6F → swoja paleta
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Prompt: Cinematic Hero Section with Looping Video Background

Create a fullscreen single-page hero section using React + Vite + Tailwind CSS + TypeScript.

Fonts:
- Instrument Serif (display)
- Inter (body)

Video Background:
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4
Position: top: 300px with inset: auto 0 0 0
Custom fade-in/fade-out loop: requestAnimationFrame-based, 0.5s fade in at start, 0.5s fade out before end, on ended reset and replay.
Gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background

Navigation Bar:
Logo: "Aethera®" (superscript ®), text-3xl, Instrument Serif, color #000000
Menu items: Home (#000000), Studio/About/Journal/Reach Us (#6F6F6F), text-sm
CTA: "Begin Journey", rounded-full, px-6 py-2.5, text-sm, black bg, white text, hover scale 1.03
Layout: flex justify-between, px-8 py-6, max-w-7xl mx-auto

Hero Section:
paddingTop: calc(8rem - 75px), pb-40, centered
Headline: "Beyond silence, we build the eternal."
  - text-5xl sm:text-7xl md:text-8xl, max-w-7xl, Instrument Serif
  - Line height: 0.95, letter-spacing: -2.46px
  - Color: #000000 main, #6F6F6F for italic words ("silence," and "the eternal.")
  - Animation: animate-fade-rise
Description: "Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows."
  - text-base sm:text-lg, max-w-2xl, mt-8, color #6F6F6F
  - Animation: animate-fade-rise-delay
CTA Button: "Begin Journey", rounded-full, px-14 py-5, text-base, mt-12, black bg white text, hover scale 1.03
  - Animation: animate-fade-rise-delay-2

Colors: bg white, headlines/logo/buttons #000000, descriptions/nav #6F6F6F

Animations in theme.css:
fade-rise: opacity 0->1, translateY 20px->0, 0.8s ease-out
fade-rise-delay: same, 0.2s delay
fade-rise-delay-2: same, 0.4s delay

Layout: relative min-h-screen w-full overflow-hidden, video z-0, gradient overlay, nav z-10, hero z-10

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: Asme → np. Nexus
Hasło: "Built for the curious" → np. "Built for the bold"
Placeholder email: "Enter your email" → swój
Tekst subtytuł: "Stay updated with the latest news..." → swój
Przycisk Manifesto: "Manifesto" → np. "Learn More"
Nav linki: Features / Pricing / About → swoje
Przyciski: Sign Up / Login → swoje
Ikony społecznościowe: Instagram / Twitter / Globe → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page hero section with a full-screen looping background video, liquid glass UI elements, and a dark cinematic aesthetic. Use React, TypeScript, Tailwind CSS, and Lucide React icons.

Background Video:
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_115001_bcdaa3b4-03de-47e7-ad63-ae3e392c32d4.mp4
Full-screen, muted, autoplay, object-cover, translate-y-[17%] (shifted down 17%)
Custom JS fade system: 500ms rAF fade-in on load, 500ms fade-out at 0.55s before end, fadingOutRef boolean guard, on ended reset and replay, cancel running rAF before new fade.
Outer container: min-h-screen bg-black overflow-hidden

Font: Instrument Serif (regular + italic) via Google Fonts CSS import

Liquid Glass CSS (.liquid-glass):
background: rgba(255,255,255,0.01); background-blend-mode: luminosity;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden;
::before: 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%),
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0), -webkit-mask-composite: xor, mask-composite: exclude, pointer-events: none

Navigation (relative z-20, pl-6 pr-6 py-6):
Inner: rounded-full px-6 py-3 flex items-center justify-between max-w-5xl mx-auto
Left: Globe icon (size 24) + "Asme" (white, font-semibold text-lg)
Nav links (hidden on mobile, md:flex): "Features", "Pricing", "About" -- text-white/80 hover:text-white text-sm font-medium
Right: "Sign Up" (white text button) + "Login" (liquid-glass rounded-full px-6 py-2)

Hero content (relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]):
Heading: "Built for the curious" -- text-5xl md:text-6xl lg:text-7xl text-white mb-8 tracking-tight whitespace-nowrap, Instrument Serif
Email input bar: liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3
  - Transparent email input, placeholder "Enter your email", text-white
  - White circular submit button (bg-white rounded-full p-3 text-black) with ArrowRight icon (size 20)
Subtitle: "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates." -- text-white text-sm leading-relaxed px-4
Manifesto button: liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium

Social icons footer (relative z-10 flex justify-center gap-4 pb-12):
3 circular buttons: liquid-glass rounded-full p-4, text-white/80
Icons: Instagram, Twitter, Globe (size 20) from lucide-react

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa marki: Serene → np. Lumère
Logo font: Dancing Script → swój (serif kursywowy)
Hasło hero: "Gentle touch. Radiant presence." → swoje
Podtytuł hero: "Expert beauty and holistic wellness..." → swój
CTA hero: "Begin your renewal" → np. "Book a session"
CTA nav: "Book a consultation" → swoje
Nav linki: About / Services / Journal / Contact → swoje
Tekst cytatu (sekcja 2): "Serene was founded on a belief in beauty..." → swój
Atrybucja: "Dr. Mia Callahan — Founder" → swoje
Kolor tła app: #0a0608 → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a React + Vite + Tailwind CSS landing page with two full-screen sections for a luxury beauty/wellness brand called "Serene". TypeScript.

Fonts: Dancing Script (logo), Instrument Serif (italic headings), Inter (body).
Google Fonts URL: family=Dancing+Script:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700;800;900

Global CSS:
body: font-family Inter, bg #0a0c, overflow-x hidden
.liquid-glass: rgba(255,255,255,0.01) bg, luminosity blend, blur(4px), inset 0 1px 1px rgba(255,255,255,0.1), relative, overflow hidden
.liquid-glass::before: absolute inset-0, border-radius inherit, padding 1.4px, gradient border trick (same as ASME spec above)
.text-glow: text-shadow 0 0 40px rgba(255,255,255,0.4), 0 0 80px rgba(255,255,255,0.2), 0 0 120px rgba(255,255,255,0.1)
.button-glow: box-shadow 0 0 20px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.1)

App wrapper: bg-[#0a0608], renders <Hero /> then <QuoteSection />

SECTION 1: Hero (h-screen)
Background video (autoplay muted loop playsInline object-cover):
  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4
Dark overlay: absolute inset-0 bg-black/20

Fixed Navbar (fixed top-0 z-50, flex, space-between, px-6 md:px-12 py-5):
Left: "Serene" in Dancing Script, white, text-2xl md:text-3xl
Center (desktop): "About", "Services", "Journal", "Contact" -- text-white/80 hover:text-white text-sm tracking-wide, gap-12
Right (desktop): white pill "Book a consultation"
Right (mobile): animated hamburger (cubic-bezier(0.22,1,0.36,1), 300ms). Open: top +45deg +translate-down-9px, middle fade/scale-0, bottom -45deg +translate-up-9px.
Mobile menu: slide-in from right, w-[85%] max-w-[340px], bg-[#0a0608]/95 backdrop-blur-xl border-l border-white/10. Links stagger-animate (opacity + translateX, 75ms delay each, start 150ms). Button at 450ms.

Center content (absolute centered, -mt-[120px]):
Heading: "Gentle touch. Radiant presence." -- font-instrument, text-white, text-[36px] md:text-7xl lg:text-[110px], leading-[0.9], tracking-tight, text-center, text-glow
Subtext: "Expert beauty and holistic wellness, delivered with warmth and intention." -- text-white/70 text-sm md:text-base text-center mt-5 md:mt-7 max-w-xl
CTA: "Begin your renewal" -- white pill button, mt-6 md:mt-9

Sound indicator (desktop only, bottom-left bottom-8 left-8): 40px circle border-white/20, small horizontal bar, text "Experience" / "with sound" text-white/60 text-xs

SECTION 2: Quote Section (h-screen)
Background gradient: #010A17 0% -> #0A4267 30% -> #20658E 60% -> #6BADC4 100%

Animated layers (rAF-based, lerp smoothing):
progress = clamp(0, 1, (windowHeight - rect.top) / (windowHeight + rect.height))

1. Rainbow image (absolute inset-x-0 top-0 z-30, parallax +120px to -160px, lerp 0.06):
   https://soft-zoom-63098134.figma.site/_assets/v11/8d520a7515d06cbfc403d0125e3d05b1a7ccd29c.png

2. Left cloud (absolute left-0 bottom-[10%] z-10, hidden mobile, w-[500px] md:w-[650px], marginLeft -50%):
   https://soft-zoom-63098134.figma.site/_assets/v11/0d6dfd3f90b930f21726f2ed56a3320d79b7a797.png
   Slides in from X:-200px when progress 0.12-0.92. Also drifts up (progress * -50). Lerp 0.04.

3. Right cloud: same image, scale-x-[-1] (flipped), absolute right-0 bottom-[15%], marginRight -75%. Slides from +200px.

Quote content (centered z-20 max-w-4xl):
Quote: "Serene was founded on a belief in beauty that honors your nature. We pursue refined outcomes, considered approaches, and lasting vitality. We spend time learning what matters to you before deciding what serves you best. No rushing, no excess -- just support that lets you feel radiant."
  font-instrument, text-white, text-xl sm:text-2xl md:text-4xl lg:text-[42px], leading-[1.45 md:1.5]
Attribution: "Dr. Mia Callahan — Founder" -- text-white/80 text-sm md:text-base tracking-wide mt-6 md:mt-8

All transforms use translate3d, will-change-transform. Lerp: current + (target - current) * factor.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: Orbis.Nft → np. Nexus.Nft
Nav linki: Homepage / Gallery / Buy NFT / FAQ / Contact → swoje
Hero heading: "Beyond earth / and ( its ) familiar boundaries" → swoje
Tekst about: "Hello! / I'm orbis" + opis "A digital object fixed beyond time..." → swoje
Nagłówek kolekcji: "Collection of / Space objects" → swoje
Przycisk "SEE ALL CREATORS" → np. "VIEW ALL"
CTA tekst: "JOIN US. / REVEAL WHAT'S HIDDEN. / DEFINE WHAT'S NEXT. / FOLLOW THE SIGNAL." → swoje
Kursywowy akcent "Nft collection" → swój
Kolor neon: #6FFF00 → swój akcent
Wyniki kart: 8.7/10 / 9/10 / 8.2/10 → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create an NFT landing page called "Orbis.Nft" with 4 sections, using a dark space theme. Video backgrounds from CloudFront, liquid glass UI, specific color/font system.

FONTS (Google Fonts): Anton (headings/nav, aliased font-grotesk), Condiment (cursive accent, font-condiment), System monospace (body)

COLOR SYSTEM:
Background: #010828 (deep dark navy), cream: #EFF4FF, neon: #6FFF00

LIQUID GLASS (.liquid-glass):
background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden;
::before: 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: -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none

TEXTURE OVERLAY: fixed full-screen, /texture.png, mix-blend-mode lighten, opacity 0.6, z-50, pointer-events-none

SECTION 1: HERO (full viewport)
Background video (full-bleed loop muted autoplay object-cover):
  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4
Section: rounded-b-[32px], max-w-[1831px] centered

Header: Left "Orbis.Nft" (Anton 16px uppercase). Center: liquid-glass pill nav (rounded-[28px] px-[52px] py-[24px]): Homepage/Gallery/Buy NFT/FAQ/Contact (Anton 13px, hover:text-neon). Right: 3 social icons (56x56 liquid-glass rounded-[1rem]): Mail/Twitter/Github.
Hero heading (Anton, 40-90px responsive, max-w-780px, lg:ml-32):
  "Beyond earth
   and ( its ) familiar boundaries"
Cursive overlay: "Nft collection" in Condiment 24-48px, neon, mix-blend-exclusion, absolute right side, rotate-1

SECTION 2: ABOUT (full viewport)
Background video:
  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4
Left heading (Anton 32-60px): "Hello! / I'm orbis" + "Orbis" cursive overlay in neon
Right paragraph (monospace 14-16px, uppercase, cream, max-w-266px): "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"
Bottom rows: two columns with same paragraph at opacity-10 (decorative)

SECTION 3: NFT COLLECTION GRID (bg #010828)
Header: "Collection of / Space objects" (Anton, "Space" in Condiment neon, ml-12/24/32 indent)
"SEE ALL CREATORS" button: large "SEE" + stacked "ALL"/"CREATORS", neon bar below
Grid (lg:3-col md:2-col 1-col): Each card liquid-glass rounded-[32px] p-18 hover:bg-white/10
  - Square video container (pb-[100%]) rounded-[24px]
  - Overlay bar (liquid-glass rounded-[20px] px-5 py-4): "RARITY SCORE:" + score value
  - Purple gradient circle button (48x48, from-[#b724ff] to-[#7c3aed], shadow-purple) with chevron right

Card videos:
1. https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 (8.7/10)
2. https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 (9/10)
3. https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 (8.2/10)

SECTION 4: CTA (video w-full h-auto native aspect)
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4
Absolute text (right-aligned, lg:pr-[20%] lg:pl-[15%]):
  Cursive "Go beyond" (Condiment neon, mix-blend-exclusion, absolute top-left)
  Heading (Anton 16-60px uppercase): "JOIN US. / REVEAL WHAT'S HIDDEN. / DEFINE WHAT'S NEXT. / FOLLOW THE SIGNAL."
Social icons (bottom-left absolute, left-[8%], bottom-[12%-20%]): vertical liquid-glass container, 3 icon buttons with border-b dividers

TECH: React + TypeScript + Vite + Tailwind; Icons: lucide-react (Mail, Twitter, Github); All videos autoPlay loop muted playsInline; Max content width 1831px; All text uppercase except Condiment

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa/logo: Asme → np. Nexus (Globe icon + text)
Nav linki: Features / Pricing / About → swoje
Hasło: "Know it then all." (italic "all") → swoje
Placeholder email: "Enter your email" → swój
Przycisk Manifesto → np. "Our Story"
About label: "About Us" → swoje
About heading: "Pioneering ideas for minds that create, build, and inspire." → swoje
Sekcja video label: "Our Approach" + opis → swój
"Explore more" button → swój
Philosophy heading: "Innovation x Vision" → swoje
Section labels: "Choose your space" / "Shape the future" + opisy → swoje
Services heading: "What we do" → swoje
Card 1: Tag "Strategy", Title "Research & Insight", opis → swoje
Card 2: Tag "Craft", Title "Design & Execution", opis → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page landing site using React + TypeScript + Vite + Tailwind CSS + framer-motion + lucide-react. The entire page has bg-black. Font: Instrument Serif (italic and regular) via Google Fonts.

LIQUID GLASS CSS (.liquid-glass in @layer components):
background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden;
::before: 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%),
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none

SECTION 1 -- HERO (min-h-screen, flex flex-col, overflow-hidden)
Background video (absolute inset-0 w-full h-full object-cover object-bottom):
  https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_074625_a81f018a-956b-43fb-9aee-4d1508e30e6a.mp4
  opacity 0 start, canplay: play + rAF fade 0->1 over 500ms
  timeupdate: when remaining <= 0.55s, fade 1->0 over 500ms
  ended: set opacity 0, wait 100ms, reset to 0, play, fade back to 1

Navbar (relative z-20, px-6 py-6):
  liquid-glass rounded-full pill, max-w-5xl mx-auto, px-6 py-3, flex between
  Left: Globe icon (24px white) + "Asme" (white semibold text-lg). Hidden mobile: "Features"/"Pricing"/"About" (text-white/80 hover:text-white text-sm font-medium gap-8 ml-8)
  Right: "Sign Up" (white text-sm) + "Login" (liquid-glass rounded-full px-6 py-2 white text-sm)

Hero content (relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center -translate-y-[20%]):
  Heading: text-7xl md:text-8xl lg:text-9xl white tracking-tight, Instrument Serif. "Know it then <em italic>all</em>."
  Email input: max-w-xl w-full, liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3
    - transparent input placeholder "Enter your email", text-white
    - white rounded-full p-3 bg-white text-black submit button + ArrowRight icon (20px)
  Subtitle: "Stay updated with the latest news and insights..." text-white text-sm leading-relaxed px-4
  Manifesto button: liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium

Social icons footer (relative z-10 flex justify-center gap-4 pb-12):
  3x liquid-glass rounded-full p-4: Instagram, Twitter, Globe icons (20px)

SECTION 2 -- ABOUT (bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden)
framer-motion useInView (ref, once:true, margin:"-100px")
Subtle radial gradient overlay: radial-gradient(ellipse_at_top, rgba(255,255,255,0.03) 0%, transparent 70%)
Label "About Us": text-white/40 text-sm tracking-widest uppercase. opacity 0 y:20 -> opacity 1 y:0, duration 0.6
Heading (text-4xl md:text-6xl lg:text-7xl, white, leading-[1.1], tracking-tight): opacity 0 y:40 -> visible, duration 0.8, delay 0.1
"Pioneering then ideas" + (italic white/60) "for" + line break + "minds that" + "create, build, and inspire." (italic white/60)

SECTION 3 -- FEATURED VIDEO (bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6)
rounded-3xl aspect-video container, opacity 0 y:60 -> visible, duration 0.9
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_054547_9875cfc5-155a-4229-8ec8-b7ba7125cbf8.mp4
Gradient overlay: bg-gradient-to-t from-black/60 via-transparent to-transparent
Bottom overlay: flex row. Left: liquid-glass rounded-2xl p-6 md:p-8 max-w-md card. Label "Our Approach" (white/50 xs tracking-widest uppercase). Body: "We believe in the power of curiosity-driven exploration..." Right: "Explore more" button (liquid-glass rounded-full px-8 py-3)

SECTION 4 -- PHILOSOPHY (bg-black py-28 md:py-40 px-6 max-w-6xl)
Heading "Innovation x Vision" (text-5xl md:text-7xl lg:text-8xl, "x" italic white/40): opacity 0 y:40 -> visible, 0.8s
Two-column grid:
Left: Video rounded-3xl aspect-[4/3], from x:-40: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4
Right: from x:40. Two text blocks with w-full h-px bg-white/10 divider.
  Block 1: Label "Choose your space" (white/40 xs tracking-widest). Body "Every meaningful breakthrough..."
  Block 2: Label "Shape the future". Body "We believe that the best work..."

SECTION 5 -- SERVICES (bg-black py-28 md:py-40 px-6 max-w-6xl)
Radial gradient: radial-gradient(ellipse_at_center, rgba(255,255,255,0.02) 0%, transparent 60%)
Header: "What we do" (text-3xl md:text-5xl) + "Our services" label (white/40 text-sm, hidden mobile)
Two-card grid (grid-cols-1 md:grid-cols-2 gap-6):
  Each: liquid-glass rounded-3xl overflow-hidden, group, opacity 0 y:50 -> visible, stagger 0.15s
  Card video (aspect-video, group-hover:scale-105, gradient overlay)
  Card body: tag (uppercase white/40 xs) + ArrowUpRight (liquid-glass rounded-full p-2) + title (white text-xl md:text-2xl) + desc (white/50 text-sm)
  Card 1: Video https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 | Tag "Strategy" | Title "Research & Insight" | Desc "We dig deep into data..."
  Card 2: Video https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4 | Tag "Craft" | Title "Design & Execution" | Desc "From concept to launch..."

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Inicjały logo: JA → swoje (np. MK)
Imię: Michael Smith → swoje
Role: Creative / Fullstack / Founder / Scholar → swoje
Miasto: Chicago → swoje
Opis: "Designing seamless digital interactions..." → swój
CTA: "See Works" / "Reach out..." → swoje
Projekty bento: Automotive Motion / Urban Architecture / Human Perspective / Brand Identity → swoje
Notatki journal: 4 wpisy z tytułami → swoje
Stats: 20+ Years / 95+ Projects / 200% Satisfied → swoje
Email CTA: hello@michaelsmith.com → swój
Linki social: Twitter/LinkedIn/Dribbble/GitHub → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page dark portfolio landing page using React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js.

Global Design System:
Fonts: Inter (300-700) + Instrument Serif (italic 400). CSS vars: --bg 0 0% 4%, --surface 0 0% 8%, --text 0 0% 96%, --muted 0 0% 53%, --stroke 0 0% 12%, --accent 0 0% 96%
.accent-gradient: linear-gradient(90deg, #89AACC 0%, #4E85BF 100%)
Animations: scroll-down translateY(-100%)->translateY(200%) 1.5s; role-fade-in opacity+translateY(8px)->visible 0.4s; gradient-shift bg-position 0%->100%->0% 6s

Loading Screen (fixed inset-0 z-[9999] bg-bg):
rAF counter 000->100 over 2700ms. Top-left "Portfolio" label (xs muted uppercase, y:-20->0 opacity). Center: rotating words ["Design","Create","Inspire"] every 900ms (AnimatePresence y:20->0->-20). Bottom-right: counter text-6xl md:text-8xl lg:text-9xl font-display. Bottom: progress bar with accent-gradient scaleX.

Hero (full-viewport, HLS video bg):
HLS: https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8
Navbar (fixed top-center pill): Logo circle (accent-gradient border, "JA" font-display italic 13px). Nav: Home/Work/Resume. "Say hi" button with accent border.
Hero content (centered z-10): "COLLECTION '26" eyebrow. "Michael Smith" (text-6xl md:text-8xl lg:text-9xl font-display italic). Role: "A {role} lives in Chicago." cycling ["Creative","Fullstack","Founder","Scholar"] every 2s. Description. CTA buttons "See Works" (solid) + "Reach out..." (outlined).
GSAP: name-reveal y:50->0 opacity 1.2s power3.out; blur-in blur(10px)->0 y:20->0 stagger 0.1s.

Selected Works (bg-bg): "Featured projects" heading. Bento grid 12-col: 7/5/5/7 spans. 4 cards: Automotive Motion/Urban Architecture/Human Perspective/Brand Identity. Each: bg-surface border rounded-3xl, halftone overlay, hover blur label pill.

Journal (bg-bg): "Recent thoughts" heading. 4 horizontal pill entries: title/image/read time/date.

Explorations (min-h-[300vh] parallax):
Layer 1: Pinned center (GSAP ScrollTrigger.create pin). "Visual playground" heading.
Layer 2: grid-cols-2 GSAP parallax columns, 6 items with aspect-square cards.

Stats (bg-bg): 20+ Years Experience / 95+ Projects Done / 200% Satisfied Clients.

Footer (bg-bg overflow-hidden):
HLS video same as hero but scale-y-[-1], bg-black/60 overlay.
GSAP Marquee: "BUILDING THE FUTURE • " x10, xPercent:-50 40s loop.
Email button: mailto:hello@michaelsmith.com with gradient border.
Social: Twitter/LinkedIn/Dribbble/GitHub + green pulsing dot "Available for projects"

Dependencies: gsap, framer-motion, hls.js, react-router-dom, tailwindcss-animate

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Logo text: "CINEMATIC" → np. "STREAMVAULT"
Nav linki: Movies / TV Series / Editor's Pick / Interviews / User Reviews → swoje
Rating: 8.7/10 IMDB → swój
Czas trwania: 132 min → swój
Data: April, 2025 → swoja
Tytuł: "Step Through. Work Smarter." → swój
Opis: "A voyage through forgotten realms..." → swój
CTA: "Watch Now" / "Learn More" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a full-viewport cinematic movie/streaming hero section using React, Tailwind CSS, and Lucide React icons. Inter font from Google Fonts. Single full-height hero -- no scrolling, no additional sections.

Background Video (fixed z-0, object-cover, full-screen):
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4

Bottom Blur Overlay (pointer-events-none, z-1, full-screen fixed, backdrop-blur-xl):
mask-image: linear-gradient(to top, black 0%, transparent 45%) (+ -webkit- prefix). NO dark gradient, only blur.

Liquid Glass (.liquid-glass):
background: rgba(255,255,255,0.01) luminosity; backdrop-filter: blur(4px); border: none;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); relative overflow hidden;
::before: absolute inset-0, border-radius inherit, padding 1.4px,
gradient: 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: xor/exclude, pointer-events none

blurFadeUp animation: @keyframes from {opacity:0; filter:blur(20px); transform:translateY(40px)} to {opacity:1; filter:blur(0); transform:translateY(0)}
.animate-blur-fade-up: animation blurFadeUp 1s ease-out forwards; opacity:0;

Navbar (z-50, justify-between, px-4 sm:px-6 md:px-12 py-4 md:py-6):
Left: "CINEMATIC" logo (h-8 md:h-10, blur-fade-up 0ms)
Center (lg only): "Movies"/"TV Series"/"Editor's Pick"/"Interviews"/"User Reviews" (text-sm hover:text-gray-300, stagger 100-300ms)
Right: Search (rounded-full liquid-glass pill, "Search" + Search icon 18), User (w-10 h-10 rounded-full liquid-glass + User icon 18)
Mobile: hamburger (w-10 h-10 rounded-full liquid-glass, Menu<->X animated rotate-180/opacity/scale-50)

Mobile menu (top-[72px] absolute z-40, bg-gray-900/95 backdrop-blur-lg, border-t/b border-gray-800, duration-500):
Same 5 nav links in column, py-3 px-3 rounded-lg hover:bg-gray-800/50, stagger slide-in (translate-x)

Hero content (flex-1 flex flex-col justify-end, px-4 sm:px-6 md:px-12 pb-8 md:pb-16 z-10):
flex-col md:flex-row items-end gap-8

Left side (flex-1):
  Metadata row (blur-fade-up 300ms): Star (fill-white 16px) + "8.7/10 IMDB", Clock + "132 min", Calendar + "April, 2025"
  Title (blur-fade-up 400ms): text-3xl sm:text-5xl md:text-6xl lg:text-7xl, letter-spacing -0.04em: "Step Through. Work Smarter."
  Description (blur-fade-up 500ms): text-gray-400 mb-6 md:mb-12 max-w-2xl: "A voyage through forgotten realms, where past and future intertwine."
  CTA buttons: "Watch Now" (bg-white text-black rounded-full + Play fill-black, blur-fade-up 600ms) + "Learn More" (rounded-full liquid-glass, blur-fade-up 700ms)

Right side (nav arrows, blur-fade-up 800ms/900ms):
  "Previous" (rounded-full liquid-glass + ChevronLeft) + "Next" (rounded-full liquid-glass + ChevronRight)

Stagger: Logo 0ms, nav 100-300ms (50ms steps), Search 350ms, User 400ms, Metadata 300ms, Title 400ms, Desc 500ms, Watch Now 600ms, Learn More 700ms, Previous 800ms, Next 900ms

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Logo text: "CINEMATIC" → np. "STILLMIND"
Nav linki: Movies / TV Series / Editor's Pick / Interviews / User Reviews → swoje
Rating: 8.7/10 IMDB → swój
Czas: 132 min → swój
Data: April, 2025 → swoja
Tytuł: "Step Through. Work Smarter." → swój
Opis: "A voyage through forgotten realms..." → swój
CTA: "Watch Now" / "Learn More" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
[Identyczna specyfikacja jak pd-portal – ten prompt tworzy ten sam typ strony: kinowy hero z pojedynczą pełnoekranową sekcją, tłem wideo CloudFront, blur-fade-up animacją, navbar z linkami filmowymi i dolnymi przyciskami nawigacyjnymi.]

Build a full-viewport cinematic movie/streaming hero section using React, Tailwind CSS, and Lucide React icons. Inter font from Google Fonts. Single full-height hero -- no scrolling.

Background Video (fixed z-0, object-cover):
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4

Bottom Blur Overlay (fixed full-screen z-1, backdrop-blur-xl):
mask-image: linear-gradient(to top, black 0%, transparent 45%)

Liquid Glass (.liquid-glass): background rgba(255,255,255,0.01) luminosity, blur(4px), inset shadow, relative overflow hidden, ::before gradient border mask trick.

blurFadeUp keyframe: from {opacity:0; filter:blur(20px); transform:translateY(40px)} to visible. .animate-blur-fade-up: animation 1s ease-out forwards; initial opacity:0.

Navbar (z-50, px-4 sm:px-6 md:px-12 py-4 md:py-6 justify-between):
Left: brand text (h-8 md:h-10, blur-fade-up 0ms)
Center (lg only): 5 nav links stagger 100-300ms
Right: Search pill (liquid-glass rounded-full + Search icon 18) + User circle (w-10 h-10 liquid-glass + User icon) + hamburger mobile toggle

Mobile menu (absolute top-[72px] z-40, bg-gray-900/95 backdrop-blur-lg, slide in/out duration-500)

Hero content (flex-1 justify-end, pb-8 md:pb-16 z-10):
Left: Metadata row (Star+rating, Clock+duration, Calendar+date) | Title (text-3xl to text-7xl, -0.04em tracking) | Description (text-gray-400) | Watch Now (bg-white text-black + Play) + Learn More (liquid-glass)
Right: Previous (liquid-glass + ChevronLeft) + Next (liquid-glass + ChevronRight)

All blur-fade-up with matching stagger delays as portal spec.
Color: bg-black, text white, text-gray-400 secondary, only Watch Now is solid white.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: NeuralKinetics → np. BioCore
Tag 1: "Advanced Bionics" → swój
Tag 2: "Cognitive AI" → swój
Tag prawego przycisku: "Adaptive Systems" → swój
Nagłówek: "One Card, Zero / Limits. Worldwide." → swój
Podtytuł: "Best digital banking card 2026" → swój
Opis: "See Features" / "How It Works" → swoje
Tagi mobilne: "Neuromorphic" / "AGI" / "Cybernetics" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a full-screen hero section landing page using React, Vite, and Framer Motion (motion package). Use plain CSS (no Tailwind). Font: Inter (300,400,500,600) from Google Fonts. Minimal black-and-white, full-viewport background video.

Stack: React 19, Vite, motion (framer-motion), lucide-react (Plus icon).

Layout: min-height 100vh, white background, flex column justify-content space-between. Fixed navbar (z-50, pointer-events none on nav, auto on children). Absolute full-screen video z-0. Footer content pinned to bottom (z-30) with white gradient fade-up background.

Navbar (fixed top):
Left:
  1. Custom SVG logo: two rotated rounded rectangles at -35deg, black fill + "NeuralKinetics" (hidden mobile, shown desktop 768px+)
  2. Menu button: black pill, white circle with Plus icon (lucide, size 12, strokeWidth 3) + "Menu" text (11px white)
  3. Tags pill (#F4F4F6 rounded-full): "Advanced Bionics" and "Cognitive AI" (hidden mobile)
Right: light gray pill with black circle button (4-dot grid SVG icon) + "Adaptive Systems" label (hidden mobile)

Background Video:
URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260508_215831_c6a8989c-d716-4d8d-8745-e972a2eec711.mp4
autoPlay muted playsInline object-fit cover
Mobile: 80% width/height centered. Desktop (768px+): 100% width/height.

Footer content (bottom, over gradient):
Background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0.8) 50%, transparent 100%)
Mobile: stacks vertically. Desktop: row layout, items aligned to bottom.
Left block:
  1. Small black dot (8px) + "Best digital banking card 2026" (13px, 55% opacity black)
  2. Heading: "One Card, Zero / Limits. Worldwide." (two lines, weight 300, clamp(2rem,8vw,4.5rem) mobile / clamp(2.5rem,5.5vw,4.5rem) desktop, letter-spacing -0.03em, line-height 1)
  3. Buttons: "See Features" (black pill, white text, 13px) + "How It Works" (transparent dark border rgba(0,0,0,0.35), 13px)
Right block: "Neuromorphic" / "AGI" / "Cybernetics" pills (white bg, light border rgba(0,0,0,0.12), 11px, rounded-full)

Animations (motion from 'motion/react'):
Navbar: y:-16 opacity 0 -> visible, 0.8s ease [0.16,1,0.3,1]
Video: opacity 0 scale 1.05 -> opacity 1 scale 1, 1.8s
Footer wrapper: y:20 delay 0.5s 1s
Subtitle: y:16 delay 0.6s 0.8s
Heading: y:20 delay 0.8s 0.8s
Buttons: y:16 delay 1.0s 0.8s

Responsive (breakpoint 768px): mobile=16px padding/smaller buttons/footer vertical; desktop=24px 32px padding/larger buttons/footer row

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: Mindloop → np. Clearview
Nav linki: Home / How It Works / Philosophy / Use Cases → swoje
Heading hero: "Get Inspired with Us" (italic: "Inspired") → swoje
Podtytuł hero: "Join our feed for meaningful updates..." → swój
Liczba subskrybentów: "7,000+ people already subscribed" → swoja
About heading: "Search has changed. Have you?" (italic: "changed.") → swoje
Platformy: ChatGPT / Perplexity / Google AI → swoje
Mission paragraph 1 i 2 → swoje
Solution heading: "The platform for meaningful content" → swoje
Funkcje 4-col: Curated Feed / Writer Tools / Community / Distribution → swoje
CTA heading: "Start Your Journey" → swoje
Przyciski CTA: "Subscribe Now" / "Start Writing" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a dark monochrome landing page called Mindloop -- a newsletter/content platform. React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif italic). Pure black (#000) background, white foreground. Install hls.js and framer-motion.

Design System: CSS vars (HSL, no hsl() wrapper): --background 0 0% 0%, --foreground 0 0% 100%, --card 0 0% 5%, --primary 0 0% 100%, --secondary 0 0% 12%, --muted 0 0% 15%, --muted-foreground 0 0% 65%, --accent 170 15% 45%, --border 0 0% 20%, --ring 0 0% 40%, --hero-subtitle 210 17% 95%

Liquid Glass (.liquid-glass): rgba(255,255,255,0.01) luminosity, blur(4px), inset shadow, relative overflow hidden, ::before gradient border mask trick.

fadeUp pattern: initial {opacity:0, y:20} whileInView {opacity:1, y:0} viewport once margin-100px transition duration 0.6 delay ease easeOut

1. Navbar (fixed transparent z-50, px-8 md:px-28 py-4):
Left: Concentric circles logo (outer w-7 h-7 border-2 foreground/60, inner w-3 h-3 border foreground/60) + "Mindloop" bold
Center-left: Home / How It Works / Philosophy / Use Cases (dots between), text-muted-foreground hover:text-foreground
Right: Instagram/Linkedin/Twitter in liquid-glass circular w-10 h-10 rounded-full

2. Hero (min-h-screen, video bg):
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_120549_0cd82c36-56b3-4dd9-b190-069cfc3a623f.mp4
Bottom gradient: h-64 bg-gradient-to-t from-background to-transparent
Content (centered z-10 pt-28 md:pt-32):
  Avatars: 3 overlapping circles (-space-x-2 w-8 h-8 border-2) + "7,000+ people already subscribed" text-muted-foreground
  Heading: "Get Inspired with Us" ("Inspired" font-serif italic) text-5xl md:text-7xl lg:text-8xl tracking-[-2px]
  Subtitle: text-lg hsl(var(--hero-subtitle))
  Email form: liquid-glass rounded-full p-2 max-w-lg + email input + bg-foreground text-background rounded-full px-8 py-3 "SUBSCRIBE" (whileHover scale 1.03, whileTap 0.98)

3. "Search has changed" (pt-52 md:pt-64 pb-6 md:pb-9):
Heading: text-5xl md:text-7xl lg:text-8xl "Search has changed. Have you?" ("changed." in serif italic)
Subtitle: text-muted-foreground text-lg max-w-2xl mx-auto mb-24
3 platform cards (grid md:grid-cols-3 gap-12): icon 200x200, name font-semibold, description text-muted-foreground text-sm
  ChatGPT icon: local asset icon-chatgpt.png, Perplexity: icon-perplexity.png, Google AI: icon-google.png
Tagline: "If you don't answer the questions, someone else will." text-muted-foreground text-sm text-center

4. Mission (pt-0 pb-32 md:pb-44):
Video (800x800 loop autoplay muted centered): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_132944_a0d124bb-eaa1-4082-aa30-2310efb42b4b.mp4
Scroll-driven word-by-word reveal (useScroll+useTransform):
Para 1 (text-2xl md:text-4xl lg:text-5xl): "We're building a space where curiosity meets clarity..."
Para 2 (text-xl md:text-2xl lg:text-3xl mt-10): "A platform where content, community, and insight flow together..."
Each word: opacity 0.15->1 based on scroll progress

5. Solution (py-32 md:py-44 border-t border-border/30):
Label "SOLUTION" (xs tracking-[3px] uppercase muted)
Heading: "The platform for meaningful content" ("meaningful" serif italic)
Video (rounded-2xl aspect-[3/1] object-cover): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_125119_8e5ae31c-0021-4396-bc08-f7aebeb877a2.mp4
4-col features: Curated Feed / Writer Tools / Community / Distribution

6. CTA (py-32 md:py-44 border-t overflow-hidden):
HLS video bg: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8 (use hls.js, fallback native)
Overlay: bg-background/45 z-[1]
Content: concentric logo + "Start Your Journey" (serif italic) + subtitle + "Subscribe Now" (bg-foreground text-background rounded-lg) + "Start Writing" (liquid-glass rounded-lg)

7. Footer (py-12 px-8 md:px-28): © 2026 Mindloop / Privacy/Terms/Contact

Dependencies: framer-motion, hls.js, @fontsource/inter, @fontsource/instrument-serif, lucide-react, tailwindcss-animate

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Tytuł strony: "Creative Studio Showcase" → np. "Moje Kreatywne Studio"
Logo SVG URL: https://framerusercontent.com/images/.../VMcS7YYTM5PXfXvlHc9u3hSCMM.svg → swoje logo
Linki menu: Work / About / Blog → swoje sekcje
Email kontaktowy: studio@norakessler.com → swój email
Linki social: Pinterest / Behance / Letterboxd → swoje
Tekst nagłówka (headline): "I build compelling visual stories & motion that make ideas shine." → swój
Tekst przycisku CTA: "Start a project now" → np. "Zacznij projekt"
Tekst CTA w menu: "Let's talk" → np. "Porozmawiajmy"
Tekst watermark hero: "Visuals" → np. "Kreatywność"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS).
─────────────────────────────────────
DESIGN SPEC — Creative Studio Showcase ("Vision Reveal")

OGÓLNY STYL:
- Tło strony: #E4E4E4 (jasny szary)
- Kolor akcentu: #75C5DE (jasny niebieski)
- Czcionka: Inter (Google Fonts, wagi 300-700), system-ui jako fallback
- Kolor tekstu treści: #F4F1E8 (kremowy)
- Kolor tekstu menu panel: #9A9590 (szarawy) dla emaila/sociali

SPLASH SCREEN (intro animacja):
- Pełnoekranowa nakładka, z-index: 9999, pointer-events: none
- 2 rzędy po 5 boxów (#75C5DE), górny rząd animuje translateY(-100%), dolny translateY(100%)
- Stagger delay: 0s, 0.05s, 0.1s, 0.15s, 0.2s dla kolejnych boxów
- Animacja boxów: 1s, cubic-bezier(0.96,-0.02,0.38,1.01)
- Po 1.35s cały splash zanika (opacity 0, visibility hidden, 0.3s)

NAWIGACJA:
- Logo: fixed, top-left, width 50vw, mix-blend-mode: difference, padding-left 20px (mobile) / 40px (desktop)
- Obraz logo: <img src="[URL SVG]" width="32" height="32">
- Burger button: fixed, top-right, width 50vw, flex justify-end, padding-right 20px (mobile) / 40px (desktop)
- Burger: 59x59px, border-radius 50%, background #F4F1E8
- Burger ma 2 poziome linie (span.bar), po kliknięciu animuje się w X (rotate 45/-45deg)
- Hover: background #0B0B0B, linie białe
- Stan otwarty (klasa "open"): background #0B0B0B, linie białe, rotate

MENU PANEL:
- position: fixed, left 8px, right 8px, border-radius 20px
- background: rgba(17,17,17,0.95), backdrop-filter: blur(26px)
- padding: 90px 32px 32px 32px (mobile), 60px (desktop)
- Desktop: left auto, right 7px, width 420px
- Animacja: top: -600px + opacity:0 (zamknięty) → top:0 + opacity:1 (otwarty, mobile) / top:7px (desktop)
- Transition: top 0.5s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s
- Nav linki: font-size 36px (mobile) / 42px (desktop), font-weight 500, color #F4F1E8, hover opacity 0.7
- Sekcja kontakt: email (18px/20px, color #9A9590, hover #F4F1E8) + social linki (14px, underline, color #9A9590)
- Przycisk CTA w menu: pill shape z okrągłym kółkiem (#75C5DE), hover: kółko przesuwa się w lewo
- Zamknięcie menu: kliknięcie linku nav

HERO SECTION:
- position: relative, width 100%, min-height 100vh, background #E4E4E4, overflow hidden
- Desktop: height 100vh, min-height 800px

WATERMARK TEXT (duży napis):
- position: absolute, bottom -30px (mobile) / -40px (desktop), z-index 2
- font-weight 500, color #F4F1E8, line-height 80%, letter-spacing -0.04em, white-space nowrap
- font-size: clamp(180px, 28vw, 560px)
- Tekst (np. "Visuals") animuje się od dołu: translateY(330px) → translateY(0), 1s cubic-bezier(0.16,1,0.3,1), delay 1.5s

ZDJĘCIE BAZOWE (hero-base-img):
- position: absolute, top: 30vh (mobile) / 0 (desktop), left/right/bottom: 0
- background-image: url('https://soft-zoom-63098134.figma.site/_assets/v11/5c9f982199fde1d9b85a20e5396f0fa7bacaf9a3.png?w=2560')
- background-size: cover, background-position: 60% center (mobile) / center (desktop)
- z-index: 5
- Animuje się przy wejściu: opacity 0→1, scale(1.5) rotate(3deg) → scale(1) rotate(0deg), 1.2s cubic-bezier(0.25,0.46,0.45,0.94), delay 1s

WARSTWA REVEAL (hero-reveal-img) – obraz nakładany maską:
- position: absolute, top: 30vh (mobile) / 0 (desktop), left/right/bottom: 0
- background-image: url('https://soft-zoom-63098134.figma.site/_assets/v11/6be2165e31648955b4e071f4cf2a50bc572b9bfd.png?w=1536')
- background-size: cover, background-position: 60% center (mobile) / center (desktop)
- z-index: 7, pointer-events: none
- Maska CSS: -webkit-mask-image / mask-image sterowane przez canvas (patrz JS)

CANVAS (ukryty):
- display: none, position: absolute, inset: 0, pointer-events: none
- Używany do rysowania radialnego gradientu śledzącego kursor

TREŚĆ HERO:
- position: relative (desktop: absolute inset 0), z-index: 8
- Padding: 110px 16px 24px (mobile) / 160px 40px 100px (desktop)
- Display flex, column, justify-content: flex-start (mobile) / space-between (desktop)

NAGŁÓWEK HERO (headline):
- font-size 22px (mobile) / 28px (desktop), font-weight 500
- letter-spacing -0.02em, color #111111, max-width 447px
- Tekst składa się ze słów z animacją wordReveal (opacity 0→1, translateY 10px→0, blur 10px→0, 0.4s ease)
- Każde słowo ma staggered delay: 1 + index * 0.05 sekundy

PRZYCISK CTA:
- Pill shape (border-radius 9999px), padding 8px, display flex, gap 12px
- Biały sliding background (expanduje się przy hover)
- Okrągłe kółko (#75C5DE) z ikoną strzałki → (przesuwa się w lewo przy hover)
- Tekst: font-size 16px/18px, font-weight 500, color #111111
- Animuje się wejście: opacity 0→1, translateY(60px) scale(0.4) → translateY(0) scale(1), 0.8s, delay 1s

LOGIKA JS – SPOTLIGHT REVEAL:
- Promień spotlight: 260px
- Gładkie śledzenie kursora: smooth.x += (mouse.x - smooth.x) * 0.1 (requestAnimationFrame)
- Canvas rysuje radialny gradient: rgba(255,255,255,1) w centrum → rgba(255,255,255,0) na krawędzi
- Stops: 0%, 40% (pełne białe), 60% (0.75 alpha), 75% (0.4), 88% (0.12), 100% (0)
- dataURL z canvas → maskImage na warstwie reveal-img (size: 100% 100%)
- Loop przez requestAnimationFrame

REDUCED MOTION:
- @media (prefers-reduced-motion: reduce): animacje natychmiast zakończone (opacity:1, brak transformacji)

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa marki: prmpt → np. ARCH
Tekst podpisu (caption): "When switching between videos..." → swój opis produktu/marki
Etykieta kolekcji: "ARCHIVE COLLECTION" + '"PROMPT"' → swoja kolekcja
Cena: $97,33 → swoja cena
Tekst footer: "PRMPT (R) 2026" + "PRIVACY POLICY" → swoje
Tekst hero nav: "ABOUT" → swoje
Tekst linki nav: "[ CART ]" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a full-screen, scroll-driven fashion/archive landing page for a brand called "prmpt". The page has two main phases:

1. Hero phase (first 100vh of scroll): Full-viewport video background with overlaid UI (logo, nav, product info, custom cursor). A black panel slides up from below covering the video.
2. Gallery phase (continues scrolling): The black panel contains a scattered grid of product images that scale in/out as they enter/exit the viewport. At the end, a white overlay fades in with a "view" CTA button.

Tech Stack: React 19 + TypeScript + Vite 6 + Tailwind CSS v4 + GSAP 3.15 (@gsap/react, ScrollTrigger) + Motion (Framer Motion) 12 (motion/react) + Font: "Inter Tight" (Google Fonts, weight 500)

ASSET URLS:
Videos (CloudFront):
- LEFT video: https://d8j0ntlcm91z4.cloudfront.net/user_39ca84eAE1ODL9hbR5VhoEj8tBf/hf_20260625_154433_532a85d3-dabf-4265-b8bd-19ac6af31842.mp4
- RIGHT video: https://d8j0ntlcm91z4.cloudfront.net/user_39ca84eAE1ODL9hbR5VhoEj8tBf/hf_20260625_154401_a664f076-b971-4557-8728-40ef9ea4c49b.mp4

Gallery Images (10 total):
1. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_104530_521b2f85-c0f3-4d0e-9704-b578315b4cb9.png&w=1920&q=85
2. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103711_76ccdb8b-5043-4f47-9c54-4379713393ea.png&w=1920&q=85
3. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103728_394f6a1b-85e2-4386-a4f6-408472a0a5b7.png&w=1920&q=85
4. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103739_86743e0e-16a7-4bee-bf38-dd67985344dc.png&w=1920&q=85
5. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103748_b2215dc8-a3a7-470d-b19a-5b87fa7d0c37.png&w=1920&q=85
6. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103758_e919ce72-5c9d-4b87-9be6-d7647b34825c.png&w=1920&q=85
7. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103808_013583d0-3386-4547-9832-37c7d8edb3ac.png&w=1920&q=85
8. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103937_a0c49d0a-33eb-4ead-aea6-c1baf241acbc.png&w=1920&q=85
9. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_103956_d18ed8fd-7b6f-4b86-91f9-20010fe38670.png&w=1920&q=85
10. https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260629_104034_ba5a9963-87ff-4008-a545-6bd686c088b5.png&w=1920&q=85

SECTION 1 - HERO:
Root container: id="scroll-spacer", position relative, user-select none, background white. Height dynamically set to vh + maxScroll + 2*vh. cursor: none on desktop.

Custom cursor (desktop only, hidden <1024px): fixed, pointer-events-none, z-50, follows mousemove. transform translate(-50%,-50%), mix-blend-mode: exclusion. 48x48 SVG circle (r=22.75, strokeWidth=2.5) with decorative glyph path, all white.

Logo (fixed, pointer-events-none, z-20, mix-blend-mode: exclusion): responsive width 124px/266px/355px. top:16px left:16px (mobile), top:32px left:32px (desktop). Motion: opacity 0→1, y:12→0, 0.6s, delay 0s.

Caption (fixed, z-20, mix-blend-mode: exclusion): left:32px desktop, varies by breakpoint. Inter Tight 500 12px, color #FFFFFF. Text: "When switching between videos near the center, do not reset currentTime..." Motion: same as logo, delay 0.3s.

Header nav (fixed, z-20, mix-blend-mode: exclusion, pointer-events-none): top:32px right:32px desktop. Contains "ABOUT" (hidden mobile) and row with hamburger SVG (two lines M0 14H40, M0 26H40, stroke white) + "[ CART ]" text. Motion: delay 0.15s.

Product info (id="outro-info", fixed, z-20, mix-blend-mode: exclusion): desktop right:32px bottom:80px; mobile bottom:48px centered. Circle icon (30x30 desktop) with SVG circle + <span id="circle-symbol"> showing "8" (changes randomly on scroll). Collection label: "ARCHIVE COLLECTION" + line break + '"PROMPT"'. Price: $97,33 at 80px/60px. Motion: opacity 0→1, delay 0.45s.

"View" button (id="outro-buy", fixed, z-20, mix-blend-mode: exclusion): starts scale(0), pill shape (border-radius 1335px), bg white, scales to 1 during outro scroll.

Video container (id="main-canvas"): fixed, z-0. Two videos - scrubbed by cursor X position on desktop (dead zone 5% of width), auto-alternating on mobile. Only one visible at a time.

White overlay (id="outro-overlay"): fixed inset-0, z-12, bg white, opacity controlled by scroll.

Footer (id="outro-footer"): fixed bottom-32px left-16px, mix-blend-mode: exclusion, opacity by scroll. "PRMPT (R) 2026" and "PRIVACY POLICY" text.

SECTION 2 - BLACK PANEL (Gallery):
Position fixed inset-0, bg black, z-10. Initially translateY(100vh). Slides up via GSAP ScrollTrigger (scrub true) during first 100vh of scroll.

Inner wrapper: width 100%, padding-top min(400px, 40vh).

Grid: 2 cols (<640px), 3 cols (640-1024px), 4 cols (>=1024px). Each cell aspect-ratio 2/3. buildLayout algorithm: staggered placement with some rows having 2 images.

Cards (.bp-card): will-change transform, scale(0) initially. Scale animates based on viewport position via RAF: enter=min(1,(vh-top)/(vh*0.6)), exit=min(1,bottom/(vh*0.4)), final=min(enter,exit). transform-origin: right bottom (left half) or left bottom (right half).

Outro phase (scrollY > vh + maxScroll): white overlay fades in, product info slides up, view button scales from 0→1, footer fades in. Progress: (scrollY - vh - maxScroll) / (vh - 100).

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa produktu: RIVR → np. NEXUS
Tagline badge: "Fluid Staking" → np. "Smart Investing"
Nagłówek hero: "Fluid Asset Streams" → swój
Podtytuł: "Access Smart Vaults, stake RIVR, NFTs..." → swój
Przycisk nav: "Book Demo" → np. "Zacznij"
Linki nav: Ecosystem / Economics / Developers / Governance → swoje
Statystyki karty: "5.2K" + "Active Yielders" → swoje liczby
Przycisk karty: "Join Discord" → np. "Dołącz"
Sekcja dokumentacji: "Documentation" + "Library" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a Hero section for a DeFi dashboard named RIVR showcasing a sleek, glassmorphism aesthetic.

Dependencies: lucide-react for icons, motion (imported from 'motion/react') for animations.

Global Styles (src/index.css):
@import "tailwindcss";
@font-face {
  font-family: "Helvetica Regular";
  src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
  src: url("...woff2") format("woff2"), url("...woff") format("woff"), url("...ttf") format("truetype");
}
@theme { --font-helvetica: "Helvetica Regular", ui-sans-serif, system-ui, sans-serif; }
:root { font-family: var(--font-helvetica); }
body { margin: 0; overflow-x: hidden; background-color: #f0f0f0; }

App Structure: <main className="min-h-screen bg-[#f0f0f0]"> returns <Hero />.

Hero Component: Outer wrapper: w-full h-screen flex items-center justify-center p-3 md:p-5 bg-[#f0f0f0]. Inner section: relative w-full max-w-[1536px] h-full rounded-[1.5rem] md:rounded-[3rem] overflow-hidden shadow-none flex flex-col items-center bg-white/10. Inside: Video Background (absolute inset-0 w-full h-full object-cover object-[65%] lg:object-center z-0, URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260428_193507_4286c423-2fd9-4efd-92bd-91a939453fc1.mp4, autoPlay muted loop playsInline) + Content Layer (relative z-10 w-full h-full flex flex-col items-center).

Content inside: Navbar + text container (w-full flex flex-col items-center pt-8 px-6 text-center max-w-4xl) + BottomLeftCard + BottomRightCorner.

Navbar: flex items-center justify-between py-6 px-6 md:px-10 w-full. Left hidden spacer. Center: hidden md:flex items-center gap-8, links: Ecosystem / Economics (ChevronRight icon) / Developers / Governance (ChevronRight). Mobile: "RIVR" text. Right: motion.button with flex items-center bg-[rgba(30,50,90,0.8)] text-white rounded-full pl-2 pr-4 md:pr-6 py-1.5 md:py-2 gap-2 md:gap-3, ArrowUpRight icon in white/20 circle + "Book Demo" text.

HeroBadge: motion.div (opacity 0→1, y 20→0, 0.6s easeOut). flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-md border border-white/20. Sparkles icon (w-4 h-4 text-[rgba(30,50,90,0.8)]) + "Fluid Staking" text.

Hero texts: motion.h1 "Fluid Asset Streams" (opacity 0→1 scale 0.98→1, 0.8s, delay 0.2, text-4xl→[80px] font-normal text-[#5E6470] tracking-tight). motion.p description (opacity 0→1, 0.8s, delay 0.4, text-sm→lg text-[#5E6470] opacity-80 max-w-xl).

BottomLeftCard: motion.div (x -20→0, opacity 0→1, 0.8s, delay 0.2). absolute bottom-28 right-4 (mobile) / bottom-6 left-6 (md) / bottom-10 left-10 (lg). Rounded glassmorphism card with "5.2K" stat + "Active Yielders" label + "Join Discord" button with ArrowUpRight.

BottomRightCorner: Complex cutout layout. motion.div (y 20→0, opacity 0→1, 0.8s, delay 0.4). absolute bottom-0 right-0, bg-[#f0f0f0], rounded-tl-[3.5rem]. Two SVG corner masks (curved cutouts using path "M56 56V0C56 30.9279 30.9279 56 0 56H56Z" and "M56 56H0C30.9279 56 56 30.9279 56 0V56Z", fill #f0f0f0). Content: circle icon (ArrowUpRight) + "Documentation" title + "Library" link with ChevronRight.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Imię/studio: Viktor Oddy / Vortex Studio → swoje
Tagline: "The creative studio of Viktor Oddy" → swój
Nagłówek hero: "Build the next wave," / "the bold way." → swój
3 akapity opisu: "I spent seven years at Apple..." (3 paragrafy) → swoje
Cena: "Projects start at $5,000 per month." → swoja cena
Tekst przycisku: "Start a chat" / "View projects" → swoje
Testimonial quote: 'I left Apple to build the studio...' → swój cytat
Nazwisko autora: Viktor Oddy → swoje
5 testimoniali w karuzeli → swoje
3 projekty: evr / Automation Machines / xPortfolio + opisy → swoje projekty
Heading partner section: "Partner with us" → swój
CTA: "Start chat with Viktor" → swój
Footer linki i copyright → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a single-page landing page for a creative design studio called "Viktor Oddy" using React, TypeScript, Vite, and Tailwind CSS. Use lucide-react for icons. White background throughout. Fonts: PP Neue Montreal (body, Webflow CDN) and PP Mondwest (serif accent, /PPMondwest-Regular.woff2).

Font faces:
@font-face { font-family: 'PP Neue Montreal'; src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype'); font-weight: 400; }
@font-face { font-family: 'PP Neue Montreal'; src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype'); font-weight: 500; }
@font-face { font-family: 'PP Mondwest'; src: url('/PPMondwest-Regular.woff2') format('woff2'); font-weight: 400; }

Animation: @keyframes fadeInUp { 0% { opacity:0; transform:translateY(30px) } 100% { opacity:1; transform:translateY(0) } }. All sections use useInViewAnimation hook (IntersectionObserver threshold 0.1, triggers once). Elements get animate-fade-in-up class.

SECTION 1 - HERO (max-w-[440px], px-6, pt-12 md:pt-16):
Logo: "Viktor Oddy" in PP Mondwest, text-[32px]→[44px], font-semibold, color #051A24, mb-4.
Tagline: "The creative studio of Viktor Oddy", font-mono, text-xs md:text-sm, color #051A24, mb-2.
Main heading: "Build the next wave," / "the bold way." where "next wave" and "bold way." in PP Mondwest. text-[32px]→[44px], leading-[1.1], color #0D212C.
3 description paragraphs: flex-col gap-6, text-sm md:text-base, color #051A24, mt-5.
Two buttons: "Start a chat" (bg-[#051A24], white, rounded-full, px-7 py-3, complex box-shadow) + "View projects" (bg-white, text #051A24, subtle shadow).

SECTION 2 - MARQUEE (full width, mt-16 md:mt-20, mb-16):
8 GIFs duplicated (total 16), animate-marquee (translateX 0→-50%, 30s linear infinite desktop / 10s mobile). Images h-[280px] md:h-[500px], mx-3, rounded-2xl.
GIF URLs: https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif, hero-portfolio-cosmic, hero-velorah, hero-asme, hero-transform-data, hero-aethera, hero-orbit-web3, hero-nexora (all motionsites.ai).

SECTION 3 - TESTIMONIAL QUOTE (py-12, px-6, max-w-2xl, centered):
Quote icon (lucide Quote, w-6 h-6). Large quote: 'I left Apple to build the studio I always wanted to work with' where "Apple" in PP Mondwest. text-[32px]→[44px], leading-[1.1], color #0D212C.
Author: "Viktor Oddy" italic, text-sm, color #273C46.
3 company names as text logos: Apple (80px, 24px), IDEO (83px), Polygon (110px), font-medium, text-slate-900.
Parallax image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143.png&w=1280&q=85, w-full max-w-xs, rounded-2xl. Parallax via IntersectionObserver + scroll listener.

SECTION 4 - PRICING (full width, py-12, px-6):
2 cards (grid-cols-1 md:grid-cols-2), gap-8, md:justify-end md:max-w-4xl. rounded-[40px], pl-10 pr-10 md:pr-24 pt-3 pb-10.
Dark card (bg-[#051A24]): "Monthly Partnership" / "A dedicated creative design team..." / "$5,000 Monthly" / 2 buttons.
Light card (bg-white): "Custom Project" / "Fixed scope, fixed timeline..." / "$5,000 Minimum" / 1 button.

SECTION 5 - TESTIMONIAL CAROUSEL (full width, py-20):
5 testimonials, auto-scroll 3s, prev/next buttons. Cards 427.5px wide, rounded-[40px], shadow. Each: quote SVG + text + author avatar + name + role.
5 testimonials: Marcus Anderson (CEO Data.storage), alexwu (Founder Nexgate), James Mitchell (VP Product LaunchPad), Rachel Foster (Co-founder Nexus Labs), David Zhang (Head of Design Paradigm Labs).

SECTION 6 - PROJECTS (max-w-[1200px], px-6, py-12):
3 projects with text (ml-20 md:ml-28) + full-width GIF:
"evr" - "From idea to millions raised for a web3 AI product" - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif
"Automation Machines" - "Streamlining industrial automation" - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif
"xPortfolio" - "Modern portfolio management platform" - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif

SECTION 7 - PARTNER (max-w-7xl, py-48, white container, rounded-[40px]): Mouse hover spawns GIF thumbnails at cursor with random rotation, fade out 1000ms. Heading "Partner with us" in PP Mondwest, text-[48px]→[80px]. CTA pill with avatar + "Start chat with Viktor".

SECTION 8 - FOOTER + COPYRIGHT (max-w-[1200px], px-6): Flex row. Left: "Start a chat" button. Right: ArrowUpRight + 2 link columns. Copyright bar: "Vortex Studio Limited" / "Austin, USA".

SECTION 9 - FIXED BOTTOM NAV: Floating pill, bottom-6, centered. White bg, rounded-full, px-8 py-2, layered shadow. "V" in PP Mondwest + "Start a chat" button.

Color palette: Primary dark #051A24, Secondary #0D212C, Light text #F6FCFF/#E0EBF0, Muted #273C46, bg white.
Button primary shadow: 0 1px 2px rgba(5,26,36,0.1), 0 4px 4px rgba(5,26,36,0.09), 0 9px 6px rgba(5,26,36,0.05), inset 0 2px 8px rgba(255,255,255,0.5).

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa platformy: CodeNest → np. DevPath
Eyebrow tekst: "Career-Ready Curriculum" → swój
Nagłówek: "LAUNCH YOUR CODING CAREER." → swój
Opis: "Master in-demand coding skills..." → swój
Przycisk CTA: "Get Started" → np. "Zacznij"
Linki nav: PROJECTS / BLOG / ABOUT / RESUME → swoje
Karta liquid glass: "[ 2025 ]" + "Taught by Industry Professionals" + opis → swoje treści
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. Fully responsive.

1. Background & Layout:
Background: Full-screen HLS video stream: https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8. Use hls.js with enableWorker: false.
Video opacity: 60%. Dark linear gradient from left (#070b0a to transparent) + bottom-up gradient for readability.
Grid lines: 3 thin vertical lines at 25%/50%/75% (white/10 opacity, desktop only).
Central glow: Large horizontal SVG ellipse with cyan/dark-green hue, 25px Gaussian blur.

2. Liquid Glass Card (floating above headline, translate-y-[-50px], 200x200px):
background: rgba(255,255,255,0.01), backdrop-filter: blur(4px), box-shadow: inset 0 1px 1px rgba(255,255,255,0.1).
::before pseudo-element: inset 0, padding 1.4px, 180deg white gradient, -webkit-mask-composite: xor.
Content: "[ 2025 ]" tag (14px) + "Taught by Industry Professionals" (18px, Instrument Serif italic for "Industry") + small description (11px).

3. Hero Content:
Eyebrow: "Career-Ready Curriculum" in Plus Jakarta Sans, bold, 11px, color #5ed29c.
Main headline: "LAUNCH YOUR CODING CAREER." in Inter ExtraBold, uppercase, tracking-tight. 40px→72px. Final period green (#5ed29c).
Description: Inter, 14px, 70% white opacity, max-width 512px.
Primary CTA: "Get Started" + ArrowRight icon. Rounded-full, bg #5ed29c, text #070b0a, uppercase, bold.

4. Navigation:
Sticky/absolute header with white minimalist logo.
Desktop: PROJECTS / BLOG / ABOUT / RESUME links in Inter 16px. Hover: #5ed29c.
Mobile: Hamburger toggling full-screen dark overlay.

5. Required:
Fonts: Inter, Plus Jakarta Sans, Instrument Serif (italic).
Icons: lucide-react (ArrowRight, Menu, X).
Library: hls.js (https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js).

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa marki: CozyPaws → np. PetLove
Heading linia 1: "Everything" → np. "Wszystko"
Heading linia 2: "Your Pets Love" → np. "dla Twojego pupila"
Produkt na karcie: "Cozy Cat House" + "$49.99" → swój produkt i cena
Tekst overlay center: "Best Products for Your Pet" → swój
Przycisk overlay: "Explore Products" → np. "Zobacz ofertę"
Statystyki: "98K+" / "4.6" → swoje liczby
Linki nav: Home / Shop / Delivery and payment / Brands / Blog → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page "CozyPaws" pet store hero section using React, Tailwind CSS, and Lucide React icons. Layout is viewport-height (h-screen), no scroll. 3 responsive breakpoints (mobile, tablet md, desktop lg+). Vite + TypeScript.

Fonts: Inter (400,500,600) + DM Serif Display (400). Load via index.html. Custom class .font-serif-display { font-family: 'DM Serif Display', serif }.

Colors: bg #EFFDF0, primary dark green #1a3d1a, hover #2a5a2a, orange accent #E86A10, orange hover #d45e0d.

ASSET URLS (exact):
Logo: https://polo-pecan-73837341.figma.site/_assets/v11/0ae29d6d9628bede667f90d57bebe81b8f1ec2bf.svg
Avatar: https://polo-pecan-73837341.figma.site/_assets/v11/e62173d41f91350a59628e8a9a55ae078a886fb9.png?w=128
Product card: https://polo-pecan-73837341.figma.site/_assets/v11/3e5158dad63d392ade022e81890edc9f54d750bc.png
Video card: https://polo-pecan-73837341.figma.site/_assets/v11/76be6ec3a93a703b15e9cc01e764a4e3f9d7d2c0.png
Bottom left: https://polo-pecan-73837341.figma.site/_assets/v11/8d44b25186ef45a5789c74668fb781cea4e1ff49.png
Bottom center: https://polo-pecan-73837341.figma.site/_assets/v11/96745c4e72ad5c5208e53a885df797fd82cd854a.png?h=1024
Bottom right: https://polo-pecan-73837341.figma.site/_assets/v11/81bd2e7a66b58f3d8f3ad78fd1ebf01af8dfdee1.png

HEADER: Full-width px-12 py-4. Left: Logo 205x52px desktop / 130x33px mobile. Center nav (hidden <md): Home/Shop/Delivery and payment/Brands/Blog. Right: Search button + Favorites button (orange circle, Star icon, badge "4") + Cart button (badge "1") + Avatar 40x40. Badges: absolute -top-1 -right-1, 20x20, bg-orange, border-2 border-background.

DESKTOP HERO (lg+): 
Text layer (z-5): Centered, px-12 pt-[5.4rem]. Heading font-serif-display color #1a3d1a clamp(60px,7.5vw,110px) leading-[0.95] tracking-tight. Lines: "Everything" / "Your Pets Love". Each word inline-block with animate-word-pop stagger.

Left product card: absolute top-[50px] left-12, width clamp(160px,14vw,260px). Image aspect-ratio 260/257 rounded-2xl. ArrowUpRight button bottom-right. Text: "Cozy Cat House" in gray-700 + "$49.99" dark green bold.

Right video card: absolute top-[50px] right-12, width clamp(120px,10vw,177px). Image aspect-ratio 177/287. Play button centered near bottom. Text "Watch Product Reviews on TikTok and YouTube".

Bottom 3 images: absolute bottom-0 left-0 right-0, z-10, flex items-end, no gaps. Left: flex-1, max-height min(70vh,55vw). Center: flex-[1.265], max-height min(85vh,70vw). Right: flex-1, max-height min(70vh,55vw). All w-full h-auto.

Overlays on bottom images: Left: "98K+" with avatar stack. Center: "Best Products for Your Pet" white heading + "Explore Products" orange pill. Right: "4.6" with orange Star icon. All bottom: clamp(20px,4vh,50px).

ANIMATIONS:
animate-word-pop: translateY(60px) scale(0.7) rotate(-4deg) blur(8px) → overshoot → settle, 0.9s cubic-bezier(0.34,1.56,0.64,1).
animate-fade-up: translateY 30px→0, opacity, 0.8s. animate-fade-in: opacity, 0.6s. animate-slide-up: translateY 60px→0, 0.9s. animate-slide-in-left/right: translateX ±40px, 0.8s. animate-photo-reveal: translateY(80px) scale(1.02)→normal, 1.1s. All use cubic-bezier(0.16,1,0.3,1) fill both. Delay classes .delay-100 through .delay-1200.

Stagger order: Header (100-300ms), heading words pop (200-600ms), side cards slide (600-700ms), bottom photos reveal (600-900ms), overlays (1000-1200ms).

Icons: Search, ShoppingCart, Star, ArrowUpRight, Play, ArrowRight, Plus (lucide-react).
Container: h-screen flex flex-col overflow-hidden. Hero: flex-1 flex flex-col overflow-hidden.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa kliniki: "Dental Health" → np. "Klinika Urody"
Podtytuł: "quality healthcare" → np. "Twoje piękno"
Feature bary: "Advanced Dentistry" / "High Quality Equipment" / "Friendly Staff" → swoje
Tekst hero karta top-left: "We wish to provide professional dental services..." → swój
Label hero: "Trusted Dentist in West New York" → swój
Nagłówek hero: "Dental" / "Care" → swoje słowa
Tekst bottom-right: "Free Consultation" → swój
Heading galerii: "Smile Gallery" / "Our cosmetic dental work" → swoje
Sekcja 3 heading: "Implant" / "Dentistry" + "Restore Missing Teeth" → swoje
Usługi: Dental Veneers / Dental Crowns / Teeth Whitening / Dental Implants → swoje
Menu nav: Home / Services / About / Gallery / Contact → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a single-page dental clinic landing page using React + Vite + TypeScript + Tailwind CSS. No external UI libraries, no icon libraries. Everything in one App.tsx file. 3 full-screen sections + splash screen + fixed navbar.

Font: "Open Sauce One" from: https://db.onlinewebfonts.com/c/1cd1e7d71e048159076fd90b39846902?family=Open+Sauce+One and https://db.onlinewebfonts.com/c/42acf9aa4a6dc2f2886a3f682e337ead?family=Open+Sauce+One+Bold

IMAGE URLS (exact):
HERO_IMAGE: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_113640_ccf3cf97-d447-425b-a134-d7b09fc743fc.png&w=1280&q=85
SECTION2_IMAGE: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_114219_414dfe80-f15c-4e25-bf52-b13721f4bd88.png&w=1280&q=85
SECTION3_IMG1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_115253_c19ab167-8dd5-48b4-967d-b9f0d9d6e8fb.png&w=1280&q=85
SECTION3_IMG2: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_115237_fc519057-6e87-4abf-999a-9610b8b085b4.png&w=1280&q=85
SECTION3_BG: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_114355_752ba9e6-0942-4abb-9047-5d9bb16632e9.png&w=1280&q=85

DATA CONSTANTS:
featureBars: ['Advanced Dentistry', 'High Quality Equipment', 'Friendly Staff']
services: [{ name:'Dental\nVeneers', num:'01', active:true }, { name:'Dental\nCrowns', num:'02' }, { name:'Teeth\nWhitening', num:'03' }, { name:'Dental\nImplants', num:null }]

CORE CONCEPT - "MASKED CARDS": Each section uses a single large background image shared across multiple cards. Each card shows a different window into the same image via backgroundImage/backgroundSize/backgroundPosition. useMaskPositions hook uses ResizeObserver to compute each card's offset relative to the section. useImageWidth loads image and computes renderWidth = naturalWidth * (sectionHeight / naturalHeight). MaskedCard component: backgroundSize: auto [sh]px, backgroundPosition: -[x + focalOffset]px -[y]px. focalX: S1 mobile=0.7/desktop=0.8, S2 mobile=0.65/desktop=0.8.

ANIMATION - useStaggeredReveal: IntersectionObserver threshold 0.15. getAnimStyle(index): opacity, translateY(24px→0), 0.6s cubic-bezier(0.16,1,0.3,1), delay index*120ms.

SPLASH SCREEN: Fixed overlay z-[100], white bg. Counter bottom-left, text-7xl md:text-9xl font-bold tabular-nums. Counts 0→100 over 2000ms. After 100: 200ms wait, then opacity-0 (700ms). After 900ms calls onComplete().

NAVBAR: Fixed top-0, bg-white/80 backdrop-blur-md. Logo: "Dental" / "Health" two-line stacked, extrabold uppercase, -mt-1.5 between lines. Tagline "quality healthcare" text-[8px] md:text-[9px]. Desktop: "Menu" button (rounded-full border border-black) + "Dental Emergency" text. Mobile: animated hamburger (3 spans, cubic-bezier(0.76,0,0.24,1) 300ms, rotates to X when open). Mobile overlay: 85% width panel slides from right, nav links stagger in (100+i*60ms), Book Appointment button.

SECTION 1 - HERO: h-screen, flex flex-col, pt-24 px-3 md:px-5 pb-1.5, gap-1.5.
3 feature bars: MaskedCard w-full h-14 md:h-20 rounded-xl. Text centered bold text-lg md:text-3xl.
Main hero card: MaskedCard flex-1, rounded-xl. Top-left: "We wish to provide professional dental services..." (text-xs md:text-sm font-semibold). Bottom-left: label "Trusted Dentist in West New York" + h1 "Dental\nCare" (clamp(3rem,11vw,11rem) font-bold leading-[0.79]). Bottom-right: "Free Consultation" text-white.

SECTION 2 - SMILE GALLERY: min-h-screen md:h-screen, same padding. Grid 1 col (mobile) / 2 cols (desktop), rows [auto,auto,auto,auto] (mobile) / [1fr,1fr,0.8fr] (desktop).
Card 0: "Smile Gallery" heading + "Our cosmetic dental work" subtitle.
Card 1: row-span-2, "If you want a gorgeous smile..." + "Call Us" rounded-full button.
Card 2: "Smile" / "makeover" large heading (clamp(3rem,7vw,6rem)).
Card 3: Full-width services bar with 4 sub-cards (active: bg-white/90, inactive: bg-white/20).

SECTION 3 - IMPLANT DENTISTRY: min-h-screen md:h-screen, same padding. Grid 2 cols.
Left: "Implant\nDentistry" heading (clamp(3rem,7vw,6.5rem)) + "Restore Missing Teeth" + 2 images side-by-side + "Dental Restoration Services" consultation card (bg-zinc-200, "Book Online" button).
Right: Single tall image with overlay: white card ("The Process of Installing Implants" + arrow) + glass card ("Caring for Dental Implants" + arrow).

DESIGN RULES: Spacing: pb-1.5 md:pb-2 between sections. Border radius: rounded-xl md:rounded-2xl overflow-hidden. Colors: black, white, bg-white/20, bg-white/90, backdrop-blur. Bg fills: bg-stone-50, bg-zinc-200 for Section 3. Typography: heavy bold, clamp(), tight leading (0.79, 0.9, 0.95). Responsive: single md: breakpoint.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa produktu: "Power AI" → np. "Nova AI"
Podtytuł: "The most powerful AI ever deployed / in talent acquisition" → swój
Przycisk CTA: "Schedule a Consult" → np. "Umów demo"
Linki nav: Features / Solutions / Plans / Learning → swoje
Przycisk nav: "Sign Up" → np. "Zarejestruj się"
Tekst marquee left: "Relied on by brands / across the globe" → swój
Nazwy firm w marquee: Vortex / Nimbus / Prysma / Cirrus / Kynder / Halcyn → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a full-screen dark hero section with looping background video, navbar, headline, subtitle, CTA button, and logo marquee.

Theme & Colors (CSS variables):
Background: 260 87% 3% (deep dark blue-purple). Foreground: 40 6% 95% (off-white). Hero sub text: 40 6% 82%.
Body font: Geist Sans (via @fontsource/geist-sans). Headline font: General Sans (Fontshare: https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap).

Background Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_065045_c44942da-53c6-4804-b734-f9e07fc22e08.mp4. Absolute inset-0 w-full h-full object-cover. Custom JS fade loop: 0.5s rAF fade-in on load/loop, 0.5s fade-out at end. On ended: opacity 0, 100ms wait, reset, replay. Each fade cancels previous rAF.

Blurred overlay shape: w-[984px] h-[527px] opacity-90 bg-gray-950 blur-[82px], absolute centered, pointer-events-none.

Navbar: py-5 px-8, flex justify-between. Left: logo image (src/assets/logo.png, h-8). Center: Features (ChevronDown) / Solutions / Plans / Learning (ChevronDown). Right: "Sign Up" button (heroSecondary, rounded-full px-4 py-2). Below: 1px gradient divider.

Hero content: "Power AI" at text-[220px], font-normal, leading-[1.02], tracking-[-0.024em], General Sans. "Power " is plain text-foreground, "AI" uses bg-clip-text text-transparent backgroundImage: linear-gradient(to left, #6366f1, #a855f7, #fcd34d). Subtitle: text-hero-sub, text-lg, max-w-md, mt-[9px], opacity-80. CTA: px-[29px] py-[24px], mt-[25px].

Logo marquee (pb-10): max-w-5xl. Left: static "Relied on by brands / across the globe" (text-foreground/50 text-sm). Right: marquee with Vortex/Nimbus/Prysma/Cirrus/Kynder/Halcyn (duplicated for loop). Each: liquid-glass 24x24 rounded-lg icon + name (text-base font-semibold). translateX(0)→translateX(-50%), 20s linear. gap-16.

Liquid glass (.liquid-glass): background rgba(255,255,255,0.01), backdrop-filter blur(4px), box-shadow inset 0 1px 1px rgba(255,255,255,0.1). ::before: absolute inset-0, padding 1.4px, linear-gradient(180deg, rgba(255,255,255,0.45)→rgba(255,255,255,0) middle→rgba(255,255,255,0.45)), -webkit-mask-composite: xor; mask-composite: exclude.

Section structure: min-h-screen flex flex-col — navbar top, content centered flex-1, marquee bottom.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa marki: TOONHUB → np. FIGURART
Tekst ghost: "3D SHAPE" → np. "3D WORLD"
Label marki: "TOONHUB FIGURINES" → swój
Opis: "The artwork is stunning, shipped fully prepared..." → swój
Tekst linku: "DISCOVER IT" → np. "ODKRYJ"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single full-viewport hero section in React + TypeScript + Vite + Tailwind CSS, using lucide-react for icons. Character-figurine carousel called "TOONHUB".

Fonts (index.html): Anton + Inter (wagi 400-700) from Google Fonts. Body: Inter. Display (ghost text + bottom-right link): Anton.

Image data (4 items, exact URLs and colors):
const IMAGES = [
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/1.02464a56.png', bg: '#F4845F', panel: '#F79B7F' },
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/2.b977faab.png', bg: '#6BBF7A', panel: '#85CC92' },
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/3.4df853b4.png', bg: '#E882B4', panel: '#ED9DC4' },
  { src: 'https://fifth-gentle-45902158.figma.site/_components/v2/4de492f6d9cf8244ad5293233e5c6f52407d42fc/4.4457fbce.png', bg: '#6EB5FF', panel: '#8DC4FF' },
];
Preload all 4 on mount via new Image().

State: activeIndex (0-3), isAnimating (lock), isMobile (window.innerWidth < 640). navigate('next'|'prev'): ignore if animating; set animating; bump index; release after 650ms. Roles: center=activeIndex, left=(idx+3)%4, right=(idx+1)%4, back=(idx+2)%4.

Layout: Outer div backgroundColor: IMAGES[activeIndex].bg, transition background-color 650ms cubic-bezier(0.4,0,0.2,1). Inside: relative w-full height 100vh overflow hidden.

1. Grain overlay (absolute inset-0 pointer-events-none z-50): SVG fractalNoise data URI, baseFrequency=0.9, numOctaves=4, opacity 0.08, container opacity 0.4, backgroundSize 200px.

2. Ghost text "3D SHAPE" (absolute inset-x-0, z-2, top 18%): Anton, fontSize clamp(90px,28vw,380px), white, opacity 1, uppercase, letterSpacing -0.02em.

3. Brand label "TOONHUB" (absolute top-6 left-4 sm:left-8, z-60): text-xs font-semibold uppercase, white, 0.9 opacity, letterSpacing 0.18em.

4. Carousel (absolute inset-0 z-3): 4 items, each position absolute, aspectRatio '0.6/1'. Per role:
center: translateX(-50%) scale(1.68 desktop/1.25 mobile), no blur, opacity 1, z-20, left 50%, height 92%/60% desktop/mobile, bottom 0/22%.
left: translateX(-50%) scale(1), blur 2px, opacity 0.85, z-10, left 30%/20%, height 28%/16%, bottom 12%/32%.
right: same as left but left 70%/80%.
back: translateX(-50%) scale(1), blur 4px, opacity 1, z-5, left 50%, height 22%/13%, bottom 12%/32%.
Transition: 650ms cubic-bezier(0.4,0,0.2,1) on transform/filter/opacity/left.

5. Bottom-left text + nav (absolute bottom-6 left-4 sm:bottom-20 sm:left-24, z-60, maxWidth 320px):
"TOONHUB FIGURINES" bold uppercase tracking-widest mb-2, white.
Description paragraph (hidden sm:hidden): "The artwork is stunning, shipped fully prepared..." text-xs/sm white/0.85.
Two circular buttons (w-12 h-12 sm:w-16 sm:h-16, border 2px white): ArrowLeft + ArrowRight (lucide, size 26, strokeWidth 2.25). Hover: scale 1.08 + rgba(255,255,255,0.12). navigate('prev'/'next').

6. Bottom-right link "DISCOVER IT" (absolute bottom-6 right-4 sm:bottom-20 sm:right-10, z-60): Anton, fontSize clamp(20px,4vw,56px), white, uppercase, + ArrowRight icon.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa produktu: bloom / "Bloom" → np. Flore
Nagłówek hero: "Innovating the / spirit of bloom AI" → swój
Przycisk CTA: "Explore Now" → np. "Odkryj"
3 pilulki: "Artistic Gallery" / "AI Generation" / "3D Structures" → swoje
Cytat: "We imagined a realm with no ending." → swój
Autor cytatu: "MARCUS AURELIO" → swój
Tekst community card: "Enter our ecosystem" + opis → swój
Tytuły feature kart: "Processing" / "Growth Archive" + "Advanced Plant Sculpting" → swoje
Przycisk "+" na karcie → pozostaw
Linki social: Twitter / LinkedIn / Instagram → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a full-screen hero landing page for "Bloom" — an AI-powered plant/floral design platform. Liquid glass morphism over looping video background.

Background video (full-screen, z-0, object-cover): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4 (autoplay, loop, muted).

Fonts: Poppins (Google Fonts) for headings/body (weight 500 for headings). Source Serif 4 for italic/emphasis text inside headings only. Both via Google Fonts.

Colors: Strict grayscale HSL 0 0% X%. All text white hierarchy: text-white, text-white/80, text-white/60, text-white/50.

Liquid Glass CSS (two tiers, under @layer components):
.liquid-glass: background rgba(255,255,255,0.01), backdrop-filter blur(4px), box-shadow inset 0 1px 1px rgba(255,255,255,0.1). ::before: gradient border (0.45→0.15→0→0→0.15→0.45 alpha), padding 1.4px, mask-composite exclude.
.liquid-glass-strong: same but backdrop-filter blur(50px), box-shadow 4px 4px 4px rgba(0,0,0,0.05) + inset, ::before 0.5→0.2→0 stops.

Layout: Flex row, min-h-screen. Left panel w-[52%], right panel w-[48%] (hidden below lg).

LEFT PANEL: liquid-glass-strong overlay (absolute inset-4 lg:inset-6 rounded-3xl). Nav: Logo (/logo.png 32x32) + "bloom" text left. "Menu" button with Menu icon right (liquid-glass pill). Hero center (flex-1, centered): Logo again (80x80). h1: "Innovating the / spirit of bloom AI" (text-6xl lg:text-7xl, tracking-[-0.05em], white, italic part in font-serif text-white/80). CTA: "Explore Now" + Download icon in w-7 h-7 rounded-full bg-white/15. Button liquid-glass-strong, rounded-full, hover:scale-105. Three pills: "Artistic Gallery" / "AI Generation" / "3D Structures" (liquid-glass, rounded-full, text-xs text-white/80). Bottom quote: "VISIONARY DESIGN" label (text-xs tracking-widest uppercase text-white/50). Quote "We imagined a realm with no ending." (mixed font-display/font-serif italic). Author "MARCUS AURELIO" with horizontal lines.

RIGHT PANEL (desktop only): Top bar: Social icons (Twitter, LinkedIn, Instagram) in liquid-glass pill + ArrowRight. Account button with Sparkles icon. Community card: liquid-glass w-56, "Enter our ecosystem" + description. Bottom feature section (mt-auto): Outer liquid-glass rounded-[2.5rem]. Two side-by-side cards: "Processing" (Wand2 icon) + "Growth Archive" (BookOpen icon), each liquid-glass rounded-3xl. Bottom card: flower image (src from @/assets/hero-flowers.png, 96x64) + "Advanced Plant Sculpting" + description + "+" button. All liquid-glass.

Icons from lucide-react: Sparkles, Download, Wand2, BookOpen, ArrowRight, Twitter, Linkedin, Instagram, Menu.
No border classes — glass effect handles via ::before. --radius: 1rem.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: "SENTINEL" + "AI" → np. "GUARDIAN" + "AI"
Podtytuł: "We implement security correctly." → swój
Opis: "Enterprise security systems built in days..." → swój
Przycisk 1: "Book a Call" → np. "Umów konsultację"
Przycisk 2: "Our Work" → np. "Nasze prace"
Tekst zaufania: "Trusted security partner. Columbus, OH. 12 systems deployed." → swój
Linki nav: Services / About Us / Projects / Team / Contacts → swoje
Przycisk nav: "Get Quote" → np. "Zapytaj o wycenę"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a full-screen dark hero landing page for "SENTINEL AI" using React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and @splinetool/react-spline.

FONT: Google Fonts "Sora" (weights 300-700) in index.html. Tailwind: fontFamily: { sora: ["Sora", "sans-serif"] }. Apply font-sora antialiased on body.

COLOR THEME (dark only, HSL CSS vars):
--background: 0 0% 10%, --foreground: 0 0% 96%, --primary: 119 99% 46% (vivid green), --primary-foreground: 0 0% 4%,
--secondary: 0 0% 18%, --muted: 0 0% 16%, --muted-foreground: 0 0% 60%, --accent: 119 99% 46%,
--border: 0 0% 20%, --ring: 119 99% 46%, --radius: 0.5rem,
--nav-button: 0 0% 18%, --hero-bg: 0 0% 8%.

CUSTOM ANIMATIONS (Tailwind config keyframes):
fade-up: 0%={opacity:0, transform:translateY(20px), filter:blur(4px)} 100%={opacity:1, transform:translateY(0), filter:blur(0)}. Animation: 0.7s cubic-bezier(0.16,1,0.3,1) forwards.
fade-in: 0%=opacity:0, 100%=opacity:1. Animation: 0.5s ease-out forwards.

NAVBAR (fixed top-0, z-50, px-8 lg:px-16 py-5):
Left: "SENTINEL" logo (text-foreground text-xl font-semibold tracking-tight).
Center: ["Services","About Us","Projects","Team","Contacts"] links (text-sm text-muted-foreground hover:text-foreground uppercase tracking-widest, hidden md:flex gap-8).
Right: "Get Quote" (navCta variant: text-foreground bg-nav-button hover:bg-nav-button/80, rounded-lg uppercase text-xs tracking-widest px-6, hidden md:inline-flex).

HERO SECTION (relative min-h-screen flex items-end bg-hero-bg overflow-hidden):
1. Spline 3D Background: React.lazy + Suspense. <Spline scene="https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode" className="w-full h-full" />. Inside absolute inset-0.
2. Dark overlay: absolute inset-0 bg-black/30 z-[1] pointer-events-none.
3. Content (relative z-10 pointer-events-none max-w-[90%] sm:max-w-md lg:max-w-2xl px-6 md:px-10 pb-10 md:pb-10 pt-32):

h1 (delay 0.2s): "SENTINEL" (white) + " AI" (text-primary green). clamp(3rem,8vw,6rem) font-bold tracking-[-0.05em] uppercase. animate-fade-up opacity-0.
Subheading (delay 0.4s): "We implement security correctly." text-foreground/80 clamp(1.125rem,2.5vw,1.875rem) font-light.
Description (delay 0.55s): "Enterprise security systems built in days. AI-powered surveillance deployed with zero-trust architecture..." text-muted-foreground clamp(0.875rem,1.5vw,1.25rem) font-light.
Two buttons (delay 0.7s, pointer-events-auto): "Book a Call" (bg-primary text-primary-foreground px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm hover:brightness-110) + "Our Work" (bg-white text-background hover:brightness-90).
Trust line (delay 0.85s): "Trusted security partner. Columbus, OH. 12 systems deployed." text-muted-foreground/60 text-xs.

PAGE WRAPPER: <div className="bg-hero-bg min-h-screen"> with <Navbar /> + <HeroSection />.
Deps: @splinetool/react-spline, @splinetool/runtime, tailwindcss-animate, shadcn/ui Button, class-variance-authority.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa studia: Foldcraft → np. Pixelcraft
Badge: "Brand & Visual Storytelling" → swój
Nagłówek: "Shaping visual / narratives, / one pixel at a time." → swój
Podtytuł: "Turning vision into reality through craft, motion, and an endless pursuit of beauty." → swój
Przycisk CTA: "Explore Work" → np. "Zobacz prace"
Linki nav: Home / Projects / Studio / Reach Us → swoje
Przycisk desktop: "Let's Talk" → np. "Porozmawiajmy"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a fullscreen hero landing page for creative studio "Foldcraft" using React, Tailwind CSS, and Lucide React icons. Single viewport-height with looping background video, responsive navbar, mobile menu, and staggered-animated hero text.

Video Background: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204221_5339e40b-e73d-4ab0-9c65-79c18c66fd50.mp4 (autoPlay muted loop playsInline). Absolute positioned, w-full h-full object-cover object-position 70% center. Behind all content.

Font: Google Fonts Geist (weights 300-700). Tailwind extends fontFamily: { geist: ['Geist', 'sans-serif'] }. Applied as font-geist on root. Body: -webkit-font-smoothing antialiased.

Root Container: relative h-screen w-full overflow-hidden bg-black font-geist.

Navbar (z-30): Flex space-between, px-6 py-5 md:px-12 lg:px-16. Left: "Foldcraft" (text-lg font-semibold tracking-tight text-white) + desktop nav links (hidden md:flex): Home/Projects/Studio/Reach Us (text-sm text-white/80 hover:text-white). Right (desktop): "Let's Talk" (rounded-lg bg-white px-5 py-2 text-sm font-medium text-black hover:scale-105). Right (mobile): hamburger (40x40 z-50) with animated Menu/X icons (lucide, duration-300, rotate transitions). active:scale-90.

Mobile Menu (z-20): Absolute inset-x-0 top-0 overlay with bg-black/98 backdrop-blur-xl. Transition 500ms cubic-bezier(0.16,1,0.3,1): h-screen opacity-100 (open) vs h-0 opacity-0 pointer-events-none (closed). Inner content: flex h-full flex-col justify-center px-8, delay-100 fade+translate. Links: Home/Projects/Studio/Reach Us (text-3xl font-medium text-white/90). Button: "Let's Talk" (mt-6 rounded-full bg-white px-8 py-3.5 font-medium text-black). All close on click.

Hero Content (z-10): flex column justify-between, h-[calc(100vh-80px)], px-6 pb-10 pt-12 md:px-12 md:pb-16 md:pt-20 lg:px-16.

Top section (max-w-3xl):
Badge "Brand & Visual Storytelling" (text-xs sm:text-sm text-white/90, animate-[fadeSlideUp_0.8s_ease_0.2s_both], mb-4).
h1 "Shaping visual / narratives, / one pixel at a time." with br line breaks. text-3xl sm:text-5xl md:text-6xl lg:text-7xl font-medium leading-[1.1] tracking-tight text-white. animate-[fadeSlideUp_0.8s_ease_0.4s_both].

Bottom section:
Paragraph "Turning vision into reality..." text-sm sm:text-base md:text-lg text-white/60 max-w-sm sm:max-w-lg mb-5, animate-[fadeSlideUp_0.8s_ease_0.7s_both].
CTA "Explore Work" + ArrowRight (size 16): rounded-lg bg-white px-5 py-2.5 sm:px-6 sm:py-3 text-sm font-medium text-black hover:scale-105, animate-[fadeSlideUp_0.8s_ease_0.9s_both].

CSS Animation (index.css):
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
CSS Reset: * { margin:0; padding:0; box-sizing:border-box }
Deps: React, lucide-react (ArrowRight, Menu, X), Tailwind.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa produktu: flowpath → np. Mindflow
Nagłówek: "Bridge the / gaps. Ditch the / grindwork." → swój
Podtytuł: "Flowpath unifies your complete wellness tools..." → swój
Przycisk 1: "Begin your journey" → np. "Zacznij"
Przycisk 2: "See it live" → np. "Demo"
Linki nav: Product / Solutions / About / Plans → swoje
Dropdown items: Connections/Workflows/Insights / Guides/Use cases/API reference / Our story/Open roles/Reach us → swoje
Przycisk login: "Log in" → swój
Przycisk CTA: "Try it free" → np. "Wypróbuj"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a fullscreen hero section for SaaS "flowpath" using React, Tailwind CSS, and Lucide React. h-screen w-full overflow-hidden.

Background: Looping muted autoplay video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260703_053131_1ec3dd1c-d627-44fb-ab20-6e1fce41b0d5.mp4 (object-cover). Subtle dark overlay: bg-black/10.

Font: "Helvetica Now Text" from https://db.onlinewebfonts.com/c/08e020de1811ec4489f82d1247a42c09?family=Helvetica+Now+Text. Fallback: system fonts. Applied globally via * { font-family: ... }.

Navigation (not fixed): px-5 sm:px-6 md:px-12 lg:px-16, py-4 sm:py-5. Logo: inline SVG diamond (28x28, two overlapping diamond paths at 0.9 and 0.5 opacity) + "flowpath" (text-lg sm:text-xl font-medium tracking-tight text-white). Desktop nav: "Product"(dropdown: Connections/Workflows/Insights) / "Solutions"(dropdown: Guides/Use cases/API reference) / "About"(dropdown: Our story/Open roles/Reach us) / "Plans". Nav buttons text-white/90, ChevronDown (3.5x3.5, rotates 180deg when open). Dropdowns onMouseEnter/Leave, absolute top-full, .liquid-glass rounded-xl py-3 px-2. Desktop CTA: "Log in" link + "Try it free" (.liquid-glass rounded-full px-5 py-2). Mobile menu: animated Menu/X toggle. Slides in cubic-bezier(0.16,1,0.3,1) 400ms, bg-[#2C221C]/95 backdrop-blur-xl rounded-2xl p-6.

Hero Content (flex-1 flex items-start justify-center pt-16 sm:pt-20 md:pt-24): text-center max-w-3xl. h1: "Bridge the\ngaps. Ditch the\ngrindwork." where "Ditch the" and "grindwork." are text-white/60. text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] tracking-[-0.02em] text-white. Subheading: "Flowpath unifies your complete wellness tools..." text-white/80 text-sm→lg max-w-md mx-auto mt-6. Two CTAs (flex flex-wrap items-center justify-center gap-3 mt-6): "Begin your journey" (bg-white text-gray-900 rounded-full hover:bg-white/90) + "See it live" (.liquid-glass rounded-full text-white hover:bg-white/10).

.liquid-glass CSS:
background: rgba(255,255,255,0.01); backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1).
::before: absolute inset-0, border-radius inherit, padding 1.4px, linear-gradient(180deg, 0.45→0.15→0→0→0.15→0.45 rgba white), mask-composite: exclude.

Additional CSS: @keyframes dropdown-in { from {opacity:0; transform:translateY(-4px) scale(0.96)} to {opacity:1; transform:translateY(0) scale(1)} }. .animate-dropdown { animation: dropdown-in 0.2s ease-out }. Dropdown needs !absolute to override .liquid-glass position:relative.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa platformy: DesignPro → np. SkillForge
Tekst górny lewy: "We deliver transformative programs..." → swój
Tekst górny prawy: "8000+ Talented Designers Launched !" → swoje liczby
Małe hasło: "Seats for Next Program Opening Soon" → swój
Nagłówek linia 1: "Become" → np. "Zostań"
Nagłówek linia 2: "Product Leader." → np. "Ekspertem UI."
Przycisk CTA: "Apply for Next Enrollment" → np. "Zapisz się"
Linki nav: Home / About Us / Courses / Instructors / Testimonials / Blog / Contact us → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a full-screen hero section for product design education platform "DesignPro". React + TypeScript + Vite + Tailwind CSS + Framer Motion + Lucide React.

Background: Looping video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_105406_16f4600d-7a92-4292-b96e-b19156c7830a.mp4 (autoplay, loop, muted, playsInline). Background color: black #000.

Navigation Bar: Logo: circular white border (2px) + smaller filled white circle inside + "DesignPro" text. Nav links in rounded pill container (gray-700 border): Home/About Us/Courses/Instructors/Testimonials/Blog/Contact us (with ArrowRight icon). All links: white/80, hover white, text-sm. Mobile: hamburger on <lg. Max-width 7xl.

Content Layout:
Top section (two-column on lg, stacked mobile): Left: "We deliver transformative programs that empower emerging product designers..." (white/80, text-sm/text-base). Right (right-aligned lg): "8000+ Talented Designers Launched !" (white/80).

Hero center: Small uppercase: "Seats for Next Program Opening Soon" (white/80, text-xs/text-sm, tracking-tight). Main heading: Line 1: "Become" (white, font-medium). Line 2: "Product Leader." with ShinyText animated shiny gradient. Font sizes: text-5xl→text-9xl (xl). Line-height: 0.85. tracking-tighter.

ShinyText Component (Framer Motion): Base color #64CEFB (light blue). Shine color #ffffff. Speed: 3s. Gradient spread 100 degrees. Sweeping gradient bg-clip-text text-transparent, animated backgroundPosition.

CTA Button: "Apply for Next Enrollment" + ArrowRight (lucide). Black bg, hover gray-900, rounded-full, px-6 md:px-8 py-3 md:py-4. Arrow translates right on hover (group-hover).

Typography: Font family Inter (sans-serif). Body text white/80. Headings/hover full white.
Section height: h-screen. Video: absolute inset-0 object-cover z-0. Content: relative z-10.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa agencji: Alwayzz → np. Crafted
Tagline: "Premium creative alwayzz® on demand." → swój
Podtytuł: "A flexible design partnership..." → swój
Przycisk: "View Plans" → np. "Zobacz plany"
Przycisk book: "Chat for 15 minutes" / "Pick a slot" → swój
Ticker items: Brand Identity / App Development / Visual Design / Creative Video / Iconography → swoje
Tekst linku book-avatar: imię/tekst → swój
Linki drawer: Projects / Plans / Team / FAQs / Get in Touch → swoje
Firmy w marquee: Airbnb / Shopify / Notion / Linear / Webflow / Figma / Slack / Stripe / Vercel / Framer → swoje
TrustedBy label: "Partnered with top-tier companies globally" → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a single-page hero for creative agency "Alwayzz" using React + Vite + Tailwind CSS. Use custom CSS (not Tailwind utilities) for all styling. Minimal, black-and-white, tight negative letter-spacing.

Fonts (Google Fonts in index.html): Inter (400,500,600,700) + Source Serif 4 (400,600, normal and italic).

CSS Variables: --bg:#ffffff; --text:#0a0a0a; --muted:#6b6b6b; --button-bg:#0a0a0a; --button-text:#ffffff; --border-soft:rgba(0,0,0,0.08); --green:#17c964.

NAVBAR (fixed top z-100): padding 19px 36px, max-width 1200px centered. Left: "Alwayzz" (Source Serif 4 30px weight 600 italic, letter-spacing -0.08em) + ® (Inter 14px weight 600). Right: "Menu" pill (black bg, white text, rounded-full, 14px weight 500, ChevronUp icon). Full-screen drawer on click: white bg, fade 0.4s. Nav links 48px weight 500, letter-spacing -0.04em: Projects/Plans/Team/FAQs/Get in Touch. Footer with copyright.

HERO (min-height 850px, padding 160px 36px, centered flex column):
Background (::before pseudo, full section): url('https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260626_041422_4a459e05-abce-4150-9fb7-4ededc423cd1.png&w=1280&q=85'), cover center.

Curved line animations: 20 lines left + 20 right, absolutely positioned. Each: tall rectangle, one-sided border-radius 80%, 2.5px solid #FCFAF8 border. Left: no left border, radius right. Right: no right border, radius left. Stagger: i * 0.25s. Widths from 60px + 10px each. Animation: line-pulse 5s ease-in-out infinite. Mobile (<810px): hide side lines, show horizontal top lines.

Ticker row (max-width 500px h-36px): marquee scrolling left 30s linear infinite. Items: "Brand Identity"/"App Development"/"Visual Design"/"Creative Video"/"Iconography" (13px weight 500 color var(--muted), px-[14px] py-[6px] rounded-full bg-[rgb(251,251,251)]). Edge fade mask: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%). 4x duplicated rows.

Title: "Premium creative <span class='serif italic'>alwayzz</span><sup>®</sup> on demand." Max-width 550px, 82px, line-height 1.03, letter-spacing -0.07em, weight 600. "alwayzz" in Source Serif 4 italic weight 600. ® in Inter 24px weight 600 vertical-align super.

Subtitle: "A flexible design partnership for founders, brands, and agencies..." Max-width 476px, 17px, line-height 1.45, weight 400, color var(--muted).

CTA row (flex gap-16px centered): "View Plans" (h-56px px-[30px], rounded-full, black bg, white text, 15px weight 600 Inter, hover: translateY(-1px) + box-shadow). Book button: white bg, 4px solid rgb(248,248,248) border, rounded-full, px-24px pr-24px pl-8px py-8px. Contains: avatar (40px circle, https://framerusercontent.com/images/hfneFL6CHBi5BnNvCeOaqU9HqE4.png) + text stack: "Chat for 15 minutes" (14px weight 600 black) + "Pick a slot" (12px weight 500 rgb(152,152,152)) + green dot (8px circle rgb(29,204,93)).

Progressive blur bottom: absolute full-width h-178px, gradient transparent→rgba(255,255,255,0.4)@40%→solid white.

TRUSTED BY SECTION (padding 36px, max-width 1200px): Left: "Partnered with top-tier companies globally" (max-width 163px, 14px weight 500 muted). Right: horizontal marquee 30s of company names as text logos with distinct fonts: Airbnb(Cedarville Cursive 700)/Shopify(system-ui 800)/Notion(Georgia 500)/Linear(Inter 600)/Webflow(Inter 700)/Figma(system-ui 600)/Slack(Georgia 700)/Stripe(system-ui 800)/Vercel(Inter 600)/Framer(Source Serif 4 600). Same edge-fade mask.

RESPONSIVE: <1200px: hero padding 140px 32px, title clamp(60px,8vw,72px). <810px: bg image rotated 90deg, side lines hidden/top lines shown, title clamp(44px,13vw,52px), CTA stack vertical full-width max 320px.

Keyframes: marquee-left (translateX 0→-50%), line-pulse (opacity/scale cycle 5s).

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Imię/nazwisko: Viktor. → np. Anna.
Email: Davies@gmail.com → swój email
Linki nav: 01/Works / 02/Services / 03/About / 04/Contact → swoje
Tytuł slajdu 1: "01 / WATER WAVE" → swój projekt
Tytuł slajdu 2: "02 / GRIDWAVE" → swój projekt
Tytuł slajdu 3: "03 / LIGHT TUNNEL" → swój projekt
Opis (akapit): "I craft bold brands and modern websites..." → swój
Przycisk: "start a project" → np. "rozpocznij projekt"
Tekst dostępności: "Available for work" → np. "Dostępny"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a full-screen hero for creative portfolio using React, Vite, Tailwind CSS, Figtree Google Font. Black background, white text. Navbar + Hero components. No extra packages beyond lucide-react.

Font: Figtree (400,500,600) from Google Fonts in index.html. Custom breakpoints: mobile (max 809.98px), md-tablet (810-1199.98px). CSS var: --ease-spring: cubic-bezier(0.16,1,0.3,1).

VIDEO BACKGROUND: 3 full-screen looping videos (muted, autoPlay, playsInline, loop) stacked absolutely. Active: opacity-100, others: opacity-0 transition-opacity duration-[1200ms] ease-in-out.
URLs:
1. https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260629_030107_874273ea-684a-4e90-bb96-8fdfde48d53d.mp4
2. https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260629_032424_3c9c2a9d-807b-4482-80e6-dd6d9dfd4545.mp4
3. https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260627_094019_4214ea73-b963-46a4-8327-61489192de99.mp4
Preloading: fetch all as blobs → object URLs. bg-black/10 overlay above videos z-[1].

NAVBAR (absolute z-10, max-w-[1340px], py-9 px-[15px]):
Left: nav items "01 / Works" / "02 / Services" / "03 / About" / "04 / Contact" (index: text-[8px] tracking-[-0.08px] font-medium uppercase, label: text-xs). .nav-link-underline (scaleX from right on hover).
Right: Email "Davies@gmail.com" + live clock "CUP HH:MM:SS" (24h, Intl.DateTimeFormat, updates every second).
Mobile: nav items hidden, Menu/Close toggle. Mobile panel: grid grid-rows-[0fr]/[1fr] 420ms spring. Mobile links: text-[28px].

HERO CONTENT (z-[2], max-w-[1340px], full height, flex column justify-end items-end, gap-[150px], pt-[190px] px-[15px]):

Section 1 (video switcher + availability):
Left (flex-[4]): 3 buttons "01/WATER WAVE" / "02/GRIDWAVE" / "03/LIGHT TUNNEL". Active: opacity-100. Inactive: opacity-55 hover:opacity-75. Click sets activeIndex → crossfades videos. .role-link: translateX 4px on hover.
Right (flex-1): Pulsing dot + "Available for work". Dot 7px circle with glow, infinite pulse (scale 1→1.45, opacity 1→0.45, 1.6s). Slide 1: #F598F2 pink. Slides 2-3: white.

Section 2 (bottom, pb-[60px]):
Left (flex-[2]): "Viktor." in text-[200px] leading-[81%] tracking-[-6px] font-medium uppercase. Period color: pink #F598F2 (slide 1) or white. revealUp animation (translateY 80px→0, 0.9s spring).
Right (flex-1, pl-[50px]): Paragraph "I craft bold brands and modern websites with purpose..." text-base font-medium. "start a project" button with white border, fill-up hover effect (::before with #F598F2 bg, translateY 101%→0, text turns black, border pink). revealRight animation (translateX 100px→0, delay 0.08s).

Reveal animations: trigger once via IntersectionObserver at 0.35 threshold.

Responsive mobile (<810px): justify-end items-start gap-[72px] pt-[140px] px-[18px]. Switcher+availability stack vertically gap-7. Bottom section: column, gap-8 pb-11. Name: clamp(68px,21vw,80px).

Custom CSS: @keyframes revealUp { from {opacity:0; transform:translateY(80px)} to {opacity:1; transform:translateY(0)} }. @keyframes revealRight { from {opacity:0; transform:translateX(100px)} to {opacity:1} }. @keyframes dotPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.45;transform:scale(1.45)} }. prefers-reduced-motion disables animations.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: ✦ Nexora → np. ✦ AutoFlow
Badge: "Now with GPT-5 support ✨" → swój
Nagłówek: "The Future of Smarter Automation" (słowo "Smarter" kursywą) → swój
Podtytuł: "Automate your busywork with intelligent agents..." → swój
Przycisk 1: "Book a demo" → np. "Umów demo"
Linki nav: Home / Pricing / About / Contact → swoje
Tekst dashboard: "Welcome, Jane" / "Mercury Balance" / "Accounts" / "Recent Transactions" → swoje (opcjonalnie)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a SaaS landing page hero for "Nexora". Page is h-screen flex flex-col bg-background overflow-hidden (Navbar + Hero fill 100vh).

Fonts (CSS import): Instrument Serif (display/headings, including italic) + Inter (body).

CSS variables (:root): --background:0 0% 100%, --foreground:210 14% 17%, --primary:210 14% 17%, --secondary:0 0% 96%, --muted:0 0% 96%, --muted-foreground:184 5% 55%, --accent:239 84% 67% (indigo), --border:0 0% 90%, --ring:239 84% 67%, --radius:0.5rem, --font-display:'Instrument Serif' serif, --font-body:'Inter' sans-serif, --shadow-dashboard:0 25px 80px -12px rgba(0,0,0,0.08),0 0 0 1px rgba(0,0,0,0.06).

Navbar: flex items-center justify-between px-6 md:px-12 lg:px-20 py-5. Left: "✦ Nexora" (text-xl font-semibold tracking-tight text-foreground). Right: "Home"/"Pricing"/"About"/"Contact" (text-sm text-muted-foreground gap-8, hidden mobile). CTA: rounded-full px-5 text-sm font-medium.

Hero (background video absolute inset-0 object-cover z-0): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4 (muted autoplay loop). All content: relative z-10 flex flex-col items-center w-full.

1. Badge (Framer Motion, y:10→0, 0.5s): inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground. "Now with GPT-5 support ✨". mb-6.

2. Headline (y:16→0, 0.6s, delay 0.1): text-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl. "The Future of Smarter Automation" — "Smarter" in Instrument Serif italic.

3. Subheadline (y:16→0, 0.6s, delay 0.2): mt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed. "Automate your busywork with intelligent agents..."

4. CTA Buttons (y:16→0, 0.6s, delay 0.3): mt-5 flex items-center gap-3. Primary "Book a demo" (rounded-full px-6 py-5 text-sm font-medium). Play button (ghost h-11 w-11 rounded-full bg-background shadow, Play icon fill-foreground).

5. Dashboard Preview (Framer Motion y:30→0, 0.8s, delay 0.5): mt-8 w-full max-w-5xl. Frosted glass wrapper: rounded-2xl overflow-hidden p-3 md:p-4, background rgba(255,255,255,0.4), border rgba(255,255,255,0.5), shadow: var(--shadow-dashboard).

Dashboard internals (text-[11px], select-none pointer-events-none):
Top bar: "N" rounded box + "Nexora" + chevron | Search ⌘K | "Move Money" + bell + avatar "JB".
Sidebar (w-40): Home(active)/Tasks(badge "10")/Transactions/Payments(chevron)/Cards/Capital/Accounts(chevron). Section "Workflows": Trake rutes/Payments/Notifications/Settings.
Main content (bg-secondary/30): Greeting "Welcome, Jane" (text-sm font-semibold). Action buttons: Send(primary/accent)/Request/Transfer/Deposit/Pay Bill/Create Invoice + "Customize". Two cards side by side: Balance card ("Mercury Balance" + checkmark, $8,450,190.32, Last 30 Days stats, SVG area chart accent color) + Accounts card (Credit $98,125.50/Treasury $6,750,200.00/Operations $1,592,864.82). Transactions table: AWS -$5,200 Pending(amber)/Client Payment +$125,000 Completed(green)/Payroll -$85,450 Completed/Office Supplies -$1,200 Completed.

Deps: framer-motion, lucide-react, shadcn/ui Button, tailwindcss-animate. No dark mode.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Logo: "Logoipsum" → swoja nazwa
Nagłówek: "Transform Data Quickly" → swój
Podtytuł: "Upload your information and get powerful insights..." → swój
Badge tekst: "Discover what's possible" → swój
Placeholder input: "Type question..." → swój
Tekst kredytów: "60/450 credits" + "Upgrade" → swoje
Linki nav: Platform / Features / Projects / Community / Contact → swoje
Przyciski nav: "Sign Up" + "Log In" → swoje
Tekst "Powered by GPT-4o" → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a modern hero section with looping video background.

Video Background: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260329_050842_be71947f-f16e-4a14-810c-06e83d23ddb5.mp4. Size: 115% width and height. Position: centered horizontally, object-top. Custom JS fade system (NO CSS transitions): 250ms rAF fade-in on load, 250ms fade-out at 0.55s from end, fadingOutRef prevents re-trigger. On ended: opacity 0, 100ms delay, reset currentTime 0, play, fade in. Each new fade cancels previous rAF.

Fonts Required: Schibsted Grotesk (400-700) + Inter (400-700) + Noto Sans (400-700) + Fustat (400-700). All from Google Fonts.

Navigation Bar: Logo "Logoipsum" (Schibsted Grotesk SemiBold 24px, -1.44px tracking). Menu: Platform / Features (ChevronDown) / Projects / Community / Contact (Schibsted Grotesk Medium 16px, -0.2px). Right: "Sign Up" (transparent, 82px) + "Log In" (black bg, white, 101px). Padding 120px horizontal 16px vertical.

Hero Content (-mt-[50px] to move up 50px):
Badge: Dark badge (#0e1311) with star icon + "New" text + light pill "Discover what's possible" (Inter Regular 14px, rounded, shadow).
Main Headline: "Transform Data Quickly" (Fustat Bold 80px, -4.8px tracking, black, center).
Subtitle: "Upload your information and get powerful insights right away..." (Fustat Medium 20px, -0.4px tracking, #505050, max-width 736px width 542px).

Search Input Box: Backdrop blur dark transparent (rgba(0,0,0,0.24)). Dimensions: 728px max-width, 200px height, rounded 18px. 
- Top row: "60/450 credits" + green "Upgrade" button. AI icon + "Powered by GPT-4o". Schibsted Grotesk Medium 12px white.
- Main input: white bg rounded-12px shadow, placeholder "Type question..." (16px rgba(0,0,0,0.6)). Black circular submit (36px) with up arrow.
- Bottom row left: "Attach" (paperclip) + "Voice" (mic) + "Prompts" (search) gray bg rounded-6px. Right: "0/3,000" (12px gray).

Spacing: gap 60px nav→hero, 44px header→search, 34px within header, 120px horizontal padding.
Colors: Black #000, gray #505050, light gray #f8f8f8, green rgba(90,225,76,0.89), dark badge #0e1311.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: SynapseX → np. NeuralAI
Nagłówek hero linia 1: "Brain" + "And Body" → np. "Mind" + "And Machine"
Opis hero: "Built at the intersection of neuroscience and artificial intelligence..." → swój
Nagłówek hero linia 2: "One" + "Network" → np. "One" + "System"
Tekst section 2: "A neural-AI interface built on the architecture..." → swój
Metryki (3): "2.4ms" Synaptic Latency / "99.7%" Signal Accuracy / "140B" Neural Parameters → swoje
Section 4 heading: "Adaptive" / "Intelligence" → swoje
Tekst section 4: "The system learns your neural baseline within 72 hours..." → swój
4 feature karty: Cortical Mapping / Signal Isolation / State Prediction / Loop Feedback → swoje
Section 5 heading: "Three layers. Zero friction." + opis → swoje
Layer karty: Capture / Process / Interface → swoje
Footer tekst: "The next evolution of human-machine interaction..." → swój
Przycisk nav: "Download" → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page landing site for "SynapseX" — futuristic neural-AI interface. Black bg, white text. Primary font: Space Mono (monospace). React + TypeScript + Vite + Tailwind CSS + Framer Motion.

Fonts: Space Mono (400,700,italic) + Anton SC (background watermark only). Bootstrap Icons CDN for Apple icon. All Tailwind fontFamily keys override to "Space Mono".

VIDEO URLS (exact):
1. Hero (mouse-scrubbed): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_083515_290e5a10-0b95-41af-a5e2-32b6389baa4d.mp4
2. Section 2: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_092455_089c54f8-3b03-4966-9df1-e9746063d0ef.mp4
3. Metrics: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095810_ecea3dd2-fc5e-4e41-8696-4219290b6589.mp4
4. Technology: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_095750_32a52ce0-2005-45c9-9093-41f03fde9530.mp4
5. Footer: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_080203_fd7f4f85-3a86-4837-8192-85e7bfe68e75.mp4

ScrambleIn: Props text/delay/triggered. Char set alphanumeric+symbols. Interval 25ms, 0.5 chars/frame reveal left-to-right. 3 random chars ahead. Spaces always spaces. Before triggered:

ScrambleText: Props text/isHovered. Hover: scramble all → reveal left-right at 4 frames/char, 25ms. Unhover: reset to original.

SynapseXLogo SVG: viewBox "-50 -50 100 100". 4-fold rotational symmetry. Each quadrant path rotated 0/90/180/270deg: "M 1.5,23 L 1.5,33 C 1.5,38.5 6,43 11.5,43 L 16.5,43 C 22,43 26.5,38.5 26.5,33 Q 28,28 33,26.5 C 38.5,26.5 43,22 43,16.5 L 43,11.5 C 43,6 38.5,1.5 33,1.5 L 23,1.5 Q 12,12 1.5,23 Z".

SquashHamburger: 3 bars. Open: top rotate 45deg translate down, middle fade/scale out, bottom rotate -45deg translate up. Spring stiffness 300 damping 20.

SECTION 1 - HERO (full viewport h-[100dvh]): Video #1 NOT autoplay, paused at 0. Mouse-scrub: horizontal mousemove scrubs timeline. Sensitivity 0.8. seeked event chains seeks. entranceComplete after 800ms → all content fades in (opacity 0→1, 1s). Dot grid overlay: radial-gradient white 1px, 24x24px, opacity 0.05. Watermark "TRANSCENDENCE" in Anton SC, clamp(120px,30vw,521px), opacity 0.10, radial gradient fill. Bottom row flex-col md:flex-row md:justify-between: Left h1 "Brain" / "And Body" (ScrambleIn delays 200/500ms), description paragraph. Right h1 "One" / "Network" (delays 700/1000ms, text-right).

NAVBAR (fixed z-50 h-20): Desktop: Left pills [logo pill + expanding menu pill (48→290px spring)]. Logo pill: SynapseXLogo + "SynapseX" text. Menu pill: hamburger + "About"/"Metrics" links with ScrambleText. Right: Download button (bg-white rounded-full, Apple bi-icon + "Download" ScrambleText).

SECTION 2 (full h-[100dvh]): Video #2, top 180px gradient #010103→transparent. 3D perspective (400px) text block: "A neural-AI interface built on the architecture of the human nervous system..." text-[22px]→[42px] text-white. rotateX 24deg + translateY based on scroll spring (stiffness 15 damping 32 mass 1.8). Opacity 0→1 between scroll progress 0.3-0.5.

SECTION 3 - METRICS (min-h-screen): Video #3. "Performance Metrics" subtitle (tracking 0.2em). Grid 3 cols: "2.4ms" Synaptic Latency / "99.7%" Signal Accuracy / "140B" Neural Parameters. Values: clamp(48px,10vw,96px) font-light tracking-[-0.04em]. Stagger 0.15s.

SECTION 4 - TECHNOLOGY (full h-[100dvh]): Video #4. Top: "Adaptive / Intelligence" heading + right paragraph. Bottom grid 2/4 cols: Cortical Mapping / Signal Isolation / State Prediction / Loop Feedback.

SECTION 5 - ARCHITECTURE (min-h-screen, pure black): "Three layers. Zero friction." heading. "Sensor layer captures raw bioelectric signals..." description. 3 layer cards (max-w-md h-[72px] border border-white/10): Layer 1 Capture / Layer 2 Process / Layer 3 Interface.

FOOTER: Two-column (md:flex-row). Left: Video #5 object-cover. Right: p-10 sm:p-16, SynapseXLogo + "SynapseX", description, copyright "(c) 2026 SynapseX Labs."

Key: hero video is mouse-scrubbed NOT autoplay. All h-screen also h-[100dvh]. No routing, no state management.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa studia: Atelier → np. Horizon Studio
Nagłówek: "UX and APP DESIGN for BOLD VENTURES" (italic "and" + "for") → swój
Podtytuł: "We shape digital products that define brands and unlock exponential growth." → swój
Przycisk CTA 1: "See Cases" → np. "Zobacz projekty"
Przycisk CTA 2: "Watch Reel" → np. "Obejrzyj"
Linki nav: Projects / Expertise / Studio / Insights → swoje
Linki mobilne: Projects / Expertise / Studio / Insights / Reach Out → swoje
Przycisk desktop: "Reach Out" + "Let's Talk" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a fullscreen hero landing page section for design agency "Atelier" using React, Tailwind CSS, Lucide React. Fully mobile responsive with animated hamburger mobile menu.

Fonts (Google Fonts): Instrument Serif (regular + italic) for headings/mobile menu links. Inter (300,400,500,600) for body.
Tailwind Config fontFamily: 'instrument-serif': ['"Instrument Serif"', 'serif'], sans: ['Inter', 'system-ui', 'sans-serif'].

Background: Fullscreen looping autoplay muted video, object-cover: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260622_204103_f607742e-09da-4cf5-bb06-4e67b0a531de.mp4

Layout: w-full h-screen overflow-hidden. Video absolutely positioned behind relative z-10 content layer (flex flex-col h-full).

Navbar (px-6 md:px-12 lg:px-16 py-5 md:py-6):
Left: "Atelier" (white font-semibold text-lg tracking-tight) + desktop nav links (hidden md:flex): Projects/Expertise/Studio/Insights (text-white/80 hover:text-white text-sm font-light transition-colors 200ms).
Right: "Reach Out" link (hidden mobile) + "Let's Talk" button (white bg, black text, rounded-full px-5 py-2, hidden mobile) + hamburger (mobile only).
Hamburger: 3 lines (2px height white rounded-full), middle shorter (w-4 vs w-6). Open: top/bottom rotate 45/-45deg translate, middle fades. cubic-bezier(0.76,0,0.24,1) 500ms.

Mobile Menu Overlay (fixed inset-0 z-50, md:hidden):
Backdrop: bg-black/90 backdrop-blur-xl fade 700ms.
Header: matches navbar with logo + close button (X from rotated lines).
Nav links: Stacked centered, text-4xl sm:text-5xl font-instrument-serif white, border-b border-white/10 py-4. Stagger delays (150ms + i*80ms), translate from translate-y-8→0. hover:pl-4. Items: Projects/Expertise/Studio/Insights/Reach Out.
Footer: "Let's Talk" button (white bg black text rounded-full py-4, full width, 550ms delay).

Hero Content (flex-1 flex flex-col items-center justify-start pt-4 sm:pt-6 md:pt-8 lg:pt-10 px-6 text-center):
h1 (font-instrument-serif text-white text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] max-w-5xl):
  "UX <italic>and</italic> APP"
  "DESIGN <italic>for</italic> BOLD"
  "VENTURES"
  (italic words in italic font-instrument-serif spans)
Subtext (mt-4 md:mt-5 text-white/70 text-sm md:text-base font-light max-w-md leading-relaxed): "We shape digital products that define brands" + br (hidden sm:block) + "and unlock exponential growth."
Buttons row (mt-5 md:mt-6 flex flex-col sm:flex-row items-center gap-4):
  "See Cases" + ArrowRight (bg-white text-black rounded-full px-7 py-3 text-sm font-medium, hover arrow translateX 0.5).
  "Watch Reel" + Play (border border-white/40 white rounded-full px-7 py-3, hover: bg-white/10 border-white/60).

Global CSS: * reset, html/body/root height 100% width 100% overflow-x hidden.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa marki: "Organic Visions" → np. "Wild Nature"
Nagłówek linia 1: "WITNESS THE" → np. "DISCOVER THE"
Nagłówek linia 2: "HIDDEN REALM" → np. "UNSEEN WORLD"
Podtytuł: "An odyssey through delicate living forms..." → swój
Przycisk CTA: "Begin the Experience" → np. "Rozpocznij"
Linki nav: Wander / Archive / Story / Connect → swoje
Tytuł strony: "Synthetic Nature" → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a full-screen cinematic hero section using React, Tailwind CSS, and Framer Motion. Vite + TypeScript. Deps: react, react-dom, framer-motion, lucide-react, tailwindcss. Page title: "Synthetic Nature".

VIDEO BACKGROUND: Full-screen looping: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4 (autoPlay muted loop playsInline object-cover object-center). Page bg: #010101, full viewport, overflow hidden.

FONTS (index.html links): Garamond from https://db.onlinewebfonts.com/c/2bf40ab72ea4897a3fd9b6e48b233a19?family=Garamond. Geist (300,400,500) from Google Fonts. Body: 'Geist'. Heading class .font-garamond: 'Garamond','Times New Roman',serif.

NAVIGATION (relative z-20): Brand "Organic Visions" — white uppercase letter-spacing 0.25em (mobile)/0.3em (desktop) font-light. Desktop links: Wander/Archive/Story/Connect (white/80 uppercase 0.2em tracking hover white 300ms). Mobile: lucide Menu/X toggle (size 22).

MOBILE MENU: Fixed top-16 left-4 right-4 z-50, hidden md+. AnimatePresence from framer-motion. fade in y:-10→0, 0.3s easeOut; reverse on exit. Each link staggers: opacity 0→1, y:-8→0, delay 0.05+i*0.06. white/90 0.25em uppercase font-light hover white. .mobile-menu-glass: rgba(10,10,10,0.7) backdrop-blur(20px) border rgba(255,255,255,0.08) box-shadow 0 8px 32px rgba(0,0,0,0.4) inset 0 1px 0 rgba(255,255,255,0.1). Rounded-2xl py-8 gap-5 flex-col centered.

HERO CONTENT (relative z-10 flex-col centered text-center px-5 sm:px-8 pt-12 sm:pt-16 md:pt-24):
Heading: "WITNESS THE" / "HIDDEN REALM" (two lines). Font Garamond, 4xl/6xl/8xl/9xl responsive, font-normal, white, line-height 1.08, tracking-tight, mb-6 sm:mb-8.
Each line uses StaggeredFade component: splits text into individual characters, each motion.span. useInView (once:true). Variants: hidden={opacity:0}; show={opacity:1, delay:i*0.07}.

SUBTITLE (Framer Motion, opacity:0 y:20→opacity:1 y:0, 0.8s, delay 1.6s): "An odyssey through delicate living forms," (br hidden sm:visible) "revealed by lens and curiosity." white/70 font-light leading-relaxed max-w-xs sm:max-w-md, mb-8 sm:mb-10.

CTA BUTTON (Framer Motion opacity:0 y:20→1 0, 0.8s, delay 2.0s): "Begin the Experience". .liquid-glass class, rounded-full responsive padding, white/90, uppercase, tracking 0.18em/0.2em.

.liquid-glass CSS: background rgba(255,255,255,0.01), backdrop-filter blur(4px), box-shadow inset 0 1px 1px rgba(255,255,255,0.1). ::before: absolute inset-0, border-radius inherit, padding 1.4px, gradient 0.45→0.15→0→0→0.15→0.45, mask-composite exclude. :hover: background rgba(255,255,255,0.04). :active: scale(0.98).

Global CSS: reset margin/padding/box-sizing. Body: antialiased, white text, #010101 bg.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: "Stellar.ai" → np. "Orion.ai"
Rating badge: "4.9 rating from 18.3K+ users" → swoje liczby
Nagłówek linia 1: "Work Smarter. Move Faster." → swój
Nagłówek linia 2: "AI Powers You Up." → swój
Podtytuł: "Intelligent automation syncs with the tools you love..." → swój
Przycisk: "Begin Free Trial" → np. "Zacznij za darmo"
Tab 1-4: Analyse / Train / Testing / Deploy → swoje
Linki nav: Solutions / For Teams / About Us / Learn Hub → swoje
Tekst footer firm: INTERSCOPE / SPOTIFY / Nexera / M3 / LAURA COLE / vertex → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a "Stellar.ai" landing page hero using React, Tailwind CSS, Lucide React. Inter font from Google Fonts. White background (bg-white), max-w-7xl, centered mx-auto.

Custom CSS animations (index.css):
@keyframes fadeInUp { from {opacity:0; transform:translateY(30px)} to {opacity:1; transform:translateY(0)} }. .animate-fade-in-up: 0.6s ease-out forwards.
@keyframes fadeInOverlay { from {opacity:0} to {opacity:1} }. .animate-fade-in-overlay: 0.4s ease-out forwards.
@keyframes fadeInDialog { from {opacity:0} to {opacity:1} }. .animate-slide-up-overlay: 0.5s ease-out forwards + transform:translate(-50%,-50%).
All major sections use .animate-fade-in-up with staggered animationDelay (0.1s increments), starting opacity:0 inline.

NAVIGATION (delay 0.1s): px-6 py-4 flex items-center justify-between max-w-7xl. Left: Lucide Star (w-5 h-5 fill-black) + "Stellar.ai" (text-lg font-semibold). Center (hidden mobile, hidden md:flex items-center gap-8): "Solutions" (ChevronDown) / "For Teams" (ChevronDown) / "About Us" / "Learn Hub" (text-sm text-gray-700). Right: "Login" link + "Get started free" (bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium).

HERO SECTION (px-6 pt-24 pb-32 max-w-7xl text-center):
Reviews Badge (delay 0.2s): inline-flex items-center gap-2 mb-8. Bordered square (w-6 h-6 border-gray-300 rounded) with Star icon inside + "4.9 rating from 18.3K+ users" (text-sm font-medium).
Main Heading (delay 0.3s): text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5. "Work Smarter. Move Faster." first line. "AI Powers You Up." with gradient bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent.
Subheading (delay 0.4s): text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto. "Intelligent automation syncs..."
CTA (delay 0.5s): bg-black text-white px-8 py-3 rounded-full text-base font-medium mb-12. "Begin Free Trial".
Tab Bar (delay 0.6s): Centered bg-gray-100 rounded-lg p-1. Mobile (md:hidden): 2x2 grid 4 buttons: Analyse(BarChart3)/Train(BookOpen)/Testing(Users)/Deploy(Rocket). Desktop (hidden md:flex): same row with vertical dividers. Active: bg-white shadow-sm. Auto-cycle every 4s setInterval. State useState('analyse').

Video + Overlay (delay 0.7s): Container relative rounded-3xl overflow-hidden h-[400px] md:h-[500px]. Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4 (autoPlay loop muted playsInline, w-full h-full object-cover).
4 Conditional Overlays per tab (animate-fade-in-overlay + animate-slide-up-overlay card):
a. Analyse: "Set Up Your AI Workspace" wizard, purple progress bar 25%, 4 steps.
b. Train: "AI Model Training", orange progress 67%, 4 metrics.
c. Testing: "Test Suite Results", green success, 127/127 tests.
d. Deploy: "Deploy to Production", 4 checklist items, Deploy Now button.

Company Logos (delay 0.8s): mt-24 flex. INTERSCOPE / SPOTIFY / Nexera (dot grid) / M3 (serif italic) / LAURA COLE (LC circle) / vertex (dots).

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Wersja badge: "Datacore v3.2" → np. "HotelAI v2.0"
Tagline pill: "Say Hello to Datacore v3.2" → swój
Nagłówek: "Book your perfect stay instantly and hassle-free" (italic "and") → swój
Podtytuł: "Discover handpicked hotels, resorts, and stays..." → swój
Przycisk 1: "Book a Free Demo" → np. "Zarezerwuj demo"
Przycisk 2: "Get Started Now" → np. "Zacznij"
Linki nav: Home / Services / Reviews / Contact us → swoje
Przyciski nav: "Sign In" + "Get Started" → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Create a responsive, full-screen hero for "Datacore" web app using React and Tailwind CSS.

Fonts: Manrope (UI/Nav) + Cabin (buttons/tags) + Instrument Serif (headlines) + Inter (body). All from Google Fonts.
Primary Color: Purple #7b39fc. Secondary/Dark: #2b2344. Background: full-screen absolute HTML5 video (autoplay, loop, mute, playsInline, min-h-screen object-cover, no overlay):
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260210_031346_d87182fb-b0af-4273-84d1-c6fd17d6bf0f.mp4

NAVBAR (full width, transparent, z-20, px-6→px-[120px], py-[16px]):
Logo: specific SVG path (white filled): M1.04356 6.35771L13.6437 0.666504...
Desktop nav links (center-left): Home / Services (ChevronDown) / Reviews / Contact us. Manrope Medium 14px white, hover opacity-80.
Desktop buttons: Sign In (white bg, gray border #d4d4d4, rounded-8px, black text, Manrope SemiBold 14px) + Get Started (purple #7b39fc, rounded-8px, white, shadow).
Mobile: hide links/buttons, white Menu hamburger toggling full-screen black overlay.

HERO CONTENT (centered flex-col items-center text-center z-10 mt-32):
Tagline Pill: glassmorphism (bg-[rgba(85,80,110,0.4)] backdrop-blur border rgba(164,132,215,0.5)), rounded-10px h-38px. Inner badge (#7b39fc bg rounded-6px) "New" + text "Say Hello to Datacore v3.2". Cabin Medium 14px white.

Headline: "Book your perfect stay instantly and hassle-free". Instrument Serif white. 5xl (mobile)→96px (desktop). Line-height 1.1. Word "and" italicized with specific spacing.

Subtext: "Discover handpicked hotels, resorts, and stays across your favorite destinations..." Inter Normal 18px white/70. Max-width 662px.

CTA Buttons: "Book a Free Demo" (#7b39fc, rounded-10px, Cabin Medium 16px, white) + "Get Started Now" (#2b2344, rounded-10px, Cabin Medium 16px, #f6f7f9). Hover: slightly lighten.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Badge tekst: "Maiden Crewed Voyage to Mars Arrives 2026" → swój
Nagłówek: "Venture Past Our Sky Across the Universe" → swój (word-by-word BlurText)
Podtytuł: "Discover the universe in ways once unimaginable..." → swój
Przycisk CTA 1: "Start Your Voyage" → np. "Zacznij przygodę"
Link CTA 2: "View Liftoff" → np. "Obejrzyj"
Stat 1: "34.5 Min" + "Average Videos Watch Time" → swoje liczby
Stat 2: "2.8B+" + "Users Across the Globe" → swoje
Partners chip: "Collaborating with top aerospace pioneers globally" → swój
5 partnerów: Aeon / Vela / Apex / Orbit / Zeno → swoje nazwy
Linki nav: Home / Voyages / Worlds / Innovation / Plan Launch → swoje
Przycisk nav: "Claim a Spot" → np. "Dołącz"
Section 2 kicker: "// Capabilities" → swój
Section 2 heading: "Production" / "evolved" → swoje
Karty: "AI Scenery" / "Batch Production" / "Smart Lighting" + opisy → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a Cinematic Space-Travel Landing Page. Single-page, two full-height sections (Hero + Capabilities). Looping background videos with custom JS crossfade. Shared liquid-glass design system. Framer Motion entrance animations.

Tech stack (CDN-only):
<script src="https://cdn.tailwindcss.com"></script>
React UMD 18.3.1 + ReactDOM + Babel standalone + Framer Motion 11.11.17 CDN.
window.Motion = window.FramerMotion.
Body bg: #000. React app on #root. All components as <script type="text/babel">.

Fonts: Instrument Serif (ital@0;1) + Barlow (300,400,500,600). Tailwind config: font-heading→'Instrument Serif' serif (always italic), font-body→'Barlow' sans-serif. Default border-radius override: DEFAULT:"9999px".

Liquid-glass CSS (in <style> block):
.liquid-glass: background rgba(255,255,255,0.01), backdrop-filter blur(4px), box-shadow inset 0 1px 1px rgba(255,255,255,0.1). ::before: absolute inset-0, border-radius inherit, padding 1.4px, linear-gradient(180deg, 0.45→0.15→0→0→0.15→0.45 rgba white), mask-composite: exclude.
.liquid-glass-strong: same but backdrop-filter blur(50px), box-shadow 4px 4px 4px rgba(0,0,0,0.05)+inset, ::before 0.5→0.2→0→0→0.2→0.5.

FadingVideo component: <video autoPlay muted playsInline preload="auto"> starting opacity:0. FADE_MS=500, FADE_OUT_LEAD=0.55s. fadeTo(target, duration) uses rAF, reads current opacity, cancels previous rAF. On loadeddata: opacity 0, play, fadeTo(1). On timeupdate: if !fadingOutRef and duration-currentTime<=0.55 and >0, fadeTo(0). On ended: opacity 0, 100ms timeout, reset, clear ref, fadeTo(1). loop attribute OFF.

SECTION 1 — HERO (full viewport, black bg):
Video (120% w/h, top-aligned centered): https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_080021_d598092b-c4c2-4e53-8e46-94cf9064cd50.mp4. class: absolute left-1/2 top-0 -translate-x-1/2 object-cover object-top z-0. style: {width:"120%", height:"120%"}.

Navbar (fixed top-4, px-8/lg:px-16, z-50): Left: 48x48 liquid-glass circle with italic serif lowercase "a". Center (desktop): liquid-glass pill, 5 text links: Home/Voyages/Worlds/Innovation/Plan Launch (px-3 py-2 text-sm font-medium text-white/90 font-body) + white pill "Claim a Spot" + ArrowUpRight. Right: 48x48 invisible spacer.

Hero content (centered, pt-24 px-4): All Framer Motion: initial {filter:blur(10px),opacity:0,y:20} easeOut.
Badge (delay 0.4s): liquid-glass rounded-full. White chip "New" (bg-white text-black px-3 py-1 text-xs font-semibold) + "Maiden Crewed Voyage to Mars Arrives 2026" (text-sm text-white/90).
Headline — BlurText (word-by-word): "Venture Past Our Sky Across the Universe". text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-white leading-[0.8] max-w-2xl tracking-[-4px].
Subheading (delay 0.8s, mt-4 text-sm md:text-base text-white max-w-2xl font-body font-light).
CTAs (delay 1.1s): liquid-glass-strong "Start Your Voyage" + ArrowUpRight; bare link "View Liftoff" + Play.
Stats row (delay 1.3s): two liquid-glass cards p-5 w-[220px] rounded-[1.25rem]: clock SVG + "34.5 Min" (text-4xl Instrument Serif italic) + label; globe SVG + "2.8B+" + label.
Partners (delay 1.4s): liquid-glass chip "Collaborating with top aerospace pioneers globally" + 5 names (Instrument Serif italic): Aeon·Vela·Apex·Orbit·Zeno.

BlurText: IntersectionObserver 10% visibility. Each word motion.span: initial {filter:blur(10px),opacity:0,y:50}; keyframes {blur(5px),opacity 0.5,y:-5}→{blur(0),opacity:1,y:0}; duration 0.7, stagger i*100ms. Parent: flex flexWrap justify-center rowGap 0.1em. display:inline-block marginRight:0.28em.

SECTION 2 — CAPABILITIES (min-h-screen, black bg):
Video: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_094631_d30ab262-45ee-4b7d-99f3-5d5848c8ef13.mp4 (absolute inset-0 w-full h-full object-cover z-0). Same FadingVideo.
Content (relative z-10 px-8 md:px-16 lg:px-20 pt-24 pb-10):
Header: "// Capabilities" kicker + "Production / evolved" (font-heading italic text-6xl→[6rem] leading-[0.9] tracking-[-3px]).
Three cards (grid grid-cols-1 md:grid-cols-3 gap-6 mt-16): each liquid-glass rounded-[1.25rem] p-6 min-h-[360px]. Top row: 44x44 nested liquid-glass with Material Icons SVG + 4 liquid-glass pill tags. Middle: flex-1 spacer. Bottom: h3 title + p description.
Cards: "AI Scenery" (image icon, tags: Natural Context·Photo Realism·Infinite Settings·Eco-Vibe, desc:"AI analyzes your product...") / "Batch Production" (movie icon, tags: Scale Fast·Visual Consistency·Time Saver·Ready to Post) / "Smart Lighting" (lightbulb icon, tags: Ray Tracing·Physical Shadows·Studio Quality·Sunlight Sync).
ArrowUpRight + Play: inline lucide-style SVGs, stroke currentColor.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Imię artysty: Jack → np. Łukasz
Opis hero: "a 3d creator driven by crafting striking and unforgettable projects" → swój
Tekst About: "With more than five years of experience in design..." → swój
5 usług (numery + nazwy + opisy): 3D Modeling / Rendering / Motion Design / Branding / Web Design → swoje
3 projekty (nazwy + kategorie + zdjęcia): Nextlevel Studio / Aura Brand Identity / Solaris Digital → swoje projekty
Tytuł strony: "Jack — 3D Creator" → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a 3D Creator portfolio landing page for "Jack" using React, TypeScript, Tailwind CSS, Framer Motion, Lucide React. Dark theme #0C0C0C. Font: Kanit (Google Fonts, weights 300-900). Title: "Jack — 3D Creator".

GLOBAL: bg #0C0C0C on html/body/root/main. font-family: 'Kanit'. .hero-heading: linear-gradient(180deg, #646973 0%, #BBCCD7 100%) bg-clip text-transparent. Main wrapper: overflowX clip.

SECTION 1 — HERO (h-screen, flex column, overflowX clip):
Navbar: 4 links "About"/"Price"/"Projects"/"Contact" (justify-between). text-[#D7E2EA] font-medium uppercase tracking-wider. text-sm md:text-lg lg:text-[1.4rem]. px-6 md:px-10 pt-6 md:pt-8. Hover: opacity 70% 200ms.
Hero Heading: "Hi, i'm jack" (lowercase i, curly apostrophe). .hero-heading gradient text. font-black uppercase tracking-tight leading-none whitespace-nowrap w-full. text-[14vw] sm:[15vw] md:[16vw] lg:[17.5vw]. mt-6 sm:mt-4 md:-mt-5.
Bottom bar (justify-between items-end pb-7):
  Left: "a 3d creator driven by crafting striking and unforgettable projects" (text-[#D7E2EA] font-light uppercase tracking-wide leading-snug clamp(0.75rem,1.4vw,1.5rem) max-w-[260px]).
  Right: ContactButton (gradient pill with box-shadow).
Hero Portrait: Centered absolute, Magnet component (padding:150, strength:3, transitions), image: https://shrug-person-78902957.figma.site/_components/v2/d24c01ad3a56fc65e942a1f501eb73db42d7cf9a/Rectangle_40443.81459862.png. Width w-[280px]→[520px].

SECTION 2 — MARQUEE (pt-24→pt-40 pb-10 bg-#0C0C0C): Two rows of images scrolling based on scroll position (translateX offset formula: (scrollY-sectionTop+vh)*0.3). Row 1 (11 images, moves right): +offset-200. Row 2 (10 images, moves left): -(offset-200). Each image 420x270px rounded-2xl object-cover lazy. Gap-3 between tiles and rows.
21 GIFs (motionsites.ai): hero-space-voyage/hero-codenest/hero-vex-ventures/hero-stellar-ai-v2/hero-asme/hero-transform-data/hero-vitara/hero-terra/hero-skyelite/hero-aethera/hero-designpro/hero-stellar-ai/hero-xportfolio/hero-orbit-web3/hero-nexora/hero-evr-ventures/hero-planet-orbit/hero-new-era/hero-wealth/hero-luminex/hero-celestia (all from motionsites.ai).

SECTION 3 — ABOUT (min-h-screen px-5 md:px-10 py-20): 4 decorative 3D images in corners (Moon/3D object/Lego/3D group, all from shrug-person-78902957.figma.site). "About me" .hero-heading gradient heading clamp(3rem,12vw,160px). AnimatedText paragraph (char-by-char scroll opacity 0.2→1). ContactButton below.

SECTION 4 — SERVICES (white bg, rounded-t-[60px] -mt-14 z-10): "Services" heading #0C0C0C. 5 items with dividers: 01 3D Modeling / 02 Rendering / 03 Motion Design / 04 Branding / 05 Web Design. Each: huge number (clamp(3rem,10vw,140px)) + name uppercase + description. Stagger FadeIn i*0.1.

SECTION 5 — PROJECTS (#0C0C0C, rounded-t-[60px] -mt-14 z-10): "Project" heading .hero-heading. 3 sticky-stacking cards (Framer Motion useScroll/useTransform scale 1-(totalCards-1-i)*0.03). Each sticky top-24 inside h-[85vh]. Card: rounded-[60px], border-2 #D7E2EA, bg-#0C0C0C. Top row: number + category + name + "Live Project" ghost button. Bottom: 2-col image grid (40%/60%). Projects with exact CloudFront image URLs.

Components: ContactButton (gradient pill), LiveProjectButton (ghost outline), FadeIn (Framer whileInView), Magnet (mouse magnetic), AnimatedText (char scroll opacity).

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa: VEX → np. APEX
Nagłówek: "Shaping tomorrow\nwith vision and action." → swój
Podtytuł: "We back visionaries and craft ventures that define what comes next." → swój
Przycisk 1: "Start a Chat" → np. "Porozmawiaj"
Przycisk 2: "Explore Now" → np. "Odkryj"
Tag: "Investing. Building. Advisory." → swój
Linki nav: Story / Investing / Building / Advisory → swoje
Przycisk nav: "Start a Chat" → swój
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Recreate this hero section exactly. React + TypeScript + Vite + Tailwind CSS. No extra UI libraries.

Video Background: Full-screen absolutely positioned, object-cover: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4 (autoplay, loop, muted, playsInline). NO dark overlay, NO gradient, NO dimming.

Typography: Google Font Inter (300,400,500,600) via link in index.html. Body font-family 'Inter' sans-serif, antialiased. Tailwind fontFamily.sans: ['Inter','sans-serif'].

Navbar (px-6 md:px-12 lg:px-16 pt-6): Navbar bar itself: .liquid-glass rounded-xl px-4 py-2 flex items-center justify-between. Left: "VEX" (text-2xl font-semibold tracking-tight). Center (hidden md:visible): Story/Investing/Building/Advisory (text-sm gap-8 hover gray-300). Right: "Start a Chat" (bg-white text-black px-6 py-2 rounded-lg text-sm font-medium hover gray-100).

Hero Content: Same horizontal padding as navbar. Flex column filling remaining height, pushed to bottom (flex-1 flex flex-col justify-end, pb-12 lg:pb-16). Large screens: 2-column grid (lg:grid lg:grid-cols-2 lg:items-end).

Left Column: Heading "Shaping tomorrow\nwith vision and action." (literal line break). Sizes: text-4xl md:text-5xl lg:text-6xl xl:text-7xl. font-normal mb-4. letterSpacing -0.04em. Character-by-character entrance animation: each char from opacity:0 translateX(-18px) → opacity:1 translateX(0). Staggered delay: (lineIndex * lineLength * charDelay) + (charIndex * charDelay), charDelay=30ms, starts after 200ms initial delay. Each char transition 500ms. Spaces as  .
Subheading: "We back visionaries and craft ventures that define what comes next." text-base md:text-lg text-gray-300 mb-5. Fade-in: starts at 800ms, 1000ms duration.
Buttons (flex-wrap gap-4): "Start a Chat" (bg-white text-black px-8 py-3 rounded-lg font-medium) + "Explore Now" (.liquid-glass border border-white/20 text-white px-8 py-3 rounded-lg font-medium, hover: white bg + black text). Fade-in: starts 1200ms, 1000ms.

Right Column: Aligned bottom-right (flex items-end justify-end). Glass card: .liquid-glass border border-white/20 px-6 py-3 rounded-xl. "Investing. Building. Advisory." text-lg md:text-xl lg:text-2xl font-light. Fade-in: starts 1400ms, 1000ms.

.liquid-glass CSS:
background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); box-shadow: inset 0 1px 1px rgba(255,255,255,0.1).
::before: absolute inset-0, border-radius inherit, padding 1.4px, linear-gradient(180deg, 0.3→0.1→0→0→0.1→0.3 rgba white), mask-composite: exclude.

FadeIn component: opacity 0 → 1 after setTimeout(delay). Transition: configurable duration. Inline transitionDuration + transition-opacity class.
AnimatedHeading: Splits by \n into lines, each line into chars. CSS transitions on opacity and transform (translateX).
Color scheme: Black bg, white text, gray-300 secondary, white/20 borders.

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE ━━━
Nazwa produktu: "Measured" → np. "Tracked"
Linki nawigacji desktop: Device / Real Stories / Science / Plans / Reach Us → swoje
Przycisk CTA: "Reserve Yours" → np. "Zamów"
Linki menu mobilnego: Device / Real Stories / Science / Plans / Reach Us → swoje
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.
─────────────────────────────────────
Build a single-page hero for "Measured" — health/wellness wearable device. Fullscreen 100vh, dark/moody aesthetic, layered imagery, cursor-following spotlight reveal, frosted-glass nav. React + Vite + Tailwind CSS + TypeScript.

FONTS: Inter (300-700) from Google Fonts — global default (* { font-family: 'Inter', sans-serif }). Instrument Serif (regular + italic) from Google Fonts — for hero heading "Measured". Helvetica Neue Roman — self-hosted in /public/fonts/ via @font-face, class .font-helvetica-neue on hero wrapper.

ASSET URLS (exact):
BG_IMAGE_1: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260713_140344_79e1296a-86d7-43fd-9b5f-63ffe560f291.png&w=1280&q=85
FRONT_VIDEO: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_162101_0d7498c5-29bb-47bf-a99f-2773c0a880a9.mp4
OVERLAY_IMAGE: https://soft-zoom-63098134.figma.site/_assets/v11/3f10f1876e118f72a396e05a6c2d099569478272.png

NAVIGATION (z-50, fixed):
Logo (top-left): Custom SVG geometric (white 28x28), viewBox 0 0 256 256: M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z
Desktop center pill nav (hidden mobile): fixed horizontally centered, .liquid-glass styling. Buttons: "Device"/"Real Stories"/"Science"/"Plans"/"Reach Us" (text-white/70 text-sm font-medium rounded-full, hover white).
Desktop CTA (top-right, hidden mobile): .liquid-glass pill, green dot (w-2 h-2 bg-green-400) + "Reserve Yours" (text-white text-sm font-medium).
Mobile hamburger (top-right, hidden md+): .liquid-glass rounded-full, two white lines (w-5 h-[1.5px] + w-3.5 h-[1.5px]).

MOBILE MENU (z-55): bg #0a0a0a. Close button top-right .liquid-glass with X (two lines rotated +/-45deg). Nav items stacked centered text-3xl sm:text-4xl white/90 font-medium. CTA "Reserve Yours" + green dot. Staggered entry: each item slides up from 24px, opacity 0→1, delays 100ms+i*60ms, cubic-bezier(0.77,0,0.18,1). Close button: rotate from -90deg, scale 0.8→1.

HERO SECTION (100vh overflow hidden):
Layer 1 — Grid (z-0, opacity 0.1): SVG pattern 48px cells, L-shape path M 48 0 L 0 0 0 48, stroke #64748b strokeWidth 0.6. Grid parallax: offset = cursor relative to center * 16, eased 0.06 factor via rAF.
Layer 2 — BG Image (z-10): BG_IMAGE_1 as background-image, bg-center bg-cover, absolute inset-0.
Layer 3 — Hero Text (z-20): "Measured" in Instrument Serif, text-[4.5rem]→[16rem] responsive, leading-[0.9], white, centered, top-20 sm:top-28 md:top-32.
Layer 4 — Overlay Image (z-25): OVERLAY_IMAGE as <img> absolute inset-0 w-full h-full object-cover pointer-events-none. Semi-transparent PNG for atmosphere.
Layer 5 — Spotlight Reveal (z-30): cursor-following radial reveal, radius 260px. Hidden canvas draws radial gradient (0-40% full white, feathers: 60%→0.75, 75%→0.4, 88%→0.12, 100%→0). Canvas dataURL → CSS mask on div containing video. Cursor smoothing: smooth += (target - smooth) * 0.1 via rAF. Video (FRONT_VIDEO) clipped to bottom 60% via clipPath: 'inset(40% 0 0 0)', autoplay loop muted playsInline.

.liquid-glass CSS: background rgba(255,255,255,0.01), backdrop-filter blur(4px), box-shadow inset 0 1px 1px rgba(255,255,255,0.1). ::before: absolute inset-0, padding 1.4px, gradient 0.45→0.15→0→0→0.15→0.45, mask-composite exclude.

Key: body overflow locks when mobile menu open. No scrolling (single viewport hero). The reveal effect only shows video in bottom 60%.

PODMIEŃ:
- Nazwa marki: TerraElix
- Tagline / nagłówek h1: "The Power of Nature in Every Capsule"
- Opis (paragraf CTA): "Discover our new plant-based supplements for daily balance and clean energy."
- Linki nawigacyjne: About | Products | Promotions | Contact
- Przycisk CTA: "Explore Now"
- Panel 1 tekst: "Start your personalized path to natural balance"
- Panel 1 link: "Personal Assessment"
- Karuzela kart (4 karty):
  1. "Experience our newly enhanced natural formula"
  2. "Pure organic ingredients sourced sustainably"
  3. "Advanced bioavailability for maximum absorption"
  4. "Clinically tested for daily energy & vitality"
- Panel 3 liczba: "+14K"
- Panel 3 tekst: "People have already optimized their wellness"

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej. Podmień TYLKO elementy tekstowe wymienione w sekcji PODMIEŃ – zachowaj wszystkie URL-e wideo/grafik, kolory, czcionki, animacje i strukturę układu.
Outputuj jako JEDEN plik HTML z CDN importami (React UMD + Babel standalone + Tailwind CDN). Nie używaj Vite ani Node.

---

Create a single-page hero landing for a wellness/supplements brand called "TerraElix" using React + Tailwind CSS + Lucide React icons. The page is a full-viewport hero with a background image, navbar, headline with word-by-word reveal animations, CTA section, and a 3-panel footer strip. It must be fully responsive (mobile, tablet, desktop).

---

## Fonts

Import from Google Fonts:
- **DM Sans** (weights 400, 500) -- used for brand name, nav links, headline, panel 1 text
- **Inter** (weights 400, 500) -- used for buttons, body text, panel 2/3 text

---

## Background

Full-screen background image covering the entire viewport:
```
url: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_110248_b62f758d-f68c-4045-a7b4-91771d6d0a0f.png&w=1280&q=85
background-size: cover; background-position: center; background-repeat: no-repeat;
```

---

## Layout Structure

```
<div> (min-h-screen, flex flex-col, relative, overflow-hidden)
  <nav> -- navbar
  <section> -- hero content (flex-1, flex col, justify-center)
  <div> -- mobile/tablet product image (visible below lg)
  <div> -- 3-panel grid footer
  <img> -- desktop floating product image (absolute, hidden below lg)
</div>
```

---

## Navbar

- **Left:** Brand name "TerraElix" -- white, DM Sans 500, 30px, letter-spacing -0.05em
- **Center (desktop only, hidden on mobile):** Nav links "About", "Products", "Promotions", "Contact" -- DM Sans 500, 18px, text-white/90, gap 10 (lg)
- **Right:** Row of icon buttons + avatar + mobile menu toggle
  - Search icon (Lucide `Search`, size 20, strokeWidth 1.5)
  - Shopping bag icon (Lucide `ShoppingBag`, size 20, strokeWidth 1.5)
  - Return icon (Lucide `CornerUpLeft`, size 20, strokeWidth 1.5)
  - Round avatar image (w-8 h-8, lg:w-10 lg:h-10, rounded-full, object-cover):
    ```
    https://polo-pecan-73837341.figma.site/_assets/v11/ca8093996e970200cbcf8bde8744175e52da5a79.png
    ```
  - Hamburger menu button (md:hidden, Lucide `Menu` / `X` toggle)

- **Mobile overlay menu:** fixed inset-0 bg-black/90 z-30 with centered nav links (text-2xl, white)

Padding: px-5 sm:px-8 lg:px-10, py-4 lg:py-5

---

## Hero Headline

Font: DM Sans, weight 400, letter-spacing -0.05em

Responsive sizes:
- Base: 48px/50px line-height
- sm: 80px/72px
- md: 110px/95px
- lg: 130px/110px
- xl: 155px/125px

Text layout (3 lines):
```
Line 1: "The" (white) "Power" (white) "of" (white/45 -- dimmed)
Line 2: "Nature" (dimmed) "in" (dimmed) "Every" (white)
Line 3: "Capsule" (white) + inline image
```

Each word is wrapped in a container with overflow-hidden, and the inner span animates with `wordReveal` (translateY 100% + blur to visible). Staggered delays: 0.3s, 0.4s, 0.5s, 0.6s, 0.7s, 0.8s, 0.9s.

**Inline image** after "Capsule" (hidden on mobile, sm:inline-block, align-middle, ml-2 lg:ml-4):
```
https://polo-pecan-73837341.figma.site/_assets/v11/6a7de4fbe9c9e2315040607320a9ff5e93117bf4.png
height: clamp(60px, 10vw, 160px); width: auto;
```

---

## CTA Section

Below the headline, mt-8 sm:mt-12 lg:mt-[75px]. Flex row on sm+, column on mobile. Gap: 5 (mobile), 8 (sm), 50px (lg).

- **Button:** "Explore Now" + ArrowUpRight icon. bg-black text-white rounded-md. Sizes: w-full sm:w-[240px] md:w-[280px] lg:w-[310px], h-14 sm:h-16 lg:h-[72px]. Font: Inter 500, responsive text (base to 2xl), letter-spacing -0.03em.
- **Paragraph:** "Discover our new plant-based supplements for daily balance and clean energy." -- white, max-w-[310px], Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.45, letter-spacing -0.03em.

---

## Mobile/Tablet Product Image (lg:hidden)

Visible below lg breakpoint. Oversized, bleeding off edges:
```
https://polo-pecan-73837341.figma.site/_assets/v11/50ad042b3cd48a2e120ea3ba17c8cfeaf3cc334c.png
w-[180%] sm:w-[151%] max-w-[1296px], object-contain, mx-auto, drop-shadow-2xl
margin-bottom: -180px sm:-220px (overlaps panels below)
```

---

## Bottom 3-Panel Grid

`grid grid-cols-1 md:grid-cols-[2fr_1fr_2fr]`, relative z-10.

### Panel 1 (bg-[#ECEDEC])
- Text: "Start your personalized path to natural balance" -- DM Sans 400, text-2xl sm:text-[28px] lg:text-[35px], leading-[1.1], letter-spacing -0.05em, max-w-[350px]
- Link: "Personal Assessment" -- underline, Inter 400, text-base lg:text-lg, letter-spacing -0.03em
- Decorative image (absolute right-0 bottom-0, h-full, mix-blend-multiply):
  ```
  https://polo-pecan-73837341.figma.site/_assets/v11/6736cbe6e26afa2cd7c04a91892a79f7640785b5.png
  ```

### Panel 2 (bg-[#FEFDF9]) -- Auto-rotating card carousel
4 cards cycling every 3500ms with fade/slide transition:
1. FlaskConical icon, bg-black circle: "Experience our newly enhanced natural formula"
2. Leaf icon, bg-emerald-800 circle: "Pure organic ingredients sourced sustainably"
3. Droplets icon, bg-cyan-800 circle: "Advanced bioavailability for maximum absorption"
4. Sun icon, bg-amber-700 circle: "Clinically tested for daily energy & vitality"

Each card: icon in a 40px (sm:48px) round colored circle + text (Inter 400, text-sm sm:text-base lg:text-lg, text-black/80, line-height 1.2, letter-spacing -0.03em).

Active card: opacity-100 translate-y-0. Inactive: opacity-0 translate-y-4 absolute.

Bottom dots: 4 thin bars (h-0.5, flex-1, rounded-full). Active: bg-black. Inactive: bg-black/20.

### Panel 3 (bg-black)
- Left: Product image (w-[120px] h-[82px] sm:w-[160px] h-[110px] lg:w-[208px] h-[142px]):
  ```
  https://polo-pecan-73837341.figma.site/_assets/v11/30e8f38d1f993c357a3be2721557fc899d5640fc.png
  ```
- Right: "+14K" (white, Inter 400, text-2xl sm:text-3xl lg:text-[35px], letter-spacing -0.05em) + "People have already optimized their wellness" (text-white/60, Inter 400, text-sm sm:text-base lg:text-lg, line-height 1.2)

---

## Desktop Floating Product (lg+ only)

Same image as mobile product, but absolutely positioned for desktop:
```
https://polo-pecan-73837341.figma.site/_assets/v11/50ad042b3cd48a2e120ea3ba17c8cfeaf3cc334c.png
position: absolute; z-0; hidden lg:block;
width: clamp(600px, 80vw, 1412px); height: auto;
bottom: -10%; right: clamp(-400px, -20vw, -100px);
```

---

## Animations (CSS keyframes)

```css
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes wordReveal {
  from { opacity: 0; transform: translateY(100%); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
```

All use `cubic-bezier(0.16, 1, 0.3, 1)` easing with `both` fill mode.

**Classes and their animations:**
- `.animate-fade-up` -- fadeUp 0.8s
- `.animate-fade-in` -- fadeIn 0.7s
- `.animate-slide-left` -- slideInLeft 0.8s
- `.animate-slide-right` -- slideInRight 0.8s
- `.animate-scale-in` -- scaleIn 1s
- `.animate-word-reveal > span` -- wordReveal 0.7s

**Delay classes:** .delay-200 through .delay-1100 (increments of 0.1s)

**Animation assignments:**
- Navbar container: animate-fade-in
- Brand name: animate-slide-left delay-200
- Nav links: animate-fade-in delay-400
- Right icons: animate-slide-right delay-300
- CTA row: animate-fade-up delay-600
- Desktop product image: animate-scale-in delay-700
- Mobile product image: animate-scale-in delay-800
- Panel 1: animate-fade-up delay-900
- Panel 2: animate-fade-up delay-1000
- Panel 3: animate-fade-up delay-1100
- Inline capsule image: animate-scale-in delay-1000

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE (potem wklej całość do Claude lub ChatGPT) ━━━

NAZWA STUDIA:         zamiast "GlamAura"
                      [np. Twoja nazwa salonu]

HASŁO H1:             zamiast "Piękno które przemawia za Ciebie"
                      [Twoje główne hasło promocyjne]

OPIS (hero):          zamiast "Nowoczesne studio urody w sercu miasta..."
                      [1–2 zdania o Twoim salonie, lokalizacja, specjalizacja]

BADGE HERO:           zamiast "Premium Studio Urody"
                      [Twój slogan lub certyfikat np. "Autoryzowany salon Kerastase"]

ZABIEG 1 nazwa:       zamiast "Zabieg na twarz"
ZABIEG 1 czas:        zamiast "90 minut"
ZABIEG 1 cena:        zamiast "280 zł"

ZABIEG 2 nazwa:       zamiast "Manicure hybrydowy"
ZABIEG 2 czas:        zamiast "60 minut"
ZABIEG 2 cena:        zamiast "120 zł"

ZABIEG 3 nazwa:       zamiast "Koloryzacja włosów"
ZABIEG 3 czas:        zamiast "120 minut"
ZABIEG 3 cena:        zamiast "350 zł"

MENU:                 zamiast "Usługi / Cennik / O nas / Kontakt"
PRZYCISK NAV:         zamiast "Umów wizytę"

SEKCJA FEAT nagłówek: zamiast "Twój blask w najlepszych rękach"
FEAT 1 tytuł:         zamiast "Certyfikowani specjaliści"
FEAT 1 opis:          zamiast "Nasz zespół to certyfikowani kosmetolodzy..."
FEAT 2 tytuł:         zamiast "Naturalne kosmetyki"
FEAT 2 opis:          zamiast "Używamy wyłącznie sprawdzonych, naturalnych kosmetyków..."
FEAT 3 tytuł:         zamiast "Rezerwacja online 24/7"
FEAT 3 opis:          zamiast "Umów wizytę o każdej porze..."

CTA nagłówek:         zamiast "Zacznij swoją transformację"
CTA opis:             zamiast "Pierwsza wizyta z 20% rabatem dla nowych klientek"
CTA przycisk:         zamiast "Umów bezpłatną konsultację →"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione powyżej na moje wartości.
Zachowaj bez zmian: kolory, layout, CSS, fonty, animacje.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS) — żeby można było otworzyć bezpośrednio w przeglądarce.

─────────────────────────────────────────────────────────────────────────

SPECYFIKACJA STRONY — SALON URODY (GlamAura style)

## Ogólne
- Tło body: #fdf6f0 (kremowo-różowy)
- Kolor tekstu: #1a0a0f
- Fonty: Playfair Display (serif, nagłówki) + Inter (body/UI) — ładowane z Google Fonts
- Pełna szerokość, overflow-x: hidden

## Nawigacja
- Fixed top, padding: 18px 48px, background rgba(253,246,240,.95), backdrop-filter blur(16px)
- Border-bottom: 1px solid rgba(236,72,153,.1)
- Logo: "Glam" + kursywa "Aura" w kolorze #ec4899, Playfair Display, 22px
- Linki: Usługi / Cennik / O nas / Kontakt — kolor rgba(26,10,15,.5), 14px
- Przycisk: "Umów wizytę" — background #ec4899, biały tekst, border-radius: 100px, padding 10px 22px

## Sekcja hero
- min-height: 100vh, padding: 120px 48px 80px
- Background: linear-gradient(135deg, #fff5f8 0%, #fdf6f0 60%, #fce7f3 100%)
- Layout: flex row, gap 80px, max-width 1100px
- LEWA strona (flex:1):
  - Badge: "✦ Premium Studio Urody" — różowy border, background rgba(236,72,153,.08), color #ec4899, border-radius 100px, 12px
  - h1: Playfair Display, clamp(44px,6vw,76px), font-weight 400, line-height .97, letter-spacing -.03em
    - słowo "przemawia" w kursywie i kolorze #ec4899
  - Opis: rgba(26,10,15,.55), 17px, max-width 440px, line-height 1.65
  - 2 przyciski: główny (#ec4899, border-radius 100px, 14px) + drugorzędny (rgba bg, bez bordera)
- PRAWA strona (flex: 0 0 340px):
  - Karta "Nasze zabiegi" — białe tło, border-radius 24px, padding 28px, box-shadow z różowym odcieniem
  - Lista 3 zabiegów: ikona emoji (42px kółko, rgba różowy bg) + nazwa + czas + cena (#ec4899)
  - Każdy wiersz: background #fff5f8, border-radius 14px

## Sekcja "Dlaczego" (features)
- Padding: 96px 48px, background: #fff
- Nagłówek section: uppercase label + h2 Playfair Display 48px
- Grid 3 kolumn, gap 20px
- Każda karta: background #fff5f8, border-radius 16px, padding 32px, border rgba różowy
- Emoji ikona 32px + h3 Playfair Display + opis rgba(26,10,15,.55)

## Sekcja CTA
- Padding: 96px 48px
- Background: linear-gradient(135deg, #be185d, #ec4899)
- Text-align center, kolor biały
- h2: Playfair Display, 52px, font-weight 400
- Opis: rgba biały .8
- Przycisk: biały background, tekst #ec4899, border-radius 100px, padding 14px 32px

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE (potem wklej całość do Claude lub ChatGPT) ━━━

NAZWA RESTAURACJI:    zamiast "Złoty Talerz"
                      [np. Twoja restauracja / bistro]

HASŁO H1:             zamiast "Smak który zostaje w pamięci"
                      [Twoje główne hasło marketingowe]

OPIS (hero):          zamiast "Autorska kuchnia polska w eleganckim wydaniu..."
                      [1–2 zdania o Twoim lokalu, kuchnia, klimat]

BADGE HERO:           zamiast "Kuchnia polska z duszą"
                      [Twój styl kuchni np. "Kuchnia śródziemnomorska · Fine Dining"]

STAT 1 wartość:       zamiast "12+"     STAT 1 etykieta: zamiast "Lat tradycji"
STAT 2 wartość:       zamiast "4.9★"    STAT 2 etykieta: zamiast "Ocena gości"
STAT 3 wartość:       zamiast "8.000+"  STAT 3 etykieta: zamiast "Zadowolonych gości"

DANIE 1 ikona:        zamiast "🥩"
DANIE 1 kategoria:    zamiast "Dania główne"
DANIE 1 nazwa:        zamiast "Polędwica wołowa"
DANIE 1 opis:         zamiast "Polędwica z sosem truflowym..."
DANIE 1 cena:         zamiast "89 zł"

DANIE 2 ikona:        zamiast "🍲"
DANIE 2 kategoria:    zamiast "Zupa dnia"
DANIE 2 nazwa:        zamiast "Żurek staropolski"
DANIE 2 opis:         zamiast "Tradycyjny żurek na zakwasie..."
DANIE 2 cena:         zamiast "28 zł"

DANIE 3 ikona:        zamiast "🍰"
DANIE 3 kategoria:    zamiast "Desery"
DANIE 3 nazwa:        zamiast "Sernik wiedeński"
DANIE 3 opis:         zamiast "Puszysty sernik na spodzie z kruchego ciasta..."
DANIE 3 cena:         zamiast "22 zł"

MENU:                 zamiast "Menu / Rezerwacje / O nas / Kontakt"
PRZYCISK NAV:         zamiast "Zarezerwuj stolik"

CTA nagłówek:         zamiast "Zarezerwuj swój wyjątkowy wieczór"
CTA godziny:          zamiast "od poniedziałku do niedzieli · Otwarci od 12:00 do 23:00"
CTA przycisk:         zamiast "Zarezerwuj stolik →"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione powyżej na moje wartości.
Zachowaj bez zmian: kolory, layout, CSS, fonty, animacje.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS) — żeby można było otworzyć bezpośrednio w przeglądarce.

─────────────────────────────────────────────────────────────────────────

SPECYFIKACJA STRONY — RESTAURACJA (Bistro Złoty Talerz style)

## Ogólne
- Tło body: #1c0f00 (ciemny brąz)
- Kolor tekstu: #faf5eb (kremowo-biały)
- Fonty: Libre Baskerville (serif, nagłówki) + Inter (body/UI) — Google Fonts
- overflow-x: hidden

## Nawigacja
- Fixed top, padding 18px 48px, background rgba(28,15,0,.92), backdrop-filter blur(16px)
- Border-bottom: 1px solid rgba(217,119,6,.15)
- Logo: "✦ Złoty Talerz" — Libre Baskerville, 20px, "✦" w kolorze #d97706
- Linki: rgba(250,245,235,.5), 14px, hover #faf5eb
- Przycisk: background #d97706, kolor #1c0f00, border-radius 8px, padding 10px 22px, font-weight 700

## Sekcja hero
- min-height: 100vh, display flex, align-items center, justify-content center
- Warstwa 1 (absolute): gradient #2d1500 → #1c0f00 → #0f0800
- Warstwa 2 (absolute): wzór kropek radial-gradient(circle, #d97706 1px, transparent 1px), 40px 40px, opacity .05
- Treść (z-index 2): text-align center, max-width 800px, padding 0 48px
  - Badge: border rgba(217,119,6,.3), border-radius 100px, color #d97706, uppercase, letter-spacing .08em
  - h1: Libre Baskerville, clamp(48px,7vw,88px), font-style italic, letter-spacing -.03em
    - wyróżnione słowo w font-style normal + color #d97706
  - Opis: rgba(250,245,235,.55), 17px, max-width 500px, margin: 0 auto 40px
  - 2 przyciski: główny (#d97706, color #1c0f00) + drugorzędny (rgba(.07) bg, border rgba(.15))
  - Info strip: flex, gap 48px, margin-top 56px, border-top rgba(217,119,6,.15)
    - 3 statystyki: Libre Baskerville 28px w kolorze #d97706 + etykieta uppercase rgba(.4) 12px

## Sekcja menu
- Padding: 96px 48px, background: #0f0800
- Label uppercase + h2 Libre Baskerville 48px, font-style italic
- Grid 3 kolumn, gap 20px
- Każda karta menu: background rgba(250,245,235,.04), border-radius 16px, padding 28px
  - Border: rgba(217,119,6,.1), hover: rgba(217,119,6,.3), transition .25s
  - Emoji ikona 36px + kategoria (#d97706, uppercase, 11px) + h3 Libre Baskerville italic + opis + cena #d97706

## Sekcja CTA
- Padding: 96px 48px, background: #d97706, text-align center, color: #1c0f00
- h2: Libre Baskerville, 52px, font-weight 700
- Opis: rgba(28,15,0,.65), godziny otwarcia
- Przycisk: background #1c0f00, color #d97706, border-radius 8px, padding 14px 32px

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE (potem wklej całość do Claude lub ChatGPT) ━━━

IMIĘ FOTOGRAFA:       zamiast "K. Wiśniewska"
                      [np. Twoje imię i nazwisko / pseudonim]

OPIS W PASKU:         zamiast "Fotografia ślubna · Od 2016"
                      [Twoja specjalizacja + rok działalności]

HASŁO H1:             zamiast "Zatrzymuję chwile które trwają wiecznie"
                      [Twoje główne hasło — słowo "wiecznie" wyróżnione kursywą w złocie]

PODTYTUŁ:             zamiast "Tworzę ponadczasowe obrazy, które opowiadają historię..."
                      [1–2 zdania o Twoim stylu fotografii]

BIG TEXT W TLE:       zamiast "Miłość"
                      [Jedno słowo po polsku — dekoracyjne tło sekcji hero]

ZDJĘCIA etykiety:     zamiast "Ceremonia / Sesja plenerowa / Wesele"
                      [3 etykiety widoczne przy hover na zdjęciach]

SEKCJA "O mnie":
  h2:                 zamiast "Fotografuję prawdziwe emocje"
  opis 1:             zamiast "Jestem fotografem ślubnym z ponad 8-letnim..."
  opis 2:             zamiast "Mój styl to połączenie reportażu z delikatną..."

STAT 1:               zamiast "380+" par
STAT 2:               zamiast "8" lat
STAT 3:               zamiast "12" krajów
STAT 4:               zamiast "100%" poleceń

CTA nagłówek:         zamiast "Twój ślub zasługuje na wyjątkowe zdjęcia"
CTA opis:             zamiast "Sprawdź dostępność na Twój termin..."
CTA przycisk:         zamiast "Napisz do mnie →"

MENU:                 zamiast "Portfolio / O mnie / Pakiety / Kontakt"
PRZYCISK NAV:         zamiast "Sprawdź dostępność"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione powyżej na moje wartości.
Zachowaj bez zmian: kolory, layout, CSS, fonty, animacje.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS) — żeby można było otworzyć bezpośrednio w przeglądarce.

─────────────────────────────────────────────────────────────────────────

SPECYFIKACJA STRONY — FOTOGRAF ŚLUBNY (minimalistyczne portfolio)

## Ogólne
- Tło body: #ffffff, kolor tekstu: #111111
- Fonty: Cormorant Garamond (serif, ital, wght 300/400/600, nagłówki) + Inter (wght 300/400/500, body/UI)
- overflow-x: hidden

## Nawigacja
- Fixed top, padding 20px 48px, background rgba(255,255,255,.95), backdrop-filter blur(16px)
- Border-bottom: 1px solid rgba(17,17,17,.06)
- Logo: "K. Wiśniewska" — Cormorant Garamond, 20px, font-weight 300, letter-spacing .3em, UPPERCASE
- Linki: rgba(17,17,17,.4), 12px, letter-spacing .15em, UPPERCASE, hover: #111
- Przycisk: border 1px solid #111, color #111, transparent bg, 11px, letter-spacing .15em, UPPERCASE
  - Hover: background #111, color #fff

## Sekcja hero
- min-height: 100vh, display flex, align-items center, justify-content center
- Tło hero: #fff
- Dekoracyjny big text (absolute): Cormorant Garamond, clamp(120px,18vw,240px), font-weight 300
  - color: rgba(17,17,17,.04), user-select none, white-space nowrap
  - Wyświetla słowo "Miłość"
- Treść (z-index 2): text-align center, padding 120px 48px 80px, max-width 900px
  - Eyebrow: "Fotografia ślubna · Od 2016" — 11px, letter-spacing .3em, UPPERCASE, rgba(17,17,17,.35)
  - h1: Cormorant Garamond, clamp(52px,8vw,108px), font-weight 300, line-height .92, letter-spacing -.03em
    - Słowo "wiecznie" — font-style italic, color #c9a96e (złoty)
  - Podtytuł: rgba(17,17,17,.5), 15px, max-width 440px, font-weight 300, letter-spacing .02em
  - 2 przyciski: główny (background #111, color #fff, 12px, letter-spacing .15em, UPPERCASE)
              + drugorzędny (border rgba(17,17,17,.2), transparent bg)

## Siatka zdjęć
- Grid 3 kolumn, gap 3px, padding 0 48px, background #f5f5f5
- Każde zdjęcie: aspect-ratio 3/4, placeholder z gradientem (beżowe odcienie #e8e2da → #c4b4a0)
- Overlay przy hover: rgba(17,17,17,.4), transition .3s
- Etykieta przy hover: 11px, letter-spacing .15em, UPPERCASE, kolor biały, transition .3s

## Sekcja "O mnie"
- Padding: 96px 48px, background: #fff
- Grid 2 kolumn, gap 80px, align-items center
- LEWA: label uppercase + h2 Cormorant Garamond 44px italic font-weight 300 + 2 paragrafy (rgba .55, 15px, fw 300)
- PRAWA: grid 2x2 ze statystykami
  - Każda stat: padding 24px, border 1px solid rgba(17,17,17,.08)
  - Wartość: Cormorant Garamond 40px, color #c9a96e
  - Etykieta: 11px, letter-spacing .15em, UPPERCASE, rgba(17,17,17,.4)

## Sekcja CTA
- Padding: 96px 48px, background: #111111, kolor biały, text-align center
- h2: Cormorant Garamond, 52px, font-weight 300, font-style italic
- Opis: rgba(255,255,255,.45), 15px, font-weight 300
- Przycisk: border 1px solid #c9a96e, color #c9a96e, transparent bg, 12px, UPPERCASE, letter-spacing .15em
  - Hover: background #c9a96e, color #111

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE (potem wklej całość do Claude lub ChatGPT) ━━━

NAZWA KLUBU:          zamiast "IronPulse"
                      [np. Twoja nazwa siłowni / fitness klubu]

SLOGAN (tag):         zamiast "Zmień siebie już dziś"
                      [Twój motywacyjny podtytuł przed nagłówkiem]

HASŁO H1 linia 1:     zamiast "Przekrocz"
HASŁO H1 linia 2:     zamiast "swoje LIMITY"
                      [słowo "LIMITY" lub inne wyróżnione — wyświetlane jako kontur (outline)]

OPIS:                 zamiast "Nowoczesne centrum fitness z ponad 120 maszynami..."
                      [1–2 zdania o Twoim klubie]

STAT 1 wartość:       zamiast "1200+"  STAT 1 opis: zamiast "Aktywnych członków"
STAT 2 wartość:       zamiast "120+"   STAT 2 opis: zamiast "Maszyn i urządzeń"
STAT 3 wartość:       zamiast "24/7"   STAT 3 opis: zamiast "Godziny otwarcia"

OFERTA 1 nr:          zamiast "01"
OFERTA 1 tytuł:       zamiast "Siłownia"
OFERTA 1 opis:        zamiast "Ponad 120 maszyn i wolne ciężary..."

OFERTA 2 nr:          zamiast "02"
OFERTA 2 tytuł:       zamiast "Trening personalny"
OFERTA 2 opis:        zamiast "15 certyfikowanych trenerów osobistych..."

OFERTA 3 nr:          zamiast "03"
OFERTA 3 tytuł:       zamiast "Zajęcia grupowe"
OFERTA 3 opis:        zamiast "Yoga, Zumba, Spinning, CrossFit..."

CTA nagłówek:         zamiast "Twoja przemiana zaczyna się dziś"
CTA opis:             zamiast "Pierwsze 30 dni za darmo — bez umów, bez zobowiązań"
CTA przycisk:         zamiast "Zacznij 30-dniowy trial →"

MENU:                 zamiast "Treningi / Plany / Trenerzy / Cennik"
PRZYCISK NAV:         zamiast "Dołącz teraz"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione powyżej na moje wartości.
Zachowaj bez zmian: kolory, layout, CSS, fonty, animacje.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS) — żeby można było otworzyć bezpośrednio w przeglądarce.

─────────────────────────────────────────────────────────────────────────

SPECYFIKACJA STRONY — KLUB FITNESS (dark aggressive style)

## Ogólne
- Tło body: #0a0a0a (głęboka czerń), kolor tekstu: #ffffff
- Fonty: Oswald (wght 300-700, nagłówki/UI uppercase) + Inter (wght 300-600, body)
- overflow-x: hidden

## Nawigacja
- Fixed top, padding 18px 48px, background rgba(10,10,10,.92), backdrop-filter blur(16px)
- Border-bottom: 1px solid rgba(249,115,22,.15)
- Logo: "Iron" + "Pulse" (wyróżnione #f97316) — Oswald, 24px, font-weight 700, UPPERCASE, letter-spacing .1em
- Linki: rgba(255,255,255,.5), 13px, UPPERCASE, letter-spacing .08em, hover biały
- Przycisk: background #f97316, biały, bez border-radius, padding 10px 22px, Oswald, 12px, UPPERCASE, letter-spacing .1em

## Sekcja hero
- min-height: 100vh, display flex, align-items center, overflow hidden
- Warstwa tła 1 (absolute): linear-gradient(135deg, #0a0a0a 40%, rgba(249,115,22,.08) 100%)
- Warstwa tła 2 (absolute, grid): linear-gradient rgba(249,115,22,.5) 1px siatka 60px x 60px, opacity .04
- Treść (z-index 2, relative): padding 0 48px, max-width 1100px, flex row, gap 80px
  - LEWA (flex:1):
    - Tag: "Zmień siebie już dziś" — 11px, letter-spacing .3em, UPPERCASE, color #f97316
      - Poprzedzony linią: 32px szerokości, 2px wysokości, background #f97316
    - h1: Oswald, clamp(56px,9vw,112px), font-weight 700, UPPERCASE, line-height .88
      - Pierwsza linia: biała
      - Drugie słowo (np. "LIMITY"): -webkit-text-stroke 2px #f97316, color transparent (efekt konturu)
    - Opis: rgba(255,255,255,.5), 16px, max-width 420px, line-height 1.65
    - 2 przyciski: główny (background #f97316, Oswald UPPERCASE) + drugorzędny (border rgba(.2), biały, hover: border #f97316, color #f97316)
  - PRAWA (flex: 0 0 300px): kolumna 3 "stat box"
    - Każdy: background rgba(255,255,255,.03), border rgba(249,115,22,.12), padding 24px
    - Lewa krawędź: 3px solid #f97316 (position absolute, inset left)
    - Wartość: Oswald 44px, color #f97316
    - Etykieta: 11px, UPPERCASE, letter-spacing .2em, rgba(255,255,255,.35)

## Sekcja oferta
- Padding: 96px 48px, background: #060606
- Label uppercase + h2 Oswald uppercase clamp(36px,5vw,56px)
- Grid 3 kolumn, gap 1px, background rgba(255,255,255,.06)
- Każda karta: padding 40px, background #060606, hover: background rgba(249,115,22,.04), transition .25s
  - Numer: Oswald 11px, UPPERCASE, letter-spacing .3em, rgba(255,255,255,.2)
  - h3: Oswald 20px, UPPERCASE, letter-spacing .05em, margin-bottom 12px
  - Opis: rgba(255,255,255,.4), 14px, line-height 1.65

## Sekcja CTA
- Padding: 96px 48px, background: #f97316, text-align center, color #fff
- h2: Oswald, clamp(42px,6vw,72px), UPPERCASE, letter-spacing -.01em
- Opis: rgba(255,255,255,.8), 16px
- Przycisk: background #000, color #fff, padding 16px 40px, Oswald, 14px, UPPERCASE, letter-spacing .12em

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE (potem wklej całość do Claude lub ChatGPT) ━━━

NAZWA KANCELARII:     zamiast "Kowalski & Partnerzy"
                      [np. Twoja kancelaria / nazwisko radcy]

PODTYTUŁ LOGO:        zamiast "Kancelaria Prawna · Od 1998"
                      [Twoja specjalizacja + rok założenia]

HASŁO H1:             zamiast "Prawo które działa na Twoją korzyść"
                      [Twoje hasło — słowa "Twoją korzyść" w kursywie złotej]

OPIS HERO:            zamiast "Ponad 25 lat doświadczenia w prawie..."
                      [1–2 zdania o Twoim doświadczeniu i specjalizacji]

TRUST BADGE:          zamiast "Członek Okręgowej Izby Radców Prawnych · Rekomendowany przez Legal 500"
                      [Twoje certyfikaty / przynależności]

SPECJALIZACJA 1:      zamiast "Prawo gospodarcze"
SPECJALIZACJA 1 opis: zamiast "Obsługa spółek, umowy handlowe..."

SPECJALIZACJA 2:      zamiast "Prawo pracy"
SPECJALIZACJA 2 opis: zamiast "Spory pracownicze, umowy, regulaminy..."

SPECJALIZACJA 3:      zamiast "Ochrona danych"
SPECJALIZACJA 3 opis: zamiast "RODO, polityki prywatności, audyty..."

OBSZAR 1 tytuł:       zamiast "Postępowania sądowe"
OBSZAR 1 opis:        zamiast "Reprezentacja klientów przed sądami..."

OBSZAR 2 tytuł:       zamiast "Prawo korporacyjne"
OBSZAR 2 opis:        zamiast "Zakładanie spółek, obsługa zarządów..."

OBSZAR 3 tytuł:       zamiast "Compliance i ryzyko"
OBSZAR 3 opis:        zamiast "Programy compliance, zarządzanie ryzykiem..."

CTA nagłówek:         zamiast "Twoja sprawa jest w dobrych rękach"
CTA opis:             zamiast "Pierwsza konsultacja jest bezpłatna i bez zobowiązań"
CTA przycisk:         zamiast "Umów bezpłatną konsultację →"

MENU:                 zamiast "Praktyki / Zespół / Aktualności / Kontakt"
PRZYCISK NAV:         zamiast "Bezpłatna konsultacja"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione powyżej na moje wartości.
Zachowaj bez zmian: kolory, layout, CSS, fonty, animacje.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS) — żeby można było otworzyć bezpośrednio w przeglądarce.

─────────────────────────────────────────────────────────────────────────

SPECYFIKACJA STRONY — KANCELARIA PRAWNA (elegancki granat i złoto)

## Ogólne
- Tło body: #ffffff, kolor tekstu: #0f1729 (granat)
- Fonty: EB Garamond (serif, wght 400/500/600, nagłówki) + Inter (wght 300/400/500/600, body/UI)
- overflow-x: hidden

## Nawigacja
- Fixed top, padding 18px 48px, background rgba(255,255,255,.97), backdrop-filter blur(16px)
- Border-bottom: 1px solid rgba(15,23,41,.06)
- Logo (flex column):
  - Górna linia: "Kowalski & Partnerzy" — EB Garamond, 18px, font-weight 600, letter-spacing .05em
  - Dolna linia: "Kancelaria Prawna · Od 1998" — 10px, UPPERCASE, letter-spacing .2em, rgba(15,23,41,.35)
- Linki: rgba(15,23,41,.5), 13px, letter-spacing .04em, hover: #0f1729
- Przycisk: border 1px solid #0f1729, color #0f1729, transparent bg, 12px, letter-spacing .08em
  - Hover: background #0f1729, color #fff

## Sekcja hero
- min-height: 100vh, padding 130px 48px 96px, background linear-gradient(180deg, #fff 0%, #f8f6f0 100%)
- Layout: flex row, gap 100px, max-width 1100px
- LEWA (flex:1):
  - Eyebrow: "Kancelaria prawna" z poziomą linią 32px po lewej — 11px, UPPERCASE, letter-spacing .25em, rgba(15,23,41,.35)
  - h1: EB Garamond, clamp(44px,5.5vw,76px), font-weight 500, line-height 1.05, letter-spacing -.02em
    - Słowa "Twoją korzyść" — font-style italic, color #b8960c (złoto)
  - Opis: rgba(15,23,41,.5), 17px, line-height 1.8, max-width 460px, font-weight 300
  - 2 przyciski: główny (background #0f1729, biały, padding 14px 32px, 13px, letter-spacing .05em)
              + drugorzędny (border rgba(15,23,41,.2), transparent, padding 14px 24px)
  - Trust badge: background rgba(184,150,12,.06), border rgba(184,150,12,.2), padding 10px 20px
    - color #8a6f08, 12px, letter-spacing .04em, "✦" prefix
- PRAWA (flex: 0 0 340px): 3 karty specjalizacji
  - Każda karta: background #fff, border 1px solid rgba(15,23,41,.08), border-left: 3px solid #b8960c, padding 24px
  - Tytuł: EB Garamond, 16px, font-weight 500
  - Opis: 13px, rgba(15,23,41,.5), line-height 1.55

## Sekcja praktyki
- Padding: 96px 48px, background: #0f1729 (granatowy), color: #ffffff
- Label rgba biały .3 + h2 EB Garamond 48px font-weight 500 font-style italic
- Grid 3 kolumn, gap 1px, background rgba(255,255,255,.06)
- Każda karta: padding 36px, background #0f1729, hover: background rgba(184,150,12,.06), transition .25s
  - Ikona emoji 28px, opacity .7
  - h3: EB Garamond 20px, font-weight 500, color #fff
  - Opis: rgba(255,255,255,.4), 13px, line-height 1.65

## Sekcja CTA
- Padding: 96px 48px, background: #f8f6f0, text-align center
- h2: EB Garamond, 52px, font-weight 500, font-style italic, letter-spacing -.02em, color #0f1729
- Opis: rgba(15,23,41,.5), 16px
- Przycisk: background #b8960c, color #fff, padding 14px 32px, 13px, letter-spacing .05em
  - Hover: background #8a6f08

━━━ PODMIEŃ TE WARTOŚCI NA SWOJE (potem wklej całość do Claude lub ChatGPT) ━━━

NAZWA AGENCJI:        zamiast "Prestige Nieruchomości"
                      [np. Twoja agencja / biuro nieruchomości]

BADGE (social proof):  zamiast "Ponad 2,400 transakcji · 12 lat na rynku"
                      [Twoje osiągnięcia np. "800 sprzedanych mieszkań · 8 lat doświadczenia"]

HASŁO H1:             zamiast "Znajdź wymarzone miejsce do życia"
                      [słowo "wymarzone" wyróżnione kolorem teal]

OPIS HERO:            zamiast "Profesjonalne pośrednictwo nieruchomości w całej Polsce..."
                      [1–2 zdania o Twoim zakresie działania]

TRUST 1:              zamiast "Bezpłatna wycena"
TRUST 2:              zamiast "Bez prowizji kupującego"
TRUST 3:              zamiast "Wsparcie prawne"

KARTA HERO — oferta:
  cena:               zamiast "845 000 zł"
  adres:              zamiast "ul. Słoneczna 14, Kraków-Podgórze"
  pokoje:             zamiast "4"
  metraż:             zamiast "112 m²"
  miejsca:            zamiast "2"

OFERTA 1:  cena "1 200 000 zł", lokalizacja "Centrum, Warszawa", tagi "5 pokoi / 148 m² / Parking"
OFERTA 2:  cena "3 500 zł/mies.", lokalizacja "Żoliborz, Warszawa", tagi "2 pokoje / 54 m² / Balkon"
OFERTA 3:  cena "od 620 000 zł", lokalizacja "Praga Południe, Warszawa", tagi "3 pokoje / 74 m² / Q4 2026"
           [zastąp swoimi przykładowymi ofertami]

CTA nagłówek:         zamiast "Sprzedaj lub kup z nami łatwiej"
CTA opis:             zamiast "Bezpłatna wycena nieruchomości w 24 godziny"
CTA przycisk:         zamiast "Zamów bezpłatną wycenę →"

MENU:                 zamiast "Sprzedaż / Wynajem / Deweloperzy / Kontakt"
PRZYCISK NAV:         zamiast "Bezpłatna wycena"

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Stwórz stronę IDENTYCZNIE jak w specyfikacji poniżej.
Podmień TYLKO elementy tekstowe wymienione powyżej na moje wartości.
Zachowaj bez zmian: kolory, layout, CSS, fonty, animacje.
Outputuj jako JEDEN samodzielny plik HTML (bez frameworków, czysty CSS/JS) — żeby można było otworzyć bezpośrednio w przeglądarce.

─────────────────────────────────────────────────────────────────────────

SPECYFIKACJA STRONY — BIURO NIERUCHOMOŚCI (teal i biel)

## Ogólne
- Tło body: #ffffff, kolor tekstu: #0f172a
- Font: Inter (wght 300/400/500/600/700/800) — Google Fonts
- overflow-x: hidden

## Nawigacja
- Fixed top, padding 18px 48px, background rgba(255,255,255,.97), backdrop-filter blur(16px)
- Border-bottom: 1px solid rgba(15,23,42,.06)
- Logo: "Prestige " + span "Nieruchomości" w kolorze #0d9488 — Inter, 20px, font-weight 800, letter-spacing -.5px
- Linki: rgba(15,23,42,.5), 14px, hover #0f172a
- Przycisk: background #0d9488, biały, padding 10px 22px, border-radius 8px, 13px, font-weight 600
  - Hover: background #0f766e

## Sekcja hero
- min-height: 100vh, padding 120px 48px 80px, display flex, align-items center
- Background: linear-gradient(135deg, #f0fdfa 0%, #fff 60%, #f0fdf4 100%)
- Layout: flex row, gap 80px, max-width 1100px
- LEWA (flex:1):
  - Badge: "✓ Ponad 2,400 transakcji · 12 lat na rynku" — teal border + bg, padding 7px 16px, border-radius 8px
    - background rgba(13,148,136,.08), border rgba(13,148,136,.2), color #0d9488, 12px, font-weight 600
  - h1: Inter, clamp(44px,6vw,76px), font-weight 800, line-height 1.02, letter-spacing -.04em
    - Słowo "wymarzone" w kolorze #0d9488
  - Opis: rgba(15,23,42,.5), 17px, max-width 460px, line-height 1.65
  - Search box: background #fff, border rgba(15,23,42,.1), border-radius 12px, padding 6px 6px 6px 18px
    - flex row: input (transparent, 14px) + button "Szukaj →" (background #0d9488, biały, border-radius 8px)
    - box-shadow: 0 4px 20px rgba(15,23,42,.06)
  - Trust row: 3 elementy z "✓" prefix w kolorze #0d9488, 13px, rgba(.5)
- PRAWA (flex: 0 0 380px): karta oferty
  - background #fff, border-radius 16px, overflow hidden, box-shadow 0 20px 60px rgba(15,23,42,.08)
  - Obrazek (placeholder): gradient #ccfbf1 → #a7f3d0, 180px, emoji 🏡, badge "NOWE" (#0d9488)
  - Body: cena Inter 22px font-weight 800 + adres rgba(.5) 13px + features (emoji + wartość bold + opis)

## Sekcja oferty
- Padding: 80px 48px, background: #f8fafc
- Label uppercase + h2 Inter 44px font-weight 800
- Grid 3 kolumn, gap 20px
- Każda karta: background #fff, border-radius 14px, overflow hidden, border rgba(15,23,42,.06)
  - Hover: translateY(-4px), box-shadow silniejszy — transition .25s
  - Obrazek placeholder 160px: gradient pastelowy + emoji + badge (SPRZEDAŻ/WYNAJEM/DEWELOPER)
  - Body: cena 18px bold + adres rgba(.45) 12px + tagi (background #f1f5f9, border-radius 4px, 11px)

## Sekcja CTA
- Padding: 80px 48px, background: #0f172a, text-align center, color #fff
- h2: Inter, 48px, font-weight 800, letter-spacing -.03em
- Opis: rgba biały .5, 16px
- Przycisk: background #0d9488, biały, padding 14px 32px, border-radius 10px, 14px, font-weight 700