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

13 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 Classy dark theme · grey/gold/black · no frameworks
Styling 100% inline <style> in index.html — no external CSS
JavaScript Inline <script> at bottom of index.html — no external JS
Dependencies Zero — pure HTML + CSS + vanilla JS
Archive old/ — previous style explorations (do not touch)

File Map

my-biz/
├── index.html          ← production page (the only file that matters)
├── AGENTS.md           ← this file
├── start               ← dev server launcher
└── old/                ← archived style variants (read-only)
    ├── index-bling.html
    ├── index-cafe.html
    ├── index-classy.html
    ├── index-holiday.html
    ├── index-saas.html
    ├── index-startup.html
    └── index_.html

Design System

CSS Custom Properties (defined in :root)

Token Value Usage
--bg #191920 Main page background — dark steel grey
--surf1 #202028 Alternate section background
--card #252530 Card / modal box background
--lift #2E2E3C Card hover state, featured card bg
--border rgba(212,170,80,.22) All borders and grid gaps
--grey #68687A Muted body text, nav links
--silver #ABABBE Secondary text, feature list items
--light #D2D2E0 <strong> inside body copy
--gold #D6AF52 Primary gold — labels, borders, accents
--gold-hi #F2CE62 Bright shiny gold — gradient highlight
--gold-lo #8E6C30 Dark gold — gradient shadow
--gold-glow rgba(212,170,80,.18) Box-shadow glow on gold elements
--white #EEEEF4 Headings, primary text

NEVER use raw hex values in HTML or CSS. Always reference the token.

Gold Metallic Gradient (static — no animation)

Applied to: nav logo, 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%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;

Typography

Use Font Size
Headings (h1, h2, .nav-logo, .footer-logo, .modal-title, .custom-rate) Georgia, "Times New Roman", serif varies
Body / UI "Segoe UI", system-ui, -apple-system, sans-serif 0.85–1.1rem
Labels (.section-label, .news-area, .pricing-plan) system-ui, uppercase, wide tracking 0.65–0.78rem

No Animations Rule

There are zero @keyframes in index.html. Motion is limited to CSS transition on hover/focus states only. Do not add any @keyframes, animation, or scroll-triggered effects.

Page Structure

All sections are in normal document flow. The user scrolls the page. Sections appear in this order:

<nav>                   sticky, always visible
<section.hero#home>     100vh, centred, dark radial bg
<section#verticals>     background: var(--surf1)
<section#news>          background: var(--bg)
<section#pricing>       background: var(--surf1)
<section#customization> background: var(--bg)
<footer>                background: #0E0E14, 3px gold top border
<div#modal-overlay>     fixed, shown/hidden by JS

Nav

position: sticky; top: 0; z-index: 500; height: 62px;
background: rgba(25,25,32,0.97); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
  • Logo .nav-logo — Georgia, shiny gold gradient text.
  • Links — #verticals, #news, #pricing, #customization — scroll to section.
  • CTA .nav-cta id="open-modal" — gold border, gold text, fills on hover → opens modal.

All sections use scroll-margin-top: 62px to offset the sticky nav.

Hero (section.hero#home)

  • min-height: 100vh, flex column, centred, text-align: center
  • background: radial-gradient(ellipse 80% 50% at 50% 0%, #1E1E10 0%, transparent 70%), var(--bg)
  • .hero-eyebrow — pill border, gold, uppercase
  • h1 — Georgia, 4.8rem (responsive), white; <em> in var(--gold)
  • .hero-sub — silver, 1.1rem, max-width 580px
  • .hero-tagline — italic, grey
  • .hero-actions — two buttons:
    • .btn-primary id="open-modal-hero" → opens modal
    • .btn-secondary → scrolls to #verticals
  • .hero-trust — tiny grey trust line; <strong> in silver

Verticals (section#verticals)

  • Background: var(--surf1)
  • .verticals-grid — CSS Grid auto-fit minmax(220px,1fr), gap: 1px, grid itself coloured var(--border) for hairline gold gaps
  • 4 cards (NGO · Startups · Manufacturing · Restaurants)
  • .vertical-card — background: var(--card), hover → var(--lift)
  • .vertical-card::before — absolute 2px left bar, shiny gold gradient, height: 0 → height: 100% on hover (transition 0.4s)

Card anatomy:

.vertical-icon   emoji, 2rem
.vertical-name   Georgia, white
.vertical-desc   silver, 0.88rem
.vertical-tag    gold, uppercase, border-top separator

News (section#news)

  • Background: var(--bg)
  • .news-grid — auto-fit minmax(220px,1fr), gap: 24px
  • 4 cards (NGO · Startups · Manufacturing · Restaurants)
  • .news-card — no card bg, border-top: 1px solid var(--border), hover → gold
  • Card anatomy: .news-area (gold label) · .news-title (Georgia) · .news-teaser (silver) · .news-date (grey)

Pricing (section#pricing)

  • Background: var(--surf1)
  • .pricing-grid — auto-fit minmax(300px,1fr), max-width: 820px, gold hairline gaps
  • 2 cards: Side Hustle ($214/yr) · On the Rise ($395/yr)

Plain card (.pricing-card):

  • background: var(--card)
  • CTA: gold border + gold text → fills gold on hover

Featured card (.pricing-card.featured):

  • background: var(--lift)
  • box-shadow: 0 0 0 1px var(--gold), 0 0 28px var(--gold-glow)
  • .pricing-price — shiny gold gradient text
  • .pricing-badge — shiny gold gradient bg, dark text
  • CTA: shiny gold gradient bg → opens modal (.open-modal)
  • CTA plain card also → opens modal (.open-modal)

Feature list uses — em-dash in gold as bullet (::before).

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 gold gradient bar, scaleX(0) → scaleX(1) on hover
  • .custom-rate — shiny gold gradient text, Georgia, 1.4rem ($65 USD / hour)
  • .custom-link — gold, uppercase, underline reveals on hover

Footer

background: #0E0E14;
border-top: 3px solid var(--gold);
padding: 72px 8vw 40px;
  • Brand column — logo (shiny gold), tagline (grey), flex: 2
  • 3 link columns — Product · Company · Legal — each flex: 1
  • .footer-col h4 — gold, 0.65rem, uppercase, tracked
  • .footer-col a — grey → gold on hover
  • .footer-bottom — flex row, grey text, gold rule separator on top

Modal

Triggers

Element ID / Class
Nav "Get Started" id="open-modal"
Hero "See Plans & Pricing" id="open-modal-hero"
Both 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)
  #modal-box            max-width 480px, var(--card) bg, gold top border
    #modal-close        × button, top-right
    .modal-title        Georgia, shiny gold gradient text
    .modal-subtitle     grey, 0.82rem
    #trial-form
      .modal-field-group  (email)
        .field-label      gold, uppercase, 0.62rem
        input[type=email] .modal-field
      .modal-field-group  (location)
        .field-label
        select.modal-field  custom gold 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      gold-hi
      .confirm-sub        silver
      button.modal-submit  "Close"  → closeModal()

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(14,14,20,.88)
Overlay backdrop blur(14px)
Box border-top 3px solid var(--gold)
Field bg rgba(10,10,16,.7)
Field border 1px solid rgba(212,170,80,.25)
Field focus border-color: var(--gold)
Submit bg shiny gold gradient
Submit text var(--bg) (dark)

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

Responsive Breakpoints

Breakpoint Changes
≤ 768px h1 → 2.8rem · nav gap → 14px · modal padding → 40px 28px
≤ 480px h1 → 2.1rem · section padding → 60px 5vw · nav hides all links except CTA · modal padding → 36px 20px · .modal-title → 1.5rem

Quality Bar

Concern Rule
Design tokens NEVER use raw hex values — always use CSS custom properties
Animations NEVER add @keyframes — transitions only
Dependencies NEVER add external CSS, JS, or fonts
Gold gradient Always use the 5-stop 135deg gradient pattern defined above
Modal product name="product" value="odoo_19" — never change, never show to user
Webhook URL Never change without explicit instruction
Sections Preserve 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 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 unless explicitly told otherwise.
  • NEVER touch files inside old/.
  • NEVER edit AGENTS.md unless the task is explicitly to update it.
  • 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.

Execution Workflow

Follow this order for every task:

  1. git pull origin main
  2. Read the relevant section of index.html before editing.
  3. Apply minimal, targeted edits — do not reformat unrelated code.
  4. Validate visually: sticky nav · all 6 sections visible on scroll · modal opens and closes · form submits.
  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.
  • All CSS tokens are used correctly — no raw hex values.
  • No @keyframes present anywhere.
  • Modal opens from all three trigger points and posts to the correct 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 or JS dependencies.
  • Introducing @keyframes or scroll-hijacking behaviour.
  • Changing the webhook URL without explicit instruction.
  • Exposing the product select or changing its value from odoo_19.
  • Editing files inside old/.
  • Using raw hex values instead of CSS custom properties.
  • Leaving unpushed commits.
  • Modifying files outside the scope of the task.
Reference in New Issue View Git Blame Copy Permalink