--- URL of the reference screenshot: https://www.designprompting.com/themes/armonia-creciente/theme.jpg IMPORTANT — Pre-check (do this BEFORE anything else): Check to see if you have the reference image ATTACHED as a file (not as a URL in the text). - If there is NO image attached and you only see the URL → STOP. Don't generate anything. Just reply: "⚠️ I only have the URL, not the screenshot. Download it from here and attach it to the chat so I can replicate the design accurately: https://www.designprompting.com/themes/armonia-creciente/theme.jpg" - If the image IS attached → continue with the instructions below. --- ## Phase 0 — Screenshot Spec (REQUIRED before coding) Before writing a single line of code, analyze the attached screenshot and write a spec that includes: - An ordered list of sections exactly as they appear from top to bottom. Do not add sections that are not in the screenshot (if the navigation header or footer is not visible, do not make them up). - Per section: approximate height (px relative to a width of 1440), number of columns, spacing, background color (hex), dominant border-radius, image aspect ratio, and % of overlay, if any. - Typography: approximate sizes for H1/H2/body in px and weights. This spec governs the entire development process: the code is written based on it. --- ## Visual Reference Faithfully replicate the design shown in the attached screenshot (layout, color palette, typography). If you need the image as an actual resource on the website, it is available at the URL provided above. --- Create a complete landing page for the fictional brand Armonía Creciente, in the personal development sector, with the domain armoniamente.com. Use custom HTML with TailwindCSS via CDN and vanilla JavaScript (single file). Color palette: #1A1A1A (black background), #F5F5F5 (light text), #E63946 (accent red), #A8DADC (soft blue), #FFE066 (highlight yellow). Fonts: Playfair Display for headings (loaded from Google Fonts), Lexend Deca for body text. Structure: - Fixed **Header**, maximum width 1200px, logo on the left (stylized "Armonía Creciente" text), horizontal menu with links: Resources, Press, Podcast, School, Book, About Me, Home; hamburger button that displays a mobile menu with the same links and icons for Instagram, YouTube, Pinterest, Facebook, Spotify, Contact. Prominent “Download Free Guide” button that opens a modal overlay with an iframe linking to an external form. - **Hero**: 100vh full-width section with a blurred background image (placeholder) and a black overlay at 30% opacity. Small subtitle in Lexend Deca, large title in Playfair Display with emphasis in italics and alternating colors (red, blue, yellow). Primary button in Tailwind style `bg-red-600 text-white hover:bg-red-700` with the text “Download Free Guide” that triggers the same modal. - **Animated separator**: SVG line with a pulsating heart (CSS animation). - **Authority block**: simple carousel (no dependencies) displaying various media logos (placeholder images) in a row, with the title “You’ve seen me on:” in Playfair Display. - **Podcast Section**: title “In the Spanish-speaking world, about Manifestación” with title styling, Spotify/YouTube embed (iframe), and a “Listen Now” button. - **Footer**: black background, light text, columns with quick links (Resources, Press, Podcast, School, Book, Blog, Contact), social media icons (SVGs), a brief description of the brand, and copyright 2026. Technical requirements: - Add a meta viewport tag and UTF-8 charset. - Include Google Fonts links. - Include the Tailwind CDN (``). Configure custom colors in `tailwind.config` using `tailwind.config = { theme: { extend: { colors: { primary: '#E63946', secondary: '#A8DADC', accent: '#FFE066' } } } }`. - The lead magnet modal must be accessible, with a semi-transparent background and an “X” button to close it. - Collapsible mobile menu using JavaScript that adds or removes the `hidden` class. - All images must use `loading="lazy"` and include alt attributes. - Clean, semantic code with brief comments for each block. - Do not include actual links or personal data. It provides all the HTML code, ready to copy and paste. --- ## Block-by-Block Construction Protocol Build the HTML section by section, in the exact order shown in the screenshot. After each block, compare it to its corresponding area in the image (structure, columns, spacing, radii, colors) and correct it before moving on to the next one. Do not proceed with a block that does not match. ## No-Invention Rule If the screenshot and this prompt contradict each other on any visual detail, go with the screenshot. If a visual detail isn’t specified, infer it from the screenshot; never make it up. Nonsensical text in the screenshot (AI typos) should NOT be copied: write coherent text in Spanish while maintaining equivalent length and visual hierarchy. The only exception: the mandatory Design Prompting footer at the end of this prompt must always be included. ## Fidelity Checklist (Before Submission) - Order and number of sections = screenshot - Color palette and contrast = screenshot - Columns, gaps, and border-radius = Phase 0 specs - Image ratios and section heights ≈ screenshot - Text density similar to the screenshot (no bloated paragraphs) ## Iteration Protocol If the user identifies differences after the first generation, correct only the specified changes without regenerating the sections that have already been validated. --- ## Mandatory Instruction — Footer Add this footer to all pages created with this prompt, including the link to Design Prompting: html ```