xPortfolio Hero

Build a single-page hero section for a brand design agency called "Brandly" using React, Tailwind CSS, and Lucide React icons. The entire page is one viewport-height screen with no scrolling. It uses a fullscreen background video with all content layered on top.

Fonts (loaded via Google Fonts in index.html): Inter (weights: 300, 400, 500, 600, 700) -- used as the base font for the entire page Anton (regular 400) -- used for all large uppercase headings

Page Container: Full viewport height (h-screen), overflow-hidden, flex flex-col Background color: #F5F3EE (warm off-white/cream) Base font-family set via inline style: fontFamily: 'Inter, sans-serif'

Background Video: A video element with autoPlay, loop, muted, playsInline Positioned fixed top-0 left-0 w-full h-full object-cover pointer-events-none with zIndex: 0 Video source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_102305_3a7cab3b-7a86-46e8-a0f9-6937f035b087.mp4 Type: video/mp4

Header (zIndex: 10): relative, padding px-6 lg:px-12 py-4 lg:py-6, flex-shrink-0 Nav: flex items-center justify-between Left: Logo text "Brandly" -- text-2xl lg:text-3xl font-bold text-black Center (hidden on mobile, shown md+): Navigation links "About", "Features", "Pricing", "FAQ", "Help" -- flex items-center gap-8 text-base lg:text-lg, color #080808 Right: Two buttons side by side (flex items-center gap-3): "Sign Up" -- px-4 lg:px-6 py-2 text-base lg:text-lg hover:text-black transition, color #080808 "Log In" -- px-4 lg:px-6 py-2 bg-black text-white text-base lg:text-lg hover:bg-gray-800 transition

Main Content Area (zIndex: 10): relative, padding px-6 lg:px-12 py-6 lg:py-8, flex-1 flex flex-col justify-between

Top Row -- 2 column grid (grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12): Left column: Main heading (h1): "BUILDING / BRANDS THAT / RESONATE" in Anton font. text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-normal text-black leading-[0.80] tracking-tight mb-4 lg:mb-5. Subheading: "Thoughtful design that captivates, empowers, and creates lasting impact." text-lg lg:text-xl mb-4 lg:mb-5 max-w-md color #080808 CTA button: "Start today" with ArrowRight icon in white circle. flex items-center gap-3 pl-8 pr-1.5 py-1.5 bg-black text-white rounded-full hover:bg-gray-800

Right column (text-right): "50+ BRANDS LAUNCHED" heading in Anton, with description paragraph below.

Middle Row -- 2 column grid: Left: Brand designer bio paragraph with social icons (Facebook filled, Instagram, Youtube) Right: "5+ YEARS IN THE INDUSTRY" heading in Anton with description

Bottom Row -- Brand Logo Bar: 6 brand cards in grid-cols-6: Frame Blox, Supa Blox, Hype Blox, Hype Blox, Ultra Blox, Ship Blox Each with unique abstract icon and white bg rounded-lg card style

Key: No animations, all text black/#080808, default Tailwind config, justify-between layout distribution.