` 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]`). - `

`: - Desktop: "Intelligent Daily / Routine Automation / For Your Business. / You Relax". - Mobile (`text-[32px]`): "Intelligent Daily Routine / Automation For Your / Business. You Relax". ### Section 2 — Red Background `
` Cloud overlays (two `motion.div`, one desktop, one mobile, both absolute top-0 left-0 w-full z-[100] pointer-events-none `-translate-y-1/2`): - style `y: cloudYDesktop` / `y: cloudYMobile`. - `` Content wrapper: `flex-1 flex flex-col items-center w-full pt-[100px] md:pt-[400px]`. Inner content block (`flex flex-col items-center w-full px-8 text-center z-20 relative max-w-[900px] h-auto md:h-[620px] mx-auto`): - Same SVG logo, 80x80, white. - Paragraph: `text-white text-[16px] h-[100px] max-w-[400px] leading-[1.6] mb-[40px] uppercase tracking-wider mx-auto`. Text: "We built this platform with a single purpose to eliminate operational chaos and restore balance to your daily business routine". - Signature: `font-marck text-white text-[120px] leading-none mb-[32px]` reading `S.P.D`. - Two centered paragraphs: white, `text-[16px] w-[400px] max-w-full`, font-light, first with `mb-[24px]`, container `mb-[100px] md:mb-24`. Bottom video block (`relative w-full shrink-0`): - Top fade: `absolute top-0 left-0 w-full h-[100px] bg-gradient-to-b from-[#FF0000] to-transparent z-10 pointer-events-none`. - Video (autoPlay loop muted playsInline, `w-full h-auto block object-contain`): - src: `https://pub-86dc5b5484314368ac5436a674b0d919.r2.dev/cloudinarry%20to%20cloudflare/track-video_2_haxdch.mp4` ## Animations - Cloud parallax: maps scroll 0→300px to translateY 0→-100px (desktop) and 0→-24px (mobile), via `useTransform` with the section's container scroll. - Button hover: background fades to `white/10` with `backdrop-blur-[48px]` over 300ms. ## Notes - Videos are Cloudinary, not CloudFront. There are no CloudFront URLs in this project. - All assets above are the only external URLs used.24:T1bbc,Build a luxury real estate landing page called "ZENITH REALTY" with the exact design, components, and animations described below. Do not include a footer. Core Setup: * Font: Use Google Font 'Lato' (weights 300, 400, 500, 700, 900). Configure it in tailwind by setting `@theme { --font-lato: "Lato", sans-serif; }` in `index.css` and apply `font-lato` globally. * Global Style: The main wrapper should use `bg-[#F8F8F8]` and `text-[#141414]`. * Libraries: Use `lucide-react` for icons, `motion/react` for animations, and `recharts` for charts. Section 1: Hero & Navbar * Full screen height (`h-screen`), overflow hidden, relative positioning. * Background Video: Absolutely positioned, covering the full area: `

Art Landing

Zenith Realty

Health Portal

Mind-Body Healing

AI Designer Portfolio

Space Voyage

Apex SaaS

Luxury Real Estate

Futuristic Tech

HAUL!

Creative Studio

Reveal Hero

EMBER.dsgn

Bento Grid Stats

AKOR Security

Modern Dental Clinic

Gateway Portal

Digital Reality

VertexAI Hero

Shipping Infrastructure