添加不同页面有不同的产品展示的主题

2026-06-11 11:36:53 +08:00
parent 77af4e0dc7
commit 40fb2ab22e
27 changed files with 424 additions and 107 deletions
@@ -6,9 +6,9 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- ===== GEO: 语义化 meta 标签 ===== -->
-    <meta name="description" content="广西讯驰是专注智慧教育领域的科技企业，为职业院校和高校提供实习就业管理、科研管理、智慧党建、商咖五级进阶等数字化解决方案，已服务150+所院校、覆盖5万+学生。" />
-    <meta name="keywords" content="智慧教育,实习管理平台,科研管理系统,智慧党建,商咖五级进阶,广西讯驰,职业院校信息化" />
-    <title>广西讯驰 - 智慧教育数字化解决方案 | 校企益邦 · 科研管理 · 智慧党建 · 商咖五级进阶</title>
+    <meta name="description" content="广西讯驰是专注智慧教育领域的科技企业，为职业院校和高校提供实习就业管理、科研管理、智慧党建、实训管理平台等数字化解决方案，已服务150+所院校、覆盖5万+学生。" />
+    <meta name="keywords" content="智慧教育,实习管理平台,科研管理系统,智慧党建,实训管理平台,广西讯驰,职业院校信息化" />
+    <title>广西讯驰 - 智慧教育数字化解决方案 | 校企益邦 · 科研管理 · 智慧党建 · 实训管理平台</title>

    <!-- ===== GEO: Schema.org JSON-LD 结构化数据——AI 直接解析企业信息 ===== -->
    <script type="application/ld+json">
@@ -21,7 +21,7 @@
      "logo": "https://products.2009xc.com/favicon.ico",
      "foundingDate": "2010",
      "areaServed": "中国",
-      "knowsAbout": ["校企益邦", "科研管理系统", "智慧党建", "商咖五级进阶"],
+      "knowsAbout": ["校企益邦", "科研管理系统", "智慧党建", "实训管理平台"],
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+86-771-3864294",
@@ -41,7 +41,7 @@
          "name": "广西讯驰提供哪些智慧教育解决方案？",
          "acceptedAnswer": {
            "@type": "Answer",
-            "text": "核心产品包括校企益邦（实习就业管理平台）、科研管理系统、智慧党建平台、商咖五级进阶实训系统，覆盖实习管理、科研管理、党建数字化、商科实训四大领域。"
+            "text": "核心产品包括校企益邦（实习就业管理平台）、科研管理系统、智慧党建平台、实训管理平台实训系统，覆盖实习管理、科研管理、党建数字化、商科实训四大领域。"
          }
        },
        {
@@ -64,8 +64,7 @@
    }
    </script>

-    <link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=ZCOOL+XiaoWei&family=Long+Cang&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=Noto+Serif+SC:wght@600;700;900&display=swap" rel="stylesheet">
-  </head>
+    </head>

  <body>
    <!-- React 挂载点 -->
@@ -99,7 +98,7 @@
            <p>面向高校及职业院校各级党组织的智慧党建管理系统。以"党业融合、指标驱动、全程留痕"为核心理念，将三会一课、党员活动、工作记录等日常工作自动关联考核指标，实现年终考核"零重复填报"。</p>
          </li>
          <li>
-            <h3>商咖五级进阶</h3>
+            <h3>实训管理平台</h3>
            <p>专为职业院校商科专业群打造的实训项目管理系统。以"项目—模块—任务"三级结构为骨架，以"咖豆积分+技能画像"为引擎，将抽象的五级进阶培养模式变成可量化、可追踪、可激励的线上实战平台。</p>
          </li>
        </ul>
@@ -0,0 +1,76 @@
+# 广西讯驰 - 智慧教育数字化解决方案
+
+> 广西讯驰信息科技有限公司（讯驰科技 / XUNCHI TECH），成立于 2010 年，总部位于广西南宁，专注为职业院校和高校提供智慧教育数字化解决方案。国家高新技术企业，已服务 150+ 所院校、覆盖 5 万+ 学生。
+
+## 核心页面
+
+- [首页](https://products.2009xc.com/): 企业概览、核心数据、四大产品展示、资质荣誉
+- [产品详情](https://products.2009xc.com/product/smart-campus): 各产品详情页（痛点、功能、优势、FAQ），通过 `/product/{slug}` 动态路由访问
+- [合作咨询](https://products.2009xc.com/contact): 联系方式、代理合作权益、在线咨询表单
+
+## 核心产品
+
+### 校企益邦（实习就业管理平台）
+
+- 详情页: https://products.2009xc.com/product/smart-campus
+- 面向职业院校实习就业管理的专业化平台，覆盖实习计划制定、过程跟踪、数据采集、鉴定评价全流程。已服务 20+ 所院校、50,000+ 学生、100 万+ 累计签到。
+- 核心功能：实习计划管理、GPS 打卡 + 电子围栏、问卷式日志、多维度评价、一键同步省级教育平台、微信小程序
+- 解决痛点：实习管理缺乏统一执行方案、教师数据采集负担重、学生参与度低
+
+### 科研管理系统
+
+- 详情页: https://products.2009xc.com/product/exam-system
+- 面向高校及科研院所的全生命周期科研业务管理平台，覆盖项目申报、评审立项、经费管控、成果登记到数据统计。已服务 10+ 高校、管理 3,000+ 项目、登记 8,000+ 成果。
+- 核心功能：在线申报审批、智能查重、经费管控、成果自动计分、关键节点提醒、一键年报导出
+- 解决痛点：纸质流程繁琐、人工审核工作量大、经费管理复杂、统计汇总困难
+
+### 智慧党建平台
+
+- 详情页: https://products.2009xc.com/product/teaching-resource
+- 面向高校各级党组织的智慧党建管理系统。以"党业融合、指标驱动、全程留痕"为核心理念，将三会一课、党员活动、工作记录自动关联考核指标。已覆盖 150+ 党支部、管理 5,000+ 党员。
+- 核心功能：三级考核指标体系、三会一课数字化、万能工作记录、实时进度看板、党员发展管理、党建数据中心
+- 解决痛点：党建与业务两张皮、年终突击补材料、会议组织与留痕困难、分级考核存在盲区
+
+### 实训管理平台
+
+- 详情页: https://products.2009xc.com/product/internship
+- 专为职业院校商科专业群打造的实训项目管理系统。以"项目—模块—任务"三级结构为骨架，以"咖豆积分 + 技能画像"为引擎，将五级进阶培养模式变成可量化、可追踪的线上实战平台。已积累 500+ 实训项目、覆盖 15+ 专业。
+- 核心功能：三级精细化管理、咖豆积分引擎、五级自动晋升、动态技能画像、人才培养驾驶舱、积分商城
+- 解决痛点：渐进式人才培养难以落地、实训项目数据分散、技能成长过程不可见
+
+## 常见问题
+
+### 系统支持本地化/私有化部署吗？
+
+支持。所有产品均提供 SaaS 云服务和私有化部署两种方案，满足院校对数据安全和合规性的不同要求。
+
+### 可以对接学校现有的教务/人事系统吗？
+
+可以。所有产品均提供标准 API 接口，支持与学校现有系统对接。
+
+### 售后服务和技术支持是怎样的？
+
+提供 7×24 小时技术支持，包括远程运维、定期巡检、系统升级、用户培训等。
+
+### 数据安全如何保障？
+
+通过国家信息安全等级保护三级认证，采用银行级数据加密、多活灾备、细粒度权限控制。
+
+## 企业资质
+
+- 国家高新技术企业
+- AAA 级信用企业
+- ISO 9001 质量管理体系认证
+- ISO 14001 环境管理体系认证
+- ISO 45001 职业健康安全管理体系认证
+- ISO 27001 信息安全管理体系认证
+- ISO 20000 信息技术服务管理体系认证
+- 40+ 项软件著作权
+- 16 年行业经验
+
+## 联系方式
+
+- 官网: https://products.2009xc.com/
+- 电话: 0771-3864294
+- 地址: 广西南宁市
+- ICP 备案: 桂ICP备10003405号-1
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+  <!-- 首页 -->
+  <url>
+    <loc>https://products.2009xc.com/</loc>
+    <lastmod>2026-06-10</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+
+  <!-- 产品页 -->
+  <url>
+    <loc>https://products.2009xc.com/product/smart-campus</loc>
+    <lastmod>2026-06-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://products.2009xc.com/product/exam-system</loc>
+    <lastmod>2026-06-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://products.2009xc.com/product/teaching-resource</loc>
+    <lastmod>2026-06-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://products.2009xc.com/product/internship</loc>
+    <lastmod>2026-06-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+
+  <!-- 联系页 -->
+  <url>
+    <loc>https://products.2009xc.com/contact</loc>
+    <lastmod>2026-06-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+
+</urlset>
@@ -0,0 +1,107 @@
+import { useState, useEffect, useCallback } from 'react'
+import { X } from 'lucide-react'
+
+export default function Carousel({ images, interval = 3000, themeColor }) {
+  const [current, setCurrent] = useState(0)
+  const [transitioning, setTransitioning] = useState(false)
+  const [preview, setPreview] = useState(null) // 预览图片的索引
+
+  const next = useCallback(() => {
+    if (transitioning) return
+    setTransitioning(true)
+    setCurrent(prev => (prev + 1) % images.length)
+    setTimeout(() => setTransitioning(false), 500)
+  }, [images.length, transitioning])
+
+  useEffect(() => {
+    if (preview !== null) return // 预览时不自动轮播
+    const timer = setInterval(next, interval)
+    return () => clearInterval(timer)
+  }, [next, interval, preview])
+
+  const getIndex = (offset) => {
+    return (current + offset + images.length) % images.length
+  }
+
+  const prevIdx = getIndex(-1)
+  const nextIdx = getIndex(1)
+
+  const handleImageClick = (index) => {
+    setPreview(index)
+  }
+
+  const handleClosePreview = () => {
+    setPreview(null)
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-center">
+        {/* Left - prev */}
+        <div
+          className={`relative z-10 w-80 h-44 md:w-96 md:h-52 bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-lg -rotate-6 transition-all duration-500 cursor-pointer hover:opacity-80 ${
+            transitioning ? 'opacity-70' : 'opacity-90'
+          }`}
+          onClick={() => handleImageClick(prevIdx)}
+        >
+          <img
+            src={images[prevIdx]}
+            alt=""
+            className="w-full h-full object-contain"
+          />
+        </div>
+
+        {/* Center - current */}
+        <div
+          className={`relative z-30 w-96 h-52 md:w-[500px] md:h-[280px] -mx-10 md:-mx-14 bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-2xl transition-all duration-500 cursor-pointer ${
+            transitioning ? 'scale-95' : 'scale-100'
+          }`}
+          onClick={() => handleImageClick(current)}
+        >
+          <div className="absolute top-0 left-0 right-0 h-[2px]"
+            style={{ background: `linear-gradient(90deg, transparent, ${themeColor}, transparent)` }} />
+          <img
+            src={images[current]}
+            alt=""
+            className="w-full h-full object-contain"
+          />
+        </div>
+
+        {/* Right - next */}
+        <div
+          className={`relative z-10 w-80 h-44 md:w-96 md:h-52 bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-lg rotate-6 transition-all duration-500 cursor-pointer hover:opacity-80 ${
+            transitioning ? 'opacity-70' : 'opacity-90'
+          }`}
+          onClick={() => handleImageClick(nextIdx)}
+        >
+          <img
+            src={images[nextIdx]}
+            alt=""
+            className="w-full h-full object-contain"
+          />
+        </div>
+      </div>
+
+      {/* Preview Modal */}
+      {preview !== null && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+          onClick={handleClosePreview}
+        >
+          <button
+            className="absolute top-6 right-6 z-10 w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center text-white transition-colors"
+            onClick={handleClosePreview}
+          >
+            <X className="w-6 h-6" />
+          </button>
+          <img
+            src={images[preview]}
+            alt=""
+            className="max-w-full max-h-full object-contain rounded-2xl"
+            onClick={(e) => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  )
+}
@@ -3,7 +3,7 @@ import { CheckCircle, X } from 'lucide-react';

 const productOptions = [
  '校企益邦',
-  '商咖五级进阶',
+  '实训管理平台',
  '智慧党建平台',
  '科研管理系统',
 ];
@@ -152,7 +152,7 @@ export default function HeroSection() {
        }

        .hero-main-title {
-          font-family: "ZCOOL XiaoWei", "STSong", "SimSun", serif;
+          font-family: "STSong", "SimSun", "NSimSun", serif;
          letter-spacing: 0.6em;
          color: white;
          text-shadow: 0 4px 60px rgba(0, 162, 234, 0.3),
@@ -160,7 +160,7 @@ export default function HeroSection() {
        }

        .hero-sec-title {
-          font-family: "Ma Shan Zheng", "STXingkai", cursive;
+          font-family: "STKaiti", "KaiTi", "DFKai-SB", cursive;
          letter-spacing: 0.5em;
          color: white;
          text-shadow: 0 2px 40px rgba(0, 162, 234, 0.25),
@@ -168,7 +168,7 @@ export default function HeroSection() {
        }

        .hero-desc {
-          font-family: "Ma Shan Zheng", "STXingkai", cursive;
+          font-family: "KaiTi", "STKaiti", "DFKai-SB", cursive;
          letter-spacing: 0.3em;
          color: rgba(255, 255, 255, 1);
          text-shadow: 0 2px 40px rgba(0, 162, 234, 0.25),
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Menu, X, Phone } from 'lucide-react';
 import { products } from '../data/products';
@@ -8,7 +8,15 @@ export default function Navbar() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const location = useLocation();

-  
+  // 根据当前路由获取产品主题色
+  const themeColor = useMemo(() => {
+    const match = location.pathname.match(/^\/product\/(.+)$/);
+    if (match) {
+      const product = products.find(p => p.slug === match[1]);
+      return product ? product.themeColor : null;
+    }
+    return null;
+  }, [location.pathname]);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > window.innerHeight * 0.7);
@@ -44,7 +52,7 @@ export default function Navbar() {
          left: 10%;
          right: 10%;
          height: 3px;
-          background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+          background: linear-gradient(90deg, transparent, var(--nav-theme, #3b82f6), transparent);
          border-radius: 2px;
          box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), 0 0 24px rgba(59, 130, 246, 0.2);
        }
@@ -68,7 +76,7 @@ export default function Navbar() {
      `}</style>
      <nav
        className={`sticky top-0 z-50 transition-all duration-500 backdrop-blur-xl ${scrolled ? 'bg-[#0f172a]/95 shadow-[0_4px_30px_rgba(0,0,0,0.2)] border-b border-white/[0.06]' : 'bg-gradient-to-b from-black/40 to-transparent'}`}
-        style={!scrolled ? undefined : undefined}
+        style={scrolled && themeColor ? { '--nav-theme': themeColor, backgroundColor: `${themeColor}ee` } : undefined}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center h-[80px] overflow-visible">
@@ -5,7 +5,7 @@ const chartData = [
  { value: 25, name: '校企益邦' },
  { value: 25, name: '科研管理系统' },
  { value: 25, name: '智慧党建平台' },
-  { value: 25, name: '商咖五级进阶' },
+  { value: 25, name: '实训管理平台' },
 ];

 const color = '#043b8f';
@@ -7,10 +7,15 @@ export const products = [
    slug: 'smart-campus',
    name: '校企益邦',
    slogan: '实习过程全掌控，就业数据一目了然',
-    themeColor: '#2563EB',
+    themeColor: '#60ce93',
    heroImage: new URL('../assets/images/Carousel/xq.png', import.meta.url).href,
-    themeFrom: '#1e40af',
-    themeTo: '#3b82f6',
+    screenshots: [
+      new URL('../assets/images/xq/xq1.png', import.meta.url).href,
+      new URL('../assets/images/xq/xq2.png', import.meta.url).href,
+      new URL('../assets/images/xq/xq3.png', import.meta.url).href,
+    ],
+    themeFrom: '#047857',
+    themeTo: '#34d399',
    icon: Building2,
    brief: '面向职业院校实习就业管理的专业化平台，覆盖实习计划制定、过程跟踪、数据采集、鉴定评价全流程，已服务广西多所职业院校，帮助学校轻松应对教育厅数据上报要求。',
    tags: ['实习计划管理', 'GPS签到+电子围栏', '问卷式日志', '多维鉴定评价'],
@@ -45,10 +50,15 @@ export const products = [
    slug: 'exam-system',
    name: '科研管理系统',
    slogan: '让科研管理告别纸质时代',
-    themeColor: '#EA580C',
+    themeColor: '#0c86cf',
    heroImage: new URL('../assets/images/Carousel/ky.png', import.meta.url).href,
-    themeFrom: '#c2410c',
-    themeTo: '#f97316',
+    screenshots: [
+      new URL('../assets/images/ky/ky1.png', import.meta.url).href,
+      new URL('../assets/images/ky/ky2.jpeg', import.meta.url).href,
+      new URL('../assets/images/ky/ky3.jpeg', import.meta.url).href,
+    ],
+    themeFrom: '#075985',
+    themeTo: '#38bdf8',
    icon: ClipboardCheck,
    brief: '面向高校及科研院所的全生命周期科研业务管理平台。覆盖项目申报、评审立项、经费管控、成果登记到数据统计的全流程数字化，已帮助多所高校实现科研管理从纸质流转到"一网通办"的跨越。',
    tags: ['在线申报审批', '智能查重防重复', '经费精细管控', '成果自动赋分'],
@@ -85,10 +95,16 @@ export const products = [
    slug: 'teaching-resource',
    name: '智慧党建平台',
    slogan: '党建工作有痕，年终考核无忧',
-    themeColor: '#7C3AED',
+    themeColor: '#aa3130',
    heroImage: new URL('../assets/images/Carousel/zh.png', import.meta.url).href,
-    themeFrom: '#6d28d9',
-    themeTo: '#8b5cf6',
+    heroSize: 'small',
+    screenshots: [
+      new URL('../assets/images/zh/zh1.png', import.meta.url).href,
+      new URL('../assets/images/zh/zh2.png', import.meta.url).href,
+      new URL('../assets/images/zh/zh3.jpeg', import.meta.url).href,
+    ],
+    themeFrom: '#7f1d1d',
+    themeTo: '#dc2626',
    icon: BookOpen,
    brief: '面向高校及职业院校各级党组织的智慧党建管理系统。以"党业融合、指标驱动、全程留痕"为核心理念，将三会一课、党员活动、工作记录等日常工作自动关联考核指标，实现年终考核"零重复填报"。',
    tags: ['三级考核指标', '三会一课数字化', '万能工作记录', '实时进度看板'],
@@ -131,12 +147,17 @@ export const products = [
  },
  {
    slug: 'internship',
-    name: '商咖五级进阶',
+    name: '实训管理平台',
    slogan: '五级渐进，让每一次成长都看得见',
-    themeColor: '#059669',
+    themeColor: '#8b50ee',
    heroImage: new URL('../assets/images/Carousel/sk.png', import.meta.url).href,
-    themeFrom: '#047857',
-    themeTo: '#10b981',
+    screenshots: [
+      new URL('../assets/images/sk/sk1.png', import.meta.url).href,
+      new URL('../assets/images/sk/sk2.jpeg', import.meta.url).href,
+      new URL('../assets/images/sk/sk3.jpeg', import.meta.url).href,
+    ],
+    themeFrom: '#5b21b6',
+    themeTo: '#a78bfa',
    icon: GraduationCap,
    brief: '专为职业院校商科专业群打造的实训项目管理系统。以"项目—模块—任务"三级结构为骨架，以"咖豆积分+技能画像"为引擎，将抽象的五级进阶培养模式变成可量化、可追踪、可激励的线上实战平台。',
    tags: ['三级精细管理', '咖豆积分引擎', '五级自动晋级', '动态技能画像'],
@@ -55,7 +55,7 @@ body {

 /* Product page hero art titles */
 .hero-product-title {
-  font-family: "ZCOOL XiaoWei", "STSong", "SimSun", serif;
+  font-family: "STSong", "SimSun", "NSimSun", serif;
  letter-spacing: 0.3em;
  color: white;
  text-shadow: 0 4px 60px rgba(0, 162, 234, 0.3),
@@ -63,7 +63,7 @@ body {
 }

 .hero-product-slogan {
-  font-family: "Ma Shan Zheng", "STXingkai", cursive;
+  font-family: "STKaiti", "KaiTi", "DFKai-SB", cursive;
  letter-spacing: 0.15em;
  color: white;
  text-shadow: 0 2px 40px rgba(0, 162, 234, 0.25),
@@ -1,15 +1,14 @@
 import { useParams, Link } from 'react-router-dom'
-import { ChevronDown, ArrowRight, Shield, Clock, Headphones,  AlertCircle } from 'lucide-react'
+import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle } from 'lucide-react'
 import { getProduct } from '../data/products'
 import ScrollReveal from '../components/ScrollReveal'
 import StatNumber from '../components/StatNumber'
+import Carousel from '../components/Carousel'

 export default function ProductPage() {
  const { slug } = useParams()
  const product = getProduct(slug)

-  
-
  if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-white">
@@ -22,47 +21,89 @@ export default function ProductPage() {
    )
  }

+  // 将 hex 主题色转为 RGB 分量，用于 rgba() 可变透明度
+  const hex = product.themeColor.replace('#', '')
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+
  // const Icon = product.icon
  // const otherProducts = products.filter(p => p.slug !== slug)

  return (
-    <main className="bg-white">
+    <main
+      className="bg-white"
+      style={{
+        '--theme': product.themeColor,
+        '--theme-r': r,
+        '--theme-g': g,
+        '--theme-b': b,
+      }}
+    >
      {/* ── Hero ── */}
      <div className="relative -mt-[70px]">
-        <section className="relative py-32 md:py-40 text-white overflow-hidden">
-          {/* Background image */}
-          {product.heroImage && (
-            <div className="absolute inset-0">
-              <img src={product.heroImage} alt="" className="w-full h-full object-cover" />
+        <section className="relative overflow-hidden" style={{ backgroundColor: product.themeColor }}>
+          {/* Desktop: left image + right card */}
+          <div className="hidden md:flex items-center  justify-between mx-auto  min-h-[760px]">
+            {/* Image - left */}
+            <div className="w-1/2 flex items-center justify-center">
+              {product.heroImage && (
+                <img src={product.heroImage} alt="" className={`w-full h-auto object-contain ${product.heroSize === 'small' ? 'max-h-[350px]' : 'max-h-[500px]'}`} />
+              )}
            </div>
-          )}
-          {/* Black overlay */}
-          <div className="absolute inset-0 bg-black/50" />
-
-          <div className="relative max-w-4xl mx-auto px-6 text-center pt-32">
-
-
-            <h1 className="text-4xl md:text-7xl font-extrabold mb-5 tracking-tight leading-[1.1] text-white hero-product-title">
-              {product.name}
-            </h1>
-            <p className="text-2xl md:text-3xl mb-6 max-w-xl mx-auto leading-relaxed hero-product-slogan">
-              {product.slogan}
-            </p>
-
-            {/* Stats */}
-            {product.stats && (
-              <div className="flex justify-center mt-14 rounded-2xl border border-white/10 overflow-hidden max-w-xl mx-auto"
-                style={{ backgroundColor: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(8px)' }}>
-                {product.stats.map((s, i) => (
-                  <div key={i} className={`flex flex-col items-center justify-center px-6 md:px-10 py-5 ${i < product.stats.length - 1 ? 'border-r border-white/10' : ''}`}>
-                    <div className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
-                      <StatNumber target={s.num} suffix={s.suffix} />
+            {/* Content - right */}
+            <div className="w-1/2">
+         
+              <h1 className="text-5xl md:text-7xl font-extrabold mb-5 tracking-tight leading-[1.1] text-white hero-product-title">
+                {product.name}
+              </h1>
+              <p className="text-2xl md:text-3xl mb-8 leading-relaxed text-white/80 hero-product-slogan">
+                {product.slogan}
+              </p>
+              {product.stats && (
+                <div className="flex gap-4 max-w-[620px]">
+                  {product.stats.map((s, i) => (
+                    <div key={i} className="flex-1 rounded-2xl p-4 text-center border border-white/20 bg-white/10">
+                      <div className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
+                        <StatNumber target={s.num} suffix={s.suffix} />
+                      </div>
+                      <div className="text-xs text-white/60 mt-1.5 font-medium">{s.label}</div>
                    </div>
-                    <div className="text-xs text-white/50 mt-2 font-medium">{s.label}</div>
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Mobile: stacked layout */}
+          <div className="md:hidden flex flex-col items-center px-6 pt-32 pb-16">
+            {product.heroImage && (
+              <img src={product.heroImage} alt="" className={`w-4/5 max-w-xs h-auto object-contain mb-10 ${product.heroSize === 'small' ? 'max-h-[150px]' : 'max-h-[200px]'}`} />
            )}
+            <div className="text-center w-full">
+                <span className="inline-block px-4 py-1.5 rounded-full text-xs font-bold tracking-wider uppercase mb-5"
+                  style={{ backgroundColor: product.themeColor + '18', color: product.themeColor }}>
+                  智慧教育解决方案
+                </span>
+                <h1 className="text-3xl font-extrabold mb-4 tracking-tight leading-[1.1] text-white hero-product-title">
+                  {product.name}
+                </h1>
+                <p className="text-xl mb-6 leading-relaxed text-white/80 hero-product-slogan">
+                  {product.slogan}
+                </p>
+                {product.stats && (
+                  <div className="flex gap-3 mt-4">
+                    {product.stats.map((s, i) => (
+                      <div key={i} className="flex-1 rounded-2xl p-3 text-center border border-white/20 bg-white/10">
+                        <div className="text-xl font-extrabold tracking-tight text-white">
+                          <StatNumber target={s.num} suffix={s.suffix} />
+                        </div>
+                        <div className="text-[11px] text-white/60 mt-1 font-medium">{s.label}</div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
          </div>
        </section>
      </div>
@@ -73,9 +114,9 @@ export default function ProductPage() {
          <ScrollReveal>
            <div className="relative bg-[#f8fafc] rounded-3xl p-10 md:p-14 overflow-hidden">
              {/* Floating decorative shapes */}
-              <div className="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-[#043b8f]" />
-              <div className="absolute -bottom-8 -left-8 w-20 h-20 rounded-2xl rotate-12 bg-[#043b8f]" />
-              <div className="absolute top-1/2 -right-4 w-8 h-8 rounded-full border-2 border-[#043b8f]" />
+              <div className="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-[var(--theme)]" />
+              <div className="absolute -bottom-8 -left-8 w-20 h-20 rounded-2xl rotate-12 bg-[var(--theme)]" />
+              <div className="absolute top-1/2 -right-4 w-8 h-8 rounded-full border-2 border-[var(--theme)]" />

              <p className="text-[#334155] text-lg md:text-xl leading-loose relative z-10">
                {product.brief}
@@ -87,12 +128,12 @@ export default function ProductPage() {
                {product.tags.map((tag, i) => (
                  <span key={i}
                    className="relative px-6 py-2 text-sm font-bold text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5"
-                    style={{ backgroundColor: '#043b8f' }}>
+                    style={{ backgroundColor: product.themeColor }}>
                    <span className="relative z-10">{tag}</span>
                    <svg className="absolute -bottom-2 left-0 w-full h-2 text-white/20" viewBox="0 0 100 8" preserveAspectRatio="none">
                      <path d="M0 0 L35 8 L65 8 L100 0" fill="currentColor" />
                    </svg>
-                    <span className="absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-4 rounded-full" style={{ backgroundColor: '#043b8f' }} />
+                    <span className="absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-4 rounded-full" style={{ backgroundColor: product.themeColor }} />
                  </span>
                ))}
              </div>
@@ -108,8 +149,8 @@ export default function ProductPage() {
            <ScrollReveal className="mb-14 text-center">
              <div className="flex flex-col items-center">
                <div className="inline-flex items-center gap-3 mb-5">
-                  <span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
-                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Pain Points</span>
+                  <span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
+                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Pain Points</span>
                </div>
                <h2 className="text-2xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                  {product.painPointsTitle || `${product.name}解决的核心问题`}
@@ -121,7 +162,7 @@ export default function ProductPage() {
              {product.painPoints.map((item, i) => (
                <ScrollReveal key={i} delay={i * 0.08}>
                  <div className="relative bg-white rounded-2xl p-10 border border-gray-100 hover:shadow-lg hover:shadow-gray-200/50 transition-all duration-300 group h-full">
-                    <div className="absolute top-0 left-0 right-0 h-1 rounded-t-2 bg-[#043b8f] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+                    <div className="absolute top-0 left-0 right-0 h-1 rounded-t-2 bg-[var(--theme)] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    {/* Pain point */}
                    <div className="flex items-start gap-3 mb-5 pb-5 border-b border-dashed border-gray-200">
                      <div className="shrink-0 w-9 h-9 rounded-full bg-red-50 flex items-center justify-center">
@@ -130,8 +171,8 @@ export default function ProductPage() {
                      <h3 className="text-lg font-bold text-[#0f172a] leading-relaxed">{item.title}</h3>
                    </div>
                    {/* Solution */}
-                    <div className="ml-11 pl-5 border-l-2 border-[#043b8f] bg-[#043b8f]/[0.03] rounded-r-lg py-4 pr-4">
-                      <span className="inline-block text-sm font-semibold text-white bg-[#043b8f] rounded px-3 py-1.5 mb-3">解决方案</span>
+                    <div className="ml-11 pl-5 border-l-2 border-[var(--theme)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.03)] rounded-r-lg py-4 pr-4">
+                      <span className="inline-block text-sm font-semibold text-white bg-[var(--theme)] rounded px-3 py-1.5 mb-3">解决方案</span>
                      <p className="text-[#334155] text-xl leading-[1.9]">{item.desc}</p>
                    </div>
                  </div>
@@ -148,8 +189,8 @@ export default function ProductPage() {
          <ScrollReveal className="mb-16 text-center">
            <div className="flex flex-col items-center">
              <div className="inline-flex items-center gap-3 mb-5">
-                <span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
-                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Core Features</span>
+                <span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
+                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Core Features</span>
              </div>
              <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                核心功能
@@ -159,7 +200,7 @@ export default function ProductPage() {
                  <span className="text-lg text-[#0f172a] font-bold">适用对象：</span>
                  <div className="flex flex-wrap justify-center gap-3">
                  {product.target.split('、').map((t, i) => (
-                    <span key={i} className="px-4 py-1.5 rounded-lg text-sm font-bold text-[#043b8f] border border-[#043b8f]/30">{t.trim()}</span>
+                    <span key={i} className="px-4 py-1.5 rounded-lg text-sm font-bold text-[var(--theme)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.3)]">{t.trim()}</span>
                  ))}
                  </div>
                </div>
@@ -170,16 +211,16 @@ export default function ProductPage() {
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {product.features.map((f, i) => (
              <ScrollReveal key={i} delay={i * 0.05}>
-                <div className="relative bg-white rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#043b8f]/5 transition-all duration-500 group overflow-hidden">
+                <div className="relative bg-white rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-500 group overflow-hidden">
                  <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                    style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)` }} />
-                  <div className="absolute top-0 right-0 w-32 h-32 bg-[#043b8f]/[0.02] rounded-bl-full" />
-                  <div className="absolute bottom-0 left-0 w-20 h-20 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
+                  <div className="absolute top-0 right-0 w-32 h-32 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
+                  <div className="absolute bottom-0 left-0 w-20 h-20 border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] rounded-tr-3xl" />

                  <div className="relative z-10">
                    <div className="flex items-center gap-3 mb-4">
-                      <span className="flex items-center justify-center w-8 h-8 rounded-md bg-[#043b8f]/[0.06] text-xs font-black text-[#043b8f]">0{i + 1}</span>
-                      <div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
+                      <span className="flex items-center justify-center w-8 h-8 rounded-md bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)]">0{i + 1}</span>
+                      <div className="h-px flex-1 bg-gradient-to-r from-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] to-transparent" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0f172a] mb-3">{f.title}</h3>
                    <p className="text-[#64748b] text-lg leading-relaxed">{f.desc}</p>
@@ -191,14 +232,35 @@ export default function ProductPage() {
        </div>
      </section>

+      {/* ── Product Showcase ── */}
+      {product.screenshots && product.screenshots.length > 0 && (
+        <section className="py-24 px-6 bg-[#fafbfc]">
+          <div className="max-w-5xl mx-auto">
+            <ScrollReveal className="mb-16 text-center">
+              <div className="flex flex-col items-center">
+                <div className="inline-flex items-center gap-3 mb-5">
+                  <span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
+                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Product Showcase</span>
+                </div>
+                <h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                  产品展示
+                </h2>
+              </div>
+            </ScrollReveal>
+
+            <Carousel images={product.screenshots} themeColor={product.themeColor} />
+          </div>
+        </section>
+      )}
+
      {/* ── Advantages ── */}
      <section className="py-24 px-6 bg-white">
        <div className="max-w-5xl mx-auto">
          <ScrollReveal className="mb-16 text-center">
            <div className="flex flex-col items-center">
              <div className="inline-flex items-center gap-3 mb-5">
-                <span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
-                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Why Choose Us</span>
+                <span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
+                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Why Choose Us</span>
              </div>
              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                为什么选择我们
@@ -213,18 +275,18 @@ export default function ProductPage() {
              { icon: Headphones, title: '专属服务', desc: '7×24 小时响应，专属客户经理全程陪伴' },
            ].map((item, i) => (
              <ScrollReveal key={i} delay={i * 0.08}>
-                <div className="relative bg-[#fafbfc] rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#043b8f]/5 transition-all duration-500 group overflow-hidden">
+                <div className="relative bg-[#fafbfc] rounded-2xl p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-500 group overflow-hidden">
                  <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                    style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)` }} />
-                  <div className="absolute top-0 right-0 w-28 h-28 bg-[#043b8f]/[0.02] rounded-bl-full" />
-                  <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
+                  <div className="absolute top-0 right-0 w-28 h-28 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
+                  <div className="absolute bottom-0 left-0 w-16 h-16 border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] rounded-tr-3xl" />

                  <div className="relative z-10">
                    <div className="flex items-center gap-3 mb-5">
-                      <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[#043b8f]/[0.06] border border-[#043b8f]/10">
-                        <item.icon className="w-5 h-5" style={{ color: '#043b8f' }} />
+                      <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)]">
+                        <item.icon className="w-5 h-5" style={{ color: product.themeColor }} />
                      </div>
-                      <div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
+                      <div className="h-px flex-1 bg-gradient-to-r from-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] to-transparent" />
                    </div>
                    <h3 className="text-xl font-bold text-[#0f172a] mb-3">{item.title}</h3>
                    <p className="text-[#64748b] text-lg leading-relaxed">{item.desc}</p>
@@ -243,8 +305,8 @@ export default function ProductPage() {
            <ScrollReveal className="mb-14 text-center">
              <div className="flex flex-col items-center">
                <div className="inline-flex items-center gap-3 mb-5">
-                  <span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
-                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">FAQ</span>
+                  <span className="w-5 h-[2px] rounded-full bg-[var(--theme)]" />
+                  <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
                </div>
                <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                  常见问题
@@ -255,20 +317,20 @@ export default function ProductPage() {
            <div className="space-y-4 max-w-3xl mx-auto">
              {product.faq.map((item, i) => (
                <ScrollReveal key={i} delay={i * 0.04}>
-                  <details className="group relative bg-white rounded-2xl border border-gray-100 hover:shadow-lg hover:shadow-[#043b8f]/5 transition-all duration-300 overflow-hidden">
-                    <div className="absolute top-0 left-0 w-1 h-full bg-[#043b8f]/10 group-open:bg-[#043b8f] transition-colors duration-300" />
-                    <div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.02] rounded-bl-full" />
+                  <details className="group relative bg-white rounded-2xl border border-gray-100 hover:shadow-lg hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-300 overflow-hidden">
+                    <div className="absolute top-0 left-0 w-1 h-full bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] group-open:bg-[var(--theme)] transition-colors duration-300" />
+                    <div className="absolute top-0 right-0 w-24 h-24 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-bl-full" />
                    <summary className="relative flex items-center justify-between px-8 py-6 cursor-pointer list-none select-none">
                      <div className="flex items-center gap-4 pr-4">
-                        <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[#043b8f]/[0.06] text-xs font-black text-[#043b8f] shrink-0">Q{i + 1}</span>
+                        <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)] shrink-0">Q{i + 1}</span>
                        <h3 className="text-lg font-bold text-[#0f172a]">{item.q}</h3>
                      </div>
-                      <div className="w-8 h-8 rounded-full bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
-                        <ChevronDown className="w-4 h-4 text-[#043b8f]" />
+                      <div className="w-8 h-8 rounded-full bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
+                        <ChevronDown className="w-4 h-4 text-[var(--theme)]" />
                      </div>
                    </summary>
                    <div className="relative px-8 pb-7">
-                      <div className="ml-12 pl-5 border-l-2 border-[#043b8f]/10 bg-[#043b8f]/[0.02] rounded-r-lg py-4 pr-4">
+                      <div className="ml-12 pl-5 border-l-2 border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-r-lg py-4 pr-4">
                        <p className="text-[#64748b] text-lg leading-relaxed">{item.a}</p>
                      </div>
                    </div>
@@ -282,10 +344,10 @@ export default function ProductPage() {

      {/* ── CTA ── */}
      <section className="py-40 px-4 relative overflow-hidden"
-        style={{ background: 'linear-gradient(135deg, #0a1628, #0f1f3a)' }}>
+        style={{ background: `linear-gradient(135deg, ${product.themeFrom || '#0a1628'}, ${product.themeTo || '#0f1f3a'})` }}>
        <div className="absolute inset-0 opacity-[0.04]"
          style={{
-            backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
+            backgroundImage: `radial-gradient(${product.themeColor} 1px, transparent 1px)`,
            backgroundSize: '24px 24px',
          }}
        />
@@ -313,8 +375,6 @@ export default function ProductPage() {
          </ScrollReveal>
        </div>
      </section>
-
-     
    </main>
  )
-}
+}