` with ref `containerRef`, classes `h-screen overflow-y-auto overflow-x-hidden font-manrope bg-black relative`. **Scroll setup:** ```tsx const containerRef = useRef(null); const { scrollY } = useScroll({ container: containerRef }); const cloudYDesktop = useTransform(scrollY, [0, 300], [0, -100]); const cloudYMobile = useTransform(scrollY, [0, 300], [0, -24]); ``` ### Section 1 — Video Hero `

` - **Background video** (absolute inset-0, z-10, `w-full h-full object-cover`, autoPlay loop muted playsInline): - src: `https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/cloudinarry%20to%20cloudflare/baby-track-video_crqby5.mp4` - **Overlay** `absolute inset-0 z-30 pointer-events-none`. **Top-left logo block** (`absolute top-[24px] left-[20px] md:top-[64px] md:left-[64px] pointer-events-auto max-w-[calc(100vw-140px)] md:max-w-none`): - Flex row, gap-[16px] md:gap-[24px], items-center. - SVG logo, white fill, 48x48 mobile / 64x64 desktop, viewBox `0 0 120 120`, path: `M60 120C26.8629 120 0 93.1371 0 60V0C22.5654 0 42.2213 12.4569 52.4662 30.8691C38.4788 34.2089 28.0787 46.7902 28.0787 61.8006V63.1443C28.0787 79.9648 41.7146 93.6006 58.5353 93.6006H59.8789L59.8785 61.8006C59.8785 79.3633 74.1159 93.6006 91.6787 93.6006L91.6787 61.8006C91.6787 44.2783 77.5071 30.0661 60 30.0008L60 0H62.5352C94.2722 0 120 25.7279 120 57.4648V60C120 93.1371 93.1371 120 60 120Z` - Tagline: white, `text-[11px] md:text-[16px] w-[112px] md:w-auto leading-[1.2] font-semibold tracking-[0.02em]`. - Desktop (`hidden md:block`): "Effortless Growth / Operations. We Handle All Tasks. / Stay Calm." with `
` after each. - Mobile (`block md:hidden`): "Complete Business / Automation. We Handle All / Tasks. You Relax." **Left description** (desktop only, below logo): `hidden md:flex mt-[400px] flex-col gap-[24px] w-full max-w-[320px] text-white text-[14px] font-normal leading-relaxed`. Two paragraphs about SaaS automation. **Top-right CTA button** (`absolute top-[24px] right-[20px] md:top-[64px] md:right-[64px]`): `px-5 py-3 md:px-10 md:py-7 border border-white rounded-[100%] text-white text-[12px] md:text-[18px] font-italiana uppercase tracking-widest hover:bg-white/10 hover:backdrop-blur-[48px] transition-all duration-300 cursor-pointer bg-black/10 backdrop-blur-sm md:bg-transparent md:backdrop-blur-none` Label: "Get started". **Bottom heading container** (`absolute bottom-[32px] left-[20px] right-[20px] md:left-auto md:bottom-[64px] md:right-[64px] md:max-w-[1200px] text-left md:text-right`): - Mobile paragraphs (`md:hidden flex flex-col gap-[16px] max-w-[280px] text-white text-[12px] font-normal mb-[32px]`). - `

46024824a3dd3309c3a7f46f4f1283ba?family=Zimula+Trial+Reg'); ``` ### Global CSS (`index.css`) - Reset: `, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }` - `html { scroll-behavior: smooth; }` - `body { font-family: 'Zimula Trial Med', sans-serif; background: #0e0c0a; overflow-x: hidden; }` - Custom scrollbar: 6px wide, track `#0e0c0a`, thumb `rgba(255,255,255,0.15)` with 3px radius. ### Section Container A `
` with: `position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; fontFamily: "'Zimula Trial Med', sans-serif"`. ### Layer 1 — Background Video (z-index 0) A `

Focus in a
Distracted World

` — "Ready to Transfer
Without Borders?" with classes `font-normal leading-[1.1] mb-[15px]` and inline `fontSize: '3.5rem', letterSpacing: '-0.03em'`. - `
` — "Send Money Worldwide at the Best Rates" with `text-[0.9rem] mb-[30px] font-normal opacity-85`. - `

Focus in aDistracted World

Focus in a
Distracted World

Max Reed Portfolio

Velorah Focus

Solar Energy Hero

Art Landing

Botanical Shadow About

Zenith Realty

Health Portal

Mind-Body Healing

AI Designer Portfolio

Space Voyage

Apex SaaS

FAQ CTA

Luxury Real Estate

Futuristic Tech

HAUL!

Blog Showcase

Creative Studio

Reveal Hero

EMBER.dsgn

Bento Grid Stats