> ## Documentation Index
> Fetch the complete documentation index at: https://acm-aa28ebf6.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Overview

> Next.js 16 + React 19 + Tailwind CSS 4.1

## Technology Stack

<CardGroup cols={3}>
  <Card title="Next.js 16" icon="react">
    App Router + Server Components
  </Card>

  <Card title="React 19" icon="atom">
    Latest React features
  </Card>

  <Card title="Tailwind CSS 4.1" icon="paintbrush">
    Utility-first styling
  </Card>

  <Card title="Framer Motion" icon="sparkles">
    Smooth animations
  </Card>

  <Card title="TypeScript 5" icon="code">
    Type safety
  </Card>

  <Card title="Lucide React" icon="icons">
    Icon library
  </Card>
</CardGroup>

## Project Structure

```
src/
  app/  # Next.js pages
 layout.tsx# Root layout
 page.tsx  # Landing page
 explore/  # Browse servers
 server/[id]/ # Server details
 my-servers/  # User's servers
 playground/  # Test servers
 profile/  # User profile
 settings/ # User settings
  components/ # Reusable components
 auth-modal.tsx  # Authentication
 header.tsx# Navigation
 server-card.tsx # Server display
 server-detail.tsx  # Server info
 paywall-modal.tsx  # Payments
 ...
  lib/
 types.ts  # TypeScript types
```

## Key Pages

**Landing Page (`/`)**

* Hero section with animated text
* Call-to-action buttons
* Wave background animation

**Explore (`/explore`)**

* List all MCP servers
* Search functionality
* Voice search support
* Filter by language, pricing

**Server Details (`/server/[id]`)**

* Server metadata
* Security report visualization
* Available tools list
* Pricing and purchase flow

**My Servers (`/my-servers`)**

* User's published servers
* Edit and delete options

**Playground (`/playground`)**

* Interactive MCP testing
* Tool execution
* Response visualization

## Components

**`auth-modal.tsx`**

* Firebase authentication
* Email/password login
* Google/GitHub OAuth
* Register new users

**`server-card.tsx`**

* Display server info
* Show security score
* Pricing badge
* Language indicator

**`paywall-modal.tsx`**

* Razorpay integration
* Payment flow
* Order verification

**`header.tsx`**

* Navigation menu
* User authentication state
* Logo and branding

## API Integration

Connects to Go backend:

```typescript theme={null}
const API_URL = process.env.NEXT_PUBLIC_API_URL;

// List servers
const res = await fetch(`${API_URL}/api/v1/servers`);
const data = await res.json();

// Get server details
const res = await fetch(`${API_URL}/api/v1/servers/${name}`);
const server = await res.json();
```

## Styling

**Brand Colors:**

```css theme={null}
--brand-red: #ef4444 --brand-red-light: #f87171;
```

**Dark Theme:**

* Background: Black (#000000)
* Surface: White with opacity
* Text: White variants

## Deployment

Hosted on Vercel:

* Automatic deployments from main branch
* Environment variables configured
* Custom domain support

## Next Steps

<CardGroup cols={2}>
  <Card title="Setup" icon="gear" href="/frontend/setup">
    Local development setup
  </Card>

  <Card title="Components" icon="layer-group" href="/frontend/components">
    Component library
  </Card>

  <Card title="Deploy" icon="rocket" href="/frontend/deployment">
    Deploy to Vercel
  </Card>

  <Card title="Backend" icon="server" href="/backend/overview">
    API integration
  </Card>
</CardGroup>