Merge pull request #92 from Honzoraptor31415/main

Added a discord section
langx · Aug 4, 2024 · ca28f01 · ca28f01
2 parents a2e34dd + a16d76b
commit ca28f01
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 0 deletions.
diff --git a/src/lib/components/organisms/Discord.svelte b/src/lib/components/organisms/Discord.svelte
@@ -0,0 +1,81 @@
+<script>
+	import DiscordWhiteBig from '$lib/icons/socials/discord-white-big.svelte';
+</script>
+
+<section id="discord">
+	<div class="container">
+		<div class="content">
+			<DiscordWhiteBig />
+		</div>
+		<div class="content">
+			<h2>We also have discord!</h2>
+			<p>Join our discord server now and stay in touch with other users and developers!</p>
+		</div>
+		<div class="content">
+			<a href="https://discord.com/invite/2D3jW2YDgS" class="discord-link">Join now!</a>
+		</div>
+	</div>
+</section>
+
+<style>
+	:root {
+		--discord-color: #5865f2;
+	}
+
+	#discord {
+		background-color: var(--discord-color);
+		border-radius: 1.5rem;
+		padding: 30px;
+		text-align: center;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: 25px;
+		align-items: center;
+		padding: 0;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		align-items: center;
+	}
+
+	.discord-link {
+		font-size: 0.875rem;
+		padding: 0.625rem 0.875rem;
+		border-radius: 0.375rem;
+		text-decoration: none;
+		display: flex;
+		font-weight: 600;
+		transition: 0.2s;
+		color: black;
+		border: 2px white solid;
+		background: white;
+	}
+
+	.discord-link:hover {
+		background: transparent;
+		border-color: white;
+		color: white;
+	}
+
+	@media (max-width: 599px) {
+		h2 {
+			font-size: 1.3rem;
+		}
+
+		p {
+			font-size: 0.9rem;
+		}
+	}
+
+	@media (min-width: 600px) {
+		p {
+			max-width: 600px;
+		}
+	}
+</style>
diff --git a/src/lib/icons/socials/discord-white-big.svelte b/src/lib/icons/socials/discord-white-big.svelte
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 127.14 96.36"
+	><path
+		fill="#fff"
+		d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
+	/></svg
+>
diff --git a/src/routes/(waves)/+page.svelte b/src/routes/(waves)/+page.svelte
@@ -9,6 +9,7 @@
 	import Testimonials from '$lib/components/organisms/Testimonials.svelte';
 	import Newsletter from '$lib/components/organisms/Newsletter.svelte';
 	import type { Feature, BlogPost } from '$lib/utils/types';
+	import Discord from '$lib/components/organisms/Discord.svelte';
 
 	export let data: {
 		features: Feature[];
@@ -29,5 +30,6 @@
 	{/if}
 	<BCSponsors />
 	<Newsletter />
+	<Discord />
 	<Faq />
 </div>