Bloom AI
Create a full-screen hero landing page for "Bloom" — an AI-powered plant/floral design platform. The design uses a liquid glass morphism aesthetic over a looping video background.
Background Full-screen autoplaying, looping, muted video background: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4 Video covers entire viewport with object-cover, sits at z-0. All content floats above at z-10.
Fonts Display/Body: Poppins (Google Fonts) — used for headings and body text Serif accent: Source Serif 4 (Google Fonts) — used only for italic/emphasis text inside headings (e.g., <em>, <i>, .italic inside h1-h3) Headings use font-weight: 500
Color Palette Strict grayscale only — all CSS variables are 0 0% X% HSL values Text is text-white, text-white/80, text-white/60, text-white/50 for hierarchy No colored accents whatsoever
Liquid Glass CSS (two tiers) Define under @layer components:
.liquid-glass (light) background: rgba(255,255,255,0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); position: relative; overflow: hidden; ::before pseudo-element: gradient border using linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, transparent 40%, transparent 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%) with padding: 1.4px, masked via -webkit-mask-composite: xor; mask-composite: exclude;
.liquid-glass-strong (heavy, for CTA/panels) Same structure but backdrop-filter: blur(50px), box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15), and ::before uses 0.5/0.2 alpha instead of 0.45/0.15.
Layout — Two-Panel Split Flex row, min-h-screen. Left panel w-[52%], right panel w-[48%] (hidden on mobile lg:flex).
Left Panel Has a liquid-glass-strong overlay (absolute inset-4 lg:inset-6 rounded-3xl) Nav: Logo image (/logo.png, 32×32) + "bloom" text (semibold, 2xl, tracking-tighter, white) on left. "Menu" button with Menu icon on right, liquid-glass pill. Hero center (flex-1, centered): Logo image again (80×80) h1: "Innovating the / spirit of bloom AI" — text-6xl lg:text-7xl, tracking-[-0.05em], white. The italic part uses font-serif text-white/80 CTA button: "Explore Now" with Download icon in a w-7 h-7 rounded-full bg-white/15 circle. Button is liquid-glass-strong, rounded-full, hover:scale-105 active:scale-95 Three pills: "Artistic Gallery", "AI Generation", "3D Structures" — liquid-glass, rounded-full, text-xs text-white/80 Bottom quote: "VISIONARY DESIGN" label (text-xs tracking-widest uppercase text-white/50) Quote: "We imagined a realm with no ending." — mixed font-display/font-serif italic spans Author: "MARCUS AURELIO" with horizontal lines on each side
Right Panel (desktop only) Top bar: Social icons (Twitter, LinkedIn, Instagram) in a liquid-glass pill with ArrowRight. Account button with Sparkles icon button, both liquid-glass. Community card: Small liquid-glass card (w-56), "Enter our ecosystem" title + description Bottom feature section (mt-auto): Outer liquid-glass container with rounded-[2.5rem] Two side-by-side cards: "Processing" (Wand2 icon) and "Growth Archive" (BookOpen icon), each liquid-glass rounded-3xl Bottom card: flower image thumbnail (from @/assets/hero-flowers.png, 96×64), "Advanced Plant Sculpting" title + description, and a "+" button. All liquid-glass.
Icons All from lucide-react: Sparkles, Download, Wand2, BookOpen, ArrowRight, Twitter, Linkedin, Instagram, Menu
Key Details All interactive elements: hover:scale-105 transition-transform Social icon links: text-white hover:text-white/80 transition-colors Icon containers: w-8 h-8 rounded-full bg-white/10 flex items-center justify-center No border classes anywhere — glass effect handles all borders via ::before border-radius token: --radius: 1rem