> ## Documentation Index
> Fetch the complete documentation index at: https://slik-dev.vercel.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Add New Pages to Your Slik Dev-Generated App

> Learn how Next.js App Router routing works in a Slik Dev app and follow a step-by-step example to build a styled Pricing page with Slik Dev's components.

Slik Dev generates a complete set of starter pages — Landing, Auth, Dashboard, and Admin — but your product will inevitably need more. Because Slik Dev builds on Next.js App Router, adding a new route is as simple as creating a folder and a file. This guide explains how routing works in your generated app and walks you through building a fully styled Pricing page from scratch using Slik Dev's existing components and conventions.

## How Next.js App Router file-based routing works

In your generated project, every route is defined by the folder structure under `app/`. A folder named `pricing` inside `app/` creates the route `/pricing`. The page rendered at that route is the `page.tsx` file inside that folder.

```
app/
├── page.tsx          → /
├── auth/
│   └── page.tsx      → /auth
├── dashboard/
│   └── page.tsx      → /dashboard
├── admin/
│   └── page.tsx      → /admin
└── pricing/          ← new folder you create
    └── page.tsx      → /pricing
```

Each `page.tsx` must export a default React component. Layout files (`layout.tsx`) let you wrap multiple routes with shared UI like a Navbar or sidebar. If you want the Pricing page to share the same Navbar and Footer as the Landing page, you can either import them directly into `page.tsx` or add a `layout.tsx` at the `app/` level.

<Note>
  Next.js App Router uses React Server Components by default. If your page needs client-side interactivity (state, event handlers, animations), add `"use client"` as the first line of the file.
</Note>

***

## Step-by-step: creating a Pricing page

<Steps>
  <Step title="Create the route folder and page file">
    Inside your project, create the directory and file:

    ```bash theme={null}
    mkdir -p app/pricing
    touch app/pricing/page.tsx
    ```

    Open `app/pricing/page.tsx` in your editor. Because this page will use Framer Motion animations, start with the `"use client"` directive:

    ```tsx theme={null}
    "use client";
    ```
  </Step>

  <Step title="Scaffold the page component with Navbar and Footer">
    Import the shared layout components that Slik Dev already generated for you, then build the basic page wrapper:

    ```tsx theme={null}
    "use client";

    import Navbar from "@/components/layout/Navbar";
    import Footer from "@/components/layout/Footer";
    import { motion } from "framer-motion";
    import { Check } from "lucide-react";

    export default function PricingPage() {
      return (
        <div className="min-h-screen bg-white dark:bg-[#000000]">
          <Navbar />
          <main className="pt-24 pb-16">
            {/* Page content goes here */}
          </main>
          <Footer />
        </div>
      );
    }
    ```

    <Tip>
      The `pt-24` on `<main>` accounts for the fixed Navbar height (64px) plus extra breathing room. All Slik Dev pages use this pattern — keep it consistent on your new pages.
    </Tip>
  </Step>

  <Step title="Add the page header section">
    Following Slik Dev's section pattern — centered header, short label, large heading, subtext — add a hero header inside `<main>`:

    ```tsx theme={null}
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      {/* Section header */}
      <div className="text-center mb-16">
        <p className="font-mono text-sm text-emerald-500 font-medium uppercase tracking-widest mb-4">
          Pricing
        </p>
        <h1 className="text-4xl md:text-6xl font-bold tracking-tight mb-6 text-[#09090b] dark:text-white">
          Simple, transparent{" "}
          <span className="bg-gradient-to-r from-emerald-500 to-cyan-500 bg-clip-text text-transparent">
            pricing.
          </span>
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
          Start for free. Upgrade when you are ready to ship.
        </p>
      </div>
    ```
  </Step>

  <Step title="Build the pricing card grid">
    Add a three-column card grid below the header. Each card follows the same `glass-card` styling pattern Slik Dev uses in `FeaturesSection.tsx`:

    ```tsx theme={null}
      {/* Pricing grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
        {plans.map((plan, idx) => (
          <motion.div
            key={idx}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: idx * 0.1, duration: 0.5 }}
            className={`rounded-2xl p-8 border transition-all duration-300 hover:-translate-y-2 ${
              plan.featured
                ? "bg-[#09090b] dark:bg-white/5 border-emerald-500 shadow-[0_10px_40px_-10px_rgba(16,185,129,0.3)]"
                : "bg-white dark:bg-[#09090b] border-gray-200 dark:border-white/10"
            }`}
          >
            <h3 className="text-xl font-bold mb-2 text-[#09090b] dark:text-white">
              {plan.name}
            </h3>
            <p className="text-4xl font-bold mb-1 text-[#09090b] dark:text-white">
              {plan.price}
              <span className="text-sm font-normal text-gray-500 dark:text-gray-400">
                /mo
              </span>
            </p>
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
              {plan.description}
            </p>
            <ul className="space-y-3 mb-8">
              {plan.features.map((feature, i) => (
                <li key={i} className="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-300">
                  <Check className="w-4 h-4 text-emerald-500 flex-shrink-0" />
                  {feature}
                </li>
              ))}
            </ul>
            <button className={`w-full py-3 rounded-full text-sm font-semibold transition-all hover:scale-105 ${
              plan.featured
                ? "bg-gradient-to-r from-emerald-500 to-cyan-500 text-white shadow-lg shadow-emerald-500/20"
                : "border border-gray-300 dark:border-white/20 text-[#09090b] dark:text-white"
            }`}>
              {plan.cta}
            </button>
          </motion.div>
        ))}
      </div>
    </div>
    ```

    Define the `plans` data array above the component:

    ```tsx theme={null}
    const plans = [
      {
        name: "Hobby",
        price: "$0",
        description: "For side projects and early exploration.",
        features: ["1 project", "5,000 requests/mo", "Community support"],
        cta: "Get started free",
        featured: false,
      },
      {
        name: "Pro",
        price: "$29",
        description: "For teams shipping production apps.",
        features: ["Unlimited projects", "500,000 requests/mo", "Priority support", "Custom domains"],
        cta: "Start free trial",
        featured: true,
      },
      {
        name: "Enterprise",
        price: "$99",
        description: "For organizations at scale.",
        features: ["Everything in Pro", "SSO & SAML", "SLA guarantee", "Dedicated support"],
        cta: "Contact sales",
        featured: false,
      },
    ];
    ```
  </Step>

  <Step title="Add a navigation link in the Navbar">
    Open `components/layout/Navbar.tsx` and add a link to `/pricing` in both the desktop nav and the mobile menu:

    <CodeGroup>
      ```tsx Desktop nav — before theme={null}
      <a href="/#features" className="text-sm font-medium ...">Features</a>
      <Link to="/preview" className="text-sm font-medium ...">Preview</Link>
      <a href="/#docs" className="text-sm font-medium ...">Documentation</a>
      ```

      ```tsx Desktop nav — after theme={null}
      <a href="/#features" className="text-sm font-medium ...">Features</a>
      <Link to="/preview" className="text-sm font-medium ...">Preview</Link>
      <Link to="/pricing" className="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors">
        Pricing
      </Link>
      <a href="/#docs" className="text-sm font-medium ...">Documentation</a>
      ```
    </CodeGroup>

    Add the same link inside the mobile menu block (the `md:hidden` div) so it appears consistently across all screen sizes.
  </Step>
</Steps>

***

## Creating a new UI component in Slik's style

When you need a reusable component that does not yet exist in your `components/` folder, follow Slik Dev's conventions: TypeScript props interface, Tailwind for styling, Framer Motion for animation, and Lucide React for icons.

Here is a minimal example — a `Badge` component that signals plan status:

```tsx theme={null}
// components/ui/Badge.tsx
"use client";

import { motion } from "framer-motion";
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

interface BadgeProps {
  label: string;
  variant?: "success" | "info" | "warning";
}

export function Badge({ label, variant = "success" }: BadgeProps) {
  const colors = {
    success: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20",
    info: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20",
    warning: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
  };

  return (
    <motion.span
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.2 }}
      className={twMerge(
        clsx(
          "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border",
          colors[variant]
        )
      )}
    >
      {label}
    </motion.span>
  );
}
```

<Info>
  Place new components in `components/ui/` for generic elements (buttons, badges, modals) and in `components/layout/` for structural elements (Navbar, Footer, Sidebar). This matches the folder convention Slik Dev generates.
</Info>