{"components":[{"id":"nav-001","name":"Responsive Accessible Navbar","category":"navbar","tags":["responsive","accessible","dropdown","mobile","sticky","glassmorphism"],"description":"Fully responsive navbar with hover/keyboard dropdowns, mobile slide-out menu, floating bottom bar, and complete ARIA support.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"nav-002","name":"Floating Pill Navbar","category":"navbar","tags":["floating","pill","transparent","glassmorphism","responsive","accessible"],"description":"Floating pill-shaped navbar with translucent glass effect, rounded corners, and matching elevated bottom action bar.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-001","name":"Authority Split Hero","category":"hero","tags":["split","two-column","authority","stats","trust","photo"],"description":"Classic two-column authority hero. Copy left, portrait-oriented team photo right with brand accent bar and floating credential card. Badge, serif headline, 3 trust stats, and dual CTAs. Built for established businesses where owner/team presence builds trust.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-002","name":"Guarantee Banner Hero","category":"hero","tags":["centered","guarantee","trust","promise","stars","reviews"],"description":"Centered hero where the guarantee IS the headline. Shield icon with halo, framing lines above and below the promise, supporting line, 5-star review aggregate, and dual CTAs. Built for trust-sensitive services where a concrete guarantee is the differentiator.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-003","name":"Before & After Hero","category":"hero","tags":["before-after","comparison","interactive","slider","transformation","images"],"description":"Interactive before/after comparison hero. Drag the handle horizontally to reveal the transformation, with keyboard and touch support. Vanilla Astro script — no React. Built for visual trades where the work speaks for itself.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-004","name":"Neighborhood Roots Hero","category":"hero","tags":["local","community","background-image","dark","overlay","family-owned"],"description":"Full-width banner-image hero with dark gradient overlay. Leans into local identity with a 'Since [Year]' badge, serif headline, trust row, and dual CTAs. Heavier bottom gradient and text shadows for legibility over any photo.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-005","name":"Google Review Spotlight Hero","category":"hero","tags":["review","google","testimonial","stars","trust","split","card"],"description":"Split hero with review-themed copy (badge, headline, aggregate 4.9 rating, CTAs) on the left and a Google review card on the right — authentic Google G logo, gold (#FBBC04) stars, Local Guide metadata, helpful/share footer. Stacks cleanly on mobile with the card full-width below the copy.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-006","name":"Local Map Hero","category":"hero","tags":["split","map","local","service-area","google","stars","sdk"],"description":"Split hero with trust copy on the left (headline, subtitle, 4.9 Google rating, CTAs) and a tilted live map embed on the right showing the business's service area. Counter-tilted [city] pin badge overlays the map. Loads map client-side via heysegment-sdk.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"hero-007","name":"Lead Form Hero","category":"hero","tags":["form","lead-capture","dark","split","conversion","cta"],"description":"High-conversion lead capture hero. A dark contrast panel (bg-text) sits inside the page background with breathing room around it. Left side has supporting copy (eyebrow, headline, subtitle, compact rating, phone alternative); right side is a prominent white form card with name, phone, email, service, message fields and a brand submit button. The form is the page's primary action.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"map-001","name":"Service Area with City Grid","category":"map","tags":["map","cities","service-area","grid","sdk"],"description":"Service area section with embedded map and a grid of served cities. Loads map client-side via heysegment-sdk.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"map-002","name":"Split Map with City List","category":"map","tags":["map","cities","service-area","split","side-by-side","sdk"],"description":"Side-by-side layout with map on the left and city list on the right, stacking on mobile. Loads map client-side via heysegment-sdk.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"map-003","name":"Minimal Location Map","category":"map","tags":["map","location","minimal","directions","single-area","sdk"],"description":"Clean full-width map for single-location businesses. Just the map and a directions link. Loads map client-side via heysegment-sdk.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"map-004","name":"Service Radius with Stats","category":"map","tags":["map","radius","coverage","response-time","stats","split","sdk"],"description":"Split layout focused on service radius and response speed. Map on the left with coverage legend, stats and commitments on the right. Loads map client-side via heysegment-sdk.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"map-005","name":"Minimal Map (Alternate)","category":"map","tags":["map","location","minimal","client-side","sdk"],"description":"Another minimal map variant. Loads client-side via heysegment-sdk.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"cta-001","name":"Bold CTA Banner","category":"cta","tags":["banner","bold","phone","blue"],"description":"Full-width blue call-to-action with headline, subtext, and dual buttons.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"faq-001","name":"Clean Accordion FAQ","category":"faq","tags":["accordion","collapsible","clean","contact"],"description":"Simple accordion FAQ with collapsible questions and contact action buttons below.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"footer-001","name":"Dark Footer with Columns","category":"footer","tags":["dark","columns","links","contact"],"description":"Dark four-column footer with company info, service links, and contact details.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-001","name":"Proof Ticker","category":"reviews","tags":["reviews","google","ticker","marquee","scrolling","social-proof","trust"],"description":"Tight, narrow Google review carousel. Centered heading with Google branding, 4.9 aggregate rating, and gold stars above a continuously scrolling ticker of compact review cards. Edge-to-edge gradient fades, pauses on hover, respects reduced-motion. Works as a slim trust strip between sections.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-002","name":"Bento Board","category":"reviews","tags":["reviews","google","bento","grid","stats","featured","social-proof"],"description":"Asymmetric bento grid with a Google-branded stats card (4.9 rating, gold stars, review count on brand-tint) alongside a featured long-form review and five standard review cards. 3 columns on desktop, 2 on tablet, 1 on mobile. Modern, editorial, data-rich.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-003","name":"Stacked Deck","category":"reviews","tags":["reviews","google","carousel","cards","stacked","interactive","animated"],"description":"Fanned deck of review cards with depth. Active card is front-and-center while two behind peek out at slight rotations. Arrow and dot navigation cycles through reviews with smooth slide-and-rotate transitions. Floating Google 5-Star badge in the corner. Tactile, focused, premium.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-005","name":"Review Carousel","category":"reviews","tags":["reviews","google","carousel","horizontal","scroll","snap","responsive"],"description":"Standard horizontal carousel of full-size review cards. Shows 1 card on mobile, 2 on tablet, 3 on desktop. Scroll-snap for touch swiping, prev/next arrows for navigation. Clean, familiar, versatile.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-009","name":"Wall of Love","category":"reviews","tags":["reviews","google","masonry","wall","dense","volume","social-proof"],"description":"Dense Pinterest-style masonry wall of review cards with natural height variation. CSS columns for true masonry flow, 4 columns on desktop down to 1 on mobile. Show-more button on smaller screens. Abundant, overwhelming social proof.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-010","name":"Review Toast","category":"reviews","tags":["reviews","google","toast","popup","notification","slide-in","social-proof","ambient"],"description":"Social proof toast notification that slides in from the corner and cycles through reviews. Compact card with avatar, name, stars, and excerpt. Configurable left/right position. Auto-cycles every 6s, pauses on hover, dismissible. Includes 'View all reviews on Google' link.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"reviews-011","name":"Editorial Wall","category":"reviews","tags":["reviews","google","masonry","editorial","uncarded","typography","minimal"],"description":"Uncarded masonry of Google reviews in a magazine-style spread. Two-up header pairs a section heading with an authentic Google-branded rating summary (multicolor G, gold stars, review count). Reviews flow through CSS columns (1/2/3 responsive) anchored only by hairline top dividers — no surface fill, no border box, no shadow. Relies on typography and whitespace for structure, keeping focus on the quotes themselves. Attribution is plain '— Name' with no per-review Google tag.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-001","name":"Wave Divider","category":"section-transitions","tags":["transition","divider","wave","curve","light-to-dark","svg"],"description":"Smooth S-curve SVG wave transitioning from a light content section into a dark CTA section. The wave is filled with the dark section's color and sits at the bottom of the light section, creating a seamless organic break. Fully theme-driven.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-002","name":"Diagonal Slash","category":"section-transitions","tags":["transition","divider","diagonal","angle","clip-path","bold"],"description":"Hard diagonal cut via CSS clip-path. Light section angles into a brand-colored CTA. Bold, modern, energetic.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-003","name":"Layered Peaks","category":"section-transitions","tags":["transition","divider","peaks","mountains","layered","depth","svg"],"description":"Two or three overlapping mountain-peak SVG shapes at staggered brand opacities, creating parallax-like depth into a dark section. Crafted and premium.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-004","name":"Torn Paper","category":"section-transitions","tags":["transition","divider","torn","paper","handcrafted","organic","svg"],"description":"Irregular jagged SVG edge mimicking torn paper with a subtle drop shadow. Light to off-white transition. Handcrafted and artisanal.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-005","name":"Gradient Melt","category":"section-transitions","tags":["transition","divider","gradient","fade","seamless","elegant"],"description":"No hard edge — a tall gradient zone dissolves one section into the next with a centered decorative rule. Seamless, elegant, understated.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-006","name":"Chevron Point","category":"section-transitions","tags":["transition","divider","chevron","arrow","directional","geometric","svg"],"description":"Wide downward-pointing V-shape SVG directing the eye from a light section into a brand-tint section. Directional and structured.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-007","name":"Stacked Curves","category":"section-transitions","tags":["transition","divider","curves","arc","gap","breathing-room","svg"],"description":"Two opposing convex arcs with a visible page-background gap between them. Sections pull apart for an airy, spacious feel.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-008","name":"Slant with Inset","category":"section-transitions","tags":["transition","divider","slant","ribbon","inset","content","clip-path"],"description":"Angled clip-path edges framing a brand-tint content ribbon with a stat or tagline. The transition itself carries a message. Editorial and intentional.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]},{"id":"transition-010","name":"Brand Stripe","category":"section-transitions","tags":["transition","divider","stripe","band","brand","simple","minimal"],"description":"Clean full-width band of brand color with subtle decorative dots between a light and dark section. Confident, branded, structural. The 'less is more' option.","requiresWorkspaceId":false,"additionalInstructions":null,"actions":[]}]}