Create a luxurious, high-converting website from scratch for Sunset Coffee Company (local coffee shop in Sandy, UT). The site must communicate warm, community-focused hospitality, scenic mountain/patio vibes, and convert visitors into in-store guests, online orders, and loyalty/newsletter signups.
Business facts (use these)
Name: Sunset Coffee Company
Location: Sandy, UT (High Point Center) — scenic mountain views, patio
Hours: open late (example: closes 12 AM)
Price: $1–10 per person
Phone: +1 801-233-9151
Attributes: relaxed hangout, free Wi‑Fi, patio, scenic sunset/valley views, LGBTQ+ friendly
Popular items: Cold Brew, Cappuccino, Café Au Lait, Mary Monroe drink (regular & frozen), Cookies & Cream, Lemon Roll, Cortado, Sweet Tea, Cider, Gift Basket
Tone from reviews: friendly, community-oriented, kind staff, trendy/cool, great atmosphere, highly recommended
Target customers & conversion goals (assume)
Local residents and visitors, 18–45, coffee lovers, remote workers, social groups
Primary conversions: visit in-person (map/directions), place takeaway/order online, join loyalty/newsletter, book patio events or buy gift baskets
Deliverables
Full brand direction (logo suggestions, color palette, typography, imagery style, iconography, moodboard)
Complete sitemap and content plan
High-fidelity responsive UI mockups (desktop, tablet, mobile) + Figma-ready assets
Production-ready HTML/CSS (clean, semantic, accessible) + brief JS for interactions; components as reusable snippets
CMS-ready templates (recommend Webflow or similar) with content placeholders
SEO/meta tag plan for homepage, menu, about, contact, and gift basket pages
CRO elements (CTA copy, banner, modal flows, urgency/timers, social proof components, review snippets)
Accessibility, performance, and analytics checklist
Design & brand direction (explicit)
Vibe: luxurious-warm + relaxed neighborhood hangout. Think refined rustic: matte bronze accents, deep sunset gradient (warm orange → rose → deep plum), cream neutrals, tactile textures (linen, wood), soft shadows.
Palette: primary (Sunset Gradient), secondary (warm cream, deep plum), accent (matte bronze, sage green). Provide HEXs.
Typography: elegant display (serif or modern serif) for headings + highly readable sans for body. Include example fonts (Google Fonts).
Imagery: large hero with sunset/patio valley view at golden hour, candid shots of friendly staff and smiling customers, close-ups of signature drinks and pastries, overhead menu flatlays. Photo mood: warm, shallow depth of field, bokeh highlights, premium retouch.
UI elements: glassmorphism cards with soft borders, rounded buttons with bronze gradient, subtle micro-animations on hover, sticky CTA bar for ordering/phone directions.
Pages & priority content (structure)
Homepage (hero, 3‑line value props, CTA: Order / Visit / Menu, social proof bar with aggregated rating 4.6/5 + short review quote, featured drinks carousel, loyalty signup block, footer with hours & map)
Hero example headline: "Sunset views. Expert coffee. Your new favorite neighborhood hangout."
Subhead: "Scenic patio. Thoughtful service. Drinks & pastries crafted for moments that matter."
Menu (filterable by hot, cold, pastries, signature drinks, seasonal; prominent online-order buttons; downloadable PDF)
About (story, mission: community + hospitality, staff highlights, LGBTQ+ friendly statement, photo of patio at sunset)
Locations & Hours (interactive map, large CTA: Get directions, phone call link, parking info)
Order/Preorder (integrate or mock Webflow/Shopify/Toast/Chownow flow; mobile-first checkout)
Gift Baskets & Merch (product pages with high-res photos, add-to-cart, local delivery/pickup options)
Events & Catering (patio bookings, private events form)
Gallery / Instagram feed
Contact & Careers (contact form, hire form with perks)
Blog / News (seasonal drinks, community stories)
Copy & tone guidance (examples)
Main CTA: "Order Online" / "Visit Our Patio"
Microcopy: “Open late — perfect for after-work catchups.”; “We’re LGBTQ+ friendly — everyone’s welcome.”; Button: “See today’s menu”
Review snippet examples to surface: “The staff is super friendly — makes you feel welcome.”; “They gave me a drink on the house when I needed it. Incredible kindness.”
Conversion components (specs)
Persistent top bar: hours + CTA "Order" + phone tap
Sticky bottom CTA on mobile: "Order • Directions • Call"
Homepage social-proof module: aggregated rating + 2 rotating 5‑star review highlights (pull from provided reviews)
Loyalty modal: 10% off first signup; email + phone (SMS opt‑in)
Exit-intent overlay: offer limited-time discount for pickup orders
Urgency: show live busy indicator (“Not too busy / moderate / busy”) mock based on popular times
Event booking form with calendar, deposit option
Technical & SEO
Fast-loading: optimized images (AVIF/WebP), lazy-load gallery, critical CSS inline
Accessibility: semantic HTML, keyboard nav, alt text for all images, color contrast checks
Schema.org: LocalBusiness, Menu, Product (gift baskets), AggregateRating with 4.6 stars
Meta: recommended title/meta description examples for key pages
Analytics: setup GTM, GA4, conversion events (order, signup, click-to-call, directions)
Assets & Handoff
Provide Figma file + exported PNG/JPEG/WebP images + SVG icons + CSS variables + HTML templates
Include README with deployment steps (Webflow/Netlify), third-party integrations (ordering provider, Mailchimp), and estimated timelines (design 1 week, dev 2 weeks)
Constraints & assumptions
Local pickup & in-store focus; no large e-commerce catalog
Budget-conscious but premium finish; prioritize mobile UX
Use colors, photos, and microcopy that reinforce warmth and human hospitality
Execution instructions for Claude
Produce: (A) a one-page creative brief with brand palette, fonts, hero copy, and three sample hero images descriptions; (B) structured sitemap with page-by-page content outlines; (C) exact HTML/CSS for a responsive homepage + menu page (clean, tested, accessible) ready to paste into Webflow or static host; (D) Figma-ready spec (JSON-style frame descriptions) and export-ready asset list; (E) SEO meta tags and JSON-LD schema for LocalBusiness and Menu.
Prioritize responsive mobile-first code and fast performance. Show live examples of copy in context.
Output clearly labeled sections so a developer/designer can implement directly.
Use the review excerpts and attributes above to shape copy and social proof throughout. Deliver code and design that feel luxurious yet warm, and maximize conversions for visits, orders, and loyalty signups.
If you want, start by producing the one-page creative brief, then the responsive homepage HTML/CSS.
Would you like the brief now or the full homepage code first?