Vibe Code an Accountant Website

Build a one-page accountant / bookkeeper website as a single self-contained
HTML file (inline CSS and JS, no external dependencies except Google Fonts
and Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Accountant name: [FULL NAME, CPA / EA]
- Years experience: [N]+
- Audience: small businesses, freelancers, startups
- Annual revenue served: clients $[X]K - $[Y]M
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Hours: [WEEKDAY] (extended hours Jan-Apr for tax season)
- Specialty: bookkeeping / tax prep / advisory / fractional CFO (pick one)
- Software: QuickBooks Online ProAdvisor + Xero certified
- Booking: free 30-min consultation form + client portal link

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: deep forest green (#1f5142), warm cream (#f5efe2), charcoal
 text (#1a1a1a), single gold accent (#b88a3a). Override if user provides;
 derive variants for AA contrast on body.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Professional, organized, calm. Reads as the "good accountant", not the
 "flashy tax shop" on a strip mall sign.
- Type pairing: serif headings (Source Serif Pro, Lora) + Inter for body.
 ONE italic accent in italic serif. NO script fonts.
- Eyebrow labels: uppercase, tracked .20em, forest green, prefixed by a
 28px CSS ::before line in gold.
- Headlines: short, calm, with ONE italic accent ("Books that *balance*.
 Taxes you *don't dread*."). Italic words in gold.
- Generous white space, clean line dividers (thin gold), grid-based,
 no shadows. Subtle, restrained.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5, round caps. Cover: ledger, calculator, scale, growth-
 arrow, document, shield, lock, calendar, clock, pin, phone, mail, check,
 star, dollar.
- Icon containers: 44x44 thin-outline squares with gold border (1px), flip
 to filled forest with cream icon on hover.
- Motion: subtle scroll fade-ins, soft hover lifts (4px). NO bouncing,
 NO parallax.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. FIXED NAV (glass effect cream translucent + backdrop blur)
 - Wordmark (serif) left | anchor nav center | "Book free consultation"
 forest pill CTA right
 - Secondary link in nav: "Client Portal" small text top-right (opens
 external # placeholder)

2. HERO
 - Two-column: text left, photo right (Unsplash: "desk laptop coffee
 ledger" or "professional office") rounded 20px with subtle forest
 gradient overlay bottom-right
 - Left: eyebrow with line marker, headline ("Books that *balance*.
 Taxes you *don't dread*."), 2-line subhead, primary "Book free
 consultation" CTA + secondary "Client portal login"
 - Trust strip below CTAs: 4 mini-stats (Years • Clients • Software cert
 • Average review)

3. WHO I HELP
 - Eyebrow + headline ("Who I *work with*")
 - 3-column grid: For Small Businesses / For Freelancers / For Startups
 (stack mobile)
 - Each card: 44x44 forest-outline icon badge + audience name (serif) +
 2-line description + 4-bullet "what I handle" list as prose with check
 icons

4. SERVICES
 - Eyebrow + headline ("Services & *what's included*")
 - 4-column row of service cards: Bookkeeping, Tax Prep, Advisory,
 Fractional CFO (stack on mobile)
 - Each: 44x44 forest-tinted icon badge + service name (serif) + 3-line
 description in prose + price-from in monospace gold ("From $[X]/mo")
 - One card visually elevated with thin gold border + light glow

5. PRICING
 - Eyebrow + headline ("Simple, *monthly* pricing")
 - 3-column pricing table: Essentials / Full Service / CFO Lite
 (stack mobile)
 - Each tier: name (serif), price (large serif gold), 6-feature list in
 prose with check icons (or × for excluded), CTA forest button
 - Middle tier (Full Service) highlighted with "Most Popular" gold tag
 - Below table: "Not sure which? Book a free 30-min consult and I'll
 recommend"

6. INDUSTRIES SERVED
 - Eyebrow + headline ("Industries I *know inside out*")
 - 6-card icon grid (Construction, Retail, SaaS, Restaurants, Real
 Estate, Healthcare), stack mobile
 - Each: 44x44 forest-outline icon badge + industry name + 1-line
 "what's different about this industry's books"

7. PROCESS
 - 4-step horizontal timeline (stack mobile)
 - Each: large outlined gold numeral (01-04) in serif + step title +
 1-sentence description
 - Steps: Discovery call → Onboarding → Monthly cadence → Annual review
 - Thin gold connector line between steps on desktop

8. CREDENTIALS
 - Thin cream section, borders top/bottom
 - "CERTIFIED & RECOGNIZED" label left + 5 typographic names right
 (CPA / EA, QuickBooks ProAdvisor, Xero Certified, AICPA Member, State
 Society of CPAs), typeset names, no logos

9. ABOUT
 - Two-column: portrait left (rounded 16px, soft shadow), text right
 - Right: eyebrow, headline ("I'm *[FIRST NAME]*"), 3-paragraph bio
 including the "why I do this" moment, education (university +
 credentials), philosophy on client relationships

10. TESTIMONIALS
 - 4 quote cards in 2x2 grid (stack mobile)
 - Each: oversized opening quotation in muted forest, quote body
 (specific service result, "saved $14K in taxes I didn't know I
 was owed", varied lengths), 5 gold SVG stars, separator,
 gradient-circle initials avatar + first name + last initial + business
 type ("Construction owner, [STATE]")

11. RESOURCES / INSIGHTS PREVIEW
 - Eyebrow + headline ("Free *guides*")
 - 3-column grid of article cards (stack mobile)
 - Each: small thumbnail, category tag chip, title (serif), 2-line
 excerpt, "Read →" link
 - Topics example: "Quarterly tax checklist", "QuickBooks vs Xero",
 "When to hire a fractional CFO"

12. CONSULTATION FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Book a *free 30-min consult*"), 3-bullet
 reassurance ("No sales pitch", "Real advice in 30 minutes",
 "Honest fit assessment")
 - Right: cream card with thin forest border
 • Fields: full name, business name, email, phone, current annual
 revenue (select), industry (select), what you need help with
 (checkboxes: Bookkeeping / Tax prep / Advisory / Catch-up books /
 Other), preferred contact time
 • Submit gold button, full-width
 • Inline JS success message (preventDefault)
 - Below form: "All consultations confidential. I respond within one
 business day."

13. CLIENT PORTAL CALLOUT (small)
 - Forest gradient card centered, gold accents
 - 1-line: "Already a client? Login to the secure client portal →"
 - "Client Portal" CTA gold button

14. FAQ
 - 6 collapsible <details>: "QuickBooks or Xero, which do you use?",
 "What's the difference between bookkeeping and tax prep?", "How
 quickly do you respond?", "Do you handle prior-year cleanup?",
 "Are you accepting new clients?", "How are documents shared
 securely?"

15. FOOTER (deep forest)
 - Newsletter card top: "Quarterly tax tips + reminders" + email
 input + gold submit + inline success
 - Centered wordmark in cream serif
 - Italic serif tagline (NOT handwritten)
 - Social row: gold-bordered glass circles (LinkedIn primary, only
 platforms user provides)
 - Bottom: address + hours + CPA license # + "SOC 2 secure portal" +
 privacy policy link + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `AccountingService` + `Person` schema in <head> with name,
 jobTitle "CPA" / "EA", knowsAbout, address, telephone, openingHours
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- tel:/mailto: links; mailto with prefilled subject ("Free consultation
 request")
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (ledger or scale mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Calm, plain-English, professional. Avoids tax jargon unless immediately
defined. Specific over generic ("I'll move your books from Wave to Xero,
clean up two years, and get you a clean 1099 in three weeks", not
"comprehensive financial solutions"). Headlines short with ONE italic
word. Body copy reassuring without overselling. Testimonials feel like
real Google reviews, specific service, specific outcome, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including money / calculator / chart emojis)
- No "we're passionate about numbers" / "we love taxes" filler
- No script/handwritten fonts
- No animated rising-stock-chart graphics
- No real QuickBooks / Xero / IRS logos as images, use typeset names
- No fake stock photos of a man-in-suit-holding-calculator pose
- No "Save big!", "Maximum refund!", "Tax magic!" exclamations
- No bullet lists in card copy (write as prose)
- No bright orange/red CTA buttons (would conflict with restrained palette)


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "AccountingService" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~70-80KB), production-ready. Include JSON-LD
schema. Show the file as a single code block and briefly summarize the
design decisions made.