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] 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