Wealth Video Hero
Create a modern, high-impact hero section for a wealth management platform using React and Tailwind CSS.
Layout & Background:
The section must be full viewport height (min-h-screen) with a black background. Background Video: Use this specific video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260207_050933_33e2620d-09cd-43a2-80ef-4cdbb42f4194.mp4. It should be autoplaying, looped, and muted. Video Styling: The video must be scaled to 150% of its size (scale-150) with the focal point aligned to the top-left corner (object-left-top, origin-top-left).
Navbar:
Place a transparent navbar at the absolute top. Include a white logo on the left. Center navigation links: "Features" (with a chevron down icon), "Company", and "Blogs". These should be white with hover opacity effects. Right side actions: A "Sign in" text link and a white "Get Started" pill-shaped button with black text.
Hero Content (Centered):
Tag: A glassmorphic pill at the top saying "Real-Time Budget Tracking" (white text, semi-transparent border/bg). Headline: Huge, centered white text saying "Build Wealth That Lasts Generations" (responsive font size, up to ~100px on desktop). Subtitle: "Transform today's earnings into tomorrow's family fortune with proven wealth-building strategies" (white text with slight transparency). CTA: A prominent white pill button saying "Start Building Wealth" with black text and a hover scale effect.
Bottom Features Grid:
Place a floating card container near the bottom of the screen. Style: Dark glassmorphism effect (bg-black/70, backdrop-blur-xl, white border). Grid: 4 columns listing these steps: Create Your Free Account: Sign up in seconds using your email address or mobile number. Connect Your Bank Accounts: Securely link your bank accounts, cards, or digital wallets with. Set Your Financial Goals: Customize your savings, spending, or investment goals with easy. Track, Grow, and Optimize: Watch your money work for you in real time—get insights and tips.