Guardnet Benefits

网站 · Benefits · 免费
内容预览

Build a single React + TypeScript section using Tailwind CSS. No extra libraries. Fully mobile-responsive. Black background, white text. ## Global Prerequisites - Font: `@import url(https://db.onlinewebfonts.com/c/e55e9079ee863276569c8a68d776ef04?family=Futura+Md+BT+Medium);` - Body: `font-family: 'Futura Md BT Medium', system-ui, -apple-system, sans-serif; background-color: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;` - Section sits inside a `w-full max-w-[1400px]` wrapper on a black page. --- ## BenefitsSection Container: `relative w-full bg-black px-4 sm:px-6 md:px-10 py-12 sm:py-20` ### Section Heading `text-white text-3xl sm:text-4xl md:text-5xl font-light text-center mb-12 sm:mb-24` with inline style `letterSpacing: '-0.04em'` Text: **"Key Benefits"** ### Three-Column Card Grid `grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4` All three cards share: `relative h-[380px] sm:h-[460px] rounded-2xl bg-neutral-950 overflow-hidden` --- #### Card 1: Text Card (Left) Additional classes: `p-6 sm:p-8` **Blue Blob:** `absolute top-1/2 -translate-y-1/2 -left-[420px] h-[460px] w-[460px] rounded-full bg-[#1e3a8a] blur-3xl opacity-40` **Content wrapper:** `relative z-10 flex flex-col h-full` **Heading:** `text-white text-xl sm:text-2xl font-light leading-tight` Text (two lines with ``): ``` Preemptive Risks Scouting and Reactions ``` **Body paragraph:** `mt-12 sm:mt-20 text-[13px] sm:text-[14px] leading-relaxed text-white/70 font-light max

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