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/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>