Discover and implement custom AI solutions to streamline your business operations, boost efficiency, and unlock new growth opportunities. Start with a quick self-assessment.
Kompani Proposal Playbook

KOMPANI PROPOSAL PLAYBOOK
Build a "/proposal" page: an interactive, client-branded proposal with e-signing.
Follow every step below exactly. Do not skip sections. Do not invent extra features.

==================================================
0. BEFORE YOU START: STUDY THE CLIENT'S SITE (THIS APP)
==================================================
The proposal lives INSIDE the client's own app and must look like it belongs there.
- Reuse the app's existing design tokens (index.css / tailwind config), fonts and logo. Do NOT invent a new palette.
- Identify: background color, text color, ONE brand/accent color, heading font, body font, and whether the site is DARK or LIGHT.
- Accent color is an ACCENT only: eyebrow labels, section numbers, thin lines, the primary button, small highlights. Never fill large areas (hero backgrounds, whole sections, stat boxes) with a bright accent color.
- Dark site (e.g. Forum): hero sits on the site's own dark background with a large photo behind it (dark gradient overlay on the left so text is readable). Light site (e.g. Kate Gold): light background, dark text, accent only for details.
- Use the strongest real photography already in the app (hero shots, product, people). Never use stock images when the app has its own.
- Make sure every font used is actually loaded (Google Fonts import), including heading, body, mono and the signature script font.
Reference proposals built this way:
  https://forum.kompani.ai/proposal  (dark, bold, uppercase display headings)
  https://kate-gold.kompani.ai/proposal  (light, elegant)
  https://lischerong.kompani.ai/proposal

==================================================
1. WHAT IT IS
==================================================
A single long page at /proposal that is the proposal, the scope, the pricing and the contract in one document.
The client reads it, signs it at the bottom, and both signatures then show on the page for good.
- Own simple header and footer, NOT the main site's menu or footer: client logo or monogram on the left, nothing on the right. NO "Sign In" button, login link or account menu anywhere on the proposal page.
- Footer (dark band, same on every proposal): left side the full Kompani logo image https://media.base44.com/images/public/689cc795edad485aef367aef/a40a2c0c2_Kompani-Logo-GetAheadStayAhead-24.png (about 56px tall, keep its proportions, never crop or stretch it), linking to https://kompani.ai. Pick ONE logo color that reads best on the footer background:
    - Dark footer: show the logo all white (CSS filter: brightness(0) invert(1)).
    - Light footer: show the logo in its original green and grey, or in the client's accent color if that looks better.
    - Client color: draw it as a CSS mask so the shape is filled with the accent color: a div with width/height matching the logo, background-color: [accent], mask-image / -webkit-mask-image: url(logo), mask-size: contain, mask-repeat: no-repeat.
    Always keep the whole logo one color when recolored, with good contrast against the footer. Do not add a separate "Kompani" text label next to it. Under it: "Prepared for [Client Name] · [Client Company]". Right side: "Proposal [NUMBER] · © [Year] Kompani". No site menu links in the footer.
- A thin progress bar at the top shows scroll progress. A small dot navigation on the right edge jumps to each section.
- Hero: eyebrow label in accent mono caps, very large headline, one-paragraph subtitle, 4 stat boxes (Features, Modules, Weeks to launch, Total investment), two buttons ("View scope" solid accent, "View investment" outlined).
- Each numbered section: small mono label "01 / SECTION NAME" in accent, then a large title.
- Must print / save to PDF cleanly: white background, dark text, accent kept for lines and numbers, each numbered section starts on a new page, signing form hidden. Page footer: "Kompani · Proposal [NUMBER] · Page X of Y".
- Access and locking:
  - PROPOSAL LOCK: until Kompani unlocks the site, /proposal is the ONLY page a visitor can see. Add one setting in a single config file: PROPOSAL_LOCK = true. While it is true, every other URL (/, /about, /anything, unknown paths) immediately redirects to /proposal with a replace redirect (no history entry), so removing "/proposal" from the address bar always lands back on the proposal. Admins who are logged in still see the whole app. Unlocking = set PROPOSAL_LOCK = false; nothing else changes.
  - /proposal opens without logging in. Put its route outside the app's login check so the platform never shows a login screen to the client.
  - /proposal is NOT linked from the site's menu, footer or sitemap. Add noindex, nofollow meta so search engines skip it.
  - The proposal content is read-only: it comes from the data files, never from a form or editable records, so nobody can change it from the page.
  - Once signed it is locked: the form disappears for good, both signatures show, and any new signing attempt is rejected by the backend (409).
- Fully responsive (mobile first; stat boxes 2 columns on mobile, 4 on desktop).

==================================================
2. KEEP ALL WORDING IN DATA FILES
==================================================
No proposal text is written directly into the page components. It all lives in three data files, so the next proposal is a copy-and-edit job.

A) proposal.js (commercial)
- client: { company, names, short }
- PRICE_PER_FEATURE (e.g. 195), WEEKS (build length)
- scope: list of { category, features[] }. Total feature count is calculated from this list. Module count = number of categories.
- pricing (calculated, never typed):
    featureCount = total number of features
    standard     = featureCount × PRICE_PER_FEATURE
    total        = the fixed price
    discount     = standard − total
    discountPct  = discount as a percentage of standard (rounded)
- schedule: payment steps, e.g. [[3000, 'Due on signing'], [1000, 'At launch']]. Steps must add up to total.
- platform (what's included with the platform), deferred (later phase features), strategy, timeline (phases by week), thirdPartyFees, paymentTerms.
- usd() helper formatting numbers as $X,XXX (add .00 only where cents matter).

B) proposalContract.js (legal)
- provider: { company: 'Kompani', signer: 'Jan Havmoeller', title, signedDate }. Kompani signs in advance.
- meta: { number, date, validUntil }. Number format: KMP-YYYY-MMDD-[CLIENTCODE]. It is the proposal's unique ID.
- notIncluded: rows of { item, how it's handled }.
- terms: list of [heading, clause]. Include at least: Payment; Hourly rate for changes and updates after launch; Change requests (how priced and approved); Ownership & Transfer; Termination (14 days' notice, payment for work completed, client gets a data export once paid up); Hosting & credits; Confidentiality; Limitation of liability; Governing law.
- nextSteps, discoverability (SEO / AI-search notes), about (agency bio plus exactly these 4 stats in a row, large number with a small label under it: "30+" Years in branding & technology · "400+" Businesses served · "2" Offices · Charlotte & Salt Lake City · "50" States · Working virtually).

C) proposalStory.js (the pitch)
- summary, plain (plain-English explanation), problems, rootCause, personas (a "day in the life" for each type of user).

==================================================
3. SECTION ORDER AND CONTENT PATTERNS (numbered)
==================================================
HERO (all three reference proposals use this exact pattern)
- Full-bleed photo from the client's world, heavily darkened (charcoal overlay ~70-85%) so white text reads. This applies even when the client site is light.
- Header bar: client logo (or a monogram like "LE" / "KG" in the accent color + company name) on the left. No Sign In button.
- Eyebrow in accent mono caps: "PROPOSAL [NUMBER] · PREPARED FOR [CLIENT]" or "PLATFORM PROPOSAL".
- Headline 2-3 lines, one big promise in the client's voice: "A home worthy of Forum, and a shop that finally sells like one." / "A website that hires like you do." / "A digital home worthy of Lischerong Enterprises, and a deal engine behind it." Use the site's heading font. Uppercase only if the brand is uppercase (Forum).
- One-paragraph subtitle: "We will replace ... with ... One platform, built around how you actually ..."
- 4 stat boxes in a row with thin borders: [N] Phase 1 features · [N] Modules · [N] Weeks to launch · $[total] Total investment.
- Two buttons: "View Scope" (accent) and "View Investment" (outlined).
- Optional strip under the hero: Client · Investment · Prepared by.

SECTION HEADER PATTERN (every numbered section)
- Small mono eyebrow "/ [Short name]" (e.g. "/ Overview", "/ The problem", "/ Lead engine"); the same short name is used in the table of contents.
- Big headline in the heading font, a short phrase ending with a period: "Document details." · "In plain English." · "What's holding growth back." · "The core of the build." · "The same Tuesday, twice." · "Design direction." · "Phase 1: [N] features across [N] modules."

01 Document details: proposal number, date, valid until, prepared for, prepared by. Below it, a clickable table of contents listing every numbered section.
02 In plain English: one intro paragraph, then 6 numbered cards (01-06), each with a short title and one sentence. The last card is always about "Easy to keep fresh" (the client updates content without a developer).
03 The problem: 4-6 short bullet facts "where things stand today", then a highlighted callout labeled "Root cause" with one or two sentences (e.g. "[Client]'s 15 years of expertise isn't packaged into a system. Without one, every new client starts from zero.").
04 The core of the build: named after the main engine (e.g. "Ecommerce", "Lead engine", "Deal engine"). One intro paragraph, then 6 numbered capability cards, then "How we'll help" with 3 cards (e.g. Migration/Content & setup, Launch support, Growth after launch).
05 A day in the life: headline "The same [weekday], twice". 3 personas (a customer type, the owner, the team). Each persona shows "Today" (1 sentence of pain), "With the platform" (4 numbered steps), and a one-line outcome in italics.
06 Design direction: intro "A glimpse of the direction ... Fragments only; the full experience is revealed together after kickoff." Then 3 short principles (palette, typography, imagery), 4 color swatches with name + hex taken from the site, a type pairing line ("[Heading font] for headlines · [Body font] for body text"), and a mood gallery of 3 images, each with a short caption "[Moment] · three, mood, words": 1) "The first impression" (the hero image), 2) "The approach" (a calm, structured scene from their work), 3) "The partner" or "The people" (a real photo of the owner or team when the site has one). The type line may describe roles instead of font names, e.g. "Tight grotesk for headlines · Serif for voice · Mono for labels".
07 Scope: title "Phase 1: [N] features across [N] modules." with "$195 per feature" tag. One card per category: name, "[N] feature(s)" (singular when 1), bullet list. Categories can be small (1 feature is fine, e.g. "Talent Network").
   Then, when branding/strategy is part of the deal, a "Brand & business foundation" block: "Included in this proposal. The strategic groundwork behind the site." Items: Branding, Positioning, Business model concept, Identity concept ("One AI-generated concept logo is included."), and a final line making clear logo revisions and alternate concepts are not included and will be quoted separately.
   Then a "Deferred / Phase 2" block: "Not included in this proposal. Recommended upgrades, quoted separately when you're ready." Each item has a title and one-line description written for this client (typical: Live client portal, Lead CRM, Candidate/customer pipeline, Proposals & e-sign "like this one", Automated email nurture, Booking & calendar sync, AI assistant). End with "+ Anything we can dream up, as a team, once the site is live."
08 Not included: "Outside this engagement." Rows of item + how it's handled. Typical: Copywriting beyond the first draft (client supplies final bio, case studies & testimonials) · Professional photography / video (quoted separately or supplied by client) · Paid advertising & ad spend (separate engagement) · Third-party subscriptions (billed directly by each provider) · Features not listed in Scope ($195 per feature via change request).
09 Strategy: "How the site wins." 3-4 short cards, each a bold 3-5 word title + one sentence specific to the client (e.g. "Two lanes, one decision", "Authority compounds", "Own the bench").
10 Security: "Built on secure, managed infrastructure." 9 cards: Enterprise-grade hosting · Role-based data access · Confidential [client data type] (rewrite for the client, e.g. candidate data) · Secure sign-in · Private file storage · Tamper-evident signatures · Backups & resilience · No servers to maintain · You own your content.
11 Discoverability: "Found on Google and in AI answers." 3 cards: Search-ready structure · Structured data · Topic authority.
12 Timeline: "[N] phases, [weeks in words] weeks to launch." One card per phase: week label ("Week 1", "Weeks 2–3"), phase name, one line. Typical: Discovery & Positioning · Design & Build · Content & Proof · Launch.
13 Investment: "Clear scope. Clear price." One row per scope category: "[Category] [N] × $195" and its amount. Then "Standard price · [N] Phase 1 features × $195", "Discount ([%])" as a negative amount, and a bold "Total". All calculated.
14 Payment: "Payment schedule." Big amount + label per step (e.g. $2,000 Due on signing · $2,000 Upon completion), then "Invoices are due within 7 days. Payment by ACH or card."
15 Fees: "Third-party fees." Platform hosting (included, no monthly subscription fee) · Domain name (~$15/yr, owned by the client) · Custom email domain (optional, per provider).
16 Next steps: "What happens next." 4 numbered steps: Sign this proposal below · Pay the signing invoice · Kickoff call within 3 business days · Launch in [N] weeks.
17 Legal: "Terms & Conditions." First a short summary list (Payment, Revisions "One round of refinement per module is included", Ownership, Changes, Validity "valid until [date]"), then "Full terms & conditions" numbered 1-9: Payment (work begins once signing payment is received; late balances may pause work) · Hourly rate ($195 per hour in 6-minute increments) · Change requests (quoted in writing, approved before work) · Ownership & Transfer (app transferred to client's account on request) · Termination · Hosting & credits · Confidentiality · Limitation of liability (limited to fees paid; no indirect damages) · Governing law (State of North Carolina).
18 Agreement: "Ready to begin." Signatures (section 4).
LINKS TO KOMPANI.AI (required, at least these 4 places, all live links to https://kompani.ai opening in a new tab with rel="noopener"):
- Document details: "Prepared by Jan Havmoeller, Founder · Kompani", with "Kompani" linked.
- About: the first mention of "Kompani.ai" in the intro paragraph is linked, and the section ends with a "Visit kompani.ai →" text link.
- Footer: the Kompani logo is linked.
- Agreement: "Kompani" in the provider signature block is linked.
Links use the accent color with underline on hover; in print they show as plain text.

19 About: "Websites, apps and AI, built around your business." 4 short paragraphs (who we are, what we build, agile early-concept approach, training and support after launch), the 4 stats, "What we build" (Websites & brand · Custom platforms & CRMs · AI automation), "How we work" (Inquiry & review · Proposal · Build · Launch & grow), and "Leadership": Jan Havmoeller, Chief Optimizer / Developer · Charlotte, NC, and Emma Havmoeller, Optimizer / Developer · Salt Lake City, UT, each with a 2-sentence bio.

WRITING STYLE
- Plain English, short sentences, no jargon, no em-dashes.
- Write about the client's real business: their products, people, history and customers, as found on their site.

==================================================
4. HOW SIGNING WORKS (THE IMPORTANT PART)
==================================================
Entity ProposalApproval
- Signer: name*, title, email*, phone
- Billing: billing_name, billing_email
- signature* (typed name), notes, total (number), proposal_number, client_company
- agreed_terms (boolean), authorized_signer (boolean)
- Proof: terms_snapshot (text), terms_hash (text), signer_ip, user_agent
- central_synced (boolean, default false)
- RLS: admin only for create, read, update, delete. Signing goes through a backend function.

Backend function getProposalStatus (input { proposal_number })
- Looks up the latest approval with that number using service-role access.
- Returns { signed: false } if none, else { signed: true, name, title, signature, email, date }.

Backend function signProposal (input: form data + total, proposal_number, client_company, terms_snapshot)
- Validate: name, email, signature, billing name, billing email, both checkboxes. Missing -> 400 with a clear message.
- If an approval already exists for this proposal number -> 409 "This proposal has already been signed."
- SHA-256 of terms_snapshot -> terms_hash.
- Record IP (x-forwarded-for or cf-connecting-ip) and user-agent.
- Create the ProposalApproval with service-role access.
- Forward to Kompani's central hub (REQUIRED, see section 5).
- Return { ok: true, id }.

Signature section on the page
- On load call getProposalStatus; show "Loading…" while waiting.
- Two signature blocks side by side: company, signature (italic script font), printed name, title, date.
- Kompani's block is always shown, pre-signed from provider.
- Client's block appears only once signed.
- Title: "Ready to begin" before signing, "Signed agreement" after.
- After signing a thank-you box: "A copy of your signed agreement has been emailed to [email]."
- Form before signing: Full name*, title, email*, phone; "Invoices should be sent to": billing contact name* and billing email(s)* (comma-separated); Notes; "Type your full name to sign*" in a large italic font.
- Legal line built from data: "By signing, I approve this proposal and agree to its Terms & Conditions on behalf of [company] for a total of [total], payable [schedule]. Additional features are charged at [rate] per feature, and post-launch work is billed at [rate] per hour."
- Two required checkboxes: "I have read and agree to the scope, pricing and Terms & Conditions in this proposal." and "I am authorized to sign this agreement on behalf of my company."
- Full-width "Approve & Sign" button, disabled while saving. Errors in red under the form.
- On submit send a text snapshot of the entire proposal (all three data files) as terms_snapshot so the signed version is frozen.
- After success reload the status so the form is replaced by both signatures and the thank-you note.

Emails after signing
- Workflow on ProposalApproval create -> backend function notifyProposalApproved with the record id.
- It formats the total as currency and the date in America/New_York, then sends:
  ProposalApproved to Jan@kompanigroup.com with all signer details and a link to the live proposal.
  ProposalSignedCopy to the signer: confirmation, signature details, total, link back to the signed proposal.
- Sender name: Kompani.

==================================================
5. SEND THE SIGNATURE TO KOMPANI (REQUIRED)
==================================================
Ask the user to add two secrets: HUB_URL and HUB_KEY.
  HUB_URL = https://kompani.base44.app/functions/receiveSignedProposal
  HUB_KEY = the shared Kompani hub key. Jan keeps it in his password manager ("Kompani Hub Key"). It is the same key in every client app and must match KOMPANI_HUB_KEY in the central Kompani app. Never write the key into code, the proposal or chat.
  If the key is lost or changed: set the new value as KOMPANI_HUB_KEY in the central Kompani app first, then update HUB_KEY in every client app. An app with the old key stops delivering signed proposals.
In signProposal, after creating the record, POST in the background (10-second timeout) to HUB_URL with header x-hub-key: HUB_KEY and JSON:
  { source_app: '[App Name]', proposal_url: 'https://[client domain]/proposal', ...record, id: record.id,
    billing_contact: { name, email }, signer: { name, email, title } }
On success set central_synced = true. The signer never waits for this.

==================================================
6. REUSING IT FOR THE NEXT CLIENT
==================================================
Copy the three data files, edit them, and give it a new proposal number. Pricing, totals, legal wording and signing all update on their own.

==================================================
7. FINAL CHECKLIST (verify before saying done)
==================================================
[ ] Colors and fonts match this app; accent color never fills large areas
[ ] Every font is loaded; signature uses a script font
[ ] Hero photo is a real image from this app
[ ] Feature count, standard price, discount, total and schedule are all calculated and add up
[ ] Hero matches the pattern: dark photo, eyebrow, big headline, 4 stats, 2 buttons
[ ] All 19 sections present and numbered in order
[ ] Footer shows the Kompani logo, "Prepared for" line and proposal number
[ ] /proposal opens without login and has no Sign In button
[ ] With PROPOSAL_LOCK = true, every other URL redirects back to /proposal for visitors
[ ] /proposal is not in the menu or sitemap
[ ] Page is noindex and prints cleanly to PDF
[ ] Signing works once; second attempt shows "already signed"
[ ] Both emails send; record reaches Kompani (central_synced = true)