From f9f4fe3eb9db9a70b53e7dfbdc12d79fa1c07c9f Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 09:40:38 +0700
Subject: [PATCH 1/3] fix: improve mobile responsiveness for Samsung A33 and
 small screens

- Hero section: reduce font sizes, improve spacing, fix code terminal layout
- Documentation: optimize sidebar width, reduce padding for mobile
- Overview section: responsive typography, better code block handling
- Reproduction Rate: mobile-friendly math formulas with overflow handling
- Add responsive breakpoints for xs/sm screens (360px+)
- Improve touch targets and content readability on mobile devices
---
 .htaccess                                     |  17 ++-
 .../documentation/GlossarySection.vue         | 110 +++++++++---------
 .../documentation/OverviewSection.vue         |  50 ++++----
 src/views/Documentation.vue                   |  12 +-
 src/views/Home.vue                            |  66 +++++------
 5 files changed, 135 insertions(+), 120 deletions(-)

diff --git a/.htaccess b/.htaccess
index 965b5e0..c6fd7eb 100644
--- a/.htaccess
+++ b/.htaccess
@@ -16,14 +16,23 @@ RewriteRule ^api/v1/(.*)$ http://localhost:8080/api/v1/$1 [P,L]
 # Handle root API endpoint
 RewriteRule ^api/v1/?$ http://localhost:8080/api/v1/ [P,L]
 
-# Serve Swagger UI static files (no proxy needed)
-# Static files will be served directly by web server
+# =============================================================================
+# SWAGGER UI STATIC FILES CONFIGURATION
+# =============================================================================
+
+ # Serve Swagger UI
+ RewriteRule ^swagger/?$ /dist/index.html [L]
+ RewriteRule ^swagger/(.*)$ /dist/$1 [L]
+
+ # Serve docs directory (swagger.json, swagger.yaml, swagger.html)
+ RewriteRule ^docs/(.*)$ /docs/$1 [L]
+
 
 # Handle docs route for Vue documentation site
 RewriteRule ^docs/?$ /index.html [L]
 
-# Optional: API documentation redirect
-RewriteRule ^api/?$ /api/v1/health [R=302,L]
+# Redirect /api/ to Swagger UI documentation
+RewriteRule ^api/?$ /swagger/ [R=302,L]
 
 # =============================================================================
 # CORS HEADERS CONFIGURATION
diff --git a/src/components/documentation/GlossarySection.vue b/src/components/documentation/GlossarySection.vue
index 9262fb1..fd32423 100644
--- a/src/components/documentation/GlossarySection.vue
+++ b/src/components/documentation/GlossarySection.vue
@@ -1,41 +1,41 @@
 <template>
-  <section v-show="isActive" id="glossary" class="mb-16">
-    <div class="mb-8">
-      <div class="flex items-center mb-4">
-        <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center mr-3">
-          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+  <section v-show="isActive" id="glossary" class="mb-12 md:mb-16">
+    <div class="mb-6 md:mb-8">
+      <div class="flex items-center mb-3 md:mb-4">
+        <div class="w-6 h-6 sm:w-8 sm:h-8 bg-indigo-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3">
+          <svg class="w-4 h-4 sm:w-5 sm:h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
           </svg>
         </div>
-        <h1 class="text-3xl font-bold text-gray-900">{{ t('documentation.glossary.title') }}</h1>
+        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">{{ t('documentation.glossary.title') }}</h1>
       </div>
-      <p class="text-lg text-gray-600">{{ t('documentation.glossary.subtitle') }}</p>
+      <p class="text-sm sm:text-base lg:text-lg text-gray-600">{{ t('documentation.glossary.subtitle') }}</p>
     </div>
 
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
-      <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-8 py-6">
-        <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.glossary.cardTitle') }}</h2>
-        <p class="text-indigo-100">{{ t('documentation.glossary.cardSubtitle') }}</p>
+    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+      <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
+        <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-white mb-1 sm:mb-2">{{ t('documentation.glossary.cardTitle') }}</h2>
+        <p class="text-sm sm:text-base text-indigo-100">{{ t('documentation.glossary.cardSubtitle') }}</p>
       </div>
       
-      <div class="p-8 space-y-8">
+      <div class="p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">
         <!-- Reproduction Rate -->
-        <div class="border-b border-gray-200 pb-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4 flex items-center">
-            <div class="w-6 h-6 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-3 text-sm font-bold">Rt</div>
+        <div class="border-b border-gray-200 pb-6 sm:pb-8">
+          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4 flex items-center">
+            <div class="w-5 h-5 sm:w-6 sm:h-6 bg-red-100 text-red-600 rounded-full flex items-center justify-center mr-2 sm:mr-3 text-xs sm:text-sm font-bold">Rt</div>
             {{ t('documentation.glossary.reproductionRate.title') }}
           </h3>
           
-          <div class="grid lg:grid-cols-2 gap-8">
-            <div class="space-y-6">
+          <div class="grid lg:grid-cols-2 gap-6 sm:gap-8">
+            <div class="space-y-4 sm:space-y-6">
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.reproductionRate.definition') }}</h4>
-                <p class="text-gray-600 mb-4">{{ t('documentation.glossary.reproductionRate.definitionText') }}</p>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.definition') }}</h4>
+                <p class="text-sm sm:text-base text-gray-600 mb-3 sm:mb-4">{{ t('documentation.glossary.reproductionRate.definitionText') }}</p>
               </div>
               
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.reproductionRate.interpretation') }}</h4>
-                <div class="space-y-2 text-sm">
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.interpretation') }}</h4>
+                <div class="space-y-2 text-xs sm:text-sm">
                   <div class="flex items-center p-2 bg-red-50 rounded-lg">
                     <span class="font-mono font-bold text-red-600 mr-2">Rt > 1:</span>
                     <span class="text-gray-700">{{ t('documentation.glossary.reproductionRate.growing') }}</span>
@@ -52,8 +52,8 @@
               </div>
               
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.reproductionRate.calculationMethod') }}</h4>
-                <div class="bg-blue-50 rounded-lg p-4 text-sm">
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.calculationMethod') }}</h4>
+                <div class="bg-blue-50 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
                   <p class="font-semibold text-blue-900 mb-2">{{ t('documentation.glossary.reproductionRate.epiEstimTitle') }}</p>
                   <ul class="space-y-1 text-blue-800">
                     <li v-for="(detail, index) in methodDetails" :key="index">
@@ -64,40 +64,46 @@
               </div>
               
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.reproductionRate.dataAvailability') }}</h4>
-                <div class="bg-gray-50 rounded-lg p-3 text-sm text-gray-600">
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.dataAvailability') }}</h4>
+                <div class="bg-gray-50 rounded-lg p-3 text-xs sm:text-sm text-gray-600">
                   <p>{{ t('documentation.glossary.reproductionRate.dataAvailabilityText') }}</p>
                 </div>
               </div>
             </div>
             
-            <div class="space-y-6">
+            <div class="space-y-4 sm:space-y-6">
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.reproductionRate.formula') }}</h4>
-                <div class="bg-purple-50 rounded-lg p-4">
-                  <p class="font-semibold text-purple-900 mb-3">{{ t('documentation.glossary.reproductionRate.formulaTitle') }}</p>
-                  <p class="text-purple-800 text-sm mb-4">{{ t('documentation.glossary.reproductionRate.formulaDescription') }}</p>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.formula') }}</h4>
+                <div class="bg-purple-50 rounded-lg p-3 sm:p-4">
+                  <p class="font-semibold text-purple-900 mb-2 sm:mb-3 text-sm sm:text-base">{{ t('documentation.glossary.reproductionRate.formulaTitle') }}</p>
+                  <p class="text-purple-800 text-xs sm:text-sm mb-3 sm:mb-4">{{ t('documentation.glossary.reproductionRate.formulaDescription') }}</p>
                   
-                  <div class="bg-white rounded-lg p-4 border border-purple-200">
-                    <div class="space-y-4 text-sm">
-                      <div class="text-purple-900 bg-purple-25 p-3 rounded border-l-4 border-purple-300">
-                        <div class="font-semibold mb-3">1. {{ t('documentation.glossary.reproductionRate.formulaSteps.0') }}</div>
-                        <MathFormula formula="\lambda_t = \sum_{s=1}^{t-1} I_{t-s} \cdot w_s" />
+                  <div class="bg-white rounded-lg p-3 sm:p-4 border border-purple-200 overflow-x-auto">
+                    <div class="space-y-3 sm:space-y-4 text-xs sm:text-sm min-w-0">
+                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                        <div class="font-semibold mb-2 sm:mb-3">1. {{ t('documentation.glossary.reproductionRate.formulaSteps.0') }}</div>
+                        <div class="overflow-x-auto">
+                          <MathFormula formula="\lambda_t = \sum_{s=1}^{t-1} I_{t-s} \cdot w_s" />
+                        </div>
                       </div>
-                      <div class="text-purple-900 bg-purple-25 p-3 rounded border-l-4 border-purple-300">
-                        <div class="font-semibold mb-3">2. {{ t('documentation.glossary.reproductionRate.formulaSteps.1') }}</div>
-                        <div class="space-y-2">
+                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                        <div class="font-semibold mb-2 sm:mb-3">2. {{ t('documentation.glossary.reproductionRate.formulaSteps.1') }}</div>
+                        <div class="space-y-2 overflow-x-auto">
                           <MathFormula formula="I_{t-s} = \text{incidence at time } (t-s)" />
                           <MathFormula formula="w_s = \text{serial interval probability}" />
                         </div>
                       </div>
-                      <div class="text-purple-900 bg-purple-25 p-3 rounded border-l-4 border-purple-300">
-                        <div class="font-semibold mb-3">3. {{ t('documentation.glossary.reproductionRate.formulaSteps.2') }}</div>
-                        <MathFormula formula="R_t | \text{data} \sim \text{Gamma}\left(a + \sum I_t, \, b + \sum \lambda_t\right)" />
+                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                        <div class="font-semibold mb-2 sm:mb-3">3. {{ t('documentation.glossary.reproductionRate.formulaSteps.2') }}</div>
+                        <div class="overflow-x-auto">
+                          <MathFormula formula="R_t | \text{data} \sim \text{Gamma}\left(a + \sum I_t, \, b + \sum \lambda_t\right)" />
+                        </div>
                       </div>
-                      <div class="text-purple-900 bg-purple-25 p-3 rounded border-l-4 border-purple-300">
-                        <div class="font-semibold mb-3">4. {{ t('documentation.glossary.reproductionRate.formulaSteps.3') }}</div>
-                        <MathFormula formula="\mathbb{E}[R_t | \text{data}] = \frac{a + \sum I_t}{b + \sum \lambda_t}" />
+                      <div class="text-purple-900 bg-purple-25 p-2 sm:p-3 rounded border-l-4 border-purple-300">
+                        <div class="font-semibold mb-2 sm:mb-3">4. {{ t('documentation.glossary.reproductionRate.formulaSteps.3') }}</div>
+                        <div class="overflow-x-auto">
+                          <MathFormula formula="\mathbb{E}[R_t | \text{data}] = \frac{a + \sum I_t}{b + \sum \lambda_t}" />
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -105,21 +111,21 @@
               </div>
               
               <div>
-                <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.glossary.reproductionRate.references') }}</h4>
-                <div class="space-y-3">
-                  <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-indigo-300">
-                    <p class="font-semibold text-gray-900 text-sm">Cori, A., Ferguson, N. M., Fraser, C., & Cauchemez, S. (2013)</p>
+                <h4 class="text-sm sm:text-base font-semibold text-gray-900 mb-2 sm:mb-3">{{ t('documentation.glossary.reproductionRate.references') }}</h4>
+                <div class="space-y-2 sm:space-y-3">
+                  <div class="bg-gray-50 rounded-lg p-3 sm:p-4 border-l-4 border-indigo-300">
+                    <p class="font-semibold text-gray-900 text-xs sm:text-sm">Cori, A., Ferguson, N. M., Fraser, C., & Cauchemez, S. (2013)</p>
                     <p class="text-indigo-700 font-medium text-xs">American Journal of Epidemiology</p>
                     <p class="text-gray-600 text-xs mt-1">A new framework and software to estimate time-varying reproduction numbers during epidemics. 178(9), 1505-1512.</p>
-                    <p class="text-blue-600 text-xs mt-1">
+                    <p class="text-blue-600 text-xs mt-1 break-all">
                       DOI: <a href="https://doi.org/10.1093/aje/kwt133" target="_blank" class="hover:underline">10.1093/aje/kwt133</a>
                     </p>
                   </div>
-                  <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-indigo-300">
-                    <p class="font-semibold text-gray-900 text-sm">Thompson, R. N., et al. (2019)</p>
+                  <div class="bg-gray-50 rounded-lg p-3 sm:p-4 border-l-4 border-indigo-300">
+                    <p class="font-semibold text-gray-900 text-xs sm:text-sm">Thompson, R. N., et al. (2019)</p>
                     <p class="text-indigo-700 font-medium text-xs">Epidemics</p>
                     <p class="text-gray-600 text-xs mt-1">Improved inference of time-varying reproduction numbers during infectious disease outbreaks. 29, 100356.</p>
-                    <p class="text-blue-600 text-xs mt-1">
+                    <p class="text-blue-600 text-xs mt-1 break-all">
                       DOI: <a href="https://doi.org/10.1016/j.epidem.2019.100356" target="_blank" class="hover:underline">10.1016/j.epidem.2019.100356</a>
                     </p>
                   </div>
diff --git a/src/components/documentation/OverviewSection.vue b/src/components/documentation/OverviewSection.vue
index 6bc5f26..8318919 100644
--- a/src/components/documentation/OverviewSection.vue
+++ b/src/components/documentation/OverviewSection.vue
@@ -1,56 +1,56 @@
 <template>
-  <section v-show="isActive" id="overview" class="mb-16">
-    <div class="mb-8">
-      <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ t('documentation.overview.title') }}</h1>
-      <p class="text-xl text-gray-600 mb-6">
+  <section v-show="isActive" id="overview" class="mb-12 md:mb-16">
+    <div class="mb-6 md:mb-8">
+      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-3 md:mb-4">{{ t('documentation.overview.title') }}</h1>
+      <p class="text-base sm:text-lg lg:text-xl text-gray-600 mb-4 md:mb-6 leading-relaxed">
         {{ t('documentation.overview.subtitle') }}
       </p>
       
       <!-- API Status -->
-      <div class="inline-flex items-center px-4 py-2 bg-green-50 border border-green-200 rounded-full text-green-700 mb-8">
+      <div class="inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 bg-green-50 border border-green-200 rounded-full text-green-700 mb-6 md:mb-8">
         <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
-        <span class="text-sm font-medium">{{ t('documentation.overview.apiStatus') }}</span>
+        <span class="text-xs sm:text-sm font-medium">{{ t('documentation.overview.apiStatus') }}</span>
       </div>
     </div>
 
     <!-- Getting Started Card -->
-    <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
-      <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-8 py-6">
-        <h2 class="text-2xl font-bold text-white mb-2">{{ t('documentation.overview.gettingStarted') }}</h2>
-        <p class="text-blue-100">{{ t('documentation.overview.gettingStartedSub') }}</p>
+    <div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
+      <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 sm:px-6 lg:px-8 py-4 sm:py-6">
+        <h2 class="text-lg sm:text-xl lg:text-2xl font-bold text-white mb-1 sm:mb-2">{{ t('documentation.overview.gettingStarted') }}</h2>
+        <p class="text-sm sm:text-base text-blue-100">{{ t('documentation.overview.gettingStartedSub') }}</p>
       </div>
       
-      <div class="p-8">
-        <div class="grid md:grid-cols-2 gap-8">
+      <div class="p-4 sm:p-6 lg:p-8">
+        <div class="grid md:grid-cols-2 gap-6 md:gap-8">
           <div>
-            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.overview.baseUrl') }}</h3>
-            <div class="bg-gray-50 rounded-lg p-4 font-mono text-sm border">
-              <code class="text-blue-600">https://pico-api.banuacoder.com/api/v1</code>
+            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4">{{ t('documentation.overview.baseUrl') }}</h3>
+            <div class="bg-gray-50 rounded-lg p-3 sm:p-4 font-mono text-xs sm:text-sm border overflow-x-auto">
+              <code class="text-blue-600 whitespace-nowrap">https://pico-api.banuacoder.com/api/v1</code>
             </div>
             
-            <h3 class="text-xl font-semibold text-gray-900 mt-6 mb-4">{{ t('documentation.overview.contentType') }}</h3>
-            <div class="bg-gray-50 rounded-lg p-4 font-mono text-sm border">
+            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mt-4 sm:mt-6 mb-3 sm:mb-4">{{ t('documentation.overview.contentType') }}</h3>
+            <div class="bg-gray-50 rounded-lg p-3 sm:p-4 font-mono text-xs sm:text-sm border">
               <code class="text-green-600">application/json</code>
             </div>
           </div>
           
           <div>
-            <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.overview.quickExample') }}</h3>
-            <div class="bg-gray-900 rounded-lg p-4 font-mono text-sm">
-              <div class="text-green-400 mb-2">
-                <span class="text-gray-500">$</span> curl -X GET \\
+            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4">{{ t('documentation.overview.quickExample') }}</h3>
+            <div class="bg-gray-900 rounded-lg p-3 sm:p-4 font-mono text-xs sm:text-sm overflow-x-auto">
+              <div class="text-green-400 mb-2 whitespace-nowrap">
+                <span class="text-gray-500">$</span> curl -X GET \
               </div>
-              <div class="text-blue-300 ml-4">
+              <div class="text-blue-300 ml-2 sm:ml-4 whitespace-nowrap">
                 "https://pico-api.banuacoder.com/api/v1/national/latest"
               </div>
             </div>
             
-            <div class="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
+            <div class="mt-3 sm:mt-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg">
               <div class="flex items-center text-green-800">
-                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
-                <span class="text-sm font-medium">{{ t('documentation.overview.noAuthRequired') }}</span>
+                <span class="text-xs sm:text-sm font-medium">{{ t('documentation.overview.noAuthRequired') }}</span>
               </div>
             </div>
           </div>
diff --git a/src/views/Documentation.vue b/src/views/Documentation.vue
index 292eed8..957d2bd 100644
--- a/src/views/Documentation.vue
+++ b/src/views/Documentation.vue
@@ -5,12 +5,12 @@
 
     <div class="flex min-h-screen pt-16">
       <!-- Sidebar -->
-      <aside class="w-64 bg-white shadow-lg border-r border-gray-200 fixed left-0 top-16 bottom-0 overflow-y-auto z-30 transform transition-transform duration-300 ease-in-out lg:translate-x-0" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
-        <div class="p-6">
+      <aside class="w-72 sm:w-64 bg-white shadow-lg border-r border-gray-200 fixed left-0 top-16 bottom-0 overflow-y-auto z-30 transform transition-transform duration-300 ease-in-out lg:translate-x-0" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
+        <div class="p-4 sm:p-6">
           <!-- Header -->
-          <div class="mb-8">
-            <h2 class="text-xl font-bold text-gray-900 mb-2">API Documentation</h2>
-            <p class="text-sm text-gray-600">PICO SulTeng COVID-19 API</p>
+          <div class="mb-6 sm:mb-8">
+            <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-2">API Documentation</h2>
+            <p class="text-xs sm:text-sm text-gray-600">PICO SulTeng COVID-19 API</p>
           </div>
 
           <!-- Navigation Menu -->
@@ -207,7 +207,7 @@
           </button>
         </div>
 
-        <div class="p-4 sm:p-6 lg:p-8">
+        <div class="p-3 sm:p-4 md:p-6 lg:p-8">
           <!-- Dynamic Section Components -->
           <OverviewSection :isActive="activeSection === 'overview'" />
           <RootEndpointSection :isActive="activeSection === 'root-endpoint'" />
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 700936d..bfce0e9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,7 +4,7 @@
     <Navigation />
 
     <!-- Hero Section -->
-    <div class="relative overflow-hidden min-h-screen flex items-center pt-16">
+    <div class="relative overflow-hidden min-h-screen flex items-center pt-16 pb-8">
       <!-- Background Pattern -->
       <div class="absolute inset-0 overflow-hidden">
         <!-- Gradient mesh background -->
@@ -38,12 +38,12 @@
         <div class="absolute bottom-20 left-20 w-10 h-10 bg-cyan-500/20 rounded-lg rotate-45 animate-bounce animation-delay-3000"></div>
       </div>
       
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div class="grid lg:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center">
+      <div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 relative z-10">
+        <div class="grid lg:grid-cols-2 gap-6 md:gap-12 lg:gap-16 items-center">
           <!-- Left Content -->
           <div class="text-center lg:text-left">
             <!-- Badge -->
-            <div class="inline-flex items-center px-4 py-2 mb-8 text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-full">
+            <div class="inline-flex items-center px-3 py-1.5 mb-6 text-xs sm:text-sm font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-full">
               <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                 <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
               </svg>
@@ -51,28 +51,28 @@
             </div>
             
             <!-- Main heading with improved typography -->
-            <h1 class="text-3xl sm:text-4xl md:text-5xl xl:text-6xl font-extrabold tracking-tight mb-6 md:mb-8 leading-[1.1]">
+            <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight mb-4 md:mb-6 leading-[1.15]">
               <span class="block">
                 <span class="gradient-text inline-block animate-fade-in-up">{{ t('hero.title').split(' ')[0] }}</span>
-                <span class="text-gray-800 inline-block animate-fade-in-up animation-delay-200 ml-2">{{ t('hero.title').split(' ')[1] }}</span>
+                <span class="text-gray-800 inline-block animate-fade-in-up animation-delay-200 ml-1 sm:ml-2">{{ t('hero.title').split(' ')[1] }}</span>
               </span>
-              <span class="block text-xl sm:text-2xl md:text-3xl xl:text-4xl text-gray-600 mt-2 md:mt-3 font-bold animate-fade-in-up animation-delay-400">{{ t('hero.subtitle') }}</span>
+              <span class="block text-base sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl text-gray-600 mt-1 md:mt-2 font-bold animate-fade-in-up animation-delay-400">{{ t('hero.subtitle') }}</span>
             </h1>
             
             <!-- Enhanced subtitle with better typography -->
-            <div class="space-y-3 mb-8 md:mb-10 animate-fade-in-up animation-delay-600">
-              <p class="text-base sm:text-lg md:text-xl text-gray-700 font-medium leading-relaxed max-w-xl lg:max-w-none">
+            <div class="space-y-2 sm:space-y-3 mb-6 md:mb-8 animate-fade-in-up animation-delay-600">
+              <p class="text-sm sm:text-base md:text-lg lg:text-xl text-gray-700 font-medium leading-relaxed max-w-xl lg:max-w-none">
                 <span v-html="t('hero.description', { region: `<span class='font-bold text-blue-600'>${t('common.centralSulawesi')}</span>` })"></span>
                 <span class="block mt-1" v-html="t('hero.descriptionSub', { context: `<span class='font-semibold text-indigo-600'>${t('common.nationalContext')}</span>` })"></span>
               </p>
-              <p class="text-sm sm:text-base md:text-lg text-gray-600 leading-relaxed">
+              <p class="text-xs sm:text-sm md:text-base lg:text-lg text-gray-600 leading-relaxed">
                 {{ t('hero.tagline') }}
               </p>
             </div>
             
             <!-- CTA Buttons -->
-            <div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start animate-fade-in-up animation-delay-800">
-              <router-link to="/docs" class="group bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
+            <div class="flex flex-col sm:flex-row gap-2 sm:gap-3 justify-center lg:justify-start animate-fade-in-up animation-delay-800">
+              <router-link to="/docs" class="group bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-sm sm:text-base">
                 <span class="flex items-center justify-center">
                   {{ t('hero.getStarted') }}
                   <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -80,7 +80,7 @@
                   </svg>
                 </span>
               </router-link>
-              <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="group border-2 border-gray-300 hover:border-blue-600 text-gray-700 hover:text-blue-600 px-6 py-3 rounded-xl font-semibold transition-all duration-300 backdrop-blur-sm bg-white/70 hover:bg-white/90 shadow-lg hover:shadow-xl transform hover:-translate-y-1">
+              <a href="https://pico-api.banuacoder.com/swagger/index.html" target="_blank" class="group border-2 border-gray-300 hover:border-blue-600 text-gray-700 hover:text-blue-600 px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-300 backdrop-blur-sm bg-white/70 hover:bg-white/90 shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-sm sm:text-base">
                 <span class="flex items-center justify-center">
                   <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
@@ -150,56 +150,56 @@
                 </div>
               
                 <!-- Code Content -->
-                <div class="p-3 sm:p-4 font-mono text-xs sm:text-sm relative bg-gray-900/50">
+                <div class="p-2 sm:p-3 md:p-4 font-mono text-xs relative bg-gray-900/50 overflow-x-auto">
                 <!-- Request -->
-                <div class="mb-6">
-                  <div class="text-green-400 mb-2 typing-animation">
+                <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>
                 </div>
                 
                 <!-- Response -->
-                <div class="text-gray-300 leading-relaxed response-animation opacity-0">
+                <div class="text-gray-300 leading-tight sm:leading-relaxed response-animation opacity-0 overflow-x-auto">
                   <div class="text-blue-400">{</div>
-                  <div class="pl-4">
+                  <div class="pl-2 sm:pl-4">
                     <span class="text-yellow-400">"status"</span>: <span class="text-green-300">"success"</span>,
                   </div>
-                  <div class="pl-4">
+                  <div class="pl-2 sm:pl-4">
                     <span class="text-yellow-400">"data"</span>: <div class="text-blue-400 inline">{</div>
                   </div>
-                  <div class="pl-8">
+                  <div class="pl-4 sm:pl-8">
                     <span class="text-yellow-400">"day"</span>: <span class="text-orange-400">1247</span>,
                   </div>
-                  <div class="pl-8">
+                  <div class="pl-4 sm:pl-8">
                     <span class="text-yellow-400">"date"</span>: <span class="text-green-300">"2024-09-07T00:00:00Z"</span>,
                   </div>
-                  <div class="pl-8">
+                  <div class="pl-4 sm:pl-8">
                     <span class="text-yellow-400">"daily"</span>: <div class="text-blue-400 inline">{</div>
                   </div>
-                  <div class="pl-12">
+                  <div class="pl-6 sm:pl-12">
                     <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">127</span>,
                   </div>
-                  <div class="pl-12">
+                  <div class="pl-6 sm:pl-12">
                     <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">98</span>,
                   </div>
-                  <div class="pl-12">
+                  <div class="pl-6 sm:pl-12">
                     <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">2</span>
                   </div>
-                  <div class="pl-8 text-blue-400">},</div>
-                  <div class="pl-8">
+                  <div class="pl-4 sm:pl-8 text-blue-400">},</div>
+                  <div class="pl-4 sm:pl-8">
                     <span class="text-yellow-400">"cumulative"</span>: <div class="text-blue-400 inline">{</div>
                   </div>
-                  <div class="pl-12">
+                  <div class="pl-6 sm:pl-12">
                     <span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">6754298</span>,
                   </div>
-                  <div class="pl-12">
+                  <div class="pl-6 sm:pl-12">
                     <span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">6589567</span>,
                   </div>
-                  <div class="pl-12">
+                  <div class="pl-6 sm:pl-12">
                     <span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">161031</span>
                   </div>
-                  <div class="pl-8 text-blue-400">}</div>
-                  <div class="pl-4 text-blue-400">}</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="text-blue-400">}</div>
                   
                   <!-- Typing cursor -->
@@ -229,7 +229,7 @@
         </div>
         
         <!-- Bento Grid -->
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 md:gap-6 max-w-6xl mx-auto">
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 sm:gap-4 md:gap-6 max-w-6xl mx-auto">
           <!-- Large Feature Card -->
           <div class="sm:col-span-2 md:col-span-2 lg:col-span-3 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-6 md:p-8 rounded-3xl border border-blue-100/50 hover:border-blue-200/70 transition-all duration-300 hover:shadow-lg group">
             <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">

From 087696ba13d559f18c789bc1fbd270b249251a2f Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 14:41:35 +0700
Subject: [PATCH 2/3] fix: improve Getting Started section mobile layout to
 prevent cropping

- Stack grid columns on mobile (grid-cols-1)
- Reduce text sizes further: text-base for headings, text-[10px] for code
- Smaller padding on mobile: p-2 instead of p-3
- Use break-all for long URLs to prevent horizontal overflow
- Adjust icon sizes to be smaller on mobile (w-3 h-3)
- Better spacing between sections with reduced margins
---
 .../documentation/OverviewSection.vue         | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/documentation/OverviewSection.vue b/src/components/documentation/OverviewSection.vue
index 8318919..bfdb075 100644
--- a/src/components/documentation/OverviewSection.vue
+++ b/src/components/documentation/OverviewSection.vue
@@ -20,37 +20,37 @@
         <p class="text-sm sm:text-base text-blue-100">{{ t('documentation.overview.gettingStartedSub') }}</p>
       </div>
       
-      <div class="p-4 sm:p-6 lg:p-8">
-        <div class="grid md:grid-cols-2 gap-6 md:gap-8">
+      <div class="p-3 sm:p-4 md:p-6 lg:p-8">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 md:gap-8">
           <div>
-            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4">{{ t('documentation.overview.baseUrl') }}</h3>
-            <div class="bg-gray-50 rounded-lg p-3 sm:p-4 font-mono text-xs sm:text-sm border overflow-x-auto">
-              <code class="text-blue-600 whitespace-nowrap">https://pico-api.banuacoder.com/api/v1</code>
+            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.baseUrl') }}</h3>
+            <div class="bg-gray-50 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm border overflow-x-auto">
+              <code class="text-blue-600 whitespace-nowrap block">https://pico-api.banuacoder.com/api/v1</code>
             </div>
             
-            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mt-4 sm:mt-6 mb-3 sm:mb-4">{{ t('documentation.overview.contentType') }}</h3>
-            <div class="bg-gray-50 rounded-lg p-3 sm:p-4 font-mono text-xs sm:text-sm border">
+            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mt-3 sm:mt-4 md:mt-6 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.contentType') }}</h3>
+            <div class="bg-gray-50 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm border">
               <code class="text-green-600">application/json</code>
             </div>
           </div>
           
           <div>
-            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 mb-3 sm:mb-4">{{ t('documentation.overview.quickExample') }}</h3>
-            <div class="bg-gray-900 rounded-lg p-3 sm:p-4 font-mono text-xs sm:text-sm overflow-x-auto">
-              <div class="text-green-400 mb-2 whitespace-nowrap">
+            <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.quickExample') }}</h3>
+            <div class="bg-gray-900 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm overflow-x-auto">
+              <div class="text-green-400 mb-1 sm:mb-2">
                 <span class="text-gray-500">$</span> curl -X GET \
               </div>
-              <div class="text-blue-300 ml-2 sm:ml-4 whitespace-nowrap">
+              <div class="text-blue-300 ml-2 sm:ml-3 md:ml-4 break-all">
                 "https://pico-api.banuacoder.com/api/v1/national/latest"
               </div>
             </div>
             
-            <div class="mt-3 sm:mt-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg">
-              <div class="flex items-center text-green-800">
-                <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <div class="mt-2 sm:mt-3 md:mt-4 p-2 sm:p-3 md:p-4 bg-green-50 border border-green-200 rounded-lg">
+              <div class="flex items-start sm:items-center text-green-800">
+                <svg class="w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 mr-1.5 sm:mr-2 flex-shrink-0 mt-0.5 sm:mt-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                 </svg>
-                <span class="text-xs sm:text-sm font-medium">{{ t('documentation.overview.noAuthRequired') }}</span>
+                <span class="text-[11px] sm:text-xs md:text-sm font-medium">{{ t('documentation.overview.noAuthRequired') }}</span>
               </div>
             </div>
           </div>

From 45f87aa8f5fe1da3139f74d69cd3d1c44a7c4ae3 Mon Sep 17 00:00:00 2001
From: Fajrian Aidil Pratama <fajrianaidilp@gmail.com>
Date: Thu, 11 Sep 2025 15:07:29 +0700
Subject: [PATCH 3/3] feat: implement syntax highlighting with Prism.js for API
 documentation

- Add CodeBlock component with copy-to-clipboard functionality
- Install Prism.js with support for bash, JSON, JavaScript, TypeScript, Python, Go
- Update all API endpoint sections with comprehensive code examples:
  - National Latest: cURL request and JSON response examples
  - National Historical: basic and paginated requests with array response
  - Health Check: health endpoint request and response
  - Root Endpoint: API overview request and response
  - Provinces: provinces list with latest case data structure
  - Province Cases: enhanced examples with ODP/PDP tracking
  - Error Handling: error response JSON with proper structure
- Fix reproduction rate structure to use 'value' instead of 'mean'
- Correct provinces response structure based on swagger.yaml specification
- Add proper ODP/PDP (observation/supervision) data tracking
- Ensure all examples match actual API models from Go backend
- Responsive design for mobile devices with proper syntax highlighting
---
 package.json                                  |   5 +-
 pnpm-workspace.yaml                           |   2 +
 src/components/CodeBlock.vue                  | 195 ++++++++++++++++++
 .../documentation/ErrorHandlingSection.vue    |  29 +--
 .../documentation/HealthCheckSection.vue      |  36 ++++
 .../NationalHistoricalSection.vue             |  96 ++++++++-
 .../documentation/NationalLatestSection.vue   |  57 +++++
 .../documentation/OverviewSection.vue         |  17 +-
 .../documentation/ProvinceCasesSection.vue    | 140 ++++++++++++-
 .../documentation/ProvincesSection.vue        | 138 +++++++++++++
 .../documentation/RootEndpointSection.vue     |  44 ++++
 11 files changed, 727 insertions(+), 32 deletions(-)
 create mode 100644 pnpm-workspace.yaml
 create mode 100644 src/components/CodeBlock.vue

diff --git a/package.json b/package.json
index 92b8de3..15df75d 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "type": "module",
-  "packageManager": "pnpm@10.13.1",
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/typography": "^0.5.16",
@@ -26,10 +26,13 @@
     "vue-tsc": "^3.0.6"
   },
   "dependencies": {
+    "@types/prismjs": "^1.26.5",
     "aos": "^2.3.4",
     "katex": "^0.16.22",
+    "prismjs": "^1.30.0",
     "vue": "^3.5.21",
     "vue-i18n": "9",
+    "vue-prism-component": "^2.0.0",
     "vue-router": "^4.5.1"
   }
 }
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..d7aedff
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+overrides:
+  vite@>=7.1.0 <=7.1.4: '>=7.1.5'
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
new file mode 100644
index 0000000..ce02e8c
--- /dev/null
+++ b/src/components/CodeBlock.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="code-block-wrapper">
+    <div v-if="title || language" class="code-header">
+      <span v-if="title" class="code-title">{{ title }}</span>
+      <span v-if="language" class="code-language">{{ language }}</span>
+      <button 
+        @click="copyToClipboard" 
+        class="copy-button"
+        :class="{ 'copied': copied }"
+        :title="copied ? 'Copied!' : 'Copy code'"
+      >
+        <svg v-if="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+        </svg>
+        <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+        </svg>
+      </button>
+    </div>
+    <div class="code-container" :class="`language-${language}`">
+      <pre><code ref="codeElement" :class="`language-${language}`">{{ code }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import Prism from 'prismjs'
+
+// Import commonly used languages
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-go'
+
+// Import Prism themes (we'll use a custom theme)
+import 'prismjs/themes/prism-tomorrow.css'
+
+interface Props {
+  code: string
+  language?: string
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  language: 'bash'
+})
+
+const codeElement = ref<HTMLElement>()
+const copied = ref(false)
+
+const highlightCode = () => {
+  if (codeElement.value) {
+    Prism.highlightElement(codeElement.value)
+  }
+}
+
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(props.code)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy:', err)
+  }
+}
+
+onMounted(() => {
+  highlightCode()
+})
+
+watch(() => props.code, () => {
+  highlightCode()
+})
+</script>
+
+<style scoped>
+.code-block-wrapper {
+  @apply rounded-lg overflow-hidden border border-gray-700 bg-gray-900 my-4;
+}
+
+.code-header {
+  @apply flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700;
+}
+
+.code-title {
+  @apply text-sm font-medium text-gray-300;
+}
+
+.code-language {
+  @apply text-xs font-mono text-gray-500 ml-auto mr-2;
+}
+
+.copy-button {
+  @apply p-1.5 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all duration-200;
+}
+
+.copy-button.copied {
+  @apply bg-green-600 text-white;
+}
+
+.code-container {
+  @apply relative overflow-x-auto;
+}
+
+.code-container pre {
+  @apply m-0 p-4 text-xs sm:text-sm font-mono;
+  background: transparent !important;
+}
+
+.code-container code {
+  @apply text-gray-300;
+  background: transparent !important;
+  font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+}
+
+/* Customize syntax highlighting colors for better contrast */
+:deep(.token.comment),
+:deep(.token.prolog),
+:deep(.token.doctype),
+:deep(.token.cdata) {
+  @apply text-gray-500;
+}
+
+:deep(.token.punctuation) {
+  @apply text-gray-400;
+}
+
+:deep(.token.property),
+:deep(.token.tag),
+:deep(.token.boolean),
+:deep(.token.number),
+:deep(.token.constant),
+:deep(.token.symbol),
+:deep(.token.deleted) {
+  @apply text-red-400;
+}
+
+:deep(.token.selector),
+:deep(.token.attr-name),
+:deep(.token.string),
+:deep(.token.char),
+:deep(.token.builtin),
+:deep(.token.inserted) {
+  @apply text-green-400;
+}
+
+:deep(.token.operator),
+:deep(.token.entity),
+:deep(.token.url),
+:deep(.language-css .token.string),
+:deep(.style .token.string) {
+  @apply text-blue-400;
+}
+
+:deep(.token.atrule),
+:deep(.token.attr-value),
+:deep(.token.keyword) {
+  @apply text-purple-400;
+}
+
+:deep(.token.function),
+:deep(.token.class-name) {
+  @apply text-yellow-400;
+}
+
+:deep(.token.regex),
+:deep(.token.important),
+:deep(.token.variable) {
+  @apply text-orange-400;
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 640px) {
+  .code-container pre {
+    @apply text-[10px] p-3;
+  }
+  
+  .code-header {
+    @apply px-3 py-1.5;
+  }
+  
+  .code-title {
+    @apply text-xs;
+  }
+  
+  .copy-button {
+    @apply p-1;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/documentation/ErrorHandlingSection.vue b/src/components/documentation/ErrorHandlingSection.vue
index 35eb7ca..ea23c4a 100644
--- a/src/components/documentation/ErrorHandlingSection.vue
+++ b/src/components/documentation/ErrorHandlingSection.vue
@@ -65,20 +65,11 @@
             <div class="grid lg:grid-cols-2 gap-6">
               <div>
                 <h4 class="font-semibold text-gray-900 mb-3">{{ t('documentation.errorHandling.errorResponse') }}</h4>
-                <div class="bg-gray-900 rounded-lg p-4 font-mono text-sm">
-                  <div class="text-blue-400">{</div>
-                  <div class="ml-2">
-                    <div><span class="text-yellow-400">"status"</span>: <span class="text-red-300">"error"</span>,</div>
-                    <div><span class="text-yellow-400">"error"</span>: {</div>
-                    <div class="ml-2">
-                      <div><span class="text-yellow-400">"code"</span>: <span class="text-orange-400">400</span>,</div>
-                      <div><span class="text-yellow-400">"message"</span>: <span class="text-green-300">"Invalid page parameter"</span>,</div>
-                      <div><span class="text-yellow-400">"details"</span>: <span class="text-green-300">"Page must be a positive integer"</span></div>
-                    </div>
-                    <div>}</div>
-                  </div>
-                  <div class="text-blue-400">}</div>
-                </div>
+                <CodeBlock 
+                  :code="errorResponseExample"
+                  language="json"
+                  title="Error Response"
+                />
               </div>
               
               <div>
@@ -112,6 +103,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -119,4 +111,13 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const errorResponseExample = `{
+  "status": "error",
+  "error": {
+    "code": 400,
+    "message": "Invalid page parameter",
+    "details": "Page must be a positive integer"
+  }
+}`
 </script>
diff --git a/src/components/documentation/HealthCheckSection.vue b/src/components/documentation/HealthCheckSection.vue
index 3abfd99..ce24783 100644
--- a/src/components/documentation/HealthCheckSection.vue
+++ b/src/components/documentation/HealthCheckSection.vue
@@ -91,6 +91,27 @@
           </div>
         </div>
 
+        <!-- Code Examples -->
+        <div class="mb-8">
+          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <div class="grid lg:grid-cols-2 gap-6">
+            <div>
+              <CodeBlock 
+                :code="curlExample"
+                language="bash"
+                title="cURL Request"
+              />
+            </div>
+            <div>
+              <CodeBlock 
+                :code="responseExample"
+                language="json"
+                title="Response"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- Try It Button -->
         <div class="text-center">
           <a 
@@ -111,6 +132,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -118,4 +140,18 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const curlExample = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/health"`
+
+const responseExample = `{
+  "status": "healthy",
+  "timestamp": "2024-09-07T10:30:45Z",
+  "services": {
+    "database": "connected",
+    "cache": "active"
+  },
+  "version": "1.0.0",
+  "uptime": "72h 15m 30s"
+}`
 </script>
diff --git a/src/components/documentation/NationalHistoricalSection.vue b/src/components/documentation/NationalHistoricalSection.vue
index 751de97..6bdc57e 100644
--- a/src/components/documentation/NationalHistoricalSection.vue
+++ b/src/components/documentation/NationalHistoricalSection.vue
@@ -209,13 +209,41 @@
           </div>
         </div>
 
+        <!-- Code Examples -->
+        <div class="mb-8">
+          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Requests</h3>
+          <div class="grid lg:grid-cols-2 gap-6 mb-6">
+            <div>
+              <CodeBlock 
+                :code="basicExample"
+                language="bash"
+                title="Basic Request"
+              />
+            </div>
+            <div>
+              <CodeBlock 
+                :code="paginatedExample"
+                language="bash"
+                title="With Pagination & Date Filter"
+              />
+            </div>
+          </div>
+          <div>
+            <CodeBlock 
+              :code="responseExample"
+              language="json"
+              title="Response (Array)"
+            />
+          </div>
+        </div>
+
         <!-- Try It Button -->
         <div class="text-center">
           <a href="https://pico-api.banuacoder.com/swagger/index.html" 
              target="_blank" 
              class="inline-flex items-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors shadow-lg hover:shadow-xl">
             <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
             </svg>
             {{ t('documentation.nationalHistorical.testInBrowser') }}
           </a>
@@ -227,6 +255,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -234,4 +263,69 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const basicExample = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/national/historical"`
+
+const paginatedExample = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/national/historical?limit=10&offset=0&start_date=2024-01-01&end_date=2024-01-31"`
+
+const responseExample = `[
+  {
+    "date": "2024-01-01T00:00:00Z",
+    "day": 1218,
+    "daily": {
+      "positive": 85,
+      "recovered": 142,
+      "deceased": 1
+    },
+    "cumulative": {
+      "positive": 6753956,
+      "recovered": 6589234,
+      "deceased": 161025,
+      "active": 3697
+    },
+    "statistics": {
+      "percentages": {
+        "positive": 100.0,
+        "recovered": 97.56,
+        "deceased": 2.38,
+        "active": 0.05
+      },
+      "reproduction_rate": {
+        "value": 0.82,
+        "lower_bound": 0.72,
+        "upper_bound": 0.92
+      }
+    }
+  },
+  {
+    "date": "2024-01-02T00:00:00Z",
+    "day": 1219,
+    "daily": {
+      "positive": 98,
+      "recovered": 156,
+      "deceased": 2
+    },
+    "cumulative": {
+      "positive": 6754054,
+      "recovered": 6589390,
+      "deceased": 161027,
+      "active": 3637
+    },
+    "statistics": {
+      "percentages": {
+        "positive": 100.0,
+        "recovered": 97.56,
+        "deceased": 2.38,
+        "active": 0.05
+      },
+      "reproduction_rate": {
+        "value": 0.84,
+        "lower_bound": 0.74,
+        "upper_bound": 0.94
+      }
+    }
+  }
+]`
 </script>
diff --git a/src/components/documentation/NationalLatestSection.vue b/src/components/documentation/NationalLatestSection.vue
index 0628553..b3d97d0 100644
--- a/src/components/documentation/NationalLatestSection.vue
+++ b/src/components/documentation/NationalLatestSection.vue
@@ -87,6 +87,27 @@
           </div>
         </div>
 
+        <!-- Code Examples -->
+        <div class="mb-8">
+          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <div class="grid lg:grid-cols-2 gap-6">
+            <div>
+              <CodeBlock 
+                :code="curlExample"
+                language="bash"
+                title="cURL Request"
+              />
+            </div>
+            <div>
+              <CodeBlock 
+                :code="responseExample"
+                language="json"
+                title="Response"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- Try It Button -->
         <div class="text-center">
           <a 
@@ -107,6 +128,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -114,4 +136,39 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const curlExample = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/national/latest"`
+
+const responseExample = `{
+  "status": "success",
+  "data": {
+    "day": 1247,
+    "date": "2024-09-07T00:00:00Z",
+    "daily": {
+      "positive": 127,
+      "recovered": 98,
+      "deceased": 2
+    },
+    "cumulative": {
+      "positive": 6754298,
+      "recovered": 6589567,
+      "deceased": 161031,
+      "active": 3700
+    },
+    "statistics": {
+      "percentages": {
+        "positive": 100.0,
+        "recovered": 97.56,
+        "deceased": 2.38,
+        "active": 0.05
+      },
+      "reproduction_rate": {
+        "value": 0.85,
+        "lower_bound": 0.75,
+        "upper_bound": 0.95
+      }
+    }
+  }
+}`
 </script>
diff --git a/src/components/documentation/OverviewSection.vue b/src/components/documentation/OverviewSection.vue
index bfdb075..6b4364f 100644
--- a/src/components/documentation/OverviewSection.vue
+++ b/src/components/documentation/OverviewSection.vue
@@ -36,14 +36,11 @@
           
           <div>
             <h3 class="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mb-2 sm:mb-3 md:mb-4">{{ t('documentation.overview.quickExample') }}</h3>
-            <div class="bg-gray-900 rounded-lg p-2 sm:p-3 md:p-4 font-mono text-[10px] sm:text-xs md:text-sm overflow-x-auto">
-              <div class="text-green-400 mb-1 sm:mb-2">
-                <span class="text-gray-500">$</span> curl -X GET \
-              </div>
-              <div class="text-blue-300 ml-2 sm:ml-3 md:ml-4 break-all">
-                "https://pico-api.banuacoder.com/api/v1/national/latest"
-              </div>
-            </div>
+            <CodeBlock 
+              :code="quickExampleCode"
+              language="bash"
+              title="cURL Request"
+            />
             
             <div class="mt-2 sm:mt-3 md:mt-4 p-2 sm:p-3 md:p-4 bg-green-50 border border-green-200 rounded-lg">
               <div class="flex items-start sm:items-center text-green-800">
@@ -62,6 +59,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -69,4 +67,7 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const quickExampleCode = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/national/latest"`
 </script>
diff --git a/src/components/documentation/ProvinceCasesSection.vue b/src/components/documentation/ProvinceCasesSection.vue
index d03efc8..5534a51 100644
--- a/src/components/documentation/ProvinceCasesSection.vue
+++ b/src/components/documentation/ProvinceCasesSection.vue
@@ -16,14 +16,16 @@
           <div class="bg-gray-50 rounded-xl p-6">
             <h3 class="text-xl font-semibold text-gray-900 mb-4">{{ t('documentation.provinceCases.endpoints') }}</h3>
             <div class="space-y-3">
-              <div class="bg-gray-900 rounded-lg p-3 font-mono text-sm">
-                <span class="text-green-400">GET</span> 
-                <span class="text-white">/provinces/cases</span>
-              </div>
-              <div class="bg-gray-900 rounded-lg p-3 font-mono text-sm">
-                <span class="text-green-400">GET</span> 
-                <span class="text-white">/provinces/{provinceId}/cases</span>
-              </div>
+              <CodeBlock 
+                :code="provinceCasesEndpoint"
+                language="bash"
+                title="All Provinces"
+              />
+              <CodeBlock 
+                :code="specificProvinceEndpoint"
+                language="bash"
+                title="Specific Province"
+              />
             </div>
           </div>
           
@@ -222,6 +224,16 @@
           </div>
         </div>
 
+        <!-- Response Example -->
+        <div class="mb-8">
+          <h3 class="text-xl font-semibold text-gray-900 mb-4">Response Example</h3>
+          <CodeBlock 
+            :code="provinceCasesResponse"
+            language="json"
+            title="Province Cases Response (Array)"
+          />
+        </div>
+
         <!-- Try It Button -->
         <div class="text-center">
           <a 
@@ -243,6 +255,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -252,4 +265,115 @@ defineProps<Props>()
 const { t, tm } = useI18n()
 
 const featuresList = computed(() => tm('documentation.provinceCases.featuresList') as string[])
+
+const provinceCasesEndpoint = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/provinces/cases?limit=10"`
+
+const specificProvinceEndpoint = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/provinces/72/cases?limit=5&start_date=2024-01-01"`
+
+const provinceCasesResponse = `[
+  {
+    "date": "2024-09-07T00:00:00Z",
+    "day": 1247,
+    "province": {
+      "id": "72",
+      "name": "Sulawesi Tengah"
+    },
+    "daily": {
+      "positive": 12,
+      "recovered": 15,
+      "deceased": 0,
+      "active": -3,
+      "odp": {
+        "active": 5,
+        "finished": 8
+      },
+      "pdp": {
+        "active": 2,
+        "finished": 3
+      }
+    },
+    "cumulative": {
+      "positive": 89543,
+      "recovered": 87234,
+      "deceased": 1876,
+      "active": 433,
+      "odp": {
+        "active": 25,
+        "finished": 1250,
+        "total": 1275
+      },
+      "pdp": {
+        "active": 8,
+        "finished": 567,
+        "total": 575
+      }
+    },
+    "statistics": {
+      "percentages": {
+        "positive": 100.0,
+        "recovered": 97.42,
+        "deceased": 2.09,
+        "active": 0.48
+      },
+      "reproduction_rate": {
+        "value": 0.78,
+        "lower_bound": 0.68,
+        "upper_bound": 0.88
+      }
+    }
+  },
+  {
+    "date": "2024-09-06T00:00:00Z",
+    "day": 1246,
+    "province": {
+      "id": "72", 
+      "name": "Sulawesi Tengah"
+    },
+    "daily": {
+      "positive": 8,
+      "recovered": 12,
+      "deceased": 1,
+      "active": -5,
+      "odp": {
+        "active": 3,
+        "finished": 7
+      },
+      "pdp": {
+        "active": 1,
+        "finished": 4
+      }
+    },
+    "cumulative": {
+      "positive": 89531,
+      "recovered": 87219,
+      "deceased": 1876,
+      "active": 436,
+      "odp": {
+        "active": 20,
+        "finished": 1242,
+        "total": 1262
+      },
+      "pdp": {
+        "active": 6,
+        "finished": 564,
+        "total": 570
+      }
+    },
+    "statistics": {
+      "percentages": {
+        "positive": 100.0,
+        "recovered": 97.41,
+        "deceased": 2.09,
+        "active": 0.49
+      },
+      "reproduction_rate": {
+        "value": 0.76,
+        "lower_bound": 0.66,
+        "upper_bound": 0.86
+      }
+    }
+  }
+]`
 </script>
diff --git a/src/components/documentation/ProvincesSection.vue b/src/components/documentation/ProvincesSection.vue
index 9b89554..8db1ec0 100644
--- a/src/components/documentation/ProvincesSection.vue
+++ b/src/components/documentation/ProvincesSection.vue
@@ -58,6 +58,27 @@
           </div>
         </div>
 
+        <!-- Code Examples -->
+        <div class="mb-8">
+          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <div class="grid lg:grid-cols-2 gap-6">
+            <div>
+              <CodeBlock 
+                :code="curlExample"
+                language="bash"
+                title="cURL Request"
+              />
+            </div>
+            <div>
+              <CodeBlock 
+                :code="responseExample"
+                language="json"
+                title="Response"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- Try It Button -->
         <div class="text-center">
           <a 
@@ -78,6 +99,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -85,4 +107,120 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const curlExample = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/provinces"`
+
+const responseExample = `[
+  {
+    "id": "72",
+    "name": "Sulawesi Tengah",
+    "latest_case": {
+      "date": "2024-09-07T00:00:00Z",
+      "day": 1247,
+      "province": {
+        "id": "72",
+        "name": "Sulawesi Tengah"
+      },
+      "daily": {
+        "positive": 12,
+        "recovered": 8,
+        "deceased": 0,
+        "active": 0,
+        "odp": {
+          "active": 5,
+          "finished": 45
+        },
+        "pdp": {
+          "active": 2,
+          "finished": 23
+        }
+      },
+      "cumulative": {
+        "positive": 89543,
+        "recovered": 87234,
+        "deceased": 1876,
+        "active": 433,
+        "odp": {
+          "active": 25,
+          "finished": 1250,
+          "total": 1275
+        },
+        "pdp": {
+          "active": 8,
+          "finished": 567,
+          "total": 575
+        }
+      },
+      "statistics": {
+        "percentages": {
+          "positive": 100.0,
+          "recovered": 97.42,
+          "deceased": 2.09,
+          "active": 0.48
+        },
+        "reproduction_rate": {
+          "value": 0.78,
+          "lower_bound": 0.68,
+          "upper_bound": 0.88
+        }
+      }
+    }
+  },
+  {
+    "id": "73", 
+    "name": "Sulawesi Selatan",
+    "latest_case": {
+      "date": "2024-09-07T00:00:00Z",
+      "day": 1247,
+      "province": {
+        "id": "73",
+        "name": "Sulawesi Selatan"
+      },
+      "daily": {
+        "positive": 45,
+        "recovered": 52,
+        "deceased": 1,
+        "active": 0,
+        "odp": {
+          "active": 12,
+          "finished": 89
+        },
+        "pdp": {
+          "active": 7,
+          "finished": 34
+        }
+      },
+      "cumulative": {
+        "positive": 198765,
+        "recovered": 195123,
+        "deceased": 3098,
+        "active": 544,
+        "odp": {
+          "active": 67,
+          "finished": 2890,
+          "total": 2957
+        },
+        "pdp": {
+          "active": 23,
+          "finished": 1234,
+          "total": 1257
+        }
+      },
+      "statistics": {
+        "percentages": {
+          "positive": 100.0,
+          "recovered": 98.17,
+          "deceased": 1.56,
+          "active": 0.27
+        },
+        "reproduction_rate": {
+          "value": 0.82,
+          "lower_bound": 0.72,
+          "upper_bound": 0.92
+        }
+      }
+    }
+  }
+]`
 </script>
diff --git a/src/components/documentation/RootEndpointSection.vue b/src/components/documentation/RootEndpointSection.vue
index 7e28da6..9efc254 100644
--- a/src/components/documentation/RootEndpointSection.vue
+++ b/src/components/documentation/RootEndpointSection.vue
@@ -62,6 +62,27 @@
           </div>
         </div>
 
+        <!-- Code Examples -->
+        <div class="mb-8">
+          <h3 class="text-xl font-semibold text-gray-900 mb-4">Example Request</h3>
+          <div class="grid lg:grid-cols-2 gap-6">
+            <div>
+              <CodeBlock 
+                :code="curlExample"
+                language="bash"
+                title="cURL Request"
+              />
+            </div>
+            <div>
+              <CodeBlock 
+                :code="responseExample"
+                language="json"
+                title="Response"
+              />
+            </div>
+          </div>
+        </div>
+
         <!-- Try It Button -->
         <div class="text-center">
           <a 
@@ -82,6 +103,7 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import CodeBlock from '@/components/CodeBlock.vue'
 
 interface Props {
   isActive: boolean
@@ -89,4 +111,26 @@ interface Props {
 
 defineProps<Props>()
 const { t } = useI18n()
+
+const curlExample = `curl -X GET \\
+  "https://pico-api.banuacoder.com/api/v1/"`
+
+const responseExample = `{
+  "status": "success",
+  "message": "Welcome to PICO SulTeng API",
+  "version": "1.0.0",
+  "documentation": "https://pico-api.banuacoder.com/docs",
+  "endpoints": {
+    "health": "/health",
+    "national": {
+      "latest": "/national/latest",
+      "historical": "/national/historical"
+    },
+    "provinces": {
+      "list": "/provinces",
+      "cases": "/provinces/cases",
+      "specific": "/provinces/{id}/cases"
+    }
+  }
+}`
 </script>