Bloglist2

1export default function WithHeading() {
2  return (
3    <section className="bg-muted">
4      <header className="border-b bg-background py-8 md:py-16">
5        <div className="mx-auto max-w-7xl px-4">
6          <h1 className="text-2xl font-bold tracking-tight">
7            Our Latest Blog Posts
8          </h1>
9          <p className="mt-2 max-w-3xl text-muted-foreground">
10            Discover the latest insights, trends, and news from our expert team.
11          </p>
12        </div>
13      </header>
14      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-4 py-12 md:grid-cols-2 md:py-16 lg:grid-cols-4">
15        <a
16          href="#"
17          className="block overflow-hidden rounded-lg border bg-background md:col-span-2"
18        >
19          <img
20            loading="lazy"
21            decoding="async"
22            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
23            alt="Featured Blog Post"
24            width={800}
25            height={450}
26            className="h-56 w-full border-b object-cover"
27          />
28          <div className="bg-background p-4">
29            <h2 className="mb-1 text-balance text-xl font-semibold tracking-tight">
30              The Future of Web Development: Embracing the Generative Revolution
31            </h2>
32            <p className="line-clamp-2 text-sm text-muted-foreground">
33              Discover how the latest advancements in generative AI are
34              transforming the way we build web applications.
35            </p>
36            <div className="mt-4 flex items-center space-x-4">
37              <div className="shrink-0">
38                <img
39                  loading="lazy"
40                  decoding="async"
41                  src="https://mynaui.com/avatars/avatar-01.webp"
42                  alt="Author Avatar"
43                  width={40}
44                  height={40}
45                  className="size-10 rounded-full"
46                />
47              </div>
48              <div className="min-w-0 flex-1">
49                <p className="text-sm font-medium">Praveen Juge</p>
50                <p className="text-sm text-muted-foreground">
51                  Published on June 15, 2024
52                </p>
53              </div>
54            </div>
55          </div>
56        </a>
57        <a
58          href="#"
59          className="block overflow-hidden rounded-lg border bg-background"
60        >
61          <img
62            loading="lazy"
63            decoding="async"
64// … truncated