Cyberpunk Prompts

**Create a full-screen hero section for a futuristic cyberpunk fashion e-commerce site with a pure black background.** **Typography:** - Display font: "Orbitron" (Google Font), used for headlines and buttons - Body font: "Space Grotesk" (Google Font) - All text is white **Background Video:** - A looping, muted, autoplaying background video covering the entire section - Video source: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260303_175853_da9ead9c-0e05-40d9-b9bd-06a9b5a73d27.mp4` - Apply a dark gradient overlay on top: `bg-gradient-to-t from-black/70 via-black/20 to-transparent` **Navigation (absolute positioned at top):** - **Left:** A circular black button (w-12 h-12 on mobile, w-[5.5rem] h-[5.5rem] on desktop) containing the site logo image - **Right (desktop only):** Three elements in a row: 1. Circular black button with a Search icon (w-[5.5rem] h-[5.5rem]) 2. Circular black button with a ShoppingCart icon (w-[5.5rem] h-[5.5rem]) 3. A pill-shaped black container (h-[5.5rem]) with a white circular avatar containing a User icon on the left, and the text "Contact" on the right - **Right (mobile only):** A circular black hamburger menu button (w-12 h-12). When tapped, it opens a black rounded dropdown below the nav with three rows: Search, Cart, Contact — each with icon + label **Product Pins (desktop only, hidden on mobile):** - Three floating product callouts positioned absolutely over the video: 1. **"NEUROVIBE MK-I — $230"** at `left-[8%] top-[18%]`: Text on the left, then a horizontal white line (w-20), then a small hollow white circle (w-2.5 h-2.5, border-2) 2. **"VOIDBLADE — $120"** at `right-[8%] top-[42%]`: Small hollow circle on the left, then a horizontal white line (w-16), then text on the right 3. **"SHADOW CIRCUIT JACKET — $450"** at `right-[8%] top-[58%]`: Same layout as VOIDBLADE — circle, line, text - Text uses `text-sm tracking-[0.15em] font-medium` for the name and `text-sm` for the price - Lines use `bg-primary-foreground/40`, circles use `border-primary-foreground/60` **Hero Headline (bottom-left):** - Positioned at `bottom-[8%] left-[3%]` - Three lines of uppercase text: "Future" / "Fashion," / "Redefined." - Font: Orbitron display, `text-5xl md:text-7xl lg:text-8xl`, `leading-[0.9] tracking-tight`, white **Shop Button (bottom-right corner):** - Positioned at `absolute bottom-0 right-0` - Black background, white text, `rounded-tl-[1.5rem]` (only top-left corner rounded) - Padding: `px-8 py-4` on mobile, `px-12 py-6` on desktop - Text: "Shop" on mobile, "Shop Now" on desktop - Font: Orbitron, `tracking-[0.2em] uppercase` **Color System:** - Background (--background): pure black `0 0% 0%` - Primary (--primary): black `0 0% 0%` - Primary-foreground: white `0 0% 100%` - Use semantic Tailwind tokens throughout — no hardcoded color classes