From ae203aa45cd12698564b50f1cd00294f196263ec Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 18:17:26 +0700
Subject: [PATCH 1/3] fix: improve mobile layout for hero section and data
 sources

- Optimize hero section terminal demo for Samsung A33 (360px width):
  - Reduce text size to text-[8px] on mobile with responsive scaling
  - Minimize padding and margins throughout terminal demo
  - Compress JSON indentation spacing for mobile screens
  - Reduce terminal header elements and spacing
  - Use leading-none for tighter line height on mobile

- Fix DataSources section mobile responsiveness:
  - Change layout from flex to grid system (grid-cols-3 md:grid-cols-6)
  - Increase logo sizes and containers for better visibility
  - Optimize spacing and gaps for mobile vs desktop viewing
  - Create 3x2 grid on mobile, single row on larger screens

- Fix Glossary classification flow diagrams:
  - Add horizontal scroll containers to prevent text wrapping
  - Reduce badge sizes and text for mobile (text-[10px])
  - Implement overflow-x-auto for classification progression flows
  - Prevent individual badge text wrapping with whitespace-nowrap
  - Maintain readability while preventing UI cropping

All changes ensure proper display on small screens while maintaining
visual appeal on larger devices.
---
 src/components/DataSources.vue                | 13 ++--
 .../documentation/GlossarySection.vue         | 36 ++++++-----
 src/views/Home.vue                            | 60 ++++++++++---------
 3 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/src/components/DataSources.vue b/src/components/DataSources.vue
index 7203c09..dbf0f64 100644
--- a/src/components/DataSources.vue
+++ b/src/components/DataSources.vue
@@ -1,16 +1,15 @@
 <template>
-  <div class="mt-16 md:mt-20 text-center">
-    <p class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-6 md:mb-8">
+  <div class="mt-8 sm:mt-12 md:mt-16 lg:mt-20 text-center">
+    <p class="text-xs sm:text-sm font-medium text-gray-500 uppercase tracking-wide mb-4 sm:mb-6 md:mb-8">
       {{ $t('dataSources.trustedBy') }}
     </p>
-    <div
-      class="flex flex-wrap items-center justify-center gap-6 md:gap-8 lg:gap-12 opacity-60 hover:opacity-80 transition-opacity duration-300">
+    <div class="grid grid-cols-3 md:grid-cols-6 gap-4 sm:gap-6 md:gap-8 max-w-md sm:max-w-lg md:max-w-5xl mx-auto opacity-60 hover:opacity-80 transition-opacity duration-300">
       <div v-for="source in dataSources" :key="source.alt"
-        class="flex items-center justify-center h-12 w-28 md:w-32 grayscale hover:grayscale-0 transition-all duration-300 group">
+        class="flex items-center justify-center h-16 sm:h-20 md:h-24 grayscale hover:grayscale-0 transition-all duration-300 group">
         <a :href="source.url" target="_blank" rel="noopener noreferrer"
-          class="flex w-full h-full items-center justify-center hover:scale-110 transition-transform duration-300"
+          class="flex w-full h-full items-center justify-center hover:scale-110 transition-transform duration-300 p-2"
           :title="source.alt">
-          <img :src="source.image" :alt="source.alt" class="max-h-6 md:max-h-8 w-auto object-contain" loading="lazy">
+          <img :src="source.image" :alt="source.alt" class="max-h-8 sm:max-h-10 md:max-h-12 w-auto object-contain" loading="lazy">
         </a>
       </div>
     </div>
diff --git a/src/components/documentation/GlossarySection.vue b/src/components/documentation/GlossarySection.vue
index fd32423..68142fa 100644
--- a/src/components/documentation/GlossarySection.vue
+++ b/src/components/documentation/GlossarySection.vue
@@ -302,27 +302,31 @@
             <div class="space-y-4">
               <div>
                 <h5 class="text-sm font-medium text-gray-900 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.currentFlow') }}</h5>
-                <div class="flex items-center space-x-2 text-xs flex-wrap">
-                  <span class="px-2 py-1 bg-green-100 text-green-700 rounded font-medium">Suspect</span>
-                  <span class="text-gray-400">→</span>
-                  <span class="px-2 py-1 bg-green-100 text-green-700 rounded font-medium">Probable</span>
-                  <span class="text-gray-400">→</span>
-                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded font-medium">Confirmed</span>
-                  <span class="text-gray-400">→</span>
-                  <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded font-medium">Recovery/Death</span>
+                <div class="overflow-x-auto">
+                  <div class="flex items-center space-x-1 sm:space-x-2 text-[10px] sm:text-xs min-w-max">
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Suspect</span>
+                    <span class="text-gray-400">→</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Probable</span>
+                    <span class="text-gray-400">→</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 text-blue-700 rounded font-medium whitespace-nowrap">Confirmed</span>
+                    <span class="text-gray-400">→</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-gray-100 text-gray-700 rounded font-medium whitespace-nowrap">Recovery/Death</span>
+                  </div>
                 </div>
               </div>
               
               <div>
                 <h5 class="text-sm font-medium text-gray-900 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.legacyFlow') }}</h5>
-                <div class="flex items-center space-x-2 text-xs flex-wrap opacity-75">
-                  <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded font-medium">ODP</span>
-                  <span class="text-gray-400">→</span>
-                  <span class="px-2 py-1 bg-orange-100 text-orange-700 rounded font-medium">PDP</span>
-                  <span class="text-gray-400">→</span>
-                  <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded font-medium">OTG</span>
-                  <span class="text-gray-400">→</span>
-                  <span class="px-2 py-1 bg-green-100 text-green-700 rounded font-medium">Confirmed</span>
+                <div class="overflow-x-auto opacity-75">
+                  <div class="flex items-center space-x-1 sm:space-x-2 text-[10px] sm:text-xs min-w-max">
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 text-blue-700 rounded font-medium whitespace-nowrap">ODP</span>
+                    <span class="text-gray-400">→</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-orange-100 text-orange-700 rounded font-medium whitespace-nowrap">PDP</span>
+                    <span class="text-gray-400">→</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-purple-100 text-purple-700 rounded font-medium whitespace-nowrap">OTG</span>
+                    <span class="text-gray-400">→</span>
+                    <span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Confirmed</span>
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index bfce0e9..5379381 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -134,72 +134,74 @@
                 <div class="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-purple-500/5 pointer-events-none"></div>
                 
                 <!-- Terminal Header -->
-                <div class="bg-gray-800/90 backdrop-blur-sm px-4 py-3 flex items-center space-x-2 border-b border-gray-700/50">
-                  <div class="flex space-x-1.5">
-                    <div class="w-2.5 h-2.5 bg-red-500 rounded-full hover:bg-red-400 transition-colors cursor-pointer"></div>
-                    <div class="w-2.5 h-2.5 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors cursor-pointer"></div>
-                    <div class="w-2.5 h-2.5 bg-green-500 rounded-full hover:bg-green-400 transition-colors cursor-pointer"></div>
+                <div class="bg-gray-800/90 backdrop-blur-sm px-2 sm:px-4 py-2 sm:py-3 flex items-center space-x-2 border-b border-gray-700/50">
+                  <div class="flex space-x-1">
+                    <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-red-500 rounded-full hover:bg-red-400 transition-colors cursor-pointer"></div>
+                    <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors cursor-pointer"></div>
+                    <div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-500 rounded-full hover:bg-green-400 transition-colors cursor-pointer"></div>
                   </div>
                   <div class="flex-1 text-center">
-                    <span class="text-gray-300 text-xs font-medium">PICO API Terminal</span>
+                    <span class="text-gray-300 text-[10px] sm:text-xs font-medium">PICO API Terminal</span>
                   </div>
-                  <div class="flex items-center space-x-1.5 text-xs text-gray-500">
-                    <div class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
-                    <span class="text-xs">Live</span>
+                  <div class="flex items-center space-x-1 text-[10px] sm:text-xs text-gray-500">
+                    <div class="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-green-500 rounded-full animate-pulse"></div>
+                    <span>Live</span>
                   </div>
                 </div>
               
                 <!-- Code Content -->
-                <div class="p-2 sm:p-3 md:p-4 font-mono text-xs relative bg-gray-900/50 overflow-x-auto">
+                <div class="p-1 sm:p-2 md:p-4 font-mono text-[8px] sm:text-xs relative bg-gray-900/50 overflow-x-auto">
                 <!-- Request -->
-                <div class="mb-4 sm:mb-6">
-                  <div class="text-green-400 mb-2 typing-animation whitespace-nowrap overflow-x-auto">
-                    <span class="text-gray-500">$</span> curl https://pico-api.banuacoder.com/api/v1/national/latest
+                <div class="mb-2 sm:mb-4">
+                  <div class="text-green-400 mb-1 sm:mb-2 typing-animation overflow-x-auto">
+                    <div class="whitespace-nowrap">
+                      <span class="text-gray-500">$</span> curl https://pico-api.banuacoder.com/api/v1/national/latest
+                    </div>
                   </div>
                 </div>
                 
                 <!-- Response -->
-                <div class="text-gray-300 leading-tight sm:leading-relaxed response-animation opacity-0 overflow-x-auto">
+                <div class="text-gray-300 leading-none sm:leading-tight md:leading-relaxed response-animation opacity-0 overflow-x-auto">
                   <div class="text-blue-400">{</div>
-                  <div class="pl-2 sm:pl-4">
+                  <div class="pl-1 sm:pl-2 md:pl-4">
                     <span class="text-yellow-400">"status"</span>: <span class="text-green-300">"success"</span>,
                   </div>
-                  <div class="pl-2 sm:pl-4">
+                  <div class="pl-1 sm:pl-2 md:pl-4">
                     <span class="text-yellow-400">"data"</span>: <div class="text-blue-400 inline">{</div>
                   </div>
-                  <div class="pl-4 sm:pl-8">
+                  <div class="pl-2 sm:pl-4 md:pl-8">
                     <span class="text-yellow-400">"day"</span>: <span class="text-orange-400">1247</span>,
                   </div>
-                  <div class="pl-4 sm:pl-8">
+                  <div class="pl-2 sm:pl-4 md:pl-8">
                     <span class="text-yellow-400">"date"</span>: <span class="text-green-300">"2024-09-07T00:00:00Z"</span>,
                   </div>
-                  <div class="pl-4 sm:pl-8">
+                  <div class="pl-2 sm:pl-4 md:pl-8">
                     <span class="text-yellow-400">"daily"</span>: <div class="text-blue-400 inline">{</div>
                   </div>
-                  <div class="pl-6 sm:pl-12">
+                  <div class="pl-3 sm:pl-6 md:pl-12">
                     <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">127</span>,
                   </div>
-                  <div class="pl-6 sm:pl-12">
+                  <div class="pl-3 sm:pl-6 md:pl-12">
                     <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">98</span>,
                   </div>
-                  <div class="pl-6 sm:pl-12">
+                  <div class="pl-3 sm:pl-6 md:pl-12">
                     <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">2</span>
                   </div>
-                  <div class="pl-4 sm:pl-8 text-blue-400">},</div>
-                  <div class="pl-4 sm:pl-8">
+                  <div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">},</div>
+                  <div class="pl-2 sm:pl-4 md:pl-8">
                     <span class="text-yellow-400">"cumulative"</span>: <div class="text-blue-400 inline">{</div>
                   </div>
-                  <div class="pl-6 sm:pl-12">
+                  <div class="pl-3 sm:pl-6 md:pl-12">
                     <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">6754298</span>,
                   </div>
-                  <div class="pl-6 sm:pl-12">
+                  <div class="pl-3 sm:pl-6 md:pl-12">
                     <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">6589567</span>,
                   </div>
-                  <div class="pl-6 sm:pl-12">
+                  <div class="pl-3 sm:pl-6 md:pl-12">
                     <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">161031</span>
                   </div>
-                  <div class="pl-4 sm:pl-8 text-blue-400">}</div>
-                  <div class="pl-2 sm:pl-4 text-blue-400">}</div>
+                  <div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">}</div>
+                  <div class="pl-1 sm:pl-2 md:pl-4 text-blue-400">}</div>
                   <div class="text-blue-400">}</div>
                   
                   <!-- Typing cursor -->

From 8602ce4d5240bfa8efdbc59e8e06b4530b3f7b1b Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 18:22:59 +0700
Subject: [PATCH 2/3] refactor: remove redundant Quick API Overview section
 from home page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove entire API endpoints preview section that was duplicating
  documentation content without adding significant value
- Streamline home page flow: Hero → Features → Data Sources → Footer
- Eliminate unnecessary scrolling and improve user focus
- Direct users to comprehensive documentation instead of shallow overview
- Clean up page structure for better user experience

The detailed API endpoint information with proper examples and syntax
highlighting is better presented in the documentation sections.
---
 src/views/Home.vue | 47 ----------------------------------------------
 1 file changed, 47 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5379381..5c85f11 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -324,53 +324,6 @@
       </div>
     </div>
 
-    <!-- API Endpoints Preview -->
-    <div class="py-16 bg-gray-50">
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center mb-16">
-          <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Quick API Overview</h2>
-          <p class="text-xl text-gray-600">Essential endpoints to get you started</p>
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <div class="bg-white rounded-xl shadow-lg p-8">
-            <h3 class="text-2xl font-semibold text-gray-900 mb-4">Health Check</h3>
-            <div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
-              GET /api/v1/health
-            </div>
-            <p class="text-gray-600 mt-4">Check API status and database connectivity</p>
-          </div>
-
-          <div class="bg-white rounded-xl shadow-lg p-8">
-            <h3 class="text-2xl font-semibold text-gray-900 mb-4">National Data</h3>
-            <div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
-              GET /api/v1/national<br/>
-              GET /api/v1/national/latest
-            </div>
-            <p class="text-gray-600 mt-4">National COVID-19 statistics and latest data</p>
-          </div>
-
-          <div class="bg-white rounded-xl shadow-lg p-8">
-            <h3 class="text-2xl font-semibold text-gray-900 mb-4">Province Data</h3>
-            <div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
-              GET /api/v1/provinces<br/>
-              GET /api/v1/provinces/cases
-            </div>
-            <p class="text-gray-600 mt-4">Province information and case data with pagination</p>
-          </div>
-
-          <div class="bg-white rounded-xl shadow-lg p-8">
-            <h3 class="text-2xl font-semibold text-gray-900 mb-4">Specific Province</h3>
-            <div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
-              GET /api/v1/provinces/72/cases
-            </div>
-            <p class="text-gray-600 mt-4">Central Sulawesi specific COVID-19 data</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-
     <!-- Footer -->
     <footer class="bg-gray-900 text-white py-12">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

From 52d846320d3d8420aab9cdd42e4e0d1473faa5e5 Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 18:27:28 +0700
Subject: [PATCH 3/3] chore: add CLAUDE.md configuration file

---
 CLAUDE.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..ae9163e
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+- for this project, always use frontend expert agent
\ No newline at end of file