Merge branch 'main' into feature/it-standards

components/PageHeaderCard.tsx

@@ -13,21 +13,18 @@ type HeaderOptions = {
 
 export default ({ title, description, img, children }: HeaderOptions) => {
     return (
-        <section
-            className="bg-white mt-10 lg:mt-32 w-full mx-auto relative z-10 lg:pb-32"
-            aria-labelledby="heading"
-        >
+        <section className="bg-white mt-10 w-full mx-auto relative z-10 lg:pb-32" aria-labelledby="heading">
             <h2 className="sr-only" id="heading">
                 {title}
             </h2>
             <div className="flex flex-col bg-white rounded-b-lg shadow-xl">
                 <div className="flex-1 relative pt-24 px-6 pb-8 md:px-8">
-                    <div className="h-32 absolute top-0 p-4 inline-block transform -translate-y-1/2">
-                        <header className={'flex justify-between space-x-6'}>
+                    <div className="h-32 top-0 p-4 inline-block transform -translate-y-1/2">
+                        <header className={'flex justify-between space-x-6 items-center'}>
                             {img && img.src
                                 ? (
                                     <img
-                                        className={'w-24 h-24'}
+                                        className={'h-24'}
                                         src={img.src}
                                         alt={img.alt}
                                     />
@@ -42,15 +39,18 @@ export default ({ title, description, img, children }: HeaderOptions) => {
                             </h1>
                         </header>
                     </div>
-                    <div
-                        className="cms-blog-text text-xl text-gray-800 mt-14"
-                        dangerouslySetInnerHTML={{ __html: description }}
-                    />
+                    <div className="flex flex-col md:flex-row md:items-center">
+                        <div
+                            className="cms-blog-text text-xl text-gray-800 mt-5 md:flex-1"
+                            dangerouslySetInnerHTML={{ __html: description }}
+                        />
+                    </div>
                 </div>
                 <div className="p-6 bg-gray-50 rounded-b-lg md:px-8 flex flex-row items-center gap-16">
                     {children}
                 </div>
             </div>
         </section>
+
     )
 }

shared/use-service-filter.ts

@@ -54,6 +54,10 @@ const useServiceFilter = (services: ServiceContent[], filter: any) => {
             return filterServiceByTags(service, activeTypeFilterTags, FilterMatchRequirement.ALL) && filterServiceByTags(service, activeStatusFilterTags, FilterMatchRequirement.SOME)
         })
 
+        servicesFilteredByTags.sort((sortableServiceContantA: ServiceContent, sortableServiceContantB: ServiceContent) => {
+            return sortableServiceContantA.name.localeCompare(sortableServiceContantB.name)
+        })
+
         setFilteredServices(servicesFilteredByTags)
     }