Fix merge conflicts

Author: benjagm

pages/blog/index.page.tsx

@@ -226,7 +226,7 @@ export default function StaticMarkdownPage({
         </div>
 
         {/* filterTag === frontmatter.type &&  */}
-        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-20 bg-white dark:bg-slate-800 mx-auto p-6'>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-6 grid-flow-row mb-20 bg-white dark:bg-slate-800  mx-auto p-4'>
           {blogPosts
             .filter((post) => {
               if (!currentFilterTag || currentFilterTag === 'All') return true;
@@ -245,36 +245,36 @@ export default function StaticMarkdownPage({
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='h-[520px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
+                  <div className='h-[510px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
                     <Link
                       href={`/blog/posts/${blogPost.slug}`}
                       className='inline-flex flex-col flex-1 w-full'
                     >
-                      <div className='relative w-full h-[240px] overflow-hidden'>
-                        <Image
-                          src={frontmatter.cover}
-                          fill
-                          className='object-cover transition-transform duration-300 group-hover:scale-105'
-                          alt={frontmatter.title}
+                      <div className=' h-max-[200px] w-full  object-cover'>
+                        <div
+                          className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center'
+                          style={{
+                            backgroundImage: `url(${frontmatter.cover})`,
+                          }}
                         />
                       </div>
                       <div className='p-4 flex flex-col flex-1 justify-between'>
                         <div>
                           <div className='bg-blue-100 dark:bg-slate-700 dark:text-blue-100 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'>
                             {frontmatter.type || 'Unknown Type'}
                           </div>
-                          <div className='text-lg font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
+                          <div className='text-lg font-semibold text-gray-900 h-[80px] dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
                             {frontmatter.title}
                           </div>
                           <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
                             <TextTruncate
                               element='span'
-                              line={3}
+                              line={4}
                               text={frontmatter.excerpt}
                             />
                           </div>
                           <div className='mb-4'></div>
-                          <div className='flex items-center'>
+                          <div className='flex flex-row items-center'>
                             <div className='flex flex-row pl-2 mr-2'>
                               {(frontmatter.authors || []).map(
                                 (author: Author, index: number) => (