{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-cards-layout-01",
  "type": "registry:block",
  "description": "Blog cards with view more button",
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/blog-cards-layout-01/page.tsx",
      "content": "\"use client\"\n\nimport { ArrowDown } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from \"@/components/ui/card\"\n\nconst POSTS = [\n  {\n    img: \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop\",\n    tag: \"Enterprise\",\n    title: \"Autodesk looks to future of 3D printing with Project Escher\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"10 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&auto=format&fit=crop\",\n      name: \"Ryan Samuel\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop\",\n    tag: \"Startups\",\n    title: \"Lyft launching cross-platform service this week\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"12 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&auto=format&fit=crop\",\n      name: \"Nora Hazel\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800&auto=format&fit=crop\",\n    tag: \"Trending\",\n    title: \"6 insights into the French Fashion landscape\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"16 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&auto=format&fit=crop\",\n      name: \"Otto Gonzalez\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&auto=format&fit=crop\",\n    tag: \"Enterprise\",\n    title: \"Autodesk looks to future of 3D printing with Project Escher\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"18 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&auto=format&fit=crop\",\n      name: \"Ryan Samuel\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=800&auto=format&fit=crop\",\n    tag: \"Lifestyle\",\n    title: \"Lyft launching cross-platform service this week\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"18 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&auto=format&fit=crop\",\n      name: \"Nora Hazel\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1497366412874-3415097a27e7?w=800&auto=format&fit=crop\",\n    tag: \"Startups\",\n    title: \"6 insights into the French Fashion landscape\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"22 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&auto=format&fit=crop\",\n      name: \"Otto Gonzalez\",\n    },\n  },\n]\n\nexport default function BlogCardsLayout01() {\n  return (\n    <section className=\"py-16\">\n      <div className=\"container mx-auto mb-12 text-center\">\n        <p className=\"text-primary mb-2 text-sm font-semibold\">\n          Latest Blog Posts\n        </p>\n        <h2 className=\"my-4 text-3xl font-bold\">Blog Posts</h2>\n        <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n          This is the paragraph where you can write more details about blogs.\n          Keep you user engaged by providing meaningful information.\n        </p>\n      </div>\n      <div className=\"container mx-auto grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n        {POSTS.map(({ img, tag, title, desc, date, author }) => (\n          <Card key={title} className=\"overflow-hidden\">\n            <CardHeader className=\"p-3\">\n              <img\n                src={img}\n                alt={title}\n                className=\"h-56 w-full rounded-lg object-cover object-center\"\n              />\n            </CardHeader>\n            <CardContent className=\"p-6\">\n              <Badge variant=\"secondary\" className=\"mb-2\">\n                {tag}\n              </Badge>\n              <h3 className=\"mb-2 text-xl font-semibold\">{title}</h3>\n              <p className=\"text-muted-foreground text-sm\">{desc}</p>\n            </CardContent>\n            <CardFooter className=\"flex items-center gap-3 px-6 pt-0 pb-6\">\n              <Avatar className=\"h-8 w-8\">\n                <AvatarImage src={author.img} alt={author.name} />\n                <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>\n              </Avatar>\n              <div className=\"flex flex-col\">\n                <p className=\"text-sm font-semibold\">{author.name}</p>\n                <p className=\"text-muted-foreground text-xs\">{date}</p>\n              </div>\n            </CardFooter>\n          </Card>\n        ))}\n      </div>\n      <div className=\"mt-12 text-center\">\n        <Button variant=\"ghost\">\n          <ArrowDown className=\"mr-2 h-4 w-4\" />\n          View More\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/blog-cards-layout/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1200px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "blog-sections"
  ]
}