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

# EpiNeko Documentation

<div className="relative h-[600px] w-full flex items-center overflow-hidden bg-gradient-to-br from-[#0f1117] via-[#1a1d27] to-[#0f1117]">
  <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,_rgba(255,107,157,0.15)_0%,_transparent_50%)]" />

  <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,_rgba(214,99,132,0.1)_0%,_transparent_50%)]" />

  <div className="container mx-auto px-6 relative z-10 max-w-6xl">
    <div className="max-w-3xl">
      <div className="flex items-center gap-3 mb-6">
        <span className="px-4 py-1.5 bg-[#FF6B9D] text-white text-xs font-bold rounded-full shadow-lg shadow-[#FF6B9D]/30 uppercase tracking-wider">
          Anime Tracking Platform
        </span>
      </div>

      <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-white mb-6 tracking-tight">
        Welcome to <span className="text-[#FF6B9D]">EpiNeko</span>
      </h1>

      <p className="text-xl text-gray-300 dark:text-gray-300 mb-10 max-w-2xl leading-relaxed">
        Track your anime journey with a modern, visual platform. Discover new series, manage your watchlist, and never miss an episode.
      </p>

      <div className="flex flex-wrap gap-4">
        <a href="/quickstart" className="inline-flex items-center px-8 py-3 rounded-lg bg-[#FF6B9D] hover:bg-[#D63384] text-white font-semibold transition-all shadow-lg shadow-[#FF6B9D]/30 hover:shadow-[#FF6B9D]/50 hover:scale-105 no-underline">
          Get Started
        </a>

        <a href="/features" className="inline-flex items-center px-8 py-3 rounded-lg border border-white/30 bg-white/10 hover:bg-white/20 text-white font-semibold transition-all backdrop-blur-sm no-underline">
          Explore Features
        </a>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">Quick Start</h2>
    <p className="text-base text-gray-600 dark:text-gray-400">Get up and running with EpiNeko in minutes</p>
  </div>

  <Steps>
    <Step title="Clone and Install">
      Clone the repository and install dependencies:

      ```bash theme={null}
      git clone https://github.com/devperez08/platform-list-anime.git
      cd platform-list-anime
      npm install
      ```
    </Step>

    <Step title="Configure Environment">
      Set up your Supabase credentials and environment variables:

      ```bash theme={null}
      cp .env.example .env.local
      ```

      Add your Supabase project URL and anon key to the `.env.local` file.
    </Step>

    <Step title="Run the Application">
      Start the development server:

      ```bash theme={null}
      npm run dev
      ```

      Open [http://localhost:3000](http://localhost:3000) to see your app.
    </Step>

    <Step title="Create Your Account">
      Sign up with email or use social authentication to start tracking your anime collection.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">Explore by Topic</h2>
    <p className="text-base text-gray-600 dark:text-gray-400">Discover everything EpiNeko has to offer</p>
  </div>

  <CardGroup cols={2}>
    <Card title="Library Management" icon="book" href="/features/library-management">
      Build and organize your personal anime collection with custom lists and tracking.
    </Card>

    <Card title="Anime Discovery" icon="compass" href="/features/anime-discovery">
      Explore trending anime, search the catalog, and find your next favorite series.
    </Card>

    <Card title="Progress Tracking" icon="chart-line" href="/features/progress-tracking">
      Track episodes watched, set statuses, and rate your shows.
    </Card>

    <Card title="Authentication" icon="lock" href="/authentication">
      Secure sign-in with Supabase authentication and social login support.
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <div className="mb-12">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">Integration & Development</h2>
    <p className="text-base text-gray-600 dark:text-gray-400">Technical resources for developers</p>
  </div>

  <CardGroup cols={3}>
    <Card title="Jikan API" icon="plug" href="/integration/jikan-api">
      Learn how EpiNeko integrates with Jikan API v4 for anime data.
    </Card>

    <Card title="Database Schema" icon="database" href="/integration/database-schema">
      Explore the PostgreSQL schema and table structures.
    </Card>

    <Card title="Project Structure" icon="folder-tree" href="/development/project-structure">
      Understand the Next.js 15 App Router architecture.
    </Card>

    <Card title="Components" icon="puzzle-piece" href="/development/components">
      Discover reusable React components and UI patterns.
    </Card>

    <Card title="Services" icon="code" href="/development/services">
      API services for Jikan and Supabase integration.
    </Card>

    <Card title="Deployment" icon="rocket" href="/development/deployment">
      Deploy EpiNeko to production with Vercel or other platforms.
    </Card>
  </CardGroup>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl border border-gray-200 dark:border-[#27272a] bg-gray-50 dark:bg-[#1a1d27] p-8 sm:p-12 text-center">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
      Ready to start tracking?
    </h2>

    <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
      Set up your own EpiNeko instance and start managing your anime collection today.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-8 py-3 rounded-lg bg-[#FF6B9D] hover:bg-[#D63384] text-white font-semibold transition-all shadow-lg shadow-[#FF6B9D]/30 hover:shadow-[#FF6B9D]/50 no-underline">
      Get Started Now
    </a>
  </div>
</div>