Rocket CTA

在云境TS 中打开并复制 →

内容预览

Build a pixel-faithful recreation of the landing CTA section. Use React 18 + Vite + TypeScript, TailwindCSS, `framer-motion`, `clsx` + `tailwind-merge` as `cn()`. Dark theme background (`#000000`), Inter font, Material Symbols Outlined for icons. Use the white-alpha "landing" palette in `tailwind.config.ts`: ```ts landing: { surface: "rgba(255, 255, 255, 0.10)", "surface-hover": "rgba(255, 255, 255, 0.16)", border: "rgba(255, 255, 255, 0.10)", "border-strong": "rgba(255, 255, 255, 0.20)", text: "rgba(255, 255, 255, 0.80)", "text-muted": "rgba(255, 255, 255, 0.60)", } ``` Add a global `.liquid-glass` utility (frosted translucent surface): ```css .liquid-glass { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.25); } ``` Add keyframes in `index.css` for the inner Velorah hero animation: ```css @keyframes fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-rise { animation: fade-rise .8s ease-out both; } .animate-fade-rise-delay { animation: fade-rise .8s ease-out .25s both; } .animate-fade-rise-delay-2 { animation: fade-rise .8s ease-out .5s both; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { scrollbar-width: none; } ``` Load fonts in `index.html`: Inter (400/500/600), Instrument Seri

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