add footer

components/footer.tsx

@@ -0,0 +1,100 @@
+import {
+  faDiscord,
+  faGithub,
+  faMastodon,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+import { faMessage } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+
+const Footer = () => (
+  <footer className="bg-ctp-base text-ctp-text">
+    <div className="px-8 mx-auto max-w-8xl gap-8 flex md:flex-row flex-col py-6">
+      <section className="basis-1/3">
+        <h4 className="text-2xl font-bold">About</h4>
+        <p>
+          Crystal Linux is a brand new Arch Linux based distribution. Completely
+          beginner friendly, easy to use, and powerful.
+        </p>
+      </section>
+      <section className="basis-1/3">
+        <h4 className="text-2xl font-bold">Community</h4>
+        <ul>
+          <li>
+            <a href="https://forum.getcryst.al/">
+              <FontAwesomeIcon
+                icon={faMessage}
+                className="mr-1"
+                fixedWidth={true}
+              />
+              Forums
+            </a>
+          </li>
+          <li>
+            <a href="https://twitter.com/Crystal_Linux">
+              <FontAwesomeIcon
+                icon={faTwitter}
+                className="mr-1"
+                fixedWidth={true}
+              />
+              Twitter
+            </a>
+          </li>
+          <li>
+            <a href="https://fosstodon.org/@crystal_linux">
+              <FontAwesomeIcon
+                icon={faMastodon}
+                className="mr-1"
+                fixedWidth={true}
+              />
+              Mastodon
+            </a>
+          </li>
+          <li>
+            <a href="https://github.com/crystal-linux">
+              <FontAwesomeIcon
+                icon={faGithub}
+                className="mr-1"
+                fixedWidth={true}
+              />
+              Github
+            </a>
+          </li>
+          <li>
+            <Link href="/discord">
+              <a>
+                <FontAwesomeIcon
+                  icon={faDiscord}
+                  className="mr-1"
+                  fixedWidth={true}
+                />
+                Discord
+              </a>
+            </Link>
+          </li>
+        </ul>
+      </section>
+      <section className="basis-1/3">
+        <h4 className="text-2xl font-bold">Other</h4>
+        <ul>
+          <li>
+            <a href="https://github.com/crystal-linux/.github/blob/main/CONTRIBUTING.md">
+              Contributing Guidelines
+            </a>
+          </li>
+          <li>
+            <a href="https://www.contributor-covenant.org/">
+              The Contributor Covenant
+            </a>
+          </li>
+          <li>
+            <a href="https://developercertificate.org/">The DCO</a>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </footer>
+);
+
+export default Footer;

components/layout.tsx

@@ -1,3 +1,4 @@
+import Footer from "./footer";
 import Navbar from "./navbar";
 
 const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
@@ -5,6 +6,7 @@ const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
     <Navbar />
 
     {children}
+    <Footer />
   </>
 );
 

pages/index.tsx

@@ -78,7 +78,7 @@ const Home: NextPageWithLayout = () => {
         </div>
       </HomeSection>
 
-      <HomeSection>
+      <HomeSection className="pb-28">
         <div className="basis-1/4">
           <p className="mt-8 font-semibold text-ctp-mauve">Rusty Quartz?</p>
           <p className="mt-4 text-3xl sm:text-4xl text-ctp-text font-extrabold tracking-tight">