import Link from "next/link";
import React from "react";

export type TechIcon = "ts" | "next" | "react" | "tailwind" | "PostgreSQL";

const tech: {
  label: string;
  link: string;
  Logo: (props: any) => JSX.Element;
}[] = [
  {
    label: "Tailwind CSS",
    link: "https://tailwindcss.com/",
    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_30_11)">
          <path
            d="M137.812 0H42.1875C18.888 0 0 18.888 0 42.1875V137.812C0 161.112 18.888 180 42.1875 180H137.812C161.112 180 180 161.112 180 137.812V42.1875C180 18.888 161.112 0 137.812 0Z"
            fill="#242938"
          />
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M58.3594 77.3438C62.5781 60.4688 73.125 52.0312 90 52.0312C115.312 52.0312 118.477 71.0156 131.133 74.1797C139.57 76.29 146.953 73.1259 153.281 64.6875C149.062 81.5625 138.516 90 121.641 90C96.3281 90 93.1641 71.0156 80.5078 67.8516C72.0703 65.7422 64.6875 68.9062 58.3594 77.3438ZM26.7188 115.312C30.9375 98.4375 41.4844 90 58.3594 90C83.6719 90 86.8359 108.984 99.4922 112.148C107.93 114.259 115.312 111.095 121.641 102.656C117.422 119.531 106.875 127.969 90 127.969C64.6875 127.969 61.5234 108.984 48.8672 105.82C40.4297 103.71 33.0469 106.874 26.7188 115.312Z"
            fill="url(#paint0_linear_30_11)"
          />
        </g>
        <defs>
          <linearGradient
            id="paint0_linear_30_11"
            x1="60.8203"
            y1="52.0312"
            x2="114.961"
            y2="130.43"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#32B1C1" />
            <stop offset="1" stopColor="#14C6B7" />
          </linearGradient>
          <clipPath id="clip0_30_11">
            <rect width="180" height="180" fill="white" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
  {
    label: "Typescript",
    link: "https://www.typescriptlang.org/",
    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_30_2)">
          <path
            d="M137.812 0H42.1875C18.888 0 0 18.888 0 42.1875V137.812C0 161.112 18.888 180 42.1875 180H137.812C161.112 180 180 161.112 180 137.812V42.1875C180 18.888 161.112 0 137.812 0Z"
            fill="#007ACC"
          />
          <path
            d="M39.8045 90.597L39.7476 97.9686H63.1757V164.54H79.7476V97.9686H103.176V90.7398C103.176 86.7397 103.091 83.397 102.976 83.3112C102.89 83.1973 88.633 83.1397 71.3474 83.1685L39.8903 83.2543L39.8045 90.597ZM145.242 83.0448C149.813 84.188 153.299 86.2166 156.499 89.5304C158.157 91.3023 160.613 94.531 160.814 95.3023C160.871 95.5308 153.042 100.788 148.3 103.731C148.128 103.845 147.442 103.102 146.67 101.96C144.356 98.588 141.928 97.1305 138.213 96.8738C132.756 96.5019 129.242 99.3594 129.271 104.131C129.271 105.531 129.471 106.359 130.042 107.502C131.242 109.988 133.471 111.474 140.471 114.502C153.356 120.045 158.87 123.702 162.299 128.902C166.128 134.702 166.985 143.959 164.385 150.845C161.528 158.33 154.442 163.416 144.47 165.102C141.385 165.645 134.07 165.559 130.757 164.96C123.528 163.673 116.671 160.102 112.442 155.417C110.785 153.588 107.556 148.816 107.757 148.473C107.842 148.359 108.585 147.902 109.413 147.417C110.213 146.96 113.242 145.216 116.099 143.559L121.271 140.559L122.356 142.159C123.871 144.473 127.185 147.645 129.185 148.702C134.927 151.731 142.814 151.302 146.699 147.817C148.356 146.302 149.042 144.731 149.042 142.417C149.042 140.33 148.785 139.416 147.699 137.845C146.299 135.845 143.442 134.159 135.328 130.645C126.042 126.645 122.042 124.159 118.385 120.216C116.271 117.931 114.27 114.273 113.442 111.216C112.757 108.674 112.585 102.302 113.128 99.7306C115.042 90.7594 121.814 84.5023 131.585 82.6447C134.757 82.0449 142.127 82.2734 145.242 83.0448Z"
            fill="white"
          />
        </g>
        <defs>
          <clipPath id="clip0_30_2">
            <rect width="180" height="180" fill="white" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
  {
    label: "Next JS",
    link: "https://nextjs.org/",
    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_30_15)">
          <path
            d="M137.812 0H42.1875C18.888 0 0 18.888 0 42.1875V137.812C0 161.112 18.888 180 42.1875 180H137.812C161.112 180 180 161.112 180 137.812V42.1875C180 18.888 161.112 0 137.812 0Z"
            fill="#F4F2ED"
          />
          <path
            d="M85.3953 19.7256C85.0929 19.753 84.1303 19.8493 83.2641 19.9175C63.2911 21.7182 44.5824 32.4957 32.7326 49.0599C26.1352 58.2702 21.9143 68.7172 20.3203 79.7837C19.7571 83.6467 19.6882 84.7878 19.6882 90.0247C19.6882 95.2623 19.7571 96.4035 20.321 100.266C24.1418 126.672 42.9335 148.859 68.419 157.08C72.983 158.551 77.7938 159.554 83.2648 160.159C85.396 160.392 94.6055 160.392 96.7367 160.159C106.18 159.114 114.18 156.777 122.071 152.749C123.28 152.131 123.514 151.966 123.349 151.829C123.24 151.746 118.084 144.831 111.899 136.474L100.654 121.284L86.5639 100.431C78.8112 88.9665 72.4332 79.591 72.3776 79.591C72.3228 79.5777 72.2679 88.8427 72.2405 100.156C72.199 119.964 72.1857 120.762 71.9382 121.229C71.581 121.902 71.306 122.177 70.7281 122.48C70.2886 122.7 69.9033 122.741 67.8277 122.741H65.4497L64.8169 122.342C64.4251 122.097 64.1069 121.75 63.8958 121.339L63.6075 120.72L63.6357 93.1592L63.6764 65.5841L64.1025 65.0476C64.3226 64.7593 64.7902 64.3881 65.12 64.2095C65.6832 63.9345 65.9032 63.9071 68.2812 63.9071C71.086 63.9071 71.5528 64.0168 72.282 64.8142C72.488 65.0342 80.1169 76.5261 89.2449 90.3685C98.4858 104.38 107.732 118.387 116.985 132.391L128.119 149.258L128.683 148.887C133.673 145.643 138.952 141.024 143.13 136.212C152.024 125.999 157.757 113.545 159.681 100.266C160.244 96.4035 160.313 95.2623 160.313 90.0247C160.313 84.7871 160.244 83.6467 159.681 79.7837C155.86 53.3771 137.068 31.1907 111.582 22.9705C107.087 21.5129 102.304 20.5095 96.9427 19.9049C95.6229 19.7671 86.5364 19.6166 85.396 19.7263M114.181 62.2576C114.84 62.5874 115.377 63.2195 115.569 63.879C115.679 64.2369 115.706 71.8799 115.679 89.1036L115.637 113.82L111.28 107.139L106.909 100.458V82.4921C106.909 70.8765 106.964 64.3466 107.046 64.0302C107.266 63.261 107.747 62.6563 108.407 62.2984C108.97 62.0101 109.177 61.982 111.335 61.982C113.37 61.982 113.727 62.0101 114.181 62.2576Z"
            fill="black"
          />
        </g>
        <defs>
          <clipPath id="clip0_30_15">
            <rect width="180" height="180" fill="white" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
  {
    label: "Drizzle ORM",
    link: "https://orm.drizzle.team/",

    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M59.7043 76.2006L50.0298 70.7991L26.6596 111.56L36.3341 116.961L59.7043 76.2006Z"
          fill="#C5F74F"
        />
        <path
          d="M98.2004 52.3158L88.5259 46.9143L65.1557 87.6749L74.8302 93.0764L98.2004 52.3158Z"
          fill="#C5F74F"
        />
        <path
          d="M157.435 52.3168L147.76 46.9153L124.39 87.6759L134.065 93.0774L157.435 52.3168Z"
          fill="#C5F74F"
        />
        <path
          d="M118.926 76.2006L109.252 70.7991L85.8817 111.56L95.5563 116.961L118.926 76.2006Z"
          fill="#C5F74F"
        />
      </svg>
    ),
  },

  {
    label: "PostgreSQL",
    link: "https://www.postgresql.org/",
    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M131.919 129.533C133.023 120.346 132.692 118.997 139.535 120.486L141.272 120.638C146.534 120.877 153.418 119.791 157.462 117.913C166.168 113.873 171.329 107.13 162.747 108.9C143.166 112.94 141.82 106.31 141.82 106.31C162.496 75.6324 171.139 36.6891 163.678 27.1562C143.329 1.15601 108.107 13.4509 107.518 13.7687L107.329 13.8038C103.461 13.0009 99.1309 12.5213 94.2666 12.4426C85.4059 12.2963 78.6826 14.7657 73.5821 18.6329C73.5821 18.6329 10.7466 -7.25477 13.6702 51.189C14.2918 63.6216 31.4902 145.264 52.0046 120.604C59.5027 111.587 66.7477 103.963 66.7477 103.963C70.3449 106.352 74.6537 107.573 79.1705 107.134L79.5207 106.836C79.411 107.955 79.4588 109.051 79.6599 110.347C74.3766 116.252 75.9291 117.288 65.364 119.462C54.6737 121.665 60.954 125.587 65.0532 126.612C70.0243 127.855 81.5232 129.616 89.2941 118.74L88.9848 119.98C91.0576 121.639 90.9184 131.901 91.2109 139.231C91.5048 146.564 91.9956 153.405 93.4904 157.44C94.9852 161.474 96.7487 171.862 110.634 168.886C122.238 166.406 131.11 162.827 131.919 129.533Z"
          fill="black"
        />
        <path
          d="M106.113 176.141C99.9717 176.141 95.9723 173.766 93.5437 171.472C89.8776 168.013 88.4235 163.557 87.5545 160.895L87.179 159.784C85.4296 155.061 84.8362 148.262 84.4846 139.507C84.4312 138.192 84.3946 136.838 84.3539 135.402C84.3243 134.352 84.2878 133.034 84.2343 131.656C82.0218 132.711 79.6734 133.453 77.2565 133.861C72.9267 134.601 68.272 134.361 63.419 133.148C59.9948 132.291 56.437 130.517 54.4092 127.776C48.4987 132.952 42.861 132.251 39.7898 131.226C34.3715 129.419 29.5228 124.341 24.9651 115.705C21.7181 109.552 18.5779 101.537 15.6304 91.8787C10.4976 75.0599 7.23651 57.3454 6.94682 51.5291C6.03557 33.3252 10.9364 20.3062 21.5099 12.8376C38.1895 1.05601 63.4612 7.98461 72.6749 11.1304C78.8653 7.39961 86.1482 5.58414 94.3776 5.71492C98.7974 5.78664 103.006 6.17476 106.916 6.87226C110.994 5.58976 119.049 3.74898 128.27 3.8643C145.259 4.0668 159.337 10.6874 168.979 23.0104C175.861 31.8023 172.458 50.2649 169.819 60.4884C166.103 74.8687 159.594 90.163 151.598 103.477C153.769 103.493 156.915 103.233 161.387 102.309C170.21 100.488 172.79 105.218 173.49 107.336C176.296 115.833 164.101 122.254 160.297 124.02C155.423 126.283 147.476 127.661 140.968 127.363L140.684 127.344L138.974 127.194L138.805 128.62L138.642 130.013C138.205 146.887 135.794 157.573 130.835 164.634C125.636 172.036 118.41 174.111 112.046 175.475C109.874 175.939 107.902 176.141 106.113 176.141ZM93.1893 114.729C97.1535 117.901 97.5009 123.871 97.8117 135.027C97.851 136.419 97.8876 137.736 97.9368 138.967C98.0859 142.694 98.436 151.419 99.8029 155.106C99.9956 155.628 100.169 156.157 100.351 156.718C101.874 161.381 102.638 163.72 109.223 162.312C114.751 161.127 117.593 160.064 119.818 156.897C123.051 152.293 124.859 143.031 125.191 129.369L131.917 129.532L125.238 128.731L125.435 127.063C126.074 121.565 126.536 117.593 130.21 114.966C133.159 112.86 136.519 113.064 139.195 113.546C136.254 111.324 135.442 108.719 135.225 107.65L134.664 104.886L136.24 102.548C145.32 89.076 152.807 72.5188 156.784 57.1204C160.871 41.2987 159.625 32.8963 158.379 31.3073C141.885 10.2318 113.283 18.9337 110.296 19.9209L109.792 20.1937L107.26 20.6648L105.964 20.3962C102.389 19.6537 98.4178 19.243 94.161 19.1741C87.4729 19.0616 82.0771 20.6423 77.6531 23.999L74.5832 26.3263L71.0212 24.8596C63.4106 21.7476 41.0568 15.4912 29.2612 23.8457C22.7137 28.4835 19.731 37.5707 20.3948 50.8555C20.6142 55.2416 23.594 71.8452 28.5103 87.9482C35.3039 110.202 41.4773 117.595 44.0549 118.454C44.5049 118.606 45.6721 117.699 46.8337 116.304C51.677 110.498 56.6921 104.838 61.8721 99.3304L65.7674 95.2312L70.477 98.3601C72.3754 99.6215 74.4693 100.337 76.6195 100.472L87.8512 90.8929L86.2242 107.498C86.1876 107.871 86.1693 108.378 86.3156 109.32L86.8049 112.468L84.6815 114.841L84.4368 115.117L90.6074 117.965L93.1893 114.729Z"
          fill="black"
        />
        <path
          d="M162.747 108.9C143.165 112.94 141.819 106.31 141.819 106.31C162.495 75.631 171.138 36.6864 163.679 27.1562C143.331 1.15745 108.106 13.4523 107.518 13.7715L107.328 13.8053C103.459 13.0023 99.1294 12.5242 94.2624 12.4454C85.4016 12.3006 78.6811 14.7685 73.5807 18.6357C73.5807 18.6357 10.7438 -7.25051 13.666 51.1918C14.2876 63.6259 31.486 145.269 52.0004 120.609C59.4985 111.592 66.7421 103.967 66.7421 103.967C70.3407 106.356 74.648 107.577 79.1635 107.138L79.5151 106.84C79.4054 107.959 79.456 109.055 79.6557 110.351C74.371 116.256 75.9235 117.293 65.3583 119.467C54.668 121.669 60.9483 125.591 65.049 126.616C70.0186 127.859 81.519 129.62 89.2885 118.744L88.9777 119.984C91.0491 121.644 92.5032 130.773 92.2599 139.049C92.0166 147.324 91.8521 153.007 93.4847 157.445C95.116 161.883 96.7416 171.868 110.63 168.892C122.234 166.406 128.247 159.961 129.085 149.212C129.679 141.569 131.022 142.699 131.108 135.866L132.186 132.632C133.429 122.272 132.383 118.931 139.534 120.485L141.271 120.637C146.533 120.876 153.419 119.79 157.462 117.911C166.167 113.874 171.329 107.13 162.747 108.9Z"
          fill="#336791"
        />
        <path
          d="M106.815 171.994C95.2383 171.994 91.5708 162.827 90.0704 159.078C87.8738 153.584 87.3999 132.262 87.8893 114.777C87.8965 114.482 87.9621 114.191 88.0821 113.922C88.2022 113.652 88.3743 113.409 88.5887 113.207C88.8031 113.004 89.0554 112.846 89.3312 112.741C89.6069 112.637 89.9007 112.588 90.1955 112.597C90.49 112.605 90.7801 112.671 91.0491 112.791C91.3181 112.911 91.5607 113.083 91.7632 113.297C91.9656 113.512 92.1239 113.763 92.2289 114.039C92.3339 114.314 92.3836 114.607 92.3752 114.902C91.8113 135.069 92.6114 153.344 94.2371 157.411C96.7739 163.752 100.621 169.298 111.499 166.968C121.825 164.753 125.692 160.838 127.415 150.853C128.737 143.19 131.351 121.39 131.673 117.089C131.694 116.795 131.774 116.508 131.906 116.244C132.039 115.981 132.222 115.747 132.446 115.554C132.669 115.362 132.928 115.216 133.208 115.124C133.488 115.032 133.784 114.996 134.078 115.019C134.671 115.063 135.222 115.342 135.61 115.793C135.998 116.244 136.191 116.83 136.148 117.423C135.811 121.902 133.21 143.66 131.837 151.616C129.804 163.41 124.546 168.76 112.44 171.356C110.382 171.796 108.513 171.993 106.815 171.994ZM44.0452 127.218C43.0333 127.215 42.0286 127.048 41.0696 126.726C33.5504 124.217 26.3883 111.971 19.7818 90.3248C14.753 73.8477 11.5664 56.6493 11.2866 51.0594C10.4583 34.4882 14.7249 22.7643 23.971 16.2154C42.2621 3.25538 73.0322 15.5966 74.333 16.1282C74.8841 16.3533 75.3231 16.788 75.5536 17.3368C75.7841 17.8857 75.7872 18.5035 75.5621 19.0546C75.337 19.6056 74.9022 20.0447 74.3534 20.2752C73.8046 20.5057 73.1867 20.5087 72.6357 20.2837C72.3389 20.1627 42.833 8.34178 26.5557 19.8829C18.6497 25.4882 15.0202 35.9029 15.7669 50.8358C16.0018 55.5454 18.9788 72.3304 24.0722 89.0141C29.97 108.339 36.6821 120.532 42.4885 122.469C43.3997 122.773 46.1729 123.696 50.1371 118.929C54.7598 113.377 59.5561 107.972 64.5188 102.721C64.934 102.307 65.4949 102.071 66.0813 102.066C66.6678 102.06 67.2332 102.284 67.6567 102.689C68.0801 103.095 68.3279 103.651 68.3469 104.237C68.366 104.823 68.1549 105.393 67.7588 105.826C67.6913 105.896 60.9427 112.951 53.588 121.799C50.1047 125.989 46.7663 127.218 44.0452 127.218ZM141.68 108.311C141.273 108.31 140.874 108.199 140.525 107.989C140.177 107.78 139.892 107.479 139.701 107.12C139.51 106.761 139.42 106.356 139.441 105.95C139.462 105.544 139.594 105.151 139.821 104.813C160.722 73.7985 168.058 36.3233 161.775 28.2937C153.866 18.1883 142.699 12.9107 128.582 12.6055C118.129 12.3805 109.821 15.0496 108.463 15.5151L108.121 15.6543C106.756 16.0832 105.708 15.3351 105.313 14.4604C105.087 13.9592 105.053 13.393 105.217 12.8684C105.38 12.3438 105.73 11.8972 106.2 11.6127C106.265 11.5748 106.47 11.4876 106.803 11.3652C109.111 10.5201 117.546 7.98881 127.993 8.10834C143.613 8.27428 156.517 14.2972 165.306 25.529C169.464 30.8432 169.474 43.086 165.333 59.1201C161.111 75.4677 153.167 93.036 143.54 107.322C143.11 107.965 142.401 108.311 141.68 108.311ZM142.748 122.669C139.179 122.669 135.98 122.165 134.065 121.018C132.096 119.838 131.721 118.235 131.671 117.384C131.134 107.948 136.34 106.305 138.995 105.556C138.625 104.996 138.099 104.338 137.555 103.659C136.007 101.724 133.886 99.0744 132.252 95.1116C131.996 94.4929 131.195 93.0543 130.267 91.3879C125.234 82.3626 114.761 63.5821 121.489 53.9647C124.602 49.514 130.802 47.7618 139.937 48.7391C137.25 40.5519 124.453 14.9413 94.088 14.4435C84.9558 14.2916 77.4661 17.0999 71.8383 22.7826C59.2383 35.5077 59.6939 58.5322 59.701 58.7629C59.7087 59.0574 59.6584 59.3506 59.5528 59.6257C59.4473 59.9008 59.2886 60.1524 59.0858 60.3662C58.883 60.58 58.6401 60.7517 58.3709 60.8716C58.1018 60.9915 57.8116 61.0571 57.5171 61.0649C57.2225 61.0727 56.9293 61.0223 56.6542 60.9168C56.3791 60.8112 56.1275 60.6525 55.9138 60.4497C55.7 60.2469 55.5283 60.004 55.4084 59.7349C55.2885 59.4657 55.2228 59.1755 55.215 58.881C55.1869 57.8587 54.7172 33.6965 68.6504 19.6241C75.1711 13.0387 83.7549 9.78741 94.1625 9.95756C113.588 10.2768 126.093 20.1529 133.161 28.3808C140.866 37.3485 144.643 47.2401 144.953 50.5419C145.186 52.9973 143.423 53.488 143.068 53.5612L142.258 53.5794C133.293 52.1437 127.541 53.1407 125.163 56.5382C120.046 63.8521 129.953 81.6172 134.183 89.204C135.263 91.139 136.042 92.5382 136.399 93.4016C137.789 96.771 139.601 99.0351 141.057 100.855C142.338 102.455 143.447 103.843 143.844 105.471C144.028 105.795 146.642 109.662 162.155 106.46C166.043 105.659 168.375 106.343 169.088 108.499C170.49 112.739 162.623 117.685 158.268 119.707C154.366 121.521 148.137 122.669 142.748 122.669ZM136.145 117.014C136.637 117.51 139.099 118.367 144.198 118.147C148.732 117.953 153.513 116.968 156.382 115.636C160.051 113.931 162.501 112.026 163.769 110.725L163.066 110.855C153.148 112.902 146.132 112.629 142.214 110.043C141.951 109.87 141.697 109.681 141.455 109.479C141.03 109.647 140.638 109.756 140.358 109.835C138.136 110.458 135.838 111.104 136.145 117.014ZM72.0732 129.551C69.6094 129.551 67.0163 129.215 64.3683 128.552C61.6247 127.866 56.9996 125.8 57.0699 122.407C57.15 118.6 62.6864 117.458 64.7705 117.029C72.2996 115.478 72.7904 114.857 75.143 111.869C75.8293 110.998 76.6829 109.914 77.8472 108.614C79.5755 106.679 81.4641 105.699 83.461 105.699C84.8518 105.699 85.9922 106.17 86.746 106.484C89.1479 107.48 91.1518 109.887 91.9758 112.766C92.7197 115.363 92.3639 117.863 90.9774 119.805C86.4253 126.18 79.8877 129.551 72.0732 129.551ZM61.9172 122.6C62.5936 123.123 63.9493 123.822 65.4582 124.199C67.7518 124.772 69.9764 125.063 72.0746 125.063C78.4674 125.063 83.6002 122.417 87.3282 117.197C88.1058 116.108 87.8724 114.726 87.6643 113.999C87.2283 112.476 86.1455 111.091 85.0303 110.628C84.4257 110.378 83.9236 110.187 83.4624 110.187C83.2149 110.187 82.4611 110.187 81.1927 111.606C80.3173 112.59 79.4758 113.604 78.6699 114.646C75.7393 118.367 74.3963 119.63 65.6775 121.425C63.5499 121.861 62.4586 122.306 61.9172 122.6ZM79.1705 112.25C78.6349 112.249 78.1172 112.056 77.711 111.707C77.3048 111.358 77.0369 110.875 76.9557 110.346C76.8994 109.973 76.8618 109.598 76.8432 109.222C71.1282 109.115 65.6143 106.663 61.4278 102.295C56.1347 96.7724 53.7258 89.121 54.8199 81.3037C56.0082 72.8141 55.5638 65.3202 55.3247 61.2941C55.2586 60.1748 55.2108 59.3662 55.2136 58.8065C55.2179 58.0963 55.2319 56.2133 61.5263 53.0226C63.765 51.8877 68.2538 49.9077 73.1574 49.4001C81.2813 48.5605 86.6363 52.1788 88.2394 59.5897C92.5664 79.5979 88.5825 88.4474 85.673 94.9105C85.1316 96.1143 84.6197 97.2505 84.2105 98.3516L83.8491 99.3219C82.3121 103.444 80.9832 107.004 81.391 109.664C81.4358 109.955 81.4227 110.252 81.3526 110.538C81.2825 110.824 81.1566 111.094 80.9823 111.331C80.8079 111.569 80.5885 111.77 80.3365 111.923C80.0845 112.075 79.8049 112.177 79.5136 112.221L79.1705 112.25ZM59.715 59.428L59.8022 61.0297C60.0497 65.2119 60.511 72.9941 59.2622 81.9266C58.3608 88.3743 60.3296 94.6673 64.6664 99.1898C68.0935 102.764 72.6033 104.737 77.2383 104.737H77.3339C77.8529 102.551 78.7149 100.242 79.643 97.754L80.0016 96.7893C80.4643 95.5462 81.0057 94.3424 81.5794 93.0683C84.3793 86.8471 87.8653 79.1029 83.8505 60.539C83.056 56.8616 81.128 54.734 77.9597 54.0322C71.4516 52.5951 61.7527 57.4902 59.715 59.428ZM73.2572 58.476C73.1447 59.2691 74.7099 61.3869 76.7518 61.6696C78.7894 61.9551 80.5332 60.2985 80.6443 59.5054C80.7554 58.7122 79.1916 57.8376 77.1497 57.5535C75.1078 57.2694 73.3655 57.6829 73.2572 58.476ZM77.22 62.4501L76.6477 62.4107C75.3821 62.2349 74.1024 61.4376 73.2263 60.276C72.9183 59.8682 72.4163 59.0779 72.5161 58.3719C72.6582 57.3369 73.921 56.7168 75.8911 56.7168C76.3313 56.7168 76.7897 56.7491 77.251 56.8138C78.3282 56.9629 79.328 57.2737 80.0663 57.6857C81.346 58.4001 81.4402 59.1974 81.3825 59.6094C81.225 60.7527 79.4068 62.4501 77.22 62.4501ZM74.0011 58.6082C74.0644 59.0976 75.2766 60.7119 76.8544 60.9299L77.2214 60.9552C78.6783 60.9552 79.7668 59.8091 79.8947 59.4337C79.7597 59.1777 78.8232 58.5421 77.0471 58.2946C76.6646 58.2405 76.2788 58.2128 75.8925 58.2116C74.7507 58.2116 74.1446 58.469 74.0011 58.6082ZM135.321 56.8574C135.432 57.6505 133.868 59.7683 131.828 60.0524C129.788 60.3365 128.043 58.6813 127.931 57.8882C127.824 57.0951 129.388 56.219 131.427 55.9363C133.466 55.6508 135.208 56.0657 135.321 56.8574ZM131.356 60.4574C129.393 60.4574 127.699 58.9302 127.56 57.9388C127.398 56.7491 129.357 55.8449 131.373 55.5651C131.818 55.5032 132.258 55.4722 132.681 55.4722C134.422 55.4722 135.575 55.9827 135.691 56.8068C135.765 57.3397 135.356 58.1624 134.651 58.9049C134.186 59.3929 133.208 60.238 131.877 60.4222L131.356 60.4574ZM132.683 56.2204C132.293 56.2204 131.891 56.249 131.479 56.3062C129.452 56.5888 128.243 57.4016 128.302 57.8376C128.37 58.3171 129.663 59.7107 131.358 59.7107L131.776 59.6812C132.882 59.5279 133.713 58.8051 134.11 58.3888C134.733 57.7349 134.98 57.119 134.951 56.9094C134.911 56.631 134.163 56.2204 132.683 56.2204ZM138.258 102.406C137.852 102.406 137.453 102.296 137.104 102.087C136.756 101.878 136.47 101.578 136.279 101.219C136.088 100.86 135.998 100.456 136.018 100.05C136.039 99.6443 136.17 99.2516 136.396 98.9141C141.175 91.7774 140.3 84.5001 139.455 77.4618C139.094 74.4637 138.722 71.3629 138.818 68.3872C138.916 65.3258 139.306 62.8002 139.681 60.3576C140.127 57.4635 140.549 54.7298 140.375 51.4841C140.359 51.1899 140.401 50.8955 140.499 50.6176C140.597 50.3398 140.749 50.0839 140.945 49.8647C141.142 49.6454 141.38 49.4671 141.646 49.3398C141.912 49.2126 142.2 49.1389 142.494 49.123C142.788 49.1072 143.083 49.1494 143.36 49.2473C143.638 49.3452 143.894 49.4969 144.113 49.6936C144.556 50.0911 144.823 50.6481 144.855 51.2423C145.055 54.9519 144.578 58.0457 144.117 61.0396C143.761 63.3501 143.393 65.7393 143.304 68.5307C143.218 71.166 143.554 73.9644 143.91 76.926C144.81 84.4101 145.83 92.8926 140.126 101.41C139.92 101.717 139.642 101.968 139.316 102.141C138.991 102.315 138.627 102.406 138.258 102.406Z"
          fill="white"
        />
      </svg>
    ),
  },

  {
    label: "Figma",
    link: "https://www.figma.com",
    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_30_15)">
          <path
            d="M137.812 0H42.1875C18.888 0 0 18.888 0 42.1875V137.812C0 161.112 18.888 180 42.1875 180H137.812C161.112 180 180 161.112 180 137.812V42.1875C180 18.888 161.112 0 137.812 0Z"
            fill="#F4F2ED"
          />
          <path
            d="M85.3953 19.7256C85.0929 19.753 84.1303 19.8493 83.2641 19.9175C63.2911 21.7182 44.5824 32.4957 32.7326 49.0599C26.1352 58.2702 21.9143 68.7172 20.3203 79.7837C19.7571 83.6467 19.6882 84.7878 19.6882 90.0247C19.6882 95.2623 19.7571 96.4035 20.321 100.266C24.1418 126.672 42.9335 148.859 68.419 157.08C72.983 158.551 77.7938 159.554 83.2648 160.159C85.396 160.392 94.6055 160.392 96.7367 160.159C106.18 159.114 114.18 156.777 122.071 152.749C123.28 152.131 123.514 151.966 123.349 151.829C123.24 151.746 118.084 144.831 111.899 136.474L100.654 121.284L86.5639 100.431C78.8112 88.9665 72.4332 79.591 72.3776 79.591C72.3228 79.5777 72.2679 88.8427 72.2405 100.156C72.199 119.964 72.1857 120.762 71.9382 121.229C71.581 121.902 71.306 122.177 70.7281 122.48C70.2886 122.7 69.9033 122.741 67.8277 122.741H65.4497L64.8169 122.342C64.4251 122.097 64.1069 121.75 63.8958 121.339L63.6075 120.72L63.6357 93.1592L63.6764 65.5841L64.1025 65.0476C64.3226 64.7593 64.7902 64.3881 65.12 64.2095C65.6832 63.9345 65.9032 63.9071 68.2812 63.9071C71.086 63.9071 71.5528 64.0168 72.282 64.8142C72.488 65.0342 80.1169 76.5261 89.2449 90.3685C98.4858 104.38 107.732 118.387 116.985 132.391L128.119 149.258L128.683 148.887C133.673 145.643 138.952 141.024 143.13 136.212C152.024 125.999 157.757 113.545 159.681 100.266C160.244 96.4035 160.313 95.2623 160.313 90.0247C160.313 84.7871 160.244 83.6467 159.681 79.7837C155.86 53.3771 137.068 31.1907 111.582 22.9705C107.087 21.5129 102.304 20.5095 96.9427 19.9049C95.6229 19.7671 86.5364 19.6166 85.396 19.7263M114.181 62.2576C114.84 62.5874 115.377 63.2195 115.569 63.879C115.679 64.2369 115.706 71.8799 115.679 89.1036L115.637 113.82L111.28 107.139L106.909 100.458V82.4921C106.909 70.8765 106.964 64.3466 107.046 64.0302C107.266 63.261 107.747 62.6563 108.407 62.2984C108.97 62.0101 109.177 61.982 111.335 61.982C113.37 61.982 113.727 62.0101 114.181 62.2576Z"
            fill="black"
          />
        </g>
        <defs>
          <clipPath id="clip0_30_15">
            <rect width="180" height="180" fill="white" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
  {
    label: "Github",
    link: "https://github.com/",
    Logo: (props: any) => (
      <svg
        {...props}
        viewBox="0 0 180 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_30_15)">
          <path
            d="M137.812 0H42.1875C18.888 0 0 18.888 0 42.1875V137.812C0 161.112 18.888 180 42.1875 180H137.812C161.112 180 180 161.112 180 137.812V42.1875C180 18.888 161.112 0 137.812 0Z"
            fill="#F4F2ED"
          />
          <path
            d="M85.3953 19.7256C85.0929 19.753 84.1303 19.8493 83.2641 19.9175C63.2911 21.7182 44.5824 32.4957 32.7326 49.0599C26.1352 58.2702 21.9143 68.7172 20.3203 79.7837C19.7571 83.6467 19.6882 84.7878 19.6882 90.0247C19.6882 95.2623 19.7571 96.4035 20.321 100.266C24.1418 126.672 42.9335 148.859 68.419 157.08C72.983 158.551 77.7938 159.554 83.2648 160.159C85.396 160.392 94.6055 160.392 96.7367 160.159C106.18 159.114 114.18 156.777 122.071 152.749C123.28 152.131 123.514 151.966 123.349 151.829C123.24 151.746 118.084 144.831 111.899 136.474L100.654 121.284L86.5639 100.431C78.8112 88.9665 72.4332 79.591 72.3776 79.591C72.3228 79.5777 72.2679 88.8427 72.2405 100.156C72.199 119.964 72.1857 120.762 71.9382 121.229C71.581 121.902 71.306 122.177 70.7281 122.48C70.2886 122.7 69.9033 122.741 67.8277 122.741H65.4497L64.8169 122.342C64.4251 122.097 64.1069 121.75 63.8958 121.339L63.6075 120.72L63.6357 93.1592L63.6764 65.5841L64.1025 65.0476C64.3226 64.7593 64.7902 64.3881 65.12 64.2095C65.6832 63.9345 65.9032 63.9071 68.2812 63.9071C71.086 63.9071 71.5528 64.0168 72.282 64.8142C72.488 65.0342 80.1169 76.5261 89.2449 90.3685C98.4858 104.38 107.732 118.387 116.985 132.391L128.119 149.258L128.683 148.887C133.673 145.643 138.952 141.024 143.13 136.212C152.024 125.999 157.757 113.545 159.681 100.266C160.244 96.4035 160.313 95.2623 160.313 90.0247C160.313 84.7871 160.244 83.6467 159.681 79.7837C155.86 53.3771 137.068 31.1907 111.582 22.9705C107.087 21.5129 102.304 20.5095 96.9427 19.9049C95.6229 19.7671 86.5364 19.6166 85.396 19.7263M114.181 62.2576C114.84 62.5874 115.377 63.2195 115.569 63.879C115.679 64.2369 115.706 71.8799 115.679 89.1036L115.637 113.82L111.28 107.139L106.909 100.458V82.4921C106.909 70.8765 106.964 64.3466 107.046 64.0302C107.266 63.261 107.747 62.6563 108.407 62.2984C108.97 62.0101 109.177 61.982 111.335 61.982C113.37 61.982 113.727 62.0101 114.181 62.2576Z"
            fill="black"
          />
        </g>
        <defs>
          <clipPath id="clip0_30_15">
            <rect width="180" height="180" fill="white" />
          </clipPath>
        </defs>
      </svg>
    ),
  },
];

function Tech() {
  return (
    <div className="py-12 lg:py-20 container relative space-y-8">
      <h3 className="text-sm font-mono text-muted-foreground text-center">
        most liked <span className="text-foreground">technologies</span> and{" "}
        <span className="text-foreground">tools</span>
      </h3>
      <ul className="flex w-full items-center justify-center gap-2 md:gap-4 lg:gap-8 flex-wrap">
        {tech.map(({ Logo, label, link }, idx) => (
          <li key={idx}>
            <Link
              href={link}
              target="_blank"
              className="flex items-center gap-2 py-2 px-6 rounded-md bg-muted"
            >
              <Logo className="size-6" />
              <span>{label}</span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Tech;
