From b7e520deb84f0438c71645aeb5cc69c0ece5b087 Mon Sep 17 00:00:00 2001
From: Anthony Navarro <anthonarro@gmail.com>
Date: Thu, 23 Apr 2026 16:10:32 -0700
Subject: [PATCH] Add new features details to home and about pages

---
 .../views/components/primary-nav.blade.php    |  2 --
 .../views/livewire/pages/about.blade.php      | 16 +++++++---
 resources/views/livewire/pages/home.blade.php | 29 ++++++++++++-------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/resources/views/components/primary-nav.blade.php b/resources/views/components/primary-nav.blade.php
index f7bb618..b668d9e 100644
--- a/resources/views/components/primary-nav.blade.php
+++ b/resources/views/components/primary-nav.blade.php
@@ -7,7 +7,6 @@
                 CronosPulse
             </a>
             <div class="hidden items-center gap-1 sm:flex">
-                <x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">Home</x-nav-link>
                 <x-nav-link href="{{ route('quake-watch') }}" :active="request()->routeIs('quake-watch')">QuakeWatch</x-nav-link>
                 <x-nav-link href="{{ route('volcano-watch') }}" :active="request()->routeIs('volcano-watch')">VolcanoWatch</x-nav-link>
                 <x-nav-link href="{{ route('hydro-watch') }}" :active="request()->routeIs('hydro-watch')">HydroWatch</x-nav-link>
@@ -91,7 +90,6 @@ class="rounded-md p-2 text-muted transition-colors hover:bg-surface-hover hover:
     <div id="mobile-nav" x-show="mobileOpen" x-collapse class="border-t border-border sm:hidden">
         <div class="px-4 pb-4 pt-2">
             <div class="space-y-1">
-                <x-responsive-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">Home</x-responsive-nav-link>
                 <x-responsive-nav-link href="{{ route('quake-watch') }}" :active="request()->routeIs('quake-watch')">QuakeWatch</x-responsive-nav-link>
                 <x-responsive-nav-link href="{{ route('volcano-watch') }}" :active="request()->routeIs('volcano-watch')">VolcanoWatch</x-responsive-nav-link>
                 <x-responsive-nav-link href="{{ route('hydro-watch') }}" :active="request()->routeIs('hydro-watch')">HydroWatch</x-responsive-nav-link>
diff --git a/resources/views/livewire/pages/about.blade.php b/resources/views/livewire/pages/about.blade.php
index 4c98815..75990f9 100644
--- a/resources/views/livewire/pages/about.blade.php
+++ b/resources/views/livewire/pages/about.blade.php
@@ -1,7 +1,7 @@
 <x-slot:seo>
     <x-seo
         title="About"
-        description="CronosPulse is an open data visualisation tool for real-time earthquake activity, volcano alert levels, and active flood warnings across the United States."
+        description="CronosPulse is an open data visualisation tool for real-time earthquake activity, volcano alert levels, active flood warnings, and live stream gauge readings across the United States."
         :canonical="url('/about')"
     />
 </x-slot:seo>
@@ -19,8 +19,8 @@
             <a href="https://www.weather.gov" target="_blank" rel="noopener noreferrer" class="text-[var(--color-text-link)] underline hover:text-[var(--color-text-link-hover)]">
                 National Weather Service (NWS)
             </a>.
-            It surfaces real-time earthquake activity, volcano alert levels, and active flood
-            warnings through interactive charts and maps.
+            It surfaces real-time earthquake activity, volcano alert levels, active flood
+            warnings, and live stream gauge readings through interactive charts and maps.
         </p>
         <p class="text-muted">
             All data is sourced directly from US federal agencies and is subject to their data
@@ -53,7 +53,15 @@
                     National Weather Service — Alerts API
                 </a>
                 <p class="mt-0.5 text-muted">
-                    Active CAP alerts including flood watches, warnings, and advisories by zone and area. Powers HydroWatch.
+                    Active CAP alerts including flood watches, warnings, and advisories by zone and area. Powers the flood alerts section of HydroWatch.
+                </p>
+            </li>
+            <li>
+                <a href="https://waterservices.usgs.gov/" target="_blank" rel="noopener noreferrer" class="font-medium text-[var(--color-text-link)] underline hover:text-[var(--color-text-link-hover)]">
+                    USGS National Water Information System — Instantaneous Values API
+                </a>
+                <p class="mt-0.5 text-muted">
+                    Real-time streamflow and gage height readings from hundreds of active USGS monitoring sites. Powers the stream gauge section of HydroWatch.
                 </p>
             </li>
             <li>
diff --git a/resources/views/livewire/pages/home.blade.php b/resources/views/livewire/pages/home.blade.php
index 029cdbf..f6f40f0 100644
--- a/resources/views/livewire/pages/home.blade.php
+++ b/resources/views/livewire/pages/home.blade.php
@@ -1,7 +1,7 @@
 <x-slot:seo>
     <x-seo
         title="Real-Time Geophysical Data"
-        description="Live earthquake activity, volcano status, and active flood alerts across the United States — sourced from USGS and the National Weather Service."
+        description="Live earthquake activity, volcano status, active flood alerts, and real-time stream gauge readings across the United States — sourced from USGS and the National Weather Service."
         :canonical="url('/')"
     />
 </x-slot:seo>
@@ -20,8 +20,8 @@
                 </h1>
                 <p class="text-lg leading-relaxed text-muted">
                     Real-time geophysical data from USGS and the National Weather Service —
-                    earthquakes, volcano activity, and active flood alerts across the United States,
-                    visualised and updated as events unfold.
+                    earthquakes, volcano activity, active flood alerts, and live stream gauge readings
+                    across the United States, visualised and updated as events unfold.
                 </p>
                 <div class="flex flex-wrap gap-2 pt-2">
                     <a href="{{ route('quake-watch') }}" style="background:var(--color-badge-eq-bg);color:var(--color-badge-eq-text);border:1px solid var(--color-badge-eq-border)"
@@ -34,7 +34,7 @@ class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium trans
                     </a>
                     <a href="{{ route('hydro-watch') }}" style="background:var(--color-badge-flood-bg);color:var(--color-badge-flood-text);border:1px solid var(--color-badge-flood-border)"
                        class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium transition-opacity hover:opacity-75">
-                        Flood Alerts →
+                        Flood & Streamflow →
                     </a>
                 </div>
             </div>
@@ -113,17 +113,18 @@ class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium trans
             <div class="rounded-xl border border-border bg-surface p-6 transition-colors hover:bg-surface-hover">
                 <div class="mb-3 flex items-center gap-3">
                     <x-label variant="flood">Flood</x-label>
-                    <h3 class="font-semibold text-text">Flood Alerts</h3>
+                    <h3 class="font-semibold text-text">Flood & Streamflow Data</h3>
                 </div>
                 <p class="text-sm text-muted">
-                    Active NWS flood watches, warnings, and advisories across the United States.
-                    Alerts are mapped as GeoJSON polygons by affected zone and filterable by state,
-                    sorted by CAP severity level.
+                    Active NWS flood watches, warnings, and advisories alongside live USGS stream
+                    gauge readings. Flood zones are mapped as GeoJSON polygons; gauges show
+                    real-time streamflow and gage height for hundreds of active monitoring sites
+                    across the US.
                 </p>
                 <ul class="mt-4 space-y-1 text-sm text-muted">
                     <li class="flex items-center gap-2">
                         <span class="size-1 rounded-full bg-accent-muted"></span>
-                        Watches, warnings, and advisories
+                        Flood watches, warnings, and advisories
                     </li>
                     <li class="flex items-center gap-2">
                         <span class="size-1 rounded-full bg-accent-muted"></span>
@@ -135,7 +136,15 @@ class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium trans
                     </li>
                     <li class="flex items-center gap-2">
                         <span class="size-1 rounded-full bg-accent-muted"></span>
-                        National feed + per-state map view
+                        Live streamflow (ft³/s) and gage height (ft)
+                    </li>
+                    <li class="flex items-center gap-2">
+                        <span class="size-1 rounded-full bg-accent-muted"></span>
+                        3-day sparkline charts per gauge site
+                    </li>
+                    <li class="flex items-center gap-2">
+                        <span class="size-1 rounded-full bg-accent-muted"></span>
+                        Per-state map with hundreds of active sites
                     </li>
                 </ul>
             </div>