<section
  class="flex flex-col items-center justify-center gap-6 py-16 text-center text-zinc-900 selection:bg-purple-600 selection:text-white dark:bg-black dark:text-white max-sm:px-2 sm:gap-10 sm:py-24">
  <h1 class="max-w-4xl font-bold leading-none [font-size:clamp(3.9rem,2.6576rem+5.2226vw,5.5rem)]">
    Create websites with
    <span class="bg-gradient-to-b from-purple-900 to-purple-700 bg-clip-text text-transparent dark:from-purple-950/60 dark:to-purple-500">
      taco
    </span>
    easily
  </h1>
  <p class="mt-4 max-w-xs text-base text-zinc-500 dark:text-zinc-400 sm:max-w-md sm:text-lg">
    This is the platform where you find all the <span class="text-purple-700 dark:text-purple-500">components</span> to build a
    <span class="text-purple-700 dark:text-purple-500">visually stunning</span> website
  </p>
  <div class="flex flex-wrap justify-center gap-4 max-sm:mt-6">
    <button aria-label="Explore components" class="min-w-[8rem] rounded border-[1.5px] border-transparent bg-black px-5 py-2 text-base font-semibold text-white outline-offset-2 transition-colors hover:border-purple-700 hover:bg-white hover:text-purple-700 focus-visible:outline focus-visible:outline-purple-500 dark:bg-white dark:text-black dark:hover:border-purple-400 dark:hover:bg-black dark:hover:text-purple-400 dark:focus-visible:outline-purple-800 sm:min-w-[10rem] sm:text-lg">
      Components
    </button>
    <button aria-label="Explore components" class="min-w-[8rem] rounded border-[1.5px] border-purple-400 bg-white px-5 py-2 text-base font-semibold text-purple-700 outline-offset-2 transition-colors hover:border-purple-700 hover:bg-purple-700 hover:text-white focus-visible:outline focus-visible:outline-purple-500 dark:bg-black dark:text-purple-400 dark:hover:border-purple-400 dark:hover:bg-purple-500 dark:hover:text-black dark:focus-visible:outline-zinc-100 sm:min-w-[10rem] sm:text-lg">
      Signin
    </button>
  </div>
</section>

<!-- change [--image-size] variable accordingly -->
<section class="mx-auto grid max-w-[90rem] grid-rows-[auto_auto] py-4 max-lg:gap-7 px-2 [--image-size:minmax(25rem,35%)] lg:grid-cols-[minmax(50%,1fr)_var(--image-size)]">
  <div
    class="mx-auto flex max-w-4xl flex-col items-center justify-center gap-6  text-center text-zinc-900 selection:bg-blue-600 selection:text-white dark:text-white max-lg:px-4 max-sm:pt-16 sm:gap-10 lg:pl-20 lg:text-left">
    <h1 class="font-bold leading-tight [font-size:clamp(2.5rem,1.8182rem+2.7273vw,4rem)] lg:leading-[1.05]">
      Lightweight and performant applications in
      <span class="bg-gradient-to-b from-blue-950 to-blue-700 bg-clip-text text-transparent dark:from-blue-800/70 dark:to-blue-500"
        >Less time</span
      >
    </h1>
    <p class="max-w-xs text-base text-zinc-500 dark:text-zinc-400 sm:max-w-md sm:text-lg lg:mr-auto">
      Platform where you find all the <span class="text-blue-700 dark:text-blue-500">professionals</span> to build a
      <span class="text-blue-700 dark:text-blue-500"> stunning website</span>
    </p>
    <div class="flex flex-wrap justify-center gap-4 max-sm:mt-6 lg:mr-auto">
      <button
        class="group flex min-w-[11rem] rounded border-2 border-transparent bg-black px-5 py-2 font-semibold text-white transition-colors duration-300 hover:border-blue-700 hover:bg-white hover:text-blue-700 focus-visible:outline focus-visible:outline-black/50 dark:bg-white dark:text-black dark:hover:border-zinc-400 dark:hover:bg-black dark:hover:text-white">
        Explore more
        <span class="my-auto ml-auto h-5 w-5 translate-y-[0.15rem] transition-transform group-hover:translate-x-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round">
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <polyline points="12 5 19 12 12 19"></polyline>
          </svg>
        </span>
      </button>
    </div>
  </div>
  <div
    class="relative mx-auto my-auto flex h-fit w-full    items-center overflow-hidden  pt-0 sm:pt-6  max-lg:py-6 lg:max-w-full">

    <!-- prettier-ignore -->
    <!-- try switching between svg and image -->
    <!-- <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" class="w-full h-full" viewBox="0 0 568.73047 381.17967" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M883.025,306.463H316.29456a1,1,0,0,1,0-2H883.025a1,1,0,0,1,0,2Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <ellipse cx="29.35484" cy="8.64507" rx="8.45661" ry="8.64507" fill="#e6e6e6" /> <ellipse cx="58.56859" cy="8.64507" rx="8.45661" ry="8.64507" fill="#e6e6e6" /> <ellipse cx="87.78234" cy="8.64507" rx="8.45661" ry="8.64507" fill="#e6e6e6" /> <path d="M436.38832,274.6303a.99674.99674,0,0,1-.71484-.30078l-5.70605-5.833a.99954.99954,0,0,1,0-1.39844l5.70605-5.83252a1,1,0,0,1,1.42969,1.39844l-5.022,5.1333,5.022,5.13379a1,1,0,0,1-.71485,1.69922Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <path d="M445.9767,274.6303a1,1,0,0,1-.71484-1.69922l5.02148-5.13379-5.02148-5.1333a1,1,0,0,1,1.42969-1.39844l5.70556,5.83252a.99954.99954,0,0,1,0,1.39844l-5.70556,5.833A.99674.99674,0,0,1,445.9767,274.6303Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <path d="M832.48653,260.15333h-10.61a2.18934,2.18934,0,0,0-2.19,2.19v10.62a2.18934,2.18934,0,0,0,2.19,2.19h10.61a2.1979,2.1979,0,0,0,2.2-2.19v-10.62A2.1979,2.1979,0,0,0,832.48653,260.15333Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <path d="M806.48653,260.15333h-10.61a2.18934,2.18934,0,0,0-2.19,2.19v10.62a2.18934,2.18934,0,0,0,2.19,2.19h10.61a2.1979,2.1979,0,0,0,2.2-2.19v-10.62A2.1979,2.1979,0,0,0,806.48653,260.15333Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <path d="M856.98653,260.65333h-10.61a2.18934,2.18934,0,0,0-2.19,2.19v10.62a2.18934,2.18934,0,0,0,2.19,2.19h10.61a2.1979,2.1979,0,0,0,2.2-2.19v-10.62A2.1979,2.1979,0,0,0,856.98653,260.65333Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <path d="M642.06484,264.69331h-84.81a2.67,2.67,0,1,0,0,5.34h84.81a2.67,2.67,0,0,0,0-5.34Z" transform="translate(-315.29456 -259.15243)" fill="#e6e6e6" /> <path d="M499.86543,524.95276h-84a15.5,15.5,0,1,0,0,31h84a15.5,15.5,0,0,0,0-31Z" transform="translate(-315.29456 -259.15243)" fill="#fff" /> <path d="M499.86536,556.95276h-84a16.5,16.5,0,0,1,0-33h84a16.5,16.5,0,0,1,0,33Zm-84-31a14.5,14.5,0,0,0,0,29h84a14.5,14.5,0,0,0,0-29Z" transform="translate(-315.29456 -259.15243)" fill="#6c63ff" /> <rect x="264.92837" y="103.58919" width="280.48127" height="277.59048" rx="26.74409" fill="#f2f2f2" /> <path d="M731.40283,477.23534a3.97074,3.97074,0,0,1,.17118-5.53569,3.80846,3.80846,0,0,1,.49374-.39089l-3.34656-13.4424,6.22349-4.098,2.59348,18.91007a3.95974,3.95974,0,0,1-.7078,4.78215,3.78946,3.78946,0,0,1-5.35705-.14866Q731.43755,477.27412,731.40283,477.23534Z" transform="translate(-315.29456 -259.15243)" fill="#ffb6b6" /> <path d="M737.85438,463.98278l-8.16274.758-12.12143-42.63326c-.03512-.11832-3.62439-12.09087-7.25015-13.96388-1.35039-.69737-1.84505-1.1141-1.82561-1.53745.02037-.43731.56868-.659,1.32733-.96586a8.53246,8.53246,0,0,0,2.13938-1.12782c1.65391-1.30745.92685-2.56677-.07952-4.30959-.19538-.33839-.39849-.69017-.59269-1.05806-.57374-1.08642.0676-5.70226,1.90632-13.71884a11.63027,11.63027,0,0,1,10.3196-9.00106h0a11.65621,11.65621,0,0,1,12.67326,10.85874l1.59438,24.68909Z" transform="translate(-315.29456 -259.15243)" fill="#6c63ff" /> <polygon points="390.503 356.676 384.825 356.629 382.311 334.216 390.692 334.287 390.503 356.676" fill="#ffb6b6" /> <path d="M687.60989,624.858a2.542,2.542,0,0,0,2.51691,2.56088l11.28951.0942,1.97639-4.00611.72587,4.02654,4.25978.03863-1.07566-14.36125-1.482-.0986-6.045-.4167-1.95024-.1306-.03423,4.06335-9.06889,6.15115A2.53771,2.53771,0,0,0,687.60989,624.858Z" transform="translate(-315.29456 -259.15243)" fill="#2f2e41" /> <polygon points="450.286 352.528 444.859 354.196 435.697 333.588 443.708 331.126 450.286 352.528" fill="#ffb6b6" /> <path d="M750.967,625.77846a2.542,2.542,0,0,0,3.17252,1.68167l10.79133-3.318.67491-4.41582,1.90746,3.6196,4.07273-1.249-5.36056-13.36664-1.44266.35336-5.88881,1.42748-1.89869.46419,1.19393,3.88414-6.78907,8.60174A2.53771,2.53771,0,0,0,750.967,625.77846Z" transform="translate(-315.29456 -259.15243)" fill="#2f2e41" /> <path d="M694.3763,427.37368l-10.83593,31.49058-.35782,2.5199c-2.73033,2.59241.69957,3.44646-.58648,4.13012s-2.151,2.6001-.41785,2.94254,1.054,124.98657,8.42445,129.75565,24.38511,10.06421,23.03138,3.08112-.85759-93.22345-.85759-93.22345,36.17868,91.81882,38.65182,91.84768,20.15014-6.61067,19.33238-9.7942-32.92359-82.89542-30.74438-85.96124,3.009-4.39846.85992-4.59924-2.7841.97814-2.90017-1.99587-.487-10.30767-.487-10.30767-1.55665-29.004-12.45806-45.02837l-.9297-9.5211Z" transform="translate(-315.29456 -259.15243)" fill="#2f2e41" /> <path d="M721.44753,367.25032l-14.36984,2.04607-.86711,10.40528-7.091,11.09233s-15.76207,11.09233-4.76908,28.61451l-.71294,9.71822L729.1889,443.434l3.42066-62.33222Z" transform="translate(-315.29456 -259.15243)" fill="#6c63ff" /> <path d="M697.35543,480.82859a3.97075,3.97075,0,0,1,1.73912-5.2582,3.80948,3.80948,0,0,1,.58455-.23426l.61638-13.839,7.13223-2.15792-2.894,18.86642a3.95976,3.95976,0,0,1-2.03917,4.38313,3.78945,3.78945,0,0,1-5.09334-1.66671Q697.37768,480.87564,697.35543,480.82859Z" transform="translate(-315.29456 -259.15243)" fill="#ffb6b6" /> <path d="M707.311,469.95934l-8.04106-1.59576.50956-44.32c0-.12341-.03451-12.62236-2.97751-15.44956-1.09616-1.05277-1.45181-1.593-1.31272-1.99333.144-.41344.73268-.47,1.54728-.54829a8.53273,8.53273,0,0,0,2.37184-.47251c1.95755-.78285,1.61884-2.197,1.14993-4.15411-.091-.38-.18565-.775-.26716-1.183-.24091-1.20476,1.68722-5.44736,5.73082-12.60946a11.63028,11.63028,0,0,1,12.45407-5.69292h0a11.65621,11.65621,0,0,1,9.06,14.01575l-5.49605,24.12232Z" transform="translate(-315.29456 -259.15243)" fill="#6c63ff" /> <circle cx="397.52607" cy="91.66194" r="16.0572" fill="#ffb6b6" /> <path d="M734.1,373.08a25.35339,25.35339,0,0,1,4.22,10.32,10.65926,10.65926,0,0,1-5.82,1.68c-.07-.27-.14-.54-.22-.81a23.17164,23.17164,0,0,0-2.64-5.93,13.95855,13.95855,0,0,1-.79,5.86,10.28421,10.28421,0,0,0-3.45-.89,6.268,6.268,0,0,0-2.8.66c-1.01-3.35-1.94-6.43-2.6-8.64-.02,5.54-8.14,10.37-17,9.67-.32-.2,2.89-9.31,2.58-9.52-.71-.47-1.4-.98-2.09-1.48,2.9-4.48,6.05-9.28,5.51-10,.04.89-3.14,5.17-6.6,9.21-1.92-1.41,8.99-24.35,3.6-26.21-.09.81-1.28.81-2.73.64a14.79623,14.79623,0,0,0-1.69-3.79,8.902,8.902,0,0,1-.42,3.51,20.44209,20.44209,0,0,0-4.26.45,13.64978,13.64978,0,0,0-1.07-1.46,8.69234,8.69234,0,0,1-.05,1.69A6.75075,6.75075,0,0,0,693,349c-1.12-.41.79-2.26.09-3.22-1.78-2.4.86-5.9,2.53-8.38a12.73353,12.73353,0,0,1,16.29-3.79c.24-.83,1.47-1.38,3.05-1.75a8.27443,8.27443,0,0,1,2.04-.19c6.8.12,16.24,5.73,16.61,12.52.03.68.08,1.42.13,2.21.48,7.6-.11,14.61005,5.08,20.17005,1.88,2.01,1.9,11.53,1.18,16.43C738.13,381.03,736.8,373.37,734.1,373.08Z" transform="translate(-315.29456 -259.15243)" fill="#2f2e41" /> <path d="M642.08158,626.72844a1.18647,1.18647,0,0,0,1.19007,1.19h165.29a1.19,1.19,0,0,0,0-2.38h-165.29A1.18651,1.18651,0,0,0,642.08158,626.72844Z" transform="translate(-315.29456 -259.15243)" fill="#ccc" /> <path d="M562.52316,381.64443H358.1168a4.408,4.408,0,1,1,0-8.81606H562.52316a4.408,4.408,0,0,1,0,8.81606Z" transform="translate(-315.29456 -259.15243)" fill="#3f3d56" /> <path d="M562.52316,475.64443H358.1168a4.408,4.408,0,1,1,0-8.81606H562.52316a4.408,4.408,0,0,1,0,8.81606Z" transform="translate(-315.29456 -259.15243)" fill="#6c63ff" /> <path d="M665.99726,428.67524H358.1168a4.408,4.408,0,1,1,0-8.81606H665.99726a4.408,4.408,0,0,1,0,8.81606Z" transform="translate(-315.29456 -259.15243)" fill="#6c63ff" /> <path d="M566.93076,488.88972a1.00005,1.00005,0,0,1-1-1V454.58308a1,1,0,0,1,2,0v33.30664A1.00005,1.00005,0,0,1,566.93076,488.88972Z" transform="translate(-315.29456 -259.15243)" fill="#3f3d56" /> <path d="M336.24766,360.252a1.00005,1.00005,0,0,1,1-1H370.5543a1,1,0,0,1,0,2H337.24766A1,1,0,0,1,336.24766,360.252Z" transform="translate(-315.29456 -259.15243)" fill="#3f3d56" /> <path d="M353.901,394.88972a1.00005,1.00005,0,0,1-1-1V360.58308a1,1,0,0,1,2,0v33.30664A1.00006,1.00006,0,0,1,353.901,394.88972Z" transform="translate(-315.29456 -259.15243)" fill="#3f3d56" /> </svg> -->
    <img
      class="mx-auto aspect-square sm:aspect-[16/11] lg:aspect-square w-full rounded-xl object-cover"
      src="https://images.unsplash.com/photo-1471897488648-5eae4ac6686b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
      alt="Laptop on desk with flowe vase" />
  </div>
</section>