Bloglist5

1export default function Featured() {
2  return (
3    <div className="mx-auto max-w-7xl px-4 py-12">
4      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
5        <a
6          href="#"
7          className="group relative min-h-96 overflow-hidden rounded-lg"
8        >
9          <img loading="lazy" decoding="async"
10            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
11            alt="Featured post"
12            width={800}
13            height={450}
14            className="absolute inset-0 size-full select-none object-cover transition group-hover:scale-105"
15          />
16          <div className="absolute inset-0 select-none bg-linear-to-t from-black to-transparent" />
17          <div className="relative mt-0 flex h-full flex-col items-end justify-end p-4 md:p-6 lg:p-8">
18            <h2 className="text-balance text-xl font-semibold text-white md:text-3xl lg:text-4xl">
19              The Future of Web Development: Embracing the Power of AI
20            </h2>
21            <p className="mt-2 text-sm text-white md:text-base">
22              Explore the latest advancements in AI-powered web development and
23              how they are transforming the industry.
24            </p>
25          </div>
26        </a>
27        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
28          <a
29            href="#"
30            className="block overflow-hidden rounded-lg border bg-background"
31          >
32            <img loading="lazy" decoding="async"
33              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
34              alt="Blog Post 1"
35              width={400}
36              height={225}
37              className="h-40 w-full object-cover"
38            />
39            <div className="p-4">
40              <div className="mb-4 flex items-center space-x-2">
41                <div className="shrink-0">
42                  <img loading="lazy" decoding="async"
43                    src="https://mynaui.com/avatars/avatar-02.webp"
44                    alt="Author Avatar"
45                    width={32}
46                    height={32}
47                    className="size-8 rounded-full"
48                  />
49                </div>
50                <div className="min-w-0 flex-1">
51                  <p className="text-sm font-medium">Jane Smith</p>
52                  <p className="text-sm text-muted-foreground">
53                    Published on June 10, 2024
54                  </p>
55                </div>
56// … truncated