Create a React + Tailwind CSS v4 + Motion (framer-motion successor) stats section component. Use Vite as the bundler. The section should be fully mobile responsive. ### Fonts Import from Google Fonts in your global CSS: ``` @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Instrument+Serif:ital@0;1&display=swap'); ``` Define two Tailwind v4 theme fonts: - `--font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;` (used as the primary UI font via `font-sans`) - `--font-dm-serif: "Instrument Serif", serif;` (used as the accent/poetic font via `font-dm-serif`) The page wrapper uses `bg-black font-sans text-white`. ### Dependencies - `react` v19 - `motion` (npm package "motion", imported as `motion/react` -- provides `motion`, `useInView`, `animate`) - `tailwindcss` v4 with `@tailwindcss/vite` plugin - Vite v6+ ### Section Layout The section is a `` with: - `id="stats"` - Classes: `bg-black text-white py-8 md:py-24 px-6 md:px-12 lg:px-[120px] w-full border-t border-white/10 overflow-hidden` - Inner wrapper: `w-full max-w-[1440px] mx-auto` - Content is a two-column flexbox: `flex flex-col lg:flex-row gap-16 lg:gap-[160px] items-stretch` ### Left Column (flex-1, flex flex-col justify-start) The entire left column is wrapped in a `motion.div` with staggered reveal animation: - `initial="hidden"`, `whileInView="visible"`, `viewport={{ once: true,
……（完整源码请在站内查看）
.webp)