diff --git a/src/components/sections/hero-section-v2.tsx b/src/components/sections/hero-section-v2.tsx new file mode 100644 index 0000000..245046a --- /dev/null +++ b/src/components/sections/hero-section-v2.tsx @@ -0,0 +1,125 @@ +'use client'; + +import { useEffect, useRef, useState } from 'react'; +import { motion } from 'framer-motion'; +import { StaticLink } from '@/components/ui/static-link'; +import { Button } from '@/components/ui/button'; +import { COMPANY_INFO, STATS } from '@/lib/constants'; +import { ArrowRight } from 'lucide-react'; +import { useReducedMotion } from '@/hooks/use-reduced-motion'; + +export function HeroSectionV2() { + const [isVisible, setIsVisible] = useState(false); + const sectionRef = useRef(null); + const shouldReduceMotion = useReducedMotion(); + + 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 fadeUp = { + initial: shouldReduceMotion ? {} : { opacity: 0, y: 24 }, + animate: isVisible ? { opacity: 1, y: 0 } : {}, + }; + + return ( +
+
+
+ + + 智连未来,成长伙伴 + + + + + {COMPANY_INFO.shortName} + + + + 企业数字化转型服务商 + + + + 以智慧连接数字趋势,以伙伴身份陪您成长——您的数字化转型同行者 + + + + + + +
+
+ + +
+
+ {STATS.map((stat) => ( +
+
+ {stat.value} +
+
+ {stat.label} +
+
+ ))} +
+
+
+
+ ); +}