@extends('layouts.errors.app')

{{-- *******************************
Description: Title
**************************************--}}
@section('title', 'Titania Tickets - Server Maintenance')

{{-- *******************************
Description: CSS or JS Files
**************************************--}}
@push('css')

{{-- Alpine Plugins --}}
<script src="{{ asset('assets/landing/js/alpine-plugin.min.js') }}" defer></script>

{{-- Alpine Core --}}
<script src="{{ asset('assets/landing/js/alpine-core.min.js') }}" defer></script>

{{-- Starfield --}}
<script src="{{ asset('assets/landing/js/starfield.js') }}" defer></script>


@endpush


{{-- *******************************
Description: Main Content
**************************************--}}
@section('main-content')

<!-- Server Maintenance content -->
<div class="relative mx-auto w-full max-w-screen-xl gap-16 px-5 py-20 sm:px-6 lg:px-8 lg:pt-28">
  <img src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt=""
    class="absolute -bottom-3/4 left-1/2 h-auto max-w-3xl -translate-x-1/2 object-contain opacity-90 sm:max-w-4xl md:-bottom-full lg:-bottom-[135%] lg:max-w-7xl" />
  <!-- Text content -->
  <div class="relative z-10 flex flex-col items-center">
    <div class="flex items-center rounded-full bg-zinc-950/[.01] shadow-inner-blur">
      <div class="flex h-full w-full items-center space-x-2 rounded-full border border-crimson-200/[.06] px-4 py-1.5">
        <svg class="h-4 w-4 text-crimson-200" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
          viewBox="0 0 18 18">
          <title>ufo</title>
          <g fill="currentColor">
            <circle cx="14.75" cy="1.75" r=".75"></circle>
            <path
              d="M3.869,1.894l-.947-.315-.315-.947c-.103-.306-.609-.306-.712,0l-.315,.947-.947,.315c-.153,.051-.256,.194-.256,.356s.104,.305,.256,.356l.947,.315,.315,.947c.051,.153,.194,.256,.356,.256s.305-.104,.356-.256l.315-.947,.947-.315c.153-.051,.256-.194,.256-.356s-.104-.305-.256-.356Z">
            </path>
            <path
              d="M17.054,5.256c-.232-1.36-2.349-1.747-4.612-1.721-.653-1.501-2.143-2.51-3.817-2.51-2.234,0-4.048,1.771-4.148,3.981-.323,.123-.638,.249-.921,.382-1.666,.783-2.431,1.646-2.274,2.563,.243,1.424,2.511,1.73,4.41,1.73,.435,0,.85-.016,1.218-.039,.414-.025,.728-.38,.703-.794s-.374-.738-.794-.703c-2.479,.149-3.737-.22-4.029-.453,.282-.469,2.244-1.66,6.166-2.329,3.921-.671,6.169-.198,6.59,.151-.211,.345-1.4,1.18-4.097,1.887-.401,.105-.641,.515-.536,.916,.104,.4,.516,.638,.916,.536,1.681-.44,5.554-1.672,5.225-3.595Z"
              fill="currentColor"></path>
            <path
              d="M16.902,15.88L11.675,6.67c-.289-.551-1.074-.692-2.856-.38-2.016,.352-2.313,.776-2.411,.916-.07,.1-.13,.266-.146,.396l-1.006,8.561c-.049,.411,.246,.784,.657,.832,.03,.004,.059,.005,.088,.005,.375,0,.699-.281,.744-.663l.915-7.781c.366-.005,.856-.048,1.527-.166,.57-.1,1.21-.275,1.529-.374l4.883,8.604c.138,.244,.392,.38,.653,.38,.125,0,.253-.031,.37-.098,.36-.205,.487-.662,.282-1.022Z">
            </path>
          </g>
        </svg>

        <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
          Server Maintenance
        </span>
      </div>
    </div>
    <h1 class="mt-5 max-w-5xl text-center text-8xl font-bold tracking-wide text-crimson-100 md:text-9xl">
      5<span class="relative inline-block text-nowrap">
        <span
          class="relative z-10 bg-gradient-to-b from-crimson-400 via-crimson-400 to-crimson-500 bg-clip-text text-transparent">0
        </span>
        <span class="absolute -top-0.5 left-0 -z-10 text-crimson-300">0</span> </span>3
    </h1>
    <p class="mt-5 max-w-xl text-center text-lg leading-8 text-zinc-200">
      Our server is currently undergoing scheduled maintenance to improve your experience. We apologize for any
      inconvenience
      this may cause and appreciate your patience. Please check back shortly. Thank you for understanding!
    </p>
    {{-- <div class="mt-8 flex items-center justify-center space-x-3 sm:space-x-5">
      <a href="{{ route('landing-page.home') }}" id="top-cta"
        class="group relative inline-flex items-center rounded-lg text-crimson-100 bg-crimson-500 px-4 py-2.5 text-sm font-semibold  antialiased  outline-none after:absolute after:inset-0 after:h-full after:w-full after:rounded-lg after:opacity-0 shadow-btn-secondary after:shadow-btn-secondary-hover after:transition-all after:duration-200 after:content-[''] hover:after:opacity-100 sm:px-5 sm:py-3 sm:text-[15px]">
        <div class="relative z-10 flex w-full items-center justify-center space-x-2 text-nowrap">
          <span>Go back home</span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4">
            <path fill-rule="evenodd"
              d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
              clip-rule="evenodd" />
          </svg>
        </div>
      </a>
    </div> --}}
  </div>
</div>

@endsection

{{-- *******************************
Description: JS Files
**************************************--}}
@push('scripts')

@endpush