统一字体 响应式 调整
This commit is contained in:
小潘
@@ -30,9 +30,9 @@ export default function Contact() {
|
||||
{/* 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">
|
||||
<h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold mb-6 md:mb-10 hero-product-title">携手合作</h1>
|
||||
<h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold mb-6 md:mb-10 hero-product-title">共建智慧校园</h1>
|
||||
<p className="text-base xs:text-lg sm:text-xl md:text-2xl max-w-2xl mx-auto leading-loose hero-product-slogan">
|
||||
诚邀广西各界教育伙伴，共同为职业院校提供优质的数字化解决方案
|
||||
</p>
|
||||
</div>
|
||||
@@ -45,15 +45,15 @@ export default function Contact() {
|
||||
<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>
|
||||
<span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Contact</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
|
||||
<h2 className="text-3xl xs:text-4xl sm:text-5xl 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">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
|
||||
{[
|
||||
{ icon: MapPin, title: '公司地址', text: '南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房' },
|
||||
{ icon: Phone, title: '联系电话', text: '0771-3864294' },
|
||||
@@ -62,21 +62,20 @@ export default function Contact() {
|
||||
const Icon = item.icon
|
||||
return (
|
||||
<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="relative bg-[#fafbfc] rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#004ec4]/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" />
|
||||
|
||||
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
|
||||
<div className="absolute top-0 right-0 w-20 sm:w-28 h-20 sm:h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
|
||||
|
||||
<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 className="flex items-center gap-3 mb-4 md:mb-5">
|
||||
<div className="w-9 h-9 sm:w-11 sm:h-11 rounded-xl flex items-center justify-center bg-[#004ec4]/[0.12] border border-[#004ec4]/20">
|
||||
<Icon className="w-4 h-4 sm:w-5 sm:h-5 text-[#004ec4]" />
|
||||
</div>
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-[#043b8f]/10 to-transparent" />
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-[#004ec4]/25 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>
|
||||
<h3 className="text-lg sm:text-xl font-bold text-[#0f172a] mb-2 md:mb-3">{item.title}</h3>
|
||||
<p className="text-[#64748b] text-sm sm:text-base leading-relaxed">{item.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
@@ -92,34 +91,33 @@ export default function Contact() {
|
||||
<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>
|
||||
<span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
|
||||
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Partnership</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
|
||||
<h2 className="text-3xl xs:text-4xl sm:text-5xl 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 className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md:mt-5 max-w-xl leading-[1.8] md:leading-[2]">
|
||||
诚邀广西各地区具有教育行业资源的合作伙伴，共享职业院校信息化发展机遇
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-14 max-w-3xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-10 md:mb-14 max-w-3xl mx-auto">
|
||||
{agentBenefits.map((item, i) => {
|
||||
return (
|
||||
<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="relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#004ec4]/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" />
|
||||
|
||||
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
|
||||
<div className="absolute top-0 right-0 w-24 sm:w-32 h-24 sm:h-32 bg-[#004ec4]/[0.06] rounded-bl-full" />
|
||||
|
||||
<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 className="flex items-center gap-3 mb-3 md:mb-4">
|
||||
<span className="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-md bg-[#004ec4]/[0.12] text-xs font-black text-[#004ec4]">0{i + 1}</span>
|
||||
<div className="h-px flex-1 bg-gradient-to-r from-[#004ec4]/25 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>
|
||||
<h3 className="text-lg sm:text-xl font-bold text-[#0f172a] mb-2 md:mb-3">{item.title}</h3>
|
||||
<p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
@@ -129,18 +127,18 @@ export default function Contact() {
|
||||
|
||||
<ScrollReveal>
|
||||
<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="relative bg-white rounded-xl md:rounded-2xl p-6 sm: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" />
|
||||
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
|
||||
<div className="absolute top-0 right-0 w-20 sm:w-28 h-20 sm:h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
|
||||
|
||||
<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">
|
||||
<h3 className="text-xl sm:text-2xl md:text-3xl font-black text-[#0f172a] mb-6 md:mb-10 tracking-tight leading-[1.1]">合作基本要求</h3>
|
||||
<div className="space-y-4 md: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 key={i} className="flex items-center gap-4 md:gap-5">
|
||||
<span className="flex items-center justify-center w-7 h-7 sm:w-9 sm:h-9 rounded-lg bg-[#004ec4]/[0.12] text-xs sm:text-sm font-black text-[#004ec4] shrink-0">{i + 1}</span>
|
||||
<span className="text-[#334155] text-sm sm:text-base md:text-lg leading-relaxed">{req}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -164,22 +162,22 @@ export default function Contact() {
|
||||
/>
|
||||
<div className="relative max-w-3xl mx-auto text-center">
|
||||
<ScrollReveal>
|
||||
<h2 className="text-4xl md:text-6xl font-bold text-white mb-8">携手讯驰 共建智慧校园</h2>
|
||||
<h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 md:mb-8">携手讯驰 共建智慧校园</h2>
|
||||
|
||||
<p className="text-white text-md mb-14 max-w-xl mx-auto leading-relaxed">
|
||||
<p className="text-white text-sm xs:text-base sm:text-lg mb-10 md:mb-14 max-w-xl mx-auto leading-relaxed">
|
||||
获取产品演示与个性化方案，迈出数字化转型第一步
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<div className="flex flex-col sm:flex-row gap-3 xs: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"
|
||||
className="inline-flex items-center justify-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-xl text-xs xs:text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
|
||||
>
|
||||
返回首页
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
<ArrowRight className="w-3.5 h-3.5 xs:w-4 xs: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"
|
||||
className="inline-flex items-center justify-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-xl text-xs xs:text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
|
||||
>
|
||||
致电 0771-3864294
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user