Three-Card Blog Layout

1'use client'
2 
3import { ArrowRightIcon } from 'lucide-react'
4import { Card, CardContent } from '@/components/ui/card'
5import { blogs } from "@/components/data/blog-section-1-data"
6 
7export function BlogSection1() {
8  return (
9    <div className='mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
10      <div className='grid grid-cols-1 gap-6 lg:grid-cols-3'>
11        {blogs.map(blog => (
12          <Card key={blog.id} className='overflow-hidden py-0'>
13            <CardContent className='px-0'>
14              <div className='aspect-video'>
15                <img
16                  src={blog.image}
17                  alt={blog.title}
18                  className='size-full object-cover dark:opacity-90 dark:brightness-[0.95] dark:invert'
19                />
20              </div>
21              <div className='flex flex-col gap-3 p-6'>
22                <p className='text-muted-foreground text-xs tracking-widest uppercase'>{blog.category}</p>
23                <h3 className='text-xl font-bold'>{blog.title}</h3>
24                <p className='text-muted-foreground'>{blog.description}</p>
25                <a
26                  href='/'
27                  onClick={e => e.preventDefault()}
28                  className='inline-flex items-center gap-2 hover:text-inherit hover:underline'
29                >
30                  Learn More
31                  <ArrowRightIcon className='size-4' />
32                </a>
33              </div>
34            </CardContent>
35          </Card>
36        ))}
37      </div>
38    </div>
39  )
40}
41 
42export default BlogSection1