Contact page

Polyfrost · Jan 1, 2024 · 634d755 · 634d755
1 parent 5b5bc9e
commit 634d755
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 12 deletions.
diff --git 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
@@ -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
diff --git a/apps/website/src/components/icons/impl/code.svg b/apps/website/src/components/icons/impl/code.svg
diff --git 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
@@ -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
@@ -24,19 +24,19 @@
 
 	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 {
 		-webkit-user-drag: none;
 	}
 }
 
-[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
@@ -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)',
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,8 +17,8 @@ const sizes = { @@
     };
     const iconSize = {
-    	sm: 15,
-    	md: 18,
+    	sm: 17,
+    	md: 20,
     	lg: 24,
     };
@@ Expand Down @@