--- File: .gitignore ---

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# env files (can opt-in for committing if needed)
.env*

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts

# clerk configuration (can include secrets)
/.clerk/

# Playwright
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/

# Database backups
/backups/

# LLM contexts for third party tools
llm-convex.txt

# Convex
.convex/
convex/_generated/
.env.local

--- File: .prettierrc ---

{
  "endOfLine": "lf",
  "printWidth": 200,
  "semi": false,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}


--- File: README.md ---

<a href="https://starter.vibecode.party"><img src="https://starter.vibecode.party/screenshot.png" alt="Vibecode Party Starter Project Image" /></a>

# Vibecode Party Starter

VibeStarter is a [Next.js](https://nextjs.org) starter project that comes with everything I need to get started with a new vibe-coding project.

## Initializing Project

You can install with a single command, then answer the prompts:

```
npx vibecode-party-starter
```

## Services

You will need to create a `.env` file and set environment variables for the services you wish to use (see below).


### Shadcn/UI for Components

The components in this starter have been built on top of the [Shadcn/UI](https://ui.shadcn.com/) component library, which itself uses other libraries like [TailwindCSS](https://tailwindcss.com/) for styling, [Lucide icons](https://lucide.dev/icons/) and many others. For making new components, you can install more from the ShadCN/UI library, generate them with Cursor or [v0](v0.dev), or find compatible components built by the community.

### Clerk for Auth

If using Auth, create a new project on [Clerk](https://dashboard.clerk.com/) then add the environment variables to `.env`

```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
```

You will need to set up individual oAuth integrations (e.g. Google, Github, etc) in the Clerk dashboard for your project.

User auth components are already built into the starter project. If you are not using Auth, you will need to remove these.

Admin users are created by adding Clerk User Ids into an environment variable on `.env`:

```
ADMIN_USER_IDS=user_1234567890,user_0987654321
```

*Why use Clerk for Auth*

- Convex Auth is only in beta (as on 4/26/2025)
- Using Clerk for Auth makes it easier to switch to a different Cloud DB

### Convex for Cloud Database

For the database, create a new project in [Convex Console](https://dashboard.convex.dev) then:

1. Create a new project
2. Get your deployment URL from the dashboard
3. Add the following environment variable to `.env`:

When you are ready to deploy, you will need to add a deploy key and public convex url - `https://<your-project>.convex.cloud` - to your environment variables. See more at [docs.convex.dev](https://docs.convex.dev/production/hosting/)

```
CONVEX_DEPLOY_KEY=
NEXT_PUBLIC_CONVEX_URL=
```

*Why use Convex?*

- Convex has great DX with easier setup than Supabase or Firebase.
- Convex is very well interpreted by LLMs (better oneshotting than Supabase or Firebase)
- Convex does not require running Docker or emulation for local development (avoiding excess CPU consumption)

#### Local Development with Convex

Convex is cloud-first and doesn't require local emulators. Your local development environment will automatically connect to your cloud deployment.

To view your Convex dashboard:
```bash
pnpm db:convex
```

The development server will start both Next.js and Convex:
```bash
pnpm dev
```

### AWS S3 for File Storage

To use [AWS](https://aws.amazon.com/) for File Storage (images, etc), create a new public S3 bucket then create a new IM user with Admin S3 permissions for that specific bucket only, then add the environment variables to `.env`

```
AWS_KEY=
AWS_SECRET=
AWS_REGION=
AWS_BUCKET_PUBLIC=
```

For images, it is recommended to use Cloudfront for a better cache strategy and to help stay under the image transformation limit with the Next.js Image component and Vercel. Create a new Cloudfront distribution and load all your images via the Cloudfront domain rather than S3.

```
CLOUDFRONT_DOMAIN=
```

### AWS S3 for Flat File Database

For projects where data is not very complex and changes less frequently, using S3 as a flat file database can be a good option. To do this, you can do the same steps as above but keep your bucket private and do not use Cloudfront (unless you want all the data to be public)

### SendGrid for Email

To use [SendGrid](https://app.sendgrid.com/) for programatically sending emails, create a new SendGrid project then add the environment variables to `.env`

```
SENDGRID_API_KEY=
SENDGRID_SENDER=
```

Once you have done this, you can start integrate SendGrid into your other services like Clerk and Stripe.

#### Contact Form

For the contact form to work, you will need to add a contact email as an environment variable. This is the email you wish for SendGrid to forward messages from the contact form. It will not be publicly available.

```
CONTACT_EMAIL=
```

The contact form in the starter include a ReCAPTCHA integration to prevent bots from sending emails. To configure this, you will need to create a new [Google ReCaptcha Site](https://www.google.com/recaptcha/admin) then add the environment variables to `.env`

```
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
RECAPTCHA_SECRET_KEY=
```

### Stripe for Payments

If using payment, create a new project on [Stripe](https://dashboard.stripe.com/) then add the environment variables to `.env`

```
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=
```

## AI SDK

We have hooks available for:

- Generating text with `useGenerateText()`
- Generating an array of strings with `useGenerateStrings()`
- Generating structured data with `useGenerateObject()`
- Generating images with `useGenerateImage()`

## Local Development

To start the app:

```
pnpm dev
```

### Linting

The starter project has been set up with eslint and prettier, and is set to automatically format your code with every save and every copy/paste.

You can lint with:

```
pnpm lint
```

### Testing

As vibe-coding projects grow, it becomes increasingly likely that AI will make breaking changes. By adding tests at the start, you can have confidence even when vibing that your application works.

To start using tests with party starter, you will need to create a test user. After you have completed the steps for setting up Clerk and have added the environment variables to your project, run your application on localhost and sign up for an account with an email address you own, and a new password for the project. Use the email confirmation code to complete the signup process.

#### Convex Database: Init, Teardown, and Seeding

Convex is cloud-first and does not require a local emulator. For testing, you can use Convex mutations/queries or custom scripts to reset and seed your database before each test run.

- **Init/Teardown:**  
  Create test helpers or scripts that clear relevant Convex tables/collections before and/or after your test suite runs. This can be done by calling Convex mutations that delete all documents in a table, or by using the Convex dashboard to reset data manually for development.

- **Seeding:**  
  Write seed scripts or test helpers that populate your Convex database with the data needed for your test cases. You can call Convex mutations directly from your test setup code to insert the required documents.

Example (using Playwright or your test runner):

```typescript
// Example test setup (pseudo-code)
await convex.mutation("test.clearAllData", {});
await convex.mutation("test.seedTestData", { users: [...], posts: [...] });
```

You can create a `test` module in your Convex functions for these helpers, and restrict them to run only in development or test environments.

We use Playwright for testing in the starter project. It has a built-in UI mode where you can pause the debugger and record your interactions that will auto-generate test code as you go.

To open the test console:

```
pnpm pw
```

To run the entire test suite in headless mode:

```
pnpm test
```

### MCP Rules

In the `.cursor/rules` there are a number of MDC rules that help with keeping Cursor from making mistakes so you can keep the vibes going. You may want to customize the following rules:

- `003-openai` - Sets preferred OpenAI model. Only need if using the OpenAI API.
- `101-project-structure` - Guidelines when creating new files to maintain consistent project organization
- `200-*` - Firebase rules. Only need if using Firebase
- `300-*` - Auth rules for Clerk. Only need if using Auth

## Deployment

For your services to work in production, you will need to add all the environment variables to your production server.


--- File: app/_actions/ban-user.ts ---

'use server'

import { auth, clerkClient } from "@clerk/nextjs/server"
import { revalidatePath } from "next/cache"
import { isAdmin } from "@/lib/auth-utils"

export async function banUser(userId: string, reason?: string) {
  try {
    // Get the current user's ID
    const { userId: adminId } = await auth()
    
    if (!adminId) {
      throw new Error("Not authenticated")
    }

    // Verify the user is an admin
    const isUserAdmin = await isAdmin()
    if (!isUserAdmin) {
      throw new Error("Not authorized")
    }

    // Initialize Clerk client
    const client = await clerkClient()

    // Get current user to check if they're banned
    const user = await client.users.getUser(userId)
    const isBanned = user.banned

    if (isBanned) {
      // Unban the user
      await client.users.unbanUser(userId)
    } else {
      // Ban the user and store reason in metadata
      await client.users.banUser(userId)
      
      // Store the ban reason in metadata if provided
      if (reason) {
        await client.users.updateUser(userId, {
          publicMetadata: {
            ...user.publicMetadata,
            banReason: reason
          }
        })
      }
    }

    // Revalidate the admin users page
    revalidatePath("/admin/users")

    return { success: true }
  } catch (error) {
    console.error("Error managing user ban status:", error)
    return { success: false, error: (error as Error).message }
  }
} 

--- File: app/_actions/contact.ts ---

"use server"

import { z } from "zod"
import sgMail from "@sendgrid/mail"
import { verifyCaptcha } from "./verifyCaptcha"

const contactFormSchema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email address"),
  message: z.string().min(1, "Message is required"),
  subject: z.string().default("Contact Form Submission"),
  captchaToken: z.string().optional(),
})

type ContactFormData = z.infer<typeof contactFormSchema>

export async function sendContactEmail(data: ContactFormData) {
  try {
    // Validate the input data
    const validatedData = contactFormSchema.parse(data)

    // Verify captcha if token is provided
    if (validatedData.captchaToken) {
      try {
        await verifyCaptcha(validatedData.captchaToken)
      } catch (error) {
        console.error("Error verifying captcha:", error)
        return {
          success: false as const,
          error: "reCAPTCHA verification failed. Please try again.",
        }
      }
    }

    // Configure SendGrid
    sgMail.setApiKey(process.env.SENDGRID_API_KEY!)

    // Prepare the email
    const msg = {
      to: process.env.CONTACT_EMAIL!,
      from: process.env.SENDGRID_SENDER!, // Must be verified sender in SendGrid
      replyTo: validatedData.email,
      subject: validatedData.subject,
      text: `Name: ${validatedData.name}\nEmail: ${validatedData.email}\n\nMessage:\n${validatedData.message}`,
      html: `
        <h2>New Contact Form Submission</h2>
        <p><strong>Name:</strong> ${validatedData.name}</p>
        <p><strong>Email:</strong> ${validatedData.email}</p>
        <p><strong>Message:</strong></p>
        <p>${validatedData.message.replace(/\n/g, "<br>")}</p>
      `,
    }

    // Send the email
    await sgMail.send(msg)

    return {
      success: true as const,
    }
  } catch (error) {
    console.error("Error sending contact email:", error)
    return {
      success: false as const,
      error: error instanceof Error ? error.message : "Failed to send email",
    }
  }
} 

--- File: app/_actions/mailing-list.ts ---

"use server"

import { auth } from "@clerk/nextjs/server"
import { MailingListPreferences } from "@/types/mailing-list"
import sgMail from "@sendgrid/mail"
import { revalidatePath } from "next/cache"
import {
  addMailingListSubscription,
  removeMailingListSubscription,
  updateMailingListPreferences,
  getMailingListSubscriptions
} from "@/lib/services/mailing-list"

// Configure SendGrid and track availability
let isEmailServiceConfigured = false

if (process.env.SENDGRID_API_KEY) {
  sgMail.setApiKey(process.env.SENDGRID_API_KEY)
  isEmailServiceConfigured = true
} else {
  console.warn("SENDGRID_API_KEY not found. Email service will be disabled.")
}

// Helper to check if email service is available
function isEmailServiceAvailable() {
  return isEmailServiceConfigured
}

export async function subscribe(data: {
  userId: string
  email: string
  name: string | null
  preferences: MailingListPreferences
}) {
  try {
    const result = await addMailingListSubscription({
      ...data,
      name: data.name ?? undefined,
    })
    revalidatePath("/mailing-list")
    return {
      success: !!result,
      emailServiceAvailable: isEmailServiceAvailable()
    }
  } catch (error) {
    console.error("Error in subscribe:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Failed to subscribe",
      emailServiceAvailable: isEmailServiceAvailable()
    }
  }
}

export async function unsubscribe(email: string) {
  try {
    const result = await removeMailingListSubscription(email)
    revalidatePath("/mailing-list")
    return {
      success: result,
      emailServiceAvailable: isEmailServiceAvailable()
    }
  } catch (error) {
    console.error("Error in unsubscribe:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Failed to unsubscribe",
      emailServiceAvailable: isEmailServiceAvailable()
    }
  }
}

export async function updatePreferences({ preferences }: { preferences: MailingListPreferences }) {
  try {
    const { userId } = await auth()
    if (!userId) throw new Error('Not authenticated')
    const result = await updateMailingListPreferences(userId, preferences)
    revalidatePath("/mailing-list")
    return {
      success: result,
      emailServiceAvailable: isEmailServiceAvailable()
    }
  } catch (error) {
    console.error("Error in updatePreferences:", error)
    return {
      success: false,
      error: error instanceof Error ? error.message : "Failed to update preferences",
      emailServiceAvailable: isEmailServiceAvailable()
    }
  }
}

export async function getSubscription() {
  try {
    const { userId } = await auth()
    if (!userId) {
      return {
        success: true as const,
        data: null,
      }
    }
    const subscriptions = await getMailingListSubscriptions()
    const sub = subscriptions.find(s => s.userId === userId && s.unsubscribedAt === null)
    return {
      success: true as const,
      data: sub || null,
    }
  } catch (error) {
    console.error("Error in getSubscription:", error)
    return {
      success: false as const,
      error: error instanceof Error ? error.message : "Failed to get subscription",
    }
  }
} 

--- File: app/_actions/profile.ts ---

"use server"

import { clerkClient } from "@clerk/nextjs/server"
import { revalidatePath } from "next/cache"

interface Link {
  label: string
  url: string
}

interface UpdateProfileData {
  firstName: string
  lastName: string
  bio: string
  website?: string
  twitter?: string
  github?: string
  customLinks?: Link[]
}

export async function updateProfile(userId: string, data: UpdateProfileData) {
  try {
    const client = await clerkClient()
    await client.users.updateUser(userId, {
      firstName: data.firstName || "",
      lastName: data.lastName || "",
      unsafeMetadata: {
        bio: data.bio || "",
        website: data.website || "",
        twitter: data.twitter || "",
        github: data.github || "",
        customLinks: data.customLinks || [],
      },
    })

    return { success: true }
  } catch (error) {
    console.error("Error updating profile:", error)
    return { success: false, error: "Failed to update profile" }
  }
}

export async function refreshProfile(path: string) {
  revalidatePath(path)
} 

--- File: app/_actions/track-visit.ts ---

'use server'

import { auth } from "@clerk/nextjs/server"
import { headers } from "next/headers"
import { validRoutes } from "@/lib/generated/routes"
import { ConvexHttpClient } from "convex/browser"
import { api } from "@/convex/_generated/api"

// Initialize Convex HTTP client
const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!)

// Check if the user agent is from a common legitimate browser
function isValidBrowser(userAgent: string | null): boolean {
  if (!userAgent) return false
  
  const commonBrowsers = [
    'Chrome',
    'Firefox',
    'Safari',
    'Edge',
    'Opera',
    'Edg',  // Edge's newer user agent
    'OPR',  // Opera's newer user agent
  ]
  
  const lowerUA = userAgent.toLowerCase()
  return commonBrowsers.some(browser => 
    lowerUA.includes(browser.toLowerCase())
  )
}

// Check if a path exists in our app
function isValidPath(path: string): boolean {
  // Special case for root path
  if (path === '/') {
    return true
  }

  // Normalize the path by removing leading slash
  const normalizedPath = path.startsWith('/') ? path.slice(1) : path
  
  // Check exact match first
  if (validRoutes.has(normalizedPath)) {
    return true
  }

  // Check if the path matches any dynamic routes
  // Split the path into segments
  const segments = normalizedPath.split('/')
  
  // Try matching each segment level
  let currentPath = ''
  for (const segment of segments) {
    currentPath = currentPath + (currentPath === '' ? segment : '/' + segment)
    // Check if there's a wildcard route at this level
    if (validRoutes.has(currentPath + '/*')) {
      return true
    }
  }

  return false
}

export async function trackVisit(path: string) {
  try {
    // Get the current user's ID if they're authenticated
    const { userId } = await auth()
    
    // Get headers for user agent and referrer
    const headersList = await headers()
    const userAgent = headersList.get('user-agent')
    const referrer = headersList.get('referer') // Note: 'referer' is the standard header name
    
    // Skip recording visits from non-browser user agents
    if (!isValidBrowser(userAgent)) {
      return { success: true }
    }

    // Skip recording visits to invalid paths
    if (!isValidPath(path)) {
      return { success: true }
    }

    // Record the visit using Convex
    await convex.mutation(api.visits.recordVisit, {
      path,
      userId: userId || null,
      metadata: {
        userAgent: userAgent || null,
        referrer: referrer || null,
      }
    })

    return { success: true }
  } catch (error) {
    console.error('Error tracking visit:', error)
    return { success: false, error: (error as Error).message }
  }
} 

--- File: app/_actions/verifyCaptcha.ts ---

export async function verifyCaptcha(captchaToken: string) {
  "use server";

  const RECAPTCHA_SECRET_KEY = process.env.RECAPTCHA_SECRET_KEY;

  const response = await fetch(`https://www.google.com/recaptcha/api/siteverify`, {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `secret=${RECAPTCHA_SECRET_KEY}&response=${captchaToken}`,
  });

  const captchaValidation = await response.json();
  if (captchaValidation.success) {
    return true;
  } else {
    throw new Error("reCAPTCHA validation failed");
  }
}

--- File: app/_hooks/useGenerateImage.ts ---

import { useState } from "react"

interface ImageResponse {
  imageUrl: string
  success: boolean
  error?: string
}

export function useGenerateImage() {
  const [error, setError] = useState<string>("")
  const [isLoading, setIsLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState<string>("")

  const generate = async (prompt: string) => {
    setError("")
    setIsLoading(true)
    try {
      const response = await fetch("/api/ai/generate/image", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          input: prompt,
          userId: "demo", // Using a demo folder for the AI demo
          deckId: "ai-demo" // Using a fixed demo deck ID
        }),
      })

      const data: ImageResponse = await response.json()

      if (!data.success) {
        throw new Error(data.error || "Failed to generate image")
      }

      setImageUrl(data.imageUrl)
    } catch (err) {
      console.error("Error generating image:", err)
      setError(err instanceof Error ? err.message : "Failed to generate image")
    } finally {
      setIsLoading(false)
    }
  }

  return {
    imageUrl,
    isLoading,
    error,
    generate,
  }
} 

--- File: app/_hooks/useGenerateObject.ts ---

import { experimental_useObject as useObject } from "@ai-sdk/react"
import { z } from "zod"
import { useState } from "react"

// Example schema for a person
const personSchema = z.object({
  name: z.string().describe("The person's full name"),
  age: z.number().describe("The person's age"),
  occupation: z.string().describe("The person's job or profession"),
  interests: z.array(z.string()).describe("List of the person's hobbies and interests"),
  contact: z.object({
    email: z.string().email().describe("The person's email address"),
    phone: z.string().describe("The person's phone number"),
  }).describe("Contact information"),
})

type Person = z.infer<typeof personSchema>

export function useGenerateObject() {
  const [error, setError] = useState<string>("")
  const { object, isLoading, submit } = useObject<Person>({
    api: "/api/ai/generate/object",
    schema: personSchema,
  })

  const generate = async (prompt: string) => {
    setError("")
    try {
      await submit({
        schema: {
          type: "object",
          properties: {
            name: { type: "string" },
            age: { type: "number" },
            occupation: { type: "string" },
            interests: { 
              type: "array",
              items: { type: "string" }
            },
            contact: {
              type: "object",
              properties: {
                email: { type: "string" },
                phone: { type: "string" }
              }
            }
          }
        },
        prompt,
      })
    } catch (err) {
      console.error("Error generating object:", err)
      setError("Failed to generate structured data")
    }
  }

  return {
    object,
    isLoading,
    error,
    generate,
  }
} 

--- File: app/_hooks/useGenerateStrings.ts ---

import { experimental_useObject as useObject } from '@ai-sdk/react';
import { z } from "zod"
import { useState, useEffect, useRef } from "react"

const responseSchema = z.object({
  strings: z.array(z.string()),
})

type ResponseType = z.infer<typeof responseSchema>

export function useGenerateStrings() {
  const [strings, setStrings] = useState<string[]>([])
  const [error, setError] = useState<string>("")
  const promiseRef = useRef<{
    resolve: (value: string[]) => void;
    reject: (reason?: Error | unknown) => void;
  } | null>(null);

  const {
    object: response,
    isLoading,
    submit,
    error: objectError,
  } = useObject<ResponseType>({
    api: "/api/ai/generate/strings",
    schema: responseSchema,
  })

  useEffect(() => {
    if (objectError) {
      console.error("useGenerateStrings error:", objectError)
      setError("An error occurred while generating strings.")
      if (promiseRef.current) {
        promiseRef.current.reject(objectError);
        promiseRef.current = null;
      }
    }
  }, [objectError])

  useEffect(() => {
    if (response?.strings) {
      const validStrings = response.strings.filter((s): s is string => typeof s === "string")
      setStrings(validStrings)
    }
  }, [response])

  // Effect to resolve the promise when loading completes
  useEffect(() => {
    // If we were loading and now we're not, and we have a promise to resolve
    if (!isLoading && promiseRef.current && response?.strings) {
      const validStrings = response.strings.filter((s): s is string => typeof s === "string")
      promiseRef.current.resolve(validStrings);
      promiseRef.current = null;
    }
  }, [isLoading, response]);

  const generate = async (prompt: string, count: number = 6) => {
    setError("")
    setStrings([])
    
    return new Promise<string[]>((resolve, reject) => {
      try {
        // Store the promise callbacks
        promiseRef.current = { resolve, reject };
        
        // Submit the request
        submit({
          prompt,
          count,
        })
        
        // Set a timeout of 30 seconds
        const timeoutId = setTimeout(() => {
          if (promiseRef.current) {
            promiseRef.current.reject(new Error("Timed out waiting for string generation"));
            promiseRef.current = null;
          }
        }, 30000);
        
        // Clean up timeout if component unmounts
        return () => clearTimeout(timeoutId);
      } catch (error) {
        console.error("Error submitting string generation:", error)
        setError("An error occurred while generating strings.")
        reject(error);
        promiseRef.current = null;
      }
    })
  }

  return {
    strings,
    isLoading,
    error,
    generate,
  }
}


--- File: app/_hooks/useGenerateText.ts ---

"use client"
import { useChat } from "@ai-sdk/react"

export function useGenerateText() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/ai/generate/text",
  })

  const streamText = async (prompt: string, onUpdate: (output: string) => void) => {
    
    const response = await fetch("/api/ai/generate/text", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ input: prompt + " - Use smart quotes and avoid using backslashes" }),
    })

    if (!response.ok) {
      throw new Error(response.statusText)
    }

    const data = response.body
    if (!data) {
      return
    }

    const reader = data.getReader()
    const decoder = new TextDecoder()
    let done = false
    let accumulatedResponse = ""

    while (!done) {
      const { value, done: doneReading } = await reader.read()
      done = doneReading
      const chunkValue = decoder.decode(value)

      // Handle chunks with "0:" prefix
      const chunks = chunkValue.split(/(?=\d+:"|[ed]:"|f:)/).filter(Boolean)

      for (const chunk of chunks) {
        // Skip metadata chunks (including messageId)
        if (chunk.startsWith("f:") || chunk.startsWith("e:") || chunk.startsWith("d:")) {
          continue
        }

        if (chunk.startsWith('0:"')) {
          // Extract content between quotes for "0:" prefixed chunks
          const content = chunk.match(/0:"([^"]*)"/)
          if (content) {
            // Replace literal \n\n with actual newlines and clean up backslashed quotes
            accumulatedResponse += content[1]
              .replace(/\\n\\n/g, "\n\n")
              .replace(/\\"/g, '"')
              .replace(/\\\\/g, "\\")
          }
        } else {
          // Fallback: try to extract any quoted content
          const content = chunk.match(/"([^"]*)"/)
          if (content) {
            // Replace literal \n\n with actual newlines and clean up backslashed quotes
            accumulatedResponse += content[1]
              .replace(/\\n\\n/g, "\n\n")
              .replace(/\\"/g, '"')
              .replace(/\\\\/g, "\\")
          } else {
            // Replace literal \n\n with actual newlines and clean up backslashed quotes
            accumulatedResponse += chunk
              .replace(/\\n\\n/g, "\n\n")
              .replace(/\\"/g, '"')
              .replace(/\\\\/g, "\\")
          }
        }
      }
      onUpdate(accumulatedResponse)
    }

    return accumulatedResponse
  }

  return {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    streamText,
  }
}

--- File: app/about/page.tsx ---

import { Heading } from "@/components/typography/heading"
export default function AboutPage() {
  return (
    <div className="container py-12">
      <div className="mx-auto max-w-4xl">
        <div className="mb-12 text-center">
          <Heading variant="h2" as="h1">
            About
          </Heading>
        </div>

        <div className="mb-8 space-y-6">
          <p>Replace this with your about page content...</p>
        </div>
      </div>
    </div>
  )
}


--- File: app/account/[[...rest]]/components/account-profile.tsx ---

"use client"

import { UserProfile, useUser } from "@clerk/nextjs"
import { BookText } from "lucide-react"
import { BioSection } from "./bio-section"

export function AccountProfile() {
  const { isLoaded, isSignedIn } = useUser()

  if (!isLoaded) {
    return null // or a loading spinner
  }

  if (!isSignedIn) {
    return null // we already handle this case in the parent
  }

  return (
    <UserProfile
      appearance={{
        elements: {
          rootBox: "mx-auto max-w-3xl",
          card: "shadow-none",
        },
      }}
      path="/account"
    >
      <UserProfile.Page label="Bio" url="bio" labelIcon={<BookText className="h-4 w-4" />}>
        <BioSection />
      </UserProfile.Page>
    </UserProfile>
  )
}


--- File: app/account/[[...rest]]/components/bio-section.tsx ---

"use client"

import { useUser } from "@clerk/nextjs"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function BioSection() {
  const { user } = useUser()
  const [bio, setBio] = useState((user?.unsafeMetadata?.bio as string) || "")
  const [isSaving, setIsSaving] = useState(false)

  const saveBio = async () => {
    if (!user) return
    setIsSaving(true)
    try {
      await user.update({
        unsafeMetadata: {
          ...user.unsafeMetadata,
          bio,
        },
      })
    } catch (error) {
      console.error("Error saving bio:", error)
    }
    setIsSaving(false)
  }

  return (
    <div className="rounded-lg border p-4">
      <h2 className="text-lg font-semibold mb-4">Your Bio</h2>
      <Textarea placeholder="Tell us about yourself..." value={bio} onChange={(e) => setBio(e.target.value)} className="mb-4" rows={4} />
      <Button onClick={saveBio} disabled={isSaving}>
        {isSaving ? "Saving..." : "Save Bio"}
      </Button>
    </div>
  )
}


--- File: app/account/[[...rest]]/page.tsx ---

import { auth } from "@clerk/nextjs/server"
import { Container } from "@/components/ui/container"
import { Card, CardContent } from "@/components/ui/card"
import { SignInButton } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"
import { AccountProfile } from "./components/account-profile"

export default async function AccountPage() {
  const { userId } = await auth()

  if (!userId) {
    return (
      <Container>
        <div className="py-16">
          <Card className="max-w-xl mx-auto">
            <CardContent className="flex flex-col items-center gap-6 py-16">
              <div className="text-center space-y-2">
                <h2 className="text-2xl font-semibold">Sign in to Access Your Account</h2>
                <p className="text-muted-foreground">Create an account or sign in to manage your profile</p>
              </div>
              <SignInButton mode="modal">
                <Button size="lg">Sign in to Continue</Button>
              </SignInButton>
            </CardContent>
          </Card>
        </div>
      </Container>
    )
  }

  return (
    <Container>
      <div className="py-16">
        <AccountProfile />
      </div>
    </Container>
  )
}


--- File: app/admin/analytics/page.tsx ---

import { requireAdmin } from "@/lib/auth-utils"
import { AdminBreadcrumb } from "@/components/nav/admin-breadcrumb"
import { Heading } from "@/components/typography/heading"
import { Card, CardHeader } from "@/components/ui/card"
import { getAllVisits } from "@/lib/services/visits"

function getThirtyDaysAgo() {
  const date = new Date()
  date.setDate(date.getDate() - 30)
  return date
}

export default async function AdminAnalyticsPage() {
  // Check if the user is an admin
  await requireAdmin()

  // Fetch all visits (or use a Convex query to filter by date if available)
  const allVisits = await getAllVisits()
  const thirtyDaysAgo = getThirtyDaysAgo().getTime()

  // Filter visits from the last 30 days
  const analyticsData = allVisits.filter((visit) => visit.createdAt >= thirtyDaysAgo)

  return (
    <div className="container py-8">
      <AdminBreadcrumb items={[{ label: "Analytics" }]} />

      <div className="mb-8">
        <h1 className="text-4xl font-bold">Analytics</h1>
        <p className="text-muted-foreground">View and manage user visits</p>
      </div>

      <div className="grid gap-6">
        {/* Total Visits Card */}
        <Card>
          <CardHeader>
            <Heading variant="h4" className="text-primary">
              Total Visits (30 Days)
            </Heading>
          </CardHeader>
          <div className="px-6">
            <p className="text-3xl font-bold">{analyticsData.length}</p>
          </div>
        </Card>

        {/* Recent Visits Table */}
        <Card>
          <CardHeader>
            <Heading variant="h4" className="text-primary">
              Recent Visits
            </Heading>
          </CardHeader>
          <div className="px-6 pb-6">
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b">
                    <th className="text-left p-2">Path</th>
                    <th className="text-left p-2">Time</th>
                    <th className="text-left p-2">User ID</th>
                    <th className="text-left p-2">Referrer</th>
                  </tr>
                </thead>
                <tbody>
                  {analyticsData.slice(0, 10).map((visit) => (
                    <tr key={visit._id} className="border-b text-sm">
                      <td className="p-2">{visit.path}</td>
                      <td className="p-2">{new Date(visit.createdAt).toLocaleString()}</td>
                      <td className="p-2">{visit.userId || "Anonymous"}</td>
                      <td className="p-2">{visit.metadata?.referrer || "-"}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}


--- File: app/admin/mailing-list/page.tsx ---

import { requireAdmin } from "@/lib/auth-utils"
import { AdminBreadcrumb } from "@/components/nav/admin-breadcrumb"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { MailingListSubscriberTable } from "@/components/admin/mailing-list/mailing-list-subscriber-table"
import { getMailingListSubscriptions } from "@/lib/services/mailing-list"
import { Doc } from "@/convex/_generated/dataModel"

type ConvexSubscription = Doc<"mailing_list_subscriptions">

function serializeForClient(subscriber: ConvexSubscription) {
  return {
    id: subscriber._id,
    userId: subscriber.userId,
    email: subscriber.email,
    name: subscriber.name ?? null,
    preferences: subscriber.preferences,
    subscribedAt: new Date(subscriber.subscribedAt).toISOString(),
    unsubscribedAt: subscriber.unsubscribedAt ? new Date(subscriber.unsubscribedAt).toISOString() : null,
    createdAt: new Date(subscriber.createdAt).toISOString(),
    updatedAt: new Date(subscriber.updatedAt).toISOString(),
  }
}

export default async function AdminMailingListPage() {
  // Check if the user is an admin
  await requireAdmin()

  // Fetch subscribers through the service layer
  const subscribers = await getMailingListSubscriptions()

  // Serialize the data for client components
  const serializedSubscribers = subscribers.map(serializeForClient)

  return (
    <div className="container py-8">
      <AdminBreadcrumb items={[{ label: "Mailing List" }]} />

      <div className="mb-8">
        <h1 className="text-4xl font-bold">Mailing List Subscribers</h1>
        <p className="text-muted-foreground">View and manage newsletter subscribers</p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>All Subscribers</CardTitle>
        </CardHeader>
        <CardContent className="pb-6">
          <MailingListSubscriberTable subscribers={serializedSubscribers} />
        </CardContent>
      </Card>
    </div>
  )
}


--- File: app/admin/page.tsx ---

import { Metadata } from "next"
import Link from "next/link"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { requireAdmin } from "@/lib/auth-utils"
import { AdminConfigMessage } from "@/components/admin/admin-config-message"
import { DevEnvNotice } from "@/components/admin/dev-env-notice"
import { Heading } from "@/components/typography/heading"

export const metadata: Metadata = {
  title: "Admin Dashboard",
  description: "Vibecode.party Admin Dashboard",
}

export default async function AdminPage() {
  const { isAdmin, requiresSetup } = await requireAdmin()
  const isDev = process.env.NODE_ENV === "development"

  if (requiresSetup) {
    return (
      <div className="container max-w-2xl py-8 md:py-12">
        <AdminConfigMessage />
      </div>
    )
  }

  if (!isAdmin) {
    return (
      <div className="container py-8 md:py-12">
        <div className="mx-auto max-w-2xl text-center">
          <Heading variant="h1" className="mb-4">
            Access Denied
          </Heading>
          <p className="text-muted-foreground text-balance mb-8">You don&apos;t have permission to access this page. Please contact an administrator if you believe this is an error.</p>
          {isDev && <DevEnvNotice />}
        </div>
      </div>
    )
  }

  return (
    <div className="container py-8 md:py-12">
      <div className="mx-auto max-w-6xl">
        <Heading variant="h3" className="mb-8 text-center text-primary">
          Admin Dashboard
        </Heading>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <Card>
            <CardHeader>
              <CardTitle>Users</CardTitle>
              <CardDescription>Manage user accounts</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">View user information and manage admin access.</p>
            </CardContent>
            <CardFooter>
              <Link href="/admin/users" className="w-full">
                <Button className="w-full">Manage Users</Button>
              </Link>
            </CardFooter>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Analytics</CardTitle>
              <CardDescription>View site analytics</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Track user visits and monitor site activity.</p>
            </CardContent>
            <CardFooter>
              <Link href="/admin/analytics" className="w-full">
                <Button className="w-full">View Analytics</Button>
              </Link>
            </CardFooter>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Mailing List</CardTitle>
              <CardDescription>Manage subscribers</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">View and manage newsletter subscribers and preferences.</p>
            </CardContent>
            <CardFooter>
              <Link href="/admin/mailing-list" className="w-full">
                <Button className="w-full">Manage Subscribers</Button>
              </Link>
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
  )
}


--- File: app/admin/users/page.tsx ---

import { requireAdmin } from "@/lib/auth-utils"
import { AdminBreadcrumb } from "@/components/nav/admin-breadcrumb"
import { AdminUserList } from "@/components/admin/user-list"
import { clerkClient } from "@clerk/nextjs/server"
import type { User } from "@clerk/nextjs/server"

async function getInitialUsers() {
  const client = await clerkClient()
  const { data: users } = await client.users.getUserList()
  const adminUserIds = process.env.ADMIN_USER_IDS?.split(",") || []

  return users.map((user: User) => ({
    id: user.id,
    email: user.emailAddresses[0]?.emailAddress,
    username: user.username,
    firstName: user.firstName,
    lastName: user.lastName,
    imageUrl: user.imageUrl,
    createdAt: new Date(user.createdAt).toLocaleDateString(),
    isAdmin: adminUserIds.includes(user.id),
    banned: user.banned,
    publicMetadata: user.publicMetadata,
  }))
}

export default async function AdminUsersPage() {
  // Check if the user is an admin
  await requireAdmin()

  // Fetch initial users data
  const initialUsers = await getInitialUsers()

  return (
    <div className="container py-8">
      <AdminBreadcrumb items={[{ label: "Users" }]} />

      <div className="mb-8">
        <h1 className="text-4xl font-bold">Users</h1>
        <p className="text-muted-foreground">Manage and view user information</p>
      </div>

      <AdminUserList initialUsers={initialUsers} />
    </div>
  )
}


--- File: app/api/ai/_auth.ts ---

import { auth } from "@clerk/nextjs/server"
import { NextResponse } from "next/server"

export async function requireAuthMiddleware() {
  const { userId } = await auth()

  if (!userId) {
    return NextResponse.json(
      { error: "Authentication required" },
      { status: 401 }
    )
  }

  return null // Continue to route handler
} 

--- File: app/api/ai/generate/image/route.ts ---

import { replicate } from '@ai-sdk/replicate';
import { experimental_generateImage as generateImage } from 'ai';
import { NextRequest } from 'next/server';
import { PutObjectCommand } from '@aws-sdk/client-s3';
import { s3Client, AWS_BUCKET_PUBLIC } from '@/lib/aws';
import { requireAuthMiddleware } from "../../_auth"

export async function POST(request: NextRequest) {
  // Check authentication
  const authError = await requireAuthMiddleware()
  if (authError) return authError

  try {
    const { input, userId, deckId, aspectRatio } = await request.json();
    const userFolder = userId || 'guest';

    // Check if placeholder images should be used
    if (process.env.NEXT_PUBLIC_USE_PLACEHOLDER_IMAGES === 'true') {
      return Response.json({
        imageUrl: 'https://placehold.co/600x900',
        success: true
      });
    }

    if (!s3Client) {
      return Response.json({ error: 'S3 client not initialized', success: false }, { status: 500 });
    }

    const { image } = await generateImage({
      model: replicate.image(process.env.REPLICATE_MODEL || "black-forest-labs/flux-schnell"),
      prompt: input,
      aspectRatio: aspectRatio || '1:1',
    });

    // Upload to S3
    const key = `decks/${userFolder}/${deckId}/${Date.now()}.webp`;
    await s3Client.send(
      new PutObjectCommand({
        Bucket: AWS_BUCKET_PUBLIC,
        Key: key,
        Body: image.uint8Array,
        ContentType: 'image/webp',
      })
    );

    // Return both the image and the S3 URL
    return Response.json({
      imageUrl: `https://${AWS_BUCKET_PUBLIC}.s3.${process.env.AWS_REGION || 'us-east-1'}.amazonaws.com/${key}`,
      success: true
    });
  } catch (error) {
    console.error('Error generating or uploading image:', error);
    return Response.json({ error: 'Failed to generate or upload image', success: false }, { status: 500 });
  }
}


--- File: app/api/ai/generate/object/route.ts ---

import { openai } from "@ai-sdk/openai"
import { streamObject } from "ai"
import { z } from "zod"
import { requireAuthMiddleware } from "../../_auth"

// Allow streaming responses up to 30 seconds
export const maxDuration = 30

// Helper function to get a readable schema description
// function describeSchema(schema: z.ZodTypeAny): any {
//   if (schema instanceof z.ZodObject) {
//     const shape: Record<string, any> = {}
//     for (const [key, value] of Object.entries(schema.shape)) {
//       shape[key] = describeSchema(value as z.ZodTypeAny)
//     }
//     return { type: "object", shape }
//   } else if (schema instanceof z.ZodArray) {
//     return { type: "array", items: describeSchema(schema.element) }
//   } else if (schema instanceof z.ZodString) {
//     return { type: "string" }
//   } else if (schema instanceof z.ZodNumber) {
//     return { type: "number" }
//   } else if (schema instanceof z.ZodBoolean) {
//     return { type: "boolean" }
//   }
//   return { type: "unknown" }
// }

// Define schema field type interface
interface SchemaField {
  type: "string" | "number" | "boolean" | "array" | "object"
  optional?: boolean
  items?: SchemaField
  properties?: Record<string, SchemaField>
}

// Define the schema for field definitions
const fieldSchema: z.ZodType<SchemaField> = z.object({
  type: z.enum(["string", "number", "boolean", "array", "object"]),
  optional: z.boolean().optional(),
  properties: z.record(z.lazy(() => fieldSchema)).optional(),
  items: z.lazy(() => fieldSchema).optional(),
})

// Define the schema for the request body
const requestSchema = z.object({
  schema: fieldSchema,
  prompt: z.string(),
})

function createZodSchema(shape: SchemaField | Record<string, SchemaField>): z.ZodTypeAny {
  // If it's a record of fields (root schema), create an object schema
  if (!("type" in shape)) {
    const schema: Record<string, z.ZodTypeAny> = {}
    for (const [key, def] of Object.entries(shape)) {
      schema[key] = createZodSchema(def)
    }
    return z.object(schema)
  }

  // Handle individual field schemas
  if (shape.type === "object" && shape.properties) {
    const schema: Record<string, z.ZodTypeAny> = {}
    for (const [key, def] of Object.entries(shape.properties)) {
      schema[key] = createZodSchema(def)
    }
    return z.object(schema)
  }

  let fieldSchema: z.ZodTypeAny

  switch (shape.type) {
    case "string":
      fieldSchema = z.string()
      break
    case "number":
      fieldSchema = z.number()
      break
    case "boolean":
      fieldSchema = z.boolean()
      break
    case "array":
      fieldSchema = z.array(shape.items ? createZodSchema(shape.items) : z.any())
      break
    default:
      fieldSchema = z.any()
  }

  if (shape.optional) {
    fieldSchema = fieldSchema.optional()
  }

  return fieldSchema
}

export async function POST(req: Request) {
  // Check authentication
  const authError = await requireAuthMiddleware()
  if (authError) return authError

  try {
    const body = await req.json()
    const { schema: schemaShape, prompt } = requestSchema.parse(body)

    // Create a new schema from the shape
    const schema = createZodSchema(schemaShape)
    
    const result = streamObject({
      model: openai("gpt-4.1-nano"),
      schema,
      prompt,
    })
    
    return result.toTextStreamResponse()
  } catch (error) {
    console.error("Error in generate object route:", error)
    return new Response(JSON.stringify({ error: "Invalid request" }), { status: 400 })
  }
}


--- File: app/api/ai/generate/strings/route.ts ---

import { openai } from "@ai-sdk/openai"
import { streamObject } from "ai"
import { z } from "zod"
import { requireAuthMiddleware } from "../../_auth"

// Allow streaming responses up to 30 seconds
export const maxDuration = 30

export async function POST(req: Request) {
  // Check authentication
  const authError = await requireAuthMiddleware()
  if (authError) return authError

  try {
    const body = await req.json()
    const { prompt, count = 6 } = body

    const result = streamObject({
      model: openai("gpt-4.1-nano"),
      schema: z.object({
        strings: z.array(z.string()).describe("Array of generated strings based on the prompt"),
      }),
      prompt: `${prompt}\n\nGenerate exactly ${count} responses. Return them in a JSON object with a "strings" array property.`,
    })
    
    return result.toTextStreamResponse()
  } catch (error) {
    console.error("Error in generate strings route:", error)
    return new Response(JSON.stringify({ error: "Failed to generate strings" }), { status: 500 })
  }
}


--- File: app/api/ai/generate/text/route.ts ---

import { streamText } from "ai"
import { openai } from "@ai-sdk/openai"
import { NextRequest } from "next/server"
import { requireAuthMiddleware } from "../../_auth"

export async function POST(request: NextRequest) {
  // Check authentication
  const authError = await requireAuthMiddleware()
  if (authError) return authError

  const { input, messages, system } = await request.json()

  let chatMessages = []

  if (messages) {
    chatMessages = messages
  } else if (input) {
    chatMessages = [{ role: "user", content: input }]
  }

  const result = streamText({
    model: openai("gpt-4.1-nano"),
    messages: chatMessages,
    ...(system && { system }),
  })

  return result.toDataStreamResponse()
}


--- File: app/api/check-admin/route.ts ---

import { NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';

export async function GET() {
  try {
    const { userId } = await auth();
    
    // If no user is authenticated, they're not an admin
    if (!userId) {
      return NextResponse.json({ isAdmin: false });
    }
    
    // Get the list of admin user IDs from environment variables
    const adminUserIds = process.env.ADMIN_USER_IDS?.split(",") || [];
    
    // Check if the current user's ID is in the admin list
    const isAdmin = adminUserIds.includes(userId);
    
    return NextResponse.json({ isAdmin });
  } catch (error) {
    console.error("Error checking admin status:", error);
    return NextResponse.json({ isAdmin: false }, { status: 500 });
  }
} 

--- File: app/api/convex-status/route.ts ---

import { NextResponse } from "next/server"

export async function GET() {
  try {
    // Check if Convex URL is configured
    const isConfigured = Boolean(process.env.NEXT_PUBLIC_CONVEX_URL)

    if (!isConfigured) {
      return NextResponse.json(
        {
          status: "not_configured",
          message: "Convex is not configured. Please set NEXT_PUBLIC_CONVEX_URL in your .env file.",
        },
        { status: 400 }
      )
    }

    return NextResponse.json(
      {
        status: "ready",
        message: "Convex is configured and ready to use.",
        url: process.env.NEXT_PUBLIC_CONVEX_URL,
      },
      { status: 200 }
    )
  } catch (error) {
    console.error("Error checking Convex status:", error)
    return NextResponse.json(
      {
        status: "error",
        message: "Failed to check Convex status",
        error: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 }
    )
  }
} 

--- File: app/api/pay/intent/route.ts ---

import { auth } from "@clerk/nextjs/server"
import { NextResponse } from "next/server"
import { stripe, isStripeConfigured } from "@/lib/stripe"

export async function POST(request: Request) {
  try {
    // Check if Stripe is configured
    if (!isStripeConfigured()) {
      return NextResponse.json(
        { error: "Payment system not configured" },
        { status: 503 }
      )
    }

    // Check authentication
    const authResult = await auth()
    if (!authResult.userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

    const { amount } = await request.json()

    // We can safely use stripe here because we checked isStripeConfigured()
    const paymentIntent = await stripe!.paymentIntents.create({
      amount,
      currency: "usd",
      metadata: {
        userId: authResult.userId,
        type: "donation"
      }
    })

    return NextResponse.json({
      clientSecret: paymentIntent.client_secret,
    })
  } catch (error) {
    console.error("Error creating payment intent:", error)
    return NextResponse.json(
      { error: "Error creating payment intent" },
      { status: 500 }
    )
  }
} 

--- File: app/api/sendgrid/inbound/route.ts ---

import { NextRequest, NextResponse } from "next/server"
import sgMail from "@sendgrid/mail"

export async function POST(request: NextRequest) {
  try {
    // Parse the multipart form data from SendGrid
    const formData = await request.formData()
    const from = formData.get("from") as string
    const subject = formData.get("subject") as string
    const text = formData.get("text") as string
    const html = formData.get("html") as string

    // Configure SendGrid
    sgMail.setApiKey(process.env.SENDGRID_API_KEY!)

    // Forward the email to the contact email
    const msg = {
      to: process.env.CONTACT_EMAIL!,
      from: process.env.SENDGRID_SENDER!,
      replyTo: from,
      subject: `[Forwarded] ${subject}`,
      text: `Original From: ${from}\n\n${text}`,
      html: `
        <p><strong>Original From:</strong> ${from}</p>
        <hr/>
        ${html}
      `,
    }

    await sgMail.send(msg)

    return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error processing inbound email:", error)
    return NextResponse.json(
      { error: "Failed to process inbound email" },
      { status: 500 }
    )
  }
} 

--- File: app/api/upload/route.ts ---

import { NextRequest, NextResponse } from "next/server"
import { uploadFileToS3 } from "@/lib/s3-utils"
import { isAwsConfigured } from "@/lib/aws"
import { v4 as uuidv4 } from "uuid"
import { auth } from "@clerk/nextjs/server"

export async function POST(request: NextRequest) {
  try {
    // Check if AWS is configured
    if (!isAwsConfigured()) {
      return NextResponse.json(
        { error: "File upload system not configured" },
        { status: 503 }
      )
    }

    const { userId } = await auth()

    if (!userId) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

    const formData = await request.formData()
    const file = formData.get("file") as File
    const folder = formData.get("folder") as string || "images"
    
    if (!file) {
      return NextResponse.json({ error: "No file provided" }, { status: 400 })
    }
    
    // Validate file type
    const allowedTypes = ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"]
    if (!allowedTypes.includes(file.type)) {
      return NextResponse.json({ error: "File type not allowed. Please upload an image (JPEG, PNG, WebP, SVG, or GIF)." }, { status: 400 })
    }
    
    // Validate file size (max 5MB)
    const maxSize = 5 * 1024 * 1024 // 5MB
    if (file.size > maxSize) {
      return NextResponse.json({ error: "File size exceeds 5MB limit" }, { status: 400 })
    }
    
    // Generate a unique filename
    const fileExtension = file.name.split(".").pop()
    const fileName = `${folder}/${uuidv4()}.${fileExtension}`
    
    // Upload to S3
    const fileUrl = await uploadFileToS3(file, fileName)
    
    return NextResponse.json({ url: fileUrl })
  } catch (error) {
    console.error("Error uploading file:", error)
    if (error instanceof Error && error.message === "AWS S3 is not configured") {
      return NextResponse.json(
        { error: "File upload system not configured" },
        { status: 503 }
      )
    }
    return NextResponse.json({ error: "Failed to upload file" }, { status: 500 })
  }
} 

--- File: app/contact/page.tsx ---

import { Metadata } from "next"
import { ContactForm } from "@/components/contact/contact-form"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ConfigCard } from "@/components/admin/config-card"
import { Heading } from "@/components/typography/heading"

export const metadata: Metadata = {
  title: "Contact Us",
  description: "Get in touch with us. We'd love to hear from you!",
}

async function checkEnvironmentVariables() {
  // Define required environment variables
  const requiredEnvVars = {
    NEXT_PUBLIC_RECAPTCHA_SITE_KEY: process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY,
    RECAPTCHA_SECRET_KEY: process.env.RECAPTCHA_SECRET_KEY,
    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
    SENDGRID_SENDER: process.env.SENDGRID_SENDER,
    CONTACT_EMAIL: process.env.CONTACT_EMAIL,
  } as const

  // Check which variables are missing
  const missingEnvVars = Object.entries(requiredEnvVars)
    .filter(([, value]) => !value)
    .map(([key]) => key)

  // Log missing variables in development
  if (process.env.NODE_ENV === "development" && missingEnvVars.length > 0) {
    console.warn("⚠️ Missing environment variables for contact form:")
    missingEnvVars.forEach((key) => {
      console.warn(`  - ${key}`)
    })
  }

  return {
    isConfigured: missingEnvVars.length === 0,
    missingVars: missingEnvVars,
  }
}

export default async function ContactPage() {
  const { isConfigured, missingVars } = await checkEnvironmentVariables()

  if (!isConfigured) {
    return (
      <div className="container max-w-2xl py-8 md:py-12">
        <ConfigCard
          title="Contact Form Setup Required"
          description="The contact form needs configuration before it can be used."
          configItems={[
            {
              key: "NEXT_PUBLIC_RECAPTCHA_SITE_KEY",
              description: "From Google ReCAPTCHA",
              isMissing: missingVars.includes("NEXT_PUBLIC_RECAPTCHA_SITE_KEY"),
            },
            {
              key: "RECAPTCHA_SECRET_KEY",
              description: "From Google ReCAPTCHA",
              isMissing: missingVars.includes("RECAPTCHA_SECRET_KEY"),
            },
            {
              key: "SENDGRID_API_KEY",
              description: "Your SendGrid API key",
              isMissing: missingVars.includes("SENDGRID_API_KEY"),
            },
            {
              key: "SENDGRID_SENDER",
              description: "Verified sender email in SendGrid",
              isMissing: missingVars.includes("SENDGRID_SENDER"),
            },
            {
              key: "CONTACT_EMAIL",
              description: "Where to receive contact messages",
              isMissing: missingVars.includes("CONTACT_EMAIL"),
            },
          ]}
          filesToRemove={[{ path: "app/contact/page.tsx" }, { path: "components/contact/contact-form.tsx" }, { path: "app/_actions/contact.ts" }]}
        />
      </div>
    )
  }

  return <ContactPageContent />
}

function ContactPageContent() {
  return (
    <div className="container max-w-2xl py-8 md:py-12">
      <Card>
        <CardHeader>
          <CardTitle>
            <Heading variant="h4">Contact Us</Heading>
          </CardTitle>
          <CardDescription>Have a question or want to get in touch? Fill out the form and we&apos;ll get back to you.</CardDescription>
        </CardHeader>
        <CardContent>
          <ContactForm requireCaptcha={true} />
        </CardContent>
      </Card>
      {process.env.NODE_ENV === "development" && (
        <div className="mt-8 text-sm text-muted-foreground">
          <p>
            Get your API keys from{" "}
            <a className="underline" href="http://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer">
              http://www.google.com/recaptcha/admin
            </a>
          </p>
        </div>
      )}
    </div>
  )
}


--- File: app/demo/ai/page.tsx ---

import { Heading } from "@/components/typography/heading"
import { ConfigCard } from "@/components/admin/config-card"
import { AIDemoClient } from "@/components/demo/ai-demo-client"
import { checkAuth } from "@/lib/auth-utils"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { SignInButton } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"

const requiredEnvVars = {
  OPENAI_API_KEY: "Your OpenAI API key",
}

export default async function AIDemo() {
  // Check authentication
  const { isAuthenticated } = await checkAuth()

  // Check for missing environment variables
  const missingEnvVars = Object.entries(requiredEnvVars).map(([key, description]) => ({
    key,
    description,
    isMissing: !process.env[key],
  }))

  const hasAllEnvVars = missingEnvVars.every((item) => !item.isMissing)
  const isMissingReplicateToken = !process.env.REPLICATE_API_TOKEN

  return (
    <div className="container py-8 md:py-12">
      <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
        <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">AI SDK Integration</span>
        <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
          AI <span className="text-primary">Demo</span>
        </Heading>
        <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">Try out generating text, images and structured data with AI.</p>
      </div>

      <div className="mx-auto max-w-2xl mt-12">
        {!isAuthenticated ? (
          <Card>
            <CardHeader>
              <CardTitle>Sign in Required</CardTitle>
              <CardDescription>Please sign in to access the AI demo features.</CardDescription>
            </CardHeader>
            <CardContent className="flex justify-center">
              <SignInButton mode="modal">
                <Button size="lg">Sign in to Continue</Button>
              </SignInButton>
            </CardContent>
          </Card>
        ) : !hasAllEnvVars ? (
          <ConfigCard
            title="OpenAI Configuration Required"
            description="To enable AI text or structured data generation, you need to configure OpenAI API key."
            configItems={missingEnvVars}
            filesToRemove={[
              { path: "api/ai/*", description: "AI API routes" },
              { path: "_hooks/*", description: "AI hooks" },
            ]}
            alternativeTitle="Remove AI Feature"
            alternativeDescription="If you don't plan to use AI features, you can remove these files:"
          />
        ) : (
          <AIDemoClient isMissingReplicateToken={isMissingReplicateToken} />
        )}
      </div>
    </div>
  )
}


--- File: app/demo/upload/page.tsx ---

import { Heading } from "@/components/typography/heading"
import { UploadDemoClient } from "@/components/demo/upload-demo-client"
import { ConfigCard } from "@/components/admin/config-card"

const requiredEnvVars = {
  AWS_KEY: "Your AWS access key ID for S3 access",
  AWS_SECRET: "Your AWS secret access key for S3 access",
  AWS_REGION: "The AWS region where your S3 bucket is located (e.g., us-east-1)",
  AWS_BUCKET_PUBLIC: "The name of your public S3 bucket for file uploads",
}

export default async function UploadDemo() {
  // Check for missing environment variables
  const missingEnvVars = Object.entries(requiredEnvVars).map(([key, description]) => ({
    key,
    description,
    isMissing: !process.env[key],
  }))

  const hasAllEnvVars = missingEnvVars.every((item) => !item.isMissing)

  return (
    <div className="container py-8 md:py-12">
      <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
        <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">Upload Demo</span>
        <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
          File Upload <span className="text-primary">System</span>
        </Heading>
        <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">Try out our drag-and-drop file upload system with AWS S3 integration and image optimization.</p>
      </div>

      <div className="mx-auto max-w-2xl mt-12">
        {!hasAllEnvVars ? (
          <ConfigCard
            title="AWS S3 Configuration Required"
            description="To enable file uploads, you need to configure AWS S3 credentials and settings."
            configItems={missingEnvVars}
            filesToRemove={[
              { path: "components/ui/image-upload.tsx", description: "Image upload component" },
              { path: "lib/s3-utils.ts", description: "S3 utility functions" },
            ]}
            alternativeTitle="Remove File Upload Feature"
            alternativeDescription="If you don't plan to use AWS S3 for file uploads, you can remove these files:"
          />
        ) : (
          <UploadDemoClient />
        )}
      </div>
    </div>
  )
}


--- File: app/get-started/_components/cursor-prompt.tsx ---

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { CopyToClipboard } from "@/components/ui/copy-to-clipboard"
import { Heading } from "@/components/typography/heading"
import { ChevronsDown, ChevronsUp } from "lucide-react"

interface CursorPromptProps {
  prompt: string
  heading: string
}

export function CursorPrompt({ prompt, heading }: CursorPromptProps) {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <div className="space-y-2">
      <div className="flex items-center gap-4 sm:gap-8">
        <Heading variant="h5">{heading}</Heading>
        <Button className="text-primary hover:text-primary" variant="outline" onClick={() => setIsVisible(!isVisible)}>
          {isVisible ? <ChevronsUp className="w-4 h-4" /> : <ChevronsDown className="w-4 h-4" />}
          {isVisible ? "Hide Cursor Prompt" : "Show Cursor Prompt"}
        </Button>
      </div>

      {isVisible && (
        <div className="cursor-prompt-container border rounded-lg p-4 mt-2">
          <div className="flex items-center justify-between mb-2 relative">
            <h4 className="font-semibold text-primary">Cursor Prompt</h4>
            <div className="absolute -top-4 -right-4 w-full">
              <CopyToClipboard position="top-right" hideContent={true}>
                {prompt}
              </CopyToClipboard>
            </div>
          </div>
          <p className="text-sm text-muted-foreground -mt-2 mb-4">Copy this prompt and paste it to Cursor:</p>
          <pre className="text-sm bg-muted p-3 rounded-md whitespace-pre-wrap">
            <code>{prompt}</code>
          </pre>
        </div>
      )}
    </div>
  )
}


--- File: app/get-started/_components/getstarted-admin.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { isClerkConfigured, isAdminConfigured } from "@/lib/auth-utils"
import { ShieldUser } from "lucide-react"
import { CursorPrompt } from "./cursor-prompt"

export default function GetStartedAdmin() {
  const hasClerk = isClerkConfigured()
  const hasAdminConfig = isAdminConfigured()

  const cursorPrompt = `Please help me remove admin functionality from my project by:

1. Deleting these files:
   - app/admin/page.tsx
   - app/admin/layout.tsx
   - app/admin/components/
   - lib/admin.ts

2. Removing these environment variables from .env:
   - ADMIN_USER_IDS

3. And remove getstarted-admin from the get-started page`

  return (
    <>
      {!hasClerk || !hasAdminConfig ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Required: Admin Dashboard
            </Heading>
            <p>To set up the admin dashboard functionality:</p>
            <ol className="list-decimal pl-6 space-y-4">
              {!hasClerk && <li className="text-muted-foreground">First, set up Clerk authentication (see above)</li>}
              <li>
                <strong>Configure Admin Access:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>Sign in to your application using Clerk</li>
                  <li>
                    Get your Clerk User ID from the{" "}
                    <a href="https://dashboard.clerk.com/users" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      Clerk Dashboard
                    </a>
                  </li>
                  <li>Add your User ID to the environment variables</li>
                </ul>
              </li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>
                    # Replace with your Clerk user ID after signing in{"\n"}
                    ADMIN_USER_IDS=your_user_id
                  </code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>

            <div className="mt-6 space-y-4">
              <div className="p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Security Note:</strong> Only add trusted user IDs to the admin list. These users will have full access to your application’s admin features.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-md">
                <p className="text-blue-800 text-sm">
                  <strong>Tip:</strong> You can add multiple admin users by separating their IDs with commas (e.g., <code className="text-blue-600">user_123,user_456</code>)
                </p>
              </div>
            </div>

            <div className="pt-8">
              <CursorPrompt prompt={cursorPrompt} heading="Don't need admin functionality?" />
            </div>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">✓ Admin Dashboard is configured!</AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your admin system is ready to use. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2 mb-6">
                    <li>Access the admin dashboard</li>
                    <li>Manage users and content</li>
                    <li>View analytics and reports</li>
                    <li>Configure system settings</li>
                  </ul>
                </div>
                <div className="mt-4">
                  <Button asChild>
                    <Link href="/admin">
                      <ShieldUser className="w-5 h-5 scale-110 text-amber-300" />
                      Open Admin Dashboard
                    </Link>
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/_components/getstarted-ai.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Sparkles } from "lucide-react"
import { CursorPrompt } from "./cursor-prompt"

export default async function GetStartedAI() {
  // Check for required configuration
  const hasOpenAI = process.env.OPENAI_API_KEY
  const hasReplicate = process.env.REPLICATE_API_TOKEN && process.env.REPLICATE_MODEL

  const cursorPrompt = `Please help me remove AI functionality from my project by:

1. Deleting these files:
   - app/api/ai/generate/text/route.ts
   - app/api/ai/generate/image/route.ts
   - app/api/ai/generate/object/route.ts
   - app/api/ai/generate/strings/route.ts
   - app/_hooks/useGenerateText.ts
   - app/_hooks/useGenerateImage.ts
   - app/_hooks/useGenerateObject.ts
   - app/_hooks/useGenerateStrings.ts
   - app/demo/ai/page.tsx
   - components/demo/ai-demo-client.tsx
   - app/get-started/_components/getstarted-ai.tsx

2. Removing these dependencies from package.json:
   - @ai-sdk/openai
   - @ai-sdk/react
   - @ai-sdk/replicate
   - ai

3. Removing these environment variables from .env:
   - OPENAI_API_KEY
   - REPLICATE_API_TOKEN
   - REPLICATE_MODEL

4. And remove getstarted-ai from the get-started page

After these changes, please run \`pnpm install\` to update the dependency tree.`

  return (
    <>
      {!hasOpenAI || !hasReplicate ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Required: AI Integrations
            </Heading>
            <p>To set up AI functionality for text and image generation:</p>
            <ol className="list-decimal pl-6 space-y-4">
              <li>
                <strong>Set up OpenAI:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>
                    Create an account on{" "}
                    <a href="https://platform.openai.com/signup" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      OpenAI Platform
                    </a>
                  </li>
                  <li>Go to the API keys section</li>
                  <li>Create a new API key</li>
                </ul>
              </li>
              <li>
                <strong>Set up Replicate:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>
                    Create an account on{" "}
                    <a href="https://replicate.com/signin" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      Replicate
                    </a>
                  </li>
                  <li>Go to your account settings</li>
                  <li>Create an API token</li>
                  <li>
                    Choose your preferred model from the{" "}
                    <a href="https://replicate.com/explore" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      model collection
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with the following variables:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>
                    # AI Keys{"\n"}
                    OPENAI_API_KEY=your_openai_api_key{"\n"}
                    REPLICATE_API_TOKEN=your_replicate_token{"\n"}
                    REPLICATE_MODEL=your_chosen_model_id
                  </code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>

            <div className="mt-6 space-y-4">
              <div className="p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Security Note:</strong> Never commit your API keys to version control. Always use environment variables for sensitive data. Monitor your API usage to avoid unexpected costs.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-md">
                <p className="text-blue-800 text-sm">
                  <strong>Cost Management Tip:</strong> Set up usage limits in both OpenAI and Replicate dashboards to prevent unexpected charges. Use smaller models during development.
                </p>
              </div>
            </div>

            <div className="pt-8">
              <CursorPrompt prompt={cursorPrompt} heading="Don't need AI integration?" />
            </div>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">✓ AI Integrations are configured!</AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your AI system is ready to use. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>Generate text content with OpenAI</li>
                    <li>Create AI-powered images with Replicate</li>
                    <li>Customize model parameters</li>
                    <li>Monitor API usage and costs</li>
                  </ul>
                  <div className="mt-6 space-y-4">
                    <div className="p-4 bg-blue-50 rounded-md">
                      <p className="text-blue-800 text-sm">
                        <strong>Tip:</strong> Monitor your usage and costs in the{" "}
                        <a href="https://platform.openai.com/usage" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                          OpenAI Dashboard
                        </a>{" "}
                        and{" "}
                        <a href="https://replicate.com/account/usage" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                          Replicate Dashboard
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
                <div className="mt-4">
                  <Button asChild className="w-[210px]">
                    <Link href="/demo/ai">
                      <Sparkles className="w-5 h-5 scale-110 text-amber-300" />
                      Open AI Demo
                    </Link>
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/_components/getstarted-clerk.tsx ---

import { Card } from "@/components/ui/card"
import { redirect } from "next/navigation"
import { headers } from "next/headers"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
export default async function GetStartedClerk() {
  // Check if we're on localhost
  const headersList = await headers()
  const host = headersList.get("host") || ""
  const isLocalhost = host.includes("localhost") || host.includes("127.0.0.1")

  // If not localhost, redirect to home
  if (!isLocalhost) {
    redirect("/")
  }

  // Check for Clerk configuration
  const hasClerkConfig = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY && process.env.CLERK_SECRET_KEY

  return (
    <>
      {!hasClerkConfig ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Required: Clerk Authentication
            </Heading>
            <p>To get started, you need to set up Clerk authentication:</p>
            <ol className="list-decimal pl-6 space-y-4">
              <li>
                Create a new project on{" "}
                <a href="https://dashboard.clerk.com" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                  Clerk Dashboard
                </a>
              </li>
              <li>Copy your API keys from the Clerk Dashboard</li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with the following variables:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl">
                  <code>NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key{"\n"}CLERK_SECRET_KEY=your_secret_key</code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">✓ Clerk is configured!</AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your authentication system is ready to use. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>Sign up new users</li>
                    <li>Sign in existing users</li>
                    <li>Manage user sessions</li>
                    <li>Access protected routes</li>
                  </ul>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/_components/getstarted-config.tsx ---

import { Card } from "@/components/ui/card"
import { redirect } from "next/navigation"
import { headers } from "next/headers"
import { Heading } from "@/components/typography/heading"
import { siteConfig } from "@/lib/config"
import { Badge } from "@/components/ui/badge"
import { CheckCircle2, AlertCircle } from "lucide-react"

const defaultSiteConfig = {
  title: "Vibecode Party Starter",
  description: "A modern Next.js starter with authentication, database, storage, AI, and more.",
  shortDescription: "Next.js Starter with Clerk, Convex, AWS & AI",
  url: "https://starter.vibecode.party",
  shareImage: "https://starter.vibecode.party/screenshot.png",
  x: "",
  github: "",
  logo: "",
}

type ConfigStatus = {
  value: string
  isDefault: boolean
  label: string
  suggestion: string
  required?: boolean
}

export default async function GetStartedConfig() {
  // Check if we're on localhost
  const headersList = await headers()
  const host = headersList.get("host") || ""
  const isLocalhost = host.includes("localhost") || host.includes("127.0.0.1")

  // If not localhost, redirect to home
  if (!isLocalhost) {
    redirect("/")
  }

  const configStatus: Record<string, ConfigStatus> = {
    title: {
      value: siteConfig.title,
      isDefault: siteConfig.title === defaultSiteConfig.title,
      label: "Site Title",
      suggestion: "Your site name",
      required: true,
    },
    description: {
      value: siteConfig.description,
      isDefault: siteConfig.description === defaultSiteConfig.description,
      label: "Description",
      suggestion: "Your site description",
      required: true,
    },
    shortDescription: {
      value: siteConfig.shortDescription,
      isDefault: siteConfig.shortDescription === defaultSiteConfig.shortDescription,
      label: "Short Description",
      suggestion: "Brief tagline for your site",
      required: true,
    },
    url: {
      value: siteConfig.url,
      isDefault: siteConfig.url === defaultSiteConfig.url,
      label: "URL",
      suggestion: "https://yoursite.com",
      required: false,
    },
    shareImage: {
      value: siteConfig.shareImage,
      isDefault: siteConfig.shareImage === defaultSiteConfig.shareImage,
      label: "Share Image",
      suggestion: "https://yoursite.com/screenshot.png",
      required: false,
    },
  }

  const defaultCount = Object.values(configStatus).filter((status) => status.required && status.isDefault).length
  const needsUpdate = defaultCount > 0

  return (
    <div className="max-w-4xl mx-auto px-4 w-full mb-4">
      <Card className="p-6 mt-4 w-full">
        <div className="flex items-center gap-2 mb-3">
          <Heading variant="h4" className={`text-base ${needsUpdate ? "text-yellow-600" : "text-green-600"}`}>
            {needsUpdate ? "Setup Required: Site Configuration" : "Site Configuration"}
          </Heading>
          {needsUpdate ? (
            <Badge variant="outline" className="text-yellow-600 border-yellow-600">
              <AlertCircle className="w-3 h-3 mr-1" />
              {defaultCount} required
            </Badge>
          ) : (
            <Badge variant="outline" className="text-green-600 border-green-600">
              <CheckCircle2 className="w-3 h-3 mr-1" />
              Complete
            </Badge>
          )}
        </div>

        <div className="rounded-lg border bg-card divide-y -mt-6">
          {Object.entries(configStatus).map(([key, status]) => (
            <div key={key} className="flex items-center justify-between p-2 gap-4">
              <div className="flex items-center gap-4 min-w-0">
                <div className="flex items-center gap-1.5 shrink-0">
                  <span className="font-medium text-sm">{status.label}</span>
                  {!status.required && (
                    <Badge variant="secondary" className="text-[10px] px-1 py-0 h-4">
                      Optional
                    </Badge>
                  )}
                </div>
                <div className="text-xs text-muted-foreground truncate">{status.value || "(none provided)"}</div>
              </div>
              {status.isDefault && (
                <Badge variant="outline" className={`text-[10px] px-1.5 py-0 h-4 shrink-0 ${status.required ? "text-yellow-600 border-yellow-600" : "text-muted-foreground border-muted"}`}>
                  {status.required ? "Needs Update" : "Default"}
                </Badge>
              )}
            </div>
          ))}
        </div>

        {needsUpdate && (
          <>
            <p className="text-sm text-muted-foreground -mb-4">
              Update in <code className="px-1.5 py-0.5 bg-muted rounded text-xs">lib/config.ts</code>
            </p>
            <pre className="text-xs p-3 bg-muted rounded-md overflow-x-auto">
              <code>{`export const siteConfig = {
  title: "Your Site Name",
  description: "Your site description",
  shortDescription: "Brief tagline",
  url: "https://yoursite.com",      // Optional
  shareImage: "https://yoursite.com/og.png"  // Optional
} as const`}</code>
            </pre>
          </>
        )}
      </Card>
    </div>
  )
}


--- File: app/get-started/_components/getstarted-convex.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { CursorPrompt } from "./cursor-prompt"

export default async function GetStartedConvex() {
  const hasConvexConfig = Boolean(process.env.CONVEX_DEPLOY_KEY)

  const cursorPrompt = `Add a new table to convex/schema.ts. For example, to add a posts table:\n\n\`\`\`typescript\nposts: defineTable({\n  title: v.string(),\n  content: v.string(),\n  createdAt: v.number(),\n})\n\`\`\`\n\n[ Describe the table you want to add here... ]\n\nThen run \`npx convex codegen\` to update your generated types.`

  if (!hasConvexConfig) {
    return (
      <div className="max-w-4xl mx-auto px-4 w-full">
        <Card className="p-8 mt-8 w-full">
          <Heading variant="h4" className="text-primary">
            Setup Required: Convex Database
          </Heading>
          <p>
            To finish setting up Convex, add your <strong>CONVEX_DEPLOY_KEY</strong> to your <code className="px-2 py-1 bg-muted rounded">.env</code> file:
          </p>
          <ol className="list-decimal pl-6 space-y-4 mt-4">
            <li>
              Get your deploy key from the{" "}
              <a href="https://dashboard.convex.dev" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                Convex Dashboard
              </a>
              .
            </li>
            <li>
              Add it to your <code className="px-2 py-1 bg-muted rounded">.env</code> file as:
              <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                <code>{`CONVEX_DEPLOY_KEY=your_deploy_key_here`}</code>
              </pre>
            </li>
            <li>Restart your development server after adding the environment variable.</li>
          </ol>
          <div className="mt-8">
            <Heading variant="h5" className="mb-2 text-primary">
              Next: Add Your First Table
            </Heading>
            <p>
              To finish setting up Convex, add your own table to <code className="px-2 py-1 bg-muted rounded">convex/schema.ts</code>:
            </p>
            <ol className="list-decimal pl-6 space-y-4 mt-4">
              <li>
                Open <code className="px-2 py-1 bg-muted rounded">convex/schema.ts</code> and add a new table. For example:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>{`posts: defineTable({\n  title: v.string(),\n  content: v.string(),\n  createdAt: v.number(),\n})`}</code>
                </pre>
              </li>
              <li>
                Run <code>npx convex codegen</code> to update your generated types.
              </li>
              <li>
                (Optional) Use this prompt in Cursor or your LLM:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>{`Add a new table to convex/schema.ts for blog posts with fields: title (string), content (string), createdAt (number)`}</code>
                </pre>
              </li>
            </ol>
            <div className="pt-8 flex flex-col gap-4">
              <CursorPrompt prompt={cursorPrompt} heading="Need help setting up a Convex table?" />
            </div>
          </div>
        </Card>
      </div>
    )
  }

  return (
    <div className="mx-auto text-center max-w-2xl w-full">
      <Accordion type="single" collapsible className="w-full">
        <AccordionItem value="features">
          <AccordionTrigger className="text-green-600 font-semibold">✓ Convex is configured!</AccordionTrigger>
          <AccordionContent>
            <div className="text-left">
              <p className="mb-4">Your database is ready to use. You can now:</p>
              <ul className="list-disc pl-6 space-y-2">
                <li>
                  Create and manage Convex tables through <code>schema.ts</code>
                </li>
                <li>Write queries and mutations in your Convex functions</li>
                <li>Set up real-time subscriptions</li>
                <li>Use optimistic updates for better UX</li>
              </ul>
              <div className="mt-6 p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Tip:</strong> You can manage your Convex project, monitor queries, and view your data in the{" "}
                  <a href="https://dashboard.convex.dev" target="_blank" rel="noopener noreferrer" className="text-amber-600 hover:underline">
                    Convex Dashboard
                  </a>
                </p>
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  )
}


--- File: app/get-started/_components/getstarted-email.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { Mail } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { CursorPrompt } from "./cursor-prompt"

export default async function GetStartedEmail() {
  // Check for required configuration
  const hasRecaptcha = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY && process.env.RECAPTCHA_SECRET_KEY
  const hasEmail = process.env.SENDGRID_API_KEY && process.env.SENDGRID_SENDER && process.env.CONTACT_EMAIL && process.env.UNSUBSCRIBE_SECRET

  const cursorPrompt = `Please help me remove email and contact form functionality from my project by:

1. Deleting these files:
   - app/api/contact/route.ts
   - components/forms/contact-form.tsx
   - lib/email.ts

2. Removing these dependencies from package.json:
   - @sendgrid/mail
   - @types/grecaptcha
   - react-google-recaptcha-v3

3. Removing these environment variables from .env:
   - NEXT_PUBLIC_RECAPTCHA_SITE_KEY
   - RECAPTCHA_SECRET_KEY
   - SENDGRID_API_KEY
   - SENDGRID_SENDER
   - CONTACT_EMAIL
   - UNSUBSCRIBE_SECRET

4. And remove getstarted-email from the get-started page

After these changes, please run \`pnpm install\` to update the dependency tree.`

  return (
    <>
      {!hasRecaptcha || !hasEmail ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Required: Email & Contact Form
            </Heading>
            <p>To set up email and contact form functionality:</p>
            <ol className="list-decimal pl-6 space-y-4">
              <li>
                <strong>Set up reCAPTCHA:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>
                    Go to the{" "}
                    <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      reCAPTCHA Admin Console
                    </a>
                  </li>
                  <li>Create a new site registration (use reCAPTCHA v3)</li>
                  <li>Add your domain to the allowed domains list</li>
                  <li>Copy your site key and secret key</li>
                </ul>
              </li>
              <li>
                <strong>Set up SendGrid:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>
                    Create an account on{" "}
                    <a href="https://signup.sendgrid.com/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      SendGrid
                    </a>
                  </li>
                  <li>Verify your sender identity</li>
                  <li>Create an API key with email sending permissions</li>
                </ul>
              </li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with the following variables:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>
                    # Recaptcha{"\n"}
                    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_site_key{"\n"}
                    RECAPTCHA_SECRET_KEY=your_secret_key{"\n"}
                    {"\n"}# Email{"\n"}
                    SENDGRID_API_KEY=your_api_key{"\n"}
                    SENDGRID_SENDER=your_verified_sender_email{"\n"}
                    CONTACT_EMAIL=your_contact_form_recipient{"\n"}
                    UNSUBSCRIBE_SECRET=your_unsubscribe_secret_key
                  </code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>

            <div className="mt-6 space-y-4">
              <div className="p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Security Note:</strong> Never commit your secret keys to version control. Always use environment variables for sensitive data. The UNSUBSCRIBE_SECRET should be a long, random
                  string used to validate unsubscribe links.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-md">
                <p className="text-blue-800 text-sm">
                  <strong>Testing Tip:</strong> Use SendGrid’s sandbox mode for testing to avoid using your email quota during development.
                </p>
              </div>
            </div>

            <div className="pt-8">
              <CursorPrompt prompt={cursorPrompt} heading="Don’t need email functionality?" />
            </div>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">✓ Email & Contact Form are configured!</AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your email system is ready to use. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>Use the contact form with reCAPTCHA protection</li>
                    <li>Send emails through SendGrid</li>
                    <li>Receive contact form submissions</li>
                    <li>Process unsubscribe requests securely</li>
                    <li>Customize email templates</li>
                  </ul>
                  <div className="mt-6 p-4 bg-blue-50 rounded-md">
                    <p className="text-blue-800 text-sm">
                      <strong>Tip:</strong> You can monitor your email activity and analytics in the{" "}
                      <a href="https://app.sendgrid.com/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                        SendGrid Dashboard
                      </a>
                    </p>
                  </div>
                </div>
                <div className="mt-4">
                  <Button asChild className="w-[210px]">
                    <Link href="/contact">
                      <Mail className="w-5 h-5 scale-110 text-amber-300" />
                      Open Contact Form
                    </Link>
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/_components/getstarted-example.tsx ---

"use client"
import { Card } from "@/components/ui/card"
import { Heading } from "@/components/typography/heading"
import { useState } from "react"
import { Copy, Check, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"

interface GetStartedExampleProps {
  title: string
  prompt: string
  children?: React.ReactNode
  isCommand?: boolean
}
export default function GetStartedExample({ title, prompt, children, isCommand }: GetStartedExampleProps) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(prompt)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Failed to copy text: ", err)
    }
  }

  return (
    <Card className="p-6 hover:shadow-lg transition-all cursor-pointer relative group" onClick={copyToClipboard}>
      <Button
        size="icon"
        variant="outline"
        className="absolute top-6 right-6 h-8 w-8 transition-opacity opacity-70 group-hover:opacity-100"
        onClick={(e) => {
          e.stopPropagation()
          copyToClipboard()
        }}
      >
        {copied ? <Check className="h-4 w-4 text-green-600 scale-125" /> : <Copy className="h-4 w-4" />}
      </Button>
      <Heading variant="h6">{title}</Heading>
      {children}
      <pre className="bg-muted/50 border p-4 rounded-md text-xs sm:text-sm font-mono whitespace-pre-wrap -mt-2 flex items-center">
        {isCommand && <ChevronRight className="w-4 h-4 scale-125 text-primary mr-2" />}
        {prompt}
      </pre>
    </Card>
  )
}


--- File: app/get-started/_components/getstarted-payments.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { BadgeDollarSign } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { CursorPrompt } from "./cursor-prompt"

export default async function GetStartedPayments() {
  // Check for required configuration
  const hasStripe = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY && process.env.STRIPE_SECRET_KEY

  const cursorPrompt = `Please help me remove Stripe payment functionality from my project by:

1. Deleting these files:
   - app/api/stripe/webhook/route.ts
   - app/api/stripe/create-checkout/route.ts
   - lib/stripe.ts
   - components/payments/checkout-button.tsx

2. Removing these dependencies from package.json:
   - stripe
   - @stripe/stripe-js

3. Removing these environment variables from .env:
   - NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
   - STRIPE_SECRET_KEY

4. And remove getstarted-payments from the get-started page

After these changes, please run \`pnpm install\` to update the dependency tree.`

  return (
    <>
      {!hasStripe ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Required: Payments (Stripe)
            </Heading>
            <p>To set up payment processing with Stripe:</p>
            <ol className="list-decimal pl-6 space-y-4">
              <li>
                <strong>Create a Stripe Account:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>
                    Sign up at{" "}
                    <a href="https://dashboard.stripe.com/register" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      Stripe Dashboard
                    </a>
                  </li>
                  <li>Complete the account verification process</li>
                  <li>Switch between test and live modes as needed</li>
                </ul>
              </li>
              <li>
                <strong>Get API Keys:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>
                    Go to the{" "}
                    <a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      Stripe API Keys page
                    </a>
                  </li>
                  <li>Copy your publishable key and secret key</li>
                  <li>Make sure you’re using the correct mode (test/live) keys</li>
                </ul>
              </li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with the following variables:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>
                    NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_publishable_key{"\n"}
                    STRIPE_SECRET_KEY=your_secret_key
                  </code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>

            <div className="mt-6 space-y-4">
              <div className="p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Security Note:</strong> Never expose your Stripe secret key in client-side code or commit it to version control. Only the publishable key should be public.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-md">
                <p className="text-blue-800 text-sm">
                  <strong>Testing Tip:</strong> Use Stripe’s test mode and{" "}
                  <a href="https://stripe.com/docs/testing#cards" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                    test card numbers
                  </a>{" "}
                  for development.
                </p>
              </div>
            </div>

            <div className="pt-8">
              <CursorPrompt prompt={cursorPrompt} heading="Don’t need payments?" />
            </div>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">✓ Stripe Payments are configured!</AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your payment system is ready to use. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>Process one-time payments</li>
                    <li>Set up recurring subscriptions</li>
                    <li>Handle payment webhooks</li>
                    <li>Access payment analytics</li>
                  </ul>
                  <div className="mt-6 p-4 bg-blue-50 rounded-md">
                    <p className="text-blue-800 text-sm">
                      <strong>Tip:</strong> Monitor your payments and manage settings in the{" "}
                      <a href="https://dashboard.stripe.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                        Stripe Dashboard
                      </a>
                    </p>
                  </div>
                </div>
                <div className="mt-4">
                  <Button asChild className="w-[210px]">
                    <Link href="/demo/upload">
                      <BadgeDollarSign className="w-5 h-5 scale-110 text-amber-300" />
                      Open Payment Form
                    </Link>
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/_components/getstarted-storage.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { Upload } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { CursorPrompt } from "./cursor-prompt"

export default async function GetStartedStorage() {
  // Check for AWS configuration
  const hasRequiredConfig = process.env.AWS_KEY && process.env.AWS_SECRET && process.env.AWS_REGION && process.env.AWS_BUCKET_PUBLIC

  const hasCloudFront = process.env.CLOUDFRONT_DOMAIN

  const cursorPrompt = `Please help me remove AWS S3 file storage from my project by:

1. Deleting these files:
   - lib/aws.ts
   - lib/s3-utils.ts
   - lib/upload-utils.ts
   - app/api/upload/route.ts

2. Removing this dependency from package.json:
   - @aws-sdk/client-s3

3. Removing these environment variables from .env:
   - AWS_KEY
   - AWS_SECRET
   - AWS_REGION
   - AWS_BUCKET_PUBLIC
   - CLOUDFRONT_DOMAIN

4. Updating next.config.ts by removing *.s3.amazonaws.com entries from images.remotePatterns

5. And remove getstarted-storage from the get-started page

After these changes, please run \`pnpm install\` to update the dependency tree.`

  return (
    <>
      {!hasRequiredConfig ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Required: File Storage (AWS S3)
            </Heading>
            <p>To set up file storage with AWS S3:</p>
            <ol className="list-decimal pl-6 space-y-4">
              <li>
                Create an AWS account and access the{" "}
                <a href="https://aws.amazon.com/console/" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                  AWS Console
                </a>
              </li>
              <li>Create an S3 bucket for public files and configure CORS settings</li>
              <li>Create an IAM user with appropriate S3 permissions and get the access credentials</li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with the following variables:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>
                    AWS_KEY=your_access_key_id{"\n"}
                    AWS_SECRET=your_secret_access_key{"\n"}
                    AWS_REGION=your_bucket_region{"\n"}
                    AWS_BUCKET_PUBLIC=your_bucket_name{"\n"}
                    CLOUDFRONT_DOMAIN=your_cloudfront_domain # Optional but recommended
                  </code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>

            <div className="mt-6 space-y-4">
              <div className="p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Security Note:</strong> Ensure your AWS credentials have the minimum required permissions and are never committed to version control.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-md">
                <p className="text-blue-800 text-sm">
                  <strong>CloudFront Recommendation:</strong> While optional, setting up CloudFront is recommended for better performance and caching of your stored files.
                </p>
              </div>
            </div>

            <div className="pt-8">
              <CursorPrompt prompt={cursorPrompt} heading="Don’t need file storage?" />
            </div>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">
                <div className="flex items-center">
                  ✓ File Storage is configured!
                  {!hasCloudFront && <span className="text-amber-500 italic tracking-wide text-xs ml-2 hidden sm:inline">(CloudFront recommended)</span>}
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your file storage system is ready to use. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>Upload files to S3</li>
                    <li>Generate pre-signed URLs for secure file access</li>
                    <li>Manage public and private files</li>
                    <li>Handle file uploads in your application</li>
                  </ul>
                  {!hasCloudFront && (
                    <div className="mt-6 p-4 bg-amber-50 rounded-md">
                      <p className="text-amber-800 text-sm">
                        <strong>Recommendation:</strong> Consider setting up CloudFront for improved performance and caching. Add the{" "}
                        <code className="px-1 py-0.5 bg-amber-100 rounded">CLOUDFRONT_DOMAIN</code> variable to your environment configuration.
                      </p>
                    </div>
                  )}
                  <div className="mt-6 p-4 bg-blue-50 rounded-md">
                    <p className="text-blue-800 text-sm">
                      <strong>Tip:</strong> You can manage your S3 buckets and CloudFront distributions in the{" "}
                      <a href="https://aws.amazon.com/console/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
                        AWS Console
                      </a>
                    </p>
                  </div>
                </div>
                <div className="mt-4">
                  <Button asChild className="w-[210px]">
                    <Link href="/demo/upload">
                      <Upload className="w-5 h-5 scale-110 text-amber-300" />
                      Open Upload Demo
                    </Link>
                  </Button>
                </div>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/_components/getstarted-testing.tsx ---

import { Card } from "@/components/ui/card"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Heading } from "@/components/typography/heading"
import { isClerkConfigured } from "@/lib/auth-utils"
import { CopyOneliner } from "@/components/ui/copy-oneliner"
import { CursorPrompt } from "./cursor-prompt"

export default async function GetStartedTesting() {
  // Check for required configuration
  const hasClerk = isClerkConfigured()
  const hasTestConfig = process.env.TEST_USER_EMAIL && process.env.TEST_USER_PASSWORD && process.env.TEST_USER_ID

  const cursorPrompt = `Please help me remove test user configuration from my project by:

1. Removing these environment variables from .env:
   - TEST_USER_EMAIL
   - TEST_USER_PASSWORD
   - TEST_USER_ID

2. Removing test-specific code and files:
   - Delete all files in /tests directory:
     - /tests/utils/auth-helpers.ts
     - /tests/utils/test-helpers.ts
     - /tests/utils/db-reset.ts
     - /tests/global-setup.ts
     - /tests/auth.spec.ts
     - /tests/admin.spec.ts
     - /tests/subscribe.spec.ts
     - /tests/contact.spec.ts
   - Delete /app/get-started/_components/getstarted-testing.tsx
   - Remove test user section from components/home/content-section.tsx

3. Remove test-related packages:
   - Uninstall @clerk/testing and @playwright/test
   - Remove test-related scripts from package.json

4. Remove test user section from .env and .example-env files`

  return (
    <>
      {!hasClerk || !hasTestConfig ? (
        <div className="max-w-4xl mx-auto px-4 w-full">
          <Card className="p-8 mt-8 w-full">
            <Heading variant="h4" className="text-primary">
              Setup Optional: Test User Configuration
            </Heading>
            <p>To set up test user credentials for automated testing:</p>
            <ol className="list-decimal pl-6 space-y-4">
              {!hasClerk && <li className="text-muted-foreground">First, set up Clerk authentication (see above)</li>}
              <li>
                <strong>Create a Test User:</strong>
                <ul className="list-disc pl-6 mt-2 space-y-2">
                  <li>Sign up for an account in your application using email/password</li>
                  <li>
                    Get your User ID from the{" "}
                    <a href="https://dashboard.clerk.com/users" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
                      Clerk Dashboard
                    </a>
                  </li>
                  <li>Note down the email and password you used</li>
                </ul>
              </li>
              <li>
                Create or update your <code className="px-2 py-1 bg-muted rounded">.env</code> file with:
                <pre className="mt-2 p-4 bg-muted rounded-md max-w-xl overflow-x-auto">
                  <code>
                    # Replace with your actual test user credentials{"\n"}
                    TEST_USER_EMAIL=john.polacek@gmail.com{"\n"}
                    TEST_USER_PASSWORD=PartyStarter1!{"\n"}
                    TEST_USER_ID=user_2v6r3ksK9AuMtLjLlJnXbti6mCK
                  </code>
                </pre>
              </li>
              <li>Restart your development server after adding the environment variables</li>
            </ol>

            <div className="mt-6 space-y-4">
              <div className="p-4 bg-amber-50 rounded-md">
                <p className="text-amber-800 text-sm">
                  <strong>Security Note:</strong> Never use production credentials for testing. Create a dedicated test account with a strong password.
                </p>
              </div>
              <div className="p-4 bg-blue-50 rounded-md">
                <p className="text-blue-800 text-sm">
                  <strong>Tip:</strong> You can use these credentials in your end-to-end tests to automate user authentication flows.
                </p>
              </div>
            </div>

            <div className="pt-8">
              <CursorPrompt prompt={cursorPrompt} heading="Don't need test user configuration?" />
            </div>
          </Card>
        </div>
      ) : (
        <div className="mx-auto text-center max-w-2xl w-full">
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="features">
              <AccordionTrigger className="text-green-600 font-semibold">
                <div className="flex items-center gap-2">
                  <span>✓ Test User is configured!</span>
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <div className="text-left">
                  <p className="mb-4">Your test configuration is ready. You can now:</p>
                  <ul className="list-disc pl-6 space-y-2">
                    <li>Run automated authentication tests</li>
                    <li>Test protected routes and features</li>
                    <li>Simulate user sessions</li>
                    <li>Verify email-based flows</li>
                  </ul>
                </div>
                <CopyOneliner className="w-[210px] mt-4">pnpm pw</CopyOneliner>
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      )}
    </>
  )
}


--- File: app/get-started/page.tsx ---

import { Icon } from "@/components/graphics/icon"
import { HeroSection } from "@/components/home/hero-section"
import { Heading } from "@/components/typography/heading"
import { redirect } from "next/navigation"
import { headers } from "next/headers"
import GetStartedClerk from "./_components/getstarted-clerk"
import GetStartedConvex from "./_components/getstarted-convex"
import GetStartedStorage from "./_components/getstarted-storage"
import GetStartedEmail from "./_components/getstarted-email"
import GetStartedAI from "./_components/getstarted-ai"
import GetStartedPayments from "./_components/getstarted-payments"
import GetStartedAdmin from "./_components/getstarted-admin"
import GetStartedTesting from "./_components/getstarted-testing"
import GetStartedExample from "./_components/getstarted-example"
import GetStartedConfig from "./_components/getstarted-config"
import { siteConfig } from "@/lib/config"

export default async function GetStartedPage() {
  // Check if localhost
  const headersList = await headers()
  const host = headersList.get("host") || ""
  const isLocalhost = host.includes("localhost") || host.includes("127.0.0.1")

  // If not localhost, redirect to home
  if (!isLocalhost) {
    redirect("/")
  }

  const isTitleCustomized = siteConfig.title !== ("Vibecode Party Starter" as string)
  const isDescriptionCustomized = siteConfig.description !== ("A modern Next.js starter with authentication, database, storage, AI, and more." as string)
  const additionalInstructions = `

Please come up with an implementation plan that follows the project's architecture patterns and uses existing components where possible. Do NOT make any code changes yet, just plan the implementation.
  `

  const examplePrompts = {
    creative: `Please help me create an AI Creative Studio with:

1. Text-to-image generation with multiple Replicate models
2. AI-powered image editing and variations using OpenAI
3. Text generation with custom system prompts
4. Save generations to AWS S3 and organize in collections
5. Community showcase with likes and comments
6. Export options with watermarking

Please implement this following the project's architecture patterns and using:
- Replicate for text-to-image models
- OpenAI for variations and text
- AWS S3 for storage
- Convex for collections and social features
- Clerk for user authentication`,

    marketplace: `Please help me create a marketplace feature with:

1. Product listings with search and filters
2. Shopping cart functionality
3. Stripe checkout integration
4. Order management
5. Seller profiles and ratings
6. Inventory tracking

Please implement this following the project's architecture patterns and existing payment integration.`,

    community: `Please help me create a community feature with:

1. User profiles with avatars
2. Discussion forums
3. Direct messaging
4. Activity feed
5. Reputation system
6. Content moderation tools

Please implement this following the project's architecture patterns and using existing auth and storage systems.`,
  }

  const customPrompt = `I am building a new project starting from a Next.js starter template (see the project README and package.json for more info). Please help me come up with a plan for building ${siteConfig.title} - ${siteConfig.description}`
  const newHomePrompt = `I am building a new project starting from a Next.js starter template. Please update the home page by removing the default starter project content and creating new home page content for ${siteConfig.title} - ${siteConfig.description}. Use our custom Heading component from @/components/typography/heading for any h1-h6 headings. Also update the Icon component with an icon from Lucide or another icon or svg library that would be appropriate for ${siteConfig.title}.`
  const newRoadmapPrompt = `I am building a new project starting from a Next.js starter template. Please update the roadmap page by removing the default starter project content at /app/roadmap/data/features.json and /app/roadmap/data/featureRequests.json with new data for ${siteConfig.title} - ${siteConfig.description}. `

  return (
    <div className="flex min-h-screen flex-col bg-violet-100/10">
      <HeroSection gettingStarted={true} title={siteConfig.title} />
      <div className="w-full flex justify-center -mt-6">
        <div className="w-12 h-12 flex items-center justify-center rounded-full bg-purple-50 border-4 border-primary/20 ring-8 ring-primary/50 scale-150">
          <div className="scale-125 opacity-80">
            <Icon />
          </div>
        </div>
      </div>
      <section className="flex flex-col gap-4 py-16 px-4">
        <Heading variant="h2" className="text-center">
          Getting Started
        </Heading>
        <div>
          <GetStartedConfig />
          <GetStartedClerk />
          <GetStartedConvex />
          <GetStartedStorage />
          <GetStartedEmail />
          <GetStartedAI />
          <GetStartedPayments />
          <GetStartedAdmin />
          <GetStartedTesting />
        </div>
      </section>

      <section className="flex flex-col gap-8 pb-16 max-w-4xl mx-auto px-4 w-full">
        <Heading variant="h2" className="text-center">
          What&apos;s Next?
        </Heading>
        <p className="text-center text-muted-foreground max-w-2xl mx-auto">
          Once you have your starter configured, here are some example features you can build. Click a card to copy the Cursor prompt and get started!
        </p>
        <div className="space-y-6">
          {isTitleCustomized && isDescriptionCustomized ? (
            <>
              <GetStartedExample title="Update the home page" prompt={newHomePrompt} />
              <GetStartedExample title="Come up with a build plan" prompt={customPrompt + additionalInstructions} />
              <GetStartedExample title="Update the roadmap" prompt={newRoadmapPrompt} />
            </>
          ) : (
            <>
              <GetStartedExample title="AI Creative Studio" prompt={examplePrompts.creative + additionalInstructions} />
              <GetStartedExample title="Marketplace" prompt={examplePrompts.marketplace + additionalInstructions} />
              <GetStartedExample title="Community Platform" prompt={examplePrompts.community + additionalInstructions} />
            </>
          )}
          <GetStartedExample isCommand={true} title="Generate llm.txt" prompt={`pnpm generate:llm`}>
            <p>
              Generate llm.txt so you can provide the entire codebase to an AI agent with a large context window like{" "}
              <a className="text-primary" href="https://gemini.google.com" target="_blank" rel="noopener noreferrer">
                Gemini
              </a>
              .
            </p>
          </GetStartedExample>
        </div>
      </section>

      <section className="flex flex-col gap-8 pb-32 max-w-4xl mx-auto px-4 w-full">
        <Heading variant="h2" className="text-center">
          Ship It!
        </Heading>
        <p className="text-center text-muted-foreground max-w-2xl mx-auto">
          Once you have your starter configured, we have a collection of npm scripts that can help you deploy your project with Github and Vercel (requires Github and Vercel CLI).
        </p>
        <GetStartedExample isCommand={true} title="Boot Project" prompt={`pnpm boot`}>
          <p>This will install the Github and Vercel CLI, login, and link your project.</p>
        </GetStartedExample>
        <GetStartedExample isCommand={true} title="Ship It" prompt={`pnpm ship`}>
          <p>Lint and build the project, run the tests then generate a commit message and push your code to Github and Vercel.</p>
        </GetStartedExample>
        <GetStartedExample isCommand={true} title="YOLO Deploy" prompt={`pnpm go`}>
          <p>Skip the tests and deploy straight to production.</p>
        </GetStartedExample>
      </section>
    </div>
  )
}


--- File: app/globals.css ---

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-sidebar: hsl(var(--sidebar));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-float: float 15s ease-in-out infinite;

  --font-body: ['var(--font-rethink-sans)'];
  --font-sans: ['var(--font-rethink-sans)'];

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 1rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 246 80% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 246 80% 60%;
    --radius: 0.5rem;
    --sidebar: 0 0% 100%;
    --sidebar-foreground: 240 10% 3.9%;
    --sidebar-border: 240 5.9% 90%;
    --sidebar-primary: 246 80% 60%;
    --sidebar-primary-foreground: 0 0% 98%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 246 100% 70%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 246 80% 60%;
    --sidebar: 240 10% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-primary: 246 80% 60%;
    --sidebar-primary-foreground: 0 0% 98%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

html {
  font-family: var(--font-rethink-sans);
  text-wrap: pretty;
}

button {
  cursor: pointer;
}


--- File: app/layout.tsx ---

import Link from "next/link"
import type { Metadata } from "next"
import { Rethink_Sans } from "next/font/google"
import { ThemeProvider } from "@/components/layout/theme-provider"
import { MainNav } from "@/components/nav/main-nav"
import { MobileNav } from "@/components/nav/mobile-nav"
import { ThemeToggle } from "@/components/nav/theme-toggle"
import AuthButtons from "@/components/nav/auth-buttons"
import { cn } from "@/lib/utils"
import { Toaster } from "sonner"
import { auth } from "@clerk/nextjs/server"
import { headers } from "next/headers"
import { trackVisit } from "@/app/_actions/track-visit"
import { RouteTracker } from "@/components/analytics/route-tracker"
import { siteConfig } from "@/lib/config"
import "./globals.css"
import { Github } from "lucide-react"
import { Providers } from "./providers"

const rethinkSans = Rethink_Sans({
  subsets: ["latin"],
  variable: "--font-rethink-sans",
})

export const metadata: Metadata = {
  title: siteConfig.title,
  description: siteConfig.description,
  openGraph: {
    title: siteConfig.title,
    description: siteConfig.description,
    images: [
      {
        url: siteConfig.shareImage,
        width: 1200,
        height: 630,
        alt: `${siteConfig.title} screenshot`,
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: siteConfig.title,
    description: siteConfig.description,
    images: [siteConfig.shareImage],
  },
}

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  let userId: string | null = null
  let isAdmin = false

  try {
    const { userId: id } = await auth()
    userId = id
    const adminUserIds = process.env.ADMIN_USER_IDS?.split(",") || []
    isAdmin = userId ? adminUserIds.includes(userId) : false
  } catch (error) {
    // Silently handle auth initialization errors
    console.warn("Auth initialization error during initialization (this can be expected in development):", error)
  }

  // Track the visit
  const headersList = await headers()

  // Get path from x-matched-path, fallback to x-url, then x-invoke-path, then /
  const path = headersList.get("x-matched-path") || (headersList.get("x-url") ? new URL(headersList.get("x-url")!).pathname : null) || headersList.get("x-invoke-path") || "/"

  await trackVisit(path)

  const currentYear = new Date().getFullYear()

  return (
    <html lang="en" suppressHydrationWarning className={`${rethinkSans.variable}`}>
      <body className={cn("min-h-screen bg-background font-sans antialiased")}>
        <Providers>
          <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
            <RouteTracker />
            <div className="relative flex min-h-screen flex-col">
              <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur-sm supports-backdrop-filter:bg-background/60">
                <div className="px-4 sm:px-8 md:px-16 flex h-16 items-center justify-between">
                  <div className="flex items-center gap-2 md:gap-6">
                    <MobileNav />
                    <MainNav isAdmin={isAdmin} />
                  </div>
                  <div className="flex items-center gap-2">
                    <div className="flex items-center pr-2 gap-2">
                      {siteConfig.x && (
                        <Link href={`https://x.com/${siteConfig.x}`} target="_blank" className="text-muted-foreground hover:text-primary">
                          <span className="text-xl font-extrabold px-2 mx-1">𝕏</span>
                        </Link>
                      )}
                      {siteConfig.github && (
                        <Link href={siteConfig.github} target="_blank" className="px-1 mx-1 text-muted-foreground hover:text-primary">
                          <Github className="w-5 h-5" />
                        </Link>
                      )}
                    </div>
                    <ThemeToggle />
                    <AuthButtons />
                  </div>
                </div>
              </header>
              <main className="flex-1">{children}</main>
              <footer className="border-t py-6">
                <div className="container px-4 md:px-6">
                  <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-center md:text-left text-sm">
                    <p>
                      © {currentYear} {siteConfig.title}. All rights reserved.
                    </p>
                    <nav className="flex gap-4">
                      <Link href="/terms" className="hover:underline underline-offset-4">
                        Terms
                      </Link>
                      <Link href="/privacy" className="hover:underline underline-offset-4">
                        Privacy
                      </Link>
                      <Link href="#" className="hover:underline underline-offset-4">
                        Contact
                      </Link>
                    </nav>
                  </div>
                </div>
              </footer>
            </div>
            <Toaster position="top-center" />
          </ThemeProvider>
        </Providers>
      </body>
    </html>
  )
}


--- File: app/mailing-list/page.tsx ---

import { MailingListForm } from "@/components/forms/mailing-list-form"
import { Heading } from "@/components/typography/heading"
import { getSubscription, unsubscribe } from "@/app/_actions/mailing-list"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ConfigCard } from "@/components/admin/config-card"

async function handleUnsubscribe() {
  "use server"
  const result = await getSubscription()
  const subscription = result.success ? result.data : null
  if (!subscription?.email) return
  await unsubscribe(subscription.email)
}

export default async function MailingListPage() {
  // Check if required environment variables are configured
  const missingEnvVars = [
    {
      key: "SENDGRID_API_KEY",
      description: "Your SendGrid API key",
      isMissing: !process.env.SENDGRID_API_KEY,
    },
  ].filter((item) => item.isMissing)

  if (missingEnvVars.length > 0) {
    return (
      <div className="container max-w-2xl py-8 md:py-12">
        <ConfigCard title="Mailing List Setup Required" description="The mailing list feature needs configuration before it can be used." configItems={missingEnvVars} />
      </div>
    )
  }

  const result = await getSubscription()
  const subscription = result.success ? result.data : null

  return (
    <div className="container relative">
      <div className="mx-auto flex max-w-[980px] flex-col items-center gap-8 py-8 md:py-12">
        <Heading variant="h2" className="text-center leading-tight">
          {subscription ? (
            <>
              {subscription.unsubscribedAt ? (
                <>
                  <span className="text-primary">Unsubscribed</span> <span className="text-muted-foreground">from our mailing list.</span>
                </>
              ) : (
                <>
                  <span className="text-primary">Subscribed</span> <span className="text-muted-foreground">to our mailing list.</span>
                </>
              )}
            </>
          ) : (
            <>
              Join the <span className="text-primary">Mailing List</span>
            </>
          )}
        </Heading>

        {subscription ? (
          <Card className="w-full max-w-[500px] p-4 md:p-8 md:mt-4">
            <CardHeader className="md:pt-4">
              <CardTitle>Subscription Status</CardTitle>
            </CardHeader>
            <CardContent className="md:pb-4">
              {subscription.unsubscribedAt ? (
                <div className="space-y-4">
                  <p>You are currently unsubscribed. Your previous email was {subscription.email}.</p>
                  <MailingListForm initialEmail={subscription.email} />
                </div>
              ) : (
                <div className="space-y-4">
                  <p>You are currently subscribed with {subscription.email}.</p>
                  <form action={handleUnsubscribe}>
                    <Button variant="destructive" type="submit">
                      Unsubscribe
                    </Button>
                  </form>
                </div>
              )}
            </CardContent>
          </Card>
        ) : (
          <MailingListForm />
        )}
      </div>
    </div>
  )
}


--- File: app/page.tsx ---

import { Icon } from "@/components/graphics/icon"
import { HeroSection } from "@/components/home/hero-section"
import { ContentSection } from "@/components/home/content-section"
import { siteConfig } from "@/lib/config"
import Image from "next/image"

export default async function HomePage() {
  return (
    <div className="flex min-h-screen flex-col bg-violet-100/10">
      <HeroSection title={siteConfig.title} />
      <div className="w-full flex justify-center -mt-6">
        <div className="w-12 h-12 flex items-center justify-center rounded-full bg-purple-50 border-4 border-primary/20 ring-8 ring-primary/50 scale-150">
          <div className="scale-125 opacity-80">{siteConfig.logo ? <Image src={siteConfig.logo} alt={siteConfig.title + " logo"} width={32} height={32} /> : <Icon />}</div>
        </div>
      </div>
      <ContentSection />
    </div>
  )
}


--- File: app/pay/page.tsx ---

"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Heading } from "@/components/typography/heading"
import { SignInButton, useUser } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"
import { LogIn, Coffee } from "lucide-react"
import { StripePaymentForm } from "@/components/checkout/stripe-payment-form"

export default function DonatePage() {
  const { isSignedIn, isLoaded, user } = useUser()
  const [clientSecret, setClientSecret] = useState<string>("")
  const [isLoading, setIsLoading] = useState(false)
  const [showSuccess, setShowSuccess] = useState(false)

  const handleDonate = async () => {
    try {
      setIsLoading(true)
      const response = await fetch("/api/pay/intent", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          amount: 500, // $5.00
        }),
      })
      const data = await response.json()
      setClientSecret(data.clientSecret)
    } catch (error) {
      console.error("Error creating payment intent:", error)
    } finally {
      setIsLoading(false)
    }
  }

  const handleSuccess = () => {
    setShowSuccess(true)
    setClientSecret("")
  }

  if (!isLoaded) {
    return null
  }

  return (
    <div className="container py-8 md:py-12">
      <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
        <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">Support the Project</span>
        <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
          Buy me a <span className="text-primary">Coffee</span>
        </Heading>
        <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">If you find this project helpful, consider supporting its development with a small donation.</p>
      </div>

      <div className="mx-auto max-w-md mt-12">
        <Card className="p-6">
          {!isSignedIn ? (
            <div className="py-12 text-center space-y-4">
              <div className="flex justify-center mb-4">
                <div className="p-3 rounded-full bg-primary/10">
                  <LogIn className="w-6 h-6 text-primary" />
                </div>
              </div>
              <h3 className="text-lg font-medium">Sign in to Donate</h3>
              <p className="text-sm text-muted-foreground mb-6">You need to be signed in to make a donation.</p>
              <SignInButton mode="modal">
                <Button size="lg">Sign in to Continue</Button>
              </SignInButton>
            </div>
          ) : showSuccess ? (
            <div className="py-12 text-center space-y-4">
              <div className="flex justify-center mb-4">
                <div className="p-3 rounded-full bg-green-500/10">
                  <Coffee className="w-6 h-6 text-green-500" />
                </div>
              </div>
              <h3 className="text-lg font-medium">Thank You!</h3>
              <p className="text-sm text-muted-foreground text-balance">Your support is greatly appreciated. Thank you for your donation!</p>
            </div>
          ) : clientSecret ? (
            <div className="space-y-6">
              <StripePaymentForm clientSecret={clientSecret} quantity={1} userId={user.id} onSuccess={handleSuccess} discountCode="" />
            </div>
          ) : (
            <div className="space-y-6">
              <div className="flex justify-center mb-8">
                <div className="p-4 rounded-full bg-primary/10">
                  <Coffee className="w-8 h-8 text-primary" />
                </div>
              </div>
              <div className="text-center space-y-2 mb-6">
                <h3 className="text-lg font-medium">Buy me a coffee</h3>
                <p className="text-sm text-muted-foreground">Support this project with a $5 donation</p>
              </div>
              <Button onClick={handleDonate} disabled={isLoading} className="w-full" size="lg">
                {isLoading ? "Loading..." : "Donate $5"}
              </Button>
            </div>
          )}
        </Card>
      </div>
    </div>
  )
}


--- File: app/privacy/page.tsx ---

import { Heading } from "@/components/typography/heading"

export default function PrivacyPage() {
  return (
    <div className="container py-12">
      <div className="mx-auto max-w-4xl">
        <div className="mb-12 text-center">
          <Heading variant="h1" className="mb-8">
            Privacy Policy
          </Heading>
        </div>

        <p className="text-gray-700 mb-6">Put your privacy policy here.</p>
      </div>
    </div>
  )
}


--- File: app/providers.tsx ---

"use client"

import { ClerkProvider } from "@clerk/nextjs"
import { ConvexProvider, ConvexReactClient } from "convex/react"
import { PropsWithChildren } from "react"

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!)

export function Providers({ children }: PropsWithChildren) {
  return (
    <ClerkProvider>
      <ConvexProvider client={convex}>{children}</ConvexProvider>
    </ClerkProvider>
  )
}


--- File: app/roadmap/data/featureRequests.json ---

[]


--- File: app/roadmap/data/features.json ---

[
  {
    "id": "1",
    "title": "Feature Roadmap",
    "votes": 42,
    "status": "completed",
    "description": "Add a feature roadmap page"
  },
  {
    "id": "3",
    "title": "API integration",
    "votes": 28,
    "status": "planned",
    "description": "Support for third-party API integrations"
  },
  {
    "id": "4",
    "title": "User authentication",
    "votes": 24,
    "status": "completed",
    "description": "Secure login and authentication system"
  },
  {
    "id": "5",
    "title": "Better analytics",
    "votes": 18,
    "status": "planned",
    "description": "Improve the analytics dashboard to provide more insights"
  },
  {
    "id": "6",
    "title": "Mailing List",
    "votes": 15,
    "status": "completed",
    "description": "Allow users to create and manage mailing lists"
  },
  {
    "id": "7",
    "title": "Switch to Convex",
    "votes": 32,
    "status": "completed",
    "description": "Switch to Convex for better DX and support for more projects on the free tier"
  },
  {
    "id": "8",
    "title": "Realtime updates",
    "votes": 19,
    "status": "backlog",
    "description": "Integrate with realtime service"
  },
  {
    "id": "9",
    "title": "Custom themes",
    "votes": 22,
    "status": "backlog",
    "description": "Allow users to more easily customize the application theme"
  },
  {
    "id": "10",
    "title": "Better documentation",
    "votes": 12,
    "status": "in-progress",
    "description": "Improve the documentation getting started quickly on new projects"
  }
]


--- File: app/roadmap/page.tsx ---

import { RoadmapView, type Feature, type FeatureRequest } from "@/components/admin/roadmap-view"
import initialFeatures from "./data/features.json"
import initialRequests from "./data/featureRequests.json"

export default function RoadmapPage() {
  const features = initialFeatures as Feature[]
  const featureRequests = initialRequests as FeatureRequest[]

  return <RoadmapView features={features} featureRequests={featureRequests} />
}


--- File: app/terms/page.tsx ---

import { Heading } from "@/components/typography/heading"

export default function TermsPage() {
  return (
    <div className="container py-12">
      <div className="mx-auto max-w-4xl">
        <div className="mb-12 text-center">
          <Heading variant="h1" className="mb-8">
            Terms of Service
          </Heading>
        </div>

        <p className="text-gray-700 mb-6">Put your terms of service here.</p>
      </div>
    </div>
  )
}


--- File: app/unsubscribe/page.tsx ---

import { Heading } from "@/components/typography/heading"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import UnsubscribeForm from "./unsubscribe-form"

export default function UnsubscribePage() {
  return (
    <div className="container max-w-md py-12 flex flex-col items-center justify-center min-h-[60vh]">
      <Card className="w-full">
        <CardHeader>
          <CardTitle>
            <Heading variant="h2" className="text-center">
              Unsubscribe from Mailing List
            </Heading>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <UnsubscribeForm />
        </CardContent>
      </Card>
    </div>
  )
}


--- File: app/unsubscribe/unsubscribe-form.tsx ---

"use client"

import { useState } from "react"
import { unsubscribe } from "@/app/_actions/mailing-list"
import { Button } from "@/components/ui/button"

export default function UnsubscribeForm() {
  const [email, setEmail] = useState("")
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle")
  const [error, setError] = useState<string | null>(null)

  async function handleUnsubscribe(e: React.FormEvent) {
    e.preventDefault()
    setStatus("idle")
    setError(null)
    try {
      const result = await unsubscribe(email)
      if (result.success) {
        setStatus("success")
      } else {
        setStatus("error")
        setError(result.error || "Could not unsubscribe. Please check your email.")
      }
    } catch (err: unknown) {
      setStatus("error")
      setError(err instanceof Error ? err.message : "Could not unsubscribe. Please try again.")
    }
  }

  return (
    <>
      {status === "success" ? (
        <div className="text-center text-green-600 font-semibold py-6">You have been unsubscribed from our mailing list.</div>
      ) : (
        <form onSubmit={handleUnsubscribe} className="space-y-6">
          <div>
            <label htmlFor="email" className="block mb-2 font-medium">
              Email address
            </label>
            <input id="email" type="email" className="w-full border rounded px-3 py-2" value={email} onChange={(e) => setEmail(e.target.value)} required autoFocus />
          </div>
          <Button type="submit" className="w-full" size="lg" variant="destructive">
            Unsubscribe
          </Button>
          {status === "error" && <div className="text-red-600 text-sm text-center mt-2">{error}</div>}
        </form>
      )}
    </>
  )
}


--- File: components/admin/admin-config-message.tsx ---

"use client"

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useUser } from "@clerk/nextjs"
import { Copy, ShieldUser } from "lucide-react"
import { toast } from "sonner"

export function AdminConfigMessage() {
  const { user } = useUser()

  const handleCopyId = () => {
    if (user?.id) {
      navigator.clipboard.writeText(user.id)
      toast.success("User ID copied to clipboard!")
    }
  }

  return (
    <Card className="p-6">
      <div className="space-y-4">
        <div className="flex justify-center mb-4">
          <div className="p-2 rounded-full bg-amber-500/10">
            <ShieldUser className="w-8 h-8 text-amber-600" />
          </div>
        </div>
        <h3 className="text-lg font-medium text-center">Configure Admin Access</h3>
        <p className="text-sm text-muted-foreground text-center text-balance">
          To access admin features, you need to add your Clerk User ID to the <code className="px-1.5 py-0.5 rounded-md bg-muted">ADMIN_USER_IDS</code> environment variable.
        </p>
        <div className="p-4 rounded-lg bg-muted space-y-4">
          <div className="space-y-2">
            <p className="text-sm font-medium">Your Clerk User ID:</p>
            <div className="flex items-center gap-2">
              <code className="flex-1 px-3 py-2 rounded bg-background">{user?.id || "Not signed in"}</code>
              <Button size="icon" variant="outline" onClick={handleCopyId} disabled={!user?.id}>
                <Copy className="h-4 w-4" />
              </Button>
            </div>
          </div>
          <div className="space-y-2">
            <p className="text-sm font-medium">Add to your .env file:</p>
            <code className="block px-3 py-2 rounded bg-background text-sm">ADMIN_USER_IDS={user?.id || "your_user_id"}</code>
          </div>
        </div>
        <p className="text-xs text-muted-foreground text-center">After updating your .env file, restart your development server for changes to take effect.</p>
      </div>
    </Card>
  )
}


--- File: components/admin/config-card.tsx ---

import { AlertCircle, CheckCircle, XCircle } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

interface ConfigItem {
  key: string
  description: string
  isMissing?: boolean
}

interface FileToRemove {
  path: string
  description?: string
}

interface ConfigCardProps {
  title: string
  description: string
  configItems: ConfigItem[]
  filesToRemove?: FileToRemove[]
  alternativeTitle?: string
  alternativeDescription?: string
}

export function ConfigCard({
  title,
  description,
  configItems,
  filesToRemove,
  alternativeTitle = "Alternative option",
  alternativeDescription = "If you don't plan to use this feature, you can remove the following files:",
}: ConfigCardProps) {
  return (
    <Card className="w-full max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle className="text-xl text-primary">{title}</CardTitle>
        <CardDescription className="text-primary/80">{description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">
            To enable this functionality, you need to configure the following environment variables in your <code className="bg-muted px-1 py-0.5 rounded text-sm font-mono">.env</code> file:
          </p>

          <div className="space-y-3 mt-4">
            {configItems.map((item) => (
              <div key={item.key} className="grid grid-cols-2 gap-2 items-start">
                <div className="flex items-center gap-2">
                  {item.isMissing ? <XCircle className="h-4 w-4 text-destructive" /> : <CheckCircle className="h-4 w-4 text-green-500" />}
                  <code className={`font-semibold py-1 rounded text-xs font-mono ${item.isMissing ? "text-destructive" : "text-green-500"}`}>{item.key}</code>
                </div>
                <p className="text-sm">{item.description}</p>
              </div>
            ))}
          </div>
        </div>

        {filesToRemove && filesToRemove.length > 0 && (
          <Alert className="border-primary/20 bg-primary/5">
            <AlertCircle className="h-4 w-4 text-primary" />
            <AlertTitle className="text-primary">{alternativeTitle}</AlertTitle>
            <AlertDescription className="text-primary/80">
              {alternativeDescription}
              <ul className="list-disc pl-5 mt-2 space-y-1">
                {filesToRemove.map((file) => (
                  <li key={file.path} className="text-sm">
                    <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{file.path}</code>
                    {file.description && <span className="text-primary/70 ml-2">- {file.description}</span>}
                  </li>
                ))}
              </ul>
            </AlertDescription>
          </Alert>
        )}
      </CardContent>
    </Card>
  )
}


--- File: components/admin/dev-env-notice.tsx ---

import { Card, CardContent } from "@/components/ui/card"
import { Heading } from "../typography/heading"

export function DevEnvNotice() {
  return (
    <Card className="mb-8 bg-blue-500/5 border-blue-500/20">
      <CardContent>
        <div className="flex items-start gap-4">
          <div className="space-y-4 text-balance">
            <Heading variant="h5" className="font-medium">
              Development Environment
            </Heading>
            <p className="text-sm text-muted-foreground">
              You are running this application in a local development environment. The <code className="px-1.5 py-0.5 rounded-md bg-muted">ADMIN_USER_IDS</code> environment variable is currently set
              to:
            </p>
            <div className="mt-2">
              <code className="block w-full px-3 py-2 text-sm bg-muted rounded-md">{process.env.ADMIN_USER_IDS || "Not configured"}</code>
            </div>
            <p className="text-sm text-muted-foreground mt-2">
              To add more admin users, update this variable in your <code className="px-1 py-0.5 rounded-md bg-muted">.env</code> file with a comma-separated list of Clerk user IDs.
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}


--- File: components/admin/mailing-list/mailing-list-subscriber-table.tsx ---

"use client"

import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Id } from "@/convex/_generated/dataModel"
import { formatDate } from "@/lib/utils"

type Subscriber = {
  id: Id<"mailing_list_subscriptions">
  userId: string
  email: string
  name: string | null
  preferences: {
    marketing: boolean
    updates: boolean
  }
  subscribedAt: string
  unsubscribedAt: string | null
  createdAt: string
  updatedAt: string
}

interface MailingListSubscriberTableProps {
  subscribers: Subscriber[]
}

export function MailingListSubscriberTable({ subscribers }: MailingListSubscriberTableProps) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Email</TableHead>
          <TableHead>Name</TableHead>
          <TableHead>Subscribed</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Preferences</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {subscribers.map((subscriber) => {
          return (
            <TableRow key={subscriber.id}>
              <TableCell>{subscriber.email}</TableCell>
              <TableCell>{subscriber.name || "-"}</TableCell>
              <TableCell>{formatDate(subscriber.subscribedAt)}</TableCell>
              <TableCell>{subscriber.unsubscribedAt ? <Badge variant="destructive">Unsubscribed</Badge> : <Badge variant="default">Active</Badge>}</TableCell>
              <TableCell>
                <div className="flex gap-2">
                  {subscriber.preferences.marketing && <Badge variant="outline">Marketing</Badge>}
                  {subscriber.preferences.updates && <Badge variant="outline">Updates</Badge>}
                </div>
              </TableCell>
            </TableRow>
          )
        })}
      </TableBody>
    </Table>
  )
}


--- File: components/admin/roadmap-view.tsx ---

"use client"

import { useState } from "react"
import { ChevronDown, ChevronUp, ArrowRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Heading } from "@/components/typography/heading"

export type Feature = {
  id: string
  title: string
  votes: number // Keeping this in the type for data compatibility
  status: "backlog" | "planned" | "in-progress" | "completed"
  description?: string
}

export type FeatureRequest = {
  id: string
  title: string
  votes: number // Keeping this in the type for data compatibility
  description?: string
}

interface RoadmapViewProps {
  features: Feature[]
  featureRequests: FeatureRequest[]
}

export function RoadmapView({ features, featureRequests }: RoadmapViewProps) {
  const [expanded, setExpanded] = useState<Record<string, boolean>>({
    backlog: false,
    planned: false,
    "in-progress": false,
    completed: false,
  })

  // Group features by status
  const backlogFeatures = features.filter((f) => f.status === "backlog").sort((a, b) => b.votes - a.votes)
  const plannedFeatures = features.filter((f) => f.status === "planned").sort((a, b) => b.votes - a.votes)
  const inProgressFeatures = features.filter((f) => f.status === "in-progress").sort((a, b) => b.votes - a.votes)
  const completedFeatures = features.filter((f) => f.status === "completed").sort((a, b) => b.votes - a.votes)

  // Sort feature requests by votes
  const sortedRequests = [...featureRequests].sort((a, b) => b.votes - a.votes)

  const toggleExpand = (section: string) => {
    setExpanded((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

  // Function to limit and display cards
  const renderFeatureCards = (featureList: Feature[], status: string) => {
    const isExpanded = expanded[status]
    const displayedFeatures = isExpanded ? featureList : featureList.slice(0, 4)
    const hasMore = featureList.length > 4

    return (
      <>
        <div className="space-y-3">
          {displayedFeatures.map((feature) => (
            <Card key={feature.id} className="gap-2">
              <CardHeader>
                <CardTitle className="font-bold">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>{feature.description && <p className="text-xs text-muted-foreground">{feature.description}</p>}</CardContent>
            </Card>
          ))}
        </div>
        {hasMore && (
          <Button variant="ghost" size="sm" className="w-full mt-2 text-xs" onClick={() => toggleExpand(status)}>
            {isExpanded ? (
              <>
                Show Less <ChevronUp className="ml-1 h-3 w-3" />
              </>
            ) : (
              <>
                Show More ({featureList.length - 4} more) <ChevronDown className="ml-1 h-3 w-3" />
              </>
            )}
          </Button>
        )}
      </>
    )
  }

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="container max-w-7xl mx-auto">
        <div className="text-center mb-8 space-y-2">
          <Heading variant="h2">Product Roadmap</Heading>
          <p className="text-muted-foreground">See what features are coming next and share your ideas</p>
        </div>

        <div className="mb-8">
          <div className="grid md:grid-cols-2 lg:grid-cols-4 p-4 gap-6">
            <div>
              <div className="font-medium text-lg mb-2 flex items-center gap-2">
                Backlog{" "}
                <Badge variant="outline" className="bg-gray-100 text-gray-700 hover:bg-gray-100 border-gray-200">
                  {backlogFeatures.length}
                </Badge>
              </div>
              {renderFeatureCards(backlogFeatures, "backlog")}
            </div>

            <div>
              <div className="font-medium text-lg mb-2 flex items-center gap-2">
                Up Next{" "}
                <Badge variant="outline" className="bg-amber-100 text-amber-700 hover:bg-amber-100 border-amber-200">
                  {plannedFeatures.length}
                </Badge>
              </div>
              {renderFeatureCards(plannedFeatures, "planned")}
            </div>

            <div>
              <div className="font-medium text-lg mb-2 flex items-center gap-2">
                In Progress{" "}
                <Badge variant="secondary" className="bg-sky-100 text-sky-700 hover:bg-sky-100 border-sky-200">
                  {inProgressFeatures.length}
                </Badge>
              </div>
              {renderFeatureCards(inProgressFeatures, "in-progress")}
            </div>

            <div>
              <div className="font-medium text-lg mb-2 flex items-center gap-2">
                Completed <Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100 border-emerald-200">{completedFeatures.length}</Badge>
              </div>
              {renderFeatureCards(completedFeatures, "completed")}
            </div>
          </div>
        </div>

        <div className="grid gap-8 md:grid-cols-[2fr_1fr] container border-t-2 border-dashed border-primary/50 pt-12">
          <Card>
            <CardHeader>
              <CardTitle>Feature Ideas</CardTitle>
              <CardDescription>Community suggestions that may be added to the roadmap.</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {sortedRequests.map((request) => (
                  <div key={request.id} className="flex items-start gap-4 p-3 rounded-lg border">
                    <div className="flex-1 space-y-1">
                      <div className="flex items-center gap-2">
                        <span className="font-medium">{request.title}</span>
                        <Badge variant="outline" className="bg-foreground/10 text-foreground">
                          Idea
                        </Badge>
                      </div>
                      {request.description && <p className="text-sm text-muted-foreground">{request.description}</p>}
                    </div>
                  </div>
                ))}
                {featureRequests.length === 0 && (
                  <p className="text-sm text-muted-foreground border border-dashed border-foreground/10 rounded-md px-4 py-12 justify-center items-center flex">
                    No feature requests yet. Be the first to suggest a feature!
                  </p>
                )}
              </div>
            </CardContent>
          </Card>

          <div className="space-y-8">
            <Card>
              <CardHeader>
                <CardTitle>Suggest a Feature</CardTitle>
                <CardDescription>What would you like to see in our product?</CardDescription>
              </CardHeader>
              <CardContent>
                <Button asChild className="w-full">
                  <a href="/contact">
                    Suggest a Feature <ArrowRight className="ml-2 h-4 w-4" />
                  </a>
                </Button>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>Get Updates</CardTitle>
                <CardDescription>Subscribe to be notified when features are released</CardDescription>
              </CardHeader>
              <CardContent>
                <Button asChild className="w-full">
                  <a href="/subscribe">
                    Subscribe to Updates <ArrowRight className="ml-2 h-4 w-4" />
                  </a>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}


--- File: components/admin/user-list.tsx ---

"use client"

import * as React from "react"
import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { banUser } from "@/app/_actions/ban-user"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { toast } from "sonner"

interface User {
  id: string
  email: string | undefined
  username: string | null
  firstName: string | null
  lastName: string | null
  imageUrl: string
  createdAt: string
  isAdmin: boolean
  banned: boolean
  publicMetadata?: {
    banReason?: string
  }
}

interface AdminUserListProps {
  initialUsers: User[]
}

export function AdminUserList({ initialUsers }: AdminUserListProps) {
  const [users, setUsers] = useState<User[]>(initialUsers)
  const [showBanDialog, setShowBanDialog] = useState(false)
  const [selectedUser, setSelectedUser] = useState<User | null>(null)
  const [banReason, setBanReason] = useState("")
  const [isLoading, setIsLoading] = useState(false)

  const handleBanClick = (user: User) => {
    setSelectedUser(user)
    setShowBanDialog(true)
  }

  const handleBanConfirm = async () => {
    if (!selectedUser) return

    setIsLoading(true)
    try {
      const result = await banUser(selectedUser.id, banReason)

      if (result.success) {
        // Update the local users state
        setUsers(
          users.map((user) => {
            if (user.id === selectedUser.id) {
              return {
                ...user,
                banned: !user.banned,
                publicMetadata: {
                  ...user.publicMetadata,
                  banReason: !user.banned ? banReason : undefined,
                },
              }
            }
            return user
          })
        )

        toast.success(selectedUser.banned ? "User unbanned successfully" : "User banned successfully")
        setShowBanDialog(false)
        setBanReason("")
        setSelectedUser(null)
      } else {
        toast.error("Failed to manage user ban status: " + result.error)
      }
    } catch {
      toast.error("An error occurred while managing user ban status")
    } finally {
      setIsLoading(false)
    }
  }

  const formatDate = (date: string | null) => {
    if (!date) return "Never"
    return new Date(date).toLocaleDateString()
  }

  return (
    <>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-[30px]"></TableHead>
              <TableHead>User</TableHead>
              <TableHead>Email</TableHead>
              <TableHead>Username</TableHead>
              <TableHead>Joined</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.map((user) => (
              <React.Fragment key={user.id}>
                <TableRow>
                  <TableCell>{/* Placeholder for user action button */}</TableCell>
                  <TableCell className="flex items-center gap-2">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={user.imageUrl} alt={user.username || ""} />
                      <AvatarFallback>
                        {user.firstName?.[0]}
                        {user.lastName?.[0]}
                      </AvatarFallback>
                    </Avatar>
                    <span>
                      {user.firstName} {user.lastName}
                    </span>
                  </TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.username}</TableCell>
                  <TableCell>{formatDate(user.createdAt)}</TableCell>
                  <TableCell>{user.isAdmin ? <Badge>Admin</Badge> : user.banned ? <Badge variant="destructive">Banned</Badge> : <Badge variant="secondary">User</Badge>}</TableCell>
                  <TableCell>
                    {!user.isAdmin && (
                      <Button variant={user.banned ? "outline" : "destructive"} size="sm" onClick={() => handleBanClick(user)} disabled={isLoading}>
                        {user.banned ? "Unban User" : "Ban User"}
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              </React.Fragment>
            ))}
          </TableBody>
        </Table>
      </div>

      <AlertDialog open={showBanDialog} onOpenChange={setShowBanDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{selectedUser?.banned ? "Unban User" : "Ban User"}</AlertDialogTitle>
            <AlertDialogDescription>
              {selectedUser?.banned ? (
                <>
                  Are you sure you want to unban {selectedUser?.firstName} {selectedUser?.lastName}?
                </>
              ) : (
                <>
                  Are you sure you want to ban {selectedUser?.firstName} {selectedUser?.lastName}? This action can be undone later.
                </>
              )}
            </AlertDialogDescription>
          </AlertDialogHeader>
          {!selectedUser?.banned && (
            <div className="py-4">
              <Label htmlFor="reason">Reason for ban (optional)</Label>
              <Input id="reason" value={banReason} onChange={(e) => setBanReason(e.target.value)} placeholder="Enter reason for ban" />
            </div>
          )}
          <AlertDialogFooter>
            <AlertDialogCancel
              onClick={() => {
                setShowBanDialog(false)
                setBanReason("")
                setSelectedUser(null)
              }}
            >
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction onClick={handleBanConfirm} disabled={isLoading}>
              {selectedUser?.banned ? "Unban User" : "Ban User"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}


--- File: components/analytics/route-tracker.tsx ---

"use client"

import { usePathname } from "next/navigation"
import { useEffect, useRef } from "react"
import { trackVisit } from "@/app/_actions/track-visit"

export function RouteTracker() {
  const pathname = usePathname()
  const isFirstMount = useRef(true)

  useEffect(() => {
    // Don't track the initial page load since that's handled by the server component
    if (isFirstMount.current) {
      isFirstMount.current = false
      return
    }

    // Track subsequent route changes
    trackVisit(pathname)
  }, [pathname])

  return null // This is a utility component that doesn't render anything
}


--- File: components/checkout/stripe-payment-form.tsx ---

"use client"

import { useState } from "react"
import { loadStripe } from "@stripe/stripe-js"
import { PaymentElement, Elements, useStripe, useElements } from "@stripe/react-stripe-js"
import { Button } from "@/components/ui/button"

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)

interface PaymentFormProps {
  quantity: number
  userId: string
  onSuccess?: () => void
  discountCode: string
}

function PaymentForm({ quantity, userId, onSuccess, discountCode }: PaymentFormProps) {
  const stripe = useStripe()
  const elements = useElements()
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!stripe || !elements || loading) return

    setLoading(true)

    try {
      const { error, paymentIntent } = await stripe.confirmPayment({
        elements,
        redirect: "if_required",
      })

      if (error) {
        console.error("Payment error:", error)
        return
      }

      if (paymentIntent.status === "succeeded") {
        await fetch("/api/credits/add", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            paymentIntentId: paymentIntent.id,
            userId,
            quantity,
            discountCode,
          }),
        })

        onSuccess?.()
      }
    } catch (error) {
      console.error("Payment processing error:", error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="max-h-[400px] overflow-y-auto pr-2">
        <PaymentElement />
      </div>
      <Button type="submit" disabled={!stripe || loading} className="w-full mt-4">
        {loading ? "Processing..." : "Pay Now"}
      </Button>
    </form>
  )
}

interface StripePaymentFormProps extends PaymentFormProps {
  clientSecret: string
}

export function StripePaymentForm({ clientSecret, quantity, userId, onSuccess, discountCode }: StripePaymentFormProps) {
  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <PaymentForm quantity={quantity} userId={userId} onSuccess={onSuccess} discountCode={discountCode} />
    </Elements>
  )
}


--- File: components/contact/contact-dialog.tsx ---

"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { ContactForm } from "./contact-form"

interface ContactDialogProps {
  trigger: React.ReactNode
  subject?: string
}

export function ContactDialog({ trigger, subject }: ContactDialogProps) {
  const [open, setOpen] = useState(false)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Contact Us</DialogTitle>
          <DialogDescription>Send us a message and we&apos;ll get back to you as soon as possible.</DialogDescription>
        </DialogHeader>
        <ContactForm subject={subject} onSuccess={() => setOpen(false)} />
      </DialogContent>
    </Dialog>
  )
}


--- File: components/contact/contact-form.tsx ---

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "sonner"
import { sendContactEmail } from "@/app/_actions/contact"
import { useTheme } from "next-themes"
import ReCAPTCHA from "react-google-recaptcha"

interface ContactFormProps {
  subject?: string
  onSuccess?: () => void
  requireCaptcha?: boolean
}

export function ContactForm({ subject = "Contact Message", onSuccess, requireCaptcha = false }: ContactFormProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [captchaToken, setCaptchaToken] = useState<string | null>(null)
  const { theme } = useTheme()

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsLoading(true)

    const formData = new FormData(event.currentTarget)
    const data = {
      name: formData.get("name") as string,
      email: formData.get("email") as string,
      message: formData.get("message") as string,
      subject,
      ...(requireCaptcha && captchaToken && { captchaToken }),
    }

    try {
      if (requireCaptcha && !captchaToken) {
        throw new Error("Please complete the reCAPTCHA verification")
      }

      const result = await sendContactEmail(data)

      if (result.success) {
        toast.success("Message sent", {
          description: "We'll get back to you as soon as possible.",
        })
        onSuccess?.()
        // Reset form
        event.currentTarget.reset()
        setCaptchaToken(null)
      } else {
        throw new Error(result.error)
      }
    } catch (err) {
      const error = err as Error
      toast.error("Error", {
        description: error.message || "There was a problem sending your message. Please try again.",
      })
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <div className="grid gap-4">
        <div className="grid gap-2">
          <Label htmlFor="name">Name</Label>
          <Input id="name" name="name" placeholder="Your name" required />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" name="email" type="email" placeholder="your@email.com" required />
        </div>
        <div className="grid gap-2">
          <Label htmlFor="message">Message</Label>
          <Textarea id="message" name="message" placeholder="Your message" required />
        </div>
        {requireCaptcha && (
          <div className="w-full">
            <ReCAPTCHA sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY || ""} theme={theme === "dark" ? "dark" : "light"} onChange={(value) => setCaptchaToken(value)} />
          </div>
        )}
      </div>
      <div className="mt-4 flex justify-end">
        <Button type="submit" disabled={isLoading || (requireCaptcha && !captchaToken)}>
          {isLoading ? "Sending..." : "Send Message"}
        </Button>
      </div>
    </form>
  )
}


--- File: components/demo/ai-demo-client.tsx ---

"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useGenerateText } from "@/app/_hooks/useGenerateText"
import { useGenerateStrings } from "@/app/_hooks/useGenerateStrings"
import { useGenerateObject } from "@/app/_hooks/useGenerateObject"
import { useGenerateImage } from "@/app/_hooks/useGenerateImage"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import Image from "next/image"

export function AIDemoClient({ isMissingReplicateToken }: { isMissingReplicateToken: boolean }) {
  const [generatedText, setGeneratedText] = useState("")
  const [generatedStrings, setGeneratedStrings] = useState<string[]>([])
  const [isGenerating, setIsGenerating] = useState(false)
  const { streamText } = useGenerateText()
  const { generate: generateStrings } = useGenerateStrings()
  const { generate: generateObject, object: generatedObject, isLoading: isGeneratingObject } = useGenerateObject()
  const { generate: generateImage, imageUrl, isLoading: isGeneratingImage, error: imageError } = useGenerateImage()

  const handleGenerateText = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const prompt = formData.get("prompt") as string

    if (!prompt) return

    setIsGenerating(true)
    try {
      await streamText(prompt, (output: string) => {
        setGeneratedText(output)
      })
    } catch (error) {
      console.error("Error generating text:", error)
    } finally {
      setIsGenerating(false)
    }
  }

  const handleGenerateStrings = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const prompt = formData.get("prompt") as string
    const count = Number(formData.get("count")) || 6

    if (!prompt) return

    setIsGenerating(true)
    try {
      const strings = await generateStrings(prompt, count)
      setGeneratedStrings(strings)
    } catch (error) {
      console.error("Error generating strings:", error)
    } finally {
      setIsGenerating(false)
    }
  }

  const handleGenerateObject = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const prompt = formData.get("prompt") as string

    if (!prompt) return

    await generateObject(prompt)
  }

  const handleGenerateImage = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const prompt = formData.get("prompt") as string

    if (!prompt) return

    await generateImage(prompt)
  }

  return (
    <Tabs defaultValue="text" className="space-y-8">
      <TabsList className="grid w-full grid-cols-4">
        <TabsTrigger value="text">Text</TabsTrigger>
        <TabsTrigger value="strings">String Array</TabsTrigger>
        <TabsTrigger value="object">Structured Data</TabsTrigger>
        <TabsTrigger value="image">Image</TabsTrigger>
      </TabsList>

      <TabsContent value="text" className="space-y-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex justify-between items-center">
              <div>Text Generation</div>
              <div className="font-mono text-sm font-normal text-primary">useGenerateText()</div>
            </CardTitle>
            <CardDescription>Enter a prompt and the AI will generate text based on your input.</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleGenerateText} className="space-y-4">
              <Textarea name="prompt" placeholder="Enter your prompt here..." className="min-h-[100px]" />
              <Button type="submit" className="w-full" disabled={isGenerating}>
                {isGenerating ? "Generating..." : "Generate Text"}
              </Button>
            </form>
          </CardContent>
        </Card>

        {generatedText && (
          <Card>
            <CardHeader>
              <CardTitle>Generated Text</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="whitespace-pre-wrap">{generatedText}</div>
            </CardContent>
          </Card>
        )}
      </TabsContent>

      <TabsContent value="strings" className="space-y-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex justify-between items-center">
              <div>String Array Generation</div>
              <div className="font-mono text-sm font-normal text-primary">useGenerateStrings()</div>
            </CardTitle>
            <CardDescription>Generate multiple strings based on your prompt. Useful for brainstorming names, titles, or ideas.</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleGenerateStrings} className="space-y-4">
              <Textarea name="prompt" placeholder="Enter your prompt here..." className="min-h-[100px]" />
              <div className="flex items-center gap-4">
                <Input type="number" name="count" defaultValue="6" min="1" max="20" className="w-24" />
                <span className="text-sm text-muted-foreground">Number of strings to generate</span>
              </div>
              <Button type="submit" className="w-full" disabled={isGenerating}>
                {isGenerating ? "Generating..." : "Generate Strings"}
              </Button>
            </form>
          </CardContent>
        </Card>

        {generatedStrings.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Generated Strings</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="list-disc pl-6 space-y-2">
                {generatedStrings.map((string, index) => (
                  <li key={index}>{string}</li>
                ))}
              </ul>
            </CardContent>
          </Card>
        )}
      </TabsContent>

      <TabsContent value="object" className="space-y-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex justify-between items-center">
              <div>Structured Data Generation</div>
              <div className="font-mono text-sm font-normal text-primary">useGenerateObject()</div>
            </CardTitle>
            <CardDescription>Generate structured data about a person. The AI will create a profile with name, age, occupation, interests, and contact information.</CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleGenerateObject} className="space-y-4">
              <Textarea name="prompt" placeholder="Describe the person you want to generate data for..." className="min-h-[100px]" />
              <Button type="submit" className="w-full" disabled={isGeneratingObject}>
                {isGeneratingObject ? "Generating..." : "Generate Profile"}
              </Button>
            </form>
          </CardContent>
        </Card>

        {generatedObject && (
          <Card>
            <CardHeader>
              <CardTitle>Generated Profile</CardTitle>
            </CardHeader>
            <CardContent>
              <dl className="space-y-4">
                <div>
                  <dt className="font-semibold">Name</dt>
                  <dd>{generatedObject.name}</dd>
                </div>
                <div>
                  <dt className="font-semibold">Age</dt>
                  <dd>{generatedObject.age}</dd>
                </div>
                <div>
                  <dt className="font-semibold">Occupation</dt>
                  <dd>{generatedObject.occupation}</dd>
                </div>
                {generatedObject.interests && (
                  <div>
                    <dt className="font-semibold">Interests</dt>
                    <dd>
                      <ul className="list-disc pl-6">
                        {generatedObject.interests.map((interest, index) => (
                          <li key={index}>{interest}</li>
                        ))}
                      </ul>
                    </dd>
                  </div>
                )}
                {generatedObject.contact && (
                  <div>
                    <dt className="font-semibold">Contact</dt>
                    <dd className="space-y-1">
                      <div>Email: {generatedObject.contact.email}</div>
                      <div>Phone: {generatedObject.contact.phone}</div>
                    </dd>
                  </div>
                )}
              </dl>
            </CardContent>
          </Card>
        )}
      </TabsContent>

      <TabsContent value="image" className="space-y-8">
        <Card>
          <CardHeader>
            <CardTitle className="flex justify-between items-center">
              <div>Image Generation</div>
              <div className="font-mono text-sm font-normal text-primary">useGenerateImage()</div>
            </CardTitle>
            <CardDescription>Generate an image based on your description.</CardDescription>
          </CardHeader>
          <CardContent>
            {isMissingReplicateToken ? (
              <div className="flex flex-col items-center justify-center h-32 p-4 bg-muted rounded-lg text-red-600">
                <p>Please configure your Replicate API token to enable image generation.</p>
              </div>
            ) : (
              <>
                <div className="font-mono text-xs -mt-4 mb-1 w-full text-right text-muted-foreground">black-forest-labs/flux-schnell</div>
                <form onSubmit={handleGenerateImage} className="space-y-4">
                  <Textarea name="prompt" placeholder="Describe the image you want to generate..." className="min-h-[100px]" />
                  <Button type="submit" className="w-full" disabled={isGeneratingImage}>
                    {isGeneratingImage ? "Generating..." : "Generate Image"}
                  </Button>
                </form>
              </>
            )}
          </CardContent>
        </Card>

        {imageError && (
          <Card className="border-destructive">
            <CardHeader>
              <CardTitle className="text-destructive">Error</CardTitle>
            </CardHeader>
            <CardContent>
              <p>{imageError}</p>
            </CardContent>
          </Card>
        )}

        {imageUrl && !imageError && (
          <Card>
            <CardHeader>
              <CardTitle>Generated Image</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="relative aspect-[2/3] w-full overflow-hidden rounded-lg">
                <Image src={imageUrl} alt="AI generated image" fill className="object-cover" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" priority />
              </div>
            </CardContent>
          </Card>
        )}
      </TabsContent>
    </Tabs>
  )
}


--- File: components/demo/upload-demo-client.tsx ---

"use client"

import { useState } from "react"
import { ImageUpload } from "@/components/ui/image-upload"
import { Card } from "@/components/ui/card"
import { SignInButton, useUser } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"
import { LogIn } from "lucide-react"

export function UploadDemoClient() {
  const [imageUrl, setImageUrl] = useState("")
  const { isSignedIn, isLoaded } = useUser()

  if (!isLoaded) {
    return null // or a loading spinner
  }

  return (
    <Card className="p-6">
      {isSignedIn ? (
        <div className="space-y-8">
          <div>
            <h3 className="text-lg font-medium mb-2">Upload an Image</h3>
            <p className="text-sm text-muted-foreground mb-4">Drag and drop an image file or click to select one from your computer.</p>
            <ImageUpload value={imageUrl} onChange={setImageUrl} onRemove={() => setImageUrl("")} />
          </div>
          {imageUrl && (
            <div>
              <h3 className="text-lg font-medium mb-2">Uploaded Image URL</h3>
              <code className="block w-full p-4 bg-muted rounded-lg text-sm break-all">{imageUrl}</code>
            </div>
          )}
        </div>
      ) : (
        <div className="py-12 text-center space-y-4">
          <div className="flex justify-center mb-4">
            <div className="p-3 rounded-full bg-primary/10">
              <LogIn className="w-6 h-6 text-primary" />
            </div>
          </div>
          <h3 className="text-lg font-medium">Sign in to Upload Files</h3>
          <p className="text-sm text-muted-foreground mb-6">You need to be signed in to use the file upload system.</p>
          <SignInButton mode="modal">
            <Button size="lg">Sign in to Continue</Button>
          </SignInButton>
        </div>
      )}
    </Card>
  )
}


--- File: components/edit-profile/index.tsx ---

"use client"

import { useState } from "react"
import { toast } from "sonner"
import { useUser } from "@clerk/nextjs"
import { Edit2, Plus, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { updateProfile } from "@/app/_actions/profile"

interface UserData {
  id: string
  username: string | null
  firstName: string | null
  lastName: string | null
  imageUrl: string
  unsafeMetadata?: Record<string, unknown>
}

interface Link {
  label: string
  url: string
}

interface EditProfileProps {
  user: UserData
  bio: string
  onUpdate: () => void
  isEditing: boolean
  onCancel: () => void
  onStartEdit: () => void
}

export function EditProfile({ user, bio, onUpdate, isEditing, onCancel, onStartEdit }: EditProfileProps) {
  const { user: currentUser } = useUser()
  const [loading, setLoading] = useState(false)
  const [profileData, setProfileData] = useState({
    firstName: user.firstName || "",
    lastName: user.lastName || "",
    bio: bio || "",
    website: {
      label: "Website",
      url: (user.unsafeMetadata?.website as string) || "",
    },
    twitter: {
      label: "Twitter",
      url: (user.unsafeMetadata?.twitter as string) || "",
    },
    github: {
      label: "GitHub",
      url: (user.unsafeMetadata?.github as string) || "",
    },
    customLinks: ((user.unsafeMetadata?.customLinks as Link[]) || []).map((link) => ({
      label: link.label || "",
      url: link.url || "",
    })),
  })

  const addCustomLink = () => {
    setProfileData((prev) => ({
      ...prev,
      customLinks: [...prev.customLinks, { label: "", url: "" }],
    }))
  }

  const removeCustomLink = (index: number) => {
    setProfileData((prev) => ({
      ...prev,
      customLinks: prev.customLinks.filter((_, i) => i !== index),
    }))
  }

  const updateCustomLink = (index: number, field: "label" | "url", value: string) => {
    setProfileData((prev) => ({
      ...prev,
      customLinks: prev.customLinks.map((link, i) => (i === index ? { ...link, [field]: value } : link)),
    }))
  }

  const isOwnProfile = currentUser?.username?.toLowerCase() === user.username?.toLowerCase()

  const handleSave = async () => {
    if (!currentUser || !isOwnProfile) return

    setLoading(true)
    try {
      const result = await updateProfile(currentUser.id, {
        firstName: profileData.firstName,
        lastName: profileData.lastName,
        bio: profileData.bio,
        website: profileData.website.url,
        twitter: profileData.twitter.url,
        github: profileData.github.url,
        customLinks: profileData.customLinks,
      })

      if (!result.success) {
        throw new Error(result.error)
      }

      toast.success("Profile updated", {
        description: "Your profile has been successfully updated.",
      })

      onUpdate()
    } catch (error) {
      console.error("Error updating profile:", error)
      toast.error("Error", {
        description: "Failed to update profile. Please try again.",
      })
    }
    setLoading(false)
  }

  if (!isOwnProfile) {
    return null
  }

  if (!isEditing) {
    return (
      <Button variant="outline" size="sm" onClick={onStartEdit}>
        <Edit2 className="mr-2 h-4 w-4" />
        Edit Profile
      </Button>
    )
  }

  return (
    <div className="space-y-4 w-full -mt-6">
      <h3 className="text-lg font-medium">Edit Profile</h3>
      <div>
        <Input placeholder="First Name" value={profileData.firstName} onChange={(e) => setProfileData({ ...profileData, firstName: e.target.value })} className="mb-2" />
        <Input placeholder="Last Name" value={profileData.lastName} onChange={(e) => setProfileData({ ...profileData, lastName: e.target.value })} />
      </div>
      <div>
        <h2 className="font-medium mb-2">About</h2>
        <Textarea placeholder="Tell us about yourself..." value={profileData.bio} onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })} rows={4} />
      </div>
      <div>
        <div className="space-y-4">
          <div className="space-y-2 pt-2">
            <Label>Website</Label>
            <Input
              data-testid="website-url"
              value={profileData.website.url}
              onChange={(e) => setProfileData({ ...profileData, website: { ...profileData.website, url: e.target.value } })}
              placeholder="URL (e.g. https://example.com)"
            />
          </div>

          <div className="space-y-2">
            <Label>Twitter/X</Label>
            <Input
              data-testid="twitter-username"
              value={profileData.twitter.url}
              onChange={(e) => setProfileData({ ...profileData, twitter: { ...profileData.twitter, url: e.target.value } })}
              placeholder="Username (without @)"
            />
          </div>

          <div className="space-y-2">
            <Label>GitHub</Label>
            <Input
              data-testid="github-username"
              value={profileData.github.url}
              onChange={(e) => setProfileData({ ...profileData, github: { ...profileData.github, url: e.target.value } })}
              placeholder="Username"
            />
          </div>

          {profileData.customLinks.map((link, index) => (
            <div key={index} className="space-y-2">
              <div className="flex items-center justify-between">
                <div className="h-4" />
                <Button type="button" variant="ghost" size="sm" onClick={() => removeCustomLink(index)} className="h-8 w-8 p-0">
                  <X className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex gap-2">
                <Input data-testid={`custom-link-${index}-label`} value={link.label} onChange={(e) => updateCustomLink(index, "label", e.target.value)} placeholder="Label" className="w-1/3" />
                <Input data-testid={`custom-link-${index}-url`} value={link.url} onChange={(e) => updateCustomLink(index, "url", e.target.value)} placeholder="URL" className="flex-1" />
              </div>
            </div>
          ))}

          <Button type="button" variant="outline" size="sm" onClick={addCustomLink} className="w-full">
            <Plus className="mr-2 h-4 w-4" />
            Add Custom Link
          </Button>
        </div>
      </div>
      <div className="flex justify-end gap-6 pt-4">
        <Button variant="ghost" onClick={onCancel} disabled={loading}>
          Cancel
        </Button>
        <Button id="saveProfileChanges" onClick={handleSave} disabled={loading} className="w-1/2">
          {loading ? "Saving..." : "Save Changes"}
        </Button>
      </div>
    </div>
  )
}


--- File: components/forms/mailing-list-form.tsx ---

"use client"

import { useState } from "react"
import { useUser } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { subscribe, updatePreferences } from "@/app/_actions/mailing-list"
import { toast } from "sonner"
import { MailingListPreferences } from "@/types/mailing-list"
import { useRouter } from "next/navigation"

export function MailingListForm({ initialEmail }: { initialEmail?: string }) {
  const router = useRouter()
  const { user, isSignedIn, isLoaded } = useUser()
  const [isLoading, setIsLoading] = useState(false)
  const [preferences, setPreferences] = useState<MailingListPreferences>({
    marketing: true,
    updates: true,
  })

  if (!isLoaded) {
    return null
  }

  const handleSubscribe = async () => {
    if (!isSignedIn || !user?.emailAddresses?.[0]?.emailAddress) {
      toast.error("Please sign in to subscribe")
      return
    }

    try {
      setIsLoading(true)
      await subscribe({
        userId: user.id,
        email: initialEmail || user.emailAddresses[0].emailAddress,
        name: user.fullName || user.firstName || null,
        preferences,
      })
      toast.success("Successfully subscribed to the mailing list!")
      router.refresh()
    } catch (error) {
      console.error("Error subscribing:", error)
      toast.error("Failed to subscribe. Please try again.")
    } finally {
      setIsLoading(false)
    }
  }

  const handlePreferenceChange = async (key: keyof MailingListPreferences) => {
    const newPreferences = {
      ...preferences,
      [key]: !preferences[key],
    }
    setPreferences(newPreferences)

    if (isSignedIn) {
      try {
        await updatePreferences({ preferences: newPreferences })
        toast.success("Preferences updated successfully")
        router.refresh()
      } catch (error) {
        console.error("Error updating preferences:", error)
        toast.error("Failed to update preferences")
        setPreferences(preferences)
      }
    }
  }

  return (
    <Card className="w-full max-w-[500px] p-4 md:mt-4">
      <CardHeader className="md:pt-4">
        <CardTitle className="text-lg">Subscribe to Our Mailing List</CardTitle>
        <CardDescription>Stay updated with our latest news and updates</CardDescription>
      </CardHeader>
      <CardContent className="md:pb-4">
        <div className="space-y-4">
          <div className="space-y-2">
            <Label>Email Preferences</Label>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <Checkbox id="marketing" checked={preferences.marketing} onCheckedChange={() => handlePreferenceChange("marketing")} />
                <label htmlFor="marketing" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                  Marketing emails
                </label>
              </div>
              <div className="flex items-center space-x-2">
                <Checkbox id="updates" checked={preferences.updates} onCheckedChange={() => handlePreferenceChange("updates")} />
                <label htmlFor="updates" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
                  Product updates
                </label>
              </div>
            </div>
          </div>

          {isSignedIn ? (
            <div className="flex gap-4">
              <Button onClick={handleSubscribe} disabled={isLoading || !isSignedIn}>
                Subscribe
              </Button>
            </div>
          ) : (
            <p className="border p-4 rounded-lg mt-6">
              Please{" "}
              <a href="/sign-in" className="text-primary hover:underline">
                sign in
              </a>{" "}
              to subscribe to our mailing list.
            </p>
          )}
          <p className="text-sm text-muted-foreground pt-4">We respect your privacy and will never share your information. You can unsubscribe at any time.</p>
        </div>
      </CardContent>
    </Card>
  )
}


--- File: components/graphics/icon.tsx ---

import { SparklesIcon } from "@heroicons/react/24/solid"

export function Icon() {
  return (
    <span className="inline-flex flex-col items-center text-fuchsia-600 dark:text-fuchsia-500 select-none">
      <SparklesIcon className="w-3.5 h-3.5 -mb-2.5 relative" />
      <span className="scale-x-200 text-lg font-medium">V</span>
    </span>
  )
}


--- File: components/graphics/logo-lockup.tsx ---

import { Icon } from "./icon"

export function LogoLockup() {
  return (
    <div className="flex items-center gap-3">
      <Icon />
      <span className="text-xl font-bold bg-clip-text text-transparent bg-linear-to-br dark:bg-linear-to-br from-blue-500 via-purple-700 to-indigo-500 dark:from-blue-300 dark:via-purple-500 dark:to-indigo-500">
        party starter
      </span>
    </div>
  )
}


--- File: components/home/content-section.tsx ---

/* eslint-disable max-lines */

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
import { Rocket, Zap, Terminal, FileCode, FileCode2, Sparkles, CloudUpload, ShieldCheck, Blocks, Database } from "lucide-react"
import { Heading } from "@/components/typography/heading"
import { FeatureCard } from "./feature-card"
import { ContactFormPreview, AuthFlowPreview } from "./feature-previews"
import { ContactIcon, AuthIcon, FileUploadIcon } from "./feature-icons"
import { CopyToClipboard } from "@/components/ui/copy-to-clipboard"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { isDev } from "@/lib/auth-utils"
import Link from "next/link"
import { Button } from "../ui/button"
import { BoltIcon } from "@heroicons/react/24/solid"
import { CopyOneliner } from "../ui/copy-oneliner"

export function ContentSection() {
  return (
    <>
      <section className="container mt-12 lg:-mb-8">
        <div className="mx-auto max-w-[58rem]">
          <Card className="border-primary/30 border-dotted border-2 bg-background/60 backdrop-blur-sm">
            <CardContent>
              <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div className="flex items-start sm:items-center gap-4">
                  <svg viewBox="0 0 24 24" className="h-9 w-9" fill="currentColor">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.237 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                  </svg>
                  <div className="flex flex-col">
                    <a href="https://github.com/johnpolacek/vibecode.party.starter" className="text-lg font-semibold hover:text-primary">
                      vibecode.party.starter
                    </a>
                    <p className="text-sm text-muted-foreground">A Next.js starter template for building full-stack apps with auth, database, storage, and more! 🚀</p>
                  </div>
                </div>
                <div className="flex gap-2">
                  <a
                    href="https://github.com/johnpolacek/vibecode.party.starter/stargazers"
                    className="inline-flex items-center justify-center gap-1 rounded-md bg-primary/10 px-3 py-1.5 text-sm font-medium text-primary hover:bg-primary/20"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
                      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                    </svg>
                    Star
                  </a>
                  <a
                    href="https://github.com/johnpolacek/vibecode.party.starter/watchers"
                    className="inline-flex items-center justify-center gap-1 rounded-md bg-primary/10 px-3 py-1.5 text-sm font-medium text-primary hover:bg-primary/20"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4">
                      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
                      <circle cx="12" cy="12" r="3" />
                    </svg>
                    Watch
                  </a>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
      {isDev() && (
        <section id="welcome" className="container mt-20">
          <Card className="text-center lg:p-8 !bg-linear-to-tl from-primary/20 to-primary/5 dark:!bg-black/70 text-primary max-w-3xl mx-auto">
            <CardHeader>
              <Heading variant="h3" className="dark:text-white">
                Welcome to the Vibecode Party Starter!
              </Heading>
            </CardHeader>
            <CardContent>
              <p className="text-balance dark:text-purple-300 text-sm sm:text-base">
                This is a dev environment where you can build your app locally before you&apos;re ready to ship it to production.
              </p>
              <div className="flex justify-center pt-6">
                <Button
                  asChild
                  size="lg"
                  className="text-2xl h-auto py-3 px-12 font-extrabold hover:scale-105 !bg-primary hover:bg-primary transition-all duration-300 hover:ring-8 hover:ring-primary/20"
                >
                  <Link href="/get-started" className="font-extrabold tracking-wide">
                    <BoltIcon className="h-5 w-5 text-amber-300 scale-150" />
                    Get Started
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>
        </section>
      )}
      <section id="features" className="container space-y-6 pt-8 md:pt-12 lg:pt-24">
        <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
          <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">The Good Stuff</span>
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Party <span className="text-primary">Favors</span> Included
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">We packed all these awesome goodies so you can focus on vibing, not configuring!</p>
        </div>
        <div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">UI Components</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                <path d="M2 17l10 5 10-5"></path>
                <path d="M2 12l10 5 10-5"></path>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Gorgeous Shadcn/UI components that make your app look like a million bucks! 💅</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">Authentication</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <path d="M16 16v-3a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2v3"></path>
                <circle cx="12" cy="7" r="3"></circle>
                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Clerk auth that&apos;s so easy, you&apos;ll set it up before your coffee gets cold! ☕</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">Database</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <path d="M12 2C6.5 2 2 4 2 7v10c0 3 4.5 5 10 5s10-2 10-5V7c0-3-4.5-5-10-5z"></path>
                <path d="M2 7c0 3 4.5 5 10 5s10-2 10-5"></path>
                <path d="M2 12c0 3 4.5 5 10 5s10-2 10-5"></path>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Keep the party going with Convex! Our database setup lets you vibe with real-time data and automatic scaling. 🔥</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">File Storage</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <path d="M2 15h10"></path>
                <path d="M9 18l3-3-3-3"></path>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">AWS S3 storage that&apos;s ready to handle all your party pics! 📸</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">Email Service</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22,6 12,13 2,6"></polyline>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">SendGrid to make sure your messages slide into inboxes, not spam! 📨</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">Payments</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <rect x="2" y="5" width="20" height="14" rx="2"></rect>
                <line x1="2" y1="10" x2="22" y2="10"></line>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Stripe integration so smooth, money just slides right in! 💸</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 hover:-translate-y-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">AI SDK Integration</CardTitle>
              <Sparkles className="h-4 w-4 text-primary" />
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">Use AI to generate text, structured data, and images.</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10">
            <CardHeader className="flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-sm font-medium">End-to-End Testing</CardTitle>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-4 w-4 text-primary"
              >
                <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path>
                <line x1="16" y1="8" x2="2" y2="22"></line>
                <line x1="17.5" y1="15" x2="9" y2="15"></line>
              </svg>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Playwright testing with visual regression and CI/CD integration! 🧪</p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-4 w-4 text-primary"
                >
                  <path d="M3 3v18h18"></path>
                  <path d="M18 17V9"></path>
                  <path d="M13 17V5"></path>
                  <path d="M8 17v-3"></path>
                </svg>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">Built-in visit tracking and route analytics with Convex! 📊</p>
            </CardContent>
          </Card>
        </div>
      </section>
      <section id="get-started" className="container pt-8 md:pt-12 lg:pt-24 relative">
        <div className="absolute inset-0 -z-10 overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-full opacity-10 bg-[radial-gradient(circle_at_70%_30%,hsl(var(--secondary))_0,transparent_50%),radial-gradient(circle_at_30%_70%,hsl(var(--primary))_0,transparent_50%)]"></div>
        </div>
        <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
          <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">Let&apos;s Go!</span>
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Join the <span className="text-primary">Party</span>
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">Follow these simple steps and you&apos;ll be vibing in no time! 🕺💃</p>
        </div>
        <div className="mx-auto grid max-w-4xl items-center gap-10 py-12">
          <Tabs defaultValue="install" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="install" className="text-base">
                🚀 Installation
              </TabsTrigger>
              <TabsTrigger value="env" className="text-base">
                ⚙️ Environment
              </TabsTrigger>
              <TabsTrigger value="vibes" className="text-base">
                ✨ Vibes
              </TabsTrigger>
            </TabsList>
            <TabsContent value="install" className="mt-6">
              <Card className="border-primary/20 bg-background/60 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Rocket className="h-5 w-5 text-primary" />
                    Installation
                  </CardTitle>
                  <CardDescription>Get the party started on your machine in seconds!</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-1">
                      <Terminal className="h-4 w-4 text-primary" />
                      <p className="font-medium">Run the command and follow the prompts...</p>
                    </div>
                    <CopyOneliner className="mt-2 bg-background border-primary/70">npx vibecode-party-starter</CopyOneliner>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="env" className="mt-6">
              <Card className="border-primary/20 bg-background/60 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Zap className="h-5 w-5 text-primary" />
                    Environment Setup
                  </CardTitle>
                  <CardDescription>Set the mood with these environment variables! 🌈</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    Create a <code className="rounded-md bg-muted px-1.5 py-0.5">.env</code> file in the root of your project and add these magic spells:
                  </p>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm">🌐 App URLs</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">NEXT_PUBLIC_APP_URL=</code>
                    </pre>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm">✨ Clerk Authentication</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">
                        NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
                        <br />
                        CLERK_SECRET_KEY=
                        <br />
                        <br />
                        # Replace with your Clerk user ID after signing in
                        <br />
                        ADMIN_USER_IDS=
                      </code>
                    </pre>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm flex items-center gap-2">
                        <Database className="h-4 w-4 text-amber-600" /> Convex Database
                      </p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">CONVEX_DEPLOY_KEY=</code>
                    </pre>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm">💾 AWS S3 & CloudFront</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">
                        AWS_KEY=
                        <br />
                        AWS_SECRET=
                        <br />
                        AWS_REGION=
                        <br />
                        AWS_BUCKET_PUBLIC=
                        <br />
                        CLOUDFRONT_DOMAIN=
                      </code>
                    </pre>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm">📨 Contact Form & Mailing List</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">
                        NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
                        <br />
                        RECAPTCHA_SECRET_KEY=
                        <br />
                        SENDGRID_API_KEY=
                        <br />
                        SENDGRID_SENDER=
                        <br />
                        CONTACT_EMAIL=
                        <br />
                        UNSUBSCRIBE_SECRET=
                      </code>
                    </pre>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm">💳 Stripe Payments</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">
                        NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
                        <br />
                        STRIPE_SECRET_KEY=
                      </code>
                    </pre>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <p className="font-mono text-sm">🧪 Testing</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono">
                        TEST_USER_EMAIL=
                        <br />
                        TEST_USER_PASSWORD=
                        <br />
                        TEST_USER_ID=
                      </code>
                    </pre>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="vibes" className="mt-6">
              <Card className="border-primary/20 bg-background/60 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Zap className="h-5 w-5 text-primary" />
                    Vibecoding Workflows
                  </CardTitle>
                  <CardDescription>Get inspired with these example prompts to enhance your project! 🎨</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <FileCode className="h-4 w-4 text-primary" />
                      <p className="font-mono text-sm">Import components from a v0 project</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono font-medium">{`npx shadcn@latest add "https://v0.dev/chat/b/asdfghjkl1234567890"`}</code>
                    </pre>
                    <p className="mt-2 text-sm text-muted-foreground">
                      Visit{" "}
                      <a href="https://v0.dev" className="text-primary hover:underline">
                        v0.dev
                      </a>{" "}
                      to generate components and import them into your project by selecting the &quot;Add to Codebase&quot; option.
                    </p>
                    <div className="flex items-center space-x-2 mt-6">
                      <FileCode2 className="h-4 w-4 text-primary" />
                      <p className="font-mono text-sm">Import shadcn/ui compatible components from the community.</p>
                    </div>
                    <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                      <code className="text-sm font-mono font-medium">{`pnpm dlx shadcn@latest add "https://21st.dev/r/designali-in/gradient-text"`}</code>
                    </pre>
                    <p className="mt-2 text-sm text-muted-foreground">
                      Find libraries and components like{" "}
                      <a href="https://21st.dev" className="text-primary hover:underline">
                        21st.dev
                      </a>
                      ,{" "}
                      <a href="https://magicui.design/" className="text-primary hover:underline">
                        Magic UI
                      </a>{" "}
                      &{" "}
                      <a href="https://bundui.io/docs/components/animated-gradient-text" className="text-primary hover:underline">
                        bundui
                      </a>{" "}
                      on{" "}
                      <a href="https://github.com/birobirobiro/awesome-shadcn-ui" className="text-primary hover:underline">
                        awesome-shadcn-ui
                      </a>
                    </p>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <Terminal className="h-4 w-4 text-primary" />
                      <p className="font-mono text-sm">Example Cursor prompts</p>
                    </div>
                    <div id="cursor-prompts" className="mt-4 space-y-4">
                      <div className="rounded-lg border bg-background p-3">
                        <p className="font-mono text-sm text-primary mb-2"># Use shadcn/ui compatible components</p>
                        <div className="relative text-sm py-3 px-3 rounded-md border">
                          <CopyToClipboard position="top-right" className="!absolute !right-2 !top-1.5">
                            {"Update the header text to use the new @animated-gradient-text component."}
                          </CopyToClipboard>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="rounded-md bg-muted p-4">
                    <div className="flex items-center space-x-2">
                      <Terminal className="h-4 w-4 text-primary" />
                      <p className="font-mono text-sm">Vibe-code Friendly NPM Scripts</p>
                    </div>
                    <div id="npm-scripts" className="mt-4 space-y-4">
                      <div className="rounded-lg border bg-background p-3">
                        <p className="font-mono text-sm text-primary mb-2"># Go straight to production without even writing a commit message.</p>
                        <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                          <code className="text-sm font-mono">pnpm go</code>
                        </pre>
                        <p className="mt-2 text-sm text-muted-foreground">
                          Requires{" "}
                          <a href="https://github.com/Nutlope/aicommits" className="text-primary hover:underline">
                            aicommits
                          </a>{" "}
                          to be installed on your local dev environment.
                        </p>
                      </div>
                      <div className="rounded-lg border bg-background p-3">
                        <p className="font-mono text-sm text-primary mb-2"># Ship it to production with full CI checks.</p>
                        <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                          <code className="text-sm font-mono">pnpm ship</code>
                        </pre>
                        <p className="mt-2 text-sm text-muted-foreground">Runs linting, runs tests, backs up the database then pushes db changes to production - all in one command! 🚀</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </section>
      <section id="full-stack-components" className="container pt-4 md:pt-8 lg:pt-12">
        <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
          <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">Ready-to-Use</span>
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Full-Stack <span className="text-primary">Components</span>
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7 text-balance">
            Plug-and-play full stack components that integrate with <span className="whitespace-nowrap">best-in-class</span> services! Just add your API keys and you&apos;re good to go!
          </p>
        </div>

        <div className="w-full pt-8 flex justify-center items-center">
          <iframe
            width="720"
            height="405"
            src="https://www.youtube.com/embed/1gzCvATzUdM?si=XSGrKNvWvSIcOiAW"
            title="YouTube video player"
            frameBorder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
          ></iframe>
        </div>

        <div id="feature-cards" className="mx-auto grid max-w-6xl gap-8 py-12">
          <FeatureCard
            title="Complete Auth Flow"
            description="A fully implemented authentication system with Clerk, including sign-up, login, password reset, and profile management."
            icon={<AuthIcon />}
            badgeText="Authentication"
            features={["Social login with Google, GitHub, etc.", "Email verification and password reset", "Protected routes and middleware", "Admin user role management"]}
            envVars={["NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY", "CLERK_SECRET_KEY"]}
            preview={<AuthFlowPreview />}
            gradientFrom="from-fuchsia-500/5"
            gradientTo="to-fuchsia-500/30"
            gradientCirclePosition="70% 30%"
            link="/account"
            linkText="Go to Account Page"
          />

          {/* File Upload Card */}
          <FeatureCard
            title="S3 File Upload System"
            description="A complete file upload system with AWS S3 integration, progress tracking, and image optimization."
            icon={<FileUploadIcon />}
            badgeText="File Upload"
            features={["Drag-and-drop file uploads", "Image preview and optimization", "Progress tracking with cancel option", "CloudFront CDN integration"]}
            envVars={["AWS_KEY", "AWS_SECRET", "AWS_BUCKET_PUBLIC"]}
            preview={
              <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-blue-500/20 shadow-xl w-full max-w-md p-6">
                <div className="border-2 border-dashed border-blue-500/30 rounded-lg p-8 flex flex-col items-center justify-center">
                  <div className="w-16 h-16 rounded-full bg-blue-500/20 mb-4 flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-8 w-8 text-blue-500"
                    >
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="17 8 12 3 7 8"></polyline>
                      <line x1="12" y1="3" x2="12" y2="15"></line>
                    </svg>
                  </div>
                  <div className="h-4 w-48 bg-blue-500/20 rounded mb-2"></div>
                  <div className="h-4 w-32 bg-muted rounded mb-6"></div>
                  <div className="h-8 w-36 bg-blue-500/70 rounded"></div>
                </div>
                <div className="mt-4 space-y-2">
                  <div className="flex items-center">
                    <div className="h-10 w-10 bg-muted rounded mr-3"></div>
                    <div className="flex-1">
                      <div className="h-4 w-32 bg-muted rounded mb-2"></div>
                      <div className="h-2 w-full bg-muted/50 rounded-full overflow-hidden">
                        <div className="h-full w-3/4 bg-blue-500 rounded-full"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            }
            gradientFrom="from-blue-500/5"
            gradientTo="to-blue-500/30"
            gradientCirclePosition="50% 50%"
            link="/demo/upload"
            linkText="Try File Upload"
          />

          {/* Payment Processing Card */}
          <FeatureCard
            title="Stripe Payment System"
            description="A complete payment processing system with Stripe, including checkout, subscriptions, and webhooks."
            icon={
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
                <rect x="2" y="5" width="20" height="14" rx="2"></rect>
                <line x1="2" y1="10" x2="22" y2="10"></line>
              </svg>
            }
            badgeText="Payments"
            features={["One-time and subscription payments", "Secure checkout with Stripe Elements", "Webhook handling for payment events", "Customer portal for subscription management"]}
            envVars={["NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY", "STRIPE_SECRET_KEY"]}
            preview={
              <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-emerald-500/20 shadow-xl w-full max-w-md p-6">
                <div className="space-y-4">
                  <div className="flex justify-between items-center mb-6">
                    <div className="h-8 w-24 bg-emerald-500/20 rounded"></div>
                    <div className="h-8 w-16 bg-muted rounded"></div>
                  </div>
                  <div className="space-y-2">
                    <div className="h-4 w-32 bg-emerald-500/20 rounded"></div>
                    <div className="h-10 w-full bg-muted rounded"></div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="h-4 w-16 bg-emerald-500/20 rounded"></div>
                      <div className="h-10 w-full bg-muted rounded"></div>
                    </div>
                    <div className="space-y-2">
                      <div className="h-4 w-16 bg-emerald-500/20 rounded"></div>
                      <div className="h-10 w-full bg-muted rounded"></div>
                    </div>
                  </div>
                  <div className="h-10 w-full bg-emerald-500/70 rounded mt-4"></div>
                  <div className="flex justify-center">
                    <div className="h-4 w-48 bg-muted/50 rounded"></div>
                  </div>
                </div>
              </div>
            }
            gradientFrom="from-emerald-500/5"
            gradientTo="to-emerald-500/30"
            gradientCirclePosition="30% 70%"
            link="/pay"
            linkText="Try Payment System"
          />

          <FeatureCard
            title="Ready-to-Use Contact Form"
            description="A complete contact form solution with SendGrid email integration and Google ReCAPTCHA protection against bots."
            icon={<ContactIcon />}
            badgeText="Contact Form + SendGrid"
            features={["Sends emails via SendGrid API", "Protected with Google ReCAPTCHA v3", "Configurable recipient email via env vars", "Form validation with error handling"]}
            envVars={["SENDGRID_API_KEY", "CONTACT_EMAIL", "RECAPTCHA_SECRET_KEY"]}
            preview={<ContactFormPreview />}
            link="/contact"
            linkText="Go to Contact Form"
          />

          <FeatureCard
            title="Cloud Database"
            description="A complete database management interface with table views, data editing, and backup management."
            icon={
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
                <path d="M12 2C6.5 2 2 4 2 7v10c0 3 4.5 5 10 5s10-2 10-5V7c0-3-4.5-5-10-5z"></path>
                <path d="M2 7c0 3 4.5 5 10 5s10-2 10-5"></path>
                <path d="M2 12c0 3 4.5 5 10 5s10-2 10-5"></path>
              </svg>
            }
            badgeText="Cloud DB"
            features={["Easy local development database setup", "Basic user analytics tracking"]}
            envVars={["CONVEX_DEPLOY_KEY", "NEXT_PUBLIC_CONVEX_URL"]}
            preview={
              <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-violet-500/20 shadow-xl w-full max-w-md p-6">
                <div className="space-y-4">
                  <div className="flex justify-between items-center mb-6">
                    <div className="h-8 w-32 bg-violet-500/20 rounded"></div>
                    <div className="h-8 w-20 bg-muted rounded"></div>
                  </div>
                  <div className="space-y-2">
                    <div className="grid grid-cols-4 gap-2">
                      <div className="h-8 w-full bg-violet-500/20 rounded"></div>
                      <div className="h-8 w-full bg-violet-500/20 rounded"></div>
                      <div className="h-8 w-full bg-violet-500/20 rounded"></div>
                      <div className="h-8 w-full bg-violet-500/20 rounded"></div>
                    </div>
                    <div className="space-y-2">
                      {[1, 2, 3].map((i) => (
                        <div key={i} className="h-12 w-full bg-muted rounded flex items-center px-4 gap-2">
                          <div className="h-4 w-1/4 bg-violet-500/20 rounded"></div>
                          <div className="h-4 w-1/4 bg-violet-500/20 rounded"></div>
                          <div className="h-4 w-1/4 bg-violet-500/20 rounded"></div>
                          <div className="h-4 w-1/4 bg-violet-500/20 rounded"></div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            }
            gradientFrom="from-violet-500/5"
            gradientTo="to-violet-500/30"
            gradientCirclePosition="40% 60%"
            link="/admin"
            linkText="Admin Dashboard"
          />

          <FeatureCard
            title="AI SDK Hooks"
            description="A complete AI integration with OpenAI and Replicate, including text generation, structured data, and image generation."
            icon={
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
                <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z" />
                <circle cx="7.5" cy="8.5" r="1" />
                <circle cx="16.5" cy="8.5" r="1" />
                <path d="M12 18.5c-2.5 0-4-1.5-4-1.5" />
                <path d="M16 18.5c-2.5 0-4-1.5-4-1.5" />
              </svg>
            }
            badgeText="AI Integration"
            features={["Text generation with useGenerateText() and useGenerateTextStrings()", "Structured data generation with useGenerateObject()", "Image generation with useGenerateImage()"]}
            envVars={["OPENAI_API_KEY", "REPLICATE_API_TOKEN"]}
            preview={
              <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-indigo-500/20 shadow-xl w-full max-w-md p-6">
                <div className="space-y-4">
                  <div className="flex justify-between items-center mb-6">
                    <div className="h-8 w-32 bg-indigo-500/20 rounded"></div>
                    <div className="h-8 w-20 bg-muted rounded"></div>
                  </div>
                  <div className="space-y-2">
                    <div className="h-24 w-full bg-muted rounded p-3">
                      <div className="h-4 w-3/4 bg-indigo-500/20 rounded mb-2"></div>
                      <div className="h-4 w-1/2 bg-indigo-500/20 rounded"></div>
                    </div>
                    <div className="h-10 w-full bg-indigo-500/70 rounded"></div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="h-32 w-full bg-muted rounded"></div>
                    <div className="space-y-2">
                      <div className="h-6 w-full bg-indigo-500/20 rounded"></div>
                      <div className="h-6 w-3/4 bg-indigo-500/20 rounded"></div>
                      <div className="h-6 w-1/2 bg-indigo-500/20 rounded"></div>
                    </div>
                  </div>
                </div>
              </div>
            }
            gradientFrom="from-indigo-500/5"
            gradientTo="to-indigo-500/30"
            gradientCirclePosition="60% 40%"
            link="/demo/ai"
            linkText="Try AI Demo"
          />

          <FeatureCard
            title="Built-In Cursor Rules"
            description="A complete set of project guidelines and best practices enforced through Cursor rules, helping maintain consistency and quality across your codebase."
            icon={
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
                <polyline points="14 2 14 8 20 8" />
                <path d="M12 18v-6" />
                <path d="m9 15 3 3 3-3" />
              </svg>
            }
            badgeText="Project Guidelines"
            features={[
              "Project structure and file organization guidelines",
              "Component location and naming conventions",
              "Authentication patterns and best practices",
              "Database and frontend development rules",
            ]}
            preview={
              <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-amber-500/20 shadow-xl w-full max-w-md p-6">
                <div className="space-y-3 font-mono text-amber-700/60 divide-y divide-amber-700/20">
                  <div className="pb-2 px-8">000-tooling</div>
                  <div className="pb-2 px-8">100-architecture</div>
                  <div className="pb-2 px-8">200-database</div>
                  <div className="pb-2 px-8">300-auth</div>
                  <div className="pb-2 px-8">400-frontend</div>
                  <div className="pb-2 px-8">999-meta</div>
                </div>
              </div>
            }
            gradientFrom="from-amber-500/5"
            gradientTo="to-amber-500/30"
            gradientCirclePosition="45% 55%"
            link="/.cursor/rules"
            linkText="View Cursor Rules"
          />

          <FeatureCard
            title="End-to-End Testing"
            description="A complete end-to-end testing setup with Playwright, including visual regression and CI/CD integration."
            icon={
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
                <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path>
                <line x1="16" y1="8" x2="2" y2="22"></line>
                <line x1="17.5" y1="15" x2="9" y2="15"></line>
              </svg>
            }
            badgeText="E2E Tests"
            features={["Interactive test development with `pnpm pw`", "Visual regression testing built-in", "CI/CD ready test automation", "Cross-browser test coverage"]}
            envVars={["TEST_USER_EMAIL", "TEST_USER_PASSWORD", "TEST_USER_ID"]}
            preview={
              <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-indigo-500/20 shadow-xl w-full max-w-xl sm:w-md p-6">
                <div className="space-y-4">
                  <div className="flex items-center gap-2 mb-6">
                    <div className="h-8 w-8 bg-emerald-500/20 rounded-full flex items-center justify-center">
                      <div className="h-4 w-4 bg-emerald-500/30 rounded-full"></div>
                    </div>
                    <div className="h-8 flex-1 bg-emerald-500/20 rounded"></div>
                  </div>
                  <div className="space-y-3">
                    {[1, 2, 3].map((i) => (
                      <div key={i} className="flex items-center gap-3">
                        <div className="h-4 w-4 bg-emerald-500/20 rounded-full flex-shrink-0"></div>
                        <div className="h-8 flex-1 bg-emerald-500/10 rounded flex items-center px-4">
                          <div className="h-3 w-3/4 bg-emerald-500/20 rounded"></div>
                        </div>
                        <div className="h-6 w-16 bg-emerald-500/20 rounded flex items-center justify-center">
                          <div className="h-2 w-8 bg-emerald-500/50 rounded"></div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <div className="h-24 bg-emerald-500/10 rounded p-3">
                    <div className="space-y-2">
                      <div className="h-3 w-3/4 bg-emerald-500/20 rounded"></div>
                      <div className="h-3 w-1/2 bg-emerald-500/20 rounded"></div>
                      <div className="h-3 w-2/3 bg-emerald-500/20 rounded"></div>
                    </div>
                  </div>
                </div>
              </div>
            }
            gradientFrom="from-emerald-500/5"
            gradientTo="to-emerald-500/30"
            gradientCirclePosition="60% 40%"
          />
        </div>
      </section>
      <section id="services" className="container py-8 md:py-12">
        <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
          <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">The VIP Section</span>
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Built for <span className="text-primary">Vibecoding</span>
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">We&apos;ve got the hottest services ready to make your app the life of the party! 🔥</p>
        </div>
        <div className="mx-auto grid max-w-5xl gap-8 py-12 lg:grid-cols-2">
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-5 w-5 text-primary"
                >
                  <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                  <path d="M2 17l10 5 10-5"></path>
                  <path d="M2 12l10 5 10-5"></path>
                </svg>
                Shadcn/UI for Components
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-pretty">
              <p className="text-muted-foreground">
                Built on a foundation of{" "}
                <a href="https://ui.shadcn.com/" className="text-primary">
                  Shadcn/UI
                </a>{" "}
                with{" "}
                <a href="https://tailwindcss.com/" className="text-primary">
                  TailwindCSS
                </a>
                , you will be able to prompt Cursor and other LLMs to produce great UI/UX designs with components that are accessible and easy to use.
              </p>
              <p className="text-muted-foreground">
                Add more components auto-magically with{" "}
                <a href="https://v0.dev" className="text-primary">
                  v0
                </a>{" "}
                or other AI tools.
              </p>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileCode className="h-5 w-5 text-primary" />
                Vibecode-Friendly NPM Scripts
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4 text-pretty">
              <p className="text-muted-foreground">
                Deploy your code quickly with scripts like <code className="rounded-md text-foreground text-semibold bg-muted px-1.5 py-0.5">pnpm go</code> or{" "}
                <code className="rounded-md text-foreground text-semibold bg-muted px-1.5 py-0.5">pnpm ship</code> that automatically run tests, write commit messages and get your changes into
                production so you can keep vibing.
              </p>
            </CardContent>
          </Card>
        </div>
      </section>
      <section id="development" className="container py-8 md:py-12 bg-primary/5 rounded-lg">
        <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
          <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">Party Tricks</span>
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Dev <span className="text-primary">Superpowers</span>
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">Tools to keep your code quality high and your vibes even higher! 🚀</p>
        </div>
        <div className="mx-auto grid max-w-4xl gap-8 py-12 lg:grid-cols-2">
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 col-span-2">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Sparkles className="h-5 w-5 text-primary" />
                AI SDK Integration
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">Use AI to generate text, structured data and images.</p>
              <div className="mt-4 space-y-6">
                <div>
                  <div className="flex items-center space-x-2 mb-2">
                    <FileCode className="h-4 w-4 text-primary" />
                    <p className="text-sm">Text Generation with Streaming</p>
                  </div>
                  <Accordion type="single" collapsible>
                    <AccordionItem value="text" className="ring ring-foreground/10 rounded-lg">
                      <AccordionTrigger className="px-4 hover:no-underline hover:bg-muted [&[data-state=open]>svg]:rotate-180">
                        <code className="text-sm font-mono">{"const { generate, isLoading } = useGenerateText()"}</code>
                      </AccordionTrigger>
                      <AccordionContent className="px-4 pb-4">
                        <pre className="overflow-x-auto rounded-lg bg-background">
                          <code className="text-sm font-mono">
                            {`// Generate text with streaming
const handleGenerate = async () => {
  await generate({
    prompt: "Write a story about...",
    onStream: (text) => {
      // Handle streaming text updates
    }
  })
}`}
                          </code>
                        </pre>
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </div>

                <div>
                  <div className="flex items-center space-x-2 mb-2">
                    <FileCode className="h-4 w-4 text-primary" />
                    <p className="text-sm">Structured Data Generation</p>
                  </div>
                  <Accordion type="single" collapsible>
                    <AccordionItem value="object" className="ring ring-foreground/10 rounded-lg">
                      <AccordionTrigger className="px-4 hover:no-underline hover:bg-muted [&[data-state=open]>svg]:rotate-180">
                        <code className="text-sm font-mono">{"const { generate, isLoading } = useGenerateObject()"}</code>
                      </AccordionTrigger>
                      <AccordionContent className="px-4 pb-4">
                        <pre className="overflow-x-auto rounded-lg bg-background">
                          <code className="text-sm font-mono">
                            {`// Generate structured data
const handleGenerate = async () => {
  const result = await generate({
    prompt: "Generate a profile for...",
    schema: {
      name: z.string(),
      age: z.number(),
      bio: z.string(),
      interests: z.array(z.string())
    }
  })
}`}
                          </code>
                        </pre>
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </div>

                <div>
                  <div className="flex items-center space-x-2 mb-2">
                    <FileCode className="h-4 w-4 text-primary" />
                    <p className="text-sm">String Array Generation</p>
                  </div>
                  <Accordion type="single" collapsible>
                    <AccordionItem value="strings" className="ring ring-foreground/10 rounded-lg">
                      <AccordionTrigger className="px-4 hover:no-underline hover:bg-muted [&[data-state=open]>svg]:rotate-180">
                        <code className="text-sm font-mono">{"const { generate, isLoading } = useGenerateStrings()"}</code>
                      </AccordionTrigger>
                      <AccordionContent className="px-4 pb-4">
                        <pre className="overflow-x-auto rounded-lg bg-background">
                          <code className="text-sm font-mono">
                            {`// Generate array of strings
const handleGenerate = async () => {
  const strings = await generate({
    prompt: "Generate 5 creative names for...",
    count: 5
  })
}`}
                          </code>
                        </pre>
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </div>

                <div>
                  <div className="flex items-center space-x-2 mb-2">
                    <FileCode className="h-4 w-4 text-primary" />
                    <p className="text-sm">Image Generation</p>
                  </div>
                  <Accordion type="single" collapsible>
                    <AccordionItem value="image" className="ring ring-foreground/10 rounded-lg">
                      <AccordionTrigger className="px-4 hover:no-underline hover:bg-muted [&[data-state=open]>svg]:rotate-180">
                        <code className="text-sm font-mono">{"const { generate, isLoading } = useGenerateImage()"}</code>
                      </AccordionTrigger>
                      <AccordionContent className="px-4 pb-4">
                        <pre className="overflow-x-auto rounded-lg bg-background">
                          <code className="text-sm font-mono">
                            {`// Generate an image
const handleGenerate = async () => {
  const imageUrl = await generate({
    prompt: "A beautiful landscape with...",
    width: 1024,
    height: 1024
  })
}`}
                          </code>
                        </pre>
                      </AccordionContent>
                    </AccordionItem>
                  </Accordion>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <ShieldCheck className="h-5 w-5 text-primary" />
                Test
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">
                Keep the party going without crashes! Our Playwright testing setup lets you vibe with confidence. Even AI can&apos;t break your app when you&apos;ve got tests! 🧪
              </p>
              <div className="mt-4 space-y-4">
                <div className="rounded-md bg-muted p-4">
                  <div className="flex items-center space-x-2">
                    <Terminal className="h-4 w-4 text-primary" />
                    <p className="font-mono text-sm">Open the test console</p>
                  </div>
                  <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                    <code className="text-sm font-mono">pnpm pw</code>
                  </pre>
                </div>
                <div className="rounded-md bg-muted p-4">
                  <div className="flex items-center space-x-2">
                    <Terminal className="h-4 w-4 text-primary" />
                    <p className="font-mono text-sm">Run the whole test suite</p>
                  </div>
                  <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                    <code className="text-sm font-mono">pnpm test</code>
                  </pre>
                </div>
              </div>
            </CardContent>
          </Card>
          <Card className="border-primary/20 bg-background/60 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <CloudUpload className="h-5 w-5 text-primary" />
                Ship
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground">Vibe-code friendly NPM scripts 🌊</p>
              <div className="mt-4 space-y-4">
                <div className="rounded-md bg-muted p-4">
                  <div className="flex items-start space-x-2">
                    <Terminal className="h-4 w-4 relative top-0.5 text-primary flex-shrink-0" />
                    <p className="font-mono text-sm">Go straight to production without even writing a commit message.</p>
                  </div>
                  <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                    <code className="text-sm font-mono">pnpm go</code>
                  </pre>
                </div>
                <div className="rounded-md bg-muted p-4">
                  <div className="flex items-start space-x-2">
                    <Terminal className="h-4 w-4 relative top-0.5 text-primary flex-shrink-0" />
                    <p className="font-mono text-sm">Ship it to production with full CI checks.</p>
                  </div>
                  <pre className="mt-2 overflow-x-auto rounded-lg border bg-background p-4">
                    <code className="text-sm font-mono">pnpm ship</code>
                  </pre>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
      <section className="container py-8 md:py-12 lg:py-24">
        <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
          <span className="inline-block rounded-full bg-primary/10 px-3 py-1 text-sm text-primary">Stay Connected</span>
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Join the <span className="text-primary">Vibe Tribe</span>
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7 text-balance">
            Sign up for our mailing list and stay up to date with the latest features, updates, and community vibes! 🎉
          </p>
          <Button asChild size="lg" className="mt-4">
            <Link href="/mailing-list" className="gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
                <path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10c0-.63.3-1.22.8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
                <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
              </svg>
              Sign Up for Mailing List
            </Link>
          </Button>
        </div>
      </section>
      <section className="container py-8 md:py-12 lg:py-24">
        <div className="mx-auto flex max-w-[58rem] flex-col items-center justify-center gap-4 text-center">
          <Heading variant="h2" className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl font-bold">
            Features <span className="text-green-500">Roadmap</span>
          </Heading>
          <p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7 text-balance">See what&apos;s coming next and share your ideas.</p>
          <Button asChild size="lg" className="mt-4 bg-green-500 hover:bg-green-600">
            <Link href="/roadmap">
              <Blocks className="h-5 w-5 scale-125" />
              View Roadmap
            </Link>
          </Button>
        </div>
      </section>
    </>
  )
}


--- File: components/home/feature-card.tsx ---

import { Card } from "@/components/ui/card"
import { Check, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { Heading } from "@/components/typography/heading"

interface FeatureCardProps {
  title: string
  description: string
  icon: React.ReactNode
  badgeText: string
  features: string[]
  envVars?: string[]
  preview: React.ReactNode
  gradientFrom?: string
  gradientTo?: string
  gradientCirclePosition?: string
  link?: string
  linkText?: string
}

export function FeatureCard({
  title,
  description,
  icon,
  badgeText,
  features,
  envVars,
  preview,
  gradientFrom = "from-primary/5",
  gradientTo = "to-primary/30",
  gradientCirclePosition = "30% 20%",
  link,
  linkText = "Try it",
}: FeatureCardProps) {
  return (
    <Card className="border-primary/20 bg-background/60 py-0 backdrop-blur-sm hover:bg-background/80 transition-all hover:shadow-md hover:shadow-primary/10 overflow-hidden">
      <div className="grid md:grid-cols-2 gap-0">
        <div className="p-6 flex flex-col justify-between">
          <div>
            <div className="inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm text-primary mb-4">
              {icon}
              {badgeText}
            </div>
            <Heading variant="h3" className="text-2xl font-bold mb-2">
              {title}
            </Heading>
            <p className="text-muted-foreground mb-4">{description}</p>
          </div>
          <ul className="space-y-2 mb-6">
            {features.map((feature, index) => (
              <li key={index} className="flex items-start">
                <Check className="mr-2 h-4 w-4 mt-1 text-green-500" />
                <span>{feature}</span>
              </li>
            ))}
          </ul>
          <div className="space-y-4">
            {envVars && envVars.length > 0 && (
              <div className="flex flex-wrap gap-x-2 gap-y-1 justify-start text-sm text-muted-foreground">
                {envVars.map((envVar) => (
                  <code key={envVar} className={`rounded-md bg-muted px-1.5 py-0.5 text-xs`}>
                    {envVar}
                  </code>
                ))}
              </div>
            )}
            {link && (
              <div>
                <Link href={link}>
                  <Button className="group">
                    {linkText}
                    <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
                  </Button>
                </Link>
              </div>
            )}
          </div>
        </div>
        <div className={cn("p-6 flex items-center justify-center relative overflow-hidden bg-gradient-to-br", gradientFrom, gradientTo)}>
          <div className={`absolute inset-0 bg-[radial-gradient(circle_at_${gradientCirclePosition},currentColor_0,transparent_60%)] opacity-20`} />
          <div className="relative z-10">{preview}</div>
        </div>
      </div>
    </Card>
  )
}


--- File: components/home/feature-icons.tsx ---

export function ContactIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
      <polyline points="22,6 12,13 2,6"></polyline>
    </svg>
  )
}

export function AuthIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
      <path d="M16 16v-3a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2v3"></path>
      <circle cx="12" cy="7" r="3"></circle>
      <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"></path>
    </svg>
  )
}

export function FileUploadIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3.5 w-3.5 mr-1">
      <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 1 1 0 9h-2.5"></path>
      <path d="M12 12v9"></path>
      <path d="m16 16-4-4-4 4"></path>
    </svg>
  )
}


--- File: components/home/feature-previews.tsx ---

export function ContactFormPreview() {
  return (
    <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-primary/20 shadow-xl w-full sm:w-96 max-w-md pt-6 px-6">
      <div className="space-y-4">
        <div className="space-y-2">
          <div className="h-4 w-24 bg-primary/20 rounded"></div>
          <div className="h-8 w-full bg-muted rounded"></div>
        </div>
        <div className="space-y-2">
          <div className="h-4 w-24 bg-primary/20 rounded"></div>
          <div className="h-8 w-full bg-muted rounded"></div>
        </div>
        <div className="space-y-2">
          <div className="h-4 w-24 bg-primary/20 rounded"></div>
          <div className="h-24 w-full bg-muted rounded"></div>
        </div>
        <div className="flex justify-end">
          <div className="h-10 w-28 bg-primary/70 rounded"></div>
        </div>
        <div className="h-4 w-full bg-muted/50 rounded"></div>
      </div>
    </div>
  )
}

export function AuthFlowPreview() {
  return (
    <div className="grid grid-cols-2 gap-4 relative z-10 w-full max-w-md">
      <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-secondary/20 shadow-xl p-4 flex flex-col items-center justify-center aspect-[4/5]">
        <div className="w-12 h-12 rounded-full bg-secondary/20 mb-4 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-secondary">
            <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
            <polyline points="10 17 15 12 10 7"></polyline>
            <line x1="15" y1="12" x2="3" y2="12"></line>
          </svg>
        </div>
        <div className="h-4 w-16 bg-fuchsia-100 rounded mb-2"></div>
        <div className="h-8 w-full bg-fuchsia-100 rounded mb-2"></div>
        <div className="h-8 w-full bg-fuchsia-100 rounded mb-4"></div>
        <div className="h-8 w-full bg-fuchsia-100 rounded"></div>
      </div>
      <div className="bg-background/80 backdrop-blur-sm rounded-lg border border-secondary/20 shadow-xl p-4 flex flex-col items-center justify-center aspect-[4/5]">
        <div className="w-12 h-12 rounded-full bg-secondary/20 mb-4 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-secondary">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <circle cx="9" cy="7" r="4"></circle>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
          </svg>
        </div>
        <div className="h-4 w-16 bg-fuchsia-100 rounded mb-2"></div>
        <div className="h-16 w-16 rounded-full bg-fuchsia-100 mb-4"></div>
        <div className="h-4 w-24 bg-fuchsia-100 rounded mb-2"></div>
        <div className="h-4 w-20 bg-fuchsia-100 rounded"></div>
      </div>
    </div>
  )
}


--- File: components/home/hero-section.tsx ---

"use client"

import Link from "next/link"
import { Github, PartyPopper } from "lucide-react"
import { useState, useEffect } from "react"
import { useUser } from "@clerk/nextjs"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import AnimateIn from "@/components/ui/animate-in"
import { CopyOneliner } from "../ui/copy-oneliner"
import { Heading } from "@/components/typography/heading"

type RandomStyle = {
  top: string
  left: string
  transform: string
  opacity: number
}

export function HeroSection({ gettingStarted, title }: { gettingStarted?: boolean; title?: string }) {
  const [randomStyles, setRandomStyles] = useState<RandomStyle[]>([])
  const { user } = useUser()

  useEffect(() => {
    const styles: RandomStyle[] = Array.from({ length: 50 }).map(() => ({
      top: `${Math.random() * 100}%`,
      left: `${Math.random() * 100}%`,
      transform: `scale(${Math.random() * 0.8 + 0.2})`,
      opacity: Math.random() * 0.5 + 0.1,
    }))
    setRandomStyles(styles)
  }, [])

  return (
    <section
      className={cn(
        "relative overflow-hidden dark:bg-linear-to-br dark:from-indigo-700/30 dark:via-purple-600 dark:to-blue-500/70 bg-linear-to-br from-indigo-700 via-purple-600 to-blue-600 py-12 text-white md:py-16 border-b-8 border-purple-100 dark:border-background/80",
        gettingStarted && "!pt-8 !pb-"
      )}
    >
      <AnimateIn from="opacity-0" to="opacity-100" duration={8000}>
        <div className="absolute inset-0 z-0 opacity-20">
          {randomStyles.map((style, i) => (
            <div key={i} className="absolute h-16 w-16 rounded-full bg-white animate-float" style={style} />
          ))}
        </div>
      </AnimateIn>

      <div className="absolute bottom-0 left-0 h-48 w-full bg-gradient-to-b from-transparent to-background/30 via-background/5 pointer-events-none" />

      <div className="container relative z-10">
        <div className="mx-auto max-w-3xl text-center">
          <Heading variant="h1" className="mb-6 sm:mb-12 scale-x-110 tracking-wide" style={{ textShadow: "0 0 10px rgba(255, 255, 255, 0.5)" }}>
            {title && title !== "Vibecode Party Starter" ? (
              title
            ) : (
              <>
                <span className="text-5xl tracking-wide">vibe code</span>
                <span className="block leading-12">party starter</span>
              </>
            )}
          </Heading>
          {!gettingStarted && (
            <>
              <Heading variant="h2" className="mb-8 text-lg md:text-xl font-medium text-balance">
                The Next.js starter project for vibe coding full stack web apps.
              </Heading>
              <div className="pt-4 pb-8 max-w-lg mx-auto">
                <CopyOneliner
                  iconClassName="w-4 sm:w-6 h-4 sm:h-6 opacity-70 mx-1"
                  className="bg-black/30 ring-8 hover:ring-[12px] transition-all duration-300 ease-in-out ring-black/10 tracking-wide font-semibold sm:text-lg"
                >
                  npx vibecode-party-starter
                </CopyOneliner>
              </div>
              <div className="flex flex-col justify-center gap-4 sm:gap-6 sm:flex-row pb-4 sm:pb-0">
                <>
                  <Button
                    asChild
                    size="xl"
                    className={cn(
                      "bg-gradient-to-br hover:drop-shadow-lg from-white via-fuchsia-50 to-fuchsia-300 text-indigo-900/80 hover:text-indigo-900 font-bold saturate-150 hover:scale-105 hover:saturate-200 transition-all duration-300 ease-out",
                      user === undefined ? "opacity-0 translate-y-4" : "opacity-100 translate-y-0"
                    )}
                  >
                    <Link href="https://github.com/johnpolacek/vibecode.party.starter">
                      View on GitHub
                      <Github className="ml-1 h-4 w-4 scale-150" />
                    </Link>
                  </Button>
                  <Button
                    asChild
                    size="xl"
                    className={cn(
                      "bg-gradient-to-br from-purple-400 via-purple-600 to-purple-500 saturate-[1.66] hover:saturate-[1.8] text-white hover:scale-105 transition-all duration-300 ease-out delay-100",
                      user === undefined ? "opacity-0 translate-y-4" : "opacity-100 translate-y-0"
                    )}
                  >
                    <Link href="https://vibecode.party">
                      Go Party
                      <PartyPopper className="ml-1 h-6 w-6 scale-150 text-yellow-300 relative -top-px" />
                    </Link>
                  </Button>
                </>
              </div>
            </>
          )}
        </div>
      </div>
    </section>
  )
}


--- File: components/home/sign-up-button.tsx ---

"use client"

import { Button } from "@/components/ui/button"
import { useUser, SignUpButton } from "@clerk/nextjs"

export function ParticipationButton() {
  const { isSignedIn, isLoaded } = useUser()

  if (!isLoaded || isSignedIn) {
    return null
  }

  return (
    <SignUpButton mode="modal">
      <Button size="xl">Sign Up to Participate</Button>
    </SignUpButton>
  )
}


--- File: components/layout/theme-provider.tsx ---

"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}



--- File: components/nav/admin-breadcrumb.tsx ---

import { Breadcrumb, type BreadcrumbItem } from "./breadcrumb"

interface AdminBreadcrumbProps {
  items: BreadcrumbItem[]
}

export function AdminBreadcrumb({ items }: AdminBreadcrumbProps) {
  return (
    <div className="mb-6">
      <Breadcrumb items={items} homeHref="/admin" homeLabel="Admin" />
    </div>
  )
}


--- File: components/nav/admin-nav-item.tsx ---

"use client"

import { useEffect, useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useUser } from "@clerk/nextjs"
import { cn } from "@/lib/utils"
import { ShieldCheckIcon } from "lucide-react"

export function AdminNavItem() {
  const pathname = usePathname()
  const { user, isSignedIn, isLoaded } = useUser()
  const [isAdmin, setIsAdmin] = useState(false)

  useEffect(() => {
    // Check if the user is an admin when the component mounts or user changes
    const checkAdminStatus = async () => {
      if (!isLoaded || !isSignedIn || !user?.id) {
        setIsAdmin(false)
        return
      }

      try {
        // Fetch admin status from the server
        const response = await fetch("/api/check-admin")
        if (response.ok) {
          const data = await response.json()
          setIsAdmin(data.isAdmin)
        } else {
          setIsAdmin(false)
        }
      } catch (error) {
        console.error("Error checking admin status:", error)
        setIsAdmin(false)
      }
    }

    checkAdminStatus()
  }, [isLoaded, isSignedIn, user?.id])

  // Only render the admin link if the user is an admin
  if (!isAdmin) {
    return null
  }

  return (
    <Link href="/admin" className={cn("text-sm font-medium transition-colors hover:text-primary flex items-center gap-1", pathname.startsWith("/admin") ? "text-primary" : "text-muted-foreground")}>
      <ShieldCheckIcon className="h-4 w-4" />
      Admin
    </Link>
  )
}


--- File: components/nav/auth-buttons.tsx ---

"use client"

import { SignedIn, SignedOut, SignInButton, SignUpButton, UserButton, useAuth } from "@clerk/nextjs"
import { Button } from "@/components/ui/button"

export default function AuthButtons() {
  const { isSignedIn } = useAuth()

  return (
    <div className={`flex items-center overflow-hidden transition-[width] duration-300 ease-in-out ${isSignedIn === undefined ? "w-[40px]" : isSignedIn ? "w-[40px]" : "w-[180px] sm:w-[180px]"}`}>
      <SignedOut>
        <div className="flex gap-2 whitespace-nowrap">
          <SignInButton mode="modal">
            <Button variant="outline">Sign In</Button>
          </SignInButton>
          <SignUpButton mode="modal">
            <Button variant="outline">Sign Up</Button>
          </SignUpButton>
        </div>
      </SignedOut>
      <SignedIn>
        <div className="flex items-center">
          <UserButton afterSignOutUrl="/" userProfileUrl="/account" />
        </div>
      </SignedIn>
    </div>
  )
}


--- File: components/nav/breadcrumb.tsx ---

import Link from "next/link"
import { ChevronRight } from "lucide-react"

export interface BreadcrumbItem {
  label: string
  href?: string
}

interface BreadcrumbProps {
  items: BreadcrumbItem[]
  homeHref?: string
  homeLabel?: string
}

export function Breadcrumb({ items, homeHref = "/", homeLabel = "Home" }: BreadcrumbProps) {
  return (
    <nav className="flex items-center text-sm text-muted-foreground">
      <Link href={homeHref} className="hover:text-foreground transition-colors">
        {homeLabel}
      </Link>
      {items.map((item, index) => (
        <div key={item.label} className="flex items-center">
          <ChevronRight className="h-4 w-4 mx-1" />
          {index === items.length - 1 ? (
            <span className="text-foreground font-medium">{item.label}</span>
          ) : (
            <Link href={item.href!} className="hover:text-foreground transition-colors">
              {item.label}
            </Link>
          )}
        </div>
      ))}
    </nav>
  )
}


--- File: components/nav/main-nav.tsx ---

"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { LogoLockup } from "@/components/graphics/logo-lockup"
import { cn } from "@/lib/utils"
import { navItems } from "@/lib/config/navigation"
import { siteConfig } from "@/lib/config"
import Image from "next/image"
import { Icon } from "@radix-ui/react-select"
interface MainNavProps {
  isAdmin: boolean
}

export function MainNav({ isAdmin }: MainNavProps) {
  const pathname = usePathname()

  return (
    <nav className="hidden md:flex md:gap-6 items-center">
      <Link href="/" className="mr-4">
        {siteConfig.title === ("Vibecode Party Starter" as string) ? (
          <LogoLockup />
        ) : (
          <div className="flex items-center gap-3">
            {siteConfig.logo ? <Image src={siteConfig.logo} alt={siteConfig.title + " logo"} width={32} height={32} /> : <Icon />}
            <span className="text-xl font-bold bg-clip-text text-transparent bg-linear-to-br dark:bg-linear-to-br from-blue-500 via-purple-700 to-indigo-500 dark:from-blue-300 dark:via-purple-500 dark:to-indigo-500">
              {siteConfig.title}
            </span>
          </div>
        )}
      </Link>

      {navItems.map((item) => (
        <Link key={item.href} href={item.href} className={cn("text-sm mt-1 font-medium transition-colors hover:text-primary", pathname === item.href ? "text-primary" : "text-muted-foreground")}>
          {item.title}
        </Link>
      ))}

      {isAdmin && (
        <Link href="/admin" className={cn("text-sm mt-1 font-medium transition-colors hover:text-primary", pathname?.startsWith("/admin") ? "text-primary" : "text-muted-foreground")}>
          Admin
        </Link>
      )}
    </nav>
  )
}


--- File: components/nav/mobile-nav.tsx ---

"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Menu, ShieldCheck } from "lucide-react"
import { LogoLockup } from "@/components/graphics/logo-lockup"
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { cn } from "@/lib/utils"
import { useUser } from "@clerk/nextjs"
import { useEffect } from "react"
import { SignedIn, SignedOut, SignInButton, SignUpButton, UserButton } from "@clerk/nextjs"
import { navItems } from "@/lib/config/navigation"
import { siteConfig } from "@/lib/config"
import Image from "next/image"

export function MobileNav() {
  const [open, setOpen] = useState(false)
  const [isAdmin, setIsAdmin] = useState(false)
  const pathname = usePathname()
  const { user, isSignedIn, isLoaded } = useUser()

  useEffect(() => {
    // Check if the user is an admin when the component mounts or user changes
    const checkAdminStatus = async () => {
      if (!isLoaded || !isSignedIn || !user?.id) {
        setIsAdmin(false)
        return
      }

      try {
        // Fetch admin status from the server
        const response = await fetch("/api/check-admin")
        if (response.ok) {
          const data = await response.json()
          setIsAdmin(data.isAdmin)
        } else {
          setIsAdmin(false)
        }
      } catch (error) {
        console.error("Error checking admin status:", error)
        setIsAdmin(false)
      }
    }

    checkAdminStatus()
  }, [isLoaded, isSignedIn, user?.id])

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="md:hidden">
          <Menu className="h-5 w-5" />
          <span className="sr-only">Toggle menu</span>
        </Button>
      </SheetTrigger>
      <SheetContent side="left" className="flex flex-col">
        <SheetTitle className="sr-only">Menu</SheetTitle>
        <div className="flex items-center justify-between border-b pb-4">
          <Link href="/" className="flex items-center space-x-2 pl-4 pt-4" onClick={() => setOpen(false)}>
            {siteConfig.title === ("Vibecode Party Starter" as string) ? (
              <LogoLockup />
            ) : (
              <div className="flex items-center gap-3">
                {siteConfig.logo && <Image src={siteConfig.logo} alt={siteConfig.title + " logo"} width={32} height={32} />}
                <span className="text-xl font-bold bg-clip-text text-transparent bg-linear-to-br dark:bg-linear-to-br from-blue-500 via-purple-700 to-indigo-500 dark:from-blue-300 dark:via-purple-500 dark:to-indigo-500">
                  {siteConfig.title}
                </span>
              </div>
            )}
          </Link>
        </div>
        <nav className="mt-6 flex flex-col gap-4 pl-10">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn("text-lg font-medium transition-colors hover:text-primary", pathname === item.href ? "text-primary" : "text-muted-foreground")}
              onClick={() => setOpen(false)}
            >
              {item.title}
            </Link>
          ))}

          {/* Admin link - only visible to admin users */}
          {isAdmin && (
            <Link
              href="/admin"
              className={cn("text-lg font-medium transition-colors hover:text-primary flex items-center gap-2", pathname.startsWith("/admin") ? "text-primary" : "text-muted-foreground")}
              onClick={() => setOpen(false)}
            >
              <ShieldCheck className="h-5 w-5" />
              Admin
            </Link>
          )}
        </nav>
        <div className="mt-auto flex flex-col gap-4 p-8">
          <SignedOut>
            <SignUpButton mode="modal">
              <Button className="w-full" onClick={() => setOpen(false)}>
                Sign Up
              </Button>
            </SignUpButton>
            <SignInButton mode="modal">
              <Button variant="outline" className="w-full" onClick={() => setOpen(false)}>
                Sign In
              </Button>
            </SignInButton>
          </SignedOut>
          <SignedIn>
            <div className="flex items-center justify-center">
              <UserButton afterSignOutUrl="/" userProfileUrl="/settings/profile" />
            </div>
          </SignedIn>
        </div>
      </SheetContent>
    </Sheet>
  )
}


--- File: components/nav/theme-toggle.tsx ---

"use client"

import { useTheme } from "next-themes"
import { Moon, Sun } from "lucide-react"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}



--- File: components/profile/profile-card.tsx ---

"use client"

import { useState } from "react"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { Calendar, CheckCircle, Globe, Twitter, Github, Link as LinkIcon } from "lucide-react"
import { EditProfile } from "@/components/edit-profile"
import { refreshProfile } from "@/app/_actions/profile"
import { Heading } from "@/components/typography/heading"

interface Link {
  label: string
  url: string
}

interface ProfileCardProps {
  user: {
    id: string
    username: string | null
    firstName: string | null
    lastName: string | null
    imageUrl: string
    unsafeMetadata?: Record<string, unknown>
  }
  bio: string
  status: string
  joinedDate: string
  path: string
}

export function ProfileCard({ user, bio, status, joinedDate, path }: ProfileCardProps) {
  const [isEditing, setIsEditing] = useState(false)
  const name = user.firstName && user.lastName ? `${user.firstName} ${user.lastName}` : user.firstName || user.username || "Anonymous"
  const website = user.unsafeMetadata?.website as string
  const twitter = user.unsafeMetadata?.twitter as string
  const github = user.unsafeMetadata?.github as string
  const customLinks = (user.unsafeMetadata?.customLinks as Link[]) || []

  const handleUpdate = async () => {
    setIsEditing(false)
    await refreshProfile(path)
  }

  if (isEditing) {
    return (
      <Card>
        <CardContent className="pt-6">
          <EditProfile user={user} bio={bio} onUpdate={handleUpdate} isEditing={true} onCancel={() => setIsEditing(false)} onStartEdit={() => setIsEditing(true)} />
        </CardContent>
      </Card>
    )
  }

  const hasLinks = website || twitter || github || customLinks.length > 0

  return (
    <Card>
      <CardContent className="pt-6">
        <div className="flex flex-col items-center text-center">
          <Link href={`/participants/${user.username}`} className="block hover:opacity-80 transition-opacity">
            <Avatar className="h-24 w-24 mb-4">
              {user.imageUrl && <AvatarImage src={user.imageUrl} alt={name} />}
              <AvatarFallback>{name.substring(0, 2).toUpperCase()}</AvatarFallback>
            </Avatar>
          </Link>
          <div className="space-y-2">
            <Link href={`/participants/${user.username}`} className="block hover:text-primary transition-colors">
              <Heading variant="h1" className="text-2xl font-bold">
                {name}
              </Heading>
            </Link>
            <div className="inline-flex items-center rounded-full bg-green-100 px-3 py-1 text-sm font-medium text-green-800 dark:bg-green-900 dark:text-green-100">
              <CheckCircle className="mr-1 h-3 w-3" />
              {status.charAt(0).toUpperCase() + status.slice(1)}
            </div>
          </div>

          {hasLinks && (
            <div className="flex flex-wrap gap-2 mt-4 justify-center">
              {website && (
                <Button size="sm" variant="outline" asChild>
                  <a href={website.startsWith("http") ? website : `https://${website}`} target="_blank" rel="noopener noreferrer">
                    <Globe className="mr-2 h-4 w-4" />
                    Website
                  </a>
                </Button>
              )}
              {twitter && (
                <Button size="sm" variant="outline" asChild>
                  <a href={`https://x.com/${twitter}`} target="_blank" rel="noopener noreferrer">
                    <Twitter className="mr-2 h-4 w-4" />
                    Twitter/X
                  </a>
                </Button>
              )}
              {github && (
                <Button size="sm" variant="outline" asChild>
                  <a href={`https://github.com/${github}`} target="_blank" rel="noopener noreferrer">
                    <Github className="mr-2 h-4 w-4" />
                    GitHub
                  </a>
                </Button>
              )}
              {customLinks.map((link, index) => (
                <Button key={index} size="sm" variant="outline" asChild>
                  <a href={link.url.startsWith("http") ? link.url : `https://${link.url}`} target="_blank" rel="noopener noreferrer">
                    <LinkIcon className="mr-2 h-4 w-4" />
                    {link.label}
                  </a>
                </Button>
              ))}
            </div>
          )}
        </div>

        <Separator className="my-6" />

        <div className="space-y-4">
          <div>
            <div className="flex items-center justify-between mb-2">
              <Heading variant="h2" className="font-medium">
                About
              </Heading>
              <EditProfile user={user} bio={bio} onUpdate={handleUpdate} isEditing={false} onCancel={() => setIsEditing(false)} onStartEdit={() => setIsEditing(true)} />
            </div>
            <p className={cn("text-sm", bio ? "text-foreground" : "text-muted-foreground italic")}>{bio || "No bio created yet"}</p>
          </div>

          <div className="flex items-center gap-2">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span className="text-sm">Joined on {joinedDate}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}


--- File: components/typography/heading.tsx ---

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const headingVariants = cva("text-balance font-extrabold", {
  variants: {
    variant: {
      h1: "text-4xl sm:text-5xl md:text-7xl scale-x-110 tracking-wide",
      h2: "text-3xl sm:text-5xl font-extrabold",
      h3: "text-2xl sm:text-4xl font-extrabold text-primary",
      h4: "text-xl sm:text-2xl font-bold",
      h5: "text-lg sm:text-xl font-bold",
      h6: "text-base sm:text-lg font-bold",
    },
  },
  defaultVariants: {
    variant: "h1",
  },
})

type HeadingVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

interface HeadingProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "className">, Omit<VariantProps<typeof headingVariants>, "as"> {
  variant: HeadingVariant
  as?: HeadingVariant
  className?: string
}

export function Heading({ className, variant, as, ...props }: HeadingProps) {
  const Tag = as || variant

  return (
    <Tag
      className={cn(
        headingVariants({
          variant,
          className,
        })
      )}
      {...props}
    />
  )
}


--- File: components/typography/markdown.tsx ---

import ReactMarkdown from "react-markdown"

const Markdown = ReactMarkdown as unknown as React.FC<{ children: string }>

export { Markdown }


--- File: components/ui/accordion.tsx ---

"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
}

function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return <AccordionPrimitive.Item data-slot="accordion-item" className={cn("border-b last:border-b-0", className)} {...props} />
}

function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180 cursor-pointer",
          className
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content data-slot="accordion-content" className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm" {...props}>
      <div className={cn("pt-0 pb-4", className)}>{children}</div>
    </AccordionPrimitive.Content>
  )
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }


--- File: components/ui/alert-dialog.tsx ---

"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<React.ElementRef<typeof AlertDialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>>(
  ({ className, ...props }, ref) => (
    <AlertDialogPrimitive.Overlay
      className={cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)}
      {...props}
      ref={ref}
    />
  )
)
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<React.ElementRef<typeof AlertDialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>>(
  ({ className, ...props }, ref) => (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        ref={ref}
        className={cn(
          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
          className
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
)
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<React.ElementRef<typeof AlertDialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<React.ElementRef<typeof AlertDialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>>(
  ({ className, ...props }, ref) => <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
)
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<React.ElementRef<typeof AlertDialogPrimitive.Action>, React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<React.ElementRef<typeof AlertDialogPrimitive.Cancel>, React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>>(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Cancel ref={ref} className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} {...props} />
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
  AlertDialog,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
}


--- File: components/ui/alert.tsx ---

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(
  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "bg-card text-card-foreground",
        destructive:
          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
        className
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
        className
      )}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription }


--- File: components/ui/animate-in.tsx ---

import React, { useEffect, useState } from "react"
import type { JSX } from "react"
import { cn } from "@/lib/utils"

const AnimateIn = ({
  children,
  delay = 0,
  duration = 500,
  className = "",
  from,
  to,
  style,
  as = "div",
}: {
  from: string
  to: string
  children?: React.ReactNode
  delay?: number
  duration?: number
  className?: string
  style?: React.CSSProperties
  as?: keyof JSX.IntrinsicElements
}) => {
  const [animate, setAnimate] = useState(from)
  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)

  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")

    const mediaQueryChangeHandler = (e: MediaQueryListEvent) => {
      setPrefersReducedMotion(e.matches)
    }

    setPrefersReducedMotion(mediaQuery.matches)
    mediaQuery.addEventListener("change", mediaQueryChangeHandler)

    return () => {
      mediaQuery.removeEventListener("change", mediaQueryChangeHandler)
    }
  }, [])

  useEffect(() => {
    if (prefersReducedMotion) {
      // If the user prefers reduced motion, skip the animation
      setAnimate(to)
      return
    }

    const timer = setTimeout(() => {
      setAnimate(to)
    }, delay)

    return () => clearTimeout(timer)
  }, [delay, to, prefersReducedMotion])

  return React.createElement(
    as,
    {
      className: cn("transition-all ease-in-out", className, animate),
      style: { transitionDuration: prefersReducedMotion ? "0ms" : `${duration}ms`, ...style },
    },
    children
  )
}

export default AnimateIn


--- File: components/ui/avatar.tsx ---

"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const AvatarContext = React.createContext<{ hasError: boolean; setHasError: (error: boolean) => void }>({
  hasError: false,
  setHasError: () => {},
})

function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  const [hasError, setHasError] = React.useState(false)

  return (
    <AvatarContext.Provider value={{ hasError, setHasError }}>
      <AvatarPrimitive.Root data-slot="avatar" className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)} {...props} />
    </AvatarContext.Provider>
  )
}

function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  const { setHasError } = React.useContext(AvatarContext)
  const [isLoaded, setIsLoaded] = React.useState(false)

  return (
    <AvatarPrimitive.Image
      data-slot="avatar-image"
      className={cn("aspect-square size-full transition-opacity duration-300", isLoaded ? "opacity-100" : "opacity-0", className)}
      onLoad={() => setIsLoaded(true)}
      onError={() => {
        setHasError(true)
        setIsLoaded(false)
      }}
      {...props}
    />
  )
}

function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  const { hasError } = React.useContext(AvatarContext)

  return (
    <AvatarPrimitive.Fallback
      data-slot="avatar-fallback"
      className={cn("bg-muted flex size-full items-center justify-center rounded-full transition-opacity duration-200", !hasError && "hidden", className)}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }


--- File: components/ui/badge.tsx ---

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
        secondary:
          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
        destructive:
          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
        outline:
          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<"span"> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "span"

  return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }


--- File: components/ui/button.tsx ---

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-all duration-300 ease-in-out select-none",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow-2xs hover:bg-primary/90",
        destructive: "bg-destructive text-white shadow-2xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
        outline: "border border-input bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground shadow-2xs hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        xl: "h-12 rounded-md text-lg px-8 has-[>svg]:px-6",
        icon: "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : "button"

  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
}

export { Button, buttonVariants }


--- File: components/ui/calendar.tsx ---

"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: cn(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
          props.mode === "range"
            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
            : "[&:has([aria-selected])]:rounded-md"
        ),
        day: cn(buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
        day_range_start: "day-range-start",
        day_range_end: "day-range-end",
        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ className, ...props }) => <ChevronLeft className={cn("h-4 w-4", className)} {...props} />,
        IconRight: ({ className, ...props }) => <ChevronRight className={cn("h-4 w-4", className)} {...props} />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }


--- File: components/ui/card.tsx ---

import * as React from "react"

import { cn } from "@/lib/utils"

function Card({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card" className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-xs", className)} {...props} />
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-header" className={cn("flex flex-col gap-1.5 px-6", className)} {...props} />
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-content" className={cn("px-6 grow", className)} {...props} />
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return <div data-slot="card-footer" className={cn("flex items-center px-6", className)} {...props} />
}

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }


--- File: components/ui/checkbox.tsx ---

"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-2xs transition-shadow outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="flex items-center justify-center text-current transition-none"
      >
        <CheckIcon className="size-3.5" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }


--- File: components/ui/collapsible.tsx ---

"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
  return (
    <CollapsiblePrimitive.CollapsibleTrigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
  return (
    <CollapsiblePrimitive.CollapsibleContent
      data-slot="collapsible-content"
      {...props}
    />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }


--- File: components/ui/container.tsx ---

import { cn } from "@/lib/utils"

export function Container({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("mx-auto w-full max-w-7xl px-6 lg:px-8", className)} {...props} />
}


--- File: components/ui/copy-oneliner.tsx ---

"use client"
import { Copy, Terminal } from "lucide-react"
import { cn } from "@/lib/utils"
import { useState } from "react"
import { Check } from "lucide-react"

interface CopyOnelinerProps {
  children: string
  className?: string
  iconClassName?: string
}

export function CopyOneliner({ children, className, iconClassName }: CopyOnelinerProps) {
  const [copied, setCopied] = useState(false)

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(children)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    } catch (err) {
      console.error("Failed to copy text: ", err)
    }
  }

  return (
    <div onClick={copyToClipboard} className={cn("relative text-sm py-3 px-3 flex items-center gap-2 rounded-md border text-left mx-auto -mt-4 font-mono", "cursor-pointer", className)}>
      <Terminal className={cn("w-4 h-4 opacity-50", iconClassName)} />
      <div className="flex-1">{children}</div>
      {copied ? <Check className="w-5 h-5 mr-1 scale-125 text-green-600" /> : <Copy className="w-5 h-5 mr-1 opacity-50" />}
    </div>
  )
}


--- File: components/ui/copy-to-clipboard.tsx ---

"use client"

import { useState } from "react"
import { cn } from "@/lib/utils"
import { Check, Copy } from "lucide-react"

interface CopyToClipboardProps {
  children: string
  className?: string
  iconClassName?: string
  timeout?: number
  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
  hideContent?: boolean
}

const positionClasses = {
  "top-right": "right-5 top-5",
  "top-left": "left-5 top-5",
  "bottom-right": "right-5 bottom-5",
  "bottom-left": "left-5 bottom-5",
}

export function CopyToClipboard({ children, className, iconClassName, timeout = 1000, position = "top-right", hideContent = false }: CopyToClipboardProps) {
  const [copied, setCopiedState] = useState(false)

  const handleCopy = () => {
    if (copied) return
    navigator.clipboard.writeText(children)
    setCopiedState(true)
    setTimeout(() => {
      setCopiedState(false)
    }, timeout)
  }

  return (
    <>
      <button
        className={cn("absolute p-1.5 border dark:border-neutral-800 rounded-md z-[2] backdrop-blur-2xl cursor-pointer", positionClasses[position], copied && "text-green-500", className)}
        onClick={handleCopy}
      >
        {copied ? <Check className={cn("w-4.5 h-4.5 scale-110", iconClassName)} /> : <Copy className={cn("w-4.5 h-4.5", iconClassName)} />}
      </button>
      {!hideContent && children}
    </>
  )
}


--- File: components/ui/date-picker.tsx ---

"use client"

import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface DatePickerProps {
  date: Date | undefined
  setDate: (date: Date | undefined) => void
  label?: string
  className?: string
}

export function DatePicker({ date, setDate, label = "Pick a date", className }: DatePickerProps) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant={"outline"} className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground", className)}>
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>{label}</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start">
        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
      </PopoverContent>
    </Popover>
  )
}

export function DateRangePicker({
  startDate,
  endDate,
  setStartDate,
  setEndDate,
  startLabel = "Start date",
  endLabel = "End date",
  className,
}: {
  startDate: Date | undefined
  endDate: Date | undefined
  setStartDate: (date: Date | undefined) => void
  setEndDate: (date: Date | undefined) => void
  startLabel?: string
  endLabel?: string
  className?: string
}) {
  return (
    <div className={cn("flex flex-col space-y-2 sm:flex-row sm:space-x-2 sm:space-y-0", className)}>
      <DatePicker date={startDate} setDate={setStartDate} label={startLabel} className="flex-1" />
      <DatePicker date={endDate} setDate={setEndDate} label={endLabel} className="flex-1" />
    </div>
  )
}


--- File: components/ui/dialog.tsx ---

"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
        className
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
          className
        )}
        {...props}
      >
        {children}
        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
          <XIcon />
          <span className="sr-only">Close</span>
        </DialogPrimitive.Close>
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-header"
      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn("text-lg leading-none font-semibold", className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}


--- File: components/ui/dropdown-menu.tsx ---

"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function DropdownMenu({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
}

function DropdownMenuPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
  return (
    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
  )
}

function DropdownMenuTrigger({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
  return (
    <DropdownMenuPrimitive.Trigger
      data-slot="dropdown-menu-trigger"
      {...props}
    />
  )
}

function DropdownMenuContent({
  className,
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        data-slot="dropdown-menu-content"
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
          className
        )}
        {...props}
      />
    </DropdownMenuPrimitive.Portal>
  )
}

function DropdownMenuGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
  return (
    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
  )
}

function DropdownMenuItem({
  className,
  inset,
  variant = "default",
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
  inset?: boolean
  variant?: "default" | "destructive"
}) {
  return (
    <DropdownMenuPrimitive.Item
      data-slot="dropdown-menu-item"
      data-inset={inset}
      data-variant={variant}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground [svg]:*:data-[variant=destructive]:text-destructive-foreground! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function DropdownMenuCheckboxItem({
  className,
  children,
  checked,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
  return (
    <DropdownMenuPrimitive.CheckboxItem
      data-slot="dropdown-menu-checkbox-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.CheckboxItem>
  )
}

function DropdownMenuRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
  return (
    <DropdownMenuPrimitive.RadioGroup
      data-slot="dropdown-menu-radio-group"
      {...props}
    />
  )
}

function DropdownMenuRadioItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
  return (
    <DropdownMenuPrimitive.RadioItem
      data-slot="dropdown-menu-radio-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
        <DropdownMenuPrimitive.ItemIndicator>
          <CircleIcon className="size-2 fill-current" />
        </DropdownMenuPrimitive.ItemIndicator>
      </span>
      {children}
    </DropdownMenuPrimitive.RadioItem>
  )
}

function DropdownMenuLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.Label
      data-slot="dropdown-menu-label"
      data-inset={inset}
      className={cn(
        "px-2 py-1.5 text-sm font-medium data-inset:pl-8",
        className
      )}
      {...props}
    />
  )
}

function DropdownMenuSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
  return (
    <DropdownMenuPrimitive.Separator
      data-slot="dropdown-menu-separator"
      className={cn("bg-border -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function DropdownMenuShortcut({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="dropdown-menu-shortcut"
      className={cn(
        "text-muted-foreground ml-auto text-xs tracking-widest",
        className
      )}
      {...props}
    />
  )
}

function DropdownMenuSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
}

function DropdownMenuSubTrigger({
  className,
  inset,
  children,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuPrimitive.SubTrigger
      data-slot="dropdown-menu-sub-trigger"
      data-inset={inset}
      className={cn(
        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8",
        className
      )}
      {...props}
    >
      {children}
      <ChevronRightIcon className="ml-auto size-4" />
    </DropdownMenuPrimitive.SubTrigger>
  )
}

function DropdownMenuSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
  return (
    <DropdownMenuPrimitive.SubContent
      data-slot="dropdown-menu-sub-content"
      className={cn(
        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
        className
      )}
      {...props}
    />
  )
}

export {
  DropdownMenu,
  DropdownMenuPortal,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
}


--- File: components/ui/image-upload.tsx ---

"use client"

import { useCallback, useState } from "react"
import { Button } from "@/components/ui/button"
import { ImagePlus, X } from "lucide-react"
import Image from "next/image"
import { toast } from "sonner"
import { useFileUpload } from "@/lib/upload-utils"

interface ImageUploadProps {
  value: string
  onChange: (url: string) => void
  onRemove: () => void
  folder?: string
  id?: string
}

export function ImageUpload({ id, value, onChange, onRemove, folder = "uploads" }: ImageUploadProps) {
  const [isUploading, setIsUploading] = useState(false)
  const { upload } = useFileUpload({
    folder,
    allowedTypes: ["image/jpeg", "image/png", "image/webp", "image/gif"],
  })

  const handleUpload = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      try {
        const file = e.target.files?.[0]
        if (!file) return

        setIsUploading(true)
        const imageUrl = await upload(file)
        onChange(imageUrl)
        toast.success("Image uploaded successfully!")
      } catch (error) {
        console.error("Error uploading image:", error)
        toast.error(error instanceof Error ? error.message : "Failed to upload image")
      } finally {
        setIsUploading(false)
      }
    },
    [onChange, upload]
  )

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="relative aspect-video w-full overflow-hidden rounded-lg border border-border">
        {value ? (
          <>
            <Image src={value} alt="Project Cover" fill className="object-cover" />
            <Button variant="destructive" size="icon" className="absolute right-2 top-2" onClick={onRemove}>
              <X className="h-4 w-4" />
            </Button>
          </>
        ) : (
          <label className="flex h-full w-full cursor-pointer items-center justify-center bg-muted">
            <div className="flex flex-col items-center gap-2">
              <ImagePlus className="h-8 w-8 text-muted-foreground" />
              <span className="text-sm text-muted-foreground">Upload Cover Image</span>
            </div>
            <input id={id} type="file" accept="image/*" className="hidden" onChange={handleUpload} disabled={isUploading} />
          </label>
        )}
      </div>
    </div>
  )
}


--- File: components/ui/input.tsx ---

import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-2xs transition-[color,box-shadow] outline-hidden file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }


--- File: components/ui/label.tsx ---

"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"

import { cn } from "@/lib/utils"

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

export { Label }


--- File: components/ui/popover.tsx ---

"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

function Popover({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
  return <PopoverPrimitive.Root data-slot="popover" {...props} />
}

function PopoverTrigger({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}

function PopoverContent({
  className,
  align = "center",
  sideOffset = 4,
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
  return (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content
        data-slot="popover-content"
        align={align}
        sideOffset={sideOffset}
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
          className
        )}
        {...props}
      />
    </PopoverPrimitive.Portal>
  )
}

function PopoverAnchor({
  ...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}

export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }


--- File: components/ui/progress.tsx ---

"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="bg-primary h-full w-full flex-1 transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }


--- File: components/ui/radio-group.tsx ---

"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn("grid gap-3", className)}
      {...props}
    />
  )
}

function RadioGroupItem({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radio-group-item"
      className={cn(
        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-2xs transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radio-group-indicator"
        className="relative flex items-center justify-center"
      >
        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
}

export { RadioGroup, RadioGroupItem }


--- File: components/ui/scroll-area.tsx ---

"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root
    ref={ref}
    className={cn("relative overflow-hidden", className)}
    {...props}
  >
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
      {children}
    </ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
        "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }


--- File: components/ui/select.tsx ---

"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Select({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
  return <SelectPrimitive.Root data-slot="select" {...props} />
}

function SelectGroup({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
  return <SelectPrimitive.Group data-slot="select-group" {...props} />
}

function SelectValue({
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
  return <SelectPrimitive.Value data-slot="select-value" {...props} />
}

function SelectTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
  return (
    <SelectPrimitive.Trigger
      data-slot="select-trigger"
      className={cn(
        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      {children}
      <SelectPrimitive.Icon asChild>
        <ChevronDownIcon className="size-4 opacity-50" />
      </SelectPrimitive.Icon>
    </SelectPrimitive.Trigger>
  )
}

function SelectContent({
  className,
  children,
  position = "popper",
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
  return (
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        data-slot="select-content"
        className={cn(
          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
          position === "popper" &&
            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className
        )}
        position={position}
        {...props}
      >
        <SelectScrollUpButton />
        <SelectPrimitive.Viewport
          className={cn(
            "p-1",
            position === "popper" &&
              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
          )}
        >
          {children}
        </SelectPrimitive.Viewport>
        <SelectScrollDownButton />
      </SelectPrimitive.Content>
    </SelectPrimitive.Portal>
  )
}

function SelectLabel({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
  return (
    <SelectPrimitive.Label
      data-slot="select-label"
      className={cn("px-2 py-1.5 text-sm font-medium", className)}
      {...props}
    />
  )
}

function SelectItem({
  className,
  children,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
  return (
    <SelectPrimitive.Item
      data-slot="select-item"
      className={cn(
        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
        className
      )}
      {...props}
    >
      <span className="absolute right-2 flex size-3.5 items-center justify-center">
        <SelectPrimitive.ItemIndicator>
          <CheckIcon className="size-4" />
        </SelectPrimitive.ItemIndicator>
      </span>
      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
    </SelectPrimitive.Item>
  )
}

function SelectSeparator({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
  return (
    <SelectPrimitive.Separator
      data-slot="select-separator"
      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
      {...props}
    />
  )
}

function SelectScrollUpButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
  return (
    <SelectPrimitive.ScrollUpButton
      data-slot="select-scroll-up-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronUpIcon className="size-4" />
    </SelectPrimitive.ScrollUpButton>
  )
}

function SelectScrollDownButton({
  className,
  ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
  return (
    <SelectPrimitive.ScrollDownButton
      data-slot="select-scroll-down-button"
      className={cn(
        "flex cursor-default items-center justify-center py-1",
        className
      )}
      {...props}
    >
      <ChevronDownIcon className="size-4" />
    </SelectPrimitive.ScrollDownButton>
  )
}

export {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectScrollDownButton,
  SelectScrollUpButton,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
}


--- File: components/ui/separator.tsx ---

"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
  return (
    <SeparatorPrimitive.Root
      data-slot="separator-root"
      decorative={decorative}
      orientation={orientation}
      className={cn(
        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
        className
      )}
      {...props}
    />
  )
}

export { Separator }


--- File: components/ui/sheet.tsx ---

"use client"

import * as React from "react"
import * as SheetPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"

import { cn } from "@/lib/utils"

function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  return <SheetPrimitive.Root data-slot="sheet" {...props} />
}

function SheetTrigger({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
}

function SheetClose({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
}

function SheetPortal({
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
  return (
    <SheetPrimitive.Overlay
      data-slot="sheet-overlay"
      className={cn(
        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
        className
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = "right",
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
  side?: "top" | "right" | "bottom" | "left"
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Content
        data-slot="sheet-content"
        className={cn(
          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
          side === "right" &&
            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
          side === "left" &&
            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
          side === "top" &&
            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
          side === "bottom" &&
            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
          className
        )}
        {...props}
      >
        {children}
        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
          <XIcon className="size-4" />
          <span className="sr-only">Close</span>
        </SheetPrimitive.Close>
      </SheetPrimitive.Content>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("flex flex-col gap-1.5 p-4", className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  )
}

function SheetTitle({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn("text-foreground font-semibold", className)}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn("text-muted-foreground text-sm", className)}
      {...props}
    />
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
}


--- File: components/ui/sonner.tsx ---

"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton:
            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
          cancelButton:
            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }


--- File: components/ui/switch.tsx ---

"use client"

import * as React from "react"
import * as SwitchPrimitive from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

function Switch({
  className,
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
        )}
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }


--- File: components/ui/table.tsx ---

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

function Table({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <div
      data-slot="table-container"
      className="relative w-full overflow-x-auto"
    >
      <table
        data-slot="table"
        className={cn("w-full caption-bottom text-sm", className)}
        {...props}
      />
    </div>
  )
}

function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
  return (
    <thead
      data-slot="table-header"
      className={cn("[&_tr]:border-b", className)}
      {...props}
    />
  )
}

function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
  return (
    <tbody
      data-slot="table-body"
      className={cn("[&_tr:last-child]:border-0", className)}
      {...props}
    />
  )
}

function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
  return (
    <tfoot
      data-slot="table-footer"
      className={cn(
        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
        className
      )}
      {...props}
    />
  )
}

function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
  return (
    <tr
      data-slot="table-row"
      className={cn(
        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
        className
      )}
      {...props}
    />
  )
}

function TableHead({ className, ...props }: React.ComponentProps<"th">) {
  return (
    <th
      data-slot="table-head"
      className={cn(
        "text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props}
    />
  )
}

function TableCell({ className, ...props }: React.ComponentProps<"td">) {
  return (
    <td
      data-slot="table-cell"
      className={cn(
        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
        className
      )}
      {...props}
    />
  )
}

function TableCaption({
  className,
  ...props
}: React.ComponentProps<"caption">) {
  return (
    <caption
      data-slot="table-caption"
      className={cn("text-muted-foreground mt-4 text-sm", className)}
      {...props}
    />
  )
}

export {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableHead,
  TableRow,
  TableCell,
  TableCaption,
}


--- File: components/ui/tabs.tsx ---

"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />
}

function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
  return <TabsPrimitive.List data-slot="tabs-list" className={cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1", className)} {...props} />
}

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer",
        className
      )}
      {...props}
    />
  )
}

function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-hidden", className)} {...props} />
}

export { Tabs, TabsList, TabsTrigger, TabsContent }


--- File: components/ui/textarea.tsx ---

import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }


--- File: components.json ---

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

--- File: convex/README.md ---

# Welcome to your Convex functions directory!

Write your Convex functions here.
See https://docs.convex.dev/functions for more.

A query function that takes two arguments looks like:

```ts
// functions.js
import { query } from "./_generated/server";
import { v } from "convex/values";

export const myQueryFunction = query({
  // Validators for arguments.
  args: {
    first: v.number(),
    second: v.string(),
  },

  // Function implementation.
  handler: async (ctx, args) => {
    // Read the database as many times as you need here.
    // See https://docs.convex.dev/database/reading-data.
    const documents = await ctx.db.query("tablename").collect();

    // Arguments passed from the client are properties of the args object.
    console.log(args.first, args.second);

    // Write arbitrary JavaScript here: filter, aggregate, build derived data,
    // remove non-public properties, or create new objects.
    return documents;
  },
});
```

Using this query function in a React component looks like:

```ts
const data = useQuery(api.functions.myQueryFunction, {
  first: 10,
  second: "hello",
});
```

A mutation function looks like:

```ts
// functions.js
import { mutation } from "./_generated/server";
import { v } from "convex/values";

export const myMutationFunction = mutation({
  // Validators for arguments.
  args: {
    first: v.string(),
    second: v.string(),
  },

  // Function implementation.
  handler: async (ctx, args) => {
    // Insert or modify documents in the database here.
    // Mutations can also read from the database like queries.
    // See https://docs.convex.dev/database/writing-data.
    const message = { body: args.first, author: args.second };
    const id = await ctx.db.insert("messages", message);

    // Optionally, return a value from your mutation.
    return await ctx.db.get(id);
  },
});
```

Using this mutation function in a React component looks like:

```ts
const mutation = useMutation(api.functions.myMutationFunction);
function handleButtonPress() {
  // fire and forget, the most common way to use mutations
  mutation({ first: "Hello!", second: "me" });
  // OR
  // use the result once the mutation has completed
  mutation({ first: "Hello!", second: "me" }).then((result) =>
    console.log(result),
  );
}
```

Use the Convex CLI to push your functions to a deployment. See everything
the Convex CLI can do by running `npx convex -h` in your project root
directory. To learn more, launch the docs with `npx convex docs`.


--- File: convex/mailingList.ts ---

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";
import { Doc, Id } from "./_generated/dataModel";
import {
  ConvexResponse,
  getCurrentTimestamp,
  getBaseFields,
  handleError,
  handleSuccess,
} from "./utils";

// Types
export type MailingListSubscription = Doc<"mailing_list_subscriptions">;

// Queries
export const getSubscriptions = query({
  handler: async (ctx) => {
    try {
      return await ctx.db
        .query("mailing_list_subscriptions")
        .order("desc")
        .collect();
    } catch (error) {
      console.error("Error getting subscriptions:", error);
      throw error;
    }
  },
});

export const getSubscriptionByEmail = query({
  args: { email: v.string() },
  handler: async (ctx, args) => {
    try {
      return await ctx.db
        .query("mailing_list_subscriptions")
        .withIndex("by_email", (q) => q.eq("email", args.email))
        .first();
    } catch (error) {
      console.error("Error getting subscription by email:", error);
      throw error;
    }
  },
});

// Mutations
export const subscribe = mutation({
  args: {
    userId: v.string(),
    email: v.string(),
    name: v.optional(v.string()),
    preferences: v.object({
      marketing: v.boolean(),
      updates: v.boolean(),
    }),
  },
  handler: async (ctx, args) => {
    try {
      // Check if email already exists
      const existing = await ctx.db
        .query("mailing_list_subscriptions")
        .withIndex("by_email", (q) => q.eq("email", args.email))
        .first();

      if (existing) {
        throw new Error("Email already subscribed");
      }

      const now = Date.now();
      const subscription = {
        userId: args.userId,
        email: args.email,
        name: args.name,
        preferences: args.preferences,
        subscribedAt: now,
        unsubscribedAt: null,
        createdAt: now,
        updatedAt: now,
      };

      const id = await ctx.db.insert("mailing_list_subscriptions", subscription);
      return await ctx.db.get(id);
    } catch (error) {
      console.error("Error subscribing:", error);
      throw error;
    }
  },
});

export const unsubscribe = mutation({
  args: { 
    email: v.string(),
  },
  handler: async (ctx, args) => {
    try {
      console.log('[unsubscribe] Attempting to unsubscribe email:', args.email);
      const subscription = await ctx.db
        .query("mailing_list_subscriptions")
        .withIndex("by_email", (q) => q.eq("email", args.email))
        .first();
      console.log('[unsubscribe] Subscription found:', subscription);
      if (!subscription) {
        throw new Error("Subscription not found");
      }
      const now = Date.now();
      await ctx.db.patch(subscription._id, {
        unsubscribedAt: now,
        updatedAt: now,
      });
      return true;
    } catch (error) {
      console.error("Error unsubscribing:", error);
      throw error;
    }
  },
});

export const deleteSubscription = mutation({
  args: { id: v.id("mailing_list_subscriptions") },
  handler: async (ctx, args) => {
    await ctx.db.delete(args.id);
  },
});

export const updatePreferences = mutation({
  args: {
    userId: v.string(),
    preferences: v.object({
      marketing: v.boolean(),
      updates: v.boolean(),
    }),
  },
  handler: async (ctx, args) => {
    // Find the active subscription for this user
    const subscription = await ctx.db
      .query("mailing_list_subscriptions")
      .withIndex("by_user", (q) => q.eq("userId", args.userId))
      .first();

    if (!subscription || subscription.unsubscribedAt !== null) {
      throw new Error("Active subscription not found");
    }

    await ctx.db.patch(subscription._id, {
      preferences: args.preferences,
      updatedAt: Date.now(),
    });

    return true;
  },
}); 

--- File: convex/schema.ts ---

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

// Define the base fields that all documents will have
const baseFields = {
  createdAt: v.number(), // Unix timestamp
  updatedAt: v.number(), // Unix timestamp
};

// Define your schema
export default defineSchema({
  visits: defineTable({
    path: v.string(),
    userId: v.union(v.string(), v.null()),
    metadata: v.any(),
    createdAt: v.number(),
    updatedAt: v.number(),
  }).index("by_user", ["userId"])
    .index("by_path", ["path"])
    .index("by_created", ["createdAt"]),

  mailing_list_subscriptions: defineTable({
    userId: v.string(),
    email: v.string(),
    name: v.optional(v.string()),
    preferences: v.object({
      marketing: v.boolean(),
      updates: v.boolean(),
    }),
    subscribedAt: v.number(),
    unsubscribedAt: v.union(v.number(), v.null()),
    createdAt: v.number(),
    updatedAt: v.number(),
  }).index("by_email", ["email"])
    .index("by_user", ["userId"])
    .index("by_subscribed", ["subscribedAt"]),
}); 

--- File: convex/testing.ts ---

import { v } from "convex/values"
import { mutation, query } from "./_generated/server"

// Define allowed table names for type safety
const ALLOWED_TABLES = ["visits", "mailing_list_subscriptions"] as const
type TableName = typeof ALLOWED_TABLES[number]

function isTestOrDevEnv() {
  return process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development";
}

/**
 * Delete all documents from a table
 * This mutation should only be available in test environments
 */
export const deleteAll = mutation({
  args: { tableName: v.union(v.literal("visits"), v.literal("mailing_list_subscriptions")) },
  handler: async (ctx, args) => {
    if (!isTestOrDevEnv()) {
      throw new Error("This operation is only allowed in test or development environments");
    }
    const documents = await ctx.db.query(args.tableName).collect()
    for (const doc of documents) {
      await ctx.db.delete(doc._id)
    }
    return { success: true }
  },
})

/**
 * Count documents in a table
 * This query should only be available in test environments
 */
export const countDocuments = query({
  args: { tableName: v.union(v.literal("visits"), v.literal("mailing_list_subscriptions")) },
  handler: async (ctx, args) => {
    if (!isTestOrDevEnv()) {
      throw new Error("This operation is only allowed in test or development environments");
    }
    const documents = await ctx.db.query(args.tableName).collect()
    return documents.length
  },
})

/**
 * Seed test data for visits and mailing_list_subscriptions
 * This mutation should only be available in test environments
 */
export const seedTestData = mutation({
  args: {},
  handler: async (ctx) => {
    if (!isTestOrDevEnv()) {
      throw new Error("This operation is only allowed in test or development environments");
    }
    // Seed visits
    await ctx.db.insert("visits", {
      path: "/test-path",
      userId: "test-user",
      metadata: { test: true },
      createdAt: Date.now(),
      updatedAt: Date.now(),
    });
    // Seed mailing list subscriptions
    await ctx.db.insert("mailing_list_subscriptions", {
      userId: "test-user",
      email: "test@example.com",
      name: "Test User",
      preferences: { marketing: true, updates: true },
      subscribedAt: Date.now(),
      unsubscribedAt: null,
      createdAt: Date.now(),
      updatedAt: Date.now(),
    });
    return { success: true };
  },
}); 

--- File: convex/tsconfig.json ---

{
  /* This TypeScript project config describes the environment that
   * Convex functions run in and is used to typecheck them.
   * You can modify it, but some settings required to use Convex.
   */
  "compilerOptions": {
    /* These settings are not required by Convex and can be modified. */
    "allowJs": true,
    "strict": true,
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,

    /* These compiler options are required by Convex */
    "target": "ESNext",
    "lib": ["ES2021", "dom"],
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "isolatedModules": true,
    "noEmit": true
  },
  "include": ["./**/*"],
  "exclude": ["./_generated"]
}


--- File: convex/utils.ts ---

import { v } from "convex/values";
import { MutationCtx, QueryCtx } from "./_generated/server";
import { Doc, Id } from "./_generated/dataModel";

// Type for successful responses
type SuccessResponse<T> = {
  success: true;
  data?: T;
  id?: Id<any>;
};

// Type for error responses
type ErrorResponse = {
  success: false;
  error: string;
};

// Combined response type
export type ConvexResponse<T = void> = SuccessResponse<T> | ErrorResponse;

// Helper to get current timestamp
export const getCurrentTimestamp = () => Date.now();

// Helper to create base fields for new documents
export const getBaseFields = () => ({
  createdAt: getCurrentTimestamp(),
  updatedAt: getCurrentTimestamp(),
});

// Helper to update timestamp
export const getUpdateFields = () => ({
  updatedAt: getCurrentTimestamp(),
});

// Helper for error handling
export const handleError = (error: unknown): ErrorResponse => ({
  success: false,
  error: error instanceof Error ? error.message : "Unknown error",
});

// Helper for success response
export const handleSuccess = <T>(data?: T, id?: Id<any>): SuccessResponse<T> => ({
  success: true,
  ...(data && { data }),
  ...(id && { id }),
});

// Validation helper
export const validateId = (id: Id<any>) => {
  if (!id) throw new Error("Invalid ID");
  return id;
};

// Query helper for pagination
export type PaginationOptions = {
  limit?: number;
  cursor?: string;
};

// Helper for handling pagination in queries
export const handlePagination = (
  ctx: QueryCtx,
  query: any,
  options?: PaginationOptions
) => {
  if (options?.limit) {
    query = query.take(options.limit);
  }
  if (options?.cursor) {
    query = query.continuePaginationFrom(options.cursor);
  }
  return query;
}; 

--- File: convex/visits.ts ---

import { v } from "convex/values";
import { mutation, query } from "./_generated/server";
import { Doc, Id } from "./_generated/dataModel";

// Schema is defined in schema.ts
export type Visit = {
  path: string;
  userId: string | null;
  metadata: Record<string, any>;
  createdAt: number;
  updatedAt: number;
};

export const recordVisit = mutation({
  args: {
    path: v.string(),
    userId: v.union(v.string(), v.null()),
    metadata: v.any(),
  },
  handler: async (ctx, args) => {
    const now = Date.now();
    return await ctx.db.insert("visits", {
      path: args.path,
      userId: args.userId,
      metadata: args.metadata,
      createdAt: now,
      updatedAt: now,
    });
  },
});

export const getVisits = query({
  args: {
    userId: v.optional(v.union(v.string(), v.null())),
    limit: v.optional(v.number()),
  },
  handler: async (ctx, args) => {
    const query = args.userId !== undefined
      ? await ctx.db
          .query("visits")
          .withIndex("by_user", (q) => q.eq("userId", args.userId as string | null))
          .collect()
      : await ctx.db
          .query("visits")
          .withIndex("by_created")
          .collect();

    return args.limit !== undefined ? query.slice(0, args.limit) : query;
  },
});

export const getVisitsByPath = query({
  args: {
    path: v.string(),
    limit: v.optional(v.number()),
  },
  handler: async (ctx, args) => {
    const results = await ctx.db
      .query("visits")
      .withIndex("by_path", (q) => q.eq("path", args.path))
      .collect();

    return args.limit !== undefined ? results.slice(0, args.limit) : results;
  },
});

export const deleteVisit = mutation({
  args: { id: v.id("visits") },
  handler: async (ctx, args) => {
    await ctx.db.delete(args.id);
  },
}); 

--- File: eslint.config.mjs ---

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends("next/core-web-vitals", "next/typescript"),
  {
    ignores: [
      ".next/**/*",
      "test-results/**/*",
      "tests-examples/**/*",
      "tests/**/*",
      "coverage/**/*",
      "dist/**/*",
      "build/**/*",
      "**/node_modules/**/*",
      "**/*.min.js",
      "**/*.bundle.js"
    ],
    rules: {
      // Disable noisy rules
      "@typescript-eslint/no-this-alias": "off",
      
      // Enable max-lines rule
      "max-lines": ["error", {
        max: 500,
        skipBlankLines: true,
        skipComments: true
      }]
    }
  }
];

export default eslintConfig;


--- File: lib/auth-utils.ts ---

import { auth } from "@clerk/nextjs/server";
import { redirect } from "next/navigation";

export function isClerkConfigured(): boolean {
  return Boolean(process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY && process.env.CLERK_SECRET_KEY);
}

export function isAdminConfigured(): boolean {
  return Boolean(process.env.ADMIN_USER_IDS);
}

export function isDev(): boolean {
  return process.env.NODE_ENV === "development";
}

/**
 * Checks if a user is an admin
 * @param userId - Optional user ID to check. If not provided, checks the current user.
 * @returns Promise<boolean> - True if the user is an admin, false otherwise
 */
export async function isAdmin(userId?: string): Promise<boolean> {
  try {
    // If userId is not provided, get the current user's ID
    let userIdToCheck = userId;
    
    if (!userIdToCheck) {
      const { userId: currentUserId } = await auth();
      userIdToCheck = currentUserId || undefined;
    }
    
    // If no user is authenticated, they're not an admin
    if (!userIdToCheck) {
      return false;
    }
    
    // Get the list of admin user IDs from environment variables
    const adminUserIds = process.env.ADMIN_USER_IDS?.split(",") || [];
    
    // Check if the user's ID is in the admin list
    return adminUserIds.includes(userIdToCheck);
  } catch (error) {
    console.error("Error checking admin status:", error);
    return false;
  }
}

/**
 * Checks if the provided user ID is an admin
 * @param userId - The user ID to check
 * @returns boolean - True if the user is an admin, false otherwise
 */
export function isUserAdmin(userId: string | null): boolean {
  if (!userId) {
    return false;
  }
  
  // Get the list of admin user IDs from environment variables
  const adminUserIds = process.env.ADMIN_USER_IDS?.split(",") || [];
  
  // Check if the provided user ID is in the admin list
  return adminUserIds.includes(userId);
}

export type AdminCheckResult = {
  isAdmin: boolean
  userId: string | null
  requiresSetup: boolean
}

export type AuthCheckResult = {
  isAuthenticated: boolean
  userId: string | null
}

/**
 * Checks if the user is authenticated
 * @returns The authentication status and user ID
 */
export async function checkAuth(): Promise<AuthCheckResult> {
  // Get the user's ID from Clerk
  const { userId } = await auth()

  return { 
    isAuthenticated: !!userId, 
    userId 
  }
}

/**
 * Checks if the current user is an admin and redirects if not
 * @returns The user ID if the user is an admin
 */
export async function requireAdmin(): Promise<AdminCheckResult> {
  // Get the user's ID from Clerk
  const { userId } = await auth()

  // If not authenticated, redirect to sign-in in production, return status in development
  if (!userId) {
    if (process.env.NODE_ENV === "production") {
      redirect("/sign-in")
    }
    return { isAdmin: false, userId: null, requiresSetup: false }
  }

  // Get the list of admin user IDs
  const adminUserIds = process.env.ADMIN_USER_IDS?.split(",") || []

  // In development, if no admin IDs are configured, return a special status
  if (process.env.NODE_ENV === "development" && (!adminUserIds.length || adminUserIds[0] === "")) {
    return { isAdmin: false, userId, requiresSetup: true }
  }

  // If the user is not an admin, redirect in production, return status in development
  if (!adminUserIds.includes(userId)) {
    if (process.env.NODE_ENV === "production") {
      redirect("/")
    }
    return { isAdmin: false, userId, requiresSetup: false }
  }

  return { isAdmin: true, userId, requiresSetup: false }
} 

--- File: lib/aws.ts ---

import { S3Client } from "@aws-sdk/client-s3"

// Environment variables
const awsConfig = {
  region: process.env.AWS_REGION,
  accessKeyId: process.env.AWS_KEY,
  secretAccessKey: process.env.AWS_SECRET,
  bucketPublic: process.env.AWS_BUCKET_PUBLIC,
  cloudfrontDomain: process.env.CLOUDFRONT_DOMAIN,
}

export const AWS_BUCKET_PUBLIC = process.env.AWS_BUCKET_PUBLIC

// Log missing variables in development only
if (process.env.NODE_ENV === 'development') {
  const missingVars = Object.entries(awsConfig)
    .filter(([, value]) => !value)
    .map(([key]) => key)

  if (missingVars.length > 0) {
    console.warn('Missing AWS configuration variables:', missingVars)
  }
}

// Function to check if AWS is configured
export function isAwsConfigured(): boolean {
  return Boolean(
    awsConfig.region &&
    awsConfig.accessKeyId &&
    awsConfig.secretAccessKey &&
    awsConfig.bucketPublic
  )
}

// Create an S3 client if configured
export const s3Client = isAwsConfigured()
  ? new S3Client({
      region: awsConfig.region!,
      credentials: {
        accessKeyId: awsConfig.accessKeyId!,
        secretAccessKey: awsConfig.secretAccessKey!,
      },
    })
  : null

// Function to get asset URL
export function getAssetUrl(key: string, withTimestamp = false): string | null {
  if (!isAwsConfigured()) {
    return null
  }

  const timestamp = withTimestamp ? Date.now() : null
  const keyWithTimestamp = timestamp 
    ? (key.includes('?') ? `${key}&t=${timestamp}` : `${key}?t=${timestamp}`)
    : key

  if (awsConfig.cloudfrontDomain) {
    return `https://${awsConfig.cloudfrontDomain}/${keyWithTimestamp}`
  }

  // Fallback to direct S3 URL
  return `https://${awsConfig.bucketPublic}.s3.${awsConfig.region}.amazonaws.com/${keyWithTimestamp}`
}

// Function to check AWS connection
export async function checkAwsConnection(): Promise<{
  success: boolean
  message: string
  details?: {
    error?: unknown
  }
}> {
  if (!isAwsConfigured()) {
    return {
      success: false,
      message: 'AWS is not configured',
      details: {
        error: 'Missing required environment variables'
      }
    }
  }

  try {
    // Try to make a simple API call to verify connection
    await s3Client!.config.credentials()
    
    return {
      success: true,
      message: 'Successfully connected to AWS'
    }
  } catch (err) {
    console.error('Unexpected error checking AWS connection:', err)
    return {
      success: false,
      message: `Unexpected error: ${err instanceof Error ? err.message : String(err)}`,
      details: { error: err }
    }
  }
} 

--- File: lib/clerk.ts ---

import { createClerkClient } from '@clerk/backend'

if (!process.env.CLERK_SECRET_KEY) {
  throw new Error('CLERK_SECRET_KEY is not defined')
}

export const clerkClient = createClerkClient({ 
  secretKey: process.env.CLERK_SECRET_KEY 
})

// Re-export commonly used types
export type { User } from '@clerk/backend' 

--- File: lib/config/navigation.ts ---

export const navItems = [
  {
    title: "About",
    href: "/about",
  },
  {
    title: "Contact",
    href: "/contact",
  },
] as const

export type NavItem = (typeof navItems)[number] 

--- File: lib/config.ts ---

export const siteConfig = {
  title: "Vibecode Party Starter",
  description: "The full stack Next.js starter project for vibe coding.",
  shortDescription: "The full stack Next.js starter project for vibe coding.",
  url: "https://starter.vibecode.party",
  shareImage: "https://starter.vibecode.party/screenshot.png",
  x: "johnpolacek",
  github: "https://github.com/johnpolacek/vibecode.party.starter",
  logo: ""
} as const

export type SiteConfig = {
    title: string
    description: string
    shortDescription: string
    url: string
    shareImage: string
    x: string
    github: string
    logo: string
}

--- File: lib/convex/server.ts ---

import { ConvexHttpClient } from "convex/browser";
import { api } from "@/convex/_generated/api";

export const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
export { api }; 

--- File: lib/email-utils.ts ---

import { createHash } from "crypto"

/**
 * Generates a secure token for email unsubscribe links
 * @param email The email address to generate a token for
 * @returns A secure hash that can be used in unsubscribe links
 */
export function generateUnsubscribeToken(email: string): string {
  if (!process.env.UNSUBSCRIBE_SECRET) {
    throw new Error("UNSUBSCRIBE_SECRET environment variable is not set")
  }

  // Combine email with secret and current year-month
  // This makes the token valid for one month
  const date = new Date()
  const yearMonth = `${date.getUTCFullYear()}-${(date.getUTCMonth() + 1).toString().padStart(2, "0")}`
  const data = `${email}:${yearMonth}:${process.env.UNSUBSCRIBE_SECRET}`

  // Create a SHA-256 hash
  return createHash("sha256").update(data).digest("hex")
}

/**
 * Verifies if an unsubscribe token is valid for a given email
 * @param email The email address to verify
 * @param token The token to verify
 * @returns boolean indicating if the token is valid
 */
export function verifyUnsubscribeToken(email: string, token: string): boolean {
  // Generate a token for the current month and previous month
  // This gives users a grace period when links cross month boundaries
  const currentToken = generateUnsubscribeToken(email)
  
  // Generate token for previous month
  const lastMonth = new Date()
  lastMonth.setUTCMonth(lastMonth.getUTCMonth() - 1)
  const yearMonth = `${lastMonth.getUTCFullYear()}-${(lastMonth.getUTCMonth() + 1).toString().padStart(2, "0")}`
  const lastMonthData = `${email}:${yearMonth}:${process.env.UNSUBSCRIBE_SECRET}`
  const previousToken = createHash("sha256").update(lastMonthData).digest("hex")

  // Check if the token matches either current or previous month
  return token === currentToken || token === previousToken
}

/**
 * Encodes an email address for use in URLs
 * @param email The email address to encode
 * @returns URL-safe base64 encoded email
 */
export function encodeEmail(email: string): string {
  return Buffer.from(email).toString("base64url")
}

/**
 * Decodes an encoded email address from a URL
 * @param encoded The encoded email to decode
 * @returns The original email address
 */
export function decodeEmail(encoded: string): string {
  return Buffer.from(encoded, "base64url").toString("utf-8")
} 

--- File: lib/generated/routes.ts ---

// This file is auto-generated. DO NOT EDIT IT MANUALLY.
// It is used to generate the validRoutes for tracking user visits.
// To regenerate, run: pnpm generate:routes

export const validRoutes = new Set([
  '/',
  'about',
  'account/*',
  'admin',
  'admin/analytics',
  'admin/mailing-list',
  'admin/users',
  'contact',
  'demo/ai',
  'demo/upload',
  'get-started',
  'mailing-list',
  'pay',
  'privacy',
  'roadmap',
  'terms',
  'unsubscribe'
])


--- File: lib/s3-utils.ts ---

import { PutObjectCommand } from "@aws-sdk/client-s3"
import { s3Client, isAwsConfigured, getAssetUrl } from "@/lib/aws"

/**
 * Upload a file to S3
 * @param file The file to upload
 * @param key The S3 object key (path + filename)
 * @param contentType Optional content type
 * @returns The URL of the uploaded file through CloudFront
 */
export async function uploadFileToS3(
  file: File | Blob,
  key: string,
  contentType?: string
): Promise<string> {
  if (!isAwsConfigured() || !s3Client) {
    throw new Error("AWS S3 is not configured")
  }

  // Convert file to buffer
  const arrayBuffer = await file.arrayBuffer()
  const buffer = Buffer.from(arrayBuffer)

  // Set up the upload parameters
  const params = {
    Bucket: process.env.AWS_BUCKET_PUBLIC,
    Key: key,
    Body: buffer,
    ContentType: contentType || file.type,
    CacheControl: key.includes('hackathon/covers') ? 'no-cache' : "public, max-age=31536000",
  }

  // Upload to S3
  await s3Client.send(new PutObjectCommand(params))
  
  // Get the URL (with timestamp for cache busting)
  const url = getAssetUrl(key, true)
  if (!url) {
    throw new Error("Failed to generate asset URL")
  }
  
  return url
}

export const transferImageToS3 = async (imageUrl: string, key: string): Promise<string> => {
  if (!isAwsConfigured() || !s3Client) {
    throw new Error("AWS S3 is not configured")
  }

  try {
    // Download the image from the URL
    const response = await fetch(imageUrl)
    const arrayBuffer = await response.arrayBuffer()

    // Prepare the parameters for uploading to S3
    const params = {
      Bucket: process.env.AWS_BUCKET_PUBLIC,
      Key: key,
      Body: Buffer.from(arrayBuffer),
      ContentType: response.headers.get("content-type") || "application/octet-stream",
      ContentLength: parseInt(response.headers.get("content-length") || "0", 10),
    }

    // Upload the image to the S3 bucket
    const putCommand = new PutObjectCommand(params)
    
    await s3Client.send(putCommand)

    // Get the URL
    const publicUrl = getAssetUrl(key)
    if (!publicUrl) {
      throw new Error("Failed to generate asset URL")
    }

    return publicUrl
  } catch (error) {
    throw new Error("Error uploading image to S3: " + error)
  }
}

--- File: lib/send-email.ts ---

import sgMail from "@sendgrid/mail"

if (!process.env.SENDGRID_API_KEY) {
  throw new Error("Missing SENDGRID_API_KEY environment variable")
}

sgMail.setApiKey(process.env.SENDGRID_API_KEY)

interface SendEmailOptions {
  to: string
  subject: string
  text: string
  html?: string
}

export async function sendEmail({ to, subject, text, html }: SendEmailOptions) {
  const msg = {
    to,
    from: process.env.SENDGRID_SENDER || "noreply@example.com",
    subject,
    text,
    html: html || text,
  }

  try {
    await sgMail.send(msg)
  } catch (error) {
    console.error("Error sending email:", error)
    throw error
  }
} 

--- File: lib/services/mailing-list.ts ---

import { convex, api } from "@/lib/convex/server";
import { Doc } from "@/convex/_generated/dataModel";

export type MailingListSubscription = Doc<"mailing_list_subscriptions">;

/**
 * Retrieves all mailing list subscriptions from Convex
 */
export async function getMailingListSubscriptions(): Promise<MailingListSubscription[]> {
  try {
    return await convex.query(api.mailingList.getSubscriptions);
  } catch (error) {
    console.error('Error getting mailing list subscriptions:', error);
    return [];
  }
}

/**
 * Adds a new email subscription to the mailing list
 */
export async function addMailingListSubscription(data: { 
  userId: string, 
  email: string, 
  name?: string | undefined,
  preferences: {
    marketing: boolean,
    updates: boolean
  }
}): Promise<MailingListSubscription | null> {
  try {
    return await convex.mutation(api.mailingList.subscribe, data);
  } catch (error) {
    console.error('Error adding mailing list subscription:', error);
    return null;
  }
}

/**
 * Removes an email subscription from the mailing list
 */
export async function removeMailingListSubscription(email: string): Promise<boolean> {
  try {
    return await convex.mutation(api.mailingList.unsubscribe, { email });
  } catch (error) {
    console.error('Error removing mailing list subscription:', error);
    return false;
  }
}

/**
 * Updates preferences for a user's mailing list subscription
 */
export async function updateMailingListPreferences(userId: string, preferences: { marketing: boolean, updates: boolean }): Promise<boolean> {
  try {
    return await convex.mutation(api.mailingList.updatePreferences, { userId, preferences });
  } catch (error) {
    console.error('Error updating mailing list preferences:', error);
    return false;
  }
} 

--- File: lib/services/visits.ts ---

import { convex, api } from "@/lib/convex/server";

/**
 * Records a new visit to a page
 */
export async function recordVisit(data: {
  path: string;
  userId: string | null;
  metadata: Record<string, unknown>;
}) {
  return await convex.mutation(api.visits.recordVisit, data);
}

/**
 * Gets visits for a specific user
 */
export async function getVisitsByUser(userId: string | null, limit?: number) {
  return await convex.query(api.visits.getVisits, { userId, limit });
}

/**
 * Gets visits for a specific path
 */
export async function getVisitsByPath(path: string, limit?: number) {
  return await convex.query(api.visits.getVisitsByPath, { path, limit });
}

/**
 * Gets all visits
 */
export async function getAllVisits(limit?: number) {
  return await convex.query(api.visits.getVisits, { limit });
} 

--- File: lib/stripe.ts ---

import Stripe from "stripe"

// Environment variables
const stripeSecretKey = process.env.STRIPE_SECRET_KEY

// Log missing variables in development only
if (process.env.NODE_ENV === 'development' && !stripeSecretKey) {
  console.warn('Missing Stripe secret key environment variable')
}

// Function to check if Stripe is configured
export function isStripeConfigured(): boolean {
  return Boolean(stripeSecretKey)
}

// Create a Stripe instance if configured
export const stripe = stripeSecretKey
  ? new Stripe(stripeSecretKey, {
      apiVersion: "2025-04-30.basil",
    })
  : null

// Function to check Stripe connection
export async function checkStripeConnection(): Promise<{
  success: boolean
  message: string
  details?: {
    error?: unknown
  }
}> {
  if (!isStripeConfigured()) {
    return {
      success: false,
      message: 'Stripe is not configured',
      details: {
        error: 'Missing required environment variables'
      }
    }
  }

  try {
    // Try to make a simple API call to verify connection
    await stripe?.balance.retrieve()
    
    return {
      success: true,
      message: 'Successfully connected to Stripe'
    }
  } catch (err) {
    console.error('Unexpected error checking Stripe connection:', err)
    return {
      success: false,
      message: `Unexpected error: ${err instanceof Error ? err.message : String(err)}`,
      details: { error: err }
    }
  }
} 

--- File: lib/upload-utils.ts ---

"use client"

import { useState } from "react"

interface UploadOptions {
  folder?: string
  maxSize?: number // in bytes
  allowedTypes?: string[]
}

const defaultOptions: UploadOptions = {
  folder: "uploads",
  maxSize: 5 * 1024 * 1024, // 5MB
  allowedTypes: ["image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"],
}

export async function uploadFile(file: File, options: UploadOptions = {}): Promise<string> {
  const { folder = "uploads", maxSize, allowedTypes } = { ...defaultOptions, ...options }

  if (!file) {
    throw new Error("No file provided")
  }

  // Validate file type if allowedTypes is provided
  if (allowedTypes && !allowedTypes.includes(file.type)) {
    throw new Error(`File type not allowed. Please upload one of: ${allowedTypes.join(", ")}`)
  }

  // Validate file size if maxSize is provided
  if (maxSize && file.size > maxSize) {
    throw new Error(`File size exceeds ${Math.round(maxSize / (1024 * 1024))}MB limit`)
  }

  const formData = new FormData()
  formData.append("file", file)
  formData.append("folder", folder)

  try {
    const response = await fetch("/api/upload", {
      method: "POST",
      body: formData,
    })

    if (!response.ok) {
      const data = await response.json()
      throw new Error(data.error || "Failed to upload file")
    }

    const data = await response.json()
    return data.url
  } catch (error) {
    console.error("Error uploading file:", error)
    throw error
  }
}

export function useFileUpload(options: UploadOptions = {}) {
  const [isUploading, setIsUploading] = useState(false)

  const upload = async (file: File): Promise<string> => {
    setIsUploading(true)
    try {
      const url = await uploadFile(file, options)
      return url
    } finally {
      setIsUploading(false)
    }
  }

  return {
    upload,
    isUploading,
  }
} 

--- File: lib/utils/case-transforms.ts ---

import { camelCase, snakeCase } from 'lodash-es'

// Type transformations for TypeScript type system
type CamelToSnakeCase<S extends string> = S extends `${infer T}${infer U}`
  ? T extends Uppercase<T>
    ? `_${Lowercase<T>}${CamelToSnakeCase<U>}`
    : `${T}${CamelToSnakeCase<U>}`
  : S

type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
  : S

type TransformKeys<T, Transform extends (str: string) => string> = T extends object
  ? {
      [K in keyof T as K extends string
        ? string extends K
          ? string
          : Transform extends typeof snakeCase
            ? Uncapitalize<CamelToSnakeCase<K>>
            : Uncapitalize<SnakeToCamelCase<K>>
        : K]: T[K] extends object
        ? TransformKeys<T[K], Transform>
        : T[K]
    }
  : T

/**
 * Transforms an object's keys from camelCase to snake_case recursively
 * @deprecated Use toSnakeCase instead
 */
export function toDatabaseCase<T extends object>(obj: T): TransformKeys<T, typeof snakeCase> {
  return toSnakeCase(obj)
}

/**
 * Transforms an object's keys from snake_case to camelCase recursively
 * @deprecated Use toCamelCase instead
 */
export function toClientCase<T extends object>(obj: T): TransformKeys<T, typeof camelCase> {
  return toCamelCase(obj)
}

/**
 * Transforms an object's keys from camelCase to snake_case recursively
 */
export function toSnakeCase<T extends object>(obj: T): TransformKeys<T, typeof snakeCase> {
  if (Array.isArray(obj)) {
    return obj.map((item) =>
      typeof item === 'object' ? toSnakeCase(item) : item
    ) as TransformKeys<T, typeof snakeCase>
  }

  if (obj === null || typeof obj !== 'object') {
    return obj as TransformKeys<T, typeof snakeCase>
  }

  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [
      snakeCase(key),
      typeof value === 'object' ? toSnakeCase(value) : value,
    ])
  ) as TransformKeys<T, typeof snakeCase>
}

/**
 * Transforms an object's keys from snake_case to camelCase recursively
 */
export function toCamelCase<T extends object>(obj: T): TransformKeys<T, typeof camelCase> {
  if (Array.isArray(obj)) {
    return obj.map((item) =>
      typeof item === 'object' ? toCamelCase(item) : item
    ) as TransformKeys<T, typeof camelCase>
  }

  if (obj === null || typeof obj !== 'object') {
    return obj as TransformKeys<T, typeof camelCase>
  }

  return Object.fromEntries(
    Object.entries(obj).map(([key, value]) => [
      camelCase(key),
      typeof value === 'object' ? toCamelCase(value) : value,
    ])
  ) as TransformKeys<T, typeof camelCase>
}

/**
 * Alias for toCamelCase, used for consistency with existing codebase
 */
export const deepToCamelCase = toCamelCase

/**
 * Type helper to convert a type from camelCase to snake_case
 * @example
 * interface UserInput {
 *   firstName: string
 *   lastName: string
 * }
 * 
 * type DatabaseUser = ToSnakeCase<UserInput>
 * // Result: { first_name: string, last_name: string }
 */
export type ToSnakeCase<T> = TransformKeys<T, typeof snakeCase>

/**
 * Type helper to convert a type from snake_case to camelCase
 * @example
 * interface DatabaseUser {
 *   first_name: string
 *   last_name: string
 * }
 * 
 * type ClientUser = ToCamelCase<DatabaseUser>
 * // Result: { firstName: string, lastName: string }
 */
export type ToCamelCase<T> = TransformKeys<T, typeof camelCase>

// Types for backward compatibility
export type Primitive = string | number | boolean | null | undefined
export type TransformableObject = { [key: string]: Transformable }
export type TransformableArray = Transformable[]
export type Transformable = Primitive | TransformableObject | TransformableArray 

--- File: lib/utils.ts ---

import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

/**
 * Format a date string to a more readable format
 * @param dateString ISO date string
 * @returns Formatted date string (e.g., "Jan 1, 2023")
 */
export function formatDate(dateString: string): string {
  const date = new Date(dateString)
  return date.toLocaleDateString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  })
}

export function formatCurrency(amount: number) {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  }).format(amount)
}

export const getInitials = (name: string) => {
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .substring(0, 2)
}


--- File: middleware.ts ---

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

--- File: next.config.ts ---

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'vibecodeparty-public.s3.us-east-1.amazonaws.com',
      },
      {
        protocol: 'https',
        hostname: 'vibecodeparty-public.s3.amazonaws.com',
      },
      {
        protocol: 'https',
        hostname: 'img.clerk.com',
      },
      {
        protocol: 'https',
        hostname: 'drgfjd45uzjza.cloudfront.net',
      },
    ],
  },
};

export default nextConfig;


--- File: package.json ---

{
  "name": "vibecode-party-starter",
  "version": "0.4.6",
  "license": "MIT",
  "description": "A Next.js starter project for vibecoding full stack web apps with auth, backend, payments, email, and more",
  "keywords": [
    "nextjs",
    "template",
    "starter",
    "vibecoding"
  ],
  "author": "John Polacek",
  "scripts": {
    "kill:ports": "kill-port 3000 4000 4400 4500 5001 8080 8085 9000 9099 9199 || true",
    "dev": "pnpm kill:ports && concurrently \"pnpm convex:dev\" \"next dev -p ${PORT:-3000}\" --kill-others --names \"convex,next\" --prefix-colors \"yellow.bold,cyan.bold\"",
    "convex:dev": "convex dev",
    "convex:deploy": "convex deploy",
    "build": "pnpm generate:routes && next build",
    "postinstall": "npx convex codegen",
    "start": "next start",
    "lint": "next lint",
    "boot:convex": "sh ./scripts/boot-convex.sh",
    "boot:github": "brew install gh && gh auth login",
    "boot:vercel": "pnpm i -g vercel",
    "boot:repo": "chmod +x ./scripts/init-repo.sh && ./scripts/init-repo.sh",
    "boot": "pnpm boot:github && pnpm boot:vercel && pnpm boot:convex && pnpm boot:repo",
    "go": "pnpm generate:routes && git add . && aicommits && pnpm generate:llm && git add . && git commit -m 'update llm.txt' && git push origin main",
    "test:run": "playwright test",
    "test:wait": "wait-on tcp:3000 tcp:4000 && pnpm test:run",
    "test": "pnpm build && concurrently \"pnpm dev\" \"pnpm test:wait\" --success first --kill-others --names \"dev,test\" --prefix-colors \"yellow.bold,cyan.bold\"",
    "ship": "pnpm test && pnpm go",
    "test:clean": "rm -rf ~/.cache/ms-playwright-tests test-results/ playwright-report/",
    "pw": "playwright test --ui --debug",
    "pw:headless": "playwright test",
    "db:admin": "open https://dashboard.convex.dev",
    "generate:routes": "tsx scripts/generate-routes.ts",
    "generate:llm": "tsx scripts/bundle-code.ts . llm.txt",
    "test:setup": "pnpm dev",
    "test:full": "pnpm test:setup && pnpm test"
  },
  "dependencies": {
    "@ai-sdk/openai": "^1.3.16",
    "@ai-sdk/react": "^1.2.9",
    "@ai-sdk/replicate": "^0.2.7",
    "@aws-sdk/client-s3": "^3.787.0",
    "@aws-sdk/s3-request-presigner": "^3.787.0",
    "@clerk/backend": "^1.29.1",
    "@clerk/clerk-sdk-node": "^5.1.6",
    "@clerk/nextjs": "^6.16.0",
    "@heroicons/react": "^2.2.0",
    "@octokit/rest": "^21.1.1",
    "@radix-ui/react-accordion": "^1.2.7",
    "@radix-ui/react-alert-dialog": "^1.1.10",
    "@radix-ui/react-avatar": "^1.1.6",
    "@radix-ui/react-checkbox": "^1.2.2",
    "@radix-ui/react-collapsible": "^1.1.7",
    "@radix-ui/react-dialog": "^1.1.10",
    "@radix-ui/react-dropdown-menu": "^2.1.11",
    "@radix-ui/react-icons": "^1.3.2",
    "@radix-ui/react-label": "^2.1.4",
    "@radix-ui/react-popover": "^1.1.10",
    "@radix-ui/react-progress": "^1.1.4",
    "@radix-ui/react-radio-group": "^1.3.3",
    "@radix-ui/react-scroll-area": "^1.2.5",
    "@radix-ui/react-select": "^2.2.2",
    "@radix-ui/react-separator": "^1.1.4",
    "@radix-ui/react-slot": "^1.2.0",
    "@radix-ui/react-switch": "^1.2.2",
    "@radix-ui/react-tabs": "^1.1.8",
    "@sendgrid/mail": "^8.1.5",
    "@stripe/react-stripe-js": "^3.6.0",
    "@stripe/stripe-js": "^6.1.0",
    "@types/lodash-es": "^4.17.12",
    "@types/react-google-recaptcha": "^2.1.9",
    "ai": "^4.3.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "convex": "^1.23.0",
    "date-fns": "^4.1.0",
    "eslint-config-prettier": "^10.1.2",
    "eslint-plugin-prettier": "^5.2.6",
    "ignore": "^7.0.3",
    "lodash-es": "^4.17.21",
    "lucide-react": "^0.501.0",
    "next": "15.3.1",
    "next-themes": "^0.4.6",
    "playwright": "link:@clerk/testing/playwright",
    "prettier": "^3.5.3",
    "react": "^19.1.0",
    "react-day-picker": "8.10.1",
    "react-dom": "^19.1.0",
    "react-google-recaptcha": "^3.1.0",
    "react-icons": "^5.5.0",
    "react-markdown": "^10.1.0",
    "server": "link:@clerk/nextjs/server",
    "slugify": "^1.6.6",
    "sonner": "^2.0.3",
    "stripe": "^17.7.0",
    "tailwind-merge": "^3.2.0",
    "tailwindcss-animate": "^1.0.7",
    "uuid": "^11.1.0",
    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@clerk/testing": "^1.4.41",
    "@eslint/eslintrc": "^3.3.1",
    "@playwright/test": "^1.52.0",
    "@tailwindcss/postcss": "^4.1.4",
    "@tailwindcss/typography": "^0.5.16",
    "@types/node": "^22.14.1",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@types/uuid": "^10.0.0",
    "concurrently": "^9.1.2",
    "dotenv": "^16.5.0",
    "dotenv-cli": "^8.0.0",
    "eslint": "^9.25.0",
    "eslint-config-next": "15.3.1",
    "kill-port": "^2.0.1",
    "tailwindcss": "^4.1.4",
    "ts-node": "^10.9.2",
    "tsx": "^4.19.3",
    "typescript": "^5.8.3",
    "wait-on": "^8.0.3"
  }
}


--- File: playwright.config.ts ---

import { defineConfig, devices } from '@playwright/test';
import path from 'path';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
import dotenv from 'dotenv';
// Load environment variables in order of precedence (later files take precedence)
dotenv.config({ path: path.resolve(__dirname, '.env') });
dotenv.config({ path: path.resolve(__dirname, '.env.test') });
dotenv.config({ path: path.resolve(__dirname, '.env.local') });

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel - except in UI mode */
  fullyParallel: false,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI or in UI mode */
  workers: 1,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    // {
    //   name: 'firefox',
    //   use: { ...devices['Desktop Firefox'] },
    // },

    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],

  /* Since we're running the Next.js server separately, we don't need the webServer config */
  // webServer: {
  //   command: 'pnpm dev',
  //   url: 'http://127.0.0.1:3000',
  //   reuseExistingServer: !process.env.CI,
  //   timeout: 120000,
  // },
  
  /* Global setup to run before all tests */
  globalSetup: process.env.PLAYWRIGHT_UI_MODE ? undefined : './tests/global-setup.ts',
});


--- File: postcss.config.mjs ---

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;


--- File: scripts/boot-convex.sh ---

#!/bin/bash

# Install Convex CLI globally
pnpm add -g convex@latest

# Check for CONVEX_DEPLOY_KEY in Convex production environment
DEPLOY_KEY=$(npx convex env --prod get CONVEX_DEPLOY_KEY 2>&1)

if echo "$DEPLOY_KEY" | grep -q 'not found'; then
  echo "\n\033[0;31m✖ Environment variable 'CONVEX_DEPLOY_KEY' not found.\033[0m"
  echo "\nTo deploy with Convex, you need to set your deploy key."
  echo "1. Visit your Convex dashboard: https://dashboard.convex.dev"
  echo "2. Go to your project settings and copy the Deploy Key."
  echo "3. Add it to your environment variables as CONVEX_DEPLOY_KEY."
  echo "\nExample (.env):\nCONVEX_DEPLOY_KEY=your-deploy-key-here\n"
  # Try to get CONVEX_DEPLOY_KEY from local .env
  if [ -f .env ]; then
    LOCAL_KEY=$(grep '^CONVEX_DEPLOY_KEY=' .env | cut -d '=' -f2-)
    if [ -n "$LOCAL_KEY" ]; then
      echo "\033[0;34mFound CONVEX_DEPLOY_KEY in local .env. Attempting to add to Vercel production env...\033[0m"
      TMPFILE=$(mktemp)
      echo "$LOCAL_KEY" > "$TMPFILE"
      if vercel env add CONVEX_DEPLOY_KEY production < "$TMPFILE"; then
        echo "\033[0;32m✓ Successfully added CONVEX_DEPLOY_KEY to Vercel production environment.\033[0m"
      else
        echo "\033[0;31m✖ Failed to add CONVEX_DEPLOY_KEY to Vercel. Please add it manually.\033[0m"
      fi
      rm "$TMPFILE"
    fi
  fi
else
  echo "\033[0;32m✓ CONVEX_DEPLOY_KEY found in Convex production environment.\033[0m"
fi 

--- File: scripts/bundle-code.ts ---

#!/usr/bin/env node

import fs from 'fs/promises';
import path from 'path';
import ignore from 'ignore';
import type { Dirent } from 'fs'; // Import Dirent type

// --- Configuration ---

// Directories to exclude entirely
const EXCLUDED_DIRS: Set<string> = new Set([
    'node_modules',
    '.git',
    '.next',
    'dist',
    'build',
    'out',
    'coverage',
    '.vscode',
    '.idea',
    'public', // Often contains large assets, adjust if needed
    // Add any other directories you want to skip
]);

// Specific files or patterns to exclude
const EXCLUDED_FILES_PATTERNS: string[] = [
    'package-lock.json',
    'yarn.lock',
    'pnpm-lock.yaml',
    '.DS_Store',
    // Add any specific files or patterns
];

// File extensions or specific filenames to include (add more as needed)
const INCLUDED_EXTENSIONS: Set<string> = new Set([
    // Extensions
    '.js',
    '.jsx',
    '.ts',
    '.tsx',
    '.mjs',
    '.cjs',
    '.css',
    '.scss',
    '.sass',
    '.less',
    '.html',
    '.md',
    '.json',
    '.yaml',
    '.yml',
    '.sh',
    '.env',
    '.env.local',
    '.env.development',
    '.env.production',
    '.env.example', // Often useful for context
    '.gitignore', // Useful for context
    '.npmrc',
    // Specific filenames (often config files)
    'next.config.js',
    'next.config.mjs',
    'postcss.config.js',
    'tailwind.config.js',
    'tailwind.config.ts',
    'tsconfig.json',
    'jsconfig.json',
    '.eslintrc.json',
    '.prettierrc',
    'Dockerfile',
    // Add specific filenames relevant to your project
]);

// Initialize gitignore
let ig = ignore();

async function loadGitignore(projectRoot: string): Promise<void> {
    try {
        const gitignorePath = path.join(projectRoot, '.gitignore');
        const gitignoreContent = await fs.readFile(gitignorePath, 'utf-8');
        ig = ignore().add(gitignoreContent);
    } catch (err: unknown) {
        if (err && typeof err === 'object' && 'code' in err && err.code === 'ENOENT') {
            console.log('No .gitignore file found, continuing without it');
        } else if (err instanceof Error) {
            console.error('Error reading .gitignore:', err.message);
        }
    }
}

// --- Helper Functions ---

function isExcluded(entryPath: string, entryName: string, isDirectory: boolean): boolean {
    // Check gitignore patterns first
    const relativePath = entryPath.replace(/\\/g, '/'); // Normalize path separators
    if (ig.ignores(relativePath)) {
        return true;
    }

    // Then check our manual exclusions
    if (isDirectory && EXCLUDED_DIRS.has(entryName)) {
        return true;
    }
    if (!isDirectory && EXCLUDED_FILES_PATTERNS.some(pattern => entryName === pattern)) {
        // Add more complex pattern matching here if needed (e.g., regex)
        return true;
    }
     // Check if the path contains an excluded directory component
    const pathParts = entryPath.split(path.sep);
    if (pathParts.some(part => EXCLUDED_DIRS.has(part))) {
       return true;
    }
    return false;
}

function isIncluded(entryName: string): boolean {
    const ext = path.extname(entryName).toLowerCase();
    // Check by specific name first, then by extension
    return INCLUDED_EXTENSIONS.has(entryName) || (ext !== '' && INCLUDED_EXTENSIONS.has(ext));
}

async function walkDir(dir: string, projectRoot: string, allContents: string[]): Promise<void> {
    let entries: Dirent[];
    try {
        entries = await fs.readdir(dir, { withFileTypes: true });
    } catch (err: unknown) {
        if (err instanceof Error) {
            console.error(`Error reading directory ${dir}: ${err.message}`);
        }
        return; // Skip directories we can't read
    }

    for (const entry of entries) {
        const fullPath = path.join(dir, entry.name);
        const relativePath = path.relative(projectRoot, fullPath);

        if (isExcluded(relativePath, entry.name, entry.isDirectory())) {
            console.log(`(-) Excluding: ${relativePath}`);
            continue;
        }

        if (entry.isDirectory()) {
            await walkDir(fullPath, projectRoot, allContents);
        } else if (entry.isFile() && isIncluded(entry.name)) {
            try {
                console.log(`(+) Including: ${relativePath}`);
                const content = await fs.readFile(fullPath, 'utf-8');
                // Normalize line endings to prevent excessive diffs if files have mixed endings
                const normalizedContent = content.replace(/\r\n/g, '\n');
                allContents.push(`--- File: ${relativePath} ---\n\n${normalizedContent}\n\n`);
            } catch (err: unknown) {
                if (err instanceof Error) {
                    console.error(`Error reading file ${fullPath}: ${err.message}`);
                    allContents.push(`--- File: ${relativePath} ---\n\n!!! Error reading file: ${err.message} !!!\n\n`);
                }
            }
        } else {
             // Optional: Log files that are neither excluded nor included
             // console.log(`(?) Skipping (not included): ${relativePath}`);
        }
    }
}

// --- Main Execution ---

async function main(): Promise<void> {
    // Basic argument parsing: tsx scripts/bundle-code.ts [targetDir] [outputFile]
    const args: string[] = process.argv.slice(2);
    const targetDirArg: string | undefined = args[0];
    const outputFileArg: string | undefined = args[1];

    const targetDir: string = path.resolve(targetDirArg || '.'); // Default to current directory
    const outputFilePath: string | null = outputFileArg ? path.resolve(outputFileArg) : null; // Default to console output

    // Load .gitignore before processing
    await loadGitignore(targetDir);

    console.log(`Scanning directory: ${targetDir}`);
    if (outputFilePath) {
        console.log(`Output will be written to: ${outputFilePath}`);
    } else {
        console.log(`Output will be printed to console.`);
    }

    const allContents: string[] = [];
    try {
        // Check if target directory exists
        const stats = await fs.stat(targetDir);
        if (!stats.isDirectory()) {
            throw new Error(`Target path is not a directory: ${targetDir}`);
        }

        await walkDir(targetDir, targetDir, allContents);

        const combinedOutput: string = allContents.join('');

        if (outputFilePath) {
            await fs.writeFile(outputFilePath, combinedOutput);
            console.log(`\n✅ Successfully wrote bundled code to ${outputFilePath}`);
        } else {
            console.log("\n--- BUNDLED CODE OUTPUT ---");
            console.log(combinedOutput);
            console.log("--- END BUNDLED CODE OUTPUT ---");
            console.log(`\n✅ Successfully generated bundled code.`);
        }

    } catch (err: unknown) {
        if (err && typeof err === 'object' && 'code' in err && err.code === 'ENOENT') {
            console.error(`\n❌ Error: Target directory not found: ${targetDir}`);
        } else if (err instanceof Error) {
            console.error(`\n❌ An error occurred: ${err.message}`);
            console.error(err.stack); // Print stack trace for debugging
        }
        process.exit(1); // Exit with error code
    }
}

main();

--- File: scripts/generate-routes.ts ---

import fs from 'fs'
import path from 'path'

// Function to get all route paths from the app directory
function getRoutePaths(dir: string, basePath: string = ''): string[] {
  const entries = fs.readdirSync(dir, { withFileTypes: true })
  const paths: string[] = []

  for (const entry of entries) {
    const fullPath = path.join(dir, entry.name)
    const routePath = path.join(basePath, entry.name)

    if (entry.isDirectory()) {
      // Skip private folders (starting with _) and api routes
      if (entry.name.startsWith('_') || entry.name === 'api') {
        continue
      }

      // Handle dynamic routes
      const routeName = entry.name.startsWith('[') ? entry.name : null
      if (routeName) {
        // Add the dynamic route pattern
        paths.push(path.join(basePath, '*'))
      } else {
        // Recursively get routes from subdirectories
        paths.push(...getRoutePaths(fullPath, routePath))
      }
    } else if (entry.name === 'page.tsx' || entry.name === 'page.ts') {
      // Add the route path for page files
      paths.push(basePath)
    }
  }

  return paths
}

// Generate the routes file
function generateRoutesFile() {
  const appDir = path.join(process.cwd(), 'app')
  const routePaths = getRoutePaths(appDir)
  
  // Format the paths
  const formattedPaths = routePaths
    .map(p => p.replace(/\\/g, '/')) // Convert Windows paths to forward slashes
    .map(p => p || '/') // Convert empty string to root path
    .sort()

  // Generate the file content
  const fileContent = `// This file is auto-generated. DO NOT EDIT IT MANUALLY.
// It is used to generate the validRoutes for tracking user visits.
// To regenerate, run: pnpm generate:routes

export const validRoutes = new Set([
  ${formattedPaths.map(p => `'${p}'`).join(',\n  ')}
])
`

  // Write the file
  const outputPath = path.join(process.cwd(), 'lib', 'generated', 'routes.ts')
  fs.mkdirSync(path.dirname(outputPath), { recursive: true })
  fs.writeFileSync(outputPath, fileContent)

  console.log('✅ Generated routes file')
}

generateRoutesFile() 

--- File: scripts/init-repo.sh ---

#!/bin/bash

# --- Configuration ---
# Set this to the main branch name you prefer (usually main or master)
MAIN_BRANCH_NAME="main"
# Set to 'true' if you want to automatically confirm Vercel deployments
AUTO_CONFIRM_VERCEL="true"

# --- Error Handling ---
# Exit immediately if a command exits with a non-zero status.
set -e

# Keep track of errors
ERRORS=()

# Function to report errors and exit
handle_error() {
    local command="$1"
    local message="$2"
    ERRORS+=("Error running command: $command")
    ERRORS+=("Details: $message")
    echo "-----------------------------------------------------" >&2
    echo "❌ FATAL ERROR during setup process ❌" >&2
    echo "Command failed: $command" >&2
    echo "Error details: $message" >&2
    echo "Setup process aborted." >&2
    echo "-----------------------------------------------------" >&2
    if [ ${#ERRORS[@]} -gt 0 ]; then
        echo "Summary of errors:" >&2
        for error in "${ERRORS[@]}"; do
            echo "- $error" >&2
        done
    fi
    exit 1
}

# Function to open URL in browser based on OS
open_url() {
    local url=$1
    case "$OSTYPE" in
        "darwin"*) # macOS
            open "$url"
            ;;
        "linux"*) # Linux
            if command -v xdg-open > /dev/null; then
                xdg-open "$url"
            elif command -v gnome-open > /dev/null; then
                gnome-open "$url"
            else
                echo "Could not detect the web browser to use."
            fi
            ;;
        *) # Other OS
            echo "Could not detect the web browser to use."
            ;;
    esac
}

# Function to read value from .env file
get_env_value() {
    local key=$1
    local value=""
    if [ -f ".env" ]; then
        value=$(grep "^${key}=" .env | cut -d '=' -f2)
    fi
    echo "$value"
}

# Function to add or update value in .env file
update_env_file() {
    local key=$1
    local value=$2
    local env_file=".env"
    
    # Create .env if it doesn't exist
    if [ ! -f "$env_file" ]; then
        touch "$env_file"
    fi
    
    # Check if key exists and replace, otherwise add
    if grep -q "^${key}=" "$env_file"; then
        if [[ "$OSTYPE" == "darwin"* ]]; then
            sed -i '' "s|^${key}=.*|${key}=${value}|" "$env_file"
        else
            sed -i "s|^${key}=.*|${key}=${value}|" "$env_file"
        fi
    else
        echo "${key}=${value}" >> "$env_file"
    fi
}

# Function to deploy all env vars to Vercel
deploy_env_to_vercel() {
    local env_file=".env"
    if [ ! -f "$env_file" ]; then
        echo "No .env file found. Skipping environment variable deployment."
        return
    fi

    echo "Deploying environment variables to Vercel..."
    
    # Read each line from .env
    while IFS= read -r line || [ -n "$line" ]; do
        # Skip empty lines and comments
        if [ -z "$line" ] || [[ $line == \#* ]]; then
            continue
        fi
        
        # Extract key and value
        if [[ $line =~ ^([^=]+)=(.*)$ ]]; then
            key="${BASH_REMATCH[1]}"
            value="${BASH_REMATCH[2]}"
            
            # Remove any surrounding quotes from the value
            value=$(echo "$value" | sed -e 's/^"//' -e 's/"$//' -e "s/^'//" -e "s/'$//")
            
            echo "Setting $key in Vercel..."
            
            # Add to environment
            vercel env add "$key" production "$value" > /dev/null 2>&1
        fi
    done < "$env_file"
    
    echo "✅ Environment variables deployed to Vercel"
}

# --- Get User Input ---

echo "🚀 Starting Project Initialization 🚀"
echo ""

# Get current directory name as default repo name
DEFAULT_REPO_NAME=$(basename "$PWD")

# Prompt for the GitHub repository name with default suggestion
read -p "Enter the desired GitHub repository name [$DEFAULT_REPO_NAME]: " REPO_NAME
REPO_NAME=${REPO_NAME:-$DEFAULT_REPO_NAME}

if [ -z "$REPO_NAME" ]; then
  handle_error "User Input" "No repository name provided."
fi

# Prompt for repository visibility with public as default
read -p "Enter repository visibility [public/private]: " REPO_VISIBILITY_INPUT
REPO_VISIBILITY=${REPO_VISIBILITY_INPUT:-"public"}

# Validate repository visibility input
REPO_VISIBILITY=$(echo "$REPO_VISIBILITY" | tr '[:upper:]' '[:lower:]') # Convert to lowercase
if [[ "$REPO_VISIBILITY" != "public" && "$REPO_VISIBILITY" != "private" ]]; then
  handle_error "User Input" "Invalid visibility '$REPO_VISIBILITY_INPUT'. Please enter 'public' or 'private'."
fi

# Get the GitHub username using the authenticated GH CLI
GITHUB_USERNAME=$(gh api user --jq .login 2>/dev/null) || handle_error "gh api user" "Could not retrieve GitHub username. Is 'gh auth login' complete?"

FULL_REPO_NAME="$GITHUB_USERNAME/$REPO_NAME"
GIT_REMOTE_URL="git@github.com:$FULL_REPO_NAME.git" # Using SSH URL

echo ""
echo "--- Project Details ---"
echo "Local Directory: $(pwd)"
echo "GitHub Repository: $FULL_REPO_NAME ($REPO_VISIBILITY)"
echo "Vercel Linking Git URL: $GIT_REMOTE_URL"
echo "Main Branch: $MAIN_BRANCH_NAME"
echo "-----------------------"
echo ""
read -p "Does this look correct? [Y/n]: " confirm
if [[ "$confirm" =~ ^[Nn]$ ]]; then
    echo "Setup cancelled by user."
    exit 1
fi

echo "" # Add space before next section

# --- Step 1: Initialize Git Repository (if not already) ---
echo "--- 1/4: Setting up local Git repository ---"

# Check if .git directory exists. If not, initialize.
if [ ! -d ".git" ]; then
  git init || handle_error "git init" "Failed to initialize Git repository."
  echo "Git repository initialized."
else
  echo "Existing Git repository found."
fi

# Update config.ts with GitHub URL before initial commit if public repo
if [ "$REPO_VISIBILITY" == "public" ]; then
    config_file="lib/config.ts"
    if [ -f "$config_file" ]; then
        # Use sed to update the github field in config.ts
        # The pattern looks for the 'github: ""' line and replaces it with the new URL
        if [[ "$OSTYPE" == "darwin"* ]]; then
            # macOS requires an empty string after -i
            sed -i '' "s|github: \".*\"|github: \"https://github.com/$FULL_REPO_NAME\"|" "$config_file"
        else
            # Linux version
            sed -i "s|github: \".*\"|github: \"https://github.com/$FULL_REPO_NAME\"|" "$config_file"
        fi
        echo "Updated $config_file with GitHub repository URL"
    else
        ERRORS+=("Warning: Could not find $config_file to update GitHub URL")
    fi
fi

# Add all current files and commit
git add . || handle_error "git add ." "Failed to add files to staging."
# Check if there are staged changes before committing
if git diff --cached --quiet; then
    echo "No new changes to commit. Skipping commit step."
else
    git commit -m "Initial commit from init script" || handle_error "git commit" "Failed to create initial commit."
    echo "Initial commit created."
fi


# Ensure the main branch exists and is named correctly
# Use '--force' to rename if it exists with a different case (like master)
if git branch --list | grep -q "\b$MAIN_BRANCH_NAME\b"; then
    echo "Branch '$MAIN_BRANCH_NAME' already exists."
elif git branch --list | grep -q "\bmaster\b" && [ "$MAIN_BRANCH_NAME" == "main" ]; then
    git branch -m $MAIN_BRANCH_NAME || handle_error "git branch -m" "Failed to rename branch from 'master' to '$MAIN_BRANCH_NAME'."
    echo "Renamed 'master' branch to '$MAIN_BRANCH_NAME'."
else
     # Create the branch if it doesn't exist and there's no master to rename
     # This case is less common after git init and commit, but good practice
     # Check if HEAD exists first (implies a commit has been made)
     if git rev-parse --verify HEAD > /dev/null 2>&1; then
        git branch $MAIN_BRANCH_NAME || handle_error "git branch" "Failed to create '$MAIN_BRANCH_NAME' branch."
        git checkout $MAIN_BRANCH_NAME || handle_error "git checkout" "Failed to checkout '$MAIN_BRANCH_NAME' branch."
        echo "Created and checked out '$MAIN_BRANCH_NAME' branch."
     else
         # No commits yet, branch will be created upon first commit/push
         echo "No commits yet, branch '$MAIN_BRANCH_NAME' will be set on push."
     fi
fi
git checkout $MAIN_BRANCH_NAME > /dev/null 2>&1 || handle_error "git checkout" "Failed to ensure checkout of '$MAIN_BRANCH_NAME'."
echo "Ensured checkout of branch '$MAIN_BRANCH_NAME'."


echo "Local Git setup complete."
echo ""

# --- Step 2: Create GitHub Repository and Push ---
echo "--- 2/4: Creating GitHub repository and pushing ---"

# Check if origin remote already exists and points to the correct repo
echo "Checking for existing git remote..."
CURRENT_ORIGIN=$(git remote get-url origin 2>/dev/null || echo "")

if [ -n "$CURRENT_ORIGIN" ]; then
    echo "Found existing remote: $CURRENT_ORIGIN"
    # Normalize the URLs for comparison (both SSH format)
    EXPECTED_URL="git@github.com:$FULL_REPO_NAME.git"
    if [ "$CURRENT_ORIGIN" = "$EXPECTED_URL" ]; then
        echo "✓ Git remote 'origin' already exists and points to correct repository"
        echo "Continuing with existing remote..."
    else
        echo "Warning: Git remote 'origin' exists but points to unexpected repository"
        echo "Current:  $CURRENT_ORIGIN"
        echo "Expected: $EXPECTED_URL"
        handle_error "Git Remote Conflict" "Existing 'origin' remote points to unexpected repository. Please resolve manually."
    fi
else
    echo "No existing remote found. Creating new repository..."
    
    # Create the repository and push in one command
    echo "Creating GitHub repository '$FULL_REPO_NAME' ($REPO_VISIBILITY)..."
    
    CREATE_COMMAND=""
    if [ "$REPO_VISIBILITY" == "private" ]; then
        CREATE_COMMAND="gh repo create \"$REPO_NAME\" --private --source=. --remote=origin --push"
    else
        CREATE_COMMAND="gh repo create \"$REPO_NAME\" --public --source=. --remote=origin --push"
    fi
    
    echo "Executing: $CREATE_COMMAND"
    eval "$CREATE_COMMAND" || {
        echo "Error occurred while creating repository. Exit code: $?"
        handle_error "gh repo create" "Failed to create and push to $REPO_VISIBILITY GitHub repository '$FULL_REPO_NAME'."
    }
    
    echo "GitHub repository created and code pushed successfully."
fi

echo "GitHub setup and push complete."
echo ""

# --- Step 3: Link Project to Vercel and GitHub ---
echo "--- 3/4: Linking project to Vercel and GitHub ---"

# Check if Vercel project is already linked
if vercel status --connected 2>/dev/null; then
    echo "Vercel project is already linked."
else
    echo "Linking project to Vercel..."
    # First link the project
    echo "Running: vercel link"
    vercel link || handle_error "vercel link" "Failed to link project to Vercel."
fi

# Check if Git is already connected
echo "Checking Git connection status..."
if vercel git ls 2>&1 | grep -q "$FULL_REPO_NAME"; then
    echo "✓ GitHub repository $FULL_REPO_NAME is already connected to Vercel"
else
    # Connect to GitHub
    echo "Connecting to GitHub repository..."
    echo "Running: vercel git connect"
    if ! output=$(vercel git connect 2>&1); then
        # Check if the error is just that it's already connected
        if echo "$output" | grep -q "is already connected to your project"; then
            echo "✓ GitHub repository is already connected to Vercel"
        else
            echo "$output"
            handle_error "vercel git connect" "Failed to connect GitHub repository to Vercel."
        fi
    fi
fi

echo "Project linked to Vercel and GitHub connection established."
echo ""

# Set up Clerk environment variables if not in .env
echo ""
echo "Setting up Clerk environment variables..."
echo "These are required for authentication to work. You can find them in your Clerk Dashboard."
echo "Visit https://dashboard.clerk.com/ to get your keys."
echo ""

# Try to get values from .env first
CLERK_PUB_KEY=$(get_env_value "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY")
CLERK_SECRET_KEY=$(get_env_value "CLERK_SECRET_KEY")

# Function to validate Clerk key format
validate_clerk_key() {
    local key=$1
    local key_type=$2
    
    if [ -z "$key" ]; then
        return 1
    fi
    
    # Public key should start with pk_test_ or pk_live_
    if [ "$key_type" = "public" ] && ! [[ $key =~ ^pk_(test|live)_ ]]; then
        return 1
    fi
    
    # Secret key should start with sk_test_ or sk_live_
    if [ "$key_type" = "secret" ] && ! [[ $key =~ ^sk_(test|live)_ ]]; then
        return 1
    fi
    
    return 0
}

# Handle public key
if validate_clerk_key "$CLERK_PUB_KEY" "public"; then
    echo "✓ Using existing NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY from .env"
else
    while ! validate_clerk_key "$CLERK_PUB_KEY" "public"; do
        if [ -n "$CLERK_PUB_KEY" ]; then
            echo "❌ Invalid Clerk publishable key format. It should start with pk_test_ or pk_live_"
        else
            echo "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY not found in .env"
        fi
        echo "Visit https://dashboard.clerk.com/last-active/api-keys to get your publishable key"
        read -p "Enter your NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: " CLERK_PUB_KEY
    done
    # Only update .env if we had to ask for a new value
    update_env_file "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY" "$CLERK_PUB_KEY"
fi

# Handle secret key
if validate_clerk_key "$CLERK_SECRET_KEY" "secret"; then
    echo "✓ Using existing CLERK_SECRET_KEY from .env"
else
    while ! validate_clerk_key "$CLERK_SECRET_KEY" "secret"; do
        if [ -n "$CLERK_SECRET_KEY" ]; then
            echo "❌ Invalid Clerk secret key format. It should start with sk_test_ or sk_live_"
        else
            echo "CLERK_SECRET_KEY not found in .env"
        fi
        echo "Visit https://dashboard.clerk.com/last-active/api-keys to get your secret key"
        read -p "Enter your CLERK_SECRET_KEY: " CLERK_SECRET_KEY
    done
    # Only update .env if we had to ask for a new value
    update_env_file "CLERK_SECRET_KEY" "$CLERK_SECRET_KEY"
fi

# Function to add env var to Vercel for production
add_vercel_env() {
    local key=$1
    local value=$2
    
    echo "----------------------------------------"
    echo "🔄 Setting up $key for production environment"
    
    # First try to remove any existing value
    echo "Removing existing $key from production environment if it exists..."
    vercel env rm "$key" production || {
        echo "Note: No existing variable to remove or removal failed (this is usually ok)"
    }
    
    # Create a temporary file
    local tmp_file
    tmp_file=$(mktemp)
    echo "$value" > "$tmp_file"
    
    # Add the new value
    echo "Adding $key to production environment..."
    echo "Running environment variable add command..."
    if vercel env add "$key" production < "$tmp_file"; then
        echo "✅ Successfully added $key to production environment"
        rm "$tmp_file"
    else
        local exit_code=$?
        echo "❌ Failed to add environment variable"
        echo "Exit code: $exit_code"
        rm "$tmp_file"
        handle_error "vercel env add" "Failed to add $key to Vercel production environment (exit code: $exit_code)"
    fi
    echo "----------------------------------------"
}

# Add variables to production environment
echo "🔐 Setting up Clerk environment variables in Vercel..."
echo ""
add_vercel_env "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY" "$CLERK_PUB_KEY"
add_vercel_env "CLERK_SECRET_KEY" "$CLERK_SECRET_KEY"

echo ""
echo "✅ Clerk environment variables have been set up successfully."
echo ""

# --- Step 4: Final Vercel Deployment ---
echo "--- 4/4: Initiating Vercel deployment ---"

VERCEL_DEPLOY_COMMAND="vercel deploy --confirm"
echo "Running: $VERCEL_DEPLOY_COMMAND"
$VERCEL_DEPLOY_COMMAND || handle_error "$VERCEL_DEPLOY_COMMAND" "Failed to initiate Vercel deployment."
echo "Vercel deployment initiated."
echo ""


# --- Completion ---
echo "🎉 Project Initialization Complete! 🎉"
echo "Your project is now:"
echo "- Local Git repository initialized and committed."
echo "- GitHub repository created at https://github.com/$FULL_REPO_NAME"
echo "- Code pushed to the '$MAIN_BRANCH_NAME' branch on GitHub."
echo "- Vercel project linked to the GitHub repository."
echo "- Vercel deployment triggered. Visit your Vercel dashboard to see the status."

# Open Vercel project in browser
echo ""
echo "Opening Vercel project in browser..."
VERCEL_PROJECT_URL=$(vercel project ls --json | grep -o '"url":"[^"]*"' | head -1 | cut -d'"' -f4)
if [ -n "$VERCEL_PROJECT_URL" ]; then
    open_url "https://$VERCEL_PROJECT_URL"
else
    echo "Could not determine Vercel project URL."
fi

if [ ${#ERRORS[@]} -gt 0 ]; then
    echo ""
    echo "⚠️ Warnings and Non-Fatal Issues Encountered: ⚠️"
    for error in "${ERRORS[@]}"; do
        # Filter out the fatal error header if it was added by handle_error
        if [[ "$error" != *"FATAL ERROR"* && "$error" != *"Summary of errors:"* && "$error" != *"- Error running command:"* && "$error" != *"- Details:"* ]]; then
            echo "- $error"
        fi
    done
    echo "Please review the output above for details."
fi

exit 0


--- File: tailwind.config.ts ---

import type { Config } from "tailwindcss"
import tailwindcssAnimate from "tailwindcss-animate"
import typography from '@tailwindcss/typography'

const config = {
  darkMode: "class",
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar))",
          foreground: "hsl(var(--sidebar-foreground))",
          border: "hsl(var(--sidebar-border))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
        float: {
          "0%, 100%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-20px)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        float: "float 15s ease-in-out infinite",
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: 'none',
            color: 'hsl(var(--foreground))',
            a: {
              color: 'hsl(var(--primary))',
              textDecoration: 'underline',
              fontWeight: '500',
            },
            h1: {
              color: 'hsl(var(--foreground))',
            },
            h2: {
              color: 'hsl(var(--foreground))',
            },
            h3: {
              color: 'hsl(var(--foreground))',
            },
            h4: {
              color: 'hsl(var(--foreground))',
            },
            code: {
              color: 'hsl(var(--foreground))',
              backgroundColor: 'hsl(var(--muted))',
              borderRadius: '0.25rem',
              padding: '0.15rem 0.3rem',
            },
            pre: {
              backgroundColor: 'hsl(var(--muted))',
              borderRadius: '0.5rem',
              padding: '1rem',
            },
            blockquote: {
              color: 'hsl(var(--muted-foreground))',
              borderLeftColor: 'hsl(var(--border))',
            },
            hr: {
              borderColor: 'hsl(var(--border))',
            },
            strong: {
              color: 'hsl(var(--foreground))',
            },
            thead: {
              color: 'hsl(var(--foreground))',
              borderBottomColor: 'hsl(var(--border))',
            },
            tbody: {
              tr: {
                borderBottomColor: 'hsl(var(--border))',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    tailwindcssAnimate,
    typography,
  ],
} satisfies Config

export default config



--- File: tests/admin.spec.ts ---

import { test, expect } from '@playwright/test';
import { setupAuthenticatedUser, setupCleanDatabase } from './utils/test-helpers';

test('should not be public', async ({ page }) => {
  await page.goto('/admin');
  await expect(page.getByRole('heading', { name: 'Access Denied' })).toBeVisible();
  await expect(page.getByRole('heading', { name: 'Development Environment' })).toBeVisible();
});

test('should load the admin dashboard', async ({ page }) => {
  // Reset database before this test
    await setupCleanDatabase();
    
    // Login as test user
    await setupAuthenticatedUser(page);
    
    // Navigate to the page
    await page.goto('/admin');
    await expect(page.getByRole('heading', { name: 'Admin Dashboard' })).toBeVisible();
});

test('can view analytics', async ({ page }) => {
  // Reset database before this test
    await setupCleanDatabase();
    
    // Login as test user
    await setupAuthenticatedUser(page);
    
    // Navigate to the page
    await page.goto('/admin/analytics');
    await expect(page.getByRole('heading', { name: 'Analytics' })).toBeVisible();
    await expect(page.getByRole('heading', { name: 'Total Visits (30 Days)' })).toBeVisible();
    await expect(page.getByRole('heading', { name: 'Recent Visits' })).toBeVisible();
});

test('can view mailing list', async ({ page }) => {
  // Reset database before this test
    await setupCleanDatabase();
    
    // Login as test user
    await setupAuthenticatedUser(page);

    // Navigate to the page
    await page.goto('/admin/mailing-list');
    await expect(page.getByRole('heading', { name: 'Mailing List' })).toBeVisible();    
});
  

--- File: tests/auth.spec.ts ---

import { test, expect } from '@playwright/test';

test('should be able to fill out the sign up form', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.getByRole('button', { name: 'Sign Up' }).click();
  await page.getByRole('textbox', { name: 'Email address' }).fill('hey@gmail.com');
  await page.getByRole('textbox', { name: 'Password' }).fill('GoodVibrations');
  await expect(page.getByRole('button', { name: 'Continue' })).toBeVisible();
});


--- File: tests/contact.spec.ts ---

import { test, expect } from '@playwright/test';

test('should be able to fill out the contact form', async ({ page }) => {
  await page.goto('http://localhost:3000/contact');
  await expect(page.getByText('Contact Us')).toBeVisible();
  await page.getByRole('textbox', { name: 'Name' }).fill('Kickin Poppin');
  await page.getByRole('textbox', { name: 'Email' }).fill('kickin@poppin.com');
  await page.getByRole('textbox', { name: 'Message' }).fill('Hey Yo');
});


--- File: tests/global-setup.ts ---

import { setupTestDatabase } from "./utils/db-reset"

/**
 * Global setup function that runs before all tests
 */
export default async function globalSetup() {
  await setupTestDatabase()
} 

--- File: tests/subscribe.spec.ts ---

import { test, expect } from '@playwright/test';
import { setupAuthenticatedUser, setupCleanDatabase } from './utils/test-helpers';
import { ConvexHttpClient } from "convex/browser";
import { api } from "@/convex/_generated/api";
import { Doc } from "@/convex/_generated/dataModel";

type MailingListSubscription = Doc<"mailing_list_subscriptions">;

// Initialize Convex client for test verification
const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

// Helper function to safely cast Convex response
async function getSubscriptions() {
  const response = await convex.query(api.mailingList.getSubscriptions);
  return response as unknown as MailingListSubscription[];
}

test('should have to sign in to subscribe', async ({ page }) => {
  await page.goto('http://localhost:3000/mailing-list');
  await expect(page.getByText('Please sign in to subscribe')).toBeVisible();
});

test('should be able to subscribe to the mailing list when signed in', async ({ page }) => {
  // Reset database before this test
  await setupCleanDatabase();
  
  // Login as test user
  await setupAuthenticatedUser(page);

  // Subscribe
  await page.goto('http://localhost:3000/mailing-list');
  
  // Wait for the form to be ready
  await page.waitForSelector('button:has-text("Subscribe")');

  // Click subscribe and wait for navigation/refresh
  await page.getByRole('button', { name: 'Subscribe' }).click();
  await page.waitForLoadState('networkidle');
  
  // Check for success message
  const toastText = await page.getByText('Successfully subscribed').textContent();
  console.log('Toast message:', toastText);
  
  // Check subscription status
  const statusText = await page.getByText('You are currently subscribed').textContent();
  console.log('Status message:', statusText);

  // Verify the document in Convex
  const subscriptions = await getSubscriptions();
  const subscription = subscriptions.find(s => s.email === 'john.polacek@gmail.com');
  expect(subscription).toBeTruthy();
  expect(subscription?.email).toBe('john.polacek@gmail.com');
  expect(subscription?.subscribedAt).toBeTruthy();
  expect(subscription?.unsubscribedAt).toBeNull();

  // Navigate to admin and check list
  await page.goto('http://localhost:3000/admin/mailing-list');
  await page.waitForLoadState('networkidle');

  // Wait for page to load and data to be fetched
  await expect(page.getByRole('heading', { name: 'Mailing List Subscribers' })).toBeVisible();
  
  // Check if email is in the list
  const emailCell = page.getByRole('cell', { name: 'john.polacek@gmail.com' });
  const isEmailVisible = await emailCell.isVisible();
  console.log('Email visible in admin list:', isEmailVisible);
  await expect(emailCell).toBeVisible();
  
  // Unsubscribe
  await page.goto('http://localhost:3000/mailing-list');
  await page.getByRole('button', { name: 'Unsubscribe' }).click();
  await expect(page.getByText('Subscribe to Our Mailing List')).toBeVisible();
  await page.goto('http://localhost:3000/admin/mailing-list');
  await expect(page.getByRole('cell', { name: 'john.polacek@gmail.com' })).toBeVisible();
  await expect(page.getByText('Unsubscribed')).toBeVisible();

  // Verify unsubscribe in Convex
  const updatedSubscriptions = await getSubscriptions();
  const unsubscription = updatedSubscriptions.find(s => s.email === 'john.polacek@gmail.com');
  expect(unsubscription).toBeTruthy();
  expect(unsubscription?.unsubscribedAt).toBeTruthy();
});


--- File: tests/utils/auth-helpers.ts ---

import { Page, expect } from '@playwright/test';
import { clerk, clerkSetup } from '@clerk/testing/playwright';

/**
 * Login credentials for test user
 */
export const TEST_USER = {
  email: process.env.TEST_USER_EMAIL!,
  password: process.env.TEST_USER_PASSWORD!,
  fullName: process.env.TEST_USER_FULL_NAME!,
  username: process.env.TEST_USER_USERNAME!,
  userId: process.env.TEST_USER_ID!
};

/**
 * Login a test user using Clerk authentication
 * @param page - Playwright page object
 */
export async function loginTestUser(page: Page): Promise<void> {
  // Navigate to an unprotected page that loads Clerk
  await page.goto('/');

  // Setup Clerk for testing
  await clerkSetup();

  // Use Clerk's testing utilities to sign in
  await clerk.signIn({
    page,
    signInParams: {
      strategy: 'password',
      identifier: TEST_USER.email,
      password: TEST_USER.password
    }
  });

  // Navigate to the home page and verify we're logged in
  await page.goto('/');
  await expect(page.getByRole('button', { name: 'Open user button' })).toBeVisible({timeout: 30000});
}

/**
 * Helper function to fill in login credentials and wait for successful login
 */
export async function fillLoginCredentials(page: Page): Promise<void> {
  await page.getByRole('textbox', { name: 'Email address' }).fill(TEST_USER.email);
  await page.waitForTimeout(500);
  await page.getByRole('button', { name: 'Continue' }).click();
  await page.waitForTimeout(500);
  await page.getByRole('textbox', { name: 'Password' }).fill(TEST_USER.password);
  await page.waitForTimeout(1000);
  await page.getByRole('button', { name: 'Continue' }).click();
  await expect(page.getByRole('button', { name: 'Open user button' })).toBeVisible({timeout: 30000});
}

/**
 * Logout the current user
 * @param page - Playwright page object
 */
export async function logoutUser(page: Page): Promise<void> {
  // Navigate to an unprotected page that loads Clerk
  await page.goto('/');
  
  await clerk.signOut({ page });
  await page.waitForTimeout(500);
} 

--- File: tests/utils/db-reset.ts ---

import { ConvexHttpClient } from "convex/browser"
import { api } from "@/convex/_generated/api"
import dotenv from 'dotenv'

dotenv.config()
const NODE_ENV = process.env.NODE_ENV || 'test'

// Ensure we're in test environment
if (NODE_ENV !== 'test' && NODE_ENV !== 'development') {
  throw new Error('Database reset utilities should only be used in test or development environment')
}

// Initialize Convex client
const convex = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!)

const TABLES_TO_RESET = ['mailing_list_subscriptions', 'visits'] as const
// Restrict to allowed table names for type safety
type TableName = typeof TABLES_TO_RESET[number]

/**
 * Delete all documents in a table
 */
export async function deleteCollection(tableName: TableName): Promise<void> {
  try {
    await convex.mutation(api.testing.deleteAll, { tableName })
    console.log(`Deleted all documents from ${tableName}`)
  } catch (error) {
    console.warn(`Warning: Failed to delete table ${tableName}:`, error)
  }
}

/**
 * Reset database for testing
 */
export async function resetDatabase(): Promise<void> {
  console.log('Resetting database...')
  for (const table of TABLES_TO_RESET) {
    await deleteCollection(table)
  }
  console.log('Database reset complete')
}

/**
 * Seed test data using Convex test mutation
 */
export async function seedTestData(): Promise<void> {
  console.log('Seeding test data...')
  await convex.mutation(api.testing.seedTestData, {})
  console.log('Test data seeding complete')
}

/**
 * Verify that all tables are empty
 */
export async function verifyDatabaseReset(): Promise<boolean> {
  try {
    for (const table of TABLES_TO_RESET) {
      const count = await convex.query(api.testing.countDocuments, { tableName: table })
      if (count > 0) {
        console.error(`Table ${table} is not empty`)
        return false
      }
    }
    return true
  } catch (error) {
    console.error('Error verifying database reset:', error)
    return false
  }
}

/**
 * Reset database for testing
 */
export async function setupTestDatabase(): Promise<void> {
  await resetDatabase()
  const isReset = await verifyDatabaseReset()
  if (!isReset) {
    throw new Error('Failed to reset database')
  }
} 

--- File: tests/utils/test-helpers.ts ---

import { test, expect, Page } from '@playwright/test';
import { resetDatabase, seedTestData } from './db-reset';
import { loginTestUser, logoutUser } from './auth-helpers';

/**
 * Reset the database before a test or group of tests
 */
export async function setupCleanDatabase() {
  await resetDatabase();
}

/**
 * Reset the database and seed it with test data
 */
export async function setupSeededDatabase() {
  await resetDatabase();
  await seedTestData();
}

/**
 * Login a test user
 * @param page - Playwright page object
 */
export async function setupAuthenticatedUser(page: Page) {
  await loginTestUser(page);
}

/**
 * Logout a user
 * @param page - Playwright page object
 */
export async function teardownAuthenticatedUser(page: Page) {
  await logoutUser(page).catch(e => console.warn('Failed to logout:', e));
}

// Export test and expect for convenience
export { test, expect }; 

--- File: tsconfig.json ---

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}


--- File: types/mailing-list.ts ---

export interface MailingListPreferences {
  marketing: boolean
  updates: boolean
}

export interface MailingListSubscription {
  id: string
  user_id: string
  email: string
  name: string | null
  subscribed_at: string
  unsubscribed_at: string | null
  preferences: MailingListPreferences
  created_at: string
  updated_at: string
}

export type CreateMailingListSubscription = Pick<MailingListSubscription, 'user_id' | 'email' | 'name'> & {
  preferences?: Partial<MailingListPreferences>
}

export type UpdateMailingListSubscription = Partial<Pick<MailingListSubscription, 'name' | 'unsubscribed_at'>> & {
  preferences?: Partial<MailingListPreferences>
} 

--- File: types/supabase.ts ---

export type Json =
  | string
  | number
  | boolean
  | null
  | { [key: string]: Json | undefined }
  | Json[]

export interface Database {
  public: {
    Tables: {
      user_visits: {
        Row: {
          id: string
          user_id: string | null
          path: string
          referrer: string | null
          timestamp: string
          created_at: string
          updated_at: string
          user_agent: string | null
        }
        Insert: {
          id?: string
          user_id?: string | null
          path: string
          referrer?: string | null
          timestamp?: string
          created_at?: string
          updated_at?: string
          user_agent?: string | null
        }
        Update: {
          id?: string
          user_id?: string | null
          path?: string
          referrer?: string | null
          timestamp?: string
          created_at?: string
          updated_at?: string
          user_agent?: string | null
        }
      }
      mailing_list_subscriptions: {
        Row: {
          id: string
          user_id: string
          email: string
          name: string | null
          subscribed_at: string
          unsubscribed_at: string | null
          preferences: {
            marketing: boolean
            updates: boolean
          }
          created_at: string
          updated_at: string
        }
        Insert: {
          id?: string
          user_id: string
          email: string
          name?: string | null
          subscribed_at?: string
          unsubscribed_at?: string | null
          preferences?: {
            marketing: boolean
            updates: boolean
          }
          created_at?: string
          updated_at?: string
        }
        Update: {
          id?: string
          user_id?: string
          email?: string
          name?: string | null
          subscribed_at?: string
          unsubscribed_at?: string | null
          preferences?: {
            marketing: boolean
            updates: boolean
          }
          created_at?: string
          updated_at?: string
        }
      }
    }
    Views: {
      [_ in never]: never
    }
    Functions: {
      [_ in never]: never
    }
    Enums: {
      [_ in never]: never
    }
  }
}