Tailwind CSS Components

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-3xl lg:text-5xl font-bold font-heading mb-4">How it works</h1>
    <p class="text-center text-purple-200 mb-20">What steps do I need to take to join?</p>
    <div class="bg-orange-500 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-orange-400 hover:border-orange-50 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="white"></path>
                    <path d="M12 7V17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7Z" fill="white"></path>
                  </svg>
                  <div class="flex-1">
                    <h2 class="text-white font-bold font-heading mb-3">Join or Create Room</h2>
                    <p class="text-orange-50 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-50">

<section class="py-24 bg-purple-900">
  <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-orange-500 rounded-2xl py-6 px-4 h-full flex flex-col justify-center">
          <h2 class="text-white text-5xl lg:text-6xl font-bold font-heading text-center mb-4">101K+</h2>
          <p class="text-white 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-orange-500 rounded-2xl py-6 px-4 mb-6">
          <h2 class="text-white text-5xl lg:text-6xl font-bold font-heading text-center mb-4">2M+</h2>
          <p class="text-white font-medium text-center">Happy users and keep growing</p>
        </div>
        <div class="bg-orange-500 rounded-2xl py-6 px-4">
          <h2 class="text-white text-5xl lg:text-6xl font-bold font-heading text-center mb-4">94K</h2>
          <p class="text-white font-medium text-center">Supported file extensions</p>
        </div>
      </div>
    </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="relative z-10">
      <div class="bg-white rounded-5xl border-2 border-orange-400 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 h-14 inline-flex items-center justify-center py-4 px-6 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="overflow-hidden bg-purple-900" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <div class="flex items-center gap-6">
        <div class="pr-6 border-r-2 border-transparent lg:border-purple-400">
          <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
              <rect width="32" height="32" rx="8" fill="white"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="#530031"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="#530031"></path>
            </svg>
          </a>
        </div>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="text-white group-hover:text-opacity-70 transition duration-200">
                <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>
              </div>
            </a>
          </li>

<section class="overflow-hidden py-24 relative">
  <div class="absolute top-0 left-0 w-full bg-orange-500 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 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="bg-purple-900 py-16">
  <div class="container px-4 mx-auto">
    <h1 class="text-white 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-purple-200 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-purple-900 rounded-3xl border-2 border-orange-500 shadow-md p-8 w-3/4 md:max-w-md">
        <p class="text-white 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="text-white 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-500"></div>
      <div class="w-full h-full absolute md:top-5 md:right-5 rounded-5xl bg-orange-200"></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-white 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-orange-100">
    <div class="container px-4 mx-auto">
      <h1 class="text-4xl lg:text-5xl font-bold font-heading text-center mb-6 pt-16">Latest articles and releases</h1>
      <p class="text-gray-600 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-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab1.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab1.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="#">All Articles</a>
        <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab2.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab2.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="#">Getting Started</a>
        <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab3.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab3.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="#">Learning Resources</a>
        <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'border border-purple-700 bg-purple-900 hover:bg-purple-800 focus:ring focus:ring-purple-800 text-white': tab == $refs.tab4.textContent, 'border border-gray-200 bg-white hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab4.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="#">Stories</a>
      </div>
      <div class="flex flex-wrap mb-8 pb-8 border-b border-orange-200 -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">
              <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="#FFC96D"></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="#FFC96D"></path>

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-white 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="text-white flex gap-2 flex-wrap">
        <span>Check out our</span>
        <span class="flex items-center gap-1">
          <span class="text-orange-500 font-bold font-heading">Open Roles</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M2.16663 10C2.16663 5.67616 5.6761 2.16669 9.99996 2.16669C14.3238 2.16669 17.8333 5.67616 17.8333 10C17.8333 14.3239 14.3238 17.8334 9.99996 17.8334C5.6761 17.8334 2.16663 14.3239 2.16663 10ZM10.7952 13.7119L13.2952 11.2119C13.7321 10.775 13.7321 10.0584 13.2952 9.62147C12.8583 9.18454 12.1417 9.18454 11.7047 9.62147L11.125 10.2012V7.08335C11.125 6.46554 10.6178 5.95835 9.99996 5.95835C9.38215 5.95835 8.87496 6.46554 8.87496 7.08335V10.2012L8.29518 9.62147C7.85825 9.18454 7.14167 9.18454 6.70474 9.62147C6.26781 10.0584 6.26781 10.775 6.70474 11.2119L9.20474 13.7119C9.42845 13.9356 9.71617 14.0417 9.99996 14.0417C10.2837 14.0417 10.5715 13.9356 10.7952 13.7119Z" fill="#FF7100" stroke="#FF7100"></path>
          </svg>
        </span>
        <span>at the bottom of the page</span>
      </p>
    </div>
    <h2 class="text-white text-3xl font-bold font-heading mb-4">What we’re building</h2>
    <p class="text-purple-200 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-purple-200 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-white text-3xl font-bold font-heading mb-4">Benefits</h2>
    <p class="text-purple-200 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-purple-900">
  <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-white 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-purple-200 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-orange-50 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-purple-900 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-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" href="#">
              <span class="text-sm font-semibold text-white">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="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <p class="text-purple-900 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-purple-900 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-purple-900">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-white text-4xl lg:text-5xl font-bold font-heading mb-4">Discover features</h1>
    <p class="text-center text-purple-200 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-white text-lg font-bold font-heading mb-4">Study room. Personal or group.</h2>
          <p class="text-purple-200">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="py-24 overflow-hidden bg-purple-900">
  <div class="container mx-auto px-4">
    <div class="flex items-end justify-between flex-wrap gap-4 mb-24">
      <div>
        <h1 class="text-white text-4xl lg:text-5xl font-bold font-heading mb-4">Join our events</h1>
        <p class="text-purple-200 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 h-14 inline-flex items-center justify-center text-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-orange-200 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="pt-24 pb-14 bg-purple-900">
  <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-purple-200 hover:text-white transition duration-200" href="#">Features</a></li>
          <li><a class="text-purple-200 hover:text-white transition duration-200" href="#">How it works</a></li>
          <li><a class="text-purple-200 hover:text-white transition duration-200" href="#">Pricing</a></li>
          <li><a class="text-purple-200 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-purple-200 hover:text-white transition duration-200" href="#">About</a></li>
          <li><a class="text-purple-200 hover:text-white transition duration-200" href="#">Our Mission</a></li>
          <li class="flex items-center flex-wrap gap-2">
            <a class="text-purple-200 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-purple-200 hover:text-white transition duration-200" href="#">Contact</a></li>
        </ul>

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

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

<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="overflow-hidden py-12 bg-white">
  <div class="container mx-auto px-4">
    <div class="bg-orange-200 rounded-2xl pt-8 pl-8 overflow-hidden">
      <div class="bg-white shadow rounded-xl p-4 inline-flex flex-wrap gap-2 mb-4">
        <img src="solstice-assets/images/features/award1.png" alt="">
        <img src="solstice-assets/images/features/award2.png" alt="">
        <img src="solstice-assets/images/features/award3.png" alt="">
        <img src="solstice-assets/images/features/award4.png" alt="">
      </div>
      <div class="bg-white rounded-tl-2xl pl-8 pt-8 relative">
        <div class="hidden sm:block absolute right-6 -top-24 bg-white shadow-md rounded-xl p-4">
          <p class="text-sm font-semibold mb-4">Leaderboard</p>
          <div class="bg-orange-50 rounded-lg p-3 flex items-center flex-wrap gap-6">
            <p class="text-orange-500 text-xs font-semibold">2216</p>
            <div class="flex items-center gap-4">
              <img class="w-8 h-8" src="solstice-assets/images/features/men-avatar3png.png" alt="">
              <p class="text-sm font-medium">Rob Scott</p>
            </div>
          </div>
          <div class="p-3 flex items-center flex-wrap gap-6">
            <p class="text-gray-400 text-xs font-semibold">2217</p>
            <div class="flex items-center gap-4">
              <img class="w-8 h-8" src="solstice-assets/images/features/men-avatar4.png" alt="">
              <p class="text-sm font-medium">Victor Borg</p>

<section class="py-24 bg-purple-900">
  <div class="container mx-auto px-4 relative">
    <div class="border-t border-b border-purple-700 py-12">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 p-4">
          <div class="border border-orange-100 rounded-md bg-orange-50 px-2 py-1 inline-flex items-center gap-2 mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M8.62293 3.37707C8.567 3.32115 8.50813 3.21714 8.50077 3.02581C8.62835 3.19081 8.77541 3.3237 8.91729 3.42581C8.95382 3.45211 8.99065 3.47685 9.02752 3.5H9.015C8.79742 3.5 8.68271 3.43685 8.62293 3.37707ZM10.485 3.5H10.469C10.508 3.47551 10.547 3.44928 10.5856 3.42134C10.7259 3.31979 10.8723 3.18774 10.9993 3.02426C10.9922 3.21658 10.9331 3.321 10.8771 3.37707C10.8173 3.43685 10.7026 3.5 10.485 3.5Z" fill="#FF7100" stroke="#FF7100"></path>
              <path d="M9.015 4.75C8.04 4.75 7.25 3.96 7.25 2.985V1.5C7.25 1.225 7.025 1 6.75 1H3.5C2.12 1 1 2.115 1 3.49V6.975C1 8.355 2.12 9.475 3.5 9.475H4.25C4.39 9.475 4.57 9.565 4.65 9.675L5.4 10.67C5.73 11.11 6.27 11.11 6.6 10.67L7.35 9.675C7.445 9.55 7.595 9.475 7.75 9.475H8.505C9.885 9.475 11 8.36 11 6.98V5.25C11 4.975 10.775 4.75 10.5 4.75H9.015ZM4 6C3.72 6 3.5 5.775 3.5 5.5C3.5 5.225 3.72 5 4 5C4.275 5 4.5 5.225 4.5 5.5C4.5 5.775 4.28 6 4 6ZM6 6C5.72 6 5.5 5.775 5.5 5.5C5.5 5.225 5.72 5 6 5C6.275 5 6.5 5.225 6.5 5.5C6.5 5.775 6.28 6 6 6Z" fill="#FF7100"></path>
            </svg>
            <span class="text-orange-500 text-sm font-medium">Newsletter</span>
          </div>
          <h1 class="text-4xl lg:text-5xl text-white font-bold font-heading max-w-sm lg:max-w-lg">Join 14K people embrace fun learning</h1>
        </div>
        <div class="w-full lg:w-1/2 p-4">
          <form action="">
            <div class="flex flex-wrap gap-4 mb-6">
              <input class="flex-1 rounded-full p-4 outline-none border border-orange-100 shadow placeholder-gray-500 focus:ring focus:ring-orange-200 transition duration-200" type="text" placeholder="Email address">
              <button class="w-full sm:w-auto 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="overflow-hidden pt-10 lg:pb-24 bg-orange-500">
  <div class="container mx-auto px-4 relative" style="height:600px;">
    <div class="flex justify-center md:justify-between">
      <div class="hidden lg:block">
        <div class="w-80 h-80 rounded-3xl bg-white bg-opacity-20 relative z-10"></div>
        <div class="w-80 h-80 rounded-3xl relative z-10" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);"></div>
      </div>
      <div class="hidden lg:block">
        <div class="w-80 h-80 rounded-3xl bg-white bg-opacity-20 relative z-10"></div>
        <div class="w-80 h-80 rounded-3xl relative z-10" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.20) 100%);"></div>
      </div>
    </div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full">
      <div class="flex flex-col justify-center h-full py-12 px-8 relative">
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2">
          <div class="flex justify-center gap-6">
            <div class="bg-orange-500 bg-opacity-60 w-60 h-60"></div>
            <div class="bg-orange-500 bg-opacity-60 w-60 h-60"></div>
          </div>
        </div>
        <h1 class="text-center text-white text-8xl sm:text-9xl font-bold font-heading mb-2">404</h1>
        <div class="relative z-20">
          <p class="text-center text-white text-lg mb-10 max-w-lg mx-auto">The page you are looking for was moved, removed, renamed or might have never existed!</p>
          <div class="flex justify-center"><a class="w-full sm:w-auto text-center h-14 inline-flex items-center justify-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>

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