{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["aspect-ratio","@efferd/lazy-image","@efferd/full-width-divider"],"name":"blogs-3","description":"Immersive grid with images and gradients.","dependencies":["motion"],"categories":["blogs"],"files":[{"path":"registry/blocks/blogs/3/index.tsx","target":"~/components/blogs-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\nimport { LazyImage } from \"@/components/lazy-image\";\n\ntype BlogType = {\n\ttitle: string;\n\thref: string;\n\tdescription: string;\n\tauthor: string;\n\tcreatedAt: string;\n\treadTime: string;\n\timage: string;\n};\n\nconst blogs: BlogType[] = [\n\t{\n\t\ttitle: \"Design Systems That Scale\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Learn how to build and maintain scalable design systems that empower teams to move faster while staying consistent.\",\n\t\timage: \"https://storage.efferd.com/creative/beams.webp\",\n\t\tcreatedAt: \"2025-08-25\",\n\t\tauthor: \"Ava Mitchell\",\n\t\treadTime: \"7 min read\",\n\t},\n\t{\n\t\ttitle: \"The Psychology of Color in UI\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Explore how different colors influence user perception, emotion, and conversion in digital product design.\",\n\t\timage: \"https://storage.efferd.com/creative/plasma.webp\",\n\t\tcreatedAt: \"2025-07-14\",\n\t\tauthor: \"Liam Carter\",\n\t\treadTime: \"5 min read\",\n\t},\n\t{\n\t\ttitle: \"Microinteractions That Delight\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Discover how subtle animations and interactions can enhance usability and bring joy to your users.\",\n\t\timage: \"https://storage.efferd.com/creative/ripple-grid.webp\",\n\t\tcreatedAt: \"2025-06-30\",\n\t\tauthor: \"Sophia Kim\",\n\t\treadTime: \"6 min read\",\n\t},\n\t{\n\t\ttitle: \"Accessibility Beyond Compliance\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Practical steps to make your UI accessible, not just legally compliant, but genuinely inclusive for everyone.\",\n\t\timage: \"https://storage.efferd.com/creative/silk.webp\",\n\t\tcreatedAt: \"2025-06-18\",\n\t\tauthor: \"Ethan Rodriguez\",\n\t\treadTime: \"8 min read\",\n\t},\n\t{\n\t\ttitle: \"Dark Mode Done Right\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Tips and tricks to design beautiful and functional dark mode experiences that users will love.\",\n\t\timage: \"https://storage.efferd.com/creative/dark-veil.webp\",\n\t\tcreatedAt: \"2025-05-20\",\n\t\tauthor: \"Maya Chen\",\n\t\treadTime: \"4 min read\",\n\t},\n\t{\n\t\ttitle: \"Typography That Speaks\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"How to select and pair typefaces that enhance readability, hierarchy, and brand personality.\",\n\t\timage: \"https://storage.efferd.com/creative/threads.webp\",\n\t\tcreatedAt: \"2025-05-02\",\n\t\tauthor: \"Noah Patel\",\n\t\treadTime: \"9 min read\",\n\t},\n\t{\n\t\ttitle: \"The Future of UI Animation\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"From motion guidelines to advanced prototyping—discover where UI animation is headed in 2025.\",\n\t\timage: \"https://storage.efferd.com/creative/hyperspeed.webp\",\n\t\tcreatedAt: \"2025-04-15\",\n\t\tauthor: \"Chloe Ramirez\",\n\t\treadTime: \"10 min read\",\n\t},\n\t{\n\t\ttitle: \"Minimalism vs Maximalism\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"A deep dive into two opposing design philosophies and how to decide which fits your product.\",\n\t\timage: \"https://storage.efferd.com/creative/pixel-blast.webp\",\n\t\tcreatedAt: \"2025-04-01\",\n\t\tauthor: \"Benjamin Scott\",\n\t\treadTime: \"6 min read\",\n\t},\n\t{\n\t\ttitle: \"Designing for Mobile-First\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Best practices for mobile-first design, from layout decisions to performance optimization.\",\n\t\timage: \"https://storage.efferd.com/creative/floating-lines.webp\",\n\t\tcreatedAt: \"2025-03-22\",\n\t\tauthor: \"Isabella White\",\n\t\treadTime: \"7 min read\",\n\t},\n\t{\n\t\ttitle: \"Figma Hacks for Power Users\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"Hidden features, shortcuts, and workflows in Figma that can dramatically speed up your design process.\",\n\t\timage: \"https://storage.efferd.com/creative/color-bends.webp\",\n\t\tcreatedAt: \"2025-03-09\",\n\t\tauthor: \"James Walker\",\n\t\treadTime: \"5 min read\",\n\t},\n\t{\n\t\ttitle: \"Designing With AI Tools\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"A practical look at how AI tools are shaping UI/UX workflows—from ideation to final delivery.\",\n\t\timage: \"https://storage.efferd.com/creative/light-rays.webp\",\n\t\tcreatedAt: \"2025-02-28\",\n\t\tauthor: \"Olivia Brooks\",\n\t\treadTime: \"8 min read\",\n\t},\n\t{\n\t\ttitle: \"The Art of Prototyping\",\n\t\thref: \"#\",\n\t\tdescription:\n\t\t\t\"How to create prototypes that effectively communicate your ideas and speed up stakeholder feedback.\",\n\t\timage: \"https://storage.efferd.com/creative/orb.webp\",\n\t\tcreatedAt: \"2025-02-14\",\n\t\tauthor: \"Daniel Green\",\n\t\treadTime: \"6 min read\",\n\t},\n];\n\nexport function BlogsSection() {\n\treturn (\n\t\t<div className=\"mx-auto w-full max-w-5xl grow\">\n\t\t\t<div className=\"space-y-1 px-4 py-8 md:px-6\">\n\t\t\t\t<h1 className=\"font-semibold text-2xl tracking-wide md:text-4xl\">\n\t\t\t\t\tBlog Section\n\t\t\t\t</h1>\n\t\t\t\t<p className=\"text-muted-foreground text-sm md:text-base\">\n\t\t\t\t\tDiscover the latest trends and insights in the world of design and\n\t\t\t\t\ttechnology.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<FullWidthDivider contained={true} />\n\t\t\t<div className=\"z-10 grid p-4 md:grid-cols-2 lg:grid-cols-3\">\n\t\t\t\t{blogs.map((blog) => (\n\t\t\t\t\t<BlogCard {...blog} key={blog.title} />\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction BlogCard({\n\ttitle,\n\tdescription,\n\tcreatedAt,\n\treadTime,\n\timage,\n\tauthor,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"a\"> & BlogType) {\n\treturn (\n\t\t<a\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-lg group flex flex-col gap-2 p-3 hover:bg-muted/50 active:bg-muted\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tkey={title}\n\t\t\t{...props}\n\t\t>\n\t\t\t<LazyImage\n\t\t\t\talt={title}\n\t\t\t\tclassName=\"transition-all duration-500 group-hover:scale-105\"\n\t\t\t\tcontainerClassName=\"cn-rounded shadow-md outline outline-offset-3 outline-border/50\"\n\t\t\t\tfallback=\"https://placehold.co/640x360?text=fallback-image\"\n\t\t\t\tinView={true}\n\t\t\t\tratio={16 / 9}\n\t\t\t\tsrc={image}\n\t\t\t/>\n\t\t\t<div className=\"space-y-2 px-2 pb-2\">\n\t\t\t\t<div className=\"flex items-center gap-2 text-[11px] text-muted-foreground group-hover:text-foreground sm:text-xs\">\n\t\t\t\t\t<p>by {author}</p>\n\t\t\t\t\t<div className=\"size-1 rounded-full bg-muted-foreground\" />\n\t\t\t\t\t<p>{createdAt}</p>\n\t\t\t\t\t<div className=\"size-1 rounded-full bg-muted-foreground\" />\n\t\t\t\t\t<p>{readTime}</p>\n\t\t\t\t</div>\n\t\t\t\t<h2 className=\"line-clamp-2 font-semibold text-lg\">{title}</h2>\n\t\t\t\t<p className=\"line-clamp-3 text-muted-foreground text-sm group-active:text-foreground\">\n\t\t\t\t\t{description}\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</a>\n\t);\n}\n"}]}