# ClearInvoice — Agency v9
Dark-mode SaaS hero section for "ClearInvoice", an invoicing/billing product. Full-screen HLS video background, gradient top bar, responsive navbar with mobile hamburger, staggered motion/react entrance animations, gradient-glow primary CTA, and social proof row.
---
## Fonts
### Headings: Switzer
Loaded via `@import` in `theme.css` from Fontshare CDN. Medium weight, tight tracking.
### Body: Geist Sans
From the central font registry (`geistSans`). Clean, legible.
---
## Colors
| Token | Name | Hex |
|-------|------|-----|
| `--color-background` | Background | `#0A0A0F` |
| `--color-foreground` | Foreground | `#FFFFFF` |
| `--color-primary` | Primary (orange-red) | `#FF3300` |
| `--color-primary-foreground` | Primary fg | `#FFFFFF` |
| `--color-secondary` | Secondary | `#1A1A24` |
| `--color-muted` | Muted | `#1A1A24` |
| `--color-muted-foreground` | Muted fg | `#9B9BA4` |
| `--color-accent` | Accent (orange) | `#EE7926` |
| `--color-accent-foreground` | Accent fg | `#FFFFFF` |
| `--color-card` | Card | `#161620` |
| `--color-card-foreground` | Card fg | `#FFFFFF` |
| `--color-border` | Border | `#2A2A35` |
---
## Background video
- Source: `https://stream.mux.com/hUT6X11m1Vkw1QMxPOLgI761x2cfpi9bHFbi5cNg4014.m3u8`
- Behavior: autoplay, loop, muted, playsInline
- Opacity: 100% (no dark overlay)
- Implementation: memoized `HlsVideo` component using `hls.js`
- Z-index: behind all content (`-z-10`)
---
## Layout
### Top bar
5px high gradient bar: `from-[#ccf] via-[#e7d04c] to-[#31fb78]`
### Navbar
- Logo on left
- Links centered: Features, Pricing, Reviews
- Auth buttons on right: Sign in (ghost), Sign up (primary gradient)
- Mobile: hamburger menu opens full-width dropdown
### Hero content
- Headline: "Manage your online store while save 3x operating cost" (`text-5xl md:text-6xl`, tight leading)
- Subhead: "ClearInvoice takes the hassle out of billing with easy-to-use tools." (white/90)
- Animations: motion/react stagger (fade up + slide)
### Primary button
- Background: gradient `from-[#FF3300] to-[#EE7926]`
- Glow: absolute div behind with `bg-orange-600 blur-lg opacity-20`
- Inner stroke: 1.5px `border-white/20` overlay
- Hover: `scale: 1.05`, glow to `opacity-60`, arrow slides in
### Secondary button
- Background: `bg-white/90 backdrop-blur`
- Inner stroke: 1.5px `border-black/5`
- Hover: `scale: 1.05`, solid white
### Social proof
- 3 overlapping user avatars
- Text: "Trusted by 210k+ stores worldwide"