首页已完成

website/src/pages/ProductPage.jsx

@@ -0,0 +1,159 @@
+import { useParams, Link } from 'react-router-dom'
+import { ChevronDown, ArrowRight } from 'lucide-react'
+import { getProduct, products } from '../data/products'
+import DemoSection from '../components/DemoSection'
+import ProductCard from '../components/ProductCard'
+import ScrollReveal from '../components/ScrollReveal'
+
+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">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold text-[#0f172a] mb-4">产品未找到</h1>
+          <p className="text-[#94a3b8] mb-8">请检查链接是否正确</p>
+          <Link to="/" className="text-[#004ec4] hover:underline">返回首页</Link>
+        </div>
+      </div>
+    )
+  }
+
+  const Icon = product.icon
+  const otherProducts = products.filter(p => p.slug !== slug)
+
+  return (
+    <main>
+      {/* Hero Header (深色) */}
+      <div className="relative -mt-[70px]">
+        <section className="relative py-24 md:py-32 text-white overflow-hidden"
+        style={{ background: 'linear-gradient(135deg, #0a1628, #0f1f3a)' }}>
+        {/* Tech texture */}
+        <div className="absolute inset-0 opacity-[0.04]"
+          style={{
+            backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
+            backgroundSize: '30px 30px',
+          }}
+        />
+        <div className="relative max-w-7xl mx-auto px-4 pt-16 text-center">
+          <div className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
+            style={{ backgroundColor: product.themeColor + '20', border: `1px solid ${product.themeColor}30` }}>
+            <Icon className="w-8 h-8" style={{ color: product.themeColor }} />
+          </div>
+          <h1 className="text-4xl md:text-5xl font-bold mb-3">{product.name}</h1>
+          <p className="text-lg text-[#94a3b8] mb-2">{product.slogan}</p>
+          <p className="text-base text-[#64748b] max-w-2xl mx-auto">{product.brief}</p>
+
+          {product.stats && (
+            <div className="flex flex-wrap justify-center gap-8 mt-10">
+              {product.stats.map((s, i) => (
+                <div key={i} className="text-center">
+                  <div className="text-3xl md:text-4xl font-black" style={{ color: product.themeColor }}>{s.num}</div>
+                  <div className="text-sm text-[#94a3b8] mt-1">{s.label}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+      </div>
+
+      {/* Core Features (白底) */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <ScrollReveal className="text-center mb-14">
+            <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">核心功能</h2>
+            <p className="text-[#64748b] text-base">全面覆盖业务场景，灵活适配不同规模院校的管理需求</p>
+          </ScrollReveal>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {product.features.map((f, i) => (
+              <ScrollReveal key={i} delay={i * 0.08}>
+                <div className="bg-[#f8fafc] rounded-2xl p-6 hover:shadow-sm transition-all duration-300 h-full">
+                  <div className="text-3xl mb-4">{f.emoji}</div>
+                  <h3 className="text-lg font-bold text-[#0f172a] mb-2">{f.title}</h3>
+                  <p className="text-[#64748b] text-sm leading-relaxed">{f.desc}</p>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+          {product.target && (
+            <ScrollReveal>
+              <p className="text-center text-[#94a3b8] text-sm mt-8">适用对象：{product.target}</p>
+            </ScrollReveal>
+          )}
+        </div>
+      </section>
+
+      <DemoSection demo={product.demo} themeColor={product.themeColor} />
+
+      {/* FAQ (白底) */}
+      {product.faq && product.faq.length > 0 && (
+        <section className="py-20 px-4 bg-white">
+          <div className="max-w-3xl mx-auto">
+            <ScrollReveal className="text-center mb-12">
+              <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">常见问题</h2>
+            </ScrollReveal>
+            <div className="space-y-3">
+              {product.faq.map((item, i) => (
+                <ScrollReveal key={i} delay={i * 0.06}>
+                  <details className="group bg-[#f8fafc] rounded-xl hover:bg-gray-50 transition-colors">
+                    <summary className="flex items-center justify-between px-6 py-5 cursor-pointer list-none">
+                      <h3 className="text-[15px] font-semibold text-[#334155]">{item.q}</h3>
+                      <ChevronDown className="w-5 h-5 text-[#94a3b8] group-open:rotate-180 transition-transform shrink-0 ml-4" />
+                    </summary>
+                    <div className="px-6 pb-5">
+                      <p className="text-[#64748b] text-sm leading-relaxed">{item.a}</p>
+                    </div>
+                  </details>
+                </ScrollReveal>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* CTA (深色) */}
+      <section className="py-20 px-4 relative overflow-hidden"
+        style={{ background: 'linear-gradient(135deg, #0a1628, #0f1f3a)' }}>
+        <div className="absolute inset-0 opacity-[0.04]"
+          style={{
+            backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+        <div className="relative max-w-3xl mx-auto text-center">
+          <ScrollReveal>
+            <h2 className="text-3xl md:text-4xl font-bold text-white mb-5">对{product.name}感兴趣？</h2>
+            <p className="text-[#94a3b8] text-base mb-8">立即联系我们，获取专属解决方案和详细报价</p>
+            <Link
+              to="/contact"
+              className="inline-flex items-center gap-2 px-8 py-3 rounded-xl text-sm font-semibold text-white border border-white/20 hover:bg-white/10 transition-all"
+            >
+              立即联系我们
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      {/* Other Products (白底) */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-6xl mx-auto">
+          <ScrollReveal className="text-center mb-14">
+            <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">您可能还感兴趣</h2>
+            <p className="text-[#64748b] text-base">探索更多智慧教育产品</p>
+          </ScrollReveal>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {otherProducts.slice(0, 3).map((p, i) => (
+              <ScrollReveal key={p.slug} delay={i * 0.1}>
+                <ProductCard product={p} />
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}