{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-section-1",
  "title": "Blog Section 1",
  "description": "Blog posts grid with featured articles and metadata",
  "registryDependencies": [
    "aspect-ratio",
    "https://shadcndesign-free.vercel.app/r/styles.json",
    "https://shadcndesign-free.vercel.app/r/tagline.json"
  ],
  "files": [
    {
      "path": "components/pro-blocks/landing-page/blog-sections/blog-section-1.tsx",
      "content": "\"use client\";\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport { Tagline } from \"@/components/pro-blocks/landing-page/tagline\";\n\ninterface BlogPost {\n  id: number;\n  title: string;\n  description: string;\n  date: string;\n  category: string;\n  image: string;\n}\n\nconst BLOG_POSTS: BlogPost[] = [\n  {\n    id: 1,\n    title: \"Getting Started with shadcn/ui: A Complete Guide\",\n    description:\n      \"Learn how to set up and maximize your development workflow with shadcn/ui's powerful component library.\",\n    date: \"Mar 15, 2024\",\n    category: \"Tutorial\",\n    image: \"https://ui.shadcn.com/placeholder.svg\",\n  },\n  {\n    id: 2,\n    title: \"Building Dark Mode with Next.js and Tailwind CSS\",\n    description:\n      \"Implement a seamless dark mode toggle in your Next.js application using Tailwind CSS and shadcn/ui.\",\n    date: \"Mar 12, 2024\",\n    category: \"Development\",\n    image: \"https://ui.shadcn.com/placeholder.svg\",\n  },\n  {\n    id: 3,\n    title: \"Mastering React Server Components\",\n    description:\n      \"Deep dive into React Server Components and learn how they can improve your application's performance.\",\n    date: \"Mar 8, 2024\",\n    category: \"Advanced\",\n    image: \"https://ui.shadcn.com/placeholder.svg\",\n  },\n  {\n    id: 4,\n    title: \"The Future of Web Development in 2024\",\n    description:\n      \"Explore the latest trends and technologies shaping the future of web development this year.\",\n    date: \"Mar 5, 2024\",\n    category: \"Insights\",\n    image: \"https://ui.shadcn.com/placeholder.svg\",\n  },\n];\n\nexport function BlogSection1() {\n  return (\n    <section\n      className=\"bg-background section-padding-y\"\n      aria-labelledby=\"blog-section-heading\"\n    >\n      <div className=\"container-padding-x mx-auto max-w-7xl gap-10 md:gap-12\">\n        <div className=\"flex flex-col items-center gap-10 md:gap-12\">\n          <div className=\"section-title-gap-lg mx-auto flex max-w-xl flex-col items-center text-center\">\n            <Tagline>Blog Section</Tagline>\n            <h1 id=\"blog-section-heading\" className=\"heading-lg\">\n              Learn what's new\n            </h1>\n            <p className=\"text-muted-foreground text-lg/8 text-pretty\">\n              Add a concise value statement that captures your reader's interest\n              and previews your content value.\n            </p>\n          </div>\n          <div\n            className=\"grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-4 lg:grid-cols-4\"\n            role=\"list\"\n          >\n            {BLOG_POSTS.map((post) => (\n              <Link href=\"#\" key={post.id} className=\"group block\">\n                <div className=\"flex flex-col gap-4 rounded-xl transition-all duration-200\">\n                  <AspectRatio\n                    ratio={4 / 3}\n                    className=\"overflow-hidden rounded-xl\"\n                  >\n                    <Image\n                      src={post.image}\n                      alt={`${post.title} thumbnail`}\n                      fill\n                      className=\"h-full w-full object-cover transition-transform duration-200 group-hover:scale-105\"\n                    />\n                  </AspectRatio>\n                  <div className=\"flex flex-col gap-3\">\n                    <div className=\"flex items-center gap-2 text-left\">\n                      <span className=\"text-muted-foreground text-sm\">\n                        {post.date}\n                      </span>\n                      <span className=\"text-muted-foreground text-sm\">·</span>\n                      <span className=\"text-muted-foreground text-sm\">\n                        {post.category}\n                      </span>\n                    </div>\n                    <h3 className=\"text-base font-semibold tracking-tight group-hover:underline\">\n                      {post.title}\n                    </h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      {post.description}\n                    </p>\n                  </div>\n                </div>\n              </Link>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/pro-blocks/landing-page/blog-sections/blog-section-1.tsx"
    }
  ],
  "type": "registry:component"
}