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

# Viax Documentation

> Build modern mobility experiences with real-time tracking, intelligent routing, and comprehensive driver management

<div className="relative overflow-hidden bg-gradient-to-br from-[#2196F3] via-[#1976D2] to-[#1565C0] dark:from-[#1976D2] dark:via-[#1565C0] dark:to-[#0D47A1] py-20">
  <div className="max-w-7xl mx-auto px-6 sm:px-8">
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
      <div className="lg:col-span-7 text-center lg:text-left">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
          Welcome to Viax
        </h1>

        <p className="text-lg sm:text-xl text-white/90 max-w-2xl mx-auto lg:mx-0 mb-8">
          A complete ride-hailing platform connecting users, drivers, and administrators with real-time GPS tracking, intelligent routing, and powerful operational controls.
        </p>

        <div className="flex flex-wrap gap-4 justify-center lg:justify-start">
          <a href="/quickstart" className="inline-flex items-center px-6 py-3 bg-white text-[#2196F3] rounded-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg">
            Get Started

            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>

          <a href="/api/introduction" className="inline-flex items-center px-6 py-3 border-2 border-white/30 bg-white/10 text-white rounded-lg font-semibold hover:bg-white/20 transition-colors backdrop-blur-sm">
            Explore API

            <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
        </div>
      </div>

      <div className="lg:col-span-5 hidden lg:block">
        <div className="relative">
          <div className="absolute inset-0 bg-white/10 rounded-2xl backdrop-blur-sm" />

          <div className="relative p-8 text-white">
            <div className="text-sm font-mono opacity-90">
              <div className="mb-4">
                <span className="text-white/60">// Initialize Viax</span>
              </div>

              <div className="mb-2">
                <span className="text-blue-300">POST</span> /auth/login
              </div>

              <div className="mb-2">
                <span className="text-green-300">GET</span> /trips/status
              </div>

              <div className="mb-2">
                <span className="text-purple-300">POST</span> /map/route
              </div>

              <div className="mt-4 text-white/60">
                ✓ Real-time tracking<br />
                ✓ Smart routing<br />
                ✓ Driver management
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Quick Start
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Get your Viax platform up and running in minutes with our comprehensive setup guide.
  </p>

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

      ```bash theme={null}
      git clone https://github.com/Braian551/viax.git
      cd viax
      flutter pub get
      ```
    </Step>

    <Step title="Configure environment">
      Set up your environment variables for development or production.

      ```dart theme={null}
      // lib/src/core/config/app_config.dart
      static const String _envBaseUrl = String.fromEnvironment(
        'API_BASE_URL',
        defaultValue: 'http://76.13.114.194', // Production
      );
      ```

      <Accordion title="Available environments">
        * **Production**: `http://76.13.114.194`
        * **Local Development**: `http://192.168.x.x/viax/backend`
        * **Android Emulator**: `http://10.0.2.2/viax/backend`
      </Accordion>
    </Step>

    <Step title="Run the application">
      Launch the app on your device or emulator.

      ```bash theme={null}
      flutter run
      ```

      <Note>
        For production builds, use `flutter build apk --release` or `flutter build appbundle --release`
      </Note>
    </Step>

    <Step title="Configure backend (optional)">
      If running locally, set up the PHP backend with MySQL.

      ```bash theme={null}
      # Using Laragon (Windows)
      ./setup_local.ps1

      # Or manually configure database
      # Create database 'viax'
      # Import basededatosfinal.sql
      ```

      See the [Local Development](/setup/local-development) guide for detailed instructions.
    </Step>
  </Steps>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Explore by Role
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Jump into documentation tailored for your specific use case.
  </p>

  <CardGroup cols={3}>
    <Card title="For Users" icon="user" href="/users/overview">
      Learn how to book rides, track trips, and manage your profile
    </Card>

    <Card title="For Drivers" icon="car" href="/drivers/overview">
      Get started with driver onboarding, trip management, and earnings
    </Card>

    <Card title="For Admins" icon="gauge" href="/admin/overview">
      Manage users, drivers, configure pricing, and monitor operations
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Key Features
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Powerful capabilities built into the Viax platform.
  </p>

  <CardGroup cols={2}>
    <Card title="Real-time GPS Tracking" icon="location-dot" href="/concepts/trip-lifecycle">
      Track user and driver locations in real-time with high accuracy positioning
    </Card>

    <Card title="Intelligent Routing" icon="route" href="/api/map/routing">
      Calculate optimal routes using Mapbox with traffic-aware navigation
    </Card>

    <Card title="Dynamic Pricing" icon="dollar-sign" href="/users/pricing-system">
      Flexible pricing system with distance, time, and surge calculations
    </Card>

    <Card title="Driver Verification" icon="shield-check" href="/drivers/document-verification">
      Comprehensive document verification and approval workflows
    </Card>

    <Card title="Admin Dashboard" icon="chart-line" href="/admin/dashboard-analytics">
      Real-time analytics, user management, and operational insights
    </Card>

    <Card title="Push Notifications" icon="bell" href="/drivers/notifications">
      Firebase-powered notifications for trip updates and driver alerts
    </Card>

    <Card title="Location Sharing" icon="share-nodes" href="/users/location-sharing">
      Share trip location with friends and family for safety
    </Card>

    <Card title="Clean Architecture" icon="cubes" href="/concepts/clean-architecture">
      Maintainable, testable codebase ready for scale and microservices
    </Card>
  </CardGroup>
</div>

<div className="mt-16 mb-16 max-w-5xl mx-auto px-6">
  <h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-4">
    Technical Resources
  </h2>

  <p className="text-base text-gray-600 dark:text-gray-400 mb-8">
    Deep dive into architecture, setup, and API integration.
  </p>

  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
    <a href="/concepts/architecture" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#2196F3] dark:hover:border-[#2196F3] overflow-hidden transition-colors no-underline">
      <div className="h-40 bg-gradient-to-br from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-800 flex items-center justify-center">
        <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
      </div>

      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
          Architecture Overview
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Learn about Viax's modular architecture, clean code principles, and microservices readiness.
        </p>

        <div className="flex items-center text-sm font-medium text-[#2196F3] group-hover:text-[#1976D2]">
          Explore architecture

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/setup/installation" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#2196F3] dark:hover:border-[#2196F3] overflow-hidden transition-colors no-underline">
      <div className="h-40 bg-gradient-to-br from-green-500 to-green-600 dark:from-green-600 dark:to-green-800 flex items-center justify-center">
        <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
      </div>

      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
          Setup Guide
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Complete installation and configuration guide for local development and production deployment.
        </p>

        <div className="flex items-center text-sm font-medium text-[#2196F3] group-hover:text-[#1976D2]">
          Get started

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/api/introduction" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#2196F3] dark:hover:border-[#2196F3] overflow-hidden transition-colors no-underline">
      <div className="h-40 bg-gradient-to-br from-purple-500 to-purple-600 dark:from-purple-600 dark:to-purple-800 flex items-center justify-center">
        <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
        </svg>
      </div>

      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
          API Reference
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Complete REST API documentation with endpoints for auth, trips, maps, and admin operations.
        </p>

        <div className="flex items-center text-sm font-medium text-[#2196F3] group-hover:text-[#1976D2]">
          View API docs

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>

    <a href="/features" className="group block rounded-2xl border border-gray-200 dark:border-[#27272a] hover:border-[#2196F3] dark:hover:border-[#2196F3] overflow-hidden transition-colors no-underline">
      <div className="h-40 bg-gradient-to-br from-orange-500 to-orange-600 dark:from-orange-600 dark:to-orange-800 flex items-center justify-center">
        <svg className="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
        </svg>
      </div>

      <div className="p-6 bg-white dark:bg-[#1a1d27]">
        <h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">
          Platform Features
        </h3>

        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Discover all features including GPS tracking, routing, pricing, notifications, and more.
        </p>

        <div className="flex items-center text-sm font-medium text-[#2196F3] group-hover:text-[#1976D2]">
          See all features

          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
          </svg>
        </div>
      </div>
    </a>
  </div>
</div>

<div className="mt-20 mb-16 max-w-5xl mx-auto px-6">
  <div className="rounded-2xl bg-gradient-to-r from-[#2196F3] to-[#1976D2] dark:from-[#1976D2] dark:to-[#1565C0] p-8 sm:p-12 text-center">
    <h2 className="text-2xl sm:text-3xl font-bold text-white mb-4">
      Ready to build your mobility platform?
    </h2>

    <p className="text-lg text-white/90 max-w-2xl mx-auto mb-8">
      Start with our quickstart guide and have your first ride-hailing feature running in minutes.
    </p>

    <a href="/quickstart" className="inline-flex items-center px-6 py-3 bg-white text-[#2196F3] rounded-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg">
      Get Started Now

      <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
      </svg>
    </a>
  </div>
</div>