Shuffle Components in Gradia library

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <div class="flex flex-wrap">
            <div class="w-auto">
              <button class="font-heading block py-2 px-5 mr-5 text-lg text-gray-900 rounded-10" >Login</button>
            </div>
            <div class="w-auto">
              <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-gray-900 font-medium bg-gray-300 overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-300 transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-white rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-white h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-gray-900 font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-gray-900 font-medium bg-gray-300 overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-300 transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-white rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="py-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg">
          <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-white" >Open positions</h2>
          <p class="text-gray-400 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap border border-gray-800 divide-y divide-y divide-gray-800">
          <div class="w-full">
            <div class="p-6">
              <div class="flex flex-wrap items-end justify-between -m-2">
                <div class="w-full p-2 sm:flex-1">
                  <p class="mb-5 max-w-max px-2.5 py-1 text-gray-300 text-xs font-heading font-semibold uppercase bg-gray-900 tracking-px rounded-full" >Full Time</p>
                  <h3 class="mb-1 font-heading font-bold text-lg text-white" >Team Leader</h3>
                  <p class="text-gray-500 text-base" >Toledo, USA</p>
                </div>
                <div class="w-full sm:w-auto p-2">
                  <button class="group relative font-heading py-2 px-3.5 font-medium text-base text-gray-50 border border-gray-50 hover:border-gray-400 overflow-hidden rounded">
                    <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-white"></div>
                    <p class="relative z-10 group-hover:text-black" >Apply Now</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full">
            <div class="p-6">
              <div class="flex flex-wrap items-end justify-between -m-2">
                <div class="w-full p-2 sm:flex-1">
                  <p class="mb-5 max-w-max px-2.5 py-1 text-gray-300 text-xs font-heading font-semibold uppercase bg-gray-900 tracking-px rounded-full" >Full Time</p>
                  <h3 class="mb-1 font-heading font-bold text-lg text-white" >Software Tester</h3>
                  <p class="text-gray-500 text-base" >Remote</p>
                </div>
                <div class="w-full sm:w-auto p-2">
                  <button class="group relative font-heading py-2 px-3.5 font-medium text-base text-gray-50 border border-gray-50 hover:border-gray-400 overflow-hidden rounded">
                    <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-white"></div>
                    <p class="relative z-10 group-hover:text-black" >Apply Now</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full">
            <div class="p-6">
              <div class="flex flex-wrap items-end justify-between -m-2">
                <div class="w-full p-2 sm:flex-1">
                  <p class="mb-5 max-w-max px-2.5 py-1 text-gray-300 text-xs font-heading font-semibold uppercase bg-gray-900 tracking-px rounded-full" >Full Time</p>
                  <h3 class="mb-1 font-heading font-bold text-lg text-white" >Software Developer</h3>
                  <p class="text-gray-500 text-base" >Toledo, USA</p>
                </div>
                <div class="w-full sm:w-auto p-2">
                  <button class="group relative font-heading py-2 px-3.5 font-medium text-base text-gray-50 border border-gray-50 hover:border-gray-400 overflow-hidden rounded">
                    <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-white"></div>
                    <p class="relative z-10 group-hover:text-black" >Apply Now</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full">
            <div class="p-6">
              <div class="flex flex-wrap items-end justify-between -m-2">
                <div class="w-full p-2 sm:flex-1">
                  <p class="mb-5 max-w-max px-2.5 py-1 text-gray-300 text-xs font-heading font-semibold uppercase bg-gray-900 tracking-px rounded-full" >Full Time</p>
                  <h3 class="mb-1 font-heading font-bold text-lg text-white" >UI/UX Designer</h3>
                  <p class="text-gray-500 text-base" >Toledo, USA</p>
                </div>
                <div class="w-full sm:w-auto p-2">
                  <button class="group relative font-heading py-2 px-3.5 font-medium text-base text-gray-50 border border-gray-50 hover:border-gray-400 overflow-hidden rounded">
                    <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-white"></div>
                    <p class="relative z-10 group-hover:text-black" >Apply Now</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 bg-black overflow-hidden"><img class="absolute bottom-0 left-0" src="gradia-assets/elements/footers/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 lg:w-5/12 p-6">
        <div class="flex flex-col justify-between h-full max-w-sm">
          <div class="mb-11"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></div>
          <div>
            <p class="mb-14 text-gray-200 text-sm" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pretium dui convallis sagittis tempus mi viverra eget. Quisque justo, blandit orci.</p>
            <p class="text-gray-400 text-sm" >© Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">
        <div class="h-full">
          <h3 class="mb-7 font-heading font-medium text-base text-gray-500 tracking-px" >Company</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Features</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Pricing</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Affiliate Program</a></li>
            <li><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Press Kit</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">
        <div class="h-full">
          <h3 class="mb-7 font-heading font-medium text-base text-gray-500 tracking-px" >Support</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Account</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Help</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Contact Us</a></li>
            <li><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Customer Support</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-3/12 p-6">
        <div class="flex flex-col justify-between h-full">
          <div>
            <h3 class="mb-7 font-heading font-medium text-base text-gray-500 tracking-px" >Contact Info</h3>
            <ul class="mb-6">
              <li class="mb-4 font-heading font-medium text-base text-white" >hi@gradia.com</li>
              <li class="font-heading font-medium text-base text-white" >+1 (394) 593 1994</li>
            </ul>
          </div>
          <div class="flex flex-wrap items-center -ml-5">
            <div class="w-auto p-5"><a href="#">
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M13.6488 1.58924C13.137 1.81672 12.5967 1.9589 12.028 2.0442C12.5967 1.70298 13.0517 1.16271 13.2507 0.508707C12.7105 0.821493 12.1133 1.04897 11.4593 1.19115C10.9475 0.650883 10.2082 0.309662 9.41201 0.309662C7.87652 0.309662 6.62537 1.5608 6.62537 3.0963C6.62537 3.32378 6.65381 3.52283 6.71068 3.72187C4.40744 3.60813 2.33168 2.49916 0.938358 0.793058C0.710877 1.21958 0.568702 1.67455 0.568702 2.18638C0.568702 3.15317 1.0521 4.00622 1.81985 4.51805C1.36488 4.48962 0.938358 4.37588 0.540266 4.17683V4.20527C0.540266 5.57015 1.50706 6.70755 2.78664 6.96347C2.55916 7.02034 2.30324 7.04877 2.04733 7.04877C1.87672 7.04877 1.67767 7.02034 1.50706 6.9919C1.87672 8.10087 2.90038 8.92549 4.12309 8.92549C3.15629 9.6648 1.96202 10.1198 0.654007 10.1198C0.426526 10.1198 0.199046 10.1198 0 10.0913C1.25114 10.8875 2.70133 11.3425 4.2937 11.3425C9.44045 11.3425 12.2555 7.07721 12.2555 3.38065C12.2555 3.26691 12.2555 3.12473 12.2555 3.01099C12.7958 2.64134 13.2792 2.15794 13.6488 1.58924Z" fill="white"></path>
                </svg></a></div>
            <div class="w-auto p-5"><a href="#">
                <svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.34923 14.8715V8.08792H0.0664062V5.44422H2.34923V3.49457C2.34923 1.23201 3.73112 0 5.74948 0C6.71629 0 7.54722 0.0719815 7.78937 0.104155V2.46866L6.38954 2.4693C5.29184 2.4693 5.0793 2.9909 5.0793 3.75633V5.44422H7.6972L7.35634 8.08792H5.07929V14.8715H2.34923Z" fill="white"></path>
                </svg></a></div>
            <div class="w-auto p-5"><a href="#">
                <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8.78828 1.49101C10.9976 1.49101 11.2592 1.49928 12.132 1.53908C12.6568 1.5455 13.1765 1.64186 13.6687 1.82396C14.0257 1.96161 14.3498 2.17247 14.6203 2.44298C14.8908 2.71348 15.1017 3.03763 15.2393 3.39456C15.4214 3.88675 15.5178 4.40652 15.5242 4.93127C15.5636 5.80404 15.5723 6.06568 15.5723 8.275C15.5723 10.4843 15.564 10.746 15.5242 11.6187C15.5178 12.1435 15.4214 12.6633 15.2393 13.1554C15.1017 13.5124 14.8908 13.8365 14.6203 14.107C14.3498 14.3775 14.0257 14.5884 13.6687 14.726C13.1765 14.9081 12.6568 15.0045 12.132 15.0109C11.2596 15.0503 10.998 15.059 8.78828 15.059C6.57857 15.059 6.31693 15.0507 5.44455 15.0109C4.91979 15.0045 4.40003 14.9081 3.90784 14.726C3.55091 14.5884 3.22676 14.3775 2.95626 14.107C2.68575 13.8365 2.47489 13.5124 2.33724 13.1554C2.15513 12.6633 2.05878 12.1435 2.05236 11.6187C2.01295 10.746 2.00428 10.4843 2.00428 8.275C2.00428 6.06568 2.01256 5.80404 2.05236 4.93127C2.05878 4.40652 2.15513 3.88675 2.33724 3.39456C2.47489 3.03763 2.68575 2.71348 2.95626 2.44298C3.22676 2.17247 3.55091 1.96161 3.90784 1.82396C4.40003 1.64186 4.91979 1.5455 5.44455 1.53908C6.31732 1.49967 6.57896 1.49101 8.78828 1.49101ZM8.78828 0C6.54232 0 6.2594 0.00945666 5.37678 0.0496476C4.69 0.0633078 4.01052 0.193342 3.36723 0.43422C2.81539 0.642135 2.31556 0.967957 1.90262 1.38895C1.48125 1.80204 1.15515 2.30215 0.947104 2.85435C0.706226 3.49764 0.576192 4.17712 0.562531 4.86389C0.523129 5.74573 0.513672 6.02864 0.513672 8.27461C0.513672 10.5206 0.523129 10.8035 0.56332 11.6861C0.57698 12.3729 0.707014 13.0524 0.947892 13.6957C1.15571 14.2478 1.48153 14.7479 1.90262 15.161C2.31579 15.5821 2.8159 15.908 3.36802 16.1158C4.01131 16.3567 4.69079 16.4867 5.37757 16.5004C6.26019 16.5398 6.54192 16.55 8.78907 16.55C11.0362 16.55 11.3179 16.5405 12.2006 16.5004C12.8873 16.4867 13.5668 16.3567 14.2101 16.1158C14.7596 15.9028 15.2586 15.5774 15.6752 15.1606C16.0918 14.7437 16.4168 14.2445 16.6295 13.6949C16.8703 13.0516 17.0004 12.3721 17.014 11.6853C17.0534 10.8035 17.0629 10.5206 17.0629 8.27461C17.0629 6.02864 17.0534 5.74573 17.0132 4.8631C16.9996 4.17633 16.8695 3.49685 16.6287 2.85356C16.4209 2.30144 16.095 1.80133 15.6739 1.38816C15.2608 0.967073 14.7607 0.641246 14.2085 0.433432C13.5653 0.192554 12.8858 0.0625198 12.199 0.0488596C11.3172 0.00945672 11.0342 0 8.78828 0Z" fill="white"></path>
                  <path d="M8.78632 4.02582C7.94591 4.02582 7.12436 4.27503 6.42559 4.74194C5.72681 5.20885 5.18218 5.87248 4.86056 6.64892C4.53895 7.42537 4.4548 8.27974 4.61876 9.104C4.78272 9.92827 5.18741 10.6854 5.78168 11.2797C6.37594 11.8739 7.13307 12.2786 7.95734 12.4426C8.78161 12.6065 9.63598 12.5224 10.4124 12.2008C11.1889 11.8792 11.8525 11.3345 12.3194 10.6358C12.7863 9.93698 13.0355 9.11544 13.0355 8.27503C13.0355 7.14807 12.5878 6.06726 11.791 5.27038C10.9941 4.4735 9.91328 4.02582 8.78632 4.02582ZM8.78632 11.0332C8.2408 11.0332 7.70753 10.8715 7.25394 10.5684C6.80036 10.2653 6.44683 9.83454 6.23807 9.33054C6.02931 8.82655 5.97469 8.27197 6.08111 7.73693C6.18754 7.20189 6.45023 6.71042 6.83598 6.32468C7.22172 5.93894 7.71318 5.67625 8.24822 5.56982C8.78326 5.4634 9.33784 5.51802 9.84184 5.72678C10.3458 5.93554 10.7766 6.28907 11.0797 6.74265C11.3828 7.19623 11.5445 7.7295 11.5445 8.27503C11.5445 9.00655 11.2539 9.70811 10.7367 10.2254C10.2194 10.7426 9.51784 11.0332 8.78632 11.0332Z" fill="white"></path>
                  <path d="M13.2058 4.85053C13.7542 4.85053 14.1988 4.40597 14.1988 3.85758C14.1988 3.30918 13.7542 2.86462 13.2058 2.86462C12.6575 2.86462 12.2129 3.30918 12.2129 3.85758C12.2129 4.40597 12.6575 4.85053 13.2058 4.85053Z" fill="white"></path>
                </svg></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ toggle: false }" class="pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl mx-auto">
      <h2 class="mb-9 font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Everything you need to launch a website</h2>
      <div class="flex flex-wrap justify-center -m-5 mb-20">
        <div class="w-auto p-5">
          <div class="flex items-center font-heading font-medium text-gray-600 text-base">
            <input x-on:click="toggle = false" class="w-5 h-5 mr-2" id="radio1" type="radio" name="radio" value="radio" checked="">
            <label x-on:click="toggle = false" for="radio1"><span >Annually </span><span class="text-blue-600" >(Save up to 25%)</span></label>
          </div>
        </div>
        <div class="w-auto p-5">
          <div class="flex items-center font-heading font-medium text-gray-600 text-base">
            <input x-on:click="toggle = true" class="w-5 h-5 mr-2" id="radio2" type="radio" name="radio" value="radio">
            <label x-on:click="toggle = true" for="radio2" >Monthly</label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 bg-white border border-gray-200 rounded-10">
          <h3 class="mb-9 font-heading font-medium text-base text-black" >Free Plan</h3>
          <div class="mb-9 pb-9 flex border-b border-gray-200"><span class="font-heading font-bold text-6xl sm:text-7xl text-gray-900" >$0</span><span class="text-sm text-gray-700 self-end" >/ Per Month</span></div>
          <ul class="mb-10">
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >10 GB Disk Space</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >1 Year Support</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >500 Queries</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Video Collections</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Learning Path</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Download Images</p>
            </li>
            <li class="flex items-center font-heading font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Free Custom Domain</p>
            </li>
          </ul>
          <button class="mb-3 w-full font-heading font-bold text-base text-black overflow-hidden rounded-md">
            <div class="px-9 py-4 border border-gray-200 hover:border-gray-300 overflow-hidden rounded-md">
              <p >Sign up. It’s Free</p>
            </div>
          </button>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 bg-white border border-gray-200 rounded-10">
          <h3 class="mb-9 font-heading font-medium text-base text-black" >Basic Plan</h3>
          <div class="mb-9 pb-9 flex border-b border-gray-200">
            <span :class="{ 'hidden': toggle }" class="font-heading font-bold text-6xl sm:text-7xl text-gray-900" >$60</span>
            <span :class="{ 'hidden': !toggle }" class="hidden font-heading font-bold text-6xl sm:text-7xl text-gray-900" >$5</span>
            <span :class="{ 'hidden': toggle }" class="text-sm text-gray-700 self-end" >/ Per Annually</span>
            <span :class="{ 'hidden': !toggle }" class="hidden text-sm text-gray-700 self-end" >/ Per Month</span>
          </div>
          <ul class="mb-10">
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >10 GB Disk Space</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >1 Year Support</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >600 Queries</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Video Collections</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Learning Path</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Download Images</p>
            </li>
            <li class="flex items-center font-heading font-medium text-base text-gray-400">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p >Free Custom Domain</p>
            </li>
          </ul>
          <button class="mb-3 w-full font-heading font-bold text-base text-black overflow-hidden rounded-md">
            <div class="px-9 py-4 border border-gray-200 hover:border-gray-300 overflow-hidden rounded-md">
              <p >Start free 1 month trial</p>
            </div>
          </button>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 bg-black border border-gray-200 rounded-10">
          <h3 class="mb-9 font-heading font-medium text-base text-white" >Popular Plan</h3>
          <div class="mb-9 pb-9 flex border-b border-gray-700">
            <span :class="{ 'hidden': toggle }" class="font-heading font-bold text-6xl sm:text-7xl text-white" >$45</span>
            <span :class="{ 'hidden': !toggle }" class="hidden font-heading font-bold text-6xl sm:text-7xl text-white" >$540</span>
            <span :class="{ 'hidden': toggle }" class="text-sm text-white self-end" >/ Per Annually</span>
            <span :class="{ 'hidden': !toggle }" class="hidden text-sm text-white self-end" >/ Per Month</span>
          </div>
          <ul class="mb-10">
            <li class="flex items-center font-heading mb-4 font-medium text-base text-white">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >10 GB Disk Space</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-white">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >1 Year Support</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-white">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >800 Queries</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-white">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Video Collections</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-white">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Learning Path</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-500">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="white"></path>
              </svg>
              <p >Download Images</p>
            </li>
            <li class="flex items-center font-heading font-medium text-base text-gray-500">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="white"></path>
              </svg>
              <p >Free Custom Domain</p>
            </li>
          </ul>
          <div class="group relative mb-3">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-cyan2 opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
            <button class="p-1 w-full">
              <div class="relative px-9 py-4 bg-gradient-cyan2 hover:border-gray-300 overflow-hidden rounded-md">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <p class="relative z-10 font-heading font-bold text-base text-black" >Start free 1 month trial</p>
              </div>
            </button>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 bg-white border border-gray-200 rounded-10">
          <h3 class="mb-9 font-heading font-medium text-base text-black" >Premium</h3>
          <div class="mb-9 pb-9 flex border-b border-gray-200">
            <span :class="{ 'hidden': toggle }" class="font-heading font-bold text-6xl sm:text-7xl text-gray-900" >$99</span>
            <span :class="{ 'hidden': !toggle }" class="visibility-item font-heading font-bold text-6xl sm:text-7xl text-gray-900" >$1188</span>
            <span :class="{ 'hidden': toggle }" class="text-sm text-gray-700 self-end" >/ Per Annual</span>
            <span :class="{ 'hidden': !toggle }" class="visibility-item text-sm text-gray-700 self-end" >/ Per Month</span>
          </div>
          <ul class="mb-10">
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >10 GB Disk Space</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >1 Year Support</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >1000 Queries</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Video Collections</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Learning Path</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Download Images</p>
            </li>
            <li class="flex items-center font-heading mb-4 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p >Free Custom Domain</p>
            </li>
          </ul>
          <button class="mb-3 w-full font-heading font-bold text-base text-black overflow-hidden rounded-md">
            <div class="px-9 py-4 border border-gray-200 hover:border-gray-300 overflow-hidden rounded-md">
              <p >Start free 1 month trial</p>
            </div>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-36 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <div class="p-7 bg-white rounded-10">
          <h2 class="mb-4 font-heading font-bold text-8xl sm:text-9xl text-gray-900" >43%</h2>
          <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Read case study</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-gradient-cyan transition ease-in-out duration-500"></div></a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <div class="p-7 bg-white rounded-10">
          <h2 class="mb-4 font-heading font-bold text-8xl sm:text-9xl text-gray-900" >79%</h2>
          <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Read case study</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-gradient-cyan transition ease-in-out duration-500"></div></a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <div class="p-7 bg-white rounded-10">
          <h2 class="mb-4 font-heading font-bold text-8xl sm:text-9xl text-gray-900" >16%</h2>
          <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Read case study</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-gradient-cyan transition ease-in-out duration-500"></div></a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <h2 class="mb-4 font-bold font-heading text-4xl text-gray-900" >Looking for growth?</h2>
        <p class="mb-7 text-base text-gray-600" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum, amet, neque vestibulum elit mi vitae lacus.</p>
        <button class="group p-0.5 mb-8 font-heading block w-full md:w-auto text-base text-gray-900 font-bold bg-white hover:bg-gray-50 bg-gradient-cyan overflow-hidden rounded-md">
          <div class="relative py-3.5 px-7 bg-white rounded">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
            <p class="relative z-10" >Book A Free Call</p>
          </div>
        </button>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-28 bg-gradient-gray2 overflow-hidden"><img class="absolute left-0 top-0 h-full" src="gradia-assets/elements/contact/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="md:max-w-lg">
      <h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >We’ve got your back!</h2>
      <p class="text-gray-600 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis.</p>
    </div>
    <div class="flex flex-wrap -m-6 pb-24 md:pb-0">
      <div class="flex w-full md:w-1/2 p-6 md:pb-0"><img class="self-end" src="gradia-assets/images/contact/woman.png" alt=""></div>
      <div class="flex w-full md:w-1/2 p-6">
        <div class="self-end flex flex-wrap -m-4 md:pb-24">
          <div class="w-full p-4">
            <div class="md:max-w-lg px-8 py-7 bg-white rounded-10">
              <div class="max-w-xs">
                <h3 class="mb-3 font-heading font-bold text-xl text-gray-900" >Get Started from Tutorials</h3>
                <p class="mb-8 text-gray-600 text-lg" >Contact us anytime, from anywhere. Get in touch.</p><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
                  <p class="mb-1" >Check All Our Tutorials</p>
                  <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a>
              </div>
            </div>
          </div>
          <div class="w-full p-4">
            <div class="md:max-w-lg px-8 py-7 bg-white rounded-10">
              <div class="max-w-xs">
                <h3 class="mb-3 font-heading font-bold text-xl text-gray-900" >24/7 Customer Support</h3>
                <p class="mb-8 text-gray-600 text-lg" >Contact us anytime, from anywhere. Get in touch.</p><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
                  <p class="mb-1" >Visit Our Help Center</p>
                  <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-28 bg-black overflow-hidden"><img class="absolute left-0 bottom-0 w-full" src="gradia-assets/elements/applications/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <h2 class="mb-6 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-white" >Try Gradia App Free</h2>
      <p class="mb-11 text-gray-400 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      <div class="flex flex-wrap justify-center -m-2 mb-32">
        <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/app-store-gradient-green.png" alt=""></a></div>
        <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/play-store-gradient-green.png" alt=""></a></div>
      </div><img class="mx-auto" src="gradia-assets/images/applications/phone-half.png" alt="">
    </div>
  </div>
</section>

<section class="pt-28 bg-gradient-orange overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-6 font-heading font-bold text-8xl sm:text-9xl md:text-10xl text-white" >Book free meetings with our experts.</h2>
          <p class="mb-8 text-base text-white" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <button class="mb-8 font-heading py-4 px-6 block w-full md:w-auto text-lg text-gray-900 font-bold bg-white hover:bg-gray-50 rounded-md" >Buy for $49.99 </button>
          <div class="flex flex-wrap -m-1.5">
            <p class="p-1.5 text-white" >Compatible with</p><img class="p-1.5" src="gradia-assets/elements/cta/apple.svg" alt=""><img class="p-1.5" src="gradia-assets/elements/cta/microsoft.svg" alt=""><img class="p-1.5" src="gradia-assets/elements/cta/android.svg" alt="">
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6 pb-0"><img class="mx-auto" src="gradia-assets/images/cta/mobile.png" alt=""></div>
    </div>
  </div>
</section>

<section class="py-36 overflow-hidden" x-data="{ tab: 1 }">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto">
      <div class="flex flex-wrap justify-center md:justify-between -m-6 mb-20">
        <div class="w-auto p-6">
          <a x-on:click.prevent="tab = 1" class="font-heading font-semibold text-lg text-gray-900 hover:text-gray-800" href="#">
            <p class="mb-2 px-7" >Create Free Account</p>
            <div :class="{ 'bg-gradient-cyan': tab == 1, 'bg-gray-200': tab != 1 }" class="h-0.5 bg-gradient-cyan"></div>
          </a>
        </div>
        <div class="w-auto p-6">
          <a x-on:click.prevent="tab = 2" class="font-heading font-semibold text-lg text-gray-900 hover:text-gray-800" href="#">
            <p class="mb-2 px-7" >Build A Team</p>
            <div :class="{ 'bg-gradient-cyan': tab == 2, 'bg-gray-200': tab != 2 }" class="h-0.5 bg-gray-200"></div>
          </a>
        </div>
        <div class="w-auto p-6">
          <a x-on:click.prevent="tab = 3" class="font-heading font-semibold text-lg text-gray-900 hover:text-gray-800" href="#">
            <p class="mb-2 px-7" >Start Your Project</p>
            <div :class="{ 'bg-gradient-cyan': tab == 3, 'bg-gray-200': tab != 3 }" class="h-0.5 bg-gray-200"></div></a>
          </div>
      </div>
      <div class="flex flex-wrap -m-11">
        <div class="w-full md:w-1/2 p-11"><img class="mx-auto" src="gradia-assets/images/how-it-works/illustration.png" alt=""></div>
        <div class="w-full md:w-1/2 p-11">
          <h2 class="mb-6 font-heading font-bold text-5xl text-gray-900" >Start with creating a free account on Gradia.</h2>
          <p class="mb-9 text-gray-900 text-base" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit justo, sit iaculis ultrices vitae pulvinar tellus. Volutpat, ut lacus tristique blandit ligula.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full lg:w-auto p-2">
              <button class="px-9 py-3.5 font-heading font-medium w-full lg:w-auto text-base text-white bg-blue-600 hover:bg-blue-700 rounded-md" >Book A Call</button>
            </div>
            <div class="w-full lg:w-auto p-2">
              <button class="px-9 py-3.5 font-heading font-medium w-full lg:w-auto text-base text-gray-900 bg-white hover:bg-gray-50 border border-gray-300 rounded-md" >Learn More</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="px-8 py-5 lg:py-8 bg-white">
    <div class="container mx-auto">
      <div class="flex items-center justify-between">
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center mr-10">
                <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
                <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
                <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
                <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Pricing</a></li>
              </ul>
            </div>
            <div class="w-auto lg:hidden">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                  <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-white h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center text-center justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-gray-900 font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-white rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="relative pt-24 pb-32 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Team Members</h2>
    <p class="mb-16 text-base max-w-md mx-auto text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap max-w-6xl mx-auto -m-7">
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Darlene Robertson</h3>
          <p class="text-sm text-gray-500" >Co-Founder, CEO </p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="xl:relative xl:top-16 text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md2.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Albert Flores</h3>
          <p class="text-sm text-gray-500" >Co-Founder, CEO </p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md3.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Leslie Alexander</h3>
          <p class="text-sm text-gray-500" >Chief Marketing Officer</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md4.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Esther Howard</h3>
          <p class="text-sm text-gray-500" >Software Developer</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="xl:relative xl:top-16 text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md5.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Darrell Steward</h3>
          <p class="text-sm text-gray-500" >Software Developer</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Annette Black</h3>
          <p class="text-sm text-gray-500" >CMO</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-16 pb-64 bg-black overflow-hidden"><img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="gradia-assets/elements/http-codes/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4"><img class="mx-auto mb-64" src="gradia-assets/logos/gradia-name-white.svg" alt="">
    <div class="md:max-w-lg mx-auto"><img class="mx-auto" src="gradia-assets/elements/http-codes/404.png" alt="">
      <div class="flex flex-wrap items-end justify-center -m-6">
        <div class="w-full md:w-1/2 p-6">
          <div class="md:max-w-xs">
            <h2 class="font-heading font-semibold text-white text-5xl" >Something went wrong!</h2>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-6"><a class="flex items-center max-w-max font-heading font-semibold text-xs text-white hover:text-gray-200 tracking-px uppercase" href="#">
            <div class="flex items-center -m-1">
              <div class="w-auto p-1">
                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div class="w-auto p-1">
                <p >Go back to Homepage</p>
              </div>
            </div></a></div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-36 bg-gray-100 overflow-hidden"><img class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2" src="gradia-assets/elements/testimonials/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <h2 class="mb-16 md:max-w-md md:ml-auto font-heading font-semibold text-5xl sm:text-6xl text-gray-900" >5,920+ people think Gradia is the best</h2>
        <div class="p-12 bg-white rounded-10">
          <h3 class="mb-5 font-heading font-medium text-xl text-black" >“Easy to use”</h3>
          <p class="mb-7 text-lg text-black" >“Amet minim mollit non deserunt ullam co 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-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar7.png" alt=""></div>
            <div class="w-auto p-1.5">
              <h3 class="font-heading font-semibold text-gray-900 text-lg" >Marvin McKinney</h3>
              <p class="text-sm text-gray-600" >Co-founder at Parkon</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -m-6">
          <div class="w-full lg:w-auto p-6">
            <div class="p-12 bg-white rounded-10">
              <h3 class="mb-5 font-heading font-medium text-xl text-black" >“Very fast video output”</h3>
              <p class="mb-7 text-lg text-black" >“Amet minim mollit non deserunt ullam co 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-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar8.png" alt=""></div>
                <div class="w-auto p-1.5">
                  <h3 class="font-heading font-semibold text-gray-900 text-lg" >Kathryn Murphy</h3>
                  <p class="text-sm text-gray-600" >Project Manager at Marron.ai</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full lg:w-auto p-6">
            <div class="p-12 bg-white rounded-10">
              <h3 class="mb-5 font-heading font-medium text-xl text-black" >“Better than anything”</h3>
              <p class="mb-7 text-lg text-black" >“Amet minim mollit non deserunt ullam co 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-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar8.png" alt=""></div>
                <div class="w-auto p-1.5">
                  <h3 class="font-heading font-semibold text-gray-900 text-lg" >Devon Lane</h3>
                  <p class="text-sm text-gray-600" >Digital Marketer</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <p class="mb-12 text-lg text-gray-900" >Join 2400+ other companies who shifted to Shuffle</p>
    <div class="flex flex-wrap -m-6 divide-x divide-gray-200">
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap -m-8">
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small4.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small3.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small1.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small5.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small2.png" alt=""></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-max md:mx-auto"><img class="mb-5" src="gradia-assets/logos/brands/capterra-logo.png" alt="">
          <p class="mb-2.5 font-heading font-semibold text-lg text-gray-900" >Trusted by 1M+ customers</p>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <div class="flex items-center -m-1"><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""></div>
            </div>
            <div class="w-auto p-1">
              <p class="font-heading font-medium text-base text-gray-900"><span >4.2/5 </span><span class="font-heading font-medium text-base text-gray-500" >(45k Reviews)</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-28 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-md">
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <div class="flex items-center justify-center w-12 h-12 bg-gradient-green rounded-full">
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.25 20.5833V10.9095C3.25 10.1851 3.61205 9.50861 4.21482 9.10676L11.7982 4.05121C12.5259 3.56602 13.4741 3.56602 14.2019 4.05121L21.7852 9.10676C22.3879 9.50861 22.75 10.1851 22.75 10.9095V20.5833M3.25 20.5833C3.25 21.7799 4.22005 22.75 5.41667 22.75H20.5833C21.78 22.75 22.75 21.7799 22.75 20.5833M3.25 20.5833L10.5625 15.7083M22.75 20.5833L15.4375 15.7083M3.25 10.8333L10.5625 15.7083M22.75 10.8333L15.4375 15.7083M15.4375 15.7083L14.2019 16.5321C13.4741 17.0173 12.5259 17.0173 11.7982 16.5321L10.5625 15.7083" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
            <div class="flex-1 p-3">
              <h2 class="mb-3.5 font-heading font-semibold text-4xl text-gray-900" >Join our newsletter</h2>
              <p class="text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <div class="mb-5 p-1 flex flex-col md:flex-row bg-white overflow-hidden focus-within:ring-4 focus-within:ring-indigo-500 border border-gray-200 rounded-10">
            <input class="w-full flex-1 px-5 py-3.5 text-base text-gray-500 bg-transparent outline-none placeholder-gray-500 rounded-tl-md rounded-bl-md" type="text" placeholder="Your email address">
            <div class="group relative">
              <div class="absolute top-0 left-0 w-full h-full bg-gradient-orange opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
              <button class="p-1 w-full font-heading font-semibold text-xs text-white uppercase tracking-px overflow-hidden rounded-md">
                <div class="relative py-4 px-8 bg-gradient-orange overflow-hidden rounded-md">
                  <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-900 transition ease-in-out duration-500"></div>
                  <p class="relative z-10" >Subscribe now</p>
                </div>
              </button>
            </div>
          </div>
          <p class="text-gray-500 text-sm" >We never share your information to any third party</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4 mb-12">
    <h2 class="mb-6 max-w-xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >A simple &amp; smart way to grow your marketing team</h2>
    <p class="mb-16 max-w-lg mx-auto text-center text-gray-600 text-lg" >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-8">
      <div class="w-full md:w-1/3 p-8"><a class="group" href="#">
          <div class="mb-9 overflow-hidden rounded-2xl"><img class="transform hover:scale-110 w-full transition ease-out duration-500" src="gradia-assets/images/features/experts.png" alt=""></div>
          <h3 class="mb-4 font-heading font-bold text-gray-900 text-xl group-hover:underline" >2100+ marketing experts</h3>
          <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Learn more</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a></div>
      <div class="w-full md:w-1/3 p-8"><a class="group" href="#">
          <div class="mb-9 overflow-hidden rounded-2xl"><img class="transform hover:scale-110 w-full transition ease-out duration-500" src="gradia-assets/images/features/insights.png" alt=""></div>
          <h3 class="mb-4 font-heading font-bold text-gray-900 text-xl group-hover:underline" >Live analytics &amp; insights</h3>
          <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Learn more</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a></div>
      <div class="w-full md:w-1/3 p-8"><a class="group" href="#">
          <div class="mb-9 overflow-hidden rounded-2xl"><img class="transform hover:scale-110 w-full transition ease-out duration-500" src="gradia-assets/images/features/results.png" alt=""></div>
          <h3 class="mb-4 font-heading font-bold text-gray-900 text-xl group-hover:underline" >Proven results</h3>
          <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Learn more</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a></div>
    </div>
  </div>
</section>

<section class="pt-24 pb-32 bg-gradient-gray2 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto mb-20">
      <h2 class="mb-4 font-heading font-semibold text-center text-6xl sm:text-7xl text-gray-900" >Got questions?</h2>
      <p class="text-lg text-gray-600 text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
    </div>
    <div class="flex flex-wrap -m-6 mb-24">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Is it really unlimited downloads?</h2>
          <p class="text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Is it really unlimited downloads?</h2>
          <p class="text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Do you offer discounts on annual plans?</h2>
          <p class="text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Do you offer discounts on annual plans?</h2>
          <p class="text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >What kind of file do you offer with the packages?</h2>
          <p class="text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >What kind of file do you offer with the packages?</h2>
          <p class="text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
        </div>
      </div>
    </div><a class="group block max-w-max mx-auto font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
      <p class="mb-1" >Didn’t find the answer? Contact us here</p>
      <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-gradient-cyan transition ease-in-out duration-500"></div></a>
  </div>
</section>

<section class="py-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-8">
      <div class="w-full p-8">
        <div class="md:max-w-lg">
          <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-gray-900" >Open positions</h2>
          <p class="text-gray-600 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
        </div>
      </div>
      <div class="w-full p-8">
        <div>
          <div class="h-0.5 bg-gradient-cyan"></div>
          <div class="flex flex-wrap items-center py-7 -m-2">
            <div class="w-full md:w-1/2 p-2">
              <h3 class="font-heading font-bold text-xl text-gray-900" >Full-Stack Developer</h3>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto p-2">
                  <p class="text-lg text-gray-900" >Remote Only</p>
                </div>
                <div class="w-auto p-2">
                  <button class="group relative font-heading py-2 px-4 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
                    <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full bg-gray-800 transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >View Full Details</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="h-0.5 bg-gradient-cyan"></div>
        </div>
        <div>
          <div class="flex flex-wrap items-center py-7 -m-2">
            <div class="w-full md:w-1/2 p-2">
              <h3 class="font-heading font-bold text-xl text-gray-900" >Junior Graphic Designer</h3>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto p-2">
                  <p class="text-lg text-gray-900" >San Fransisco, USA</p>
                </div>
                <div class="w-auto p-2">
                  <button class="group relative font-heading py-2 px-4 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
                    <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full bg-gray-800 transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >View Full Details</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="h-0.5 bg-gradient-cyan"></div>
        </div>
        <div>
          <div class="flex flex-wrap items-center py-7 -m-2">
            <div class="w-full md:w-1/2 p-2">
              <h3 class="font-heading font-bold text-xl text-gray-900" >Lead Software Engineer - Data</h3>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto p-2">
                  <p class="text-lg text-gray-900" >Australia</p>
                </div>
                <div class="w-auto p-2">
                  <button class="group relative font-heading py-2 px-4 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
                    <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full bg-gray-800 transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >View Full Details</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="h-0.5 bg-gradient-cyan"></div>
        </div>
        <div>
          <div class="flex flex-wrap items-center py-7 -m-2">
            <div class="w-full md:w-1/2 p-2">
              <h3 class="font-heading font-bold text-xl text-gray-900" >Senior Digital Designer</h3>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto p-2">
                  <p class="text-lg text-gray-900" >Remote Only</p>
                </div>
                <div class="w-auto p-2">
                  <button class="group relative font-heading py-2 px-4 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
                    <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full bg-gray-800 transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >View Full Details</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="h-0.5 bg-gradient-cyan"></div>
        </div>
        <div>
          <div class="flex flex-wrap items-center py-7 -m-2">
            <div class="w-full md:w-1/2 p-2">
              <h3 class="font-heading font-bold text-xl text-gray-900" >SEM Specialist</h3>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto p-2">
                  <p class="text-lg text-gray-900" >Remote Only</p>
                </div>
                <div class="w-auto p-2">
                  <button class="group relative font-heading py-2 px-4 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
                    <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full bg-gray-800 transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >View Full Details</p>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="h-0.5 bg-gradient-cyan"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ toggle: false }" class="pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl text-center mx-auto">
      <h2 class="mb-5 font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Start with the right plan</h2>
      <p class="mb-10 text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
      <div class="mb-20 w-64 mx-auto border border-gray-300 overflow-hidden rounded-full">
        <div x-on:click.prevent="toggle = !toggle" class="relative flex p-0.5">
          <div :class="{'left-1/2': toggle}" class="absolute top-0 left-0 bg-gradient-orange h-full w-1/2 rounded-full transition-all duration-500"></div>
          <div class="relative w-1/2 flex items-center justify-center">
            <a :class="{ 'hidden': toggle }" class="block py-3.5 font-heading text-xs text-white font-semibold uppercase tracking-px rounded-full" href="#" >Monthly</a>
            <a :class="{ 'hidden': !toggle }" class="hidden py-3.5 font-heading text-xs text-black font-semibold uppercase tracking-px rounded-full" href="#" >Monthly</a>
          </div>
          <div class="relative w-1/2 flex items-center justify-center">
            <a :class="{ 'hidden': toggle }" class="block py-3.5 font-heading text-xs text-black font-semibold uppercase tracking-px rounded-full" href="#" >Yearly</a>
            <a :class="{ 'hidden': !toggle }" class="hidden py-3.5 font-heading text-xs text-white font-semibold uppercase tracking-px rounded-full" href="#" >Yearly</a>
          </div>
        </div>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full">
        <tbody><tr>
          <th></th>
          <th>
            <div class="px-12 pb-7 text-left">
              <h3 class="mb-1 font-heading text-xl font-bold text-gray-900" >Free</h3>
              <p class="mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$0</p>
              <p class="text-sm font-normal text-gray-600" >Best for freelancers</p>
            </div>
          </th>
          <th>
            <div class="px-12 pb-7 text-left">
              <h3 class="mb-1 font-heading text-xl font-bold text-gray-900" >Starter</h3>
              <p :class="{ 'hidden': toggle }" class="mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$9/mo</p>
              <p :class="{ 'hidden': !toggle }" class="hidden mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$108/year</p>
              <p class="text-sm font-normal text-gray-600" >Best for small agecny</p>
            </div>
          </th>
          <th>
            <div class="px-12 pb-7 text-left">
              <h3 class="mb-1 font-heading text-xl font-bold text-gray-900" >Professional</h3>
              <p :class="{ 'hidden': toggle }" class="mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$49/mo</p>
              <p :class="{ 'hidden': !toggle }" class="hidden mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$588/year</p>
              <p class="text-sm font-normal text-gray-600" >Best for big agency</p>
            </div>
          </th>
          <th>
            <div class="px-12 pb-7 text-left">
              <h3 class="mb-1 font-heading text-xl font-bold text-gray-900" >Exclusive</h3>
              <p :class="{ 'hidden': toggle }" class="mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$99/mo</p>
              <p :class="{ 'hidden': !toggle }" class="hidden mb-1 font-heading font-bold text-3xl text-transparent bg-clip-text bg-gradient-orange" >$1188/year</p>
              <p class="text-sm font-normal text-gray-600" >Best for enterprises</p>
            </div>
          </th>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="pt-6 pb-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Cloud Storage</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="pt-6 pb-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >5 GB</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="pt-6 pb-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >100 GB</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="pt-6 pb-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >500 GB</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="pt-6 pb-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >2 TB</p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Maximum Interval Time</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >15 mins</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >5 mins</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >No Intervarl</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >No Intervarl</p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Number of Websites</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >1</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >10</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >100</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Custom Domain</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >2</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >20</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Queries</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >50</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >150</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >500</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Email Accounts</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >5</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg text-gray-900" >Unlimited</p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >Email Notification</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12 pl-0">
              <p class="text-lg text-gray-900" >SMS Notification</p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
          <td class="border-b border-t border-gray-200">
            <div class="py-4 px-12">
              <p class="font-heading font-semibold text-lg">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="py-4 px-12 pl-0"></div>
          </td>
          <td>
            <div class="pt-4 px-12">
              <button class="font-heading font-bold px-11 py-2.5 text-base text-gray-900 border border-gray-200 hover:border-gray-300 rounded-md" >Choose</button>
            </div>
          </td>
          <td>
            <div class="pt-4 px-12">
              <button class="group relative font-heading font-bold px-11 py-2.5 text-base bg-gradient-orange text-white overflow-hidden rounded-md">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gray-900 transition ease-in-out duration-500"></div>
                <p class="relative z-10 group-hover:text-white" >Choose</p>
              </button>
            </div>
          </td>
          <td>
            <div class="pt-4 px-12">
              <button class="font-heading font-bold px-11 py-2.5 text-base text-gray-900 border border-gray-200 hover:border-gray-300 rounded-md" >Choose</button>
            </div>
          </td>
          <td>
            <div class="pt-4 px-12">
              <button class="font-heading font-bold px-11 py-2.5 text-base text-gray-900 border border-gray-200 hover:border-gray-300 rounded-md" >Choose</button>
            </div>
          </td>
        </tr>
      </tbody></table>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-gray-900">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block">
          <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-white font-medium bg-gradient-cyan overflow-hidden rounded-10">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
            <div class="py-2 px-5 bg-gray-900 rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-gray-900 h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-white hover:text-gray-200" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-white font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-white font-medium bg-gradient-cyan overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-gray-900 rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>