> For the complete documentation index, see [llms.txt](https://bhplugin.gitbook.io/tapotik-ai-angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bhplugin.gitbook.io/tapotik-ai-angular/getting-started.md).

# Getting Started

**Tapotik AI** is a premium, animated, production-ready template built with **Angular 22**, **Tailwind CSS v4**, **ZardUI**, and **Motion**. It is designed for AI startups, SaaS products, workflow-automation platforms, enterprise AI tools, and creative agencies that need a futuristic, immersive marketing site plus a full dashboard — out of the box.

This template is **UI-only**. There is no backend, database, or API layer bundled in — all content is static/mock data and every form simulates submission. This keeps the template framework-agnostic on the data side, so you can wire in whatever backend you prefer at clearly marked swap-in points.

***

## 🔥 Key Features

* **40+ pages** — marketing, product, dashboard, docs, auth, blog, and legal.
* **Full admin dashboard** — a complete app shell (sidebar + topbar) with 7 pages: overview with charts/KPIs, Chat/Image/Voice studios, Agents, multi-tab Settings, and Billing.
* **150+ components** — design-system primitives, effects, homepage sections, and app UI.
* **Dark & light mode** — dark-first futuristic aesthetic, fully token-driven via `ZardDarkMode` (`.dark` class strategy).
* **Immersive animations** — aurora backgrounds, spotlight cards, magnetic buttons, typewriter, marquees, scroll reveals, and 3D tilt.
* **Glassmorphism & bento grids** — a modern layout language used consistently throughout.
* **Fully responsive** — mobile-first and tested across breakpoints.
* **SEO optimized** — per-page metadata, Open Graph, `sitemap.xml`, and `robots.txt`.
* **Accessible** — semantic markup, focus-visible states, reduced-motion support, and ARIA labels.
* **Performance-first** — static/SSG prerendering, zero third-party scripts, zero image-CDN dependencies (visuals are CSS/SVG).
* **Near-perfect PageSpeed** — 98 Performance, 100 Accessibility, 100 Best Practices, 100 SEO in testing.

***

## 💡 Use Cases

**Tapotik AI** is a flexible foundation for any modern AI or SaaS product:

* **AI startups** — launch a polished marketing site + product demo pages fast.
* **SaaS products** — pair the landing pages with the included dashboard shell.
* **Workflow-automation platforms** — showcase agents and integrations.
* **Enterprise AI tools** — professional, accessible, dark-first UI.
* **Creative & dev agencies** — a reusable base to spin up client projects.
* **Developer tools & APIs** — ready-made docs section with quickstart, auth, and API pages.

***

## 🏆 Why Choose Tapotik AI

* **Built on the latest stack** — Angular 22, Tailwind v4 — not legacy tooling.
* **Production-ready, not a mockup** — real routing, SEO, sitemap, and a11y baked in.
* **Truly token-driven** — rebrand the entire template from a handful of CSS variables.
* **Static-first architecture** — fast by default, with every page prerendered to HTML at build time and lazy-loaded routes.
* **No bloat** — zero third-party scripts, zero image-CDN dependencies; all visuals are CSS/SVG.
* **Near-perfect Lighthouse scores** — proven performance, accessibility, and SEO (see below).
* **Clean, documented code** — strict TypeScript, ESLint gate, and centralized data/config.
* **Backend-agnostic** — clearly marked swap-in points to wire in any API.

***

## ⚡ Lighthouse / PageSpeed Insights

**Tapotik AI** is built for speed and quality. A [PageSpeed Insights](https://pagespeed.web.dev/) run of a production build (Desktop) scores near-perfect across the board:

| Metric           |  Score  |
| ---------------- | :-----: |
| ⚡ Performance    |  **98** |
| ♿ Accessibility  | **100** |
| ✅ Best Practices | **100** |
| 🔍 SEO           | **100** |

These results come from real architectural choices — static/SSG prerendering, zero third-party scripts, no image-CDN dependencies (all visuals are CSS/SVG), reduced-motion support, and semantic, accessible markup. Your own scores will vary with hosting, added scripts, and content.

***

## 🧰 Tech Stack

| Layer      | Tool                                                                |
| ---------- | ------------------------------------------------------------------- |
| Framework  | Angular 22 (standalone components, signals, zoneless)               |
| UI         | Tailwind CSS v4                                                     |
| Components | ZardUI (shadcn/ui-style primitives for Angular) on **Angular CDK**  |
| Animation  | Motion, Lenis smooth scroll, tailwindcss-animate                    |
| Charts     | Apache ECharts (ZardUI Chart)                                       |
| Forms      | Angular Signal Forms                                                |
| Command ⌘K | ZardUI Command                                                      |
| Icons      | Lucide (ng-icons)                                                   |
| Fonts      | Bricolage Grotesque (headings), Inter (body), JetBrains Mono (code) |

***

## 📦 What's Inside

The project follows the official **Angular style guide**: features are grouped by area, every route is a lazy-loaded standalone component, and every page is prerendered to static HTML at build time.

```
src/
├── index.html          # fonts, theme-color, no-flash theme script
├── styles.css          # design tokens + utilities + keyframes
└── app/
    ├── app.routes.ts   # marketing / auth / dashboard route groups
    ├── core/           # site config, mock data, SEO, services, helpers
    ├── shared/
    │   ├── components/ # design-system primitives (ZardUI)
    │   ├── effects/    # aurora, reveal, marquee, spotlight, tilt…
    │   ├── ui/         # prompt bar, toggle chip, submit button…
    │   └── site/       # logo, section heading, newsletter, blog card…
    └── features/
        ├── marketing/  # public site — navbar + footer layout, docs
        ├── auth/       # split-screen auth layout
        └── dashboard/  # dashboard shell (sidebar + topbar)
```

***

## 📑 Included Pages

**40+ pages** across four route groups — marketing, AI products, auth, and a full dashboard:

* **Marketing** — Home, About, Features, Pricing, Integrations, Changelog, Careers (+ job details), Contact, Blog (+ 6 articles), Docs (10 pages), Privacy, Terms, 404.
* **AI Products** — AI Chat, AI Image, AI Video, AI Voice, AI Agents (each with unique demo visuals).
* **Admin Dashboard** — Overview, Chat, Image, Voice, Agents, Settings, Billing (full app shell with sidebar + topbar).
* **Auth** — Login, Sign up, Forgot password.

See the full map in [**Site Preview**](/tapotik-ai-angular/site-preview.md).

***

## 🌐 Browser Compatibility

Tested and supported on the latest versions of all modern browsers:

| Browser            | Supported |
| ------------------ | :-------: |
| Google Chrome      |     ✅     |
| Microsoft Edge     |     ✅     |
| Mozilla Firefox    |     ✅     |
| Safari (macOS/iOS) |     ✅     |
| Opera / Brave      |     ✅     |

Fully responsive across mobile, tablet, and desktop breakpoints. Internet Explorer is **not** supported (Angular 22 targets modern evergreen browsers).

***

## 🔄 Free Lifetime Updates

Every purchase includes **free lifetime updates**. As the template evolves — new pages, components, dependency bumps, and fixes — re-download the latest version from your marketplace account at no extra cost.

***

## 💬 Dedicated Support

Need assistance? We're here to help! Your purchase includes **6 months of free support**, which can be extended anytime. Whether you need help with setup, bug fixing, or customization guidance, feel free to reach out.

📧 Contact Support: [Click Here](mailto:bhplugin@gmail.com)