Blog

import { ArrowRight } from 'lucide-react';import { Badge } from '@/components/ui/badge';import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';import { cn } from '@/lib/utils';interface Post {  id: string;  title: string;  summary: string;  label: string;  author: string;  published: string;  url: string;  image: string;}interface Blog7Props {  tagline?: string;  heading?: string;  description?: string;  buttonText?: string;  buttonUrl?: string;  posts?: Post[];  className?: string;}const Blog7 = ({  tagline = 'Latest Updates',  heading = 'Blog',  description = 'Discover the latest trends, tips, and best practices in modern web development. From UI components to design systems, stay updated with our expert insights.',  posts = [    {      id: 'post-1',      title: 'Getting Started with shadcn/ui Components',      summary:        "Learn how to quickly integrate and customize shadcn/ui components in your Next.js projects. We'll cover installation, theming, and best practices for building modern interfaces.",      label: 'Tutorial',      author: 'Sarah Chen',      published: '12 Mar 2025',      url: 'https://www.shadcnblocks.com',      image: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg',    },    {      id: 'post-2',      title: 'Building Accessible Web Applications',      summary:        "Explore how to create inclusive web experiences using shadcn/ui's accessible components. Discover practical tips for implementing ARIA labels, keyboard navigation, and semantic HTML.",      label: 'Accessibility',      author: 'Marcus Rodriguez',      published: '27 Feb 2025',      url: '#',      image: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg',    },    {      id: 'post-3',      title: 'Modern Design Systems with Tailwind CSS',      summary:        'Dive into creating scalable design systems using Tailwind CSS and shadcn/ui. Learn how to maintain consistency while building flexible and maintainable component libraries.',      label: 'Design Systems',      author: 'Emma Thompson',      published: '9 Jan 2025',      url: '#',      image: 'https://deifkwefumgah.cloudfront.net/shadcnblocks/block/placeholder-dark-1.svg',    },  ],  className,}: Blog7Props) => {  return (    <section className={cn('py-32', className)}>      <div className="container mx-auto flex flex-col items-center gap-8">        <div className="text-center">          <Badge variant="secondary" className="mb-6">            {tagline}          </Badge>          <h2 className="mb-3 text-5xl tracking-tighter text-pretty md:mb-4 lg:mb-6 lg:max-w-3xl lg:text-7xl">            {heading}          </h2>          <p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">            {description}          </p>        </div>        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">          {posts.map((post) => (            <Card              key={post.id}              className="grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0"            >              <div className="aspect-video w-full">                <a                  href={post.url}                  target="_blank"                  className="transition-opacity duration-200 fade-in hover:opacity-70"                >                  <img                    src={post.image}                    alt={post.title}                    className="h-full w-full object-cover object-center"                  />                </a>              </div>              <CardHeader>                <h3 className="text-xl hover:underline md:text-xl">                  <a href={post.url} target="_blank">                    {post.title}                  </a>                </h3>                <p className="mt-2 text-sm font-semibold text-foreground/80">                  {post.author} · {post.published}                </p>              </CardHeader>              <CardContent>                <p className="leading-relaxed text-muted-foreground">{post.summary}</p>              </CardContent>              <CardFooter>                <a                  href={post.url}                  target="_blank"                  className="relative flex items-center text-muted-foreground after:absolute after:inset-x-0 after:-inset-y-3 hover:underline"                >                  Read more                  <ArrowRight className="ml-1 size-4" />                </a>              </CardFooter>            </Card>          ))}        </div>      </div>    </section>  );};// Based on https://shadcnblocks.com/block/blog7export default function BlogExample() {  return <Blog7 />;}