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