Oliver/my-biz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
32fe8a40737d42ee046b61abb0e2860f301526de
my-biz/AGENTS.md
T

18 KiB
Raw Blame History

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.

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):

-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.
Reference in New Issue View Git Blame Copy Permalink