add contact page

src/app/contact/mail.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import React, { useEffect, useState } from "react";
+
+export function MailLink() {
+    const address = "(: tey liame cilbup gnikrow a evah tnod ew ,yrros";
+    const [addressState, setAdress] = useState(null as null | string);
+    useEffect(() => {
+      setTimeout(() => {
+        setAdress(address.split("").reverse().join(""))
+      }, 1000);
+    }, [])
+
+    return (
+      addressState 
+      ? <a className="underline" href={`mailto:${addressState}`}>{addressState}</a>
+      : <span>[email protected] (Loading...)</span>
+    )
+  }

src/app/contact/page.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { Metadata } from 'next';
+import { Page } from '../../components/Page';
+import { MailLink } from './mail';
+
+export const metadata: Metadata = {
+  title: 'Contact Us',
+  openGraph: {
+    title: 'Contact Us',
+  },
+};
+
+export default function ContactPage() {
+  return (
+    <Page className='max-w-[600px]'>
+      <h1 className="text-center text-neutral-400 font-medium my-4">Have Questions?</h1>
+      <h2 className="text-center text-5xl font-semibold my-4">Contact Us!</h2>
+
+      <p className='pb-4 pt-10'>
+        If you have any questions regarding transcribee, do not hesitate to contact us.
+        Be it for Cooperations, custom Integrations, development of custom features, requests for
+        discount or anything else you can come up with.
+      </p>
+
+      <p className='pb-4'>
+        Just send us an email: <MailLink />
+      </p>
+    </Page>
+  );
+}
+