panhuixia/xunchiProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

统一字体 响应式 调整

Browse Source
This commit is contained in:
小潘
2026-06-18 14:41:04 +08:00
parent 68e6e98234
commit 9309e3e76a
9 changed files with 688 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/index.html
+2 -1
View File
@@ -4,10 +4,11 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ===== GEO: 语义化 meta 标签 ===== -->
<meta name="description" content="广西讯驰是专注智慧教育领域的科技企业，为职业院校和高校提供实习就业管理、科研管理、智慧党建、实训管理平台等数字化解决方案，已服务150+所院校、覆盖5万+学生。" />
<meta name="keywords" content="智慧教育,实习管理平台,科研管理系统,智慧党建,实训管理平台,广西讯驰,职业院校信息化" />
<meta name="baidu-site-verification" content="codeva-N8Wnw7Njp2" />
<title>广西讯驰 - 智慧教育数字化解决方案 | 校企益邦 · 科研管理 · 智慧党建 · 实训管理平台</title>
<!-- ===== GEO: Schema.org JSON-LD 结构化数据——AI 直接解析企业信息 ===== -->
website/src/components/CertificateCard.jsx
+188
View File
@@ -0,0 +1,188 @@
import React from 'react'
import ScrollReveal from './ScrollReveal'
import { Award, Leaf, Shield, Lock, Wrench } from 'lucide-react'
/* ─── 证书数据 — 统一蓝色 ─── */
const certificates = [
{
id: 'iso9001',
icon: Award,
code: 'ISO 9001',
name: '质量管理体系认证',
date: '2024年3月',
color: '#004ec4',
sealColor: '#004ec4',
},
{
id: 'iso14001',
icon: Leaf,
code: 'ISO 14001',
name: '环境管理体系认证',
date: '2024年3月',
color: '#004ec4',
sealColor: '#004ec4',
},
{
id: 'iso45001',
icon: Shield,
code: 'ISO 45001',
name: '职业健康安全管理体系认证',
date: '2024年3月',
color: '#004ec4',
sealColor: '#004ec4',
},
{
id: 'iso27001',
icon: Lock,
code: 'ISO 27001',
name: '信息安全管理体系认证',
date: '2024年3月',
color: '#004ec4',
sealColor: '#004ec4',
},
{
id: 'iso20000',
icon: Wrench,
code: 'ISO 20000',
name: '信息技术服务管理体系认证',
date: '2024年3月',
color: '#004ec4',
sealColor: '#004ec4',
},
]
export default function CertificateCard({ certificate, index, scale = 1 }) {
const { icon: Icon, code, name, desc, color } = certificate
return (
<ScrollReveal delay={index * 0.08}>
<div className="group relative transition-all duration-500 w-[260px] h-[380px] sm:w-[300px] sm:h-[440px] md:w-[360px] md:h-[500px]"
style={{ transform: `scale(${scale})` }}
>
{/* ── 外阴影 ── */}
<div className="absolute inset-0 rounded-sm translate-y-1.5 translate-x-1 opacity-25 group-hover:opacity-35 transition-opacity duration-500"
style={{ background: `linear-gradient(135deg, ${color}40, ${color}15)` }}
/>
{/* ── 证书主体 ── */}
<div className="relative rounded-sm h-full flex flex-col"
style={{ backgroundColor: '#faf7ed' }}
>
{/* 外层粗边框 */}
<div className="absolute inset-0 border-[3px] rounded-sm"
style={{ borderColor: `${color}50` }}
/>
{/* 中层装饰线 */}
<div className="absolute inset-[3px] border rounded-sm"
style={{ borderColor: `${color}25` }}
/>
{/* 内层双线框 */}
<div className="absolute inset-[7px] border rounded-sm"
style={{ borderColor: `${color}18` }}
/>
<div className="absolute inset-[9px] border rounded-sm"
style={{ borderColor: `${color}0f` }}
/>
{/* 四边中点装饰 */}
<BorderCenterOrnament position="top" color={color} />
<BorderCenterOrnament position="bottom" color={color} />
<BorderCenterOrnament position="left" color={color} />
<BorderCenterOrnament position="right" color={color} />
{/* 内容区 */}
<div className="relative px-6 py-6 sm:px-8 sm:py-8 md:px-10 md:py-10 flex-1 flex flex-col items-center text-center justify-center">
{/* 认证图标 */}
<div className="relative mb-3 sm:mb-4">
<div className="w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 rounded-full border-2 flex items-center justify-center group-hover:scale-110 transition-transform duration-500"
style={{ borderColor: `${color}40`, backgroundColor: `${color}08` }}
>
<Icon className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" style={{ color }} strokeWidth={1.5} />
</div>
</div>
{/* 认证编号 */}
<div className="text-base sm:text-lg md:text-xl font-black tracking-[0.15em] mb-1 sm:mb-2" style={{ color }}>
{code}
</div>
{/* 认证名称 */}
<div className="text-sm sm:text-base font-bold text-[#1e293b] mb-3 sm:mb-4 leading-tight">
{name}
</div>
{/* 分隔线 — 带花纹 */}
<div className="flex items-center gap-2 mb-3 sm:mb-4 w-full max-w-[120px] sm:max-w-[140px] md:max-w-[160px]">
<div className="flex-1 h-px" style={{ background: `linear-gradient(90deg, transparent, ${color}50)` }} />
<div className="flex gap-0.5">
<div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}60` }} />
<div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}40` }} />
<div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}60` }} />
</div>
<div className="flex-1 h-px" style={{ background: `linear-gradient(90deg, ${color}50, transparent)` }} />
</div>
{/* 证明文字 */}
<p className="text-xs sm:text-sm text-[#64748b] leading-relaxed mb-4 sm:mb-5 max-w-[240px] sm:max-w-[280px] md:max-w-[320px]">
{desc}
</p>
</div>
{/* 底部蓝色线条 */}
<div className="relative h-1.5 bg-gradient-to-r from-blue-600 to-blue-800">
{/* 折角 */}
<div className="absolute left-0 top-0 w-1.5 h-1.5"
style={{ background: 'linear-gradient(135deg, #faf7ed 50%, transparent 50%)' }}
/>
<div className="absolute right-0 top-0 w-1.5 h-1.5"
style={{ background: 'linear-gradient(225deg, #faf7ed 50%, transparent 50%)' }}
/>
</div>
</div>
{/* hover 顶部高光线 */}
<div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-t-sm"
style={{ background: `linear-gradient(90deg, transparent, ${color}, transparent)` }}
/>
</div>
</ScrollReveal>
)
}
/* ─── 边框中点装饰 ─── */
function BorderCenterOrnament({ position, color }) {
const posMap = {
'top': 'top-[3px] left-1/2 -translate-x-1/2',
'bottom': 'bottom-[3px] left-1/2 -translate-x-1/2',
'left': 'left-[3px] top-1/2 -translate-y-1/2',
'right': 'right-[3px] top-1/2 -translate-y-1/2',
}
const isHorizontal = position === 'top' || position === 'bottom'
return (
<div className={`absolute ${posMap[position]} flex ${isHorizontal ? 'flex-row' : 'flex-col'} items-center gap-0.5`}
style={{ opacity: 0.5 }}
>
<div className="w-2 h-2 rounded-full border" style={{ borderColor: `${color}40`, backgroundColor: `${color}10` }} />
<div className="w-1 h-1 rounded-full" style={{ backgroundColor: `${color}50` }} />
<div className="w-2 h-2 rounded-full border" style={{ borderColor: `${color}40`, backgroundColor: `${color}10` }} />
</div>
)
}
export { certificates }
website/src/components/CertificateCarousel.jsx
+94
View File
@@ -0,0 +1,94 @@
import React, { useState, useEffect, useCallback } from 'react'
import CertificateCard, { certificates } from './CertificateCard'
export default function CertificateCarousel() {
const [active, setActive] = useState(2) // 从中间开始 (ISO 45001)
const [isMobile, setIsMobile] = useState(false)
// 检测是否为移动端
useEffect(() => {
const check = () => setIsMobile(window.innerWidth < 768)
check()
window.addEventListener('resize', check)
return () => window.removeEventListener('resize', check)
}, [])
const next = useCallback(() => {
setActive(prev => (prev + 1) % certificates.length)
}, [])
// 自动轮播
useEffect(() => {
const timer = setInterval(next, 3000)
return () => clearInterval(timer)
}, [next])
const goTo = (index) => setActive(index)
// 响应式参数
const containerHeight = isMobile ? 'h-[360px]' : 'h-[600px]'
const translateXBase = isMobile ? 140 : 260
const scaleCenter = 1.0
const scaleNear = isMobile ? 0.8 : 0.7
const scaleFar = isMobile ? 0.5 : 0.4
return (
<div className="relative max-w-4xl mx-auto">
{/* 证书展示区 */}
<div className={`relative ${containerHeight} flex items-center justify-center`}>
{certificates.map((cert, i) => {
let offset = i - active
// 循环环绕：取最短路径
if (offset > 2) offset = offset - certificates.length
if (offset < -2) offset = offset + certificates.length
const absOffset = Math.abs(offset)
let scale = scaleCenter
if (absOffset === 1) scale = scaleNear
if (absOffset >= 2) scale = scaleFar
let opacity = 1
if (absOffset === 1) opacity = 0.6
if (absOffset >= 2) opacity = 0
let translateX = offset * translateXBase
let zIndex = 10 - absOffset
return (
<div
key={cert.id}
className="absolute transition-all duration-500 ease-in-out cursor-pointer"
style={{
transform: `translateX(${translateX}px) scale(${scale})`,
opacity,
zIndex,
filter: absOffset >= 2 ? 'blur(2px)' : 'none',
}}
onClick={() => goTo(i)}
>
<CertificateCard certificate={cert} index={i} scale={isMobile ? 0.7 : 1} />
</div>
)
})}
</div>
{/* 底部指示点 */}
<div className="flex justify-center gap-2 mt-4">
{certificates.map((cert, i) => (
<button
key={cert.id}
onClick={() => goTo(i)}
className={`w-2 h-2 rounded-full transition-all duration-300 ${
i === active
? 'bg-[#004ec4] w-6'
: 'bg-[#004ec4]/30 hover:bg-[#004ec4]/50'
}`}
/>
))}
</div>
</div>
)
}
website/src/components/ContactForm.jsx
+18 -18
View File
@@ -37,7 +37,7 @@ export default function ContactForm() {
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]';
const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
return (
<>
@@ -46,21 +46,21 @@ export default function ContactForm() {
<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>
<span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Inquiry</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-relaxed">填写表单，我们将在 1 个工作日内与您联系</p>
<p className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md: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" />
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
<div className="absolute top-0 right-0 w-28 h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-16 h-16 border border-[#004ec4]/[0.15] rounded-tr-3xl" />
<div className="relative z-10">
<form onSubmit={handleSubmit} className="space-y-8">
@@ -91,7 +91,7 @@ export default function ContactForm() {
关注产品 <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]">
className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow bg-white text-[#64748b]">
<option value="">请选择关注的产品</option>
{productOptions.map((product) => (
<option key={product} value={product}>{product}</option>
@@ -107,8 +107,8 @@ export default function ContactForm() {
<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)' }}
className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#004ec4]/30"
style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}
>
提交咨询
</button>
@@ -123,8 +123,8 @@ export default function ContactForm() {
<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" />
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
<div className="absolute top-0 right-0 w-20 h-20 bg-[#004ec4]/[0.06] rounded-bl-full" />
<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">
@@ -132,16 +132,16 @@ export default function ContactForm() {
</button>
<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 className="w-16 h-16 rounded-full bg-[#004ec4]/[0.12] border border-[#004ec4]/20 flex items-center justify-center mx-auto mb-6">
<CheckCircle className="w-8 h-8 text-[#004ec4]" />
</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> 内与您联系
感谢您的咨询！我们将在 <span className="font-bold text-[#004ec4]">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)' }}>
className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#004ec4]/30"
style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}>
我知道了
</button>
</div>
website/src/components/Footer.jsx
+4 -4
View File
@@ -20,16 +20,16 @@ export default function Footer() {
<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>
<span className="text-base sm:text-lg font-bold text-white tracking-tight">讯驰科技</span>
</div>
<p className="text-white/60 text-xs leading-loose mb-4">智慧校园解决方案提供商</p>
<p className="text-white/60 text-xs sm:text-sm 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>
<span className="text-white/70 text-xs sm:text-sm 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>
<span className="text-white/70 text-xs sm:text-sm">0771-3864294</span>
</div>
</div>
website/src/components/Navbar.jsx
+7 -7
View File
@@ -86,7 +86,7 @@ export default function Navbar() {
<Link to="/" className="flex items-center gap-3 group">
<img src="/favicon.ico" alt="讯驰" className="w-[100px] h-auto" />
<div className="flex flex-col leading-tight">
<span className={`text-xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span>
<span className={`text-3xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span>
<span className={`text-[10px] tracking-[0.2em] uppercase font-medium text-white/80 transition-colors duration-500`}>XUNCHI TECH</span>
</div>
</Link>
@@ -97,10 +97,10 @@ export default function Navbar() {
<Link
key={item.to}
to={item.to}
className={`relative px-4 font-medium rounded-sm transition-all duration-300 nav-item ${
className={`relative px-5 font-medium rounded-sm transition-all duration-300 nav-item ${
location.pathname === item.to
? 'nav-active-tab text-white font-semibold text-base'
: 'text-white hover:text-white text-sm py-3'
? 'nav-active-tab text-white font-semibold text-xl'
: 'text-white hover:text-white text-lg py-3'
}`}
>
{item.label}
@@ -115,7 +115,7 @@ export default function Navbar() {
<div className={`hidden lg:flex items-center shrink-0 transition-colors duration-500`}>
<a
href="tel:07713864294"
className="flex items-center gap-1.5 text-sm font-medium text-white hover:text-white transition-all duration-300"
className="flex items-center gap-1.5 text-lg font-medium text-white hover:text-white transition-all duration-300"
>
<Phone className="w-3.5 h-3.5" />
0771-3864294
@@ -144,7 +144,7 @@ export default function Navbar() {
<Link
key={item.to}
to={item.to}
className={`block px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
className={`block px-4 py-3 rounded-xl text-lg font-medium transition-colors ${
location.pathname === item.to
? 'text-white bg-white/[0.06]'
: 'text-white/50 hover:bg-white/[0.04]'
@@ -154,7 +154,7 @@ export default function Navbar() {
</Link>
))}
<div className="pt-3 mt-2 border-t border-white/[0.06]">
<a href="tel:07713864294" className="flex items-center gap-2 px-5 py-3.5 text-[#043b8f] text-base font-medium">
<a href="tel:07713864294" className="flex items-center gap-2 px-5 py-3.5 text-[#f3f3f4] text-base font-medium">
<Phone className="w-4 h-4" />
0771-3864294
</a>
website/src/pages/Contact.jsx
+46 -48
View File
@@ -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>
website/src/pages/Home.jsx
+201 -230
View File
@@ -1,13 +1,12 @@
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useRef } from 'react'
import { Link } from 'react-router-dom';
import HeroSection from '../components/HeroSection'
import ScrollReveal from '../components/ScrollReveal'
import CertificateCarousel from '../components/CertificateCarousel'
import { products } from '../data/products'
import hunBg from '../assets/images/hun.jpg'
import { ArrowRight, Shield, Award } from 'lucide-react'
import { ArrowRight, MapPin, Award, Headphones, Shield } from 'lucide-react'
import StatNumber from '../components/StatNumber'
import hunBg from '../assets/images/hun.jpg'
/* ─── Section 3: 数据亮点 ─── */
const stats = [
{ num: '40', suffix: '+', label: '软件著作权' },
@@ -42,41 +41,6 @@ const capabilities = [
/* ─── Section 7: 客户认可 ─── */
const customerCards = [
{
type: 'featured',
icon: Award,
title: 'AAA级信用企业',
subtitle: '高新技术企业',
featured: true,
},
{
type: 'school',
icon: Shield,
title: 'ISO 9001\n质量管理体系',
},
{
type: 'video',
icon: Shield,
title: 'ISO 14001\n环境管理体系',
},
{
type: 'satisfaction',
icon: Shield,
title: 'ISO 45001\n职业健康安全管理',
},
{
type: 'satisfaction',
icon: Shield,
title: 'ISO 27001\n信息安全管理体系',
},
{
type: 'satisfaction',
icon: Shield,
title: 'ISO 20000\n信息技术服务管理',
},
]
@@ -85,20 +49,21 @@ const customerCards = [
export default function Home() {
const [activeCapability, setActiveCapability] = useState(0)
const [tagRadius, setTagRadius] = useState(68)
const [activeStep, setActiveStep] = useState(0)
const [lightPos, setLightPos] = useState(0) // 光点位置（立即移动）
const timerRef = useRef(null)
const activeColor = products[activeCapability]?.themeColor || '#043b8f'
const handleStepClick = (i) => {
if (timerRef.current) clearTimeout(timerRef.current)
setLightPos(i) // 光点立即开始滑动
timerRef.current = setTimeout(() => {
setActiveStep(i) // 700ms 后节点变色
}, 700)
}
useEffect(() => {
const updateRadius = () => {
const w = window.innerWidth
if (w < 480) setTagRadius(40)
else if (w < 768) setTagRadius(48)
else if (w < 1024) setTagRadius(54)
else setTagRadius(60)
}
updateRadius()
window.addEventListener('resize', updateRadius)
return () => window.removeEventListener('resize', updateRadius)
return () => { if (timerRef.current) clearTimeout(timerRef.current) }
}, [])
return (
@@ -132,22 +97,22 @@ export default function Home() {
{/* ─── 4. 开放能力区（白底） ─── */}
<section id="products" className="py-20 px-4 bg-white">
<div className="max-w-7xl mx-auto">
<ScrollReveal className="text-center mb-14">
<ScrollReveal className="text-center mb-8 md:mb-14">
<p className="text-[10px] xs:text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Core Capabilities</p>
<h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-7xl font-bold text-[#0f172a] mb-6">四大产品体系</h2>
<p className="text-[#64748b] text-base xs:text-lg md:text-xl lg:text-2xl mx-auto md:whitespace-nowrap mb-4 leading-relaxed">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
<h2 className="text-2xl xs:text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold text-[#0f172a] mb-6">四大产品体系</h2>
<p className="text-[#64748b] text-sm xs:text-base md:text-lg lg:text-xl xl:text-2xl mx-auto max-w-3xl md:whitespace-nowrap mb-4 leading-relaxed px-2">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
</ScrollReveal>
{/* Tab bar */}
<ScrollReveal>
<div className="flex justify-center gap-1 mb-26">
<div className="flex flex-wrap justify-center gap-1 sm:gap-1.5 mb-8 md:mb-26">
{products.map((p, i) => {
const isActive = activeCapability === i
return (
<button
key={p.slug}
onClick={() => setActiveCapability(i)}
className="flex items-center gap-2 xs:gap-3 px-4 xs:px-5 sm:px-7 py-2.5 xs:py-3.5 rounded-lg text-base xs:text-lg sm:text-xl font-bold transition-all border"
className="flex items-center justify-center gap-1 xs:gap-2 sm:gap-3 px-2 xs:px-3 sm:px-5 md:px-7 py-2 xs:py-2.5 sm:py-3.5 rounded-lg text-xs xs:text-sm sm:text-base md:text-lg lg:text-xl font-bold transition-all border w-[calc(50%-0.25rem)] xs:w-[calc(50%-0.375rem)] sm:w-auto"
style={{
color: isActive ? p.themeColor : '#475569',
borderColor: isActive ? p.themeColor : '#e5e7eb',
@@ -155,7 +120,7 @@ export default function Home() {
onMouseEnter={(e) => { if (!isActive) { e.target.style.color = p.themeColor; e.target.style.borderColor = p.themeColor; } }}
onMouseLeave={(e) => { if (!isActive) { e.target.style.color = '#475569'; e.target.style.borderColor = '#e5e7eb'; } }}
>
<p.icon className="w-4 h-4 xs:w-5 xs:h-5" style={{ color: isActive ? p.themeColor : p.themeColor }} />
<p.icon className="w-3 h-3 xs:w-4 xs:h-4 sm:w-5 sm:h-5" style={{ color: isActive ? p.themeColor : p.themeColor }} />
{p.name}
</button>
)
@@ -165,84 +130,74 @@ export default function Home() {
{/* Left-right layout */}
<ScrollReveal>
<div className="flex flex-col lg:flex-row gap-8 lg:gap-24 lg:items-center mb-32 mt-8">
<div className="flex flex-col mb-16 md:mb-32 mt-4 md:mt-8 bg-white rounded-2xl md:rounded-3xl border border-gray-200 shadow-lg overflow-hidden">
{/* ── 窗口标题栏（macOS 风格） ── */}
<div className="flex items-center gap-2 px-4 py-2.5 md:px-5 md:py-3 bg-gray-100 border-b border-gray-200">
<div className="w-3 h-3 rounded-full bg-red-400 flex-shrink-0" />
<div className="w-3 h-3 rounded-full bg-yellow-400 flex-shrink-0" />
<div className="w-3 h-3 rounded-full bg-green-400 flex-shrink-0" />
<span className="text-xs text-gray-400 ml-2 font-medium truncate">
{capabilities[activeCapability].title} — 产品详情
</span>
</div>
{/* ── 内容区 ── */}
<div className="flex flex-col lg:flex-row gap-6 md:gap-8 lg:gap-12 xl:gap-24 lg:items-stretch p-6 sm:p-8 md:p-10 lg:p-12 bg-gradient-to-br from-gray-50 to-white lg:h-[520px]">
{/* Left: visual — 产品图片 */}
<div className="w-full lg:w-1/2 lg:max-w-xl">
<div className="w-full lg:w-1/2 lg:max-w-xl flex items-center justify-center">
{products[activeCapability]?.heroImage && (
<img src={products[activeCapability].heroImage} alt={products[activeCapability].name} className="w-full h-auto" />
<img src={products[activeCapability].heroImage} alt={products[activeCapability].name} className="w-full h-auto max-h-full object-contain" />
)}
</div>
{/* Right: text — 折角卡片（与产品简介样式一致） */}
<div className="w-full lg:w-1/2 lg:max-w-xl">
<div className="relative bg-white rounded-2xl shadow-[0_4px_32px_-8px_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.04)]">
{/* ── 右上折角 ── */}
<div className="absolute top-0 right-0 w-[100px] h-[100px] md:w-[130px] md:h-[130px] overflow-hidden rounded-tr-2xl z-20 pointer-events-none">
<div className="absolute top-0 right-0 w-full h-full"
style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)', background: 'rgba(0,0,0,0.1)', filter: 'blur(4px)', transform: 'translate(2px, 2px)' }} />
<div className="absolute top-0 right-0 w-full h-full"
style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)', background: `linear-gradient(225deg, ${activeColor} 0%, ${activeColor}cc 100%)` }} />
<div className="absolute top-0 right-0 w-full h-full"
style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)', background: `linear-gradient(225deg, rgba(255,255,255,0.28) 0%, transparent 50%)` }} />
<div className="absolute top-0 right-0 w-full h-full"
style={{ background: `linear-gradient(225deg, transparent 37%, rgba(0,0,0,0.07) 39%, rgba(0,0,0,0.03) 41%, transparent 43%)` }} />
{React.createElement(products[activeCapability].icon, {
className: "absolute w-[16px] h-[16px] md:w-[20px] md:h-[20px] text-yellow-400 drop-shadow-sm",
style: { top: '18px', right: '14px', transform: 'rotate(45deg)' },
strokeWidth: 2.5
})}
</div>
{/* Right: text — 纯文字布局 */}
<div className="w-full lg:w-1/2 lg:max-w-xl flex flex-col justify-center">
{/* 顶部装饰线 + 标签 */}
<div className="flex items-center gap-3 mb-3 md:mb-4">
<span className="w-6 md:w-8 h-[2px] rounded-full" style={{ backgroundColor: activeColor + '66' }} />
<span className="text-xs sm:text-sm md:text-lg font-bold tracking-[0.22em] uppercase" style={{ color: activeColor + '99' }}>
Core Capability
</span>
</div>
{/* ── 内容区 ── */}
<div className="relative p-6 md:p-8 lg:p-10">
{/* 顶部装饰线 + 标签 */}
<div className="flex items-center gap-3 mb-4">
<span className="w-8 h-[2px] rounded-full" style={{ backgroundColor: activeColor + '66' }} />
<span className="text-base md:text-lg font-bold tracking-[0.22em] uppercase" style={{ color: activeColor + '99' }}>
Core Capability
{/* 标题 */}
<h3 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-black text-[#0f172a] tracking-tight leading-[1.1] mb-2">
{capabilities[activeCapability].title}
</h3>
{/* 副标题 */}
<p className="text-sm sm:text-base md:text-lg lg:text-xl font-semibold mb-4 md:mb-5" style={{ color: activeColor + 'aa' }}>
{capabilities[activeCapability].sub}
</p>
{/* 正文 */}
<p className="text-[#334155] text-sm sm:text-base md:text-lg lg:text-xl leading-[1.7] md:leading-[1.8] font-medium mb-4 md:mb-6">
{capabilities[activeCapability].desc}
</p>
{/* Tags — 只展示前 3 个 */}
{capabilities[activeCapability].tip && (
<div className="flex flex-wrap items-center gap-1.5 md:gap-2 pt-4 md:pt-5 border-t border-gray-100">
{capabilities[activeCapability].tip.split('、').slice(0, 3).map((t, ti) => (
<span key={ti} className="px-2 md:px-3 py-1 text-xs sm:text-sm md:text-base font-semibold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
style={{ color: activeColor, borderColor: activeColor + '40', backgroundColor: activeColor + '0a' }}>
{t}
</span>
</div>
{/* 标题 */}
<h3 className="text-3xl md:text-4xl lg:text-5xl font-black text-[#0f172a] tracking-tight leading-[1.1] mb-2">
{capabilities[activeCapability].title}
</h3>
{/* 副标题 */}
<p className="text-lg md:text-xl font-semibold mb-5" style={{ color: activeColor + 'aa' }}>
{capabilities[activeCapability].sub}
</p>
{/* 正文 */}
<p className="text-[#334155] text-lg md:text-xl leading-[1.8] font-medium mb-6">
{capabilities[activeCapability].desc}
</p>
{/* Tags — 只展示前 3 个 */}
{capabilities[activeCapability].tip && (
<div className="flex flex-wrap items-center gap-2 pt-5 border-t border-gray-100">
{capabilities[activeCapability].tip.split('、').slice(0, 3).map((t, ti) => (
<span key={ti} className="px-3 py-1 text-base font-semibold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
style={{ color: activeColor, borderColor: activeColor + '40', backgroundColor: activeColor + '0a' }}>
{t}
</span>
))}
</div>
)}
{/* 查看全部 */}
<div className="mt-5 flex justify-end">
<Link to={`/product/${capabilities[activeCapability].slug}`}
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-base font-semibold transition-all duration-300 hover:brightness-110"
style={{ color: '#fff', backgroundColor: activeColor }}>
查看全部
<svg className="w-3.5 h-3.5 transition-transform duration-300 group-hover:translate-x-0.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>
</div>
))}
</div>
)}
{/* 查看全部 */}
<div className="mt-auto pt-4 md:pt-5 flex justify-end">
<Link to={`/product/${capabilities[activeCapability].slug}`}
className="inline-flex items-center gap-1.5 px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-sm md:text-base font-semibold transition-all duration-300 hover:brightness-110"
style={{ color: '#fff', backgroundColor: activeColor }}>
查看全部
<svg className="w-3 h-3 md:w-3.5 md:h-3.5 transition-transform duration-300 group-hover:translate-x-0.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>
</div>
</div>
</div>
</div>
</ScrollReveal>
{/* Bottom button */}
@@ -258,107 +213,137 @@ export default function Home() {
</div>
</section>
{/* ─── 5. 企业级解决方案区（深色） ─── */}
<section className="py-20 px-4 relative overflow-hidden"
style={{ background: `linear-gradient(180deg, rgba(0,10,30,0.7) 0%, rgba(0,20,50,0.5) 50%, rgba(0,10,30,0.7) 100%), url(${hunBg}) center/cover no-repeat` }}>
{/* ─── 5. 为什么选择讯驰 ─── */}
<section className="py-20 md:py-32 px-4 sm:px-6 md:px-10 relative overflow-hidden"
style={{
background: `linear-gradient(135deg, rgba(10,22,40,0.75), rgba(15,31,58,0.75)), url(${hunBg}) center/cover no-repeat`,
}}>
{/* 大型光晕 */}
<div className="absolute top-0 left-1/4 w-[800px] h-[800px] rounded-full opacity-[0.04]"
style={{ background: 'radial-gradient(circle, #004ec4, transparent 60%)' }}
/>
<div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] rounded-full opacity-[0.04]"
style={{ background: 'radial-gradient(circle, #2563eb, transparent 60%)' }}
/>
<div className="relative max-w-5xl mx-auto text-center">
<div className="relative max-w-7xl mx-auto">
{/* 标题 */}
<ScrollReveal>
<p className="text-[10px] xs:text-xs text-white/80 tracking-[0.3em] uppercase mb-4 font-semibold">Why Choose Us</p>
<h2 className="text-3xl xs:text-4xl md:text-6xl font-black mb-6 leading-tight text-white"
style={{
textShadow: '0 4px 30px rgba(59,130,246,0.3), 0 2px 4px rgba(0,0,0,0.4)',
}}>为什么选择讯驰</h2>
<div className="flex items-center justify-center gap-3 mb-16">
<span className="w-12 h-px bg-gradient-to-r from-transparent to-white/60" />
<p className="text-white text-base xs:text-lg sm:text-xl md:text-2xl font-medium tracking-wider">AAA级信用企业 · 高新技术企业</p>
<span className="w-12 h-px bg-gradient-to-l from-transparent to-white/60" />
<div className="text-center mb-12 md:mb-20">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-2 md:gap-3 mb-4 md:mb-5">
<span className="w-6 md:w-8 h-[2px] rounded-full bg-white/30" />
<span className="text-[10px] md:text-[11px] font-bold tracking-[0.22em] uppercase text-white/60">Why Choose Us</span>
<span className="w-6 md:w-8 h-[2px] rounded-full bg-white/30" />
</div>
<h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white tracking-tight leading-[1.1] mb-3 md:mb-4"
style={{ textShadow: '0 4px 60px rgba(59,130,246,0.25), 0 2px 8px rgba(0,0,0,0.5)' }}>
为什么选择讯驰
</h2>
<p className="text-white/50 text-sm xs:text-base md:text-lg font-medium tracking-wider">
AAA级信用企业 · 高新技术企业 · 16年行业深耕
</p>
</div>
</div>
</ScrollReveal>
{/* Surrounding tags */}
<ScrollReveal>
<div className="relative w-[280px] h-[280px] xs:w-[320px] xs:h-[320px] md:w-[420px] md:h-[420px] lg:w-[500px] lg:h-[500px] mx-auto mb-16">
{/* Outer rings */}
<div className="absolute inset-0 rounded-full border border-white/[0.08]" />
<div className="absolute inset-6 xs:inset-8 md:inset-10 lg:inset-12 rounded-full border border-white/[0.06]" />
<div className="absolute inset-12 xs:inset-16 md:inset-20 lg:inset-24 rounded-full border border-white/[0.04]" />
{/* Orbiting dots */}
<div className="absolute w-2 h-2 rounded-full bg-[#004ec4]"
style={{ top: '8%', left: '50%', transform: 'translateX(-50%)', boxShadow: '0 0 10px rgba(0,78,196,0.6)' }} />
<div className="absolute w-1.5 h-1.5 rounded-full bg-[#f08519]"
style={{ bottom: '12%', right: '15%', boxShadow: '0 0 8px rgba(240,133,25,0.6)' }} />
{/* Tags around circle */}
{[
{ text: '深耕广西，扎根本土', angle: 250 },
{ text: '产品成熟，实战验证', angle: 300 },
{ text: '贴心服务，全程陪伴', angle: 55 },
{ text: '数据安全，合规可靠', angle: 120 },
].map((tag, i) => {
const rad = (tag.angle * Math.PI) / 180
const r = tagRadius
const x = 50 + r * Math.sin(rad)
const y = 50 - r * Math.cos(rad)
const colors = [
{ bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
{ bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
{ bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
{ bg: 'linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%)', dark: 'rgba(255,255,255,0.2)', glow: 'rgba(255,255,255,0.1)', border: 'rgba(255,255,255,0.25)' },
]
return (
<div
key={i}
className="absolute whitespace-nowrap"
style={{
left: `${x}%`,
top: `${y}%`,
transform: 'translate(-50%, -50%)',
}}
>
{/* 书签主体 */}
<div
className="relative px-3 py-2 xs:px-4 xs:py-2.5 md:px-6 md:py-3.5 lg:px-7 lg:py-4 text-xs xs:text-sm md:text-base lg:text-lg font-bold text-white/95 overflow-hidden"
style={{
background: colors[i].bg,
borderRadius: '12px 12px 4px 4px',
border: `1px solid ${colors[i].border}`,
backdropFilter: 'blur(12px)',
boxShadow: `0 0 25px ${colors[i].glow}, 0 6px 16px rgba(0,0,0,0.25)`,
}}
{/* 4 大优势 — 响应式不换行 */}
<div className="flex flex-wrap md:flex-nowrap justify-center gap-2 sm:gap-4 md:gap-6 lg:gap-10 mb-12 md:mb-16">
{[
{ icon: MapPin, title: '深耕广西' },
{ icon: Award, title: '产品成熟'},
{ icon: Headphones, title: '贴心服务'},
{ icon: Shield, title: '数据安全' },
].map((item, i) => {
const Icon = item.icon
return (
<ScrollReveal key={i} delay={i * 0.1}>
<div className="group relative block w-[42vw] sm:w-[42vw] md:w-48 lg:w-56 xl:w-64 2xl:w-72 cursor-pointer flex-shrink-0" onClick={() => handleStepClick(i)}>
<div className="relative bg-white/[0.04] border border-white/[0.06] rounded-2xl md:rounded-3xl p-3 sm:p-4 md:p-6 lg:p-8 text-center transition-all duration-500 hover:bg-white/[0.08] hover:border-[#004ec4]/40 hover:-translate-y-1 h-36 sm:h-44 md:h-52 lg:h-56 xl:h-60 2xl:h-64 flex flex-col items-center justify-center"
style={{ boxShadow: '0 8px 40px rgba(0,0,0,0.2)' }}
>
{/* 顶部高光条 */}
<div className="absolute top-0 left-0 right-0 h-[2px]"
style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)' }}
{/* hover 高光线 */}
<div className="absolute top-0 left-6 right-6 md:left-8 md:right-8 h-[2px] opacity-0 group-hover:opacity-100 transition-all duration-700 rounded-full"
style={{ background: 'linear-gradient(90deg, transparent, #004ec4 20%, #004ec4 80%, transparent)' }}
/>
{/* 左侧折角 */}
<div className="absolute top-0 left-0 w-4 h-4"
style={{
background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 50%, transparent 50%)',
borderRadius: '12px 0 0 0',
}}
/>
{i < 2
? <>{tag.text}<span className="inline-block w-1.5 h-1.5 xs:w-2 xs:h-2 rounded-full bg-white/80 ml-1.5 xs:ml-2 align-middle" /></>
: <><span className="inline-block w-1.5 h-1.5 xs:w-2 xs:h-2 rounded-full bg-white/80 mr-1.5 xs:mr-2 align-middle" />{tag.text}</>
}
{/* 图标 */}
<div className="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 rounded-xl md:rounded-2xl bg-gradient-to-br from-[#004ec4]/25 to-[#004ec4]/5 flex items-center justify-center mx-auto mb-3 sm:mb-4 md:mb-5 group-hover:from-[#004ec4]/35 group-hover:to-[#004ec4]/15 group-hover:scale-105 group-hover:shadow-xl group-hover:shadow-[#004ec4]/15 transition-all duration-500">
<Icon className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 lg:w-8 lg:h-8" style={{ color: '#74b0ff' }} strokeWidth={1.5} />
</div>
{/* 标题 */}
<h3 className="text-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl font-bold text-white mb-1 md:mb-2">{item.title}</h3>
{/* 描述 */}
<p className="text-[10px] sm:text-xs md:text-sm text-white/45 leading-relaxed">{item.desc}</p>
</div>
</div>
)
})}
</div>
</ScrollReveal>
</ScrollReveal>
)
})}
</div>
{/* Bottom button */}
<ScrollReveal>
{/* ── 流动光速时间线 ── */}
<div className="relative max-w-2xl mx-auto mt-12 md:mt-20 mb-12 md:mb-20 px-4">
{/* 光束外层光晕 */}
<div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-4 rounded-full"
style={{
background: 'linear-gradient(90deg, transparent, rgba(0,78,196,0.08) 15%, rgba(0,78,196,0.15) 50%, rgba(0,78,196,0.08) 85%, transparent)',
filter: 'blur(6px)',
}}
/>
{/* 光束中层 */}
<div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-1.5 rounded-full"
style={{
background: 'linear-gradient(90deg, transparent, rgba(59,130,246,0.2) 10%, rgba(96,165,250,0.5) 30%, rgba(147,197,253,0.7) 50%, rgba(96,165,250,0.5) 70%, rgba(59,130,246,0.2) 90%, transparent)',
filter: 'blur(3px)',
}}
/>
{/* 光束核心 */}
<div className="relative h-1 rounded-full"
style={{
background: 'linear-gradient(90deg, transparent, rgba(59,130,246,0.4) 10%, rgba(147,197,253,0.8) 30%, #93c5fd 50%, rgba(147,197,253,0.8) 70%, rgba(59,130,246,0.4) 90%, transparent)',
boxShadow: '0 0 12px rgba(59,130,246,0.3), 0 0 24px rgba(59,130,246,0.1)',
}}>
{/* 流动光点 */}
<div className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-all duration-700 ease-out"
style={{
left: `${12 + lightPos * 25}%`,
background: '#e0f2fe',
boxShadow: '0 0 12px #93c5fd, 0 0 28px #60a5fa, 0 0 56px #3b82f6, 0 0 84px #1d4ed8',
}}
/>
{/* 4 个节点标记 */}
{[0, 1, 2, 3].map(n => (
<div key={n} className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 transition-all duration-500"
style={{
left: `${12 + n * 25}%`,
borderColor: n <= activeStep ? '#93c5fd' : 'rgba(147,197,253,0.25)',
background: n <= activeStep ? '#3b82f6' : 'rgba(10,22,40,0.9)',
boxShadow: n <= activeStep ? '0 0 10px rgba(147,197,253,0.7), 0 0 20px rgba(59,130,246,0.4)' : '0 0 4px rgba(0,78,196,0.2)',
}}
/>
))}
</div>
</div>
{/* 底部按钮 */}
<ScrollReveal className="text-center">
<Link
to="/contact"
className="inline-flex items-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-full text-sm xs:text-base font-medium text-white border border-white/20 hover:bg-white/10 hover:border-white/40 transition-all duration-300"
style={{ boxShadow: '0 4px 20px rgba(0,0,0,0.2)' }}
className="inline-flex items-center gap-2 md:gap-3 px-6 sm:px-8 md:px-10 py-3 md:py-4 rounded-24 text-sm md:text-base font-bold text-white bg-[#1266e5cb] hover:bg-[#005ce6] transition-all duration-300 hover:shadow-2xl hover:shadow-[#004ec4]/30 hover:scale-105"
>
获取解决方案
<ArrowRight className="w-4 h-4" />
获取专属解决方案
<ArrowRight className="w-5 h-5" />
</Link>
</ScrollReveal>
</div>
@@ -382,24 +367,10 @@ export default function Home() {
</ScrollReveal>
{/* 5 个 ISO 认证 */}
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl mx-auto">
{customerCards.slice(1).map((card, i) => {
const Icon = card.icon
return (
<ScrollReveal key={i} delay={i * 0.08}>
<div className="group relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 text-center h-full flex flex-col items-center justify-center transition-all duration-500 hover:shadow-lg hover:shadow-[#004ec4]/6 hover:-translate-y-1">
<div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-t-2xl"
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
<div className="w-16 h-16 rounded-xl bg-[#004ec4]/[0.06] border border-[#004ec4]/10 flex items-center justify-center mb-5 group-hover:bg-[#004ec4]/10 group-hover:scale-110 transition-all duration-300">
<Icon className="w-8 h-8 text-[#004ec4]" strokeWidth={1.5} />
</div>
<h3 className="text-base md:text-lg font-bold text-[#0f172a] leading-snug whitespace-pre-line">{card.title}</h3>
</div>
</ScrollReveal>
)
})}
</div>
{/* 5 个 ISO 认证证书 — 轮播图 */}
<ScrollReveal>
<CertificateCarousel />
</ScrollReveal>
</div>
</section>
website/src/pages/ProductPage.jsx
+128 -69
View File
@@ -1,4 +1,5 @@
import { useParams, Link } from "react-router-dom"
import { useState, useEffect, useRef } from "react"
import { ChevronDown, ArrowRight, Shield, Clock, Headphones, Cpu, Monitor, HardDrive, AlertCircle, GitBranch, FileStack, MessageCircleX, FileDigit, SearchCheck, Banknote, ChartBar, Bell, Layers, ScrollText, CalendarCheck, TrendingUp, Pyramid, Database, Activity, Star } from "lucide-react"
import { getProduct } from "../data/products"
import ScrollReveal from "../components/ScrollReveal"
@@ -16,6 +17,21 @@ const iconMap = {
export default function ProductPage() {
const { slug } = useParams()
const product = getProduct(slug)
const [activeStep, setActiveStep] = useState(0)
const [lightPos, setLightPos] = useState(0)
const timerRef = useRef(null)
const handleStepClick = (i) => {
if (timerRef.current) clearTimeout(timerRef.current)
setLightPos(i)
timerRef.current = setTimeout(() => {
setActiveStep(i)
}, 700)
}
useEffect(() => {
return () => { if (timerRef.current) clearTimeout(timerRef.current) }
}, [])
if (!product) {
return (
@@ -50,28 +66,27 @@ export default function ProductPage() {
>
{/* ── Hero ── */}
<div className="relative -mt-[70px]">
<section className="relative overflow-hidden flex items-center justify-center " style={{ backgroundColor: product.themeColor }}>
{/* Desktop: left image + right card */}
<div className="hidden md:flex items-center justify-between gap-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-[760px]">
<section className="relative overflow-hidden" style={{ backgroundColor: product.themeColor }}>
{/* Desktop: grid 布局 — 统一宽度/高度/间距 */}
<div className="hidden md:grid grid-cols-2 gap-12 lg:gap-20 xl:gap-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 min-h-[760px] items-center">
{/* Image - left */}
<div className="w-[55%] flex items-center justify-center">
<div className="flex items-center justify-center">
{product.heroImage && (
<img src={product.heroImage} alt="" className={`w-full h-auto object-contain`} />
<img src={product.heroImage} alt="" className="w-full h-auto object-contain" />
)}
</div>
{/* Content - right */}
<div className="w-[45%] flex flex-col items-between justify-center gap-2 shrink-0">
<h1 className="text-4xl md:text-6xl font-extrabold text-center mb-5 tracking-tight leading-[1.1] text-white hero-product-title whitespace-nowrap">
<div className="flex flex-col items-center justify-center gap-5 md:gap-6">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-center tracking-tight leading-[1.1] text-white hero-product-title">
{product.name}
</h1>
<p className="text-2xl md:text-3xl text-center mb-8 leading-relaxed text-white/80 hero-product-slogan whitespace-nowrap">
<p className="text-lg sm:text-xl md:text-2xl lg:text-3xl text-center leading-relaxed text-white/80 hero-product-slogan">
{product.slogan}
</p>
{product.stats && (
<div className="flex gap-4 justify-center mt-6">
<div className="grid grid-flow-col auto-cols-fr gap-5 md:gap-6 w-full mt-6 md:mt-8">
{product.stats.map((s, i) => (
<div key={i} className="flex-1 rounded-2xl p-4 text-center border border-white/20 bg-white/10">
<div key={i} className="rounded-2xl p-4 text-center border border-white/20 bg-white/10">
<div className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
<StatNumber target={s.num} suffix={s.suffix} />
</div>
@@ -86,27 +101,27 @@ export default function ProductPage() {
{/* Mobile: stacked layout */}
<div className="md:hidden flex flex-col items-center px-6 pt-32 pb-16">
{product.heroImage && (
<img src={product.heroImage} alt="" className={`w-4/5 max-w-xs h-auto object-contain mb-10 ${product.heroSize === 'small' ? 'max-h-[150px]' : 'max-h-[200px]'}`} />
<img src={product.heroImage} alt="" className={`w-4/5 max-w-xs h-auto object-contain mb-8 sm:mb-10 ${product.heroSize === 'small' ? 'max-h-[150px]' : 'max-h-[200px]'}`} />
)}
<div className="text-center w-full">
<span className="inline-block px-4 py-1.5 rounded-full text-xs font-bold tracking-wider uppercase mb-5"
<span className="inline-block px-3 sm:px-4 py-1 sm:py-1.5 rounded-full text-[10px] sm:text-xs font-bold tracking-wider uppercase mb-4 sm:mb-5"
style={{ backgroundColor: product.themeColor + '18', color: product.themeColor }}>
智慧教育解决方案
</span>
<h1 className="text-3xl font-extrabold mb-4 tracking-tight leading-[1.1] text-white hero-product-title">
<h1 className="text-2xl xs:text-3xl sm:text-4xl font-extrabold mb-3 sm:mb-4 tracking-tight leading-[1.1] text-white hero-product-title">
{product.name}
</h1>
<p className="text-xl mb-6 leading-relaxed text-white/80 hero-product-slogan">
<p className="text-base xs:text-lg sm:text-xl mb-5 sm:mb-6 leading-relaxed text-white/80 hero-product-slogan">
{product.slogan}
</p>
{product.stats && (
<div className="flex gap-3 mt-4">
<div className="grid grid-cols-3 gap-2 sm:gap-3 mt-3 sm:mt-4">
{product.stats.map((s, i) => (
<div key={i} className="flex-1 rounded-2xl p-3 text-center border border-white/20 bg-white/10">
<div className="text-xl font-extrabold tracking-tight text-white">
<div key={i} className="rounded-xl sm:rounded-2xl p-2 sm:p-3 text-center border border-white/20 bg-white/10">
<div className="text-lg xs:text-xl sm:text-2xl font-extrabold tracking-tight text-white">
<StatNumber target={s.num} suffix={s.suffix} />
</div>
<div className="text-[11px] text-white/60 mt-1 font-medium">{s.label}</div>
<div className="text-[10px] xs:text-[11px] sm:text-xs text-white/60 mt-1 font-medium">{s.label}</div>
</div>
))}
</div>
@@ -162,22 +177,22 @@ export default function ProductPage() {
</div>
{/* ── 内容区 ── */}
<div className="relative p-8 md:p-10 lg:p-14">
<div className="relative p-6 sm:p-8 md:p-10 lg:p-14">
{/* 顶部装饰线 + 标签 */}
<div className="flex items-center gap-3 mb-5">
<span className="w-10 h-[2px] rounded-full bg-[var(--theme)]/40" />
<span className="text-sm md:text-base font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">
<div className="flex items-center gap-3 mb-4 md:mb-5">
<span className="w-8 md:w-10 h-[2px] rounded-full bg-[var(--theme)]/40" />
<span className="text-xs sm:text-sm md:text-base font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">
Brief
</span>
</div>
{/* 标题 */}
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-6">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-4 md:mb-6">
产品简介
</h2>
{/* 正文 */}
<p className="text-[#334155] text-lg md:text-xl leading-[1.9] font-medium">
<p className="text-[#334155] text-sm sm:text-base md:text-lg lg:text-xl leading-[1.7] md:leading-[1.9] font-medium">
{product.brief}
</p>
@@ -187,7 +202,7 @@ export default function ProductPage() {
{product.tags.map((tag, i) => (
<span
key={i}
className="px-5 py-2 text-lg font-bold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
className="px-3 sm:px-5 py-1.5 sm:py-2 text-sm sm:text-base md:text-lg font-bold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
style={{
color: product.themeColor,
borderColor: `rgba(${r},${g},${b},0.25)`,
@@ -215,10 +230,10 @@ export default function ProductPage() {
Pain Points & Solutions
<span className="w-8 h-px bg-[var(--theme)]/40" />
</span>
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.8] mb-4 whitespace-pre-line">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.3] md:leading-[1.8] mb-3 md:mb-4 whitespace-pre-line">
{product.painPointsTitle || `${product.name}\n解决的核心问题`}
</h2>
<p className="mt-4 text-[#64748b] text-lg max-w-2xl mx-auto">
<p className="mt-3 md:mt-4 text-[#64748b] text-sm sm:text-base md:text-lg max-w-2xl mx-auto">
直击业务痛点，提供经过实战验证的完整解决方案
</p>
</div>
@@ -260,12 +275,12 @@ export default function ProductPage() {
{/* ── 痛点书签卡 ── */}
<div className="relative">
<div className="relative bg-white rounded-2xl shadow-[0_6px_28px_-8px_rgba(239,68,68,0.15)] border border-red-200 overflow-visible">
<div className="absolute -top-5 md:-top-6 left-6 md:left-8 px-4 md:px-5 py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl bg-red-400 shadow-[0_-2px_8px_rgba(239,68,68,0.2)]">
<span className="text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">痛点</span>
<div className="absolute -top-4 sm:-top-5 md:-top-6 left-4 sm:left-6 md:left-8 px-3 sm:px-4 md:px-5 py-1 sm:py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl bg-red-400 shadow-[0_-2px_8px_rgba(239,68,68,0.2)]">
<span className="text-xs sm:text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">痛点</span>
</div>
<div className="absolute left-0 top-0 bottom-0 w-1.5 bg-red-400 rounded-l-2xl" />
<div className="pl-8 md:pl-10 pr-6 md:pr-8 py-6 md:py-8 pt-10 md:pt-12">
<p className="text-[#1e293b] text-base md:text-lg leading-[1.9] font-bold">
<div className="pl-6 sm:pl-8 md:pl-10 pr-4 sm:pr-6 md:pr-8 py-4 sm:py-5 md:py-8 pt-8 sm:pt-10 md:pt-12">
<p className="text-[#1e293b] text-sm sm:text-base md:text-lg leading-[1.7] md:leading-[1.9] font-bold">
{item.title}
</p>
</div>
@@ -276,14 +291,14 @@ export default function ProductPage() {
<div className="relative">
<div className="relative bg-white rounded-2xl shadow-[0_6px_28px_-8px_rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.15)] border overflow-visible"
style={{ borderColor: `${product.themeColor}30` }}>
<div className="absolute -top-5 md:-top-6 left-6 md:left-8 px-4 md:px-5 py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl shadow-[0_-2px_8px_rgba(0,0,0,0.1)]"
<div className="absolute -top-4 sm:-top-5 md:-top-6 left-4 sm:left-6 md:left-8 px-3 sm:px-4 md:px-5 py-1 sm:py-1.5 md:py-2 rounded-t-lg md:rounded-t-xl shadow-[0_-2px_8px_rgba(0,0,0,0.1)]"
style={{ backgroundColor: product.themeColor }}>
<span className="text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">解决方案</span>
<span className="text-xs sm:text-sm md:text-base font-black tracking-[0.1em] uppercase text-white">解决方案</span>
</div>
<div className="absolute left-0 top-0 bottom-0 w-1.5 rounded-l-2xl"
style={{ backgroundColor: product.themeColor }} />
<div className="pl-8 md:pl-10 pr-6 md:pr-8 py-6 md:py-8 pt-10 md:pt-12">
<p className="text-[#1e293b] text-base md:text-lg leading-[1.9] font-bold">
<div className="pl-6 sm:pl-8 md:pl-10 pr-4 sm:pr-6 md:pr-8 py-4 sm:py-5 md:py-8 pt-8 sm:pt-10 md:pt-12">
<p className="text-[#1e293b] text-sm sm:text-base md:text-lg leading-[1.7] md:leading-[1.9] font-bold">
{item.desc}
</p>
</div>
@@ -308,15 +323,15 @@ export default function ProductPage() {
<span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">Core Features</span>
<span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
</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>
{product.target && (
<div className="mt-6 flex flex-col items-center gap-4">
<span className="text-lg font-extrabold text-[#0f172a]">适用对象</span>
<div className="flex flex-wrap justify-center gap-3">
<span className="text-sm sm:text-base md:text-lg font-extrabold text-[#0f172a]">适用对象</span>
<div className="flex flex-wrap justify-center gap-2 md:gap-3">
{product.target.split('、').map((t, i) => (
<span key={i} className="px-5 py-2 rounded-lg text-lg font-bold text-[var(--theme)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.3)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.03)]">{t.trim()}</span>
<span key={i} className="px-3 sm:px-5 py-1.5 sm:py-2 rounded-lg text-sm sm:text-base md:text-lg font-bold text-[var(--theme)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.3)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.03)]">{t.trim()}</span>
))}
</div>
</div>
@@ -474,7 +489,7 @@ export default function ProductPage() {
<span className="w-5 h-[2px] rounded-lg bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">Product Showcase</span>
</div>
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
产品展示
</h2>
</div>
@@ -495,10 +510,10 @@ export default function ProductPage() {
<span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">Localization</span>
<span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
</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="mt-4 text-[#64748b] text-lg max-w-2xl mx-auto">
<p className="mt-3 md:mt-4 text-[#64748b] text-sm sm:text-base md:text-lg max-w-2xl mx-auto">
全面适配国产信创生态，赋能教育信息化自主可控
</p>
</div>
@@ -511,7 +526,7 @@ export default function ProductPage() {
{ icon: HardDrive, title: '国产数据库', desc: '支持达梦、人大金仓、GaussDB等国产数据库，数据存储自主可靠' },
].map((item, i) => (
<ScrollReveal key={i} delay={i * 0.08}>
<div className="group relative bg-white rounded-2xl p-10 md:p-12 h-full border border-gray-100 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)] transition-all duration-500 overflow-hidden">
<div className="group relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 lg:p-12 h-full border border-gray-100 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)] transition-all duration-500 overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-1 transition-all duration-500"
style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)`, opacity: 0 }}
/>
@@ -522,22 +537,22 @@ export default function ProductPage() {
}}
/>
<div className="relative z-10 flex flex-col items-center text-center">
<div className="mb-7">
<div className="w-[88px] h-[88px] rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:shadow-lg"
<div className="mb-5 md:mb-7">
<div className="w-16 h-16 sm:w-20 sm:h-20 md:w-[88px] md:h-[88px] rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:shadow-lg"
style={{
background: `linear-gradient(135deg, ${product.themeColor}12, ${product.themeColor}08)`,
border: `1px solid ${product.themeColor}20`,
boxShadow: `0 4px 20px ${product.themeColor}15`,
}}
>
<item.icon className="w-10 h-10 transition-all duration-500 group-hover:scale-110" strokeWidth={1.5} style={{ color: product.themeColor }} />
<item.icon className="w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 transition-all duration-500 group-hover:scale-110" strokeWidth={1.5} style={{ color: product.themeColor }} />
</div>
</div>
<h3 className="text-2xl font-extrabold text-[#0f172a] mb-3 tracking-tight">
<h3 className="text-lg sm:text-xl md:text-2xl font-extrabold text-[#0f172a] mb-2 md:mb-3 tracking-tight">
{item.title}
</h3>
<div className="w-10 h-[3px] rounded-full mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
<p className="text-[#64748b] text-lg leading-relaxed">
<div className="w-8 md:w-10 h-[3px] rounded-full mb-3 md:mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
<p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">
{item.desc}
</p>
</div>
@@ -558,20 +573,20 @@ export default function ProductPage() {
<span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[var(--theme)]/60">Why Choose Us</span>
<span className="w-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
</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-6 mb-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="group relative bg-white rounded-2xl p-10 md:p-12 h-full border border-gray-100 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)] transition-all duration-500 overflow-hidden">
<div className="group relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 lg:p-12 h-full border border-gray-100 shadow-[0_2px_16px_-6px_rgba(0,0,0,0.06)] hover:shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)] transition-all duration-500 overflow-hidden cursor-pointer" onClick={() => handleStepClick(i)}>
{/* 顶部品牌色条 — hover 时滑入 */}
<div className="absolute top-0 left-0 right-0 h-1 transition-all duration-500"
style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)`, opacity: 0 }}
@@ -586,28 +601,28 @@ export default function ProductPage() {
<div className="relative z-10 flex flex-col items-center text-center">
{/* 图标 — 大圆形容器 */}
<div className="mb-7">
<div className="w-[88px] h-[88px] rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:shadow-lg"
<div className="mb-5 md:mb-7">
<div className="w-16 h-16 sm:w-20 sm:h-20 md:w-[88px] md:h-[88px] rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:shadow-lg"
style={{
background: `linear-gradient(135deg, ${product.themeColor}12, ${product.themeColor}08)`,
border: `1px solid ${product.themeColor}20`,
boxShadow: `0 4px 20px ${product.themeColor}15`,
}}
>
<item.icon className="w-10 h-10 transition-all duration-500 group-hover:scale-110" strokeWidth={1.5} style={{ color: product.themeColor }} />
<item.icon className="w-8 h-8 sm:w-9 sm:h-9 md:w-10 md:h-10 transition-all duration-500 group-hover:scale-110" strokeWidth={1.5} style={{ color: product.themeColor }} />
</div>
</div>
{/* 标题 */}
<h3 className="text-2xl font-extrabold text-[#0f172a] mb-3 tracking-tight">
<h3 className="text-lg sm:text-xl md:text-2xl font-extrabold text-[#0f172a] mb-2 md:mb-3 tracking-tight">
{item.title}
</h3>
{/* 分隔线 */}
<div className="w-10 h-[3px] rounded-full mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
<div className="w-8 md:w-10 h-[3px] rounded-full mb-3 md:mb-4" style={{ backgroundColor: product.themeColor, opacity: 0.3 }} />
{/* 描述 */}
<p className="text-[#64748b] text-lg leading-relaxed">
<p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">
{item.desc}
</p>
</div>
@@ -615,6 +630,50 @@ export default function ProductPage() {
</ScrollReveal>
))}
</div>
{/* ── 流动光速时间线 ── */}
<div className="relative max-w-md mx-auto mt-8 md:mt-24 mb-4">
{/* 光束外层光晕 */}
<div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-4 rounded-full"
style={{
background: `linear-gradient(90deg, transparent, ${product.themeColor}15, ${product.themeColor}25, ${product.themeColor}15, transparent)`,
filter: 'blur(6px)',
}}
/>
{/* 光束中层 */}
<div className="absolute top-1/2 -translate-y-1/2 left-[8%] right-[8%] h-1.5 rounded-full"
style={{
background: `linear-gradient(90deg, transparent, ${product.themeColor}30, ${product.themeColor}60, ${product.themeColor}30, transparent)`,
filter: 'blur(3px)',
}}
/>
{/* 光束核心 */}
<div className="relative h-1 rounded-full"
style={{
background: `linear-gradient(90deg, transparent, ${product.themeColor}60, ${product.themeColor}, ${product.themeColor}60, transparent)`,
boxShadow: `0 0 12px ${product.themeColor}40, 0 0 24px ${product.themeColor}20`,
}}>
{/* 流动光点 */}
<div className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full transition-all duration-700 ease-out"
style={{
left: `${15 + lightPos * 35}%`,
background: '#ffffff',
boxShadow: `0 0 12px ${product.themeColor}, 0 0 28px ${product.themeColor}, 0 0 56px ${product.themeColor}, 0 0 84px ${product.themeColor}`,
}}
/>
{/* 3 个节点标记 */}
{[0, 1, 2].map(n => (
<div key={n} className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 transition-all duration-500"
style={{
left: `${15 + n * 35}%`,
borderColor: n <= activeStep ? product.themeColor : `${product.themeColor}40`,
background: n <= activeStep ? product.themeColor : '#ffffff',
boxShadow: n <= activeStep ? `0 0 10px ${product.themeColor}80, 0 0 20px ${product.themeColor}40` : `0 0 4px ${product.themeColor}20`,
}}
/>
))}
</div>
</div>
</div>
</section>
@@ -628,7 +687,7 @@ export default function ProductPage() {
<span className="w-5 h-[2px] rounded-lg bg-[var(--theme)]" />
<span className="text-sm font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
</div>
<h2 className="text-5xl md:text-[5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-[5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
常见问题
</h2>
</div>
@@ -640,18 +699,18 @@ export default function ProductPage() {
<details className="group relative bg-white rounded-2xl border border-gray-100 hover:shadow-lg hover:shadow-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.05)] transition-all duration-300 overflow-hidden">
<div className="absolute top-0 left-0 w-1 h-full bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] group-open:bg-[var(--theme)] transition-colors duration-300" />
<div className="absolute top-0 right-0 w-24 h-24 bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),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-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)] shrink-0">Q{i + 1}</span>
<h3 className="text-xl font-bold text-[#0f172a]">{item.q}</h3>
<summary className="relative flex items-center justify-between px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 cursor-pointer list-none select-none">
<div className="flex items-center gap-3 md:gap-4 pr-4">
<span className="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] text-xs font-black text-[var(--theme)] shrink-0">Q{i + 1}</span>
<h3 className="text-base sm:text-lg md:text-xl font-bold text-[#0f172a]">{item.q}</h3>
</div>
<div className="w-8 h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
<ChevronDown className="w-4 h-4 text-[var(--theme)]" />
<div className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.06)] border border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] flex items-center justify-center shrink-0 group-open:rotate-180 transition-transform duration-300">
<ChevronDown className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-[var(--theme)]" />
</div>
</summary>
<div className="relative px-8 pb-7">
<div className="ml-12 pl-5 border-l-2 border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-r-lg py-4 pr-4">
<p className="text-[#64748b] text-xl leading-relaxed">{item.a}</p>
<div className="relative px-4 sm:px-6 md:px-8 pb-5 sm:pb-6 md:pb-7">
<div className="ml-10 sm:ml-12 pl-4 sm:pl-5 border-l-2 border-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.1)] bg-[rgba(var(--theme-r),var(--theme-g),var(--theme-b),0.02)] rounded-r-lg py-3 sm:py-4 pr-3 sm:pr-4">
<p className="text-[#64748b] text-sm sm:text-base md:text-lg lg:text-xl leading-relaxed">{item.a}</p>
</div>
</div>
</details>