feat: add HeroSectionV2 with Atlassian-style clean layout and stats bar

2026-04-30 19:11:43 +08:00
parent 6a098d115d
commit 14ca4b104f
1 changed files with 125 additions and 0 deletions
@@ -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<HTMLElement>(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 (
+    <section
+      id="home"
+      ref={sectionRef}
+      aria-labelledby="hero-heading"
+      className="relative min-h-screen flex flex-col justify-center overflow-hidden bg-[#FAFAFA]"
+    >
+      <div className="container-wide py-24 md:py-32 lg:py-40 relative z-10 flex-1 flex items-center">
+        <div className="max-w-3xl">
+          <motion.div
+            {...fadeUp}
+            transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+            className="mb-6"
+          >
+            <span className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium border border-[#C41E3A]/10">
+              智连未来，成长伙伴
+            </span>
+          </motion.div>
+
+          <motion.h1
+            id="hero-heading"
+            {...fadeUp}
+            transition={{ duration: 0.5, delay: 0.1, ease: [0.16, 1, 0.3, 1] }}
+            className="text-5xl sm:text-6xl lg:text-7xl tracking-tight mb-6 font-brand"
+            style={{ fontWeight: 'normal' }}
+          >
+            {COMPANY_INFO.shortName}
+          </motion.h1>
+
+          <motion.p
+            {...fadeUp}
+            transition={{ duration: 0.5, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
+            className="text-xl sm:text-2xl text-[#3D3D3D] mb-4"
+          >
+            <span className="font-semibold text-[#C41E3A]">企业数字化转型服务商</span>
+          </motion.p>
+
+          <motion.p
+            {...fadeUp}
+            transition={{ duration: 0.5, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
+            className="text-lg text-[#595959] max-w-2xl leading-relaxed mb-10"
+          >
+            以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
+          </motion.p>
+
+          <motion.div
+            {...fadeUp}
+            transition={{ duration: 0.5, delay: 0.4, ease: [0.16, 1, 0.3, 1] }}
+            className="flex flex-col sm:flex-row items-start gap-4"
+          >
+            <Button size="lg" asChild>
+              <StaticLink href="/contact">
+                立即咨询
+                <ArrowRight className="w-4 h-4 ml-2" />
+              </StaticLink>
+            </Button>
+            <Button size="lg" variant="outline" asChild>
+              <StaticLink href="/products">
+                探索产品
+              </StaticLink>
+            </Button>
+          </motion.div>
+        </div>
+      </div>
+
+      <motion.div
+        {...fadeUp}
+        transition={{ duration: 0.5, delay: 0.5, ease: [0.16, 1, 0.3, 1] }}
+        className="border-t border-[#E5E5E5] bg-white"
+      >
+        <div className="container-wide py-8">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
+            {STATS.map((stat) => (
+              <div key={stat.label} className="text-center">
+                <div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-1">
+                  {stat.value}
+                </div>
+                <div className="text-sm text-[#595959]">
+                  {stat.label}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </motion.div>
+    </section>
+  );
+}