From 2b7fc78b4944624c91ce394b95d0c9a28b2d508d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Wed, 25 Jun 2025 23:19:48 -0600
Subject: [PATCH 1/8] Fix language box z indexes

---
 src/lib/components/UI/Header.svelte         | 4 ++--
 src/lib/components/UI/LanguagePicker.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index d6593a3..3ec95a0 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -63,7 +63,7 @@
 {/if}
 
 <!-- Utility Navigation Bar -->
-<div class="relative border-b border-slate-700/50 bg-blue-300 backdrop-blur-sm overflow-visible">
+<div class="relative border-b border-slate-700/50 bg-blue-300 backdrop-blur-sm overflow-visible z-20">
 	<div class="mx-auto max-w-6xl px-4 py-2">
 		<div class="flex items-center justify-between text-sm">
 			<!-- Left side - Quick links -->
@@ -133,7 +133,7 @@
 						>Email Us!</a
 					>
 				</div>
-				<div class="relative z-[9999]">
+				<div class="relative z-20">
 					<LanguagePicker />
 				</div>
 			</div>
diff --git a/src/lib/components/UI/LanguagePicker.svelte b/src/lib/components/UI/LanguagePicker.svelte
index 3686521..f32e7b5 100644
--- a/src/lib/components/UI/LanguagePicker.svelte
+++ b/src/lib/components/UI/LanguagePicker.svelte
@@ -66,7 +66,7 @@
 	<!-- Dropdown menu -->
 	{#if dropdownOpen}
 		<div
-			class="absolute right-0 top-full mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 z-[9999]"
+			class="absolute right-0 top-full mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 z-10"
 		>
 			<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
 				{#each languages as lang}

From 1a84d4d1e70387781ffa6a5199e7f77b481471b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Wed, 25 Jun 2025 23:23:29 -0600
Subject: [PATCH 2/8] Remove arrow icon on nav links

---
 src/lib/components/UI/Header.svelte | 41 ++++++++++-------------------
 1 file changed, 14 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index 3ec95a0..2cf1107 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -169,19 +169,6 @@
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Solutions
-					<svg
-						class="h-4 w-4 transition-transform group-hover:rotate-180"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
 				</a>
 			</li>
 			<li>
@@ -198,19 +185,19 @@
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Devices
-					<svg
-						class="h-4 w-4 transition-transform group-hover:rotate-180"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
+<!--					<svg-->
+<!--						class="h-4 w-4 transition-transform group-hover:rotate-180"-->
+<!--						fill="none"-->
+<!--						stroke="currentColor"-->
+<!--						viewBox="0 0 24 24"-->
+<!--					>-->
+<!--						<path-->
+<!--							stroke-linecap="round"-->
+<!--							stroke-linejoin="round"-->
+<!--							stroke-width="2"-->
+<!--							d="M19 9l-7 7-7-7"-->
+<!--						/>-->
+<!--					</svg>-->
 				</a>
 			</li>
 			<li>
@@ -234,7 +221,7 @@
 		<!-- CTA Button -->
 		<div class="hidden items-center gap-3 md:flex">
 			<a
-				href="#"
+				href="/demo"
 				class="px-4 py-2 font-medium text-white/80 transition-colors hover:text-green-400"
 			>
 				Demo

From 93a22aa7c31b88e282098a0a5d57075e32633b6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Wed, 25 Jun 2025 23:50:01 -0600
Subject: [PATCH 3/8] Why us section

---
 src/routes/+page.svelte | 72 +++++++++++++++++++++++++++++++----------
 1 file changed, 55 insertions(+), 17 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5a49bac..c9b411b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,7 +13,7 @@
 	import PriceCard from '$lib/components/UI/Price-Card.svelte';
 	import { languageTag } from '$lib/paraglide/runtime';
 	import { fly } from 'svelte/transition';
-	import { ChartColumnIncreasing, Sprout } from '@lucide/svelte';
+	import { ChartColumnIncreasing, Sprout, CircleDollarSign, CirclePower, Zap } from '@lucide/svelte';
 
 	let canvas;
 	let ctx;
@@ -26,7 +26,8 @@
 		canvas.width = width;
 		canvas.height = height;
 	}
-	let loaded = $state(false)
+
+	let loaded = $state(false);
 
 	onMount(() => {
 		canvas = document.getElementById('lines');
@@ -45,6 +46,7 @@
 			lp.draw();
 			requestAnimationFrame(loop);
 		}
+
 		requestAnimationFrame(loop);
 		loaded = true;
 	});
@@ -88,18 +90,22 @@
 	<!-- Content -->
 	<div class="container relative mx-auto text-center px-10 space-y-10">
 		{#if loaded}
-		<h1 class="text-5xl font-bold text-white xl:text-6xl" transition:fly={{ y: 100, duration: 1000 }}>{m.home_hero_title()}</h1>
-		<p class="w-full bg-blue-300 rounded-lg mt-10 text-xl lg:mx-auto text-white-900 font-bold bg-opacity-70 p-4" transition:fly={{ y: 100, duration: 1000 , delay: 200 }}>
-			{m.home_hero_subtitle()}
-		</p>
-		<div class="mt-6 lg:w-1/2 lg:mx-auto pt-10" transition:fly={{ y: 100, duration: 1000 , delay: 500 }}>
-			<a href="/use-cases" class="bg-green-600 px-4 py-3 text-white text-lg rounded-md hover:bg-gray-200 flex justify-center">
-				{m.home_hero_button_label()} <ChartColumnIncreasing size={30} class="ml-2 "/>
-			</a>
-		</div>
-		<div class="mt-10">
-			<!-- If you add any hero image element here, consider adding explicit width/height and loading="lazy" if offscreen -->
-		</div>
+			<h1 class="text-5xl font-bold text-white xl:text-6xl"
+					transition:fly={{ y: 100, duration: 1000 }}>{m.home_hero_title()}</h1>
+			<p class="w-full bg-blue-300 rounded-lg mt-10 text-xl lg:mx-auto text-white-900 font-bold bg-opacity-70 p-4"
+				 transition:fly={{ y: 100, duration: 1000 , delay: 200 }}>
+				{m.home_hero_subtitle()}
+			</p>
+			<div class="mt-6 lg:w-1/2 lg:mx-auto pt-10" transition:fly={{ y: 100, duration: 1000 , delay: 500 }}>
+				<a href="/use-cases"
+					 class="bg-green-600 px-4 py-3 text-white text-lg rounded-md hover:bg-gray-200 flex justify-center">
+					{m.home_hero_button_label()}
+					<ChartColumnIncreasing size={30} class="ml-2 " />
+				</a>
+			</div>
+			<div class="mt-10">
+				<!-- If you add any hero image element here, consider adding explicit width/height and loading="lazy" if offscreen -->
+			</div>
 		{/if}
 	</div>
 </section>
@@ -141,8 +147,40 @@
 </section>
 <!--Underground Pause-->
 <section id="underground-img">
-	<div class="h-60 w-full bg-[url(/images/sensor-underground.png)] bg-contain relative lg:bg-cover lg:bg-fixed lg:bg-bottom lg:h-[30rem]">
-		<p class="font-semibold text-3xl px-4 text-green-500 absolute bottom-6 right-5 mix-blend-lighten flex items-center lg:text-6xl lg:bottom-20">Know your crops <Sprout color="white" size="30" class="animate-bounce"/></p>
+	<div
+		class="h-60 w-full bg-[url(/images/sensor-underground.png)] bg-contain relative lg:bg-cover lg:bg-fixed lg:bg-bottom lg:h-[30rem]">
+		<p
+			class="font-semibold text-3xl px-4 text-green-500 absolute bottom-6 right-5 mix-blend-lighten flex items-center lg:text-6xl lg:bottom-20">
+			Know your crops
+			<Sprout color="white" size="30" class="animate-bounce" />
+		</p>
+	</div>
+</section>
+<section class="py-20">
+	<h2 class="text-6xl font-semibold p-10">Why <span class="text-green-500">Us</span>?</h2>
+	<div class="flex flex-col lg:flex-row items-center justify-between lg:px-12 px-4 space-y-10 lg:space-y-0">
+
+		<div
+			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-l-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 p-20">
+			<p class="text-4xl font-semibold">Affordable Pricing</p>
+			<CircleDollarSign size={150} />
+			<p>We offer affordable pricing compared to our competition.</p>
+		</div>
+
+		<div
+			class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 p-20">
+			<p class="text-4xl font-semibold">Installation included</p>
+			<CirclePower size={150} />
+			<p>We go to your location and install everything for you. You will be set with a working product from day one.</p>
+		</div>
+
+		<div
+			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-r-xl lg:rounded-none  rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 p-20">
+			<p class="text-4xl font-semibold">Endless Battery</p>
+			<Zap size={150} />
+			<p>Our systems require very little to no maintenance due to the longevity and efficiency of our batteries.</p>
+		</div>
+
 	</div>
 </section>
 
@@ -246,7 +284,7 @@
 			<sm>※1</sm>
 			{m.home_disclaimer_1()}
 			<a class="cursor-pointer font-bold text-blue-900 underline" href="https://discord.com/"
-				>Discord</a
+			>Discord</a
 			>
 		</li>
 	</ol>

From 83422fb7b74d48f9309c71a63473558d12e79f37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Wed, 25 Jun 2025 23:50:35 -0600
Subject: [PATCH 4/8] Comment errors

---
 src/routes/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c9b411b..69f37dc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
 	import SAITO_IMAGE from '$lib/images/saito.jpg';
 	import LinkedParticles from '$lib/components/vendor/animated-lines';
 	import { onMount } from 'svelte';
-	import LineCarasol from '$lib/components/UI/Line-Carasol.svelte';
+	// import LineCarasol from '$lib/components/UI/Line-Carasol.svelte';
 	import * as m from '$lib/paraglide/messages.js';
 	import PriceCard from '$lib/components/UI/Price-Card.svelte';
 	import { languageTag } from '$lib/paraglide/runtime';
@@ -18,7 +18,7 @@
 	let canvas;
 	let ctx;
 	let lp;
-	let submittingEmail = $state(false);
+	// let submittingEmail = $state(false);
 
 	function resizeCanvas() {
 		const section = document.getElementById('solutions');

From 566fcc6dc117069242bf0af8b783b8a98b96f08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Thu, 26 Jun 2025 00:03:02 -0600
Subject: [PATCH 5/8] Smooth scroll attempt and Docs tab update

---
 src/lib/components/UI/Header.svelte | 13 ++++++++++++-
 src/routes/+page.svelte             |  6 +++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index 2cf1107..88f0dbb 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -27,6 +27,16 @@
 			document.removeEventListener('click', handleClickOutside);
 		};
 	});
+	function handleSectionClick (event) {
+		event.preventDefault()
+		const link = event.currentTarget
+		const anchorId = new URL(link.href).hash.replace('#', '')
+		const anchor = document.getElementById(anchorId)
+		window.scrollTo({
+			top: anchor.offsetTop,
+			behavior: 'smooth'
+		})
+	}
 </script>
 
 <!-- Announcement/Utility Bar -->
@@ -98,6 +108,7 @@
 				</a>
 				<a
 					href="https://api.cropwatch.io/swagger"
+					target="_blank" rel="noopener noreferrer"
 					class="flex items-center gap-1 transition-colors hover:text-blue-700"
 				>
 					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -165,7 +176,7 @@
 		<ul class="hidden items-center gap-8 lg:flex">
 			<li class="group relative">
 				<a
-					href="#solutions"
+					href="#solutions" onClick={() => handleSectionClick}
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Solutions
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 69f37dc..b77593a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -112,8 +112,8 @@
 
 
 <!-- Solutions Section -->
-<section id="solutions" class="relative bg-gray-100 py-20" style="overflow: hidden;">
-	<canvas id="lines" class="absolute inset-0 z-0 h-full w-full filter"></canvas>
+<section id="solutions" class="relative bg-gray-100 py-20 bg-gradient-to-t from-white to-blue-300" style="overflow: hidden;">
+<!--	<canvas id="lines" class="absolute inset-0 z-0 h-full w-full filter"></canvas>-->
 	<div class="container relative z-10 mx-auto text-center ">
 		<h2 class="text-3xl font-bold">{m.home_solutions_title()}</h2>
 		<p class="mt-4">{m.home_solutions_subtitle()}</p>
@@ -156,7 +156,7 @@
 		</p>
 	</div>
 </section>
-<section class="py-20">
+<section class="py-20 bg-[#cfecff]">
 	<h2 class="text-6xl font-semibold p-10">Why <span class="text-green-500">Us</span>?</h2>
 	<div class="flex flex-col lg:flex-row items-center justify-between lg:px-12 px-4 space-y-10 lg:space-y-0">
 

From 1098d5bbe4f5362ea3775cf508de7f072d23faa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Thu, 26 Jun 2025 00:04:54 -0600
Subject: [PATCH 6/8] Resources links to Documentation

---
 src/lib/components/UI/Header.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index 88f0dbb..6baf9e8 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -213,7 +213,8 @@
 			</li>
 			<li>
 				<a
-					href="#"
+					href="https://api.cropwatch.io/swagger"
+					target="_blank" rel="noopener noreferrer"
 					class="relative rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Resources

From 360f06dc8a18c361bcc8ff4d8a6be268b315a97f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Thu, 26 Jun 2025 00:12:43 -0600
Subject: [PATCH 7/8] button aria label url locations

---
 src/lib/components/UI/Header.svelte | 70 +++++++++++++++--------------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index 6baf9e8..4e75dde 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import CropWatchLogo from '$lib/images/favicon.svg';
 	import LanguagePicker from './LanguagePicker.svelte';
+
 	let mobileMenuOpen = $state(false);
 	let announcementVisible = $state(true);
 
@@ -27,15 +28,16 @@
 			document.removeEventListener('click', handleClickOutside);
 		};
 	});
-	function handleSectionClick (event) {
-		event.preventDefault()
-		const link = event.currentTarget
-		const anchorId = new URL(link.href).hash.replace('#', '')
-		const anchor = document.getElementById(anchorId)
+
+	function handleSectionClick(event) {
+		event.preventDefault();
+		const link = event.currentTarget;
+		const anchorId = new URL(link.href).hash.replace('#', '');
+		const anchor = document.getElementById(anchorId);
 		window.scrollTo({
 			top: anchor.offsetTop,
 			behavior: 'smooth'
-		})
+		});
 	}
 </script>
 
@@ -55,7 +57,7 @@
 				<a
 					href="#contact"
 					class="ml-2 underline transition-all ease-in-out hover:translate-x-2 hover:no-underline"
-					>Learn more →</a
+				>Learn more →</a
 				>
 			</div>
 			<button onclick={closeAnnouncement} class="text-green-200 transition-colors hover:text-white">
@@ -129,7 +131,7 @@
 					<div class="h-2 w-2 animate-pulse rounded-full bg-green-400"></div>
 					<span class="text-xs">
 						<a href="https://stats.uptimerobot.com/1Z6H85HuHq" target="_blank"
-							>All Systems Operational</a
+						>All Systems Operational</a
 						>
 					</span>
 				</div>
@@ -141,7 +143,7 @@
 					<a
 						href="/contact-us"
 						class="rounded-lg bg-blue-300 px-2 py-1 text-xs transition-colors hover:bg-gradient-to-r hover:from-green-500 hover:to-emerald-500 hover:text-white sm:p-2"
-						>Email Us!</a
+					>Email Us!</a
 					>
 				</div>
 				<div class="relative z-20">
@@ -176,7 +178,7 @@
 		<ul class="hidden items-center gap-8 lg:flex">
 			<li class="group relative">
 				<a
-					href="#solutions" onClick={() => handleSectionClick}
+					href="#solutions" onclick={() => handleSectionClick}
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Solutions
@@ -196,19 +198,19 @@
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Devices
-<!--					<svg-->
-<!--						class="h-4 w-4 transition-transform group-hover:rotate-180"-->
-<!--						fill="none"-->
-<!--						stroke="currentColor"-->
-<!--						viewBox="0 0 24 24"-->
-<!--					>-->
-<!--						<path-->
-<!--							stroke-linecap="round"-->
-<!--							stroke-linejoin="round"-->
-<!--							stroke-width="2"-->
-<!--							d="M19 9l-7 7-7-7"-->
-<!--						/>-->
-<!--					</svg>-->
+					<!--					<svg-->
+					<!--						class="h-4 w-4 transition-transform group-hover:rotate-180"-->
+					<!--						fill="none"-->
+					<!--						stroke="currentColor"-->
+					<!--						viewBox="0 0 24 24"-->
+					<!--					>-->
+					<!--						<path-->
+					<!--							stroke-linecap="round"-->
+					<!--							stroke-linejoin="round"-->
+					<!--							stroke-width="2"-->
+					<!--							d="M19 9l-7 7-7-7"-->
+					<!--						/>-->
+					<!--					</svg>-->
 				</a>
 			</li>
 			<li>
@@ -222,7 +224,7 @@
 			</li>
 			<li>
 				<a
-					href="#"
+					href="about-us"
 					class="relative rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					About
@@ -263,11 +265,11 @@
 					class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-500 group-hover:translate-x-full"
 				></div>
 			</a>
-			
+
 			<!-- Mobile menu button -->
 			<button
 				onclick={toggleMobileMenu}
-				class="mobile-menu-btn rounded-lg p-2 text-white transition-colors hover:bg-white/10"
+				class="mobile-menu-btn rounded-lg p-2 text-white transition-colors hover:bg-white/10" aria-label="Toggle mobile menu"
 			>
 				<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path
@@ -360,12 +362,12 @@
 {/if}
 
 <style>
-	@keyframes drift {
-		0% {
-			transform: translateX(0) translateY(0);
-		}
-		100% {
-			transform: translateX(-60px) translateY(-60px);
-		}
-	}
+    @keyframes drift {
+        0% {
+            transform: translateX(0) translateY(0);
+        }
+        100% {
+            transform: translateX(-60px) translateY(-60px);
+        }
+    }
 </style>

From bc86b2f1268a4c2d1aeb6c15e07201e2f3ad676d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Ramiro=20Zu=C3=B1iga?= <jramiroz98@gmail.com>
Date: Mon, 30 Jun 2025 20:28:51 -0600
Subject: [PATCH 8/8] about us section

---
 src/routes/+page.svelte | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b77593a..db694bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,7 +13,7 @@
 	import PriceCard from '$lib/components/UI/Price-Card.svelte';
 	import { languageTag } from '$lib/paraglide/runtime';
 	import { fly } from 'svelte/transition';
-	import { ChartColumnIncreasing, Sprout, CircleDollarSign, CirclePower, Zap } from '@lucide/svelte';
+	import { ChartColumnIncreasing, Sprout, CircleDollarSign, Shield, RadioTower, Route } from '@lucide/svelte';
 
 	let canvas;
 	let ctx;
@@ -113,7 +113,7 @@
 
 <!-- Solutions Section -->
 <section id="solutions" class="relative bg-gray-100 py-20 bg-gradient-to-t from-white to-blue-300" style="overflow: hidden;">
-<!--	<canvas id="lines" class="absolute inset-0 z-0 h-full w-full filter"></canvas>-->
+
 	<div class="container relative z-10 mx-auto text-center ">
 		<h2 class="text-3xl font-bold">{m.home_solutions_title()}</h2>
 		<p class="mt-4">{m.home_solutions_subtitle()}</p>
@@ -159,28 +159,30 @@
 <section class="py-20 bg-[#cfecff]">
 	<h2 class="text-6xl font-semibold p-10">Why <span class="text-green-500">Us</span>?</h2>
 	<div class="flex flex-col lg:flex-row items-center justify-between lg:px-12 px-4 space-y-10 lg:space-y-0">
-
 		<div
-			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-l-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 p-20">
+			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-l-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
 			<p class="text-4xl font-semibold">Affordable Pricing</p>
 			<CircleDollarSign size={150} />
-			<p>We offer affordable pricing compared to our competition.</p>
+			<p>Enjoy cost-effective solutions with transparent pricing, designed to deliver exceptional value compared to industry standards.</p>
 		</div>
-
 		<div
-			class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 p-20">
-			<p class="text-4xl font-semibold">Installation included</p>
-			<CirclePower size={150} />
-			<p>We go to your location and install everything for you. You will be set with a working product from day one.</p>
+			class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+			<p class="text-4xl font-semibold">End-to-End Service</p>
+			<Route size={150} />
+			<p>Experience seamless installation and setup at your location, ensuring a fully operational product from the moment we complete the job.</p>
 		</div>
-
 		<div
-			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-r-xl lg:rounded-none  rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 p-20">
-			<p class="text-4xl font-semibold">Endless Battery</p>
-			<Zap size={150} />
-			<p>Our systems require very little to no maintenance due to the longevity and efficiency of our batteries.</p>
+			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+			<p class="text-4xl font-semibold">Long Lasting Hardware</p>
+			<Shield size={150} />
+			<p>Benefit from durable, high-quality hardware built to withstand the test of time, minimizing maintenance and ensuring reliable performance.</p>
+		</div>
+		<div
+			class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-r-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+			<p class="text-4xl font-semibold">The Best Signal Coverage</p>
+			<RadioTower size={150} />
+			<p>Achieve superior connectivity with our advanced systems, delivering unmatched signal coverage and powered by long-lasting, low-maintenance batteries.</p>
 		</div>
-
 	</div>
 </section>