Skip to content

feat - Improve services page UX with smooth scroll and enhanced layout #154

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

Open
Criztiandev wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat - Improve services page UX with smooth scroll and enhanced layout #154

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
099bb30
refactor(certificates): improve services page UX with smooth scroll a…
Criztiandev Sep 21, 2025
7ea1aba
chore: remove border
Criztiandev Sep 21, 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
111 changes: 52 additions & 59 deletions src/pages/services/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,15 @@ export default function ServicesPage() {
});
};

const handleLoadMoreService = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
setCurrentPage(prev => prev + 1);
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};

// const currentCategoryData = selectedCategory

const [sidebarOpen, setSidebarOpen] = useState(false);
Expand Down Expand Up @@ -406,10 +415,10 @@ export default function ServicesPage() {
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
className='flex select-none touch-none p-0.5 bg-gray-100 transition-colors hover:bg-gray-200 rounded-full'
className='flex select-none touch-none p-0.5 bg-gray-100 transition-colors hover:bg-gray-200 rounded-full w-2'
orientation='vertical'
>
<ScrollArea.Thumb className='flex-1 bg-gray-300 rounded-full relative' />
<ScrollArea.Thumb className='flex-1 bg-blue-600 hover:bg-gray-700 rounded-full relative transition-colors' />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
</div>
Expand All @@ -419,66 +428,61 @@ export default function ServicesPage() {
<main className='flex-1'>
<h2 className='sr-only'>Available Services</h2>
<div
className='grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6'
className='grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6 transition-all duration-300 ease-in-out'
role='list'
aria-label='List of government services'
tabIndex={-1}
>
{paginatedServices.map((service, index) => (
<article key={index} className='h-full' role='listitem'>
<Card hoverable className='bg-white h-full'>
<CardContent className='p-4 md:p-6'>
<div className='flex items-start justify-between mb-4'>
<div>
<h3 className='text-lg font-semibold text-gray-900'>
{service.service}
</h3>
<div className='mt-2 flex flex-wrap gap-2'>
<Link
to={`/services?category=${service.category.slug}`}
className='inline-block px-2 py-1 text-xs font-medium rounded bg-primary-100 text-primary-800 hover:bg-primary-200 transition-colors'
>
{service.category.name}
</Link>
<Link
to={`/services?category=${service.category.slug}&subcategory=${service.subcategory.slug}`}
className='inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors'
>
{service.subcategory.name}
</Link>
<CardContent className='p-4 md:p-6 h-full'>
<div className='flex flex-col justify-between h-full '>
<div className='flex items-start justify-between mb-4'>
Copy link
Member

@angelofallars angelofallars Sep 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

further style improvement to each service card: add a gap between the service name and the checkmark to prevent the text and the symbol from being too close to each other

Suggested change
<div className='flex items-start justify-between mb-4'>
<div className='flex items-start justify-between gap-2 mb-4'>

before:
image

after:
image

<div>
<h3 className='text-lg font-semibold text-gray-900'>
{service.service}
</h3>
<div className='mt-2 flex flex-wrap gap-2'>
<Link
to={`/services?category=${service.category.slug}`}
className='inline-block px-2 py-1 text-xs font-medium rounded bg-primary-100 text-primary-800 hover:bg-primary-200 transition-colors'
>
{service.category.name}
</Link>
<Link
to={`/services?category=${service.category.slug}&subcategory=${service.subcategory.slug}`}
className='inline-block px-2 py-1 text-xs font-medium rounded bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors'
>
{service.subcategory.name}
</Link>
</div>
</div>
<CheckCircle2
className='h-5 w-5 text-success-500 flex-shrink-0'
aria-hidden='true'
/>
</div>
<CheckCircle2
className='h-5 w-5 text-success-500 flex-shrink-0'
aria-hidden='true'
/>
</div>
<div className='space-y-3'>
<a
href={service.url}
target='_blank'
rel='noopener noreferrer'
className='text-gray-800 text-sm hover:text-primary-600 transition-colors break-all line-clamp-1'
>
{service.url}
</a>
<a
href={service.url}
target='_blank'
rel='noopener noreferrer'
>
<Button className='bg-blue-600 text-white rounded-lg px-4 py-1 text-xs mt-4'>
View Service
</Button>
</a>

{/* <div className="flex items-center text-sm text-gray-800">
<div className='space-y-3'>
<a
href={service.url}
target='_blank'
rel='noopener noreferrer'
>
<Button className='bg-blue-600 text-white rounded-lg px-4 py-1 text-xs mt-4'>
View Service
</Button>
</a>

{/* <div className="flex items-center text-sm text-gray-800">
<time
dateTime={new Date().toISOString()}
className="text-xs md:text-sm"
>
Last verified: {formatDate(new Date())}
</time>
</div> */}
</div>
</div>
</CardContent>
</Card>
Expand All @@ -490,18 +494,7 @@ export default function ServicesPage() {
{filteredServices.length > ITEMS_PER_PAGE * currentPage && (
<div className='mt-6 md:mt-8 text-center'>
<button
onClick={() => {
setCurrentPage(prev => prev + 1);
// Focus management for better keyboard navigation
setTimeout(() => {
const nextPageFirstItem = document.querySelector(
'[role="listitem"]:last-child'
);
if (nextPageFirstItem instanceof HTMLElement) {
nextPageFirstItem.focus();
}
}, 100);
}}
onClick={handleLoadMoreService}
className='inline-flex items-center justify-center px-4 py-2 md:px-6 md:py-3 border border-transparent text-sm md:text-base font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
aria-label={`Load more services, showing ${Math.min(
filteredServices.length - currentPage * ITEMS_PER_PAGE,
Expand Down
Loading