Wellness Balance

网站 · Hero · 免费
内容预览

Create a single-page hero landing for a wellness/supplements brand called "TerraElix" using React + Tailwind CSS + Lucide React icons. The page is a full-viewport hero with a background image, navbar, headline with word-by-word reveal animations, CTA section, and a 3-panel footer strip. It must be fully responsive (mobile, tablet, desktop). --- ## Fonts Import from Google Fonts: - **DM Sans** (weights 400, 500) -- used for brand name, nav links, headline, panel 1 text - **Inter** (weights 400, 500) -- used for buttons, body text, panel 2/3 text --- ## Background Full-screen background image covering the entire viewport: ``` url: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_110248_b62f758d-f68c-4045-a7b4-91771d6d0a0f.png&w=1280&q=85 background-size: cover; background-position: center; background-repeat: no-repeat; ``` --- ## Layout Structure ``` (min-h-screen, flex flex-col, relative, overflow-hidden) -- navbar -- hero content (flex-1, flex col, justify-center) -- mobile/tablet product image (visible below lg) -- 3-panel grid footer -- desktop floating product image (absolute, hidden below lg) ``` --- ## Navbar - **Left:** Brand name "TerraElix" -- white, DM Sans 500, 30px, letter-spacing -0.05em - **Center (desktop only, hidden on mobile):** Nav links "About", "Products", "Promotions", "Contact" -- DM Sans 500, 18px, text-white/90, gap 10 (lg) - **Right:** Row of icon buttons + a

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