novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构所有 Section 组件为医疗健康风格

Browse Source 
- ProductsSection: 浅灰背景、蓝红配色
- AboutSection: 白色背景、专业蓝图标
- NewsSection: 浅灰背景、蓝红强调
- ContactSection: 白色背景、蓝图标、红强调
This commit is contained in:
张翔
2026-02-23 08:11:11 +08:00
parent 064f6b9e83
commit ef4b6d1022
4 changed files with 87 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/about-section.tsx
+24 -24
View File
@@ -43,8 +43,9 @@ export function AboutSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="about" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
<div className="container-custom">
<section id="about" className="py-24 bg-white relative" ref={ref}>
<div className="absolute inset-0 bg-[linear-gradient(rgba(0,94,184,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(0,94,184,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
<div className="container-wide relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -52,30 +53,29 @@ export function AboutSection() {
className="max-w-4xl mx-auto"
>
<div className="text-center mb-16">
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-blue)]/30 bg-[var(--color-tech-blue)]/5 text-[var(--color-tech-blue)] text-sm font-medium mb-4">
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
关于我们
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
关于 <span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400">
<p className="text-lg text-[#718096]">
{COMPANY_INFO.slogan}
</p>
</div>
<div className="prose prose-lg max-w-none mb-16">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">公司简介</h3>
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
<div className="mb-16">
<h3 className="text-2xl font-bold text-[#1A1A2E] mb-4">公司简介</h3>
<p className="text-[#718096] mb-6 leading-relaxed">
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
</p>
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
<p className="text-[#718096] mb-6 leading-relaxed">
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
</p>
</div>
{/* 数据统计 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -83,10 +83,10 @@ export function AboutSection() {
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
>
{STATS.map((stat, idx) => (
<Card key={idx} className="text-center">
<Card key={idx} className="text-center border-[#E2E8F0]">
<CardContent className="pt-6">
<div className="text-3xl sm:text-4xl font-bold tech-gradient-text mb-2">{stat.value}</div>
<div className="text-sm text-gray-600 dark:text-gray-400">{stat.label}</div>
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
<div className="text-sm text-[#718096]">{stat.label}</div>
</CardContent>
</Card>
))}
@@ -98,7 +98,7 @@ export function AboutSection() {
transition={{ duration: 0.6, delay: 0.3 }}
className="mb-16"
>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">企业价值观</h3>
<h3 className="text-2xl font-bold text-[#1A1A2E] mb-8 text-center">企业价值观</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{values.map((value, idx) => (
<motion.div
@@ -106,14 +106,14 @@ export function AboutSection() {
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
className="flex items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800 hover:border-[var(--color-tech-blue)] transition-all duration-300"
className="flex items-start gap-4 p-6 bg-[#F5F7FA] rounded-xl border border-[#E2E8F0] hover:border-[#005EB8] transition-all duration-300"
>
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] flex items-center justify-center flex-shrink-0">
<div className="w-12 h-12 rounded-lg bg-[#005EB8] flex items-center justify-center flex-shrink-0">
<value.icon className="w-6 h-6 text-white" />
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white mb-2">{value.title}</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">{value.description}</p>
<h4 className="font-semibold text-[#1A1A2E] mb-2">{value.title}</h4>
<p className="text-[#718096] text-sm">{value.description}</p>
</div>
</motion.div>
))}
@@ -125,7 +125,7 @@ export function AboutSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">发展历程</h3>
<h3 className="text-2xl font-bold text-[#1A1A2E] mb-8 text-center">发展历程</h3>
<div className="space-y-6">
{milestones.map((milestone, idx) => (
<motion.div
@@ -133,14 +133,14 @@ export function AboutSection() {
initial={{ opacity: 0, x: -20 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white dark:bg-[var(--color-bg-secondary)] rounded-xl border border-gray-200 dark:border-gray-800"
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#F5F7FA] rounded-xl border border-[#E2E8F0]"
>
<div className="md:w-32 flex-shrink-0">
<span className="text-sm font-medium text-[var(--color-tech-blue)]">{milestone.date}</span>
<span className="text-sm font-medium text-[#005EB8]">{milestone.date}</span>
</div>
<div className="flex-1">
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">{milestone.title}</h4>
<p className="text-gray-600 dark:text-gray-400 text-sm">{milestone.description}</p>
<h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
<p className="text-[#718096] text-sm">{milestone.description}</p>
</div>
</motion.div>
))}
src/components/sections/contact-section.tsx
+32 -32
View File
@@ -103,9 +103,9 @@ export function ContactSection() {
}
return (
<section id="contact" className="section-padding relative bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={sectionRef}>
<section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
<div className="absolute inset-0 pointer-events-none">
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-radial from-[var(--color-tech-blue)]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
<div className="absolute inset-0 bg-gradient-radial from-[rgba(0,94,184,0.03)] via-transparent to-transparent" />
</div>
<div className="container-wide relative z-10">
@@ -116,13 +116,13 @@ export function ContactSection() {
`}
>
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-px bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)]" />
<span className="text-sm text-gray-600 dark:text-gray-400 tracking-wide">联系我们</span>
<div className="w-8 h-px bg-gradient-to-r from-[#005EB8] to-[#C41E3A]" />
<span className="text-sm text-[#718096] tracking-wide">联系我们</span>
</div>
<h2 className="text-3xl sm:text-4xl font-semibold text-gray-900 dark:text-white tracking-tight chapter-title">
开启合作
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
开启 <span className="text-[#C41E3A]">合作</span>
</h2>
<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl">
<p className="mt-4 text-[#718096] max-w-2xl">
无论您有任何问题或合作意向，我们都很乐意与您交流
</p>
</div>
@@ -136,72 +136,72 @@ export function ContactSection() {
`}
>
<div>
<h3 className="text-lg font-semibold text-[#171717] mb-6">联系方式</h3>
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">联系方式</h3>
<div className="space-y-4">
<div className="flex items-start gap-4 group">
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<Mail className="w-5 h-5 text-white" />
</div>
<div>
<p className="text-sm text-[#737373] mb-1">邮箱</p>
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#171717] hover:text-[#C41E3A] transition-colors duration-200">
<p className="text-sm text-[#718096] mb-1">邮箱</p>
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
{COMPANY_INFO.email}
</a>
</div>
</div>
<div className="flex items-start gap-4 group">
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<Phone className="w-5 h-5 text-white" />
</div>
<div>
<p className="text-sm text-[#737373] mb-1">电话</p>
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#171717] hover:text-[#C41E3A] transition-colors duration-200">
<p className="text-sm text-[#718096] mb-1">电话</p>
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
{COMPANY_INFO.phone}
</a>
</div>
</div>
<div className="flex items-start gap-4 group">
<div className="w-10 h-10 bg-[#C41E3A] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<div className="w-10 h-10 bg-[#005EB8] rounded-md flex items-center justify-center flex-shrink-0 transition-transform duration-200 group-hover:scale-105">
<MapPin className="w-5 h-5 text-white" />
</div>
<div>
<p className="text-sm text-[#737373] mb-1">地址</p>
<p className="text-[#171717]">{COMPANY_INFO.address}</p>
<p className="text-sm text-[#718096] mb-1">地址</p>
<p className="text-[#1A1A2E]">{COMPANY_INFO.address}</p>
</div>
</div>
</div>
</div>
<div className="geometric-card p-5 rounded-lg">
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
<div className="flex items-center gap-2 mb-3">
<Clock className="w-4 h-4 text-[#C41E3A]" />
<h4 className="text-sm font-medium text-[#171717]">工作时间</h4>
<Clock className="w-4 h-4 text-[#005EB8]" />
<h4 className="text-sm font-medium text-[#1A1A2E]">工作时间</h4>
</div>
<div className="space-y-1">
<div className="flex justify-between text-sm">
<span className="text-[#737373]">周一至周五</span>
<span className="text-[#C41E3A]">9:00 - 18:00</span>
<span className="text-[#718096]">周一至周五</span>
<span className="text-[#005EB8]">9:00 - 18:00</span>
</div>
</div>
</div>
<div className="geometric-card p-5 rounded-lg">
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
<div className="flex items-center gap-2 mb-3">
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
<h4 className="text-sm font-medium text-[#171717]">我们的承诺</h4>
<HeadphonesIcon className="w-4 h-4 text-[#005EB8]" />
<h4 className="text-sm font-medium text-[#1A1A2E]">我们的承诺</h4>
</div>
<div className="space-y-3">
<div className="flex items-start gap-2">
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
<p className="text-sm text-[#737373]">工作日 2 小时内快速响应您的咨询</p>
<p className="text-sm text-[#718096]">工作日 2 小时内快速响应您的咨询</p>
</div>
<div className="flex items-start gap-2">
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
<p className="text-sm text-[#737373]">提供免费的业务咨询和方案评估服务</p>
<p className="text-sm text-[#718096]">提供免费的业务咨询和方案评估服务</p>
</div>
<div className="flex items-start gap-2">
<div className="w-1.5 h-1.5 bg-[#C41E3A] rounded-full mt-2 flex-shrink-0" />
<p className="text-sm text-[#737373]">根据您的需求量身定制最优解决方案</p>
<p className="text-sm text-[#718096]">根据您的需求量身定制最优解决方案</p>
</div>
</div>
</div>
@@ -214,16 +214,16 @@ export function ContactSection() {
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
`}
>
<div className="geometric-card p-6 sm:p-8 rounded-lg">
<h3 className="text-lg font-semibold text-[#171717] mb-6">发送消息</h3>
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0]">
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h3>
{isSubmitted ? (
<div className="text-center py-12">
<div className="w-16 h-16 bg-[#C41E3A] rounded-full flex items-center justify-center mx-auto mb-4 animate-stamp-in">
<CheckCircle2 className="w-8 h-8 text-white" />
</div>
<h4 className="text-xl font-semibold text-[#171717] mb-2">消息已发送</h4>
<p className="text-[#737373]">感谢您的留言，我们会尽快与您联系！</p>
<h4 className="text-xl font-semibold text-[#1A1A2E] mb-2">消息已发送</h4>
<p className="text-[#718096]">感谢您的留言，我们会尽快与您联系！</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-5">
src/components/sections/news-section.tsx
+10 -11
View File
@@ -12,7 +12,7 @@ export function NewsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="news" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
<section id="news" className="py-24 bg-[#F5F7FA]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -20,13 +20,13 @@ export function NewsSection() {
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-cyan)]/30 bg-[var(--color-tech-cyan)]/5 text-[var(--color-tech-cyan)] text-sm font-medium mb-4">
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
新闻动态
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
最新<span className="tech-gradient-text">资讯</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A2E] mb-6">
最新<span className="text-[#C41E3A]">资讯</span>
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400">
<p className="text-lg text-[#718096]">
了解公司最新动态、行业资讯和技术分享
</p>
</motion.div>
@@ -39,13 +39,13 @@ export function NewsSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
>
<Card className="h-full flex flex-col group cursor-pointer">
<Card className="h-full flex flex-col group cursor-pointer border-[#E2E8F0] hover:border-[#005EB8]">
<CardHeader>
<div className="flex items-center gap-2 mb-3">
<span className="inline-block px-2 py-0.5 rounded-full bg-[var(--color-tech-cyan)]/10 text-[var(--color-tech-cyan)] text-xs font-medium">
<span className="inline-block px-2 py-0.5 rounded-full bg-[#E8F4FD] text-[#005EB8] text-xs font-medium">
{news.category}
</span>
<span className="text-sm text-gray-500 dark:text-gray-500 flex items-center gap-1">
<span className="text-sm text-[#718096] flex items-center gap-1">
<Calendar className="w-3 h-3" />
{news.date}
</span>
@@ -58,7 +58,7 @@ export function NewsSection() {
</CardDescription>
<a
href={`/news/${news.id}`}
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors group/link"
className="inline-flex items-center text-sm font-medium text-[#005EB8] hover:text-[#C41E3A] transition-colors group/link"
>
阅读更多
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
@@ -69,7 +69,6 @@ export function NewsSection() {
))}
</div>
{/* 查看更多 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -80,7 +79,7 @@ export function NewsSection() {
onClick={() => {
alert('更多新闻功能开发中...');
}}
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors bg-transparent border-none cursor-pointer group"
className="inline-flex items-center text-sm font-medium text-[#005EB8] hover:text-[#C41E3A] transition-colors bg-transparent border-none cursor-pointer group"
>
查看全部新闻
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
src/components/sections/products-section.tsx
+21 -19
View File
@@ -14,21 +14,23 @@ export function ProductsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="products" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
<div className="container-custom">
<section id="products" className="py-24 bg-[#F5F7FA] relative overflow-hidden" ref={ref}>
<div className="absolute top-1/2 left-0 w-[400px] h-[400px] bg-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
<div className="container-wide relative z-10">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[var(--color-tech-purple)]/30 bg-[var(--color-tech-purple)]/5 text-[var(--color-tech-purple)] text-sm font-medium mb-4">
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
产品服务
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
我们的<span className="tech-gradient-text">产品</span>
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
我们的<span className="text-[#C41E3A]">产品</span>
</h2>
<p className="text-lg text-gray-600 dark:text-gray-400">
<p className="text-lg text-[#718096]">
自主研发的企业级产品，助力企业高效运营，实现数字化转型
</p>
</motion.div>
@@ -41,7 +43,7 @@ export function ProductsSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
>
<Card className="h-full flex flex-col group cursor-pointer">
<Card className="h-full flex flex-col group cursor-pointer border-[#E2E8F0] hover:border-[#005EB8]">
<CardHeader>
<Badge variant="secondary" className="w-fit mb-3">
{product.category}
@@ -54,14 +56,14 @@ export function ProductsSection() {
</CardDescription>
<div className="mb-4">
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2">核心功能</p>
<p className="text-sm font-medium text-[#1A1A2E] mb-2">核心功能</p>
<div className="flex flex-wrap gap-1.5">
{product.features.slice(0, 4).map((feature, idx) => (
<span
key={idx}
className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 dark:bg-[var(--color-bg-tertiary)] text-gray-700 dark:text-gray-300 rounded border border-gray-200 dark:border-gray-700"
className="inline-flex items-center text-xs px-2 py-1 bg-white text-[#4A5568] rounded border border-[#E2E8F0]"
>
<Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
<Check className="w-3 h-3 mr-1 text-[#005EB8]" />
{feature}
</span>
))}
@@ -69,14 +71,14 @@ export function ProductsSection() {
</div>
<div className="mb-4">
<p className="text-sm font-medium text-gray-900 dark:text-white mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-[var(--color-tech-blue)]" />
<p className="text-sm font-medium text-[#1A1A2E] mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
核心价值
</p>
<ul className="space-y-1">
{product.benefits.map((benefit, idx) => (
<li key={idx} className="text-xs text-gray-600 dark:text-gray-400 flex items-start">
<span className="text-[var(--color-tech-blue)] mr-1.5">•</span>
<li key={idx} className="text-xs text-[#718096] flex items-start">
<span className="text-[#005EB8] mr-1.5">•</span>
{benefit}
</li>
))}
@@ -99,16 +101,16 @@ export function ProductsSection() {
transition={{ duration: 0.6, delay: 0.5 }}
className="mt-20 text-center"
>
<div className="bg-gradient-to-r from-gray-100 to-gray-200 dark:from-[var(--color-bg-secondary)] dark:to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-200 dark:border-gray-800 relative overflow-hidden">
<div className="bg-white rounded-2xl p-12 border border-[#E2E8F0] relative overflow-hidden">
<div className="absolute inset-0 pointer-events-none">
<div className="absolute top-0 right-0 w-64 h-64 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[var(--color-tech-purple)]/5 rounded-full blur-3xl" />
<div className="absolute top-0 right-0 w-64 h-64 bg-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
</div>
<div className="relative z-10">
<h3 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A2E] mb-4">
需要定制化解决方案？
</h3>
<p className="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
<p className="text-[#718096] mb-8 max-w-2xl mx-auto">
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
</p>
<Button size="lg">