Blog Sections

1import Link from "next/link";
2import Image from "next/image";
3import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4import { Clock1Icon } from "lucide-react";
5 
6const posts = [
7  {
8    title: "The Future of Web Development",
9    description: "Explore the advantages of serverless and how to implement it effectively.",
10    date: "August 1, 2024",
11    href: "#",
12    imageSrc:
13      "https://images.unsplash.com/photo-1646736722280-17b990b46195?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
14  },
15  {
16    title: "Mastering React Hooks: A Comprehensive Guide",
17    description: "Explore the advantages of serverless and how to implement it effectively.",
18    date: "July 25, 2024",
19    href: "#",
20    imageSrc:
21      "https://images.unsplash.com/photo-1751646563987-d5720fb773cb?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
22  },
23  {
24    title: "Serverless Architectures: Benefits and Best Practices",
25    description: "Explore the advantages of serverless and how to implement it effectively.",
26    date: "July 18, 2024",
27    href: "#",
28    imageSrc:
29      "https://images.unsplash.com/photo-1751093383900-dbf2a79169f8?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
30  }
31];
32 
33export default function BlogSection() {
34  return (
35    <section className="py-14 lg:py-20">
36      <div className="mx-auto max-w-7xl px-4">
37        <div className="flex flex-col items-center justify-center space-y-4 text-center">
38          <header className="mx-auto max-w-2xl space-y-2">
39            <h2 className="font-heading text-4xl sm:text-5xl">Latest Blog Posts</h2>
40            <p className="text-muted-foreground text-balance lg:text-lg">
41              Stay up-to-date with our latest news, insights, and stories.
42            </p>
43          </header>
44        </div>
45        <div className="mx-auto grid gap-6 py-12 lg:grid-cols-3">
46          {posts.map((post, i) => (
47            <Link className="group grid gap-4" href={post.href}>
48              <Card key={i} className="hover:bg-muted/50 pt-0 shadow-none">
49                <figure className="relative aspect-video overflow-hidden rounded-t-lg">
50                  <Image
51                    alt="blog post cover"
52                    className="overflow-hidden object-cover transition-transform group-hover:scale-110"
53                    fill
54// … truncated