--- URL of the reference screenshot: https://www.designprompting.com/themes/ludica-creativa/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/ludica-creativa/theme.jpg" - If the image IS attached → continue with the instructions below. --- ## Phase 0 — Screenshot Specification (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 static website called Lúdica Creativa (ludicacreativa.com) that replicates the design you analyzed. Use HTML5, TailwindCSS via CDN, and vanilla JavaScript in a single file.\n\n**Color Palette** (hex):\n- Primary: #0F9D58 (green)\n- Accent1: #4285F4 (blue)\n- Accent2: #F4B400 (light yellow)\n- Accent3: #DB4437 (pink)\n- Text: #212121 (body)\n- Light: #F5F5F5 (background)\n\n**Typography**:\n- Font family "Inter", sans-serif for all text.\n- Headings: font-weight 700, sizes h1 4rem, h2 2.5rem, h3 1.75rem.\n- Body: font-weight 400, base size 1rem.\n\n**Header**: fixed navigation bar, logo on the left, links to Home, About Us, Programs, Admissions, and a "Pages" dropdown menu with three groups (Main, Others, Utilities). Primary button on the right with the text “Contact” and an arrow icon. On mobile, collapse to a hamburger menu.\n\n**Home**:\n1. Hero video in the background (autoplay, loop, muted) with a dark overlay. Above the video, a large white title reading “Learn by playing every day,” a subtitle “Certified and dedicated teachers,” and a primary “Contact” button.\n2. Overlay card below the hero with an icon, brief text, and a video play button (lightbox).\n3. Visual separator (thin line or space).\n4. “About Us” section with animated icons and text broken up into columns: title split into three lines, each line accompanied by an icon. Secondary “About Us” button. Image on the right that smoothly scrolls as the page is scrolled.\n\n**About**: static hero, values block with icons and descriptions in a 2-column grid, teaching staff section (cards with photo, name, and brief bio), contact button.\n\n**Program**: list of program cards with an image, title, short description, and “More Info” button. Filters by age and duration (checkboxes).\n\n**Admission**: page with numbered steps for the registration process and a contact form (name, email, phone number, message) with basic validation.\n\n**Gallery**: masonry-style gallery, images expandable in a lightbox.\n\n**Contact**: quick form (name, email, subject, message) and embedded Google Map (placeholder). Contact information displayed in columns.\n\n**Article & News**: list of posts with thumbnails, titles, excerpts, and pagination.\n\n**Utility**: Static pages with preformatted text (Instructions, Changelog, License, Style Guide).\n\n**Footer**: Light background, columns with quick links, contact information, and social media (SVG icons). Copyright text with dynamic year.\n\n**Interactivity**:\n- Hamburger menu with `hidden` class toggling.\n- Video button opens a lightbox overlay and plays the video.\n- Smooth scrolling for internal anchors.\n- Entry animations (fade-in, slide-up) using Tailwind `animate-fade-in` and `animate-slide-up` (custom utilities).\n\n**Technical Requirements**:\n- Include `` in ``.\n- Include ` --- ## 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 ```