---

URL of the reference screenshot: https://www.designprompting.com/themes/motor-alba/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/motor-alba/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 for the fictional brand Motor Alba, a B2B logistics company, using only HTML, Tailwind CSS via CDN, and vanilla JavaScript in a single file. Use the following color palette: primary #0D3B66, secondary #FAF0CA, accent #F4D35E, dark text #1B1B1B, light background #FFFFFF. Use the “Inter” font for body text and “Playfair Display” for headings, both loaded from Google Fonts.

Structure:
- Fixed header with primary background, logo (“Motor Alba” text), and a hamburger button that opens the mobile menu. The desktop menu includes links to: Overview, About (dropdown with three cards), Clients (dropdown with a list), Services, and Contact.
- Full-screen hero section with a secondary background, large title in Playfair Display, subtitle in Inter, and a main button in the accent color.
- “Case Studies” section: three-column grid, with each card featuring an SVG icon, title, brief description, and link.
- “Clients” section: horizontal list of client names, accented text style.
- Secondary CTA: primary background, white text, contact form (email) with an accent-colored button.
- Footer: dark background (#1B1B1B), columns of links, contact information, and social media icons.

Technical requirements: use Tailwind JIT via <script src="https://cdn.tailwindcss.com"></script>, enable dark mode for future expansion, add smooth hover transitions to links and buttons, and ensure that the hamburger menu toggle works without external libraries. All content must be original in Spanish (Spain) and must not copy text from the original site. The HTML must be semantic (header, nav, main, section, footer).

---

## 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, use 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
<footer>
  <p>
  
    Designed with the help of 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```