---
import svgGit from "/src/assets/icons/git.svg?raw";
import svgGithub from "/src/assets/icons/github.svg?raw";
import svgDiscord from "/src/assets/icons/discord.svg?raw";
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
---

<section id="socials" class="flex flex-col items-center">
  <h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
    Get in touch
  </h2>
  <div class="flex flex-row items-center justify-center gap-8 mt-10">
    <a
      href="https://git.lumeweb.com"
      title="Git"
      class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
    >
      <Fragment set:html={svgGit} />
    </a>
    <a
      href="https://github.com/LumeWeb"
      title="GitHub"
      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
    >
      <Fragment set:html={svgGithub} />
    </a>
    <a
      href="https://discord.gg/qpC8ADp3rS"
      title="Discord"
      class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
    >
      <Fragment set:html={svgDiscord} />
    </a>
    <a
      href="https://twitter.com/lumeweb3"
      title="Twitter"
      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
    >
      <Fragment set:html={svgTwitter} />
    </a>
  </div>
</section>
