Build homepage: THE OC Guy brand hub with hero, mission, blog, about, CTA
This commit is contained in:
Oliver Arnold
@@ -0,0 +1,100 @@
|
||||
# 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?
|
||||
Reference in New Issue
Block a user