(feat) Refine Footer

Signed-off-by: Progyan Bhattacharya <[email protected]>

Author: 0xTheProDev

src/components/layout/footer.astro

@@ -1,5 +1,6 @@
 ---
 import { cn } from "@/lib/utils";
+import SocialMedia from "./social-media.astro";
 
 type Props = {
   className?: string;
@@ -13,58 +14,22 @@ const { className } = Astro.props;
     class="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0"
   >
     <div
-      class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0 z-50"
+      class="flex flex-col items-center gap-8 px-0 md:px-8 md:justify-around md:w-full z-50"
     >
-      Copyright <a href="/" aria-label="Otjs homepage"> &copy; </a>
-
       <p class="text-center text-sm leading-loose md:text-left balance-text">
-        All rights reserved by{" "}
+        <a href="/" aria-label="Otjs homepage">Copyright &copy;</a>
+        All rights reserved by
         <a
           href="https://twitter.com/ProDevOfficial"
           target="_blank"
           rel="noreferrer"
           class="font-medium underline underline-offset-4"
         >
           0xTheProDev
-        </a>
-        . Template Built by{" "}
-        <a
-          href="https://twitter.com/miickasmt"
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          mickasmt
-        </a>
-        . Based on{" "}
-        <a
-          href="https://github.com/shadcn-ui/taxonomy"
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          shadcn-ui/taxonomy
-        </a>
-        . Hosted on{" "}
-        <a
-          href="https://pages.github.com"
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          GitHub Pages
-        </a>
-        . The source code is available on{" "}
-        <a
-          href="https://github.com/0xTheProDev/otjs"
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          GitHub
-        </a>
-        .
+        </a>.
       </p>
+
+      <SocialMedia className="md:hidden" />
     </div>
   </div>
 </footer>

src/components/layout/right-nav.astro

@@ -1,46 +1,9 @@
 ---
 import { ThemeToggle } from "@/components/theme-toggle";
-import { siteConfig } from "@/config/site";
-
-import Icon from "astro-icon";
+import SocialMedia from "./social-media.astro";
 ---
 
 <nav class="flex flex-row items-center gap-4">
-  <a
-    href={siteConfig.links.github}
-    target="_blank"
-    rel="noreferrer"
-    class="hidden md:inline"
-  >
-    <span class="sr-only">GitHub</span>
-    <Icon name="simple-icons:github" class="size-6" />
-  </a>
-  <a
-    href={siteConfig.links.twitter}
-    target="_blank"
-    rel="noreferrer"
-    class="hidden md:inline"
-  >
-    <span class="sr-only">Twitter</span>
-    <Icon name="simple-icons:twitter" class="size-6" />
-  </a>
-  <a
-    href={siteConfig.links.linkedin}
-    target="_blank"
-    rel="noreferrer"
-    class="hidden md:inline"
-  >
-    <span class="sr-only">LinkedIn</span>
-    <Icon name="simple-icons:linkedin" class="size-6" />
-  </a>
-  <a
-    href={siteConfig.links.discord}
-    target="_blank"
-    rel="noreferrer"
-    class="hidden md:inline"
-  >
-    <span class="sr-only">Discord</span>
-    <Icon name="simple-icons:discord" class="size-6" />
-  </a>
+  <SocialMedia className="hidden md:flex" />
   <ThemeToggle client:idle />
 </nav>

src/components/layout/social-media.astro

@@ -0,0 +1,47 @@
+---
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
+
+import Icon from "astro-icon";
+
+const { className } = Astro.props;
+---
+
+<div class={cn("flex flex-row items-center gap-4", className)}>
+  <a
+    href={siteConfig.links.github}
+    target="_blank"
+    rel="noreferrer"
+    class="inline"
+  >
+    <span class="sr-only">GitHub</span>
+    <Icon name="simple-icons:github" class="size-6" />
+  </a>
+  <a
+    href={siteConfig.links.twitter}
+    target="_blank"
+    rel="noreferrer"
+    class="inline"
+  >
+    <span class="sr-only">Twitter</span>
+    <Icon name="simple-icons:twitter" class="size-6" />
+  </a>
+  <a
+    href={siteConfig.links.linkedin}
+    target="_blank"
+    rel="noreferrer"
+    class="inline"
+  >
+    <span class="sr-only">LinkedIn</span>
+    <Icon name="simple-icons:linkedin" class="size-6" />
+  </a>
+  <a
+    href={siteConfig.links.discord}
+    target="_blank"
+    rel="noreferrer"
+    class="inline"
+  >
+    <span class="sr-only">Discord</span>
+    <Icon name="simple-icons:discord" class="size-6" />
+  </a>
+</div>

src/pages/index.astro

@@ -172,17 +172,32 @@ import Icon from "astro-icon";
           class="underline underline-offset-4"
         >
           GitHub
-        </a>
-        .
+        </a> under MIT License.
       </p>
-      <a
-        href="https://github.com/sponsors/0xTheProDev"
-        target="_blank"
-        rel="noreferrer"
-        class="underline underline-offset-4 z-50"
-      >
-        <Icon name="sponsor" class="size-36 rounded -mt-8" />
-      </a>
+
+      <div class="flex justify-center space-x-2 md:space-x-4">
+        <a
+          href="https://github.com/sponsors/0xTheProDev"
+          target="_blank"
+          rel="noreferrer"
+          class={cn(buttonVariants({ size: "lg" }), "z-50")}
+        >
+          <Icon name="mdi:hand-heart" class="mr-2 size-5" />
+          Sponsor
+        </a>
+        <a
+          href="https://opensource.org/osd"
+          target="_blank"
+          rel="noreferrer"
+          class={cn(
+            buttonVariants({ variant: "outline", size: "lg" }),
+            "px-4 z-50",
+          )}
+        >
+          <Icon name="simple-icons:opensourceinitiative" class="mr-2 size-5" />
+          Read more about Open Source
+        </a>
+      </div>
     </div>
   </section>
 </MainLayout>