# LUMATICK WEBSITE V1 — PRODUCTION SPECIFICATION

> **Status:** Definitive implementation-ready spec for LumaTick Website V1.
> Authored 2026-06-20 from a full read of the launch canon. **Source of truth:**
> [LUMATICK_LAUNCH_MASTER_PLAN.md](../LUMATICK_LAUNCH_MASTER_PLAN.md). Extends —
> does not replace — [LUMATICK_WEBSITE_ARCHITECTURE.md](../LUMATICK_WEBSITE_ARCHITECTURE.md).
>
> **Governing decisions (do not violate):**
> - **Two houses, one domain.** House 2 = **LumaTick Business** (`/business/*`,
>   PRIMARY revenue, subscription). House 1 = **Consumer Apps** (`/apps/*`,
>   SECONDARY acquisition funnel, one-time "Own It Forever"). Never show
>   subscription pricing on a Consumer URL or ownership pricing on a Business URL.
> - **Pricing locked:** Free forever review loop · 14-day branding trial ·
>   **$14/mo or $129/yr per location.**
> - **Compliant feedback-first model.** Every customer may leave a public review;
>   private feedback is an *additional* channel, **never a sentiment gate**. No
>   review-gating language anywhere.
> - **Remote acquisition (LVA-1).** Self-activation + self-scan must be foolproof;
>   founder has < 5 hrs/week. The site is the activation engine, not a brochure.
> - **Public product name is `Focus`** (never "Timer").
> - **No invented proof.** Customer counts, venue counts, review counts, and
>   testimonials are **placeholders** (`[[PLACEHOLDER: …]]`) until a real reference
>   venue exists.

---

## TABLE OF CONTENTS
- D1 — Complete Website Copy (every page)
- D2 — Homepage Design (section-by-section)
- D3 — Business Page Design
- D4 — Pricing Page
- D5 — Visual Design System
- D6 — SVG Illustration Specifications
- D7 — AI Image Generation Pack (40+ prompts)
- D8 — Website Screen Mockups (desktop + mobile)
- D9 — Interactive Demo
- D10 — Screenshot Master Plan
- D11 — SEO System (+ 100 blog ideas)
- D12 — Framer Motion System
- D13 — Next.js Architecture
- D14 — Brand Assets
- D15 — Conversion Audit

---

## SITEMAP (V1 — canonical superset)

```
lumatick.com  (BRAND HOME — fast fork, Business-biased)
│
├── /                              brand home: mission + two doors (Business primary)
│
├── HOUSE 2 — LUMATICK BUSINESS  ★ PRIMARY REVENUE
│   ├── /business                  SaaS home
│   ├── /business/reviews          Smart QR + Review path
│   ├── /business/feedback         Private "help us improve" capture
│   ├── /business/insights         local analytics / mood
│   ├── /business/pricing          SUBSCRIPTION framing (per location)
│   ├── /business/demo             interactive compliant demo (Deliverable 9)
│   ├── /business/how-it-works     5-minute self-setup story
│   ├── /business/industries/[type] programmatic SEO (cafes, restaurants, bars, salons…)
│   └── /business/signup           account-first (→ app handoff)
│
├── HOUSE 1 — CONSUMER APPS  (secondary acquisition funnel)
│   ├── /apps                      ecosystem overview ("the orbit")
│   ├── /apps/markets              flagship
│   ├── /apps/focus
│   ├── /apps/signage              ALSO surfaced inside House 2 (the bridge)
│   ├── /apps/social
│   ├── /pricing                   ONE-TIME framing ("Own It Forever")
│   └── /download                  device-detect store handoff
│
└── SHARED
    ├── /blog                      two clusters (Reviews-priority + consumer)
    ├── /about · /contact
    └── /privacy · /terms
```

---
---

# DELIVERABLE 1 — COMPLETE WEBSITE COPY

> Voice: founder-to-owner, plain, honest, outcome-led. No hype, no fake urgency.
> Every Business CTA = **Start free**; every Consumer CTA = **Download**.
> Reading level ≈ grade 7. British/Australian spelling where natural ("favourite",
> but "5-star").

## 1.1 — `/` Brand Home

**SEO title:** `LumaTick — More reviews for your business. Beautiful displays for everywhere else.`
**Meta description:** `Turn a spare phone into a Google-review engine for your café or bar — and stunning ambient displays you own forever. Free to start.`

- **Eyebrow:** LUMATICK
- **H1:** Every screen, beautiful and useful.
- **Sub:** A review engine for your business — and premium ambient displays for everywhere else.
- **Primary CTA:** For my business →   (→ `/business`)
- **Secondary CTA:** Explore the apps   (→ `/apps`)
- **Business teaser H2:** Turn a spare tablet into a feedback and review engine.
  - Body: Every customer can review you publicly. Private feedback shows you what to improve — so a bad day becomes a fix, not a 1-star surprise. CTA: See how it works →
- **Consumer teaser H2:** Got a spare screen at home? Make it stunning.
  - Body: Markets, Focus, Social, Signage — turn any phone, tablet or TV into a glanceable display. Own them forever, no subscriptions. CTA: Explore the apps →
- **Category line:** Apps that turn any phone, tablet or TV into a glanceable display.
- **Trust strip:** Built premium · OLED-safe · No account needed to start · `[[PLACEHOLDER: venue logos / star rating once a reference venue exists]]`

## 1.2 — `/business` Business Home (PRIMARY)

**SEO title:** `LumaTick Business — Grow your Google reviews from your counter`
**Meta description:** `A counter display that makes leaving a 5-star Google review effortless and captures private feedback so you can fix what matters. Free to start, $14/mo to brand it.`

- **Eyebrow:** LUMATICK BUSINESS
- **H1:** More reviews. Happier customers. From one spare tablet.
- **Sub:** LumaTick Business sits on your counter, makes leaving a 5-star review effortless, and captures private feedback so you can fix what matters.
- **Primary CTA:** Start free — no card, no hardware
- **Secondary CTA:** See how it works ↓
- **Sub-note:** Free forever review engine · Works on any spare phone or tablet · Live in 5 minutes
- **Problem H2:** Your happy customers rarely leave a review.
  - Body: You live and die by your Google rating — but the happy customers rarely leave a review, and the small problems never reach you in person. A QR sticker on its own only catches the keen few — and tells you nothing about what to fix.
- **Solution H2:** A feedback & review engine on a spare phone.
  - Body: At the counter, every customer can leave a public review in one tap — and anyone can also share private feedback that comes straight to you. You make praise easy to post and turn honest feedback into better service, which earns more 5-stars.
  - 3 cards:
    - **More 5-star reviews** — Leaving a Google review becomes a 10-second scan at the counter.
    - **Catch problems early** — Private feedback reaches you first, so you fix issues before they become a 1-star review.
    - **Know how customers feel** — Insights show your mood trend, busiest times, and top complaint reasons.
- **How it works H2:** Five minutes from drawer to counter.
  1. **Deploy free** — Stand a spare phone on your counter. 5-minute setup.
  2. **Customers tap a face** — After they're served, they rate their visit.
  3. **Everyone can review** — Any customer can scan straight to your Google review page.
  4. **Private feedback too** — Less-happy customers can tell you privately what went wrong.
  5. **You learn** — Insights show your mood trend, busy times, and top complaints.
- **Reviews surface H2:** Smart QR turns every table into a review prompt. (CTA → `/business/reviews`)
- **Feedback surface H2:** Private feedback shows you what to fix — better service earns better reviews. (CTA → `/business/feedback`)
- **Insights H2:** See your customer mood, by day and hour. (CTA → `/business/insights`)
- **ROI / pricing teaser H2:** One extra 5-star review pays for the month. (CTA → `/business/pricing`)
  - Body: $14/month per location, or $129/year (~2 months free). Less than one coffee a day. Cancel anytime.
- **Social proof H2:** `[[PLACEHOLDER: "[Local venue] gained 40 new Google reviews in a month." — fill once a reference venue exists]]`
- **FAQ H2:** Questions, answered. (full set in §1.5)
- **Final CTA H2:** Start growing your reviews today.
  - Body: Free to deploy. Live in 5 minutes. Your first new 5-star could be this afternoon. Button: Get LumaTick Business — Free

## 1.3 — `/business/reviews`

**SEO title:** `QR code review stand for cafés — make Google reviews effortless | LumaTick`
**Meta description:** `Smart QR turns every counter and table into a one-scan path to your Google review page. Google, TripAdvisor, WiFi, Instagram templates. Free to start.`

- **H1:** Make leaving a review effortless.
- **Sub:** Smart QR turns every counter and table into a one-scan prompt to your Google review page — no app, no sign-up, about 20 seconds for the customer.
- **Block 1 — Smart QR templates:** One display, every prompt you need. Google Review, TripAdvisor, Website, WiFi, Instagram, Facebook, or a Custom link — switch in a tap. Hides any platform you haven't set up, so there are never dead ends.
- **Block 2 — Rotating campaigns:** Keep it fresh on its own. Rotate review prompts, WiFi codes and offers automatically. Touch to pause, swipe to skip — it resumes itself after 20 seconds.
- **Block 3 — Printable counter assets:** Reach the tables too. Export an A4 poster, counter card, or table tent from the same design, so customers self-scan even when staff are slammed.
- **Compliance line:** Every customer can leave a public review. We just make praise effortless to post.
- **CTA:** Start free →

## 1.4 — `/business/feedback`

**SEO title:** `Private customer feedback app for venues — fix problems before they go public | LumaTick`
**Meta description:** `Customers tap a face. Happy ones go to your Google page; anyone can also send private feedback so you fix what matters. Compliant, no review gating.`

- **H1:** Hear what to improve — privately.
- **Sub:** After every visit, a customer taps a face. Everyone can leave a public review — and anyone can also tell you privately what went wrong, so you fix it before it becomes a 1-star.
- **Block 1 — The two paths:** Review Gateway makes a 5-star effortless. The Improvement Survey captures honest detail — Quality, Service, Wait Time, Cleanliness, Pricing, Availability — with an optional note. No scoring, no dead ends.
- **Block 2 — Why it's compliant:** No review gating. Ever. We never hide the public review option from anyone. Private feedback is an *extra* channel, not a filter — which keeps you on the right side of Google's and the app stores' rules.
- **Block 3 — Turn feedback into reviews:** Fix the small things customers tell you privately, and the public 5-stars follow. That's the whole loop: better service, more reviews, more customers.
- **CTA:** Start free →

## 1.5 — `/business/insights`

**SEO title:** `Customer feedback insights for small business — mood, busy times, top complaints | LumaTick`
**Meta description:** `See your customer mood by day and hour, your busiest times, and the top reasons people aren't happy — all on the device, nothing to log into.`

- **H1:** See exactly how customers feel.
- **Sub:** Business Insights turns every tap into a picture of your week — mood trend, busiest times, and the top reasons people aren't happy. All on the device. No cloud, no login.
- **Block 1 — Mood this week:** Watch sentiment rise and dip day by day, so you can connect a rough Tuesday to what actually happened.
- **Block 2 — Busiest times:** Time-of-day analysis shows when your room is happiest and where it strains — staff to it.
- **Block 3 — Top complaints:** The reasons behind the dips, ranked — so you fix the one thing moving your rating most.
- **CTA:** Start free →

## 1.6 — `/business/pricing` (full copy in Deliverable 4)

## 1.7 — `/business/how-it-works`

**SEO title:** `Set up a counter review display in 5 minutes | LumaTick Business`
**Meta description:** `Paste your Google review link, add your logo, stand a spare phone on the counter, lock it in kiosk mode. Live in under 5 minutes. Watch the 90-second setup.`

- **H1:** Live in under 5 minutes.
- **Sub:** No technician, no new hardware. If you can paste a link, you can set this up tonight.
- **90-sec video block:** `[[PLACEHOLDER: 90-second self-setup video — required Week 1, LVA-1]]`
- **Steps:**
  1. **Find your Google review link** — Google Maps → your listing → "Ask for reviews". Paste it in.
  2. **Add your details** — Name, location and logo. (Your logo starts your free 14-day branding trial.)
  3. **Stand it on the counter** — Any spare phone or tablet, plugged in, screen on.
  4. **Lock it** — Operator Mode: a 5-second press-and-hold so customers can't tamper.
  5. **Print a table tent** — So customers self-scan even when staff forget.
- **Train staff in one line (callout):** *"If you've got a sec, tap a face on the screen for us — it really helps."* Say it after payment. That single habit is most of the value.
- **CTA:** Start free → · Secondary: Book a 5-minute setup call (`[[PLACEHOLDER: Cal.com link]]`)

## 1.8 — `/business/industries/[type]` (programmatic template)

Template fields per `[type]` (cafes, restaurants, bars, salons, barbers, hotels, gyms, tourism):

- **H1:** More Google reviews for your `{TypePlural}`. From one spare phone.
- **Sub:** LumaTick Business helps independent `{typePlural}` grow public reviews and capture private feedback — at the counter, in about 20 seconds per customer.
- **Why `{typePlural}` block:** `{type}`-specific pain (e.g. cafés: "the morning rush is when happy regulars leave without a word"). 3 bullets reusing the core value, framed in their words.
- **Setup line:** Built for a `{type}` counter — kiosk-locked, always on, no staff training beyond one sentence.
- **FAQ:** reuse the global FAQ + 1 `{type}`-specific Q.
- **CTA:** Start free →
- **Schema:** `SoftwareApplication` + `FAQPage` + `BreadcrumbList`; `LocalBusiness`-aware copy.

## 1.9 — `/apps` Consumer Ecosystem Home (SECONDARY)

**SEO title:** `LumaTick — ambient display apps you own forever`
**Meta description:** `Turn any phone, tablet or TV into a stunning ambient display. Markets, Focus, Social, Signage. Buy once, own it forever. No subscriptions.`

- **H1:** Turn any screen into a stunning ambient display.
- **Sub:** Markets, Focus, Social, Signage — beautiful, glanceable, always-on. Own them forever. No subscriptions, ever.
- **CTA:** Explore the apps (jump to orbit) · Download
- **Ownership pitch H2:** Buy once. Own it forever. We don't do monthly. Pay once and it's yours — across reinstalls and new devices, restored with a tap.
- **Per-app teasers:** Markets (flagship), Focus, Signage, Social — each one line + Download.
- **FAQ + Download.**

## 1.10 — `/apps/markets`, `/apps/focus`, `/apps/signage`, `/apps/social` (per-product template)

Reused template: `Hero (outcome + device) → 3 feature blocks (alternating screenshots) → "who it's for" → mini-FAQ → Download`.

- **Markets** — H1: Your markets, always on your desk. Sub: Live tickers and OLED market boards for any spare screen. Own it forever.
- **Focus** — H1: A focus display you'll actually keep on. Sub: Pomodoro, countdowns and ambient focus scenes for any screen. (Never "Timer".) Own it forever.
- **Signage** — H1: Turn a spare screen into signage. Sub: OLED and LED signs, clocks and split displays for your space. *Bridge block:* "Running a venue? See LumaTick Business →" (`/business`).
- **Social** — H1: A stream-ready scoreboard for creators. Sub: Live subscriber and momentum displays for your second screen. Own it forever.

## 1.11 — `/blog`

- **H1:** The LumaTick journal.
- **Sub:** Practical guides on growing reviews, repurposing spare screens, and building a small product in public.
- Two clusters surfaced: **Reviews** (priority) and **Ambient displays**. (100 ideas in Deliverable 11.)

## 1.12 — `/about`

- **H1:** A small tool, built in the open.
- Body: LumaTick is a solo-founder product. We turn the spare phone in your drawer into something useful — a review engine for businesses, beautiful displays for everyone else. We build in public, price honestly, and keep the core free. `[[PLACEHOLDER: founder name + photo]]`
- Values: Honest pricing. No dark patterns. The free wedge stays free. OLED-safe by design.

## 1.13 — `/contact`

- **H1:** Talk to a human.
- Body: Questions, setup help, or a partnership idea? Email `[[PLACEHOLDER: hello@lumatick.com]]` or book a 5-minute call. Founder-answered, usually within a day.
- Form: Name · Email · I'm a (Business owner / App user / Partner) · Message · Send.

## 1.14 — `/privacy`

- **H1:** Privacy policy.
- Plain-English summary first: Customer feedback is stored **on the device**, not sold or shared. No customer account is required to leave a review. The app needs only what it needs to run. `[[PLACEHOLDER: full legal policy — counsel to confirm; align with store Data-Safety / App-Privacy answers in STORE_LISTINGS.md]]`

## 1.15 — `/terms`

- **H1:** Terms of service.
- Plain-English summary: Free review loop free forever. Business plan billed $14/mo or $129/yr per location, cancel anytime, no lock-in. Your data stays yours. `[[PLACEHOLDER: full legal terms — counsel to confirm]]`

## 1.16 — Global FAQ (FAQPage schema; reused on `/business` and industry pages)

- **Does it cost my customers anything?** No — no app, no sign-up. They scan and review in about 20 seconds.
- **Do I need new hardware?** No. Any spare phone or tablet works.
- **Can every customer leave a public review?** Yes. Anyone can leave a public Google review in one tap. We also offer a private feedback option so you hear specifics you can act on.
- **Is the free version really free?** Yes — the review engine stays free forever. You only pay to add your logo and remove our watermark.
- **How long to set up?** Under 5 minutes — paste your Google review link, add your logo, stand it on the counter.
- **Can I cancel?** Anytime. Your data and the free review engine stay.
- **What about privacy?** Feedback lives on the device; nothing is sold or shared. Customers only ever touch their own review.

## 1.17 — Footer copy (four columns)

1. **Business** — Reviews · Feedback · Insights · Pricing · How it works · Industries · Start free
2. **Apps** — Markets · Focus · Signage · Social · Pricing · Download
3. **Company** — About · Blog · Contact
4. **Legal** — Privacy · Terms · App Store badge · Google Play badge
- **Tagline:** Every screen, beautiful and useful.
- **Legal line:** © `{year}` LumaTick. For cafés, restaurants, bars, salons, barbers, and local businesses.

---
---

# DELIVERABLE 2 — HOMEPAGE DESIGN (`/`)

> Job: route a visitor to the correct house in < 5 seconds, **biased toward
> Business**, without alienating the consumer. Desktop split ≈ 58/42 (Business
> larger). Mobile: two stacked buttons, **Business on top**.

### Section 1 — Hero + Fork
- **Purpose:** Identify the visitor and split them.
- **Copy:** H1 "Every screen, beautiful and useful." Sub as §1.1. Primary "For my business →", secondary "Explore the apps".
- **Layout:** Desktop split canvas. Right (larger, 58%) = café counter tablet showing a QR review screen. Left (42%) = market/focus wall. Sticky dark nav above.
- **Visual direction:** Near-black `#070707` canvas, single warm accent `#FF6A3D`, restrained. Device mockups float with subtle inner-glow `SurfaceCard` language.
- **Motion:** Business side — phone taps QR → ★★★★★ card slides up → resets (~4s loop, 500ms transitions). Consumer side — surface crossfade Markets→Focus→Social every 3.5s. `prefers-reduced-motion`: static poster.
- **Conversion goal:** Click "For my business →".
- **CTA:** Primary → `/business`; secondary → `/apps`.

### Section 2 — Problem
- **Purpose:** Create tension for the revenue buyer.
- **Copy:** "Your happy customers rarely leave a review." + the problem paragraph.
- **Layout:** Centered single column, max 760px, quiet.
- **Visual:** Faded stat motif (e.g. "9 in 10 happy customers say nothing" `[[PLACEHOLDER: cite or soften to "most"]]`).
- **Motion:** fadeRise on scroll-in.
- **Conversion goal:** Self-identification ("that's me").
- **CTA:** none (keep moving down).

### Section 3 — Solution
- **Purpose:** Resolve the tension with the product.
- **Copy:** "A feedback & review engine on a spare phone." + 3 cards.
- **Layout:** Headline + 3-up card grid.
- **Visual:** Three `SurfaceCard`s, each one accent icon.
- **Motion:** staggerChildren 0.08, each fadeRise.
- **Goal:** Comprehension.
- **CTA:** → `/business`.

### Section 4 — Review Engine
- **Purpose:** Show the core mechanic (Smart QR → review).
- **Copy:** "Smart QR turns every table into a review prompt."
- **Layout:** Left copy / right device showing the QR loop (desktop); stacked mobile.
- **Visual:** Smart QR templates fan (Deliverable 6 #3).
- **Motion:** QR fan slides into place once on scroll-in.
- **Goal:** Click through to `/business/reviews`.
- **CTA:** See it live → `/business/demo`.

### Section 5 — Benefits
- **Purpose:** Stack the outcomes.
- **Copy:** More 5-stars · Catch problems early · Know how customers feel · Your brand on the counter.
- **Layout:** 2×2 benefit grid with thin icons.
- **Motion:** stagger.
- **Goal:** Build conviction.
- **CTA:** none.

### Section 6 — Product walkthrough
- **Purpose:** De-risk setup (the activation wall).
- **Copy:** The 5-step "Five minutes from drawer to counter."
- **Layout:** Vertical numbered rail (desktop wide, mobile vertical swipe).
- **Visual:** 90-sec video poster + step thumbnails.
- **Motion:** active step highlights on scroll.
- **Goal:** "I could do this."
- **CTA:** Watch the 90-second setup → `/business/how-it-works`.

### Section 7 — Screenshots
- **Purpose:** Proof the product is real and premium.
- **Copy:** captions from MAP-1 hero screenshots 1–4.
- **Layout:** horizontal device carousel (swipe on mobile).
- **Visual:** the 8 hero screenshots (Deliverable 10), dark frames.
- **Motion:** snap-scroll.
- **Goal:** Credibility.
- **CTA:** none.

### Section 8 — Insights
- **Purpose:** Show the durable (retention) value beyond reviews.
- **Copy:** "See exactly how customers feel."
- **Layout:** copy left / Insights dashboard mock right.
- **Visual:** mood sparkline board (Deliverable 6 #6).
- **Motion:** bars grow in on scroll.
- **Goal:** Click → `/business/insights`.
- **CTA:** Explore Insights →.

### Section 9 — Pricing teaser
- **Purpose:** Justify the /mo before they reach the pricing page.
- **Copy:** "One extra 5-star review pays for the month." $14/mo or $129/yr.
- **Layout:** single per-location price card, centered.
- **Visual:** highlighted plan card (accent border).
- **Motion:** cardHover.
- **Goal:** Click → `/business/pricing`.
- **CTA:** See pricing →.

### Section 10 — FAQ
- **Purpose:** Remove objections.
- **Copy:** Global FAQ (§1.16).
- **Layout:** accordion, max 820px.
- **Motion:** native details expand; respect reduced-motion.
- **Goal:** Resolve last doubts. (FAQPage schema.)
- **CTA:** none.

### Section 11 — Final CTA
- **Purpose:** Convert.
- **Copy:** "Start growing your reviews today." + sub.
- **Layout:** full-width dark band, single button.
- **Visual:** accent band, subtle glow (OLED-safe, no static bright block).
- **Motion:** ctaBar reveal.
- **Goal:** Start free.
- **CTA:** Get LumaTick Business — Free → `/business/signup`.

---
---

# DELIVERABLE 3 — BUSINESS PAGE DESIGN (`/business`)

Full section spec (copy in §1.2). Primary CTA everywhere = **Start free**. Single
accent = business teal-or-amber accent per design system; `#FF6A3D` primary.

| # | Section | Goal | Layout | Visual direction | Motion | CTA |
|---|---------|------|--------|------------------|--------|-----|
| 1 | Hero | Sell the outcome | Centered hero, counter-tablet mockup | Tablet on counter, QR→review loop | reviewLoop (4s) | **Start free — no card** |
| 2 | Problem | Tension | Single column 760px | quiet stat motif | fadeRise | — |
| 3 | How it works | De-risk | 3-then-5 step strip | animated step strip | scroll-stagger | See it live → /business/demo |
| 4 | Smart QR / Reviews | Depth | copy + templates fan | Smart QR fan | fan slide-in | → /business/reviews |
| 5 | Feedback | Differentiator | split: Gateway vs Survey | two-card split | crossfade | → /business/feedback |
| 6 | Insights | Retention value | dashboard mock | mood bars | bars grow | → /business/insights |
| 7 | ROI / pricing teaser | Justify /mo | price card | per-location card | cardHover | → /business/pricing |
| 8 | Social proof | Trust | logos/quotes | `[[PLACEHOLDER]]` | fadeRise | — |
| 9 | Setup | Activation | 5-step + video | 90-sec poster | step highlight | → /business/how-it-works |
| 10 | Screenshots | Real & premium | device carousel | 8 hero shots | snap | — |
| 11 | FAQ | Objections | accordion (schema) | — | expand | — |
| 12 | Final CTA | Convert | dark band | accent glow | ctaBar | **Start free** |

**Smart QR sub-section detail:** show the 7 templates (Google, TripAdvisor,
Website, WiFi, Instagram, Facebook, Custom) as a fanned deck; note rotation +
interactive pause/swipe; note Print Mode (A4 / Counter Card / Table Tent).

**Feedback sub-section detail:** side-by-side **Review Gateway** (Excellent/Good →
Google/TripAdvisor QR cards) vs **Improvement Survey** (Average/Poor → reason
chips + optional note). Compliance caption mandatory: *"Everyone can review
publicly — private feedback is an extra channel, never a filter."*

**Insights sub-section detail:** Today KPIs, "Customer mood this week" bars,
time-of-day, top complaint reasons. "On the device. No cloud, no login."

---
---

# DELIVERABLE 4 — PRICING PAGE (`/business/pricing`)

**SEO title:** `LumaTick Business pricing — free forever, $14/mo or $129/yr per location`
**Meta description:** `The review engine is free forever. Add your logo and remove the watermark for $14/month or $129/year per location. 14-day branding trial. Cancel anytime.`

### H1 / Sub
- **H1:** Free to start. $14/month to make it yours.
- **Sub:** The review engine is free forever. You only pay to put *your* brand on the counter. Less than one coffee a day. Cancel anytime.

### Pricing table (two plans — V1 only; Premium/Enterprise are "coming soon", not sold)

| | **Free** | **Business** ⭐ |
|---|---|---|
| Price | **$0** forever | **$14 / month** per location · or **$129 / year** (~2 months free) |
| Review engine (Smart QR) | ✅ | ✅ |
| Customer feedback routing | ✅ | ✅ |
| Today / this-week Insights | ✅ | ✅ |
| Runs on any spare device | ✅ | ✅ |
| Kiosk Operator Mode | ✅ | ✅ |
| **Your logo on every display** | — | ✅ |
| **"Powered by LumaTick" watermark removed** | Watermark shown | ✅ Removed |
| All Smart QR templates | Google review | ✅ All 7 |
| Rotating QR campaigns | — | ✅ |
| Printable counter & poster assets | — | ✅ |
| Full feedback analytics & Insights depth | Basic | ✅ |
| Support | Community/email | ✅ Priority email |
| **CTA** | Start free | Start 14-day branding trial |

> **Coming soon (not on sale at V1):** Premium (multi-location, live review counts,
> export) ~$39/mo · Enterprise (white-label, fleet) custom. Show as a greyed
> "Coming soon" row — do **not** take payment.

### Trial explanation block
- **Heading:** Every new venue gets 14 days of full branding — free.
- Body: Add your logo and the watermark disappears for 14 days. See your brand on your counter, watch the reviews come in, then keep it for $14/month. If you don't upgrade, the review engine keeps working free — the "Powered by LumaTick" watermark just returns.

### Billing explanation block
- **Heading:** Simple, honest billing.
- Bullets: Per location — pay only for the counters you brand. · Monthly or annual — annual is ~2 months free. · Cancel anytime — no lock-in, no fees; the free engine stays. · Billed securely through the App Store / Google Play. · Your feedback data stays on your device.

### ROI block
- **Heading:** It pays for itself in one review.
- Body: $14/month is about $0.46 a day — less than a single coffee you sell. One extra 5-star review a month brings in more than that. One problem caught privately before it becomes a public 1-star protects months of reputation.

### Pricing FAQ / objection handling
- **Is the free version really free?** Yes — forever. You only pay to add your logo and remove our watermark.
- **What happens after the 14-day trial?** Nothing breaks. Reviews keep flowing; the watermark returns and your logo comes off until you upgrade.
- **Is $14 per location or per account?** Per location. Brand only the counters you want branded.
- **Can I pay yearly?** Yes — $129/year, about two months free.
- **What if I cancel?** The free review engine stays on; you just lose branding and Pro extras.
- **Do my customers pay anything?** Never. No app, no sign-up for them.
- **Is there a contract?** No. Cancel anytime in your store account.
- **Already have a review sticker?** Stickers catch the keen few and tell you nothing about what to fix. This grows reviews *and* gives you private feedback — and the engine's free to run alongside what you have.

### CTA
- Primary: Start 14-day branding trial → `/business/signup`
- Secondary: Or start with the free engine →

---
---

# DELIVERABLE 5 — VISUAL DESIGN SYSTEM

> Anchored to the **shipped** `website/business/index.html` tokens so the new site
> matches the live page and the in-app brand. Dark-first, OLED-safe, single
> accent per section.

## Typography
- **Font family:** System stack (matches shipped page + app, zero web-font cost,
  fast CWV): `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`.
  Optional brand upgrade: **Inter** (variable) self-hosted for headings only if a
  distinct voice is wanted — keep system stack as fallback.
- **Weights:** 400 body · 600 medium · 700 headings · 800–900 hero/price.
- **Scale (type ramp, fluid `clamp`):**

| Token | Size (clamp) | Use |
|---|---|---|
| `--fs-hero` | `clamp(34px, 6vw, 56px)` | H1 |
| `--fs-h2` | `clamp(24px, 3.4vw, 34px)` | section H2 |
| `--fs-h3` | `18px` | card titles |
| `--fs-lead` | `clamp(17px, 2.2vw, 21px)` | hero sub |
| `--fs-body` | `16px / 1.6` | body |
| `--fs-small` | `13–14px` | notes, captions |
| `--fs-eyebrow` | `12px` (uppercase, letter-spacing 2.5px) | eyebrows |

- **Headings:** letter-spacing −0.3 to −0.5px; line-height 1.05 (hero) → 1.2 (h3).

## Colours

### CSS variable system (canonical — `:root` = dark, default)
```css
:root{
  /* canvas + surfaces */
  --bg:        #070707;
  --panel:     #0e0e0f;
  --panel-2:   #131315;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);

  /* text */
  --text:      #f4f4f5;
  --muted:     #a1a1aa;
  --faint:     #6b6b72;

  /* brand accents (from shipped page) */
  --accent:    #FF6A3D;   /* primary warm — Business CTAs, links */
  --accent-2:  #FFC53D;   /* amber — trial/badges, secondary highlight */
  --accent-ink:#0a0a0a;   /* text on accent fills */

  /* house accents (single accent per section) */
  --biz:       #FF6A3D;   /* House 2 Business */
  --consumer:  #4DA3FF;   /* House 1 Consumer (blue = own-forever) */

  /* semantic */
  --good:      #34d399;
  --warn:      #FFC53D;
  --bad:       #f87171;

  /* radii + layout */
  --radius:    16px;
  --radius-sm: 12px;
  --radius-pill:999px;
  --max:       1200px;   /* content cap (architecture §8) */
  --max-read:  820px;    /* prose cap */

  /* elevation (OLED-safe, glow not hard shadow) */
  --glow:      0 0 0 1px var(--line) , 0 8px 40px rgba(0,0,0,.5);
  --glow-accent:0 0 0 1px rgba(255,106,61,.25) inset;
}
```

### Light mode (optional, secondary — Business buyers often browse on bright phones)
```css
[data-theme="light"]{
  --bg:#ffffff; --panel:#f7f7f8; --panel-2:#efeff1;
  --line:rgba(0,0,0,.10); --line-soft:rgba(0,0,0,.06);
  --text:#0b0b0c; --muted:#52525b; --faint:#9b9ba3;
  --accent:#E5532A; --accent-2:#D99A1A; /* slightly darkened for contrast on white */
  --consumer:#2563eb;
  --glow:0 1px 2px rgba(0,0,0,.06), 0 8px 30px rgba(0,0,0,.08);
}
```
> Accent on white must meet WCAG AA for text; use `--accent` only for large text /
> fills, body links use `#C8431F` in light mode.

## Layout
- **Containers:** `--max` 1200px content; `--max-read` 820px prose; section
  horizontal padding 22px mobile → 32px desktop.
- **Grid:** 12-col desktop (gutter 24px); auto-fit card grids
  `repeat(auto-fit, minmax(240px,1fr))`. Pricing plans `minmax(260px,1fr)`, capped 760px.
- **Section rhythm:** `padding: 64px 0` (mobile) → `96px 0` (desktop), 1px
  `--line` top border between sections; hero `84px 0 64px`, no top border.
- **Breakpoints:** `sm 480` · `md 768` · `lg 1024` · `xl 1200`. Mobile-first.

## Component system

| Component | Spec |
|---|---|
| **Button (primary)** | bg `--accent`, text `--accent-ink`, weight 800, padding `15px 26px`, radius 14px, hover `scale 1.02` (200ms ease.out), focus-visible 2px `--accent-2` ring. |
| **Button (secondary)** | transparent, 1px `--line`, text `--text`; same metrics. |
| **Button (consumer)** | identical but accent = `--consumer` (used only on `/apps/*`). |
| **Card / SurfaceCard** | bg `--panel`, 1px `--line`, radius `--radius`, padding 22px; hover lifts to `--panel-2` + accent glow layer (opacity 0→0.6). |
| **Input** | bg `--panel-2`, 1px `--line`, radius `--radius-sm`, 14px padding; focus border `--accent`; label 13px `--muted` above. |
| **Table / Feature matrix** | header row `--panel-2`, ✓ in `--accent`, — in `--faint`; highlighted column 1px `--accent` border + inset glow; sticky header on mobile horizontal scroll. |
| **Pricing block** | `.plan` card; highlighted `.plan.hi` = accent border + inset accent glow + "Best for venues" pill (`--accent-2` bg @14% alpha). Price 40px/900; `/month · per location` 14px muted. |
| **Testimonial** | quote 18px, star row `--accent-2`, venue name + type `--muted`; `[[PLACEHOLDER]]` skeleton until real. |
| **Hero section** | radial accent wash `radial-gradient(120% 90% at 50% -10%, rgba(255,106,61,.16), transparent 60%)` on `--bg`; never a flat bright block (OLED). |
| **Eyebrow** | `--accent`, 12px, weight 800, uppercase, letter-spacing 2.5px. |
| **Badge / tag** | `--accent-2` @14% bg, `--accent-2` text, 12px/800, radius 8px (e.g. "14 days free"). |
| **Accordion (FAQ)** | `.details` `--panel` card, 1px line, 12px radius; summary 700 weight, body `--muted`. |
| **Sticky nav** | dark, blur backdrop, `--line` bottom; collapses to hamburger < md. |
| **Sticky mobile CTA bar** | fixed bottom, contextual (Start free / Download), reveals after hero scrolls out. |

---
---

# DELIVERABLE 6 — SVG ILLUSTRATION SPECIFICATIONS

> All SVGs: flat, premium, single-accent, transparent bg, `role="img"` +
> `<title>`/`<desc>`, theme CSS variables (`currentColor` / `var(--accent)`),
> `viewBox`-scaled for mobile + desktop. Reuse `SurfaceCard` language (subtle
> border + inner glow). Honour `prefers-reduced-motion`.

### 6.1 Hero ecosystem graphic ("Two Houses")
- **Layout:** Split canvas. Left house = Consumer (Hub centre + 4 small app nodes), `--consumer` blue. Right house (larger) = Business (Reputation Engine: QR → ★ → 😊), `--biz` accent. Dashed vertical divider; legend bottom.
- **SVG structure:** `<g id="house-consumer">` (rounded-rect house outline + 4 nodes) · `<g id="divider">` (dashed `stroke-dasharray`) · `<g id="house-business">` (counter tablet rect + QR glyph + star + face). `viewBox="0 0 1200 600"`.
- **Colours:** consumer nodes `--consumer`; business `--accent`; lines `--line`; text `--text`/`--muted`.
- **Motion:** business side review loop pulses gently (4s); divider draws once on view.
- **Usage:** `/about`, brand-home section 4.

### 6.2 Review engine
- **Layout:** Horizontal flow: Customer 😊 → tap face → fork (↑ public ★★★★★ Google / ↓ private "help us improve") → both feed → Insights.
- **SVG:** nodes as rounded rects connected by `<path>` arrows; the fork is the focal point. `viewBox="0 0 1000 360"`.
- **Colours:** public path `--good`/`--accent`; private path `--accent-2`; arrows `--muted`.
- **Motion:** a token dot animates along each path on scroll-in (`offset-path`).
- **Usage:** `/business/reviews`, homepage section 4.

### 6.3 Customer journey
- **Layout:** 5 stops on a horizontal line: Served → Tap a face → Scan QR → Review posts → Owner sees Insights.
```
[Served]──[Tap a face]──[Scan QR]──[★ posts]──[Insights]
```
- **SVG:** circles + labels on a baseline path; current stop accent-filled.
- **Motion:** stops light up sequentially (stagger 0.12).
- **Usage:** `/business/how-it-works`.

### 6.4 Feedback loop (the core story)
- **Layout:** Circular loop: customer feedback → private insights → better service → more reviews → more customers → (back to) customer feedback.
```
        ┌──────────────────────────┐
        ▼                          │
 customer feedback → private insights → better service
        ▲                                   │
   more customers ◄── more reviews ◄─────────┘
```
- **SVG:** ring of 5 nodes, arrowed arcs, accent gradient *along the stroke only* (no fill blocks). `viewBox="0 0 700 700"`.
- **Motion:** slow rotating highlight travels the ring (12s linear); reduced-motion = static.
- **Usage:** Business hero secondary, `/business/feedback`.

### 6.5 Reputation growth flywheel
- **Layout:** Same ring as 6.4 but weighted as a flywheel — thicker arc where momentum compounds ("more reviews" → "more customers"), small "+1 review" sparks flying off.
- **SVG:** heavy circular `<path>` with arrowhead; spark particles as tiny `<circle>`s.
- **Motion:** flywheel accelerates subtly on scroll-in then settles.
- **Usage:** `/business` ROI section, investor deck.

### 6.6 Smart QR system
- **Layout:** A fanned deck of template cards (Google · TripAdvisor · WiFi · Instagram · Facebook · Website · Custom), front card = Google review.
- **SVG:** 7 rounded-rect cards rotated −18°→+18° around a pivot; each card has a mini QR glyph + label. `viewBox="0 0 900 520"`.
- **Colours:** cards `--panel`/`--line`; active card accent border; QR glyph `--text`.
- **Motion:** deck fans open on view; hover a card to bring forward.
- **Usage:** `/business/reviews`, homepage section 4.

### 6.7 Business insights
- **Layout:** Abstract "customer mood this week" — 7 vertical bars of varying height (Mon–Sun), a sparkline above, three "top reason" chips below.
- **SVG:** `<rect>` bars with rounded tops; sparkline `<polyline>`; chips rounded rects. `viewBox="0 0 720 420"`.
- **Colours:** bars gradient `--bad`→`--good` by height; sparkline `--accent`.
- **Motion:** bars grow from baseline (stagger 0.06) on view.
- **Usage:** `/business/insights`, homepage section 8.

### 6.8 Onboarding flow
- **Layout:** 5-node vertical checklist: Paste Google link → Add logo → Stand it up → Lock kiosk → Print table tent; a completeness ring at top fills to 100%.
- **SVG:** checklist rows with check circles; progress ring `<circle stroke-dasharray>`.
- **Motion:** ring fills 0→100%; rows check off in sequence.
- **Usage:** `/business/how-it-works`, `/business/signup`.

### 6.9 Spare device transformation
- **Layout:** Left: a dusty old phone in a drawer (greyed). Arrow. Right: same phone, on a counter stand, glowing with a review display.
- **SVG:** two device outlines; left desaturated (`--faint`), right accent-lit; transformation arrow with "→".
- **Motion:** right device "powers on" (screen glow fades in) on view.
- **Usage:** homepage section 5, `/business`, store creative.

### 6.10 LumaTick ecosystem map
- **Layout:** Hub centre; Business orbit (large, primary, `--accent`) and Consumer orbit (Markets/Focus/Social/Signage, `--consumer`); Signage sits on the bridge between them.
- **SVG:** central `LumaTick` node; two concentric orbit rings; planets = product nodes; a dashed "bridge" line Signage↔Business. `viewBox="0 0 1000 1000"`.
- **Motion:** orbit rotates slowly (60s linear); labels counter-rotate to stay upright; reduced-motion = static.
- **Usage:** `/apps`, `/about`.

---
---

# DELIVERABLE 7 — AI IMAGE GENERATION PACK (44 prompts)

> Commercial-quality, on-brand: near-black `#070707` backgrounds, single warm
> accent `#FF6A3D`, premium minimalism (Stripe/Linear/Arc reference). Devices are
> **spare/older phones & tablets on real counters**, never glossy flagship press
> shots. No fake brand logos; no real Google UI; use generic "★ SCAN TO REVIEW".

## A. Hero prompts (10)

1. **GPT Image:** "Cinematic product hero: an older Android phone on a small wooden café counter stand, screen showing a minimalist dark review display with five gold stars and a QR code, soft warm orange glow, near-black background, shallow depth of field, premium SaaS marketing aesthetic, no text."
2. **Flux:** "A spare tablet mounted on a brushed-metal counter stand in a moody specialty coffee bar at dusk, dark UI with a glowing QR and ★★★★★, bokeh espresso machine behind, orange accent lighting, ultra-clean, 4k, editorial."
3. **Midjourney:** "café counter at golden hour, repurposed old smartphone on a stand displaying a sleek dark 'scan to review' screen, warm orange rim light, deep blacks, minimalist, premium fintech ad style --ar 16:9 --style raw --v 6"
4. **GPT Image:** "Top-down flat-lay on dark slate: an old phone, a printed table-tent card with a QR, a coffee cup, scattered roasted beans, single warm light source, premium minimal, generous negative space, no logos."
5. **Flux:** "Split hero composition, left third a market/stock ticker wall display in cool blue, right two-thirds a café counter tablet review screen in warm orange, near-black canvas, balanced, premium tech brand."
6. **Midjourney:** "barber shop reception counter, small tablet on a stand showing a dark elegant review prompt with stars and QR, warm tungsten light, deep shadows, cinematic, premium SaaS --ar 3:2 --v 6"
7. **GPT Image:** "Hands holding a phone scanning a QR code displayed on a counter tablet in a bar, motion blur on background patrons, focused crisp foreground screen with five stars, dark moody, orange accent, commercial photography."
8. **Flux:** "A salon front desk, spare iPad-like tablet on a minimalist stand, dark glowing 'How was today? tap a face' screen with emoji faces, soft pink-neutral interior, warm orange UI accent, premium, photorealistic."
9. **Midjourney:** "abstract premium hero, a single old phone floating above a dark reflective surface, screen emitting a warm orange glow with a five-star motif, volumetric light, deep black, Apple-keynote minimalism --ar 16:9 --v 6"
10. **GPT Image:** "Wide environmental shot of a cozy independent café interior, a small review display tablet glowing on the counter as the hero focal point, everything else softly dark, warm orange highlight, premium hospitality brand photography, no readable logos."

## B. Feature prompts (10)

11. **GPT Image:** "Clean UI showcase: a dark mobile screen showing four large emoji rating faces (excellent, good, average, poor) in a premium minimal layout, warm orange selected state, floating on near-black, soft shadow, product marketing."
12. **Flux:** "A fan of seven dark rounded template cards, each with a small QR glyph and a label (Google, TripAdvisor, WiFi, Instagram), spread like a card deck, warm orange active card, near-black background, premium SaaS illustration-photo hybrid."
13. **Midjourney:** "dark analytics dashboard on a tablet, weekly 'customer mood' bar chart in a gradient from red to green, sparkline, minimal, premium fintech UI, warm orange accents, deep black --ar 4:3 --v 6"
14. **GPT Image:** "A printed table-tent card standing on a restaurant table, front reads generic 'Loved your visit? Scan to review' with a QR and stars, soft candlelight, premium print mockup, shallow depth of field."
15. **Flux:** "Side-by-side comparison: left a dark screen with a five-star Google-style review path, right a dark 'help us improve' survey with reason chips, connected by a glowing fork line, warm orange + amber accents, premium UI illustration."
16. **Midjourney:** "kiosk-locked tablet on a café counter, subtle padlock icon, always-on dark display, warm orange glow, plugged in, set-and-forget, premium product photography --ar 3:2 --v 6"
17. **GPT Image:** "Macro shot of a QR code glowing on a dark phone screen with five gold stars above it, water droplets of bokeh light behind, ultra premium, warm orange ambient, commercial."
18. **Flux:** "A spare phone transforming: left side dusty in a drawer desaturated, right side glowing on a counter stand with a review display, visual metaphor, warm orange accent on the active side, near-black, premium editorial."
19. **Midjourney:** "abstract reputation flywheel, a glowing circular arrow loop with small five-star sparks flying off, warm orange gradient stroke on deep black, premium minimal data-art --ar 1:1 --v 6"
20. **GPT Image:** "A small business owner's hand placing a tablet onto a counter stand, dark review screen lighting up, warm café interior softly blurred, sense of '5-minute setup', premium lifestyle product shot."

## C. Screenshot-enhancement prompts (10)

> For compositing real app captures into premium frames/scenes.

21. **GPT Image:** "Photorealistic empty older-phone device frame on a café counter stand, screen area pure black ready for a screenshot composite, warm orange ambient light, near-black background, soft reflections, 6.7 inch portrait."
22. **Flux:** "Tablet-on-counter scene with a blank dark screen for screenshot insertion, barber shop background bokeh, warm tungsten + orange accent, premium mockup template, portrait orientation."
23. **Midjourney:** "two devices, a phone and a 10-inch tablet side by side on a dark surface, both screens blank black for compositing, soft warm orange edge light, premium mockup --ar 16:9 --v 6"
24. **GPT Image:** "Floating dark phone mockup at a slight 3D angle with subtle inner-glow border (SurfaceCard style), blank screen, near-black studio background, single warm light, premium UI presentation frame."
25. **Flux:** "A caption-bar template overlay: bold white headline area top, thin orange underline, device below, dark OLED background, premium app-store screenshot layout, portrait."
26. **Midjourney:** "premium dark gradient backdrop with subtle radial orange glow at top center, blank center for a device screenshot, app store hero style, deep black --ar 9:16 --v 6"
27. **GPT Image:** "Counter-stand product photo, blank-screen tablet, lifestyle café setting softly out of focus, warm orange ambient, ready-for-composite, premium hospitality."
28. **Flux:** "Three stacked dark device frames at parallax depth, blank screens, near-black, single warm accent rim light, premium carousel mockup, portrait phones."
29. **Midjourney:** "minimalist white light-mode device mockup on a bright clean counter, blank screen for screenshot, soft daylight, premium SaaS, for light-theme marketing --ar 4:5 --v 6"
30. **GPT Image:** "A printed A4 poster and a counter card leaning together on a dark table, blank QR/headline areas for compositing real designs, premium print mockup, warm light."

## D. Social-media prompts (10)

31. **GPT Image:** "Square social graphic, near-black background, a glowing five-star motif and a QR, bold negative space for an overlay headline 'Turn a spare phone into a review machine', warm orange accent, premium brand post."
32. **Flux:** "Instagram story 9:16, dark, a café counter tablet review display, top third clear for text, warm orange accent, premium build-in-public aesthetic."
33. **Midjourney:** "carousel slide, deep black, big bold number '40' implied as new reviews, minimal, warm orange, premium SMB marketing post (no fixed text) --ar 1:1 --v 6"
34. **GPT Image:** "LinkedIn post image, professional dark minimal, a spare phone becoming a review engine metaphor, room for a founder quote, warm orange accent, credible startup aesthetic."
35. **Flux:** "Before/after split square, left a quiet café counter, right the same counter with a glowing review tablet, warm orange accent on the after side, premium social proof graphic."
36. **Midjourney:** "founder-journey aesthetic, a laptop and a spare phone on a dark desk at night, warm orange screen glow, 'building in public week 1' mood, premium minimal --ar 4:5 --v 6"
37. **GPT Image:** "Reel cover 9:16, dark, a hand scanning a counter QR, motion energy, warm orange, space for a hook headline, premium short-video thumbnail."
38. **Flux:** "Quote-card square, near-black, large quotation mark in warm orange, blank center for a customer/owner testimonial, premium minimal social template."
39. **Midjourney:** "tip-graphic, dark, a single bold icon of a star and a speech bubble, warm orange, room for 'how to get more google reviews', premium educational post --ar 1:1 --v 6"
40. **GPT Image:** "Announcement graphic, deep black, a glowing '14 days free' amber badge over a counter tablet, premium, space for headline, warm tones."
41. **Flux:** "Pinterest-tall 2:3, a cozy café counter with a review display, warm and inviting, room at top for blog title overlay, premium lifestyle SEO graphic."
42. **GPT Image:** "X/Twitter header 3:1, dark panoramic, spare-device-to-review-engine metaphor strip, warm orange accent, minimal premium brand banner."
43. **Midjourney:** "OG share image 1.91:1, near-black, LumaTick Business wordmark space left, glowing review tablet right, warm orange, premium link-preview card --ar 1200:630 --v 6"
44. **Flux:** "Email-header banner, dark, a thin row of premium device thumbnails (phone, tablet, counter card), warm orange accent line, clean, premium newsletter top."

---
---

# DELIVERABLE 8 — WEBSITE SCREEN MOCKUPS

> Dimensions are content-area; full-bleed sections extend to viewport edges,
> content capped at `--max` 1200px. Hierarchy described top→bottom.

## Desktop (1440 viewport, 1200 content)

### Homepage `/`
```
┌──────────────────────────────────────────────┐ 72px sticky nav (logo · Business▾ Apps▾ Pricing▾ Blog · [Start free])
│ HERO  (h 560)  split 58/42                     │
│  [left 42%: market/focus wall]  [right 58%: café tablet QR→★ loop] │
│  H1 + sub centered overlay · [For my business →][Explore the apps] │
├──────────────────────────────────────────────┤
│ PROBLEM (h 360, 760px centered, quiet)         │
│ SOLUTION (h 480, headline + 3 cards)           │
│ REVIEW ENGINE (h 520, copy | QR fan)           │
│ BENEFITS (h 440, 2×2 grid)                     │
│ WALKTHROUGH (h 600, 5-step rail + video poster)│
│ SCREENSHOTS (h 560, device carousel)           │
│ INSIGHTS (h 480, copy | mood board)            │
│ PRICING TEASER (h 360, single price card)      │
│ FAQ (h 520, accordion 820px)                   │
│ FINAL CTA (h 320, dark band + button)          │
├──────────────────────────────────────────────┤
│ FOOTER (h 360, 4 columns + legal)              │
└──────────────────────────────────────────────┘
```

### `/business`
```
nav · HERO (counter tablet, [Start free — no card]) · PROBLEM · HOW IT WORKS (3→5 steps)
· SMART QR (copy | templates fan) · FEEDBACK (Gateway | Survey split) · INSIGHTS (dashboard)
· ROI/PRICING TEASER · SOCIAL PROOF [[placeholder]] · SETUP (video) · SCREENSHOTS · FAQ · FINAL CTA · footer
```
Side-by-side feature rows alternate image side L/R. Insights shown at full fidelity.

### `/business/pricing`
```
nav · H1+sub (centered) · TWO-PLAN TABLE (Free | Business⭐, 760px, Business column accent border)
· FEATURE MATRIX (full, sticky header) · TRIAL BLOCK · BILLING BLOCK · ROI BLOCK · PRICING FAQ · CTA · footer
```

### `/business/demo`
```
nav · DEMO STAGE (centered phone frame ~390×780, controls below) · perspective toggle (Customer | Owner)
· progress dots (Customer → Feedback → Insights → Activate) · context copy panel right (desktop) · CTA on completion · footer
```

### `/apps`
```
nav (consumer accent) · HERO (own-it-forever) · ORBIT animation (Hub + 4 apps) · per-app rows (Markets first)
· use cases · OWNERSHIP pitch ("buy once") · FAQ · DOWNLOAD (store badges + QR) · footer
```

## Mobile (390 viewport)

### Homepage
```
[sticky nav: logo · ☰]
HERO (stacked): device mock → H1 → sub → [For my business →] (top, primary) → [Explore the apps]
PROBLEM (single col)
SOLUTION (cards stack)
REVIEW ENGINE (copy → QR fan below)
BENEFITS (1-col)
WALKTHROUGH (vertical swipe steps)
SCREENSHOTS (horizontal snap-scroll, 1 device at a time)
INSIGHTS (copy → board)
PRICING TEASER (price card)
FAQ (accordion)
FINAL CTA
FOOTER (stacked columns)
[STICKY BOTTOM BAR: Start free]   ← reveals after hero
```

### `/business` (mobile)
Single column; 3-step "how it works" = vertical swipe; price card shows
`$14/mo · per location` with ROI line under; sticky bottom **Start free**.

### `/business/pricing` (mobile)
Plans stack (Business first/highlighted); feature matrix = horizontal scroll with
sticky first column; sticky bottom **Start 14-day trial**.

### `/business/demo` (mobile)
Full-width phone frame fills screen; perspective toggle as a segmented control at
top; tap targets ≥ 44px; progress dots under frame; CTA on finish.

### `/apps` (mobile)
Orbit becomes a vertical list of app cards (no rotation on mobile — perf); store
badges (not QR) in sticky bottom bar = **Download**.

---
---

# DELIVERABLE 9 — INTERACTIVE DEMO (`/business/demo`)

> **Compliant model only.** The demo must show that *every* customer can review
> publicly; private feedback is an additional path. No "happy→public /
> unhappy→private" gating. No signup required to view. Dual-perspective: **be the
> customer**, then **be the owner**.

**Funnel:** Visitor → Interactive Demo → Customer Experience → Feedback Experience → Insights Experience → Activation → Trial → Paid.

### Stage 0 — Demo intro
- **Copy:** "See it the way your customers will. Tap through a real LumaTick counter display — no sign-up."
- **Layout:** phone frame + perspective toggle [Customer | Owner], "Start demo" button.
- **Actions:** Start.
- **Success state:** advances to Customer screen.
- **Empty state:** n/a (pre-seeded demo data labelled "Sample café").

### Stage 1 — Customer Experience (the counter screen)
- **Copy:** Display reads "How was today? Tap a face" with Excellent / Good / Average / Poor.
- **Layout:** full-bleed dark display inside phone frame; 4 emoji tiles.
- **Actions:** tap any face. (Demo lets you try both a happy and an unhappy path — *both* offered to everyone.)
- **Success:** tapping advances to the matching next screen, with a caption "Every customer also sees the public review option."
- **Empty:** n/a.

### Stage 2 — Feedback Experience
- **Happy path (Excellent/Good):** Review Gateway — "Glad you enjoyed it! Leave us a quick review" with Google + TripAdvisor QR cards; caption "One scan → your Google page, ~20 seconds." A **"Leave a public review"** button is **always present**.
- **Improvement path (Average/Poor):** Improvement Survey — "Help us improve" reason chips (Quality/Service/Wait Time/Cleanliness/Pricing/Availability) + optional note → "Send feedback" → Thank You. Caption (mandatory, compliant): **"You can still leave a public review too →"** with the public review option visible.
- **Layout:** survey chips multi-select; QR cards as a row.
- **Actions:** select reasons / scan (simulated) / "Leave a public review".
- **Success:** Thank-you state; "That feedback just landed in the owner's Insights — switch to the owner view to see it."
- **Empty:** if no reason chosen, "Send feedback" still works (optional).

### Stage 3 — Insights Experience (owner view)
- **Copy:** "This is what you'd see. Your week at a glance." Today KPIs + "Customer mood this week" bars + top complaint reasons (now including the tap the visitor just made).
- **Layout:** dashboard mock; the visitor's demo tap is highlighted ("← you just added this").
- **Actions:** toggle day, hover a bar.
- **Success:** "See how problems surface privately *before* they become public 1-stars."
- **Empty:** demo always seeded; real empty state copy noted for the app: "No feedback yet — share your QR to start."

### Stage 4 — Activation (the offer)
- **Copy:** "Set this up on your own counter in 5 minutes. Free — no card."
- **Layout:** 5-step mini-checklist (paste Google link, add logo, stand it up, lock it, print a tent) + [Start free] + [Book a 5-min setup call].
- **Actions:** Start free → `/business/signup`; Book call → `[[PLACEHOLDER: Cal.com]]`.
- **Success:** routes to signup.
- **Empty:** n/a.

### Stage 5 — Trial
- **Copy:** "Your 14-day branding trial starts the moment you add your logo. See *your* brand on the counter — then keep it for $14/month."
- **Layout:** trial timeline graphic (Day 0 logo on → Day 14 watermark returns) + reassurance "the review engine stays free either way."
- **Actions:** continue to signup.
- **Empty:** n/a.

### Stage 6 — Paid
- **Copy:** "Lock your logo on for $14/month or $129/year per location. Cancel anytime."
- **Layout:** the two-plan card (Free | Business) reused from pricing.
- **Actions:** [Start 14-day branding trial] → `/business/signup`.
- **Success:** account-first signup → app handoff.
- **Empty:** n/a.

> **Implementation note:** the demo is a self-contained client component reusing
> seeded sample data; it must **not** require auth, must work offline-ish, and must
> degrade to a static screenshot carousel under `prefers-reduced-motion` / no-JS.

---
---

# DELIVERABLE 10 — SCREENSHOT MASTER PLAN

> Source: MAP-1 §1 + STORE_LISTINGS.md (compliant wording). Capture from the live
> Business demo; portrait, real (spare-looking) device frame, dark OLED bg, caption
> bar (bold ~34pt headline + ~17pt support line @70%), brand accent underline.
> **First 3 carry conversion.** No invented numbers — use generic motifs.

## Website screenshots (the 8 hero tiles)

| # | Capture | Purpose | Headline | Support / CTA | Treatment |
|---|---------|---------|----------|---------------|-----------|
| 1 | Smart QR Google Review display (★★★★★ + QR) | Lead conversion | Make 5-star reviews effortless | One scan sends customers to your Google review page. | full device, QR centered, caption top |
| 2 | Feedback emoji screen (4 faces) | Differentiator | Reviews *and* honest feedback | Everyone can review publicly — and share private feedback with you. | 4 tiles prominent |
| 3 | Improvement Survey (reason chips) | Differentiator | See exactly what to improve | Private feedback reaches you, so you fix what matters. | reason chips visible |
| 4 | Insights (Today KPIs + mood bars) | Retention value | See how customers feel | Mood trend, busy times, top complaints at a glance. | mood bars focal |
| 5 | Smart QR with venue logo, no watermark | Branding upsell | Your logo. Your display. | Add your brand and remove the watermark. | clean, logo top |
| 6 | Display on phone + tablet/stand | Low-friction | Works on any spare device | The phone in your drawer becomes a marketing asset. | lifestyle-leaning |
| 7 | Profile setup / "Set up Smart QR" | Activation | Live in under 5 minutes | Paste your Google link, add your logo, stand it up. | completeness ring |
| 8 | BusinessHome dashboard (2×2 deck) | Summary | Grow reviews. Improve feedback. | One spare device. More 5-stars, happier customers. | clean closing tile |

## App Store screenshots (Apple)
- iPhone **6.7"** + **6.5"** sets. Same 8 frames, caption bars sized for store.
- Order: 1, 2, 3, 5, 4, 7, 6, 8 (lead reviews → differentiator → branding → insights).
- Compliant captions only (no "divert unhappy customers").

## Google Play screenshots
- **Phone** + **7"/10" tablet** sets. Feature graphic **1024×500**: dark, counter tablet + "Grow your Google reviews from your counter" + accent underline.
- Same 8 frames; tablet set emphasizes #6 (works on tablet) and #4 (insights).

## Sales-sheet screenshots (one-pager / handout)
- Hero: #1 (review) + #3 (improve) side by side.
- Proof line slot: `[[PLACEHOLDER: "[Local venue] gained 40 new reviews in a month."]]`
- Pricing strip: Free / $14·mo / $129·yr. CTA: "Set it up free — [name/number]."

## Investor screenshots
- #8 dashboard (product breadth), #4 insights (data/retention), the **reputation
  flywheel** SVG (6.5), and a **funnel diagram** (LVA-1 Deliverable 5 numbers as
  ranges, clearly modelled not actual). Treatment: clean, labelled, honest —
  metrics marked illustrative until real.

---
---

# DELIVERABLE 11 — SEO SYSTEM

## Site architecture (SEO)
- **Subfolders, not subdomains.** `/business/*` (priority) + `/apps/*` inherit one
  domain authority. Business gets first internal-link + content priority (≈60/40).
- **Search Console:** root + two URL-prefix properties (`/business`, `/apps`).
- **Render:** Next.js SSG/ISR → pre-rendered HTML, fast Core Web Vitals.
- **Per-cluster XML sitemaps**, canonical tags, `hreflang` when localised.

## Internal linking strategy
- Every consumer page that *can* → links to Business where natural (Signage →
  "Running a venue? See LumaTick Business").
- Industry pages link up to `/business` and across to `/business/reviews` +
  `/business/pricing`.
- Blog Reviews-cluster posts link to `/business/reviews` and the matching
  `/business/industries/[type]`.
- Pillar pages link all cluster posts (topical authority); cluster posts link back
  to pillar + 1–2 siblings.

## Schema strategy
- **Business pages:** `SoftwareApplication` + `Product`/`Offer` (subscription price
  $14/mo, $129/yr) + `FAQPage` + `BreadcrumbList`.
- **Industry pages:** above + `LocalBusiness`-aware copy.
- **Consumer app pages:** `SoftwareApplication` per app + `FAQPage` + app-install
  rich snippet.
- **Blog:** `Article` + `BreadcrumbList`; pillar pages `FAQPage` where relevant.
- **Org-wide:** `Organization` + `WebSite` (+ Sitelinks searchbox optional).

## Keyword clusters

**House 2 — Business (priority):**
- *Reviews:* how to get more google reviews · QR code review stand · review collection tablet · google review display · ask for reviews card.
- *Feedback:* restaurant feedback app · private customer feedback · customer feedback display · NPS for small business · comment card app.
- *Reputation:* reputation management for cafes · online reviews for small business · respond to bad reviews.
- *Setup/device:* turn old tablet into review kiosk · spare phone counter display · wifi QR code for cafe · table tent QR review.

**House 1 — Consumer (acquisition):**
- stock ticker app · trading dashboard TV · crypto price display · focus timer app · pomodoro TV app · ambient clock display · digital signage app · subscriber count display · desk setup display.

## Programmatic SEO opportunities
- `/business/industries/[type]` — cafes, restaurants, bars, salons, barbers,
  hotels, gyms, tourism, nail bars, clinics (one template, intent-matched copy).
- Later: `/business/[city]` local pages (after first venues, for real proof).
- Consumer: `/apps/markets/[asset]` ("live AAPL ticker display") and
  `/solutions/[audience]` (home / traders / creators).

## Local SEO opportunities
- Industry × city long-tail once references exist ("café review display Sydney").
- Encourage early venues to mention LumaTick in *their* Google posts (passive
  "powered by" loop) — but **never** in a way that implies review gating.
- Founder Google Business Profile / LinkedIn for the build-in-public footprint.

## 100 blog article ideas (grouped)

**A. Reviews & reputation (priority cluster — write first) [1–25]**
1. How to get more Google reviews for your café (pillar) 2. Why happy customers never leave reviews 3. The maths of one extra 5-star review 4. Review gating is risky — do this instead 5. QR code review stands that actually work 6. How many reviews to rank on Google Maps? 7. The best place to put a review QR in a café 8. How to ask for a review without being pushy 9. Responding to a bad review the right way 10. Google review link: how to find and share yours 11. Review stickers vs review displays 12. How local SEO and reviews compound 13. The owner's guide to online reputation 14. TripAdvisor vs Google reviews for venues 15. How to get reviews for a new business with none 16. What a 0.1 star rating bump is worth 17. Staff scripts that get reviews 18. Counter cards, table tents and posters that lift scans 19. How to recover from a 1-star review 20. The cheapest marketing on your counter 21. Should you offer incentives for reviews? (and the rules) 22. Review velocity: why recent reviews matter 23. How cafés can get more reviews in the morning rush 24. Turning regulars into reviewers 25. A 30-day plan to double your reviews.

**B. Customer feedback [26–45]**
26. Private feedback vs public complaints 27. Feedback categories that predict churn 28. NPS for a small café — worth it? 29. How to read your "customer mood" week 30. The feedback-to-reviews loop explained 31. Comment cards are dead — here's what works 32. What 100 pieces of café feedback taught me 33. How to act on wait-time complaints 34. Cleanliness feedback: catching it early 35. Pricing complaints — signal or noise? 36. Turning a bad day into a fix 37. Why owners hear less than they think 38. Anonymous feedback and honesty 39. Closing the loop with unhappy customers 40. Feedback fatigue and how to avoid it 41. How busy times affect customer mood 42. Building a service-improvement habit 43. The one feedback metric that matters 44. Feedback without a CRM 45. From feedback to a 5-star month.

**C. Spare-device / setup [46–60]**
46. Turn a spare phone into a review machine 47. Repurpose an old tablet as a counter display 48. The 5-minute counter review setup 49. Kiosk mode on an old Android, simply 50. Best stands for a counter tablet 51. Keeping a display always-on without burn-in 52. WiFi QR + reviews on one screen 53. What old devices work as a review display 54. Battery and power for an always-on counter screen 55. Locking a tablet so customers can't tamper 56. One screen, several counter jobs 57. Setting up without a tech person 58. Printing a table tent from your phone 59. The drawer-phone audit: what you already own 60. Counter display ideas for small venues.

**D. Industry guides [61–80]**
61. Review display for cafés 62. …for restaurants 63. …for bars 64. …for salons 65. …for barbers 66. …for hotels & B&Bs 67. …for gyms & studios 68. …for tour operators 69. …for nail bars 70. …for dessert & specialty food 71. Reviews for a food truck (no counter?) 72. Reviews for a multi-location café group 73. Hospitality reputation in a tourist town 74. Salon rebooking + reviews 75. Barber shop loyalty + reviews 76. Bar reviews and the weekend rush 77. Hotel front-desk feedback 78. Gym member feedback that reduces churn 79. Tour operator reviews and bookings 80. Local retail reviews at the till.

**E. Local-business growth [81–90]**
81. Local SEO basics for venues 82. Google Business Profile checklist 83. Foot traffic and online reputation 84. The flywheel: reviews → customers → reviews 85. Marketing a café with a $0 budget 86. Word of mouth in the review era 87. Seasonal review pushes 88. Competing with chains on reviews 89. Loyalty without an app 90. The reputation moat for small venues.

**F. Founder / build-in-public [91–100]**
91. Building LumaTick in public: week 1 92. Why I made the review loop free forever 93. Solo founder, full-time job: my 5-hour week 94. First activated venue — what I learned 95. Why activation beats signups 96. Honest pricing: $14, no tricks 97. Why I'm not door-knocking (and what I do) 98. What I got wrong about onboarding 99. 90 days of building: the numbers 100. Building a SaaS solo while employed.

---
---

# DELIVERABLE 12 — FRAMER MOTION SYSTEM

> Premium, restrained (200–600ms), OLED-safe, `prefers-reduced-motion` honoured.
> Tokens align with `LUMATICK_WEBSITE_ARCHITECTURE §11` — reproduced + extended.

### Tokens
```ts
export const ease = {
  out:   [0.16, 1, 0.3, 1],    // entrances
  inOut: [0.65, 0, 0.35, 1],   // loops / crossfades
};
export const dur = { fast: 0.2, base: 0.4, slow: 0.6 };
```

### Entrance (global section reveal)
```ts
const fadeRise = {
  hidden:  { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0, transition: { duration: dur.base, ease: ease.out } },
};
// <motion.section variants={fadeRise} initial="hidden"
//   whileInView="visible" viewport={{ once: true, amount: 0.3 }} />
```

### Scroll / stagger (feature rows, cards, orbit planets, bars)
```ts
const stagger = { visible: { transition: { staggerChildren: 0.08 } } };
// parent uses `stagger`; each child uses `fadeRise`
```

### Hero — Business review loop
```ts
const reviewLoop = { animate: { transition: { duration: 4, ease: ease.inOut, repeat: Infinity, repeatDelay: 0.6 } } };
const starCard = {
  initial: { opacity: 0, y: 30, scale: 0.96 },
  animate: { opacity: [0,1,1,0], y: [30,0,0,-10],
             transition: { duration: 4, times: [0,0.25,0.8,1], repeat: Infinity } },
};
```

### Hero — Consumer surface crossfade
```ts
const surfaceCycle = { animate: { opacity: [1,0,1], transition: { duration: 3.5, ease: ease.inOut, repeat: Infinity } } };
// pair with AnimatePresence mode="wait" for discrete surface swaps
```

### Dashboard — Insights bars grow
```ts
const barGrow = {
  hidden:  { scaleY: 0, originY: 1 },
  visible: (i:number) => ({ scaleY: 1, transition: { duration: dur.base, ease: ease.out, delay: i*0.06 } }),
};
```

### CTA — pulse / band reveal
```ts
const ctaBar = { hidden: { y: 80 }, visible: { y: 0, transition: { duration: dur.base, ease: ease.out } } };
const ctaPulse = { animate: { scale: [1,1.02,1], transition: { duration: 2.4, ease: ease.inOut, repeat: Infinity } } };
```

### Loading states
```ts
const skeleton = { animate: { opacity: [0.4,0.8,0.4], transition: { duration: 1.2, ease: ease.inOut, repeat: Infinity } } };
// device/screenshot placeholders + testimonial skeletons while [[PLACEHOLDER]] proof is pending
```

### Hover states
```ts
const cardHover = {
  rest:  { scale: 1, boxShadow: "0 0 0 rgba(0,0,0,0)" },
  hover: { scale: 1.02, transition: { duration: dur.fast, ease: ease.out } },
};
// accent bloom: animate sibling glow layer opacity 0 → 0.6 on hover
const orbit = { animate: { rotate: 360, transition: { duration: 60, ease: "linear", repeat: Infinity } } };
```

### Reduced-motion (mandatory)
```ts
const reduce = useReducedMotion();
// when reduce: disable loops/orbit/pulse; keep only opacity fades at dur.fast;
// never gate content reveal behind motion; demo degrades to static carousel.
```

---
---

# DELIVERABLE 13 — NEXT.JS ARCHITECTURE (App Router)

> Architecture only (no full code). Stack: Next.js App Router (SSG/ISR) ·
> Cloudflare Pages + CDN/WAF · Supabase (reuse app identity) · RevenueCat
> (translate to grant seams) · Framer Motion · GA4 + Cloudflare Analytics +
> PostHog · Schema.org.

## App Router / folder structure
```
app/
├── layout.tsx                  # root: fonts, theme, nav, footer, analytics
├── page.tsx                    # / brand home (Business-biased fork)
├── (business)/                 # House 2 — primary
│   ├── business/page.tsx
│   ├── business/reviews/page.tsx
│   ├── business/feedback/page.tsx
│   ├── business/insights/page.tsx
│   ├── business/pricing/page.tsx
│   ├── business/how-it-works/page.tsx
│   ├── business/demo/page.tsx              # client island (interactive demo)
│   ├── business/industries/[type]/page.tsx # generateStaticParams (programmatic)
│   └── business/signup/page.tsx            # account-first → app/store handoff
├── (consumer)/                 # House 1 — secondary
│   ├── apps/page.tsx
│   ├── apps/[app]/page.tsx                 # markets|focus|signage|social (template)
│   ├── pricing/page.tsx                    # ONE-TIME framing
│   └── download/page.tsx                   # device-detect store handoff
├── blog/
│   ├── page.tsx
│   └── [slug]/page.tsx                      # MDX
├── about/page.tsx
├── contact/page.tsx
├── privacy/page.tsx
├── terms/page.tsx
├── sitemap.ts                  # per-cluster sitemaps
├── robots.ts
└── opengraph-image.tsx         # default OG (per-route overrides allowed)

components/
├── layout/   Nav, Footer, StickyCtaBar, ThemeToggle, Container
├── business/ Hero, HowItWorks, SmartQrFan, FeedbackSplit, InsightsBoard, PriceCard, FeatureMatrix, Faq
├── consumer/ Orbit, AppRow, OwnershipPitch, DownloadButtons
├── demo/     DemoStage, PerspectiveToggle, CustomerScreen, FeedbackScreen, InsightsScreen, ActivationCard
├── svg/      TwoHouses, ReviewEngine, FeedbackLoop, Flywheel, SmartQrDeck, MoodBoard, EcosystemMap …
└── ui/       Button, Card, Badge, Eyebrow, Accordion, Input, Table, Skeleton

lib/
├── pricing.ts        # SINGLE source: $14/mo, $129/yr, currency (no hard-coded $ in UI)
├── industries.ts     # [type] data for programmatic pages
├── seo.ts            # metadata + JSON-LD builders (SoftwareApplication, FAQPage, Offer, Breadcrumb)
├── analytics.ts      # GA4 + PostHog wrappers, per-house events
└── motion.ts         # ease/dur tokens + variants (Deliverable 12)

content/
├── blog/*.mdx
└── faq.ts            # global FAQ (reused + FAQPage schema)
```

## Component hierarchy (homepage example)
```
RootLayout
└── BrandHomePage
    ├── Nav (sticky, context-aware)
    ├── HeroFork (split, reviewLoop + surfaceCycle)
    ├── ProblemSection
    ├── SolutionSection → Card ×3
    ├── ReviewEngineSection → SmartQrFan
    ├── BenefitsGrid
    ├── WalkthroughRail → VideoPoster + Step ×5
    ├── ScreenshotCarousel → DeviceFrame ×8
    ├── InsightsSection → MoodBoard
    ├── PricingTeaser → PriceCard (from lib/pricing)
    ├── FaqAccordion (FAQPage schema)
    ├── FinalCta → Button
    ├── StickyCtaBar (mobile, contextual)
    └── Footer
```

## Asset / image hierarchy
```
public/
├── brand/        logo (svg, light/dark), wordmark, favicon set, app icons
├── og/           default + per-route OG (1200×630)
├── screenshots/  hero-1…8 (raw app captures) + composited variants
├── devices/      empty device frames (phone 6.7/6.5, tablet 7/10) for compositing
├── illustrations/ exported SVGs (also inlined components for animation)
└── video/        setup-90s.mp4 (poster.jpg) [[PLACEHOLDER]]
```
- Use `next/image` (AVIF/WebP, responsive `sizes`); device frames as static;
  inline SVGs as components when animated, `<img>` when static.

## SEO hierarchy
- `generateMetadata` per route (title/desc/canonical/OG from `lib/seo`).
- JSON-LD injected per page type (helpers in `lib/seo`).
- `generateStaticParams` for `industries/[type]`, `apps/[app]`, `blog/[slug]`.
- ISR revalidate for blog; SSG for static marketing routes.

## Guardrails (carried from Monetisation §3 / Architecture §13)
Two axes, no leakage · purchases translate to grants (never write entitlement) ·
free wedge sacred · one billing SDK (RevenueCat) · account optional for consumers,
required for Business · **pricing lives in `lib/pricing.ts` / RevenueCat, never
hard-coded in UI.**

---
---

# DELIVERABLE 14 — BRAND ASSETS

| Asset | Spec |
|---|---|
| **Logo usage** | Wordmark "LumaTick" + mark. Dark-bg primary (light logo); light-bg variant. Min clear-space = cap-height ×1. Min width 96px. Never recolour the mark outside `--accent`/white/black. "LumaTick Business" lockup = wordmark + "Business" in `--muted`. |
| **Favicons** | `favicon.ico` (32), `icon.svg` (maskable), `apple-touch-icon.png` (180), `icon-192/512.png` (PWA). Mark on `#070707` rounded square. |
| **App icons** | Reuse in-app icon (`assets/`). Business listing icon = review/star+QR motif on dark; Consumer Hub icon = orbit motif. Keep distinct per the two store listings. |
| **OpenGraph (1200×630)** | Dark, mark left, glowing review tablet right, headline per route, accent underline. Default + per-key-route overrides (`/business`, `/business/pricing`, blog posts). |
| **Twitter/X cards** | `summary_large_image`, same as OG; header banner 1500×500 (spare-device→review-engine strip). |
| **LinkedIn** | Company banner 1128×191 (dark, value line); post template 1200×627; founder build-in-public square 1080×1080. |
| **Email headers** | 600px-wide dark banner, mark + thin device-thumb row + accent line; Loops/Resend welcome + trial-day sequence (LVA-1 D8). |
| **PDF covers** | Sales sheet (A4), one-page handout, investor deck cover — dark, mark, headline, accent underline; matches `marketing/lumatick-business-sales-sheet.html`. |
| **Print collateral** | Table tent (front: review / back: improve), counter card, A4 poster — generated by in-app Print Mode; web provides downloadable PDF templates with `[[PLACEHOLDER QR]]` slots. |

---
---

# DELIVERABLE 15 — CONVERSION AUDIT

> Ranked by impact on the *real* funnel bottleneck (LVA-1: **Activate → Display →
> first-scan**, then trial→paid). Each item: gap → fix.

| # | Severity | Category | Gap | Fix |
|---|---|---|---|---|
| 1 | 🔴 Critical | Activation risk | **Billing not wired** — site can't actually convert to paid (LRA-1 #1). | Ship RevenueCat → `setTier` (LRA-A1) before driving traffic; until then the "Start free" path must still activate the free loop, and pricing CTAs route to trial signup, not a dead checkout. |
| 2 | 🔴 Critical | Trust / proof | **No testimonials, venue counts, or review-delta proof.** Cold remote outreach converts poorly without one reference. | Skeleton/placeholder testimonial slots now; prioritise capturing 1 reference venue (before/after) — the single highest-leverage asset. Never invent numbers. |
| 3 | 🔴 High | Activation risk | **Self-setup wall** — remote owners must self-deploy a physical device; the funnel leaks hardest at Activate→Display. | `/business/how-it-works` + 90-sec video + booked setup-call CTA on every Business page; pre-filled demo data; "any old phone works" + table-tent PDF so it works without a dedicated screen. |
| 4 | 🔴 High | Activation risk | **Silent scan-failure** — activated venues get no scans without a staff prompt. | Surface the one-line staff script prominently; ship printable table-tent/counter-card so customers self-scan; promise the weekly "reviews you gained" recap as a value hook. |
| 5 | 🟠 High | Measurement | **No analytics** → can't see activation/conversion drop-off. | Wire GA4 + PostHog + per-house events (signup_start, activate, qr_display_confirmed, trial_start, paid) before/at launch; it's also an LPRA-R1 gap. |
| 6 | 🟠 High | Friction | **Store/signup handoff** is the classic drop. | `/download` with device detection + QR + 15-sec preview (consumer); Business signup = email/social, "no card", explain why an account (cross-device). |
| 7 | 🟠 Med | Weak CTA | Generic "Start free" can under-perform vs outcome-led. | A/B "Start free — no card, no hardware" vs "Grow my reviews — free"; keep one primary action per screen. |
| 8 | 🟠 Med | Trust for /mo | Recurring price needs justification on the page, not just pricing. | ROI line on every Business page ("one review pays the month"), cancel-anytime, "review loop free forever", visible 14-day trial mechanic. |
| 9 | 🟠 Med | Compliance risk | Any "happy→public / unhappy→private" phrasing would breach Google/store policy *and* erode trust. | Audit every page for gating language; mandatory compliant caption on the Feedback section and the demo ("everyone can review publicly — private feedback is an extra channel"). |
| 10 | 🟡 Med | Trial risk | Trial value may not be *felt* (no scans → no review delta → no loss aversion). | Day-1/7/10/13 email sequence; show review delta in the recap; day-10 "want your logo locked on before the trial ends?" nudge ($14/$129). |
| 11 | 🟡 Low | Friction | Two pricing models can confuse if they collide. | Strict house separation; Pricing nav splits to "Business plans (monthly)" vs "Apps (own forever)"; never show the wrong axis on a URL. |
| 12 | 🟡 Low | Performance | Heavy hero motion hurts mobile CWV (primary funnel surface). | Poster + lazy hero, no autoplay video on mobile, store badges not QR on-device, `prefers-reduced-motion`. |

**The one-line audit conclusion:** the website is not the bottleneck — **billing +
one reference venue + foolproof self-activation/self-scan** are. Build the site to
*remove activation friction and carry proof*, not to add brochure polish; every
section should push the visitor toward a displayed QR that gets scanned.

---

## APPENDIX — Build order (Business-first, from Architecture §13)
1. Brand home `/` (Business-biased fork).
2. House 2 Business full funnel (`/business`, `/reviews`, `/feedback`, `/insights`, `/pricing`, `/demo`, `/how-it-works`, `/signup`). *Blocking dep: RevenueCat → `setTier`.*
3. Business programmatic SEO (`/business/industries/*`) + Reviews blog cluster.
4. House 1 Consumer (`/apps`, product pages, `/pricing`, `/download`).
5. Consumer programmatic SEO + remaining blog clusters.
6. Cross-house bridges (Signage → Business) + analytics/A-B.

## APPENDIX — Outstanding before launch (from canon, not website work)
Wire billing · apply Supabase migrations · ship Crashlytics/analytics · capture
8 hero screenshots from a live venue · 90-sec setup video · 1 reference
testimonial · finalise legal copy (`/privacy`, `/terms`) with counsel.