About
-
Contact
+
Contact
Twitter
GitLab
Discord
diff --git a/components/elements/smallstyledbutton.tsx b/components/elements/smallstyledbutton.tsx
index 8834c51..4313823 100644
--- a/components/elements/smallstyledbutton.tsx
+++ b/components/elements/smallstyledbutton.tsx
@@ -14,6 +14,9 @@ export default function StyledButton(props: any) {
font-size: 1em;
border-radius: 8px;
transition-duration: 0.2s;
+ gap: var(--padding-sm);
+ color: unset;
+ text-decoration: unset;
}
a:hover {
background-color: var(--background-color-dark);
diff --git a/components/elements/styledbutton.tsx b/components/elements/styledbutton.tsx
index d1074cd..b5ef7f5 100644
--- a/components/elements/styledbutton.tsx
+++ b/components/elements/styledbutton.tsx
@@ -15,6 +15,9 @@ export default function StyledButton(props: any) {
border-radius: 8px;
background-color: var(--background-color-dark);
transition-duration: 0.2s;
+ gap: var(--padding-sm);
+ color: unset;
+ text-decoration: unset;
}
a:hover {
background-color: var(--theme-color-500);
diff --git a/components/menu.tsx b/components/menu.tsx
index 2f467a8..290dbf6 100644
--- a/components/menu.tsx
+++ b/components/menu.tsx
@@ -20,7 +20,7 @@ export default function Menu() {
Blog
Showcase
Services
-
Contact
+
Contact
diff --git a/pages/about.tsx b/pages/about.tsx
index d319755..b7d7930 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -8,7 +8,7 @@ import SmallStyledButton from '../components/elements/smallstyledbutton';
import pascal from '../public/img/mid.png'
import marco from '../public/img/marco.png'
-export default function Index() {
+export default function About() {
return (
diff --git a/pages/contact.tsx b/pages/contact.tsx
new file mode 100644
index 0000000..09e1d90
--- /dev/null
+++ b/pages/contact.tsx
@@ -0,0 +1,73 @@
+import Head from 'next/head';
+import Image from 'next/image';
+import styles from '../styles/Contact.module.css';
+import Link from 'next/link';
+import StyledButton from '../components/elements/styledbutton';
+import SmallStyledButton from '../components/elements/smallstyledbutton';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { faDiscord } from '@fortawesome/free-brands-svg-icons'
+
+export default function Contact() {
+ return (
+
+
+
{process.env.NEXT_PUBLIC_NAME} | About
+
+
+
+
+
+
+ {"📬 Contact us"}
+
+
+
+
{"📨 Shoot us an email"}
+
+
+
{"💬 Other contact methods"}
+
+ Message us on our Discord server
+ Send a DM to our Twitter account
+
+
+
+ {"📵 We don't have a public phone number for contact"}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/styles/Contact.module.css b/styles/Contact.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/styles/globals.css b/styles/globals.css
index 807432b..b68024a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -132,6 +132,33 @@ hr {
}
+/* form defaults */
+form {
+ display: flex;
+ flex-direction: column;
+ gap: var(--padding);
+}
+
+form > div {
+ display: flex;
+ flex-direction: column;
+ gap: var(--padding-sm);
+}
+
+textarea {
+ max-width: 100%;
+ min-width: 100%;
+}
+
+form input, form textarea {
+ border-radius: var(--padding-sm);
+ font-size: 1rem;
+ border: unset;
+ background-color: var(--background-color-body);
+ padding: 0.3em 0.4em;
+}
+
+
/* mobile */
@media(max-aspect-ratio: 5/4) {
.content {