首页已完成

2026-05-28 09:01:30 +08:00
parent acaf262f3f
commit 0cf72dc47f
30 changed files with 7227 additions and 0 deletions
@@ -0,0 +1,119 @@
+import { Phone, MapPin, Clock, Package, Users, TrendingUp, ShieldCheck, ArrowRight } from 'lucide-react'
+import ContactForm from '../components/ContactForm'
+import ScrollReveal from '../components/ScrollReveal'
+import { Link } from 'react-router-dom'
+
+const agentBenefits = [
+  { icon: Package, title: '成熟产品体系', desc: '四大产品线覆盖职业院校核心需求，经多所院校实际使用验证，功能稳定可靠。' },
+  { icon: TrendingUp, title: '广阔市场空间', desc: '广西区内 80+ 所职业院校，信息化建设正加速，合作前景可观。' },
+  { icon: ShieldCheck, title: '全方位赋能支持', desc: '产品培训、售前演示、方案撰写、招投标支撑，一站式协助代理商展业。' },
+  { icon: Users, title: '丰厚利润回报', desc: '合理代理价格 + 完善区域保护，保障代理商长期稳定收益。' },
+]
+
+const requirements = [
+  '具有广西区内教育行业资源或政府关系',
+  '具备法人资格或合法经营资质',
+  '认可教育信息化行业，愿与讯驰长期共同发展',
+  '具备基本的技术支持和客户服务能力',
+]
+
+export default function Contact() {
+  return (
+    <main>
+      {/* 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">
+            诚邀广西各界教育伙伴，共同为职业院校提供优质的数字化解决方案
+          </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>
+          </ScrollReveal>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-20">
+            {[
+              { icon: MapPin, title: '公司地址', text: '南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房' },
+              { icon: Phone, title: '联系电话', text: '0771-3864294' },
+              { icon: Clock, title: '工作时间', text: '周一至周五 9:00 - 18:00' },
+            ].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]" />
+                    </div>
+                    <h3 className="font-bold text-[#0f172a] mb-2">{item.title}</h3>
+                    <p className="text-[#64748b] text-sm">{item.text}</p>
+                  </div>
+                </ScrollReveal>
+              )
+            })}
+          </div>
+        </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>
+          </ScrollReveal>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-14">
+            {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]" />
+                    </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>
+              )
+            })}
+          </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>
+                ))}
+              </div>
+            </div>
+          </ScrollReveal>
+        </div>
+      </section>
+
+      <ContactForm />
+    </main>
+  )
+}