Skip to content

Updated Why us section and navbar bugs #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CropWatchDevelopment merged 8 commits into from
Jul 8, 2025
Merged

Updated Why us section and navbar bugs #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2b7fc78
Fix language box z indexes
jramiroz98 Jun 26, 2025
1a84d4d
Remove arrow icon on nav links
jramiroz98 Jun 26, 2025
93a22aa
Why us section
jramiroz98 Jun 26, 2025
83422fb
Comment errors
jramiroz98 Jun 26, 2025
566fcc6
Smooth scroll attempt and Docs tab update
jramiroz98 Jun 26, 2025
1098d5b
Resources links to Documentation
jramiroz98 Jun 26, 2025
360f06d
button aria label
jramiroz98 Jun 26, 2025
bc86b2f
about us section
jramiroz98 Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 46 additions & 45 deletions src/lib/components/UI/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -27,6 +28,17 @@
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 -->
Expand All @@ -45,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">
Expand All @@ -63,7 +75,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 -->
Expand Down Expand Up @@ -98,6 +110,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">
Expand All @@ -118,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>
Expand All @@ -130,10 +143,10 @@
<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-[9999]">
<div class="relative z-20">
<LanguagePicker />
</div>
</div>
Expand Down Expand Up @@ -165,23 +178,10 @@
<ul class="hidden items-center gap-8 lg:flex">
<li class="group relative">
<a
href="#solutions"
href="#solutions" onclick={() => handleSectionClick}
Copy link

@coderabbitai coderabbitai bot Jun 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix the onclick handler syntax error.

The onclick handler has incorrect syntax - it should invoke the function, not just reference it.

-	href="#solutions" onclick={() => handleSectionClick}
+	href="#solutions" onclick={handleSectionClick}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
href="#solutions" onclick={() => handleSectionClick}
href="#solutions" onclick={handleSectionClick}
🤖 Prompt for AI Agents 
In src/lib/components/UI/Header.svelte at line 181, the onclick handler is
incorrectly set to a function reference instead of invoking the function. Fix
this by changing the onclick attribute to call the function with parentheses,
i.e., use onclick={() => handleSectionClick()} to properly invoke the handler
when the event occurs.

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>
Expand All @@ -198,32 +198,33 @@
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>
<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
</a>
</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
Expand All @@ -234,7 +235,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
Expand Down Expand Up @@ -264,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
Expand Down Expand Up @@ -361,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>
2 changes: 1 addition & 1 deletion src/lib/components/UI/LanguagePicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
82 changes: 61 additions & 21 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,26 @@
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';
import { fly } from 'svelte/transition';
import { ChartColumnIncreasing, Sprout } from '@lucide/svelte';
import { ChartColumnIncreasing, Sprout, CircleDollarSign, Shield, RadioTower, Route } from '@lucide/svelte';

let canvas;
let ctx;
let lp;
let submittingEmail = $state(false);
// let submittingEmail = $state(false);

function resizeCanvas() {
const section = document.getElementById('solutions');
const { width, height } = section.getBoundingClientRect();
canvas.width = width;
canvas.height = height;
}
let loaded = $state(false)

let loaded = $state(false);

onMount(() => {
canvas = document.getElementById('lines');
Expand All @@ -45,6 +46,7 @@
lp.draw();
requestAnimationFrame(loop);
}

requestAnimationFrame(loop);
loaded = true;
});
Expand Down Expand Up @@ -88,26 +90,30 @@
<!-- 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>


<!-- 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;">

<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>
Expand Down Expand Up @@ -141,8 +147,42 @@
</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 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 py-20 px-8">
<p class="text-4xl font-semibold">Affordable Pricing</p>
<CircleDollarSign size={150} />
<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 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] 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>

Expand Down Expand Up @@ -246,7 +286,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>
Expand Down