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

feat: update products section with dark tech theme

Browse Source
This commit is contained in:
张翔
2026-02-21 23:01:53 +08:00
parent d2f92b8a55
commit 1ae05f107b
1 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/sections/products-section.tsx
+36 -32
View File
@@ -5,6 +5,7 @@ import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
import { PRODUCTS } from '@/lib/constants';
@@ -13,7 +14,7 @@ export function ProductsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="products" className="py-24 bg-[#FAF8F8]" ref={ref}>
<section id="products" className="py-24 bg-[var(--color-bg-primary)]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -21,13 +22,13 @@ export function ProductsSection() {
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-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-[#1A1A1A] mb-6">
我们的<span className="text-[#C41E3A]">产品</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
我们的<span className="tech-gradient-text">产品</span>
</h2>
<p className="text-lg text-[#4A4A4A]">
<p className="text-lg text-gray-400">
自主研发的企业级产品，助力企业高效运营，实现数字化转型
</p>
</motion.div>
@@ -40,51 +41,49 @@ export function ProductsSection() {
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>
<span className="inline-block px-3 py-1 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium w-fit mb-3">
<Badge variant="secondary" className="w-fit mb-3">
{product.category}
</span>
<CardTitle className="text-xl text-[#1A1A1A]">{product.title}</CardTitle>
</Badge>
<CardTitle>{product.title}</CardTitle>
</CardHeader>
<CardContent className="flex-1 flex flex-col">
<CardDescription className="text-base leading-relaxed mb-4 flex-1 text-[#6B6B6B]">
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
{product.description}
</CardDescription>
{/* 核心功能 */}
<div className="mb-4">
<p className="text-sm font-medium text-[#1A1A1A] mb-2">核心功能</p>
<p className="text-sm font-medium 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-[#F5F0F0] text-[#4A4A4A] rounded"
className="inline-flex items-center text-xs px-2 py-1 bg-[var(--color-bg-tertiary)] text-gray-300 rounded border border-gray-700"
>
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
<Check className="w-3 h-3 mr-1 text-[var(--color-tech-blue)]" />
{feature}
</span>
))}
</div>
</div>
{/* 核心价值 */}
<div className="mb-4">
<p className="text-sm font-medium text-[#1A1A1A] mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
<p className="text-sm font-medium 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-[#6B6B6B] flex items-start">
<span className="text-[#C41E3A] mr-1.5">•</span>
<li key={idx} className="text-xs text-gray-400 flex items-start">
<span className="text-[var(--color-tech-blue)] mr-1.5">•</span>
{benefit}
</li>
))}
</ul>
</div>
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
<Button variant="outline" className="w-full mt-auto">
了解详情
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
@@ -94,24 +93,29 @@ export function ProductsSection() {
))}
</div>
{/* 底部CTA */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
className="mt-20 text-center"
>
<div className="bg-gradient-to-r from-[#FEF2F4] to-[#FAF8F8] rounded-2xl p-12 border border-[#E8E0E0]">
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A1A] mb-4">
需要定制化解决方案？
</h3>
<p className="text-[#6B6B6B] mb-8 max-w-2xl mx-auto">
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
</p>
<Button size="lg">
联系我们
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<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="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>
<p className="text-gray-400 mb-8 max-w-2xl mx-auto">
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
</p>
<Button size="lg">
联系我们
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</div>
</div>
</motion.div>
</div>