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