feat: add cases section to homepage
This commit is contained in:
张翔
@@ -1,149 +1,97 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { GlassCard } from '@/components/ui/glass-card';
|
||||
import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { CASES } from '@/lib/constants';
|
||||
import { ArrowRight, Building2, TrendingUp } from 'lucide-react';
|
||||
|
||||
export function CasesSection() {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry?.isIntersecting) {
|
||||
setIsVisible(true);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (sectionRef.current) {
|
||||
observer.observe(sectionRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
const featuredCases = CASES.slice(0, 3);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={sectionRef}
|
||||
id="cases"
|
||||
className="py-24 md:py-32 relative overflow-hidden bg-[#FAFAFA]"
|
||||
>
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#E5E5E5] to-transparent" />
|
||||
</div>
|
||||
|
||||
<section id="cases" className="py-24 bg-white relative overflow-hidden" ref={ref}>
|
||||
<div className="absolute top-1/3 left-0 w-[400px] h-[400px] bg-[rgba(196,30,58,0.03)] rounded-full blur-3xl" />
|
||||
<div className="absolute top-1/3 right-0 w-[300px] h-[300px] bg-[rgba(196,30,58,0.02)] rounded-full blur-3xl" />
|
||||
|
||||
<div className="container-wide relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<div
|
||||
className={`
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up' : ''}
|
||||
`}
|
||||
>
|
||||
<span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#C41E3A]/10 text-[#C41E3A] text-sm font-medium mb-4">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
成功案例
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className={`
|
||||
text-3xl sm:text-4xl font-semibold text-[#171717] mb-4
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-1' : ''}
|
||||
`}
|
||||
>
|
||||
客户成功案例
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center max-w-3xl mx-auto mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
与谁同行，<span className="text-[#C41E3A]">决定能走多远</span>
|
||||
</h2>
|
||||
|
||||
<p
|
||||
className={`
|
||||
text-lg text-[#525252] max-w-2xl mx-auto
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up stagger-2' : ''}
|
||||
`}
|
||||
>
|
||||
以专业实力赢得客户信赖，用技术创新创造商业价值
|
||||
<p className="text-lg text-[#5C5C5C] max-w-2xl mx-auto">
|
||||
我们与优秀的企业同行，共同成长，共创未来
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6 md:gap-8">
|
||||
{CASES.map((caseItem, index) => (
|
||||
<Link key={caseItem.id} href={`/cases/${caseItem.id}`}>
|
||||
<GlassCard
|
||||
variant="elevated"
|
||||
className="overflow-hidden group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className={`
|
||||
opacity-0 translate-y-4
|
||||
${isVisible ? 'animate-fade-in-up' : ''}
|
||||
`}
|
||||
style={{ animationDelay: `${(index + 3) * 100}ms` }}
|
||||
>
|
||||
<div className="relative h-48 bg-gradient-to-br from-[#C41E3A]/10 to-[#D4A574]/10 overflow-hidden">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-[#C41E3A]/30 group-hover:scale-110 transition-transform duration-500" />
|
||||
</div>
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-xs font-medium text-[#C41E3A]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{featuredCases.map((caseItem, index) => (
|
||||
<motion.div
|
||||
key={caseItem.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.1 + index * 0.1 }}
|
||||
>
|
||||
<Link href={`/cases/${caseItem.id}`}>
|
||||
<Card className="h-full group cursor-pointer border-[#E5E5E5] hover:border-[#C41E3A] transition-colors overflow-hidden">
|
||||
<div className="relative h-40 bg-gradient-to-br from-[#F5F5F5] to-[#E5E5E5] flex items-center justify-center">
|
||||
<Building2 className="w-16 h-16 text-[#C41E3A]/20 group-hover:scale-110 transition-transform duration-300" />
|
||||
<div className="absolute top-4 right-4">
|
||||
<Badge className="bg-white/90 text-[#1C1C1C] hover:bg-white">
|
||||
{caseItem.industry}
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[#171717] mb-2 group-hover:text-[#C41E3A] transition-colors duration-300">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Building2 className="w-4 h-4 text-[#C41E3A]" />
|
||||
<span className="text-sm text-[#5C5C5C]">{caseItem.client}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#1C1C1C] mb-3 group-hover:text-[#C41E3A] transition-colors">
|
||||
{caseItem.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-sm text-[#525252] mb-4 line-clamp-2">
|
||||
<p className="text-[#5C5C5C] text-sm line-clamp-2 mb-4">
|
||||
{caseItem.description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 mb-4">
|
||||
{caseItem.results.map((result) => (
|
||||
<div
|
||||
key={result.label}
|
||||
className="text-center p-2 bg-[#FAFAFA] rounded-lg"
|
||||
>
|
||||
<div className="text-sm font-semibold text-[#C41E3A]">
|
||||
{result.value}
|
||||
</div>
|
||||
<div className="text-xs text-[#737373] truncate">
|
||||
{result.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{caseItem.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2 py-1 bg-[#171717]/5 rounded text-xs text-[#525252]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center text-sm font-medium text-[#C41E3A] group-hover:gap-2 transition-all">
|
||||
查看详情
|
||||
<ArrowRight className="w-4 h-4 ml-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</Link>
|
||||
{caseItem.results.length > 0 && (
|
||||
<div className="flex items-center gap-2 text-[#C41E3A]">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">{caseItem.results[0].value}</span>
|
||||
<span className="text-sm text-[#5C5C5C]">{caseItem.results[0].label}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.4 }}
|
||||
className="text-center mt-12"
|
||||
>
|
||||
<Button variant="outline" size="lg" className="group" asChild>
|
||||
<Link href="/cases">
|
||||
查看更多案例
|
||||
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
|
||||
</Link>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user