提示词
为“Bloom”创建一个全屏 hero landing page——这是一个由 AI 驱动的植物/花艺设计平台。设计采用液态玻璃拟态美学，并以循环视频作为背景。
背景
全屏自动播放、循环、静音视频背景：https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260315_073750_51473149-4350-4920-ae24-c8214286f323.mp4
视频使用 object-cover 覆盖整个 viewport，位于 z-0。所有内容悬浮于其上方的 z-10。
字体
展示/正文：Poppins (Google Fonts)——用于标题和正文文本
衬线强调字体：Source Serif 4 (Google Fonts)——仅用于标题内的斜体/强调文本（例如 h1-h3 内的 <em>、<i>、.italic）
标题使用 font-weight: 500
配色方案
严格仅使用灰度——所有 CSS variables 均为 0 0% X% HSL values
文本按层级使用 text-white、text-white/80、text-white/60、text-white/50
不得使用任何彩色强调色
液态玻璃 CSS（两个层级）
在 @layer components 下定义：
.liquid-glass（轻量）
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：使用 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%) 创建渐变边框，设置 padding: 1.4px，并通过 -webkit-mask-composite: xor; mask-composite: exclude; 进行遮罩；
.liquid-glass-strong（厚重，用于 CTA/panels）
结构相同，但 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)，且 ::before 使用 0.5/0.2 alpha，而不是 0.45/0.15。
布局——双面板拆分
Flex row，min-h-screen。左侧面板 w-[52%]，右侧面板 w-[48%]（移动端隐藏，lg:flex）。
左侧面板
带有 liquid-glass-strong overlay（absolute inset-4 lg:inset-6 rounded-3xl）
Nav：左侧为 Logo image（/logo.png，32×32）+“bloom”文本（semibold、2xl、tracking-tighter、white）。右侧为带 Menu icon 的“Menu”按钮，采用 liquid-glass pill。
Hero 中心区域（flex-1、居中）：
再次显示 Logo image（80×80）
h1：“Innovating the / spirit of bloom AI”——text-6xl lg:text-7xl、tracking-[-0.05em]、white。斜体部分使用 font-serif text-white/80
CTA button：“Explore Now”，带有一个位于 w-7 h-7 rounded-full bg-white/15 圆形内的 Download icon。按钮使用 liquid-glass-strong、rounded-full、hover:scale-105 active:scale-95
三个 pills：“Artistic Gallery”“AI Generation”“3D Structures”——liquid-glass、rounded-full、text-xs text-white/80
底部引语：
“VISIONARY DESIGN”label（text-xs tracking-widest uppercase text-white/50）
引语：“We imagined a realm with no ending.”——混合使用 font-display/font-serif italic spans
作者：“MARCUS AURELIO”，两侧各有一条水平线
右侧面板（仅桌面端）
顶部栏：Social icons（Twitter、LinkedIn、Instagram）放在带 ArrowRight 的 liquid-glass pill 中。Account button 与 Sparkles icon button，二者均使用 liquid-glass。
社区卡片：小型 liquid-glass card（w-56），包含“Enter our ecosystem”标题 + 描述
底部功能区（mt-auto）：外层为带 rounded-[2.5rem] 的 liquid-glass container
两个并排 cards：“Processing”（Wand2 icon）和“Growth Archive”（BookOpen icon），均使用 liquid-glass rounded-3xl
底部 card：花朵图片 thumbnail（来自 @/assets/hero-flowers.png，96×64）、“Advanced Plant Sculpting”标题 + 描述，以及一个“+”按钮。全部使用 liquid-glass。
图标
全部来自 lucide-react：Sparkles、Download、Wand2、BookOpen、ArrowRight、Twitter、Linkedin、Instagram、Menu
关键细节
所有 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
任何位置均不得使用 border classes——玻璃效果通过 ::before 处理所有边框
border-radius token：--radius: 1rem原文提示词（English）
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
