IMPORTANT: Some fields below may be blank or still have brackets. Step 1: If I included a website URL anywhere in this prompt or in my business description, visit that site first and pull in everything you can find: business name, services, phone, email, about info, testimonials, location, social links. Use what you find to pre-fill as many blanks as possible. Step 2: For any fields still missing after checking the site, ask me ONE at a time. Wait for my answer before asking the next one. Always ask for these even if they're not bracketed fields: - My North Star (the one core belief that drives my business) - My ideal customer (who they are, what they struggle with, what they feel) When you have everything, build the site. You are a world-class web designer and conversion strategist. You build websites that make small businesses look like they spent $15,000 on a top agency. You understand that great websites sell through empathy — they show the customer you understand their pain before you ever mention your solution. Build me a complete, single-page website as ONE HTML file with all CSS and JS inline. I want to download this and deploy it today. BUSINESS INFO: Business name: [YOUR BUSINESS NAME] Location: [CITY, STATE] What we do: [2-3 SENTENCES — plain English] Who we serve: [DESCRIBE YOUR CUSTOMER — real people, not demographics] Our North Star: "[PASTE YOUR NORTH STAR HERE]" Services: [LIST 3-5 SERVICES WITH BRIEF DESCRIPTIONS] How we started: [YOUR ORIGIN STORY IN 2-3 SENTENCES — the real reason, not the corporate version] What makes us different: [YOUR HONEST DIFFERENTIATOR] Phone: [YOUR PHONE] Email: [YOUR EMAIL] DESIGN SYSTEM: Style: [CHOOSE: "dark and premium" / "light and clean" / "warm and inviting" / "bold and energetic"] - If dark: Background #0a0a12, surfaces #111118, accent [PICK: purple #7c6bf5 / blue #3b82f6 / emerald #10b981 / amber #f59e0b / rose #f43f5e], text #eceaf4, muted #8e8ba0 - If light: Background #fafafa, surfaces #ffffff, accent same options, text #1a1a2e, muted #6b7280 - Typography: Use Google Fonts. Headings in a bold serif or display font (like Playfair Display, DM Serif, or Fraunces). Body text in a clean sans-serif (like DM Sans, Inter, or Plus Jakarta Sans). Import both via Google Fonts link. - Spacing: Generous padding. Sections should breathe. Minimum 80px vertical padding between sections. Max content width 1100px centered. SECTIONS — build in this exact order: 1. NAVIGATION: Sticky top bar. Logo/business name on left, section links on right. On mobile: hamburger menu with smooth slide-in. Subtle background blur on scroll. Smooth scroll to sections when links are clicked. 2. HERO: Full viewport height. The headline speaks to the customer's PAIN — not what I do, but what they're struggling with. Make it feel like I read their mind. Subheadline: one sentence explaining what we actually do. Primary CTA button (strong verb — "Get Your Free Quote" or "See How It Works", not "Learn More"). Trust bar underneath: years in business, customers served, Google rating — use real numbers: [YEARS IN BUSINESS] years, [NUMBER] customers, [RATING]on Google. Add a subtle gradient or mesh background. No stock photo placeholders. 3. PROBLEM: Headline: something like "Sound familiar?" or "You've been here before." 3 pain points written in THEIR voice — the exact words they'd use complaining to a friend. Each as a short card with an icon. These should sting a little. Make them feel seen. 4. SOLUTION / HOW IT WORKS: Headline: "Here's how we fix it" or "What changes when you work with us." 3-step process: Step 1, Step 2, Step 3 — simple, clear, no jargon. Each step: icon/number, short title, one sentence. The steps should show transformation, not process. End with a CTA. 5. SERVICES: Card layout (grid on desktop, stack on mobile). Each service card: icon, name, 2-sentence description focused on the OUTCOME for the customer (not features), subtle hover effect. The last card can be "Not sure what you need? Let's talk." with a CTA. 6. ABOUT: Split layout: text on one side (image placeholder on the other with a styled div that says "Your Photo Here"). Tell the origin story like a human — why we started, what we believe, what drives us. Reference the North Star belief. Keep it to 3-4 short paragraphs. This should feel like meeting someone at a coffee shop, not reading a corporate bio. 7. SOCIAL PROOF: Headline: "Don't take our word for it." 3 testimonial cards. Each with: the quote (specific results, not "great service!"), first name, last initial, neighborhood or context (e.g., "Sarah M., Millcreek" or "Mike D., business owner for 12 years"). Style them with large quotation marks and a subtle card design. 8. FAQ: Headline: "Questions we get asked a lot." 5 questions your customers actually ask BEFORE they buy. Accordion style (click to expand). The answers should remove objections, not just inform. Each answer ends with confidence, not hedging. 9. FINAL CTA: Full-width section with contrasting background (use the accent color). Strong headline that mirrors the hero's promise. Subtext addressing the last hesitation. Big CTA button. Phone number visible. 10. FOOTER: Business name, address, phone, email. Links to sections. "2025 [Business Name]. Built in Erie, PA." Simple, clean, not cluttered. TECHNICAL REQUIREMENTS: - One single HTML file with all CSS in a style tag and all JS in a script tag - Mobile-first responsive design. Test at 375px, 768px, and 1200px breakpoints - Smooth scroll behavior on all anchor links - Anchor navigation: Use e.preventDefault() and scrollTo() only. Do NOT modify the URL hash or use pushState — this breaks iframe previews and sandboxed environments. - Subtle scroll-triggered animations: elements fade up as they enter the viewport. Use Intersection Observer — no heavy libraries - Sticky nav with background blur that appears on scroll - All interactive elements have hover states and smooth transitions (0.3s ease) - Fast loading: no external images, use CSS gradients and shapes for visual interest - Semantic HTML: proper heading hierarchy (one H1, then H2s for sections, H3s for sub-items) - Schema markup: Add JSON-LD for LocalBusiness with name, address, phone, email, hours, geo coordinates, priceRange, and sameAs links to social profiles. Also add Service schema for each service listed. Also add FAQ schema for the FAQ section so questions appear directly in Google search results. - Meta title: "[Business Name] — [Primary Service] in [City, State]" (under 60 characters) - Meta description: Lead with the customer benefit, include city name and primary service, end with a CTA. Under 155 characters. This is the ad copy that shows in Google results — write it like one. - Open Graph tags: og:title, og:description, og:type (website), og:locale, og:url — so the site looks professional when shared on Facebook or LinkedIn - Add a canonical URL meta tag - Every image placeholder should have descriptive alt text that includes the city and service naturally (not keyword-stuffed) - The H1 should include the city name and primary service naturally — this is the single most important on-page SEO element - Sprinkle the city/neighborhood name naturally throughout the copy (in testimonials, about section, FAQ answers) — Google needs geographic signals. Don't force it. "We've been serving [City] for [X] years" in the about section is natural. Keyword stuffing is not. - Add an embedded Google Map in the footer or contact section using an iframe from Google Maps (placeholder with the business address) - Internal linking: The nav links and CTA buttons count as internal links. Make sure anchor text is descriptive, not "click here" - Page speed: No external images, no heavy frameworks, inline critical CSS, defer non-essential JS. A fast site outranks a slow site with better content. - Mobile-first: Google uses mobile-first indexing. The mobile version IS the version Google sees. Test every element at 375px width. - Accessible: proper contrast ratios, alt text placeholders, focus states on interactive elements - Add a favicon link (use a data URI for a simple colored square matching the accent) COPYWRITING RULES: - Headlines: short, punchy, emotional. Under 8 words. - Body text: conversational. Write like you talk. No jargon. No "leverage" or "utilize" or "solutions." - CTAs: specific action verbs. Not "Submit" — instead "Get My Free Quote" or "Book a Call Today" - Every section should have ONE clear purpose and ONE clear next action - Write for the customer's FEELINGS first, features second CONVERSION PSYCHOLOGY (this is what separates a $500 website from a $15,000 one): - Use the "Problem → Agitation → Solution" arc across the full page. The top half of the site should make them feel their pain. The bottom half should relieve it. - Place a CTA button every 2 sections. Don't make them scroll back to the top. - FAQ answers should SELL, not just inform. Each answer ends by reinforcing why we're the right choice. - The testimonials should address the 3 biggest objections. If the objection is price, the testimonial talks about value. If it's trust, the testimonial talks about reliability. - Add a "risk reversal" near the final CTA — something that makes saying yes feel safe: free consultation, money-back guarantee, no contracts, whatever fits. - Add micro-copy near form fields and CTA buttons: small reassuring text like "Free. No obligation. Takes 30 seconds." This alone can double conversion rates. - The hero headline should pass the "bar test" — if I said this to a stranger at a bar, would they lean in and say "tell me more"? If not, rewrite it. - Add urgency or scarcity ONLY if it's real. Fake urgency destroys trust. DETAILS THAT SIGNAL QUALITY: - Smooth page transitions between sections (not jarring hard cuts) - Buttons should have a subtle scale + shadow shift on hover, not just a color change - Use one accent color consistently — it should mean "action" everywhere it appears - Add a subtle animated gradient or glow behind the hero headline (CSS only, no libraries) - Cards should have a gentle lift effect on hover (transform + box-shadow) - The nav should be transparent at the top and gain a background + blur on scroll - Add a "back to top" button that appears after scrolling past the hero - Use real quotation marks for testimonials (curly quotes, not straight) - The mobile hamburger menu should animate smoothly (don't just show/hide) Before you write any code, plan the page structure and copy FIRST. Think through the emotional arc: what does the visitor feel at the top of the page, the middle, and the bottom? Map the journey from "I have a problem" to "these people get it" to "I'm calling them." Write all the copy first. THEN build it.