# Website Generator Prompt (Interactive Templating Mode)
Act as an expert Full-Stack Web Developer, UI/UX Designer, and top-tier Copywriter. Your task is to generate a complete, high-converting, mobile-first website for a local business.
Write production-ready HTML, CSS, and JS for a website based on the following strict requirements. Do not use external CSS frameworks unless specified.
CRITICAL INSTRUCTION: You are generating a **Handlebars Template**, not a static HTML file. The visual builder will inject data into your Handlebars tags in real-time. You MUST use the exact Handlebars tags `{{variable}}` requested in the instructions below.
Business Details Provided:
- Name: Evergreen Pet Care
- Industry: Mobile Pet Grooming
- Location: Houston, Texas
- Phone Number: 123-456-7890
- Days / Hours of Operation: 9 am - 5 pm
## Core Requirements
- **Architecture:** Single-Page Application / Landing Page.
Strict Technical Constraints (CRITICAL):
Use semantic HTML5 and ensure strict Accessibility (a11y) compliance (ARIA labels, alt tags, proper contrast).
Self-Contained Image Handling (CRITICAL NO-HALLUCINATION RULE):
All content MUST be self-contained so there is zero risk of broken links. You must strictly adhere to this hierarchy for visual assets:
Primary Method: Generate high-quality, relevant inline SVG code for illustrations, backgrounds, shapes, and icons. This ensures immediate loading and no external dependencies.
Secondary Method: If you are a multi-modal AI capable of generating photographic images natively, embed them as self-contained Base64 Data URIs (
). Do NOT use made-up or hallucinated external URLs.
Fallback & Instructions: If you cannot generate an inline graphic or Data URI, you MUST NOT use a blank generic box or a fake/hallucinated URL. Instead, create a live, visually jarring placeholder block using this exact format:
[IMAGE REQUIRED: Describe the exact type, tone, and dimensions of the royalty-free image needed here. Provide clear instructions for the user on where to source it (e.g., Unsplash, Pixabay) and the HTML tag to use to plug it in.]
Design & UI/UX Requirements:
Mobile-First & Responsive: Flawless rendering on mobile, tablet, and desktop.
Aesthetic: Modern, premium, minimalist, utilizing ample whitespace, a cohesive color palettes, and subtle CSS hover transitions.
Conversion Focused: Clear calls to action (CTAs) above the fold, contrasting button colors, and sticky navigation.
Content, SEO, & Verification Requirements (CRITICAL):
Act as an expert copywriter. Write engaging, persuasive, and strictly factual copy. Do not hallucinate, fabricate, or make up information under any circumstances.
Synthesize realistic copy using favorable, factual, relevant, applicable, data regarding verified matches (cite sources) about the specified organization from Google Maps, Yelp, social media, local bulletins, forums, and search engines.
Placeholder Highlighting: You must strictly surface and draw attention to any text placeholders, missing information, or assumed data. Wrap every single placeholder in this exact tag so it is impossible to miss: [PLACEHOLDER: Describe what is needed].
Source Citation: To ensure content relevance and validity, you must cite the sources of the information used to generate the copy, services, reviews, etc. Include a comprehensive HTML comment block at the very bottom of the document (just above ) titled .
(If a contact form is selected by the user in the visual editor) make it a functional "mailto:" Include their established year/date if known (else skip).
## Design System & Theme (CRITICAL INSTRUCTION)
You MUST explicitly use the following CSS variables throughout your HTML/CSS so the site can be interactively customized by a visual editor:
- `var(--color-bg)`: Main background color
- `var(--color-accent)`: Primary accent color (buttons, highlights)
- `var(--color-fg)`: Main text/foreground color
- `var(--font-heading)`: Font family for all headings (h1, h2, h3, etc.)
- `var(--font-body)`: Font family for all body text
For example, apply them globally like this:
```html
```
## Layout & Components (Top to Bottom)
## Hero Section (ID: hero_1784082758964)
Create a high-impact Hero section.
- **Layout:** Full viewport height (min-h-screen) with centered content.
- **Content:** Include a strong headline. You MUST use the exact Handlebars tag `{{hero_1784082758964.headline}}` as the text content of the headline.
- **Visuals:** Include a slideshow with 3 slides. Here are the image URLs/descriptions to use: Cheery muddy dog getting washed by a loving employee of Evergreen Pet Care, Happy dog getting blown dried lovingly by another Evergreen Pet Care Employee, Happy dog that is content because it is clean and looked after.
## Services Section (ID: services_1784083081349)
Create a Services section detailing what the business offers.
- **Layout:** Use a responsive CSS Grid layout (1 column on mobile, up to 3 or 4 on desktop).
- **Services to feature:** You MUST use a Handlebars `{{#each services_1784083081349.services}}` block to loop over the services. Inside the loop, use `{{title}}`, `{{description}}`, and `{{price}}`.
Example:
```html
{{#each services_1784083081349.services}}