feat: add contact page

README.md

@@ -8,3 +8,4 @@ An [X](https://twitter.com/home) clone built as a submission for the [WebDevCody
 - [Clerk](https://clerk.com/) - User authentication and management
 - [Tailwind](https://tailwindcss.com/) - Styling
 - [Vercel](https://vercel.com/) - Hosting
+- [Codemirror](https://codemirror.net/) - Editor

src/app/about/page.tsx

@@ -5,5 +5,110 @@ export const metadata: Metadata = {
 };
 
 export default function AboutPage() {
-  return <h1>About</h1>;
+  return (
+    <main className="flex flex-col items-center flex-1">
+      <article className="flex flex-col w-full max-w-4xl gap-8">
+        <section className="flex flex-col items-center gap-2">
+          <h1 className="text-4xl mt-4">
+            Welcome to{' '}
+            <span className="italic">
+              conve<span className="font-bold text-primary-accent">X</span>
+            </span>
+          </h1>
+          <p className="max-w-xl">
+            An X inspired social site that supports following other users,
+            liking posts, and sharing both long and short posts formatted with{' '}
+            <a
+              className="text-primary-accent font-semibold dark:text-white dark:underline"
+              href="https://commonmark.org/help/"
+              target="_blank"
+            >
+              Markdown
+            </a>
+            .
+          </p>
+        </section>
+        <section className="flex flex-col gap-2">
+          <h2 className="text-2xl font-bold">About</h2>
+          <p>
+            This site was built as a submission for the WebDevCody{' '}
+            <a
+              className="text-primary-accent font-semibold dark:text-white dark:underline"
+              href="https://hackathon.webdevcody.com/"
+              target="_blank"
+            >
+              hackathon
+            </a>
+            . The following are some technologies that were used to build the
+            site:
+          </p>
+          <ul className=" flex flex-col gap-2 list-disc ml-4">
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://www.typescriptlang.org/"
+                target="_blank"
+              >
+                TypeScript
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://nextjs.org/"
+                target="_blank"
+              >
+                NEXT.js
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://www.convex.dev/"
+                target="_blank"
+              >
+                Convex
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://clerk.com/"
+                target="_blank"
+              >
+                Clerk
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://tailwindcss.com/"
+                target="_blank"
+              >
+                Tailwind
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://codemirror.net/"
+                target="_blank"
+              >
+                Codemirror
+              </a>
+            </li>
+            <li>
+              <a
+                className="text-primary-accent font-semibold dark:text-white dark:underline"
+                href="https://vercel.com/"
+                target="_blank"
+              >
+                Vercel
+              </a>
+            </li>
+          </ul>
+        </section>
+      </article>
+    </main>
+  );
 }

src/app/contact/page.tsx

@@ -1,9 +1,49 @@
 import { Metadata } from 'next';
+import { RiTwitterXLine } from 'react-icons/ri';
+import { TiSocialLinkedin } from 'react-icons/ti';
+import { VscGithub } from 'react-icons/vsc';
 
 export const metadata: Metadata = {
   title: 'conveX | Contact',
 };
 
 export default function ContactPage() {
-  return <h1>Contact</h1>;
+  return (
+    <main className="flex flex-col items-center justify-center flex-1">
+      <article className="flex flex-col w-full max-w-4xl">
+        <section className="flex flex-col items-center gap-8">
+          <h1 className="text-4xl font-bold">Get in touch</h1>
+          <ul className="flex flex-col items-center gap-8 sm:flex-row">
+            <li className="bg-primary-accent rounded-full p-1 shadow-md hover:scale-125 transition duration-300 ease-in transform">
+              <a
+                href="https://github.com/StevanFreeborn"
+                target="_blank"
+                className="text-white"
+              >
+                <VscGithub className="w-16 h-16" />
+              </a>
+            </li>
+            <li className="bg-primary-accent rounded-full p-1 shadow-md hover:scale-125 transition duration-300 ease-in transform">
+              <a
+                href="https://twitter.com/stevan_freeborn"
+                target="_blank"
+                className="text-white"
+              >
+                <RiTwitterXLine className="w-16 h-16" />
+              </a>
+            </li>
+            <li className="bg-primary-accent rounded-full p-1 shadow-md hover:scale-125 transition duration-300 ease-in transform">
+              <a
+                href="https://www.linkedin.com/in/stevan-freeborn-77917b75/"
+                target="_blank"
+                className="text-white"
+              >
+                <TiSocialLinkedin className="w-16 h-16" />
+              </a>
+            </li>
+          </ul>
+        </section>
+      </article>
+    </main>
+  );
 }