oliver
480 lines
18 KiB
Markdown
480 lines
18 KiB
Markdown
# AGENTS.md — my-biz.app Landing Page
|
||
|
||
Read this file fully before taking any action.
|
||
|
||
---
|
||
|
||
## Project Context
|
||
|
||
Single-page static landing page for **my-biz.app** — a hassle-free all-in-one back-office product built on Odoo Community Edition, targeting NGOs, Startups, Manufacturers, and Restaurants.
|
||
|
||
| Item | Detail |
|
||
|---|---|
|
||
| Live page | `index.html` — the only production HTML file |
|
||
| Design | Warm coffee/latte light theme · cream/burnt-orange/dark-roast |
|
||
| Styling | 100% inline `<style>` in `index.html` — no external CSS |
|
||
| JavaScript | Inline `<script>` at bottom of `index.html` — no external JS except MotionFlow |
|
||
| External dep | MotionFlow CDN (CSS + JS) — the only allowed external dependency |
|
||
| Archive | `old/` — previous style explorations (do not touch) |
|
||
|
||
---
|
||
|
||
## File Map
|
||
|
||
```
|
||
my-biz/
|
||
├── index.html ← production page (only file to edit)
|
||
├── style.html ← brand style guide for designers (read-only)
|
||
├── logo.png ← nav logo image (36px tall in nav)
|
||
├── AGENTS.md ← this file
|
||
├── start ← dev server launcher
|
||
└── old/ ← archived variants (read-only, never touch)
|
||
```
|
||
|
||
---
|
||
|
||
## External Dependencies (Allowed)
|
||
|
||
- **MotionFlow CSS** — `https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.css` (in `<head>`)
|
||
- **MotionFlow JS** — `https://cdn.jsdelivr.net/npm/@slicemypage/motionflow@latest/dist/motionflow.min.js` (before `</body>`)
|
||
- MotionFlow auto-initializes. No manual JS setup needed.
|
||
|
||
No other external CSS, JS, or fonts are permitted.
|
||
|
||
---
|
||
|
||
## Design System
|
||
|
||
### CSS Custom Properties (defined in `:root`)
|
||
|
||
| Token | Value | Usage |
|
||
|---|---|---|
|
||
| `--bg` | `#efebe9` | Latte — main page background (LIGHT) |
|
||
| `--surf1` | `#e8e0da` | Warm Latte — alternate section background |
|
||
| `--card` | `#fff3e0` | Cream — cards, modal, chat panel |
|
||
| `--lift` | `#f5ece4` | Lifted Cream — card hover, featured card bg |
|
||
| `--bg-deep` | `#3e2723` | Dark Roast — footer, overlays |
|
||
| `--border` | `rgba(93,64,55,0.25)` | All borders and grid gaps |
|
||
| `--grey` | `#a1887f` | Warm Taupe — muted text, captions |
|
||
| `--silver` | `#6d4c41` | Deep Brown — secondary text |
|
||
| `--light` | `#5d4037` | Medium Roast — body text |
|
||
| `--gold` | `#e65100` | Burnt Orange — primary CTA, accents |
|
||
| `--gold-hi` | `#fb8c00` | Warm Orange — hover highlight |
|
||
| `--gold-lo` | `#bf360c` | Deep Burnt — gradient start/end stop |
|
||
| `--gold-glow` | `rgba(230,81,0,0.18)` | Box-shadow glow on gold elements |
|
||
| `--white` | `#3e2723` | Dark Roast — headings on light background |
|
||
|
||
**NEVER use raw hex values in HTML or CSS.** Always reference the token.
|
||
|
||
### Brand Gradient (5-stop, 135deg)
|
||
|
||
Applied to: nav logo (text clip), footer logo, modal title, featured pricing price, pricing badge, `.btn-primary`, featured `.pricing-cta`, `.custom-rate`.
|
||
|
||
```css
|
||
background: linear-gradient(
|
||
135deg,
|
||
var(--gold-lo) 0%,
|
||
var(--gold) 38%,
|
||
var(--gold-hi) 55%,
|
||
var(--gold) 75%,
|
||
var(--gold-lo) 100%
|
||
);
|
||
```
|
||
|
||
Text clip usage (for gradient text):
|
||
```css
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
```
|
||
|
||
### Typography
|
||
|
||
| Use | Font | Size |
|
||
|---|---|---|
|
||
| Headings (`h1`, `h2`, card titles, pricing, modal title) | `Georgia, "Times New Roman", serif` | varies |
|
||
| Body / UI / buttons / forms / chat | `"Segoe UI", system-ui, -apple-system, sans-serif` | 0.65–1.0rem |
|
||
| Labels / section labels / tags | system-ui, UPPERCASE, wide tracking | 0.62–0.78rem |
|
||
|
||
### No @keyframes Rule
|
||
|
||
**There are zero `@keyframes` in `index.html`.** Motion is limited to CSS `transition` on hover/focus states only. MotionFlow handles all scroll animations via its own internal logic — that is allowed and expected. Do not add any `@keyframes` or `animation` properties.
|
||
|
||
---
|
||
|
||
## Page Structure
|
||
|
||
All sections are in normal document flow. The user scrolls the page. Sections appear in this order:
|
||
|
||
```
|
||
<nav> sticky, 62px, cream bg with burnt-orange bottom border
|
||
<div#chat-panel> fixed dropdown below nav-right, hidden by default
|
||
<section.hero#home> 55vh, latte bg, parallax image behind content
|
||
<section#verticals> MotionFlow ticker with image cards linking to subdomains
|
||
<section#news> latte bg, 4-card news grid
|
||
<section#pricing> surf1 bg, 3 pricing cards (Side Hustle / On the Rise / Empire)
|
||
<section#customization> latte bg, 2 custom cards
|
||
<footer> bg-deep (dark roast), 3px burnt-orange top border
|
||
<div#modal-overlay> fixed, shown/hidden by JS
|
||
```
|
||
|
||
All sections use `scroll-margin-top: 62px` to offset the sticky nav.
|
||
|
||
---
|
||
|
||
## Nav
|
||
|
||
```
|
||
display: flex; align-items: center; gap: 16px;
|
||
background: rgba(255,243,224,0.97); ← CREAM (logo readable)
|
||
border-bottom: 2px solid var(--gold);
|
||
box-shadow: 0 2px 14px rgba(62,39,35,0.1);
|
||
height: 62px; padding: 0 8vw;
|
||
```
|
||
|
||
Layout:
|
||
|
||
```
|
||
[logo.png img] [gap 12px] [Book Meeting] [Free Trial] [→ auto margin →] [💬 chat input 440px wide ❯]
|
||
```
|
||
|
||
- **Logo** `.nav-logo` — `<img src="logo.png">` — 36px tall
|
||
- **`.nav-center`** — flex, gap 12px — holds Book Meeting + Free Trial CTAs
|
||
- **`.nav-right`** — `margin-left: auto` — holds `.nav-chat` widget + mobile-only Free Trial button
|
||
- **`.nav-cta`** (Free Trial) — burnt-orange border + text, fills on hover
|
||
- **`.nav-cta-book`** (Book Meeting) — taupe border, grey text, warm-orange on hover
|
||
- **`.nav-chat`** — 440px wide, subtle tint, toggle 💬 button + text input + send ❯ button
|
||
|
||
**Responsive:**
|
||
- `≤ 768px` — `.nav-center` hidden, `.nav-chat` hidden, mobile Free Trial button appears
|
||
|
||
---
|
||
|
||
## Chat Panel (`div#chat-panel`)
|
||
|
||
```
|
||
position: fixed; top: 62px; right: 8vw; width: 440px;
|
||
background: var(--card);
|
||
border-top: 2px solid var(--gold);
|
||
```
|
||
|
||
- Toggles open/close via 💬 button in `.nav-chat`, or `Escape` key, or click outside, or on scroll
|
||
- Shows chat history (240px tall, scrollable) and a message input at the bottom
|
||
- Hidden on `≤ 768px`
|
||
|
||
**Public API (exposed on `window._mbs`):**
|
||
- `window._mbs.appendMsg(role, text)` — appends a message to the chat history
|
||
- `window._mbs.openSilent()` — opens the panel without triggering the default greeting
|
||
|
||
**Chat Webhook:**
|
||
```
|
||
POST https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat
|
||
Content-Type: application/json
|
||
Body: { "action": "sendMessage", "chatid": "<uuid-v4>", "chatInput": "<text>" }
|
||
```
|
||
|
||
**30-second new-user probe:** fires once after 30 seconds, collects browser/OS/device/geo fingerprint, POSTs to the chat webhook, displays the response, and auto-opens the chat panel.
|
||
|
||
---
|
||
|
||
## Hero (`section.hero#home`)
|
||
|
||
- `min-height: 55vh`, flex column, centred, latte bg, `position: relative; overflow: hidden`
|
||
- **Parallax bg**: `<div class="hero-bg-wrap"><img data-mf-parallax data-mf-parallax-speed="0.4" /></div>` — Unsplash office image, 28% opacity with latte overlay
|
||
- Parallax disabled on tablet/mobile: `data-mf-parallax-speed-tablet="0" data-mf-parallax-speed-mobile="0"`
|
||
|
||
Elements:
|
||
- `.hero-eyebrow` — pill, burnt-orange border + text
|
||
- `h1` — Georgia, 2.6rem, dark-roast; `<em>` in burnt-orange
|
||
- `.hero-sub` — silver, 0.92rem
|
||
- `.hero-tagline` — cycling typing text via MotionFlow (`data-mf-text-type="typing"`), 3 phrases
|
||
- `.hero-actions` — two buttons:
|
||
- `.btn-primary` `id="open-modal-hero"` → **opens modal**
|
||
- `.btn-secondary` → scrolls to `#verticals` (Book Meeting)
|
||
- `.hero-trust` — small muted trust line
|
||
|
||
All hero elements carry `data-mf-animation="fade-up"` with `data-mf-animation-once="true"` and staggered delays.
|
||
|
||
---
|
||
|
||
## Verticals (`section#verticals`)
|
||
|
||
- Background: `var(--surf1)`
|
||
- **MotionFlow ticker**: `<div class="vtick-wrap" data-mf-ticker data-mf-ticker-speed="55">`
|
||
- Direct children are `<span>` elements, each containing a `.vtick-card` link
|
||
|
||
**5 cards:**
|
||
|
||
| Vertical | Link | Tag |
|
||
|---|---|---|
|
||
| NGO & Non-Profit | `https://ngo.my-biz.app` | Donor CRM · Impact Reports |
|
||
| Startups | `https://startups.my-biz.app` | Invoicing · CRM · Reporting |
|
||
| Manufacturing | `https://manufacturing.my-biz.app` | MRP · Inventory · Quality |
|
||
| Restaurants | `https://restaurants.my-biz.app` | POS · Payroll · Food Cost |
|
||
| Agentic Businesses | `https://agentic.my-biz.app` | AI · Automation · Agents |
|
||
|
||
Card CSS: `.vtick-card` — 220px wide, image (140px tall), `.vtick-name` (Georgia, dark-roast), `.vtick-tag` (burnt-orange uppercase label)
|
||
|
||
---
|
||
|
||
## News (`section#news`)
|
||
|
||
- Background: `var(--bg)`
|
||
- `.news-grid` — `auto-fit minmax(220px,1fr)`, `gap: 24px`
|
||
- **4 cards**: NGO · Startups · Manufacturing · Restaurants
|
||
- `.news-card` — `border-top: 1px solid var(--border)`, hover → burnt-orange
|
||
- Card anatomy: `.news-area` (burnt-orange label) · `.news-title` (Georgia) · `.news-teaser` (silver) · `.news-date` (grey)
|
||
- MotionFlow stagger: `data-mf-stagger-animation="fade-up"` on the grid element
|
||
|
||
---
|
||
|
||
## Pricing (`section#pricing`)
|
||
|
||
- Background: `var(--surf1)`
|
||
- `.pricing-grid` — `auto-fit minmax(300px,1fr)`, no max-width, gold hairline gaps
|
||
- **3 cards**: Side Hustle · On the Rise (featured) · Empire
|
||
|
||
| Plan | Price | Key detail |
|
||
|---|---|---|
|
||
| Side Hustle | $214/yr | Up to 3 users, community support |
|
||
| On the Rise | $395/yr | Featured card — "Most Popular" badge |
|
||
| Empire | $750/yr + $500 setup | Self-hosted, "My house! My horse! My server!" |
|
||
|
||
**Plain cards** (Side Hustle, Empire):
|
||
- `background: var(--card)`
|
||
- CTA: burnt-orange border + text, fills on hover
|
||
|
||
**Featured card** (On the Rise):
|
||
- `background: var(--lift)`
|
||
- `box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--gold-glow)`
|
||
- `.pricing-price` — 5-stop gradient text
|
||
- `.pricing-badge` — 5-stop gradient background, dark text
|
||
- MotionFlow: `data-mf-animation="zoom-in"` `data-mf-animation-once="true"`
|
||
|
||
**Empire card extras:**
|
||
- `.pricing-setup` — shows setup fee in burnt-orange
|
||
- Feature list includes self-hosted server/VPS installation and maintenance
|
||
|
||
Feature list uses `—` em-dash in burnt-orange as bullet (`::before`).
|
||
|
||
All pricing CTAs use `class="open-modal"` → **opens modal**.
|
||
|
||
---
|
||
|
||
## Customization (`section#customization`)
|
||
|
||
- Background: `var(--bg)`
|
||
- `.custom-grid` — `auto-fit minmax(300px,1fr)`, gold hairline gaps
|
||
- **2 cards**: Hire Any Odoo Developer · Our In-House Team
|
||
- `.custom-card::after` — 2px gradient bar, `scaleX(0)` → `scaleX(1)` on hover (transition)
|
||
- `.custom-rate` — 5-stop gradient text, Georgia, 1.4rem (`$65 USD / hour`)
|
||
- `.custom-link` — burnt-orange, uppercase, underline reveals on hover
|
||
|
||
---
|
||
|
||
## Footer
|
||
|
||
```
|
||
background: var(--bg-deep); ← dark roast
|
||
border-top: 3px solid var(--gold);
|
||
padding: 72px 8vw 40px;
|
||
```
|
||
|
||
- **Brand column** — logo (5-stop gradient text), tagline (grey), `flex: 2`
|
||
- **3 link columns** — Product · Company · Legal — each `flex: 1`
|
||
- `.footer-col h4` — burnt-orange, 0.65rem, uppercase, tracked
|
||
- `.footer-col a` — grey → burnt-orange on hover
|
||
- `.footer-bottom` — flex row, grey text, gold rule separator on top
|
||
- MotionFlow: `data-mf-stagger-animation="fade-up"` on `.footer-top`
|
||
|
||
---
|
||
|
||
## Modal
|
||
|
||
### Triggers
|
||
|
||
| Element | ID / Class |
|
||
|---|---|
|
||
| Nav "Get Started" | `id="open-modal"` |
|
||
| Hero "See Plans & Pricing" | `id="open-modal-hero"` |
|
||
| All pricing CTAs | `class="open-modal"` |
|
||
|
||
All triggers call `openModal()`. The JS attaches listeners on `DOMContentLoaded`.
|
||
|
||
### Structure
|
||
|
||
```
|
||
#modal-overlay fixed, inset 0, backdrop-filter blur(14px), rgba(62,39,35,0.7)
|
||
#modal-box max-width 480px, var(--card) bg, burnt-orange top border (3px)
|
||
#modal-close × button, top-right
|
||
.modal-title Georgia, 5-stop gradient text
|
||
.modal-subtitle grey, 0.82rem
|
||
#trial-form
|
||
.modal-field-group (email)
|
||
.field-label burnt-orange, uppercase, 0.62rem
|
||
input[type=email] .modal-field
|
||
.modal-field-group (location)
|
||
.field-label
|
||
select.modal-field custom burnt-orange SVG arrow
|
||
option: Boston · Manchester · Mumbai · saopaulo · Meppel · Sydney
|
||
input[hidden] name="product" value="odoo_19" ← ALWAYS odoo_19, never change
|
||
input[hidden] name="utm_source" value="homepage"
|
||
input[hidden] name="utm_medium" value="direct"
|
||
input[hidden] name="utm_campaign" value="none"
|
||
input[hidden] name="utm_term" value=""
|
||
input[hidden] name="utm_content" value=""
|
||
button.modal-submit "Start Free Trial"
|
||
#modal-confirm shown after successful POST
|
||
.confirm-title burnt-orange
|
||
.confirm-sub silver
|
||
button.modal-submit "Close" → closeModal()
|
||
```
|
||
|
||
### Trial Webhook
|
||
|
||
```
|
||
POST https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a
|
||
Content-Type: multipart/form-data (FormData)
|
||
```
|
||
|
||
The form POSTs via `fetch()`. Both `.then()` and `.catch()` show the confirmation — the webhook may not return CORS headers.
|
||
|
||
### Modal CSS Rules (summary)
|
||
|
||
| Rule | Value |
|
||
|---|---|
|
||
| Overlay bg | `rgba(62,39,35,0.7)` |
|
||
| Overlay backdrop | `blur(14px)` |
|
||
| Box border-top | `3px solid var(--gold)` |
|
||
| Field bg | `rgba(255,243,224,0.6)` |
|
||
| Field border | `1px solid rgba(93,64,55,0.25)` |
|
||
| Field focus | `border-color: var(--gold)` |
|
||
| Submit bg | 5-stop brand gradient |
|
||
| Submit text | `var(--card)` (cream) |
|
||
|
||
### Modal JS Behaviour
|
||
|
||
- Opens on click of `#open-modal`, `#open-modal-hero`, `.open-modal`
|
||
- Closes on: `#modal-close` click · click outside `#modal-box` · `Escape` key
|
||
- On close: resets form, re-shows form, hides confirmation, re-enables submit button
|
||
- Disables `document.body` scroll while open
|
||
|
||
---
|
||
|
||
## MotionFlow Usage Reference
|
||
|
||
| Feature | Attribute | Where used |
|
||
|---|---|---|
|
||
| Scroll animation | `data-mf-animation="fade-up"` | Hero elements, section headers |
|
||
| Scroll animation | `data-mf-animation="fade-left"` | Section labels |
|
||
| Scroll animation | `data-mf-animation="zoom-in"` | Featured pricing card |
|
||
| Stagger | `data-mf-stagger-animation="fade-up"` | News grid, custom grid, footer-top |
|
||
| Parallax | `data-mf-parallax data-mf-parallax-speed="0.4"` | Hero background image |
|
||
| Typing text | `data-mf-text-type="typing"` | Hero tagline |
|
||
| Ticker | `data-mf-ticker data-mf-ticker-speed="55"` | Verticals section |
|
||
|
||
- All scroll animations use `data-mf-animation-once="true"`.
|
||
- Parallax disabled on tablet/mobile: `data-mf-parallax-speed-tablet="0" data-mf-parallax-speed-mobile="0"`.
|
||
|
||
---
|
||
|
||
## Inline Scripts (end of `<body>`, in order)
|
||
|
||
1. **MotionFlow** — `<script src="...motionflow.min.js">` (last `<script>` before `</body>`)
|
||
2. **Sales Agent Chat IIFE** — chat panel open/close logic, message send/receive, exposes `window._mbs`
|
||
3. **30s Probe IIFE** — collects browser/device/geo fingerprint, POSTs to chat webhook, shows reply and opens panel
|
||
4. **Modal IIFE** — trial form submission to trial webhook, confirmation display
|
||
|
||
No other external scripts may be added.
|
||
|
||
---
|
||
|
||
## Responsive Breakpoints
|
||
|
||
| Breakpoint | Changes |
|
||
|---|---|
|
||
| `≤ 768px` | `h1` → 1.9rem · `.nav-center` hidden · `.nav-chat` hidden · mobile Free Trial shown · `#chat-panel` hidden |
|
||
| `≤ 480px` | `h1` → 1.5rem · nav/section/footer padding → 5vw · modal padding reduced · `.modal-title` font-size reduced |
|
||
|
||
---
|
||
|
||
## Quality Bar
|
||
|
||
| Concern | Rule |
|
||
|---|---|
|
||
| Design tokens | NEVER use raw hex values — always CSS custom properties |
|
||
| `@keyframes` | NEVER — CSS transitions only (MotionFlow handles scroll animations) |
|
||
| External deps | ONLY MotionFlow CDN is allowed — no other external CSS, JS, or fonts |
|
||
| Brand gradient | Always 5-stop 135deg pattern using `--gold-lo` / `--gold` / `--gold-hi` |
|
||
| Modal product | `name="product" value="odoo_19"` — never change, never show to user |
|
||
| Chat webhook | Never change URL without explicit instruction |
|
||
| Trial webhook | Never change URL without explicit instruction |
|
||
| Section order | hero → verticals → news → pricing → customization → footer |
|
||
| Responsive | Every element must work at 375px, 768px, and 1280px+ |
|
||
| Hover states | All interactive elements must have visible hover/focus states in burnt-orange/gold |
|
||
|
||
---
|
||
|
||
## Git Rules
|
||
|
||
- ALWAYS work on **`main`** branch.
|
||
- Pull before every session: `git pull origin main`
|
||
- Commit message patterns:
|
||
- `content: <short description>` — copy or section changes
|
||
- `fix: <short description>` — bug or visual fixes
|
||
- `feat: <short description>` — new functionality
|
||
- `style: <short description>` — CSS-only changes
|
||
- Push immediately after committing — never leave unpushed commits.
|
||
|
||
---
|
||
|
||
## File Safety Rules
|
||
|
||
- **ONLY** edit `index.html` (and `AGENTS.md` when explicitly told)
|
||
- NEVER touch files inside `old/`
|
||
- NEVER split CSS into external files
|
||
- NEVER split JS into external files
|
||
- NEVER add a `<link>` to an external stylesheet
|
||
- NEVER add a `<script src="...">` tag except the already-present MotionFlow CDN script
|
||
- `style.html` is a designer reference — treat as read-only unless explicitly told otherwise
|
||
|
||
---
|
||
|
||
## Execution Workflow
|
||
|
||
Follow this order for every task:
|
||
|
||
1. `git pull origin main`
|
||
2. Read the relevant section(s) of `index.html` before editing.
|
||
3. Apply minimal, targeted edits — do not reformat unrelated code.
|
||
4. Validate: sticky nav · chat panel toggles · all sections visible on scroll · modal opens from all three triggers · form submits · MotionFlow animations fire.
|
||
5. Commit with a descriptive message following the pattern above.
|
||
6. `git push origin main`
|
||
|
||
---
|
||
|
||
## Success Criteria
|
||
|
||
- `index.html` is valid HTML5 with no external dependencies other than MotionFlow CDN.
|
||
- All CSS tokens used correctly — no raw hex values anywhere.
|
||
- No `@keyframes` present anywhere in `index.html`.
|
||
- Modal opens from all three trigger points and POSTs to the correct trial webhook.
|
||
- Chat panel opens, sends messages to the correct chat webhook, and exposes `window._mbs`.
|
||
- 30s probe fires once and posts fingerprint to the chat webhook.
|
||
- Product field is always hidden and always `odoo_19`.
|
||
- Page scrolls naturally through all sections with sticky nav intact.
|
||
- All commits pushed to `main`.
|
||
|
||
---
|
||
|
||
## Failure Conditions
|
||
|
||
- Adding external CSS, JS, or fonts beyond MotionFlow CDN.
|
||
- Introducing `@keyframes` or scroll-hijacking behaviour.
|
||
- Changing either webhook URL without explicit instruction.
|
||
- Exposing the product field or changing its value from `odoo_19`.
|
||
- Using raw hex values instead of CSS custom properties.
|
||
- Editing files inside `old/`.
|
||
- Editing `style.html` without explicit instruction.
|
||
- Leaving unpushed commits.
|
||
- Modifying files outside the scope of the task. |