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

fix: add light/dark mode support with Tailwind dark: prefix

Browse Source
This commit is contained in:
张翔
2026-02-21 23:32:47 +08:00
parent 1d7872c8cc
commit 15e17a8f20
13 changed files with 2581 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/about-section.tsx
+21 -25
View File
@@ -43,9 +43,8 @@ export function AboutSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="about" className="py-24 bg-[#FAF8F8]" ref={ref}>
<section id="about" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
<div className="container-custom">
{/* 头部介绍 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -53,25 +52,24 @@ export function AboutSection() {
className="max-w-4xl mx-auto"
>
<div className="text-center mb-16">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
<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>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</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>
<p className="text-lg text-[#4A4A4A]">
<p className="text-lg text-gray-600 dark:text-gray-400">
{COMPANY_INFO.slogan}
</p>
</div>
{/* 公司简介 */}
<div className="prose prose-lg max-w-none mb-16">
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-4">公司简介</h3>
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
<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">
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
</p>
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
<p className="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
</p>
@@ -85,23 +83,22 @@ 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-[#E8E0E0] bg-white hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1">
<Card key={idx} className="text-center">
<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-[#6B6B6B]">{stat.label}</div>
<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>
</CardContent>
</Card>
))}
</motion.div>
{/* 企业价值观 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.3 }}
className="mb-16"
>
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">企业价值观</h3>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">企业价值观</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{values.map((value, idx) => (
<motion.div
@@ -109,27 +106,26 @@ 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 rounded-xl border border-[#E8E0E0] hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300"
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"
>
<div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
<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">
<value.icon className="w-6 h-6 text-white" />
</div>
<div>
<h4 className="font-semibold text-[#1A1A1A] mb-2">{value.title}</h4>
<p className="text-[#6B6B6B] text-sm">{value.description}</p>
<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>
</div>
</motion.div>
))}
</div>
</motion.div>
{/* 发展历程 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
>
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">发展历程</h3>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-8 text-center">发展历程</h3>
<div className="space-y-6">
{milestones.map((milestone, idx) => (
<motion.div
@@ -137,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 rounded-xl border border-[#E8E0E0]"
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"
>
<div className="md:w-32 flex-shrink-0">
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
<span className="text-sm font-medium text-[var(--color-tech-blue)]">{milestone.date}</span>
</div>
<div className="flex-1">
<h4 className="font-semibold text-[#1A1A1A] mb-1">{milestone.title}</h4>
<p className="text-[#6B6B6B] text-sm">{milestone.description}</p>
<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>
</div>
</motion.div>
))}
src/components/sections/contact-section.tsx
+6 -6
View File
@@ -103,9 +103,9 @@ export function ContactSection() {
}
return (
<section id="contact" className="section-padding relative" ref={sectionRef}>
<section id="contact" className="section-padding relative bg-gray-50 dark:bg-[var(--color-bg-secondary)]" 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-[#C41E3A]/3 to-transparent rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
<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>
<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-[#C41E3A]" />
<span className="text-sm text-[#525252] tracking-wide">联系我们</span>
<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>
<h2 className="text-3xl sm:text-4xl font-semibold text-[#171717] tracking-tight chapter-title">
<h2 className="text-3xl sm:text-4xl font-semibold text-gray-900 dark:text-white tracking-tight chapter-title">
开启合作
</h2>
<p className="mt-4 text-[#737373] max-w-2xl">
<p className="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl">
无论您有任何问题或合作意向，我们都很乐意与您交流
</p>
</div>
src/components/sections/hero-section.tsx
+7 -7
View File
@@ -63,7 +63,7 @@ export function HeroSection() {
<section
id="home"
ref={sectionRef}
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-[var(--color-bg-primary)]"
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-white dark:bg-[var(--color-bg-primary)]"
>
<div className="absolute inset-0 pointer-events-none overflow-hidden">
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-[var(--color-tech-blue)]/5 rounded-full blur-3xl animate-pulse-glow" />
@@ -100,18 +100,18 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={isVisible ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.1 }}
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight tracking-tight mb-6"
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight tracking-tight mb-6"
>
<span className="tech-gradient-text">{COMPANY_INFO.shortName}</span>
<br />
<span className="text-gray-300">企业数字化转型服务商</span>
<span className="text-gray-600 dark:text-gray-300">企业数字化转型服务商</span>
</motion.h1>
<motion.p
initial={{ opacity: 0, y: 20 }}
animate={isVisible ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }}
className="text-lg sm:text-xl text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
className="text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto leading-relaxed"
>
{COMPANY_INFO.description}
</motion.p>
@@ -145,7 +145,7 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={isVisible ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.4 }}
className="pt-12 border-t border-gray-800"
className="pt-12 border-t border-gray-200 dark:border-gray-800"
>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{STATS.map((stat, index) => (
@@ -161,7 +161,7 @@ export function HeroSection() {
</div>
</div>
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-[var(--color-bg-primary)] to-transparent pointer-events-none" />
</section>
);
}
@@ -188,7 +188,7 @@ function StatItem({ stat, index, shouldAnimate }: {
`0${suffix}`
)}
</div>
<div className="text-sm text-gray-500 group-hover:text-gray-400 transition-colors">
<div className="text-sm text-gray-500 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
{stat.label}
</div>
</motion.div>
src/components/sections/news-section.tsx
+12 -12
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" ref={ref}>
<section id="news" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" 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-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
<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>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
最新<span className="text-[#C41E3A]">资讯</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>
<p className="text-lg text-[#4A4A4A]">
<p className="text-lg text-gray-600 dark:text-gray-400">
了解公司最新动态、行业资讯和技术分享
</p>
</motion.div>
@@ -39,26 +39,26 @@ 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 border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
<Card className="h-full flex flex-col group cursor-pointer">
<CardHeader>
<div className="flex items-center gap-2 mb-3">
<span className="inline-block px-2 py-0.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium">
<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">
{news.category}
</span>
<span className="text-sm text-[#8A8A8A] flex items-center gap-1">
<span className="text-sm text-gray-500 dark:text-gray-500 flex items-center gap-1">
<Calendar className="w-3 h-3" />
{news.date}
</span>
</div>
<CardTitle className="text-xl leading-tight text-[#1A1A1A]">{news.title}</CardTitle>
<CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
</CardHeader>
<CardContent className="flex-1 flex flex-col">
<CardDescription className="text-base leading-relaxed mb-6 flex-1 text-[#6B6B6B]">
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
{news.excerpt}
</CardDescription>
<a
href={`/news/${news.id}`}
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors group/link"
className="inline-flex items-center text-sm font-medium text-[var(--color-tech-blue)] hover:text-[var(--color-tech-purple)] transition-colors group/link"
>
阅读更多
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
@@ -80,7 +80,7 @@ export function NewsSection() {
onClick={() => {
alert('更多新闻功能开发中...');
}}
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors bg-transparent border-none cursor-pointer group"
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"
>
查看全部新闻
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
src/components/sections/products-section.tsx
+10 -10
View File
@@ -14,7 +14,7 @@ export function ProductsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="products" className="py-24 bg-[var(--color-bg-primary)]" ref={ref}>
<section id="products" className="py-24 bg-white dark:bg-[var(--color-bg-primary)]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -25,10 +25,10 @@ export function ProductsSection() {
<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>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
<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>
<p className="text-lg text-gray-400">
<p className="text-lg text-gray-600 dark:text-gray-400">
自主研发的企业级产品，助力企业高效运营，实现数字化转型
</p>
</motion.div>
@@ -54,12 +54,12 @@ export function ProductsSection() {
</CardDescription>
<div className="mb-4">
<p className="text-sm font-medium text-white mb-2">核心功能</p>
<p className="text-sm font-medium text-gray-900 dark:text-white 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-[var(--color-bg-tertiary)] text-gray-300 rounded border border-gray-700"
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"
>
<Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
{feature}
@@ -69,13 +69,13 @@ export function ProductsSection() {
</div>
<div className="mb-4">
<p className="text-sm font-medium text-white mb-2 flex items-center">
<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>
<ul className="space-y-1">
{product.benefits.map((benefit, idx) => (
<li key={idx} className="text-xs text-gray-400 flex items-start">
<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>
{benefit}
</li>
@@ -99,16 +99,16 @@ export function ProductsSection() {
transition={{ duration: 0.6, delay: 0.5 }}
className="mt-20 text-center"
>
<div className="bg-gradient-to-r from-[var(--color-bg-secondary)] to-[var(--color-bg-tertiary)] rounded-2xl p-12 border border-gray-800 relative overflow-hidden">
<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="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>
<div className="relative z-10">
<h3 className="text-2xl sm:text-3xl font-bold text-white mb-4">
<h3 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">
需要定制化解决方案？
</h3>
<p className="text-gray-400 mb-8 max-w-2xl mx-auto">
<p className="text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
</p>
<Button size="lg">
src/components/sections/services-section.tsx
+3 -3
View File
@@ -20,7 +20,7 @@ export function ServicesSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="services" className="py-24 bg-[var(--color-bg-secondary)]" ref={ref}>
<section id="services" className="py-24 bg-gray-50 dark:bg-[var(--color-bg-secondary)]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -31,10 +31,10 @@ export function ServicesSection() {
<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>
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">
专业服务，<span className="tech-gradient-text">助力发展</span>
</h2>
<p className="text-lg text-gray-400">
<p className="text-lg text-gray-600 dark:text-gray-400">
我们提供全方位的技术解决方案，帮助企业实现数字化转型
</p>
</motion.div>