Blog Sections

1import Link from "next/link";
2import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
3import { Badge } from "@/components/ui/badge";
4import { Clock1Icon } from "lucide-react";
5import { Button } from "@/components/ui/button";
6 
7const posts = [
8  {
9    category: "Technology",
10    title: "The Future of Web Development: Trends to Watch",
11    description:
12      "A practical guide to implementing robust security measures in your development workflow.",
13    date: "August 1, 2024",
14    author: "Alex Johnson",
15    href: "#"
16  },
17  {
18    category: "Design",
19    title: "Mastering Responsive Design for All Devices",
20    description:
21      "A practical guide to implementing robust security measures in your development workflow.",
22    date: "July 25, 2024",
23    author: "Sarah Lee",
24    href: "#"
25  },
26  {
27    category: "Cloud",
28    title: "Understanding Serverless Architectures: A Deep Dive",
29    description:
30      "A practical guide to implementing robust security measures in your development workflow.",
31    date: "July 18, 2024",
32    author: "Michael Chen",
33    href: "#"
34  },
35  {
36    category: "Security",
37    title: "Essential Cybersecurity Tips for Developers",
38    description:
39      "A practical guide to implementing robust security measures in your development workflow.",
40    date: "July 10, 2024",
41    author: "Jessica Kim",
42    href: "#"
43  }
44];
45 
46export default function BlogSection() {
47  return (
48    <section className="py-12 lg:py-20">
49      <div className="mx-auto max-w-3xl px-4">
50        <header className="mb-6 space-y-2">
51          <h2 className="font-heading text-3xl sm:text-4xl">Our Latest Articles</h2>
52          <p className="text-muted-foreground lg:text-lg">
53            Stay informed with our in-depth articles, guides, and thought leadership.
54          </p>
55        </header>
56 
57        <div className="grid gap-4">
58          {posts.map((post, i) => (
59            <Link href="#" className="group hover:bg-muted/50 block rounded-md border p-6" key={i}>
60              <div className="space-y-2">
61                <h4 className="flex flex-col gap-3 text-lg font-semibold lg:text-xl">
62                  <Badge variant="outline">{post.category}</Badge>
63                  {post.title}
64                </h4>
65                <p className="text-muted-foreground mb-4 text-base dark:text-gray-300">
66                  {post.description}
67                </p>
68              </div>
69// … truncated