feat: update products section with dark tech theme
This commit is contained in:
张翔
@@ -5,6 +5,7 @@ import { useInView } from 'framer-motion';
|
|||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
|
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
|
||||||
import { PRODUCTS } from '@/lib/constants';
|
import { PRODUCTS } from '@/lib/constants';
|
||||||
|
|
||||||
@@ -13,7 +14,7 @@ export function ProductsSection() {
|
|||||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||||
|
|
||||||
return (
|
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">
|
<div className="container-custom">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
@@ -21,13 +22,13 @@ export function ProductsSection() {
|
|||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
className="text-center max-w-3xl mx-auto mb-16"
|
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>
|
</span>
|
||||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
|
||||||
我们的<span className="text-[#C41E3A]">产品</span>
|
我们的<span className="tech-gradient-text">产品</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-[#4A4A4A]">
|
<p className="text-lg text-gray-400">
|
||||||
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
自主研发的企业级产品，助力企业高效运营，实现数字化转型
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -40,51 +41,49 @@ export function ProductsSection() {
|
|||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
|
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>
|
<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}
|
{product.category}
|
||||||
</span>
|
</Badge>
|
||||||
<CardTitle className="text-xl text-[#1A1A1A]">{product.title}</CardTitle>
|
<CardTitle>{product.title}</CardTitle>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="flex-1 flex flex-col">
|
<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}
|
{product.description}
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
|
|
||||||
{/* 核心功能 */}
|
|
||||||
<div className="mb-4">
|
<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">
|
<div className="flex flex-wrap gap-1.5">
|
||||||
{product.features.slice(0, 4).map((feature, idx) => (
|
{product.features.slice(0, 4).map((feature, idx) => (
|
||||||
<span
|
<span
|
||||||
key={idx}
|
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}
|
{feature}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 核心价值 */}
|
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<p className="text-sm font-medium text-[#1A1A1A] mb-2 flex items-center">
|
<p className="text-sm font-medium text-white mb-2 flex items-center">
|
||||||
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
|
<TrendingUp className="w-4 h-4 mr-1 text-[var(--color-tech-blue)]" />
|
||||||
核心价值
|
核心价值
|
||||||
</p>
|
</p>
|
||||||
<ul className="space-y-1">
|
<ul className="space-y-1">
|
||||||
{product.benefits.map((benefit, idx) => (
|
{product.benefits.map((benefit, idx) => (
|
||||||
<li key={idx} className="text-xs text-[#6B6B6B] flex items-start">
|
<li key={idx} className="text-xs text-gray-400 flex items-start">
|
||||||
<span className="text-[#C41E3A] mr-1.5">•</span>
|
<span className="text-[var(--color-tech-blue)] mr-1.5">•</span>
|
||||||
{benefit}
|
{benefit}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
@@ -94,18 +93,22 @@ export function ProductsSection() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 底部CTA */}
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||||
transition={{ duration: 0.6, delay: 0.5 }}
|
transition={{ duration: 0.6, delay: 0.5 }}
|
||||||
className="mt-20 text-center"
|
className="mt-20 text-center"
|
||||||
>
|
>
|
||||||
<div className="bg-gradient-to-r from-[#FEF2F4] to-[#FAF8F8] rounded-2xl p-12 border border-[#E8E0E0]">
|
<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">
|
||||||
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A1A] mb-4">
|
<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>
|
</h3>
|
||||||
<p className="text-[#6B6B6B] mb-8 max-w-2xl mx-auto">
|
<p className="text-gray-400 mb-8 max-w-2xl mx-auto">
|
||||||
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
|
||||||
</p>
|
</p>
|
||||||
<Button size="lg">
|
<Button size="lg">
|
||||||
@@ -113,6 +116,7 @@ export function ProductsSection() {
|
|||||||
<ArrowRight className="ml-2 w-4 h-4" />
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user