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-17 14:12:56 +08:00
parent f1bc500678
commit 68e6e98234
9 changed files with 207 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/assets/images/Carousel/Points-1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 165 KiB

website/src/assets/images/Carousel/Points-2.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 131 KiB

website/src/assets/images/Carousel/Points-3.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 51 KiB

website/src/assets/images/Carousel/Points-4.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 137 KiB

website/src/assets/images/Carousel/Points-5.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 110 KiB

website/src/components/HeroSection.jsx
+4 -4
View File
@@ -199,23 +199,23 @@ export default function HeroSection() {
{/* Heading */}
<h1 className="text-center"
style={{ animation: 'fadeInUp 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both' }}>
<span className="block text-5xl md:text-8xl lg:text-[110px] font-black hero-main-title">
<span className="block text-5xl md:text-8xl lg:text-[120px] font-black hero-main-title">
智慧教育
</span>
<span className="block mt-3 text-3xl md:text-[42px] lg:text-[48px] font-extralight hero-sec-title">
<span className="block mt-6 md:mt-15 text-3xl md:text-[42px] lg:text-[108px] font-extralight hero-sec-title">
赋能未来
</span>
</h1>
{/* Divider */}
<div className="flex items-center justify-center mt-2 mb-2"
<div className="flex items-center justify-center mt-6 mb-6"
style={{ animation: 'fadeIn 1s ease-out 1s both' }}>
</div>
{/* Subtitle */}
<div style={{ animation: 'fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both' }}>
<p className="text-lg md:text-xl max-w-xs mx-auto leading-[2] hero-desc">
<p className="text-lg lg:text-[38px] md:text-xl mx-auto leading-[2] hero-desc whitespace-nowrap">
让校园管理更简单、更智能
</p>
</div>
website/src/components/RosePieChart.jsx
+2 -2
View File
@@ -56,7 +56,7 @@ export default function RosePieChart({ onSelect, activeIndex, colors }) {
},
series: [{
type: 'pie',
radius: ['20%', '68%'],
radius: ['25%', '75%'],
center: ['50%', '50%'],
startAngle: 90,
padAngle: 3,
@@ -149,7 +149,7 @@ export default function RosePieChart({ onSelect, activeIndex, colors }) {
transition: 'transform 1s cubic-bezier(0.4, 0, 0.2, 1)',
}}
>
<div ref={containerRef} className="w-full h-[520px] md:h-[600px]" />
<div ref={containerRef} className="w-full h-[600px] md:h-[720px]" />
</div>
);
}
website/src/pages/Home.jsx
+122 -156
View File
@@ -4,9 +4,8 @@ import HeroSection from '../components/HeroSection'
import ScrollReveal from '../components/ScrollReveal'
import { products } from '../data/products'
import RosePieChart from '../components/RosePieChart'
import hunBg from '../assets/images/hun.jpg'
import { ArrowRight, Play, Users, Building2 } from 'lucide-react'
import { ArrowRight, Shield, Award } from 'lucide-react'
import StatNumber from '../components/StatNumber'
/* ─── Section 3: 数据亮点 ─── */
@@ -45,36 +44,37 @@ const capabilities = [
/* ─── Section 7: 客户认可 ─── */
const customerCards = [
{
type: 'featured',
icon: Award,
title: 'AAA级信用企业',
subtitle: '高新技术企业',
featured: true,
},
{
type: 'school',
icon: Building2,
title: 'ISO 9001 质量管理体系',
icon: Shield,
title: 'ISO 9001\n质量管理体系',
},
{
type: 'video',
icon: Play,
title: 'ISO 14001 环境管理体系',
icon: Shield,
title: 'ISO 14001\n环境管理体系',
},
{
type: 'satisfaction',
icon: Users,
title: 'ISO 45001 职业健康安全管理体系',
},
{
type: 'satisfaction',
icon: Users,
title: 'ISO 27001 信息安全管理体系',
icon: Shield,
title: 'ISO 45001\n职业健康安全管理',
},
{
type: 'satisfaction',
icon: Users,
title: 'ISO 20000 信息技术服务管理体系',
icon: Shield,
title: 'ISO 27001\n信息安全管理体系',
},
{
type: 'satisfaction',
icon: Shield,
title: 'ISO 20000\n信息技术服务管理',
},
]
@@ -131,23 +131,23 @@ export default function Home() {
{/* ─── 4. 开放能力区（白底） ─── */}
<section id="products" className="py-20 px-4 bg-white">
<div className="max-w-6xl mx-auto">
<div className="max-w-7xl mx-auto">
<ScrollReveal className="text-center 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-sm xs:text-base md:text-lg lg:text-xl mx-auto md:whitespace-nowrap mb-4 leading-relaxed">全面覆盖职业院校教学、管理、党建、科研四大核心场景，为数字化校园建设提供一站式解决方案</p>
<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>
</ScrollReveal>
{/* Tab bar */}
<ScrollReveal>
<div className="flex justify-center gap-1 mb-12 flex-wrap">
<div className="flex justify-center gap-1 mb-26">
{products.map((p, i) => {
const isActive = activeCapability === i
return (
<button
key={p.slug}
onClick={() => setActiveCapability(i)}
className="flex items-center gap-1.5 xs:gap-2 px-3 xs:px-4 sm:px-6 py-2 xs:py-3 rounded-lg text-xs xs:text-sm font-medium transition-all border"
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"
style={{
color: isActive ? p.themeColor : '#475569',
borderColor: isActive ? p.themeColor : '#e5e7eb',
@@ -165,114 +165,82 @@ export default function Home() {
{/* Left-right layout */}
<ScrollReveal>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-12">
{/* Left: visual */}
<div className="flex justify-center">
<RosePieChart onSelect={setActiveCapability} activeIndex={activeCapability} colors={products.map(p => p.themeColor)} />
<div className="flex flex-col lg:flex-row gap-8 lg:gap-24 lg:items-center mb-32 mt-8">
{/* Left: visual — 产品图片 */}
<div className="w-full lg:w-1/2 lg:max-w-xl">
{products[activeCapability]?.heroImage && (
<img src={products[activeCapability].heroImage} alt={products[activeCapability].name} className="w-full h-auto" />
)}
</div>
{/* Right: text */}
<div className="space-y-3">
{(activeCapability !== null ? [capabilities[activeCapability]] : capabilities).map((c, i) => {
const idx = activeCapability !== null ? activeCapability : i
const color = products[idx]?.themeColor || '#043b8f'
const isActive = activeCapability === idx
return (
<div key={idx} className="relative rounded-2xl transition-all duration-500 cursor-pointer group overflow-hidden border"
style={isActive
? {
backgroundColor: '#fff',
borderColor: color + '20',
boxShadow: `0 12px 40px -8px ${color}18, 0 4px 12px ${color}0a, 0 0 0 1px ${color}10`,
transform: 'scale(1.02)',
zIndex: 10,
padding: '2rem',
}
: {
backgroundColor: '#fafbfc',
borderColor: 'transparent',
boxShadow: 'none',
transform: 'scale(0.97)',
zIndex: 1,
padding: '1.25rem',
opacity: 0.55,
}}
onClick={() => setActiveCapability(idx)}
onMouseEnter={(e) => { if (!isActive) { e.currentTarget.style.opacity = '0.8'; e.currentTarget.style.transform = 'scale(0.98)'; }}}
onMouseLeave={(e) => { if (!isActive) { e.currentTarget.style.opacity = '0.55'; e.currentTarget.style.transform = 'scale(0.97)'; }}}>
{/* Left accent line */}
<div className="absolute top-0 left-0 bottom-0 w-1.5 rounded-l-2xl transition-all duration-500"
style={{ backgroundColor: isActive ? color : 'transparent' }} />
{/* Decorative corner blobs */}
<div className="absolute top-0 right-0 w-32 h-32 rounded-bl-full opacity-0 group-hover:opacity-100 transition-all duration-700"
style={{ backgroundColor: color + '06' }} />
{/* Icon + label row */}
<div className="flex items-center gap-3 mb-3">
<span className="shrink-0 flex items-center justify-center rounded-xl transition-all duration-300"
style={isActive
? { backgroundColor: color, boxShadow: `0 4px 12px ${color}30`, width: '2.5rem', height: '2.5rem' }
: { backgroundColor: color + '08', width: '2rem', height: '2rem' }}>
{React.createElement(products[idx].icon, {
className: isActive ? "w-5 h-5" : "w-4 h-4",
style: { color: isActive ? '#fff' : color + '60' }
})}
</span>
<div className="flex-1 flex items-center gap-3">
<span className="text-[10px] font-bold tracking-[0.2em] uppercase transition-all duration-300 whitespace-nowrap"
style={{ color: isActive ? color + '80' : '#c0c7cf' }}>Core Capability</span>
<div className="h-px flex-1 transition-all duration-300"
style={{ background: isActive ? `linear-gradient(90deg, ${color}20, ${color}05, transparent)` : 'transparent' }} />
</div>
</div>
{/* Title */}
<h3 className="transition-all duration-300 tracking-tight"
style={isActive
? { fontSize: 'clamp(1.25rem, 2.5vw, 1.875rem)', fontWeight: 800, color: '#0f172a' }
: { fontSize: 'clamp(0.875rem, 1.5vw, 1rem)', fontWeight: 600, color: '#94a3b8' }}>{c.title}</h3>
{/* Subtitle - only active */}
{isActive && (
<p className="text-sm xs:text-base mt-1.5 font-semibold"
style={{ color: color + 'aa' }}>{c.sub}</p>
)}
{/* Divider */}
<div className="my-4 h-[3px] rounded-full transition-all duration-500"
style={{
width: isActive ? '2.5rem' : '1.5rem',
backgroundColor: isActive ? color : '#e2e8f0',
opacity: isActive ? 0.5 : 0.6
}} />
{/* Description - only active */}
{isActive && (
<>
<p className="text-sm xs:text-base text-[#334155] leading-[1.9]">{c.desc}</p>
{/* Tags */}
{c.tip && (
<div className="mt-5 flex flex-wrap gap-2">
{c.tip.split('、').map((t, ti) => (
<span key={ti} className="px-3 py-1.5 text-xs font-semibold rounded-full"
style={{ color: color, backgroundColor: color + '0f', border: `1px solid ${color}1a` }}>
{t}
</span>
))}
</div>
)}
{/* View more link */}
<div className="mt-6 flex justify-end">
<Link to={`/product/${c.slug}`}
onClick={(e) => e.stopPropagation()}
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-300 hover:shadow-sm"
style={{ color: '#fff', backgroundColor: color }}
onMouseEnter={(e) => { e.target.style.filter = 'brightness(1.1)'; }}
onMouseLeave={(e) => { e.target.style.filter = 'brightness(1)'; }}>
查看全部
<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>
</>
)}
{/* 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>
{/* ── 内容区 ── */}
<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
</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>
</div>
</div>
</ScrollReveal>
@@ -398,37 +366,35 @@ export default function Home() {
{/* ─── 7. 客户认可区（白底） ─── */}
<section className="py-20 px-4 bg-[#f8fafc]">
<div className="max-w-6xl mx-auto">
<ScrollReveal className="text-center mb-14">
<p className="text-[10px] xs:text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Recognition</p>
<h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold text-[#0f172a] mb-4">资质与认证</h2>
<p className="text-[#64748b] text-sm xs:text-base max-w-xl mx-auto">AAA级信用企业 · 高新技术企业</p>
{/* ─── 7. 资质与认证 ─── */}
<section className="py-24 px-4 bg-gradient-to-b from-white via-[#f8fafc] to-white">
<div className="max-w-5xl mx-auto">
<ScrollReveal 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-8 h-[2px] rounded-full bg-[#004ec4]/40" />
<span className="text-[11px] font-bold tracking-[0.22em] uppercase text-[#004ec4]/60">Recognition</span>
<span className="w-8 h-[2px] rounded-full bg-[#004ec4]/40" />
</div>
<h2 className="text-4xl xs:text-5xl sm:text-6xl md:text-7xl font-black text-[#0f172a] tracking-tight leading-[1.1] mb-4">资质与认证</h2>
<p className="text-[#64748b] text-base xs:text-lg font-medium">AAA级信用企业 · 高新技术企业</p>
</div>
</ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{customerCards.map((card, i) => {
{/* 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.1}>
<div className="group relative bg-white rounded-2xl p-8 border border-gray-100 text-center h-full flex flex-col items-center transition-all duration-500 hover:shadow-xl hover:shadow-[#043b8f]/5 hover:-translate-y-1 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-20 h-20 bg-[#043b8f]/[0.03] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="absolute bottom-0 left-0 w-14 h-14 border border-[#043b8f]/[0.06] rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{/* 图标 */}
<div className="w-12 h-12 xs:w-14 xs:h-14 sm:w-16 sm:h-16 rounded-xl bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mb-5 group-hover:bg-[#043b8f]/10 transition-all duration-300">
<Icon className="w-6 h-6 xs:w-7 xs:h-7 sm:w-8 sm:h-8 text-[#043b8f]" />
<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>
{/* 数字 */}
<div className="text-3xl xs:text-4xl sm:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-[#0f172a] to-[#334155] mb-1">{card.count}</div>
{/* 标题 */}
<h3 className="text-sm xs:text-base sm:text-lg font-bold text-[#0f172a] mb-3">{card.title}</h3>
{/* 分隔线 */}
<div className="w-8 h-px bg-gradient-to-r from-transparent via-[#043b8f]/20 to-transparent mb-3" />
{/* 描述 */}
<p className="text-sm text-[#64748b] leading-relaxed">{card.desc}</p>
<h3 className="text-base md:text-lg font-bold text-[#0f172a] leading-snug whitespace-pre-line">{card.title}</h3>
</div>
</ScrollReveal>
)
website/src/pages/ProductPage.jsx
+79 -16
View File
@@ -1,5 +1,5 @@
import { useParams, Link } from "react-router-dom"
import { ChevronDown, ArrowRight, Shield, Clock, Headphones, AlertCircle, GitBranch, FileStack, MessageCircleX, FileDigit, SearchCheck, Banknote, ChartBar, Bell, Layers, ScrollText, CalendarCheck, TrendingUp, Pyramid, Database, Activity, Star } from "lucide-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"
import StatNumber from "../components/StatNumber"
@@ -117,8 +117,8 @@ export default function ProductPage() {
</div>
{/* ── Brief / 产品简介 ── */}
<section className="py-24 md:py-32 px-6 bg-[#f8fafc]">
<div className="max-w-4xl mx-auto">
<section className="py-16 md:py-20 px-6 bg-[#f8fafc]">
<div className="max-w-5xl mx-auto">
<ScrollReveal>
{/* ═══ 折角卡片 ═══ */}
<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)]">
@@ -162,9 +162,9 @@ export default function ProductPage() {
</div>
{/* ── 内容区 ── */}
<div className="relative p-10 md:p-16 lg:p-20">
<div className="relative p-8 md:p-10 lg:p-14">
{/* 顶部装饰线 + 标签 */}
<div className="flex items-center gap-3 mb-7">
<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">
Brief
@@ -172,7 +172,7 @@ export default function ProductPage() {
</div>
{/* 标题 */}
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-10">
<h2 className="text-3xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1] mb-6">
产品简介
</h2>
@@ -183,11 +183,11 @@ export default function ProductPage() {
{/* ═══ 底部标签 ═══ */}
{product.tags && (
<div className="flex flex-wrap items-center justify-center gap-3 mt-10 pt-10 border-t border-gray-100">
<div className="flex flex-wrap items-center justify-center gap-3 mt-7 pt-7 border-t border-gray-100">
{product.tags.map((tag, i) => (
<span
key={i}
className="px-5 py-2 text-sm font-bold rounded-lg border transition-all duration-300 hover:-translate-y-1 cursor-default"
className="px-5 py-2 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)`,
@@ -308,15 +308,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-3xl md:text-[2.75rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
<h2 className="text-4xl 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-xl font-extrabold text-[#0f172a]">适用对象</span>
<span className="text-lg font-extrabold text-[#0f172a]">适用对象</span>
<div className="flex flex-wrap justify-center gap-3">
{product.target.split('、').map((t, i) => (
<span key={i} className="px-5 py-2 rounded-lg text-base 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-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>
))}
</div>
</div>
@@ -485,6 +485,69 @@ export default function ProductPage() {
</section>
)}
{/* ── 国产化支持 ── */}
<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-8 h-[2px] rounded-full bg-[var(--theme)]/40" />
<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>
<p className="mt-4 text-[#64748b] text-lg max-w-2xl mx-auto">
全面适配国产信创生态，赋能教育信息化自主可控
</p>
</div>
</ScrollReveal>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{ icon: Cpu, title: '国产芯片兼容', desc: '全面适配鲲鹏、飞腾、龙芯等国产CPU架构，从底层保障系统安全可控' },
{ icon: Monitor, title: '国产操作系统', desc: '完美运行于统信UOS、麒麟等国产操作系统，桌面端与服务端全覆盖' },
{ 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="absolute top-0 left-0 right-0 h-1 transition-all duration-500"
style={{ background: `linear-gradient(90deg, transparent, ${product.themeColor}, transparent)`, opacity: 0 }}
/>
<div className="absolute bottom-0 left-0 right-0 h-[3px] transition-all duration-500"
style={{
background: `linear-gradient(90deg, transparent, ${product.themeColor}60, transparent)`,
opacity: 0.5,
}}
/>
<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"
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 }} />
</div>
</div>
<h3 className="text-2xl font-extrabold text-[#0f172a] 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">
{item.desc}
</p>
</div>
</div>
</ScrollReveal>
))}
</div>
</div>
</section>
{/* ── Advantages ── */}
<section className="py-24 md:py-32 px-6 bg-[#f8fafc]">
<div className="max-w-5xl mx-auto">
@@ -495,7 +558,7 @@ 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-3xl md:text-[2.75rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
为什么选择我们
</h2>
</div>
@@ -563,9 +626,9 @@ export default function ProductPage() {
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-lg bg-[var(--theme)]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
<span className="text-sm font-semibold uppercase tracking-[0.25em] text-[var(--theme)]">FAQ</span>
</div>
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
<h2 className="text-5xl md:text-[5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
常见问题
</h2>
</div>
@@ -580,7 +643,7 @@ export default function ProductPage() {
<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-lg font-bold text-[#0f172a]">{item.q}</h3>
<h3 className="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)]" />
@@ -588,7 +651,7 @@ export default function ProductPage() {
</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-lg leading-relaxed">{item.a}</p>
<p className="text-[#64748b] text-xl leading-relaxed">{item.a}</p>
</div>
</div>
</details>