Tailwind CSS Components – Solstice Library

<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-50">
  <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-4xl lg:text-5xl font-bold font-heading mb-6">FAQ</h1>
        <p class="text-xl font-bold font-heading max-w-xs">
          <span>Still have more questions? Visit our</span>
          <span></span>
          <a class="text-orange-500 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-24">
  <div class="container mx-auto px-4">
    <div class="border-t border-b border-orange-100">
      <div class="max-w-2xl mx-auto bg-orange-50 rounded-3xl py-16 px-4">
        <h2 class="text-2xl font-bold font-heading text-center mb-6">Total monthly learners</h2>
        <h1 class="text-orange-500 text-center text-5xl lg:text-7xl font-bold font-heading mb-6">160,320</h1>
        <p class="font-semibold text-center">and we’re just getting started.</p>
      </div>
    </div>
  </div>
</section>

<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="max-w-xl mx-auto">
          <h1 class="text-3xl lg:text-5xl font-bold font-heading mb-4">Get in touch</h1>
          <p class="text-gray-600 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="rounded-3xl border border-purple-700 bg-purple-900 shadow-sm py-8">
            <div class="relative">
              <div class="absolute top-0 left-0 bg-orange-50 w-1 h-8"></div>
              <div class="px-8">
                <h2 class="text-white text-xl font-bold font-heading mb-6">Technical Help desk</h2>
                <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-white border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-300 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
                  <span class="text-purple-900 text-sm font-semibold">Visit FAQ Center</span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M5 10H15.4167M15.4167 10L10.4167 5M15.4167 10L10.4167 15" stroke="#530031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>

<section class="pt-40 pb-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-opacity-20 text-center text-8xl sm:text-9xl lg:text-10xl font-bold font-heading mb-2">404</h1>
    <p class="text-white text-center text-2xl font-bold font-heading mb-4">Sorry, that page could not be found.</p>
    <p class="text-gray-400 text-center mb-10 max-w-xl mx-auto">The page you are looking for was moved, removed, renamed or might have never existed!</p>
    <div class="flex flex-wrap items-center justify-center gap-6"><a class="inline-block text-white text-sm font-semibold hover:text-opacity-70 transition duration-200" href="#">Back to Home</a><a class="inline-block text-white text-sm font-semibold hover:text-opacity-70 transition duration-200" href="#">Support</a></div>
  </div>
</section>

<section class="pt-24 pb-14 bg-black">
  <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-gray-400 hover:text-white transition duration-200" href="#">Features</a></li>
          <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">How it works</a></li>
          <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">Pricing</a></li>
          <li><a class="text-gray-400 hover:text-white 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-gray-400 hover:text-white transition duration-200" href="#">About</a></li>
          <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">Our Mission</a></li>
          <li class="flex items-center flex-wrap gap-2">
            <a class="text-gray-400 hover:text-white transition duration-200" href="#">Careers</a>
            <div class="bg-orange-500 py-1 px-2 rounded-md text-white text-xs font-bold font-heading uppercase">HIRING</div>
          </li>
          <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">Contact</a></li>
        </ul>

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <p class="uppercase text-orange-500 text-center text-sm font-bold font-heading mb-4">EVENTS</p>
    <h1 class="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-gray-600 text-lg text-center mb-16">Join upcoming &amp; past events. Experience collaborative learning firsthand.</p>
    <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="#">

<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 rounded-5xl border-2 border-gray-100 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="py-24">
  <div class="bg-orange-50 border-t border-b border-orange-200">
    <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-200">
            <h2 class="text-purple-900 text-center text-6xl font-bold font-heading mb-2">94K</h2>
            <p class="text-purple-900 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-200">
            <h2 class="text-purple-900 text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-purple-900 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-purple-900 text-center text-6xl font-bold font-heading mb-2">352K</h2>
            <p class="text-purple-900 text-center font-medium">REGISTERED USERS</p>
          </div>
        </div>
      </div>
    </div>

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-10">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 bg-white cursor-pointer">
          <div class="flex justify-between gap-6">
            <h2 class="text-xl font-bold font-heading">Is there a particular subject I should focus on learning?</h2>
            <a class="text-orange-500 hover:text-orange-600 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>
      <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 bg-white cursor-pointer">
          <div class="flex justify-between gap-6">
            <h2 class="text-xl font-bold font-heading">What steps do I need to take to join?</h2>
            <a class="text-orange-500 hover:text-orange-600 transition duration-200 w-8 h-8" href="#">

<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="max-w-xl mx-auto">
          <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 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-500 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.3333 17.7083H1.66666C1.32499 17.7083 1.04166 17.9916 1.04166 18.3333C1.04166 18.675 1.32499 18.9583 1.66666 18.9583H18.3333C18.675 18.9583 18.9583 18.675 18.9583 18.3333C18.9583 17.9916 18.675 17.7083 18.3333 17.7083Z" fill="white"></path>
                <path d="M14.1667 1.66669H5.83333C3.33333 1.66669 2.5 3.15835 2.5 5.00002V18.3334H17.5V5.00002C17.5 3.15835 16.6667 1.66669 14.1667 1.66669ZM8.33333 14.375H5.83333C5.49167 14.375 5.20833 14.0917 5.20833 13.75C5.20833 13.4084 5.49167 13.125 5.83333 13.125H8.33333C8.675 13.125 8.95833 13.4084 8.95833 13.75C8.95833 14.0917 8.675 14.375 8.33333 14.375ZM8.33333 10.625H5.83333C5.49167 10.625 5.20833 10.3417 5.20833 10C5.20833 9.65835 5.49167 9.37502 5.83333 9.37502H8.33333C8.675 9.37502 8.95833 9.65835 8.95833 10C8.95833 10.3417 8.675 10.625 8.33333 10.625ZM8.33333 6.87502H5.83333C5.49167 6.87502 5.20833 6.59169 5.20833 6.25002C5.20833 5.90835 5.49167 5.62502 5.83333 5.62502H8.33333C8.675 5.62502 8.95833 5.90835 8.95833 6.25002C8.95833 6.59169 8.675 6.87502 8.33333 6.87502ZM14.1667 14.375H11.6667C11.325 14.375 11.0417 14.0917 11.0417 13.75C11.0417 13.4084 11.325 13.125 11.6667 13.125H14.1667C14.5083 13.125 14.7917 13.4084 14.7917 13.75C14.7917 14.0917 14.5083 14.375 14.1667 14.375ZM14.1667 10.625H11.6667C11.325 10.625 11.0417 10.3417 11.0417 10C11.0417 9.65835 11.325 9.37502 11.6667 9.37502H14.1667C14.5083 9.37502 14.7917 9.65835 14.7917 10C14.7917 10.3417 14.5083 10.625 14.1667 10.625ZM14.1667 6.87502H11.6667C11.325 6.87502 11.0417 6.59169 11.0417 6.25002C11.0417 5.90835 11.325 5.62502 11.6667 5.62502H14.1667C14.5083 5.62502 14.7917 5.90835 14.7917 6.25002C14.7917 6.59169 14.5083 6.87502 14.1667 6.87502Z" fill="white"></path>
              </svg>
            </div>
            <h2 class="text-xl font-bold font-heading">Company HQ</h2>
          </div>
          <p class="text-gray-600 mb-10">4140 Parker Rd. Allentown,
New Mexico 31134</p>

<section class="pt-24 bg-black">
  <div class="container mx-auto px-4">
    <div class="bg-gray-900 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-gray-500 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-gray-400 hover:text-white transition duration-200" href="#">Features</a></li>
            <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">How it works</a></li>
            <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">Pricing</a></li>
            <li><a class="text-gray-400 hover:text-white 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-gray-400 hover:text-white transition duration-200" href="#">About</a></li>
            <li><a class="text-gray-400 hover:text-white transition duration-200" href="#">Our Mission</a></li>
            <li class="flex items-center flex-wrap gap-2">
              <a class="text-gray-400 hover:text-white transition duration-200" href="#">Careers</a>

<section class="overflow-hidden py-24 relative">
  <div class="absolute top-0 left-0 w-full bg-purple-900 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(111, 11, 69, 0.00) 0%, #6F0B45 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, rgba(111, 11, 69, 0.50) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, rgba(111, 11, 69, 0.50) 100%);"></div>
      <div class="hidden lg:block mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(111, 11, 69, 0.00) 0%, #6F0B45 100%);"></div>
    </div>
  </div>
  <div class="relative z-10 mt-32 sm:mt-0">
    <div class="container mx-auto px-4">
      <div class="flex justify-center">
        <a class="group mb-6 inline-flex items-center gap-2 flex-wrap" href="#">
          <div class="text-white 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-white group-hover:text-opacity-80 transition duration-200 font-bold">Back to Blog</span>
        </a>
      </div>
      <img class="w-full rounded-2xl mb-12" src="solstice-assets/images/blog/post-picture.png" alt="">
      <div class="flex items-center justify-center flex-wrap gap-3 mb-4">
        <span class="text-gray-500">17 Jul 2023</span>

<section class="py-24 bg-orange-50" x-data="{ tab: 'step1' }">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1>
    <p class="text-center text-gray-600 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-orange-500': tab == 'step1', 'border-orange-200': tab != 'step1' }" class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-orange-500 hover:border-orange-500 mb-4">
            <div :class="{ 'bg-orange-500': tab == 'step1', 'bg-orange-200': tab != 'step1' }" class="bg-orange-500 w-10 h-10 flex items-center justify-center rounded-xl text-white 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="white"></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-black': tab == 'step1', 'text-gray-400': tab != 'step1' }" class="text-black text-lg font-semibold group-hover: group-hover: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-orange-500': tab == 'step2', 'border-orange-200': tab != 'step2' }" class="px-4 pt-2 pb-7 flex items-center flex-wrap justify-center gap-4 group border-b-4 border-orange-200 hover:border-orange-500 mb-4">
            <div :class="{ 'bg-orange-500': tab == 'step2', 'bg-orange-200': tab != 'step2' }" class="bg-orange-200 group-hover:bg-orange-500 w-10 h-10 flex items-center justify-center rounded-xl text-white transition duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M22 4.84999V16.74C22 17.71 21.21 18.6 20.24 18.72L19.93 18.76C18.29 18.98 15.98 19.66 14.12 20.44C13.47 20.71 12.75 20.22 12.75 19.51V5.59999C12.75 5.22999 12.96 4.88999 13.29 4.70999C15.12 3.71999 17.89 2.83999 19.77 2.67999H19.83C21.03 2.67999 22 3.64999 22 4.84999Z" fill="white"></path>

<section class="py-24 bg-orange-50">
  <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-orange-900 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-purple-900 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="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">
        <p class="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-black1.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-black2.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-black3.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-black4.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-black1.png" alt="">
          </div>
          <div class="w-full md:w-1/2 xl:w-1/4 py-6 px-3">

<section class="py-24">
  <div class="container mx-auto px-4">
    <p class="uppercase text-orange-500 text-center text-sm font-bold font-heading mb-4">FEATURES</p>
    <h1 class="text-center 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-gray-50 flex-1">
            <div class="absolute top-0 -left-px bg-orange-500 w-0.5 h-6"></div>
            <h2 class="text-2xl font-bold font-heading mb-4">Study room. Personal or group.</h2>
            <p class="text-gray-600">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-50 py-6">
  <div class="container px-4 mx-auto">
    <h1 class="lg:px-18 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="border border-orange-100 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-orange-100 px-12">
          <p class="text-gray-600 mb-2 text-center">Founded</p>
          <h2 class="text-4xl lg:text-5xl font-semibold 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-orange-100 px-12">
          <p class="text-gray-600 mb-2 text-center">Total funding</p>
          <h2 class="text-4xl lg:text-5xl font-semibold 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-orange-100 px-12">
          <p class="text-gray-600 mb-2 text-center">Team members</p>
          <h2 class="text-4xl lg:text-5xl font-semibold text-center">110</h2>
        </div>

<section class="overflow-hidden">
  <div class="bg-orange-50">
    <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-600 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-200 hover:border-orange-500 transition duration-200 hover:bg-white rounded-3xl flex flex-wrap mb-20 py-4" 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-600 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-600 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="#B8B8B8"></circle></svg>
              <div class="py-1 px-3 rounded-md bg-orange-50 border border-orange-100 text-sm font-medium text-orange-500 inline-block">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>

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="flex items-center flex-wrap gap-4 mb-10">
          <svg xmlns="http://www.w3.org/2000/svg" width="52" height="26" viewBox="0 0 52 26" fill="none">
            <path d="M2 26C1.99983 22.8482 2.62048 19.7273 3.8265 16.8154C5.03252 13.9035 6.80029 11.2577 9.02887 9.02906C11.2575 6.80042 13.9032 5.0326 16.815 3.82654C19.7268 2.62049 22.8477 1.99983 25.9994 2C39.2544 2 50 12.7446 50 26" stroke="#530031" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M7.41943 26C7.41943 21.0563 9.37703 16.3151 12.8616 12.8194C16.3461 9.32367 21.0722 7.3598 26.0001 7.3598C30.928 7.3598 35.654 9.32367 39.1386 12.8194C42.6231 16.3151 44.5807 21.0563 44.5807 26" stroke="#FF7100" stroke-width="3" stroke-miterlimit="10"></path>
            <path d="M12.6006 26C12.6006 22.4463 14.0123 19.038 16.5252 16.5251C19.0381 14.0123 22.4463 12.6005 26.0001 12.6005C29.5539 12.6005 32.9621 14.0123 35.475 16.5251C37.9879 19.038 39.3996 22.4463 39.3996 26" stroke="#FFC96D" stroke-width="3" stroke-miterlimit="10"></path>
          </svg>
          <p class="text-lg font-medium">What are you waiting for?</p>
        </div>
        <div class="bg-purple-900 rounded-2xl border border-orange-50 flex flex-col p-2 lg:max-w-md">
          <div class="bg-orange-500 rounded-xl px-6 pt-4 mr-auto mb-2">
            <img src="solstice-assets/images/cta/men-picture1.png" alt="">
          </div>
          <div class="bg-orange-200 rounded-xl px-6 pt-4 ml-auto">
            <img src="solstice-assets/images/cta/woman-picture1.png" alt="">
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <h1 class="text-4xl lg:text-5xl mb-6 font-bold font-heading max-w-xs lg:max-w-sm">Join now and learn together!</h1>
        <p class="text-gray-600 mb-10 max-w-sm">Embark on an exciting learning adventure together - Join now!</p>