Blog List
Displays blog posts with headlines, snippets, publication dates, and thumbnail images in a clean, organized layout for easy navigation and reading.
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
export default function Basic() {
return (
<section className="mx-auto max-w-7xl px-4 py-12">
<div className="grid grid-cols-1 gap-8 text-sm md:grid-cols-2 lg:grid-cols-3">
<a href="#" className="block overflow-hidden rounded-lg border">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={160}
className="h-40 w-full border-b object-cover object-center"
/>
<div className="p-4">
<h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
Mastering the Art of Minimalist Design
</h3>
<p className="mb-4 line-clamp-3 text-muted-foreground">
Discover the power of minimalism in design and how it can
transform your projects. Learn the key principles and techniques
to create clean, elegant, and impactful designs.
</p>
<div className="flex items-center font-medium">
<Avatar className="mr-2 size-6">
<AvatarImage src="https://mynaui.com/avatars/avatar-01.jpg" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<span>Praveen Juge</span>
</div>
</div>
</a>
<a href="#" className="block overflow-hidden rounded-lg border">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={160}
className="h-40 w-full border-b object-cover object-center"
/>
<div className="p-4">
<h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
Unleashing the Potential of React Hooks
</h3>
<p className="mb-4 line-clamp-3 text-muted-foreground">
Explore the power of React Hooks and learn how to leverage them to
build more efficient and maintainable web applications. Discover
the latest best practices and techniques.
</p>
<div className="flex items-center font-medium">
<Avatar className="mr-2 size-6">
<AvatarImage src="https://mynaui.com/avatars/avatar-02.jpg" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<span>Jane Smith</span>
</div>
</div>
</a>
<a href="#" className="block overflow-hidden rounded-lg border">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={160}
className="h-40 w-full border-b object-cover object-center"
/>
<div className="p-4">
<h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
Exploring the Future of Serverless Computing
</h3>
<p className="mb-4 line-clamp-3 text-muted-foreground">
Dive into the world of serverless computing and discover how it
can revolutionize the way you build and deploy applications. Learn
about the latest trends and best practices.
</p>
<div className="flex items-center font-medium">
<Avatar className="mr-2 size-6">
<AvatarImage src="https://mynaui.com/avatars/avatar-03.jpg" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<span>Bob Johnson</span>
</div>
</div>
</a>
<a href="#" className="block overflow-hidden rounded-lg border">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={160}
className="h-40 w-full border-b object-cover object-center"
/>
<div className="p-4">
<h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
Mastering the Art of Responsive Design
</h3>
<p className="mb-4 line-clamp-3 text-muted-foreground">
Learn the essential techniques and best practices for creating
responsive designs that adapt seamlessly to different devices and
screen sizes. Ensure your web applications provide an optimal user
experience.
</p>
<div className="flex items-center font-medium">
<Avatar className="mr-2 size-6">
<AvatarImage src="https://mynaui.com/avatars/avatar-04.jpg" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<span>Sarah Lee</span>
</div>
</div>
</a>
<a href="#" className="block overflow-hidden rounded-lg border">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={160}
className="h-40 w-full border-b object-cover object-center"
/>
<div className="p-4">
<h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
Unlocking the Power of Headless CMS
</h3>
<p className="mb-4 line-clamp-3 text-muted-foreground">
Discover the benefits of a headless CMS and how it can
revolutionize your content management workflow. Learn how to
leverage its flexibility and scalability to deliver exceptional
digital experiences.
</p>
<div className="flex items-center font-medium">
<Avatar className="mr-2 size-6">
<AvatarImage src="https://mynaui.com/avatars/avatar-05.jpg" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<span>Tom Wilson</span>
</div>
</div>
</a>
<a href="#" className="block overflow-hidden rounded-lg border">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={160}
className="h-40 w-full border-b object-cover object-center"
/>
<div className="p-4">
<h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
Mastering the Art of Accessible Web Design
</h3>
<p className="mb-4 line-clamp-3 text-muted-foreground">
Explore the principles of accessible web design and learn how to
create inclusive digital experiences that cater to users with
diverse abilities. Discover the latest tools and techniques to
ensure your web applications are accessible to all.
</p>
<div className="flex items-center font-medium">
<Avatar className="mr-2 size-6">
<AvatarImage src="https://mynaui.com/avatars/avatar-06.jpg" />
<AvatarFallback>AB</AvatarFallback>
</Avatar>
<span>Emily Davis</span>
</div>
</div>
</a>
</div>
<div className="mt-8 flex justify-center">
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</section>
);
}
export default function WithHeading() {
return (
<section className="bg-primary-foreground">
<header className="border-b bg-background py-8 md:py-16">
<div className="mx-auto max-w-7xl px-4">
<h1 className="text-2xl font-bold tracking-tight">
Our Latest Blog Posts
</h1>
<p className="mt-2 max-w-3xl text-muted-foreground">
Discover the latest insights, trends, and news from our expert team.
</p>
</div>
</header>
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-8 px-4 py-12 md:grid-cols-2 md:py-16 lg:grid-cols-4">
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background md:col-span-2"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Featured Blog Post"
width={800}
height={450}
className="h-56 w-full border-b object-cover"
/>
<div className="bg-background p-4">
<h2 className="mb-1 text-balance text-xl font-semibold tracking-tight">
The Future of Web Development: Embracing the Generative Revolution
</h2>
<p className="line-clamp-2 text-sm text-muted-foreground">
Discover how the latest advancements in generative AI are
transforming the way we build web applications.
</p>
<div className="mt-4 flex items-center space-x-4">
<div className="shrink-0">
<img
src="https://mynaui.com/avatars/avatar-01.jpg"
alt="Author Avatar"
width={40}
height={40}
className="size-10 rounded-full"
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium">Praveen Juge</p>
<p className="text-sm text-muted-foreground">
Published on June 15, 2024
</p>
</div>
</div>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={400}
className="h-56 w-full border-b object-cover"
/>
<div className="p-4">
<h2 className="mb-2 text-balance text-base font-semibold">
Unlocking the Power of Data-Driven Decisions
</h2>
<p className="line-clamp-3 text-sm text-muted-foreground">
Discover how to leverage data to make informed decisions that
drive business success. Our latest blog post explores the key
strategies and tools for data-driven decision making.
</p>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={400}
className="h-56 w-full border-b object-cover"
/>
<div className="p-4">
<h2 className="mb-2 text-balance text-base font-semibold">
The Future of Remote Work: Trends and Insights
</h2>
<p className="line-clamp-3 text-sm text-muted-foreground">
Explore the latest trends and insights on the future of remote
work. Our experts share their predictions and strategies for
thriving in the new era of distributed teams.
</p>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={400}
className="h-56 w-full border-b object-cover"
/>
<div className="p-4">
<h2 className="mb-2 text-balance text-base font-semibold">
Mastering the Art of Effective Communication
</h2>
<p className="line-clamp-3 text-sm text-muted-foreground">
Discover the key strategies and techniques for effective
communication in the workplace. Our latest blog post explores the
art of conveying your message clearly and confidently.
</p>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={400}
className="h-56 w-full border-b object-cover"
/>
<div className="p-4">
<h2 className="mb-2 text-balance text-base font-semibold">
Navigating the Changing Landscape of SEO
</h2>
<p className="line-clamp-3 text-sm text-muted-foreground">
Stay ahead of the curve with our latest insights on the evolving
world of search engine optimization. Learn how to optimize your
online presence and drive more traffic to your website.
</p>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={400}
className="h-56 w-full border-b object-cover"
/>
<div className="p-4">
<h2 className="mb-2 text-balance text-base font-semibold">
Unleashing the Power of Creativity in Business
</h2>
<p className="line-clamp-3 text-sm text-muted-foreground">
Discover how to harness the power of creativity to drive
innovation and success in your business. Our latest blog post
explores the key strategies and techniques for fostering a culture
of creativity.
</p>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post Image"
width={600}
height={400}
className="h-56 w-full border-b object-cover"
/>
<div className="p-4">
<h2 className="mb-2 text-balance text-base font-semibold">
Embracing the Future: The Rise of Artificial Intelligence
</h2>
<p className="line-clamp-3 text-sm text-muted-foreground">
Explore the latest advancements in artificial intelligence and how
they are transforming industries. Our experts share their insights
on the opportunities and challenges of AI adoption.
</p>
</div>
</a>
</div>
</section>
);
}
export default function Minimal() {
return (
<div className="mx-auto max-w-3xl space-y-10 px-4 py-24">
<article className="grid grid-cols-1 gap-2 text-sm md:grid-cols-4 md:gap-6">
<div className="md:col-span-3">
<h2 className="text-lg font-semibold tracking-tight">
<a href="#">Introducing our new product feature</a>
</h2>
<p className="line-clamp-3 text-muted-foreground">
In this post, we will dive into the details of our latest product
update, highlighting the key features and benefits for our
customers.
</p>
</div>
<p className="text-muted-foreground md:text-right">May 15, 2023</p>
</article>
<article className="grid grid-cols-1 gap-2 text-sm md:grid-cols-4 md:gap-6">
<div className="md:col-span-3">
<h2 className="text-lg font-semibold tracking-tight">
<a href="#">Tips for effective team collaboration</a>
</h2>
<p className="line-clamp-3 text-muted-foreground">
Discover our top strategies for fostering effective collaboration
within your team, leading to increased productivity and innovation.
</p>
</div>
<p className="text-muted-foreground md:text-right">April 28, 2023</p>
</article>
<article className="grid grid-cols-1 gap-2 text-sm md:grid-cols-4 md:gap-6">
<div className="md:col-span-3">
<h2 className="text-lg font-semibold tracking-tight">
<a href="#">The future of cloud computing</a>
</h2>
<p className="line-clamp-3 text-muted-foreground">
Explore the latest trends and advancements in cloud computing, and
how they will shape the future of technology and business.
</p>
</div>
<p className="text-muted-foreground md:text-right">March 12, 2023</p>
</article>
<article className="grid grid-cols-1 gap-2 text-sm md:grid-cols-4 md:gap-6">
<div className="md:col-span-3">
<h2 className="text-lg font-semibold tracking-tight">
<a href="#">Introducing our new product feature</a>
</h2>
<p className="line-clamp-3 text-muted-foreground">
In this post, we will dive into the details of our latest product
update, highlighting the key features and benefits for our
customers.
</p>
</div>
<p className="text-muted-foreground md:text-right">May 15, 2023</p>
</article>
<article className="grid grid-cols-1 gap-2 text-sm md:grid-cols-4 md:gap-6">
<div className="md:col-span-3">
<h2 className="text-lg font-semibold tracking-tight">
<a href="#">Tips for effective team collaboration</a>
</h2>
<p className="line-clamp-3 text-muted-foreground">
Discover our top strategies for fostering effective collaboration
within your team, leading to increased productivity and innovation.
</p>
</div>
<p className="text-muted-foreground md:text-right">April 28, 2023</p>
</article>
<article className="grid grid-cols-1 gap-2 text-sm md:grid-cols-4 md:gap-6">
<div className="md:col-span-3">
<h2 className="text-lg font-semibold tracking-tight">
<a href="#">The future of cloud computing</a>
</h2>
<p className="line-clamp-3 text-muted-foreground">
Explore the latest trends and advancements in cloud computing, and
how they will shape the future of technology and business.
</p>
</div>
<p className="text-muted-foreground md:text-right">March 12, 2023</p>
</article>
</div>
);
}
import { Input } from "@/components/ui/input";
import { ArrowRight, Search } from "@mynaui/icons-react";
export default function WithSidebar() {
return (
<section className="mx-auto grid max-w-7xl flex-1 grid-cols-1 gap-8 p-4 py-12 lg:grid-cols-4">
<div className="space-y-8 md:col-span-3">
<div className="grid gap-8">
<article className="grid grid-cols-[200px_1fr] gap-6 text-sm">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
width="200"
height="120"
alt="Blog post image"
className="h-36 rounded-md object-cover"
/>
<div className="space-y-2">
<h2 className="text-xl font-semibold">
<a href="#" className="hover:underline">
The Future of Web Development
</a>
</h2>
<div className="text-muted-foreground">
<span>Praveen Juge</span>
<span className="mx-2">•</span>
<span>May 15, 2023</span>
</div>
<p className="line-clamp-3 text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
euismod, nisl nec ultricies lacinia, nisl nisl aliquam nisl,
eget aliquam nisl nisl sit amet nisl.
</p>
</div>
</article>
<article className="grid grid-cols-[200px_1fr] gap-6 text-sm">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
width="200"
height="120"
alt="Blog post image"
className="h-36 rounded-md object-cover"
/>
<div className="space-y-2">
<h2 className="text-xl font-semibold">
<a href="#" className="hover:underline">
Mastering Responsive Design
</a>
</h2>
<div className="text-muted-foreground">
<span>Jane Smith</span>
<span className="mx-2">•</span>
<span>April 20, 2023</span>
</div>
<p className="line-clamp-3 text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
euismod, nisl nec ultricies lacinia, nisl nisl aliquam nisl,
eget aliquam nisl nisl sit amet nisl.
</p>
</div>
</article>
<article className="grid grid-cols-[200px_1fr] gap-6 text-sm">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
width="200"
height="120"
alt="Blog post image"
className="h-36 rounded-md object-cover"
/>
<div className="space-y-2">
<h2 className="text-xl font-semibold">
<a href="#" className="hover:underline">
Unleashing the Power of SEO
</a>
</h2>
<div className="text-muted-foreground">
<span>Bob Johnson</span>
<span className="mx-2">•</span>
<span>March 10, 2023</span>
</div>
<p className="line-clamp-3 text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
euismod, nisl nec ultricies lacinia, nisl nisl aliquam nisl,
eget aliquam nisl nisl sit amet nisl.
</p>
</div>
</article>
<article className="grid grid-cols-[200px_1fr] gap-6 text-sm">
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
width="200"
height="120"
alt="Blog post image"
className="h-36 rounded-md object-cover"
/>
<div className="space-y-2">
<h2 className="text-xl font-semibold">
<a href="#" className="hover:underline">
Unlocking the Secrets of Branding
</a>
</h2>
<div className="text-muted-foreground">
<span>Sarah Lee</span>
<span className="mx-2">•</span>
<span>February 5, 2023</span>
</div>
<p className="line-clamp-3 text-muted-foreground">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
euismod, nisl nec ultricies lacinia, nisl nisl aliquam nisl,
eget aliquam nisl nisl sit amet nisl.
</p>
</div>
</article>
</div>
</div>
<div className="space-y-8">
<div className="rounded border p-4">
<h3 className="mb-4 text-base font-semibold">Search</h3>
<form>
<div className="relative">
<Search className="absolute left-2.5 top-2.5 size-5 text-muted-foreground" />
<Input
type="search"
placeholder="Search blog posts..."
className="w-full pl-10"
/>
</div>
</form>
</div>
<div className="flex flex-col divide-y rounded border">
<h3 className="p-4 text-base font-semibold">Categories</h3>
<a
href="#"
className="flex items-center justify-between px-4 py-2 text-sm font-medium"
>
<span>Design</span>
<ArrowRight className="size-4 text-muted-foreground" />
</a>
<a
href="#"
className="flex items-center justify-between px-4 py-2 text-sm font-medium"
>
<span>Development</span>
<ArrowRight className="size-4 text-muted-foreground" />
</a>
<a
href="#"
className="flex items-center justify-between px-4 py-2 text-sm font-medium"
>
<span>Marketing</span>
<ArrowRight className="size-4 text-muted-foreground" />
</a>
<a
href="#"
className="flex items-center justify-between px-4 py-2 text-sm font-medium"
>
<span>Business</span>
<ArrowRight className="size-4 text-muted-foreground" />
</a>
</div>
<div className="rounded border p-4">
<h3 className="mb-4 text-base font-semibold">Tags</h3>
<div className="flex flex-wrap gap-2 text-xs font-medium">
<a
href="#"
className="rounded-full border border-red-600/20 bg-red-600/10 px-3 py-1 text-red-600"
>
React
</a>
<a
href="#"
className="rounded-full border border-emerald-600/20 bg-emerald-600/10 px-3 py-1 text-emerald-600"
>
JavaScript
</a>
<a
href="#"
className="rounded-full border border-amber-600/20 bg-amber-600/10 px-3 py-1 text-amber-600"
>
Design
</a>
<a
href="#"
className="rounded-full border border-purple-600/20 bg-purple-600/10 px-3 py-1 text-purple-600"
>
Marketing
</a>
</div>
</div>
</div>
</section>
);
}
export default function Featured() {
return (
<div className="mx-auto max-w-7xl px-4 py-12">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
<a
href="#"
className="group relative min-h-96 overflow-hidden rounded-lg"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Featured post"
width={800}
height={450}
className="absolute inset-0 size-full select-none object-cover transition group-hover:scale-105"
/>
<div className="absolute inset-0 select-none bg-linear-to-t from-black to-transparent" />
<div className="relative mt-0 flex h-full flex-col items-end justify-end p-4 md:p-6 lg:p-8">
<h2 className="text-balance text-xl font-semibold text-white md:text-3xl lg:text-4xl">
The Future of Web Development: Embracing the Power of AI
</h2>
<p className="mt-2 text-sm text-white md:text-base">
Explore the latest advancements in AI-powered web development and
how they are transforming the industry.
</p>
</div>
</a>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post 1"
width={400}
height={225}
className="h-40 w-full object-cover"
/>
<div className="p-4">
<div className="mb-4 flex items-center space-x-2">
<div className="shrink-0">
<img
src="https://mynaui.com/avatars/avatar-02.jpg"
alt="Author Avatar"
width={32}
height={32}
className="size-8 rounded-full"
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium">Jane Smith</p>
<p className="text-sm text-muted-foreground">
Published on June 10, 2024
</p>
</div>
</div>
<h3 className="text-lg font-semibold tracking-tight">
Mastering the Art of Responsive Design
</h3>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post 2"
width={400}
height={225}
className="h-40 w-full object-cover"
/>
<div className="p-4">
<div className="mb-4 flex items-center space-x-2">
<div className="shrink-0">
<img
src="https://mynaui.com/avatars/avatar-03.jpg"
alt="Author Avatar"
width={32}
height={32}
className="size-8 rounded-full"
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium">Bob Johnson</p>
<p className="text-sm text-muted-foreground">
Published on June 5, 2024
</p>
</div>
</div>
<h3 className="text-lg font-semibold tracking-tight">
Exploring the Potential of Headless CMS
</h3>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post 3"
width={400}
height={225}
className="h-40 w-full object-cover"
/>
<div className="p-4">
<div className="mb-4 flex items-center space-x-2">
<div className="shrink-0">
<img
src="https://mynaui.com/avatars/avatar-04.jpg"
alt="Author Avatar"
width={32}
height={32}
className="size-8 rounded-full"
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium">Sarah Lee</p>
<p className="text-sm text-muted-foreground">
Published on June 1, 2024
</p>
</div>
</div>
<h3 className="text-lg font-semibold tracking-tight">
Building Accessible Web Applications
</h3>
</div>
</a>
<a
href="#"
className="block overflow-hidden rounded-lg border bg-background"
>
<img
src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
alt="Blog Post 4"
width={400}
height={225}
className="h-40 w-full object-cover"
/>
<div className="p-4">
<div className="mb-4 flex items-center space-x-2">
<div className="shrink-0">
<img
src="https://mynaui.com/avatars/avatar-05.jpg"
alt="Author Avatar"
width={32}
height={32}
className="size-8 rounded-full"
/>
</div>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium">Tom Wilson</p>
<p className="text-sm text-muted-foreground">
Published on May 25, 2024
</p>
</div>
</div>
<h3 className="text-lg font-semibold tracking-tight">
The Rise of Jamstack: Revolutionizing Web Development
</h3>
</div>
</a>
</div>
</div>
</div>
);
}