@extends('layouts.landing-page.app')

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

{{-- *******************************
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>

{{-- Main JS --}}
<script src="{{ asset('assets/landing/js/main.js') }}" defer></script>

@endpush

{{-- *******************************
Description: Hero Content
**************************************--}}
@section('hero-content')
<!-- Pricing hero -->
<div class="pb-12 pt-20 md:pb-20 lg:py-28">
  <div class="relative">
    <!-- Stars -->
    <div class="absolute inset-0 -z-10" aria-hidden="true">
      <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield></canvas>
    </div>

    <div class="mx-auto w-full max-w-4xl gap-16 px-5 sm:px-6 lg:max-w-screen-xl lg:px-8"
      x-data="{ billingType: 'monthly' }">
      <!-- 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-3.5 w-3.5 text-crimson-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
              viewBox="0 0 16 16">
              <title>tags-stack</title>
              <g fill="currentColor">
                <path
                  d="M15.854,7.146l-7-7A.5.5,0,0,0,8.5,0h-5A.5.5,0,0,0,3,.5v1H5.5a1.986,1.986,0,0,1,1.414.586l7,7a1.99,1.99,0,0,1,.3.4l1.636-1.636A.5.5,0,0,0,15.854,7.146Z">
                </path>
                <path
                  d="M5.854,3.146A.5.5,0,0,0,5.5,3H.5a.5.5,0,0,0-.5.5v5a.5.5,0,0,0,.146.354l7,7a.5.5,0,0,0,.708,0l5-5a.5.5,0,0,0,0-.708ZM3,7A1,1,0,1,1,4,6,1,1,0,0,1,3,7Z"
                  fill="currentColor"></path>
              </g>
            </svg>
            <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
              Titania Tickets TPA Fees
            </span>
          </div>
        </div>
        <h1
          class="mt-5 max-w-4xl text-center text-[2.75rem] font-bold leading-[1.125] text-crimson-100 sm:text-5xl sm:leading-[1.125] md:text-6xl md:leading-[1.125] lg:text-[64px]">
          Flexible tiers tailored to your needs
        </h1>
        <p class="mt-5 max-w-xl text-center text-[17px] leading-8 text-zinc-200 sm:text-lg sm:leading-8">
          Find the ideal ticket assistance tier that fits your goals and needs, giving you the flexibility to secure
          your tickets
          your way.
        </p>
      </div>

      <!-- Pricing cards -->
      <div
        class="mx-auto mt-12 flex max-w-lg flex-col items-center sm:mt-16 sm:max-w-xl lg:mx-0 lg:mt-20 lg:max-w-none">
        <!-- Monthly/Annual toggle -->
        {{-- <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-1 py-1">
            <button @click="billingType = 'monthly'"
              class="group relative inline-flex items-center overflow-hidden rounded-full px-4 py-2 text-sm font-semibold leading-4 antialiased"
              :class="billingType === 'monthly' ? 'bg-btn-primary text-crimson-50 shadow-btn-primary' : 'text-crimson-50 hover:text-white'">
              Monthly
            </button>
            <button @click="billingType = 'annual'"
              class="group relative inline-flex items-center overflow-hidden rounded-full px-4 py-2 text-sm font-semibold leading-4 antialiased"
              :class="billingType === 'annual' ? 'bg-btn-primary text-crimson-50 shadow-btn-primary' : 'text-crimson-50 hover:text-white'">
              Annually
            </button>
          </div>
        </div> --}}

        <!-- Plans -->
        <div class="relative">
          <div class="absolute -top-96 bottom-48 left-0 right-80 -z-10">
            <image src="{{ asset('assets/landing/media/long-gradient.png') }}" alt=""
              class="h-full w-full object-contain object-center opacity-60" />
          </div>
          <div class="absolute -bottom-64 -left-96 -right-96 top-0 -z-10">
            <img src="{{ asset('assets/landing/media/cosmic-butterfly-2.png') }}" alt=""
              class="h-full w-full object-fill opacity-10" />
          </div>
          <div class="mt-10 w-full space-y-10 lg:grid lg:grid-cols-3 lg:gap-5 lg:space-y-0 xl:gap-12">
            <!-- Pricing plan 1 -->
            <div class="flex flex-1 flex-col space-y-8 lg:space-y-0">
              <!-- Pricing card -->
              <div class="flex-1 rounded-2xl bg-zinc-950/[.01] shadow-inner-blur">
                <div
                  class="relative flex h-full w-full flex-col overflow-hidden rounded-2xl border border-crimson-200/[.06] px-5 py-7 xl:px-7 xl:py-12">
                  <div class="flex-1">
                    <p class="text-base font-semibold text-white">
                      Bronze Tier
                    </p>
                    <div class="mt-2.5 flex items-start space-x-3">
                      <span class="relative inline-block text-nowrap text-5xl font-semibold leading-[1.125]"
                        data-monthly-price="₱500" data-annually-price="₱500">
                        <span
                          class="relative z-10 bg-gradient-to-b from-crimson-400 via-crimson-400 to-crimson-500 bg-clip-text text-transparent">
                          <span
                            x-text="billingType === 'monthly' ? $el.parentNode.parentNode.dataset.monthlyPrice : $el.parentNode.parentNode.dataset.annuallyPrice">₱500</span>
                        </span>
                        {{-- <span class="absolute -top-px left-0 -z-10 text-crimson-300"
                          x-text="billingType === 'monthly' ? $el.parentNode.dataset.monthlyPrice : $el.parentNode.dataset.annuallyPrice">
                          ₱9
                        </span> --}}
                      </span>
                      <span class="mt-0.5 flex flex-col text-sm font-medium text-crimson-100/75">
                        <br />
                        <span>per ticket</span>
                        {{-- <span>per month</span> --}}
                      </span>
                    </div>
                    <p class="mt-4 text-[17px] leading-7 text-zinc-300">
                      Good for low tier tickets such as Upper Box Regular and General Admission.
                    </p>
                  </div>

                  {{-- <a href="#"
                    class="group relative mt-8 inline-flex w-full items-center rounded-lg bg-zinc-950/[.01] px-3.5 py-4 text-base font-semibold leading-none text-crimson-50 antialiased shadow-btn-secondary outline-none duration-200 ease-in-out after:absolute after:inset-0 after:h-full after:w-full after:rounded-lg after:opacity-0 after:shadow-btn-secondary-hover after:transition-all after:duration-200 after:content-[''] hover:bg-crimson-900/[0.03] hover:text-white hover:after:opacity-100 sm:px-4 sm:py-4 sm:text-[15px]">
                    <div class="relative z-10 flex w-full items-center justify-center space-x-2 text-nowrap">
                      Buy this plan
                    </div>
                  </a> --}}
                </div>
              </div>
              {{-- Features --}}
              {{-- <div class="space-y-8 lg:hidden">
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Section Requests
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">

                    Closest Row Possible

                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Adjacent Seats
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Restock Priority
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    General Admission, Upper Box Regular
                  </p>
                </div>

              </div> --}}
            </div>

            <!-- Pricing plan 2 -->
            <div class="flex flex-1 flex-col space-y-8 lg:space-y-0">
              <!-- Pricing card -->
              <div class="flex-1 rounded-2xl bg-zinc-950/[.01] shadow-inner-blur">
                <div
                  class="relative flex h-full w-full flex-col overflow-hidden rounded-2xl border border-crimson-200/[.06] px-5 py-7 xl:px-7 xl:py-12">
                  <div class="flex-1">
                    <p class="text-base font-semibold text-white">
                      Silver Tier
                    </p>
                    <div class="mt-2.5 flex items-start space-x-3">
                      <span class="relative inline-block text-nowrap text-5xl font-semibold leading-[1.125]"
                        data-monthly-price="₱1,500" data-annually-price="₱1,500">
                        <span
                          class="relative z-10 bg-gradient-to-b from-crimson-400 via-crimson-400 to-crimson-500 bg-clip-text text-transparent">
                          <span
                            x-text="billingType === 'monthly' ? $el.parentNode.parentNode.dataset.monthlyPrice : $el.parentNode.parentNode.dataset.annuallyPrice">₱1,500</span>
                        </span>
                        {{-- <span class="absolute -top-px left-0 -z-10 text-crimson-300"
                          x-text="billingType === 'monthly' ? $el.parentNode.dataset.monthlyPrice : $el.parentNode.dataset.annuallyPrice">
                          ₱1,500
                        </span> --}}
                      </span>
                      <span class="mt-0.5 flex flex-col text-sm font-medium text-crimson-100/75">
                        <br />
                        <span>per ticket</span>
                        {{-- <span>per month</span> --}}
                      </span>
                    </div>
                    <p class="mt-4 text-[17px] leading-7 text-zinc-300">
                      Good for mid tier tickets such as Upper Box Premium and Lower Box Regular.
                    </p>
                  </div>

                  {{-- <a href="#"
                    class="group relative mt-8 inline-flex w-full items-center rounded-lg bg-zinc-950/[.01] px-3.5 py-4 text-base font-semibold leading-none text-crimson-50 antialiased shadow-btn-secondary outline-none duration-200 ease-in-out after:absolute after:inset-0 after:h-full after:w-full after:rounded-lg after:opacity-0 after:shadow-btn-secondary-hover after:transition-all after:duration-200 after:content-[''] hover:bg-crimson-900/[0.03] hover:text-white hover:after:opacity-100 sm:px-4 sm:py-4 sm:text-[15px]">
                    <div class="relative z-10 flex w-full items-center justify-center space-x-2 text-nowrap">
                      Buy this plan
                    </div>
                  </a> --}}
                </div>
              </div>

              <!-- Features -->
              {{-- <div class="space-y-5 lg:hidden">
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Section Requests
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">

                    Closest Row Possible

                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Adjacent Seats
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Restock Priority
                  </p>
                </div>

                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Upper Box Premium, Lower Box Regular
                  </p>
                </div>


              </div> --}}
            </div>

            <!-- Pricing plan 3 -->
            <div class="flex flex-1 flex-col space-y-8 lg:space-y-0">
              <!-- Pricing card -->
              <div class="flex-1 rounded-2xl bg-zinc-950/[.01] shadow-inner-blur">
                <div
                  class="relative flex h-full w-full flex-col overflow-hidden rounded-2xl border border-crimson-200/[.06] px-5 py-7 xl:px-7 xl:py-12">
                  <div>
                    {{-- <div class="absolute -bottom-32 -left-32 -right-48 -top-64">
                      <img src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt=""
                        class="h-full w-full object-contain opacity-60 lg:opacity-70" />
                    </div> --}}

                    <!-- Stars -->
                    <div class="absolute bottom-[60%] left-[40%] right-0 top-0 -z-10" aria-hidden="true">
                      <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="2"
                        data-density="high"></canvas>
                    </div>

                    <!-- Popular badge -->
                    <div
                      class="absolute right-4 top-4 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">
                        <span
                          class="text-xs font-medium leading-4 text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
                          Most popular
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="flex-1">
                    <p class="text-base font-semibold text-white">
                      Gold Tier
                    </p>
                    <div class="mt-2.5 flex items-start space-x-3">
                      <span class="relative inline-block text-nowrap text-5xl font-semibold leading-[1.125]"
                        data-monthly-price="₱2,500" data-annually-price="₱2,500">
                        <span
                          class="relative z-10 bg-gradient-to-b from-crimson-400 via-crimson-400 to-crimson-500 bg-clip-text text-transparent">
                          <span
                            x-text="billingType === 'monthly' ? $el.parentNode.parentNode.dataset.monthlyPrice : $el.parentNode.parentNode.dataset.annuallyPrice">₱2,500</span>
                        </span>
                        {{-- <span class="absolute -top-px left-0 -z-10 text-crimson-300"
                          x-text="billingType === 'monthly' ? $el.parentNode.dataset.monthlyPrice : $el.parentNode.dataset.annuallyPrice">
                          $29
                        </span> --}}
                      </span>
                      <span class="mt-0.5 flex flex-col text-sm font-medium text-crimson-100/75">
                        <br />
                        <span>per ticket</span>
                        {{-- <span>per month</span> --}}
                      </span>
                    </div>
                    <p class="mt-4 text-[17px] leading-7 text-zinc-300">
                      Best for top tier tickets such as Lower Box Premium, Floor Standing, Send Off, Soundcheck, etc.
                    </p>
                  </div>

                  {{-- <a href="#"
                    class="group relative mt-8 inline-flex w-full items-center rounded-lg bg-btn-primary px-3.5 py-4 text-base font-semibold leading-none text-crimson-50 antialiased shadow-btn-primary outline-none after:absolute after:inset-0 after:h-full after:w-full after:rounded-lg after:bg-btn-primary-hover after:opacity-0 after:shadow-btn-primary-hover after:transition-all after:duration-200 after:content-[''] hover:after:opacity-100 sm:px-4 sm:py-4 sm:text-[15px]">
                    <div class="relative z-10 flex w-full items-center justify-center space-x-2 text-nowrap">
                      Buy this plan
                    </div>
                  </a> --}}
                </div>
              </div>

              <!-- Features -->
              {{-- <div class="space-y-5 lg:hidden">
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Section Requests
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">

                    Closest Row Possible

                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Adjacent Seats
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Restock Priority
                  </p>
                </div>


                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Lower Box Premium, Floor Standing, Send Off, Soundcheck, etc.
                  </p>
                </div>

              </div> --}}
            </div>
          </div>

          {{-- <div class="hidden lg:mt-8 lg:grid lg:gap-4 xl:gap-10">
            <div class="mx-auto w-full max-w-screen-xl px-5 sm:px-6 lg:px-8">
              <div class="flex flex-col items-center gap-2">
                <div class="inline-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-3.5 w-3.5 text-crimson-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                      viewBox="0 0 16 16">
                      <title>send</title>
                      <g fill="currentColor">
                        <path fill="currentColor"
                          d="M3.6,9.6v4.9c0,0.7,0.8,1,1.3,0.5l2.3-2.7l4.7,3.5c0.4,0.3,1,0.1,1.1-0.4L16,0.9c0.1-0.6-0.4-1-1-0.8 L0.5,5.9c-0.5,0.2-0.6,0.9-0.2,1.3l1.6,1.2l4.6-2.2C6.9,6,7.2,6.5,6.9,6.7L3.6,9.6z">
                        </path>
                      </g>
                    </svg>
                    <span
                      class="text-md font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
                      Compare Tiers
                    </span>
                  </div>
                </div>
              </div>

            </div>
            <div class="lg:grid lg:grid-cols-3 lg:gap-5 xl:gap-12">
              <!-- Pricing plan 1 features -->
              <div class="space-y-5">
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Section Requests
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">

                    Closest Row Possible

                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Adjacent Seats
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Restock Priority
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    General Admission, Upper Box Regular
                  </p>
                </div>

              </div>
              <!-- Pricing plan 2 features -->
              <div class="space-y-5">
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Section Requests
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">

                    Closest Row Possible

                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Adjacent Seats
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Restock Priority
                  </p>
                </div>

                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Upper Box Premium, Lower Box Regular
                  </p>
                </div>


              </div>
              <!-- Pricing plan 3 features -->
              <div class="space-y-5">
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Section Requests
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">

                    Closest Row Possible

                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Adjacent Seats
                  </p>
                </div>
                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>

                  <p class="text-[17px] leading-7 text-zinc-300">
                    Restock Priority
                  </p>
                </div>


                <!-- Feature -->
                <div class="flex items-start space-x-3">
                  <svg class="mt-1.5 h-4 w-4 shrink-0 text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                  <p class="text-[17px] leading-7 text-zinc-300">
                    Lower Box Premium, Floor Standing, Send Off, Soundcheck, etc.
                  </p>
                </div>

              </div>
            </div>
          </div> --}}
        </div>
      </div>
    </div>
  </div>

  <!-- Investor testimonials -->
  {{-- <div class="relative mx-auto mt-16 w-full max-w-2xl px-5 sm:mt-20 sm:px-6 md:max-w-screen-xl lg:mt-28 lg:px-8">
    <!-- Social proof -->
    <div>
      <div class="absolute -left-96 -right-96 -top-96 bottom-0 -z-10">
        <img src="{{ asset('assets/landing/media/cosmic-butterfly.png') }}" alt=""
          class="h-[calc(100%_+_384px)] w-[calc(100%_+_768px)] opacity-10" />
      </div>
      <p class="text-center text-[13px] font-extrabold uppercase tracking-widest text-crimson-50/80 sm:text-sm">
        Funded by industry leading investors
      </p>

      <!-- Testimonials -->
      <div class="relative mt-5 flex flex-wrap items-stretch justify-center sm:mt-8">
        <!-- Testimonial 1 -->
        <div class="group relative bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
          <!-- Left border -->
          <div
            class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.025] to-crimson-200/[0.1]">
          </div>
          <!-- Bottom border -->
          <div
            class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.025] to-crimson-200/[0.1]">
          </div>
          <!-- Right border -->
          <div
            class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05] md:hidden">
          </div>
          <!-- Small left border -->
          <span
            class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/40"></span>

          <!-- Testimonial content -->
          <div class="relative h-full w-full overflow-hidden">
            <div
              class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
              aria-hidden="true">
              <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
                data-min-radius="1" data-density="high"></canvas>
            </div>
            <div
              class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
            </div>
            <div class="relative h-full w-full px-6 py-8 lg:p-12">
              <img src="{{ asset('assets/landing/media/logos/fictional-logo-01.svg') }}" alt="Company 01"
                class="h-9 w-auto md:h-10 lg:h-11 xl:h-12" />
              <p class="mt-7 text-[17px] leading-8 text-zinc-200 sm:mt-8 sm:text-lg sm:leading-8">
                "Lorem ipsum dolor sit amet consectetur blandit bibendum
                adipiscing proin tempor. Orci feugiat nec quisque tempor
                est neque tincidunt odio sollicitudin semper maecenas
                sollicitudin laoreet viverra."
              </p>
              <div class="mt-8 flex items-center">
                <div
                  class="flex h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(to_top_right,rgba(113,113,122,0.3),rgba(24,24,27,1)),linear-gradient(rgba(9,9,11,0.5),rgba(9,9,11,0.5))]">
                  <img class="h-[46px] w-[46px] rounded-full object-cover"
                    src="{{ asset('assets/landing/media/avatars/avatar-1.png') }}" alt="Ethan Long" />
                </div>
                <div class="ml-2.5 flex flex-col justify-center">
                  <span class="text-sm font-semibold text-white">
                    Ethan Long
                  </span>
                  <span class="text-sm font-medium text-zinc-400">
                    Marketer at Trendsetters
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Testimonial 2 -->
        <div class="group relative bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
          <!-- Left border -->
          <div
            class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
          </div>
          <!-- Bottom border -->
          <div
            class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.1] to-crimson-200/[0.025]">
          </div>
          <!-- Right border -->
          <div
            class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
          </div>
          <!-- Small left border -->
          <span
            class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/40"></span>

          <!-- Testimonial content -->
          <div class="relative h-full w-full overflow-hidden">
            <div
              class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
              aria-hidden="true">
              <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
                data-min-radius="1" data-density="high"></canvas>
            </div>
            <div
              class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
            </div>
            <div class="relative h-full w-full px-6 py-8 lg:p-12">
              <img src="{{ asset('assets/landing/media/logos/fictional-logo-02.svg') }}" alt="Company 02"
                class="h-9 w-auto md:h-10 lg:h-11 xl:h-12" />
              <p class="mt-7 text-[17px] leading-8 text-zinc-200 sm:mt-8 sm:text-lg sm:leading-8">
                "Lorem ipsum dolor sit amet consectetur blandit bibendum
                adipiscing proin tempor. Orci feugiat nec quisque tempor
                est neque tincidunt odio sollicitudin semper maecenas
                sollicitudin laoreet viverra."
              </p>
              <div class="mt-8 flex items-center">
                <div
                  class="flex h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(to_top_right,rgba(113,113,122,0.3),rgba(24,24,27,1)),linear-gradient(rgba(9,9,11,0.5),rgba(9,9,11,0.5))]">
                  <img class="h-[46px] w-[46px] rounded-full object-cover"
                    src="{{ asset('assets/landing/media/avatars/avatar-2.png') }}" alt="Nina Tucker" />
                </div>
                <div class="ml-2.5 flex flex-col justify-center">
                  <span class="text-sm font-semibold text-white">
                    Nina Tucker
                  </span>
                  <span class="text-sm font-medium text-zinc-400">
                    Co-founder of Infinituma
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Testimonial 3 -->
        <div class="group relative bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
          <!-- Left border -->
          <div
            class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.025] md:from-crimson-200/[0.05] md:to-crimson-200/[0.1]">
          </div>
          <!-- Bottom border -->
          <div
            class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.1] to-crimson-200/[0.025] md:hidden">
          </div>
          <!-- Right border -->
          <div
            class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.025] to-crimson-200/[0.05] md:hidden">
          </div>
          <!-- Small left border -->
          <span
            class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/40"></span>

          <!-- Testimonial content -->
          <div class="relative h-full w-full overflow-hidden">
            <div
              class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
              aria-hidden="true">
              <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
                data-min-radius="1" data-density="high"></canvas>
            </div>
            <div
              class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
            </div>
            <div class="relative h-full w-full px-6 py-8 lg:p-12">
              <img src="{{ asset('assets/landing/media/logos/fictional-logo-03.svg') }}" alt="Company 03"
                class="h-9 w-auto md:h-10 lg:h-11 xl:h-12" />
              <p class="mt-7 text-[17px] leading-8 text-zinc-200 sm:mt-8 sm:text-lg sm:leading-8">
                "Lorem ipsum dolor sit amet consectetur blandit bibendum
                adipiscing proin tempor. Orci feugiat nec quisque tempor
                est neque tincidunt odio sollicitudin semper maecenas
                sollicitudin laoreet viverra."
              </p>
              <div class="mt-8 flex items-center">
                <div
                  class="flex h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(to_top_right,rgba(113,113,122,0.3),rgba(24,24,27,1)),linear-gradient(rgba(9,9,11,0.5),rgba(9,9,11,0.5))]">
                  <img class="h-[46px] w-[46px] rounded-full object-cover"
                    src="{{ asset('assets/landing/media/avatars/avatar-3.png') }}" alt="Olivia Simmons" />
                </div>
                <div class="ml-2.5 flex flex-col justify-center">
                  <span class="text-sm font-semibold text-white">
                    Olivia Simmons
                  </span>
                  <span class="text-sm font-medium text-zinc-400">
                    Engineer at DevTech
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Testimonial 4 -->
        <div class="group relative bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
          <!-- Left border -->
          <div
            class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.025] md:from-crimson-200/[0.05] md:to-crimson-200/[0.1]">
          </div>
          <!-- Bottom border -->
          <div class="hidden"></div>
          <!-- Right border -->
          <div
            class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.1] md:from-crimson-200/[0.1] md:to-crimson-200/[0.025]">
          </div>
          <!-- Small left border -->
          <span
            class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/40"></span>

          <!-- Testimonial content -->
          <div class="relative h-full w-full overflow-hidden">
            <div
              class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
              aria-hidden="true">
              <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
                data-min-radius="1" data-density="high"></canvas>
            </div>
            <div
              class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
            </div>
            <div class="relative h-full w-full px-6 py-8 lg:p-12">
              <img src="{{ asset('assets/landing/media/logos/fictional-logo-04.svg') }}" alt="Company 04"
                class="h-9 w-auto md:h-10 lg:h-11 xl:h-12" />
              <p class="mt-7 text-[17px] leading-8 text-zinc-200 sm:mt-8 sm:text-lg sm:leading-8">
                "Lorem ipsum dolor sit amet consectetur blandit bibendum
                adipiscing proin tempor. Orci feugiat nec quisque tempor
                est neque tincidunt odio sollicitudin semper maecenas
                sollicitudin laoreet viverra."
              </p>
              <div class="mt-8 flex items-center">
                <div
                  class="flex h-12 w-12 items-center justify-center rounded-full bg-[linear-gradient(to_top_right,rgba(113,113,122,0.3),rgba(24,24,27,1)),linear-gradient(rgba(9,9,11,0.5),rgba(9,9,11,0.5))]">
                  <img class="h-[46px] w-[46px] rounded-full object-cover"
                    src="{{ asset('assets/landing/media/avatars/avatar-4.png') }}" alt="Sophia Johnson" />
                </div>
                <div class="ml-2.5 flex flex-col justify-center">
                  <span class="text-sm font-semibold text-white">
                    Sophia Johnson
                  </span>
                  <span class="text-sm font-medium text-zinc-400">
                    Developer at Tinker
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> --}}
</div>

@endsection

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

<!-- Divider -->
<div
  class="mx-auto h-[0.75px] w-full max-w-screen-lg bg-gradient-to-r from-transparent via-crimson-100/15 to-transparent">
</div>

<!-- Pricing Table -->
<section class="relative overflow-hidden pb-16 pt-20 sm:py-24 lg:py-28">
  {{-- <div class="absolute left-0 top-0 w-full max-w-7xl -translate-x-1/2 -translate-y-1/2">
    <img src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt="" class="h-full w-full object-contain" />
  </div> --}}

  <div class="absolute inset-0 -z-10" aria-hidden="true">
    <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield></canvas>
  </div>

  {{-- <div class="absolute -top-96 bottom-48 left-0 right-80">
    <img src="{{ asset('assets/landing/media/long-gradient.png') }}" alt=""
      class="h-full w-full object-contain object-center opacity-50" />
  </div>
  <div class="absolute -bottom-96 -right-2/3 left-0 top-1/2">
    <img src="{{ asset('assets/landing/media/long-gradient.png') }}" alt=""
      class="h-full w-full object-contain object-center opacity-40" />
  </div> --}}
  <div class="mx-auto w-full max-w-screen-xl px-5 sm:px-6 lg:px-8">
    <div class="relative flex flex-col items-center">
      <h1
        class="max-w-4xl text-center text-4xl font-bold leading-extratight text-crimson-100 sm:text-5xl sm:leading-extratight">
        Compare Tiers
      </h1>
    </div>


    <div class="-mx-5 -my-2 mt-12 overflow-x-auto sm:-mx-6 sm:mt-16 lg:-mx-8">
      <div class="inline-block min-w-full px-5 py-2 align-middle sm:px-6 lg:px-8">
        <div class="min-w-full space-y-12">

          <table class="min-w-full">
            <thead>
              <tr class="border-b border-zinc-200/10">
                <th scope="col" class="text-left text-sm font-semibold text-white sm:pl-2">
                  <div class="inline-flex w-max 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-[14px] w-[14px] text-crimson-400" xmlns="http://www.w3.org/2000/svg" width="16"
                        height="16" viewBox="0 0 16 16">
                        <title>roadmap</title>
                        <g fill="currentColor">
                          <path
                            d="M15.707,9.293,13,6.586V9a3,3,0,0,1-3,3H5v1a1,1,0,0,0,1,1h6a1,1,0,0,0,.707-.293l3-3A1,1,0,0,0,15.707,9.293Z">
                          </path>
                          <path
                            d="M10,10H4a1,1,0,0,1-.707-.293l-3-3a1,1,0,0,1,0-1.414l3-3A1,1,0,0,1,4,2h6a1,1,0,0,1,1,1V9A1,1,0,0,1,10,10Z"
                            fill="currentColor"></path>
                        </g>
                      </svg>

                      <span
                        class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
                        Description
                      </span>
                    </div>
                  </div>
                </th>
                <th scope="col" class="flex-1 text-nowrap px-3 py-6 text-center text-sm font-semibold text-white">
                  Bronze Tier
                </th>

                <th scope="col" class="flex-1 text-nowrap px-3 py-6 text-center text-sm font-semibold text-white">
                  Silver Tier
                </th>

                <th scope="col" class="flex-1 text-nowrap px-3 py-6 text-center text-sm font-semibold text-white">
                  Gold Tier
                </th>
              </tr>
            </thead>
            <tbody>

              <tr class="w-full border-b border-zinc-200/[0.06]">
                <td
                  class="relative z-10 whitespace-nowrap py-5 pl-6 text-left text-sm font-medium text-white sm:py-6 sm:pl-8">
                  Section Requests, Closest Row Possible, Adjacent Seats, Restock Priority
                </td>
                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">
                  <svg class="mx-auto h-3 w-3 shrink-0 text-crimson-100" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.025] before:to-zinc-200/[0.08] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">
                  <svg class="mx-auto h-3 w-3 shrink-0 text-crimson-100" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">
                  <svg class="mx-auto h-3 w-3 shrink-0 text-crimson-100" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </td>
              </tr>

              <tr class="w-full border-b border-zinc-200/[0.06]">
                <td
                  class="relative z-10 whitespace-nowrap py-5 pl-6 text-left text-sm font-medium text-white sm:py-6 sm:pl-8">
                  Low Tier Tickets
                </td>
                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">
                  <svg class="mx-auto h-3 w-3 shrink-0 text-crimson-100" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.025] before:to-zinc-200/[0.08] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">

                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">

                </td>
              </tr>

              <tr class="w-full border-b border-zinc-200/[0.06]">
                <td
                  class="relative z-10 whitespace-nowrap py-5 pl-6 text-left text-sm font-medium text-white sm:py-6 sm:pl-8">
                  Mid Tier Tickets
                </td>
                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">

                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.025] before:to-zinc-200/[0.08] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">
                  <svg class="mx-auto h-3 w-3 shrink-0 text-crimson-100" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">

                </td>
              </tr>

              <tr class="w-full border-b border-zinc-200/[0.06]">
                <td
                  class="relative z-10 whitespace-nowrap py-5 pl-6 text-left text-sm font-medium text-white sm:py-6 sm:pl-8">
                  High Tier Tickets
                </td>
                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">

                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.025] before:to-zinc-200/[0.08] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">

                </td>

                <td
                  class="relative flex-1 justify-center whitespace-nowrap px-4 py-5 text-center text-sm leading-4 text-zinc-200 before:absolute before:inset-y-0 before:left-0 before:h-full before:w-px before:bg-gradient-to-b before:from-zinc-200/[0.08] before:to-zinc-200/[0.025] after:absolute after:left-[0.5px] after:top-1/2 after:h-3.5 after:w-px after:-translate-y-1/2 after:translate-x-[-0.5px] after:bg-gradient-to-b after:from-zinc-200/10 after:via-zinc-300/20 after:to-zinc-200/10 sm:py-6">
                  <svg class="mx-auto h-3 w-3 shrink-0 text-crimson-100" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" viewBox="0 0 16 16">
                    <title>o-check</title>
                    <g fill="currentColor">
                      <path
                        d="M15.854,3.146l-1-1c-.178-.179-.461-.195-.66-.041L5.494,8.871,1.8,6.1c-.197-.15-.478-.13-.653,.046L.146,7.146c-.183,.183-.196,.475-.03,.674l5,6c.09,.108,.221,.173,.361,.179,.008,0,.015,0,.022,0,.132,0,.26-.052,.354-.146L15.854,3.854c.195-.195,.195-.512,0-.707Z"
                        fill="currentColor"></path>
                    </g>
                  </svg>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Divider -->
{{-- <div
  class="mx-auto h-[0.75px] w-full max-w-screen-lg bg-gradient-to-r from-transparent via-crimson-100/15 to-transparent">
</div> --}}

<!-- Faqs -->
{{-- <section class="relative overflow-hidden">
  <div
    class="absolute -left-56 -right-56 -top-80 sm:-left-48 sm:-right-48 md:left-1/2 md:w-full md:max-w-6xl md:-translate-x-1/2 lg:-top-96">
    <img src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt=""
      class="h-full w-full object-contain opacity-45" />
  </div>

  <!-- Stars -->
  <div class="absolute left-1/2 top-0 -z-10 h-48 w-full max-w-2xl -translate-x-1/2" aria-hidden="true">
    <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="2.5" data-min-radius="1.25"
      data-density="medium"></canvas>
  </div>

  <div
    class="relative mx-auto w-full max-w-screen-xl gap-16 px-5 pb-12 pt-20 sm:px-6 sm:pb-14 md:max-w-screen-xl lg:px-8 lg:pb-16 lg:pt-24">
    <div class="absolute -left-96 -right-96 -top-96 bottom-0 -z-10">
      <img src="{{ asset('assets/landing/media/cosmic-butterfly.png-2') }}" alt=""
        class="h-[calc(100%_+_384px)] w-[calc(100%_+_768px)] opacity-10" />
    </div>

    <!-- Text content -->
    <div class="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-3.5 w-3.5 text-crimson-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
            viewBox="0 0 16 16">
            <title>comments</title>
            <g fill="currentColor">
              <path
                d="M15,4h-1v6c0,.552-.448,1-1,1H6.828l-1.828,2h5l2.1,2.8c.096,.128,.246,.2,.4,.2,.053,0,.106-.008,.158-.026,.204-.068,.342-.259,.342-.474v-2.5h2c.552,0,1-.448,1-1V5c0-.552-.448-1-1-1Z">
              </path>
              <path
                d="M11,9c.552,0,1-.448,1-1V1c0-.552-.448-1-1-1H1C.448,0,0,.448,0,1v7c0,.552,.448,1,1,1H3v2.5c0,.215,.138,.406,.342,.474,.052,.018,.105,.026,.158,.026,.154,0,.304-.072,.4-.2l2.1-2.8h5Z"
                fill="currentColor"></path>
            </g>
          </svg>

          <span class="text-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
            FAQs
          </span>
        </div>
      </div>

      <h1
        class="mt-5 max-w-5xl text-center text-4xl font-bold leading-extratight text-crimson-100 sm:mt-6 sm:text-5xl sm:leading-extratight">
        Frequently asked questions
      </h1>
      <p class="mt-5 max-w-2xl text-center text-[17px] leading-8 text-zinc-200 sm:text-lg sm:leading-8">
        Haven’t found what you’re looking for? Try to
        <a href="{{ route('landing-page.contact') }}"
          class="font-medium text-crimson-300 underline duration-200 ease-in-out hover:text-crimson-400">contact
          us.</a>
      </p>
    </div>

    <!-- Faqs -->
    <div class="relative mt-8 flex flex-wrap items-stretch justify-center">
      <!-- Faq 1 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.025] to-crimson-200/[0.1]">
        </div>
        <!-- bottom borders -->
        <div
          class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.025] to-crimson-200/[0.1]">
        </div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05] md:hidden">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#C00D23]/20 to-[#a5061c]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Can I request assistance for an event that hasn't been announced yet?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              No, we require complete event details such as seating arrangements, ticket prices, and venue information
              to determine if we can offer assistance.
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 2 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
        </div>
        <!-- bottom borders -->
        <div
          class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.1] to-crimson-200/[0.025]">
        </div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Does your team promises 100% success rate?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              Assuming no issues arise during the ticket sale and there are no external factors impacting our systems,
              then our
              success rate is nearly 100%.

              <br /><br />
              External factors may include:
              <li>Ticketing platform suspending the your account.</li>
              <li>Delays in online sales.</li>
              <li>Different allocations between online and onsite sales.</li>
              <li>Other unforeseen factors.</li>
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 3 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.1] md:from-crimson-200/[0.1] md:to-crimson-200/[0.025]">
        </div>
        <!-- bottom borders -->
        <div
          class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.1] to-crimson-200/[0.025]">
        </div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.025] to-crimson-200/[0.05] md:hidden">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Is prepayment required?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              Yes, prepayment secures your tickets and prevents cancellations. It ensures a faster and smoother
              transaction,
              prioritizes your request, and helps avoid financial and operational losses for the service. A full
              refund
              is available
              if we cannot provide you with the checkout links.
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 4 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.025] md:from-crimson-200/[0.05] md:to-crimson-200/[0.1]">
        </div>
        <!-- bottom borders -->
        <div
          class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.025] to-crimson-200/[0.1]">
        </div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.1] md:from-crimson-200/[0.1] md:to-crimson-200/[0.025]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              How can I increase my chances of securing tickets for a high-demand event?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              High-demand events are more challenging to secure. To increase your chances, other than using Gold Tier
              TPA, you may
              also want to limit your ticket quantity to one (1) per account. Securing one ticket is easier than
              attempting to
              purchase multiple in one transaction, significantly improving your odds during the initial sale.
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 5 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
        </div>
        <!-- bottom borders -->
        <div class="hidden"></div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Can I try to secure tickets at the same time as your team?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              Yes, but never use the same account or presale codes that you’ve shared with us or other third-party
              service providers.
              <br /><br />
              Doing so could result in:
              <br />
              <li>Account suspension.</li>
              <li>Incorrect tickets being added to your cart.</li>
              <li>Loss of your presale code.</li>
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 6 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
        </div>
        <!-- bottom borders -->
        <div class="hidden"></div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              What are ghost checkouts?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              Ghost checkouts refer to payments that are successfully processed and deducted but do not result in a
              voucher from the
              merchant. This typically happens due to heavy site traffic, causing the system to crash.

              <br /><br />
              If a voucher isn’t issued within 30 minutes of payment, please contact the merchant’s customer service:
              <br /><br />
              <li>SM Tickets Hotline: (02) 8470-2222</li>
              <li>Email: customercare@smtickets.com</li>
              <li>Ghost checkouts are not eligible for assistance fee refunds, and it is your responsibility to demand
                a
                voucher from the
                merchant.</li>
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 7 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
        </div>
        <!-- bottom borders -->
        <div class="hidden"></div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              How are requests prioritized?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              While we aim to serve all clients efficiently, during high-demand ticket sales, prioritization is based
              on
              tiers: Gold
              Tier clients are served first, followed by Silver Tier and Bronze Tier.
            </dd>
          </dl>
        </div>
      </div>



      <!-- Faq 8 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.025] to-crimson-200/[0.1]">
        </div>
        <!-- bottom borders -->
        <div
          class="absolute inset-x-0 bottom-0 h-px w-full bg-gradient-to-r from-crimson-200/[0.025] to-crimson-200/[0.1] md:hidden">
        </div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05] md:hidden">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Can I request a refund if I’m unhappy with the service?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              If the link we send does not match the request you initially provided, you are not obligated to pay for
              it. However,
              once you’ve been informed of the ticket’s section and tier and choose to purchase it, we won’t process
              refund requests.
              If you pay for the checkout link on the selling day, the assistance fee will apply.
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 9 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
        </div>
        <!-- bottom borders -->
        <div class="hidden"></div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Can I participate in presales while using your service?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              Yes. For fan club presales, ensure you provide a valid and registered presale code for use on the
              selling
              day, along
              with your account details.
            </dd>
          </dl>
        </div>
      </div>

      <!-- Faq 10 -->
      <div class="group relative w-full bg-gradient-to-b after:absolute after:content-[''] md:w-1/2">
        <!-- left borders -->
        <div
          class="absolute inset-y-0 left-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.1] to-crimson-200/[0.05]">
        </div>
        <!-- bottom borders -->
        <div class="hidden"></div>
        <!-- Right borders -->
        <div
          class="absolute inset-y-0 right-0 h-full w-px bg-gradient-to-b from-crimson-200/[0.05] to-crimson-200/[0.025] md:from-crimson-200/[0.025] md:to-crimson-200/[0.1]">
        </div>

        <span
          class="absolute -left-[0.5px] top-1/2 h-8 w-px -translate-y-1/2 translate-x-1/2 bg-crimson-100/25 md:bg-crimson-100/40"></span>
        <div class="relative h-full w-full overflow-hidden">
          <div
            class="absolute bottom-1/2 left-1/2 right-0 top-0 opacity-0 duration-300 ease-in-out group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="opacity-0 duration-1000 ease-in-out" data-starfield data-max-radius="1.75"
              data-min-radius="1" data-density="high"></canvas>
          </div>
          <div
            class="hover-gradient absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/20 to-[#E478FF]/20 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <dl class="relative h-full w-full p-5 sm:px-6 sm:py-7 lg:p-12">
            <dt class="text-base font-bold leading-7 text-crimson-50 sm:text-[17px] lg:text-lg">
              Anything else I should keep in mind?
            </dt>
            <dd class="mt-2 text-base leading-7 text-zinc-300 sm:mt-3 sm:text-[17px] lg:text-lg lg:leading-8">
              While we do our best to enhance your chances of securing tickets and to protect you from paying inflated
              reseller
              prices, we cannot guarantee ticket acquisition. Various factors beyond our control affect the outcome.
              If
              we are unable
              to provide checkout links, we will issue a full refund.
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</section> --}}

<!-- Divider -->
{{-- <div
  class="mx-auto h-[0.75px] w-full max-w-screen-lg bg-gradient-to-r from-transparent via-crimson-100/15 to-transparent">
</div> --}}

@endsection


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

@endpush