Rocket Pricing

网站 · Pricing · 免费
内容预览

Build a `PricingSection` React component that matches the spec below exactly. ## Stack & global setup - React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` exposed as `cn()` from `@/lib/utils`. - Dark theme. Page background `#000000`. Font: Inter (`font-inter`). Icons: Google **Material Symbols Outlined** (loaded globally). - Tailwind config must include semantic HSL tokens plus: ```ts theme.extend.colors.landing = { surface: "rgba(255,255,255,0.10)", "surface-hover": "rgba(255,255,255,0.16)", border: "rgba(255,255,255,0.10)", } ``` - `--background` / `--foreground` HSL tokens drive `bg-background` (dark) and `text-foreground` (near-white). ## Helper components (reuse exact behavior) ### `MIcon` Material Symbols span. Props: `name`, `size=20`, `weight=400`, `fill=0`, `grade=0`, `opticalSize=24`, `className`. ```tsx {name} ``` ### `FadeUp` `framer-motion` wrapper: `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{once:true, amount:0.3}}`, `transition={{duration:0.6, delay, ease:[0.22,1,0.36,1]}}`. Props: `children`, `delay=0`, `className`. ### `SpotlightBorder` 1px gradient border that follows the cursor via CSS masks. - Props: `children`, `className`, `radius="2xl"`, `size=520`, `intensity=0.5`. - Wrapper sets CSS vars `--spot-x`, `--spot-y` (default `-9999px`) updated on `pointermove` relative to element. - Two stacked layers using `-webkit-mask` + `mask` `linear-gradient(#000 0 0) content-box, linear-gradient(#000

……（完整源码请在站内查看）