Tailwind CSS Components

<section class="relative pt-24 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-4 font-heading font-semibold text-center text-6xl sm:text-7xl text-white" >Connect with freelance developers</h2>
    <p class="mb-11 text-gray-400 text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint</p>
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full lg:w-1/2 p-6">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="lg:max-w-sm p-0.5 bg-gradient-green rounded-10">
              <div class="p-7 bg-gradient-black rounded-10">
                <div class="flex flex-wrap -m-2 mb-4">
                  <div class="w-auto p-2"><img src="gradia-assets/elements/features/chart-square-bar.svg" alt=""></div>
                  <div class="w-auto p-2">
                    <h3 class="font-heading font-bold text-white text-xl" >Daily analytics</h3>
                  </div>
                </div>
                <p class="text-gray-400" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
              </div>
            </div>
          </div>
          <div class="w-full">
            <div class="lg:max-w-sm p-0.5 rounded-10">
              <div class="p-7 rounded-10">
                <div class="flex flex-wrap -m-2 mb-4">

<section class="relative py-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="pt-16 px-16 bg-gradient-cyan2 rounded-2xl">
      <div class="flex flex-wrap items-center -m-6 pb-16">
        <div class="w-auto lg:w-1/2 p-6">
          <div class="lg:max-w-md">
            <h2 class="mb-6 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >Sync all teams in a single platform.</h2>
            <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
            <div class="flex flex-wrap -m-1.5">
              <div class="w-full lg:w-auto p-1.5">
                <button class="group relative font-heading px-6 py-4 w-full lg:w-auto uppercase text-white text-xs font-semibold bg-gray-900 overflow-hidden rounded-md tracking-px">
                  <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gray-800"></div>
                  <p class="relative z-10" >Build your team</p>
                </button>
              </div>
              <div class="w-full lg:w-auto p-1.5">
                <button class="font-heading px-6 py-4 w-full lg:w-auto uppercase text-gray-900 text-xs font-semibold bg-white hover:bg-gray-50 rounded-md tracking-px" >Learn more</button>
              </div>
            </div>
          </div>
        </div>
        <div class="w-auto lg:w-1/2 p-6"><img class="mx-auto transform hover:-translate-x-24 transition ease-in-out duration-500" src="gradia-assets/images/features/team2.png" alt=""></div>
      </div>
      <ul class="flex flex-wrap w-full border-t border-white border-opacity-30">

<section class="overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="pt-28 pb-36 max-w-4xl mx-auto">
      <div class="max-w-md mb-20">
        <h2 class="mb-6 font-heading font-bold text-5xl sm:text-6xl text-gray-900" >Grow your video marketing channel fast</h2>
        <p class="text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat.</p>
      </div>
      <div class="flex flex-wrap -m-3">
        <div class="w-full md:w-1/2 p-3">
          <div class="h-full p-10 bg-gradient-gray rounded-2xl">
            <div class="flex flex-wrap items-center mb-32">
              <div class="w-auto p-2"><img src="gradia-assets/elements/features/video-camera.svg" alt=""></div>
              <div class="w-auto p-2">
                <p class="font-semibold text-gray-900 text-lg" >Unlimited Videos</p>
              </div>
            </div>
            <h3 class="font-heading font-semibold text-gray-900 text-3xl" >Record Screen. Share with anyone without taking the hassle.</h3>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <div class="h-full p-8 bg-gradient-green rounded-2xl"><img class="relative top-12 mx-auto transform hover:scale-110 transition ease-in-out duration-500" src="gradia-assets/images/features/card2.png" alt=""></div>
        </div>
        <div class="w-full md:w-1/2 p-3">
          <div class="h-full p-16 bg-gradient-green rounded-2xl">

<section class="overflow-hidden pb-24" 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-gray-200">
          <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="#282828"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
            </svg>
          </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="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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 relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FF7100 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-white relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>

<section class="overflow-hidden pb-24" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center gap-8">
        <li>
          <a class="flex items-center flex-wrap gap-2 group" href="#">
            <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
            <div class="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>
        <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
        <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
        <li>
          <a class="flex items-center flex-wrap gap-2 group" href="#">
            <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
            <div class="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">

<section class="overflow-hidden pb-24" 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-gray-200">
          <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="#282828"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
            </svg>
          </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="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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 pb-24" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-gray-100">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 bg-white">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">

<section class="overflow-hidden pb-24 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 relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FF7100 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-purple-900 relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <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>
          <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="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>

<section class="overflow-hidden pb-24 bg-purple-900" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-purple-800">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <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>
          <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="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="text-white group-hover:text-opacity-70 transition duration-200">

<section class="overflow-hidden pb-24 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 bg-purple-900 pb-24" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-purple-800">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <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>
          <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="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="text-white group-hover:text-opacity-70 transition duration-200">

<section class="overflow-hidden pb-24 bg-orange-100" 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-gray-200">
          <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="#282828"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
            </svg>
          </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="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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 relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FF7100 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-orange-100 relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>

<section class="overflow-hidden pb-24 bg-orange-100" x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-6">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center gap-8">
        <li>
          <a class="flex items-center flex-wrap gap-2 group" href="#">
            <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
            <div class="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>
        <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
        <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
        <li>
          <a class="flex items-center flex-wrap gap-2 group" href="#">
            <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
            <div class="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">

<section class="overflow-hidden pb-24 bg-orange-100" 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-gray-200">
          <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="#282828"></rect>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M28 14L28 9C28 8.44772 27.5523 8 27 8L24 8C23.4477 8 23 8.44772 23 9L23 13C23 16.3137 20.3137 19 17 19L13 19C12.4477 19 12 19.4477 12 20L12 23C12 23.5523 12.4477 24 13 24L18 24C23.5228 24 28 19.5228 28 14Z" fill="white"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4 18L4 23C4 23.5523 4.44772 24 5 24L8 24C8.55228 24 9 23.5523 9 23L9 19C9 15.6863 11.6863 13 15 13L19 13C19.5523 13 20 12.5523 20 12L20 9C20 8.44771 19.5523 8 19 8L14 8C8.47715 8 4 12.4772 4 18Z" fill="white"></path>
            </svg>
          </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="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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 bg-orange-100 pb-24" x-data="{ mobileNavOpen: false }">
  <div class="border-b border-orange-200">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
        </a>
        <ul class="hidden lg:flex items-center gap-8">
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Platform</span>
              <div class="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>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
          <li class="hover:text-opacity-70 transition duration-200"><a href="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="group-hover:text-opacity-70 transition duration-200">Resources</span>
              <div class="group-hover:text-opacity-70 transition duration-200">

<section class="overflow-hidden pb-24 bg-orange-500" 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-orange-300">
          <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="#FF7100"></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="#FF7100"></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 relative" x-data="{ mobileNavOpen: false }">
  <div class="h-5" style="background: linear-gradient(99deg, #FFA632 6.68%, #FFE0A5 49.09%, #FFC96D 93.31%);"></div>
  <div class="bg-orange-500 relative z-10">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between py-6 relative z-10">
        <a href="#">
          <img src="solstice-assets/images/logos/solstice-logo-light.svg" alt="">
        </a>
        <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>
          <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="#">Community</a></li>
          <li>
            <a class="flex items-center flex-wrap gap-2 group" href="#">
              <span class="text-white group-hover:text-opacity-70 transition duration-200">Resources</span>