added links to the footer & timeshift screenshot

components/footer.tsx

@@ -4,7 +4,11 @@ import {
   faMastodon,
   faTwitter,
 } from "@fortawesome/free-brands-svg-icons";
-import { faMessage } from "@fortawesome/free-solid-svg-icons";
+import {
+  faDonate,
+  faMessage as faSolidMessage
+} from "@fortawesome/free-solid-svg-icons";
+import { faMessage } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 
@@ -24,7 +28,7 @@ const Footer = () => (
           <li>
             <a href="https://forum.getcryst.al/">
               <FontAwesomeIcon
-                icon={faMessage}
+                icon={faSolidMessage}
                 className="mr-1"
                 fixedWidth={true}
               />
@@ -73,11 +77,35 @@ const Footer = () => (
               </a>
             </Link>
           </li>
+          <li>
+            <Link href="https://matrix.to/#/#crystal:tar.black">
+              <a>
+                <FontAwesomeIcon
+                  icon={faMessage}
+                  className="mr-1"
+                  fixedWidth={true}
+                />
+                Matrix
+              </a>
+            </Link>
+          </li>
         </ul>
       </section>
       <section className="basis-1/3">
         <h4 className="text-2xl font-bold">Other</h4>
         <ul>
+        <li>
+            <Link href="https://opencollective.com/crystal-linux">
+              <a>
+                <FontAwesomeIcon
+                  icon={faDonate}
+                  className="mr-1"
+                  fixedWidth={true}
+                />
+                Open Collective
+              </a>
+            </Link>
+          </li>
           <li>
             <a href="https://github.com/crystal-linux/.github/blob/main/CONTRIBUTING.md">
               Contributing Guidelines

pages/index.tsx

@@ -9,6 +9,8 @@ import { ReactElement } from "react";
 
 import onyxDark from "../public/demos/onyx-dark.png";
 import onyxLight from "../public/demos/onyx-light.png";
+import snapshots from "../public/demos/snapshots.png"
+import timeshiftSnapshots from "../public/demos/timeshift-snapshots.png"
 import AmePreview from "../components/AmePreview";
 import HomeSection from "../components/HomeSection";
 
@@ -20,7 +22,7 @@ const Home: NextPageWithLayout = () => {
       <section>
         <div className="flex flex-col items-center justify-center px-4 pt-36 text-center md:px-8 md:pb-32 lg:pt-44">
           <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight text-ctp-text md:text-5xl lg:text-6xl">
-            An arch based distribution
+            An Arch based distribution
           </h1>
           <p className="mb-6 text-lg font-normal text-ctp-subtext1 sm:px-16 lg:text-xl xl:px-48">
             Crystal Linux is a brand new Arch Linux based distribution.
@@ -76,6 +78,14 @@ const Home: NextPageWithLayout = () => {
             Backup & Restore your system. Easily boot into Btrfs snapshots.
           </p>
         </div>
+
+        <div className="flex basis-3/4 justify-center">
+          <Image
+            src={timeshiftSnapshots}
+            className="rounded-xl shadow-lg shadow-ctp-crust"
+            alt="a screenshot showing timeshift, a graphical snapshot tool. 5 snapshots are shown in the window."
+          />
+        </div>
       </HomeSection>
 
       <HomeSection className="pb-16 md:pb-28">