Skip to content

fix: improve mobile layout for hero section and data sources #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 11, 2025
Merged

fix: improve mobile layout for hero section and data sources #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ae203aa
fix: improve mobile layout for hero section and data sources
ryanaidilp Sep 11, 2025
8602ce4
refactor: remove redundant Quick API Overview section from home page
ryanaidilp Sep 11, 2025
52d8463
chore: add CLAUDE.md configuration file
ryanaidilp Sep 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- for this project, always use frontend expert agent
13 changes: 6 additions & 7 deletions src/components/DataSources.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
36 changes: 20 additions & 16 deletions src/components/documentation/GlossarySection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
107 changes: 31 additions & 76 deletions src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -322,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">
Expand Down