Shape Brief: oc-guy.com Homepage

1. Job and Audience

Audience: Small companies and startups searching for an affordable, battle-proven ERP to run their business in the AI era. They're founders, ops leads, or technical decision-makers — tired of expensive enterprise licenses, curious about ODOO but unsure if it's "for them."

Visitor mode: Persuade — earn attention, build credibility, and drive action (watch content, get in touch).

Success: The visitor leaves believing ODOO Community + AI is the smartest move they could make for their business stack.

2. Outcome and Proof

Primary action: Watch a tutorial/video / Contact Oliver for consultation.

Product truth: ODOO Community is cheap but battle-proven — the perfect ERP foundation to bolt AI on top. The OC Guy (Oliver Arnold / 安雷威) is the alter ego advocate making this case.

Evidence on hand: Video scenes (s1.mp4–s4.mp4), title screen/end card PNGs, ODOO login screenshot. No testimonials or case studies — none should be fabricated.

3. Visual Direction

Reference: https://impeccable.style/neo-mirai/ — warm, sophisticated, artistic design language with generous typography, illustrated atmosphere, and refined texture. Not ODOO-like (no enterprise blue/white functionalism).

Palette (The OC Guy's existing identity): Dark backgrounds (#0a0a0f), purple (#9C27B0), cyan (#00E6FF), with neo-mirai's warmth blended in — think deep night backgrounds with glowing purple/cyan accents and amber/gold warmth for approachability.

Feeling: Classy, confident, forward-looking. Cyberpunk warmth — "systems with warmth, machines with a human horizon."

4. Scope and Boundaries

Fidelity: Production-ready single HTML page. Static HTML/CSS — no framework, no build step.

Breadth: One page — the homepage. Internal sections anchor-scrolled on the same page.

What is in scope:

Hero section (strong, simple, classy)
Mission / Positioning section (ODOO Community + AI)
Blog section (news, tips & tricks, tutorials)
About The OC Guy / Oliver section
6 fixed always-visible focal points (persistent navigation/feature anchors)
Footer with contact/social info
Responsive design (desktop + mobile)

What is out of scope:

Individual blog/article pages (future)
Contact form (for now — link/email is fine)
Newsletter integration (undecided)
ODOO instance embedding/iframe (undecided)
Multi-page navigation

5. States and Ranges

Content range: Minimal (launch) to growing (several blog posts). Hero has at most 3 lines of copy. Blog section starts with 1–6 placeholder entries.
Responsive breakpoints: Desktop (1200px+), tablet (761–1199px), mobile (<=760px).
Animations: Scroll-triggered reveals, subtle entrance animations on hero elements (like neo-mirai's data-reveal pattern).
Empty/first-run: No blog posts? Show a "Coming soon" placeholder. No videos? Show a placeholder or link to YouTube.

6. Interaction and Layout

Page topology (top to bottom):

Sticky header — brand logo, 6 focal-point navigation items, minimal
Hero — full-viewport, strong visual impact. "THE OC GUY" title, tagline "ODOO Community Advocate", CTA link. Background: cyberpunk illustration or gradient with particle/glow effects (existing brand aesthetic from title screen).
The Mission — 2-column layout: copy explaining ODOO Community + AI positioning, with a visual (frame from a video or stylized diagram).
Blog / Content — card grid showing latest posts/videos. Each card: thumbnail, title, excerpt, date. Filterable or simply chronological. "Tips & Tricks", "Tutorials", "News" as categories.
About — Who is The OC Guy / Oliver Arnold. Photo or avatar, bio, alter ego story. Call to action.
CTA / Contact — Final push. "Get in touch" / "Start your ODOO AI journey" with email link.
Footer — copyright, social links, back to top.

6 focal points (persistent nav items, always visible in header or as a floating nav):

Home
Mission
Blog / Content
About
Contact
Videos (or ODOO Community link)

Responsiveness: Desktop — wide layout with generous spacing. Tablet — reduced margins, 2-column grids collapse. Mobile — single column, hamburger nav, stacked sections.

Animations (neo-mirai inspired):

Staggered reveal on scroll using intersection observer
Hero title entrance animation (letters animate in)
Subtle parallax or glow effects on hero
Hover effects on cards (lift + shadow)

7. Constraints and Open Decisions

Binding:

Static HTML/CSS only (confirmed)
Push-to-deploy via git (no CI/CD pipeline)
Must work without JavaScript frameworks (plain JS for scroll animations OK)
Brand palette: dark bg, purple, cyan (from existing assets)
Tagline: "ODOO Community Advocate"
Creator name: Oliver Arnold / 安雷威
Blog section must accommodate news, tips & tricks, tutorials categories

Open:

Exact hero imagery — use video stills or CSS-generated effects?
Blog content format — inline HTML or external markdown files?
Contact link — mailto: or a simple form later?
Social links — which platforms (YouTube, X/Twitter, LinkedIn)?
Custom domain email for Oliver?

5.2 KiB Raw Blame History Unescape Escape