UI Components – Suncealand Library

<section class="py-20 md:py-40 bg-black">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto text-center mb-24">
      <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white mb-12">Cloud backup solutions for you</h1>
      <p class="text-2xl text-gray-200">Record your audio and upload it now.</p>
    </div>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
          <div class="max-w-xs mx-auto">
            <div class="flex h-40 items-center justify-center bg-pink-800 rounded-t-2xl">
              <img class="h-14" src="suncealand-assets/logos/slack-logo.svg" alt="">
            </div>
            <div class="pl-10 py-6 bg-white rounded-b-2xl">
              <h4 class="text-2xl font-medium text-black">Slack</h4>
              <span class="text-gray-200">As always</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0 mt-8 md:mt-12">
          <div class="animate-bouncingSlow max-w-xs mx-auto">
            <div class="flex h-40 items-center justify-center bg-blueGray-900 rounded-t-2xl">
              <img class="h-14" src="suncealand-assets/logos/miro-logo-icon.svg" alt="">
            </div>

<section class="py-20 md:py-40 bg-yellowGray-50" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:mb-28 text-center">
      <div class="inline-flex px-5 py-2 items-center mb-10 bg-purple-50 rounded-full">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">FREQUENTLY ASKED QUESTIONS</span>
      </div>
      <h1 class="text-5xl font-heading font-semibold">Frequently asked questions</h1>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20 md:mb-28">
      <div class="w-full lg:w-1/2 px-4 mb-14">
        <div class="flex mb-14 flex-wrap items-start">
          <div class="w-full md:w-11 pt-12 mb-6 md:mb-0">
            <div class="flex w-11 h-11 mx-auto mb-5 items-center justify-center rounded-full bg-blue-500 text-sm font-medium">1</div>
            <svg class="mx-auto" width="3" height="19" viewBox="0 0 3 19" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="1.25" cy="1.25" r="1.25" fill="#C5C7D6"></circle><circle cx="1.25" cy="9.25" r="1.25" fill="#C5C7D6"></circle><circle cx="1.25" cy="17.25" r="1.25" fill="#C5C7D6"></circle></svg>
          </div>
          <div class="w-full md:w-5/6 md:pl-6">
            <div class="py-12 px-8 md:px-12 bg-white rounded-2xl">
              <div class="max-w-lg">
                <h4 class="text-3xl font-medium mb-5">How does billing work?</h4>
                <p class="text-lg">Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
              </div>
            </div>
          </div>

<section>
  <div class="container px-4 pt-14 pb-20 mx-auto">
    <div class="-mb-2"><a class="inline-block mb-2 mr-32" href="#">#Quisque euismod</a><a class="inline-block mb-2" href="#">#Nunc iaculis quis risus at tristique</a></div>
    <div class="pt-24 md:pt-40 max-w-3xl">
      <h1 class="text-5xl sm:text-7xl font-heading font-semibold mb-16">
        <span>Meet the team: Junior UX Designer</span>
        <div class="inline-block relative">
          <span class="relative z-10">Lauren</span>
          <div class="absolute bottom-0 left-0 -mb-px w-full h-4 bg-blue-500"></div>
        </div>
        <div class="inline-block relative">
          <span class="relative z-10">Collins</span>
          <div class="absolute bottom-0 left-0 -mb-px w-full h-4 bg-blue-500"></div>
        </div>
      </h1>
      <div class="flex items-center">
        <img class="w-16 h-16" src="suncealand-assets/images/avatar-girl-banner.png" alt="">
        <div class="ml-6">
          <h4 class="text-lg font-semibold">Helen Mctominay</h4>
          <span class="text-2xs">11 December 2019</span>
        </div>
      </div>
    </div>
  </div>

<div class="fixed bottom-0 inset-x-0 z-50 p-4" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="pt-14 pb-20 px-8 md:px-18 bg-black rounded-3xl">
    <div class="flex flex-wrap items-end -mx-4">
      <div class="w-full xl:w-2/3 px-4 mb-16 xl:mb-0">
        <div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
          <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
          <span class="uppercase text-sm font-medium tracking-tight">COOOOKIES</span>
        </div>
        <h1 class="text-4xl font-heading text-white mb-8">Cookies on this site</h1>
        <p class="max-w-4xl text-gray-100">By clicking accept, you agree to the storing of cookies on your device to enhance site navigation. Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests.</p>
      </div>
      <div class="w-full xl:w-1/3 px-4">
        <div class="flex flex-wrap items-center -mb-4">
          <a x-on:click.prevent="open=false" class="group relative inline-block h-16 sm:mr-6 mb-4 w-full sm:w-40 bg-white rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-gray-800 border-2 border-white rounded">
                <span class="text-base font-semibold text-white uppercase">Allow</span>
              </div>
            </div>
          </a>
          <a class="group relative inline-block h-16 mb-4 w-full sm:w-40 bg-white rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-gray-800 border-2 border-white rounded">
                <span class="text-base font-semibold text-white uppercase">More</span>

<section class="py-20 md:py-40 bg-gray-900 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-32 text-center">
      <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white mb-12">
        <span>What people say about</span>
        <span></span>
        <span class="text-yellow-500">suncealand</span>
      </h1>
      <p class="text-lg text-white">Record your audio and upload it now.</p>
    </div>
  </div>
  <div class="px-4 lg:px-10">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-32">
        <div>
          <a class="group block sm:max-w-2xs mx-auto lg:mx-0" href="#">
            <img class="sm:transform group-hover:scale-105 w-64 xl:w-80 h-96 xl:h-118 mb-12 object-cover rounded-lg transition duration-500" src="suncealand-assets/images/paint-color-theme-portfolio.png" alt="">
            <h5 class="text-sm text-white mb-12">SUMMER 2022</h5>
            <p class="text-xl text-gray-300">A real nice tools and app. It comes with a few free plug-ins that will be more than enough for beginners.</p>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4 flex flex-col">
        <div class="self-end mb-18">

<section class="pt-20 md:pt-40 bg-gray-900 overflow-hidden">
  <div class="container px-4 mx-auto mb-20 sm:mb-32">
    <div class="text-center mb-24 md:mb-32">
      <div class="inline-flex items-center mb-8">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm text-gray-200 font-medium">FEATURES</span>
      </div>
      <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white">Create podcast every day</h1>
    </div>
    <div class="flex flex-wrap items-center xl:items-start -mx-4">
      <div class="w-full lg:w-1/3 xl:w-1/4 px-4 mb-20 lg:mb-0">
        <div class="max-w-sm mx-auto">
          <div class="flex mb-24">
            <span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
            <div>
              <h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold mb-8">Comfort like you've never experienced before.</h4>
              <p class="text-gray-300">The house by the pond cras ornare</p>
            </div>
          </div>
          <div class="flex">
            <span class="flex-shrink-0 inline-block mt-4 mr-8 w-3 h-3 bg-yellow-500 rounded-full"></span>
            <div>
              <h4 class="font-heading text-3xl sm:text-4xl text-white font-semibold mb-8">Create great podcasts</h4>
              <p class="text-gray-300">The house by the pond cras ornare</p>

<section>
  <div class="flex flex-wrap">
    <div class="w-full lg:w-1/4 px-4 xl:pl-20 pt-20 lg:pt-32 pb-12 bg-gray-50 bg-opacity-20">
      <div>
        <div class="inline-flex py-2 px-5 items-center bg-white mb-10 rounded-full">
          <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
          <span class="uppercase text-sm font-medium tracking-tight">Blog</span>
        </div>
        <h2 class="text-5xl sm:text-7xl lg:text-8xl font-heading">Blog</h2>
      </div>
    </div>
    <div class="w-full lg:w-3/4 px-4 pt-12 pb-20 lg:pt-32 lg:pb-40 bg-white">
      <div class="max-w-5xl xl:ml-20">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full 2xl:w-1/2 px-4 mb-20 2xl:mb-0">
            <a class="group block max-w-md mx-auto" href="#">
              <span class="block mb-4 text-2xs text-gray-200 font-medium">24 AUG 22</span>
              <h4 class="mb-8 lg:mb-16 text-3xl sm:text-4xl font-heading font-semibold group-hover:text-blueGray-700">How to Start a Podcast: Step by Step Guide</h4>
              <img class="h-64 sm:h-80 lg:h-112 transform group-hover:-translate-y-5 transition ease-in-out duration-1000 w-full mb-8 rounded-4xl object-cover" src="suncealand-assets/images/woman-memory-photo.png" alt="">
              <span class="inline-flex items-center font-base font-semibold">
                <span class="mr-2">Learn more</span>
                <div class="relative transition duration-500 animate-pulse">
                  <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.00193 0.666626L0.0585938 1.60996L3.78193 5.33329L4.50195 5.99996L3.78193 6.66663L0.0585938 10.39L1.00193 11.3333L6.33526 5.99996L1.00193 0.666626Z" fill="currentColor"></path>

<section class="relative pt-14 overflow-hidden">
  <div class="border-t-3 border-gray-50 border-opacity-50 py-24 md:pt-60 md:pb-52 relative">
    <img class="absolute top-0 left-0 w-full h-full object-cover" src="suncealand-assets/background/bg-circles-dots.svg" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="text-center">
        <div class="inline-flex px-5 py-2 items-center mb-8 bg-purple-50 rounded-full">
          <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
          <span class="uppercase text-sm font-medium tracking-tight">404</span>
        </div>
        <h1 class="text-6xl sm:text-8xl md:text-10xl font-heading font-semibold mb-12">
          <span>Ohh. We lost</span>
          <span class="text-blue-500">that page</span>
        </h1>
        <p class="text-lg mb-20">The page you’re looking for doesn’t exist or has been moved.</p>
        <a class="group relative inline-block h-16 w-full sm:w-48 bg-blueGray-900 rounded" href="#">
          <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
            <div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-blueGray-900 rounded">
              <span class="text-base font-semibold uppercase">BACK TO HOME</span>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

<section class="py-16 bg-yellowGray-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-center text-sm font-medium mb-12">Trusted by 400+ global brands</h4>
    <div class="flex flex-wrap items-center justify-center -mx-4 -mb-8">
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8">
        <div class="flex items-center h-30 bg-white rounded-2xl">
          <img class="block mx-auto" src="suncealand-assets/logos/barclays-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8">
        <div class="flex items-center h-30 bg-white rounded-2xl">
          <img class="block mx-auto" src="suncealand-assets/logos/spotify-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8">
        <div class="flex items-center h-30 bg-white rounded-2xl">
          <img class="block mx-auto" src="suncealand-assets/logos/zoopla-logo.png" alt="">
        </div>
      </div>
      <div class="w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-8">
        <div class="flex items-center h-30 bg-white rounded-2xl">
          <img class="block mx-auto" src="suncealand-assets/logos/okta-logo.png" alt="">
        </div>
      </div>

<section class="py-20 lg:pb-40 lg:pt-44">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md xl:max-w-xl mx-auto lg:mx-0">
          <div class="inline-flex px-5 py-2 items-center mb-8 bg-purple-50 rounded-full">
            <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
            <span class="uppercase text-sm font-medium tracking-tight">APPLICATION</span>
          </div>
          <h1 class="text-5xl xl:text-7xl font-heading font-semibold mb-16">Don’t wait again. Download our application</h1>
          <ul class="mb-18">
            <li class="flex mb-4 items-center">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
              <span class="ml-8 text-lg">Quisque euismod</span>
            </li>
            <li class="flex mb-4 items-center">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
              <span class="ml-8 text-lg">Nunc iaculis quis risus at tristique</span>
            </li>
            <li class="flex items-center">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="32" height="32" rx="16" fill="#7781EE"></rect><rect x="22.9492" y="9.63605" width="2" height="16" rx="1" transform="rotate(45 22.9492 9.63605)" fill="white"></rect><rect x="7.62891" y="17.0431" width="2" height="7.57417" rx="1" transform="rotate(-45 7.62891 17.0431)" fill="white"></rect></svg>
              <span class="ml-8 text-lg">Lorem sad uisque emod</span>
            </li>
          </ul>

<section class="py-20 md:py-32 bg-yellowGray-500">
  <div class="container px-4 mx-auto mb-20">
    <div class="max-w-xl mb-24 md:mb-32">
      <div class="inline-flex px-5 py-2 mb-8 items-center bg-white rounded-full">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">FEATURES</span>
      </div>
      <h1 class="text-6xl sm:text-7xl md:text-8xl font-heading font-semibold">Create podcast every day</h1>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-20">
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-20">
        <div class="max-w-2xs mx-auto">
          <div class="flex w-18 h-18 mb-10 items-center justify-center bg-white rounded-full">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M1.24961 31.9983C1.08857 31.9983 0.926211 31.9671 0.771541 31.9031C0.304529 31.7096 0 31.2539 0 30.7483L0.000687425 16.1509C-0.0981143 1.85857 17.2946 -5.40814 27.3707 4.72157C37.3399 14.8367 30.1423 32.0108 15.9241 31.9983C13.4055 31.9983 11.0012 31.4335 8.77804 30.3193C6.65371 29.2547 4.0818 29.684 2.37811 31.3877L2.13364 31.6322C1.89454 31.8713 1.57483 31.9983 1.24961 31.9983V31.9983ZM6.3285 27.2395C7.54224 27.2395 8.76329 27.5158 9.89804 28.0845C11.7738 29.0247 13.807 29.5005 15.9382 29.4985C27.8858 29.5161 34.0084 14.9217 25.5945 6.48044C17.0598 -2.0605 2.43848 4.05701 2.50035 16.1329C2.50035 16.1369 2.50041 16.1409 2.50041 16.1449L2.49985 28.2104C3.68422 27.5699 5.00183 27.2395 6.3285 27.2395V27.2395ZM12.2487 16C12.2487 16.8629 11.5492 17.5624 10.6863 17.5624C8.61393 17.48 8.6145 14.5197 10.6863 14.4377C11.5492 14.4377 12.2487 15.1372 12.2487 16ZM16.0607 14.4377C15.1979 14.4377 14.4984 15.1372 14.4984 16C14.5807 18.0724 17.5411 18.0719 17.6231 16C17.6231 15.1372 16.9236 14.4377 16.0607 14.4377ZM21.4352 14.4377C20.5723 14.4377 19.8728 15.1372 19.8728 16C19.9551 18.0724 22.9155 18.0719 22.9975 16C22.9975 15.1372 22.298 14.4377 21.4352 14.4377Z" fill="#04082F"></path>
            </svg>
          </div>
          <h4 class="text-3xl leading-10 font-heading font-semibold mb-14">Comfort like you've never experienced before.</h4>
          <p class="text-lg">Record your audio and upload it to Suncealand.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-20">
        <div class="max-w-2xs mx-auto">
          <div class="flex w-18 h-18 mb-10 items-center justify-center bg-white rounded-full">

<section class="py-20 lg:py-40 bg-black">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/2 px-4 mb-20 xl:mb-0">
        <div class="max-w-md mx-auto">
          <div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
            <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
            <span class="uppercase text-sm font-medium tracking-tighter">STATS</span>
          </div>
          <h1 class="text-5xl sm:text-7xl xl:text-8xl font-heading font-semibold text-white mb-10">Big results</h1>
          <div class="max-w-sm mb-18">
            <p class="text-lg text-gray-200 mb-10">We'll help you distribute your podcast! Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
            <p class="text-sm text-gray-200 leading-6">We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
          </div>
          <a class="group relative inline-block h-16 w-full sm:w-48 bg-white rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-white rounded">
                <span class="text-base font-semibold uppercase">Get started</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full xl:w-1/2 px-4">

<section class="py-20 md:py-40">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="sm:max-w-sm">
          <div class="inline-flex px-5 py-2 items-center mb-8 bg-purple-50 rounded-full">
            <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
            <span class="uppercase text-sm font-medium tracking-tight">FREQUENTLY ASKED QUESTIONS</span>
          </div>
          <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold mb-18">Helpdesk</h1>
          <p class="text-2xl mb-18">We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
          <a class="group relative inline-block h-16 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-blue-500 border-2 border-blueGray-900 rounded">
                <span class="text-base font-semibold uppercase">See all</span>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div class="lg:max-w-lg xl:max-w-3xl lg:ml-auto lg:pt-52">
          <button class="group block mb-6 w-full text-left pb-5 border-b border-gray-50" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
            <div class="flex items-start justify-between">

<section class="py-20 md:py-40 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/2 px-4 order-last xl:order-first">
        <div class="sm:flex items-start max-w-2xl mx-auto">
          <div class="mr-6">
            <div class="flex mb-8 items-end">
              <div class="flex mr-8 items-center justify-center w-40 h-14 text-center bg-white rounded-3xl">
                <span class="text-2xl font-medium leading-none">Hello!👋</span>
              </div>
              <div>
                <img src="suncealand-assets/images/photo-man-purple-bg.png" alt="">
              </div>
            </div>
            <div class="ml-auto w-52 px-8 pt-10 pb-8 rounded-3xl bg-gray-800">
              <img class="block mb-10" src="suncealand-assets/logos/chat-logo.svg" alt="">
              <h5 class="text-2xl font-medium text-white">Chat</h5>
              <span class="text-gray-300">Livechat w/ Tony</span>
            </div>
          </div>
          <div class="w-52 mt-10 px-8 pt-10 pb-8 rounded-3xl bg-gray-800">
            <img class="block mb-10" src="suncealand-assets/logos/slack-logo.svg" alt="">
            <h5 class="text-2xl font-medium text-white">Slack</h5>
            <span class="text-gray-300">Contact on Slack</span>

<section class="relative py-20 md:py-40 bg-yellowGray-500" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-20">
      <h1 class="font-heading text-6xl sm:text-7xl font-semibold mb-8">Team members</h1>
      <p class="text-xl">Manage your team members.</p>
    </div>
    <div class="py-6 px-8 md:px-12 mb-2 bg-white rounded-xl">
      <div>
        <div class="flex flex-wrap -mx-3 items-center">
          <div class="w-full xl:w-auto px-3 mb-4 xl:mb-0">
            <span class="text-3xl font-heading font-semibold">Sort by</span>
          </div>
          <div class="w-full md:w-1/2 xl:w-auto px-3 mb-2 md:mb-0">
            <div class="relative border border-gray-50 rounded-md">
              <select class="relative w-full xl:w-67 pl-6 pr-12 pt-4 pb-3 text-xs font-semibold bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
                <option value="">New users</option>
                <option value="">Progress</option>
                <option value="">Date</option>
              </select>
              <span class="absolute top-1/2 right-0 transform -translate-y-1/2 mr-6">
                <svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.6641 1.30503L9.72073 0.361694L5.9974 4.08503L5.33073 4.80505L4.66406 4.08503L0.94073 0.361694L-0.00260357 1.30503L5.33073 6.63836L10.6641 1.30503Z" fill="#04082F"></path>
                </svg>
              </span>

<section class="pb-20 md:pb-40">
  <div class="relative pt-10 bg-indigo-500 overflow-hidden">
    <div class="container px-4 mx-auto">
      <div class="text-right -mb-2"><a class="inline-block mb-2 mr-32" href="#">#Quisque euismod</a><a class="inline-block mb-2" href="#">#Nunc iaculis quis risus at tristique</a></div>
      <div class="relative flex flex-wrap items-start pt-40 -mx-4">
        <div class="w-full xl:w-1/2 px-4">
          <div class="relative max-w-xl mx-auto xl:ml-0">
            <div class="relative z-10">
              <img class="block xl:mx-auto w-full max-w-md" src="suncealand-assets/images/frame-avatar-apps-2.png" alt="">
              <img class="absolute top-0 right-0 xl:-mr-20 mt-40 max-w-xs" src="suncealand-assets/images/join-box.png" alt="">
            </div>
            <div class="relative pb-32 animate-bouncingSlow">
              <img class="absolute bottom-0 left-1/2 -mb-52 xl:-mb-48 transform -translate-x-1/2 object-cover" src="suncealand-assets/background/gray-lines.svg" alt="">
            </div>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4 mb-32 xl:mb-0 order-first xl:order-last">
          <div class="max-w-2xl mx-auto xl:mr-0">
            <div class="inline-flex px-5 py-2 items-center mb-12 bg-white rounded-full">
              <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
              <span class="uppercase text-sm font-medium tracking-tight">NEW POST</span>
            </div>
            <h1 class="text-5xl sm:text-7xl font-heading font-semibold mb-12">Meet the team: Junior UI Designer Lauren Collins</h1>
            <span class="block text-2xl">Read this article</span>

<section class="py-20 md:py-36 bg-black">
  <div class="container px-4 mx-auto">
    <div class="mb-20">
      <div class="inline-flex items-center px-5 py-2 bg-gray-900 rounded-full mb-10">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm text-gray-100 font-medium tracking-tight">PRICING</span>
      </div>
      <h1 class="text-7xl xl:text-8xl font-heading font-semibold text-white mb-20">Choose the plan</h1>
      <div class="text-center">
        <div class="inline-flex items-center" x-data="{ toggle: false }">
          <span class="text-lg font-medium" :class="{ 'text-white': !toggle, 'text-gray-200': toggle }">monthly</span>
          <div class="flex p-2 mx-6 items-center bg-gray-800 rounded-full">
            <button x-on:click="toggle = !toggle" class="inline-block w-8 h-8 bg-blue-500 rounded-full" :class="{ 'bg-blue-500': !toggle, 'bg-transparent': toggle }"></button>
            <button x-on:click="toggle = !toggle" class="inline-block w-8 h-8 rounded-full" :class="{ 'bg-blue-500': toggle, 'bg-transparent': !toggle }"></button>
          </div>
          <div class="flex items-start">
            <span class="text-lg text-white" :class="{ 'text-white': toggle, 'text-gray-200': !toggle }">annually</span>
            <span class="inline-block ml-2 -mt-1 py-1 px-2 text-2xs font-medium text-black bg-indigo-500 rounded-full">-10%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="max-w-md lg:max-w-2xl mx-auto xl:max-w-none">
      <div class="flex flex-wrap">

<section class="pt-20 md:pt-40 pb-20 md:pb-32">
  <div class="container px-4 mx-auto">
    <div class="mb-24 text-center">
      <div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
        <span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">HOW IT WORKS</span>
      </div>
      <h1 class="text-6xl sm:text-7xl font-heading">How does it work?</h1>
    </div>
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-1/2 xl:w-auto px-4 mb-16 lg:mb-0">
        <div class="max-w-md lg:max-w-none mx-auto">
          <img class="block" src="suncealand-assets/images/frame-video-message-gray.png" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/2 xl:w-auto px-4">
        <div class="max-w-md mx-auto xl:mx-0">
          <p class="max-w-sm text-2xl mb-12">We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
          <div class="mb-16">
            <div class="flex items-start md:items-center pb-4 mb-4 border-b border-gray-50">
              <div class="flex-shrink-0 flex w-11 h-11 mr-5 items-center justify-center text-sm font-medium bg-blue-500 rounded-full">1</div>
              <p>The house by the pond cras ornare.</p>
            </div>
            <div class="flex items-start md:items-center pb-4 mb-4 border-b border-gray-50">

<section class="pt-20 md:pt-40 pb-72 md:pb-96 bg-gray-900 overflow-hidden">
  <div class="group container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-28 text-center">
      <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold text-white mb-12">What people say about suncealand</h1>
      <p class="text-lg text-white">Record your audio and upload it now.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-4">
      <div class="w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5 p-4 md:animate-moveBottom1 xl:animate-none">
        <img class="w-full h-40 sm:h-60 rounded-lg" src="suncealand-assets/images/square-portfolio-small9.png" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5 p-4">
        <img class="w-full h-40 sm:h-60 rounded-lg" src="suncealand-assets/images/square-portfolio-small8.png" alt="">
      </div>
      <div class="w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5 p-4 animate-moveRight md:animate-none">
        <img class="w-full h-40 sm:h-60 rounded-lg" src="suncealand-assets/images/square-portfolio-small7.png" alt="">
      </div>
      <div class="hidden md:block w-1/3 xl:w-1/4 2xl:w-1/5 p-4 ml-auto animate-moveLeft xl:animate-none 2xl:animate-moveLeft">
        <img class="w-full h-40 sm:h-60 rounded-lg" src="suncealand-assets/images/square-portfolio-small6.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-4">
      <div class="w-1/2 md:w-1/3 xl:w-1/4 2xl:w-1/5 p-4 2xl:animate-moveBottom2">
        <img class="w-full h-40 sm:h-60 rounded-lg" src="suncealand-assets/images/square-portfolio-small3.png" alt="">
      </div>

<section class="py-8 bg-purple-50 overflow-hidden">
  <div class="px-4">
    <div class="relative w-full md:max-w-xl lg:max-w-3xl ml-auto px-6 sm:px-10 sm:px-20 py-18 md:py-22 bg-white rounded-4xl">
      <div class="inline-flex items-center px-5 py-2 bg-purple-50 rounded-full mb-10">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">Team</span>
      </div>
      <h2 class="font-heading font-semibold text-4xl mb-16">Meet our team</h2>
      <div class="flex flex-wrap -mx-4 mb-14">
        <div class="w-full lg:w-1/3 px-4 mb-14 lg:mb-0">
          <div class="max-w-xs lg:max-w-none mx-auto text-center">
            <div class="relative w-36 mb-8 mx-auto">
              <div class="relative h-36 w-36 mx-auto bg-yellow-500 rounded-full overflow-hidden">
                <img class="absolute bottom-0 -mb-10 left-0 h-40 object-cover" src="suncealand-assets/images/portait-without-background3.png" alt="">
              </div>
              <div class="absolute z-10 bottom-0 right-0 -mb-4 -mr-2 flex items-center justify-center w-15 h-15 bg-white rounded-full border-3 border-black text-2xl font-semibold text-black">LC</div>
            </div>
            <div class="relative">
              <h4 class="text-2xl font-medium">Lill Caoimhin</h4>
              <span class="text-gray-200">Co-Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-14 lg:mb-0 sm:pt-6 lg:pt-20">