张翔
241 lines
8.1 KiB
TypeScript
241 lines
8.1 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import { motion } from 'framer-motion';
|
||
import { RippleButton, SealButton } from '@/components/ui/ripple-button';
|
||
import { GradientText, MagneticButton, BlurReveal, CounterWithEffect } from '@/lib/animations';
|
||
import { InkBackground } from '@/components/ui/ink-decoration';
|
||
import { DataParticleFlow } from '@/components/effects/data-particle-flow';
|
||
import { SubtleDots } from '@/components/effects/subtle-dots';
|
||
import { COMPANY_INFO, STATS } from '@/lib/constants';
|
||
import { ArrowRight, Shield, Zap, Award } from 'lucide-react';
|
||
|
||
const features = [
|
||
{ icon: Shield, text: '安全可靠' },
|
||
{ icon: Zap, text: '高效便捷' },
|
||
{ icon: Award, text: '专业服务' },
|
||
];
|
||
|
||
export function HeroSection() {
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const sectionRef = useRef<HTMLElement>(null);
|
||
const [statsVisible, setStatsVisible] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const observer = new IntersectionObserver(
|
||
([entry]) => {
|
||
if (entry?.isIntersecting) {
|
||
setIsVisible(true);
|
||
}
|
||
},
|
||
{ threshold: 0.1 }
|
||
);
|
||
|
||
if (sectionRef.current) {
|
||
observer.observe(sectionRef.current);
|
||
}
|
||
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const statsEl = document.getElementById('stats-section');
|
||
if (!statsEl) {return;}
|
||
|
||
const observer = new IntersectionObserver(
|
||
([entry]) => {
|
||
if (entry?.isIntersecting) {
|
||
setStatsVisible(true);
|
||
}
|
||
},
|
||
{ threshold: 0.5 }
|
||
);
|
||
|
||
observer.observe(statsEl);
|
||
return () => observer.disconnect();
|
||
}, []);
|
||
|
||
const handleScrollTo = (id: string) => {
|
||
const element = document.getElementById(id);
|
||
if (element) {
|
||
element.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
};
|
||
|
||
const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, id: string) => {
|
||
if (event.key === 'Enter' || event.key === ' ') {
|
||
event.preventDefault();
|
||
handleScrollTo(id);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<section
|
||
id="home"
|
||
ref={sectionRef}
|
||
aria-labelledby="hero-heading"
|
||
className="relative min-h-screen flex items-center pt-16 overflow-hidden bg-linear-to-b from-[#FAFAFA] to-white"
|
||
>
|
||
<InkBackground />
|
||
<DataParticleFlow
|
||
particleCount={60}
|
||
color="#C41E3A"
|
||
intensity="subtle"
|
||
shape="square"
|
||
effect="pulse"
|
||
/>
|
||
<SubtleDots color="#C41E3A" count={8} />
|
||
|
||
<div className="container-wide py-24 md:py-32 lg:py-40 relative z-10">
|
||
<div className="max-w-4xl mx-auto text-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||
animate={isVisible ? { opacity: 1, y: 0, scale: 1 } : {}}
|
||
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
|
||
className="mb-8"
|
||
>
|
||
<span className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-[#1C1C1C]/20 bg-[#F5F5F5] text-[#1C1C1C] text-sm font-medium">
|
||
智连未来，成长伙伴
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
id="hero-heading"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.1 }}
|
||
className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6 font-calligraphy"
|
||
style={{
|
||
fontWeight: 'normal',
|
||
WebkitFontSmoothing: 'antialiased',
|
||
MozOsxFontSmoothing: 'grayscale',
|
||
textRendering: 'optimizeLegibility'
|
||
}}
|
||
>
|
||
{COMPANY_INFO.shortName}
|
||
</motion.h1>
|
||
|
||
<BlurReveal delay={0.3}>
|
||
<p className="text-xl sm:text-2xl text-[#4A5568] mb-4">
|
||
<GradientText colors={['#C41E3A', '#E04A68', '#C41E3A']} duration={4}>
|
||
企业数字化转型服务商
|
||
</GradientText>
|
||
</p>
|
||
</BlurReveal>
|
||
|
||
<BlurReveal delay={0.4}>
|
||
<p className="text-lg text-[#718096] mb-10 max-w-2xl mx-auto leading-relaxed">
|
||
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
|
||
</p>
|
||
</BlurReveal>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8"
|
||
>
|
||
<MagneticButton strength={0.4}>
|
||
<SealButton
|
||
size="lg"
|
||
onClick={() => handleScrollTo('contact')}
|
||
onKeyDown={(e) => handleKeyDown(e, 'contact')}
|
||
className="min-w-45"
|
||
>
|
||
立即咨询
|
||
<ArrowRight className="w-4 h-4 ml-2" />
|
||
</SealButton>
|
||
</MagneticButton>
|
||
<MagneticButton strength={0.4}>
|
||
<RippleButton
|
||
size="lg"
|
||
variant="outline"
|
||
onClick={() => handleScrollTo('about')}
|
||
onKeyDown={(e) => handleKeyDown(e, 'about')}
|
||
className="min-w-45"
|
||
>
|
||
了解更多
|
||
</RippleButton>
|
||
</MagneticButton>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.35 }}
|
||
className="flex flex-wrap gap-4 justify-center mb-16"
|
||
>
|
||
{features.map((feature, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, scale: 0.9 }}
|
||
animate={isVisible ? { opacity: 1, scale: 1 } : {}}
|
||
transition={{ duration: 0.4, delay: 0.4 + index * 0.1 }}
|
||
whileHover={{ scale: 1.05, y: -2 }}
|
||
className="flex items-center gap-2 px-4 py-2 rounded-full bg-[#FAFAFA] border border-[#E5E5E5] transition-all duration-300 hover:border-[#1C1C1C] hover:shadow-md cursor-default"
|
||
>
|
||
<feature.icon className="w-4 h-4 text-[#C41E3A]" />
|
||
<span className="text-sm text-[#3D3D3D]">{feature.text}</span>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
id="stats-section"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isVisible ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
className="pt-16 border-t border-[#E2E8F0]"
|
||
>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
|
||
{STATS.map((stat, index) => (
|
||
<StatItem
|
||
key={stat.label}
|
||
stat={stat}
|
||
index={index}
|
||
shouldAnimate={statsVisible}
|
||
/>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function StatItem({ stat, index, shouldAnimate }: {
|
||
stat: { value: string; label: string };
|
||
index: number;
|
||
shouldAnimate: boolean;
|
||
}) {
|
||
const numericValue = parseInt(stat.value.replace(/\D/g, ''));
|
||
const suffix = stat.value.replace(/[\d]/g, '');
|
||
|
||
return (
|
||
<motion.div
|
||
className="group cursor-default text-center"
|
||
initial={{ opacity: 0, y: 20, scale: 0.9 }}
|
||
animate={shouldAnimate ? { opacity: 1, y: 0, scale: 1 } : {}}
|
||
transition={{ duration: 0.5, delay: index * 0.1, type: 'spring', stiffness: 100 }}
|
||
whileHover={{ scale: 1.05, y: -5 }}
|
||
>
|
||
<div className="text-4xl sm:text-5xl font-bold text-[#C41E3A] mb-3">
|
||
{shouldAnimate ? (
|
||
<CounterWithEffect
|
||
end={numericValue}
|
||
suffix={suffix}
|
||
effect="bounce"
|
||
duration={2000}
|
||
/>
|
||
) : (
|
||
<span className="text-[#CBD5E0]">0{suffix}</span>
|
||
)}
|
||
</div>
|
||
<div className="text-sm text-[#718096] group-hover:text-[#4A5568] transition-colors">
|
||
{stat.label}
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|