The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Insurance Agency Quote Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a polished three-page website for [BRAND], an invented independent insurance agency serving [AUDIENCE] in [SERVICE_AREA]. The central message is [PROMISE]. Include home, auto, and life coverage paths; a short branching three-step quote-summary form; a clear working process; three fictional agent profiles; explicitly illustrative reviews; and a practical claims-help page. Use the exact default copy and sample data below, rewriting every agency-specific detail when variable values change.

- Audience: Individuals and families comparing home, renters, auto, or term life coverage who want plain-language guidance before speaking with an independent agent. It also suits small agency owners adapting a complete static front end for their own audience and service area.
- Goal: Help visitors identify the right coverage path, understand the agency's role, prepare a concise summary for a real conversation, and find calm claims guidance. Demonstrate a complete client-side quote journey without calculating premiums, submitting personal data, or implying coverage is bound.
- Tone: Warm, clear, steady, and specific. Sound like a patient local advisor rather than a carrier, call center, or aggressive lead funnel. Use short sentences, concrete examples, transparent limitations, no scare tactics, no savings promises, and no pressure countdowns.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), @fontsource/fraunces (OFL-1.1), @fontsource/public-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold a Vite React TypeScript app. Keep index.html, quote.html, and claims.html at the project root, each with a div id='root' whose data-page value is home, quote, or claims and the same src/main.tsx entry.
  - In vite.config.ts set base './', plugins [react()], build.outDir 'dist', build.sourcemap false, build.assetsInlineLimit 0, and rollupOptions.input to all three root HTML files using resolve(__dirname, '<file>'). Do not copy src/ into dist/.
  - Configure Tailwind 3.4 through PostCSS with content ['./index.html', './quote.html', './claims.html', './src/**/*.{ts,tsx}']. Add the Design colors and fontFamily display ['Fraunces', 'Georgia', 'serif'] and sans ['Public Sans', 'system-ui', 'sans-serif'].
  - In src/fonts.ts import '@fontsource/fraunces/600.css', '@fontsource/fraunces/700.css', '@fontsource/public-sans/400.css', '@fontsource/public-sans/500.css', '@fontsource/public-sans/600.css', and '@fontsource/public-sans/700.css'; import src/fonts.ts and src/index.css from the entry file.
  - src/main.tsx reads the root element's data-page value and renders the matching page without a router. Every navigation link points to ./index.html, ./quote.html, or ./claims.html, with section hashes and quote query parameters only where specified.
  - Keep every visible string, sample answer option, review, agent, address, hour, contact detail, FAQ, and image path in typed records in src/content.ts. Derive brand-dependent values and rewrite all dependent content when variables change.
  - Add src/lib/brand.ts for brandSlug and the reserved .example email address, src/lib/quote.ts for query parsing, typed branching fields, validation, summary formatting, and reset behavior, and src/lib/clipboard.ts for copy with a local fallback.
  - Use Motion for React for section reveals, mobile navigation, quote-step transitions, checklist tabs, and accordions. Use Lucide icons only. Keep quote state in memory for the current page session; do not persist answers in localStorage or send them anywhere.
  - Before the first build, download the six supplied images into public/images/ with the exact paths under Assets. The production build itself never fetches anything.
  - Create public/favicon.svg from the original open-door line motif under Assets. Give each HTML file a plain variable-aware title and a local favicon link; do not add SEO metadata or structured data.
  - Write ASSETS.md at the project root with every supplied image, font package, and icon package as specified under Assets. Keep dist/ under 20 MB with no source maps.

## Variables
- [BRAND] — Agency name (default: "Morrow & Vale Insurance"). An invented independent agency name used in the wordmark, page titles, quote summary, contact copy, and footer. Never use a real insurer or carrier.
- [BRAND_SLUG] — Agency handle (default: "morrow-vale"). A lowercase hyphenated handle derived from the agency name. Remove hyphens to form the reserved .example email local domain; never use a real domain.
- [AUDIENCE] — Primary audience (default: "homeowners, drivers, and growing families"). A concise lowercase phrase shaping the hero, coverage guidance, agent introductions, and quote invitation.
- [SERVICE_AREA] — Service area (default: "Alder Grove and the west-side neighborhoods"). An invented local service area used throughout the site. Keep street addresses and neighborhood names fictional.
- [PROMISE] — Central promise (default: "Clear choices. A real person in your corner."). A short original agency promise used as the homepage H1 and repeated in the quote and footer copy. Do not promise savings, acceptance, or claims outcomes.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/insurance-agency-quote-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Parchment `#F4F0E6` — Main page background and warm editorial sections
- Paper `#FFFDF8` — Cards, forms, portrait captions, and text on Forest
- Forest `#183B35` — Primary text, dark bands, footer, and primary buttons
- Pine `#2E5B50` — Links, selected controls, focus rings, and secondary button fills
- Clay `#C86F4B` — Decorative rules, small icon tiles, step markers, and non-text accents
- Sage `#DCE5D8` — Quiet badges, selected backgrounds, progress tracks, and checklist panels
- Muted `#66736D` — Secondary copy, captions, helper text, and inactive progress labels
- Line `#CBD3C8` — Hairline borders, inputs, table rules, and card outlines
- Error `#9B3E35` — Validation messages and error borders, always paired with text and an icon

### Typography
- Display headlines, section titles, large quote numerals, and the wordmark: Fraunces (OFL), weights 600/700
- Body, navigation, forms, reviews, checklists, captions, and buttons: Public Sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use a 4px base grid and a 1280px maximum content width with 32px desktop gutters and 20px mobile gutters. Major sections use 112px vertical padding desktop and 72px mobile. Use a 12-column desktop grid with 24px gaps. H1 is clamp(46px, 5.2vw, 74px) Fraunces 600 with 1.01 line height and -0.035em tracking; inner-page H1 is clamp(44px, 4.8vw, 66px). H2 is clamp(34px, 3.5vw, 50px) with 1.08 line height; H3 is 25px. Body is 17px/1.65 with a 64ch maximum; small labels are 12px/1.4 Public Sans 700 uppercase with 0.13em tracking. Buttons and inputs are at least 50px high. Focus uses a 3px Pine outline with 3px offset on light surfaces and Paper on dark surfaces.
- Radius: Use 28px radii on large photographic frames, 22px on major cards, 14px on quote and checklist panels, 12px on inputs, 10px on buttons, and fully rounded compact tags only. Cards use 1px Line borders rather than floating shadows; only the quote workspace gets a restrained 0 20px 55px Forest shadow at 8% opacity.
- Motion: On the home hero, reveal the eyebrow, headline lines, body, and CTAs with y 22 to 0 and opacity 0 to 1 over 600ms, staggered by 70ms; reveal hero.webp from clip-path inset(0 0 100% 0) to inset(0) over 850ms with scale 1.025 to 1.
- Motion: Reveal section headings and card groups once with y 18 and opacity over 480ms and a 60ms sibling stagger. Content remains visible without IntersectionObserver and is never hidden while waiting for animation.
- Motion: Quote steps enter with opacity and x 18 over 220ms and exit with x -12 over 160ms. Move focus to the new step heading after navigation. Progress fills use width over 240ms; answers never animate before they are visible.
- Motion: Mobile navigation opens with opacity and height over 220ms. Claims tabs use a 180ms content fade, and FAQ accordions use height and opacity over 200ms. Copy and print actions show concise text feedback without confetti.
- Motion: Coverage cards and agent cards use a 3px maximum hover lift with border-color transitions; no looping decoration, carousel, parallax, counting premiums, or animated star ratings.
- Motion: Respect prefers-reduced-motion through Motion's reduced-motion hook and CSS overrides: remove transforms, clip reveals, smooth scrolling, staggers, and nonessential transitions while preserving all final states and interactions.
- Imagery: Use the six supplied documentary editorial photographs as one coherent agency shoot: warm natural daylight, soft window light, muted forest green, parchment, terracotta, warm oak, realistic texture, and subtle 35mm grain. The hero is a wide welcoming home scene with any people distant and non-identifiable, never a face close-up. The three adult agents are fictional people who do not resemble any real individual, with varied age and ethnicity and consistent office light. The advisory and claims photographs make hands, conversation, and place more important than identity. No image contains readable text, logos, carrier materials, license cards, branded products, or recognizable real people. Use object-fit cover with the specified focal positions and descriptive alt text; never place text over a face. The open-door favicon, icons, progress graphics, and checklist marks are drawn in code. Do not substitute stock photos, initials avatars, or additional portraits.

## Pages & Sections
### Independent agency home and coverage paths (`index.html`)
1. **Content model and default sample data** — All copy below is written for [BRAND] = Morrow & Vale Insurance, [BRAND_SLUG] = morrow-vale, [AUDIENCE] = homeowners, drivers, and growing families, [SERVICE_AREA] = Alder Grove and the west-side neighborhoods, and [PROMISE] = Clear choices. A real person in your corner. Put every value in src/content.ts and rewrite agency-specific copy when variables change. Default operational details: invented address 418 Alder Grove Avenue, Suite 6; phone (503) 555-0148; email hello@ + brandSlug without hyphens + .example; office hours Monday–Friday 8:30 AM–6:00 PM and Saturday 9:00 AM–1:00 PM. Agents: Mara Ellison, Home and property guidance, Turns dwelling limits and deductibles into side-by-side choices that make sense for real budgets, English and Spanish; Theo Bennett, Auto and mobility guidance, Helps daily drivers compare use, mileage, deductibles, and optional protection without jargon, English and Korean; Elena Ruiz, Life and family planning, Makes term lengths and coverage goals easier to discuss during changing family seasons, English and Spanish. All people, portraits, biographies, reviews, addresses, and operational details are invented sample content. Reviews: Nina and Paul R., first-time homeowners, Mara drew two deductibles on a notepad and showed how each would affect our monthly budget. We finally understood the choice instead of just picking the lower price.; Celeste M., daily commuter, After a fender bender, Theo gave me a checklist and helped me find the claims number in my policy. I knew what to do next.; Jordan and Sam T., new parents, We came in to talk about life insurance and left with questions that fit our new childcare budget. No pressure, just a clear conversation. Label these as illustrative demo reviews, never verified testimonials. Keep every named value synchronized across pages.
   Layout: n/a
   Motion: n/a
2. **Shared utility bar, header, and mobile navigation** — Utility text: Independent guidance for [AUDIENCE] · [SERVICE_AREA]. Secondary text: Mon–Fri 8:30–6 · Sat 9–1. Use an original code-drawn open-door line motif beside the text wordmark [BRAND] and small caption INDEPENDENT INSURANCE AGENCY. Desktop navigation: Coverage → ./index.html#coverage, How it works → ./index.html#process, Agents → ./index.html#agents, Claims help → ./claims.html. Primary CTA: Start a quote → ./quote.html. Mark the current page with aria-current='page'. Mobile uses a Menu button with an expanded panel containing the same links and CTA; close it after navigation and on Escape. Reuse this header and the shared footer on quote.html and claims.html.
   Layout: A 34px Forest utility bar with Paper text sits above a sticky 78px header. Header uses Parchment at 96% opacity, subtle blur, and a Line bottom border. Wordmark left, navigation centered, CTA right inside the 1280px container. Below 940px hide the utility secondary text and desktop navigation, then show wordmark, compact Quote button, and Menu.
   Motion: Use the specified mobile-panel transition; do not animate the sticky position.
3. **Photographic hero and quote quick start** — Eyebrow: INDEPENDENT · LOCAL · ON YOUR SIDE. H1: [PROMISE]. Lead: [BRAND] helps [AUDIENCE] across [SERVICE_AREA] understand home, auto, and life coverage before making a decision. Bring your questions; leave with a clearer next step. Primary CTA: Start my quote → ./quote.html. Secondary CTA: Meet the agents → ./index.html#agents. Add three compact facts: Home, auto, and life · Independent guidance · No-pressure conversations. Use hero.webp with alt 'A welcoming green house and garden in soft morning light' and object-position center 52%. Overlap the lower-left of the image with a Paper quick-start card titled What would you like to protect? and three full-width or equal-column choices: Home — House, condo, or rental → ./quote.html?type=home; Auto — Car and daily driving → ./quote.html?type=auto; Life — Family and future plans → ./quote.html?type=life. Each choice uses its Lucide icon and a visible arrow.
   Layout: Within the first desktop screen after the header, use a 5/7 grid with copy left and a 570px-high photograph right. Hero top padding is 48px and bottom padding 88px. The image spans its column with 28px radius and a small Clay offset block behind its upper-right corner. The 390px-wide quick-start card overlaps the image bottom-left by 36px. On mobile order eyebrow, H1, image, lead, CTAs, facts, then a non-overlapping quick-start card; keep the image at 230px high and both CTAs full width.
   Motion: Use the hero entrance sequence. The quick-start card fades in after the image settles; no autoplay carousel or looping decoration.
4. **Three coverage paths** — Section id='coverage'. Eyebrow: COVERAGE, IN PLAIN LANGUAGE. H2: Start with what you want to protect. Intro: You do not need to know the terminology before we talk. Choose a starting point and we will organize the questions. Home card: HOME AND RENTERS / A place to come back to / Explore options for the structure, belongings, and personal liability, whether you own a house, have a condo, or rent. Includes three short tags: Dwelling and belongings, Personal liability, Loss of use. CTA Start a home quote → ./quote.html?type=home. Auto card: AUTO / For the everyday miles / Review liability, collision, comprehensive, and optional protection around how you actually drive. Tags: Liability, Collision and comprehensive, Roadside options. CTA Start an auto quote → ./quote.html?type=auto. Life card: TERM LIFE / A little more certainty for your people / Talk through income support, mortgage goals, childcare, and final expenses without a one-size-fits-all recommendation. Tags: Income goals, Term length, Beneficiary planning. CTA Start a life quote → ./quote.html?type=life. Small note: Coverage availability and definitions vary by policy and carrier. These summaries are general information, not a promise of coverage.
   Layout: Parchment section with a 5/7 heading grid followed by three equal cards. Each card has a 48px Sage icon tile, title, 28px Fraunces subtitle, description, separated tag list, and bottom-aligned text CTA. Use House, Car, and HeartPulse Lucide icons. Stack cards on mobile with no horizontal card carousel.
   Motion: Reveal cards with the standard stagger and use the restrained hover lift. No hidden card content on hover.
5. **How independent guidance works** — Section id='process'. Eyebrow: HOW IT WORKS. H2: A conversation before a recommendation. Intro: An independent agent helps you frame the decision; the carrier still determines eligibility, pricing, and coverage. Use advisor.webp with alt 'A fictional advisor having a relaxed conversation with clients at a wooden table' and object-position center 45%. Three numbered steps: 01 Tell us what matters — Share the home, drive, or family goal on your mind. The quote guide takes about two minutes with sample details.; 02 Compare the trade-offs — In a real agency conversation, your agent explains limits, deductibles, exclusions, and questions to ask each carrier.; 03 Choose your next step — Take your summary into a conversation, ask for clarification, or take time to think. There is no pressure to decide on the spot. CTA Build my quote summary → ./quote.html. Caption beneath image: Questions welcome. Fine print explained.
   Layout: Paper section in a 6/6 grid. Place a 4:3 advisor photograph left and three stacked steps right, each with a large Clay numeral, 24px Fraunces title, body, and connecting vertical rule. CTA sits below the steps. On mobile image follows the intro and precedes the steps.
   Motion: Standard image and step reveals only; no pinned or scroll-scrubbed sequence.
6. **Fictional agent profiles** — Section id='agents'. Eyebrow: PEOPLE YOU CAN TALK TO. H2: Different questions. A familiar person. Intro: Three fictional profile placeholders show how an agency can make expertise and communication style visible. Render Mara, Theo, and Elena using agent-mara.webp, agent-theo.webp, and agent-elena.webp with 3:4 crops and object-position center 26%. Each card includes name, specialty, biography, and languages. Add a button on each: Ask Mara / Ask Theo / Ask Elena → ./quote.html?agent=mara, theo, or elena. The quote page reads the optional agent and includes that preference in the summary. Caption: Demo profiles with fictional portraits; replace them with your agency's own staff information and verified credentials.
   Layout: Parchment section with three equal cards. Portraits have 22px top radii; text sits below rather than over the face. Align specialties, descriptions, language lines, and CTAs by row on desktop and stack on mobile. Buttons use Paper with a Forest border rather than another heavy filled style.
   Motion: Use one gentle portrait reveal per card and a short text stagger. No grayscale filter or hover-only biography.
7. **Illustrative client stories** — Eyebrow: SAMPLE CLIENT STORIES. H2: Good guidance sounds like this. Intro: Use the three reviews from the content model exactly for the default case, with invented names and contexts. Do not add star ratings, review counts, platform logos, or verified badges. Small visible note: Illustrative reviews written for this demo; replace them with verified customer feedback before publishing an agency site.
   Layout: Sage section with the heading in a 4-column rail and the three reviews in an 8-column stacked list. Each review uses a large decorative Fraunces quotation mark, 20px/1.55 text, and a compact name and context line separated by a Clay rule. On mobile stack heading and reviews. Do not use a carousel.
   Motion: Reveal review rows once with the standard stagger; no auto-rotation or animated quotation marks.
8. **Claims preview and shared footer** — Claims eyebrow: WHEN SOMETHING GOES WRONG. H2: Start with a calm checklist. Copy: Get safe, document what happened, find your policy, and contact the carrier handling the claim. Our general guide helps you organize the next few steps without replacing your carrier's instructions. Four short steps: 01 Get to safety; 02 Document the scene; 03 Find your policy; 04 Report and ask questions. CTA Open the claims guide → ./claims.html. Emergency note: If anyone is in immediate danger, contact local emergency services first. This demo does not provide live claims support. Footer repeats [BRAND], [PROMISE], links to all three pages, phone (503) 555-0148, derived reserved .example email, invented address, and office hours. Bottom note: General information only. No coverage is offered or bound by this static demonstration, and quote summaries are not transmitted. © [BRAND] plus the optional [CREDIT] link. Do not add a year, carrier logos, or social icons.
   Layout: Claims preview is a Forest panel with Paper text in a 5/7 grid, four compact numbered steps on the right, and a Clay CTA with Forest text. Footer follows with a 5/3/4 grid for statement, navigation, and contact on a darker Forest surface. Stack on mobile with large tap targets and no overlapping text.
   Motion: Simple section reveal and link-color transitions only.

### Branching three-step quote summary (`quote.html`)
1. **Quote introduction and privacy note** — Use the shared header and footer from index.html. Eyebrow: YOUR QUOTE STARTER · ABOUT TWO MINUTES. H1: A few details. One clear summary. Intro: Prepare for a conversation with [BRAND] by choosing a coverage path and answering a short set of questions. Use sample information only. This browser-only demo does not calculate a premium, check eligibility, bind coverage, or send a request. Optional type query values home, auto, and life preselect that path; invalid or missing values default to home. Optional agent query values mara, theo, and elena preselect a preferred agent; otherwise use No preference. Show a Sage privacy strip with ShieldCheck icon: Your answers stay in this page and disappear when you leave or reset. Nothing is stored or transmitted.
   Layout: Compact Parchment introduction in a 7/5 grid with text left and a Paper note card right. The note card reads NOT A BINDING QUOTE / A preparation tool for a real conversation. Keep the introduction compact enough to reveal the progress indicator within the first desktop screen. Stack on mobile.
   Motion: Reveal heading and note once with the standard entrance.
2. **Three-step guided quote workspace** — H2: Build your quote summary. Progress labels are 1 Coverage, 2 Details, 3 Review, with a visible text current-step announcement and a progress fill at 33%, 66%, or 100%. Step 1 fields: coverage type radio cards Home, Auto, Life preselected from type; ZIP or postal code text with helper Use a fictional code for this demo; current coverage radio Yes, No, Not sure; preferred agent select No preference, Mara Ellison, Theo Bennett, Elena Ruiz preselected from agent. Step 2 changes by path. Home fields: property type Single-family home, Condo, Rental unit; relationship Own, Rent; year-built range Before 1970, 1970–1999, 2000–2014, 2015 or newer; priority Lower monthly cost, Balanced cost and protection, Broader protection, Not sure. Auto fields: vehicle ownership Own outright, Financed, Leased; primary use Commuting, Personal errands, Mixed personal and business; annual mileage Under 5,000, 5,000–12,000, 12,001–20,000, Over 20,000; licensed drivers 1, 2, 3 or more. Life fields: coverage goal Income support, Mortgage or housing, Childcare or education, Final expenses, Not sure; coverage amount range $100,000–$250,000, $250,001–$500,000, $500,001–$1,000,000, Over $1,000,000, Not sure; age range 18–29, 30–39, 40–49, 50–59, 60 or older; preferred term 10 years, 20 years, 30 years, Not sure. Step 2 also asks current priority with the same four priority choices for Auto and Life. Step 3 shows grouped review rows for every answer with Edit buttons returning to the relevant step, preferred next-step radio Phone conversation or Email conversation, and best-time radio Morning, Afternoon, Evening. No name, email, street address, birth date, health detail, vehicle identification number, or payment field. Require every displayed field except preferred agent and default only values explicitly supplied by a valid query or listed above. Continue buttons validate visible fields, show inline text errors and an error summary, focus the first invalid control, and preserve earlier answers on Back. Final button: Create my summary. The form never performs a network request.
   Layout: Use an 8/4 grid with a Paper form card left and a sticky reassurance rail right. The form has 32px padding desktop and 20px mobile, visible labels, 50px controls, large radio targets, and 16px helper text. The right rail contains selected agent, What this tool does, What it does not do, phone, reserved email, and a repeated no-submission note. Progress sits above both columns. On mobile the rail becomes a compact disclosure below the form rather than pushing the form down.
   Motion: Use the specified quote-step transitions, focus management, progress fill, and non-shaking error fade. Reduced motion changes steps instantly.
3. **Local summary and honest completion state** — After valid Step 3 completion, replace the form in place with eyebrow SUMMARY READY · NOTHING SENT and H2 Your conversation starter is ready. Show a formatted summary containing [BRAND], coverage path, current coverage, all path-specific answers, preferred agent, preferred next step, and best time. Do not show a price, rate, eligibility label, savings figure, application number, or successful-submission message. Display: This summary is not an insurance quote and does not bind coverage. Your answers were not stored or sent. Contact [BRAND] directly to discuss real options. Actions: Copy summary using a plain-text version and a local fallback; Print summary using a clean print stylesheet; Edit answers returning to Step 3; Start over clearing all answers and query-derived selections after a confirmation. Copy feedback reads Summary copied and is announced through aria-live. Move focus to the completion heading. Print output contains only the summary, agency contact details, and disclosure, not navigation or decorative imagery.
   Layout: Completion uses the same workspace width with a Sage heading band, Paper summary rows, and a 2×2 action grid that becomes one column below 520px. Keep the disclosure adjacent to the actions rather than in fine print at the bottom.
   Motion: Replace the form with a 220ms opacity transition and show copy feedback without confetti or success theatrics.

### Claims help and document checklists (`claims.html`)
1. **Claims guide hero** — Use the shared header and footer from index.html. Eyebrow: CLAIMS HELP · GENERAL GUIDANCE. H1: A calm checklist for a stressful moment. Intro: Start with safety, then organize what your carrier may need. [BRAND] can help you understand the process, but the carrier handling your policy provides claim instructions and makes coverage decisions. Primary CTA: Start with the first steps → ./claims.html#first-steps. Secondary CTA: Call the sample agency → tel:+15035550148. Use claims.webp with alt 'Fictional adult hands organizing blank papers and notes at a kitchen table' and object-position center 48%. Emergency note: If anyone is hurt or in danger, contact local emergency services before worrying about documents.
   Layout: Use a 5/7 grid with copy left and a 430px-high photograph right, similar in scale to the home hero but with 48px top padding. Place the emergency note below both columns in a full-width Clay-tinted strip with a TriangleAlert icon. On mobile place the photograph after the H1 and before the body copy.
   Motion: Standard heading and image entrance; no parallax.
2. **Immediate first steps** — Section id='first-steps'. Eyebrow: THE FIRST FEW STEPS. H2: Take one thing at a time. Four numbered cards: 01 Make sure everyone is safe — Move to a safe place if possible and contact emergency services when needed.; 02 Prevent further damage only if safe — Follow emergency guidance and your carrier's instructions. Do not take risks to protect property.; 03 Document what happened — When safe, take photos, write down what you remember, and keep relevant names and receipts. Avoid guessing or admitting fault.; 04 Find the policy and report — Locate the declarations page and claims contact, notify the carrier promptly, and ask what they need next. Small note: Requirements differ by policy, carrier, and location. This checklist is general information, not legal or coverage advice.
   Layout: Parchment section with a 4/8 heading grid and four equal cards in a 2×2 grid. Each card uses a large Clay numeral, 23px Fraunces title, and concise body. On mobile use one vertical timeline with the same numbers and connecting rule.
   Motion: Reveal cards with a 60ms stagger; no animated emergency effects.
3. **Coverage-specific document tabs** — Eyebrow: A PLACE TO START. H2: Gather what applies to you. Intro: Use the tabs to view a general document checklist. Your carrier may ask for more, fewer, or different items. Home tab: policy declarations page; photos or video of damage; a simple damaged-item inventory; repair or cleanup estimates; receipts for emergency work or temporary expenses. Auto tab: driver and vehicle information; other party and witness details when available; photos of vehicles and the scene; police report details if applicable; repair estimates and towing receipts. Life tab: policy number and carrier contact; certified death certificate; claimant identification; carrier claim forms; beneficiary information requested by the carrier. Every tab includes: Keep originals unless the carrier asks for them, and make copies for your records. Use real tab semantics with arrow-key navigation, aria-selected, and a labelled tabpanel; default to Home.
   Layout: Paper section with three large tabs across the top and a Sage checklist panel below. Each checklist has a ClipboardList icon and five rows with code-drawn empty checkbox squares that are visual only, not a fake saved checklist. Stack tabs as full-width buttons below 600px.
   Motion: Use the specified 180ms tab fade and keep focus on the selected tab. Reduced motion switches instantly.
4. **General claim journey and FAQs** — Eyebrow: WHAT USUALLY COMES NEXT. H2: A process you can ask about. Four general stages: Report — Share the basic incident details with the carrier.; Review — The carrier assigns its process and requests information.; Assessment — Damage, documentation, and policy terms are evaluated as applicable.; Resolution — The carrier explains its decision and any next steps. Note: Timelines and requirements vary; do not show estimated days or promise an outcome. FAQ accordion with five items: Should I file a claim? — If you are unsure, contact the carrier or your agent to discuss the situation. Ask how a formal claim is opened before assuming a conversation creates one.; Will filing a claim raise my premium? — It depends on the policy, carrier, location, claim, and underwriting rules. No one should promise an answer before the carrier reviews it.; What if I do not have every document? — Start with what you have and ask the carrier for a specific missing-item list and safe submission method.; Can I choose my own repair shop? — Rules and network options vary. Ask the carrier how estimates, shop choice, and guarantees work under your policy and local requirements.; What can an independent agent do during a claim? — An agent may help explain the process and communication steps, but the carrier manages the claim and determines coverage.
   Layout: Use a 5/7 grid with the four-stage vertical journey left and the five-item accordion right. Separate stages with Line rules and use small numbered Sage circles. Accordion rows have visible plus/minus icons and at least 52px button targets. Stack on mobile.
   Motion: Use standard reveals and the specified accordion height transition; never leave collapsed text visible to screen readers.
5. **Claims contact band** — H2: Bring your questions to a real conversation. Copy: For this fictional agency demo, use the sample contact details to see the intended layout. A production agency must replace them with its own monitored phone, secure document instructions, and after-hours carrier information. CTA Call (503) 555-0148 → tel:+15035550148. Secondary CTA Prepare a quote summary → ./quote.html. Note: Do not upload claim documents to this static demo. Nothing here provides emergency response or live claim status.
   Layout: A full-width Forest band with Paper text, contact CTA in Sage with Forest text, and secondary text link. Use an 8/4 grid and stack buttons full width on mobile.
   Motion: Link-color transitions only.

## Assets
- image: Download https://media.vibefather.ai/assets/dfa770b4-f72e-4edb-ac6d-fc2670098136/hero.webp to public/images/hero.webp; alt 'A welcoming green house and garden in soft morning light'; use as the large homepage hero photograph with object-position center 52%. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record path, source URL, credit, and license in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/dfa770b4-f72e-4edb-ac6d-fc2670098136/advisor.webp to public/images/advisor.webp; alt 'A fictional advisor having a relaxed conversation with clients at a wooden table'; use in the homepage How it works section with object-position center 45%. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record path, source URL, credit, and license in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/dfa770b4-f72e-4edb-ac6d-fc2670098136/agent-mara.webp to public/images/agent-mara.webp; alt 'Fictional agent Mara Ellison seated at a sunlit office table'; use for Mara Ellison's profile with object-position center 26%. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record path, source URL, credit, and license in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/dfa770b4-f72e-4edb-ac6d-fc2670098136/agent-theo.webp to public/images/agent-theo.webp; alt 'Fictional agent Theo Bennett standing beside a bright office window'; use for Theo Bennett's profile with object-position center 26%. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record path, source URL, credit, and license in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/dfa770b4-f72e-4edb-ac6d-fc2670098136/agent-elena.webp to public/images/agent-elena.webp; alt 'Fictional agent Elena Ruiz seated in a warm plant-filled office'; use for Elena Ruiz's profile with object-position center 26%. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record path, source URL, credit, and license in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/dfa770b4-f72e-4edb-ac6d-fc2670098136/claims.webp to public/images/claims.webp; alt 'Fictional adult hands organizing blank papers and notes at a kitchen table'; use as the claims page hero with object-position center 48%. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template. Record path, source URL, credit, and license in ASSETS.md.
- icon: Install lucide-react (ISC) and use only House, Car, HeartPulse, ArrowRight, ArrowLeft, Menu, X, ShieldCheck, Phone, Mail, MapPin, Clock3, ClipboardList, Check, Copy, Printer, RotateCcw, ChevronDown, Plus, Minus, CircleAlert, and TriangleAlert. Draw the original open-door favicon and wordmark motif as simple local SVG strokes; no carrier, review-platform, social, or other brand icons. Record the icon package and ISC license in ASSETS.md.
- font: Install @fontsource/fraunces (OFL-1.1) and self-host the 600 and 700 woff2 files through the package imports in src/fonts.ts. Use for display text only. Record package, font family, author credit from package metadata, and OFL license in ASSETS.md; never load Google Fonts or another font CDN.
- font: Install @fontsource/public-sans (OFL-1.1) and self-host the 400, 500, 600, and 700 woff2 files through package imports in src/fonts.ts. Use for body and interface text. Record package, font family, author credit from package metadata, and OFL license in ASSETS.md; never load Google Fonts or another font CDN.

## Don'ts
- Do not use real insurer, carrier, agency, or review-platform names, logos, product names, slogans, mascots, branded palettes, license numbers, or carrier comparisons. [BRAND] and every dependent detail must remain invented.
- Do not copy any website's code, exact copy, photography, signature illustrations, unique iconography, or restricted component source. Use only the specified permissively licensed packages and original implementation.
- Do not use real people's likenesses, identities, testimonials, or credentials. Keep the six supplied fictional photographs and label agent profiles and reviews as demo content; do not replace portraits with stock photos or initials.
- Do not show premium estimates, eligibility decisions, savings figures, guaranteed acceptance, guaranteed coverage, claim outcomes, fake ratings, review counts, verified badges, live indicators, or application numbers.
- The quote summary is not an insurance quote and does not bind coverage. Never show 'request sent', 'application submitted', or an equivalent success claim; completion must explicitly say nothing was stored or sent.
- No backend, server code, API routes, databases, authentication, analytics, third-party APIs, form submissions, claim uploads, or external tracking. Keep quote answers in memory only, request no sensitive personal details, and never persist them in localStorage.
- Do not add real contact details or functional submission endpoints. Keep the reserved .example email and fictional 555 phone number; production connection instructions remain explanatory text only.
- Use exactly Vite 5, React 18, TypeScript, Tailwind CSS 3.4, Motion, Lucide, and the two specified Fontsource packages. Do not add component libraries, icon packs, restricted UI source, or dependencies without an allowed license.
- All fonts, images, icons, scripts, and styles must be local. No CDN links, Google Fonts, fonts.gstatic.com, hotlinked images, placeholder-image services, stock-photo sites, or externally hosted assets in the built site.
- Keep the six exact supplied image paths and alt text, download them before building, and list every image, icon package, and font package with source and license in ASSETS.md. No extra photographs or generated people.
- Keep all visible copy, labels, validation, sample data, alt text, and print output in US English and centralized in src/content.ts. Rewrite brand-dependent and audience-dependent content when variables change; do not hard-code Morrow & Vale or its handle in logic.
- Use real ./index.html, ./quote.html, and ./claims.html links, never bare directories or a router-only deployment. quote.html without a query must default to Home and remain fully usable; invalid type or agent values must not create an empty state.
- No publication dates, copyright years, countdowns, scarcity messages, SEO metadata, Open Graph tags, JSON-LD, sitemaps, or keyword-stuffed headings. A variable-aware plain title and local favicon are sufficient.
- Do not hide essential copy behind hover, motion, tabs without keyboard support, or animation libraries. Provide labels, visible focus, error summaries, aria-live feedback, semantic tabs and accordions, and complete keyboard operation.
- Respect prefers-reduced-motion and avoid scroll hijacking, parallax, autoplay carousels, flashing emergency graphics, and looping decoration. Content must remain visible if JavaScript animation observers fail.
- The production build must be minified static files in dist/ with relative paths, no source maps, no src/ copied, and total size under 20 MB. Verify index.html, quote.html, and claims.html at 1440×900 and 390×844 with zero console errors and no horizontal overflow.

---
— Prompt by VibeFather · https://vibefather.ai/t/insurance-agency-quote-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.