From b9829fc7926be5c9caa8a59e121f42a3da9f07b5 Mon Sep 17 00:00:00 2001
From: holybaechu <holybaechu@github.com>
Date: Fri, 23 Feb 2024 02:17:37 +0900
Subject: [PATCH] Create `Link` Component

---
 src/components/Link.svelte | 7 +++++++
 src/routes/+page.svelte    | 7 ++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Link.svelte

diff --git a/src/components/Link.svelte b/src/components/Link.svelte
new file mode 100644
index 0000000..9961ead
--- /dev/null
+++ b/src/components/Link.svelte
@@ -0,0 +1,7 @@
+<script>
+    export let href = "";
+</script>
+
+<a target="_blank" href={href} class="text-primary hover:underline">
+    <slot />
+</a>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 50bb957..7696790 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,7 @@
 <script>
 	import Button from '$components/Button.svelte';
 	import Card from '$components/Card.svelte';
+	import Link from '$components/Link.svelte';
 
 	import Logo from "$lib/images/logo.webp"
 </script>
@@ -37,13 +38,13 @@
 	<!-- Cards -->
 	<div class="grid gap-4 mt-10 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
 		<Card title="🕑 Uptime">
-			We will work hard to ensure that our bot is always ready to send notifications when someone boosts your server. You can find our status page <a target="_blank" class="text-secondary" href="/status">here</a>.
+			We will work hard to ensure that our bot is always ready to send notifications when someone boosts your server. You can find our status page <Link href="/status">here</Link>.
 		</Card>
 		<Card title="✨ Customization">
 			You can customize the image of the embed and DM messages sent to booster to fit your server's style.
 		</Card>
 		<Card title="🌍 Multi Language">
-			You can change the language of the bot's reponses, command names and descriptions to ensure that your server members can use the bot in their own language. If you're missing a language, you can apply as a translator on our <a target="_blank" class="text-secondary" href="/support">support server</a>.
+			You can change the language of the bot's reponses, command names and descriptions to ensure that your server members can use the bot in their own language. If you're missing a language, you can apply as a translator on our <Linkhref="/support">support server</Link>.
 		</Card>
 		<Card title="🛠️ Easy Management">
 			You can manage which roles will be given to the booster and which channel will the notifications be sent to with just one command.
@@ -52,7 +53,7 @@
 			You can simulate a boost to test if the bot is working correctly and to see how your notification configuration will look like.
 		</Card>
 		<Card title="📞 Fast Support">
-			We have a dedicated <a target="_blank" class="text-secondary" href="/support">support server</a> where you can ask for help and we will respond as soon as possible. To report bugs or suggest new features use our <a target="_blank" class="text-secondary" href="/feedback">feedback app</a>.
+			We have a dedicated <Link href="/support">support server</Link> where you can ask for help and we will respond as soon as possible. To report bugs or suggest new features use our <Link href="/feedback">feedback app</Link>.
 		</Card>
 	</div>
 </div>
\ No newline at end of file