Zenith — AI Cloud Platform Template

A premium, production-ready website template for AI cloud platforms, SaaS products, and developer tools. Built with pure HTML, CSS, and vanilla JS — no frameworks, no dependencies, no build step.

What's Included

11 fully designed pages:

• Home — Hero with animated badge, trust bar, 3-step pipeline, live metrics strip, real-time monitoring dashboard mock, CTA section
• Features — Architecture breakdown, capability tiles, side-by-side comparison cards
• Platform — Network topology, infrastructure visualization
• Pricing — 3-tier pricing cards with annual/monthly toggle, FAQ accordion
• Docs — Quickstart guides, category grid, searchable documentation layout
• Blog — Article grid with featured post layout
• Blog Post — Long-form article template with sidebar, related posts
• Changelog — Timeline-style release history
• About — Team section, company story, social proof
• Contact — Glass-effect form with info cards
• Login — Split-screen auth with product showcase

Reusable components (in /my-components/ and /components/):

• Node graph visualization
• Product showcase carousel
• Signal capture widget
• Modular hero, nav, footer, CTA, and section components

Design Details

• Dark mode — Deep navy base (#050510), blue/cyan accent system
• Typography — Outfit for headings (ultra-thin 200 weight), Inter for body, JetBrains Mono for code/labels
• Animations — IntersectionObserver reveal system (.reveal, .stagger-up, .reveal-child), CSS keyframe ambient effects, smooth scroll
• Icons — Iconify (Lucide set) loaded via CDN
• Responsive — Desktop, tablet, and mobile breakpoints with CSS-only hamburger nav
• Accessibility — Skip links, focus-visible outlines, semantic HTML, keyboard-navigable
• Performance — No frameworks, no build tools, instant load. Pure static HTML/CSS/JS

Visual Techniques

• Glassmorphic cards with backdrop-filter blur
• Gradient text headings (background-clip: text)
• Animated CTA buttons with shimmer sweep
• SVG noise grain overlay for depth
• Radial gradient ambient glows per section
• Gradient border separators between sections
• Alpha-masked product UI illustrations (CSS-built dashboards, not stock photos)
• Conic-gradient animated borders on featured pricing card
• Custom scrollbar styling

Tech Stack

Layer	Choice
Markup	Semantic HTML5
Styling	Vanilla CSS (custom properties, @property, grid, flexbox)
Scripting	Vanilla JS (IntersectionObserver, DOM)
Icons	Iconify CDN (Lucide)
Fonts	Google Fonts (Outfit, Inter, JetBrains Mono)

Zero dependencies. No npm. No build step. Drop into any project or host anywhere.

Who It's For

• AI/ML startups launching a marketing site
• Developer tool companies needing a polished presence
• SaaS founders who want Linear/Vercel-quality design without hiring a design team
• Agencies looking for a premium starting point for client projects

Usage

1. Download and unzip
2. Open index.html in a browser — it just works
3. Edit text, colors (CSS custom properties in :root), and images to match your brand
4. Deploy to Vercel, Netlify, Cloudflare Pages, or any static host

All colors are controlled via CSS custom properties in :root — update once, applied everywhere.

License

Single commercial license. Use on one project. No resale or redistribution of the template itself.