Add image and new content card

Author: foxeddev

app/page.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import Logo from "@/components/Logo";
 import Card from "@/components/Card";
 import toast from "react-hot-toast";
 
-import { SiGithub, SiDiscord } from "react-icons/si";
+import { SiGithub, SiDiscord, SiGmail } from "react-icons/si";
 import { FaClock } from "react-icons/fa";
 import Header from "@/components/sections/Header";
 import Footer from "@/components/sections/Footer";
 import CardGrid from "@/components/sections/CardGrid";
+import FoxFaceplant from "@/public/img/fox_faceplant.gif";
 import Clock from "@/components/Clock";
 
 export default function Home() {
@@ -59,74 +61,95 @@ export default function Home() {
             </span>
           </h3>
         </Card>
+        <Card className="p-0!" rows={2}>
+          <Image src={FoxFaceplant} alt={""} className="h-full object-cover"></Image>
+        </Card>
+        <Card icon={SiGmail}>
+          <h3 className="font-medium text-2xl">
+            Mail:{" "}
+            <Link
+              href={"mailto:[email protected]"}
+              target="_blank"
+              className="text-indigo-600"
+            >
+              [email protected]
+            </Link>
+          </h3>
+        </Card>
+        <Card align="left">
+          <h3 className="font-medium text-2xl">🌱 I'm currently learning</h3>
+          <p className="font-mono text-gray-500">
+            React <br />
+            NextJS <br />
+            TailwindCSS
+          </p>
+        </Card>
         <Card cols={2} align="left">
-          <div>
-            <h3 className="font-medium text-2xl">Tech Stack or something</h3>
-            <p className="font-mono text-gray-500">
-              OS:{" "}
-              <Link
-                href="https://archlinux.org/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                Arch Linux
-              </Link>
-              <br />
-              WM:{" "}
-              <Link
-                href="https://hydeproject.pages.dev/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                HyDE
-              </Link>{" "}
-              (
-              <Link
-                href="https://hypr.land/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                Hyprland
-              </Link>
-              )
-              <br />
-              Browser:{" "}
-              <Link
-                href="https://zen-browser.app/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                Zen Browser
-              </Link>{" "}
-              (
-              <Link
-                href="https://www.firefox.com/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                Firefox
-              </Link>{" "}
-              based)
-              <br />
-              Editor:{" "}
-              <Link
-                href="https://code.visualstudio.com/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                Visual Studio Code
-              </Link>
-              <br />
-              Minecraft Launcher:{" "}
-              <Link
-                href="https://prismlauncher.org/"
-                target="_blank"
-                className="text-indigo-600 underline"
-              >
-                Prism Launcher
-              </Link>
-            </p>
-          </div>
+          <h3 className="font-medium text-2xl">💻 Tech Stack</h3>
+          <p className="font-mono text-gray-500">
+            OS:{" "}
+            <Link
+              href="https://archlinux.org/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              Arch Linux
+            </Link>
+            <br />
+            WM:{" "}
+            <Link
+              href="https://hydeproject.pages.dev/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              HyDE
+            </Link>{" "}
+            (
+            <Link
+              href="https://hypr.land/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              Hyprland
+            </Link>
+            )
+            <br />
+            Browser:{" "}
+            <Link
+              href="https://zen-browser.app/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              Zen Browser
+            </Link>{" "}
+            (
+            <Link
+              href="https://www.firefox.com/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              Firefox
+            </Link>{" "}
+            based)
+            <br />
+            Editor:{" "}
+            <Link
+              href="https://code.visualstudio.com/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              Visual Studio Code
+            </Link>
+            <br />
+            Minecraft Launcher:{" "}
+            <Link
+              href="https://prismlauncher.org/"
+              target="_blank"
+              className="text-indigo-600 underline"
+            >
+              Prism Launcher
+            </Link>
+          </p>
         </Card>
         <Card>
           <Clock hasSeconds showSubtext />