明白了，您要的是一个**网站设计/开发案例展示**，展示的是一个网站项目的案例内容，而非建筑类。我来重新构思。现在我来生成真正展示**网站项目案例**的模块。
```json{
"summary": "完全重新设计，左侧大图使用 business-03.png 网站仪表盘界面截图，右侧展示网站开发案例内容。标题为「NovaFlow · 智能数据平台」，包含项目简介、技术栈标签（React/Node.js/TailwindCSS/PostgreSQL）、三项关键指标（页面加载提升65%/月活8.2万/客户好评率4.9）和CTA。整体深色科技风，紫色+蓝色渐变点缀，字体搭配优雅。",
"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>网站案例展示</title>\n <script src=\"https://cdn.tailwindcss.com\">\n </script>\n <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;70…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --accent-1: #7c3aed;\n --accent-2: #3b82f6;\n --accent-gradient: linear-gradient(135deg, #7c3aed, #3b82f6);\n --glow-purple: rgba(124, 58, 237, 0.12);\n --glow-blue: rgba(59, 130, 246, 0.08);\n --bg-dark: #08080f;\n --bg-card: #0d0d1a;\n --bg-surface: #12122a;\n --text-primary: #f0f0f8;\n --text-secondary: #9898b8;\n --text-muted: #5c5c7a;\n --border-subtle: rgba(124, 58, 237, 0.12);\n --tag-bg: rgba(124, 58, 237, 0.08);\n --tag-border: rgba(124, 58, 237, 0.18);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Plus Jakarta Sans', sans-serif;\n background: var(--bg-dark);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem 1.5rem;\n position: relative;\n background-image:\n radial-gradient(ellipse 600px 400px at 15% 60%, rgba(124, 58, 237, 0.04), transparent),\n radial-gradient(ellipse 500px 350px at 80% 40%, rgba(59, 130, 246, 0.03), transparent),\n radial-gradient(ellipse 200px 200px at 50% 0%, rgba(124, 58, 237, 0.02), transparent);\n }\n\n /* 网格纹理装饰 */\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background-image:\n linear-gradient(rgba(124, 58, 237, 0.02) 1px, transparent 1px),\n linear-gradient(90deg, rgba(124, 58, 237, 0.02) 1px, transparent 1px);\n background-size: 60px 60px;\n pointer-events: none;\n z-index: 0;\n }\n\n .case-wrapper {\n width: 100%;\n max-width: 1280px;\n position: relative;\n z-index: 1;\n }\n\n /* 装饰性光晕 */\n .case-wrapper::before {\n content: '';\n position: absolute;\n top: -60px;\n right: -40px;\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, rgba(124, 58, 237, 0.06), transparent 70%);\n border-radius: 50%;\n pointer-events: none;\n z-index: 0;\n }\n\n .case-container {\n display: flex;\n background: var(--bg-card);\n border-radius: 24px;\n overflow: hidden;\n position: relative;\n box-shadow:\n 0 40px 100px rgba(0, 0, 0, 0.7),\n 0 0 0 1px rgba(124, 58, 237, 0.06);\n border: 1px solid rgba(255, 255, 255, 0.03);\n }\n\n /* ===== 左侧图片区 ===== */\n .case-image-wrap {\n flex: 0 0 55%;\n max-width: 55%;\n position: relative;\n overflow: hidden;\n min-height: 540px;\n }\n\n .case-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.8s ease;\n will-change: transform;\n filter: saturate(1.05) brightness(1.02);\n }\n\n .case-image-wrap:hover .case-image {\n transform: scale(1.05);\n }\n\n /* 图片渐变遮罩 - 从右到左 */\n .case-image-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n to right,\n rgba(13, 13, 26, 0.93) 0%,\n rgba(13, 13, 26, 0.40) 35%,\n rgba(13, 13, 26, 0.05) 70%,\n transparent 100%\n );\n z-index: 2;\n pointer-events: none;\n }\n\n /* 图片底部柔光 */\n .case-image-glow {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100px;\n background: linear-gradient(to top, rgba(13, 13, 26, 0.6), transparent);\n z-index: 2;\n pointer-events: none;\n }\n\n /* 图片上的状态标签 */\n .image-badge {\n position: absolute;\n bottom: 30px;\n left: 30px;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: 10px;\n background: rgba(0, 0, 0, 0.6);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border: 1px solid rgba(255, 255, 255, 0.06);\n padding: 10px 20px 10px 16px;\n border-radius: 100px;\n color: var(--text-primary);\n font-size: 0.72rem;\n font-weight: 500;\n letter-spacing: 0.04em;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.4s ease-out forwards;\n }\n .image-badge .badge-dot {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: var(--accent-gradient);\n font-size: 0.5rem;\n color: #fff;\n box-shadow: 0 0 20px rgba(124, 58, 237, 0.25);\n }\n .image-badge .badge-dot i {\n font-size: 0.5rem;\n }\n .image-badge span:not(.badge-dot) {\n color: rgba(255, 255, 255, 0.8);\n }\n .image-badge .highlight {\n color: #a78bfa;\n font-weight: 600;\n }\n\n /* 图片左上角装饰线 */\n .image-corner-line {\n position: absolute;\n top: 28px;\n left: 28px;\n z-index: 3;\n width: 40px;\n height: 1.5px;\n background: linear-gradient(90deg, rgba(124, 58, 237, 0.5), transparent);\n opacity: 0;\n animation: fadeSlideUp 0.6s 0.15s ease-out forwards;\n }\n\n /* ===== 右侧内容区 ===== */\n .case-content {\n flex: 1;\n padding: 3.2rem 3.5rem 3.2rem 3rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n z-index: 3;\n }\n\n /* 标签 */\n .case-tag {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n font-size: 0.68rem;\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: #a78bfa;\n margin-bottom: 1rem;\n opacity: 0;\n animation: fadeSlideUp 0.7s 0.1s ease-out forwards;\n }\n .case-tag::before {\n content: '';\n display: inline-block;\n width: 24px;\n height: 1.5px;\n background: linear-gradient(90deg, #7c3aed, transparent);\n margin-right: 4px;\n }\n\n /* 标题 */\n .case-title {\n font-family: 'Outfit', sans-serif;\n font-size: clamp(2rem, 3vw, 3rem);\n font-weight: 700;\n line-height: 1.12;\n color: var(--text-primary);\n margin-bottom: 0.6rem;\n letter-spacing: -0.02em;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.2s ease-out forwards;\n }\n .case-title .accent-text {\n background: var(--accent-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-weight: 800;\n }\n\n /* 副标题/项目角色 */\n .case-subtitle {\n font-size: 0.85rem;\n font-weight: 400;\n color: var(--text-muted);\n margin-bottom: 1.4rem;\n letter-spacing: 0.02em;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.25s ease-out forwards;\n }\n .case-subtitle i {\n color: #7c3aed;\n margin: 0 6px;\n font-size: 0.4rem;\n opacity: 0.6;\n }\n\n /* 分隔线 */\n .case-divider {\n width: 50px;\n height: 2px;\n background: linear-gradient(90deg, #7c3aed, #3b82f6, transparent);\n margin-bottom: 1.2rem;\n border-radius: 2px;\n opacity: 0;\n animation: fadeSlideUp 0.6s 0.35s ease-out forwards;\n }\n\n /* 描述 */\n .case-desc {\n font-size: 0.9rem;\n line-height: 1.75;\n color: var(--text-secondary);\n font-weight: 300;\n margin-bottom: 1.6rem;\n max-width: 440px;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.35s ease-out forwards;\n }\n\n /* 技术栈标签 */\n .case-tech {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 2rem;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.5s ease-out forwards;\n }\n .tech-tag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n background: var(--tag-bg);\n border: 1px solid var(--tag-border);\n border-radius: 100px;\n font-size: 0.7rem;\n font-weight: 500;\n color: rgba(167, 139, 250, 0.9);\n letter-spacing: 0.02em;\n transition: all 0.3s ease;\n }\n .tech-tag i {\n font-size: 0.65rem;\n color: #7c3aed;\n }\n .tech-tag:hover {\n background: rgba(124, 58, 237, 0.15);\n border-color: rgba(124, 58, 237, 0.35);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);\n }\n\n /* 数据指标 - 横向排列 */\n .case-stats {\n display: flex;\n gap: 2.2rem;\n margin-bottom: 2rem;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.6s ease-out forwards;\n }\n .stat-item {\n text-align: left;\n }\n .stat-number {\n font-family: 'Outfit', sans-serif;\n font-size: 2rem;\n font-weight: 700;\n color: var(--text-primary);\n line-height: 1;\n display: flex;\n align-items: baseline;\n gap: 2px;\n }\n .stat-number .suffix {\n font-size: 0.85rem;\n font-weight: 500;\n background: var(--accent-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .stat-label {\n font-size: 0.72rem;\n color: var(--text-muted);\n font-weight: 400;\n margin-top: 5px;\n letter-spacing: 0.02em;\n }\n\n /* CTA 按钮 */\n .case-cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 34px;\n background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(59, 130, 246, 0.08));\n color: var(--text-primary);\n font-size: 0.78rem;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-decoration: none;\n border: 1.5px solid rgba(124, 58, 237, 0.25);\n border-radius: 100px;\n position: relative;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: pointer;\n opacity: 0;\n animation: fadeSlideUp 0.8s 0.75s ease-out forwards;\n width: fit-content;\n }\n .case-cta::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, #7c3aed, #3b82f6);\n opacity: 0;\n transition: opacity 0.45s ease;\n border-radius: 100px;\n }\n .case-cta:hover {\n border-color: transparent;\n transform: translateY(-3px);\n box-shadow: 0 16px 40px rgba(124, 58, 237, 0.2);\n }\n .case-cta:hover::before {\n opacity: 1;\n }\n .case-cta span,\n .case-cta i {\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n .case-cta:hover i {\n transform: translateX(5px);\n }\n .case-cta i {\n font-size: 0.7rem;\n transition: transform 0.3s ease;\n }\n\n /* 动画 */\n @keyframes fadeSlideUp {\n 0% {\n opacity: 0;\n transform: translateY(22px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* 图片入场动画 */\n .case-image {\n opacity: 0;\n animation: imageReveal 1.4s 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;\n }\n @keyframes imageReveal {\n 0% {\n opacity: 0;\n transform: scale(1.1);\n filter: blur(6px);\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n filter: blur(0);\n }\n }\n\n /* 脉冲光点 */\n @keyframes pulse-glow {\n 0%, 100% { opacity: 0.4; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.1); }\n }\n\n /* ===== 响应式 ===== */\n @media (max-width: 1100px) {\n .case-content {\n padding: 2.5rem 2.5rem 2.5rem 2rem;\n }\n .case-tech {\n gap: 6px;\n }\n .tech-tag {\n padding: 5px 12px;\n font-size: 0.65rem;\n }\n .case-stats {\n gap: 1.8rem;\n }\n .stat-number {\n font-size: 1.7rem;\n }\n }\n\n @media (max-width: 900px) {\n .case-image-wrap {\n flex: 0 0 50%;\n max-width: 50%;\n min-height: 480px;\n }\n .case-content {\n padding: 2rem 2rem;\n }\n .case-stats {\n gap: 1.5rem;\n flex-wrap: wrap;\n }\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .case-container {\n flex-direction: column;\n border-radius: 18px;\n }\n\n .case-image-wrap {\n flex: 0 0 340px;\n max-width: 100%;\n min-height: 340px;\n }\n\n .case-image-overlay {\n background: linear-gradient(\n to bottom,\n rgba(13, 13, 26, 0.15) 0%,\n rgba(13, 13, 26, 0.85) 100%\n );\n }\n\n .case-content {\n padding: 2rem 1.8rem 2.5rem;\n margin-top: -30px;\n }\n\n .case-title {\n font-size: 1.8rem;\n }\n\n .case-stats {\n gap: 1.5rem;\n }\n\n .image-badge {\n bottom: 20px;\n left: 20px;\n font-size: 0.65rem;\n padding: 8px 16px 8px 12px;\n }\n\n .image-corner-line {\n display: none;\n }\n\n .case-cta {\n width: 100%;\n justify-content: center;\n }\n }\n\n @media (max-width: 480px) {\n .case-image-wrap {\n flex: 0 0 280px;\n min-height: 280px;\n }\n .case-content {\n padding: 1.5rem 1.2rem 2rem;\n }\n .case-title {\n font-size: 1.5rem;\n }\n .case-desc {\n font-size: 0.82rem;\n }\n .stat-number {\n font-size: 1.4rem;\n }\n .case-stats {\n gap: 1rem;\n }\n .tech-tag {\n font-size: 0.6rem;\n padding: 4px 10px;\n }\n }\n\n img {\n display: block;\n }\n\n ::-webkit-scrollbar {\n width: 4px;\n }\n ::-webkit-scrollbar-track {\n background: var(--bg-dark);\n }\n ::-webkit-scrollbar-thumb {\n background: #4c1d95;\n border-radius: 10px;\n }\n </style>\n</head>\n<body>\n\n <div class=\"case-wrapper\">\n <div class=\"case-container\">\n\n <!-- ====== 左侧大图 ====== -->\n <div class=\"case-image-wrap\">\n <img\n class=\"case-image\"\n src=\"/assets/images/1-1/business-03.png\"\n alt=\"NovaFlow 智能数据平台网站界面\"\n loading=\"lazy\"\n />\n <div class=\"case-image-overlay\"></div>\n <div class=\"case-image-glow\"></div>\n\n <!-- 左上装饰线 -->\n <div class=\"image-corner-line\"></div>\n\n <!-- 图片底部标签 -->\n <div class=\"image-badge\">\n <span class=\"badge-dot\">\n <i class=\"fa-solid fa-star\"></i>\n </span>\n <span>Featured Project</span>\n <span style=\"width:3px;height:3px;background:rgba(255,255,255,0.2);border-radius:50%;display:inline-block;\"></span>\n <span class=\"highlight\">2024 年度精选</span>\n </div>\n </div>\n\n <!-- ====== 右侧内容 ====== -->\n <div class=\"case-content\">\n\n <!-- 标签 -->\n <div class=\"case-tag\">\n <span>网站案例 · 全栈开发</span>\n </div>\n\n <!-- 标题 -->\n <h2 class=\"case-title\">\n NovaFlow\n <span class=\"accent-text\">智能数据平台</span>\n </h2>\n\n <!-- 副标题 -->\n <div class=\"case-subtitle\">\n <i class=\"fa-regular fa-circle\"></i>\n 为现代企业打造的一站式数据分析中枢\n </div>\n\n <!-- 分隔线 -->\n <div class=\"case-divider\"></div>\n\n <!-- 描述 -->\n <p class=\"case-desc\">\n 从零构建的 SaaS 级数据可视化平台，涵盖实时仪表盘、\n <br class=\"hidden md:block\"/>\n 智能报表与协同看板。深度优化的前端架构与响应式设计，\n <br class=\"hidden md:block\"/>\n 服务于 200+ 企业客户的日常数据决策场景。\n </p>\n\n <!-- 技术栈 -->\n <div class=\"case-tech\">\n <span class=\"tech-tag\"><i class=\"fa-brands fa-react\"></i> React 18</span>\n <span class=\"tech-tag\"><i class=\"fa-brands fa-node-js\"></i> Node.js</span>\n <span class=\"tech-tag\"><i class=\"fa-brands fa-css3-alt\"></i> TailwindCSS</span>\n <span class=\"tech-tag\"><i class=\"fa-solid fa-database\"></i> PostgreSQL</span>\n </div>\n\n <!-- 数据指标 -->\n <div class=\"case-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-number\">\n 65<span class=\"suffix\">%</span>\n </div>\n <div class=\"stat-label\">页面加载提升</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">\n 8.2<span class=\"suffix\">万</span>\n </div>\n <div class=\"stat-label\">月活跃用户</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">\n 4.9<span class=\"suffix\">/5.0</span>\n </div>\n <div class=\"stat-label\">客户好评率</div>\n </div>\n </div>\n\n <!-- CTA -->\n <a href=\"#\" class=\"case-cta\">\n <span>查看完整案例</span>\n <i class=\"fa-solid fa-arrow-right-long\"></i>\n </a>\n\n </div>\n <!-- end case-content -->\n\n </div>\n <!-- end case-container -->\n </div>\n <!-- end case-wrapper -->\n\n</body>\n</html>"},
"next": ["极简留白版案例","品牌官网案例","移动端优先案例","电商平台案例","暗黑科技风案例"],
"breakpoint": "none"
}
```