Kairo
Dark-cinema AI & SaaS website template

About This Template
Kairo is a premium dark-cinema SaaS template built for AI platforms, automation tools, and developer products. Eighteen production-ready pages cover features, pricing, integrations, documentation, API reference, changelog, blog, case studies, careers with individual job postings, about, contact, status, and legal pages. Signature hero with animated SVG chronometer and iris-reveal dashboard, GSAP SplitText character scramble, bento feature grid, DrawSVG timeline, sticky technical specs with animated terminal, and a Sanity CMS version available separately.
Signature
The hero features an animated SVG chronometer with three concentric rotating arcs, paired with an iris-reveal dashboard that expands from a zero-radius clip-path circle as the user scrolls — like a camera shutter opening to reveal the product interface beneath.
Features
- 18 complete pages — Home, Features, Pricing, Integrations, Docs, API Reference, Changelog, Blog, Post, Case Studies, Case Study, About, Careers, Job Posting, Contact, Status, Privacy, Terms, 404
- Animated SVG chronometer hero with three rotating arcs driven by GSAP
- Iris reveal — dashboard image expands via clip-path circle like a camera shutter on scroll
- SplitText character scramble headline animation on load
- Bento feature grid — asymmetric 6-card magazine layout
- DrawSVG animated connector line on 3-step timeline
- Sticky technical specs with animated terminal code block
- 12 integration tiles with hover glow — Slack, GitHub, Stripe, etc.
- 3-tier pricing cards with feature matrix
- Documentation layout with sidebar navigation
- 7 content collections — blog, case studies, changelog, integrations, jobs, team members
- Infinite logo marquee trust bar with 8 brand logos
- Lenis smooth scroll + GSAP ScrollTrigger on all sections
- Self-hosted fonts — Syne Variable (headings) + Geist (body) via Fontsource
- Sanity CMS version available separately for full content management
- TypeScript strict mode — zero any
Deployment
Tech Stack
Typography
Variable geometric heading (Syne) + modern sans body (Geist) — self-hosted
Color Palette
Dark cinema — deep near-black (#0A0A08), amber/bronze accent (#C97B2E), steel-blue primary (#8BA8BE)