Build a single React + TypeScript + Tailwind CSS v3 component called `PrecisionSection`. No external icon libraries — all icons are inline SVG or `` tags. No `useState`, no animations, no hover states. Two separate layouts: a desktop staircase (absolutely-positioned pillars) and a mobile alternating-flow layout. The `sm:` breakpoint controls visibility between them. --- ## Global font Register **"Mazzard H"** in `index.css` and apply it globally: ```css @font-face { font-family: 'Mazzard H'; font-weight: 400; font-style: normal; src: url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff2') format('woff2'), url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.woff') format('woff'), url('https://db.onlinewebfonts.com/t/eb5b5ee332420add9a40ee988cb6ac37.ttf') format('truetype'); } @font-face { font-family: 'Mazzard H'; font-weight: 500; font-style: normal; src: url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff2') format('woff2'), url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.woff') format('woff'), url('https://db.onlinewebfonts.com/t/875fffdfa62169a0f131e90f37f1faf4.ttf') format('truetype'); } @tailwind base; @tailwind components; @tailwind utilities; @layer base { html, body, * { font-family: 'Mazzard H', sans-serif; } } ``` --- ## File: `src/components/PrecisionSection.tsx` ### Constants (top of file, before the component) ```ts const LOGO_ICON = 'https://cdn.prod.website-files.com/6720dd1ab6
……（完整源码请在站内查看）
.webp)