feat: finish my pages overview page according to wireframe

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -0,0 +1,37 @@
+import Image from "@/components/Image"
+import Link from "next/link"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./shortcuts.module.css"
+
+import type { ShortcutsProps } from "@/types/components/myPages/shortcuts"
+
+export default function Shortcuts({ shortcuts }: ShortcutsProps) {
+  return (
+    <section className={styles.shortcuts}>
+      <header className={styles.header}>
+        <Title level="h2" uppercase>
+          Handy Shortcuts
+        </Title>
+        <p className={styles.subtitle}>The community at your fingertips</p>
+      </header>
+      <section className={styles.links}>
+        {shortcuts.map((shortcut) => (
+          <Link
+            className={styles.link}
+            href={shortcut.href}
+            key={shortcut.title}
+          >
+            <span>{shortcut.title}</span>
+            <Image
+              alt="Chevron Icon"
+              height={20}
+              src="/chevron.svg"
+              width={20}
+            />
+          </Link>
+        ))}
+      </section>
+    </section>
+  )
+}

components/MyPages/Blocks/Shortcuts/shortcuts.module.css

@@ -0,0 +1,39 @@
+.shortcuts {
+  display: grid;
+  gap: 2rem;
+  max-width: var(--max-width);
+}
+
+.header {
+  display: grid;
+  gap: 2rem;
+}
+
+.subtitle {
+  font-family: var(--ff-fira-sans);
+  font-size: 1.8rem;
+  font-weight: 400;
+  line-height: 2.2rem;
+  margin: 0;
+}
+
+.links {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.link {
+  align-items: center;
+  border: 0.1rem solid var(--some-grey-color, #d9d9d9);
+  border-radius: 0.4rem;
+  color: var(--some-black-color, #000);
+  display: flex;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 700;
+  gap: 0.4rem;
+  justify-content: space-between;
+  line-height: 2.2rem;
+  padding: 1.4rem 2rem;
+  text-decoration: none;
+}