Healcure
Lihat contoh asli ↗Prompt lengkap
tersalin
Create a fully responsive landing page using HTML and Tailwind CSS. The design must precisely match the following specifications: 1. **General Layout:** * The page must be fully responsive for mobile, tablet, and desktop. * The main content container must have a precise `max-width` of `1340px`. * The hero section content must be vertically aligned to the bottom of the screen (`justify-end`). 2. **Background:** * Use this specific image URL for a full-screen background: `https://cdn.sceneai.art/Hero%20Section%20Video/802fa01f-44ef-4ab4-ac73-62015fe06eef.png` * Apply a dark gradient overlay so the white text is easily readable against the image. 3. **Animations:** * When the page loads, all content should fade in smoothly. * The Main Heading and Secondary Subtext MUST be animated via JavaScript to reveal themselves smoothly, step-by-step, word-by-word with staggered delays. 4. **Navigation (Navbar):** * **Logo:** Text only. The text must read exactly "Healcure". **Do not include any logo icons/images.** * **Links:** "Home", "About", "Services", "Doctors", "Blog". * **Typography:** Navbar items must be `14px` and `font-normal` (regular weight). * **CTA Button (Desktop):** "Book An Appointment" with a right arrow icon. Ensure the button is a small, refined size. 5. **Hero Section Content:** * **Trusted Badge:** A small pill-shaped badge containing a white "Trusted" tag and the text "20,000+ Patients Worldwide". This text must be exactly `14px` and `font-normal` (regular weight). * **Main Heading:** "Healthcare for Good <br> Today. Tomorrow. Always." * Must be split exactly into these two lines. * Typography: Exactly `42px` and `font-medium` (medium weight). * **Secondary Subtext:** "Take charge of your well-being and explore the many <br> advantages of modern healthcare through our trusted platform." * Must be split exactly into these two lines. * Typography: Exactly `15px` and `font-normal` (regular weight). * **Buttons:** Two buttons below the text: "Book An Appointment" (solid white) and "About Us" (transparent with white border). Both should have right arrow icons and be a smaller, refined size. 6. **Review Section (Bottom Left):** * An overlapping cluster of four user avatars. Use these EXACT image URLs: * `https://cdn.sceneai.art/Only%20man%20image/0ccd6017-25fc-493b-abdf-321915dde101.jpg` * `https://cdn.sceneai.art/Only%20man%20image/7e1339ef-7a01-4979-93c8-21d97af291ee.webp` * `https://cdn.sceneai.art/Image%20for%20any%20section/2d8032d8-c1cd-4827-84db-0aeba1109c1b.jpg` * `https://cdn.sceneai.art/Image%20for%20any%20section/470b31f2-d1b5-4730-96a2-aca680204172.jpg` * Include a "5-star" icon graphic. * Include the text: "Baser on 20K+ Reviews". 7. **Exclusions:** * **Do not** include any logo banners or "proudly worked with" sections at the bottom of the page.