Wellness Companion

应用 · Wellness · 免费
内容预览

Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons. **Phone Frame:** - Dimensions: 375px wide x 780px tall - Border radius: 52px - Background color: `#8a9aaa` - Box shadow to simulate a real phone bezel: `inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)` - A black pill-shaped Dynamic Island at the top center: 120px wide, 32px tall, fully rounded, z-index 50 **Background:** - Full-bleed background image using this exact URL: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85` - Apply `blur(12px)` and `scale(1.1)` to the background image - Semi-transparent overlay: `#8a9aaa` at 30% opacity on top **Font:** - Load "Helvetica Now Var" from: `https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var` - Fallback stack: 'Helvetica Neue', Helvetica, Arial, sans-serif - Apply globally to all elements **Content Layout (flex column, padding: 56px top, 24px sides, 24px bottom):** 1. **Header Badge** (top, with 40px margin-bottom): - Liquid glass pill with Timer icon (12px, white/80) + text "Vitaforge Daily" (12px, white/90, medium weight) - Padding: 10px vertical, 12px horizontal 2. **Title Section** (32px marg

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