From 85334fc4d229572308dc541eb77b9ac57be041ff Mon Sep 17 00:00:00 2001 From: Reef Date: Sat, 15 Aug 2026 09:35:00 +0000 Subject: [PATCH] Homepage relaunch: contrast fix, heading hierarchy, order widget refactor, final CTA band, depth & polish --- .../2026-08-15T09-22-42Z__index-html.md | 132 ++++++++ .impeccable/design.json | 216 ++++++++++++++ DESIGN.md | 225 ++++++++++++++ PRODUCT.md | 63 ++++ index.html | 145 +++++---- script.js | 13 +- style.css | 281 ++++++++++++++++-- 7 files changed, 982 insertions(+), 93 deletions(-) create mode 100644 .impeccable/critique/2026-08-15T09-22-42Z__index-html.md create mode 100644 .impeccable/design.json create mode 100644 DESIGN.md create mode 100644 PRODUCT.md diff --git a/.impeccable/critique/2026-08-15T09-22-42Z__index-html.md b/.impeccable/critique/2026-08-15T09-22-42Z__index-html.md new file mode 100644 index 0000000..e11c202 --- /dev/null +++ b/.impeccable/critique/2026-08-15T09-22-42Z__index-html.md @@ -0,0 +1,132 @@ +--- +target: homepage index.html +total_score: 26 +max_score: 36 +na_heuristics: 10 +p0_count: 3 +p1_count: 3 +timestamp: 2026-08-15T09-22-42Z +slug: index-html +--- +# ODOO4projects.com Homepage — Design Critique + +Method: dual-agent (A: design review · B: detector + browser evidence) + +## Design Health Score + +| # | Heuristic | Score | Key Issue | +|---|-----------|-------|-----------| +| 1 | Visibility of System Status | 3/4 | Billing toggle gives feedback; order widget never marks server location as required | +| 2 | Match System / Real World | 3/4 | "No FTP, no shenanigans" is borderline informal for B2B hosting voice | +| 3 | User Control and Freedom | 2/4 | Order widget: no Escape key, no backdrop-click close, small × target | +| 4 | Consistency and Standards | 3/4 | Blog post pages still dark/cyan (legacy); order widget uses ~15 inline styles bypassing tokens | +| 5 | Error Prevention | 2/4 | No validation before Stripe redirect — empty `?location=` possible; no pre-checkout confirm | +| 6 | Recognition Rather Than Recall | 4/4 | Features fully visible on cards; Most Popular badge kills comparison effort | +| 7 | Flexibility and Efficiency | 3/4 | Yearly toggle good; domain-count differences buried in feature text | +| 8 | Aesthetic and Minimalist Design | 3/4 | Blog cards after pricing add density to an already long Persuade page | +| 9 | Error Recovery | 3/4 | Coupon feedback clear; blog fetch failure shows only "Could not load blog posts." | +| 10 | Help and Documentation | n/a | Persuade surface; FAQ tab + support link cover it | +| **Total** | | **26/36** | **Good (72%)** | + +## Design Specificity Verdict + +**High specificity — composed for THIS product.** Hero headline ("Deploy Odoo in 5 Minutes"), Odoo-specific features (Quick Git, ODOO Settings Panel, 2 Workers), growth-themed plan names (Side Hustle → Empire), real partner instances in the trust bar, Odoo-specific blog topics, and a custom Stripe routing pattern. The skeleton (icon cards + pricing grid) is a familiar hosting-page pattern, but the content is authentically this product. + +**Deterministic scan:** Detector exit code 2 (44 findings, regex-only mode — HTML parser modules unavailable, so this is an undercount). Real hits: 12 low-contrast green check icons (#28a745 at 2.9:1–3.1:1), 4 undersized functional labels (9.6–9.92px), 2 skipped heading levels, 5 line-length violations, 17 off-ramp font sizes, 19 off-palette colors. The detector caught the contrast and text-size failures that the human review missed — those are its best catches. False positives: `overused-font` (Inter IS the brand font per DESIGN.md), hero gradient midpoint #2a1a26 (within palette family), rgba(33,37,41,X) opacity tones (intentional accessibility variants), em-dash count (moderate for marketing copy). + +**Visual overlays:** Browser injection succeeded; 17 anti-patterns reported in console. No reliable user-visible overlay persists (servers auto-exited after idle). + +## Overall Impression + +A warm, confident, genuinely specific landing page with a working pricing widget and honest social proof. The bones are good. The problems cluster at the edges: legibility (green checks, tiny labels), dismissal (order widget trap), and ending (blog after the conversion point). The single biggest opportunity: turn the post-pricing ending from content exploration back into a conversion moment. + +## What's Working + +1. **The pricing widget plays.** Billing toggle live-updates all four prices; location selector is Odoo-contextual; coupon defaults to "FREE TRIAL" — warm hand-holding most hosts don't do. +2. **The dark hero band with Warm Sand CTA** creates sharp hierarchy; the "5 Minutes" highlight in #f0cda8 draws the eye to the value prop; Holland.webp at 8% adds texture without noise. +3. **"Your Company" placeholder in the trust bar** is strategically honest — it invites the visitor to imagine themselves there and links to pricing. + +## Priority Issues + +**[P0] Low-contrast green check icons fail WCAG AA** (detector) +- **What**: 12 `fa-check` icons in #28a745 on pricing cards — 2.9:1 on Warm Paper, 3.1:1 on white. +- **Why**: Below 4.5:1; fails accessibility and reads washed-out on the featured card. +- **Fix**: Darken the success green (e.g. #1e7a34) or switch checks to Plum Velvet with green reserved for savings text. +- **Command**: /impeccable colorize + +**[P0] Undersized functional text** (detector) +- **What**: "1 month free" and "up to -10%" at 9.92px; badge labels "guide"/"news" at 9.6px — below the 10–11px floor. +- **Why**: These are decision-relevant (savings, content type); unreadable on mobile. +- **Fix**: Raise to ≥0.72rem with 11px minimum; give the toggle sub-labels room. +- **Command**: /impeccable typeset + +**[P0] Order widget traps users** (design review) +- **What**: `#orderWidgetOverlay` closes only via a 2.4rem × button — no Escape, no backdrop click, undersized touch target. +- **Why**: Accidentally opened widget = forced path; mobile users have no convenient exit. +- **Fix**: Backdrop click + Escape listener in script.js; enlarge close hit area to ≥2.8rem. +- **Command**: /impeccable harden + +**[P1] Hero stats waste prime real estate on redundancy** (design review) +- **What**: "Deploy in 5 min" and "Instant setup" say the same thing; two of four stat slots. +- **Why**: The hero is the only place for credibility metrics; redundancy forfeits it. +- **Fix**: Replace "Instant setup" with a real metric (uptime, instances deployed, avg deploy time). +- **Command**: /impeccable layout + +**[P1] Empire plan: blank feature row + weakest CTA on the highest-margin plan** (design review) +- **What**: `

    • ` blank entry in the feature list; "Contact Us" as outline button vs "Buy Now" primaries below it. +- **Why**: Blank row reads as "ran out of things to say"; the custom plan should be the most confident ask. +- **Fix**: Replace blank row with a concrete feature; make CTA "Get Custom Quote" in primary style. +- **Command**: /impeccable clarify + +**[P1] Skipped heading levels hurt structure** (detector) +- **What**: h1→h3 (missing h2) at hero→features; h3→h5 (missing h4) at blog→footer; footer uses h5s. +- **Why**: Screen-reader navigation and outline integrity for assistive tech. +- **Fix**: Promote features-strip headings to h2; footer headings to h3/p. +- **Command**: /impeccable audit + +**[P2] Blog after pricing weakens the conversion ending** (design review + synthesis) +- **What**: Page ends on content exploration ("Read more →") right after the pricing decision. +- **Why**: Peak-end rule — the emotional close should reinforce the decision, not invite second-guessing. +- **Fix**: Replace trailing blog grid with a final CTA band ("Ready to deploy?" + pricing link), or move blog above pricing. +- **Command**: /impeccable layout + +**[P2] "Satisfied or reimbursed" is undefined** (design review) +- **What**: Strong claim with no qualifier anywhere. +- **Why**: "Reimbursed for what, when?" introduces a tiny trust question at the exact conversion moment. +- **Fix**: Add a time qualifier ("within 7 days") or link to legal.html. +- **Command**: /impeccable clarify + +**[P2] Weak features-strip hierarchy** (design review) +- **What**: Feature h3s at 0.9rem compete with their own descriptions; line-height 1. +- **Why**: The first value-prop section after social proof should lead the eye, not whisper. +- **Fix**: h3 to 1rem+, line-height 1.3, tighter tracking. +- **Command**: /impeccable typeset + +## Persona Red Flags + +**Jordan (first-timer)**: +- Tab 1 contains nested `` tags ("Full management through your ODOO Settings Panel") — invalid HTML, visually noisy, and "ODOO Settings Panel" is unexplained jargon. +- FAQ tab has only 4 questions — no "What is Odoo?" or "Do I need to know code?"; feels like a teaser, not help. + +**Riley (stress tester / comparison shopper)**: +- On the Rise (featured, $36.25) is 87% more than Side Hustle ($19.40) with the only listed difference being Git module installs — the price jump needs a clearer justification or feature gap. +- Empire: "Our service on your server" doesn't answer who provides infrastructure or whether it's BYO cloud. + +**Casey (mobile, on-the-go)**: +- Trust bar partner row (7 items, 2rem gaps) forces horizontal scrolling on 390px viewports; logos read as tiny unlabeled icons. +- Billing toggle sub-labels at 0.62rem are barely legible; 48×26px switch is a tight thumb target. + +## Minor Observations + +- Order widget ~15 inline styles bypass the CSS custom properties — theming drift. +- Footer uses h5 headings ("Useful Links," "About us," "Follow us on") — odd semantics. +- "AccellerSales" spelling (double l) in the trust bar — verify. +- Chat widget (agent.js) overlaps the footer on narrow viewports. +- Holland.webp hero texture's purpose is unclear — if it signals the NL data region, label it. +- script.js `isEmpire` param naming is unclear (controls CTA style, not price). + +## Questions to Consider + +- Why does "On the Rise" carry "Most Popular" when Side Hustle is 47% cheaper — is that badge conversion data or a guess? Would "Recommended — best value for growing teams" be more honest? +- The page says "No DevOps required" then features "Git-based module deployment" — who is actually reading this page, the owner or their technical contact? +- What if the highest-priced plan made the strongest ask instead of the weakest? diff --git a/.impeccable/design.json b/.impeccable/design.json new file mode 100644 index 0000000..b53e783 --- /dev/null +++ b/.impeccable/design.json @@ -0,0 +1,216 @@ +{ + "schemaVersion": 2, + "generatedAt": "2026-08-15T09:01:14Z", + "title": "Design System: ODOO4projects", + "extensions": { + "colorMeta": { + "plum-velvet": { + "role": "primary", + "displayName": "Plum Velvet", + "canonical": "#714b67", + "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"] + }, + "deep-plum": { + "role": "primary", + "displayName": "Deep Plum", + "canonical": "#65435c", + "tonalRamp": ["#3b2b37","#402639","#46203c","#4c1a3f","#521442","#580e44","#5e0847","#63034a"] + }, + "warm-sand": { + "role": "secondary", + "displayName": "Warm Sand", + "canonical": "#f0cda8", + "tonalRamp": ["#c0b5aa","#c8b6a2","#d1b699","#d9b691","#e2b788","#eab780","#f3b777","#fbb76f"] + }, + "ink-cocoa": { + "role": "neutral", + "displayName": "Ink Cocoa", + "canonical": "#1b1319", + "tonalRamp": ["#32252f","#372031","#3c1b34","#411636","#461139","#4b0c3b","#50073e","#550240"] + }, + "warm-paper": { + "role": "neutral", + "displayName": "Warm Paper", + "canonical": "#f6f5f4", + "tonalRamp": ["#acaaa9","#bab7b5","#c8c4c1","#d5d1ce","#e3dfdb","#f1ece7","#f8f3ef","#fefaf5"] + }, + "parchment": { + "role": "neutral", + "displayName": "Parchment", + "canonical": "#e5e3e0", + "tonalRamp": ["#9e9c9a","#acaaa7","#bab8b5","#c9c6c2","#d7d4d0","#e5e2de","#f4f0eb","#fefaf6"] + } + }, + "typographyMeta": { + "display": { + "displayName": "Display", + "purpose": "Hero H1 only. Inter Tight 800, clamp(2rem, 4.5vw, 3.2rem), 1.15 line-height." + }, + "headline": { + "displayName": "Headline", + "purpose": "Section H2s. Inter Tight 600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25 line-height." + }, + "title": { + "displayName": "Title", + "purpose": "Card H3s, plan names, tab headers. Inter Tight 600, clamp(1.1rem, 2vw, 1.4rem), 1.25." + }, + "body": { + "displayName": "Body", + "purpose": "Paragraph text. Inter 400, 1rem, 1.6 line-height. Max ~580-680ch in prose." + }, + "label": { + "displayName": "Label", + "purpose": "Meta text, plan features, small-print, tab subtitles. Inter Tight 500, 0.82rem, 0.04em letter-spacing." + } + }, + "shadows": [ + { + "name": "card-rest", + "value": "0 1px 3px rgba(0,0,0,0.06)", + "purpose": "Baseline pricing card shadow at rest." + }, + { + "name": "card-hover", + "value": "0 4px 16px rgba(0,0,0,0.08)", + "purpose": "Interactive card hover, paired with translateY(-2px/-3px)." + }, + { + "name": "toggle-thumb", + "value": "0 1px 3px rgba(0,0,0,0.15)", + "purpose": "Billing toggle thumb shadow." + }, + { + "name": "blog-hover", + "value": "0 4px 20px rgba(113,75,103,0.08)", + "purpose": "Blog card hover on the light theme variant (homepage)." + } + ], + "motion": [ + { + "name": "state-transition", + "value": "all 0.2s", + "purpose": "Default easing for state transitions (hover, focus, active)." + }, + { + "name": "partner-scroll", + "value": "40s linear infinite", + "purpose": "Seamless partner logo carousel animation." + }, + { + "name": "spinner", + "value": "0.8s linear infinite", + "purpose": "Loading spinner rotation." + }, + { + "name": "toggle", + "value": "left 0.25s, background 0.25s", + "purpose": "Billing toggle switch animation." + } + ], + "breakpoints": [ + { "name": "lg", "value": "992px" }, + { "name": "md", "value": "768px" }, + { "name": "sm", "value": "576px" } + ] + }, + "components": [ + { + "name": "Primary Button", + "kind": "button", + "refersTo": "button-primary", + "description": "Primary call-to-action on light surfaces. Use once per section.", + "html": "", + "css": ".ds-btn-primary{display:inline-block;padding:0.6rem 1.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;background:#714b67;color:#fff;border:1px solid #714b67;border-radius:0.5rem;cursor:pointer;text-decoration:none;transition:all 0.2s}.ds-btn-primary:hover{background:#65435c;border-color:#65435c;transform:translateY(-1px)}" + }, + { + "name": "Hero Button", + "kind": "button", + "refersTo": "button-hero", + "description": "Primary call-to-action inside the dark hero band. Warm Sand on Ink Cocoa.", + "html": "Deploy in 5 Minutes", + "css": ".ds-btn-hero{display:inline-block;padding:0.85rem 2.5rem;background:#f0cda8;color:#1b1319;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:1rem;font-weight:700;text-decoration:none;transition:opacity 0.2s,transform 0.2s}.ds-btn-hero:hover{opacity:0.9;transform:translateY(-2px)}" + }, + { + "name": "Outline Button", + "kind": "button", + "refersTo": "button-outline", + "description": "Secondary/ghost action. Deep Plum border.", + "html": "", + "css": ".ds-btn-outline{display:inline-block;padding:0.85rem 1.5rem;background:transparent;color:#65435c;border:1px solid #65435c;border-radius:0.5rem;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;text-decoration:none;transition:all 0.2s;cursor:pointer}.ds-btn-outline:hover{background:#65435c;color:#fff}" + }, + { + "name": "Pricing Card", + "kind": "card", + "refersTo": "card-pricing", + "description": "Pricing plan card. Featured variant adds Plum Velvet border + Most Popular pill.", + "html": "
    Most Popular

    On the Rise

    $36.25 /month

    I need some modules and professional reports

    • ODOO CE Hosting
    • Automatic Backups
    • Module installation via GIT
    ", + "css": ".ds-card-pricing{background:#fff;border:1px solid #e5e3e0;border-radius:1rem;overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.06)}.ds-card-pricing.featured{border:2px solid #714b67;position:relative}.ds-card-pricing:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);transform:translateY(-3px)}.ds-card-badge{position:absolute;top:0.75rem;right:0.75rem;background:#714b67;color:#fff;padding:0.2rem 0.6rem;border-radius:2rem;font-size:0.6rem;font-weight:600}.ds-card-pricing h3{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:700;margin:0 0 0.5rem}.ds-card-price{margin:0.5rem 0}.ds-card-price strong{font-size:clamp(1.28rem,2vw,1.92rem);color:#1b1319}.ds-card-price small{color:rgba(33,37,41,0.55);font-size:0.82rem}.ds-card-desc{font-size:0.82rem;color:rgba(33,37,41,0.6);font-style:italic;min-height:3rem}.ds-card-pricing ul{list-style:none;padding:0;margin:0;flex-grow:1}.ds-card-pricing li{padding:0.4rem 0;font-size:0.82rem;border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;gap:0.4rem}.ds-card-pricing .ds-btn-primary{margin-top:0.75rem}" + }, + { + "name": "Search Input", + "kind": "input", + "refersTo": "input", + "description": "Blog search / general text input on light surfaces.", + "html": "
    ", + "css": ".ds-input{width:100%;padding:0.75rem 1rem 0.75rem 2.5rem;font-size:0.85rem;font-family:Inter,sans-serif;background:#fff;border:1px solid #e5e3e0;border-radius:0.5rem;color:#212529;outline:none;transition:border-color 0.2s;box-sizing:border-box}.ds-input:focus{border-color:#714b67;box-shadow:0 0 0 2px rgba(113,75,103,0.15)}.ds-input::placeholder{color:rgba(33,37,41,0.35)}" + }, + { + "name": "Navigation Tab (Active)", + "kind": "nav", + "refersTo": "tab-active", + "description": "Mission tab navigation — vertical rail on desktop, horizontal scroll on mobile.", + "html": "", + "css": ".ds-tab{display:block;padding:0.6rem 1rem;color:#212529;border-radius:0.6rem;border:none;background:none;width:100%;text-align:left;font-family:'Inter Tight','Inter',sans-serif;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s}.ds-tab:hover{background:#f6f5f4}.ds-tab.active{background:linear-gradient(135deg,rgba(113,75,103,0.08),rgba(113,75,103,0.03));color:#714b67;font-weight:600;border-left:3px solid #714b67}.ds-tab small{display:block;color:rgba(33,37,41,0.55);font-size:0.72rem;margin-top:0.1rem}.ds-tab.active small{color:rgba(113,75,103,0.6)}" + }, + { + "name": "Billing Toggle", + "kind": "custom", + "refersTo": "toggle-switch", + "description": "Monthly / Yearly billing toggle with sliding thumb.", + "html": "
    Monthly1 month free
    Yearlyup to -10%
    ", + "css": ".ds-toggle-label{font-size:0.82rem;font-weight:500;color:rgba(33,37,41,0.6);cursor:pointer;transition:color 0.2s;user-select:none}.ds-toggle-label.active{color:#1b1319;font-weight:600}.ds-toggle-label small{display:block;font-size:0.62rem;font-weight:400;color:#28a745;margin-top:0.1rem}.ds-toggle-switch{width:48px;height:26px;background:#e5e3e0;border-radius:13px;cursor:pointer;position:relative;transition:background 0.25s;flex-shrink:0}.ds-toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.15)}" + }, + { + "name": "Blog Card", + "kind": "card", + "refersTo": "card-blog", + "description": "Blog post card on the homepage (light theme variant).", + "html": "
    guideAI
    June 27, 2026

    Odoo Community vs. Enterprise: The Real Cost Breakdown (2026)

    A transparent cost comparison including hosting, licensing, and hidden costs for 5, 10, and 25-user teams.

    Read more →
    ", + "css": ".ds-card-blog{background:#fff;border:1px solid #e5e3e0;border-radius:0.6rem;padding:1.25rem;display:flex;flex-direction:column;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s}.ds-card-blog:hover{transform:translateY(-2px);border-color:#714b67;box-shadow:0 4px 20px rgba(113,75,103,0.08)}.ds-card-blog-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap}.ds-badge-guide{display:inline-block;padding:0.15rem 0.5rem;border-radius:3rem;font-size:0.6rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#08080c;background:#a78bfa}.ds-badge-agent{display:inline-block;padding:0.15rem 0.45rem;border-radius:3rem;font-size:0.56rem;font-weight:600;background:rgba(113,75,103,0.1);color:#714b67;border:1px solid rgba(113,75,103,0.2)}.ds-card-blog-date{font-size:0.82rem;color:rgba(33,37,41,0.45);margin-bottom:0.4rem}.ds-card-blog h3{margin:0 0 0.5rem}.ds-card-blog h3 a{font-family:'Inter Tight',sans-serif;font-size:1.1rem;font-weight:600;line-height:1.35;color:#1b1319;text-decoration:none;transition:color 0.2s}.ds-card-blog h3 a:hover{color:#714b67}.ds-card-blog-teaser{font-size:0.9rem;color:rgba(33,37,41,0.6);line-height:1.55;margin:0 0 1rem;flex:1}.ds-card-blog-link{font-size:0.85rem;color:#714b67;text-decoration:none;font-weight:500;transition:opacity 0.2s;margin-top:auto}.ds-card-blog-link:hover{opacity:0.75}" + } + ], + "narrative": { + "northStar": "The Global Workbench", + "overview": "ODOO4projects is a managed Odoo hosting brand built on a warm, quietly premium plum-and-sand palette. The system's personality is warm, trustworthy, quietly premium — infrastructure that feels approachable and dependable for business owners who are not sysadmins. The North Star — The Global Workbench — names the promise: tools are pre-configured, the bench is set up, and the work is ready to start anywhere in the world. The interface is light by default: Warm Paper surfaces on white, Ink Cocoa text, with Plum Velvet as the single strong accent and Warm Sand as its warm counterpoint. Components are tactile and confident: rounded corners, solid buttons, immediate hover feedback, small upward lifts. Depth is currently subtle (flat at rest, gentle lift on interaction) and is slated to deepen.", + "keyCharacteristics": [ + "Light, warm surfaces with one strong plum accent and a peach counterpoint", + "Generous, centered layout with clear vertical rhythm", + "Tactile, confident components with rounded corners (0.5–1rem)", + "Subtle interaction-driven elevation — flat at rest, lift on hover", + "Inter Tight for display/headings, Inter for body", + "No emojis, no gradients-as-decoration, no dark surfaces in the brand system (legacy dark blog theme is being phased out)" + ], + "rules": [ + { "name": "The One-Accent Rule", "body": "Plum Velvet is the only full-strength accent. Green is reserved exclusively for functional success states.", "section": "colors" }, + { "name": "The Warmth Rule", "body": "Every neutral must land warm — plum-tinted grays, never cold blue-grays.", "section": "colors" }, + { "name": "The Small-Print Silence Rule", "body": "Label text is always one or two steps quieter in color so it never raises its voice over headline content.", "section": "typography" }, + { "name": "The Flat-By-Default Rule", "body": "Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state.", "section": "elevation" } + ], + "dos": [ + "Do lead with Plum Velvet for any single accent moment — the button, the active tab, the featured border.", + "Do keep all neutrals warm; any gray on the page should read as plum-tinted or sand-tinted, not blue.", + "Do use warm, client-focused copy with short sentences and bullets; no tech jargon, no emojis.", + "Do keep section containers centered at 80% / max 1300px and let sections breathe at 2–3rem padding.", + "Do give interactive elements an immediate hover response — a lift, a fill change, or a border shift within 0.2s.", + "Do use the pill for badges and the lg radius for cards; consistency of the radius ladder is what makes the system feel composed." + ], + "donts": [ + "Don't use the legacy dark/cyan blog theme (#08080c background, #00f5ff cyan accents) — it is an older style being phased out; the brand is the plum/peach light system only.", + "Don't paint large areas Plum Velvet; it is an accent, not a surface.", + "Don't introduce additional accent colors; green belongs to success states only.", + "Don't use sharp rectangular corners (0 radius) on interactive elements.", + "Don't decorate with gradients other than the established hero band and the primary-to-secondary 'hr' divider.", + "Don't add permanent shadows to resting surfaces; depth responds to interaction." + ] + } +} \ No newline at end of file diff --git a/DESIGN.md b/DESIGN.md new file mode 100644 index 0000000..275f8ef --- /dev/null +++ b/DESIGN.md @@ -0,0 +1,225 @@ +--- +name: ODOO4projects +description: Managed Odoo hosting — the Global Workbench. Warm plum and sand, enterprise-grade but approachable. +colors: + plum-velvet: "#714b67" + deep-plum: "#65435c" + warm-sand: "#f0cda8" + ink-cocoa: "#1b1319" + warm-paper: "#f6f5f4" + parchment: "#e5e3e0" + white: "#ffffff" +typography: + display: + fontFamily: "'Inter Tight', 'Inter', sans-serif" + fontSize: "clamp(2rem, 4.5vw, 3.2rem)" + fontWeight: 800 + lineHeight: 1.15 + headline: + fontFamily: "'Inter Tight', 'Inter', sans-serif" + fontSize: "clamp(1.8rem, 3.2vw, 2.8rem)" + fontWeight: 600 + lineHeight: 1.25 + title: + fontFamily: "'Inter Tight', 'Inter', sans-serif" + fontSize: "clamp(1.1rem, 2vw, 1.4rem)" + fontWeight: 600 + lineHeight: 1.25 + body: + fontFamily: "Inter, 'Segoe UI', sans-serif" + fontSize: "1rem" + fontWeight: 400 + lineHeight: 1.6 + label: + fontFamily: "'Inter Tight', 'Inter', sans-serif" + fontSize: "0.82rem" + fontWeight: 500 + letterSpacing: "0.04em" +rounded: + sm: "0.5rem" + md: "0.6rem" + lg: "1rem" + pill: "2rem" +spacing: + xs: "0.25rem" + sm: "0.5rem" + md: "1rem" + lg: "1.5rem" + xl: "2rem" +components: + button-primary: + backgroundColor: "{colors.plum-velvet}" + textColor: "{colors.white}" + rounded: "{rounded.sm}" + padding: "0.6rem 1.5rem" + button-primary-hover: + backgroundColor: "{colors.deep-plum}" + textColor: "{colors.white}" + rounded: "{rounded.sm}" + padding: "0.6rem 1.5rem" + button-hero: + backgroundColor: "{colors.warm-sand}" + textColor: "{colors.ink-cocoa}" + rounded: "{rounded.sm}" + padding: "0.85rem 2.5rem" + button-outline: + textColor: "{colors.deep-plum}" + rounded: "{rounded.sm}" + padding: "0.6rem 1.5rem" + card-pricing: + backgroundColor: "{colors.white}" + rounded: "{rounded.lg}" + padding: "1.25rem" + tab-active: + textColor: "{colors.plum-velvet}" + rounded: "{rounded.md}" + padding: "0.6rem 1rem" + input: + backgroundColor: "{colors.white}" + rounded: "{rounded.sm}" + padding: "0.75rem 1rem" +--- + +# Design System: ODOO4projects + +**Creative North Star: "The Global Workbench"** + +## Overview + +ODOO4projects is a managed Odoo hosting brand built on a warm, quietly premium plum-and-sand palette. The system's personality is "warm, trustworthy, quietly premium — infrastructure that feels approachable and dependable" for business owners who are not sysadmins. The North Star — *The Global Workbench* — names the promise: tools are pre-configured, the bench is set up, and the work is ready to start anywhere in the world. Six global data regions are a literal fact of the product and the visual system leans into that reach. + +The interface is light by default: Warm Paper surfaces on white, Ink Cocoa text, with Plum Velvet as the single strong accent and Warm Sand as its warm counterpoint. Density is relaxed — generous section padding, centered constrained containers (80% width, max 1300px) — and the tone is conversational, not technical. Components are tactile and confident: rounded corners, solid buttons, immediate hover feedback, small upward lifts. Depth is currently subtle (flat at rest, gentle lift on interaction) and is slated to deepen. + +The homepage is a single long persuasion surface: hero → trust bar → features → mission tabs → how-it-works → pricing → blog → footer. Tabs and pricing cards carry the interactive weight; everything else is rhythm. + +**Key Characteristics:** +- Light, warm surfaces with one strong plum accent and a peach counterpoint +- Generous, centered layout with clear vertical rhythm +- Tactile, confident components with rounded corners (0.5–1rem) +- Subtle interaction-driven elevation — flat at rest, lift on hover +- Inter Tight for display/headings, Inter for body +- No emojis, no gradients-as-decoration, no dark surfaces in the brand system (legacy dark blog theme is being phased out) + +## Colors + +The palette is warm through and through — every neutral carries a whisper of plum or sand. Plum Velvet does the brand's talking; Warm Sand does the welcoming; Warm Paper and Parchment do the quiet work. + +### Primary +- **Plum Velvet** (#714b67): The brand accent. Primary buttons, active tabs, featured plan border, footer social hover, link color context. Used sparingly — as fills on buttons and edges on active states, never as a wash across large areas. +- **Deep Plum** (#65435c): Hover/darker variant of the accent. Primary button hover, outline button text and border. + +### Secondary +- **Warm Sand** (#f0cda8): The welcoming counterpoint. Hero primary CTA background with Ink Cocoa text, the "hr" divider gradient, hero headline accent span. Reads as warm light, not cautionary yellow. + +### Neutral +- **Warm Paper** (#f6f5f4): Section backgrounds (trust bar, how-it-works, pricing, light blog override). One step off pure white. +- **Parchment** (#e5e3e0): Borders, dividers, card edges, toggle-switch off state. +- **Ink Cocoa** (#1b1319): Text on light surfaces, footer background, hero gradient base, headline color, price figures. +- **White** (#ffffff): Main page background, card backgrounds, text on Plum Velvet buttons. + +### Named Rules +**The Warmth Rule.** Every neutral must land warm — plum-tinted grays, never cold blue-grays. When choosing a gray, err toward the sand side. + +**The One-Accent Rule.** Plum Velvet is the only full-strength accent. Green (#28a745) is reserved exclusively for functional success states (checkmarks, savings labels); it never competes as a brand color. + +## Typography + +**Display Font:** Inter Tight (fallback Inter, sans-serif) +**Body Font:** Inter (fallback Segoe UI, sans-serif) + +**Character:** A quiet Swiss pairing — Inter Tight carries headings with slightly condensed confidence; Inter carries body copy with neutral legibility. The hierarchy leans on weight and size contrast rather than color. + +### Hierarchy +- **Display** (800, clamp(2rem, 4.5vw, 3.2rem), 1.15): Hero H1 only (e.g. "Deploy Odoo in 5 Minutes — Fully Managed Hosting"). Accent span in Warm Sand. +- **Headline** (600, clamp(1.8rem, 3.2vw, 2.8rem), 1.25): Section H2s ("Your Plan, Your Timing: Upgrade Anytime", "Latest from the Blog"). +- **Title** (600, clamp(1.1rem, 2vw, 1.4rem), 1.25): Card H3s, tab names, plan names. +- **Body** (400, 1rem, 1.6): Paragraph text; line lengths held to ~580–680px in hero and section intro blocks. +- **Label** (500, 0.82rem, 0.04em): Meta text — plan features, small-print, tab subtitles, footer links. The trust-bar kicker ("Trusted by businesses worldwide") is uppercase at 0.75rem with 0.08em tracking. + +### Named Rules +**The Small-Print Silence Rule.** Label text is always one or two steps quieter in color (55–70% opacity of its surface's text color) so it never raises its voice over headline content. + +## Layout + +A single centered column system: `.container` at 80% width, max 1300px, with 20px side padding. Sections stack in full-bleed bands that alternate Warm Paper and White to create rhythm without borders. + +- **Hero:** full-bleed dark band (Ink Cocoa gradient 135deg #1b1319 → #2a1a26 → #3d2235) with a faint country-map image at 8% opacity, content left-aligned, max 720px headline width. +- **Trust bar:** Warm Paper strip, centered kicker, seamless looping partner logo carousel (40s linear, pause on hover). +- **Feature strip:** auto-fit grid, min 220px columns. +- **Mission tabs:** 220px fixed left rail + fluid content; below 992px the rail becomes a horizontal scrollable tab row with a bottom border indicator. +- **How-it-works:** 3-step centered grid (max 800px), numbered circles. +- **Pricing:** 4-column grid → 2 → 1 at 992px / 576px; featured card gets a Plum Velvet border and a "Most Popular" pill. +- **Blog:** 3-column card grid → 2 → 1 at 992px / 576px. +- **Footer:** Ink Cocoa band; 3 columns (1.5fr 3fr 3.5fr) collapsing to 1 column at 992px. + +**Spacing rhythm:** sections breathe at 2–3rem vertical padding; cards use 1.25rem internal padding; grids gap at 1–1.5rem (features 1.5rem, pricing 1rem, blog 1.25rem). + +## Elevation & Depth + +The system is **flat at rest with interaction-driven lift**. Cards at rest carry only a whisper of shadow (0 1px 3px rgba(0,0,0,0.06)) or none; on hover they rise — translateY(-2px to -3px) with a soft shadow (0 4px 16px rgba(0,0,0,0.08)). Buttons lift 1–2px on hover. The hero band is the exception: it is the one physically "deep" surface, built from color gradient and imagery rather than shadow. + +**Forward direction (user-confirmed):** depth is currently conservative and is intended to *increase*. Future work should add more pronounced elevation, layered surfaces, or subtle depth cues without abandoning the flat-at-rest principle. + +### Shadow Vocabulary +- **Card rest** (`0 1px 3px rgba(0,0,0,0.06)`): baseline pricing cards. +- **Card hover** (`0 4px 16px rgba(0,0,0,0.08)`): interactive cards on hover, paired with translateY(-2px/-3px). +- **Toggle thumb** (`0 1px 3px rgba(0,0,0,0.15)`): the billing toggle's sliding thumb. + +### Named Rules +**The Flat-By-Default Rule.** Surfaces are flat at rest. Shadow and lift appear only as a response to hover, focus, or active state — never as permanent decoration. + +## Shapes + +The form language is soft and approachable: everything rounds off, nothing is sharp enough to feel technical. Radius scales in three steps plus pill: **sm** 0.5rem (8px) for buttons and inputs, **md** 0.6rem (~10px) for tabs and badges, **lg** 1rem (16px) for pricing cards and feature items, and **pill** 2rem for "Most Popular" badges, promo tags, the hero "How It Works" ghost button, and large buttons (.btn-lg). Circles handle the small geometry: numbered how-to steps (2.5rem), social icons (2.5rem), carousel dots (8px), toggle thumbs (20px). + +Borders are 1px Parchment for cards and inputs; the featured pricing card doubles to 2px Plum Velvet. Active tabs mark themselves with a 3px Plum Velvet bar — left edge on desktop, bottom edge below 992px. + +## Components + +### Buttons +- **Shape:** rounded sm (0.5rem), full-width within pricing cards and on mobile hero, inline otherwise. +- **Primary:** Plum Velvet fill, white text, 0.6rem 1.5rem padding. Hover: Deep Plum fill, translateY(-1px). Transition: all 0.2s. +- **Hero:** Warm Sand fill, Ink Cocoa text, 0.85rem 2.5rem, weight 700 Inter Tight. Hover: opacity 0.9, translateY(-2px). +- **Outline:** Deep Plum border and text on transparent. Hover: Deep Plum fill, white text. Used for "Contact Us" (Empire plan) and hero secondary. +- **Large:** .btn-lg — pill radius (2rem), 0.75rem 2rem padding. + +### Cards / Containers +- **Corner Style:** rounded lg (1rem); feature items 1rem; blog cards 0.6rem. +- **Background:** white on light sections; #fff overrides in the home blog section; blog post pages use the legacy dark card (#12121c) pending the brand-wide phase-out of the dark theme. +- **Shadow Strategy:** flat at rest, hover lift per Elevation & Depth. +- **Border:** 1px Parchment. +- **Internal Padding:** 1.25rem (pricing, blog); feature items 1.5rem 1rem. + +### Inputs / Fields +- **Style:** white fill, 1px Parchment border, rounded sm (0.5rem), 0.75rem 1rem padding, Inter. +- **Focus:** Plum Velvet border + a soft 2px ring rgba(113,75,103,0.15). +- **Footer variant:** translucent fill rgba(255,255,255,0.08) with a lighter border — form inputs on the Ink Cocoa footer. + +### Navigation +- **Tabs (desktop):** 220px left rail; tab = label + small subtitle, left-aligned, rounded md; active = Plum Velvet 3px left bar + soft plum-tinted gradient fill (rgba 0.08→0.03) + Plum Velvet text at 600. +- **Tabs (mobile, <992px):** horizontal scroll row; active bar moves to the bottom edge; subtitles hidden. +- **Footer navigation:** Ink Cocoa band, white headings, links at 65% white, hover to full white. + +### Billing Toggle +- 48 × 26px pill track; off = Parchment, on = Plum Velvet; 20px white thumb with soft shadow slides left 3px → right 25px over 0.25s. + +### Blog Card +- rounded md (0.6rem), white fill, 1.25rem padding, area badge pill (violet/sky/amber/cyan legacy palette — being replaced by plum-family in the brand system), date at 45% opacity, headline in Ink Cocoa, teaser at 60% opacity, "Read more →" in Plum Velvet. Hover: translateY(-2px), border to Plum Velvet, soft plum glow. + +## Do's and Don'ts + +### Do: +- **Do** lead with Plum Velvet for any single accent moment — the button, the active tab, the featured border. +- **Do** keep all neutrals warm; any gray on the page should read as plum-tinted or sand-tinted, not blue. +- **Do** use warm, client-focused copy with short sentences and bullets; no tech jargon, no emojis. +- **Do** keep section containers centered at 80% / max 1300px and let sections breathe at 2–3rem padding. +- **Do** give interactive elements an immediate hover response — a lift, a fill change, or a border shift within 0.2s. +- **Do** use the pill for badges and the lg radius for cards; consistency of the radius ladder is what makes the system feel composed. + +### Don't: +- **Don't** use the legacy dark/cyan blog theme (#08080c background, #00f5ff cyan accents) — it is an older style being phased out; the brand is the plum/peach light system only. +- **Don't** paint large areas Plum Velvet; it is an accent, not a surface. +- **Don't** introduce additional accent colors; green belongs to success states only. +- **Don't** use sharp rectangular corners (0 radius) on interactive elements. +- **Don't** decorate with gradients other than the established hero band and the primary→secondary "hr" divider. +- **Don't** add permanent shadows to resting surfaces; depth responds to interaction. \ No newline at end of file diff --git a/PRODUCT.md b/PRODUCT.md new file mode 100644 index 0000000..ecfee61 --- /dev/null +++ b/PRODUCT.md @@ -0,0 +1,63 @@ +# Product + + + +## Platform + +web + +## Users + +Primary: business owners and small-to-mid teams worldwide who need Odoo (Community) running for their business but do not want to hire DevOps or manage servers. They are evaluating or already using Odoo and need a production-ready instance fast — deploy in about 5 minutes — with backups, SSL, custom modules, and support handled for them. + +The site copy speaks to non-technical decision makers ("built for business owners, not sysadmins") and to growing businesses that will outgrow entry plans. Trust bar names real customer businesses across regions (Paraguay, Kenya, Germany, sales/automation consultancies). + +## Product Purpose + +Fully managed Odoo Community hosting: deploy a production-ready instance in about 5 minutes without DevOps. Automatic daily backups, free SSL on every domain, Git-based module deployment, management through an ODOO Settings Panel, an AI support bot plus human support, and a choice of 6 global data regions. Success = the customer has a running, maintained Odoo instance and never touches a command line. + +## Positioning + +Enterprise-grade Odoo Community hosting without the enterprise price tag. Community is treated as a powerful ERP that deserves first-class infrastructure — not a budget option. AI-first and global from day one: instances are ready to connect with AI tools and automation, deployed across 6 world regions; going global is a setting, not a project. + +## Operating Context + +- Static site (index.html, support.html, legal.html, blog/) deployed via git push to git.odoo4projects.com; auto-deploys on every change. +- Order flow: inline order widget on the homepage opens Stripe checkout; coupon FREE TRIAL = 1 month free; yearly billing saves roughly 8-10%; "Satisfied or reimbursed" guarantee; server location chosen at checkout (US, Brazil, India, Australia, Netherlands, UK). +- Support: AI support bot (agent.js from static.odoo4projects.com) plus human team; email support@odoo4projects.com; /contactus route. +- Blog with guides and news (10 posts); homepage renders it with search and pagination. + +## Capabilities and Constraints + +- Plans: Side Hustle $19.40/mo, On the Rise $36.25/mo (Git modules), Powerhouse $49.60/mo (2 workers, 2GB HDD, 3 domains), Empire $80+/mo (service on the customer's own server, contact to order). +- Features: automatic daily backups (FIFO rotation, redundant slots), free SSL on every domain, Git-based module deployment (Quick Git one-click), full management via ODOO Settings Panel, worker scaling, daily security audits with automated patching, continuous performance monitoring, 6 regions. +- Enterprise-ready on Powerhouse and above; customer brings their own license. +- ODOO4projects LLC; founding date 2020; partner: OD8N. +- Constraint: this site remains a pure Odoo hosting seller. The PM Suite (Odoo-based project management + accounting tool for independent project managers, sold without Odoo branding) is a separate product on its own landing page and is not marketed on this site. +- Technology: plain static HTML/CSS/JS, no framework, no build step; Inter and Inter Tight fonts; Font Awesome icons. + +## Brand Commitments + +- Name: ODOO4projects (ODOO4projects LLC). +- Voice: client-focused, no tech jargon, short sentences, bullet points where appropriate, no emojis in content; lead with the Odoo Community focus and the benefit to the customer; use user-provided copy verbatim. +- Identity assets: logo.png, favicon.ico; LinkedIn company page; YouTube channel. +- Real named customers in the trust bar are commitments (Paraguay Service, Estancia Agape, KATE Group, agilnova, Ramani Kenya, Start Paraguay, AccellerSales); "Your Company" is an explicit placeholder for prospects. + +## Evidence on Hand + +- 7 named customer/partner sites with logos in the trust bar (see Brand Commitments). +- 10 blog posts: Community vs Enterprise cost breakdown, AI agents with Community, enterprise migration guide, custom module how-to, deploy and backup speed runs, platform update, official partner news. +- Plan names, prices, coupons, guarantees as listed above (from homepage code). +- No invented testimonials beyond plan quotes; no case studies on site. + +## Product Principles + +1. Hosting must be zero-DevOps for the customer; everything manageable from a panel. +2. Community edition gets enterprise-grade treatment — the infrastructure is the product's dignity. +3. AI and automation are first-class capabilities, not add-ons. +4. Trust is explicit: backups, SSL, guarantees, real named customers. +5. Copy stays client-focused and jargon-free; facts over hype. + +## Accessibility & Inclusion + +No product-specific accessibility requirement has been established; standard web best practices apply. diff --git a/index.html b/index.html index 4f610c5..8e2ee51 100644 --- a/index.html +++ b/index.html @@ -202,13 +202,23 @@ font-size: 1.5rem; color: var(--primary); margin-bottom: 0.75rem; - display: block; + display: inline-flex; + align-items: center; + justify-content: center; + width: 3.25rem; + height: 3.25rem; + border-radius: 1rem; + background: linear-gradient(135deg, rgba(113,75,103,0.12), rgba(113,75,103,0.04)); + border: 1px solid rgba(113,75,103,0.1); + box-shadow: 0 4px 12px rgba(113, 75, 103, 0.12); } - .features-strip .item h3 { - font-size: 0.9rem; - font-weight: 600; - margin-bottom: 0.3rem; + .features-strip .item h2 { + font-size: 1.02rem; + font-weight: 700; + line-height: 1.3; + margin-bottom: 0.35rem; color: var(--dark); + letter-spacing: -0.01em; } .features-strip .item p { font-size: 0.8rem; @@ -292,7 +302,7 @@
    6 global locations Deploy in 5 min - Instant setup + AI support included Instant backups
    @@ -384,27 +394,27 @@
    -

    5-Minute Deployment

    +

    5-Minute Deployment

    No DevOps team needed. Pick a plan, choose your region, and your Odoo instance is live in minutes.

    -

    Automatic Backups & SSL

    +

    Automatic Backups & SSL

    Daily backups stored in redundant slots. Free SSL certificates on every domain — always secure.

    -

    6 Global Locations

    +

    6 Global Locations

    US, UK, Brazil, India, Australia, Netherlands. Choose your data region at deploy time.

    -

    Git-Based Module Deployment

    -

    Push custom modules via Git or use one-click Quick Git. No FTP, no shenanigans.

    +

    Git-Based Module Deployment

    +

    Push custom modules via Git or use one-click Quick Git. No FTP, no hassle.

    -

    Support Bot & Human Support

    +

    Support Bot & Human Support

    AI support bot for instant fixes. Human team for everything else. Your UUID is your key.

    @@ -458,7 +468,7 @@ via Git or use one-click Quick Git. No FTP, no hassle.
  • - Full management through your ODOO Settings Panel + Full management through your ODOO Settings Panel — no SSH, no terminal, no DevOps team required.
    • @@ -573,9 +583,9 @@

    “ODOO Standard .. that is all my business needs”

    Buy Now
      -
    • ODOO CE Hosting
      • -
    • Automatic Backups
      • -
    • Domain Mapping, SSL Cert
      • +
    • ODOO CE Hosting
      • +
    • Automatic Backups
      • +
    • Domain Mapping, SSL Cert
    Instant setup, satisfied or reimbursed.
    @@ -592,10 +602,10 @@

    “I need some modules and professional reports”

    Buy Now
    Instant setup, satisfied or reimbursed.
    @@ -612,12 +622,12 @@

    “ODOO Enterprise is a must have!”

    Buy Now
    Instant setup, satisfied or reimbursed.
    @@ -632,12 +642,12 @@

    “My house! My Horse! My Server!”

    - Contact Us + Get Custom Quote
    Instant setup, satisfied or reimbursed.
    @@ -648,38 +658,36 @@ -