download selection wip, wrapper fix

src/lib/components/atoms/DownloadSelection.svelte

@@ -0,0 +1,45 @@
+<script>
+	export let kind = 'secondary';
+	$: type = 'button-' + kind;
+	export let href = '#';
+</script>
+
+<a {href}>
+	<button class={type}>
+			<slot/>
+	</button>
+</a>
+
+<style>
+	a {
+		color: var(--white);
+		text-decoration: none;
+	} 
+
+	button,
+	.button-secondary {
+		font-weight: 300;
+        height:60px;
+        width:20vw;
+		color: var(--white);
+		border-radius: 200px;
+        border:0;
+		padding: 12px 40px;
+		cursor: pointer;
+		background-color: transparent;
+		font-size: 1.5rem;
+		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		transition-duration: 0.4s;
+		user-select: none;
+	}
+
+	.button-primary {
+		background-color: var(--red);
+		box-shadow: 0px 0px 32px 1px var(--red-glow);
+	}
+
+	button:hover {
+		background-color: var(--grey-two);
+        font-weight:500;
+	}
+</style>

src/lib/components/molecules/ContributorHost.svelte

@@ -35,9 +35,8 @@
 
     .social-host {
         width: 100;
+        gap:2rem;
 		align-items: center;
-        margin-left: 5rem;
-        margin-right: 5rem;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }

src/lib/components/molecules/DownloadSelectionHost.svelte

@@ -0,0 +1,22 @@
+<script>
+	import DownloadSelection from '../atoms/DownloadSelection.svelte';
+</script>
+
+<div class="download-selection">
+    <DownloadSelection>Manager</DownloadSelection>
+    <DownloadSelection>CLI</DownloadSelection>
+    <DownloadSelection>Patches</DownloadSelection>
+    <DownloadSelection>Integrations</DownloadSelection>
+</div>
+
+<style>
+	.download-selection {
+		transform: translateY(60%);
+		background-color: var(--grey-one);
+		border-radius: 200px;
+		display: flex;
+		justify-content: space-between;
+
+		padding: 8px 8px;
+	}
+</style>

src/routes/__layout.svelte

@@ -4,6 +4,7 @@ import Button from "$lib/components/atoms/Button.svelte";
 import NavHost from "$lib/components/molecules/NavHost.svelte";
 import SocialButton from "$lib/components/atoms/SocialButton.svelte";
 import SocialHost from "$lib/components/molecules/SocialHost.svelte";
+import Wave from '$lib/components/atoms/Wave.svelte';
 
 </script>
 
@@ -28,6 +29,7 @@ import SocialHost from "$lib/components/molecules/SocialHost.svelte";
 <NavHost></NavHost>
 <slot />
 <SocialHost />
+<Wave />
 
 <style>
 	:global(*) {
@@ -50,6 +52,11 @@ import SocialHost from "$lib/components/molecules/SocialHost.svelte";
 		background-color: #0f111a;
 	}
 
+	:global(.wrapper) {
+		margin-left: 6rem;
+		margin-right: 6rem;
+	}
+
 	:root {
 		--white: #ffe1e1;
 		--red: #ff4151;

src/routes/credits.svelte

@@ -1,7 +1,5 @@
 <script>
-	import Wave from '$lib/components/atoms/Wave.svelte';
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
     </script>
 
 <div class="wrapper">

src/routes/download.svelte

@@ -0,0 +1,7 @@
+<script>
+    import DownloadSelectionHost from '$lib/components/molecules/DownloadSelectionHost.svelte';
+</script>
+
+<div class="wrapper">
+    <DownloadSelectionHost></DownloadSelectionHost>
+</div>

src/routes/index.svelte

@@ -1,6 +1,5 @@
 <script>
 	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
-	import Wave from '$lib/components/atoms/Wave.svelte';
 	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
 </script>
 
@@ -9,12 +8,3 @@
 	<HeroImage />
 </div>
 
-<Wave />
-
-
-<style>
-	.wrapper {
-		padding-left: 6rem;
-		padding-right: 6rem;
-	}
-</style>