diff --git a/website/src/assets/images/Carousel/huaban.jpg b/website/src/assets/images/Carousel/huaban.jpg
new file mode 100644
index 0000000..b4aa7ad
Binary files /dev/null and b/website/src/assets/images/Carousel/huaban.jpg differ
diff --git a/website/src/assets/images/Carousel/ky.png b/website/src/assets/images/Carousel/ky.png
new file mode 100644
index 0000000..9765ebd
Binary files /dev/null and b/website/src/assets/images/Carousel/ky.png differ
diff --git a/website/src/assets/images/Carousel/sk.png b/website/src/assets/images/Carousel/sk.png
new file mode 100644
index 0000000..6141f76
Binary files /dev/null and b/website/src/assets/images/Carousel/sk.png differ
diff --git a/website/src/assets/images/Carousel/xq.png b/website/src/assets/images/Carousel/xq.png
new file mode 100644
index 0000000..6285fc3
Binary files /dev/null and b/website/src/assets/images/Carousel/xq.png differ
diff --git a/website/src/assets/images/Carousel/zh.png b/website/src/assets/images/Carousel/zh.png
new file mode 100644
index 0000000..a01763f
Binary files /dev/null and b/website/src/assets/images/Carousel/zh.png differ
diff --git a/website/src/components/ContactForm.jsx b/website/src/components/ContactForm.jsx
index e955181..fe17906 100644
--- a/website/src/components/ContactForm.jsx
+++ b/website/src/components/ContactForm.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { CheckCircle, X } from 'lucide-react';
 
 const productOptions = [
   '校企益邦',
@@ -17,6 +18,7 @@ const initialFormState = {
 
 export default function ContactForm() {
   const [form, setForm] = useState(initialFormState);
+  const [showModal, setShowModal] = useState(false);
 
   function handleChange(e) {
     const { name, value } = e.target;
@@ -25,82 +27,127 @@ export default function ContactForm() {
 
   function handleSubmit(e) {
     e.preventDefault();
-    alert(
-      '感谢您的咨询！\n\n' +
-        '姓名：' + form.name + '\n' +
-        '联系电话：' + form.phone + '\n' +
-        '单位名称：' + form.company + '\n' +
-        '关注产品：' + form.product + '\n' +
-        '留言内容：' + form.message + '\n\n' +
-        '我们将在1个工作日内与您联系！'
-    );
+    setShowModal(true);
+    console.log('提交表单', form);
+
     setForm(initialFormState);
   }
 
-  const inputClass = 'w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:border-[#004ec4]/40 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
+  function closeModal() {
+    setShowModal(false);
+  }
+
+  const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:border-[#043b8f]/40 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
 
   return (
-    <section className="py-20 px-4 bg-white">
-      <div className="max-w-2xl mx-auto">
-        <div className="text-center mb-12">
-          <p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Inquiry</p>
-          <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">在线咨询</h2>
-          <p className="text-[#64748b] text-base">填写表单，我们将在 1 个工作日内与您联系</p>
+    <>
+      <section className="py-24 px-6 bg-[#fafbfc]">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-16">
+            <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]">Inquiry</span>
+              </div>
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                在线咨询
+              </h2>
+              <p className="text-[#475569] text-lg md:text-xl mt-5 max-w-xl leading-relaxed">填写表单，我们将在 1 个工作日内与您联系</p>
+            </div>
+          </div>
+
+          <div className="relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 overflow-hidden max-w-3xl mx-auto">
+            <div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
+              style={{ background: 'linear-gradient(90deg, transparent, #043b8f, 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">
+              <form onSubmit={handleSubmit} className="space-y-8">
+                <div>
+                  <label htmlFor="name" className="block text-base font-bold text-[#0f172a] mb-2">
+                    姓名 <span className="text-red-400">*</span>
+                  </label>
+                  <input type="text" id="name" name="name" required value={form.name} onChange={handleChange}
+                    placeholder="请输入您的姓名" className={inputClass} />
+                </div>
+
+                <div>
+                  <label htmlFor="phone" className="block text-base font-bold text-[#0f172a] mb-2">
+                    联系电话 <span className="text-red-400">*</span>
+                  </label>
+                  <input type="tel" id="phone" name="phone" required value={form.phone} onChange={handleChange}
+                    placeholder="请输入您的联系电话" className={inputClass} />
+                </div>
+
+                <div>
+                  <label htmlFor="company" className="block text-base font-bold text-[#0f172a] mb-2">单位名称</label>
+                  <input type="text" id="company" name="company" value={form.company} onChange={handleChange}
+                    placeholder="请输入您的单位名称" className={inputClass} />
+                </div>
+
+                <div>
+                  <label htmlFor="product" className="block text-base font-bold text-[#0f172a] mb-2">
+                    关注产品 <span className="text-[#94a3b8] text-sm">(可选)</span>
+                  </label>
+                  <select id="product" name="product" value={form.product} onChange={handleChange}
+                    className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:border-[#043b8f]/40 transition-shadow bg-white text-[#64748b]">
+                    <option value="">请选择关注的产品</option>
+                    {productOptions.map((product) => (
+                      <option key={product} value={product}>{product}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="message" className="block text-base font-bold text-[#0f172a] mb-2">留言内容</label>
+                  <textarea id="message" name="message" rows={4} value={form.message} onChange={handleChange}
+                    placeholder="请输入您的留言内容" className={inputClass + ' resize-none'} />
+                </div>
+
+                <button
+                  type="submit"
+                  className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#043b8f]/20"
+                  style={{ background: 'linear-gradient(135deg, #043b8f, #0659c7)' }}
+                >
+                  提交咨询
+                </button>
+              </form>
+            </div>
+          </div>
         </div>
+      </section>
 
-        <div className="bg-[#f8fafc] border border-gray-100 rounded-2xl p-8">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-[#334155] mb-1.5">
-                姓名 <span className="text-red-400">*</span>
-              </label>
-              <input type="text" id="name" name="name" required value={form.name} onChange={handleChange}
-                placeholder="请输入您的姓名" className={inputClass} />
-            </div>
+      {showModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={closeModal} />
+          <div className="relative bg-white rounded-2xl p-8 md:p-10 max-w-md w-full shadow-2xl overflow-hidden">
+            <div className="absolute top-0 left-0 right-0 h-[2px]"
+              style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
+            <div className="absolute top-0 right-0 w-20 h-20 bg-[#043b8f]/[0.02] rounded-bl-full" />
 
-            <div>
-              <label htmlFor="phone" className="block text-sm font-medium text-[#334155] mb-1.5">
-                联系电话 <span className="text-red-400">*</span>
-              </label>
-              <input type="tel" id="phone" name="phone" required value={form.phone} onChange={handleChange}
-                placeholder="请输入您的联系电话" className={inputClass} />
-            </div>
-
-            <div>
-              <label htmlFor="company" className="block text-sm font-medium text-[#334155] mb-1.5">单位名称</label>
-              <input type="text" id="company" name="company" value={form.company} onChange={handleChange}
-                placeholder="请输入您的单位名称" className={inputClass} />
-            </div>
-
-            <div>
-              <label htmlFor="product" className="block text-sm font-medium text-[#334155] mb-1.5">
-                关注产品 <span className="text-[#94a3b8] text-xs">(可选)</span>
-              </label>
-              <select id="product" name="product" value={form.product} onChange={handleChange}
-                className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:border-[#004ec4]/40 transition-shadow bg-white text-[#64748b]">
-                <option value="">请选择关注的产品</option>
-                {productOptions.map((product) => (
-                  <option key={product} value={product}>{product}</option>
-                ))}
-              </select>
-            </div>
-
-            <div>
-              <label htmlFor="message" className="block text-sm font-medium text-[#334155] mb-1.5">留言内容</label>
-              <textarea id="message" name="message" rows={4} value={form.message} onChange={handleChange}
-                placeholder="请输入您的留言内容" className={inputClass + ' resize-none'} />
-            </div>
-
-            <button
-              type="submit"
-              className="w-full py-3 text-white font-semibold rounded-xl text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:ring-offset-2 hover:shadow-[0_4px_15px_rgba(0,78,196,0.25)]"
-              style={{ background: 'linear-gradient(135deg, #0078b8, #004ec4)' }}
-            >
-              提交咨询
+            <button onClick={closeModal}
+              className="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center hover:bg-gray-100 transition-colors">
+              <X className="w-4 h-4 text-[#94a3b8]" />
             </button>
-          </form>
+
+            <div className="relative z-10 text-center">
+              <div className="w-16 h-16 rounded-full bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mx-auto mb-6">
+                <CheckCircle className="w-8 h-8 text-[#043b8f]" />
+              </div>
+              <h3 className="text-xl font-bold text-[#0f172a] mb-3">提交成功</h3>
+              <p className="text-[#64748b] text-base leading-relaxed mb-8">
+                感谢您的咨询！我们将在 <span className="font-bold text-[#043b8f]">1 个工作日</span> 内与您联系
+              </p>
+              <button onClick={closeModal}
+                className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#043b8f]/20"
+                style={{ background: 'linear-gradient(135deg, #043b8f, #0659c7)' }}>
+                我知道了
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
-    </section>
+      )}
+    </>
   );
 }
diff --git a/website/src/components/DemoSection.jsx b/website/src/components/DemoSection.jsx
index 0fb7b20..c62a176 100644
--- a/website/src/components/DemoSection.jsx
+++ b/website/src/components/DemoSection.jsx
@@ -6,39 +6,46 @@ export default function DemoSection({ demo, themeColor }) {
   const { url, account, password } = demo;
 
   return (
-    <section className="py-20 px-4 bg-[#f8fafc]">
-      <div className="max-w-6xl mx-auto">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl font-bold text-[#0f172a] mb-3">在线演示体验</h2>
-          <p className="text-[#64748b] text-base">即刻体验产品功能，感受智慧教育魅力</p>
+    <section className="py-24 px-4 bg-gradient-to-b from-white via-[#f8fafc] to-white">
+      <div className="max-w-5xl mx-auto">
+        <div className="text-center mb-14">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-sm font-medium mb-5"
+            style={{ backgroundColor: themeColor + '0a', color: themeColor }}>
+            <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: themeColor }} />
+            在线体验
+          </div>
+          <h2 className="text-3xl md:text-4xl font-extrabold text-[#0f172a] mb-4 tracking-tight">即刻体验产品功能</h2>
+          <p className="text-[#64748b] text-base">感受智慧教育的实际效果，零距离接触产品能力</p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div className="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm border-t-2 border-t-transparent"
-            style={{ borderTopColor: themeColor }}>
-            <div className="w-11 h-11 rounded-xl flex items-center justify-center mb-4"
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+          <div className="relative bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg hover:shadow-gray-100/80 hover:border-gray-200 transition-all duration-300 group">
+            <div className="absolute top-0 left-7 right-7 h-0.5 rounded-b-full"
+              style={{ backgroundColor: themeColor }} />
+            <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110"
               style={{ backgroundColor: themeColor + '10' }}>
               <ExternalLink className="w-5 h-5" style={{ color: themeColor }} />
             </div>
-            <h3 className="text-base font-semibold text-[#0f172a] mb-3">演示地址</h3>
+            <h3 className="text-base font-bold text-[#0f172a] mb-3">演示地址</h3>
             <a href={url} target="_blank" rel="noopener noreferrer"
               className="text-sm break-all leading-relaxed transition-colors hover:underline"
               style={{ color: themeColor }}>
               {url}
             </a>
-            <p className="text-[#94a3b8] text-xs mt-2">点击链接在新窗口打开演示</p>
+            <p className="text-[#94a3b8] text-xs mt-3">点击链接在新窗口打开</p>
           </div>
 
-          <div className="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm border-t-2 border-t-transparent"
-            style={{ borderTopColor: themeColor }}>
-            <div className="w-11 h-11 rounded-xl flex items-center justify-center mb-4"
+          <div className="relative bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg hover:shadow-gray-100/80 hover:border-gray-200 transition-all duration-300 group">
+            <div className="absolute top-0 left-7 right-7 h-0.5 rounded-b-full"
+              style={{ backgroundColor: themeColor }} />
+            <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110"
               style={{ backgroundColor: themeColor + '10' }}>
               <QrCode className="w-5 h-5" style={{ color: themeColor }} />
             </div>
-            <h3 className="text-base font-semibold text-[#0f172a] mb-3">扫码体验</h3>
+            <h3 className="text-base font-bold text-[#0f172a] mb-3">扫码体验</h3>
             <div className="flex justify-center">
-              <div className="border border-dashed border-gray-200 rounded-xl w-36 h-36 flex flex-col items-center justify-center gap-2">
-                <svg viewBox="0 0 100 100" width="56" height="56" className="opacity-20">
+              <div className="border border-dashed border-gray-200 rounded-xl w-32 h-32 flex flex-col items-center justify-center gap-2 bg-gray-50/50">
+                <svg viewBox="0 0 100 100" width="48" height="48" className="opacity-20">
                   <rect x="5" y="5" width="25" height="25" rx="2" fill="currentColor" className="text-gray-400" />
                   <rect x="8" y="8" width="19" height="19" rx="1" fill="white" />
                   <rect x="11" y="11" width="13" height="13" rx="1" fill="currentColor" className="text-gray-400" />
@@ -55,21 +62,22 @@ export default function DemoSection({ demo, themeColor }) {
             <p className="text-[#94a3b8] text-xs mt-3 text-center">请使用微信扫码体验</p>
           </div>
 
-          <div className="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm border-t-2 border-t-transparent"
-            style={{ borderTopColor: themeColor }}>
-            <div className="w-11 h-11 rounded-xl flex items-center justify-center mb-4"
+          <div className="relative bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg hover:shadow-gray-100/80 hover:border-gray-200 transition-all duration-300 group">
+            <div className="absolute top-0 left-7 right-7 h-0.5 rounded-b-full"
+              style={{ backgroundColor: themeColor }} />
+            <div className="w-12 h-12 rounded-xl flex items-center justify-center mb-5 transition-transform duration-300 group-hover:scale-110"
               style={{ backgroundColor: themeColor + '10' }}>
               <Lock className="w-5 h-5" style={{ color: themeColor }} />
             </div>
-            <h3 className="text-base font-semibold text-[#0f172a] mb-3">体验账号</h3>
-            <div className="space-y-3">
-              <div className="bg-[#f8fafc] rounded-xl p-3 border border-gray-100">
+            <h3 className="text-base font-bold text-[#0f172a] mb-3">体验账号</h3>
+            <div className="space-y-2.5">
+              <div className="bg-[#f8fafc] rounded-xl p-3.5 border border-gray-100">
                 <span className="text-xs text-[#94a3b8] block mb-1">账号</span>
-                <span className="font-mono text-sm text-[#334155]">{account}</span>
+                <span className="font-mono text-sm text-[#334155] font-medium">{account}</span>
               </div>
-              <div className="bg-[#f8fafc] rounded-xl p-3 border border-gray-100">
+              <div className="bg-[#f8fafc] rounded-xl p-3.5 border border-gray-100">
                 <span className="text-xs text-[#94a3b8] block mb-1">密码</span>
-                <span className="font-mono text-sm text-[#334155]">{password}</span>
+                <span className="font-mono text-sm text-[#334155] font-medium">{password}</span>
               </div>
             </div>
             <p className="text-[#94a3b8] text-xs mt-3">使用以上账号密码登录体验</p>
diff --git a/website/src/components/Footer.jsx b/website/src/components/Footer.jsx
index bb349b2..d068777 100644
--- a/website/src/components/Footer.jsx
+++ b/website/src/components/Footer.jsx
@@ -1,69 +1,83 @@
 import { Link } from 'react-router-dom';
 import { products } from '../data/products';
+import { Phone, MapPin } from 'lucide-react';
 
 export default function Footer() {
   return (
-    <footer className="bg-[#0a1628] text-white">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
-          {/* Left: Brand + desc */}
-          <div className="lg:col-span-5">
-            <div className="flex items-center gap-2 mb-4">
-              <img src="/favicon.ico" alt="讯驰" className="w-20 h-20" />
-              <h3 className="text-3xl font-bold text-white">讯驰科技</h3>
+    <footer className="bg-[#0a1628] text-white relative overflow-hidden">
+      <div className="absolute inset-0 opacity-[0.03]"
+        style={{
+          backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
+          backgroundSize: '24px 24px',
+        }}
+      />
+      <div className="absolute top-0 right-0 w-80 h-80 bg-[#043b8f]/8 rounded-full blur-[120px]" />
+
+      <div className="relative max-w-5xl mx-auto px-6 py-10">
+        {/* Row 1 */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 divide-x divide-white/15 text-center">
+          {/* Brand + Contact */}
+          <div className="md:px-8">
+            <div className="flex items-center justify-center gap-2.5 mb-3 whitespace-nowrap">
+              <img src="/favicon.ico" alt="讯驰" className="w-8 h-8" />
+              <span className="text-lg font-bold text-white tracking-tight">讯驰科技</span>
+            </div>
+            <p className="text-white/60 text-xs leading-loose mb-4">智慧校园解决方案提供商</p>
+            <div className="flex items-start justify-center gap-2 mb-3">
+              <MapPin className="w-3.5 h-3.5 text-white/50 mt-0.5 shrink-0" />
+              <span className="text-white/70 text-xs leading-loose">南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房</span>
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <Phone className="w-3.5 h-3.5 text-white/50 shrink-0" />
+              <span className="text-white/70 text-xs">0771-3864294</span>
             </div>
-            <p className="text-sm text-white mb-5 font-medium leading-7">智慧校园解决方案提供商</p>
-            <p className="text-sm text-white mb-4 flex items-start gap-1.5 leading-7">
-              <svg className="w-3.5 h-3.5 mt-[7px] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
-              <span>南宁市总部路3号中国东盟科技企业孵化基地<br />二期9号厂房二楼212房</span>
-            </p>
           </div>
 
-          {/* Right: Two columns */}
-          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-10">
-            <div>
-              <h4 className="text-sm font-semibold text-white mb-6 tracking-wide">产品中心</h4>
-              <ul className="space-y-4">
-                {products.map((product) => (
-                  <li key={product.slug}>
-                    <Link
-                      to={`/product/${product.slug}`}
-                      className="text-sm text-white hover:text-white/80 transition-colors"
-                    >
-                      {product.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
+          {/* Products */}
+          <div className="md:px-8">
+            <h4 className="text-sm font-bold text-white uppercase tracking-[0.15em] mb-4">产品中心</h4>
+            <ul className="space-y-2.5 flex flex-col items-center">
+              {products.map((product) => (
+                <li key={product.slug}>
+                  <Link to={`/product/${product.slug}`}
+                    className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
+                    <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
+                    {product.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
 
-            <div>
-              <h4 className="text-sm font-semibold text-white mb-6 tracking-wide">联系与合作</h4>
-              <ul className="space-y-4 text-sm">
-                <li>
-                  <Link to="/contact" className="inline-flex items-center gap-1.5 text-white hover:text-white/80 transition-colors">
-                    在线咨询
-                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
-                  </Link>
-                </li>
-                <li>
-                  <Link to="/contact" className="inline-flex items-center gap-1.5 text-white hover:text-white/80 transition-colors">
-                    成为代理商
-                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
-                  </Link>
-                </li>
-              </ul>
-            </div>
+          {/* Quick links */}
+          <div className="md:px-8">
+            <h4 className="text-sm font-bold text-white uppercase tracking-[0.15em] mb-4">快速链接</h4>
+            <ul className="space-y-2.5 flex flex-col items-center">
+              <li>
+                <Link to="/" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
+                  <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
+                  返回首页
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
+                  <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
+                  在线咨询
+                </Link>
+              </li>
+              <li>
+                <Link to="/contact" className="text-white/70 text-xs hover:text-white transition-colors duration-200 inline-flex items-center gap-2 group">
+                  <span className="w-1 h-1 rounded-full bg-white/40 group-hover:bg-white transition-all shrink-0" />
+                  成为代理商
+                </Link>
+              </li>
+            </ul>
           </div>
         </div>
-      </div>
 
-      {/* Bottom bar */}
-      <div className="border-t border-white/[0.06]">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-          <div className="text-center text-xs text-white">
-            <span>&copy; 2024 讯驰科技 版权所有 · 桂ICP备XXXXXXXX号</span>
-          </div>
+        {/* Row 2: Copyright */}
+        <div className="pt-6 border-t border-white/15">
+          <p className="text-white/50 text-xs text-center">&copy; 2024 讯驰科技 版权所有 &middot; 桂ICP备XXXXXXXX号</p>
         </div>
       </div>
     </footer>
diff --git a/website/src/data/products.js b/website/src/data/products.js
index 8f7eb36..7917767 100644
--- a/website/src/data/products.js
+++ b/website/src/data/products.js
@@ -8,11 +8,12 @@ export const products = [
     name: '校企益邦',
     slogan: '实习过程全掌控，就业数据一目了然',
     themeColor: '#2563EB',
+    heroImage: new URL('../assets/images/Carousel/xq.png', import.meta.url).href,
     themeFrom: '#1e40af',
     themeTo: '#3b82f6',
     icon: Building2,
     brief: '面向职业院校实习就业管理的专业化平台，覆盖实习计划制定、过程跟踪、数据采集、鉴定评价全流程，已服务广西多所职业院校，帮助学校轻松应对教育厅数据上报要求。',
-    tags: ['📋 实习计划管理', '📍 GPS签到+电子围栏', '📝 问卷式日志', '📊 多维鉴定评价'],
+    tags: ['实习计划管理', 'GPS签到+电子围栏', '问卷式日志', '多维鉴定评价'],
     stats: [
       { num: '20+所', label: '覆盖学校' },
       { num: '50,000+', label: '服务学生' },
@@ -26,6 +27,12 @@ export const products = [
       { emoji: '🔄', title: '一键同步教育厅平台', desc: '数据审核后直接同步至"广西职业院校学生实习管理平台"，无缝对接省级管理要求' },
       { emoji: '📱', title: '微信小程序加持', desc: '学生通过小程序签到、写日志、上传附件，无需下载额外App，使用门槛极低' },
     ],
+    painPointsTitle: '校企益邦解决的核心问题',
+    painPoints: [
+      { title: '没有统一的方案执行，学校难以管控学生的实习情况', desc: '平台提供丰富的实习规则定制，涵盖签到、汇报、评价、考核等要求。定制后的实习规则可作为实习要求模板应用于多个实习计划，管理不同批次的学生，省去重复配置众多实习要求的麻烦，体现模板化。' },
+      { title: '学生信息采集工作量大，授课教师苦不堪言', desc: '将学生实习信息采集工作分配给学生完成，指导老师只需对这些信息进行审核，减少老师在实习信息采集和整理环节的工作，保障信息准确性、规范性的同时，提高了信息收集效率。' },
+      { title: '学生配合的积极性较低，提交的数据不达标', desc: '实习日志采用"问卷式"，有指向性地采集学生实习日志，让学生即使面对需要频繁提交的日志，也有汇报方向，减少"流水账式"汇报，提升汇报效果。' },
+    ],
     target: '职业院校教务处、实习管理科、各院系指导教师',
     faq: [
       { q: '支持哪些部署方式？', a: '支持云端SaaS部署和本地私有化部署两种方式。SaaS部署无需购买服务器，开通即用；本地部署可保障数据完全自主可控，适合对数据安全要求较高的院校。' },
@@ -44,11 +51,12 @@ export const products = [
     name: '科研管理系统',
     slogan: '让科研管理告别纸质时代',
     themeColor: '#EA580C',
+    heroImage: new URL('../assets/images/Carousel/ky.png', import.meta.url).href,
     themeFrom: '#c2410c',
     themeTo: '#f97316',
     icon: ClipboardCheck,
     brief: '面向高校及科研院所的全生命周期科研业务管理平台。覆盖项目申报、评审立项、经费管控、成果登记到数据统计的全流程数字化，已帮助多所高校实现科研管理从纸质流转到"一网通办"的跨越。',
-    tags: ['📝 在线申报审批', '🔍 智能查重防重复', '💰 经费精细管控', '🏆 成果自动赋分'],
+    tags: ['在线申报审批', '智能查重防重复', '经费精细管控', '成果自动赋分'],
     stats: [
       { num: '10+所', label: '服务高校' },
       { num: '3,000+', label: '管理项目' },
@@ -62,6 +70,14 @@ export const products = [
       { emoji: '⏰', title: '关键节点预警', desc: '经费超期、结题到期、审批退回等场景自动推送提醒，确保每个环节不遗漏' },
       { emoji: '📄', title: '年度报表一键导出', desc: '科研成果统计、项目经费汇总等年度报表自动生成，效率提升数十倍' },
     ],
+    painPointsTitle: '科研管理系统解决的核心问题',
+    painPoints: [
+      { title: '传统科研管理流程繁琐，纸质办公效率低下', desc: '全流程数字化，实现科研项目申报、审批、结题的全程在线办理，消除纸质办公，提升工作效率。' },
+      { title: '项目申报审核工作量大，人工审核成本高', desc: '智能校验引擎，内置项目查重（相似度检测）、限项检查、预算自动配套计算规则，大幅降低人工审核成本。' },
+      { title: '科研经费管理复杂，预算与报销脱节', desc: '经费精细化管控，支持纵向/横向经费分类管理，实时关联预算与报销进度，确保经费使用规范透明。' },
+      { title: '科研成果统计困难，年度报表制作耗时', desc: '成果分值量化，自动根据奖励办法对论文、专利、著作等成果进行赋分，支持一键导出年度统计报表。' },
+      { title: '项目进度监控不及时，关键节点容易遗漏', desc: '多维度预警，集成短信通知与站内提醒，涵盖预算超期、结题预警、流程回退等关键节点。' },
+    ],
     target: '高校科研处、财务处、各院系教师及科研项目负责人',
     faq: [
       { q: '支持哪些部署方式？', a: '支持云端SaaS部署和本地私有化部署两种方式。SaaS部署无需购买服务器，开通即用；本地部署可保障数据完全自主可控，适合对数据安全要求较高的院校。' },
@@ -80,11 +96,12 @@ export const products = [
     name: '智慧党建平台',
     slogan: '党建工作有痕，年终考核无忧',
     themeColor: '#7C3AED',
+    heroImage: new URL('../assets/images/Carousel/zh.png', import.meta.url).href,
     themeFrom: '#6d28d9',
     themeTo: '#8b5cf6',
     icon: BookOpen,
     brief: '面向高校及职业院校各级党组织的智慧党建管理系统。以"党业融合、指标驱动、全程留痕"为核心理念，将三会一课、党员活动、工作记录等日常工作自动关联考核指标，实现年终考核"零重复填报"。',
-    tags: ['📊 三级考核指标', '📋 三会一课数字化', '✍️ 万能工作记录', '🔔 实时进度看板'],
+    tags: ['三级考核指标', '三会一课数字化', '万能工作记录', '实时进度看板'],
     stats: [
       { num: '150+', label: '服务支部' },
       { num: '5,000+', label: '管理党员' },
@@ -98,6 +115,22 @@ export const products = [
       { emoji: '👥', title: '发展党员管理', desc: '内置入党全流程节点模型，支持自定义配置，关键节点到期自动提醒支部管理员' },
       { emoji: '📡', title: '党建数据中心', desc: '全校党建数据可视化大屏——组织健康度、党员活跃度、重点工作督办一览无余' },
     ],
+    painPointsTitle: '智慧党建平台解决的核心问题',
+    painPoints: [
+      { title: '党建工作与教学业务“两张皮”，考核指标繁杂多样，难以实现全口径统一管理', desc: '构建“专用模块+通用记录”的双重支撑体系。对于标准化党务，通过“三会一课”、“党员活动”等模块自动关联；对于教学科研等系统中无特定管理模块的考核任务，利用“工作记录”模块作为万能适配器进行灵活录入并关联指标。确保每一项考核指标（无论党务或业务）都有据可查，实现党建考核的100%全覆盖。' },
+      {
+        title: ' 年终考核“突击补材料”，重复填表耗时耗力，数据难追溯',
+        desc: '推行“过程资产化”管理，日常工作（如会议、活动）录入即并关联考核指标，年终无需盘点，数据自动生成，拒绝重复劳动。'
+      },
+      {
+        title: '“三会一课”组织难、签到难、记录难，合规性监管滞后',
+        desc: '提供移动端全流程闭环，支持一键发布通知、现场扫码签到、会议纪要即时编辑上传，确保组织生活规范、留痕、可查。'
+      },
+      {
+        title: '党建考核存在“层级衰减”与“管理盲区”，平时进度看不见，年底检查来不及',
+        desc: '构建分层级可视化考核体系。系统打破科层壁垒，领导层通过“完成情况看板”直观监测各指标的实时进度一键穿透查看明细；执行层通过“指标明细”精准对应“自评”与“佐证材料”，明确“谁来做、谁来考、通过什么材料佐证”。让考核从“年底算总账”变为“全过程透明化管控”，确保压力无损传导至基层末梢。'
+      },
+    ],
     target: '高校党委组织部、各二级党委/党总支、基层党支部',
     faq: [
       { q: '支持哪些部署方式？', a: '支持云端SaaS部署和本地私有化部署两种方式。SaaS部署无需购买服务器，开通即用；本地部署可保障数据完全自主可控，适合对数据安全要求较高的院校。' },
@@ -116,11 +149,12 @@ export const products = [
     name: '商咖五级进阶',
     slogan: '五级渐进，让每一次成长都看得见',
     themeColor: '#059669',
+    heroImage: new URL('../assets/images/Carousel/sk.png', import.meta.url).href,
     themeFrom: '#047857',
     themeTo: '#10b981',
     icon: GraduationCap,
     brief: '专为职业院校商科专业群打造的实训项目管理系统。以"项目—模块—任务"三级结构为骨架，以"咖豆积分+技能画像"为引擎，将抽象的五级进阶培养模式变成可量化、可追踪、可激励的线上实战平台。',
-    tags: ['📦 三级精细管理', '🫘 咖豆积分引擎', '⭐ 五级自动晋级', '🎯 动态技能画像'],
+    tags: ['三级精细管理', '咖豆积分引擎', '五级自动晋级', '动态技能画像'],
     stats: [
       { num: '500+', label: '实训项目库' },
       { num: '15+', label: '覆盖专业' },
@@ -134,6 +168,17 @@ export const products = [
       { emoji: '📈', title: '人才培养驾驶舱', desc: '全校实训数据一屏呈现——项目热度、参与度、完成率、经费使用，决策有据可依' },
       { emoji: '🎁', title: '积分商城', desc: '咖豆可兑换实物或虚拟礼品，构建"学、练、评、换"完整激励闭环' },
     ],
+    painPoints: [
+      { title: '人才培养模式落地难，教学管理与“五级进阶”理念脱节。', 
+        desc: '系统内置“项目-模块-任务”三级结构与积分晋级规则，将抽象的“五级进阶”理念转化为可量化、可执行、可追踪的线上流程。学生通过完成任务获得积分，自动点亮技能点，实现逐级晋升，确保培养模式的精准落地。' },
+      {
+        title: ' 实训项目数据散落，缺乏统一管理与深度分析', 
+        desc: '建立统一的校级实训项目库，实现项目创建、审批、排课、执行到归档的全生命周期管理。同时，建设可视化数据大屏，为管理层提供各学院项目数量、学生参与度、完成情况等全景决策数据。' },
+      {
+        title: '技能成长过程不可视，学生缺乏明确的学习目标和动力。', 
+        desc: '系统根据学生参与的实训任务、积分获取情况，自动生成动态的个人技能画像。学生可以直观看到自己已掌握的“技能点”以及距离下一等级的差距，明确优势与不足，并获得持续进阶的动力。' },
+      
+    ],
     target: '商科专业群、实训中心、教务处',
     faq: [
       { q: '支持哪些部署方式？', a: '支持云端SaaS部署和本地私有化部署两种方式。SaaS部署无需购买服务器，开通即用；本地部署可保障数据完全自主可控，适合对数据安全要求较高的院校。' },
diff --git a/website/src/index.css b/website/src/index.css
index 8baf500..c741d05 100644
--- a/website/src/index.css
+++ b/website/src/index.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+  --font-sans: "DengXian", "SimHei", "Heiti SC", sans-serif;
 }
 
 @utility line-clamp-2 {
@@ -51,3 +51,20 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }
+
+/* Product page hero art titles */
+.hero-product-title {
+  font-family: "ZCOOL XiaoWei", "STSong", "SimSun", serif;
+  letter-spacing: 0.3em;
+  color: white;
+  text-shadow: 0 4px 60px rgba(0, 162, 234, 0.3),
+               0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.hero-product-slogan {
+  font-family: "Ma Shan Zheng", "STXingkai", cursive;
+  letter-spacing: 0.15em;
+  color: white;
+  text-shadow: 0 2px 40px rgba(0, 162, 234, 0.25),
+               0 0 80px rgba(0, 162, 234, 0.15);
+}
diff --git a/website/src/pages/Contact.jsx b/website/src/pages/Contact.jsx
index 01bf867..8c52de6 100644
--- a/website/src/pages/Contact.jsx
+++ b/website/src/pages/Contact.jsx
@@ -19,35 +19,41 @@ const requirements = [
 
 export default function Contact() {
   return (
-    <main>
+    <main className="bg-white">
       {/* Hero (深色) */}
       <div className="relative -mt-[70px]">
-        <section className="py-20 text-white 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: '30px 30px',
-          }}
-        />
-        <div className="relative max-w-7xl mx-auto px-4 text-center">
-          <p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">合作洽谈</p>
-          <h1 className="text-4xl md:text-5xl font-bold mb-4">携手合作，共建智慧校园</h1>
-          <p className="text-[#94a3b8] text-lg max-w-2xl mx-auto">
+        <section className="relative py-32 md:py-40 text-white overflow-hidden">
+        {/* Background image */}
+        <div className="absolute inset-0">
+          <img src={new URL('../assets/images/Carousel/huaban.jpg', import.meta.url).href} alt="" className="w-full h-full object-cover" />
+        </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-6xl font-bold mb-10 hero-product-title">携手合作</h1>
+            <h1 className="text-4xl md:text-6xl font-bold mb-10 hero-product-title">共建智慧校园</h1>
+          <p className="text-xl md:text-2xl max-w-2xl mx-auto leading-loose hero-product-slogan">
             诚邀广西各界教育伙伴，共同为职业院校提供优质的数字化解决方案
           </p>
         </div>
       </section>
       </div>
 
-      {/* Contact info (白底) */}
-      <section className="py-20 px-4 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <ScrollReveal className="text-center mb-12">
-            <p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Contact</p>
-            <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">联系方式</h2>
+      {/* Contact info */}
+      <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]">Contact</span>
+              </div>
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                联系方式
+              </h2>
+            </div>
           </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             {[
               { icon: MapPin, title: '公司地址', text: '南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房' },
               { icon: Phone, title: '联系电话', text: '0771-3864294' },
@@ -55,13 +61,23 @@ export default function Contact() {
             ].map((item, i) => {
               const Icon = item.icon
               return (
-                <ScrollReveal key={i} delay={i * 0.1}>
-                  <div className="text-center p-8 bg-[#f8fafc] rounded-2xl">
-                    <div className="w-12 h-12 bg-[#004ec4]/[0.08] rounded-xl flex items-center justify-center mx-auto mb-4">
-                      <Icon className="w-6 h-6 text-[#004ec4]" />
+                <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, #043b8f, 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">
+                          <Icon className="w-5 h-5 text-[#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-sm leading-relaxed">{item.text}</p>
                     </div>
-                    <h3 className="font-bold text-[#0f172a] mb-2">{item.title}</h3>
-                    <p className="text-[#64748b] text-sm">{item.text}</p>
                   </div>
                 </ScrollReveal>
               )
@@ -70,27 +86,42 @@ export default function Contact() {
         </div>
       </section>
 
-      {/* Agent benefits (白底) */}
-      <section className="py-20 px-4 bg-[#f8fafc]">
-        <div className="max-w-6xl mx-auto">
-          <ScrollReveal className="text-center mb-12">
-            <p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Partnership</p>
-            <h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">成为代理商</h2>
-            <p className="text-[#64748b] text-base max-w-2xl mx-auto">
-              诚邀广西各地区具有教育行业资源的合作伙伴，共享职业院校信息化发展机遇
-            </p>
+      {/* Agent benefits */}
+      <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]">Partnership</span>
+              </div>
+              <h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
+                成为代理商
+              </h2>
+              <p className="text-[#475569] text-lg md:text-xl mt-5 max-w-xl leading-[2]">
+                诚邀广西各地区具有教育行业资源的合作伙伴，共享职业院校信息化发展机遇
+              </p>
+            </div>
           </ScrollReveal>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-14">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-14 max-w-3xl mx-auto">
             {agentBenefits.map((item, i) => {
               const Icon = item.icon
               return (
-                <ScrollReveal key={i} delay={i * 0.1}>
-                  <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 h-full">
-                    <div className="w-10 h-10 rounded-xl bg-[#004ec4]/[0.08] flex items-center justify-center mb-4">
-                      <Icon className="w-5 h-5 text-[#004ec4]" />
+                <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, #043b8f, 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">{item.title}</h3>
+                      <p className="text-[#64748b] text-lg leading-relaxed">{item.desc}</p>
                     </div>
-                    <h3 className="text-base font-bold text-[#0f172a] mb-2">{item.title}</h3>
-                    <p className="text-[#64748b] text-sm leading-relaxed">{item.desc}</p>
                   </div>
                 </ScrollReveal>
               )
@@ -98,15 +129,23 @@ export default function Contact() {
           </div>
 
           <ScrollReveal>
-            <div className="max-w-2xl mx-auto">
-              <h3 className="text-lg font-bold text-[#0f172a] text-center mb-6">合作基本要求</h3>
-              <div className="space-y-3">
-                {requirements.map((req, i) => (
-                  <div key={i} className="flex items-center gap-3 bg-white rounded-xl px-5 py-4 border border-gray-100">
-                    <span className="w-7 h-7 rounded-full bg-[#004ec4]/[0.08] flex items-center justify-center text-[#004ec4] text-sm font-bold shrink-0">{i + 1}</span>
-                    <span className="text-[#475569] text-sm">{req}</span>
+            <div className="max-w-3xl mx-auto">
+              <div className="relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 overflow-hidden">
+                <div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
+                  style={{ background: 'linear-gradient(90deg, transparent, #043b8f, 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">
+                  <h3 className="text-2xl md:text-3xl font-black text-[#0f172a] mb-10 tracking-tight leading-[1.1]">合作基本要求</h3>
+                  <div className="space-y-6">
+                    {requirements.map((req, i) => (
+                      <div key={i} className="flex items-center gap-5">
+                        <span className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#043b8f]/[0.06] text-sm font-black text-[#043b8f] shrink-0">{i + 1}</span>
+                        <span className="text-[#334155] text-lg leading-relaxed">{req}</span>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                </div>
               </div>
             </div>
           </ScrollReveal>
@@ -114,6 +153,41 @@ export default function Contact() {
       </section>
 
       <ContactForm />
+
+      {/* 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={{
+            backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
+            backgroundSize: '24px 24px',
+          }}
+        />
+        <div className="relative max-w-3xl mx-auto text-center">
+          <ScrollReveal>
+            <h2 className="text-5xl md:text-6xl font-bold text-white mb-8">携手讯驰 共建智慧校园</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="/"
+                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>
     </main>
   )
 }
diff --git a/website/src/pages/Home.jsx b/website/src/pages/Home.jsx
index 92443b8..466c27b 100644
--- a/website/src/pages/Home.jsx
+++ b/website/src/pages/Home.jsx
@@ -21,22 +21,22 @@ const stats = [
 /* ─── Section 4: 开放能力 ─── */
 const capabilities = [
   {
-    title: '校企益邦', sub: '实习过程全掌控，就业数据一目了然',
+    title: '校企益邦', slug: 'smart-campus', sub: '实习过程全掌控，就业数据一目了然',
     desc: '面向职业院校实习就业管理的专业化平台，覆盖实习计划制定、过程跟踪、数据采集、鉴定评价全流程，已服务广西多所职业院校，帮助学校轻松应对教育厅数据上报要求。',
     tip: "实习计划管理、GPS签到+电子围栏、问卷式日志、多维鉴定评价、一键同步教育厅平台、微信小程序加持"
   },
   {
-    title: '科研项目管理', sub: '让科研管理告别纸质时代',
+    title: '科研项目管理', slug: 'exam-system', sub: '让科研管理告别纸质时代',
     desc: '面向高校及科研院所的全生命周期科研业务管理平台。覆盖项目申报、评审立项、经费管控、成果登记到数据统计的全流程数字化，已帮助多所高校实现科研管理从纸质流转到"一网通办"的跨越。',
     tip: "在线申报审批、智能查重防重复、经费精细管控、成果自动赋分、关键节点预警、年度报表一键导出"
   },
   {
-    title: '智慧党建平台', sub: '党建工作有痕，年终考核无忧',
+    title: '智慧党建平台', slug: 'teaching-resource', sub: '党建工作有痕，年终考核无忧',
     desc: '面向高校及职业院校各级党组织的智慧党建管理系统。以"党业融合、指标驱动、全程留痕"为核心理念，将三会一课、党员活动、工作记录等日常工作自动关联考核指标，实现年终考核"零重复填报"。',
     tip: "三级考核指标、三会一课数字化、万能工作记录、实时进度看板、发展党员管理、党建数据中心"
   },
   {
-    title: '实训教学管理', sub: '五级渐进，让每一次成长都看得见',
+    title: '实训教学管理', slug: 'internship', sub: '五级渐进，让每一次成长都看得见',
     desc: '专为职业院校商科专业群打造的实训项目管理系统。以"项目—模块—任务"三级结构为骨架，以"咖豆积分+技能画像"为引擎，将抽象的五级进阶培养模式变成可量化、可追踪、可激励的线上实战平台。',
     tip: "三级精细管理、咖豆积分引擎、五级自动晋级、动态技能画像、人才培养驾驶舱、积分商城"
   },
@@ -166,8 +166,8 @@ export default function Home() {
         <div className="max-w-6xl mx-auto">
           <ScrollReveal className="text-center mb-14">
             <p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Core Capabilities</p>
-            <h2 className="text-5xl md:text-6xl font-bold text-[#0f172a] mb-6">四大产品体系</h2>
-            <p className="text-[#64748b] text-base mx-auto whitespace-nowrap mb-4">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
+            <h2 className="text-5xl md:text-7xl font-bold text-[#0f172a] mb-6">四大产品体系</h2>
+            <p className="text-[#64748b] text-lg md:text-xl mx-auto whitespace-nowrap mb-4 leading-relaxed">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
           </ScrollReveal>
 
           {/* Tab bar */}
@@ -177,12 +177,12 @@ export default function Home() {
                 <button
                   key={p.slug}
                   onClick={() => setActiveCapability(i)}
-                  className={`flex items-center gap-2 px-5 py-2.5 rounded-lg text-[13px] font-medium transition-all border ${activeCapability === i
-                    ? 'text-[#004ec4] border-[#004ec4]'
-                    : 'text-[#475569] border-gray-200 hover:text-[#004ec4] hover:border-[#004ec4]'
+                  className={`flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-medium transition-all border ${activeCapability === i
+                    ? 'text-[#043b8f] border-[#043b8f]'
+                    : 'text-[#475569] border-gray-200 hover:text-[#043b8f] hover:border-[#043b8f]'
                     }`}
                 >
-                  <p.icon className="w-4 h-4" style={{ color: activeCapability === i ? '#004ec4' : p.themeColor }} />
+                  <p.icon className="w-5 h-5" style={{ color: activeCapability === i ? '#043b8f' : p.themeColor }} />
                   {p.name}
                 </button>
               ))}
@@ -202,36 +202,52 @@ export default function Home() {
                 {(activeCapability !== null ? [capabilities[activeCapability]] : capabilities).map((c, i) => {
                   const idx = activeCapability !== null ? activeCapability : i
                   return (
-                    <div key={idx} className={`relative p-8 rounded-2xl transition-all duration-300 cursor-pointer group overflow-hidden ${activeCapability === idx
+                    <div key={idx} className={`relative p-8 rounded-2xl transition-all duration-500 cursor-pointer group overflow-hidden ${activeCapability === idx
                       ? 'bg-white border border-[#004ec4]/15 shadow-[0_4px_24px_rgba(0,78,196,0.08)]'
                       : 'hover:bg-gray-50/80 border border-gray-100'
                       }`} onClick={() => setActiveCapability(idx)}>
                       {activeCapability === idx && (
-                        <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[#004ec4] via-[#004ec4]/80 to-[#004ec4]/40" />
+                        <div className="absolute top-0 left-0 right-0 h-[2px]"
+                          style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
                       )}
-                      <h3 className={`text-xl font-bold transition-colors duration-300 ${activeCapability === idx ? 'text-[#004ec4]' : 'text-[#0f172a]'
+                      <div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.02] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <div className="flex items-center gap-3 mb-3">
+                        <span className={`flex items-center justify-center w-7 h-7 rounded-md text-[11px] font-black transition-colors duration-300 ${activeCapability === idx
+                          ? 'bg-[#043b8f]/[0.08] text-[#043b8f]'
+                          : 'bg-gray-100 text-[#94a3b8]'
+                          }`}>0{idx + 1}</span>
+                        <div className={`h-px flex-1 transition-colors duration-300 ${activeCapability === idx
+                          ? 'bg-gradient-to-r from-[#043b8f]/15 to-transparent'
+                          : 'bg-gray-100'
+                          }`} />
+                      </div>
+                      <h3 className={`text-2xl font-bold transition-colors duration-300 ${activeCapability === idx ? 'text-[#043b8f]' : 'text-[#0f172a]'
                         }`}>{c.title}</h3>
-                      <p className={`text-[15px] mt-1 font-medium transition-colors duration-300 ${activeCapability === idx ? 'text-[#004ec4]/60' : 'text-[#94a3b8]'
+                      <p className={`text-base mt-1.5 font-medium transition-colors duration-300 ${activeCapability === idx ? 'text-[#043b8f]/60' : 'text-[#94a3b8]'
                         }`}>{c.sub}</p>
-                      <p className="text-[15px] text-[#334155] leading-[2] mt-4">{c.desc}</p>
+                      <p className="text-base text-[#334155] leading-[2] mt-4">{c.desc}</p>
                       {c.tip && (
-                        <div className="mt-4 flex flex-wrap gap-2.5">
+                        <div className="mt-5 flex flex-wrap gap-2.5">
                           {c.tip.split('、').map((t, ti) => (
-                            <span key={ti} className={`inline-block px-4 py-2 text-[13px] rounded-lg transition-colors duration-200 ${
+                            <span key={ti} className={`relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300 ${
                               activeCapability === idx
-                                ? 'bg-[#004ec4]/[0.06] text-[#004ec4] border border-[#004ec4]/12'
-                                : 'bg-gray-50 text-[#94a3b8] border border-gray-100'
-                            }`}>{t}</span>
+                                ? 'text-[#043b8f] bg-[#043b8f]/[0.06] border border-[#043b8f]/15'
+                                : 'text-[#94a3b8] bg-gray-50 border border-gray-100'
+                            }`}>
+                              <span className={`w-1 h-1 rounded-full mr-2 ${activeCapability === idx ? 'bg-[#043b8f]' : 'bg-[#94a3b8]/40'}`} />
+                              {t}
+                            </span>
                           ))}
                         </div>
                       )}
                       {activeCapability === idx && (
-                        <div className="mt-5">
-                          <button onClick={() => setActiveCapability(null)}
-                            className="text-sm text-[#004ec4]/60 hover:text-[#004ec4] hover:underline flex items-center gap-1 transition-colors duration-200">
+                        <div className="mt-5 flex justify-end">
+                          <Link to={`/product/${c.slug}`}
+                            onClick={(e) => e.stopPropagation()}
+                            className="text-sm text-[#043b8f]/60 hover:text-[#043b8f] hover:underline flex items-center gap-1 transition-colors duration-200">
                             查看全部
                             <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /></svg>
-                          </button>
+                          </Link>
                         </div>
                       )}
                     </div>
diff --git a/website/src/pages/ProductPage.jsx b/website/src/pages/ProductPage.jsx
index 88da180..17505e8 100644
--- a/website/src/pages/ProductPage.jsx
+++ b/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>
   )
 }