@@ -91,14 +91,14 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
9191 } ;
9292
9393 return (
94- < Section className = "relative" >
95- < Container className = "relative z-0" >
94+ < Section id = "services-projects" className = "relative !pt-0 " >
95+ < Container className = "relative z-0 !max-w-full px-4 sm:px-8 xl:min-w-[1260px] 2xl:min-w-[1560px] " >
9696 < div className = "flex flex-col gap-4" >
9797 { /* Tabs */ }
98- < div className = "mx-auto flex flex-wrap justify-center gap-2 rounded-2xl border border-white/20 bg-white/10 p-1 backdrop-blur-sm dark:bg-white/5" >
98+ < div id = "services-categories" className = "mx-auto flex max-w-full flex-wrap justify-center gap-1.5 rounded-2xl border border-white/20 bg-white/10 p-2 backdrop-blur-sm sm:gap-2.5 dark:bg-white/5" >
9999 < button
100100 onClick = { ( ) => handleTabClick ( ALL_CATEGORY_ID ) }
101- className = { `rounded-xl px-3 py-1.5 text-sm font-semibold transition-all duration-200 ${
101+ className = { `rounded-xl px-2.5 py-1 text-xs font-semibold transition-all duration-200 sm:px-5 sm:py-2.5 sm:text-base ${
102102 currentCategory === ALL_CATEGORY_ID
103103 ? "bg-white text-gray-900 shadow-lg"
104104 : "text-white hover:bg-white/20 hover:text-white"
@@ -110,7 +110,7 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
110110 < button
111111 key = { cat . id }
112112 onClick = { ( ) => handleTabClick ( cat . id ) }
113- className = { `rounded-xl px-3 py-1.5 text-sm font-semibold transition-all duration-200 ${
113+ className = { `rounded-xl px-2.5 py-1 text-xs font-semibold transition-all duration-200 sm:px-5 sm:py-2.5 sm:text-base ${
114114 currentCategory === cat . id
115115 ? "bg-white text-gray-900 shadow-lg"
116116 : "text-white hover:bg-white/20 hover:text-white"
@@ -122,14 +122,14 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
122122 </ div >
123123
124124 { /* Projects Grid */ }
125- < div className = "mx-[-4px] grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 ">
125+ < div id = "services-grid" className = " grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 ">
126126 { paginatedProjects && paginatedProjects . length > 0 ? (
127127 paginatedProjects . map ( ( project , index ) => (
128128 < div
129129 key = { project . id }
130- className = "animate-fade-in-up px-1 "
130+ className = "animate-fade-in-up aspect-square w-full "
131131 style = { {
132- animationDelay : `${ index * 150 } ms` ,
132+ animationDelay : `${ index * 80 } ms` ,
133133 animationFillMode : "both" ,
134134 } }
135135 >
@@ -140,15 +140,15 @@ export const ServicesTab = memo(({ servicesData, onServiceSelect }: Props) => {
140140 </ div >
141141 ) )
142142 ) : (
143- < div className = "col-span-full text-center text-white" >
143+ < div className = "py-20 text-center text-white" >
144144 No projects available for this category
145145 </ div >
146146 ) }
147147 </ div >
148148
149149 { /* Pagination */ }
150150 { projects . length > pageSize . services && (
151- < div className = "text-white" >
151+ < div id = "services-pagination" className = "text-white" >
152152 < DefaultPagination
153153 currentPage = { currentPage }
154154 handleNextPage = { handleNextPage }
0 commit comments