Mistral AI 暗色模式 B2B 工具 Hero 区块设计：3D 玻璃仪表盘与日落渐变

By admin, 5 May, 2026
推理
The user wants me to design a hero section for a B2B AI Productivity Tool with specific requirements:

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

But I must follow the Mistral AI design system for ALL visual choices. Let me reconcile:

The Mistral AI design system uses:
- Primary color: #fa520f (orange) - not indigo
- Cream/yellow/sunset palette
- PP Editorial Old for hero displays
- Inter for everything else

The user specifically asked for:
- Dark Mode
- Indigo CTA button
- Modern, minimalist

I need to follow the Mistral design system, but the user asked for indigo. Let me think about how to handle this... The instructions say "If the design system contradicts the user request, prefer the design system." So I should use the Mistral orange (#fa520f) as the primary CTA color, not indigo.

For dark mode, the Mistral system doesn't have a published dark-mode palette. I'll adapt using the `surface-code` (#1c1c1e) as the dark background, with `ink` and `on-dark` colors for text.

Let me also consider:
- The user wants Lucide Icons, but the system note says "仅使用 Font Awesome 图标". I need to use Font Awesome instead.
- I'll use a sunset-stripe band at the bottom per Mistral's signature element.

Let me now plan the design:

**Colors (adapted for dark mode from Mistral tokens):**
- Background: near `surface-code` #1c1c1e or darker
- Primary CTA: `#fa520f` (Mistral orange)
- Text: `on-dark` #ffffff, `on-dark-muted` #a8a8a8
- Card/surface: dark with glass effect
- Accent gradient: using the sunset tones (sunshine-700, primary, etc.)

**Typography:**
- Hero H1: PP Editorial Old, large size (adapting hero-display for dark mode)
- Body: Inter

**Layout:**
- Left/Right split
- Left: H1 with gradient accent (using sunset gradient as accent), subtext, orange CTA + secondary button
- Right: Glassmorphism dashboard widget

**Signature elements:**
- Sunset stripe band at bottom
- Editorial typography

Let me build this. I'll create a dark mode hero that adapts Mistral's design tokens.

For the 3D glassmorphism dashboard, I'll create a card with glass-like effects (backdrop-filter, semi-transparent backgrounds, subtle borders) showing a chart. I can use a simple SVG chart or canvas-based approach since I can't use external chart libraries easily without CDN. Let me use a simple SVG for the growth chart.

Let me also get assets for the dashboard mockup.

Actually, let me think about this more carefully. The user wants:
1. Dark mode - I'll use dark backgrounds
2. Indigo CTA - But I must use Mistral orange per the design system rules
3. 3D glassmorphism widget - I'll create this with CSS

Let me query for assets and time.

For the design system, the instruction says "Do NOT call get_design_system; the system below is authoritative." So I skip that.

Let me fetch some assets for the dashboard mockup.

Now let me code this up. I'll create:

**Background:** Dark (#0d0d0f or similar, close to surface-code but darker for hero impact)
**Hero H1:** Large PP Editorial Old with a gradient accent (sunset colors)
**CTA:** Orange (#fa520f) primary button
**Secondary:** Outlined white/dark button for "Watch Demo"
**Right side:** Glassmorphism card with a chart

For the 3D perspective/glassmorphism effect, I'll use:
- backdrop-filter: blur()
- Semi-transparent background
- Subtle border
- 3D transform with perspective
- Shadow/glow effects
- The chart can be an SVG line/area chart

Let me also include the sunset-stripe at the bottom.

For the dashboard widget, I'll create a mock with:
- A header bar
- Some metric cards
- A growth line chart (SVG)
- Glass morphism styling

Let me write the full HTML now.

I'll use Font Awesome for icons (per the rules), not Lucide.

Let me think about the font situation. PP Editorial Old is a commercial font. I'll use it in the font-family with appropriate fallbacks. For Google Fonts, I can use a similar editorial serif like "Cormorant Garamond" or "Playfair Display" as a reasonable substitute, but the design system says to never substitute. Let me use PP Editorial Old in the CSS and provide proper fallbacks.

Actually, looking more carefully at the design system: "PP Editorial Old (or similar near-serif) for hero displays." So I can use a similar near-serif. Let me use "Playfair Display" from Google Fonts as it has a similar editorial quality, or "Cormorant". Playfair Display is a good editorial serif that can approximate the PP Editorial Old feel.

Wait, actually the design system says: "PP Editorial Old (display): Mistral's signature near-serif elegant display typeface used for hero displays, large numbers, and editorial section openers. Carries a slightly classical, intelligent character that contrasts the contemporary product positioning. Fallbacks: 'Times New Roman', Georgia, serif."

So PP Editorial Old with Times New Roman/Georgia fallbacks. I should use PP Editorial Old as the primary font-family. Since it won't be available via Google Fonts, the browser will fall back to Georgia/Times New Roman. But that's not ideal for the design. Let me use "Playfair Display" from Google Fonts as an additional fallback before Times New Roman, since the system says "or similar near-serif."

Actually, the Don't section says: "Don't replace PP Editorial Old hero displays with Inter — the editorial / sans contrast IS the brand." But it doesn't say I can't use a similar serif. Let me use Playfair Display as a Google Fonts alternative that captures the editorial near-serif feel.

Let me now write the code. I'll use Tailwind CSS CDN with custom CSS for the glassmorphism and 3D effects.

Here's my plan:

```
- Dark background: #0a0a0c (deeper than surface-code for hero impact)
- Subtle gradient mesh in background
- Left column: H1 (Playfair Display, large) with a gradient accent line or text effect
- Subtitle in Inter
- Primary CTA: orange button
- Secondary: outlined
- Right: 3D glassmorphism card with:
- Dashboard header
- Stats row
- SVG area chart showing growth
- Perspective transform
- Sunset stripe at bottom
```

Let me also add some subtle particles or light effects for atmosphere.

Now for the growth chart, I'll create an SVG area chart with a gradient fill, showing upward trend.

Let me also add the "sunset stripe band" at the bottom of the hero section.

I need to be careful with the tailwind config. I'll need to extend it with custom colors from the Mistral palette.

Let me code this up now.

For the 3D glassmorphism effect, I'll use:
- `perspective` on parent
- `transform: rotateY(-5deg) rotateX(3deg)` on the card
- `backdrop-filter: blur(20px)`
- `background: rgba(255,255,255,0.03)`
- `border: 1px solid rgba(255,255,255,0.08)`
- Subtle box shadow/glow

This should create a nice 3D glass effect.

Now let me also think about the gradient accent for the H1. I can use a gradient text effect with the sunset colors: from sunshine-300 through primary to primary-deep. Or I could use a gradient underline/accent bar. The user said "gradient accent" - I'll do gradient text on a key word.

Let me finalize and write the code:

```html
<!DOCTYPE html>
<html lang="zh-CN">
...
```

I'll make it responsive. For mobile, the layout stacks vertically.

Let me also add some subtle animation - maybe a floating effect on the glass card and a subtle pulse on the CTA.

For Font Awesome, I'll use the CDN: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

OK let me write the complete code now.

For the chart, I'll use a simple SVG path showing growth with an area fill gradient, plus some data points. I'll also add some fake dashboard elements like metric cards within the glass widget.

Let me think about the structure:

```
<section class="hero">
<div class="container">
<div class="hero-grid">
<!-- LEFT -->
<div class="hero-content">
<badge>AI-Powered Productivity</badge>
<h1>Supercharge Your Workflow with <span class="gradient-text">AI Intelligence</span></h1>
<p>...</p>
<div class="cta-row">
<button-primary>Start Free Trial</button-primary>
<button-secondary><i class="fa-play"></i> Watch Demo</button-secondary>
</div>
<div class="social-proof">...</div>
</div>

<!-- RIGHT -->
<div class="hero-visual">
<div class="glass-card-3d">
<!-- dashboard mockup -->
<div class="dashboard-header">...</div>
<div class="dashboard-stats">...</div>
<div class="dashboard-chart">
<svg>...</svg>
</div>
</div>
</div>
</div>
</div>

<!-- Sunset stripe -->
<div class="sunset-stripe"></div>
</section>
```

Now let me refine all the details and write the full production code. I need to be careful about the dark mode aesthetic while maintaining the Mistral design tokens.

Let me also consider the background texture. For dark mode, I could use a subtle grid or dot pattern, maybe some radial gradients for atmosphere.

Let me finalize the dimensions:
- Hero min-height: ~100vh or close
- Container: max-width 1280px
- Left content: ~50% width
- Right visual: ~50% width

For mobile (< 768px): stack vertically, hero text scales down.

I should also think about what the "growth chart" looks like. I'll create an SVG area chart with:
- Grid lines (subtle)
- Area fill with gradient (sunset colors)
- Line path showing upward trend
- A few data points highlighted
- Maybe a tooltip-like element

And in the glass dashboard, I'll include:
- A top bar with "Dashboard" title and some controls
- A row of stat cards (Revenue, Users, etc.)
- The main chart

This will make it look like a real dashboard widget.

OK, I think I have a clear vision. Let me write it all out now.

One more thing - I need to handle the "3D" aspect. I can use CSS 3D transforms with perspective. The glass card will have:
- `transform: perspective(1200px) rotateY(-4deg) rotateX(2deg)`
- This creates a subtle 3D angle
- On hover, maybe intensify the effect

I'll also add some decorative elements like floating orbs/shapes behind the glass card for depth.

Let me now write the final code. I want this to be visually stunning.

Actually, for the background, I'll use a very dark canvas with subtle radial gradients to create atmospheric depth — similar to how Mistral uses photography for depth, but adapted for dark mode with light/shadow instead.

Here's my refined plan:

**Background layers:**
1. Base: #08080a (very dark)
2. Subtle radial gradient in the top-right (where the glass card is) - very faint warm glow
3. Optional: subtle grid pattern

**Left content:**
- Small badge: "🚀 AI-POWERED" — wait, no emojis. I'll use text only.
- Actually the rules say "无表情符号（Emoji）" so no emojis. Use a badge-cream style but adapted for dark.
- H1: Large, Playfair Display, with "AI Intelligence" in gradient
- Subtext: Inter, on-dark-muted
- CTA: button-primary (orange)
- Secondary: button-secondary style adapted for dark

**Right:**
- 3D glass card floating
- Internal dashboard with chart

Let me write it all now as valid JSON output.

One thing - I need to specify the breakpoint. The user didn't specify a device, so I'll default to desktop (none).

Actually, looking at the instructions: "判断当前用户要求生成的页面设备 {{breakpoint}} - xs: 移动端、小程序端、app应用、h5页面 - none: 默认"

Since it's a B2B tool and mentions desktop layout (left/right split), I'll use "none" for default/desktop.

Let me now produce the final output.
角色
assistant
content

```json{
"summary": "基于 Mistral AI 设计系统打造暗色模式 B2B AI 效率工具 Hero 区块。左侧使用 PP Editorial Old 风格标题配合日落橙渐变强调词、Inter 正文、Mistral Orange 主 CTA 与描边次按钮；右侧构建 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>Nexus AI — B2B Productivity</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700…\" rel=\"stylesheet\">\n <style>\n :root {\n --primary: #fa520f;\n --primary-deep: #cc3a05;\n --sunshine-300: #ffd06a;\n --sunshine-500: #ffb83e;\n --sunshine-700: #ffa110;\n --sunshine-900: #ff8a00;\n --yellow-saturated: #ffd900;\n --cream: #fff8e0;\n --ink: #1f1f1f;\n --on-dark: #ffffff;\n --on-dark-muted: #a8a8a8;\n --surface-code: #1c1c1e;\n --hairline-soft: rgba(255,255,255,0.06);\n --hairline-strong: rgba(255,255,255,0.12);\n --canvas-dark: #08080b;\n }\n\n * { box-sizing: border-box; }\n\n body {\n margin: 0;\n padding: 0;\n background: var(--canvas-dark);\n font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n /* Ambient background glow */\n .hero-bg {\n position: relative;\n background: var(--canvas-dark);\n min-height: 100vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n }\n\n .hero-bg::before {\n content: '';\n position: absolute;\n top: -40%;\n right: -25%;\n width: 900px;\n height: 900px;\n background: radial-gradient(ellipse at center, rgba(250, 82, 15, 0.07) 0%, rgba(255, 161, 16, 0.03) 40%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n animation: ambientPulse 8s ease-in-out infinite;\n }\n\n .hero-bg::after {\n content: '';\n position: absolute;\n bottom: -30%;\n left: -20%;\n width: 700px;\n height: 700px;\n background: radial-gradient(ellipse at center, rgba(255, 184, 62, 0.05) 0%, rgba(255, 208, 106, 0.02) 40%, transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n animation: ambientPulse 10s ease-in-out 3s infinite;\n }\n\n @keyframes ambientPulse {\n 0%, 100% { opacity: 0.6; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.12); }\n }\n\n /* Grid texture overlay */\n .grid-texture {\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 at 70% 40%, black 30%, transparent 70%);\n -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 30%, transparent 70%);\n }\n\n /* Gradient text */\n .gradient-text {\n background: linear-gradient(135deg, var(--sunshine-300) 0%, var(--sunshine-700) 40%, var(--primary) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* 3D Glass Card */\n .glass-3d-scene {\n perspective: 1400px;\n transform-style: preserve-3d;\n }\n\n .glass-3d-card {\n position: relative;\n background: linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.015) 40%, rgba(255,255,255,0.03) 100%);\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 16px;\n transform: rotateY(-4deg) rotateX(3deg) translateZ(0);\n transform-style: preserve-3d;\n box-shadow:\n 0px 24px 64px -16px rgba(0,0,0,0.5),\n 0px 8px 20px -8px rgba(250,82,15,0.08),\n inset 0px 1px 0px rgba(255,255,255,0.04);\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n animation: floatCard 7s ease-in-out infinite;\n }\n\n .glass-3d-card:hover {\n transform: rotateY(-2deg) rotateX(1deg) translateZ(10px);\n box-shadow:\n 0px 32px 80px -20px rgba(0,0,0,0.55),\n 0px 12px 28px -8px rgba(250,82,15,0.12),\n inset 0px 1px 0px rgba(255,255,255,0.06);\n }\n\n @keyframes floatCard {\n 0%, 100% { transform: rotateY(-4deg) rotateX(3deg) translateY(0); }\n 50% { transform: rotateY(-4deg) rotateX(3deg) translateY(-8px); }\n }\n\n /* Glass card inner glow line */\n .glass-3d-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 20px;\n right: 20px;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), rgba(255,161,16,0.2), rgba(255,255,255,0.12), transparent);\n border-radius: 1px;\n }\n\n /* Dashboard glow accent */\n .glow-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #22c55e;\n box-shadow: 0 0 12px #22c55e, 0 0 24px rgba(34,197,94,0.4);\n animation: glowPulse 2.5s ease-in-out infinite;\n }\n\n @keyframes glowPulse {\n 0%, 100% { box-shadow: 0 0 12px #22c55e, 0 0 24px rgba(34,197,94,0.4); }\n 50% { box-shadow: 0 0 18px #22c55e, 0 0 36px rgba(34,197,94,0.6); }\n }\n\n /* Chart area animation */\n .chart-area {\n animation: chartReveal 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;\n clip-path: inset(0 0 100% 0);\n }\n\n @keyframes chartReveal {\n to { clip-path: inset(0 0 0% 0); }\n }\n\n .chart-line {\n stroke-dasharray: 600;\n stroke-dashoffset: 600;\n animation: lineDraw 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;\n }\n\n @keyframes lineDraw {\n to { stroke-dashoffset: 0; }\n }\n\n .dot-pop {\n opacity: 0;\n transform: scale(0);\n animation: dotPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n }\n .dot-pop:nth-child(1) { animation-delay: 0.8s; }\n .dot-pop:nth-child(2) { animation-delay: 1.0s; }\n .dot-pop:nth-child(3) { animation-delay: 1.2s; }\n .dot-pop:nth-child(4) { animation-delay: 1.4s; }\n .dot-pop:nth-child(5) { animation-delay: 1.6s; }\n\n @keyframes dotPop {\n to { opacity: 1; transform: scale(1); }\n }\n\n /* CTA Pulse ring */\n .cta-pulse-ring {\n animation: ctaRing 2.5s ease-out infinite;\n }\n @keyframes ctaRing {\n 0% { box-shadow: 0 0 0 0 rgba(250, 82, 15, 0.5); }\n 70% { box-shadow: 0 0 0 16px rgba(250, 82, 15, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(250, 82, 15, 0); }\n }\n\n /* Sunset stripe */\n .sunset-stripe {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 6px;\n background: linear-gradient(90deg, var(--primary) 0%, var(--sunshine-700) 25%, var(--sunshine-500) 50%, var(--yellow-saturated) 75%, var(--cream) 100%);\n z-index: 10;\n }\n\n /* Stat mini-card inside dashboard */\n .stat-mini {\n background: rgba(255,255,255,0.025);\n border: 1px solid rgba(255,255,255,0.05);\n border-radius: 10px;\n padding: 14px 16px;\n transition: background 0.3s ease, border-color 0.3s ease;\n }\n .stat-mini:hover {\n background: rgba(255,255,255,0.05);\n border-color: rgba(255,255,255,0.1);\n }\n\n /* Scroll reveal */\n .fade-in-up {\n opacity: 0;\n transform: translateY(24px);\n animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;\n }\n .fade-in-up:nth-child(1) { animation-delay: 0.1s; }\n .fade-in-up:nth-child(2) { animation-delay: 0.2s; }\n .fade-in-up:nth-child(3) { animation-delay: 0.35s; }\n .fade-in-up:nth-child(4) { animation-delay: 0.5s; }\n\n @keyframes fadeInUp {\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* Responsive */\n @media (max-width: 1023px) {\n .glass-3d-card {\n transform: rotateY(-2deg) rotateX(2deg);\n }\n @keyframes floatCard {\n 0%, 100% { transform: rotateY(-2deg) rotateX(2deg) translateY(0); }\n 50% { transform: rotateY(-2deg) rotateX(2deg) translateY(-5px); }\n }\n }\n\n @media (max-width: 767px) {\n .glass-3d-card {\n transform: none;\n animation: none;\n }\n .glass-3d-card:hover {\n transform: none;\n }\n .hero-bg {\n min-height: auto;\n padding-top: 80px;\n padding-bottom: 60px;\n }\n }\n </style>\n</head>\n<body>\n <section class=\"hero-bg\">\n <!-- Grid texture -->\n <div class=\"grid-texture\"></div>\n\n <!-- Main container -->\n <div class=\"relative z-[2] w-full max-w-[1280px] mx-auto px-6 sm:px-8 lg:px-10 py-16 lg:py-24\">\n <div class=\"flex flex-col lg:flex-row items-center gap-12 lg:gap-16 xl:gap-24\">\n\n <!-- ===== LEFT: Content ===== -->\n <div class=\"flex-1 w-full lg:max-w-[540px]\">\n <!-- Badge -->\n <div class=\"fade-in-up inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[rgba(255,255,255,0.08)] bg-[rgba(255,255,255,0.02)] mb-8\">\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-semibold tracking-[0.08em] uppercase\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">AI-Powered Productivity</span>\n </div>\n\n <!-- H1 -->\n <h1 class=\"fade-in-up font-['Playfair_Display','PP_Editorial_Old','Times_New_Roman',Georgia,serif] text-[42px] sm:text-[52px] lg:text-[60px] xl:text-[72px] font-normal leading-[1.08] tracking-[-0.02em] text-white mb-6\">\n 用<span class=\"gradient-text\">AI 智能</span>重新定义<br/>团队生产力\n </h1>\n\n <!-- Subtext -->\n <p class=\"fade-in-up text-base sm:text-lg leading-relaxed mb-10 max-w-[460px]\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">\n 整合大语言模型、智能自动化与实时数据分析，为您的企业打造下一代工作流引擎。让每一个决策都更快、更精准。\n </p>\n\n <!-- CTA Row -->\n <div class=\"fade-in-up flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 mb-10\">\n <!-- Primary CTA -->\n <button\n class=\"cta-pulse-ring relative inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium text-white rounded-lg transition-all duration-200\"\n style=\"background: var(--primary); font-family: 'Inter', sans-serif; border-radius: 8px;\"\n onmousedown=\"this.style.background='var(--primary-deep)'\"\n onmouseup=\"this.style.background='var(--primary)'\"\n ontouchend=\"this.style.background='var(--primary)'\"\n >\n <i class=\"fa-solid fa-rocket text-xs\"></i>\n 免费开始使用\n <i class=\"fa-solid fa-arrow-right text-[10px] ml-1 transition-transform duration-300\" style=\"transform: translateX(0);\"></i>\n </button>\n\n <!-- Secondary: Watch Demo -->\n <button\n class=\"inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-medium rounded-lg transition-all duration-200\"\n style=\"background: transparent; color: #ffffff; border: 1px solid var(--hairline-strong); font-family: 'Inter', sans-serif; border-radius: 8px;\"\n onmouseenter=\"this.style.borderColor='rgba(255,255,255,0.25)'; this.style.background='rgba(255,255,255,0.03)'\"\n onmouseleave=\"this.style.borderColor='rgba(255,255,255,0.12)'; this.style.background='transparent'\"\n >\n <i class=\"fa-solid fa-circle-play text-sm\" style=\"color: var(--sunshine-500);\"></i>\n 观看演示\n </button>\n </div>\n\n <!-- Social Proof -->\n <div class=\"fade-in-up flex items-center gap-6 text-sm\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">\n <div class=\"flex items-center gap-2\">\n <div class=\"flex -space-x-2\">\n <div class=\"w-7 h-7 rounded-full bg-[#3d3d3d] border-2 border-[#08080b] flex items-center justify-center text-[10px] font-bold text-white\">JD</div>\n <div class=\"w-7 h-7 rounded-full bg-[#4a4a4a] border-2 border-[#08080b] flex items-center justify-center text-[10px] font-bold text-white\">AK</div>\n <div class=\"w-7 h-7 rounded-full bg-[#555] border-2 border-[#08080b] flex items-center justify-center text-[10px] font-bold text-white\">ML</div>\n </div>\n <span class=\"text-xs\"><strong class=\"text-white font-medium\">500+</strong> 团队已加入</span>\n </div>\n <div class=\"w-px h-4 bg-[rgba(255,255,255,0.1)]\"></div>\n <div class=\"flex items-center gap-1.5\">\n <i class=\"fa-solid fa-star text-[10px]\" style=\"color: var(--sunshine-500);\"></i>\n <i class=\"fa-solid fa-star text-[10px]\" style=\"color: var(--sunshine-500);\"></i>\n <i class=\"fa-solid fa-star text-[10px]\" style=\"color: var(--sunshine-500);\"></i>\n <i class=\"fa-solid fa-star text-[10px]\" style=\"color: var(--sunshine-500);\"></i>\n <i class=\"fa-solid fa-star-half-stroke text-[10px]\" style=\"color: var(--sunshine-500);\"></i>\n <span class=\"text-xs ml-1\">4.8 / 5</span>\n </div>\n </div>\n </div>\n\n <!-- ===== RIGHT: 3D Glass Dashboard ===== -->\n <div class=\"flex-1 w-full lg:max-w-[560px] xl:max-w-[620px]\">\n <div class=\"glass-3d-scene\">\n <div class=\"glass-3d-card p-5 sm:p-6\">\n <!-- Dashboard Header -->\n <div class=\"flex items-center justify-between mb-5\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 rounded-lg flex items-center justify-center\" style=\"background: rgba(250,82,15,0.15);\">\n <i class=\"fa-solid fa-chart-line text-sm\" style=\"color: var(--primary);\"></i>\n </div>\n <div>\n <div class=\"text-sm font-semibold text-white\" style=\"font-family: 'Inter', sans-serif;\">Nexus Analytics</div>\n <div class=\"text-[11px]\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">实时数据面板</div>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <div class=\"glow-dot\"></div>\n <span class=\"text-[11px] font-medium\" style=\"color: #22c55e; font-family: 'Inter', sans-serif;\">在线</span>\n <button class=\"w-7 h-7 rounded-md flex items-center justify-center transition-colors\" style=\"background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px;\">\n <i class=\"fa-solid fa-ellipsis text-[11px]\" style=\"color: var(--on-dark-muted);\"></i>\n </button>\n </div>\n </div>\n\n <!-- Mini Stats Row -->\n <div class=\"grid grid-cols-3 gap-3 mb-5\">\n <div class=\"stat-mini\">\n <div class=\"text-[10px] font-semibold uppercase tracking-wider mb-1\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">总收入</div>\n <div class=\"text-lg font-semibold text-white\" style=\"font-family: 'Inter', sans-serif;\">¥2.8M</div>\n <div class=\"flex items-center gap-1 mt-0.5\">\n <i class=\"fa-solid fa-arrow-trend-up text-[10px]\" style=\"color: #22c55e;\"></i>\n <span class=\"text-[11px] font-medium\" style=\"color: #22c55e;\">+18.2%</span>\n </div>\n </div>\n <div class=\"stat-mini\">\n <div class=\"text-[10px] font-semibold uppercase tracking-wider mb-1\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">活跃用户</div>\n <div class=\"text-lg font-semibold text-white\" style=\"font-family: 'Inter', sans-serif;\">12,847</div>\n <div class=\"flex items-center gap-1 mt-0.5\">\n <i class=\"fa-solid fa-arrow-trend-up text-[10px]\" style=\"color: #22c55e;\"></i>\n <span class=\"text-[11px] font-medium\" style=\"color: #22c55e;\">+7.4%</span>\n </div>\n </div>\n <div class=\"stat-mini\">\n <div class=\"text-[10px] font-semibold uppercase tracking-wider mb-1\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">转化率</div>\n <div class=\"text-lg font-semibold text-white\" style=\"font-family: 'Inter', sans-serif;\">6.8%</div>\n <div class=\"flex items-center gap-1 mt-0.5\">\n <i class=\"fa-solid fa-arrow-trend-up text-[10px]\" style=\"color: #22c55e;\"></i>\n <span class=\"text-[11px] font-medium\" style=\"color: #22c55e;\">+2.1%</span>\n </div>\n </div>\n </div>\n\n <!-- Chart -->\n <div class=\"relative\">\n <div class=\"flex items-center justify-between mb-3\">\n <span class=\"text-xs font-medium text-white\" style=\"font-family: 'Inter', sans-serif;\">\n <i class=\"fa-solid fa-chart-simple mr-1.5\" style=\"color: var(--sunshine-500);\"></i>季度增长趋势\n </span>\n <div class=\"flex items-center gap-3 text-[10px]\" style=\"color: var(--on-dark-muted);\">\n <span class=\"flex items-center gap-1\"><span class=\"w-2 h-2 rounded-full\" style=\"background: var(--primary);\"></span>收入</span>\n <span class=\"flex items-center gap-1\"><span class=\"w-2 h-2 rounded-full\" style=\"background: var(--sunshine-500);\"></span>用户</span>\n </div>\n </div>\n\n <!-- SVG Chart -->\n <div class=\"chart-area relative w-full\" style=\"height: 200px;\">\n <svg viewBox=\"0 0 500 200\" class=\"w-full h-full\" preserveAspectRatio=\"none\">\n <defs>\n <linearGradient id=\"areaGrad\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#fa520f\" stop-opacity=\"0.25\" />\n <stop offset=\"50%\" stop-color=\"#ffa110\" stop-opacity=\"0.06\" />\n <stop offset=\"100%\" stop-color=\"#fa520f\" stop-opacity=\"0\" />\n </linearGradient>\n <linearGradient id=\"areaGrad2\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n <stop offset=\"0%\" stop-color=\"#ffb83e\" stop-opacity=\"0.18\" />\n <stop offset=\"50%\" stop-color=\"#ffb83e\" stop-opacity=\"0.04\" />\n <stop offset=\"100%\" stop-color=\"#ffb83e\" stop-opacity=\"0\" />\n </linearGradient>\n <filter id=\"glow\">\n <feGaussianBlur stdDeviation=\"3\" result=\"blur\" />\n <feMerge><feMergeNode in=\"blur\" /><feMergeNode in=\"SourceGraphic\" /></feMerge>\n </filter>\n </defs>\n\n <!-- Grid lines -->\n <line x1=\"0\" y1=\"160\" x2=\"500\" y2=\"160\" stroke=\"rgba(255,255,255,0.04)\" stroke-width=\"1\" />\n <line x1=\"0\" y1=\"120\" x2=\"500\" y2=\"120\" stroke=\"rgba(255,255,255,0.04)\" stroke-width=\"1\" />\n <line x1=\"0\" y1=\"80\" x2=\"500\" y2=\"80\" stroke=\"rgba(255,255,255,0.04)\" stroke-width=\"1\" />\n <line x1=\"0\" y1=\"40\" x2=\"500\" y2=\"40\" stroke=\"rgba(255,255,255,0.04)\" stroke-width=\"1\" />\n\n <!-- Area fill - Revenue -->\n <path\n d=\"M0,170 L55,155 L110,148 L165,132 L220,118 L275,100 L330,82 L385,62 L440,48 L500,32 L500,200 L0,200 Z\"\n fill=\"url(#areaGrad)\"\n class=\"chart-area\"\n />\n <!-- Area fill - Users -->\n <path\n d=\"M0,175 L55,162 L110,155 L165,140 L220,130 L275,115 L330,100 L385,82 L440,68 L500,55 L500,200 L0,200 Z\"\n fill=\"url(#areaGrad2)\"\n class=\"chart-area\"\n />\n\n <!-- Revenue Line -->\n <path\n d=\"M0,170 L55,155 L110,148 L165,132 L220,118 L275,100 L330,82 L385,62 L440,48 L500,32\"\n fill=\"none\"\n stroke=\"#fa520f\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"chart-line\"\n filter=\"url(#glow)\"\n />\n\n <!-- Users Line -->\n <path\n d=\"M0,175 L55,162 L110,155 L165,140 L220,130 L275,115 L330,100 L385,82 L440,68 L500,55\"\n fill=\"none\"\n stroke=\"#ffb83e\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-dasharray=\"8 4\"\n class=\"chart-line\"\n />\n\n <!-- Data dots - Revenue -->\n <circle cx=\"55\" cy=\"155\" r=\"5\" fill=\"#08080b\" stroke=\"#fa520f\" stroke-width=\"2.5\" class=\"dot-pop\" />\n <circle cx=\"165\" cy=\"132\" r=\"5\" fill=\"#08080b\" stroke=\"#fa520f\" stroke-width=\"2.5\" class=\"dot-pop\" />\n <circle cx=\"275\" cy=\"100\" r=\"5\" fill=\"#08080b\" stroke=\"#fa520f\" stroke-width=\"2.5\" class=\"dot-pop\" />\n <circle cx=\"385\" cy=\"62\" r=\"5\" fill=\"#08080b\" stroke=\"#fa520f\" stroke-width=\"2.5\" class=\"dot-pop\" />\n <circle cx=\"500\" cy=\"32\" r=\"6\" fill=\"#fa520f\" stroke=\"#08080b\" stroke-width=\"2\" class=\"dot-pop\" filter=\"url(#glow)\" />\n\n <!-- Data dots - Users -->\n <circle cx=\"110\" cy=\"155\" r=\"4\" fill=\"#08080b\" stroke=\"#ffb83e\" stroke-width=\"2\" class=\"dot-pop\" />\n <circle cx=\"220\" cy=\"130\" r=\"4\" fill=\"#08080b\" stroke=\"#ffb83e\" stroke-width=\"2\" class=\"dot-pop\" />\n <circle cx=\"330\" cy=\"100\" r=\"4\" fill=\"#08080b\" stroke=\"#ffb83e\" stroke-width=\"2\" class=\"dot-pop\" />\n <circle cx=\"440\" cy=\"68\" r=\"4\" fill=\"#08080b\" stroke=\"#ffb83e\" stroke-width=\"2\" class=\"dot-pop\" />\n </svg>\n\n <!-- Tooltip badge -->\n <div class=\"absolute top-2 right-4 px-3 py-1.5 rounded-md text-xs font-semibold text-white\" style=\"background: rgba(250,82,15,0.2); border: 1px solid rgba(250,82,15,0.3); border-radius: 8px; font-family: 'Inter', sans-serif; animation: dotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) 1.8s forwards; opacity: 0; transform: scale(0);\">\n <i class=\"fa-solid fa-bolt mr-1\" style=\"color: var(--sunshine-500);\"></i>本月最高 +32%\n </div>\n </div>\n\n <!-- Time labels -->\n <div class=\"flex justify-between mt-2 text-[10px]\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">\n <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Q5</span><span>Q6</span>\n </div>\n </div>\n\n <!-- Bottom bar -->\n <div class=\"flex items-center justify-between mt-5 pt-4\" style=\"border-top: 1px solid rgba(255,255,255,0.05);\">\n <div class=\"flex items-center gap-2 text-[11px]\" style=\"color: var(--on-dark-muted); font-family: 'Inter', sans-serif;\">\n <i class=\"fa-solid fa-clock\"></i>\n 最后更新: 2 分钟前\n </div>\n <button class=\"text-[11px] font-medium flex items-center gap-1 transition-colors\" style=\"color: var(--primary); font-family: 'Inter', sans-serif;\">\n 查看完整报告 <i class=\"fa-solid fa-chevron-right text-[9px]\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <!-- Sunset Stripe Band (Mistral Signature) -->\n <div class=\"sunset-stripe\"></div>\n </section>\n\n <!-- Subtle JS for interactive polish -->\n <script>\n // Button arrow animation on hover\n document.querySelectorAll('button').forEach(btn => {\n const arrow = btn.querySelector('.fa-arrow-right');\n if (!arrow) return;\n btn.addEventListener('mouseenter', () => {\n arrow.style.transform = 'translateX(4px)';\n });\n btn.addEventListener('mouseleave', () => {\n arrow.style.transform = 'translateX(0)';\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["深色导航栏组件", "客户案例 Logo 墙", "功能特性卡片网格", "定价方案对比表", "页脚 CTA 区域"],
"breakpoint": "none"
}
```

total_tokens
25902
summary
基于 Mistral AI 设计系统打造暗色模式 B2B AI 效率工具 Hero 区块。左侧使用 PP Editorial Old 风格标题配合日落橙渐变强调词、Inter 正文、Mistral Orange 主 CTA 与描边次按钮；右侧构建 3D 玻璃拟态仪表盘卡片，内含统计指标与 SVG 面积增长图表。底部加入品牌标志性日落条纹带，整体营造现代、高级、科技感的暗色氛围。
uiParsing
关闭