From a4456ac27a1bd3a19e95aa2f21feb3c962c541fa Mon Sep 17 00:00:00 2001
From: Jaro Habiger <jarohabiger@googlemail.com>
Date: Sat, 2 Dec 2023 23:30:05 +0100
Subject: [PATCH] add contact page

---
 src/app/contact/mail.tsx | 19 +++++++++++++++++++
 src/app/contact/page.tsx | 31 +++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 src/app/contact/mail.tsx
 create mode 100644 src/app/contact/page.tsx

diff --git a/src/app/contact/mail.tsx b/src/app/contact/mail.tsx
new file mode 100644
index 0000000..8ef3bc3
--- /dev/null
+++ b/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>xxxxxxx@xxxxxxxxxxx.xxx (Loading...)</span>
+    )
+  }
\ No newline at end of file
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..76795e7
--- /dev/null
+++ b/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>
+  );
+}
+