Skip to content

Commit 98cd2ca

Browse files
MadhavDhatrakMadhavDhatrak
committed
Add hover and Read More to blog cards
1 parent ee9538b commit 98cd2ca

File tree

2 files changed

+82
-73
lines changed

2 files changed

+82
-73
lines changed

‎pages/blog/index.page.tsx‎

Lines changed: 55 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -245,82 +245,56 @@ export default function StaticMarkdownPage({
245245

246246
return (
247247
<section key={blogPost.slug}>
248-
<div className='h-[498px] flex border rounded-lg shadow-sm hover:shadow-lg transition-all overflow-hidden dark:border-slate-500'>
248+
<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'>
249249
<Link
250250
href={`/blog/posts/${blogPost.slug}`}
251251
className='inline-flex flex-col flex-1 w-full'
252252
>
253-
<div
254-
className='bg-slate-50 h-[160px] w-full self-stretch mr-3 bg-cover bg-center'
255-
style={{ backgroundImage: `url(${frontmatter.cover})` }}
256-
/>
257-
<div className=' p-4 flex flex-col flex-1 justify-between'>
253+
<div className='relative w-full h-[200px] overflow-hidden'>
254+
<Image
255+
src={frontmatter.cover}
256+
fill
257+
className='object-cover transition-transform duration-300 group-hover:scale-105'
258+
alt={frontmatter.title}
259+
/>
260+
</div>
261+
<div className='p-4 flex flex-col flex-1 justify-between'>
258262
<div>
259-
<div>
260-
<div
261-
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'
262-
onClick={(e) => {
263-
e.preventDefault();
264-
e.stopPropagation();
265-
266-
if (frontmatter.type) {
267-
setCurrentFilterTag(frontmatter.type);
268-
history.replaceState(
269-
null,
270-
'',
271-
`/blog?type=${frontmatter.type}`,
272-
);
273-
}
274-
}}
275-
>
276-
{frontmatter.type || 'Unknown Type'}
277-
</div>
263+
<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'>
264+
{frontmatter.type || 'Unknown Type'}
278265
</div>
279-
<div className='text-lg font-semibold'>
266+
<div className='text-lg font-semibold group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300'>
280267
{frontmatter.title}
281268
</div>
282269

283270
<div className='mt-3 mb-6 text-slate-500 dark:text-slate-300'>
284271
<TextTruncate
285272
element='span'
286-
line={4}
273+
line={3}
287274
text={frontmatter.excerpt}
288275
/>
289276
</div>
290277
</div>
291-
<div
292-
className={`
293-
flex
294-
flex-row
295-
items-center
296-
`}
297-
>
298-
<div className='flex flex-row pl-2 mr-2'>
299-
{(frontmatter.authors || []).map(
300-
(author: Author, index: number) => (
301-
<div
302-
key={index}
303-
className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
304-
frontmatter.authors.length > 2
305-
? 'h-8 w-8'
306-
: 'h-11 w-11'
307-
}`}
308-
style={{
309-
backgroundImage: `url(${author.photo})`,
310-
zIndex: 10 - index,
311-
}}
312-
/>
313-
),
314-
)}
315-
</div>
316-
317-
<div
318-
className={`
319-
flex
320-
flex-col
321-
items-start
322-
`}
323-
>
278+
<div className='flex flex-col space-y-4'>
279+
<div className='flex items-center'>
280+
<div className='flex flex-row pl-2 mr-2'>
281+
{(frontmatter.authors || []).map(
282+
(author: Author, index: number) => (
283+
<div
284+
key={index}
285+
className={`bg-slate-50 rounded-full -ml-3 bg-cover bg-center border-2 border-white ${
286+
frontmatter.authors.length > 2
287+
? 'h-8 w-8'
288+
: 'h-11 w-11'
289+
}`}
290+
style={{
291+
backgroundImage: `url(${author.photo})`,
292+
zIndex: 10 - index,
293+
}}
294+
/>
295+
),
296+
)}
297+
</div>
324298
<div className='text-sm font-semibold'>
325299
{frontmatter.authors.length > 2 ? (
326300
<>
@@ -346,19 +320,27 @@ export default function StaticMarkdownPage({
346320
)
347321
)}
348322
</div>
349-
350-
<div className='text-slate-500 text-sm dark:text-slate-300'>
351-
{frontmatter.date && (
352-
<span>
353-
{date.toLocaleDateString('en-us', {
354-
year: 'numeric',
355-
month: 'long',
356-
day: 'numeric',
357-
})}
358-
</span>
359-
)}{' '}
360-
&middot; {timeToRead} min read
361-
</div>
323+
</div>
324+
<div className='flex items-center justify-between pt-2 border-t dark:border-slate-600'>
325+
<span className='text-sm text-slate-500 dark:text-slate-300'>
326+
{timeToRead} min read
327+
</span>
328+
<span className='text-blue-600 dark:text-blue-400 font-medium flex items-center group-hover:translate-x-1 transition-transform duration-300'>
329+
Read More
330+
<svg
331+
className='ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform duration-300'
332+
fill='none'
333+
stroke='currentColor'
334+
viewBox='0 0 24 24'
335+
>
336+
<path
337+
strokeLinecap='round'
338+
strokeLinejoin='round'
339+
strokeWidth={2}
340+
d='M9 5l7 7-7 7'
341+
/>
342+
</svg>
343+
</span>
362344
</div>
363345
</div>
364346
</div>

‎styles/globals.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,4 +299,31 @@ border-radius: 4px; */
299299
}
300300
.scrollbar-hidden::-webkit-scrollbar {
301301
display: none;
302+
}
303+
304+
@keyframes shine {
305+
from {
306+
transform: translateX(-100%);
307+
}
308+
to {
309+
transform: translateX(200%);
310+
}
311+
}
312+
313+
.shine-animation {
314+
animation: shine 2s infinite;
315+
}
316+
317+
/* Add smooth transitions for dark mode */
318+
.dark .group:hover {
319+
background: rgba(255, 255, 255, 0.05);
320+
}
321+
322+
/* Enhance card interactions */
323+
.group {
324+
transition: all 0.3s ease;
325+
}
326+
327+
.group:hover {
328+
transform: translateY(-2px);
302329
}

0 commit comments

Comments
 (0)