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?
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
# Product
|
||||
|
||||
<!-- impeccable:product-schema 1 -->
|
||||
|
||||
## Platform
|
||||
|
||||
web
|
||||
|
||||
## Stack
|
||||
|
||||
Plain static HTML/CSS. No framework.
|
||||
|
||||
## Users
|
||||
|
||||
Small companies and startups searching for a business solution in the AI era. They need an affordable, battle-proven ERP as a foundation — and The OC Guy shows them how ODOO Community + AI is the answer. The visitor should walk away seeing ODOO Community as the smart, cheap backbone for an AI-powered business.
|
||||
|
||||
## Product Purpose
|
||||
|
||||
oc-guy.com is the homepage and brand hub for The OC Guy — the alter ego of Oliver Arnold (安雷威), an advocate for using ODOO Community as the affordable, battle-proven ERP foundation for bolting AI on top. The site introduces The OC Guy, explains the mission, and drives engagement with video content and community resources.
|
||||
|
||||
## Positioning
|
||||
|
||||
ODOO Community is the best kept secret in business software — a full-featured, production-hardened ERP that costs fractions of the proprietary alternatives, and it's the perfect platform for the AI era. The OC Guy exists to wake up small companies and startups to this truth. The strong belief: you don't need expensive enterprise licenses to run a modern, AI-powered business — you need ODOO Community plus smart AI on top.
|
||||
|
||||
## Operating Context
|
||||
|
||||
- Site served as a static webpage at `https://oc-guy.com`
|
||||
- Content is video-driven — scenes, title cards, and screen captures exist in `/root/workspace/40_assets/`
|
||||
- ODOO instance used for demos: `https://005-003-9a9333fc-1f68-4786-a4fe-5c6d24d207ed.odoo4projects.com`
|
||||
- Repo at `/root/oc-guy`, push-to-deploy via `git push origin main`
|
||||
|
||||
## Capabilities and Constraints
|
||||
|
||||
- Single-page or simple multi-page static site
|
||||
- Must host/surface video content from the broader project
|
||||
- Must communicate the ODOO Community + AI positioning clearly
|
||||
- [OPEN] Email/newsletter signup? Not yet decided.
|
||||
- [OPEN] Blog or changelog section? Not yet decided.
|
||||
|
||||
## Brand Commitments
|
||||
|
||||
- Name: **The OC Guy**
|
||||
- Tagline: **ODOO Community Advocate**
|
||||
- Creator: Oliver Arnold / 安雷威
|
||||
- Visual identity from existing video assets: dark background (`#0a0a0f`), purple (`#9C27B0`), cyan (`#00E6FF`), glitch/scanline effects, tech-cyberpunk aesthetic
|
||||
- Domain: `oc-guy.com`
|
||||
|
||||
## Evidence on Hand
|
||||
|
||||
- Title screen HTML with brand styling: `/root/workspace/40_assets/title_screen_hyperframes.html`
|
||||
- Frame renderer with palette and animations: `/root/workspace/40_assets/frame_renderer.html`
|
||||
- Video scenes (s1.mp4 through s4.mp4) and PNG title/end cards in `/root/workspace/40_assets/`
|
||||
- ODOO login page screenshot: `/root/workspace/40_assets/odoo_login_page.png`
|
||||
- No testimonials, case studies, press mentions, or customer logos available. None should be fabricated.
|
||||
|
||||
## Product Principles
|
||||
|
||||
1. **Visual energy matches the mission** — The cyberpunk aesthetic signals this is forward-looking tech, not dusty enterprise software.
|
||||
2. **Community first** — The OC Guy serves the ODOO Community. Value, advocacy, and connection over sales.
|
||||
3. **Video as the primary medium** — The OC Guy communicates through video content. The site is a hub that leads there.
|
||||
4. **Authenticity over hype** — Real ODOO features, real demonstrations, real positioning. No fabricated success stories.
|
||||
5. **Keep it lean** — Static HTML/CSS, no build tooling, no framework overhead. Fast to load, simple to maintain.
|
||||
|
||||
## Accessibility & Inclusion
|
||||
|
||||
No specific accessibility requirements have been established. As a public website, WCAG 2.1 AA compliance should be targeted. Video content should include captions.
|
||||
+810
-1
@@ -1 +1,810 @@
|
||||
-> HELLO OC GUY!
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>The OC Guy — ODOO Community Advocate</title>
|
||||
<meta name="description" content="The OC Guy is your ODOO Community advocate. Small companies and startups — run your business with battle-proven ODOO ERP and bolt AI on top.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ===== RESET ===== */
|
||||
*,::before,::after{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
|
||||
body{margin:0;min-width:320px;background:#0a0a0f;color:#e8e8f0;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:clip}
|
||||
img{display:block;max-width:100%;height:auto}
|
||||
a{color:inherit;text-decoration:none}
|
||||
button,input{font:inherit;color:inherit}
|
||||
:focus-visible{outline:2.5px solid #00e6ff;outline-offset:4px;border-radius:2px}
|
||||
::selection{background:#9c27b055;color:#fff}
|
||||
.skip-link{position:fixed;top:.75rem;left:.75rem;z-index:100;padding:.6rem 1rem;background:#0a0a0f;color:#e8e8f0;border:1px solid #9c27b066;border-radius:6px;font-size:.8rem;transform:translateY(-180%);transition:transform 300ms cubic-bezier(.16,1,.3,1)}
|
||||
.skip-link:focus{transform:translateY(0)}
|
||||
|
||||
/* ===== CUSTOM PROPS ===== */
|
||||
:root{
|
||||
--bg:#0a0a0f;
|
||||
--bg-soft:#12101e;
|
||||
--bg-card:#16142a;
|
||||
--bg-elevated:#1c1a32;
|
||||
--purple:#9c27b0;
|
||||
--purple-glow:rgba(156,39,176,.35);
|
||||
--cyan:#00e6ff;
|
||||
--cyan-glow:rgba(0,230,255,.25);
|
||||
--amber:#d4a04a;
|
||||
--amber-soft:#b8913e;
|
||||
--gold:oklch(68% .145 74);
|
||||
--gold-bright:oklch(76% .165 80);
|
||||
--text:#e8e8f0;
|
||||
--text-soft:#9898b0;
|
||||
--text-muted:#6a6a82;
|
||||
--line:rgba(156,39,176,.15);
|
||||
--font-display:Chakra Petch,Inter,system-ui,sans-serif;
|
||||
--font-body:Inter,system-ui,-apple-system,sans-serif;
|
||||
--header-h:68px;
|
||||
--ease:cubic-bezier(.16,1,.3,1);
|
||||
--ease-out:cubic-bezier(.22,1,.36,1);
|
||||
--shadow-card:0 8px 32px rgba(0,0,0,.4);
|
||||
--shadow-glow:0 0 60px rgba(156,39,176,.15);
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
.site-header{
|
||||
position:fixed;top:0;left:0;right:0;z-index:50;
|
||||
display:flex;align-items:center;justify-content:space-between;
|
||||
min-height:var(--header-h);
|
||||
padding:0 clamp(1rem,3vw,2.5rem);
|
||||
background:linear-gradient(180deg,#0a0a0fee,#0a0a0fcc,transparent);
|
||||
backdrop-filter:blur(12px);
|
||||
border-bottom:1px solid transparent;
|
||||
transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
|
||||
}
|
||||
.site-header.is-scrolled{
|
||||
border-bottom:1px solid var(--line);
|
||||
box-shadow:0 4px 40px rgba(0,0,0,.5);
|
||||
}
|
||||
.brand{
|
||||
display:flex;align-items:center;gap:.7rem;
|
||||
font-family:var(--font-display);font-size:1.15rem;font-weight:600;
|
||||
letter-spacing:.04em;color:var(--text);
|
||||
}
|
||||
.brand-mark{
|
||||
width:2.1rem;height:2.1rem;border-radius:50%;
|
||||
background:conic-gradient(from 0deg,#9c27b0,#00e6ff,#9c27b0);
|
||||
box-shadow:0 0 20px var(--purple-glow);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.focal-nav{
|
||||
display:flex;align-items:center;gap:clamp(.3rem,1.2vw,1.5rem);
|
||||
list-style:none;margin:0;padding:0;
|
||||
}
|
||||
.focal-nav a{
|
||||
position:relative;
|
||||
display:inline-flex;align-items:center;min-height:44px;
|
||||
padding:.3rem .6rem;
|
||||
font-family:var(--font-display);font-size:.72rem;font-weight:500;
|
||||
text-transform:uppercase;letter-spacing:.08em;
|
||||
color:var(--text-soft);
|
||||
transition:color .2s var(--ease),transform .25s var(--ease);
|
||||
}
|
||||
.focal-nav a::after{
|
||||
content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
|
||||
width:4px;height:4px;border-radius:50%;
|
||||
background:var(--cyan);opacity:0;
|
||||
transition:opacity .2s var(--ease),transform .2s var(--ease);
|
||||
}
|
||||
.focal-nav a:hover,.focal-nav a[aria-current]{
|
||||
color:var(--text);
|
||||
}
|
||||
.focal-nav a:hover::after,.focal-nav a[aria-current]::after{
|
||||
opacity:1;
|
||||
}
|
||||
.nav-toggle{display:none}
|
||||
|
||||
/* ===== SECTIONS ===== */
|
||||
section[id]{scroll-margin-top:var(--header-h)}
|
||||
.section-pad{padding:clamp(4rem,8vw,7rem) clamp(1.2rem,4vw,3rem)}
|
||||
.section-label{
|
||||
font-family:var(--font-display);font-size:.7rem;font-weight:500;
|
||||
text-transform:uppercase;letter-spacing:.15em;
|
||||
color:var(--cyan);margin:0 0 .5rem;
|
||||
}
|
||||
.section-title{
|
||||
font-family:var(--font-display);font-size:clamp(1.6rem,3.8vw,3rem);
|
||||
font-weight:300;line-height:1.1;margin:0 0 1rem;
|
||||
color:var(--text);
|
||||
}
|
||||
.section-title strong{font-weight:600;color:var(--purple)}
|
||||
.section-sub{
|
||||
max-width:36rem;color:var(--text-soft);font-size:clamp(.95rem,1.15vw,1.1rem);
|
||||
margin:0 0 2.5rem;line-height:1.55;
|
||||
}
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.hero{
|
||||
position:relative;min-height:100svh;display:grid;align-items:center;
|
||||
padding:var(--header-h) clamp(1.2rem,4vw,3rem) 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.hero::before{
|
||||
content:'';position:absolute;inset:0;z-index:0;
|
||||
background:
|
||||
radial-gradient(ellipse 60% 50% at 30% 60%,rgba(156,39,176,.2),transparent),
|
||||
radial-gradient(ellipse 50% 40% at 70% 30%,rgba(0,230,255,.08),transparent),
|
||||
radial-gradient(ellipse 80% 50% at 50% 80%,rgba(212,160,74,.06),transparent);
|
||||
}
|
||||
.hero-grid{
|
||||
position:relative;z-index:1;
|
||||
display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
|
||||
width:100%;max-width:1200px;margin:0 auto;
|
||||
}
|
||||
.hero-copy{max-width:38rem}
|
||||
.hero-eyebrow{
|
||||
font-family:var(--font-display);font-size:.72rem;font-weight:500;
|
||||
text-transform:uppercase;letter-spacing:.2em;
|
||||
color:var(--cyan);margin:0 0 .75rem;
|
||||
}
|
||||
.hero h1{
|
||||
font-family:var(--font-display);font-size:clamp(2.8rem,6vw,5.2rem);
|
||||
font-weight:300;line-height:.95;margin:0 0 .6rem;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.hero h1 .line{display:block}
|
||||
.hero h1 .highlight{font-weight:700;background:linear-gradient(135deg,var(--purple),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
|
||||
.hero-tagline{
|
||||
font-size:clamp(1.1rem,1.8vw,1.6rem);
|
||||
color:var(--text-soft);margin:0 0 .4rem;
|
||||
font-weight:300;line-height:1.3;
|
||||
}
|
||||
.hero-summary{
|
||||
max-width:32rem;color:var(--text-muted);font-size:clamp(.88rem,1.05vw,1rem);
|
||||
margin:0 0 2rem;line-height:1.55;
|
||||
}
|
||||
.hero-actions{
|
||||
display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
|
||||
}
|
||||
.btn{
|
||||
display:inline-flex;align-items:center;gap:.5rem;min-height:48px;
|
||||
padding:.75rem 1.6rem;border-radius:8px;
|
||||
font-family:var(--font-display);font-size:.82rem;font-weight:600;
|
||||
text-transform:uppercase;letter-spacing:.06em;
|
||||
cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
|
||||
}
|
||||
.btn-primary{
|
||||
background:linear-gradient(135deg,var(--purple),#7b1fa2);
|
||||
color:#fff;border:none;
|
||||
box-shadow:0 4px 30px var(--purple-glow);
|
||||
}
|
||||
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px var(--purple-glow)}
|
||||
.btn-ghost{
|
||||
background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.15);
|
||||
}
|
||||
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
|
||||
.hero-visual{
|
||||
position:relative;display:grid;place-items:center;
|
||||
min-height:clamp(16rem,30vw,28rem);
|
||||
}
|
||||
.hero-glow{
|
||||
position:absolute;width:clamp(18rem,35vw,32rem);aspect-ratio:1;
|
||||
border-radius:50%;
|
||||
background:radial-gradient(circle,rgba(156,39,176,.2),rgba(0,230,255,.08),transparent 65%);
|
||||
animation:glowPulse 4s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes glowPulse{
|
||||
0%{transform:scale(.85);opacity:.6}
|
||||
100%{transform:scale(1.15);opacity:1}
|
||||
}
|
||||
.hero-grid-lines{
|
||||
position:relative;width:100%;max-width:28rem;aspect-ratio:1;
|
||||
background:
|
||||
linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0 / 12% 100%,
|
||||
linear-gradient(0deg,var(--line) 1px,transparent 1px) 0 0 / 100% 12%;
|
||||
border:1px solid var(--line);border-radius:4px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.hero-grid-lines::before{
|
||||
content:'';position:absolute;
|
||||
top:45%;left:40%;width:20%;height:20%;
|
||||
background:radial-gradient(circle,rgba(0,230,255,.3),transparent);
|
||||
animation:dotDrift 6s ease-in-out infinite alternate;
|
||||
}
|
||||
.hero-cyber-ring{
|
||||
position:absolute;width:60%;aspect-ratio:1;top:20%;left:20%;
|
||||
border:1px solid rgba(156,39,176,.25);border-radius:50%;
|
||||
animation:ringSpin 12s linear infinite;
|
||||
}
|
||||
.hero-cyber-ring:nth-child(2){width:80%;top:10%;left:10%;border-color:rgba(0,230,255,.12);animation-direction:reverse;animation-duration:18s}
|
||||
@keyframes ringSpin{to{transform:rotate(360deg)}}
|
||||
@keyframes dotDrift{
|
||||
0%{transform:translate(0,0) scale(1);opacity:.4}
|
||||
100%{transform:translate(30%,-25%) scale(1.5);opacity:.8}
|
||||
}
|
||||
.hero-scroll-hint{
|
||||
position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
|
||||
display:flex;flex-direction:column;align-items:center;gap:.4rem;
|
||||
color:var(--text-muted);font-size:.68rem;font-family:var(--font-display);
|
||||
letter-spacing:.1em;text-transform:uppercase;animation:scrollBob 2s ease-in-out infinite;
|
||||
}
|
||||
.hero-scroll-hint span{display:block;width:1px;height:1.8rem;background:var(--text-muted)}
|
||||
@keyframes scrollBob{
|
||||
0%,100%{transform:translateX(-50%) translateY(0)}
|
||||
50%{transform:translateX(-50%) translateY(6px)}
|
||||
}
|
||||
|
||||
/* ===== MISSION ===== */
|
||||
.mission{
|
||||
background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
|
||||
}
|
||||
.mission-grid{
|
||||
display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
|
||||
max-width:1200px;margin:0 auto;align-items:center;
|
||||
}
|
||||
.mission-visual{
|
||||
position:relative;display:grid;place-items:center;min-height:18rem;
|
||||
}
|
||||
.mission-stack{
|
||||
display:grid;gap:1rem;width:100%;
|
||||
}
|
||||
.mission-layer{
|
||||
padding:1.2rem 1.5rem;border-radius:10px;
|
||||
background:var(--bg-card);border:1px solid var(--line);
|
||||
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
|
||||
}
|
||||
.mission-layer:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
|
||||
.mission-layer h3{
|
||||
font-family:var(--font-display);font-size:1rem;font-weight:600;
|
||||
margin:0 0 .2rem;color:var(--text);
|
||||
}
|
||||
.mission-layer p{
|
||||
margin:0;font-size:.88rem;color:var(--text-soft);line-height:1.4;
|
||||
}
|
||||
.mission-layer .layer-badge{
|
||||
display:inline-block;padding:.15rem .6rem;border-radius:4px;
|
||||
font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
|
||||
margin-bottom:.35rem;
|
||||
}
|
||||
.badge-odoo{background:rgba(156,39,176,.2);color:var(--purple);border:1px solid rgba(156,39,176,.3)}
|
||||
.badge-ai{background:rgba(0,230,255,.1);color:var(--cyan);border:1px solid rgba(0,230,255,.2)}
|
||||
.badge-stack{background:rgba(212,160,74,.12);color:var(--amber);border:1px solid rgba(212,160,74,.2)}
|
||||
|
||||
/* ===== CONTENT / BLOG ===== */
|
||||
.content-header{
|
||||
display:flex;justify-content:space-between;align-items:flex-end;
|
||||
flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem;
|
||||
}
|
||||
.content-filter{
|
||||
display:flex;gap:.4rem;flex-wrap:wrap;
|
||||
}
|
||||
.filter-btn{
|
||||
padding:.4rem 1rem;border-radius:20px;border:1px solid var(--line);
|
||||
background:transparent;color:var(--text-soft);font-size:.8rem;
|
||||
cursor:pointer;transition:all .2s var(--ease);font-family:var(--font-body);
|
||||
}
|
||||
.filter-btn:hover,.filter-btn.is-active{
|
||||
background:var(--purple);border-color:var(--purple);color:#fff;
|
||||
}
|
||||
.card-grid{
|
||||
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));
|
||||
gap:clamp(1rem,2vw,1.5rem);max-width:1200px;margin:0 auto;
|
||||
}
|
||||
.card{
|
||||
background:var(--bg-card);border:1px solid var(--line);border-radius:12px;
|
||||
overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
|
||||
}
|
||||
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card)}
|
||||
.card-thumb{
|
||||
aspect-ratio:16/9;background:var(--bg-elevated);
|
||||
display:grid;place-items:center;overflow:hidden;
|
||||
position:relative;
|
||||
}
|
||||
.card-thumb .placeholder-icon{
|
||||
font-size:2rem;opacity:.15;color:var(--purple);
|
||||
}
|
||||
.card-thumb .card-cat{
|
||||
position:absolute;top:.6rem;left:.6rem;
|
||||
padding:.15rem .6rem;border-radius:4px;font-size:.62rem;font-weight:600;
|
||||
text-transform:uppercase;letter-spacing:.05em;
|
||||
}
|
||||
.cat-tutorial{background:rgba(0,230,255,.15);color:var(--cyan)}
|
||||
.cat-tips{background:rgba(156,39,176,.15);color:var(--purple)}
|
||||
.cat-news{background:rgba(212,160,74,.15);color:var(--amber)}
|
||||
.card-body{padding:1.2rem 1.4rem 1.4rem}
|
||||
.card-date{color:var(--text-muted);font-size:.72rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em}
|
||||
.card-body h3{
|
||||
font-family:var(--font-display);font-size:1.1rem;font-weight:600;
|
||||
margin:.3rem 0 .4rem;color:var(--text);line-height:1.25;
|
||||
}
|
||||
.card-body p{
|
||||
font-size:.86rem;color:var(--text-soft);line-height:1.45;margin:0;
|
||||
}
|
||||
.card-empty{
|
||||
grid-column:1/-1;text-align:center;padding:3rem;
|
||||
color:var(--text-muted);font-size:.95rem;
|
||||
background:var(--bg-card);border:1px dashed var(--line);border-radius:12px;
|
||||
}
|
||||
|
||||
/* ===== ABOUT ===== */
|
||||
.about{
|
||||
background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
|
||||
}
|
||||
.about-grid{
|
||||
display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,4vw,3.5rem);
|
||||
max-width:1200px;margin:0 auto;align-items:start;
|
||||
}
|
||||
.about-avatar{
|
||||
width:clamp(8rem,14vw,12rem);aspect-ratio:1;border-radius:50%;
|
||||
background:conic-gradient(from 180deg,var(--purple),var(--cyan),var(--purple));
|
||||
display:grid;place-items:center;position:relative;
|
||||
box-shadow:0 0 60px var(--purple-glow);
|
||||
flex-shrink:0;
|
||||
}
|
||||
.about-avatar-inner{
|
||||
width:calc(100% - 6px);height:calc(100% - 6px);border-radius:50%;
|
||||
background:var(--bg-soft);display:grid;place-items:center;
|
||||
font-family:var(--font-display);font-weight:700;
|
||||
font-size:clamp(1.8rem,3vw,2.5rem);color:var(--cyan);
|
||||
}
|
||||
.about-text h2{margin-top:0}
|
||||
.about-text .section-sub{margin-bottom:1.5rem}
|
||||
.about-detail{
|
||||
display:grid;gap:.8rem;
|
||||
}
|
||||
.about-detail dt{
|
||||
font-family:var(--font-display);font-size:.7rem;font-weight:600;
|
||||
text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);
|
||||
margin-bottom:.15rem;
|
||||
}
|
||||
.about-detail dd{margin:0;color:var(--text-soft);font-size:.92rem;line-height:1.45}
|
||||
|
||||
/* ===== CTA ===== */
|
||||
.cta{
|
||||
text-align:center;position:relative;overflow:hidden;
|
||||
}
|
||||
.cta::before{
|
||||
content:'';position:absolute;inset:0;z-index:0;
|
||||
background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(156,39,176,.12),transparent);
|
||||
}
|
||||
.cta-inner{
|
||||
position:relative;z-index:1;max-width:40rem;margin:0 auto;
|
||||
}
|
||||
.cta-inner .section-title{max-width:30rem;margin-left:auto;margin-right:auto}
|
||||
.cta-inner .section-sub{margin-left:auto;margin-right:auto}
|
||||
.cta-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem}
|
||||
.cta-email{
|
||||
display:inline-flex;align-items:center;gap:.5rem;
|
||||
padding:.75rem 1.6rem;border-radius:8px;
|
||||
background:rgba(255,255,255,.04);border:1px solid var(--line);
|
||||
color:var(--text);font-family:var(--font-display);font-size:.85rem;
|
||||
transition:all .25s var(--ease);
|
||||
}
|
||||
.cta-email:hover{background:rgba(255,255,255,.08);border-color:var(--purple);transform:translateY(-2px)}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
.site-footer{
|
||||
border-top:1px solid var(--line);
|
||||
padding:2rem clamp(1.2rem,4vw,3rem);
|
||||
}
|
||||
.footer-grid{
|
||||
max-width:1200px;margin:0 auto;
|
||||
display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
|
||||
}
|
||||
.footer-brand{
|
||||
display:flex;align-items:center;gap:.6rem;
|
||||
font-family:var(--font-display);font-size:.9rem;font-weight:600;color:var(--text);
|
||||
}
|
||||
.footer-brand .brand-mark{width:1.6rem;height:1.6rem}
|
||||
.footer-copy{color:var(--text-muted);font-size:.78rem;margin:0}
|
||||
.footer-social{display:flex;gap:.8rem}
|
||||
.footer-social a{
|
||||
display:grid;place-items:center;width:2.5rem;height:2.5rem;
|
||||
border:1px solid var(--line);border-radius:50%;
|
||||
color:var(--text-soft);font-size:.75rem;font-weight:600;font-family:var(--font-display);
|
||||
transition:all .2s var(--ease);
|
||||
}
|
||||
.footer-social a:hover{color:var(--cyan);border-color:var(--cyan);transform:translateY(-3px)}
|
||||
|
||||
/* ===== SCROLL REVEAL ===== */
|
||||
[data-reveal]{
|
||||
opacity:0;filter:blur(4px);
|
||||
transform:translateY(2rem);
|
||||
transition:opacity .7s var(--ease-out),filter .7s var(--ease-out),transform .9s var(--ease-out);
|
||||
}
|
||||
[data-reveal].is-visible{
|
||||
opacity:1;filter:blur(0);transform:translateY(0);
|
||||
}
|
||||
[data-reveal][data-reveal-delay="100"]{transition-delay:.1s}
|
||||
[data-reveal][data-reveal-delay="200"]{transition-delay:.2s}
|
||||
[data-reveal][data-reveal-delay="300"]{transition-delay:.3s}
|
||||
[data-reveal][data-reveal-delay="400"]{transition-delay:.4s}
|
||||
[data-reveal][data-reveal-delay="500"]{transition-delay:.5s}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media(max-width:900px){
|
||||
.hero-grid{grid-template-columns:1fr;gap:1rem}
|
||||
.hero-visual{min-height:14rem;order:-1}
|
||||
.hero-grid-lines{max-width:18rem}
|
||||
.mission-grid{grid-template-columns:1fr}
|
||||
.mission-visual{order:-1;min-height:12rem}
|
||||
.about-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
|
||||
.about-avatar{margin-bottom:1rem}
|
||||
.focal-nav{gap:.2rem}
|
||||
.focal-nav a{padding:.3rem .4rem;font-size:.65rem}
|
||||
}
|
||||
@media(max-width:640px){
|
||||
.site-header{padding:0 .8rem}
|
||||
.brand{font-size:1rem}
|
||||
.brand-mark{width:1.7rem;height:1.7rem}
|
||||
.focal-nav{position:fixed;top:var(--header-h);left:0;right:0;
|
||||
flex-direction:column;gap:0;
|
||||
background:#0a0a0fee;backdrop-filter:blur(16px);
|
||||
border-bottom:1px solid var(--line);
|
||||
padding:.5rem 0;transform:translateY(-120%);opacity:0;
|
||||
transition:transform .3s var(--ease),opacity .2s var(--ease);
|
||||
pointer-events:none;
|
||||
}
|
||||
.focal-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
|
||||
.focal-nav a{width:100%;padding:.7rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.03)}
|
||||
.nav-toggle{
|
||||
display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
|
||||
padding:0;border:none;background:transparent;color:var(--text);
|
||||
font-family:var(--font-display);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
|
||||
cursor:pointer;
|
||||
}
|
||||
.nav-toggle i,.nav-toggle i::before,.nav-toggle i::after{
|
||||
display:block;width:1.4rem;height:1.5px;background:currentColor;
|
||||
position:relative;transition:transform .25s var(--ease),opacity .2s var(--ease);
|
||||
}
|
||||
.nav-toggle i::before,.nav-toggle i::after{
|
||||
content:'';position:absolute;left:0;
|
||||
}
|
||||
.nav-toggle i::before{top:-.4rem}
|
||||
.nav-toggle i::after{top:.4rem}
|
||||
.nav-toggle[aria-expanded=true] i{background:transparent}
|
||||
.nav-toggle[aria-expanded=true] i::before{transform:translateY(.4rem) rotate(45deg)}
|
||||
.nav-toggle[aria-expanded=true] i::after{transform:translateY(-.4rem) rotate(-45deg)}
|
||||
.hero h1{font-size:clamp(2rem,10vw,3.2rem)}
|
||||
.hero-actions{flex-direction:column;align-items:stretch}
|
||||
.hero-actions .btn{justify-content:center}
|
||||
.hero-visual{min-height:10rem}
|
||||
.card-grid{grid-template-columns:1fr}
|
||||
.footer-grid{grid-template-columns:1fr;text-align:center;justify-items:center}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce){
|
||||
*,::before,::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
|
||||
[data-reveal]{opacity:1;filter:none;transform:none}
|
||||
}
|
||||
|
||||
/* ===== SCROLLBAR ===== */
|
||||
::-webkit-scrollbar{width:8px}
|
||||
::-webkit-scrollbar-track{background:#0a0a0f}
|
||||
::-webkit-scrollbar-thumb{background:rgba(156,39,176,.3);border-radius:4px}
|
||||
::-webkit-scrollbar-thumb:hover{background:rgba(156,39,176,.5)}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a class="skip-link" href="#mission">Skip to content</a>
|
||||
|
||||
<!-- ===== HEADER ===== -->
|
||||
<header class="site-header" id="header" role="banner">
|
||||
<a class="brand" href="#" aria-label="The OC Guy home">
|
||||
<span class="brand-mark" aria-hidden="true"></span>
|
||||
<span>OC GUY</span>
|
||||
</a>
|
||||
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation" aria-expanded="false">
|
||||
<i></i>
|
||||
<span>Menu</span>
|
||||
</button>
|
||||
<nav aria-label="Main navigation">
|
||||
<ul class="focal-nav" id="focalNav" role="list">
|
||||
<li><a href="#" aria-current="page">Home</a></li>
|
||||
<li><a href="#mission">Mission</a></li>
|
||||
<li><a href="#content">Blog</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#cta">Contact</a></li>
|
||||
<li><a href="#videos">Videos</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-grid">
|
||||
<div class="hero-copy" data-reveal>
|
||||
<p class="hero-eyebrow">ODOO Community Advocate</p>
|
||||
<h1>
|
||||
<span class="line">THE</span>
|
||||
<span class="line highlight">OC GUY</span>
|
||||
<span class="line">IS HERE</span>
|
||||
</h1>
|
||||
<p class="hero-tagline">Run your business with the best kept secret in ERP.</p>
|
||||
<p class="hero-summary">
|
||||
ODOO Community is battle-proven, affordable, and the perfect foundation for bolting AI on top. I'm here to show you how.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#content" class="btn btn-primary">Watch Videos</a>
|
||||
<a href="#mission" class="btn btn-ghost">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual" data-reveal data-reveal-delay="200">
|
||||
<div class="hero-glow"></div>
|
||||
<div class="hero-grid-lines">
|
||||
<div class="hero-cyber-ring"></div>
|
||||
<div class="hero-cyber-ring"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-scroll-hint" aria-hidden="true">
|
||||
<span></span>
|
||||
Scroll
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== MISSION ===== -->
|
||||
<section class="section-pad mission" id="mission">
|
||||
<div class="mission-grid">
|
||||
<div class="mission-copy" data-reveal>
|
||||
<p class="section-label">The Mission</p>
|
||||
<h2 class="section-title">
|
||||
ODOO Community + AI.<br>
|
||||
<strong>The smart stack</strong> for modern business.
|
||||
</h2>
|
||||
<p class="section-sub">
|
||||
Why pay for expensive enterprise licenses when ODOO Community gives you a full-featured, production-hardened ERP — and leaves you the freedom to bolt AI exactly where it matters?
|
||||
</p>
|
||||
<div class="mission-stack">
|
||||
<div class="mission-layer">
|
||||
<span class="layer-badge badge-odoo">ODOO Community</span>
|
||||
<h3>Battle-proven ERP</h3>
|
||||
<p>CRM, sales, inventory, accounting, manufacturing — a complete business OS used by thousands, totally free.</p>
|
||||
</div>
|
||||
<div class="mission-layer">
|
||||
<span class="layer-badge badge-ai">AI Layer</span>
|
||||
<h3>Intelligence on top</h3>
|
||||
<p>Chatbots, predictive analytics, document intelligence, automation agents. The AI era needs a solid data foundation — ODOO delivers it.</p>
|
||||
</div>
|
||||
<div class="mission-layer">
|
||||
<span class="layer-badge badge-stack">Your Business</span>
|
||||
<h3>Built for startups & SMEs</h3>
|
||||
<p>You don't need Silicon Valley budgets. You need the right base. ODOO Community + AI is the cheapest, smartest path forward.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mission-visual" data-reveal data-reveal-delay="200">
|
||||
<div class="hero-glow" style="width:clamp(14rem,28vw,24rem);opacity:.5"></div>
|
||||
<div style="position:relative;z-index:1;text-align:center;padding:1.5rem">
|
||||
<div style="font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.8rem);font-weight:700;color:var(--purple);line-height:1.1">
|
||||
ODOO<br>
|
||||
<span style="color:var(--cyan)">+ AI</span>
|
||||
</div>
|
||||
<div style="margin-top:.5rem;color:var(--text-muted);font-size:.8rem;letter-spacing:.15em;text-transform:uppercase">
|
||||
The New Standard
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BLOG / CONTENT ===== -->
|
||||
<section class="section-pad" id="content">
|
||||
<div class="content-header" style="max-width:1200px;margin:0 auto 2.5rem" data-reveal>
|
||||
<div>
|
||||
<p class="section-label">Content</p>
|
||||
<h2 class="section-title">News, <strong>Tips & Tricks</strong>, Tutorials</h2>
|
||||
</div>
|
||||
<div class="content-filter" role="tablist" aria-label="Filter content by category">
|
||||
<button class="filter-btn is-active" role="tab" aria-selected="true" data-filter="all">All</button>
|
||||
<button class="filter-btn" role="tab" aria-selected="false" data-filter="tutorial">Tutorials</button>
|
||||
<button class="filter-btn" role="tab" aria-selected="false" data-filter="tips">Tips & Tricks</button>
|
||||
<button class="filter-btn" role="tab" aria-selected="false" data-filter="news">News</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-grid" id="videos">
|
||||
<!-- Card 1 -->
|
||||
<article class="card" data-reveal data-reveal-delay="100" data-category="tutorial">
|
||||
<div class="card-thumb">
|
||||
<span class="card-cat cat-tutorial">Tutorial</span>
|
||||
<span class="placeholder-icon">▶</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-date">Coming Soon</p>
|
||||
<h3>Getting Started with ODOO Community</h3>
|
||||
<p>Your first walkthrough — install, configure, and run your first module on ODOO Community Edition.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<article class="card" data-reveal data-reveal-delay="200" data-category="tips">
|
||||
<div class="card-thumb">
|
||||
<span class="card-cat cat-tips">Tips & Tricks</span>
|
||||
<span class="placeholder-icon">💡</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-date">Coming Soon</p>
|
||||
<h3>5 ODOO Features You Didn't Know Existed</h3>
|
||||
<p>Hidden gems in ODOO Community that save hours of manual work — from automation rules to custom dashboards.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<article class="card" data-reveal data-reveal-delay="300" data-category="news">
|
||||
<div class="card-thumb">
|
||||
<span class="card-cat cat-news">News</span>
|
||||
<span class="placeholder-icon">📢</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-date">Coming Soon</p>
|
||||
<h3>Why ODOO Community is the Best Base for AI</h3>
|
||||
<p>An analysis of ODOO's modular architecture and why it's uniquely suited for AI integration in 2025 and beyond.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 4 (empty placeholder) -->
|
||||
<article class="card" data-reveal data-reveal-delay="400" data-category="tutorial">
|
||||
<div class="card-thumb">
|
||||
<span class="card-cat cat-tutorial">Tutorial</span>
|
||||
<span class="placeholder-icon">▶</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-date">Upcoming</p>
|
||||
<h3>AI Chatbot + ODOO: Full Tutorial</h3>
|
||||
<p>Build an AI-powered customer service chatbot connected to your ODOO CRM — step by step.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== ABOUT ===== -->
|
||||
<section class="section-pad about" id="about">
|
||||
<div class="about-grid">
|
||||
<div class="about-avatar" data-reveal>
|
||||
<div class="about-avatar-inner">OC</div>
|
||||
</div>
|
||||
<div class="about-text" data-reveal>
|
||||
<p class="section-label">About</p>
|
||||
<h2 class="section-title">The OC Guy — <strong>Alter Ego</strong> of Oliver Arnold</h2>
|
||||
<p class="section-sub">
|
||||
I'm Oliver Arnold (安雷威), and The OC Guy is my alter ego — the voice that cuts through the noise to show small companies and startups why ODOO Community is the smartest ERP decision they can make.
|
||||
</p>
|
||||
<dl class="about-detail">
|
||||
<dt>Belief</dt>
|
||||
<dd>You don't need expensive enterprise licenses to run an AI-powered business. ODOO Community gives you a battle-proven foundation. The AI revolution should be accessible to everyone.</dd>
|
||||
<dt>Mission</dt>
|
||||
<dd>To make ODOO Community the default choice for startups and SMEs entering the AI era — through clear tutorials, honest advocacy, and real demonstrations.</dd>
|
||||
<dt>Approach</dt>
|
||||
<dd>Video-first, personality-driven, no fluff. Real ODOO features, real demonstrations, real results. No fabricated case studies, no corporate speak.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== VIDEOS (section anchor) ===== -->
|
||||
<section class="section-pad" id="videos-section" style="display:none" aria-hidden="true"></section>
|
||||
|
||||
<!-- ===== CTA / CONTACT ===== -->
|
||||
<section class="section-pad cta" id="cta">
|
||||
<div class="cta-inner" data-reveal>
|
||||
<p class="section-label" style="color:var(--amber)">Get in Touch</p>
|
||||
<h2 class="section-title">Ready to build your <strong>ODOO + AI</strong> stack?</h2>
|
||||
<p class="section-sub">
|
||||
Whether you're evaluating ODOO, looking for integration advice, or just want to follow along — reach out. Let's make ODOO Community the standard for modern business.
|
||||
</p>
|
||||
<div class="cta-actions">
|
||||
<a href="mailto:oliver@oc-guy.com" class="cta-email">✉ oliver@oc-guy.com</a>
|
||||
<a href="#content" class="btn btn-primary">Explore Content</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="site-footer" role="contentinfo">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<div class="footer-brand">
|
||||
<span class="brand-mark" aria-hidden="true"></span>
|
||||
<span>THE OC GUY</span>
|
||||
</div>
|
||||
<p class="footer-copy">ODOO Community Advocate — Oliver Arnold / 安雷威</p>
|
||||
</div>
|
||||
<div class="footer-social">
|
||||
<a href="https://oc-guy.com" aria-label="YouTube" title="YouTube">YT</a>
|
||||
<a href="https://oc-guy.com" aria-label="X / Twitter" title="X / Twitter">X</a>
|
||||
<a href="https://oc-guy.com" aria-label="LinkedIn" title="LinkedIn">in</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function(){
|
||||
'use strict';
|
||||
|
||||
// Scroll reveal
|
||||
const revealEls = document.querySelectorAll('[data-reveal]');
|
||||
if (revealEls.length && 'IntersectionObserver' in window) {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
||||
revealEls.forEach(el => observer.observe(el));
|
||||
} else {
|
||||
revealEls.forEach(el => el.classList.add('is-visible'));
|
||||
}
|
||||
|
||||
// Header scroll state
|
||||
const header = document.getElementById('header');
|
||||
let lastScroll = 0;
|
||||
window.addEventListener('scroll', () => {
|
||||
const y = window.scrollY;
|
||||
if (y > 60) {
|
||||
header.classList.add('is-scrolled');
|
||||
} else {
|
||||
header.classList.remove('is-scrolled');
|
||||
}
|
||||
lastScroll = y;
|
||||
}, { passive: true });
|
||||
|
||||
// Mobile nav toggle
|
||||
const navToggle = document.getElementById('navToggle');
|
||||
const focalNav = document.getElementById('focalNav');
|
||||
if (navToggle && focalNav) {
|
||||
navToggle.addEventListener('click', () => {
|
||||
const expanded = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !expanded);
|
||||
focalNav.classList.toggle('is-open');
|
||||
});
|
||||
|
||||
// Close nav on link click
|
||||
focalNav.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
focalNav.classList.remove('is-open');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Content filter (blog tabs)
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const cards = document.querySelectorAll('.card-grid .card');
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
filterBtns.forEach(b => { b.classList.remove('is-active'); b.setAttribute('aria-selected', 'false'); });
|
||||
btn.classList.add('is-active');
|
||||
btn.setAttribute('aria-selected', 'true');
|
||||
const filter = btn.dataset.filter;
|
||||
cards.forEach(card => {
|
||||
if (filter === 'all' || card.dataset.category === filter) {
|
||||
card.style.display = '';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Active nav link based on scroll
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = focalNav ? focalNav.querySelectorAll('a') : [];
|
||||
if (sections.length && navLinks.length && 'IntersectionObserver' in window) {
|
||||
const navObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
navLinks.forEach(link => {
|
||||
link.removeAttribute('aria-current');
|
||||
if (link.getAttribute('href') === '#' + entry.target.id) {
|
||||
link.setAttribute('aria-current', 'page');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.2, rootMargin: '-80px 0px -40% 0px' });
|
||||
sections.forEach(s => navObserver.observe(s));
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user