Create a premium, modern, dark-themed hero section. The design should utilize deep glassmorphism (heavy backdrop blurs, subtle semi-transparent borders) to create a sleek, high-end tech aesthetic. The font should be clean, sans-serif, with tight tracking for headers and loose tracking for body text.
- Background & Base Layer Video Background: Set a full-screen, auto-playing, looping, and muted video in the absolute background at exactly 100% opacity. Video URL: (Use a licensed or AI-generated video asset)
Overlay/Shadow: To ensure the left-aligned text remains readable over the video, apply a dark gradient shadow on the left side of the screen. It should cover about 2/3 of the screen width, starting at 60% black opacity on the far left and smoothly fading to completely transparent towards the right.
Base Color: The underlying background color (behind the video) should be a very dark zinc/black (bg-zinc-950), and the default text color should be white.
- Top Navigation Layout: Spaced horizontally (flex between) with a max width of 1440px, centered on the page with ample horizontal padding.
Logo (Left): Use an 'Aperture' icon (from Lucide React or similar) that rotates 90 degrees smoothly when hovered over.
Links (Center): Include the links: "Use case", "Pricing", "Blog", "Docs", and "Company". Hide these on mobile screens. The text should be small, medium weight, and 70% white opacity, transitioning to solid white on hover.
Action Buttons (Right): Login Button: Glassy dark style. 5% white background with heavy backdrop blur, a subtle 10% white border, and white text. Add a slight white glowing shadow on hover. Signup Button: Glassy light style. 80% white background with heavy backdrop blur, 50% white border, and black text. Make the background solid white and enhance the glow on hover.
- Middle Elements (Hero Section) Layout: Left-aligned, vertically centered within the remaining screen height. Limit the maximum width of the text content to about 768px (max-w-3xl) to keep it nicely proportioned on the left side.
Social Proof Tag (Top Element): Style: A small, pill-shaped glassy container (5% white bg, backdrop blur, 10% white border) with a subtle drop shadow. Content: 3 overlapping, small circular user avatars (use http://pravatar.cc) followed by the text "Join 1M+ developers". Typography: Extra small text, medium weight, 80% white opacity. Spacing: Exactly 20 pixels of space below this tag, before the main heading.
Main Heading: Text: "Unleash the power" (Line 1) "of Generative AI" (Line 2) Typography: Very large (6xl to 80px), semi-bold, with a tight letter spacing and a 1.05 line height. Color: Solid white (100% opacity) for the entire heading. Spacing: Exactly 12 pixels of space below the heading, before the subheading.
Subheading: Text: "The ultimate serverless compute engine designed to train, deploy, and scale your machine learning models effortlessly." Typography: Large to extra-large font, light weight, wide tracking/letter-spacing, and relaxed line height. Color: White at exactly 80% opacity. Spacing: 48 pixels of space below the subheading, before the CTA buttons.
Call to Action (CTA) Buttons: Layout: Placed side-by-side (or stacked on mobile) with a 16px gap. Primary Button ("Get started"): Large, rounded pill shape. Glassy light style (80% white bg, backdrop blur, 40% white border). Black text, semi-bold. Include a right-pointing arrow icon that nudges right on hover. The button should scale up slightly (1.05x) on hover. Secondary Button ("Book a demo"): Large, rounded pill shape. Glassy dark style (20% black bg, backdrop blur, 15% white border). White text, medium weight. Background brightens slightly on hover.