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