Add official links to footer

Author: michaelschattgen

components/Icon.tsx

@@ -0,0 +1,31 @@
+const Icon = ({
+  icon,
+  label,
+  href,
+  className,
+}: {
+  icon: any;
+  label: string;
+  href: string;
+  className?: string;
+}) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label={label}
+    className="hover:opacity-80 transition"
+  >
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      className={className || "w-5 h-5"}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>{icon.title}</title>
+      <path d={icon.path} fill="currentColor" />
+    </svg>
+  </a>
+);
+
+export default Icon;

package.json

@@ -30,10 +30,12 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "express": "^4.18.2",
+    "lucide-react": "^0.513.0",
     "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-qr-code": "^2.0.12",
+    "simple-icons": "^15.0.0",
     "sirv": "^2.0.3",
     "tailwindcss": "^3.4.0",
     "ts-node": "^10.9.1",

pages/index/+Page.tsx

@@ -1,12 +1,14 @@
 import "./App.css";
 import HeroScreenshot from "../../assets/screenshots/hero.png";
-import Icon from "../../assets/icon.png";
+import IconImage from "../../assets/icon.png";
 import Faq from "../../components/Faq";
 import Features from "../../components/Features";
 import ReviewSection from "../../components/Reviews/ReviewSection";
+import { siGithub, siX, siBuymeacoffee, siGmail } from "simple-icons/icons";
 
 // @ts-ignore
 import { QRCode } from "react-qr-code";
+import Icon from "../../components/Icon";
 
 export { Page };
 
@@ -20,7 +22,7 @@ function Page() {
               <div className="flex flex-wrap items-center justify-between gap-6 py-3 md:gap-0 lg:py-5">
                 <div className="w-full items-center flex justify-between lg:w-auto">
                   <a className="relative z-10 w-10 mx-auto md:mx-0" href="#" aria-label="logo">
-                    <img src={Icon} />
+                    <img src={IconImage} />
                   </a>
                 </div>
                 <div className="navmenu hidden w-full flex-wrap justify-end items-center mb-16 space-y-8 p-6 border border-gray-100 rounded-3xl shadow-2xl shadow-gray-300/20 bg-white lg:space-y-0 lg:p-0 lg:m-0 lg:flex md:flex-nowrap lg:bg-transparent lg:w-7/12 lg:shadow-none dark:shadow-none dark:border-gray-700 lg:border-0">
@@ -343,11 +345,37 @@ function Page() {
         <footer className="border-t border-gray-200 dark:border-gray-800">
           <div className="overflow-hidden mx-auto max-w-6xl flex-col align-center justify-center px-5 xl:px-0">
             <div className="flex flex-col items-center pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
-              <form className="flex w-full justify-center md:w-auto">
-                <a href="privacy" className="block hover:underline transition text-sm">
+              <div className="flex items-center space-x-4 mt-6 md:mt-0 text:gray-200">
+                <Icon
+                  icon={siGithub}
+                  label="GitHub"
+                  className="w-5 h-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                  href="https://github.com/beemdevelopment/aegis"
+                />
+                <Icon
+                  icon={siBuymeacoffee}
+                  label="BuyMeACoffee - BeemDevelopment"
+                  className="w-5 h-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                  href="https://buymeacoffee.com/beemdevelopment"
+                />
+                <Icon
+                  icon={siX}
+                  label="X"
+                  className="w-5 h-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                  href="https://x.com/BeemDev"
+                />
+                <Icon
+                  icon={siGmail}
+                  label="Email"
+                  className="w-5 h-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                  href="mailto:beemdevelopment@gmail.com"
+                />
+                <span>|</span>
+                <a href="/privacy" className="ml-4 block hover:underline transition text-sm">
                   <span>Privacy Policy</span>
                 </a>
-              </form>
+              </div>
+
               <p className="mt-6 text-sm text-gray-500 md:mt-0">
                 &copy; Copyright 2025 Beem Development, all rights reserved.
               </p>

yarn.lock

@@ -2406,6 +2406,11 @@ lru-cache@^6.0.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484"
   integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==
 
+lucide-react@^0.513.0:
+  version "0.513.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.513.0.tgz#1315c04fb1121f3be7883ff08a95d55a31a14e97"
+  integrity sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
@@ -3088,6 +3093,11 @@ signal-exit@^4.0.1:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+simple-icons@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/simple-icons/-/simple-icons-15.0.0.tgz#b5ee0f82725a0f8c585ec3dc349592b99b4c2b93"
+  integrity sha512-r6iy7Oqu13XZZ0IFcoqZnNkb8dqJwc+lyZW6KV/C/cbCJVMEMmPKNlntMrOfzVzzx+Uj8p9m13vOHWzU29jCVw==
+
 sirv@^2.0.0, sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
@@ -3125,8 +3135,16 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3186,7 +3204,14 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==