UI Components – Solstice Library

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4 relative">
    <div class="flex justify-center">
      <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>
    </div>
    <h1 class="text-center text-4xl lg:text-5xl text-white font-bold font-heading mb-20 max-w-sm lg:max-w-lg mx-auto">Join 14K people embrace fun learning</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-orange-50 rounded-3xl flex flex-wrap items-start p-4 h-full">
          <div class="bg-orange-200 rounded-xl px-8 pt-5 mb-4">
            <img src="solstice-assets/images/newsletter/man-picture.png" alt="">
          </div>
          <div class="bg-orange-300 rounded-xl px-8 pt-5 mt-auto ml-auto">
            <img src="solstice-assets/images/newsletter/woman-picture.png" alt="">
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">

<section class="pt-24 bg-white">
  <div class="container mx-auto px-4">
    <div class="bg-orange-500 rounded-t-3xl pt-10 pb-36 px-10">
      <div class="flex justify-between flex-wrap gap-8">
        <div>
          <a href="#">
            <img class="mb-6" src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
          </a>
          <p class="text-white text-sm">© 2023 Solstice. All rights reserved.</p>
        </div>
        <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>

<section class="overflow-hidden bg-orange-500">
  <div class="container px-4 mx-auto pt-16 pb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="max-w-xl mx-auto">
          <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading mb-4 max-w-xs lg:max-w-md">How can we help you today?</h1>
          <p class="text-orange-50 mb-10">Submit your info and we’ll get back to you as soon as possible.</p>
          <div class="mb-10 flex items-center gap-1">
            <div class="bg-orange-200 rounded-3xl h-px w-3"></div>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="#FFA632"></circle></svg>
            <div class="bg-orange-200 rounded-3xl h-px w-3"></div>
          </div>
          <div class="flex items-center flex-wrap gap-3 mb-4">
            <div class="bg-orange-50 rounded-xl p-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M18.3332 17.7085H1.6665C1.32484 17.7085 1.0415 17.9918 1.0415 18.3335C1.0415 18.6752 1.32484 18.9585 1.6665 18.9585H18.3332C18.6748 18.9585 18.9582 18.6752 18.9582 18.3335C18.9582 17.9918 18.6748 17.7085 18.3332 17.7085Z" fill="#530031"></path>
                <path d="M14.1667 1.6665H5.83333C3.33333 1.6665 2.5 3.15817 2.5 4.99984V18.3332H17.5V4.99984C17.5 3.15817 16.6667 1.6665 14.1667 1.6665ZM8.33333 14.3748H5.83333C5.49167 14.3748 5.20833 14.0915 5.20833 13.7498C5.20833 13.4082 5.49167 13.1248 5.83333 13.1248H8.33333C8.675 13.1248 8.95833 13.4082 8.95833 13.7498C8.95833 14.0915 8.675 14.3748 8.33333 14.3748ZM8.33333 10.6248H5.83333C5.49167 10.6248 5.20833 10.3415 5.20833 9.99984C5.20833 9.65817 5.49167 9.37484 5.83333 9.37484H8.33333C8.675 9.37484 8.95833 9.65817 8.95833 9.99984C8.95833 10.3415 8.675 10.6248 8.33333 10.6248ZM8.33333 6.87484H5.83333C5.49167 6.87484 5.20833 6.5915 5.20833 6.24984C5.20833 5.90817 5.49167 5.62484 5.83333 5.62484H8.33333C8.675 5.62484 8.95833 5.90817 8.95833 6.24984C8.95833 6.5915 8.675 6.87484 8.33333 6.87484ZM14.1667 14.3748H11.6667C11.325 14.3748 11.0417 14.0915 11.0417 13.7498C11.0417 13.4082 11.325 13.1248 11.6667 13.1248H14.1667C14.5083 13.1248 14.7917 13.4082 14.7917 13.7498C14.7917 14.0915 14.5083 14.3748 14.1667 14.3748ZM14.1667 10.6248H11.6667C11.325 10.6248 11.0417 10.3415 11.0417 9.99984C11.0417 9.65817 11.325 9.37484 11.6667 9.37484H14.1667C14.5083 9.37484 14.7917 9.65817 14.7917 9.99984C14.7917 10.3415 14.5083 10.6248 14.1667 10.6248ZM14.1667 6.87484H11.6667C11.325 6.87484 11.0417 6.5915 11.0417 6.24984C11.0417 5.90817 11.325 5.62484 11.6667 5.62484H14.1667C14.5083 5.62484 14.7917 5.90817 14.7917 6.24984C14.7917 6.5915 14.5083 6.87484 14.1667 6.87484Z" fill="#530031"></path>
              </svg>
            </div>
            <h2 class="text-white text-xl font-bold font-heading">Company HQ</h2>
          </div>
          <p class="text-orange-50 mb-10">4140 Parker Rd. Allentown,
New Mexico 31134</p>

<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/2 p-4">
        <p class="text-white text-lg font-bold font-heading">Backed by leading education companies</p>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-wrap items-center">
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-light1.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-light2.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-light3.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-light4.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">
            <img src="solstice-assets/images/logos/placeholder-logo-light5.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">

<section class="py-24 bg-orange-500">
  <div class="bg-orange-400 border-t border-b border-orange-300">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 p-4">
          <div class="lg:pr-12 pb-6 lg:pb-0 border-b lg:border-b-0 lg:border-r border-orange-300">
            <h2 class="text-white text-center text-6xl font-bold font-heading mb-2">94K</h2>
            <p class="text-gray-50 text-center font-medium">ACTIVE LEARNERS</p>
          </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
          <div class="lg:pr-12 pb-6 lg:pb-0 border-b lg:border-b-0 lg:border-r border-orange-300">
            <h2 class="text-white text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-gray-50 text-center font-medium">REGISTERED USERS</p>
          </div>
        </div>
        <div class="w-full lg:w-1/3 p-4">
          <div class="lg:pl-12">
            <h2 class="text-white text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-gray-50 text-center font-medium">REGISTERED USERS</p>
          </div>
        </div>
      </div>
    </div>

<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 p-6 flex items-center justify-between flex-wrap gap-4">
      <div class="flex items-center gap-6 flex-wrap">
        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
          <path d="M14.5002 13.6667C15.1946 13.6667 15.7852 13.4233 16.2718 12.9367C16.7585 12.45 17.0013 11.86 17.0002 11.1667C17.0002 10.4722 16.7568 9.88166 16.2702 9.39499C15.7835 8.90833 15.1935 8.66555 14.5002 8.66666C13.8057 8.66666 13.2152 8.91 12.7285 9.39666C12.2418 9.88333 11.9991 10.4733 12.0002 11.1667C12.0002 11.8611 12.2435 12.4517 12.7302 12.9383C13.2168 13.425 13.8068 13.6678 14.5002 13.6667ZM11.1668 22C11.8613 22 12.4518 21.7567 12.9385 21.27C13.4252 20.7833 13.6679 20.1933 13.6668 19.5C13.6668 18.8056 13.4235 18.215 12.9368 17.7283C12.4502 17.2417 11.8602 16.9989 11.1668 17C10.4724 17 9.88183 17.2433 9.39516 17.73C8.9085 18.2167 8.66572 18.8067 8.66683 19.5C8.66683 20.1944 8.91016 20.785 9.39683 21.2717C9.8835 21.7583 10.4735 22.0011 11.1668 22ZM22.0002 23.6667C22.4724 23.6667 22.8685 23.5067 23.1885 23.1867C23.5085 22.8667 23.6679 22.4711 23.6668 22C23.6668 21.5278 23.5068 21.1317 23.1868 20.8117C22.8668 20.4917 22.4713 20.3322 22.0002 20.3333C21.5279 20.3333 21.1318 20.4933 20.8118 20.8133C20.4918 21.1333 20.3324 21.5289 20.3335 22C20.3335 22.4722 20.4935 22.8683 20.8135 23.1883C21.1335 23.5083 21.5291 23.6678 22.0002 23.6667ZM17.0002 33.6667C14.6946 33.6667 12.5279 33.2289 10.5002 32.3533C8.47239 31.4778 6.7085 30.2906 5.2085 28.7917C3.7085 27.2917 2.52127 25.5278 1.64683 23.5C0.772385 21.4722 0.334607 19.3056 0.333496 17C0.333496 14.6667 0.833496 12.3889 1.8335 10.1667C2.8335 7.94444 4.22961 6.02777 6.02183 4.41666C7.81183 2.80555 9.93572 1.62499 12.3935 0.874994C14.8513 0.124994 17.5391 0.0555499 20.4568 0.666661C20.2068 1.91666 20.2902 3.09055 20.7068 4.18833C21.1235 5.28611 21.7485 6.20944 22.5818 6.95833C23.4152 7.70833 24.4013 8.22222 25.5402 8.5C26.6791 8.77777 27.8735 8.70833 29.1235 8.29166C28.2624 10.2083 28.4152 11.8472 29.5818 13.2083C30.7485 14.5694 32.0824 15.2778 33.5835 15.3333C33.8335 17.8056 33.5696 20.1528 32.7918 22.375C32.0141 24.5972 30.8679 26.5417 29.3535 28.2083C27.8402 29.875 26.0207 31.2017 23.8952 32.1883C21.7696 33.175 19.4713 33.6678 17.0002 33.6667Z" fill="#FF7100"></path>
        </svg>
        <p class="max-w-2xl">By clicking “Accept Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.</p>
      </div>
      <a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center py-4 px-6 rounded-full h-14 inline-flex items-center justify-center 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 Cookies</a>
    </div>
  </div>
</div>

<section class="overflow-hidden pb-24">
  <div class="relative w-full bg-orange-50 py-24">
    <div class="absolute left-1/2 top-0 transform -translate-x-1/2">
      <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="container mx-auto px-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>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full lg:w-1/2 p-4">
            <div class="py-7">
              <div class="flex items-center gap-3 flex-wrap mb-4">

<section class="overflow-hidden bg-orange-50">
  <div class="container px-4 mx-auto pt-16 pb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex flex-col justify-between h-full max-w-xl mx-auto">
          <div>
            <div class="px-2 py-1 rounded-md border border-orange-100 bg-orange-50 inline-flex items-center gap-2 mb-6">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M8.5 1.215H3.5C2 1.215 1 2.215 1 3.715V6.715C1 8.215 2 9.215 3.5 9.215H5.5L7.725 10.695C8.055 10.915 8.5 10.68 8.5 10.28V9.215C10 9.215 11 8.215 11 6.715V3.715C11 2.215 10 1.215 8.5 1.215ZM7.75 5.625H4.25C4.045 5.625 3.875 5.455 3.875 5.25C3.875 5.045 4.045 4.875 4.25 4.875H7.75C7.955 4.875 8.125 5.045 8.125 5.25C8.125 5.455 7.955 5.625 7.75 5.625Z" fill="#FF7100"></path>
              </svg>
              <span class="text-orange-500 text-sm font-medium">Contact Support</span>
            </div>
            <h1 class="text-3xl lg:text-5xl font-bold font-heading mb-4 max-w-xs lg:max-w-md">How can we help you today?</h1>
            <p class="text-gray-600-200 mb-6">Submit your info and we’ll get back to you as soon as possible.</p>
          </div>
          <div class="bg-purple-900 rounded-3xl p-8">
            <h2 class="text-white text-2xl font-semibold mb-6 max-w-xs">Click here to report an incident</h2>
            <a class="w-full sm:w-auto h-12 inline-flex items-center justify-center gap-2 py-3 px-5 rounded-full bg-white border border-purple-700 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="M10.9261 14.2967L10.9457 14.2791L10.9633 14.2596C11.0647 14.1469 11.1612 14.0141 11.2308 13.8361C11.2923 13.6864 11.3333 13.515 11.3333 13.3334C11.3333 13.1492 11.2911 12.9756 11.2282 12.8244C11.164 12.6705 11.0747 12.5311 10.9633 12.4073L10.9457 12.3877L10.9261 12.3701C10.8023 12.2587 10.6629 12.1694 10.5089 12.1052C10.1859 11.9706 9.81406 11.9706 9.49099 12.1052C9.33705 12.1694 9.19764 12.2587 9.07381 12.3701L9.05425 12.3877L9.03665 12.4073C8.9252 12.5311 8.8359 12.6705 8.77175 12.8244C8.70878 12.9756 8.66663 13.1492 8.66663 13.3334C8.66663 13.5151 8.70762 13.6864 8.76915 13.8361C8.83871 14.0141 8.93524 14.1469 9.03665 14.2596L9.05425 14.2791L9.07381 14.2967C9.19763 14.4082 9.33704 14.4975 9.49099 14.5616C9.64213 14.6246 9.81578 14.6667 9.99996 14.6667C10.1841 14.6667 10.3578 14.6246 10.5089 14.5616C10.6629 14.4975 10.8023 14.4082 10.9261 14.2967ZM2.16663 10.0001C2.16663 5.68456 5.68443 2.16675 9.99996 2.16675C14.3155 2.16675 17.8333 5.68456 17.8333 10.0001C17.8333 14.3156 14.3155 17.8334 9.99996 17.8334C5.68443 17.8334 2.16663 14.3156 2.16663 10.0001ZM9.99996 5.54175C9.38215 5.54175 8.87496 6.04894 8.87496 6.66675V10.8334C8.87496 11.4512 9.38215 11.9584 9.99996 11.9584C10.6178 11.9584 11.125 11.4512 11.125 10.8334V6.66675C11.125 6.04894 10.6178 5.54175 9.99996 5.54175Z" fill="#530031" stroke="#530031"></path>
              </svg>
              <span class="text-purple-900 text-sm font-semibold">Report</span>
            </a>
          </div>

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="relative w-full max-w-xl mx-auto" style="height:600px;">
          <div class="hidden md:block lg:hidden xl:block absolute inset-0 rounded-full bg-orange-100"></div>
          <div class="hidden sm:block absolute rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-orange-200" style="width:450px;height:450px;"></div>
          <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full sm:w-96 h-96">
            <div class="bg-white rounded-2xl pl-4 h-full flex flex-col">
              <div class="py-4">
                <div class="relative">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <rect width="32" height="32" rx="8" fill="#FF7100"></rect>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
                  </svg>
                  <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <div class="flex items-center gap-2">
                      <h2 class="font-medium whitespace-nowrap">Study Session</h2>
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 11.5667C8.60015 11.5667 9.08666 11.0802 9.08666 10.48C9.08666 9.87986 8.60015 9.39334 8 9.39334C7.39985 9.39334 6.91333 9.87986 6.91333 10.48C6.91333 11.0802 7.39985 11.5667 8 11.5667Z" fill="#B8B8B8"></path>
                        <path d="M11.2534 6.80001H11.7289L12.1247 6.84948C12.985 6.95702 13.4426 7.2132 13.7161 7.60692C14.0112 8.03176 14.1667 8.71789 14.1667 9.86001V11.1C14.1667 12.4491 13.9529 13.1568 13.5548 13.5548C13.1568 13.9528 12.4491 14.1667 11.1 14.1667H4.90004C3.55097 14.1667 2.8433 13.9528 2.44526 13.5548C2.04722 13.1568 1.83337 12.4491 1.83337 11.1V9.86001C1.83337 8.71789 1.98893 8.03176 2.28403 7.60692C2.55751 7.2132 3.01507 6.95702 3.87539 6.84948L4.31337 6.79473V6.79334H4.40004V6.80001H4.90004H11.1H11.1004H11.1007H11.101H11.1013H11.1016H11.1019H11.1022H11.1025H11.1028H11.1032H11.1035H11.1038H11.1041H11.1044H11.1047H11.105H11.1053H11.1056H11.106H11.1063H11.1066H11.1069H11.1072H11.1075H11.1078H11.1081H11.1084H11.1087H11.109H11.1093H11.1097H11.11H11.1103H11.1106H11.1109H11.1112H11.1115H11.1118H11.1121H11.1124H11.1127H11.113H11.1133H11.1137H11.114H11.1143H11.1146H11.1149H11.1152H11.1155H11.1158H11.1161H11.1164H11.1167H11.117H11.1173H11.1176H11.1179H11.1182H11.1185H11.1188H11.1191H11.1194H11.1198H11.1201H11.1204H11.1207H11.121H11.1213H11.1216H11.1219H11.1222H11.1225H11.1228H11.1231H11.1234H11.1237H11.124H11.1243H11.1246H11.1249H11.1252H11.1255H11.1258H11.1261H11.1264H11.1267H11.127H11.1273H11.1276H11.1279H11.1282H11.1285H11.1288H11.1291H11.1294H11.1297H11.13H11.1303H11.1306H11.1309H11.1312H11.1315H11.1318H11.1321H11.1324H11.1327H11.133H11.1333H11.1336H11.1339H11.1342H11.1345H11.1348H11.1351H11.1354H11.1357H11.136H11.1363H11.1366H11.1369H11.1372H11.1375H11.1378H11.1381H11.1384H11.1387H11.139H11.1393H11.1396H11.1399H11.1402H11.1405H11.1408H11.1411H11.1414H11.1417H11.142H11.1423H11.1426H11.1429H11.1432H11.1435H11.1438H11.1441H11.1443H11.1446H11.1449H11.1452H11.1455H11.1458H11.1461H11.1464H11.1467H11.147H11.1473H11.1476H11.1479H11.1482H11.1485H11.1488H11.1491H11.1494H11.1497H11.15H11.1503H11.1506H11.1509H11.1512H11.1514H11.1517H11.152H11.1523H11.1526H11.1529H11.1532H11.1535H11.1538H11.1541H11.1544H11.1547H11.155H11.1553H11.1556H11.1559H11.1562H11.1565H11.1568H11.157H11.1573H11.1576H11.1579H11.1582H11.1585H11.1588H11.1591H11.1594H11.1597H11.16H11.1603H11.1606H11.1609H11.1612H11.1615H11.1618H11.162H11.1623H11.1626H11.1629H11.1632H11.1635H11.1638H11.1641H11.1644H11.1647H11.165H11.1653H11.1656H11.1659H11.1662H11.1664H11.1667H11.167H11.1673H11.1676H11.1679H11.1682H11.1685H11.1688H11.1691H11.1694H11.1697H11.17H11.1703H11.1706H11.1708H11.1711H11.1714H11.1717H11.172H11.1723H11.1726H11.1729H11.1732H11.1735H11.1738H11.1741H11.1744H11.1747H11.1749H11.1752H11.1755H11.1758H11.1761H11.1764H11.1767H11.177H11.1773H11.1776H11.1779H11.1782H11.1785H11.1788H11.1791H11.1793H11.1796H11.1799H11.1802H11.1805H11.1808H11.1811H11.1814H11.1817H11.182H11.1823H11.1826H11.1829H11.1832H11.1834H11.1837H11.184H11.1843H11.1846H11.1849H11.1852H11.1855H11.1858H11.1861H11.1864H11.1867H11.187H11.1873H11.1876H11.1878H11.1881H11.1884H11.1887H11.189H11.1893H11.1896H11.1899H11.1902H11.1905H11.1908H11.1911H11.1914H11.1917H11.192H11.1922H11.1925H11.1928H11.1931H11.1934H11.1937H11.194H11.1943H11.1946H11.1949H11.1952H11.1955H11.1958H11.1961H11.1964H11.1967H11.197H11.1972H11.1975H11.1978H11.1981H11.1984H11.1987H11.199H11.1993H11.1996H11.1999H11.2002H11.2005H11.2008H11.2011H11.2014H11.2017H11.202H11.2023H11.2026H11.2029H11.2031H11.2034H11.2037H11.204H11.2043H11.2046H11.2049H11.2052H11.2055H11.2058H11.2061H11.2064H11.2067H11.207H11.2073H11.2076H11.2079H11.2082H11.2085H11.2088H11.2091H11.2094H11.2097H11.21H11.2103H11.2106H11.2108H11.2111H11.2114H11.2117H11.212H11.2123H11.2126H11.2129H11.2132H11.2135H11.2138H11.2141H11.2144H11.2147H11.215H11.2153H11.2156H11.2159H11.2162H11.2165H11.2168H11.2171H11.2174H11.2177H11.218H11.2183H11.2186H11.2189H11.2192H11.2195H11.2198H11.2201H11.2204H11.2207H11.221H11.2213H11.2216H11.2219H11.2222H11.2225H11.2228H11.2231H11.2234H11.2237H11.224H11.2243H11.2246H11.2249H11.2252H11.2255H11.2258H11.2261H11.2264H11.2267H11.227H11.2273H11.2276H11.2279H11.2282H11.2285H11.2288H11.2291H11.2294H11.2297H11.23H11.2303H11.2306H11.2309H11.2312H11.2315H11.2318H11.2321H11.2324H11.2327H11.2331H11.2334H11.2337H11.234H11.2343H11.2346H11.2349H11.2352H11.2355H11.2358H11.2361H11.2364H11.2367H11.237H11.2373H11.2376H11.2379H11.2382H11.2385H11.2388H11.2392H11.2395H11.2398H11.2401H11.2404H11.2407H11.241H11.2413H11.2416H11.2419H11.2422H11.2425H11.2428H11.2431H11.2434H11.2438H11.2441H11.2444H11.2447H11.245H11.2453H11.2456H11.2459H11.2462H11.2465H11.2468H11.2472H11.2475H11.2478H11.2481H11.2484H11.2487H11.249H11.2493H11.2496H11.2499H11.2503H11.2506H11.2509H11.2512H11.2515H11.2518H11.2521H11.2524H11.2527H11.2531H11.2534ZM5.48671 10.48C5.48671 11.8617 6.60949 12.9933 8.00004 12.9933C9.38952 12.9933 10.5134 11.8695 10.5134 10.48C10.5134 9.0972 9.38285 7.96668 8.00004 7.96668C6.61831 7.96668 5.48671 9.08946 5.48671 10.48Z" fill="#B8B8B8" stroke="#B8B8B8"></path>
                      </svg>
                    </div>

<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-10 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="flex flex-wrap justify-center gap-4 mb-16">
      <div class="flex flex-wrap items-center gap-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>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="border border-gray-200 rounded-3xl px-8 lg:px-10 pb-14 pt-10 h-full">
          <h2 class="text-3xl font-bold font-heading mb-6">Free</h2>
          <div class="flex items-center gap-4 flex-wrap mb-6">
            <h2 class="text-6xl font-bold font-heading">$0</h2>
            <p class="text-xl font-medium">per month</p>

<section class="py-24 relative overflow-hidden bg-orange-50" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl lg:text-5xl text-center font-bold font-heading max-w-md lg:max-w-xl mx-auto mb-24">For those seeking an enjoyable way to learn</h1>
    <div class="h-96 mb-32 lg:mb-16">
      <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -mx-4">
        <div x-ref="slide1" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-orange-100 bg-white shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar3.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Ethan Maynard,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!.”</p>
          </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-orange-100 bg-white shadow rounded-3xl p-8">

<section class="bg-orange-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative mb-32">
      <div class="hidden lg:block absolute top-0 left-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M0.5 498.311V304.054C0.5 136.406 136.406 0.5 304.054 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919V136.561C499.5 137.217 498.967 137.75 498.311 137.75H342.061C290.59 137.75 239.516 163.123 201.319 201.319C163.123 239.516 137.75 290.59 137.75 342.061V498.311C137.75 498.967 137.217 499.5 136.561 499.5H1.68919C1.03249 499.5 0.5 498.967 0.5 498.311Z" fill="url(#paint0_linear_243_18912)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_243_18912" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="hidden lg:block absolute top-0 right-12">
        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500" fill="none">
          <path d="M499.5 1.68919V195.946C499.5 363.594 363.594 499.5 195.946 499.5H1.68919C1.03289 499.5 0.5 498.967 0.5 498.311V363.439C0.5 362.783 1.03289 362.25 1.68919 362.25H157.939C209.41 362.25 260.484 336.877 298.681 298.681C336.877 260.484 362.25 209.41 362.25 157.939V1.68919C362.25 1.03289 362.783 0.5 363.439 0.5H498.311C498.967 0.5 499.5 1.03289 499.5 1.68919Z" fill="url(#paint0_linear_243_18911)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_243_18911" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE0A5"><stop offset="1" stop-color="#FFE0A5" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="relative z-10">
        <h1 class="text-center text-5xl lg:text-7xl font-bold font-heading max-w-lg lg:max-w-3xl mx-auto pt-14 pb-32">On a mission to make learning fun</h1>
        <div class="border border-orange-400 bg-orange-500 rounded-3xl flex flex-wrap">
          <div class="w-full md:w-1/2 lg:w-1/4 py-8">
            <div class="md:border-r border-orange-300 px-12">
              <p class="text-orange-50 mb-2 text-center">Founded</p>
              <h2 class="text-4xl xl:text-5xl font-semibold text-white text-center">2023</h2>
            </div>
          </div>

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <div class="inline-block py-1 px-2 rounded-md bg-orange-50 border border-orange-200 text-orange-500 text-sm font-medium mb-4">Events</div>
    <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-18 max-w-lg">Engage in our weekly online events</h1>
    <div class="border border-orange-100 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="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">

<section class="bg-black">
  <div class="pt-24 pb-12 border-b border-gray-800">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between flex-wrap gap-8">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <ul class="flex items-center gap-6 flex-wrap">
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Platform</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">How it works</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">Resources</a></li>
          <li class="text-white hover:text-opacity-70 transition duration-200"><a href="#">FAQs</a></li>
        </ul>
        <div class="flex items-center gap-6 flex-wrap">
          <a class="text-gray-400 hover:text-gray-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="currentColor"></path>
            </svg>
          </a>
          <a class="text-gray-400 hover:text-gray-200 transition duration-200" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"></path>
            </svg>

<section class="overflow-hidden">
  <div class="bg-orange-50 pt-20 pb-80 px-10 relative">
    <div class="absolute left-1/2 top-0 transform -translate-x-1/2 flex gap-6">
      <div class="mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 242, 214, 0.00) 0%, #FFE0A5 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 242, 214, 0.00) 0%, #FFE0A5 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 242, 214, 0.00) 0%, #FFE0A5 100%);"></div>
      <div class="mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 242, 214, 0.00) 0%, #FFE0A5 100%);"></div>
    </div>
    <div class="relative z-10">
      <p class="uppercase text-center font-bold font-heading text-sm text-orange-500 mb-6">Blog</p>
      <h1 class="text-center font-bold font-heading text-4xl lg:text-6xl max-w-md lg:max-w-4xl mx-auto pb-32 lg:pb-0">Discover the latest news, stories &amp; insights</h1>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <a class="bg-white border border-orange-100 hover:border-orange-500 transition duration-200 shadow rounded-3xl transform -translate-y-1/2 flex flex-wrap" href="#">
      <div class="w-full lg:w-1/2 px-8 lg:px-16 py-8">
        <div class="flex flex-col justify-center items-start h-full">
          <div class="py-1 px-3 rounded-md bg-orange-50 border border-orange-100 text-sm font-medium text-orange-500 inline-block mb-4">Productivity</div>
          <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>
          <div class="flex flex-wrap items-center gap-3">
            <p class="text-gray-500 text-sm">20 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="#B8B8B8"></circle></svg>
            <p class="text-gray-500 text-sm">4 min read</p>
          </div>

<section class="py-24 bg-orange-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <h1 class="uppercase text-4xl lg:text-6xl font-bold font-heading text-center mb-4">FAQ</h1>
    <p class="text-center text-lg text-gray-600 mb-16">Here you will find the answers to the frequently asked questions.</p>
    <div class="flex justify-center flex-wrap gap-6 mb-10">
      <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'bg-purple-700 border border-purple-500 text-white hover:bg-purple-800 focus:ring focus:ring-purple-800': tab == $refs.tab1.textContent, 'bg-white border border-orange-100 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab1.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-purple-700 border border-purple-500 shadow font-bold font-heading text-white hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200" href="#">General</a>
      <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'bg-purple-700 border border-purple-500 text-white hover:bg-purple-800 focus:ring focus:ring-purple-800': tab == $refs.tab2.textContent, 'bg-white border border-orange-100 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab2.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-orange-100 shadow font-bold font-heading text-black hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Community</a>
      <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'bg-purple-700 border border-purple-500 text-white hover:bg-purple-800 focus:ring focus:ring-purple-800': tab == $refs.tab3.textContent, 'bg-white border border-orange-100 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab3.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-orange-100 shadow font-bold font-heading text-black hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Pricing</a>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-orange-200 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">
        <h2 class="text-lg font-semibold">What is Solstice? What is it for?</h2>
        <a class="text-purple-900 hover:text-purple-800 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">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 x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-orange-200 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">

<section class="bg-orange-50 pb-32">
  <div class="border-b border-orange-100 pb-16 pt-24">
    <div class="container mx-auto px-4">
      <div class="rounded-md bg-orange-100 border border-orange-100 px-2 py-1 uppercase text-orange-500 text-sm font-medium inline-block mb-4">CAREERS</div>
      <h1 class="text-3xl lg:text-5xl font-bold font-heading">Careers at Solstice</h1>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold font-heading mb-4 mt-16">What we’re building</h2>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <p class="text-gray-600">People are shifting to a new form of collaboration in distributed teams and are wasting too much effort connecting the dots between different work streams to understand the bigger picture. Solstice is building a work hub that gives people a radically simpler way to coordinate work across teams and get context on what’s happening.</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <p class="text-gray-600">By bringing structure, access, and efficiency to teamwork. Backed by Atomico, Salesforce Ventures, and Mosaic, we’re on a mission to unlock the collective potential of teams and would love for you to join us!</p>
      </div>
    </div>
    <div class="flex flex-wrap mb-4 -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <img class="w-full object-cover rounded-3xl" src="solstice-assets/images/careers/picture1-large.png" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <img class="w-full object-cover rounded-3xl" style="height:550px;" src="solstice-assets/images/careers/picture1.png" alt="">
      </div>

<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-orange-50 bg-white rounded-5xl border-2 border-orange-200 shadow-sm p-6 flex items-center justify-between flex-wrap gap-4">
      <p class="max-w-md">By clicking “Accept All Cookies”, you agree to the storing of cookies on your device.</p>
      <div class="flex gap-4 flex-wrap"><a class="w-full sm:w-auto text-center py-4 px-6 rounded-full h-14 inline-flex items-center justify-center border border-gray-200 shadow font-bold font-heading bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Cookie Settings</a><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center py-4 px-6 rounded-full h-14 inline-flex items-center justify-center 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 Cookies</a></div>
    </div>
  </div>
</div>

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-24">Discover our features</h1>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature1-light.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature2-light.png" alt="">
      </div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4">
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature3-light.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature4-light.png" alt="">
      </div>
      <div class="w-full sm:w-auto p-4">
        <img src="solstice-assets/images/features/feature5-light.png" alt="">
      </div>
    </div>
  </div>
</section>

<div class="flex flex-wrap">
  <div class="w-full lg:w-1/2 p-4">
    <div class="flex flex-col justify-center py-24 max-w-md mx-auto h-full">
      <form action="">
        <h1 class="text-3xl font-bold font-heading mb-4">Login</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>New to Solstice?</span>
          <span></span>
          <span class="font-bold font-heading">Create new account</span>
        </a>
        <label class="block text-sm font-medium mb-2" for="textInput1">Email</label>
        <input class="w-full rounded-full p-4 outline-none border border-gray-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200 mb-4" id="textInput1" type="text" placeholder="john@email.com">
        <label class="block text-sm font-medium mb-2" for="textInput2">Password</label>
        <div class="flex items-center gap-1 w-full rounded-full p-4 border border-gray-100 shadow mb-3">
          <input class="outline-none flex-1 placeholder-gray-500 " id="textInput2" type="password" placeholder="Enter password">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M21.25 9.15C18.94 5.52 15.56 3.43 12 3.43C10.22 3.43 8.49 3.95 6.91 4.92C5.33 5.9 3.91 7.33 2.75 9.15C1.75 10.72 1.75 13.27 2.75 14.84C5.06 18.48 8.44 20.56 12 20.56C13.78 20.56 15.51 20.04 17.09 19.07C18.67 18.09 20.09 16.66 21.25 14.84C22.25 13.28 22.25 10.72 21.25 9.15ZM12 16.04C9.76 16.04 7.96 14.23 7.96 12C7.96 9.77 9.76 7.96 12 7.96C14.24 7.96 16.04 9.77 16.04 12C16.04 14.23 14.24 16.04 12 16.04Z" fill="#A3A3A3"></path>
            <path d="M12.0004 9.14C10.4304 9.14 9.15039 10.42 9.15039 12C9.15039 13.57 10.4304 14.85 12.0004 14.85C13.5704 14.85 14.8604 13.57 14.8604 12C14.8604 10.43 13.5704 9.14 12.0004 9.14Z" fill="#A3A3A3"></path>
          </svg>
        </div>
        <div class="mb-8 flex justify-end"><a class="inline-block text-orange-500 hover:text-orange-600 transition duration-200 text-sm font-semibold" href="#">Forgot Password?</a></div>
        <button class="h-14 inline-flex items-center justify-center py-4 px-6 text-white font-bold font-heading 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" type="submit">Login</button>
        <button 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" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">