完成大部分页面

website/src/pages/ProductPage.jsx

@@ -1,7 +1,6 @@
 import { useParams, Link } from 'react-router-dom'
-import { ChevronDown, ArrowRight } from 'lucide-react'
+import { ChevronDown, ArrowRight, Shield, Clock, Headphones, Sparkles, CheckCircle2, AlertCircle } from 'lucide-react'
 import { getProduct, products } from '../data/products'
-import DemoSection from '../components/DemoSection'
 import ProductCard from '../components/ProductCard'
 import ScrollReveal from '../components/ScrollReveal'
 
@@ -25,86 +24,249 @@ export default function ProductPage() {
   const otherProducts = products.filter(p => p.slug !== slug)
 
   return (
-    <main>
-      {/* Hero Header (深色) */}
+    <main className="bg-white">
+      {/* ── Hero ── */}
       <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>
-              ))}
+        <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" />
             </div>
           )}
-        </div>
-      </section>
+          {/* 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-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-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">{s.num}</div>
+                    <div className="text-xs text-white/50 mt-2 font-medium">{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>
+      {/* ── Brief ── */}
+      <section className="py-20 px-6 bg-white">
+        <div className="max-w-3xl mx-auto">
+          <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]" />
+
+              <p className="text-[#334155] text-lg md:text-xl leading-loose relative z-10">
+                {product.brief}
+              </p>
+            </div>
+
+            {product.tags && (
+              <div className="flex flex-wrap justify-center gap-4 mt-10">
+                {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' }}>
+                    <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>
+                ))}
+              </div>
+            )}
           </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        </div>
+      </section>
+
+      {/* ── Pain Points ── */}
+      {product.painPoints && product.painPoints.length > 0 && (
+        <section className="py-24 px-6 bg-[#fafbfc]">
+          <div className="max-w-5xl mx-auto">
+            <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>
+                </div>
+                <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                  {product.painPointsTitle || `${product.name}解决的核心问题`}
+                </h2>
+                <p className="text-[#475569] text-lg md:text-xl mt-6 max-w-xl leading-relaxed">深入理解管理难题，提供经过实战验证的解决方案</p>
+              </div>
+            </ScrollReveal>
+            <div className="space-y-5">
+              {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" />
+                    {/* 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">
+                        <AlertCircle className="w-5 h-5 text-red-500" />
+                      </div>
+                      <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>
+                      <p className="text-[#334155] text-xl leading-[1.9]">{item.desc}</p>
+                    </div>
+                  </div>
+                </ScrollReveal>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ── Core Features ── */}
+      <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-[#043b8f]" />
+                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Core Features</span>
+              </div>
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                核心功能
+              </h2>
+              {product.target && (
+                <div className="mt-5 flex flex-col items-center gap-3">
+                  <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>
+                  ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollReveal>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 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>
+              <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="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="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" />
+                    </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>
+                  </div>
                 </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} />
+      {/* ── 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>
+              </div>
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                为什么选择我们
+              </h2>
+            </div>
+          </ScrollReveal>
 
-      {/* FAQ (白底) */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {[
+              { icon: Shield, title: '安全可靠', desc: '等保三级认证，银行级加密存储，多机房容灾备份' },
+              { icon: Clock, title: '快速部署', desc: 'SaaS 即开即用，私有化部署最快 3 天交付上线' },
+              { 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="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="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>
+                      <div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 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>
+                  </div>
+                </div>
+              </ScrollReveal>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── 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>
+        <section className="py-24 px-6 bg-[#fafbfc]">
+          <div className="max-w-5xl mx-auto">
+            <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>
+                </div>
+                <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                  常见问题
+                </h2>
+              </div>
             </ScrollReveal>
-            <div className="space-y-3">
+
+            <div className="space-y-4 max-w-3xl mx-auto">
               {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" />
+                <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" />
+                    <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>
+                        <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>
                     </summary>
-                    <div className="px-6 pb-5">
-                      <p className="text-[#64748b] text-sm leading-relaxed">{item.a}</p>
+                    <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">
+                        <p className="text-[#64748b] text-lg leading-relaxed">{item.a}</p>
+                      </div>
                     </div>
                   </details>
                 </ScrollReveal>
@@ -114,8 +276,8 @@ export default function ProductPage() {
         </section>
       )}
 
-      {/* CTA (深色) */}
-      <section className="py-20 px-4 relative overflow-hidden"
+      {/* ── CTA ── */}
+      <section className="py-40 px-4 relative overflow-hidden"
         style={{ background: 'linear-gradient(135deg, #0a1628, #0f1f3a)' }}>
         <div className="absolute inset-0 opacity-[0.04]"
           style={{
@@ -125,35 +287,30 @@ export default function ProductPage() {
         />
         <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>
+            <h2 className="text-5xl md:text-6xl font-bold text-white mb-8">对{product.name}感兴趣？</h2>
+            <p className="text-white text-lg mb-14 max-w-xl mx-auto leading-relaxed">
+              获取产品演示与个性化方案，迈出数字化转型第一步
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <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 hover:bg-white/10 transition-all"
+              >
+                联系我们
+                <ArrowRight className="w-4 h-4" />
+              </Link>
+              <a
+                href="tel:07713864294"
+                className="inline-flex items-center gap-2 px-8 py-3 rounded-xl text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
+              >
+                致电 0771-3864294
+              </a>
+            </div>
           </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>
   )
 }