first commit

src/components/layout/Footer.astro

@@ -0,0 +1,46 @@
+---
+import Social from "../ui/Social.astro";
+import { Icon } from "astro-icon/components";
+
+const name = "EFEELE";
+const email = "hello@efeele.dev";
+const github = "https://github.com/EFEELE";
+const linkedin = "https://www.linkedin.com/in/efeele/";
+const instagram = "https://www.instagram.com/efeele.dev/";
+const youtube = "https://www.youtube.com/@efeeledev";
+---
+
+<footer
+  class="relative bottom-0 w-full px-4 py-8 font-medium text-blacktext dark:bg-transparent dark:border-b-2 dark:border-zinc-800 dark:text-zinc-300 max-lg:mt-3"
+  role="contentinfo"
+  aria-label="Site footer"
+>
+  <nav
+    class="mx-auto flex max-w-7xl flex-row items-center justify-between gap-4 text-xl max-xl:px-6 max-sm:flex-col"
+    aria-label="Footer navigation"
+  >
+    <div
+      class="relative h-6 cursor-pointer before:absolute before:left-1/2 before:top-1/2 before:h-full before:w-[40%] before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-[#50fd8f25] before:blur-3xl before:opacity-80 before:-z-1 hover:text-mint-500 transition-all [text-shadow:_0_1px_2px_#000]"
+    >
+      <a href="/" aria-label="Return to homepage">
+        <!-- This icon represents the logo -->
+        <Icon name="logo" aria-hidden="true" />
+      </a>
+    </div>
+    <div class="text-center">
+      <a
+        href="https://github.com/EFEELE"
+        class="flex items-center justify-center gap-3 text-base font-normal italic max-sm:text-sm"
+        aria-label="About the website development"
+        ><Icon name="code" aria-hidden="true" /> Developed by <strong>EFEELE</strong>, with Astro</a
+      >
+    </div>
+    <div class="flex items-center justify-center gap-5" role="list" aria-label="Social media links">
+      <Social link={email} iconName="envelope" label={`Send email to ${email}`} />
+      <Social link={instagram} iconName="instagram" label={`Visit ${name} on Instagram`} />
+      <Social link={youtube} iconName="youtube" label={`Visit ${name} on YouTube`} />
+      <Social link={github} iconName="github" label={`Visit ${name} on GitHub`} />
+      <Social link={linkedin} iconName="linkedin" label={`Visit ${name} on LinkedIn`} />
+    </div>
+  </nav>
+</footer>