Tailwind CSS Components

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-center text-4xl lg:text-5xl font-bold font-heading mb-6">Testimonials</h1>
    <p class="text-center text-orange-50 mb-20">See what they have to say about us</p>
    <div class="bg-purple-900 rounded-4xl overflow-hidden px-4 lg:px-10 pt-8 lg:pt-16">
      <div class="flex flex-wrap items-end transform translate-y-14 -mx-4">
        <div class="w-full lg:w-1/3 p-4">
          <div class="border border-gray-100 py-14 px-8 bg-white rounded-3xl overflow-hidden">
            <h2 class="text-2xl font-semibold mb-8">“Highly recommended”</h2>
            <div class="bg-gray-50 rounded-xs h-3 w-40 mb-3"></div>
            <div class="bg-gray-50 rounded-xs h-3 w-full lg:w-full sm:w-72 mb-3"></div>
            <div class="bg-gray-50 rounded-xs h-3 w-full lg:w-full sm:w-72 mb-3"></div>
            <div class="bg-gray-50 rounded-xs h-3 w-52"></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
          <div class="border border-gray-100 py-14 px-8 bg-white rounded-3xl relative">
            <h2 class="text-2xl font-semibold mb-8">“Make learning fun”</h2>
            <p class="mb-16">They shipping a platform that took learning to the next level. I can invite my friend to study in specific topic together in just two-click.</p>
            <div class="flex items-center gap-4 flex-wrap">
              <div class="rounded-full bg-orange-50 overflow-hidden">
                <img src="solstice-assets/images/testimonials/woman-avatar1.png" alt="">
              </div>
              <div>

<section class="py-12 overflow-hidden">
  <div class="flex flex-wrap h-full">
    <div class="w-full lg:w-1/2 p-4">
      <div class="flex flex-col justify-center max-w-md mx-auto h-full">
        <h1 class="text-3xl font-bold font-heading mb-4">Sign up</h1>
        <p class="text-gray-500 mb-8">Select your preferred sign up method</p>
        <a class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-white w-full text-center border border-gray-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 mb-4" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
            <path d="M10.5003 1.91667C12.5358 1.91667 14.3903 2.67493 15.8117 3.91839L13.8037 5.92643C12.9021 5.19326 11.7542 4.75001 10.5003 4.75001C7.601 4.75001 5.25033 7.10068 5.25033 10C5.25033 12.8993 7.601 15.25 10.5003 15.25C12.7863 15.25 14.7244 13.7867 15.4456 11.7501L15.5636 11.4167H15.2099H10.7503V8.58334H17.7503V8.61792H18.0003H18.4637C18.5415 9.06752 18.5837 9.52907 18.5837 10C18.5837 14.464 14.9643 18.0833 10.5003 18.0833C6.03631 18.0833 2.41699 14.464 2.41699 10C2.41699 5.53599 6.03631 1.91667 10.5003 1.91667Z" fill="#FFC107" stroke="#FFC107" stroke-width="0.5"></path>
            <path d="M3.12793 6.12125L5.86585 8.12917C6.60668 6.29501 8.40085 5.00001 10.5004 5.00001C11.775 5.00001 12.9346 5.48084 13.8175 6.26625L16.1746 3.90917C14.6863 2.52209 12.6954 1.66667 10.5004 1.66667C7.2996 1.66667 4.52376 3.47375 3.12793 6.12125Z" fill="#FF3D00"></path>
            <path d="M10.4998 18.3333C12.6523 18.3333 14.6081 17.5096 16.0869 16.17L13.5077 13.9875C12.6429 14.6452 11.5862 15.0009 10.4998 15C8.3323 15 6.49189 13.6179 5.79855 11.6892L3.08105 13.7829C4.46022 16.4817 7.26105 18.3333 10.4998 18.3333Z" fill="#4CAF50"></path>
            <path d="M18.6713 8.36791H18V8.33333H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.9879L13.5079 13.9871L16.0871 16.1696C15.9046 16.3354 18.8333 14.1667 18.8333 9.99999C18.8333 9.44124 18.7758 8.89583 18.6713 8.36791Z" fill="#1976D2"></path>
          </svg>
          <span class="font-bold font-heading">Sign up with Google</span>
        </a>
        <a class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-orange-500 w-full text-center border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 mb-8" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M14.1667 2.91667H5.83341C3.33341 2.91667 1.66675 4.16667 1.66675 7.08333V12.9167C1.66675 15.8333 3.33341 17.0833 5.83341 17.0833H14.1667C16.6667 17.0833 18.3334 15.8333 18.3334 12.9167V7.08333C18.3334 4.16667 16.6667 2.91667 14.1667 2.91667ZM14.5584 7.99167L11.9501 10.075C11.4001 10.5167 10.7001 10.7333 10.0001 10.7333C9.30008 10.7333 8.59175 10.5167 8.05008 10.075L5.44175 7.99167C5.17508 7.775 5.13341 7.375 5.34175 7.10833C5.55841 6.84167 5.95008 6.79167 6.21675 7.00833L8.82508 9.09167C9.45842 9.6 10.5334 9.6 11.1667 9.09167L13.7751 7.00833C14.0417 6.79167 14.4417 6.83333 14.6501 7.10833C14.8667 7.375 14.8251 7.775 14.5584 7.99167Z" fill="white"></path>
          </svg>
          <span class="text-white font-bold font-heading">Continue with email</span>
        </a>
        <a class="inline-block text-center w-full text-gray-500 hover: transition duration-200" href="#">
          <span>Already have an account?</span>
          <span></span>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="bg-white border border-orange-400 rounded-4xl py-20 px-8">
      <div class="flex justify-center mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" width="68" height="34" viewBox="0 0 68 34" fill="none">
          <path d="M2 34C1.99977 29.7976 2.8273 25.6364 4.43533 21.7539C6.04336 17.8713 8.40039 14.3436 11.3718 11.3721C14.3433 8.40056 17.8709 6.04346 21.7533 4.43539C25.6358 2.82732 29.7969 1.99977 33.9991 2C51.6726 2 66 16.3261 66 34" stroke="#530031" stroke-width="4" stroke-miterlimit="10"></path>
          <path d="M9.22583 34.0001C9.22583 27.4085 11.836 21.0869 16.482 16.4259C21.1281 11.765 27.4295 9.14648 34 9.14648C40.5705 9.14648 46.872 11.765 51.518 16.4259C56.1641 21.0869 58.7742 27.4085 58.7742 34.0001" stroke="#FF7100" stroke-width="4" stroke-miterlimit="10"></path>
          <path d="M16.134 34C16.134 29.2617 18.0163 24.7174 21.3669 21.3669C24.7174 18.0163 29.2617 16.134 34 16.134C38.7384 16.134 43.2827 18.0163 46.6332 21.3669C49.9837 24.7174 51.866 29.2617 51.866 34" stroke="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
        </svg>
      </div>
      <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-6 text-center max-w-lg lg:max-w-2xl mx-auto">Discover Fun and Exciting Knowledge</h1>
      <p class="text-gray-500 text-center mb-10">Embark on an exciting learning adventure together - Join now!</p>
      <div class="flex justify-center"><a class="w-full sm:w-auto text-center py-5 px-8 mb-8 h-16 inline-flex items-center justify-center rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Sign Up Now</a></div>
    </div>
  </div>
</section>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-6">FAQ</h1>
        <p class="text-white text-xl font-bold font-heading max-w-xs">
          <span>Still have more questions? Visit our</span>
          <span></span>
          <a class="text-orange-200 hover:underline" href="#">help center</a>
          <span></span>
          <span>to get in touch.</span>
        </p>
      </div>
      <div class="w-full lg:w-2/3 p-4">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="bg-white rounded-3xl mb-3 p-6 cursor-pointer">
          <div class="flex items-center justify-between gap-6">
            <h2 class="text-lg font-bold font-heading">What is Solstice? What is it for?</h2>
            <a :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="transform hover:text-opacity-70 transition duration-200 w-6 h-6" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">

<section class="py-16 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center justify-center -mx-4">
      <div class="w-full xl:w-1/6 p-4">
        <p class="text-white text-lg font-semibold text-center">As seen in</p>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-white rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo-secondary1.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-white rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo-secondary2.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-white rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo-secondary3.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/6 p-4">
        <div class="py-4 px-3 bg-white rounded-xl">
          <img class="mx-auto" src="solstice-assets/images/logos/placeholder-logo-secondary4.png" alt="">

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4 relative">
    <div class="border-t border-b border-orange-300 py-12">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 p-4">
          <div class="border border-orange-100 rounded-md bg-orange-50 px-2 py-1 inline-flex items-center gap-2 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
              <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
            </svg>
            <span class="text-orange-500 text-sm font-medium">Newsletter</span>
          </div>
          <h1 class="text-4xl lg:text-5xl text-white font-bold font-heading max-w-sm lg:max-w-lg">Join 14K people embrace fun learning</h1>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <form action="">
            <div class="flex flex-wrap gap-4 mb-6">
              <input class="flex-1 rounded-full p-4 outline-none border border-orange-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" type="text" placeholder="Email address">
              <button class="w-full sm:w-auto h-14 py-4 px-6 rounded-full bg-purple-900 border border-purple-700 shadow hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200 flex items-center justify-center gap-2" type="submit">
                <span class="text-white font-bold font-heading">Subscribe</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M4.99996 10H15.4166M15.4166 10L10.4166 5M15.4166 10L10.4166 15" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>

<section class="py-12 overflow-hidden">
  <div class="flex flex-wrap h-full">
    <div class="w-full lg:w-1/2 p-4">
      <div class="flex flex-col justify-center max-w-md mx-auto h-full">
        <h1 class="text-3xl font-bold font-heading mb-4">Login</h1>
        <p class="text-gray-500 mb-8">Select your preferred sign up method</p>
        <a class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-white w-full text-center border border-gray-100 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 mb-4" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
            <path d="M10.5003 1.91667C12.5358 1.91667 14.3903 2.67493 15.8117 3.91839L13.8037 5.92643C12.9021 5.19326 11.7542 4.75001 10.5003 4.75001C7.601 4.75001 5.25033 7.10068 5.25033 10C5.25033 12.8993 7.601 15.25 10.5003 15.25C12.7863 15.25 14.7244 13.7867 15.4456 11.7501L15.5636 11.4167H15.2099H10.7503V8.58334H17.7503V8.61792H18.0003H18.4637C18.5415 9.06752 18.5837 9.52907 18.5837 10C18.5837 14.464 14.9643 18.0833 10.5003 18.0833C6.03631 18.0833 2.41699 14.464 2.41699 10C2.41699 5.53599 6.03631 1.91667 10.5003 1.91667Z" fill="#FFC107" stroke="#FFC107" stroke-width="0.5"></path>
            <path d="M3.12793 6.12125L5.86585 8.12917C6.60668 6.29501 8.40085 5.00001 10.5004 5.00001C11.775 5.00001 12.9346 5.48084 13.8175 6.26625L16.1746 3.90917C14.6863 2.52209 12.6954 1.66667 10.5004 1.66667C7.2996 1.66667 4.52376 3.47375 3.12793 6.12125Z" fill="#FF3D00"></path>
            <path d="M10.4998 18.3333C12.6523 18.3333 14.6081 17.5096 16.0869 16.17L13.5077 13.9875C12.6429 14.6452 11.5862 15.0009 10.4998 15C8.3323 15 6.49189 13.6179 5.79855 11.6892L3.08105 13.7829C4.46022 16.4817 7.26105 18.3333 10.4998 18.3333Z" fill="#4CAF50"></path>
            <path d="M18.6713 8.36791H18V8.33333H10.5V11.6667H15.2096C14.8809 12.5902 14.2889 13.3972 13.5067 13.9879L13.5079 13.9871L16.0871 16.1696C15.9046 16.3354 18.8333 14.1667 18.8333 9.99999C18.8333 9.44124 18.7758 8.89583 18.6713 8.36791Z" fill="#1976D2"></path>
          </svg>
          <span class="font-bold font-heading">Continue with Google</span>
        </a>
        <a class="h-14 inline-flex items-center justify-center gap-2 py-4 px-6 rounded-full bg-orange-500 w-full text-center border border-orange-600 shadow hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200 mb-8" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M14.1667 2.91667H5.83341C3.33341 2.91667 1.66675 4.16667 1.66675 7.08333V12.9167C1.66675 15.8333 3.33341 17.0833 5.83341 17.0833H14.1667C16.6667 17.0833 18.3334 15.8333 18.3334 12.9167V7.08333C18.3334 4.16667 16.6667 2.91667 14.1667 2.91667ZM14.5584 7.99167L11.9501 10.075C11.4001 10.5167 10.7001 10.7333 10.0001 10.7333C9.30008 10.7333 8.59175 10.5167 8.05008 10.075L5.44175 7.99167C5.17508 7.775 5.13341 7.375 5.34175 7.10833C5.55841 6.84167 5.95008 6.79167 6.21675 7.00833L8.82508 9.09167C9.45842 9.6 10.5334 9.6 11.1667 9.09167L13.7751 7.00833C14.0417 6.79167 14.4417 6.83333 14.6501 7.10833C14.8667 7.375 14.8251 7.775 14.5584 7.99167Z" fill="white"></path>
          </svg>
          <span class="text-white font-bold font-heading">Continue with email</span>
        </a>
        <a class="inline-block text-center w-full text-gray-500 hover: transition duration-200" href="#">
          <span>New to Solstice?</span>
          <span></span>

<section class="pt-24 pb-14 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex items-start justify-between flex-wrap gap-8 mb-36">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
      </a>
      <div class="flex flex-wrap gap-8 -mx-4">
        <ul class="flex flex-col gap-6 p-4">
          <li class="text-white font-medium">Platform</li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Features</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">How it works</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Pricing</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Events</a></li>
        </ul>
        <ul class="flex flex-col gap-6 p-4">
          <li class="text-white font-medium">Company</li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">About</a></li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Our Mission</a></li>
          <li class="flex items-center flex-wrap gap-2">
            <a class="text-white hover:text-opacity-70 transition duration-200" href="#">Careers</a>
            <div class="bg-orange-50 border border-orange-100 py-1 px-2 rounded-md text-orange-500 text-xs font-bold font-heading uppercase">HIRING</div>
          </li>
          <li><a class="text-white hover:text-opacity-70 transition duration-200" href="#">Contact</a></li>
        </ul>

<div class="fixed bottom-0 left-0 z-30 w-full p-6" :class="{ 'hidden': !open }" x-data="{ open: true }">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-5xl border-2 border-orange-400 shadow-sm py-6 px-14 flex items-center justify-between flex-wrap gap-4">
      <div>
        <h2 class="font-bold font-heading mb-2">Privacy Settings</h2>
        <p class="text-gray-600 max-w-lg">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
      </div>
      <div class="flex gap-4 flex-wrap w-full sm:w-auto"><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center py-4 px-6 h-14 inline-flex items-center justify-center rounded-full border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Deny</a><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center py-4 px-6 h-14 inline-flex items-center justify-center rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Accept All</a></div>
    </div>
  </div>
</div>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <p class="uppercase text-orange-50 text-center text-sm font-bold font-heading mb-4">FEATURES</p>
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-24">Personalized learning journeys</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-col h-full">
          <div class="pb-4">
            <div class="rounded-2xl w-14 h-14 flex items-center justify-center bg-purple-900 ml-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                <path d="M10.9998 2.66669V29.3334H10.4132C5.55984 29.3334 2.6665 26.44 2.6665 21.5867V10.4134C2.6665 5.56002 5.55984 2.66669 10.4132 2.66669H10.9998Z" fill="white"></path>
                <path d="M28.8333 10.4134V14.5H13.5V3.16669H21.5867C23.9139 3.16669 25.7113 3.85845 26.9264 5.07357C28.1416 6.2887 28.8333 8.08612 28.8333 10.4134Z" fill="white" stroke="white"></path>
                <path d="M29.3333 17V21.5867C29.3333 26.44 26.44 29.3333 21.5867 29.3333H13V17H29.3333Z" fill="white"></path>
              </svg>
            </div>
          </div>
          <div class="relative pl-4 pb-12 border-l border-dashed border-orange-50 border-opacity-50 flex-1">
            <div class="absolute top-0 -left-px bg-orange-50 w-0.5 h-6"></div>
            <h2 class="text-white text-2xl font-bold font-heading mb-4">Study room. Personal or group.</h2>
            <p class="text-orange-50">Optimize study environment with a personalized room, enhance focus and accommodate group study sessions.</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">

<section class="bg-orange-500 py-6">
  <div class="container px-4 mx-auto">
    <h1 class="lg:px-18 text-white text-5xl lg:text-7xl font-bold font-heading mb-24 mt-14 max-w-lg lg:max-w-6xl">On a mission to make learning fun</h1>
    <div class="lg:px-18 mb-8 lg:mb-0">
      <img class="rounded-3xl lg:rounded-b-none lg:rounded-t-3xl w-full object-cover" src="solstice-assets/images/about/picture-large1.png" alt="">
    </div>
    <div class="bg-purple-900 border-purple-800 rounded-3xl flex flex-wrap mb-32">
      <div class="w-full md:w-1/2 lg:w-1/4 py-8">
        <div class="md:border-r border-purple-700 px-12">
          <p class="text-orange-50 mb-2 text-center">Founded</p>
          <h2 class="text-4xl lg:text-5xl font-semibold text-white text-center">2023</h2>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-8">
        <div class="lg:border-r border-purple-700 px-12">
          <p class="text-orange-50 mb-2 text-center">Total funding</p>
          <h2 class="text-4xl lg:text-5xl font-semibold text-white text-center">$9.6M</h2>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-8">
        <div class="md:border-r border-purple-700 px-12">
          <p class="text-orange-50 mb-2 text-center">Team members</p>
          <h2 class="text-4xl lg:text-5xl font-semibold text-white text-center">110</h2>
        </div>

<section class="overflow-hidden bg-orange-500">
  <div class="border-b border-orange-300 pb-10 pt-24 flex justify-center">
    <div class="bg-purple-900 rounded-4xl">
      <svg xmlns="http://www.w3.org/2000/svg" width="112" height="112" viewBox="0 0 112 112" fill="none">
        <path d="M98.0002 49V31.5C98.0002 29.567 96.4332 28 94.5002 28L84.0002 28C82.0672 28 80.5002 29.567 80.5002 31.5V45.5C80.5002 57.098 71.0982 66.5 59.5002 66.5L45.5002 66.5C43.5672 66.5 42.0002 68.067 42.0002 70V80.5C42.0002 82.433 43.5672 84 45.5002 84L63.0002 84C82.3301 84 98.0002 68.33 98.0002 49Z" fill="white"></path>
        <path d="M14 63L14 80.5C14 82.433 15.567 84 17.5 84H28C29.933 84 31.5 82.433 31.5 80.5V66.5C31.5 54.902 40.902 45.5 52.5 45.5H66.5C68.433 45.5 70 43.933 70 42V31.5C70 29.567 68.433 28 66.5 28L49 28C29.67 28 14 43.67 14 63Z" fill="white"></path>
      </svg>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <h1 class="text-white font-bold font-heading text-center text-3xl lg:text-5xl mt-16 mb-10">Careers at Solstice</h1>
    <div class="p-6 rounded-2xl border border-orange-500 bg-white mb-24">
      <p class="flex gap-2 flex-wrap">
        <span>Check out our</span>
        <span class="flex items-center gap-1">
          <span class="text-orange-500 font-bold font-heading">Open Roles</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="#FF7100" stroke="#FF7100"></path>
          </svg>
        </span>
        <span>at the bottom of the page</span>
      </p>
    </div>
    <h2 class="text-white text-3xl font-bold font-heading mb-4 mt-16">What we’re building</h2>

<section class="overflow-hidden py-24 pl-8 lg:pl-20 pr-8 lg:pr-40 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-50 lg:pb-6 xl:pb-24">
    <div class="flex justify-center gap-6">
      <div class="hidden lg:block mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, rgba(255, 234, 194, 0.50) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, rgba(255, 234, 194, 0.50) 100%);"></div>
      <div class="hidden lg:block mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 234, 194, 0.00) 0%, #FFEAC2 100%);"></div>
    </div>
  </div>
  <div class="relative z-10">
    <div class="flex flex-wrap justify-end -mx-4">
      <div class="w-full lg:w-2/3 xl:w-5/6 p-4">
        <a class="group mb-12 inline-flex items-center gap-2 flex-wrap" href="#">
          <div class="text-black group-hover:text-opacity-80 transition duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M15.4167 10H5M5 10L10 5M5 10L10 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <span class="text-black group-hover:text-opacity-80 transition duration-200 font-bold">Back to Blog</span>
        </a>
        <img class="w-full rounded-2xl mb-16" src="solstice-assets/images/blog/post-picture.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-5xl lg:text-6xl font-bold font-heading mb-6">Pricing</h1>
    <p class="text-gray-600 text-lg text-center mb-24 max-w-lg mx-auto">Simple pricing that fits for everyone for the price of a cup of coffee.Start for free, no credit card required.</p>
    <div class="overflow-x-auto mb-24">
      <div class="flex min-w-max">
        <div class="w-96 lg:w-1/3 p-4">
          <div class="pb-10 border-b border-gray-200">
            <div class="flex flex-wrap items-center gap-4 mb-4">
              <p class="text-lg font-bold font-heading">Monthly</p>
              <div class="p-1 w-14 h-8 bg-orange-500 rounded-full">
                <div class="relative">
                  <input class="custom-switch-1 opacity-0 absolute z-10 h-8 w-14 top-0 left-0" type="checkbox">
                  <div class="absolute left-0 transform w-6 h-6 bg-white rounded-full"></div>
                </div>
              </div>
              <p class="text-lg font-bold font-heading">Annually</p>
            </div>
            <div class="inline-block px-4 py-2 rounded-full bg-orange-50 text-orange-700">SAVE 15% with annual billing</div>
          </div>
          <h2 class="mt-10 mb-24 text-lg font-bold font-heading">What you’ll get</h2>
          <ul class="flex flex-col gap-9">
            <li class="text-lg font-medium">Join public room</li>
            <li class="text-lg font-medium">Create unlimited room</li>

<section class="py-24 bg-orange-500" x-data="{ tab: 'step1' }">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1>
    <p class="text-center text-white mb-20">What steps do I need to take to join?</p>
    <div class="flex flex-wrap mb-12">
      <div class="w-full lg:w-1/3">
        <a x-on:click.prevent="tab = 'step1'" href="#">
          <div :class="{ 'border-white': tab == 'step1', 'border-orange-300': tab != 'step1' }" class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-orange-50 mb-4">
            <div :class="{ 'text-purple-900 bg-orange-50': tab == 'step1', 'bg-orange-400 text-white': tab != 'step1' }" class="bg-orange-50 w-10 h-10 flex items-center justify-center rounded-xl text-purple-900 transition duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H13.44L11.37 9.18C11.22 9.03 11.15 8.84 11.15 8.65C11.15 8.46 11.22 8.27 11.37 8.12C11.66 7.83 12.14 7.83 12.43 8.12L15.78 11.47C16.07 11.76 16.07 12.24 15.78 12.53L12.43 15.88C12.14 16.17 11.66 16.17 11.37 15.88C11.08 15.59 11.08 15.11 11.37 14.82L13.44 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z" fill="currentColor"></path>
                <path d="M2.75 11.25C2.34 11.25 2 11.59 2 12C2 12.41 2.34 12.75 2.75 12.75H9V11.25H2.75Z" fill="currentColor"></path>
              </svg>
            </div>
            <p :class="{ 'text-white': tab == 'step1', 'text-orange-100': tab != 'step1' }" class="text-lg text-white font-bold font-heading transition duration-200">Step I</p>
          </div>
        </a>
      </div>
      <div class="w-full lg:w-1/3">
        <a x-on:click.prevent="tab = 'step2'" href="#">
          <div :class="{ 'border-white': tab == 'step2', 'border-orange-300': tab != 'step2' }" class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-orange-300 hover:border-orange-50 mb-4">
            <div :class="{ 'text-purple-900 bg-orange-50': tab == 'step2', 'bg-orange-400': tab != 'step2' }" class="bg-orange-400 group-hover:bg-orange-50 w-10 h-10 flex items-center justify-center rounded-xl text-white group-hover:text-purple-900 transition duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M14.73 5.86V2.5C14.73 2.22 14.51 2 14.23 2H9.77002C9.49002 2 9.27002 2.22 9.27002 2.5V5.86C9.27002 6.14 9.49002 6.36 9.77002 6.36H14.23C14.51 6.36 14.73 6.14 14.73 5.86Z" fill="currentColor"></path>

<div class="flex flex-wrap">
  <div class="w-full lg:w-1/2">
    <div class="bg-orange-500 flex flex-col justify-center items-center h-full px-4 py-24">
      <div class="p-4 bg-white rounded-3xl">
        <div class="flex flex-wrap">
          <div class="w-full lg:w-1/2 p-4">
            <div class="bg-purple-900 rounded-3xl px-4 pt-14 relative w-28 sm:w-40 xl:w-60 h-28 sm:h-40 xl:h-60">
              <div class="absolute left-3 bottom-3 z-10">
                <div class="bg-white p-1 rounded-md flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <mask id="path-1-inside-1_620_1151" fill="white">
                      <path d="M11.9999 11.1668C11.8933 11.1668 11.7933 11.1334 11.6999 11.0668C11.4799 10.9001 11.4333 10.5868 11.5999 10.3668C12.6466 8.97343 12.6466 7.02677 11.5999 5.63343C11.4333 5.41343 11.4799 5.1001 11.6999 4.93343C11.9199 4.76677 12.2333 4.81343 12.3999 5.03343C13.7066 6.7801 13.7066 9.2201 12.3999 10.9668C12.2999 11.1001 12.1533 11.1668 11.9999 11.1668Z"></path>
                    </mask>
                    <path d="M11.9999 11.1668C11.8933 11.1668 11.7933 11.1334 11.6999 11.0668C11.4799 10.9001 11.4333 10.5868 11.5999 10.3668C12.6466 8.97343 12.6466 7.02677 11.5999 5.63343C11.4333 5.41343 11.4799 5.1001 11.6999 4.93343C11.9199 4.76677 12.2333 4.81343 12.3999 5.03343C13.7066 6.7801 13.7066 9.2201 12.3999 10.9668C12.2999 11.1001 12.1533 11.1668 11.9999 11.1668Z" fill="#FF7100"></path>
                    <path d="M11.6999 11.0668L11.0961 11.8639L11.1073 11.8723L11.1187 11.8805L11.6999 11.0668ZM11.5999 10.3668L12.397 10.9706L12.3995 10.9674L11.5999 10.3668ZM11.5999 5.63343L12.3995 5.03282L12.397 5.02958L11.5999 5.63343ZM12.3999 5.03343L13.2007 4.4344L13.197 4.42958L12.3999 5.03343ZM12.3999 10.9668L13.1999 11.5668L13.2007 11.5658L12.3999 10.9668ZM11.9999 10.1668C12.0528 10.1668 12.108 10.1754 12.1612 10.1931C12.2137 10.2106 12.2538 10.2335 12.2812 10.253L11.1187 11.8805C11.3682 12.0587 11.6689 12.1668 11.9999 12.1668V10.1668ZM12.3038 10.2697C12.514 10.4289 12.5714 10.7404 12.397 10.9706L10.8028 9.76291C10.2951 10.4331 10.4459 11.3713 11.0961 11.8639L12.3038 10.2697ZM12.3995 10.9674C13.7134 9.21824 13.7134 6.78196 12.3995 5.03282L10.8004 6.23405C11.5798 7.27157 11.5798 8.72863 10.8004 9.76616L12.3995 10.9674ZM12.397 5.02958C12.5714 5.25979 12.514 5.57131 12.3038 5.73053L11.0961 4.13634C10.4459 4.62889 10.2951 5.56707 10.8028 6.23729L12.397 5.02958ZM12.3038 5.73053C12.0736 5.90493 11.7621 5.84745 11.6028 5.63729L13.197 4.42958C12.7045 3.77942 11.7663 3.6286 11.0961 4.13634L12.3038 5.73053ZM11.5992 5.63246C12.6402 7.02397 12.6402 8.97624 11.5992 10.3677L13.2007 11.5658C14.773 9.46397 14.773 6.53624 13.2007 4.43441L11.5992 5.63246ZM11.5999 10.3668C11.6975 10.2367 11.8533 10.1668 11.9999 10.1668V12.1668C12.4533 12.1668 12.9024 11.9635 13.1999 11.5668L11.5999 10.3668Z" fill="#FF7100" mask="url(#path-1-inside-1_620_1151)"></path>
                    <path d="M13.2199 12.8334C13.1132 12.8334 13.0132 12.8 12.9199 12.7334C12.6999 12.5667 12.6532 12.2534 12.8199 12.0334C14.5999 9.66002 14.5999 6.34002 12.8199 3.96669C12.6532 3.74669 12.6999 3.43335 12.9199 3.26669C13.1399 3.10002 13.4532 3.14669 13.6199 3.36669C15.6666 6.09335 15.6666 9.90669 13.6199 12.6334C13.5266 12.7667 13.3732 12.8334 13.2199 12.8334Z" fill="#FF7100"></path>
                    <path d="M9.34659 2.5199C8.59992 2.10656 7.64659 2.21323 6.67325 2.8199L4.72659 4.0399C4.59325 4.1199 4.43992 4.16656 4.28659 4.16656H3.66659H3.33325C1.71992 4.16656 0.833252 5.05323 0.833252 6.66656V9.33323C0.833252 10.9466 1.71992 11.8332 3.33325 11.8332H3.66659H4.28659C4.43992 11.8332 4.59325 11.8799 4.72659 11.9599L6.67325 13.1799C7.25992 13.5466 7.83325 13.7266 8.36659 13.7266C8.71325 13.7266 9.04659 13.6466 9.34659 13.4799C10.0866 13.0666 10.4999 12.2066 10.4999 11.0599V4.9399C10.4999 3.79323 10.0866 2.93323 9.34659 2.5199Z" fill="#FF7100"></path>
                  </svg>
                  <p class="text-sm font-semibold">Armand</p>
                </div>
              </div>
              <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 rounded-3xl" src="solstice-assets/images/sign-up/man-picture.png" alt="">
            </div>
          </div>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-10 px-6">FAQ</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="p-6 h-full border-b border-gray-200 cursor-pointer">
          <div class="flex justify-between gap-6">
            <h2 class="text-xl font-bold font-heading text-white">Is there a particular subject I should focus on learning?</h2>
            <a class="text-orange-50 hover:text-orange-100 transition duration-200 w-8 h-8" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
            <p class="mt-2 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tincidunt est. Duis odio eros, mattis id elit vitae, molestie tempus massa. Vestibulum varius risus quis erat egestas, et tincidunt metus vestibulum.</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="p-6 h-full border-b border-gray-200 cursor-pointer">
          <div class="flex justify-between gap-6">
            <h2 class="text-xl font-bold font-heading text-white">What steps do I need to take to join?</h2>
            <a class="text-orange-50 hover:text-orange-100 transition duration-200 w-8 h-8" href="#">

<div class="flex flex-wrap">
  <div class="w-full lg:w-1/2">
    <div class="bg-orange-500 flex flex-col justify-center items-center h-full px-4 py-24">
      <div class="p-4 bg-white rounded-3xl">
        <div class="flex flex-wrap">
          <div class="w-full lg:w-1/2 p-4">
            <div class="bg-purple-900 rounded-3xl px-4 pt-14 relative w-28 sm:w-40 xl:w-60 h-28 sm:h-40 xl:h-60">
              <div class="absolute left-3 bottom-3 z-10">
                <div class="bg-white p-1 rounded-md flex items-center gap-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <mask id="path-1-inside-1_620_1151" fill="white">
                      <path d="M11.9999 11.1668C11.8933 11.1668 11.7933 11.1334 11.6999 11.0668C11.4799 10.9001 11.4333 10.5868 11.5999 10.3668C12.6466 8.97343 12.6466 7.02677 11.5999 5.63343C11.4333 5.41343 11.4799 5.1001 11.6999 4.93343C11.9199 4.76677 12.2333 4.81343 12.3999 5.03343C13.7066 6.7801 13.7066 9.2201 12.3999 10.9668C12.2999 11.1001 12.1533 11.1668 11.9999 11.1668Z"></path>
                    </mask>
                    <path d="M11.9999 11.1668C11.8933 11.1668 11.7933 11.1334 11.6999 11.0668C11.4799 10.9001 11.4333 10.5868 11.5999 10.3668C12.6466 8.97343 12.6466 7.02677 11.5999 5.63343C11.4333 5.41343 11.4799 5.1001 11.6999 4.93343C11.9199 4.76677 12.2333 4.81343 12.3999 5.03343C13.7066 6.7801 13.7066 9.2201 12.3999 10.9668C12.2999 11.1001 12.1533 11.1668 11.9999 11.1668Z" fill="#FF7100"></path>
                    <path d="M11.6999 11.0668L11.0961 11.8639L11.1073 11.8723L11.1187 11.8805L11.6999 11.0668ZM11.5999 10.3668L12.397 10.9706L12.3995 10.9674L11.5999 10.3668ZM11.5999 5.63343L12.3995 5.03282L12.397 5.02958L11.5999 5.63343ZM12.3999 5.03343L13.2007 4.4344L13.197 4.42958L12.3999 5.03343ZM12.3999 10.9668L13.1999 11.5668L13.2007 11.5658L12.3999 10.9668ZM11.9999 10.1668C12.0528 10.1668 12.108 10.1754 12.1612 10.1931C12.2137 10.2106 12.2538 10.2335 12.2812 10.253L11.1187 11.8805C11.3682 12.0587 11.6689 12.1668 11.9999 12.1668V10.1668ZM12.3038 10.2697C12.514 10.4289 12.5714 10.7404 12.397 10.9706L10.8028 9.76291C10.2951 10.4331 10.4459 11.3713 11.0961 11.8639L12.3038 10.2697ZM12.3995 10.9674C13.7134 9.21824 13.7134 6.78196 12.3995 5.03282L10.8004 6.23405C11.5798 7.27157 11.5798 8.72863 10.8004 9.76616L12.3995 10.9674ZM12.397 5.02958C12.5714 5.25979 12.514 5.57131 12.3038 5.73053L11.0961 4.13634C10.4459 4.62889 10.2951 5.56707 10.8028 6.23729L12.397 5.02958ZM12.3038 5.73053C12.0736 5.90493 11.7621 5.84745 11.6028 5.63729L13.197 4.42958C12.7045 3.77942 11.7663 3.6286 11.0961 4.13634L12.3038 5.73053ZM11.5992 5.63246C12.6402 7.02397 12.6402 8.97624 11.5992 10.3677L13.2007 11.5658C14.773 9.46397 14.773 6.53624 13.2007 4.43441L11.5992 5.63246ZM11.5999 10.3668C11.6975 10.2367 11.8533 10.1668 11.9999 10.1668V12.1668C12.4533 12.1668 12.9024 11.9635 13.1999 11.5668L11.5999 10.3668Z" fill="#FF7100" mask="url(#path-1-inside-1_620_1151)"></path>
                    <path d="M13.2199 12.8334C13.1132 12.8334 13.0132 12.8 12.9199 12.7334C12.6999 12.5667 12.6532 12.2534 12.8199 12.0334C14.5999 9.66002 14.5999 6.34002 12.8199 3.96669C12.6532 3.74669 12.6999 3.43335 12.9199 3.26669C13.1399 3.10002 13.4532 3.14669 13.6199 3.36669C15.6666 6.09335 15.6666 9.90669 13.6199 12.6334C13.5266 12.7667 13.3732 12.8334 13.2199 12.8334Z" fill="#FF7100"></path>
                    <path d="M9.34659 2.5199C8.59992 2.10656 7.64659 2.21323 6.67325 2.8199L4.72659 4.0399C4.59325 4.1199 4.43992 4.16656 4.28659 4.16656H3.66659H3.33325C1.71992 4.16656 0.833252 5.05323 0.833252 6.66656V9.33323C0.833252 10.9466 1.71992 11.8332 3.33325 11.8332H3.66659H4.28659C4.43992 11.8332 4.59325 11.8799 4.72659 11.9599L6.67325 13.1799C7.25992 13.5466 7.83325 13.7266 8.36659 13.7266C8.71325 13.7266 9.04659 13.6466 9.34659 13.4799C10.0866 13.0666 10.4999 12.2066 10.4999 11.0599V4.9399C10.4999 3.79323 10.0866 2.93323 9.34659 2.5199Z" fill="#FF7100"></path>
                  </svg>
                  <p class="text-sm font-semibold">Armand</p>
                </div>
              </div>
              <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 rounded-3xl" src="solstice-assets/images/sign-up/man-picture.png" alt="">
            </div>
          </div>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <p class="uppercase text-orange-200 text-center text-sm font-bold font-heading mb-4">EVENTS</p>
    <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-4 max-w-lg text-center mx-auto">Engage in our weekly online events</h1>
    <p class="text-orange-50 text-lg text-center mb-16">Join upcoming &amp; past events. Experience collaborative learning firsthand.</p>
    <div class="border border-orange-400 bg-white rounded-3xl pt-6 px-6 mb-12">
      <div class="flex items-center justify-between flex-wrap gap-4 mb-4">
        <div class="flex items-center gap-2 flex-wrap">
          <p class="font-bold font-heading">August</p>
          <p class="text-gray-500 font-medium">2023</p>
          <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M13 5.5L8 10.5L3 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
        <div class="flex flex-wrap gap-2">
          <a class="py-2 px-4 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Today</a>
          <a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M13.125 16.25L6.875 10L13.125 3.75" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <a class="p-2 rounded-full border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">

<section class="overflow-hidden">
  <div class="bg-orange-200">
    <div class="container px-4 mx-auto">
      <div class="py-20 flex items-center justify-between gap-4 flex-wrap">
        <h1 class="text-4xl lg:text-6xl font-bold font-heading">The Blog</h1>
        <p class="text-gray-700 text-lg max-w-xl">Discover the latest news, tips and user stories insights.Thoughts, stories and ideas from the Solstice team</p>
      </div>
      <a class="border border-orange-300 rounded-3xl flex flex-wrap mb-20 py-4 hover:bg-white hover:border-orange-500 transition duration-200" href="#">
        <div class="w-full lg:w-1/2 px-8">
          <div class="flex flex-col justify-center items-start h-full py-8">
            <h2 class="text-2xl lg:text-3xl font-bold font-heading mb-4 max-w-sm">How to Learn Anything Faster and Master It</h2>
            <p class="text-gray-700 mb-10">Read on to find out what the technique is, what it’s used for, and how you can apply it to your studies here are some tips on ...</p>
            <div class="flex flex-wrap items-center gap-3">
              <p class="text-gray-700 text-sm">17 Jul 2023</p>
              <svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4" fill="none"><circle cx="2" cy="2" r="2" fill="#A3A3A3"></circle></svg>
              <div class="py-1 px-3 rounded-md bg-orange-50 text-sm font-medium text-orange-500 border border-orange-100">Productivity</div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="relative" style="height: 396px;">
            <div class="absolute top-0 left-0 z-10">
              <svg class="rounded-tl-3xl" xmlns="http://www.w3.org/2000/svg" width="155" height="154" viewBox="0 0 155 154" fill="none">
                <path d="M-34 79.9324V153.361C-34 153.714 -33.7141 154 -33.3615 154H17.62C17.9724 154 18.2585 153.714 18.2585 153.361V94.299C18.2585 55.5087 56.5087 17.2585 95.299 17.2585H154.361C154.714 17.2585 155 16.9724 155 16.62V-34.3615C155 -34.7139 154.714 -35 154.361 -35H80.9324C17.4572 -35 -34 16.4572 -34 79.9324Z" fill="#FF7100"></path>