From 634d75560bcb3e15687ddf97ed0e5e0ba24091e0 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Mon, 1 Jan 2024 11:30:36 +0100
Subject: Contact page

---
 apps/website/src/components/base/Button.astro   |  4 +--
 apps/website/src/components/icons/Icon.astro    |  2 ++
 apps/website/src/components/icons/impl/chat.svg |  3 ++
 apps/website/src/components/icons/impl/code.svg |  3 ++
 apps/website/src/layouts/Layout.astro           | 13 ++++----
 apps/website/src/pages/contact.astro            | 42 ++++++++++++++++++++++++-
 apps/website/src/styles/global.css              |  6 ++--
 apps/website/tailwind.config.ts                 |  3 ++
 8 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 apps/website/src/components/icons/impl/chat.svg
 create mode 100644 apps/website/src/components/icons/impl/code.svg

diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index fef01f6..e529dc5 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -17,8 +17,8 @@ const sizes = {
 };
 
 const iconSize = {
-	sm: 15,
-	md: 18,
+	sm: 17,
+	md: 20,
 	lg: 24,
 };
 
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro
index fc4fc21..7353c7d 100644
--- a/apps/website/src/components/icons/Icon.astro
+++ b/apps/website/src/components/icons/Icon.astro
@@ -27,6 +27,8 @@ type _Icons =
 	| 'download'
 	| 'book-open'
 	| 'link-external'
+	| 'code'
+	| 'chat'
 	| External
 	| ModIcons;
 export type Icons = _Icons; // bypass for Astro compiler issue https://github.com/withastro/compiler/issues/554#issuecomment-1741702411
diff --git a/apps/website/src/components/icons/impl/chat.svg b/apps/website/src/components/icons/impl/chat.svg
new file mode 100644
index 0000000..d0dd187
--- /dev/null
+++ b/apps/website/src/components/icons/impl/chat.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+	<path d="M6.09436 11.2288C6.03221 10.8282 5.99996 10.4179 5.99996 10C5.99996 5.58172 9.60525 2 14.0526 2C18.4999 2 22.1052 5.58172 22.1052 10C22.1052 10.9981 21.9213 11.9535 21.5852 12.8345C21.5154 13.0175 21.4804 13.109 21.4646 13.1804C21.4489 13.2512 21.4428 13.301 21.4411 13.3735C21.4394 13.4466 21.4493 13.5272 21.4692 13.6883L21.8717 16.9585C21.9153 17.3125 21.9371 17.4895 21.8782 17.6182C21.8266 17.731 21.735 17.8205 21.6211 17.8695C21.4911 17.9254 21.3146 17.8995 20.9617 17.8478L17.7765 17.3809C17.6101 17.3565 17.527 17.3443 17.4512 17.3448C17.3763 17.3452 17.3245 17.3507 17.2511 17.3661C17.177 17.3817 17.0823 17.4172 16.893 17.4881C16.0097 17.819 15.0524 18 14.0526 18C13.6344 18 13.2237 17.9683 12.8227 17.9073M7.63158 22C10.5965 22 13 19.5376 13 16.5C13 13.4624 10.5965 11 7.63158 11C4.66668 11 2.26316 13.4624 2.26316 16.5C2.26316 17.1106 2.36028 17.6979 2.53955 18.2467C2.61533 18.4787 2.65322 18.5947 2.66566 18.6739C2.67864 18.7567 2.68091 18.8031 2.67608 18.8867C2.67145 18.9668 2.65141 19.0573 2.61134 19.2383L2 22L4.9948 21.591C5.15827 21.5687 5.24 21.5575 5.31137 21.558C5.38652 21.5585 5.42641 21.5626 5.50011 21.5773C5.5701 21.5912 5.67416 21.6279 5.88227 21.7014C6.43059 21.8949 7.01911 22 7.63158 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/components/icons/impl/code.svg b/apps/website/src/components/icons/impl/code.svg
new file mode 100644
index 0000000..bc87d0a
--- /dev/null
+++ b/apps/website/src/components/icons/impl/code.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M17 17L22 12L17 7M7 7L2 12L7 17M14 3L10 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro
index 660083a..6f34d9c 100644
--- a/apps/website/src/layouts/Layout.astro
+++ b/apps/website/src/layouts/Layout.astro
@@ -1,10 +1,11 @@
 ---
 import Footer from '@components/base/Footer.astro';
 import Favicon from '/media/polyfrost/minimal_bg.svg?url';
-import 'locomotive-scroll/dist/locomotive-scroll.min.css';
 import Navbar from '../components/base/navbar/Navbar.astro';
 import '../styles/global.css';
 
+// import 'locomotive-scroll/dist/locomotive-scroll.min.css';
+
 interface Props {
 	title?: string
 	description?: string
@@ -37,18 +38,18 @@ const {
 
 	<body class="bg-gray-50 overflow-x-hidden">
 
-		<main class="min-h-screen h-auto flex flex-col gap-40" data-scroll-container>
-			<Navbar data-scroll-section />
+		<main class="min-h-screen h-auto flex flex-col gap-40" >
+			<Navbar />
 
 			<slot/>
 
-			<Footer data-scroll-section />
+			<Footer />
 		</main>
 
 	</body>
 </html>
 
-<script>
+<!-- <script>
 import LocomotiveScroll from 'locomotive-scroll';
 
 // eslint-disable-next-line unused-imports/no-unused-vars
@@ -59,4 +60,4 @@ const scroll = new LocomotiveScroll({
 	touchMultiplier: 0,
 	resetNativeScroll: false,
 });
-</script>
+</script> -->
diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro
index 0dc70bd..fcaba1b 100644
--- a/apps/website/src/pages/contact.astro
+++ b/apps/website/src/pages/contact.astro
@@ -1,13 +1,53 @@
 ---
+import Button from '@components/base/Button.astro';
+import Header from '@components/base/Header.astro';
+import Paragraph from '@components/base/Paragraph.astro';
 import Section from '@components/base/Section.astro';
+import Icon from '@components/icons/Icon.astro';
 import Layout from '@layouts/Layout.astro';
 
 ---
 
 <Layout>
 
-	<Section>
+	<Section wrapperClass="min-h-screen" class="my-40 md:my-40 xl:my-20 2xl:my-20 justify-center items-center flex-col">
+		<Header size="xl" class="text-navy-peony text-center">Feeling social? Come chat with us</Header>
+		<Paragraph class="text-blue-gray max-w-2xl text-center">
+			We primarily connect with our community with Discord, however we regularly check Github as well blah blah blah
+		</Paragraph>
+		<div class="flex flex-row flex-wrap p-5 w-full justify-center items-center gap-8">
+			{/* GitHub */}
+			<div class="bg-blue-75 flex flex-col justify-start items-center p-5 gap-y-0.5 rounded-2xl">
+				<Icon icon="github" size={48} class="text-blue-gray" />
+				<Header size="md" class="text-navy-peony mt-2">GitHub</Header>
+				<div class="flex flex-row items-center justify-center gap-x-1">
+					<span class="w-1.5 h-1.5 bg-green-300 rounded-full"></span>
+					<Paragraph size="sm" class="text-blue-gray">69 commits a week</Paragraph>
+				</div>
 
+				<Paragraph size="sm" class="text-blue-gray max-w-48 text-center my-4">
+					We love open source, so all of our projects are OSS. Anyone is welcome to contribute new features (and bugs) to our mods
+				</Paragraph>
+
+				<Button style="secondary" iconLeft="code" size="sm" class="w-full">Contribute today</Button>
+			</div>
+
+			{/* Discord */}
+			<div class="bg-blue-75 flex flex-col justify-start items-center p-5 gap-y-0.5 rounded-2xl">
+				<Icon icon="discord" size={48} class="text-blue-gray" />
+				<Header size="md" class="text-navy-peony mt-2">Discord</Header>
+				<div class="flex flex-row items-center justify-center gap-x-1">
+					<span class="w-1.5 h-1.5 bg-green-300 rounded-full"></span>
+					<Paragraph size="sm" class="text-blue-gray">69 commits a week</Paragraph>
+				</div>
+
+				<Paragraph size="sm" class="text-blue-gray max-w-48 text-center my-4">
+					Join us today! It's the easiest way to chat with other members, suggest new features, and get support with your mods
+				</Paragraph>
+
+				<Button style="secondary" iconLeft="chat" size="sm" class="w-full">Chat with us</Button>
+			</div>
+		</div>
 	</Section>
 
 </Layout>
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
index f29f0f0..371d5e6 100644
--- a/apps/website/src/styles/global.css
+++ b/apps/website/src/styles/global.css
@@ -24,7 +24,7 @@
 
 	html,
 	body {
-		@apply text-[15px] md:text-[16px] lg:text-[19px] overflow-hidden;
+		@apply text-[15px] md:text-[16px] lg:text-[19px] /* overflow-hidden */;
 	}
 
 	a {
@@ -32,11 +32,11 @@
 	}
 }
 
-[data-scroll-container], [data-scroll-section] {
+/* [data-scroll-container], [data-scroll-section] {
 	transform-style: preserve-3d;
 	will-change: transform;
 	perspective: 1px;
-}
+} */
 
 main {
 	@apply overflow-x-hidden;
diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts
index efc7364..3085e78 100644
--- a/apps/website/tailwind.config.ts
+++ b/apps/website/tailwind.config.ts
@@ -18,6 +18,9 @@ const config: Config = {
 				600: 'rgba(9, 84, 165, 1)',
 				800: 'rgba(19, 43, 83, 1)',
 			},
+			'green': {
+				300: 'rgba(35, 154, 96, 0.5)',
+			},
 			'gray': {
 				50: 'rgba(240, 242, 244, 1)',
 				200: 'rgba(196, 202, 212, 1)',
-- 
cgit