> For the complete documentation index, see [llms.txt](https://bhplugin.gitbook.io/tapotik-ai/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/getting-started.md).

# Getting Started

**Tapotik AI** is a premium, animated, production-ready template built with **Next.js 16 (App Router)**, **React 19**, **Tailwind CSS v4**, and **Framer 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.

{% hint style="info" %}
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 theme framework-agnostic on the data side, so you can wire in whatever backend you prefer at clearly marked swap-in points.
{% endhint %}

## 🔥 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 `next-themes` (`.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** — Next.js 16, React 19, Tailwind v4 — not legacy tooling.
* **Production-ready, not a mockup** — real routing, SEO, sitemap, and a11y baked in.
* **Truly token-driven** — rebrand the entire theme from a handful of CSS variables.
* **Server-first architecture** — fast by default, with interactivity isolated to client islands.
* **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  | Next.js 16 (App Router, Turbopack)                            |
| UI         | React 19, Tailwind CSS v4                                     |
| Components | shadcn/ui `new-york` primitives on **Base UI**                |
| Animation  | Framer Motion, Lenis smooth scroll, tw-animate-css            |
| Charts     | Recharts                                                      |
| Forms      | React Hook Form                                               |
| Command ⌘K | cmdk                                                          |
| Icons      | Lucide                                                        |
| Fonts      | Space Grotesk (headings), Inter (body), JetBrains Mono (code) |

## 📦 What's Inside

The project follows a **server-first with client islands** architecture. Route `page.tsx` files are Server Components; interactivity is isolated into colocated `_components/*-client.tsx` files marked `'use client'`.

```
src/
├── app/
│   ├── (marketing)/   # public site — navbar + footer layout
│   ├── (auth)/        # split-screen auth layout
│   ├── (app)/         # dashboard shell (sidebar + topbar)
│   ├── layout.tsx     # root: fonts, theme, toaster
│   └── globals.css    # design tokens + utilities + keyframes
├── components/
│   ├── ui/            # design-system primitives
│   ├── effects/       # aurora, reveal, marquee, spotlight, tilt…
│   ├── sections/      # homepage sections
│   ├── site/          # navbar, footer, command menu
│   └── docs/          # documentation blocks
├── config/site.ts     # site meta + navigation
└── lib/               # data, utils, clipboard + simulated-submit helpers
```

## 📑 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**](broken://pages/cb9f11312c8621e5be3268acfcb257829609dee0).

## 🌐 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 (Next.js 16 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)