Skip to main content

PeakPOS Marketing Website Implementation Plan

Date: 2026-02-25 Source requirements: PeakPOS_Website_Dev_Brief.pdf (provided outside repo) Execution branch: jn/peakpos-website-plan

1. Scope​

This plan updates the Next.js marketing site at apps/websites/main-website to match the development brief.

Includes:

  • Public page architecture and routing (P0, P1, P2)
  • Homepage structure and required copy blocks
  • Demo funnel (/demo, /demo/confirmed) and data capture contract
  • Brand token migration (color, typography, logo constraints)
  • Footer/nav alignment
  • Website-side integration points required by AI bot workflows

Excludes for this branch:

  • Building full HubSpot/Zapier automations end-to-end
  • Producing final legal copy or design assets not yet delivered
  • Merchant/support portal product changes

1.1 Decision Log (2026-02-25)​

Resolved decisions from stakeholder input:

  • Primary domain: trypeakpos.com.
  • Pricing page: do not publish pricing yet.
  • CRM direction: HubSpot-first.
  • Testimonial handling: keep placeholder copy until real merchant quote is available.
  • Legal owner reference: Pinpoint POS.
  • Footer attribution line: Powered by Myriad Ventures (override from brief text).
  • PDF hosting decision delegated to dev team: implement with a single managed object store path.
  • Analytics baseline: Firebase Analytics already exists in current site bootstrap.

Still pending:

  • Certification platform choice for Bot #2 (Teachable vs alternative).
  • Final contact email inbox value for footer and outbound confirmations.
  • Final logo/badge asset delivery dates and files.

2. Current State Summary (Code Audit)​

Main findings in current implementation:

  • Homepage (app/page.tsx) is composed of generic B2B sections and does not match required hero, trust bar, stat callouts, vertical navigation, testimonial, or exact CTA behavior.
  • Demo flow is currently /contact + POST /api/request-demo; required flow is /demo + /demo/confirmed with a different field contract.
  • Required vertical landing pages do not exist.
  • Brand tokens do not match brief (#1742FF and Geist/Inter are currently used; brief specifies navy/teal palette and Arial).
  • Footer/nav information architecture differs from required links.
  • Some required pages exist but with placeholder content that does not match brief-specific messaging.

3. Requirements-to-Work Mapping​

3.1 P0 launch pages​

Required now:

  • /
  • /vape-shop-pos
  • /smoke-shop-pos
  • /liquor-store-pos
  • /demo
  • /demo/confirmed

Implementation actions:

  • Create route files:
    • apps/websites/main-website/app/vape-shop-pos/page.tsx
    • apps/websites/main-website/app/smoke-shop-pos/page.tsx
    • apps/websites/main-website/app/liquor-store-pos/page.tsx
    • apps/websites/main-website/app/demo/page.tsx
    • apps/websites/main-website/app/demo/confirmed/page.tsx
  • Keep /contact temporarily as a 301/308 redirect to /demo to preserve any existing links.

3.2 Homepage required sections​

Replace current section stack with required sequence:

  1. Problem-first hero (single CTA to /demo)
  2. Trust bar (brand attribution + award badge + founding merchants; attribution text updated to Myriad Ventures per stakeholder direction)
  3. 3 stat callouts with source labels
  4. Vertical navigation cards for vape/smoke/liquor
  5. Social proof/testimonial block (real quote or required placeholder)
  6. Secondary CTA (Book a Demo)
  7. Footer with required nav/legal/contact/copyright

Implementation actions:

  • Rework apps/websites/main-website/app/page.tsx to use a new homepage composition.
  • Replace or retire generic components:
    • components/hero.tsx
    • components/logo-marquee.tsx
    • components/features.tsx
    • components/showcase.tsx
    • components/metrics.tsx
    • components/cta-section.tsx
  • Add new components for strict brief alignment:
    • components/home/home-hero.tsx
    • components/home/home-trust-bar.tsx
    • components/home/home-stat-callouts.tsx
    • components/home/home-vertical-nav.tsx
    • components/home/home-testimonial.tsx
    • components/home/home-secondary-cta.tsx

3.3 Demo form + backend payload contract​

Brief-required form fields:

  • firstName (required)
  • lastName (required)
  • storeName (required)
  • businessType (required enum: Vape Shop / Smoke Shop / Liquor Store / Other)
  • state (required enum: 50 states)
  • phone (required)
  • email (required)
  • heardAboutUs (optional enum)

Implementation actions:

  • Replace current /contact UX with /demo form UX.
  • Update parsing contract in apps/websites/main-website/lib/request-demo.ts.
  • Update API route in apps/websites/main-website/app/api/request-demo/route.ts to emit new fields to webhook/CRM.
  • Add submission redirect to /demo/confirmed.
  • Add deterministic payload format for CRM workflow routing (business-type based PDF selection).

3.4 P1/P2 route backlog​

P1 (Month 2):

  • /features
  • /pricing (hold publish until pricing approved)
  • /certified-agents
  • /about rewrite to founding story + Pinpoint trust

P2 (Month 3+):

  • /blog
  • /compliance/state-guide
  • /compliance/age-verification
  • /resources/inventory-management
  • /resources/payment-processing
  • /compare/soundpos

Implementation actions:

  • Add the missing route files now as planned placeholders with production-ready structure and metadata.
  • Gate unfinished pages with explicit publish flags if needed (for example pricing).

4. Brand System Migration​

Required token migration:

  • Colors: #1F3864, #2E75B6, #00B0A0, #D5E8F0, #C00000, #FFFFFF
  • Typography: Arial scale and weights per brief
  • CTA styling: primary CTA uses Peak Teal with white text

Implementation actions:

  • Update apps/websites/main-website/app/globals.css with --peak-* variables and semantic aliases.
  • Update apps/websites/main-website/app/layout.tsx to remove conflicting type ramp assumptions and set Arial-first stack.
  • Refactor components/navbar.tsx and components/footer.tsx to consume new tokens.
  • Add temporary logo placeholders with strict dimensions/contrast until final design assets are delivered.

Required footer links:

  • Features, Pricing, Certified Agents, About, Blog
  • Privacy Policy, Terms of Service
  • Contact email (pending owner decision)
  • "Powered by Myriad Ventures" + copyright for Pinpoint POS

Implementation actions:

  • Replace current footer matrix in components/footer.tsx with brief-specific footer sections.
  • Update components/navbar.tsx to prioritize launch route set and /demo CTA.
  • Add merchant portal login link in nav/footer where appropriate.

6. AI Bot and Automation Integration Plan (Website Dependencies)​

The website branch will deliver integration-ready contracts, while automation workflows are configured separately.

Website-side deliverables:

  • Stable demo submission payload schema for HubSpot/Zapier triggers.
  • Business type normalization for PDF branching logic.
  • Confirmation page + conversion event emitters (using existing Firebase Analytics bootstrap).
  • Config surface for CRM endpoints and environment keys in:
    • apps/websites/main-website/next.config.js
    • .env docs in apps/websites/main-website/README.md
  • Asset URL contract for PDF attachments stored in Cloud Storage under a stable prefix (for example gs://peakpos-marketing-assets/demo-briefs/* mirrored to public HTTPS URLs consumed by HubSpot workflow steps).

External workflow tracks (non-website code):

  • Bot #1 Podcast Outreach (Google Sheet + Zapier + Claude)
  • Bot #2 Agent Certification Issuance
  • Bot #3 Demo Booking Confirmation automation
  • Bot #4 Referral tracking automation
  • Bot #5 Compliance brief generation API workflow

7. Delivery Phases​

Phase 0: Content and decision lock (blocker clearing)​

  • Confirm webhook auth pattern and property mapping inside HubSpot.
  • Confirm contact email for footer and confirmation sends.
  • Confirm legal pages source text owned by Pinpoint POS.
  • Confirm asset package from designer (logo/badges).
  • Confirm certification platform for Bot #2.

Phase 1: P0 website launch implementation​

  • Homepage rebuild with required sections/copy.
  • Vertical pages build (/vape-shop-pos, /smoke-shop-pos, /liquor-store-pos).
  • Demo flow rebuild (/demo, /demo/confirmed, payload parser + API route).
  • Nav/footer and token migration.
  • Route compatibility redirects.

Phase 2: P1 page rollout​

  • /features, /certified-agents, /about rewrite, /pricing remains unpublished until explicit approval.
  • Agent portal handoff link placement.

Phase 3: P2 SEO and comparison content​

  • Compliance/resource pillar pages.
  • SoundPOS comparison page.
  • Blog structure for ongoing content.

Phase 4: Automation production hardening​

  • End-to-end test with CRM + email + attachments.
  • Alerting for failed webhook deliveries.
  • Attribution and referral validation.

8. QA and Acceptance Checklist​

Functional:

  • All required P0 routes render and pass manual navigation checks.
  • Hero CTA and secondary CTA both resolve to /demo.
  • Demo form validates all required fields and rejects invalid enums/states.
  • Successful submit lands on /demo/confirmed and payload is delivered to configured endpoint.

Content and design:

  • Homepage headline remains problem-first.
  • No competing hero CTA.
  • Required trust/stat/copy blocks present verbatim where specified.
  • Typography/colors follow brief token set.

Engineering:

  • bazel run //apps/websites/main-website:build
  • bazel test //apps/websites/main-website:test
  • bazel run //apps/websites/main-website:start smoke check

Analytics and compliance:

  • Demo submission conversion event fires.
  • Privacy and Terms links visible from footer on all pages.
  • Placeholder markers remain only where explicitly approved (testimonial, award badge, merchant logos, pricing).
  • Footer attribution line uses Powered by Myriad Ventures.

9. Open Decisions (Must Resolve Before Full Build)​

  1. Certification platform (Teachable or alternative).
  2. Final logo/badge asset delivery dates and approved files.
  3. Templating tool for co-branded agent PDF.
  4. Referral link system of record.
  5. Final contact inbox for footer and transactional messages.
  6. HubSpot workflow ownership for automation operations.

10. Execution Order Recommendation​

  1. Close remaining blocker decisions in Section 9.
  2. Implement Phase 1 completely and ship as launch candidate.
  3. Validate conversion path and CRM/webhook delivery in staging.
  4. Release P1 and P2 in controlled follow-up milestones.