# Blog 1

> Blog

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/blog-1).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/blog-1
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/blog-1/light.png
- Registry item: https://blocks.cnippet.dev/r/blog-1.json
- Categories: blog
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/blog-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/badge`, `@cnippet/button`

## Files

### `registry/default/sections/blog-1.tsx`

```tsx
"use client";

import Image from "next/image";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const featuredPost = {
  author: {
    avatar:
      "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/a3.jpg",
    name: "Dr. Anika Dimitrov",
  },
  category: "Mysteries & Legends",
  image: "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h1.jpg",
  publishedDate: "March 16, 2025",
  readTime: "5 min read",
  title: "The Rosetta Stone: Decoding Ancient Egypt",
};

const posts = [
  {
    category: "Mysteries & Legends",
    image:
      "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h10.jpg",
    publishedDate: "March 16, 2025",
    readTime: "5 min read",
    title: "The Curse of the Pharaohs: Fact or Fiction?",
  },
  {
    category: "Preservation & Restoration",
    image:
      "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h6.jpg",
    publishedDate: "March 16, 2025",
    readTime: "5 min read",
    title: "How 3D Printing is Preserving Ancient Artifacts",
  },
  {
    category: "Ancient Civilizations",
    image:
      "https://res.cloudinary.com/dcxm3ccir/image/upload/v1741613286/h4.jpg",
    publishedDate: "March 16, 2025",
    readTime: "5 min read",
    title: "Top 5 Archaeological Discoveries of the 21st Century",
  },
];

export default function BlogVariant4() {
  return (
    <section className="w-full bg-gray-100 py-12 sm:py-16 lg:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-0">
        <article className="grid grid-cols-1 gap-8 rounded-3xl bg-white p-5 lg:grid-cols-2 lg:gap-12">
          <div className="flex flex-col justify-center">
            <div className="flex items-center gap-3">
              <div className="relative size-12 overflow-hidden rounded-md">
                <Image
                  alt={featuredPost.author.name}
                  className="object-cover"
                  fill
                  src={featuredPost.author.avatar}
                />
              </div>

              <div>
                <p className="text-gray-500 text-sm">Article by</p>
                <p className="font-medium font-onest text-gray-900">
                  {featuredPost.author.name}
                </p>
              </div>
            </div>

            <Badge
              className="mt-4 w-fit border-none px-0 font-onest text-blue-600 text-sm"
              variant="outline"
            >
              {featuredPost.category}
            </Badge>

            <h2 className="mt-2 font-normal font-onest text-3xl text-gray-900 leading-tight tracking-tight sm:text-4xl lg:text-5xl">
              {featuredPost.title}
            </h2>

            <p className="mt-2 text-gray-500 text-sm">
              Published on {featuredPost.publishedDate}
            </p>

            <div className="mt-auto flex items-center gap-4">
              <Button
                className="rounded-full border-blue-600 bg-blue-600 font-normal text-white hover:bg-blue-700"
                render={<Link href="#" />}
                size="xl"
              >
                Read More
              </Button>

              <span className="text-gray-500 text-sm">
                {featuredPost.readTime}
              </span>
            </div>
          </div>

          <div className="relative aspect-video w-full overflow-hidden rounded-b-2xl rounded-tl-2xl lg:aspect-auto lg:h-full lg:min-h-100">
            <Image
              alt={featuredPost.title}
              className="object-cover"
              fill
              src={featuredPost.image}
            />

            <span className="absolute top-0 right-0 rounded-bl-lg bg-white px-3 py-1 font-medium text-gray-600 text-xs">
              {featuredPost.readTime}
              <div className="absolute top-0 right-auto bottom-auto -left-2 flex h-2 w-2 items-center justify-center">
                <svg
                  fill="none"
                  height="8"
                  viewBox="0 0 8 8"
                  width="8"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clipRule="evenodd"
                    d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z"
                    fill="white"
                    fillRule="evenodd"
                  />
                </svg>
              </div>
              <div className="absolute top-auto right-0 -bottom-2 left-auto flex h-2 w-2 items-center justify-center">
                <svg
                  fill="none"
                  height="8"
                  viewBox="0 0 8 8"
                  width="8"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    clipRule="evenodd"
                    d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z"
                    fill="white"
                    fillRule="evenodd"
                  />
                </svg>
              </div>
            </span>
          </div>
        </article>

        <div className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {posts.map((post) => (
            <article
              className="group relative cursor-pointer rounded-3xl bg-white p-5"
              key={post.title}
            >
              <div className="relative">
                <div className="relative aspect-video min-h-60 w-full overflow-hidden rounded-2xl">
                  <Image
                    alt={post.title}
                    className="object-cover transition-transform duration-300 group-hover:scale-105"
                    fill
                    src={post.image}
                  />
                </div>

                <span className="absolute top-0 right-0 rounded-bl-lg bg-white px-3 py-1 font-medium text-gray-600 text-xs">
                  {post.readTime}
                  <div className="absolute top-0 right-auto bottom-auto -left-2 flex h-2 w-2 items-center justify-center">
                    <svg
                      fill="none"
                      height="8"
                      viewBox="0 0 8 8"
                      width="8"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clipRule="evenodd"
                        d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z"
                        fill="white"
                        fillRule="evenodd"
                      />
                    </svg>
                  </div>
                  <div className="absolute top-auto right-0 -bottom-2 left-auto flex h-2 w-2 items-center justify-center">
                    <svg
                      fill="none"
                      height="8"
                      viewBox="0 0 8 8"
                      width="8"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        clipRule="evenodd"
                        d="M8 0H0C4.41828 0 8 3.58172 8 8V0Z"
                        fill="white"
                        fillRule="evenodd"
                      />
                    </svg>
                  </div>
                </span>
              </div>

              <div className="mt-4">
                <Link
                  className="font-medium font-onest text-blue-600 text-sm hover:text-blue-700"
                  href="#"
                >
                  <span className="absolute inset-0" />
                  {post.category}
                </Link>

                <h3 className="mt-2 font-medium font-onest text-gray-900 text-xl! leading-snug sm:text-2xl!">
                  {post.title}
                </h3>

                <p className="mt-2 text-gray-500 text-sm">
                  Published on {post.publishedDate}
                </p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
```