Tailwind CSS Components

<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">
        <div class="bg-orange-50 h-1 mb-10"></div>
        <h2 class="text-white text-4xl font-bold font-heading mb-3">101K+</h2>
        <p class="text-white">Users studying around the globe</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-50 h-1 mb-10"></div>
        <h2 class="text-white text-4xl font-bold font-heading mb-3">352K</h2>
        <p class="text-white">Registered Users</p>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="bg-orange-50 h-1 mb-10"></div>
        <h2 class="text-white text-4xl font-bold font-heading mb-3">94K</h2>
        <p class="text-white">Registered Users</p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="py-28 relative">
      <div class="hidden sm:block absolute top-6 left-0 bg-orange-100 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-20 md:h-auto" src="solstice-assets/images/cta/men-picture1.png" alt="">
      </div>
      <div class="absolute top-0 right-0 bg-orange-400 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-24 md:h-auto" src="solstice-assets/images/cta/woman-picture1.png" alt="">
      </div>
      <div class="absolute bottom-0 left-0 sm:left-24 bg-orange-300 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-24 md:h-auto" src="solstice-assets/images/cta/woman-picture2.png" alt="">
      </div>
      <div class="hidden sm:block absolute bottom-0 right-0 sm:right-24 bg-orange-50 rounded-xl px-6 pt-4">
        <img class="h-16 sm:h-20 md:h-auto" src="solstice-assets/images/cta/men-picture2.png" alt="">
      </div>
      <div class="relative z-10">
        <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.22571 34.0001C9.22571 27.4085 11.8358 21.0869 16.4819 16.4259C21.128 11.765 27.4294 9.14648 33.9999 9.14648C40.5704 9.14648 46.8718 11.765 51.5179 16.4259C56.164 21.0869 58.7741 27.4085 58.7741 34.0001" stroke="#FFF2D6" stroke-width="4" stroke-miterlimit="10"></path>
            <path d="M16.1339 34C16.1339 29.2617 18.0162 24.7174 21.3667 21.3669C24.7173 18.0163 29.2616 16.134 33.9999 16.134C38.7383 16.134 43.2826 18.0163 46.6331 21.3669C49.9836 24.7174 51.8659 29.2617 51.8659 34" stroke="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
          </svg>
        </div>
        <h1 class="text-white text-4xl lg:text-5xl mb-10 font-bold font-heading text-center max-w-lg lg:max-w-3xl mx-auto">What are you waiting for?Join now and learn together!</h1>

<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">

<section class="bg-orange-500">
  <div class="pt-24 pb-12 border-b border-orange-300">
    <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-white hover:text-opacity-70 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-white hover:text-opacity-70 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="pt-40 pb-24 bg-black">
  <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-orange-500 text-sm font-semibold hover:text-orange-600 transition duration-200" href="#">Back to Home</a><a class="inline-block text-orange-500 text-sm font-semibold hover:text-orange-600 transition duration-200" href="#">Support</a></div>
  </div>
</section>

<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">
      <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 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="#">Cookie Settings</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 Cookies</a></div>
    </div>
  </div>
</div>

<section class="py-24 overflow-hidden relative bg-orange-500">
  <p class="text-center text-lg font-medium text-white mb-10">Backed by leading education companies</p>
  <div class="h-28 mb-4 transform -translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-orange-400 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light1.png" alt="">
      </div>
      <div class="w-80 h-28 bg-orange-400 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light2.png" alt="">
      </div>
      <div class="w-80 h-28 bg-orange-400 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light3.png" alt="">
      </div>
      <div class="w-80 h-28 bg-orange-400 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light4.png" alt="">
      </div>
      <div class="w-80 h-28 bg-orange-400 py-8 px-10 flex items-center justify-center rounded-2xl">
        <img src="solstice-assets/images/logos/placeholder-logo-light5.png" alt="">
      </div>
    </div>
  </div>
  <div class="h-28 transform translate-x-24">
    <div class="absolute left-1/2 transform -translate-x-1/2 flex gap-4">
      <div class="w-80 h-28 bg-orange-400 py-8 px-10 flex items-center justify-center rounded-2xl">

<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">Sign up</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>Already have an account?</span>
          <span></span>
          <span class="font-bold font-heading">Login</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-8">
          <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>
        <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">Sign Up</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">
            <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>

<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="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-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-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>

<div class="flex flex-wrap pb-24">
  <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">Sign up</h1>
        <a class="inline-block text-gray-500 hover: transition duration-200 mb-8" href="#">
          <span>Already have an account?</span>
          <span></span>
          <span class="font-bold font-heading">Login</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-8">
          <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>
        <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">Sign Up</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">
            <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>

<section class="p-10">
  <div class="bg-orange-500 rounded-5xl p-8 lg:p-14">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="flex flex-col justify-between gap-4 h-full">
          <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading">FAQ</h1>
          <div>
            <p class="text-white text-xl font-bold font-heading mb-6 max-w-sm">Still have more questions? Talk to our customer happiness team</p>
            <a class="w-full sm:w-auto py-3 px-5 h-12 rounded-full bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800 transition duration-200 inline-flex items-center justify-center gap-2" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M13.3333 1.66669H6.66666C3.33332 1.66669 1.66666 3.33335 1.66666 6.66669V17.5C1.66666 17.9584 2.04166 18.3334 2.49999 18.3334H13.3333C16.6667 18.3334 18.3333 16.6667 18.3333 13.3334V6.66669C18.3333 3.33335 16.6667 1.66669 13.3333 1.66669ZM11.6667 12.7084H5.83332C5.49166 12.7084 5.20832 12.425 5.20832 12.0834C5.20832 11.7417 5.49166 11.4584 5.83332 11.4584H11.6667C12.0083 11.4584 12.2917 11.7417 12.2917 12.0834C12.2917 12.425 12.0083 12.7084 11.6667 12.7084ZM14.1667 8.54169H5.83332C5.49166 8.54169 5.20832 8.25835 5.20832 7.91669C5.20832 7.57502 5.49166 7.29169 5.83332 7.29169H14.1667C14.5083 7.29169 14.7917 7.57502 14.7917 7.91669C14.7917 8.25835 14.5083 8.54169 14.1667 8.54169Z" fill="white"></path>
              </svg>
              <span class="text-sm text-white font-semibold">Talk to us</span>
            </a>
          </div>
        </div>
      </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 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>

<div class="flex flex-wrap pb-24">
  <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">

<section class="py-24 bg-orange-500" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h1 class="text-white text-center text-4xl lg:text-5xl font-bold font-heading mb-6 max-w-md mx-auto">Testimonials from our users</h1>
    <p class="text-center text-white mb-20">See what they have to say about us</p>
    <div class="flex flex-wrap mb-20 lg:mb-40 -mx-4">
      <div class="w-full lg:w-1/3 p-4">
        <div class="border border-orange-500 bg-white p-12 rounded-t-3xl rounded-br-3xl mb-8 lg:h-full">
          <div class="mb-8">
            <svg xmlns="http://www.w3.org/2000/svg" width="30" height="22" viewBox="0 0 30 22" fill="none">
              <path d="M13.1971 4.75862C10.9375 4.89655 9.11058 5.47127 7.71635 6.48276C6.37019 7.49425 5.57692 8.87356 5.33654 10.6207C5.28846 11.2184 5.28846 11.8621 5.33654 12.5517C5.72115 12 6.20192 11.6092 6.77885 11.3793C7.35577 11.1494 8.05289 11.0345 8.87019 11.0345C10.1683 11.0345 11.2981 11.5172 12.2596 12.4828C13.2212 13.4483 13.7019 14.7126 13.7019 16.2759C13.7019 17.977 13.125 19.3563 11.9712 20.4138C10.8173 21.4713 9.30289 22 7.42788 22C5.07212 22 3.24519 21.1724 1.94712 19.5172C0.649038 17.8161 0 15.5862 0 12.8276C0 9.47126 1.05769 6.57471 3.17308 4.13793C5.33654 1.65517 8.67789 0.275861 13.1971 0V4.75862ZM29.4952 4.75862C27.1875 4.89655 25.3606 5.47127 24.0144 6.48276C22.6683 7.49425 21.875 8.87356 21.6346 10.6207C21.5865 11.0345 21.5625 11.6782 21.5625 12.5517C21.9952 12 22.5 11.6092 23.0769 11.3793C23.6538 11.1494 24.351 11.0345 25.1683 11.0345C26.4663 11.0345 27.5962 11.5172 28.5577 12.4828C29.5192 13.4483 30 14.7126 30 16.2759C30 17.977 29.4231 19.3563 28.2692 20.4138C27.1154 21.4713 25.601 22 23.726 22C21.3221 22 19.4712 21.1724 18.1731 19.5172C16.9231 17.8161 16.2981 15.5862 16.2981 12.8276C16.2981 9.47126 17.3558 6.57471 19.4712 4.13793C21.6346 1.65517 24.976 0.275861 29.4952 0V4.75862Z" fill="#FF7100"></path>
            </svg>
          </div>
          <h2 class="text-xl font-bold font-heading mb-4">I've been more productive with Solstice</h2>
          <p class="text-gray-600">I've been more productive and my academic performance is getting better every semester.</p>
        </div>
        <div class="flex items-center gap-4 flex-wrap">
          <div class="rounded-full bg-orange-50 overflow-hidden">
            <img src="solstice-assets/images/testimonials/man-avatar1.png" alt="">
          </div>
          <div>
            <h2 class="text-white font-semibold mb-1">Steven Klein</h2>
            <p class="text-orange-50 text-sm">Student</p>
          </div>
        </div>

<section class="bg-orange-500 py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap mb-32 mt-14 -mx-8">
      <div class="w-full lg:w-1/2 px-8">
        <div class="flex items-center justify-between flex-wrap gap-4 mb-14">
          <div class="py-1 px-3 rounded-lg border border-orange-100 bg-orange-50 flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><circle cx="4" cy="4" r="3" fill="#FF7100"></circle></svg>
            <span class="text-orange-500 text-sm font-medium">About Us</span>
          </div>
          <div class="flex items-center flex-wrap gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="#6F0B45" stroke-width="1.25"></circle><circle cx="8" cy="8" r="7.375" stroke="#FFC96D" stroke-width="1.25"></circle><circle cx="8" cy="8" r="3" fill="#FFF2D6"></circle></svg>
            <span class="text-white text-sm font-semibold">Meet Solstice</span>
          </div>
        </div>
        <img class="rounded-3xl w-full mb-8" src="solstice-assets/images/about/picture4.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-8">
        <h1 class="text-white text-5xl lg:text-7xl font-bold font-heading mb-10 max-w-xs lg:max-w-lg">On a mission to make learning fun</h1>
        <p class="text-orange-50 text-lg">We are driven to transform the landscape of learning into a captivating journey of excitement and discovery. Our aim is to infuse every educational experience with the essence of joy, making learning an immersive adventure that fuels curiosity and fosters growth.</p>
      </div>
    </div>
    <div class="border border-orange-400 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-400 px-12">

<section class="overflow-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="bg-orange-200">
    <div class="container px-4 mx-auto">
      <h1 class="text-4xl lg:text-6xl font-bold font-heading mb-6 pt-16">Blog</h1>
      <p class="text-gray-700 text-xl mb-20">Latest articles and releases</p>
      <a class="bg-white border border-gray-100 hover:border-orange-500 transition duration-200 py-4 rounded-3xl flex flex-wrap mb-20" href="#">
        <div class="w-full lg:w-1/2 px-4">
          <div class="relative" style="height: 364px;">
            <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>
              </svg>
            </div>
            <div class="absolute bottom-0 right-0 z-10">
              <svg class="rounded-br-3xl" xmlns="http://www.w3.org/2000/svg" width="154" height="158" viewBox="0 0 154 158" fill="none">
                <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FF7100"></path>
              </svg>
            </div>
            <img class="absolute inset-0 w-full h-full object-cover rounded-3xl" src="solstice-assets/images/blog/picture-large.png" alt="">
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <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>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="p-10 bg-purple-900 rounded-3xl">
          <h2 class="text-white text-4xl lg:text-6xl font-bold font-heading mb-6">$4/month</h2>
          <p class="text-white mb-10">Join over 350 hundreds users who have signed up for Solstice.</p>
          <div class="p-4 bg-orange-400 rounded-3xl flex items-center justify-between flex-wrap gap-4 mb-10">
            <p class="text-white text-lg font-medium">Cancel anytime.</p>
            <a class="w-full sm:w-auto text-center h-14 py-4 px-6 rounded-full bg-white border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 flex items-center justify-center gap-2" href="#">
              <span class="text-sm font-semibold ">Sign up today</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                <path d="M5.50002 10H15.9167M15.9167 10L10.9167 5M15.9167 10L10.9167 15" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <h2 class="text-white text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">
            <li class="flex items-center gap-4">
              <div class="w-2 h-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                  <g clip-path="url(#clip0_199_1928)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.21702 3.51098C7.30324 3.56048 7.37487 3.63185 7.42469 3.71788C7.4745 3.80392 7.50073 3.90157 7.50073 4.00098C7.50073 4.1004 7.4745 4.19805 7.42469 4.28409C7.37487 4.37012 7.30324 4.44149 7.21702 4.49098L1.38352 7.91948C0.994524 8.14798 0.500023 7.87348 0.500024 7.42948L0.500024 0.571984C0.500024 0.127484 0.995024 -0.146516 1.38352 0.0819844L7.21702 3.51098Z" fill="white"></path>
                  </g>

<section class="py-24 bg-orange-500">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-4">Join our events</h1>
    <p class="text-center text-orange-50 text-lg mb-24 max-w-2xl mx-auto">Engage in our events to chat about learning trends and experience our collaborative online learning platform first-hand.</p>
    <div class="flex flex-wrap mb-4 -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <a href="#">
          <div class="border border-gray-100 bg-white rounded-2xl hover:border-orange-500 transition duration-200 flex flex-wrap h-full">
            <div class="w-full md:w-1/2">
              <div class="relative h-full" style="min-height:318px;">
                <div class="absolute top-0 left-0 z-10">
                  <svg class="rounded-tl-2xl" xmlns="http://www.w3.org/2000/svg" width="154" height="154" viewBox="0 0 154 154" fill="none">
                    <path d="M-35 79.9324V153.361C-35 153.714 -34.7141 154 -34.3615 154H16.62C16.9724 154 17.2585 153.714 17.2585 153.361V94.299C17.2585 55.5087 55.5087 17.2585 94.299 17.2585H153.361C153.714 17.2585 154 16.9724 154 16.62V-34.3615C154 -34.7139 153.714 -35 153.361 -35H79.9324C16.4572 -35 -35 16.4572 -35 79.9324Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <div class="absolute bottom-0 right-0 z-10">
                  <svg xmlns="http://www.w3.org/2000/svg" width="152" height="153" viewBox="0 0 152 153" fill="none">
                    <path d="M189 74.0676V0.638514C189 0.286054 188.714 0 188.361 0H137.38C137.028 0 136.742 0.286054 136.742 0.638514V59.701C136.742 98.4913 98.4914 136.742 59.701 136.742H0.638514C0.286054 136.742 0 137.028 0 137.38V188.361C0 188.714 0.286054 189 0.638514 189H74.0676C137.543 189 189 137.543 189 74.0676Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <img class="absolute top-0 left-0 w-full h-full object-cover rounded-tr-2xl md:rounded-tr-none md:rounded-bl-2xl rounded-tl-2xl" src="solstice-assets/images/events/picture1.png" alt="">
              </div>
            </div>
            <div class="w-full md:w-1/2">

<section class="overflow-hidden py-24 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-50 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 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-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>
      <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="overflow-hidden bg-orange-500">
  <div class="border-b border-orange-300 pb-16 pt-24">
    <div class="container mx-auto px-4">
      <div class="flex justify-center">
        <div class="rounded-md bg-orange-50 border border-orange-100 px-2 py-1 uppercase text-orange-500 text-sm font-medium inline-block mb-4">CAREERS</div>
      </div>
      <h1 class="text-white text-3xl lg:text-5xl font-bold font-heading text-center">Careers at Solstice</h1>
    </div>
  </div>
  <div class="container mx-auto px-4">
    <h2 class="text-white 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-1/2 p-4">
        <p class="text-orange-50">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/2 p-4">
        <p class="text-orange-50">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>
  <div class="flex justify-center gap-8 mb-24">
    <img class="rounded-r-3xl object-cover flex-1" src="solstice-assets/images/careers/picture4.png" alt="">
    <img class="rounded-3xl object-cover flex-1 px-4 sm:px-0" src="solstice-assets/images/careers/picture5.png" alt="">
    <img class="rounded-l-3xl object-cover flex-1" src="solstice-assets/images/careers/picture6.png" alt="">

<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="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M17.5 16.6667C18.1945 16.6667 18.785 16.4233 19.2717 15.9367C19.7583 15.45 20.0011 14.86 20 14.1667C20 13.4722 19.7567 12.8817 19.27 12.395C18.7833 11.9083 18.1933 11.6656 17.5 11.6667C16.8056 11.6667 16.215 11.91 15.7283 12.3967C15.2417 12.8833 14.9989 13.4733 15 14.1667C15 14.8611 15.2433 15.4517 15.73 15.9383C16.2167 16.425 16.8067 16.6678 17.5 16.6667ZM14.1667 25C14.8611 25 15.4517 24.7567 15.9383 24.27C16.425 23.7833 16.6678 23.1933 16.6667 22.5C16.6667 21.8056 16.4233 21.215 15.9367 20.7283C15.45 20.2417 14.86 19.9989 14.1667 20C13.4722 20 12.8817 20.2433 12.395 20.73C11.9083 21.2167 11.6656 21.8067 11.6667 22.5C11.6667 23.1944 11.91 23.785 12.3967 24.2717C12.8833 24.7583 13.4733 25.0011 14.1667 25ZM25 26.6667C25.4722 26.6667 25.8683 26.5067 26.1883 26.1867C26.5083 25.8667 26.6678 25.4711 26.6667 25C26.6667 24.5278 26.5067 24.1317 26.1867 23.8117C25.8667 23.4917 25.4711 23.3322 25 23.3333C24.5278 23.3333 24.1317 23.4933 23.8117 23.8133C23.4917 24.1333 23.3322 24.5289 23.3333 25C23.3333 25.4722 23.4933 25.8683 23.8133 26.1883C24.1333 26.5083 24.5289 26.6678 25 26.6667ZM20 36.6667C17.6945 36.6667 15.5278 36.2289 13.5 35.3533C11.4722 34.4778 9.70834 33.2906 8.20834 31.7917C6.70834 30.2917 5.52112 28.5278 4.64668 26.5C3.77223 24.4722 3.33445 22.3056 3.33334 20C3.33334 17.6667 3.83334 15.3889 4.83334 13.1667C5.83334 10.9444 7.22945 9.02777 9.02168 7.41666C10.8117 5.80555 12.9356 4.62499 15.3933 3.87499C17.8511 3.12499 20.5389 3.05555 23.4567 3.66666C23.2067 4.91666 23.29 6.09055 23.7067 7.18833C24.1233 8.28611 24.7483 9.20944 25.5817 9.95833C26.415 10.7083 27.4011 11.2222 28.54 11.5C29.6789 11.7778 30.8733 11.7083 32.1233 11.2917C31.2622 13.2083 31.415 14.8472 32.5817 16.2083C33.7483 17.5694 35.0822 18.2778 36.5833 18.3333C36.8333 20.8056 36.5695 23.1528 35.7917 25.375C35.0139 27.5972 33.8678 29.5417 32.3533 31.2083C30.84 32.875 29.0206 34.2017 26.895 35.1883C24.7695 36.175 22.4711 36.6678 20 36.6667Z" fill="#282828"></path>
        </svg>
        <p class="max-w-lg">By clicking “Allow”, you agree to the storing of cookies on your device to personalize your size experience.</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="#">Decline</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="#">Allow</a></div>
    </div>
  </div>
</div>