From 8584aa665ac837dae6928db9a96894e4d5bfee2d Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Thu, 29 May 2025 17:16:39 +0530
Subject: [PATCH] made the cards on right redirect to the correct page and the
 bagde and the card saying more tools down, scrool automaticly to those tools!

---
 src/routes/+HomePage/Galery.svelte      |  2 +-
 src/routes/+HomePage/landingPage.svelte | 18 +++++++++----
 src/routes/+HomePage/rightCards.svelte  | 36 ++++++++++++++++---------
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/routes/+HomePage/Galery.svelte b/src/routes/+HomePage/Galery.svelte
index d1f7b7f..a54f2ad 100644
--- a/src/routes/+HomePage/Galery.svelte
+++ b/src/routes/+HomePage/Galery.svelte
@@ -2,7 +2,7 @@
 	import tools from "./tools.json"
 </script>
 
-<div class="flex items-center justify-center p-3">
+<div id="galarry" class="flex items-center justify-center p-3">
     <div
 		class="flex flex-wrap justify-center gap-5"
 	>
diff --git a/src/routes/+HomePage/landingPage.svelte b/src/routes/+HomePage/landingPage.svelte
index a3ef707..6e93a06 100644
--- a/src/routes/+HomePage/landingPage.svelte
+++ b/src/routes/+HomePage/landingPage.svelte
@@ -43,9 +43,17 @@
 		</div>
 		<RightCards />
 	</div>
-	<div class="m-3 w-fit rounded-full bg-gray-900 px-3 py-1 text-xl text-gray-500">
-		<i class="nf-fa-angles_down nf"></i>
-		Scroll to see more tools!
-		<i class="nf-fa-angles_down nf"></i>
-	</div>
+	<a
+		href="#galarry"
+		on:click|preventDefault={() => {
+			const el = document.getElementById("galarry");
+			if (el) el.scrollIntoView({ behavior: "smooth" });
+		}}
+	>
+		<div class="m-3 w-fit rounded-full bg-gray-900 px-3 py-1 text-xl text-gray-500">
+			<i class="nf-fa-angles_down nf"></i>
+			Scroll to see more tools!
+			<i class="nf-fa-angles_down nf"></i>
+		</div></a
+	>
 </div>
diff --git a/src/routes/+HomePage/rightCards.svelte b/src/routes/+HomePage/rightCards.svelte
index eda5cc1..990f3c5 100644
--- a/src/routes/+HomePage/rightCards.svelte
+++ b/src/routes/+HomePage/rightCards.svelte
@@ -5,20 +5,30 @@
 <div class="hidden flex-col gap-3 lg:flex">
 	{#each tools as tool, i}
 		{#if i < 3}
-			<div class="card max-w-[320px]">
-				<div class="flex gap-2 text-4xl">
-					<i class="nf {tool.icon}"></i>
-					<h1>{tool.name}</h1>
-				</div>
+			<a href={tool.link}>
+				<div class="card max-w-[320px]">
+					<div class="flex gap-2 text-4xl">
+						<i class="nf {tool.icon}"></i>
+						<h1>{tool.name}</h1>
+					</div>
 
-				<p>{@html tool.description}</p>
-			</div>
+					<p>{@html tool.description}</p>
+				</div>
+			</a>
 		{/if}
 	{/each}
-	<div class="card max-w-[320px]">
-		<div class="flex gap-2 text-4xl">
-			<i class="nf nf-fa-angles_down"></i>
-			<h1>and more!</h1>
-		</div>
-	</div>
+	<a
+		href="#galarry"
+		on:click|preventDefault={() => {
+			const el = document.getElementById("galarry");
+			if (el) el.scrollIntoView({ behavior: "smooth" });
+		}}
+	>
+		<div class="card max-w-[320px]">
+			<div class="flex gap-2 text-4xl">
+				<i class="nf nf-fa-angles_down"></i>
+				<h1>and more!</h1>
+			</div>
+		</div></a
+	>
 </div>