完成大部分页面

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>
   )
 }