Tailwind CSS Components

<section class="pt-24 pb-11 overflow-hidden 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-10">Oops. Page not found.</h1>
    <div class="flex justify-center mb-20"><a 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-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Back to Home</a></div>
    <div class="flex items-center justify-center gap-4 sm:gap-8 lg:gap-16">
      <div>
        <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24 mx-auto"></div>
        <div class="flex justify-between mb-2">
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>
        <div class="flex gap-1 lg:gap-2 mb-2">
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>
        <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24 ml-auto"></div>
      </div>
      <div>
        <div class="flex gap-1 lg:gap-2 mb-2">
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
          <div class="bg-orange-400 rounded-lg sm:rounded-3xl w-6 sm:w-12 lg:w-24 h-6 sm:h-12 lg:h-24"></div>
        </div>

<section class="py-24 xl:py-36 overflow-hidden bg-orange-100" x-data="{ slide: 0 }">
  <div class="container mx-auto px-4">
    <div class="border border-orange-300 rounded-3xl p-8 lg:p-16 relative">
      <div class="lg:max-w-md xl:max-w-2xl">
        <h1 :class="{ 'hidden': slide != 0 }" class="text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“I just wanted to say that Solstice alone is a real lifesaver, but the platform is really next level!”</h1>
        <h1 :class="{ 'hidden': slide != 1 }" class="hidden text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“Solstice on its own is an absolute game-changer, but the platform takes things to a whole new level!”</h1>
        <h1 :class="{ 'hidden': slide != 2 }" class="hidden text-3xl lg:text-4xl font-semibold mb-16 max-w-lg">“Solstice by itself is incredibly helpful, but the platform truly elevates the experience to the next level!”</h1>
        <div class="flex items-center justify-between flex-wrap gap-4">
          <div :class="{ 'hidden': slide != 0 }">
            <h2 class="text-lg font-semibold mb-1">Hanna Stanton</h2>
            <p class="text-gray-500">Student</p>
          </div>
          <div :class="{ 'hidden': slide != 1 }" class="hidden">
            <h2 class="text-lg font-semibold mb-1">Olivia Martinez</h2>
            <p class="text-gray-500">Student</p>
          </div>
          <div :class="{ 'hidden': slide != 2 }" class="hidden">
            <h2 class="text-lg font-semibold mb-1">Ethan Thompson</h2>
            <p class="text-gray-500">Student</p>
          </div>
          <div class="flex items-center gap-3">
            <a x-on:click.prevent="slide = 0" class="text-gray-100 hover:text-orange-500 transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="5" fill="currentColor"></circle></svg>
            </a>

<section class="py-24 bg-orange-100">
  <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="bg-white rounded-2xl py-6 px-4 h-full flex flex-col justify-center">
          <h2 class="text-purple-900 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">101K+</h2>
          <p class="text-gray-500 font-medium text-center">Time reduced for searching files</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-white rounded-2xl py-6 px-4 mb-6">
          <h2 class="text-purple-900 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">2M+</h2>
          <p class="text-gray-500 font-medium text-center">Happy users and keep growing</p>
        </div>
        <div class="bg-white rounded-2xl py-6 px-4">
          <h2 class="text-purple-900 text-5xl lg:text-6xl font-bold font-heading text-center mb-4">94K</h2>
          <p class="text-gray-500 font-medium text-center">Supported file extensions</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container mx-auto px-4">
    <div class="flex items-end justify-between flex-wrap gap-4 mb-16">
      <div>
        <p class="uppercase text-orange-500 text-sm font-bold font-heading mb-6">FEATURES</p>
        <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-6">Events and discussion</h1>
        <p class="text-gray-600 text-lg max-w-2xl">Elevate your learning with thought-provoking events and vibrant discussions that foster growth and collaboration.</p>
      </div>
      <a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full 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="#">Learn More</a>
    </div>
    <img class="w-full" src="solstice-assets/images/features/events-primary.png" alt="">
  </div>
</section>

<section class="overflow-hidden bg-orange-100">
  <div class="container mx-auto px-4 relative">
    <div class="hidden md:block absolute top-0 left-0">
      <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_191_12162)" stroke="#FFC96D"></path>
        <defs><linearGradient id="paint0_linear_191_12162" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC96D"><stop offset="1" stop-color="#FFC96D" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="hidden md:block absolute top-0 right-0">
      <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_191_12161)" stroke="#FFC96D"></path>
        <defs><linearGradient id="paint0_linear_191_12161" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC96D"><stop offset="1" stop-color="#FFC96D" stop-opacity="0"></stop></stop></linearGradient></defs>
      </svg>
    </div>
    <div class="py-32 relative z-10">
      <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-4 max-w-md lg:max-w-xl mx-auto">
        <span>Join a</span>
        <span></span>
        <span class="text-orange-500">vibrant</span>
        <span></span>
        <span>community of learners.</span>
      </h1>
      <p class="text-gray-600 text-center mb-10">Fuel your curiosity by joining a vibrant community of learners.</p>
      <div class="flex justify-center flex-wrap gap-4">

<section class="overflow-hidden bg-orange-100">
  <div class="container px-4 mx-auto">
    <div class="relative transform -translate-y-18">
      <div class="hidden md:block absolute top-0 left-0">
        <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_254_11537)" stroke="#FFE0A5"></path>
          <defs><linearGradient id="paint0_linear_254_11537" x1="0" y1="500" x2="500" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC96D"><stop offset="1" stop-color="#FFC96D" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
      <div class="hidden md:block absolute top-0 right-0">
        <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_254_11536)" stroke="#FFC96D"></path>
          <defs><linearGradient id="paint0_linear_254_11536" x1="499.998" y1="2.85805e-05" x2="8.49831" y2="500" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC96D"><stop offset="1" stop-color="#FFC96D" stop-opacity="0"></stop></stop></linearGradient></defs>
        </svg>
      </div>
    </div>
    <div class="py-20 max-w-3xl mx-auto relative z-10">
      <h1 class="mb-4 text-center text-3xl lg:text-5xl font-bold font-heading">Contact us</h1>
      <p class="text-center text-gray-600 mb-12">Submit your info and we’ll get back to you as soon as possible.</p>
      <form action="">
        <div class="p-8 rounded-3xl border border-gray-100 bg-white max-w-xl mx-auto">
          <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 p-4">
              <label class="text-sm font-medium mb-2 block" for="textInput1">First name</label>

<section class="bg-orange-100 py-16">
  <div class="container px-4 mx-auto">
    <div class="flex items-center flex-wrap mb-32 mt-14 -mx-8">
      <div class="w-full lg:w-1/2 p-8">
        <img class="rounded-3xl w-full" src="solstice-assets/images/about/picture4.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 p-8">
        <div class="py-1 px-3 rounded-lg border border-orange-200 bg-orange-50 inline-flex items-center gap-2 mb-6 mt-12">
          <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>
        <h1 class="text-5xl lg:text-6xl font-bold font-heading mb-6 max-w-md lg:max-w-2xl">On a mission to make learning fun</h1>
        <p class="text-gray-600 text-lg mb-12">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>
    <h2 class="text-4xl font-bold font-heading text-center mb-9">Our investors</h2>
    <div class="border border-gray-200 rounded-3xl py-8 flex flex-wrap mb-32">
      <div class="w-full md:w-1/2 lg:w-1/4 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-8 px-16 flex justify-center items-center">
        <img src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 py-8 px-16 flex justify-center items-center">

<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="relative z-10">
      <div class="bg-white rounded-5xl border-2 border-orange-500 shadow-sm py-6 px-10 flex items-center justify-between flex-wrap gap-4">
        <p class="max-w-xl">We use technologies such as cookies, to process information about you and your devices to operate, analyze, and improve this site.</p>
        <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="#">Good to know</a>
      </div>
    </div>
  </div>
</div>

<section class="py-24 bg-orange-100">
  <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="bg-purple-900 overflow-hidden rounded-3xl pt-12 pl-6">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 p-4">
          <div class="pb-6 pr-6 lg:pr-20">
            <a href="#">
              <div class="p-6 border-b border-purple-700 hover:border-orange-200 transition duration-200">
                <div class="flex gap-3 flex-wrap">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17Z" fill="#FF7100"></path>
                    <path d="M12 7V17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7Z" fill="#FF7100"></path>
                  </svg>
                  <div class="flex-1">
                    <h2 class="text-white font-bold font-heading mb-3">Join or Create Room</h2>
                    <p class="text-purple-200 text-sm">Join ongoing rooms for focus and connection or create your study space.</p>
                  </div>
                </div>
              </div>
            </a>
            <a href="#">
              <div class="p-6 border-b border-orange-200">

<section class="py-24 bg-orange-100">
  <div class="container mx-auto px-4">
    <h1 class="text-3xl lg:text-5xl font-bold font-heading mb-4 text-center">Careers at Solstice</h1>
    <div class="p-6 rounded-2xl border border-orange-500 mb-24">
      <p class="flex gap-2 flex-wrap">
        <span>Check out our</span>
        <span class="flex items-center gap-1">
          <span class="text-orange-500 font-bold font-heading">Open Roles</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="#FF7100" stroke="#FF7100"></path>
          </svg>
        </span>
        <span>at the bottom of the page</span>
      </p>
    </div>
    <h2 class="text-3xl font-bold font-heading mb-4">What we’re building</h2>
    <p class="text-gray-600 mb-8">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>
    <p class="text-gray-600 mb-24">By bringing structure, access, and efficiency to teamwork, Solstice makes it easier for businesses to scale their operations. 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>
    <h2 class="text-3xl font-bold font-heading mb-4">Benefits</h2>
    <p class="text-gray-600 mb-16">We help our employees thrive</p>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="ml-8 w-12 h-12 rounded-full bg-purple-700 flex items-center justify-center mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-4">Discover features</h1>
    <p class="text-center text-gray-600 mb-28">Innovative features tailored to enhance your learning experience.</p>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="rounded-full w-12 h-12 flex items-center justify-center bg-orange-500 mb-4 ml-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M8.25 2V22H7.81C4.17 22 2 19.83 2 16.19V7.81C2 4.17 4.17 2 7.81 2H8.25Z" fill="white"></path>
            <path d="M21.5 7.81V10.75H10.25V2.5H16.19C17.9106 2.5 19.2238 3.01093 20.1064 3.89355C20.9891 4.77618 21.5 6.08944 21.5 7.81Z" fill="white" stroke="white"></path>
            <path d="M22 12.75V16.19C22 19.83 19.83 22 16.19 22H9.75V12.75H22Z" fill="white"></path>
          </svg>
        </div>
        <div class="relative pl-4">
          <div class="absolute top-0 left-0 bg-orange-500 w-0.5 h-6"></div>
          <h2 class="text-lg 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 class="w-full md:w-1/2 lg:w-1/4 p-4">
        <div class="rounded-full w-12 h-12 flex items-center justify-center bg-orange-500 mb-4 ml-4">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M12.6778 19.957C12.9525 20.0209 12.9777 20.3808 12.7101 20.47L11.1301 20.99C7.1601 22.27 5.0701 21.2 3.7801 17.23L2.5001 13.28C1.2201 9.30998 2.2801 7.20998 6.2501 5.92998L6.77409 5.75645C7.17696 5.62304 7.56902 6.0271 7.45463 6.43577C7.39793 6.63834 7.34338 6.84975 7.2901 7.06998L6.3101 11.26C5.2101 15.97 6.8201 18.57 11.5301 19.69L12.6778 19.957Z" fill="white"></path>
            <path d="M15.3848 3.30658L15.3862 3.30691L17.0561 3.69687C17.0561 3.69688 17.0562 3.69689 17.0562 3.69691C19.103 4.17564 20.3117 4.89396 20.9288 5.88861C21.5459 6.88329 21.6519 8.28397 21.1731 10.3259L20.1931 14.5059L20.1929 14.5067C19.7831 16.2682 19.1919 17.4136 18.3998 18.0914C17.6247 18.7547 16.5808 19.0339 15.1078 18.8923L15.1078 18.8922L15.0998 18.8916C14.6302 18.854 14.1164 18.7689 13.5573 18.634L13.5557 18.6336L11.8757 18.2336L11.8754 18.2335C9.83814 17.7499 8.63095 17.0317 8.01343 16.0375C7.39626 15.0438 7.28815 13.6454 7.76674 11.6041L7.7668 11.6039L8.74664 7.41453C8.74667 7.4144 8.7467 7.41427 8.74673 7.41415C8.94185 6.585 9.17125 5.88463 9.44861 5.32067L9.44862 5.32067L9.45009 5.31764C9.99063 4.1996 10.6904 3.54259 11.5993 3.2289C12.5315 2.90719 13.7555 2.92119 15.3848 3.30658ZM15.7733 13.458L15.7733 13.458L15.775 13.4513C15.9411 12.7868 15.5425 12.1026 14.8611 11.9349L11.9532 11.1954L11.9512 11.1949C11.2895 11.0295 10.6034 11.4247 10.4349 12.0987C10.2695 12.7602 10.6643 13.4459 11.3377 13.6148C11.338 13.6149 11.3383 13.615 11.3387 13.6151L14.2467 14.3546L14.2727 14.3612L14.2992 14.365C14.3053 14.3659 14.3123 14.3669 14.3199 14.368C14.3752 14.3762 14.4677 14.39 14.5599 14.39C15.1202 14.39 15.6235 14.0236 15.7733 13.458ZM18.7033 10.078L18.7034 10.078L18.7057 10.0685C18.8673 9.40584 18.4816 8.71142 17.786 8.55361L12.9428 7.32535L12.9412 7.32494C12.2795 7.1595 11.5934 7.55473 11.4249 8.22874C11.2595 8.89019 11.6543 9.57598 12.3278 9.74486C12.3281 9.74493 12.3284 9.74501 12.3287 9.74508L17.177 10.9747L17.2028 10.9812L17.2292 10.985C17.2353 10.9859 17.2423 10.9869 17.2499 10.988C17.3052 10.9963 17.3977 11.01 17.4899 11.01C18.0501 11.01 18.5535 10.6436 18.7033 10.078Z" fill="white" stroke="white"></path>

<section class="overflow-hidden py-24 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-500 pb-48 lg: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, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
      <div class="hidden lg:block mt-20 rounded-3xl w-80 h-80" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.10) 100%);"></div>
    </div>
  </div>
  <div class="relative z-10">
    <div class="container mx-auto px-4">
      <div class="flex justify-center">
        <a class="group mb-12 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>
      <div class="flex items-center justify-center gap-3 flex-wrap mb-4">
        <div class="rounded-md bg-white border border-gray-100 py-0.5 px-2">
          <span class="text-gray-700 text-xs font-medium">Product</span>

<section class="py-24 overflow-hidden bg-orange-100">
  <div class="container mx-auto px-4">
    <div class="flex items-end justify-between flex-wrap gap-4 mb-24">
      <div>
        <h1 class="text-4xl lg:text-5xl font-bold font-heading mb-4">Join our events</h1>
        <p class="text-gray-600 text-lg max-w-lg">Engage in our weekly online events featuring mindfulness sessions, journaling, and fireside chats.</p>
      </div>
      <a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Sign up now</a>
    </div>
    <div class="relative mb-24" style="height:480px;">
      <div class="absolute top-0 left-0 bg-purple-900 rounded-2xl w-full h-full"></div>
      <div class="absolute top-0 left-0 w-full z-10 px-4 pt-4">
        <div class="bg-white rounded-3xl pt-6 px-6">
          <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">

<section class="bg-orange-100 py-16">
  <div class="container px-4 mx-auto">
    <h1 class="text-5xl lg:text-7xl font-semibold mb-6 mt-14 max-w-lg lg:max-w-3xl">On a mission to make learning fun</h1>
    <p class="text-gray-600 text-lg mb-48 lg:mb-32 max-w-xl">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 class="relative mb-32" style="height:800px;">
      <div class="absolute z-10 transform translate-x-1/2 md:translate-x-0 right-1/2 md:right-24 -top-32 bg-white rounded-3xl border-2 border-orange-500 shadow-md p-8 w-3/4 md:max-w-md">
        <p class="text-base lg:text-lg font-semibold mb-12">“They shipping a platform that took learning to the next level. I can invite my friend to study in specific topic together in just two-click.”</p>
        <div class="flex items-center flex-wrap gap-4">
          <div class="relative bg-orange-300 rounded-full w-12 h-12 overflow-hidden">
            <img class="absolute bottom-0 right-0" src="solstice-assets/images/about/avatar-picture.png" alt="">
          </div>
          <div>
            <p class="font-semibold mb-1">Rob Schapiro</p>
            <p class="text-gray-500 text-sm">Student</p>
          </div>
        </div>
      </div>
      <div class="w-full h-full absolute top-0 right-0 rounded-5xl bg-orange-200"></div>
      <div class="w-full h-full absolute md:top-5 md:right-5 rounded-5xl bg-purple-900"></div>
      <img class="w-full h-full absolute md:top-12 md:right-12 rounded-5xl object-cover" src="solstice-assets/images/about/picture6.png" alt="">
    </div>
    <div class="flex flex-wrap mb-16 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <h2 class="text-5xl font-semibold max-w-sm lg:max-w-lg">A company with values</h2>

<section class="overflow-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="bg-purple-900">
    <div class="container px-4 mx-auto">
      <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading text-center mb-6 pt-16">Latest articles and releases</h1>
      <p class="text-purple-200 text-center mb-20">Discover the latest news, tips and user stories insights from Solstice.</p>
      <div class="flex justify-center flex-wrap gap-2 mb-16">
        <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab == $refs.tab1.textContent, 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab != $refs.tab1.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-5 rounded-full bg-white border border-gray-200 text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">All Articles</a>
        <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab == $refs.tab2.textContent, 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab != $refs.tab2.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-4 rounded-full bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white text-sm font-semibold transition duration-200" href="#">Getting Started</a>
        <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab == $refs.tab3.textContent, 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab != $refs.tab3.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-4 rounded-full bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white text-sm font-semibold transition duration-200" href="#">Learning Resources</a>
        <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab == $refs.tab4.textContent, 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab != $refs.tab4.textContent }" class="h-10 inline-flex items-center justify-center w-full sm:w-auto text-center py-3 px-4 rounded-full bg-purple-900 border border-purple-700 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white text-sm font-semibold transition duration-200" href="#">Stories</a>
      </div>
      <div class="flex flex-wrap mb-8 pb-8 border-b border-purple-700 -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <a href="#">
            <div class="hover:bg-white border border-transparent hover:border-orange-500 transition duration-200 rounded-2xl h-full p-3 group">
              <div class="relative" style="height: 240px;">
                <div class="absolute top-0 left-0 z-10">
                  <svg class="rounded-tl-2xl" xmlns="http://www.w3.org/2000/svg" width="159" height="156" viewBox="0 0 159 156" fill="none">
                    <path d="M-30 81.9324V155.361C-30 155.714 -29.7141 156 -29.3615 156H21.62C21.9724 156 22.2585 155.714 22.2585 155.361V96.299C22.2585 57.5087 60.5087 19.2585 99.299 19.2585H158.361C158.714 19.2585 159 18.9724 159 18.62V-32.3615C159 -32.7139 158.714 -33 158.361 -33H84.9324C21.4572 -33 -30 18.4572 -30 81.9324Z" fill="#FFF2D6"></path>
                  </svg>
                </div>
                <div class="absolute bottom-0 right-0 z-10">
                  <svg class="rounded-br-2xl" xmlns="http://www.w3.org/2000/svg" width="150" height="158" viewBox="0 0 150 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="#FFF2D6"></path>

<section class="py-24 bg-orange-50">
  <div class="container mx-auto px-4">
    <div class="flex justify-center mb-4">
      <div class="inline-block px-3 py-1 rounded-lg border border-orange-100 bg-orange-50 text-orange-500 text-sm font-medium">PRICING</div>
    </div>
    <h1 class="text-center text-4xl lg:text-5xl font-bold font-heading mb-6 max-w-xl mx-auto">One plan for the price of a cup of coffee</h1>
    <p class="text-gray-600 text-center text-lg mb-24 max-w-4xl mx-auto">We offer a transparent monthly payment that covers everything our learning platform has to offer, with no hidden costs or transaction fees.</p>
    <div class="bg-orange-500 rounded-4xl px-5 lg:px-10 pt-6 lg:pt-12 max-w-4xl mx-auto mb-6">
      <div class="bg-purple-900 rounded-t-3xl pt-10">
        <div class="py-12 px-10 border-b border-orange-500">
          <div class="flex items-center justify-between flex-wrap gap-4 mb-6">
            <h2 class="text-white text-4xl lg:text-6xl font-bold font-heading">$4/month</h2>
            <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>
          <p class="text-white text-lg">Join over 350 hundreds users who have signed up for Solstice.</p>
        </div>
        <div class="px-10 pt-12 pb-32">
          <h2 class="text-white text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">

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

<section class="py-24 bg-orange-100">
  <div class="container mx-auto px-4">
    <p class="text-center text-orange-500 text-sm font-bold font-heading mb-6">HOW IT WORKS</p>
    <h1 class="text-center text-3xl lg:text-5xl font-bold font-heading mb-24 max-w-sm lg:max-w-xl mx-auto">What steps do I need to take to join?</h1>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 p-4">
        <img class="w-full" src="solstice-assets/images/how-it-works/picture-full-secondary.png" alt="">
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <a href="#">
          <div class="bg-orange-50 rounded-2xl py-6 pr-10 mb-3 group hover:bg-purple-900 transition duration-200">
            <div class="border-l-4 border-transparent group-hover:border-orange-500 transition duration-200 pl-10">
              <h2 class="text-lg font-bold font-heading mb-2 group-hover:text-white transition duration-200">Step 1</h2>
              <p class="text-gray-600 group-hover:text-purple-200 transition duration-200">Click "Sign Up," enter your name, email, a secure password, and hit "Create Account."</p>
            </div>
          </div>
        </a>
        <a href="#">
          <div class="bg-purple-900 rounded-2xl py-6 pr-10 mb-3">
            <div class="border-l-4 border-orange-500 pl-10">
              <h2 class="text-white text-lg font-bold font-heading mb-2">Step 2</h2>
              <p class="text-purple-200">Join ongoing rooms for focus and connection or create your study space.</p>
            </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 py-6 px-14 flex items-center justify-between flex-wrap gap-4">
      <div>
        <h2 class="font-bold font-heading mb-2">Privacy Settings</h2>
        <p class="text-gray-600 max-w-lg">This site uses third-party website tracking technologies to provide and continually improve our services.</p>
      </div>
      <div class="flex gap-4 flex-wrap w-full sm:w-auto"><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center py-4 px-6 h-14 inline-flex items-center justify-center rounded-full border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Deny</a><a x-on:click.prevent="open = false" class="w-full sm:w-auto text-center py-4 px-6 h-14 inline-flex items-center justify-center rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">Accept All</a></div>
    </div>
  </div>
</div>

<section class="py-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>