# Quick Start Guide

Get up and running with Agent C Starter Kit in minutes.

## Installation

```bash
npm install agentc-starter-kit
# or
yarn add agentc-starter-kit
# or
pnpm add agentc-starter-kit
```

## Peer Dependencies

Install the required peer dependencies:

```bash
npm install next@^14.0.0 tailwindcss@^3.0.0 @supabase/supabase-js@^2.0.0 next-auth@^4.0.0
```

## 1. Set Up Tailwind CSS

If you haven't already, set up Tailwind CSS in your project:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Update your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/agentc-starter-kit/dist/**/*.{js,mjs}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: "#eff6ff",
          100: "#dbeafe",
          200: "#bfdbfe",
          300: "#93c5fd",
          400: "#60a5fa",
          500: "#3b82f6",
          600: "#2563eb",
          700: "#1d4ed8",
          800: "#1e40af",
          900: "#1e3a8a",
        },
      },
    },
  },
  plugins: [],
  darkMode: "class",
};
```

Add the Tailwind directives to your CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## 2. Environment Setup

Create a `.env.local` file in your project root:

```env
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key_here

# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret_here

# OAuth Providers (optional)
GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here

KAKAO_CLIENT_ID=your_kakao_client_id_here
KAKAO_CLIENT_SECRET=your_kakao_client_secret_here

NAVER_CLIENT_ID=your_naver_client_id_here
NAVER_CLIENT_SECRET=your_naver_client_secret_here
```

## 3. Basic Usage

### Simple Landing Page

```tsx
// app/page.tsx
import {
  HeroSection,
  FeaturesSection,
  PricingSection,
  CTASection,
} from "agentc-starter-kit";

export default function HomePage() {
  const features = [
    {
      title: "Fast Setup",
      description: "Get your app running in minutes",
      icon: "⚡",
    },
    {
      title: "Modern Stack",
      description: "Built with Next.js 14 and TypeScript",
      icon: "🚀",
    },
    {
      title: "Production Ready",
      description: "Optimized for performance and SEO",
      icon: "✨",
    },
  ];

  const plans = [
    {
      name: "Starter",
      price: "$9",
      period: "month",
      features: ["5 Projects", "Basic Support"],
      highlighted: false,
    },
    {
      name: "Pro",
      price: "$29",
      period: "month",
      features: ["Unlimited Projects", "Priority Support", "Advanced Features"],
      highlighted: true,
    },
  ];

  return (
    <div>
      <HeroSection
        title="Build Amazing Apps Fast"
        subtitle="The complete starter kit for your Next.js applications"
        ctaText="Get Started"
        onCtaClick={() => console.log("Get started clicked")}
      />

      <FeaturesSection title="Why Choose Our Kit" features={features} />

      <PricingSection
        title="Simple Pricing"
        plans={plans}
        onSelectPlan={(planId) => console.log("Selected plan:", planId)}
      />

      <CTASection
        title="Ready to Get Started?"
        subtitle="Join thousands of developers building with our kit"
        primaryButton={{
          text: "Start Building",
          onClick: () => console.log("Start building"),
        }}
        secondaryButton={{
          text: "View Documentation",
          onClick: () => console.log("View docs"),
        }}
      />
    </div>
  );
}
```

### With Authentication

```tsx
// app/layout.tsx
import { AuthProvider } from "agentc-starter-kit";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AuthProvider>{children}</AuthProvider>
      </body>
    </html>
  );
}

// app/dashboard/page.tsx
import {
  DashboardLayout,
  StatsCard,
  DataTable,
  UserProfile,
} from "agentc-starter-kit";
import { useAuth } from "agentc-starter-kit";

export default function DashboardPage() {
  const { user } = useAuth();

  const users = [
    { id: 1, name: "John Doe", email: "john@example.com", status: "Active" },
    {
      id: 2,
      name: "Jane Smith",
      email: "jane@example.com",
      status: "Inactive",
    },
  ];

  const columns = [
    { key: "name", label: "Name", sortable: true },
    { key: "email", label: "Email", sortable: true },
    { key: "status", label: "Status" },
  ];

  return (
    <DashboardLayout>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <StatsCard
          title="Total Users"
          value="1,234"
          trend={{ value: 12, isPositive: true }}
          variant="success"
        />
        <StatsCard
          title="Revenue"
          value="$45,678"
          trend={{ value: 8, isPositive: true }}
          variant="default"
        />
        <StatsCard
          title="Conversion"
          value="3.2%"
          trend={{ value: 2, isPositive: false }}
          variant="warning"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <DataTable data={users} columns={columns} searchable />

        {user && (
          <UserProfile
            user={user}
            editable
            onSave={(updatedUser) => console.log("User updated:", updatedUser)}
          />
        )}
      </div>
    </DashboardLayout>
  );
}
```

### Legal Compliance

```tsx
// app/privacy/page.tsx
import { PrivacyPolicy } from "agentc-starter-kit";

export default function PrivacyPage() {
  return (
    <PrivacyPolicy
      companyName="Your Company Name"
      contactEmail="privacy@yourcompany.com"
      showTableOfContents
      enablePrint
    />
  );
}

// app/layout.tsx - Add consent manager
import { ConsentManager } from "agentc-starter-kit";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ConsentManager
          privacyPolicyUrl="/privacy"
          termsUrl="/terms"
          onConsentUpdate={(consents) => {
            console.log("Consent updated:", consents);
            // Handle consent changes
          }}
        />
      </body>
    </html>
  );
}
```

## 4. Customization

### Custom Theme

Create a custom theme by extending Tailwind:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          // Your brand colors
          500: "#your-brand-color",
          600: "#your-brand-color-dark",
        },
      },
      fontFamily: {
        sans: ["Your-Font", "system-ui", "sans-serif"],
      },
    },
  },
};
```

### Component Variants

Most components accept a `variant` prop for different styles:

```tsx
import { Button, Card, StatsCard } from "agentc-starter-kit";

// Button variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>

// Card variants
<Card variant="elevated">Elevated Card</Card>

// Stats card variants
<StatsCard variant="success" />
<StatsCard variant="warning" />
<StatsCard variant="danger" />
```

## 5. Next Steps

- 📖 Read the [full component documentation](./components.md)
- 🎨 Check out the [examples](../examples/)
- 🔧 Learn about [customization options](./customization.md)
- 🚀 Deploy your app with [deployment guides](./deployment.md)

## Common Issues

### Bundle Size

To keep your bundle size minimal, import only what you need:

```tsx
// ✅ Good
import { Button, Card } from "agentc-starter-kit";

// ❌ Avoid
import * as Components from "agentc-starter-kit";
```

### TypeScript Errors

Make sure you have the correct TypeScript configuration:

```json
// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}
```

### Styling Issues

Ensure Tailwind is properly configured to include the component library:

```js
// tailwind.config.js - Make sure this path is included
content: ["./node_modules/agentc-starter-kit/dist/**/*.{js,mjs}"];
```

## Support

- 📧 Email: support@agentc.dev
- 💬 Discord: [Join our community](https://discord.gg/agentc)
- 🐛 Issues: [GitHub Issues](https://github.com/agentc/starter-kit/issues)