Axion About

网站 · About · 免费
Axion About 预览

在云境TS 中打开并复制 →

内容预览

Build a single React component for an "About" section using Tailwind CSS. Use `lucide-react` for the ArrowRight icon. System font stack only (no custom fonts). Match every detail exactly: --- ### Outer wrapper `` with `bg-white pt-16 sm:pt-20 lg:pt-32 pb-12 sm:pb-16 lg:pb-24 overflow-hidden`. Inner container: `max-w-[1440px] mx-auto`. --- ### Badge row `px-5 sm:px-8 lg:px-12 flex items-center gap-3 mb-6 sm:mb-8`. - **Numbered circle:** `w-6 h-6 sm:w-7 sm:h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-[11px] sm:text-[12px] font-semibold`. Displays "1". - **Pill label:** Text "Introducing Axion". `text-[12px] sm:text-[13px] font-medium rounded-full px-3 sm:px-4 py-1 sm:py-1.5`. No border, no background. --- ### Heading `` with `px-5 sm:px-8 lg:px-12 text-[clamp(1.5rem,4vw,3.2rem)] font-medium leading-[1.12] tracking-[-0.02em] text-gray-900 mb-12 sm:mb-16 lg:mb-28`. Text: "Strategy-led creatives, delivering / results in digital and beyond." - the `/` represents a line break that is `` with a ` ` fallback space before it (so on mobile it reads as one flowing line, on sm+ it breaks into two lines). --- ### Content area - MOBILE / TABLET layout (lg:hidden) Wrapper: `lg:hidden px-5 sm:px-8`. 1. **Paragraph:** "Through research, creative thinking and iteration we help growing brands realize their digital full potential." - `text-[15px] sm:text-[17px] leading-[1.6] font-medium text-gray-900 mb-6`. 2. **CTA button** (inside a `mb-8` wrapper): Orange butto

……(完整源码请在站内查看)