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

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

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

<!-- Contact hero -->
<div class="relative w-full max-w-screen-xl px-5 py-20 mx-auto sm:px-6 lg:px-8 lg:pb-48 lg:pt-28">
  <div
    class="absolute h-full -bottom-48 -left-56 -right-56 sm:-left-48 sm:-right-48 sm:top-64 md:left-1/2 md:w-full md:max-w-6xl md:-translate-x-1/2 lg:top-16">
    <img src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt=""
      class="object-contain w-full h-full opacity-40 lg:opacity-50" />
  </div>

  <div
    class="relative max-w-lg mx-auto sm:max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-x-12 2xl:gap-x-28">
    <!-- Text content -->
    <div id="about-text-header" class="flex flex-col w-full md:items-center lg:col-span-1 lg:items-start">
      <div>
        <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-400" 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-sm font-medium text-crimson-100 drop-shadow-[-12px_-4px_6px_rgba(237,233,254,0.2)]">
              Contact Us
            </span>
          </div>
        </div>
      </div>
      <h1
        class="mt-5 text-[2.75rem] font-bold leading-[1.125] text-crimson-100 sm:text-5xl sm:leading-[1.125] md:text-center md:leading-[1.125] lg:text-left xl:text-6xl 2xl:text-[64px]">
        Get in touch
      </h1>
      <p
        class="mt-5 text-lg leading-8 text-zinc-300 sm:text-xl sm:leading-8 md:mx-auto md:max-w-xl md:text-center lg:mx-0 lg:max-w-none lg:text-left">
        Please feel free to send us any questions, feedback or
        suggestions you might have.
      </p>
      <ul
        class="flex flex-col mt-6 space-y-4 md:mt-10 md:max-w-3xl md:flex-row md:space-x-3 md:space-y-0 lg:mt-12 lg:flex-col lg:space-x-0 lg:space-y-4">
        <li class="flex items-start sm:items-center md:items-start lg:items-center">
          <svg class="mt-1.5 h-4 w-4 shrink-0 text-crimson-100 sm:mt-0 md:mt-1.5 lg:mt-0 lg:h-4.5 lg:w-4.5"
            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <title>c-check</title>
            <g fill="currentColor">
              <path
                d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8,8-3.6,8-8S12.4,0,8,0Zm3.707,6.707l-4,4c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-2-2c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l1.293,1.293,3.293-3.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z"
                fill="currentColor"></path>
            </g>
          </svg>

          <p class="ml-3 text-lg text-zinc-300 md:text-[17px] md:leading-normal lg:ml-4">
            Explore our ticketing system for quick and efficient support.
          </p>
        </li>
        <li class="flex items-start sm:items-center md:items-start lg:items-center">
          <svg class="mt-1.5 h-4 w-4 shrink-0 text-crimson-100 sm:mt-0 md:mt-1.5 lg:mt-0 lg:h-4.5 lg:w-4.5"
            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <title>c-check</title>
            <g fill="currentColor">
              <path
                d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8,8-3.6,8-8S12.4,0,8,0Zm3.707,6.707l-4,4c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-2-2c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l1.293,1.293,3.293-3.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z"
                fill="currentColor"></path>
            </g>
          </svg>

          <p class="ml-3 text-lg text-zinc-300 md:text-[17px] md:leading-normal lg:ml-4">
            Learn which tier is right for your need.
          </p>
        </li>
        <li class="flex items-start sm:items-center md:items-start lg:items-center">
          <svg class="mt-1.5 h-4 w-4 shrink-0 text-crimson-100 sm:mt-0 md:mt-1.5 lg:mt-0 lg:h-4.5 lg:w-4.5"
            xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <title>c-check</title>
            <g fill="currentColor">
              <path
                d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8,8-3.6,8-8S12.4,0,8,0Zm3.707,6.707l-4,4c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-2-2c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l1.293,1.293,3.293-3.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z"
                fill="currentColor"></path>
            </g>
          </svg>

          <p class="ml-3 text-lg text-zinc-300 md:text-[17px] md:leading-normal lg:ml-4">
            Talk to our staff regarding our TPA services.
          </p>
        </li>
      </ul>

    </div>

    <!-- Contact Form -->
    {{-- <div class="flex flex-col gap-5">
      <div class="active feature cursor-pointer rounded-2xl duration-200">
        <div class="h-full w-full rounded-2xl border p-6 lg:p-5 xl:p-6">
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
              class="h-[17px] w-[17px] text-crimson-50 lg:h-4 lg:w-4 xl:h-[17px] xl:w-[17px]">
              <path fill-rule="evenodd"
                d="m11.54 22.351.07.04.028.016a.76.76 0 0 0 .723 0l.028-.015.071-.041a16.975 16.975 0 0 0 1.144-.742 19.58 19.58 0 0 0 2.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 0 0-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 0 0 2.682 2.282 16.975 16.975 0 0 0 1.145.742ZM12 13.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
                clip-rule="evenodd" />
            </svg>
            <h3 class="text-[17px] font-semibold text-white lg:text-base xl:text-[17px]">
              Address
            </h3>
          </div>
          <p class="mt-2 text-[17px] leading-7 text-zinc-300 lg:text-base lg:leading-7 xl:text-[17px] xl:leading-7">
            Gladiolus St., Almeda Village, Concepcion Grande 4400, Naga City, Camarines Sur, Philippines
          </p>
        </div>
      </div>
      <div class="active feature cursor-pointer rounded-2xl duration-200">
        <div class="h-full w-full rounded-2xl border p-6 lg:p-5 xl:p-6">
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
              class="h-[17px] w-[17px] text-crimson-50 lg:h-4 lg:w-4 xl:h-[17px] xl:w-[17px]">
              <path fill-rule="evenodd"
                d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"
                clip-rule="evenodd" />
            </svg>
            <h3 class="text-[17px] font-semibold text-white lg:text-base xl:text-[17px]">
              Contact Number
            </h3>
          </div>
          <p class="mt-2 text-[17px] leading-7 text-zinc-300 lg:text-base lg:leading-7 xl:text-[17px] xl:leading-7">
            +639669720381
          </p>
        </div>
      </div>
      <div class="active feature cursor-pointer rounded-2xl duration-200">
        <div class="h-full w-full rounded-2xl border p-6 lg:p-5 xl:p-6">
          <div class="flex items-center space-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
              class="h-[17px] w-[17px] text-crimson-50 lg:h-4 lg:w-4 xl:h-[17px] xl:w-[17px]">
              <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
              <path
                d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
            </svg>
            <h3 class="text-[17px] font-semibold text-white lg:text-base xl:text-[17px]">
              Email
            </h3>
          </div>
          <p class="mt-2 text-[17px] leading-7 text-zinc-300 lg:text-base lg:leading-7 xl:text-[17px] xl:leading-7">
            titania.aio.ph@gmail.com
          </p>
        </div>
      </div>
    </div> --}}
    <div class="mt-16 sm:mt-20 lg:col-span-1 lg:mt-0">
      <div class="relative z-10 px-6 py-10 shadow-inner-blur sm:px-8 flex justify-center">
        <iframe src="https://discord.com/widget?id=1295300561775890476&theme=dark" width="450" height="500"
          allowtransparency="true" frameborder="0"
          sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>

        <!-- Container lines -->
        <span
          class="absolute -bottom-5 -top-5 left-0 w-px bg-gradient-to-b from-red-200/5 via-red-200/[0.08] to-crimson-200/5 sm:-bottom-8 sm:-top-8 lg:-bottom-16 lg:-top-16"></span>
        <span
          class="absolute -bottom-5 -top-5 right-0 w-px bg-gradient-to-b from-red-200/5 via-red-200/[0.08] to-crimson-200/5 sm:-bottom-8 sm:-top-8 lg:-bottom-16 lg:-top-16"></span>
        <span
          class="absolute -left-5 -right-5 top-0 h-px bg-gradient-to-r from-red-200/5 via-red-200/[0.08] to-crimson-200/5 sm:-left-8 sm:-right-8 lg:-left-16 lg:-right-16"></span>
        <span
          class="absolute -left-5 -right-5 bottom-0 h-px bg-gradient-to-r from-red-200/5 via-red-200/[0.08] to-crimson-200/5 sm:-left-8 sm:-right-8 lg:-left-16 lg:-right-16"></span>

        <!-- corner dots -->
        <span class="absolute -left-[1.5px] -top-[1.5px] h-1 w-1 rounded-full bg-red-200"></span>
        <span class="absolute -right-[1.5px] -top-[1.5px] h-1 w-1 rounded-full bg-red-200"></span>
        <span class="absolute -bottom-[1.5px] -left-[1.5px] h-1 w-1 rounded-full bg-red-200"></span>
        <span class="absolute -bottom-[1.5px] -right-[1.5px] h-1 w-1 rounded-full bg-red-200"></span>
      </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> --}}

<!-- Popular links section -->
{{-- <section class="relative overflow-x-clip">
  <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-32">
    <image src="{{ asset('assets/landing/media/space-spotlight.png') }}" alt=""
      class="object-contain w-full h-full opacity-25" />
  </div>

  <div
    class="relative w-full max-w-lg gap-16 px-5 pt-20 pb-16 mx-auto sm:max-w-screen-xl sm:px-6 sm:pb-20 sm:pt-24 lg:px-8 lg:pb-24">
    <div class="absolute bottom-0 -left-96 -right-96 -top-48 -z-10">
      <img src="{{ asset('assets/landing/media/cosmic-butterfly.png') }}" alt=""
        class="h-[calc(100%_+_336px)] 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-200" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
            viewBox="0 0 16 16">
            <title>url</title>
            <g fill="currentColor">
              <path
                d="M10.742,5.258a4.475,4.475,0,0,0-.825-.64L8.435,6.1a2.531,2.531,0,0,1,.893,4.158l-3,3A2.536,2.536,0,0,1,2.742,9.672L2.8,9.61A6,6,0,0,1,2.43,7.535c0-.134.01-.266.019-.4L1.328,8.258a4.535,4.535,0,0,0,6.414,6.414l3-3a4.536,4.536,0,0,0,0-6.414Z">
              </path>
              <path
                d="M5.26,10.74a4.508,4.508,0,0,0,.825.64L7.567,9.9A2.531,2.531,0,0,1,6.674,5.74l3-3A2.536,2.536,0,0,1,13.26,6.326l-.062.062a5.982,5.982,0,0,1,.375,2.075c0,.134-.011.266-.02.4L14.674,7.74A4.535,4.535,0,0,0,8.26,1.326l-3,3a4.536,4.536,0,0,0,0,6.414Z"
                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)]">
            Support and resources
          </span>
        </div>
      </div>

      <h1
        class="max-w-5xl mt-5 text-4xl font-bold text-center leading-extratight text-crimson-100 sm:mt-6 sm:text-5xl sm:leading-extratight">
        Explore our online hub
      </h1>
      <p class="mt-5 max-w-2xl text-center text-[17px] leading-8 text-zinc-200 sm:text-lg sm:leading-8">
        Lorem ipsum dolor sit amet magna eleifend aliquam diam egestas sed
        facilisi non cras. In bibendum eu eget porttitor ultricies.
      </p>
    </div>

    <!-- Popular links -->
    <div class="relative flex flex-wrap items-stretch justify-center mt-8">
      <!-- Link 1 -->
      <div
        class="group relative w-full bg-gradient-to-b after:absolute after:inset-x-0 after:bottom-0 after:h-px after:w-full after:bg-gradient-to-r after:from-crimson-200/[0.025] after:to-crimson-200/[0.075] after:content-[''] sm:w-1/3 sm:after:from-transparent sm:after:to-crimson-200/[0.125]">
        <div class="relative w-full h-full overflow-hidden">
          <div
            class="absolute top-0 right-0 duration-300 ease-in-out opacity-0 bottom-1/3 left-1/3 group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="duration-1000 ease-in-out opacity-0" data-starfield data-min-radius="1"
              data-max-radius="1.75" data-density="high"></canvas>
          </div>
          <div
            class="absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/10 to-[#E478FF]/10 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <div
            class="relative z-10 flex flex-col justify-between flex-1 w-full h-full px-4 py-5 sm:px-5 sm:py-6 lg:py-7 xl:p-8">
            <div class="flex-1">
              <svg class="w-6 h-6 text-crimson-50 sm:h-7 sm:w-7 xl:h-8 xl:w-8" xmlns="http://www.w3.org/2000/svg"
                width="48" height="48" viewBox="0 0 48 48">
                <title>logo-slack</title>
                <g>
                  <path d="M18.133,2a4.4,4.4,0,1,0,0,8.8h4.4V6.4a4.4,4.4,0,0,0-4.4-4.4" fill="#36c5f0"></path>
                  <path d="M18.133,13.733H6.4a4.4,4.4,0,1,0,0,8.8H18.134a4.4,4.4,0,0,0,0-8.8" fill="#36c5f0"></path>
                  <path d="M46,18.134a4.4,4.4,0,1,0-8.8,0v4.4h4.4a4.4,4.4,0,0,0,4.4-4.4" fill="#2eb67d"></path>
                  <path d="M34.267,18.134V6.4a4.4,4.4,0,1,0-8.8,0V18.133a4.4,4.4,0,1,0,8.8,0" fill="#2eb67d"></path>
                  <path d="M29.866,46a4.4,4.4,0,1,0,0-8.8h-4.4v4.4a4.4,4.4,0,0,0,4.4,4.4" fill="#ecb22e"></path>
                  <path d="M29.866,34.267H41.6a4.4,4.4,0,1,0,0-8.8H29.866a4.4,4.4,0,0,0,0,8.8h0" fill="#ecb22e"></path>
                  <path d="M2,29.866a4.4,4.4,0,0,0,4.4,4.4h0a4.4,4.4,0,0,0,4.4-4.4v-4.4H6.4a4.4,4.4,0,0,0-4.4,4.4"
                    fill="#e01e5a"></path>
                  <path d="M13.733,29.866V41.6a4.4,4.4,0,1,0,8.8,0V29.866a4.4,4.4,0,0,0-4.4-4.4h0a4.4,4.4,0,0,0-4.4,4.4"
                    fill="#e01e5a"></path>
                </g>
              </svg>

              <h4 class="mt-5 text-base font-semibold text-crimson-50 xl:mt-6 xl:text-lg">
                Join the community
              </h4>
              <p class="mt-2.5 line-clamp-3 text-base text-zinc-300 xl:text-lg">
                <span class="sm:hidden">Join a community of over 10,000 users.</span>
                <span class="hidden sm:inline">More than 10,000 Nebula users share questions and best
                  practices in our Slack community</span>
              </p>
            </div>
            <div class="mt-4 xl:mt-5">
              <a href="https://slack.com"
                class="flex items-center text-sm font-medium duration-200 ease-in-out text-crimson-300/70 group-hover:text-crimson-300 xl:text-base">
                <span class="absolute inset-0"></span>
                Join Slack
                <svg class="ml-2.5 h-2.5 w-2.5 xl:h-3 xl:w-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16">
                  <title>arrow-top-right</title>
                  <g fill="currentColor">
                    <path
                      d="M14,1H7A1,1,0,0,0,7,3h4.586L1.293,13.293a1,1,0,1,0,1.414,1.414L13,4.414V9a1,1,0,0,0,2,0V2A1,1,0,0,0,14,1Z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Link 2 -->
      <div
        class="group relative w-full bg-gradient-to-b after:absolute after:inset-x-0 after:bottom-0 after:h-px after:w-full after:bg-gradient-to-r after:from-crimson-200/[0.075] after:to-crimson-200/[0.15] after:content-[''] sm:w-1/3 sm:before:absolute sm:before:left-0 sm:before:h-full sm:before:w-px sm:before:bg-gradient-to-b sm:before:from-crimson-200/[.01] sm:before:to-crimson-200/[0.125] sm:before:content-[''] sm:after:via-crimson-200/[0.25] sm:after:to-crimson-200/[0.125]">
        <div class="relative w-full h-full overflow-hidden">
          <div
            class="absolute top-0 right-0 duration-300 ease-in-out opacity-0 bottom-1/3 left-1/3 group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="duration-1000 ease-in-out opacity-0" data-starfield data-min-radius="1"
              data-max-radius="1.75" data-density="high"></canvas>
          </div>
          <div
            class="absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/10 to-[#E478FF]/10 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <div
            class="relative z-10 flex flex-col justify-between flex-1 w-full h-full px-4 py-5 sm:px-5 sm:py-6 lg:py-7 xl:p-8">
            <div class="flex-1">
              <svg class="w-6 h-6 text-crimson-50 sm:h-7 sm:w-7 xl:h-8 xl:w-8" xmlns="http://www.w3.org/2000/svg"
                width="16" height="16" viewBox="0 0 16 16">
                <title>logo-github</title>
                <g fill="currentColor">
                  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"
                    d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6 C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5 c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1 c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8 c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2 c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z">
                  </path>
                </g>
              </svg>

              <h4 class="mt-5 text-base font-semibold text-crimson-50 xl:mt-6 xl:text-lg">
                Build with Nebula
              </h4>
              <p class="mt-2.5 line-clamp-3 text-base text-zinc-300 xl:text-lg">
                <span class="sm:hidden">Join our developer ecosystem on GitHub.</span>
                <span class="hidden sm:inline">Join our developer ecosystem on GitHub. Contribute to
                  Nebula and help us shape the future of
                  collaboration.</span>
              </p>
            </div>
            <div class="mt-4 xl:mt-5">
              <a href="https://github.com"
                class="flex items-center text-sm font-medium duration-200 ease-in-out text-crimson-300/70 group-hover:text-crimson-300 xl:text-base">
                <span class="absolute inset-0"></span>
                Join on GitHub
                <svg class="ml-2.5 h-2.5 w-2.5 xl:h-3 xl:w-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16">
                  <title>arrow-top-right</title>
                  <g fill="currentColor">
                    <path
                      d="M14,1H7A1,1,0,0,0,7,3h4.586L1.293,13.293a1,1,0,1,0,1.414,1.414L13,4.414V9a1,1,0,0,0,2,0V2A1,1,0,0,0,14,1Z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Link 3 -->
      <div
        class="group relative w-full bg-gradient-to-b before:absolute before:left-0 before:hidden before:h-full before:w-px before:bg-gradient-to-b before:from-crimson-200/[.015] before:to-crimson-200/[0.125] before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-px after:w-full after:bg-gradient-to-r after:from-crimson-200/[0.15] after:to-crimson-200/[0.075] after:content-[''] sm:w-1/3 before:sm:block sm:after:from-crimson-200/[0.125] sm:after:to-transparent">
        <div class="relative w-full h-full overflow-hidden">
          <div
            class="absolute top-0 right-0 duration-300 ease-in-out opacity-0 bottom-1/3 left-1/3 group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="duration-1000 ease-in-out opacity-0" data-starfield data-min-radius="1"
              data-max-radius="1.75" data-density="high"></canvas>
          </div>
          <div
            class="absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/10 to-[#E478FF]/10 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <div
            class="relative z-10 flex flex-col justify-between flex-1 w-full h-full px-4 py-5 sm:px-5 sm:py-6 lg:py-7 xl:p-8">
            <div class="flex-1">
              <svg class="w-6 h-6 text-crimson-50 sm:h-7 sm:w-7 xl:h-8 xl:w-8" xmlns="http://www.w3.org/2000/svg"
                width="32" height="32" viewBox="0 0 32 32">
                <title>x</title>
                <g fill="currentColor">
                  <polygon points="14.457 20.202 5.876 30 1.123 30 12.237 17.304 14.457 20.202"></polygon>
                  <polygon points="17.051 10.988 24.908 2 29.658 2 19.251 13.902 17.051 10.988"></polygon>
                  <path
                    d="M31.488,30h-9.559L.512,2H10.313L31.488,30Zm-8.248-2.843h2.632L8.883,4.694h-2.824L23.241,27.157Z"
                    fill="currentColor"></path>
                </g>
              </svg>

              <h4 class="mt-5 text-base font-semibold text-crimson-50 xl:mt-6 xl:text-lg">
                Stay in the loop
              </h4>
              <p class="mt-2.5 line-clamp-3 text-base text-zinc-300 xl:text-lg">
                <span class="sm:hidden">Stay updated with the latest news on Twitter.</span>
                <span class="hidden sm:inline">Stay updated with the latest news, updates, and insights
                  by following us on X, formerly known as Twitter.</span>
              </p>
            </div>
            <div class="mt-4 xl:mt-5">
              <a href="https://twitter.com"
                class="flex items-center text-sm font-medium duration-200 ease-in-out text-crimson-300/70 group-hover:text-crimson-300 xl:text-base">
                <span class="absolute inset-0"></span>
                Follow us
                <svg class="ml-2.5 h-2.5 w-2.5 xl:h-3 xl:w-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16">
                  <title>arrow-top-right</title>
                  <g fill="currentColor">
                    <path
                      d="M14,1H7A1,1,0,0,0,7,3h4.586L1.293,13.293a1,1,0,1,0,1.414,1.414L13,4.414V9a1,1,0,0,0,2,0V2A1,1,0,0,0,14,1Z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Link 4 -->
      <div
        class="group relative w-full bg-gradient-to-b after:absolute after:inset-x-0 after:bottom-0 after:h-px after:w-full after:bg-gradient-to-r after:from-crimson-200/[0.075] after:to-crimson-200/[0.025] after:content-[''] sm:w-1/3 sm:after:left-1/2 sm:after:top-[-3.5px] sm:after:block sm:after:h-1.5 sm:after:w-1.5 sm:after:translate-x-[-2.5px] sm:after:rounded-full sm:after:bg-crimson-200">
        <div class="relative w-full h-full overflow-hidden">
          <div
            class="absolute top-0 right-0 duration-300 ease-in-out opacity-0 bottom-1/3 left-1/3 group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="duration-1000 ease-in-out opacity-0" data-starfield data-min-radius="1"
              data-max-radius="1.75" data-density="high"></canvas>
          </div>
          <div
            class="absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/10 to-[#E478FF]/10 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <div
            class="relative z-10 flex flex-col justify-between flex-1 w-full h-full px-4 py-5 sm:px-5 sm:py-6 lg:py-7 xl:p-8">
            <div class="flex-1">
              <svg class="w-6 h-6 text-crimson-50 sm:h-7 sm:w-7 xl:h-8 xl:w-8" xmlns="http://www.w3.org/2000/svg"
                width="48" height="48" viewBox="0 0 48 48">
                <title>logo-youtube</title>
                <g>
                  <path fill="#DC2217"
                    d="M47.52067,14.40299c0,0-0.46905-3.30774-1.90818-4.76436c-1.82526-1.91181-3.8712-1.92128-4.80944-2.03319 c-6.71693-0.48554-16.79262-0.48554-16.79262-0.48554h-0.02086c0,0-10.07549,0-16.79263,0.48554 c-0.9383,0.11191-2.98351,0.12138-4.80944,2.03319c-1.43915,1.45662-1.90747,4.76436-1.90747,4.76436S0,18.28732,0,22.17164v3.64157 c0,3.88428,0.48004,7.76861,0.48004,7.76861s0.46832,3.30776,1.90747,4.76437c1.82593,1.91181,4.2244,1.85136,5.29267,2.05173 c3.84009,0.36823,16.31986,0.48218,16.31986,0.48218s10.08609-0.01519,16.80302-0.50072 c0.93823-0.11193,2.98418-0.12138,4.80944-2.03319c1.43913-1.45662,1.90818-4.76437,1.90818-4.76437S48,29.69749,48,25.81321 v-3.64157C48,18.28732,47.52067,14.40299,47.52067,14.40299z">
                  </path>
                  <path fill="#FFFFFF" d="M19.04457,30.22611l-0.0022-13.48673l12.96982,6.76686L19.04457,30.22611z">
                  </path>
                </g>
              </svg>

              <h4 class="mt-5 text-base font-semibold text-crimson-50 xl:mt-6 xl:text-lg">
                Explore video library
              </h4>
              <p class="mt-2.5 line-clamp-3 text-base text-zinc-300 xl:text-lg">
                <span class="sm:hidden">Explore our video library on YouTube.</span>
                <span class="hidden sm:inline">From detailed tutorials to user stories, discover how to
                  get the most out of Nebula.</span>
              </p>
            </div>
            <div class="mt-4 xl:mt-5">
              <a href="https://youtube.com"
                class="flex items-center text-sm font-medium duration-200 ease-in-out text-crimson-300/70 group-hover:text-crimson-300 xl:text-base">
                <span class="absolute inset-0"></span>
                Watch now
                <svg class="ml-2.5 h-2.5 w-2.5 xl:h-3 xl:w-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16">
                  <title>arrow-top-right</title>
                  <g fill="currentColor">
                    <path
                      d="M14,1H7A1,1,0,0,0,7,3h4.586L1.293,13.293a1,1,0,1,0,1.414,1.414L13,4.414V9a1,1,0,0,0,2,0V2A1,1,0,0,0,14,1Z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Link 5 -->
      <div
        class="group relative w-full bg-gradient-to-b after:absolute after:left-1/2 after:top-[-3.5px] after:hidden after:h-1.5 after:w-1.5 after:translate-x-[-2.5px] after:rounded-full after:bg-crimson-200 after:content-[''] sm:w-1/3 sm:before:absolute sm:before:left-0 sm:before:h-full sm:before:w-px sm:before:bg-gradient-to-b sm:before:from-crimson-200/[.25] sm:before:to-crimson-200/[0.01] sm:before:content-[''] sm:after:block">
        <div class="relative w-full h-full overflow-hidden">
          <div
            class="absolute top-0 right-0 duration-300 ease-in-out opacity-0 bottom-1/3 left-1/3 group-hover:opacity-100"
            aria-hidden="true">
            <canvas class="duration-1000 ease-in-out opacity-0" data-starfield data-min-radius="1"
              data-max-radius="1.75" data-density="high"></canvas>
          </div>
          <div
            class="absolute inset-0 -z-10 bg-gradient-to-b from-[#575EFF]/10 to-[#E478FF]/10 opacity-0 blur-4xl duration-300 ease-in-out group-hover:opacity-100">
          </div>
          <div
            class="relative z-10 flex flex-col justify-between flex-1 w-full h-full px-4 py-5 sm:px-5 sm:py-6 lg:py-7 xl:p-8">
            <div class="flex-1">
              <svg class="w-6 h-6 text-crimson-50 sm:h-7 sm:w-7 xl:h-8 xl:w-8" xmlns="http://www.w3.org/2000/svg"
                width="48" height="48" viewBox="0 0 48 48">
                <title>logo-linkedin</title>
                <g>
                  <path fill="#007BB5"
                    d="M44.44853,0H3.54103C1.58791,0,0.00067,1.54948,0.00067,3.46093V44.5364 C0.00067,46.44787,1.58791,48,3.54103,48h40.90751c1.95707,0,3.5508-1.55213,3.5508-3.4636V3.46093 C47.99933,1.54948,46.4056,0,44.44853,0z">
                  </path>
                  <path fill="#FFFFFF"
                    d="M7.11264,17.9948h7.12629v22.90627H7.11264V17.9948z M10.67775,6.60807 c2.27735,0,4.12625,1.84961,4.12625,4.12827c0,2.27929-1.84891,4.12887-4.12625,4.12887c-2.28645,0-4.1302-1.84957-4.1302-4.12887 C6.54755,8.45768,8.39129,6.60807,10.67775,6.60807">
                  </path>
                  <path fill="#FFFFFF"
                    d="M18.70507,17.9948h6.82427v3.13147h0.0976c0.9492-1.8008,3.27213-3.69987,6.73573-3.69987 c7.20827,0,8.5404,4.74293,8.5404,10.91213v12.56253h-7.11853V29.76173c0-2.65627-0.0456-6.0736-3.6992-6.0736 c-3.7044,0-4.2696,2.8952-4.2696,5.88347v11.32947h-7.11067V17.9948z">
                  </path>
                </g>
              </svg>

              <h4 class="mt-5 text-base font-semibold text-crimson-50 xl:mt-6 xl:text-lg">
                Join our network
              </h4>
              <p class="mt-2.5 line-clamp-3 text-base text-zinc-300 xl:text-lg">
                <span class="sm:hidden">Join our network for professional insights.</span>
                <span class="hidden sm:inline">Join our LinkedIn network for professional insights,
                  company news, and career opportunities.</span>
              </p>
            </div>
            <div class="mt-4 xl:mt-5">
              <a href="https://linkedin.com"
                class="flex items-center text-sm font-medium duration-200 ease-in-out text-crimson-300/70 group-hover:text-crimson-300 xl:text-base">
                <span class="absolute inset-0"></span>
                Connect on LinkedIn
                <svg class="ml-2.5 h-2.5 w-2.5 xl:h-3 xl:w-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                  viewBox="0 0 16 16">
                  <title>arrow-top-right</title>
                  <g fill="currentColor">
                    <path
                      d="M14,1H7A1,1,0,0,0,7,3h4.586L1.293,13.293a1,1,0,1,0,1.414,1.414L13,4.414V9a1,1,0,0,0,2,0V2A1,1,0,0,0,14,1Z"
                      fill="currentColor"></path>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </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="object-contain w-full h-full opacity-45" />
  </div>

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

  <div
    class="relative w-full max-w-screen-xl gap-16 px-5 pt-20 pb-12 mx-auto sm:px-6 sm:pb-14 md:max-w-screen-xl lg:px-8 lg:pb-16 lg:pt-24">
    <div class="absolute bottom-0 -left-96 -right-96 -top-96 -z-10">
      <img src="{{ asset('assets/landing/media/cosmic-butterfly.png') }}" 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="max-w-5xl mt-5 text-4xl font-bold text-center 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 underline duration-200 ease-in-out text-crimson-300 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-[#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 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