refactor(web): 拆分 LandingPage 为可复用组件（HeaderBar/Hero/AnimatedSection 等），新增 pages 结构并完成集成；构建通过

web/src/components/landing/AnimatedSection.tsx

@@ -0,0 +1,30 @@
+import { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
+
+export default function AnimatedSection({
+  children,
+  id,
+  backgroundColor = 'var(--brand-black)',
+}: {
+  children: React.ReactNode
+  id?: string
+  backgroundColor?: string
+}) {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, margin: '-100px' })
+
+  return (
+    <motion.section
+      id={id}
+      ref={ref}
+      className='py-20 px-4'
+      style={{ background: backgroundColor }}
+      initial={{ opacity: 0 }}
+      animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+      transition={{ duration: 0.6 }}
+    >
+      {children}
+    </motion.section>
+  )
+}
+