style(ui组件): 更新UI组件颜色方案为深色主题
refactor(card): 调整卡片背景色和边框颜色 refactor(badge): 修改徽章颜色变体 refactor(button): 更新按钮颜色样式 refactor(input): 调整输入框颜色方案 refactor(textarea): 修改文本区域颜色样式 refactor(header): 更新导航栏颜色 refactor(hero-section): 调整英雄区域颜色和渐变
This commit is contained in:
张翔
@@ -43,8 +43,8 @@ export function AboutSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<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]" />
|
||||
<section id="about" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
|
||||
<div className="container-wide relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -53,24 +53,24 @@ export function AboutSection() {
|
||||
className="max-w-4xl mx-auto"
|
||||
>
|
||||
<div className="text-center mb-16">
|
||||
<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 className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
关于我们
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#718096]">
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
{COMPANY_INFO.slogan}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-16">
|
||||
<h3 className="text-2xl font-bold text-[#1A1A2E] mb-4">公司简介</h3>
|
||||
<p className="text-[#718096] mb-6 leading-relaxed">
|
||||
<h3 className="text-2xl font-bold text-[#1C1C1C] mb-4">公司简介</h3>
|
||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
|
||||
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
|
||||
</p>
|
||||
<p className="text-[#718096] mb-6 leading-relaxed">
|
||||
<p className="text-[#5C5C5C] mb-6 leading-relaxed">
|
||||
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
|
||||
公司秉承“专注科技创新，驱动智慧未来”的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
|
||||
</p>
|
||||
@@ -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 border-[#E2E8F0]">
|
||||
<Card key={idx} className="text-center border-[#E5E5E5]">
|
||||
<CardContent className="pt-6">
|
||||
<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>
|
||||
<div className="text-sm text-[#5C5C5C]">{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-[#1A1A2E] mb-8 text-center">企业价值观</h3>
|
||||
<h3 className="text-2xl font-bold text-[#1C1C1C] 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-[#F5F7FA] rounded-xl border border-[#E2E8F0] hover:border-[#005EB8] transition-all duration-300"
|
||||
className="flex items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5] hover:border-[#1C1C1C] transition-all duration-300"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-lg bg-[#005EB8] flex items-center justify-center flex-shrink-0">
|
||||
<div className="w-12 h-12 rounded-lg bg-[#C41E3A] flex items-center justify-center flex-shrink-0">
|
||||
<value.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-[#1A1A2E] mb-2">{value.title}</h4>
|
||||
<p className="text-[#718096] text-sm">{value.description}</p>
|
||||
<h4 className="font-semibold text-[#1C1C1C] mb-2">{value.title}</h4>
|
||||
<p className="text-[#5C5C5C] 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-[#1A1A2E] mb-8 text-center">发展历程</h3>
|
||||
<h3 className="text-2xl font-bold text-[#1C1C1C] mb-8 text-center">发展历程</h3>
|
||||
<div className="space-y-6">
|
||||
{milestones.map((milestone, idx) => (
|
||||
<motion.div
|
||||
@@ -133,10 +133,10 @@ 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-[#F5F7FA] rounded-xl border border-[#E2E8F0]"
|
||||
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-[#FFFBF5] rounded-xl border border-[#E5E5E5]"
|
||||
>
|
||||
<div className="md:w-32 flex-shrink-0">
|
||||
<span className="text-sm font-medium text-[#005EB8]">{milestone.date}</span>
|
||||
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-[#1A1A2E] mb-1">{milestone.title}</h4>
|
||||
|
||||
@@ -105,7 +105,7 @@ export function ContactSection() {
|
||||
return (
|
||||
<section id="contact" className="section-padding relative bg-white overflow-hidden" ref={sectionRef}>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(0,94,184,0.03)] via-transparent to-transparent" />
|
||||
<div className="absolute inset-0 bg-gradient-radial from-[rgba(79,70,229,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-[#005EB8] to-[#C41E3A]" />
|
||||
<span className="text-sm text-[#718096] tracking-wide">联系我们</span>
|
||||
<div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[#C41E3A]" />
|
||||
<span className="text-sm text-[#5C5C5C] tracking-wide">联系我们</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
开启 <span className="text-[#C41E3A]">合作</span>
|
||||
</h2>
|
||||
<p className="mt-4 text-[#718096] max-w-2xl">
|
||||
<p className="mt-4 text-[#5C5C5C] max-w-2xl">
|
||||
无论您有任何问题或合作意向，我们都很乐意与您交流
|
||||
</p>
|
||||
</div>
|
||||
@@ -136,72 +136,72 @@ export function ContactSection() {
|
||||
`}
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-[#1A1A2E] mb-6">联系方式</h3>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-6">联系方式</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-4 group">
|
||||
<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">
|
||||
<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">
|
||||
<Mail className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">邮箱</p>
|
||||
<a href={`mailto:${COMPANY_INFO.email}`} className="text-[#1C1C1C] hover:text-[#C41E3A] 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-[#005EB8] 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-[#C41E3A] 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-[#718096] mb-1">电话</p>
|
||||
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1A1A2E] hover:text-[#005EB8] transition-colors duration-200">
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">电话</p>
|
||||
<a href={`tel:${COMPANY_INFO.phone}`} className="text-[#1C1C1C] hover:text-[#C41E3A] 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-[#005EB8] 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-[#C41E3A] 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-[#718096] mb-1">地址</p>
|
||||
<p className="text-[#1A1A2E]">{COMPANY_INFO.address}</p>
|
||||
<p className="text-sm text-[#5C5C5C] mb-1">地址</p>
|
||||
<p className="text-[#1C1C1C]">{COMPANY_INFO.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Clock className="w-4 h-4 text-[#005EB8]" />
|
||||
<h4 className="text-sm font-medium text-[#1A1A2E]">工作时间</h4>
|
||||
<Clock className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">工作时间</h4>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-[#718096]">周一至周五</span>
|
||||
<span className="text-[#005EB8]">9:00 - 18:00</span>
|
||||
<span className="text-[#5C5C5C]">周一至周五</span>
|
||||
<span className="text-[#C41E3A]">9:00 - 18:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#F5F7FA] p-5 rounded-lg border border-[#E2E8F0]">
|
||||
<div className="bg-[#FFFBF5] p-5 rounded-lg border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<HeadphonesIcon className="w-4 h-4 text-[#005EB8]" />
|
||||
<h4 className="text-sm font-medium text-[#1A1A2E]">我们的承诺</h4>
|
||||
<HeadphonesIcon className="w-4 h-4 text-[#C41E3A]" />
|
||||
<h4 className="text-sm font-medium text-[#1C1C1C]">我们的承诺</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-[#718096]">工作日 2 小时内快速响应您的咨询</p>
|
||||
<p className="text-sm text-[#5C5C5C]">工作日 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-[#718096]">提供免费的业务咨询和方案评估服务</p>
|
||||
<p className="text-sm text-[#5C5C5C]">提供免费的业务咨询和方案评估服务</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-[#718096]">根据您的需求量身定制最优解决方案</p>
|
||||
<p className="text-sm text-[#5C5C5C]">根据您的需求量身定制最优解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -65,7 +65,7 @@ export function HeroSection() {
|
||||
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-linear-to-b from-[#F5F7FA] to-white"
|
||||
>
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-200 h-150 bg-[radial-gradient(ellipse_at_center,rgba(0,94,184,0.05)_0%,transparent_60%)]" />
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-200 h-150 bg-[radial-gradient(ellipse_at_center,rgba(79,70,229,0.06)_0%,transparent_60%)]" />
|
||||
|
||||
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-150 h-100 bg-[radial-gradient(ellipse_at_center,rgba(196,30,58,0.04)_0%,transparent_50%)]" />
|
||||
</div>
|
||||
@@ -78,7 +78,7 @@ export function HeroSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<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">
|
||||
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium">
|
||||
数字印章 · 智连未来
|
||||
</span>
|
||||
</motion.div>
|
||||
@@ -143,10 +143,10 @@ export function HeroSection() {
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-[#E2E8F0] transition-all duration-300 hover:border-[#005EB8] hover:shadow-md"
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#FAFAFA] border border-[#E5E5E5] transition-all duration-300 hover:border-[#1C1C1C] hover:shadow-md"
|
||||
>
|
||||
<feature.icon className="w-4 h-4 text-[#005EB8]" />
|
||||
<span className="text-sm text-[#4A5568]">{feature.text}</span>
|
||||
<feature.icon className="w-4 h-4 text-[#C41E3A]" />
|
||||
<span className="text-sm text-[#3D3D3D]">{feature.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
@@ -12,7 +12,7 @@ export function NewsSection() {
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
return (
|
||||
<section id="news" className="py-24 bg-[#F5F7FA]" ref={ref}>
|
||||
<section id="news" className="py-24 bg-[#F5F5F5]" 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-[#005EB8]/30 bg-[#E8F4FD] text-[#005EB8] text-sm font-medium mb-4">
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
新闻动态
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A2E] mb-6">
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
最新<span className="text-[#C41E3A]">资讯</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#718096]">
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
了解公司最新动态、行业资讯和技术分享
|
||||
</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 border-[#E2E8F0] hover:border-[#005EB8]">
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#E8F4FD] text-[#005EB8] text-xs font-medium">
|
||||
<span className="inline-block px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#1C1C1C] text-xs font-medium">
|
||||
{news.category}
|
||||
</span>
|
||||
<span className="text-sm text-[#718096] flex items-center gap-1">
|
||||
<span className="text-sm text-[#5C5C5C] 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-[#005EB8] hover:text-[#C41E3A] transition-colors group/link"
|
||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] hover:text-[#C41E3A] transition-colors group/link"
|
||||
>
|
||||
阅读更多
|
||||
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
|
||||
@@ -79,7 +79,7 @@ export function NewsSection() {
|
||||
onClick={() => {
|
||||
alert('更多新闻功能开发中...');
|
||||
}}
|
||||
className="inline-flex items-center text-sm font-medium text-[#005EB8] hover:text-[#C41E3A] transition-colors bg-transparent border-none cursor-pointer group"
|
||||
className="inline-flex items-center text-sm font-medium text-[#1C1C1C] 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" />
|
||||
|
||||
@@ -15,7 +15,7 @@ export function ProductsSection() {
|
||||
|
||||
return (
|
||||
<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/2 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,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
|
||||
@@ -24,13 +24,13 @@ export function ProductsSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<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 className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
产品服务
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-6">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-6">
|
||||
我们的<span className="text-[#C41E3A]">产品</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#718096]">
|
||||
<p className="text-lg text-[#5C5C5C]">
|
||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -43,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 border-[#E2E8F0] hover:border-[#005EB8]">
|
||||
<Card className="h-full flex flex-col group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="w-fit mb-3">
|
||||
{product.category}
|
||||
@@ -56,14 +56,14 @@ export function ProductsSection() {
|
||||
</CardDescription>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1A1A2E] mb-2">核心功能</p>
|
||||
<p className="text-sm font-medium text-[#1C1C1C] 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-white text-[#4A5568] rounded border border-[#E2E8F0]"
|
||||
className="inline-flex items-center text-xs px-2 py-1 bg-[#FAFAFA] text-[#3D3D3D] rounded border border-[#E5E5E5]"
|
||||
>
|
||||
<Check className="w-3 h-3 mr-1 text-[#005EB8]" />
|
||||
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
@@ -71,14 +71,14 @@ export function ProductsSection() {
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm font-medium text-[#1A1A2E] mb-2 flex items-center">
|
||||
<p className="text-sm font-medium text-[#1C1C1C] 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-[#718096] flex items-start">
|
||||
<span className="text-[#005EB8] mr-1.5">•</span>
|
||||
<li key={idx} className="text-xs text-[#5C5C5C] flex items-start">
|
||||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
||||
{benefit}
|
||||
</li>
|
||||
))}
|
||||
@@ -103,7 +103,7 @@ export function ProductsSection() {
|
||||
>
|
||||
<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-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[rgba(79,70,229,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">
|
||||
|
||||
@@ -21,7 +21,7 @@ export function ServicesSection() {
|
||||
|
||||
return (
|
||||
<section id="services" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(0,94,184,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(79,70,229,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">
|
||||
@@ -31,13 +31,13 @@ export function ServicesSection() {
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<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 className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium mb-4">
|
||||
核心业务
|
||||
</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1A1A2E] mb-4">
|
||||
我们的 <span className="text-[#005EB8]">核心服务</span>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
我们的 <span className="text-[#C41E3A]">核心服务</span>
|
||||
</h2>
|
||||
<p className="text-lg text-[#718096] max-w-2xl mx-auto">
|
||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||||
专业技术团队，为您提供全方位的数字化解决方案
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -53,13 +53,13 @@ export function ServicesSection() {
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
>
|
||||
<Card className="p-6 h-full group cursor-pointer border-[#E2E8F0] hover:border-[#005EB8]">
|
||||
<Card className="p-6 h-full group cursor-pointer border-[#E5E5E5] hover:border-[#1C1C1C]">
|
||||
<CardContent className="p-0">
|
||||
<div className="w-12 h-12 rounded-xl bg-[#E8F4FD] flex items-center justify-center mb-4 group-hover:bg-[#005EB8] transition-all duration-300">
|
||||
{Icon && <Icon className="w-6 h-6 text-[#005EB8] group-hover:text-white transition-colors" />}
|
||||
<div className="w-12 h-12 rounded-xl bg-[#F5F5F5] flex items-center justify-center mb-4 group-hover:bg-[#C41E3A] transition-all duration-300">
|
||||
{Icon && <Icon className="w-6 h-6 text-[#1C1C1C] group-hover:text-white transition-colors" />}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-[#1A1A2E] mb-3">{service.title}</h3>
|
||||
<p className="text-[#718096] text-sm leading-relaxed">{service.description}</p>
|
||||
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">{service.title}</h3>
|
||||
<p className="text-[#5C5C5C] text-sm leading-relaxed">{service.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user