cta #1

Centered CTA with logo, image and text

1

Color options

Customize your colors.

<section class="overflow-hidden bg-base-50">
  <div class="mx-auto px-8 md:px-12 lg:px-20 w-full max-w-7xl pt-24">
    <div class="max-w-xl mx-auto text-center lg:text-balance">
      <div class="inline-block p-3 rounded-full bg-blue-600">
        <svg
          class="h-12 mx-auto text-white"
          viewBox="0 0 2895 2895"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M2286.33 1554.37V1980.05L2007.51 1819.15V1715.28L1815.32 1604.39L1725.5 1552.46V1230.64L1813.61 1281.51L2094.14 1443.48L2286.33 1554.37Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M1166.37 1229.58V1553.31L1078.04 1604.39L889.465 1713.15V1815.1L609.15 1977.07V1551.39L797.729 1442.42L1076.34 1281.51L1166.37 1229.58Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M2843.54 1232.56L2474.91 1445.4L2286.33 1554.37L2094.14 1443.48L1813.61 1281.51L1725.5 1230.64L1914.29 1121.67L2002.41 1070.8L2282.71 908.828L2843.54 1232.56Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M2002.42 746.857L1633.78 959.698L1444.99 1068.67L1252.8 957.782L884.159 744.942L1441.59 423.127L2002.42 746.857Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M1166.38 1229.58L1076.35 1281.51L797.738 1442.42L609.16 1551.39L416.969 1440.29L48.3281 1227.45L605.542 905.849L884.152 1066.76L974.183 1118.69L1166.38 1229.58Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M2843.55 1232.56V1658.24L2286.33 1980.05V1554.37L2474.91 1445.4L2843.55 1232.56Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M2007.53 1715.28V2140.96L1450.31 2462.77V2037.09L1638.89 1928.12L1917.71 1767.21L2007.53 1715.28Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M2007.53 1715.28L1917.71 1767.21L1638.89 1928.12L1450.31 2037.09L1258.12 1925.99L977.808 1764.23L889.481 1713.15L1078.06 1604.39L1166.39 1553.31L1356.88 1443.48L1444.99 1392.61L1446.7 1391.55L1534.82 1442.42L1725.52 1552.46L1815.34 1604.39L2007.53 1715.28Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M1450.31 2037.09V2462.77L889.481 2138.83V1713.15L977.808 1764.23L1258.12 1925.99L1450.31 2037.09Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M609.16 1551.39V1977.07L48.3281 1653.13V1227.45L416.969 1440.29L609.16 1551.39Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M2002.42 746.856V1070.8L1914.3 1121.67L1725.52 1230.64V1332.38L1534.81 1442.42L1446.69 1391.55L1444.99 1392.61V1068.67L1633.78 959.696L2002.42 746.856Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
          <path
            d="M1444.99 1068.67V1392.61L1356.88 1443.48L1166.39 1333.44V1229.58L974.191 1118.69L884.159 1066.75V744.94L1252.8 957.781L1444.99 1068.67Z"
            stroke="currentColor"
            stroke-width="63.28"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></path>
        </svg>
      </div>
      <h2
        class="text-2xl md:text-3xl lg:text-4xl mt-12 font-semibold tracking-tight text-base-900 lg:text-balance"
      >
        Collaboration without the therapy bills
      </h2>
      <p class="text-sm mt-4 text-base-500 lg:text-balance">
        Ditch the chaos, skip the spreadsheet gymnastics, and finally work like
        it's the 2020s.
      </p>
    </div>
    <div class="relative mt-12 overflow-hidden rounded-t-lg max-h-120">
      <img
        src="/_astro/dashboardLight.DuO0a6ir.svg"
        loading="eager"
        decoding="async"
        alt="dashboard"
        width="1200"
        height="1200"
        class="relative object-cover h-full"
      />
      <!-- Optional overlay fade if needed -->
      <div
        aria-hidden="true"
        class="absolute inset-0 z-0 pointer-events-none bg-gradient-to-t from-base-50 via-white/70 to-transparent"
      ></div>
      <!-- Button position -->
      <div class="absolute z-10 bottom-12 left-1/2 transform -translate-x-1/2">
        <button
          class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
        >
          Get started
        </button>
      </div>
    </div>
  </div>
</section>