Merge pull request #35 from languageXchange:behics/issue33

Add AnnouncementModal component and include it in the Waves layout

src/lib/components/molecules/AnnouncementModal.svelte

@@ -0,0 +1,55 @@
+<script>
+	import { onMount } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	let show = false;
+
+	onMount(() => {
+		show = true;
+	});
+</script>
+
+{#if show}
+	<div class="modal" transition:slide={{ duration: 800 }}>
+		<div class="modal-content">
+			<button class="close-button" on:click={() => (show = false)}>X</button>
+			<h4>⬆️ Breaking News!</h4>
+			<p>
+				We are now live on <a
+					href="https://pitchwall.co/product/languagexchange"
+					target="_blank">PitchWall</a
+				>! Upvote us there.
+			</p>
+		</div>
+	</div>
+{/if}
+
+<style>
+	@import '$lib/scss/_themes.scss';
+	.modal {
+		position: relative;
+		z-index: 9999;
+		width: 100%;
+		background-color: var(--color--secondary);
+	}
+
+	.modal-content {
+		position: relative;
+		margin: 0 auto;
+		padding: 20px;
+		padding-right: 50px; /* Add padding to the right side */
+		width: 80%;
+	}
+
+	.close-button {
+		position: absolute;
+		right: 10px;
+		top: 50%;
+		transform: translateY(-50%);
+		border: none;
+		background: none;
+		font-size: 1.5em;
+		cursor: pointer;
+		color: black;
+	}
+</style>

src/routes/(waves)/+layout.svelte

@@ -1,5 +1,6 @@
 <script>
 	import Waves from '$lib/components/organisms/Waves.svelte';
+	import AnnouncementModal from '$lib/components/molecules/AnnouncementModal.svelte';
 	import Header from '$lib/components/organisms/Header.svelte';
 	import Footer from '$lib/components/organisms/Footer.svelte';
 
@@ -24,6 +25,8 @@
 	<meta name="twitter:card" content="summary_large_image" />
 </svelte:head>
 
+<AnnouncementModal />
+
 <Waves />
 
 <Header />