feat(client): Add intro texts

Partly from SS-66.

client/src/components/intro/index.tsx

@@ -10,8 +10,9 @@ const Intro = ({ showDescription = true }: IntroProps) => {
       </h1>
       {showDescription && (
         <p className="mx-auto mt-0.5 max-w-[280px] text-xs xl:mt-4 xl:max-w-none xl:text-sm">
-          Introduction lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor
-          sit amet, consectetu elit.
+          Explore South Sudan’s geospatial visualization tool, a centralized platform for accessing
+          and analyzing hydrological data. Discover insights on flood, drought, and
+          hydrometeorological patterns to support effective water resource management.
         </p>
       )}
     </div>

client/src/components/panels/contextual-layers/index.tsx

@@ -35,8 +35,10 @@ const ContextualLayersPanel = () => {
       </SheetHeader>
 
       <p className="mt-11">
-        Introduction lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
-        amet, consectetu elit.
+        Toggle on and off contextual layers to add demographic, land use, and soil property data to
+        your map view. These layers provide additional insights, helping to understand population
+        dynamics, land cover, and soil characteristics, which are essential for comprehensive water
+        resource analysis.
       </p>
 
       {isLoading && (

client/src/components/panels/drought/index.tsx

@@ -7,6 +7,11 @@ const DroughtPanel = () => {
 
   return (
     <div className="min-h-screen px-5 py-5 lg:min-h-0 lg:px-10">
+      <p className="mb-6">
+        Explore agricultural and meteorological drought data to assess exposure and hazard levels
+        across South Sudan. Analyze drought indicators, such as SPI, SPEI, SNDVI, and SMA indices,
+        to understand drought severity and support resilient water and land management.
+      </p>
       {isLoading && (
         <div className="flex flex-col gap-6">
           <Skeleton className="h-7 w-2/5" />

client/src/components/panels/flood/index.tsx

@@ -7,6 +7,11 @@ const FloodPanel = () => {
 
   return (
     <div className="min-h-screen px-5 py-5 lg:min-h-0 lg:px-10">
+      <p className="mb-6">
+        Access detailed flood data to assess both exposure and hazard levels across South Sudan.
+        Analyze model-based and EO-based flood information, including flood extent, depth, and
+        return periods, to better understand flood risks and support proactive planning.
+      </p>
       {isLoading && (
         <div className="flex flex-col gap-6">
           <Skeleton className="h-7 w-2/5" />