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

style(ui组件): 更新UI组件颜色方案为深色主题

Browse Source 
refactor(card): 调整卡片背景色和边框颜色
refactor(badge): 修改徽章颜色变体
refactor(button): 更新按钮颜色样式
refactor(input): 调整输入框颜色方案
refactor(textarea): 修改文本区域颜色样式
refactor(header): 更新导航栏颜色
refactor(hero-section): 调整英雄区域颜色和渐变
This commit is contained in:
张翔
2026-02-23 09:18:41 +08:00
parent 9e7fb20d2a
commit 5ec2ad0043
168 changed files with 823 additions and 822 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/about-section.tsx
+18 -18
View File
@@ -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">
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
公司秉承&ldquo;专注科技创新，驱动智慧未来&rdquo;的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
</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>