Upload 59 files

.gitattributes

@@ -37,3 +37,4 @@ data/common/province_admin_diva.geojson filter=lfs diff=lfs merge=lfs -text
 data/common/province_admin_diva.shp filter=lfs diff=lfs merge=lfs -text
 static/image/hero-city-pin.png filter=lfs diff=lfs merge=lfs -text
 static/image/hero-city.jpg filter=lfs diff=lfs merge=lfs -text
+static/image/story-deckgl.webp filter=lfs diff=lfs merge=lfs -text

analytics.html

@@ -81,12 +81,12 @@
       <!-- DAP -->
 
       <h2 class="text-l font-bold mt-8 mb-4">
-        Disaster Affection Probability (DAP)
+        Top-5 Rank Disaster Impact Factors
       </h2>
 
       <canvas id="DAPRadarChart" class="bg-transparent rounded-xl"></canvas>
 
-      <h2 class="text-md mt-8 mb-4">Disaster Affection Probability (DAP)</h2>
+      <h2 class="text-md mt-8 mb-4">All Disaster Imapacts to Finances</h2>
 
       <div class="relative overflow-x-auto rounded-xl">
         <table
@@ -287,10 +287,14 @@
       <!-- DQC -->
 
       <h2 class="text-l font-bold mt-8 mb-4">
-        Disaster Quantity Coefficients (DQC)
+        Potential Quantity of Financial Changes
       </h2>
 
-      <canvas id="DQCBarChart" class="bg-transparent rounded-xl"></canvas>
+      <canvas
+        height="300px"
+        id="DQCBarChart"
+        class="bg-transparent rounded-xl"
+      ></canvas>
 
       <!--h2 class="text-md mt-8 mb-4">Disaster Quantity Coefficients (DQC)</h2>
 
@@ -581,51 +585,33 @@
           datasets: [
             {
               label: "Wind",
-              data: [-0.2422706118363361,
-              0.0944654213932851,
-              0.10946664573317823,
-              -0.2635881587808216,
-              1.6468128742085861,
-              1.81343360114032,
-              0.6844300257725531,
-              -0.7277852127157011,
-              2.2367857616664835,
-              2.488924354367551,
-              0.106834547304031,
-              1.1691284243686468,
-              0.885037040855672],
+              data: [
+                -0.2422706118363361, 0.0944654213932851, 0.10946664573317823,
+                -0.2635881587808216, 1.6468128742085861, 1.81343360114032,
+                0.6844300257725531, -0.7277852127157011, 2.2367857616664835,
+                2.488924354367551, 0.106834547304031, 1.1691284243686468,
+                0.885037040855672,
+              ],
             },
             {
               label: "Flood",
-              data: [0.8600522301934065,
-              -0.5588222574508711,
-              -0.06795048991347222,
-              0.8115310593522213,
-              5.861538708787576,
-              5.460325579030252,
-              8.377749342537179,
-              1.3362524044153352,
-              -2.7475583580473337,
-              -3.9853109972001706,
-              -0.9466984525926432,
-              -3.385174369728646,
-              3.9789016460835334],
+              data: [
+                0.8600522301934065, -0.5588222574508711, -0.06795048991347222,
+                0.8115310593522213, 5.861538708787576, 5.460325579030252,
+                8.377749342537179, 1.3362524044153352, -2.7475583580473337,
+                -3.9853109972001706, -0.9466984525926432, -3.385174369728646,
+                3.9789016460835334,
+              ],
             },
             {
               label: "Pollution",
-              data: [2.1933516572229355,
-              -2.4879927846021577,
-              -0.6000178704859911,
-              -6.396226349326616,
-              2.3073451589071494,
-              0.3808370479344142,
-              8.911713608602666,
-              -2.6315086036282316,
-              -15.640730983677106,
-              -20.120868745704833,
-              -3.2905810349601716,
-              -11.649785403267158,
-              -0.22138555929730494],
+              data: [
+                2.1933516572229355, -2.4879927846021577, -0.6000178704859911,
+                -6.396226349326616, 2.3073451589071494, 0.3808370479344142,
+                8.911713608602666, -2.6315086036282316, -15.640730983677106,
+                -20.120868745704833, -3.2905810349601716, -11.649785403267158,
+                -0.22138555929730494,
+              ],
             },
           ],
         },
@@ -634,11 +620,14 @@
           scales: {
             x: {
               stacked: true,
+              title: {
+                display: true,
+                text: "Potential Impact (M.THB)",
+              },
             },
             y: {
               stacked: true,
             },
-            
           },
           responsive: true,
           plugins: {
@@ -700,7 +689,11 @@
         options: {
           scales: {
             y: {
-              beginAtZero: true,
+              beginAtZero: false,
+              title: {
+                display: true,
+                text: "Count (Times)",
+              },
             },
           },
           plugins: {
@@ -779,6 +772,15 @@
               borderWidth: 3,
             },
           },
+          scales: {
+            r: {
+              angleLines: {
+                  display: true,
+              },
+              suggestedMin: 0,
+              suggestedMax: 0.6
+            }
+          },
           plugins: {
             legend: {
               labels: {

forecast.html

@@ -548,7 +548,12 @@
           scales: {
             x: {
               beginAtZero: true,
+              title: {
+                display: true,
+                text: "Potential Impact (M.THB)",
+              },
             },
+            
           },
         },
       });
@@ -616,6 +621,10 @@
           scales: {
             y: {
               beginAtZero: true,
+              title: {
+                display: true,
+                text: "Count (Times)",
+              },
             },
           },
         },

index.html

@@ -1,236 +1,406 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title></title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="static/js/tailwind@3.4.5.js"></script>
-    </head>
-    <body>
-
-        <header>
-            <nav x-data="{ isOpen: false }" class="bg-white shadow dark:bg-gray-900">
-                <div class="container px-6 py-4 mx-auto">
-                    <div class="lg:flex lg:items-center lg:justify-between">
-                        <div class="flex items-center justify-between">
-                            <a href="#" class="mx-auto ">
-                                <img class="w-auto h-6 sm:h-7" src="static/icon/logo.png" alt="">
-                            </a>
-        
-                            <!-- Mobile menu button -->
-                            <div class="flex lg:hidden">
-                               <button x-cloak @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
-                                    <svg x-show="!isOpen" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16" />
-                                    </svg>
-                            
-                                    <svg x-show="isOpen" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
-        
-                        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-                        <div x-cloak :class="[isOpen ? 'translate-x-0 opacity-100 ' : 'opacity-0 -translate-x-full']" class="absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-white shadow-md lg:bg-transparent lg:dark:bg-transparent lg:shadow-none dark:bg-gray-900 lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:w-auto lg:opacity-100 lg:translate-x-0">
-                            <div class="-mx-4 lg:flex lg:items-center">
-                                <a href="analytics.html" class="block mx-4 text-blue-900 font-bold capitalize dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Overview Map</a>
-                                <a href="locations.html" class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Location-Based</a>
-                                <a href="forecast.html" class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Forecasting</a>
-                                <a href="#" class="block mx-4 mt-4 text-rose-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">Contact</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-        
-            <div class="w-full bg-center bg-cover h-[38rem]" style="background-image: url('static/image/hero-city-pin.png');">
-                <div class="flex items-center justify-center w-full h-full bg-gray-900/40">
-                    <div class="text-center">
-                        <h1 class="text-3xl font-semibold text-white lg:text-4xl">Economic-Disaster for <span class="text-blue-400">Business</span></h1>
-                        <button class="w-full px-5 py-2 mt-4 text-sm font-medium text-white capitalize transition-colors duration-300 transform bg-blue-400 rounded-md lg:w-auto hover:bg-blue-200 focus:outline-none focus:bg-blue-500">Demo</button>
-                    </div>
-                </div>
-            </div>
-        </header>
-
-
-
-        <section class="bg-white dark:bg-gray-900">
-            <div class="container px-6 py-10 mx-auto">
-
-
-                <h1 class="text-lg font-semibold text-center text-blue-800 capitalize lg:text-3xl dark:text-white">
-                    Analytical Integration for Finanance and Geoinfomatics</h1>
-
-
-        
-                <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 lg:grid-cols-4">
-                    <div class="flex items-end overflow-hidden bg-cover rounded-lg h-96" style="background-image:url('static/image/flood.jpeg')">
-                        <div class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60">
-                            <h2 class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white">Disaster Impact</h2>
-                            <p class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400 ">Finance</p>
-                        </div>
-                    </div>
-        
-                    <div class="flex items-end overflow-hidden bg-cover rounded-lg h-96" style="background-image:url('static/image/economic.webp')">
-                        <div class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60">
-                            <h2 class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white">Economic Affect</h2>
-                            <p class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400 ">Loss and Gain</p>
-                        </div>
-                    </div>
-        
-                    <div class="flex items-end overflow-hidden bg-cover rounded-lg h-96" style="background-image:url('static/image/pin-location.jpeg')">
-                        <div class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60">
-                            <h2 class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white">Location Visual</h2>
-                            <p class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400 ">3D Map</p>
-                        </div>
-                    </div>
-        
-                    <div class="flex items-end overflow-hidden bg-cover rounded-lg h-96" style="background-image:url('static/image/climate.webp')">
-                        <div class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60">
-                            <h2 class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white">Forecasting</h2>
-                            <p class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400 ">10 Years</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-
+  <head>
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="static/js/tailwind@3.4.5.js"></script>
+  </head>
+  <body>
+    <header>
+      <nav x-data="{ isOpen: false }" class="bg-white shadow dark:bg-gray-900">
+        <div class="container px-6 py-4 mx-auto">
+          <div class="lg:flex lg:items-center lg:justify-between">
+            <div class="flex items-center justify-between">
+              <a href="index.html" class="mx-auto">
+                <!-- img class="w-auto h-14 sm:h-7" src="static/icon/logo2.png" alt=""-->
+                <h1 class="text-2xl text-blue-900">Kepler</h1>
+              </a>
 
+              <!-- Mobile menu button -->
+              <div class="flex lg:hidden">
+                <button
+                  x-cloak
+                  @click="isOpen = !isOpen"
+                  type="button"
+                  class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400"
+                  aria-label="toggle menu"
+                >
+                  <svg
+                    x-show="!isOpen"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-6 h-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M4 8h16M4 16h16"
+                    />
+                  </svg>
 
-        <div class="flex justify-center items-center p-6">
-            <div class="flex flex-col md:flex-row items-center bg-white p-6 md:p-12 rounded-lg max-w-4xl">
-              <!-- Text Section -->
-              <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 text-center md:text-left">
-                <h2 class="text-3xl font-bold text-indigo-800 mb-4">
-                  High-capability analysis
-                </h2>
-                <p class="text-indigo-500 text-lg leading-relaxed italic">
-                  Enable geospatial data on disaster location hightlighting occurances affecting business unit.
-                </p>
+                  <svg
+                    x-show="isOpen"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-6 h-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
               </div>
-          
-              <!-- Image Section -->
-              <div class="md:w-1/2 flex justify-center">
-                <img
-                  src="static/image/hero.png"
-                  alt="Data Insights"
-                  class="rounded-lg shadow-lg w-full max-w-xs md:max-w-sm"
-                />
+            </div>
+
+            <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+            <div
+              x-cloak
+              :class="[isOpen ? 'translate-x-0 opacity-100 ' : 'opacity-0 -translate-x-full']"
+              class="absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-white shadow-md lg:bg-transparent lg:dark:bg-transparent lg:shadow-none dark:bg-gray-900 lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:w-auto lg:opacity-100 lg:translate-x-0"
+            >
+              <div class="-mx-4 lg:flex lg:items-center">
+                <a
+                  href="analytics.html"
+                  class="block mx-4 text-blue-900 font-bold capitalize dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Overview Map</a
+                >
+                <a
+                  href="locations.html"
+                  class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Location-Based</a
+                >
+                <a
+                  href="forecast.html"
+                  class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Forecasting</a
+                >
+                <a
+                  href="#"
+                  class="block mx-4 mt-4 font-bold capitalize text-blue-600 lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Contact</a
+                >
               </div>
             </div>
           </div>
-          
-
-          <div class="flex flex-col md:flex-row items-center bg-white p-8 md:p-16">
-            
-            <!-- Image Section -->
-            <div class="md:w-1/2 flex justify-center">
-                <img
-                  src="static/image/report.jpeg"
-                  alt="Data Insights"
-                  class="rounded-lg shadow-lg w-full max-w-sm"
-                />
-              </div>
-            
-            <!-- Text Section -->
-            <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
-              <h2 class="text-3xl font-bold text-indigo-800 mb-4">
-                Evalute Financial Impact Concerns
+        </div>
+      </nav>
+
+      <div
+        class="w-full bg-center bg-cover h-[38rem]"
+        style="background-image: url('static/image/hero-city-pin.png')"
+      >
+        <div
+          class="flex items-center justify-center w-full h-full bg-gray-900/40"
+        >
+          <div class="text-center">
+            <h1 class="text-3xl font-semibold text-white lg:text-4xl">
+              Economic-Disaster for <span class="text-blue-400">Business</span>
+            </h1>
+
+            <a href="analytics.html">
+              <button
+                class="w-full px-5 py-2 mt-4 text-sm font-medium text-white capitalize transition-colors duration-300 transform bg-blue-400 rounded-md lg:w-auto hover:bg-blue-200 focus:outline-none focus:bg-blue-500"
+              >
+                Demo
+              </button>
+            </a>
+
+            <a href="story.html">
+            <button
+              class="w-full px-5 py-2 ml-8 mt-4 text-sm font-medium text-white capitalize transition-colors duration-300 transform bg-sky-300 rounded-md lg:w-auto hover:bg-blue-200 focus:outline-none focus:bg-blue-500"
+            >
+              Story
+            </button>
+        </a>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <section class="bg-white dark:bg-gray-900">
+      <div class="container px-6 py-10 mx-auto">
+        <h1
+          class="text-lg font-semibold text-center text-blue-800 capitalize lg:text-3xl dark:text-white"
+        >
+          Analytical Integration for Finanance and Geoinfomatics
+        </h1>
+
+        <div
+          class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 lg:grid-cols-4"
+        >
+          <div
+            class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl"
+            style="background-image: url('static/image/flood.jpeg')"
+          >
+            <div
+              class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60"
+            >
+              <h2
+                class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white"
+              >
+                Disaster Impact
               </h2>
-              <p class="text-indigo-600 text-lg leading-relaxed italic">
-                Discover insights and make data-driven decisions for business. Academic proved modeling enlightens considerable fianances for future management.
+              <p
+                class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400"
+              >
+                Finance
               </p>
             </div>
-          
-            
           </div>
 
+          <div
+            class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl"
+            style="background-image: url('static/image/economic.webp')"
+          >
+            <div
+              class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60"
+            >
+              <h2
+                class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white"
+              >
+                Economic Affect
+              </h2>
+              <p
+                class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400"
+              >
+                Loss and Gain
+              </p>
+            </div>
+          </div>
 
-          <div class="mt-6">
-            <div class="grid sm:grid-cols-2 items-start gap-14 p-8 mx-auto max-w-4xl bg-white shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] rounded-md font-[sans-serif]">
-                <div>
-                    <h1 class="text-gray-800 text-3xl font-extrabold">Interesting?</h1>
-                    <p class="text-sm text-gray-500 mt-4">Feel free to contact us for more updates and news. Ask anything and let's talk together</p>
-
-                    <div class="mt-12">
-                        <h2 class="text-gray-800 text-base font-bold">Email</h2>
-                        <ul class="mt-4">
-                            <li class="flex items-center">
-                                <div class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill='#007bff'
-                                        viewBox="0 0 479.058 479.058">
-                                        <path
-                                            d="M434.146 59.882H44.912C20.146 59.882 0 80.028 0 104.794v269.47c0 24.766 20.146 44.912 44.912 44.912h389.234c24.766 0 44.912-20.146 44.912-44.912v-269.47c0-24.766-20.146-44.912-44.912-44.912zm0 29.941c2.034 0 3.969.422 5.738 1.159L239.529 264.631 39.173 90.982a14.902 14.902 0 0 1 5.738-1.159zm0 299.411H44.912c-8.26 0-14.971-6.71-14.971-14.971V122.615l199.778 173.141c2.822 2.441 6.316 3.655 9.81 3.655s6.988-1.213 9.81-3.655l199.778-173.141v251.649c-.001 8.26-6.711 14.97-14.971 14.97z"
-                                            data-original="#000000" />
-                                    </svg>
-                                </div>
-                                <a href="javascript:void(0)" class="text-[#007bff] text-sm ml-4">
-                                    <small class="block">Mail</small>
-                                    <strong>info@example.com</strong>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="mt-12">
-                        <h2 class="text-gray-800 text-base font-bold">Socials</h2>
-
-                        <ul class="flex mt-4 space-x-4">
-                            <li class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0">
-                                <a href="javascript:void(0)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill='#007bff'
-                                        viewBox="0 0 24 24">
-                                        <path
-                                            d="M6.812 13.937H9.33v9.312c0 .414.335.75.75.75l4.007.001a.75.75 0 0 0 .75-.75v-9.312h2.387a.75.75 0 0 0 .744-.657l.498-4a.75.75 0 0 0-.744-.843h-2.885c.113-2.471-.435-3.202 1.172-3.202 1.088-.13 2.804.421 2.804-.75V.909a.75.75 0 0 0-.648-.743A26.926 26.926 0 0 0 15.071 0c-7.01 0-5.567 7.772-5.74 8.437H6.812a.75.75 0 0 0-.75.75v4c0 .414.336.75.75.75zm.75-3.999h2.518a.75.75 0 0 0 .75-.75V6.037c0-2.883 1.545-4.536 4.24-4.536.878 0 1.686.043 2.242.087v2.149c-.402.205-3.976-.884-3.976 2.697v2.755c0 .414.336.75.75.75h2.786l-.312 2.5h-2.474a.75.75 0 0 0-.75.75V22.5h-2.505v-9.312a.75.75 0 0 0-.75-.75H7.562z"
-                                            data-original="#000000" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0">
-                                <a href="javascript:void(0)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill='#007bff'
-                                        viewBox="0 0 511 512">
-                                        <path
-                                            d="M111.898 160.664H15.5c-8.285 0-15 6.719-15 15V497c0 8.285 6.715 15 15 15h96.398c8.286 0 15-6.715 15-15V175.664c0-8.281-6.714-15-15-15zM96.898 482H30.5V190.664h66.398zM63.703 0C28.852 0 .5 28.352.5 63.195c0 34.852 28.352 63.2 63.203 63.2 34.848 0 63.195-28.352 63.195-63.2C126.898 28.352 98.551 0 63.703 0zm0 96.395c-18.308 0-33.203-14.891-33.203-33.2C30.5 44.891 45.395 30 63.703 30c18.305 0 33.195 14.89 33.195 33.195 0 18.309-14.89 33.2-33.195 33.2zm289.207 62.148c-22.8 0-45.273 5.496-65.398 15.777-.684-7.652-7.11-13.656-14.942-13.656h-96.406c-8.281 0-15 6.719-15 15V497c0 8.285 6.719 15 15 15h96.406c8.285 0 15-6.715 15-15V320.266c0-22.735 18.5-41.23 41.235-41.23 22.734 0 41.226 18.495 41.226 41.23V497c0 8.285 6.719 15 15 15h96.403c8.285 0 15-6.715 15-15V302.066c0-79.14-64.383-143.523-143.524-143.523zM466.434 482h-66.399V320.266c0-39.278-31.953-71.23-71.226-71.23-39.282 0-71.239 31.952-71.239 71.23V482h-66.402V190.664h66.402v11.082c0 5.77 3.309 11.027 8.512 13.524a15.01 15.01 0 0 0 15.875-1.82c20.313-16.294 44.852-24.907 70.953-24.907 62.598 0 113.524 50.926 113.524 113.523zm0 0"
-                                            data-original="#000000" />
-                                    </svg>
-                                </a>
-                            </li>
-                            <li class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0">
-                                <a href="javascript:void(0)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill='#007bff'
-                                        viewBox="0 0 24 24">
-                                        <path
-                                            d="M12 9.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Zm0-1.8a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm5.85-.225a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0ZM12 4.8c-2.227 0-2.59.006-3.626.052-.706.034-1.18.128-1.618.299a2.59 2.59 0 0 0-.972.633 2.601 2.601 0 0 0-.634.972c-.17.44-.265.913-.298 1.618C4.805 9.367 4.8 9.714 4.8 12c0 2.227.006 2.59.052 3.626.034.705.128 1.18.298 1.617.153.392.333.674.632.972.303.303.585.484.972.633.445.172.918.267 1.62.3.993.047 1.34.052 3.626.052 2.227 0 2.59-.006 3.626-.052.704-.034 1.178-.128 1.617-.298.39-.152.674-.333.972-.632.304-.303.485-.585.634-.972.171-.444.266-.918.299-1.62.047-.993.052-1.34.052-3.626 0-2.227-.006-2.59-.052-3.626-.034-.704-.128-1.18-.299-1.618a2.619 2.619 0 0 0-.633-.972 2.595 2.595 0 0 0-.972-.634c-.44-.17-.914-.265-1.618-.298-.993-.047-1.34-.052-3.626-.052ZM12 3c2.445 0 2.75.009 3.71.054.958.045 1.61.195 2.185.419A4.388 4.388 0 0 1 19.49 4.51c.457.45.812.994 1.038 1.595.222.573.373 1.227.418 2.185.042.96.054 1.265.054 3.71 0 2.445-.009 2.75-.054 3.71-.045.958-.196 1.61-.419 2.185a4.395 4.395 0 0 1-1.037 1.595 4.44 4.44 0 0 1-1.595 1.038c-.573.222-1.227.373-2.185.418-.96.042-1.265.054-3.71.054-2.445 0-2.75-.009-3.71-.054-.958-.045-1.61-.196-2.185-.419A4.402 4.402 0 0 1 4.51 19.49a4.414 4.414 0 0 1-1.037-1.595c-.224-.573-.374-1.227-.419-2.185C3.012 14.75 3 14.445 3 12c0-2.445.009-2.75.054-3.71s.195-1.61.419-2.185A4.392 4.392 0 0 1 4.51 4.51c.45-.458.994-.812 1.595-1.037.574-.224 1.226-.374 2.185-.419C9.25 3.012 9.555 3 12 3Z">
-                                        </path>
-                                    </svg>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
+          <div
+            class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl"
+            style="background-image: url('static/image/pin-location.jpeg')"
+          >
+            <div
+              class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60"
+            >
+              <h2
+                class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white"
+              >
+                Location Visual
+              </h2>
+              <p
+                class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400"
+              >
+                3D Map
+              </p>
+            </div>
+          </div>
 
-                <form class="ml-auo space-y-4">
-                    <input type='text' placeholder='How can we call your name?'
-                        class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500" />
-                    <input type='email' placeholder='Email'
-                        class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500" />
-                    <input type='text' placeholder='Something may we can help you?'
-                        class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500" />
-                    <textarea placeholder='We are great to see your comments...' rows="6"
-                        class="w-full text-gray-800 rounded-md px-4 border text-sm pt-2.5 outline-blue-500"></textarea>
-                    <button type='button'
-                        class="text-white bg-blue-500 hover:bg-blue-600 rounded-md text-sm px-4 py-3 w-full !mt-6">Greeting us!</button>
-                </form>
+          <div
+            class="flex items-end overflow-hidden bg-cover rounded-lg h-96 shadow-xl"
+            style="background-image: url('static/image/climate.webp')"
+          >
+            <div
+              class="w-full px-8 py-4 overflow-hidden rounded-b-lg backdrop-blur-sm bg-white/60 dark:bg-gray-800/60"
+            >
+              <h2
+                class="mt-4 text-xl font-semibold text-blue-800 capitalize dark:text-white"
+              >
+                Forecasting
+              </h2>
+              <p
+                class="mt-2 text-lg tracking-wider text-blue-500 uppercase dark:text-blue-400"
+              >
+                10 Years
+              </p>
             </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="flex justify-center items-center p-6">
+      <div
+        class="flex flex-col md:flex-row items-center bg-white p-6 md:p-12 rounded-lg max-w-4xl"
+      >
+        <!-- Text Section -->
+        <div class="md:w-1/2 mb-6 md:mb-0 md:pr-8 text-center md:text-left">
+          <h2 class="text-3xl font-bold text-indigo-800 mb-4">
+            High-capability analysis
+          </h2>
+          <p class="text-indigo-500 text-lg leading-relaxed italic">
+            Enable geospatial data on disaster location hightlighting occurances
+            affecting business unit.
+          </p>
         </div>
-          
-          
-    
 
+        <!-- Image Section -->
+        <div class="md:w-1/2 flex justify-center">
+          <img
+            src="static/image/hero.png"
+            alt="Data Insights"
+            class="rounded-lg shadow-lg w-full max-w-xs md:max-w-sm"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col md:flex-row items-center bg-white p-8 md:p-16">
+      <!-- Image Section -->
+      <div class="md:w-1/2 flex justify-center">
+        <img
+          src="static/image/report.jpeg"
+          alt="Data Insights"
+          class="rounded-lg shadow-lg w-full max-w-sm"
+        />
+      </div>
+
+      <!-- Text Section -->
+      <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+        <h2 class="text-3xl font-bold text-indigo-800 mb-4">
+          Evalute Financial Impact Concerns
+        </h2>
+        <p class="text-indigo-600 text-lg leading-relaxed italic">
+          Discover insights and make data-driven decisions for business.
+          Academic proved modeling enlightens considerable fianances for future
+          management.
+        </p>
+      </div>
+    </div>
+
+    <div class="mt-6">
+      <div
+        class="grid sm:grid-cols-2 items-start gap-14 p-8 mx-auto max-w-4xl bg-white shadow-[0_2px_10px_-3px_rgba(6,81,237,0.3)] rounded-md font-[sans-serif]"
+      >
+        <div>
+          <h1 class="text-gray-800 text-3xl font-extrabold">Interesting?</h1>
+          <p class="text-sm text-gray-500 mt-4">
+            Feel free to contact us for more updates and news. Ask anything and
+            let's talk together
+          </p>
+
+          <div class="mt-12">
+            <h2 class="text-gray-800 text-base font-bold">Email</h2>
+            <ul class="mt-4">
+              <li class="flex items-center">
+                <div
+                  class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20px"
+                    height="20px"
+                    fill="#007bff"
+                    viewBox="0 0 479.058 479.058"
+                  >
+                    <path
+                      d="M434.146 59.882H44.912C20.146 59.882 0 80.028 0 104.794v269.47c0 24.766 20.146 44.912 44.912 44.912h389.234c24.766 0 44.912-20.146 44.912-44.912v-269.47c0-24.766-20.146-44.912-44.912-44.912zm0 29.941c2.034 0 3.969.422 5.738 1.159L239.529 264.631 39.173 90.982a14.902 14.902 0 0 1 5.738-1.159zm0 299.411H44.912c-8.26 0-14.971-6.71-14.971-14.971V122.615l199.778 173.141c2.822 2.441 6.316 3.655 9.81 3.655s6.988-1.213 9.81-3.655l199.778-173.141v251.649c-.001 8.26-6.711 14.97-14.971 14.97z"
+                      data-original="#000000"
+                    />
+                  </svg>
+                </div>
+                <a
+                  href="javascript:void(0)"
+                  class="text-[#007bff] text-sm ml-4"
+                >
+                  <small class="block">Mail</small>
+                  <strong>info@example.com</strong>
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div class="mt-12">
+            <h2 class="text-gray-800 text-base font-bold">Socials</h2>
 
+            <ul class="flex mt-4 space-x-4">
+              <li
+                class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0"
+              >
+                <a href="javascript:void(0)">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20px"
+                    height="20px"
+                    fill="#007bff"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M6.812 13.937H9.33v9.312c0 .414.335.75.75.75l4.007.001a.75.75 0 0 0 .75-.75v-9.312h2.387a.75.75 0 0 0 .744-.657l.498-4a.75.75 0 0 0-.744-.843h-2.885c.113-2.471-.435-3.202 1.172-3.202 1.088-.13 2.804.421 2.804-.75V.909a.75.75 0 0 0-.648-.743A26.926 26.926 0 0 0 15.071 0c-7.01 0-5.567 7.772-5.74 8.437H6.812a.75.75 0 0 0-.75.75v4c0 .414.336.75.75.75zm.75-3.999h2.518a.75.75 0 0 0 .75-.75V6.037c0-2.883 1.545-4.536 4.24-4.536.878 0 1.686.043 2.242.087v2.149c-.402.205-3.976-.884-3.976 2.697v2.755c0 .414.336.75.75.75h2.786l-.312 2.5h-2.474a.75.75 0 0 0-.75.75V22.5h-2.505v-9.312a.75.75 0 0 0-.75-.75H7.562z"
+                      data-original="#000000"
+                    />
+                  </svg>
+                </a>
+              </li>
+              <li
+                class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0"
+              >
+                <a href="javascript:void(0)">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20px"
+                    height="20px"
+                    fill="#007bff"
+                    viewBox="0 0 511 512"
+                  >
+                    <path
+                      d="M111.898 160.664H15.5c-8.285 0-15 6.719-15 15V497c0 8.285 6.715 15 15 15h96.398c8.286 0 15-6.715 15-15V175.664c0-8.281-6.714-15-15-15zM96.898 482H30.5V190.664h66.398zM63.703 0C28.852 0 .5 28.352.5 63.195c0 34.852 28.352 63.2 63.203 63.2 34.848 0 63.195-28.352 63.195-63.2C126.898 28.352 98.551 0 63.703 0zm0 96.395c-18.308 0-33.203-14.891-33.203-33.2C30.5 44.891 45.395 30 63.703 30c18.305 0 33.195 14.89 33.195 33.195 0 18.309-14.89 33.2-33.195 33.2zm289.207 62.148c-22.8 0-45.273 5.496-65.398 15.777-.684-7.652-7.11-13.656-14.942-13.656h-96.406c-8.281 0-15 6.719-15 15V497c0 8.285 6.719 15 15 15h96.406c8.285 0 15-6.715 15-15V320.266c0-22.735 18.5-41.23 41.235-41.23 22.734 0 41.226 18.495 41.226 41.23V497c0 8.285 6.719 15 15 15h96.403c8.285 0 15-6.715 15-15V302.066c0-79.14-64.383-143.523-143.524-143.523zM466.434 482h-66.399V320.266c0-39.278-31.953-71.23-71.226-71.23-39.282 0-71.239 31.952-71.239 71.23V482h-66.402V190.664h66.402v11.082c0 5.77 3.309 11.027 8.512 13.524a15.01 15.01 0 0 0 15.875-1.82c20.313-16.294 44.852-24.907 70.953-24.907 62.598 0 113.524 50.926 113.524 113.523zm0 0"
+                      data-original="#000000"
+                    />
+                  </svg>
+                </a>
+              </li>
+              <li
+                class="bg-[#e6e6e6cf] h-10 w-10 rounded-full flex items-center justify-center shrink-0"
+              >
+                <a href="javascript:void(0)">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20px"
+                    height="20px"
+                    fill="#007bff"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M12 9.3a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4Zm0-1.8a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm5.85-.225a1.125 1.125 0 1 1-2.25 0 1.125 1.125 0 0 1 2.25 0ZM12 4.8c-2.227 0-2.59.006-3.626.052-.706.034-1.18.128-1.618.299a2.59 2.59 0 0 0-.972.633 2.601 2.601 0 0 0-.634.972c-.17.44-.265.913-.298 1.618C4.805 9.367 4.8 9.714 4.8 12c0 2.227.006 2.59.052 3.626.034.705.128 1.18.298 1.617.153.392.333.674.632.972.303.303.585.484.972.633.445.172.918.267 1.62.3.993.047 1.34.052 3.626.052 2.227 0 2.59-.006 3.626-.052.704-.034 1.178-.128 1.617-.298.39-.152.674-.333.972-.632.304-.303.485-.585.634-.972.171-.444.266-.918.299-1.62.047-.993.052-1.34.052-3.626 0-2.227-.006-2.59-.052-3.626-.034-.704-.128-1.18-.299-1.618a2.619 2.619 0 0 0-.633-.972 2.595 2.595 0 0 0-.972-.634c-.44-.17-.914-.265-1.618-.298-.993-.047-1.34-.052-3.626-.052ZM12 3c2.445 0 2.75.009 3.71.054.958.045 1.61.195 2.185.419A4.388 4.388 0 0 1 19.49 4.51c.457.45.812.994 1.038 1.595.222.573.373 1.227.418 2.185.042.96.054 1.265.054 3.71 0 2.445-.009 2.75-.054 3.71-.045.958-.196 1.61-.419 2.185a4.395 4.395 0 0 1-1.037 1.595 4.44 4.44 0 0 1-1.595 1.038c-.573.222-1.227.373-2.185.418-.96.042-1.265.054-3.71.054-2.445 0-2.75-.009-3.71-.054-.958-.045-1.61-.196-2.185-.419A4.402 4.402 0 0 1 4.51 19.49a4.414 4.414 0 0 1-1.037-1.595c-.224-.573-.374-1.227-.419-2.185C3.012 14.75 3 14.445 3 12c0-2.445.009-2.75.054-3.71s.195-1.61.419-2.185A4.392 4.392 0 0 1 4.51 4.51c.45-.458.994-.812 1.595-1.037.574-.224 1.226-.374 2.185-.419C9.25 3.012 9.555 3 12 3Z"
+                    ></path>
+                  </svg>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
 
-    </body>
-</html>
+        <form class="ml-auo space-y-4">
+          <input
+            type="text"
+            placeholder="How can we call your name?"
+            class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500"
+          />
+          <input
+            type="email"
+            placeholder="Email"
+            class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500"
+          />
+          <input
+            type="text"
+            placeholder="Something may we can help you?"
+            class="w-full text-gray-800 rounded-md py-2.5 px-4 border text-sm outline-blue-500"
+          />
+          <textarea
+            placeholder="We are great to see your comments..."
+            rows="6"
+            class="w-full text-gray-800 rounded-md px-4 border text-sm pt-2.5 outline-blue-500"
+          ></textarea>
+          <button
+            type="button"
+            class="text-white bg-blue-500 hover:bg-blue-600 rounded-md text-sm px-4 py-3 w-full !mt-6"
+          >
+            Greeting us!
+          </button>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>

story.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="static/js/tailwind@3.4.5.js"></script>
+  </head>
+  <body>
+    <header>
+      <nav x-data="{ isOpen: false }" class="bg-white shadow-lg dark:bg-gray-900">
+        <div class="container px-6 py-4 mx-auto">
+          <div class="lg:flex lg:items-center lg:justify-between">
+            <div class="flex items-center justify-between">
+              <a href="index.html" class="mx-auto">
+                <!-- img class="w-auto h-14 sm:h-7" src="static/icon/logo2.png" alt=""-->
+                <h1 class="text-2xl text-blue-900">Kepler</h1>
+              </a>
+
+              <!-- Mobile menu button -->
+              <div class="flex lg:hidden">
+                <button
+                  x-cloak
+                  @click="isOpen = !isOpen"
+                  type="button"
+                  class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400"
+                  aria-label="toggle menu"
+                >
+                  <svg
+                    x-show="!isOpen"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-6 h-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M4 8h16M4 16h16"
+                    />
+                  </svg>
+
+                  <svg
+                    x-show="isOpen"
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="w-6 h-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+            <div
+              x-cloak
+              :class="[isOpen ? 'translate-x-0 opacity-100 ' : 'opacity-0 -translate-x-full']"
+              class="absolute inset-x-0 z-20 w-full px-6 py-4 transition-all duration-300 ease-in-out bg-white shadow-md lg:bg-transparent lg:dark:bg-transparent lg:shadow-none dark:bg-gray-900 lg:mt-0 lg:p-0 lg:top-0 lg:relative lg:w-auto lg:opacity-100 lg:translate-x-0"
+            >
+              <div class="-mx-4 lg:flex lg:items-center">
+                <a
+                  href="analytics.html"
+                  class="block mx-4 text-blue-900 font-bold capitalize dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Overview Map</a
+                >
+                <a
+                  href="locations.html"
+                  class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Location-Based</a
+                >
+                <a
+                  href="forecast.html"
+                  class="block mx-4 mt-4 text-blue-900 font-bold capitalize lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Forecasting</a
+                >
+                <div
+                  class="block mx-4 mt-4 font-bold capitalize text-blue-600 lg:mt-0 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400"
+                  >Contact</div
+                >
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <div class="text-black bg-white leading-relaxed max-w-5xl mx-auto p-6 mt-8">
+  
+      <!-- Hero Section with Image -->
+      <header class="text-center my-12">
+        <h1 class="text-4xl font-bold text-gray-900 mb-4">Empowering Business Resilience with Disaster Analytics</h1>
+        <p class="text-lg text-gray-600 mb-6">
+          Leveraging Geographic Information Systems (GIS) for Economic Insights in Climate-Induced Disaster Risk Management
+        </p>
+        <img src="static/image/story-climate.webp" alt="Disaster Impact on Business" class="w-full h-64 object-cover object-bottom rounded shadow-lg mb-8">
+      </header>
+      
+      <!-- Introduction Section -->
+      <section class="mb-12 text-center">
+        <p class="text-lg">
+          Climate-related disasters like floods, storms, and air pollution are no longer rare occurrences. For businesses that rely on location-based assets—such as retail outlets, transportation hubs, and supply chains—the economic implications are substantial. Our WebGIS Dashboard is designed to help organizations assess, anticipate, and mitigate these risks through data-driven insights.
+        </p>
+      </section>
+    
+      <!-- Why Disaster Awareness Matters Section with Image Cards -->
+      <section class="my-12 bg-sky-100 p-8 rounded-lg shadow-lg">
+        <h2 class="text-3xl font-semibold text-gray-900 mb-6 text-center">Why Climate-Related Disasters Demand Business Attention</h2>
+        <div class="grid md:grid-cols-3 gap-6">
+          <div class="bg-white p-6 rounded shadow-lg">
+            <img src="static/image/story-flood.jpeg" alt="Flood Impact" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Floods and Supply Chains</h3>
+            <p>Flooding can disrupt supply chains, increase inventory costs, and impact customer access, leading to significant revenue loss.</p>
+          </div>
+          <div class="bg-white p-6 rounded shadow-lg">
+            <img src="static/image/story-wind.jpeg" alt="Windstorm Impact" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Windstorms and Logistics</h3>
+            <p>High winds can delay transportation, increase maintenance costs, and disrupt distribution networks, affecting operational efficiency.</p>
+          </div>
+          <div class="bg-white p-6 rounded shadow-lg">
+            <img src="static/image/story-air.jpeg" alt="Air Pollution" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Air Pollution’s Hidden Costs</h3>
+            <p>Poor air quality can decrease foot traffic in urban areas and impact workforce productivity, indirectly affecting profitability.</p>
+          </div>
+        </div>
+      </section>
+    
+      <!-- Economic Impact of Disasters Section with Inline Image -->
+      <section class="my-12">
+        <h2 class="text-3xl font-semibold text-gray-900 mb-6">The Economic Consequences of Disasters on Business</h2>
+        <p class="text-lg mb-6">
+          The financial impacts of disasters differ by sector. Retail businesses, for instance, face not only physical damage but also disruptions in customer access and supply availability, leading to stockouts and increased costs. Transportation companies encounter delays and rerouting expenses, while sectors reliant on outdoor activities experience reduced customer flow.
+        </p>
+        <img src="static/image/story-7-11.webp" alt="Economic Impact Analysis" class="w-full h-64 object-cover rounded shadow-lg mb-8">
+        <p class="text-lg">
+          To assess these impacts, businesses need tools that combine economic modeling with environmental monitoring. The WebGIS Dashboard addresses this need by providing a real-time, data-rich environment for evaluating both immediate risks and long-term financial consequences, empowering businesses to make evidence-based decisions.
+        </p>
+      </section>
+    
+      <!-- WebGIS Dashboard Highlights Section with Feature Cards -->
+      <section class="my-12 bg-blue-200 p-8 rounded-lg shadow-lg">
+        <h2 class="text-3xl font-semibold text-gray-900 mb-6 text-center">Key Features of the WebGIS Dashboard</h2>
+        <p class="text-lg text-center mb-8">
+          Our platform combines GIS technology with predictive analytics, enabling organizations to navigate complex disaster risks and optimize resource allocation.
+        </p>
+        <div class="grid md:grid-cols-2 gap-8">
+          <div class="bg-white p-6 rounded-xl shadow-lg">
+            <img src="static/image/story-dashboard.webp" alt="Real-time Data" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Overview Insight</h3>
+            <p>Stay with up-to-date data on environmental hazards, enabling swift, data-driven responses to emerging threats.</p>
+          </div>
+          <div class="bg-white p-6 rounded-xl shadow-lg">
+            <img src="static/image/story-locationbased.webp" alt="Predictive Analytics" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Location-Based</h3>
+            <p>Utilize historical data and machine learning to forecast disaster patterns, supporting proactive risk management.</p>
+          </div>
+          <div class="bg-white p-6 rounded-xl shadow-lg">
+            <img src="static/image/story-forecast.webp" alt="Forecasting Impact" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Forecasting Impact Analysis</h3>
+            <p>Quantify the potential costs of disasters on operations, helping prioritize investments in risk mitigation.</p>
+          </div>
+          <div class="bg-white p-6 rounded-xl shadow-lg">
+            <img src="static/image/story-deckgl.webp" alt="User Interface" class="w-full h-40 object-cover rounded mb-4">
+            <h3 class="text-xl font-semibold mb-2">Modern WebGIS Dashboard</h3>
+            <p>Interactive maps and dashboards offer an accessible view of complex data, streamlining decision-making for users.</p>
+          </div>
+        </div>
+      </section>
+
+
+    
+    </div>
+
+    <h2 class="text-3xl font-semibold text-gray-900 mb-6 text-center">Kepler Platform</h2>
+
+    <div class="flex justify-center mt-10 mb-20">
+      <img
+        src="static/image/story-features.png"
+        alt="Centered Image"
+        class="w-3/4 h-auto"
+      />
+    </div>
+  </body>
+</html>