```json
{
"summary": "为 B2B AI 效率工具 NexusMind 设计

By 表歌, 5 May, 2026
推理
The user wants me to design a high-converting hero section for a B2B AI Productivity Tool. Let me break down the requirements:

- Style: Modern, minimalist, Dark Mode
- Left: H1 with gradient accent, subtext, CTA (Indigo) + "Watch Demo" secondary button
- Right: 3D glassmorphism dashboard widget with growth chart
- Framework: Tailwind CSS & Lucide Icons

Let me first get design system recommendations and assets, then build this out.

Let me start by querying the design system for B2B SaaS dark mode recommendations, and also get some relevant assets.Good, I have the design system and assets. Let me now plan the hero section:

Design System:
- Style: Minimalism
- Colors: primary #111827, secondary #374151, accent #d4a537, background #0a0a0a, foreground #f5f5f5, card #151515, border #222, muted #888
- But user wants Indigo color for CTA button, so I'll incorporate indigo accent
- Fonts: Inter (but I should use something more unique per the design guidelines... though the system recommends Inter)

Wait, the user specifically wants Tailwind CSS & Lucide Icons. The design guidelines say to avoid Inter/Roboto etc., but the design system recommended Inter. The user's requirements are specific though - they want modern minimalist dark mode. Let me use a more interesting font pairing. Let me use something like "Plus Jakarta Sans" or "Cabinet Grotesk" for headings and keep Inter for body - actually, let me use a more distinctive heading font like "Clash Display" or "Satoshi". But they need to be on Google Fonts.

Let me go with:
- Heading: "Satoshi" or "Cabinet Grotesk" - distinctive but clean
- Body: Inter (as recommended)

Actually, I should follow the spirit of the design system but bring my own creative choices. Let me go with:
- Heading: "Cabinet Grotesk" (bold, distinctive, modern)
- Body: "Inter" (clean, readable)

For the glassmorphism dashboard widget on the right, I'll create it with CSS. I'll use Tailwind CSS with custom styles for the glass effect, and Lucide Icons for icons.

Let me also use the asset image we got - the one at `/assets/images/illustration/29.png` seems good with dark mode dashboard.

Now let me build the full HTML:

Key elements:
1. Dark background with subtle texture/gradient
2. Left side: H1 with gradient accent, subtext, Indigo CTA + Watch Demo secondary
3. Right side: 3D glassmorphism dashboard with growth chart
4. Lucide Icons (via CDN)
5. Tailwind CSS

Let me create a sophisticated design:

For the gradient accent on the heading, I'll use an indigo-to-purple or indigo-to-cyan gradient.
For the glassmorphism card, I'll use backdrop-blur, semi-transparent backgrounds, subtle borders.

I'll also add some floating elements, subtle grid patterns, and particle-like decorations for the dark mode atmosphere.

Let me build this out carefully:

The chart on the dashboard - I'll use a custom SVG chart (line chart going upward to show growth). This is more impressive than just an image.

Let me also incorporate the mockup asset as a background element within the glass card.

Let me structure this:

```html
<!DOCTYPE html>
<html>
...
```

Using Lucide Icons CDN: `<script src="https://unpkg.com/lucide@latest"></script>`

Let me design the full thing now. I'll make it really premium.

For the 3D glassmorphism effect:
- backdrop-filter: blur()
- background: rgba(255,255,255,0.05)
- border: 1px solid rgba(255,255,255,0.1)
- transform with perspective
- box-shadow with multiple layers
- A subtle rotation or isometric feel

For the chart, I'll draw an SVG area chart with gradient fill showing growth.

Let me also add some micro-interactions and subtle animations.

I also need to think about responsive design - stacking on mobile.

Let me create the final product now.
角色
assistant
content

```json
{
"summary": "为 B2B AI 效率工具 NexusMind 设计了深色模式极简主义 Hero 区域。左侧采用 Indigo 渐变标题、分层副文案、靛蓝主 CTA 与带 Lucide 图标的次按钮；右侧创建了高保真 3D 玻璃拟态仪表盘卡片，内含 SVG 增长曲线图、指标卡片和悬浮光晕，整体营造科技感与转化驱动力。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>NexusMind AI — 智能效率平台</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script src=\"https://unpkg.com/lucide@latest\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;6…\" rel=\"stylesheet\">\n <style>\n :root {\n --bg-deep: #06070b;\n --bg-card: rgba(255, 255, 255, 0.03);\n --border-glass: rgba(255, 255, 255, 0.08);\n --indigo-400: #818cf8;\n --indigo-500: #6366f1;\n --indigo-600: #4f46e5;\n --glow-indigo: rgba(99, 102, 241, 0.25);\n --glow-cyan: rgba(6, 182, 212, 0.18);\n }\n\n * {\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n padding: 0;\n background-color: var(--bg-deep);\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n .font-display {\n font-family: 'Cabinet Grotesk', 'Inter', system-ui, sans-serif;\n }\n\n /* ===== Background Ambient ===== */\n .hero-bg {\n position: relative;\n background:\n radial-gradient(ellipse 70% 60% at 50% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse 50% 50% at 85% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 55%),\n radial-gradient(ellipse 40% 40% at 15% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),\n var(--bg-deep);\n }\n\n .hero-bg::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);\n background-size: 64px 64px;\n pointer-events: none;\n mask-image: radial-gradient(ellipse 70% 70% at 50% 35%, black 30%, transparent 70%);\n -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 35%, black 30%, transparent 70%);\n }\n\n /* ===== Floating Orbs ===== */\n .orb {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n pointer-events: none;\n animation: orbFloat 12s ease-in-out infinite;\n }\n .orb-1 {\n width: 380px;\n height: 380px;\n background: rgba(99, 102, 241, 0.12);\n top: -8%;\n right: -5%;\n animation-delay: 0s;\n }\n .orb-2 {\n width: 260px;\n height: 260px;\n background: rgba(6, 182, 212, 0.09);\n bottom: 10%;\n left: 55%;\n animation-delay: -5s;\n animation-duration: 15s;\n }\n .orb-3 {\n width: 200px;\n height: 200px;\n background: rgba(139, 92, 246, 0.07);\n top: 40%;\n left: 5%;\n animation-delay: -8s;\n animation-duration: 18s;\n }\n\n @keyframes orbFloat {\n 0%, 100% {\n transform: translate(0, 0) scale(1);\n }\n 25% {\n transform: translate(30px, -25px) scale(1.08);\n }\n 50% {\n transform: translate(-15px, 20px) scale(0.94);\n }\n 75% {\n transform: translate(-25px, -10px) scale(1.05);\n }\n }\n\n /* ===== Glass Card 3D ===== */\n .glass-card {\n position: relative;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n border: 1px solid var(--border-glass);\n border-radius: 20px;\n transform: perspective(1200px) rotateY(-4deg) rotateX(3deg);\n transform-style: preserve-3d;\n box-shadow:\n 0 4px 6px rgba(0, 0, 0, 0.25),\n 0 20px 50px rgba(0, 0, 0, 0.4),\n 0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n 0 1px 0 rgba(255, 255, 255, 0.06) inset,\n 0 60px 80px -40px rgba(99, 102, 241, 0.25);\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n }\n\n .glass-card:hover {\n transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-4px);\n box-shadow:\n 0 6px 10px rgba(0, 0, 0, 0.3),\n 0 24px 60px rgba(0, 0, 0, 0.5),\n 0 0 0 1px rgba(255, 255, 255, 0.05) inset,\n 0 1px 0 rgba(255, 255, 255, 0.08) inset,\n 0 70px 90px -40px rgba(99, 102, 241, 0.32);\n }\n\n .glass-card::after {\n content: '';\n position: absolute;\n top: -1px;\n left: 20px;\n right: 20px;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);\n border-radius: 50%;\n }\n\n /* ===== Glow Reflection ===== */\n .glow-reflect {\n position: absolute;\n top: 15%;\n left: -8%;\n width: 35%;\n height: 70%;\n background: radial-gradient(ellipse, rgba(99, 102, 241, 0.15) 0%, transparent 70%);\n pointer-events: none;\n filter: blur(40px);\n }\n\n /* ===== Chart SVG Styling ===== */\n .chart-area {\n fill: url(#chartGradient);\n }\n .chart-line {\n fill: none;\n stroke: #818cf8;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.5));\n }\n .chart-glow-line {\n fill: none;\n stroke: rgba(129, 140, 248, 0.25);\n stroke-width: 6;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n /* ===== CTA Button Shine ===== */\n .btn-primary {\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 40%, #7c3aed 100%);\n border: none;\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: -75%;\n width: 50%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);\n transform: skewX(-20deg);\n transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .btn-primary:hover::before {\n left: 125%;\n }\n .btn-primary:hover {\n box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45), 0 0 0 4px rgba(99, 102, 241, 0.15);\n transform: translateY(-2px);\n }\n .btn-primary:active {\n transform: translateY(0);\n box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);\n }\n\n /* ===== Secondary Button ===== */\n .btn-secondary {\n background: rgba(255, 255, 255, 0.04);\n border: 1px solid rgba(255, 255, 255, 0.12);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .btn-secondary:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.2);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n transform: translateY(-2px);\n }\n .btn-secondary:active {\n transform: translateY(0);\n }\n\n /* ===== Title Gradient ===== */\n .title-gradient {\n background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 35%, #818cf8 65%, #a78bfa 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* ===== Badge Pulse ===== */\n .badge-pulse {\n animation: badgeGlow 3s ease-in-out infinite;\n }\n @keyframes badgeGlow {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35);\n }\n 50% {\n box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);\n }\n }\n\n /* ===== Metric Cards in Dashboard ===== */\n .metric-card {\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid rgba(255, 255, 255, 0.06);\n border-radius: 12px;\n transition: all 0.3s ease;\n }\n .metric-card:hover {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.12);\n transform: translateY(-2px);\n }\n\n /* ===== Dot Grid (decorative) ===== */\n .dot-pattern {\n position: absolute;\n inset: 0;\n background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);\n background-size: 20px 20px;\n pointer-events: none;\n mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, black 25%, transparent 65%);\n -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, black 25%, transparent 65%);\n }\n\n /* ===== Responsive ===== */\n @media (max-width: 1024px) {\n .glass-card {\n transform: perspective(1200px) rotateY(-2deg) rotateX(1.5deg);\n }\n }\n @media (max-width: 768px) {\n .glass-card {\n transform: none;\n }\n .glass-card:hover {\n transform: translateY(-2px);\n }\n .orb {\n display: none;\n }\n }\n\n /* ===== Subtle Scroll-reveal Keyframes ===== */\n @keyframes fadeUp {\n from {\n opacity: 0;\n transform: translateY(24px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n .animate-fade-up {\n animation: fadeUp 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;\n opacity: 0;\n }\n .delay-100 { animation-delay: 0.1s; }\n .delay-200 { animation-delay: 0.2s; }\n .delay-300 { animation-delay: 0.3s; }\n .delay-400 { animation-delay: 0.4s; }\n .delay-500 { animation-delay: 0.5s; }\n </style>\n</head>\n<body>\n <section class=\"hero-bg relative min-h-screen flex items-center overflow-hidden\">\n <!-- Floating Orbs -->\n <div class=\"orb orb-1\"></div>\n <div class=\"orb orb-2\"></div>\n <div class=\"orb orb-3\"></div>\n\n <div class=\"relative z-10 w-full max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-20 lg:py-28\">\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center\">\n\n <!-- ========== LEFT COLUMN ========== -->\n <div class=\"space-y-8\">\n <!-- Badge -->\n <div class=\"animate-fade-up\">\n <span class=\"badge-pulse inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-semibold tracking-wide uppercase\"\n style=\"background: rgba(99,102,241,0.12); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.2);\">\n <span class=\"relative flex h-2 w-2\">\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-60\"></span>\n <span class=\"relative inline-flex rounded-full h-2 w-2 bg-indigo-400\"></span>\n </span>\n AI 驱动的智能效率引擎\n </span>\n </div>\n\n <!-- H1 Title -->\n <h1 class=\"animate-fade-up delay-100 font-display text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold leading-[1.08] tracking-tight\">\n <span class=\"title-gradient\">\n 用 AI 重新定义<br>团队生产力\n </span>\n </h1>\n\n <!-- Subtext -->\n <p class=\"animate-fade-up delay-200 text-base sm:text-lg lg:text-xl max-w-lg leading-relaxed\"\n style=\"color: rgba(255,255,255,0.55);\">\n NexusMind 将复杂工作流自动化，实时洞察团队效能，让每一次协作都精准高效。\n 已为 <strong class=\"font-semibold\" style=\"color: rgba(255,255,255,0.78);\">10,000+</strong> 企业带来可量化的效率跃升。\n </p>\n\n <!-- CTA Buttons -->\n <div class=\"animate-fade-up delay-300 flex flex-col sm:flex-row items-start sm:items-center gap-4 pt-2\">\n <button class=\"btn-primary cursor-pointer inline-flex items-center gap-2.5 px-8 py-4 rounded-xl text-white font-semibold text-base tracking-tight shadow-2xl\">\n 免费开始使用\n <i data-lucide=\"arrow-right\" class=\"w-5 h-5 transition-transform duration-300\" style=\"display:inline-block;\"></i>\n </button>\n <button class=\"btn-secondary cursor-pointer inline-flex items-center gap-2.5 px-7 py-4 rounded-xl font-semibold text-base tracking-tight transition-all\"\n style=\"color: rgba(255,255,255,0.8);\">\n <i data-lucide=\"play-circle\" class=\"w-5 h-5\" style=\"display:inline-block; color: #818cf8;\"></i>\n 观看演示\n </button>\n </div>\n\n <!-- Trust Signals -->\n <div class=\"animate-fade-up delay-400 flex items-center gap-6 pt-4\">\n <div class=\"flex items-center gap-2\">\n <div class=\"flex -space-x-2\">\n <div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white\" style=\"background: linear-gradient(135deg, #6366f1, #8b5cf6); border: 2px solid #06070b;\">J</div>\n <div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white\" style=\"background: linear-gradient(135deg, #06b6d4, #3b82f6); border: 2px solid #06070b;\">M</div>\n <div class=\"w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold text-white\" style=\"background: linear-gradient(135deg, #f59e0b, #ef4444); border: 2px solid #06070b;\">S</div>\n </div>\n <span class=\"text-sm\" style=\"color: rgba(255,255,255,0.45);\">\n <i data-lucide=\"star\" class=\"inline w-3.5 h-3.5\" style=\"color: #f59e0b; fill: #f59e0b;\"></i>\n 4.9 · G2 年度领导者\n </span>\n </div>\n <div class=\"w-px h-6\" style=\"background: rgba(255,255,255,0.08);\"></div>\n <div class=\"flex items-center gap-1.5 text-sm\" style=\"color: rgba(255,255,255,0.45);\">\n <i data-lucide=\"shield-check\" class=\"w-4 h-4\" style=\"color: #818cf8;\"></i>\n SOC 2 认证\n </div>\n </div>\n </div>\n\n <!-- ========== RIGHT COLUMN: Glass Dashboard ========== -->\n <div class=\"animate-fade-up delay-500 relative flex items-center justify-center\">\n <div class=\"glow-reflect\"></div>\n <div class=\"glass-card w-full max-w-[520px] p-5 sm:p-6\">\n <!-- Dashboard Header -->\n <div class=\"flex items-center justify-between mb-5\">\n <div>\n <span class=\"text-xs font-semibold uppercase tracking-widest\" style=\"color: rgba(255,255,255,0.4);\">效能总览</span>\n <h3 class=\"font-display text-lg sm:text-xl font-bold mt-0.5\" style=\"color: rgba(255,255,255,0.9);\">团队生产力指数</h3>\n </div>\n <div class=\"flex items-center gap-1.5\">\n <span class=\"w-2 h-2 rounded-full\" style=\"background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5);\"></span>\n <span class=\"text-xs font-medium\" style=\"color: #22c55e;\">实时</span>\n </div>\n </div>\n\n <!-- Metric Cards Row -->\n <div class=\"grid grid-cols-3 gap-3 mb-5\">\n <div class=\"metric-card p-3 text-center\">\n <span class=\"block text-2xl font-display font-extrabold\" style=\"color: rgba(255,255,255,0.9);\">+38<span class=\"text-base\" style=\"color: #22c55e;\">%</span></span>\n <span class=\"block text-[10px] uppercase tracking-wider mt-0.5\" style=\"color: rgba(255,255,255,0.35);\">任务完成</span>\n </div>\n <div class=\"metric-card p-3 text-center\">\n <span class=\"block text-2xl font-display font-extrabold\" style=\"color: rgba(255,255,255,0.9);\">2.4<span class=\"text-base\" style=\"color: #818cf8;\">x</span></span>\n <span class=\"block text-[10px] uppercase tracking-wider mt-0.5\" style=\"color: rgba(255,255,255,0.35);\">响应速度</span>\n </div>\n <div class=\"metric-card p-3 text-center\">\n <span class=\"block text-2xl font-display font-extrabold\" style=\"color: rgba(255,255,255,0.9);\">97<span class=\"text-base\" style=\"color: #a78bfa;\">%</span></span>\n <span class=\"block text-[10px] uppercase tracking-wider mt-0.5\" style=\"color: rgba(255,255,255,0.35);\">准确率</span>\n </div>\n </div>\n\n <!-- Growth Chart SVG -->\n <div class=\"relative rounded-xl overflow-hidden p-1\" style=\"background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);\">\n <div class=\"flex items-center justify-between px-3 pt-3 pb-1\">\n <span class=\"text-[11px] font-medium uppercase tracking-wider\" style=\"color: rgba(255,255,255,0.35);\">\n <i data-lucide=\"trending-up\" class=\"inline w-3.5 h-3.5 mr-1\" style=\"color: #818cf8;\"></i>30 天趋势\n </span>\n <span class=\"text-xs font-semibold\" style=\"color: #22c55e;\">+24.8% ↑</span>\n </div>\n <svg viewBox=\"0 0 460 180\" class=\"w-full\" preserveAspectRatio=\"xMidYMid meet\" style=\"overflow: visible;\">\n <defs>\n <linearGradient id=\"chartGradient\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#818cf8\" stop-opacity=\"0.35\" />\n <stop offset=\"40%\" stop-color=\"#6366f1\" stop-opacity=\"0.12\" />\n <stop offset=\"100%\" stop-color=\"#6366f1\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"lineGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#6366f1\" />\n <stop offset=\"50%\" stop-color=\"#818cf8\" />\n <stop offset=\"100%\" stop-color=\"#a78bfa\" />\n </linearGradient>\n </defs>\n\n <!-- Grid Lines -->\n <g opacity=\"0.06\">\n <line x1=\"0\" y1=\"36\" x2=\"460\" y2=\"36\" stroke=\"white\" stroke-width=\"0.5\" />\n <line x1=\"0\" y1=\"72\" x2=\"460\" y2=\"72\" stroke=\"white\" stroke-width=\"0.5\" />\n <line x1=\"0\" y1=\"108\" x2=\"460\" y2=\"108\" stroke=\"white\" stroke-width=\"0.5\" />\n <line x1=\"0\" y1=\"144\" x2=\"460\" y2=\"144\" stroke=\"white\" stroke-width=\"0.5\" />\n </g>\n\n <!-- Data Points (Area under curve) -->\n <path class=\"chart-area\"\n d=\"M0,155 C20,148 40,135 60,130 C80,122 100,118 120,110 C140,100 160,95 180,88 C200,78 220,72 240,68 C260,60 280,55 300,50 C320,42 340,38 360,35 C380,28 400,22 420,18 C440,14 450,12 460,10 L460,180 L0,180 Z\" />\n\n <!-- Glow Line (underneath) -->\n <path class=\"chart-glow-line\"\n d=\"M0,155 C20,148 40,135 60,130 C80,122 100,118 120,110 C140,100 160,95 180,88 C200,78 220,72 240,68 C260,60 280,55 300,50 C320,42 340,38 360,35 C380,28 400,22 420,18 C440,14 450,12 460,10\" />\n\n <!-- Main Line -->\n <path class=\"chart-line\"\n d=\"M0,155 C20,148 40,135 60,130 C80,122 100,118 120,110 C140,100 160,95 180,88 C200,78 220,72 240,68 C260,60 280,55 300,50 C320,42 340,38 360,35 C380,28 400,22 420,18 C440,14 450,12 460,10\" />\n\n <!-- Dot on latest point -->\n <circle cx=\"460\" cy=\"10\" r=\"5\" fill=\"#a78bfa\" stroke=\"#fff\" stroke-width=\"2\" style=\"filter: drop-shadow(0 0 8px rgba(167,139,250,0.7));\" />\n\n <!-- Small accent dots -->\n <circle cx=\"120\" cy=\"110\" r=\"2.5\" fill=\"#818cf8\" opacity=\"0.7\" />\n <circle cx=\"240\" cy=\"68\" r=\"2.5\" fill=\"#818cf8\" opacity=\"0.7\" />\n <circle cx=\"360\" cy=\"35\" r=\"2.5\" fill=\"#a78bfa\" opacity=\"0.7\" />\n </svg>\n\n <!-- X-axis labels -->\n <div class=\"flex justify-between px-3 pb-3\">\n <span class=\"text-[10px]\" style=\"color: rgba(255,255,255,0.2);\">4月5日</span>\n <span class=\"text-[10px]\" style=\"color: rgba(255,255,255,0.2);\">4月12日</span>\n <span class=\"text-[10px]\" style=\"color: rgba(255,255,255,0.2);\">4月19日</span>\n <span class=\"text-[10px]\" style=\"color: rgba(255,255,255,0.2);\">4月26日</span>\n <span class=\"text-[10px]\" style=\"color: rgba(255,255,255,0.35);\">今日</span>\n </div>\n </div>\n\n <!-- Bottom insight bar -->\n <div class=\"mt-4 flex items-center gap-3 px-1\">\n <div class=\"flex-1 h-1.5 rounded-full overflow-hidden\" style=\"background: rgba(255,255,255,0.06);\">\n <div class=\"h-full rounded-full transition-all duration-700\" style=\"width: 78%; background: linear-gradient(90deg, #6366f1, #818cf8, #a78bfa);\"></div>\n </div>\n <span class=\"text-xs font-semibold\" style=\"color: rgba(255,255,255,0.55);\">78% 目标达成</span>\n </div>\n </div>\n\n <!-- Floating mini-card decoration -->\n <div class=\"absolute -bottom-3 -right-2 hidden lg:flex items-center gap-2 px-3 py-2 rounded-xl shadow-2xl\"\n style=\"background: rgba(15,16,20,0.9); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(16px); z-index: 5;\">\n <div class=\"w-7 h-7 rounded-lg flex items-center justify-center\" style=\"background: rgba(34,197,94,0.15);\">\n <i data-lucide=\"zap\" class=\"w-4 h-4\" style=\"color: #22c55e;\"></i>\n </div>\n <div>\n <span class=\"block text-sm font-bold\" style=\"color: rgba(255,255,255,0.9);\">AI 优化建议</span>\n <span class=\"block text-[11px]\" style=\"color: rgba(255,255,255,0.4);\">3 项待处理</span>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </section>\n\n <script>\n // Initialize Lucide Icons\n lucide.createIcons();\n\n // Add arrow rotation on hover for primary CTA\n const primaryBtn = document.querySelector('.btn-primary');\n const arrowIcon = primaryBtn?.querySelector('[data-lucide=\"arrow-right\"]');\n if (primaryBtn && arrowIcon) {\n primaryBtn.addEventListener('mouseenter', () => {\n arrowIcon.style.transform = 'translateX(3px)';\n });\n primaryBtn.addEventListener('mouseleave', () => {\n arrowIcon.style.transform = 'translateX(0)';\n });\n }\n </script>\n</body>\n</html>"
},
"next": [
"增加导航栏组件",
"接入真实图表库",
"添加客户案例区",
"集成试用表单弹窗",
"补充滚动动画效果"
],
"breakpoint": "none"
}
```

total_tokens
13817
summary
为 B2B AI 效率工具 NexusMind 设计了深色模式极简主义 Hero 区域。左侧采用 Indigo 渐变标题、分层副文案、靛蓝主 CTA 与带 Lucide 图标的次按钮；右侧创建了高保真 3D 玻璃拟态仪表盘卡片，内含 SVG 增长曲线图、指标卡片和悬浮光晕，整体营造科技感与转化驱动力。
uiParsing
关闭