import { useParams, Link } from 'react-router-dom' 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 (

产品未找到

请检查链接是否正确

返回首页
) } // 将 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 (
{/* ── Hero ── */}
{/* Desktop: left image + right card */}
{/* Image - left */}
{product.heroImage && ( )}
{/* Content - right */}

{product.name}

{product.slogan}

{product.stats && (
{product.stats.map((s, i) => (
{s.label}
))}
)}
{/* Mobile: stacked layout */}
{product.heroImage && ( )}
智慧教育解决方案

{product.name}

{product.slogan}

{product.stats && (
{product.stats.map((s, i) => (
{s.label}
))}
)}
{/* ── Brief ── */}
{/* Floating decorative shapes */}

{product.brief}

{product.tags && (
{product.tags.map((tag, i) => ( {tag} ))}
)}
{/* ── Pain Points ── */} {product.painPoints && product.painPoints.length > 0 && (
Pain Points

{product.painPointsTitle || `${product.name}解决的核心问题`}

深入理解管理难题，提供经过实战验证的解决方案
{product.painPoints.map((item, i) => (
{/* Pain point */}

{item.title}

{/* Solution */}
解决方案

{item.desc}

))}
)} {/* ── Core Features ── */}
Core Features

核心功能

{product.target && (
适用对象：
{product.target.split('、').map((t, i) => ( {t.trim()} ))}
)}
{product.features.map((f, i) => (
0{i + 1}

{f.title}

{f.desc}

))}
{/* ── Product Showcase ── */} {product.screenshots && product.screenshots.length > 0 && (
Product Showcase

产品展示

)} {/* ── Advantages ── */}
Why Choose Us

为什么选择我们

{[ { icon: Shield, title: '安全可靠', desc: '等保三级认证，银行级加密存储，多机房容灾备份' }, { icon: Clock, title: '快速部署', desc: 'SaaS 即开即用，私有化部署最快 3 天交付上线' }, { icon: Headphones, title: '专属服务', desc: '7×24 小时响应，专属客户经理全程陪伴' }, ].map((item, i) => (

{item.title}

{item.desc}

))}
{/* ── FAQ ── */} {product.faq && product.faq.length > 0 && (
FAQ

常见问题

{product.faq.map((item, i) => (
Q{i + 1}

{item.q}

{item.a}

 ))}
)} {/* ── CTA ── */}

对{product.name}感兴趣？

获取产品演示与个性化方案，迈出数字化转型第一步

) }