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

1. **Sticky header** — brand logo, 6 focal-point navigation items, minimal
2. **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).
3. **The Mission** — 2-column layout: copy explaining ODOO Community + AI positioning, with a visual (frame from a video or stylized diagram).
4. **Blog / Content** — card grid showing latest posts/videos. Each card: thumbnail, title, excerpt, date. Filterable or simply chronological. "Tips & Tricks", "Tutorials", "News" as categories.
5. **About** — Who is The OC Guy / Oliver Arnold. Photo or avatar, bio, alter ego story. Call to action.
6. **CTA / Contact** — Final push. "Get in touch" / "Start your ODOO AI journey" with email link.
7. **Footer** — copyright, social links, back to top.

**6 focal points** (persistent nav items, always visible in header or as a floating nav):
1. Home
2. Mission
3. Blog / Content
4. About
5. Contact
6. 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?