From 98cd2ca4097d2cb4c8610ffb46eddec39a44d70f Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Tue, 21 Jan 2025 14:11:51 +0000
Subject: [PATCH 01/10] Add hover and Read More to blog cards

---
 pages/blog/index.page.tsx | 128 ++++++++++++++++----------------------
 styles/globals.css        |  27 ++++++++
 2 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 5bd300de2..112e11951 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -245,82 +245,56 @@ export default function StaticMarkdownPage({
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='h-[498px] flex border rounded-lg shadow-sm hover:shadow-lg transition-all overflow-hidden dark:border-slate-500'>
+                  <div className='h-[498px] 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='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center'
-                        style={{ backgroundImage: `url(${frontmatter.cover})` }}
-                      />
-                      <div className=' p-4 flex flex-col flex-1 justify-between'>
+                      <div className='relative w-full h-[200px] overflow-hidden'>
+                        <Image
+                          src={frontmatter.cover}
+                          fill
+                          className='object-cover transition-transform duration-300 group-hover:scale-105'
+                          alt={frontmatter.title}
+                        />
+                      </div>
+                      <div className='p-4 flex flex-col flex-1 justify-between'>
                         <div>
-                          <div>
-                            <div
-                              className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-
-                                if (frontmatter.type) {
-                                  setCurrentFilterTag(frontmatter.type);
-                                  history.replaceState(
-                                    null,
-                                    '',
-                                    `/blog?type=${frontmatter.type}`,
-                                  );
-                                }
-                              }}
-                            >
-                              {frontmatter.type || 'Unknown Type'}
-                            </div>
+                          <div className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer 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'>
+                          <div className='text-lg font-semibold 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={4}
+                              line={3}
                               text={frontmatter.excerpt}
                             />
                           </div>
                         </div>
-                        <div
-                          className={`
-                            flex 
-                            flex-row
-                            items-center
-                          `}
-                        >
-                          <div className='flex flex-row pl-2 mr-2'>
-                            {(frontmatter.authors || []).map(
-                              (author: Author, index: number) => (
-                                <div
-                                  key={index}
-                                  className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
-                                    frontmatter.authors.length > 2
-                                      ? 'h-8 w-8'
-                                      : 'h-11 w-11'
-                                  }`}
-                                  style={{
-                                    backgroundImage: `url(${author.photo})`,
-                                    zIndex: 10 - index,
-                                  }}
-                                />
-                              ),
-                            )}
-                          </div>
-
-                          <div
-                            className={`
-                              flex 
-                              flex-col
-                              items-start
-                            `}
-                          >
+                        <div className='flex flex-col space-y-4'>
+                          <div className='flex items-center'>
+                            <div className='flex flex-row pl-2 mr-2'>
+                              {(frontmatter.authors || []).map(
+                                (author: Author, index: number) => (
+                                  <div
+                                    key={index}
+                                    className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
+                                      frontmatter.authors.length > 2
+                                        ? 'h-8 w-8'
+                                        : 'h-11 w-11'
+                                    }`}
+                                    style={{
+                                      backgroundImage: `url(${author.photo})`,
+                                      zIndex: 10 - index,
+                                    }}
+                                  />
+                                ),
+                              )}
+                            </div>
                             <div className='text-sm font-semibold'>
                               {frontmatter.authors.length > 2 ? (
                                 <>
@@ -346,19 +320,27 @@ export default function StaticMarkdownPage({
                                 )
                               )}
                             </div>
-
-                            <div className='text-slate-500 text-sm dark:text-slate-300'>
-                              {frontmatter.date && (
-                                <span>
-                                  {date.toLocaleDateString('en-us', {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    day: 'numeric',
-                                  })}
-                                </span>
-                              )}{' '}
-                              &middot; {timeToRead} min read
-                            </div>
+                          </div>
+                          <div className='flex items-center justify-between pt-2 border-t dark:border-slate-600'>
+                            <span className='text-sm text-slate-500 dark:text-slate-300'>
+                              {timeToRead} min read
+                            </span>
+                            <span className='text-blue-600 dark:text-blue-400 font-medium flex items-center group-hover:translate-x-1 transition-transform duration-300'>
+                              Read More
+                              <svg 
+                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300' 
+                                fill='none' 
+                                stroke='currentColor' 
+                                viewBox='0 0 24 24'
+                              >
+                                <path 
+                                  strokeLinecap='round' 
+                                  strokeLinejoin='round' 
+                                  strokeWidth={2} 
+                                  d='M9 5l7 7-7 7'
+                                />
+                              </svg>
+                            </span>
                           </div>
                         </div>
                       </div>
diff --git a/styles/globals.css b/styles/globals.css
index cd327de8f..b7441a1f3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -299,4 +299,31 @@ border-radius: 4px; */
 }
 .scrollbar-hidden::-webkit-scrollbar {
   display: none;
+}
+
+@keyframes shine {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(200%);
+  }
+}
+
+.shine-animation {
+  animation: shine 2s infinite;
+}
+
+/* Add smooth transitions for dark mode */
+.dark .group:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Enhance card interactions */
+.group {
+  transition: all 0.3s ease;
+}
+
+.group:hover {
+  transform: translateY(-2px);
 }
\ No newline at end of file

From 86b74907afb95a4a4e82c00d78f597e3795fba1d Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Tue, 21 Jan 2025 15:29:20 +0000
Subject: [PATCH 02/10] Add hover and Read More to blog cards

---
 pages/blog/index.page.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 112e11951..52445b882 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -134,14 +134,14 @@ export default function StaticMarkdownPage({
               />
             </div>
             <div className='absolute text-white w-full h-full mt-custom ml-14'>
-              <div className='bg-blue-100 hover:bg-blue-200 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full my-3 text-sm '>
+              <div className='bg-blue-100 hover:bg-blue-200 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full my-3 text-sm'>
                 {recentBlog[0].frontmatter.type}
               </div>
               <Link href={`/blog/posts/${recentBlog[0].slug}`}>
                 <h1 className='text-h1mobile ab1:text-h1 sm:text-h2 font-semibold text-stroke-1 mr-6 dark:slate-300'>
                   {recentBlog[0].frontmatter.title}
                 </h1>
-                <div className='flex ml-2 mb-2 '>
+                <div className='flex ml-2 mb-2'>
                   <div
                     className='bg-slate-50 h-10 w-10 lg:h-[44px] lg:w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
                     style={{
@@ -240,7 +240,6 @@ export default function StaticMarkdownPage({
             })
             .map((blogPost: any) => {
               const { frontmatter, content } = blogPost;
-              const date = new Date(frontmatter.date);
               const timeToRead = Math.ceil(readingTime(content).minutes);
 
               return (
@@ -327,16 +326,16 @@ export default function StaticMarkdownPage({
                             </span>
                             <span className='text-blue-600 dark:text-blue-400 font-medium flex items-center group-hover:translate-x-1 transition-transform duration-300'>
                               Read More
-                              <svg 
-                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300' 
-                                fill='none' 
-                                stroke='currentColor' 
+                              <svg
+                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300'
+                                fill='none'
+                                stroke='currentColor'
                                 viewBox='0 0 24 24'
                               >
-                                <path 
-                                  strokeLinecap='round' 
-                                  strokeLinejoin='round' 
-                                  strokeWidth={2} 
+                                <path
+                                  strokeLinecap='round'
+                                  strokeLinejoin='round'
+                                  strokeWidth={2}
                                   d='M9 5l7 7-7 7'
                                 />
                               </svg>

From 231683f6dc3459f0f5b7196a5fabb7fdffb148ad Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sat, 25 Jan 2025 08:00:15 +0000
Subject: [PATCH 03/10] Revert "Add hover and Read More to blog cards"

This reverts commit 86b74907afb95a4a4e82c00d78f597e3795fba1d.
---
 pages/blog/index.page.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 52445b882..112e11951 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -134,14 +134,14 @@ export default function StaticMarkdownPage({
               />
             </div>
             <div className='absolute text-white w-full h-full mt-custom ml-14'>
-              <div className='bg-blue-100 hover:bg-blue-200 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full my-3 text-sm'>
+              <div className='bg-blue-100 hover:bg-blue-200 font-semibold text-blue-800 inline-block px-3 py-1 rounded-full my-3 text-sm '>
                 {recentBlog[0].frontmatter.type}
               </div>
               <Link href={`/blog/posts/${recentBlog[0].slug}`}>
                 <h1 className='text-h1mobile ab1:text-h1 sm:text-h2 font-semibold text-stroke-1 mr-6 dark:slate-300'>
                   {recentBlog[0].frontmatter.title}
                 </h1>
-                <div className='flex ml-2 mb-2'>
+                <div className='flex ml-2 mb-2 '>
                   <div
                     className='bg-slate-50 h-10 w-10 lg:h-[44px] lg:w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
                     style={{
@@ -240,6 +240,7 @@ export default function StaticMarkdownPage({
             })
             .map((blogPost: any) => {
               const { frontmatter, content } = blogPost;
+              const date = new Date(frontmatter.date);
               const timeToRead = Math.ceil(readingTime(content).minutes);
 
               return (
@@ -326,16 +327,16 @@ export default function StaticMarkdownPage({
                             </span>
                             <span className='text-blue-600 dark:text-blue-400 font-medium flex items-center group-hover:translate-x-1 transition-transform duration-300'>
                               Read More
-                              <svg
-                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300'
-                                fill='none'
-                                stroke='currentColor'
+                              <svg 
+                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300' 
+                                fill='none' 
+                                stroke='currentColor' 
                                 viewBox='0 0 24 24'
                               >
-                                <path
-                                  strokeLinecap='round'
-                                  strokeLinejoin='round'
-                                  strokeWidth={2}
+                                <path 
+                                  strokeLinecap='round' 
+                                  strokeLinejoin='round' 
+                                  strokeWidth={2} 
                                   d='M9 5l7 7-7 7'
                                 />
                               </svg>

From 7b837830c96d15cf47c0476772524cbfd1a40e74 Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sat, 25 Jan 2025 08:00:49 +0000
Subject: [PATCH 04/10] Revert "Add hover and Read More to blog cards"

This reverts commit 98cd2ca4097d2cb4c8610ffb46eddec39a44d70f.
---
 pages/blog/index.page.tsx | 128 ++++++++++++++++++++++----------------
 styles/globals.css        |  27 --------
 2 files changed, 73 insertions(+), 82 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 112e11951..5bd300de2 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -245,56 +245,82 @@ export default function StaticMarkdownPage({
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='h-[498px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
+                  <div className='h-[498px] flex border rounded-lg shadow-sm hover:shadow-lg transition-all overflow-hidden dark:border-slate-500'>
                     <Link
                       href={`/blog/posts/${blogPost.slug}`}
                       className='inline-flex flex-col flex-1 w-full'
                     >
-                      <div className='relative w-full h-[200px] overflow-hidden'>
-                        <Image
-                          src={frontmatter.cover}
-                          fill
-                          className='object-cover transition-transform duration-300 group-hover:scale-105'
-                          alt={frontmatter.title}
-                        />
-                      </div>
-                      <div className='p-4 flex flex-col flex-1 justify-between'>
+                      <div
+                        className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center'
+                        style={{ backgroundImage: `url(${frontmatter.cover})` }}
+                      />
+                      <div className=' p-4 flex flex-col flex-1 justify-between'>
                         <div>
-                          <div className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'>
-                            {frontmatter.type || 'Unknown Type'}
+                          <div>
+                            <div
+                              className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                if (frontmatter.type) {
+                                  setCurrentFilterTag(frontmatter.type);
+                                  history.replaceState(
+                                    null,
+                                    '',
+                                    `/blog?type=${frontmatter.type}`,
+                                  );
+                                }
+                              }}
+                            >
+                              {frontmatter.type || 'Unknown Type'}
+                            </div>
                           </div>
-                          <div className='text-lg font-semibold group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
+                          <div className='text-lg font-semibold'>
                             {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>
-                        <div className='flex flex-col space-y-4'>
-                          <div className='flex items-center'>
-                            <div className='flex flex-row pl-2 mr-2'>
-                              {(frontmatter.authors || []).map(
-                                (author: Author, index: number) => (
-                                  <div
-                                    key={index}
-                                    className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
-                                      frontmatter.authors.length > 2
-                                        ? 'h-8 w-8'
-                                        : 'h-11 w-11'
-                                    }`}
-                                    style={{
-                                      backgroundImage: `url(${author.photo})`,
-                                      zIndex: 10 - index,
-                                    }}
-                                  />
-                                ),
-                              )}
-                            </div>
+                        <div
+                          className={`
+                            flex 
+                            flex-row
+                            items-center
+                          `}
+                        >
+                          <div className='flex flex-row pl-2 mr-2'>
+                            {(frontmatter.authors || []).map(
+                              (author: Author, index: number) => (
+                                <div
+                                  key={index}
+                                  className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
+                                    frontmatter.authors.length > 2
+                                      ? 'h-8 w-8'
+                                      : 'h-11 w-11'
+                                  }`}
+                                  style={{
+                                    backgroundImage: `url(${author.photo})`,
+                                    zIndex: 10 - index,
+                                  }}
+                                />
+                              ),
+                            )}
+                          </div>
+
+                          <div
+                            className={`
+                              flex 
+                              flex-col
+                              items-start
+                            `}
+                          >
                             <div className='text-sm font-semibold'>
                               {frontmatter.authors.length > 2 ? (
                                 <>
@@ -320,27 +346,19 @@ export default function StaticMarkdownPage({
                                 )
                               )}
                             </div>
-                          </div>
-                          <div className='flex items-center justify-between pt-2 border-t dark:border-slate-600'>
-                            <span className='text-sm text-slate-500 dark:text-slate-300'>
-                              {timeToRead} min read
-                            </span>
-                            <span className='text-blue-600 dark:text-blue-400 font-medium flex items-center group-hover:translate-x-1 transition-transform duration-300'>
-                              Read More
-                              <svg 
-                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300' 
-                                fill='none' 
-                                stroke='currentColor' 
-                                viewBox='0 0 24 24'
-                              >
-                                <path 
-                                  strokeLinecap='round' 
-                                  strokeLinejoin='round' 
-                                  strokeWidth={2} 
-                                  d='M9 5l7 7-7 7'
-                                />
-                              </svg>
-                            </span>
+
+                            <div className='text-slate-500 text-sm dark:text-slate-300'>
+                              {frontmatter.date && (
+                                <span>
+                                  {date.toLocaleDateString('en-us', {
+                                    year: 'numeric',
+                                    month: 'long',
+                                    day: 'numeric',
+                                  })}
+                                </span>
+                              )}{' '}
+                              &middot; {timeToRead} min read
+                            </div>
                           </div>
                         </div>
                       </div>
diff --git a/styles/globals.css b/styles/globals.css
index b7441a1f3..cd327de8f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -299,31 +299,4 @@ border-radius: 4px; */
 }
 .scrollbar-hidden::-webkit-scrollbar {
   display: none;
-}
-
-@keyframes shine {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(200%);
-  }
-}
-
-.shine-animation {
-  animation: shine 2s infinite;
-}
-
-/* Add smooth transitions for dark mode */
-.dark .group:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-/* Enhance card interactions */
-.group {
-  transition: all 0.3s ease;
-}
-
-.group:hover {
-  transform: translateY(-2px);
 }
\ No newline at end of file

From 0d455c5a9196d6944c865fb54297e694f68d044c Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sat, 1 Feb 2025 14:36:34 +0000
Subject: [PATCH 05/10] Updated blog page and global styles

---
 pages/blog/index.page.tsx | 70 +++++++++++++++++++--------------------
 styles/globals.css        |  5 ---
 2 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 52445b882..b29b32f4c 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -123,7 +123,7 @@ export default function StaticMarkdownPage({
       </Head>
       <div className='max-w-[1400px] mx-auto overflow-x-hidden flex flex-col items-center mt-10 '>
         {recentBlog[0] && (
-          <div className='relative w-full  h-[400px] bg-black clip-bottom mt-1.5 flex flex-col items-center justify-start dark:bg-slate-700'>
+          <div className='relative w-full h-[400px] bg-black clip-bottom mt-1.5 flex flex-col items-center justify-start dark:bg-slate-700'>
             <div className='absolute w-full h-full dark:bg-[#282d6a]'>
               <Image
                 src={recentBlog[0].frontmatter.cover}
@@ -225,7 +225,7 @@ export default function StaticMarkdownPage({
         </div>
 
         {/* filterTag === frontmatter.type &&  */}
-        <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'>
+        <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'>
           {blogPosts
             .filter((post) => {
               if (!currentFilterTag || currentFilterTag === 'All') return true;
@@ -244,12 +244,9 @@ export default function StaticMarkdownPage({
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='h-[498px] 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-[200px] overflow-hidden'>
+                  <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='inline-flex flex-col flex-1 w-full'>
+                      <div className='relative w-full h-[240px] overflow-hidden'>
                         <Image
                           src={frontmatter.cover}
                           fill
@@ -259,13 +256,12 @@ export default function StaticMarkdownPage({
                       </div>
                       <div className='p-4 flex flex-col flex-1 justify-between'>
                         <div>
-                          <div className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'>
+                          <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 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
+                          <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'>
                             {frontmatter.title}
                           </div>
-
                           <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
                             <TextTruncate
                               element='span'
@@ -273,8 +269,7 @@ export default function StaticMarkdownPage({
                               text={frontmatter.excerpt}
                             />
                           </div>
-                        </div>
-                        <div className='flex flex-col space-y-4'>
+                          <div className='mb-4'></div>
                           <div className='flex items-center'>
                             <div className='flex flex-row pl-2 mr-2'>
                               {(frontmatter.authors || []).map(
@@ -294,7 +289,7 @@ export default function StaticMarkdownPage({
                                 ),
                               )}
                             </div>
-                            <div className='text-sm font-semibold'>
+                            <div className='text-sm font-semibold dark:text-slate-300 mb-2'>
                               {frontmatter.authors.length > 2 ? (
                                 <>
                                   {frontmatter.authors
@@ -320,30 +315,33 @@ export default function StaticMarkdownPage({
                               )}
                             </div>
                           </div>
-                          <div className='flex items-center justify-between pt-2 border-t dark:border-slate-600'>
-                            <span className='text-sm text-slate-500 dark:text-slate-300'>
-                              {timeToRead} min read
-                            </span>
-                            <span className='text-blue-600 dark:text-blue-400 font-medium flex items-center group-hover:translate-x-1 transition-transform duration-300'>
-                              Read More
-                              <svg
-                                className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300'
-                                fill='none'
-                                stroke='currentColor'
-                                viewBox='0 0 24 24'
-                              >
-                                <path
-                                  strokeLinecap='round'
-                                  strokeLinejoin='round'
-                                  strokeWidth={2}
-                                  d='M9 5l7 7-7 7'
-                                />
-                              </svg>
-                            </span>
-                          </div>
+                        </div>
+                        <div className='flex items-center justify-between pt-4 mt-4 border-t dark:border-slate-600'>
+                          <span className='text-sm text-slate-500 dark:text-slate-300'>
+                            {timeToRead} min read
+                          </span>
+                          <Link
+                            href={`/blog/posts/${blogPost.slug}`}
+                            className='text-blue-600 dark:text-blue-400 font-medium flex items-center hover:translate-x-1 transition-transform duration-300'
+                          >
+                            Read More
+                            <svg
+                              className='ml-1 w-4 h-4'
+                              fill='none'
+                              stroke='currentColor'
+                              viewBox='0 0 24 24'
+                            >
+                              <path
+                                strokeLinecap='round'
+                                strokeLinejoin='round'
+                                strokeWidth={2}
+                                d='M9 5l7 7-7 7'
+                              />
+                            </svg>
+                          </Link>
                         </div>
                       </div>
-                    </Link>
+                    </div>
                   </div>
                 </section>
               );
diff --git a/styles/globals.css b/styles/globals.css
index b7441a1f3..03e89a3c0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -314,12 +314,7 @@ border-radius: 4px; */
   animation: shine 2s infinite;
 }
 
-/* Add smooth transitions for dark mode */
-.dark .group:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
 
-/* Enhance card interactions */
 .group {
   transition: all 0.3s ease;
 }

From e2a5ea79bdb20050f76c3fc1c666e0a0eadfb999 Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sat, 1 Feb 2025 16:07:24 +0000
Subject: [PATCH 06/10] updated blog card and hover effect

---
 pages/blog/index.page.tsx | 2 +-
 styles/globals.css        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index b29b32f4c..35685f22d 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -244,7 +244,7 @@ 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-[521px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
                     <div className='inline-flex flex-col flex-1 w-full'>
                       <div className='relative w-full h-[240px] overflow-hidden'>
                         <Image
diff --git a/styles/globals.css b/styles/globals.css
index 03e89a3c0..c54908065 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -314,7 +314,6 @@ border-radius: 4px; */
   animation: shine 2s infinite;
 }
 
-
 .group {
   transition: all 0.3s ease;
 }

From 58c7cf0b0785b167cad9ee6b8d6624294da942a4 Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sun, 2 Feb 2025 04:02:08 +0000
Subject: [PATCH 07/10] feat: blog card enhancements

---
 pages/blog/index.page.tsx | 2 +-
 styles/globals.css        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 35685f22d..b29b32f4c 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -244,7 +244,7 @@ export default function StaticMarkdownPage({
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='h-[521px] flex border rounded-lg shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden dark:border-slate-500 group relative'>
+                  <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='inline-flex flex-col flex-1 w-full'>
                       <div className='relative w-full h-[240px] overflow-hidden'>
                         <Image
diff --git a/styles/globals.css b/styles/globals.css
index c54908065..c9a2f6151 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -317,7 +317,6 @@ border-radius: 4px; */
 .group {
   transition: all 0.3s ease;
 }
-
 .group:hover {
   transform: translateY(-2px);
 }
\ No newline at end of file

From afbb430f56f5860797bdb0841e9f6c071832ae92 Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sun, 2 Feb 2025 04:08:07 +0000
Subject: [PATCH 08/10] Blog card enhancements

---
 pages/blog/index.page.tsx | 205 +++++++++++++++++++-------------------
 styles/globals.css        |   1 -
 2 files changed, 104 insertions(+), 102 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 5bd300de2..d7b82f18a 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -245,125 +245,128 @@ export default function StaticMarkdownPage({
 
               return (
                 <section key={blogPost.slug}>
-                  <div className='h-[498px] flex border rounded-lg shadow-sm hover:shadow-lg transition-all overflow-hidden dark:border-slate-500'>
-                    <Link
-                      href={`/blog/posts/${blogPost.slug}`}
-                      className='inline-flex flex-col flex-1 w-full'
-                    >
-                      <div
-                        className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center'
-                        style={{ backgroundImage: `url(${frontmatter.cover})` }}
-                      />
-                      <div className=' p-4 flex flex-col flex-1 justify-between'>
-                        <div>
+                  <Link href={`/blog/posts/${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='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>
+                        <div className='p-4 flex flex-col flex-1 justify-between'>
                           <div>
-                            <div
-                              className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'
-                              onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
+                            <div>
+                              <div
+                                className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
 
-                                if (frontmatter.type) {
-                                  setCurrentFilterTag(frontmatter.type);
-                                  history.replaceState(
-                                    null,
-                                    '',
-                                    `/blog?type=${frontmatter.type}`,
-                                  );
-                                }
-                              }}
-                            >
-                              {frontmatter.type || 'Unknown Type'}
+                                  if (frontmatter.type) {
+                                    setCurrentFilterTag(frontmatter.type);
+                                    history.replaceState(
+                                      null,
+                                      '',
+                                      `/blog?type=${frontmatter.type}`,
+                                    );
+                                  }
+                                }}
+                              >
+                                {frontmatter.type || 'Unknown Type'}
+                              </div>
+                            </div>
+                            <div className='text-lg font-semibold'>
+                              {frontmatter.title}
                             </div>
-                          </div>
-                          <div className='text-lg font-semibold'>
-                            {frontmatter.title}
-                          </div>
 
-                          <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
-                            <TextTruncate
-                              element='span'
-                              line={4}
-                              text={frontmatter.excerpt}
-                            />
-                          </div>
-                        </div>
-                        <div
-                          className={`
-                            flex 
-                            flex-row
-                            items-center
-                          `}
-                        >
-                          <div className='flex flex-row pl-2 mr-2'>
-                            {(frontmatter.authors || []).map(
-                              (author: Author, index: number) => (
-                                <div
-                                  key={index}
-                                  className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
-                                    frontmatter.authors.length > 2
-                                      ? 'h-8 w-8'
-                                      : 'h-11 w-11'
-                                  }`}
-                                  style={{
-                                    backgroundImage: `url(${author.photo})`,
-                                    zIndex: 10 - index,
-                                  }}
-                                />
-                              ),
-                            )}
+                            <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
+                              <TextTruncate
+                                element='span'
+                                line={4}
+                                text={frontmatter.excerpt}
+                              />
+                            </div>
                           </div>
-
                           <div
                             className={`
                               flex 
-                              flex-col
-                              items-start
+                              flex-row
+                              items-center
                             `}
                           >
-                            <div className='text-sm font-semibold'>
-                              {frontmatter.authors.length > 2 ? (
-                                <>
-                                  {frontmatter.authors
-                                    .slice(0, 2)
-                                    .map((author: Author, index: number) => (
+                            <div className='flex flex-row pl-2 mr-2'>
+                              {(frontmatter.authors || []).map(
+                                (author: Author, index: number) => (
+                                  <div
+                                    key={index}
+                                    className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
+                                      frontmatter.authors.length > 2
+                                        ? 'h-8 w-8'
+                                        : 'h-11 w-11'
+                                    }`}
+                                    style={{
+                                      backgroundImage: `url(${author.photo})`,
+                                      zIndex: 10 - index,
+                                    }}
+                                  />
+                                ),
+                              )}
+                            </div>
+
+                            <div
+                              className={`
+                                flex 
+                                flex-col
+                                items-start
+                              `}
+                            >
+                              <div className='text-sm font-semibold'>
+                                {frontmatter.authors.length > 2 ? (
+                                  <>
+                                    {frontmatter.authors
+                                      .slice(0, 2)
+                                      .map((author: Author, index: number) => (
+                                        <span key={author.name}>
+                                          {author.name}
+                                          {index === 0 && ' & '}
+                                        </span>
+                                      ))}
+                                    {'...'}
+                                  </>
+                                ) : (
+                                  frontmatter.authors.map(
+                                    (author: Author, index: number) => (
                                       <span key={author.name}>
                                         {author.name}
-                                        {index === 0 && ' & '}
+                                        {index < frontmatter.authors.length - 1 &&
+                                          ' & '}
                                       </span>
-                                    ))}
-                                  {'...'}
-                                </>
-                              ) : (
-                                frontmatter.authors.map(
-                                  (author: Author, index: number) => (
-                                    <span key={author.name}>
-                                      {author.name}
-                                      {index < frontmatter.authors.length - 1 &&
-                                        ' & '}
-                                    </span>
-                                  ),
-                                )
-                              )}
-                            </div>
+                                    ),
+                                  )
+                                )}
+                              </div>
 
-                            <div className='text-slate-500 text-sm dark:text-slate-300'>
-                              {frontmatter.date && (
-                                <span>
-                                  {date.toLocaleDateString('en-us', {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    day: 'numeric',
-                                  })}
-                                </span>
-                              )}{' '}
-                              &middot; {timeToRead} min read
+                              <div className='text-slate-500 text-sm dark:text-slate-300'>
+                                {frontmatter.date && (
+                                  <span>
+                                    {date.toLocaleDateString('en-us', {
+                                      year: 'numeric',
+                                      month: 'long',
+                                      day: 'numeric',
+                                    })}
+                                  </span>
+                                )}{' '}
+                                &middot; {timeToRead} min read
+                              </div>
                             </div>
                           </div>
                         </div>
                       </div>
-                    </Link>
-                  </div>
+                    </div>
+                  </Link>
                 </section>
               );
             })}
diff --git a/styles/globals.css b/styles/globals.css
index c54908065..c9a2f6151 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -317,7 +317,6 @@ border-radius: 4px; */
 .group {
   transition: all 0.3s ease;
 }
-
 .group:hover {
   transform: translateY(-2px);
 }
\ No newline at end of file

From 7380a60d885c9627c3cb3769587d3c1140fea639 Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Sun, 2 Feb 2025 04:14:29 +0000
Subject: [PATCH 09/10] blog page updated

---
 pages/blog/index.page.tsx | 31 ++++---------------------------
 1 file changed, 4 insertions(+), 27 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index d7b82f18a..78ab2fadd 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -258,30 +258,12 @@ export default function StaticMarkdownPage({
                         </div>
                         <div className='p-4 flex flex-col flex-1 justify-between'>
                           <div>
-                            <div>
-                              <div
-                                className='bg-blue-100 hover:bg-blue-200 dark:bg-slate-700 dark:text-blue-100 cursor-pointer font-semibold text-blue-800 inline-block px-3 py-1 rounded-full mb-4 text-sm'
-                                onClick={(e) => {
-                                  e.preventDefault();
-                                  e.stopPropagation();
-
-                                  if (frontmatter.type) {
-                                    setCurrentFilterTag(frontmatter.type);
-                                    history.replaceState(
-                                      null,
-                                      '',
-                                      `/blog?type=${frontmatter.type}`,
-                                    );
-                                  }
-                                }}
-                              >
-                                {frontmatter.type || 'Unknown Type'}
-                              </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'>
                               {frontmatter.title}
                             </div>
-
                             <div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
                               <TextTruncate
                                 element='span'
@@ -290,13 +272,8 @@ export default function StaticMarkdownPage({
                               />
                             </div>
                           </div>
-                          <div
-                            className={`
-                              flex 
-                              flex-row
-                              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) => (

From c34484f1562cfc616f4c7641b1645ce844db862b Mon Sep 17 00:00:00 2001
From: MadhavDhatrak <madhavdhatrak02@gmail.com>
Date: Thu, 6 Mar 2025 14:42:07 +0000
Subject: [PATCH 10/10] Fix: Marged conflict

---
 pages/blog/index.page.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/pages/blog/index.page.tsx b/pages/blog/index.page.tsx
index 3738e980e..ea863c5cc 100644
--- a/pages/blog/index.page.tsx
+++ b/pages/blog/index.page.tsx
@@ -130,7 +130,7 @@ export default function StaticMarkdownPage({
                 src={recentBlog[0].frontmatter.cover}
                 width={800}
                 height={450}
-                className='object-cover w-full h-full opacity-70'
+                className='object-cover w-full h-full opacity-70 blur-[5px]'
                 alt='hero image example'
               />
             </div>
@@ -142,7 +142,7 @@ export default function StaticMarkdownPage({
                 <h1 className='text-h1mobile ab1:text-h1 sm:text-h2 font-semibold text-stroke-1 mr-6 dark:slate-300'>
                   {recentBlog[0].frontmatter.title}
                 </h1>
-                <div className='flex ml-2 mb-2 '>
+                <div className='flex ml-2 mb-2 gap-2'>
                   <div
                     className='bg-slate-50 h-10 w-10 lg:h-[44px] lg:w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
                     style={{
@@ -246,7 +246,10 @@ 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='inline-flex flex-col flex-1 w-full'>
+                    <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}
@@ -355,7 +358,7 @@ export default function StaticMarkdownPage({
                           </Link>
                         </div>
                       </div>
-                    </div>
+                    </Link>
                   </div>
                 </section>
               );