AI Image Generator UI

在云境TS 中打开并复制 →

内容预览

Build a "Core Features" marketing section as a single centered component with three gradient cards. Use the Inter font family (weights 400, 500, 600) loaded from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap`. **Page shell:** - Body: white background `#ffffff`, 80px top/bottom + 20px left/right padding, flex centered, Inter font. - Global reset: `* { box-sizing: border-box; margin: 0; padding: 0; }`. **Container (`.c1-container`):** max-width 1100px, full width, text-align center. **Header block:** - Badge (`.c1-badge`): text "Core Features", 0.75rem, weight 600, uppercase, letter-spacing 1px, gradient text using `linear-gradient(90deg, #F5C344, #F28482, #B567C2)` with `-webkit-background-clip: text` and transparent fill. 16px bottom margin. - Title (`.c1-title`): "Built for Speed & Quality", font-size 2.75rem, weight 500, color `#0f172a`, letter-spacing -0.02em, 12px bottom margin. - Subtitle (`.c1-subtitle`): "Everything you need to go" + `` + "from idea to image", 1.125rem, color `#64748b`, line-height 1.5, 50px bottom margin. **Grid (`.c1-grid`):** 3 equal columns, 24px gap. Breakpoints: 2 columns under 900px, 1 column under 600px (title scales to 2.25rem). **Card base (`.c1-card`):** 20px border-radius, height 340px, flex column justify-end, relative, overflow hidden, text-align left, background `#F4F8F9`, shadow `0 10px 30px -10px rgba(0,0,0,0.1)`. Titles inside (`h3`): 1.05rem, weight 600, color `#1e293b`, padding 24px, z-i

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