Skip to content

fix: government services cards enhancements and navbar tweaks #219

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

Draft
ransuhaneda wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

fix: government services cards enhancements and navbar tweaks #219

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
83a0015
fix: government services cards enhancements and navbar tweaks
ransuhaneda Sep 23, 2025
a516638
fix: applied new logo (rebase)
ransuhaneda Sep 24, 2025
6eae7b1
Merge branch 'main' into fix/home-page
ransuhaneda Sep 24, 2025
f669f92
fix: government services cards enhancements and navbar tweaks
ransuhaneda Sep 23, 2025
3458794
fix: applied new logo (rebase)
ransuhaneda Sep 24, 2025
f79d280
Merge branch 'fix/home-page' of https://github.com/ransuhaneda/openso…
ransuhaneda Sep 24, 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
2 changes: 1 addition & 1 deletion src/components/home/JoinUsStrip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const JoinUsStrip: React.FC = () => {
{t('joinUs.stripTitle')}
</span>
</div>
<span className='hidden md:inline text-sm text-orange-100'>
<span className='hidden lg:inline text-sm text-orange-100'>
{t('joinUs.stripSubtitle')}
</span>
</div>
Expand Down
31 changes: 16 additions & 15 deletions src/components/home/ServicesSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@ const ServicesSection: React.FC = () => {
return (
<section className='py-12 bg-white'>
<div className='container mx-auto px-4'>
<div className='text-center mb-12'>
<h2 className='text-2xl md:text-3xl font-bold text-gray-900 mb-4'>
<div className='flex flex-col gap-4 text-center mb-12'>
<h2 className='text-2xl md:text-3xl font-bold text-gray-900'>
{t('services.governmentServices')}
</h2>
<p className='text-gray-800 max-w-2xl mx-auto'>
Expand All @@ -64,25 +64,26 @@ const ServicesSection: React.FC = () => {
hoverable
className='border-t-4 border-primary-500'
>
<CardContent className='flex flex-col h-full p-6'>
<div className='flex gap-2'>
<div className='bg-primary-100 text-primary-600 p-3 rounded-md mb-4 self-start'>
<CardContent className='flex flex-col h-full gap-4'>
<div className='flex gap-2 items-center'>
<div className='bg-primary-100 text-primary-600 p-3 rounded-md'>
{getIcon(category.category)}
</div>

<h3 className='text-lg font-semibold mb-4 text-gray-900'>
{category.category}
</h3>
<Link to={`/services?category=${category.slug}`}>
<h3 className='text-lg font-semibold text-gray-900 hover:text-primary-600'>
{category.category}
</h3>
</Link>
</div>

<ul className='space-y-2 mb-6 flex-grow'>
<ul className='space-y-2 flex-grow'>
{category.subcategories.slice(0, 3).map(subcategory => (
<li key={subcategory.slug}>
<Link
to={`/services?category=${category.slug}&subcategory=${subcategory.slug}`}
className='text-gray-800 hover:text-primary-600 transition-colors text-md flex items-center'
className='flex items-center gap-2 text-gray-800 text-md hover:text-primary-600 hover:underline transition-colors'
>
<span className='w-1.5 h-1.5 bg-gray-300 rounded-full mr-2'></span>
<span className='flex-shrink-0 w-1.5 h-1.5 bg-gray-300 rounded-full'></span>
{subcategory.name}
</Link>
</li>
Expand All @@ -91,10 +92,10 @@ const ServicesSection: React.FC = () => {

<Link
to={`/services?category=${category.slug}`}
className='mt-auto text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center'
className='mt-auto text-primary-600 hover:text-primary-700 font-medium transition-colors inline-flex items-center self-end gap-1'
>
{t('services.viewAllCategory')} {category.category}
<LucideIcons.ArrowRight className='ml-1 h-4 w-4' />
{t('services.viewAllCategory')}
<LucideIcons.ArrowRight className='h-4 w-4' />
</Link>
</CardContent>
</Card>
Expand Down
83 changes: 42 additions & 41 deletions src/components/layout/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,10 +90,10 @@ const Navbar: React.FC = () => {

{/* Main navigation */}
<div className='container mx-auto px-4'>
<div className='flex justify-between items-center py-4'>
<div className='flex items-center'>
<Link to='/' className='flex items-center'>
<CheckCircle2 className='h-12 w-12 mr-3' />
<div className='flex justify-between items-center py-4 gap-8'>
<div className='flex items-center gap-6'>
<Link to='/' className='flex items-center gap-3'>
<CheckCircle2 className='h-12 w-12' />
{/* <img
src="/ph-logo.webp"
alt="Philippines Coat of Arms"
Expand All @@ -106,45 +106,46 @@ const Navbar: React.FC = () => {
</div>
</div>
</Link>
</div>

{/* Desktop navigation */}
<div className='hidden lg:flex items-center space-x-8 pr-24'>
{mainNavigation.map(item => (
<div key={item.label} className='relative group'>
<Link
to={item.href}
className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
>
{t(`navbar.${item.label.toLowerCase()}`)}
{/* Desktop navigation */}
<div className='hidden lg:flex items-center lg:gap-8'>
{mainNavigation.map(item => (
<div key={item.label} className='relative group'>
<Link
to={item.href}
className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
>
{t(`navbar.${item.label.toLowerCase()}`)}
{item.children && (
<ChevronDown className='ml-1 h-4 w-4 text-gray-800 group-hover:text-primary-600 transition-colors' />
)}
</Link>
{item.children && (
<ChevronDown className='ml-1 h-4 w-4 text-gray-800 group-hover:text-primary-600 transition-colors' />
)}
</Link>
{item.children && (
<div className='absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50'>
<div
className='py-1'
role='menu'
aria-orientation='vertical'
>
{item.children.map(child => (
<Link
key={child.label}
to={child.href}
className='text-left block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-600'
role='menuitem'
>
{child.label}
</Link>
))}
<div className='absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50'>
<div
className='py-1'
role='menu'
aria-orientation='vertical'
>
{item.children.map(child => (
<Link
key={child.label}
to={child.href}
className='text-left block px-4 py-2 text-sm text-gray-700 hover:bg-primary-50 hover:text-primary-600'
role='menuitem'
>
{child.label}
</Link>
))}
</div>
</div>
</div>
)}
</div>
))}
)}
</div>
))}
</div>
</div>
<div className='hidden lg:flex items-center space-x-6'>

<div className='hidden lg:flex items-center gap-6'>
<Link
to='/about'
className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
Expand All @@ -153,9 +154,9 @@ const Navbar: React.FC = () => {
</Link>
<Link
to='/search'
className='flex items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
className='flex gap-1 items-center text-gray-700 hover:text-primary-600 font-medium transition-colors'
>
<Search className='h-4 w-4 mr-1' />
<Search className='h-4 w-4' />
Search
</Link>
{/* <Link
Expand Down