> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Antony-Figueroa/my-evershop-app/llms.txt
> Use this file to discover all available pages before exploring further.

<div className="relative w-full overflow-hidden">
  <div className="bg-gradient-to-br from-[#2D5A3D] via-[#1E3D2A] to-[#0f1a12] dark:from-[#1E3D2A] dark:via-[#0f1a12] dark:to-[#000000] py-20">
    <div className="max-w-6xl mx-auto px-6">
      <div className="text-center">
        <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
          My EverShop App Documentation
        </h1>

        <p className="text-xl text-gray-200 dark:text-gray-300 mb-10 max-w-3xl mx-auto">
          Build powerful e-commerce experiences with EverShop's modular architecture. Extend functionality with custom extensions and create beautiful storefronts with themes.
        </p>

        <div className="flex flex-wrap justify-center gap-4">
          <a href="/quickstart" className="bg-white text-[#2D5A3D] px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors no-underline">
            Get Started
          </a>

          <a href="/architecture/overview" className="border-2 border-white/30 bg-white/10 text-white px-8 py-3 rounded-lg font-semibold hover:bg-white/20 transition-colors no-underline">
            Explore Architecture
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-3">Quick Start</h2>
  <p className="text-gray-600 dark:text-gray-400 mb-8">Get your development environment up and running in minutes</p>

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

      ```bash theme={null}
      npm install
      ```
    </Step>

    <Step title="Configure your environment">
      Set up your database connection and shop settings in the configuration files:

      ```bash theme={null}
      # Start the setup process
      npm run setup
      ```

      <Note>
        The setup will guide you through database configuration, admin account creation, and initial shop settings.
      </Note>
    </Step>

    <Step title="Start development server">
      Launch the development server with hot-reload:

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

      Your store will be available at `http://localhost:3000`
    </Step>

    <Step title="Create your first extension">
      Extensions are the building blocks of functionality. Learn how to [create custom extensions](/guides/creating-extensions) to add features to your store.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-3">Explore by Topic</h2>
  <p className="text-gray-600 dark:text-gray-400 mb-8">Dive into the core concepts powering this e-commerce platform</p>

  <CardGroup cols={3}>
    <Card title="Extensions" icon="puzzle-piece" href="/concepts/extensions">
      Build custom functionality with the modular extension system
    </Card>

    <Card title="Themes" icon="palette" href="/concepts/themes">
      Create beautiful storefronts with React-based themes
    </Card>

    <Card title="GraphQL API" icon="diagram-project" href="/concepts/graphql">
      Query and mutate data with the built-in GraphQL API
    </Card>

    <Card title="Routing" icon="route" href="/concepts/routing">
      Understand how pages and API endpoints are registered
    </Card>

    <Card title="Configuration" icon="gear" href="/architecture/configuration">
      Configure shop settings, extensions, and themes
    </Card>

    <Card title="Event Subscribers" icon="bolt" href="/guides/event-subscribers">
      React to system events with custom subscribers
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-3">Development Guides</h2>
  <p className="text-gray-600 dark:text-gray-400 mb-8">Step-by-step guides for building with EverShop</p>

  <CardGroup cols={2}>
    <Card title="Creating Extensions" icon="plus-circle" href="/guides/creating-extensions">
      Build custom extensions to add new functionality
    </Card>

    <Card title="API Endpoints" icon="server" href="/guides/api-endpoints">
      Create REST API endpoints with route configuration
    </Card>

    <Card title="Page Components" icon="browser" href="/guides/page-components">
      Build React components for frontend pages
    </Card>

    <Card title="Cron Jobs" icon="clock" href="/guides/cron-jobs">
      Schedule recurring tasks with cron jobs
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-3xl font-semibold text-gray-900 dark:text-white mb-3">API Reference</h2>
  <p className="text-gray-600 dark:text-gray-400 mb-8">Comprehensive reference for GraphQL queries, REST endpoints, and configuration</p>

  <CardGroup cols={2}>
    <Card title="GraphQL API" icon="code" href="/api/graphql/overview" cta="Explore GraphQL">
      Query and mutate data with type-safe GraphQL operations
    </Card>

    <Card title="REST API" icon="terminal" href="/api/rest/overview" cta="Explore REST">
      Access resources through RESTful HTTP endpoints
    </Card>
  </CardGroup>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="bg-gradient-to-br from-[#E8F5E9] to-[#d4edd8] dark:from-[#1a2d20] dark:to-[#0f1a12] border border-[#2D5A3D]/20 dark:border-[#2D5A3D]/40 rounded-2xl p-10 text-center">
    <h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">Ready to build?</h2>

    <p className="text-lg text-gray-700 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
      Start building your e-commerce platform with EverShop's powerful extension system
    </p>

    <a href="/quickstart" className="inline-block bg-[#2D5A3D] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[#1E3D2A] transition-colors no-underline">
      Get Started Now
    </a>
  </div>
</div>