From de44aa2927f15c4c362ce20ea89bed28ecd8d5b2 Mon Sep 17 00:00:00 2001
From: guusvanmeerveld <guusvanmeerveld@live.nl>
Date: Thu, 3 Jun 2021 14:01:42 +0100
Subject: [PATCH] Seperate page for contact

---
 src/pages/contact.tsx        | 19 +++++++++++++++++++
 src/pages/index.tsx          |  3 ---
 src/styles/sass/contact.scss |  8 +++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/contact.tsx

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
new file mode 100644
index 0000000..3981576
--- /dev/null
+++ b/src/pages/contact.tsx
@@ -0,0 +1,19 @@
+import { NextPage } from 'next';
+
+import Page from '@components/Page';
+import Layout from '@components/Layout';
+import ContactForm from '@components/Contact';
+
+const Contact: NextPage = () => {
+	return (
+		<Page description="Contact me" title="Contact">
+			<Layout>
+				<div className="contact-page">
+					<ContactForm />
+				</div>
+			</Layout>
+		</Page>
+	);
+};
+
+export default Contact;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4db562c..4f501c3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,6 +1,5 @@
 import { NextPage } from 'next';
 
-import Contact from '@components/Contact';
 import Layout from '@components/Layout';
 import Page from '@components/Page';
 
@@ -39,8 +38,6 @@ const Home: NextPage = () => (
 					))}
 				</div>
 			</div>
-
-			<Contact />
 		</Layout>
 	</Page>
 );
diff --git a/src/styles/sass/contact.scss b/src/styles/sass/contact.scss
index 4707edf..dfd6594 100644
--- a/src/styles/sass/contact.scss
+++ b/src/styles/sass/contact.scss
@@ -3,7 +3,7 @@
 		font-size: 4rem;
 		text-align: center;
 		margin-bottom: 3rem;
-		border-top: 0.1rem solid var(--borders);
+		// border-top: 0.1rem solid var(--borders);
 		padding-top: 4rem;
 	}
 
@@ -26,3 +26,9 @@
 		height: 10rem;
 	}
 }
+
+.contact-page {
+	height: 100vh;
+
+	padding-top: 10rem;
+}