Skip to content

Commit 2dba54c

Browse files
DarkPhoenix2704DarkPhoenix2704
committed
refactor: redesign blog cards with grid layout and updated visual style
1 parent 96c27d0 commit 2dba54c

File tree

2 files changed

+31
-73
lines changed

2 files changed

+31
-73
lines changed

‎app/blog/page.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,6 @@ export default async function BlogPage({searchParams}: {
6060
<h5 className="text-nc-content-grey-subtle mt-6 lg:mt-2 text-base leading-6 font-medium">
6161
Insights, tutorials, and updates from the team building the future of no-code databases.
6262
</h5>
63-
<div className="mt-6">
64-
<SearchInput />
65-
</div>
6663
</div>
6764
<Separator className="mb-12" />
6865

@@ -88,7 +85,7 @@ export default async function BlogPage({searchParams}: {
8885
</p>
8986
</div>
9087
) : (
91-
<div className="flex flex-col">
88+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-0">
9289
{displayedPosts.map((post) => (
9390
<BlogCard post={post} key={post.url}/>
9491
))}

‎components/blog/BlogCard.tsx‎

Lines changed: 30 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Link from 'next/link'
2-
import {ArrowRight} from 'lucide-react'
32
import Image from 'next/image'
43

54
interface BlogCardProps {
@@ -20,79 +19,41 @@ interface BlogCardProps {
2019
export default function BlogCard({post}: BlogCardProps) {
2120
return (
2221
<Link href={post.url} className="group block">
23-
<div className="relative w-full border-b border-dashed border-nc-border-grey-medium py-6 md:py-8 hover:bg-white/50 transition-all duration-300">
24-
{/* Mobile: Category and Date on top */}
25-
<div className="flex items-center justify-between mb-4 md:hidden">
26-
<div className="text-sm text-nc-content-grey-muted-2 uppercase tracking-wide">
27-
[{post.data.category}]
28-
</div>
29-
<div className="text-sm text-nc-content-grey-muted-2 uppercase tracking-wide">
30-
{new Date(post.data.date).toLocaleDateString("en-US", {
31-
month: "short",
32-
day: "2-digit",
33-
})}
34-
</div>
22+
<div className="relative w-full bg-white hover:bg-gray-50 border border-gray-200 -ml-[1px] -mt-[1px] transition-colors duration-200">
23+
{/* Thumbnail */}
24+
<div className="relative w-full h-56 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 overflow-hidden">
25+
<Image
26+
src={post.data.image}
27+
alt={post.data.title}
28+
fill
29+
className="object-cover"
30+
/>
3531
</div>
36-
37-
{/* Desktop Layout */}
38-
<div className="hidden md:flex items-start px-4 justify-between gap-8">
39-
{/* Thumbnail */}
40-
<div className="relative w-32 h-20 flex-shrink-0 rounded-lg overflow-hidden bg-nc-background-grey-light">
41-
<Image
42-
src={post.data.image}
43-
alt={post.data.title}
44-
fill
45-
className="object-cover group-hover:scale-105 transition-transform duration-300"
46-
/>
47-
</div>
32+
33+
{/* Content */}
34+
<div className="p-6">
35+
{/* Title */}
36+
<h3 className="text-xl font-semibold text-gray-900 mb-3 line-clamp-2">
37+
{post.data.title}
38+
</h3>
4839

49-
{/* Content */}
50-
<div className="flex-1">
51-
<div className="text-base text-nc-content-grey-subtle font-normal mb-2 transition-all group-hover:text-nc-content-grey-emphasis">
52-
{post.data.title}
53-
</div>
54-
55-
<p className="text-nc-content-grey-subtle-2 text-sm leading-6 line-clamp-2 transition-all">
56-
{post.data.description}
57-
</p>
58-
</div>
40+
{/* Description */}
41+
<p className="text-gray-600 text-sm leading-relaxed line-clamp-2 mb-4">
42+
{post.data.description}
43+
</p>
5944

60-
{/* Right side: Date, Category, Arrow */}
61-
<div className="flex items-start gap-6 flex-shrink-0">
62-
<div className="text-sm text-nc-content-grey-muted-2 uppercase tracking-wide w-16 text-right">
45+
{/* Author and Date */}
46+
<div className="flex items-center gap-2 text-sm text-gray-500">
47+
<div className="w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center text-xs font-medium">
48+
{post.data.author.charAt(0).toUpperCase()}
49+
</div>
50+
<span>
6351
{new Date(post.data.date).toLocaleDateString("en-US", {
64-
month: "short",
65-
day: "2-digit",
52+
month: "long",
53+
day: "numeric",
54+
year: "numeric"
6655
})}
67-
</div>
68-
69-
<div className="text-sm text-nc-content-grey-muted-2 uppercase tracking-wide w-32 text-right">
70-
[{post.data.category}]
71-
</div>
72-
73-
<ArrowRight className="w-5 h-5 text-nc-content-grey-muted-2 group-hover:text-nc-content-brand-default group-hover:translate-x-1 transition-all flex-shrink-0" />
74-
</div>
75-
</div>
76-
77-
{/* Mobile: Thumbnail and Content */}
78-
<div className="md:hidden flex gap-4">
79-
<div className="relative w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-nc-background-grey-light">
80-
<Image
81-
src={post.data.image}
82-
alt={post.data.title}
83-
fill
84-
className="object-cover"
85-
/>
86-
</div>
87-
88-
<div className="flex-1">
89-
<div className="text-base text-nc-content-grey-subtle line-clamp-2 font-normal mb-2 transition-all">
90-
{post.data.title}
91-
</div>
92-
93-
<p className="text-nc-content-grey-subtle-2 text-sm leading-5 line-clamp-2 transition-all">
94-
{post.data.description}
95-
</p>
56+
</span>
9657
</div>
9758
</div>
9859
</div>

0 commit comments

Comments
 (0)