Blog Block

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { Card } from "@/components/ui/card";
6import { motion } from "framer-motion";
7import { ArrowRight, Calendar, Clock } from "lucide-react";
8 
9const blogPosts = [
10  {
11    title: "Building Scalable React Applications",
12    excerpt:
13      "Learn the best practices and patterns for creating React applications that can grow with your business needs.",
14    date: "2024-01-15",
15    readTime: "8 min read",
16    category: "React",
17    image:
18      "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=800&q=80",
19  },
20  {
21    title: "Microservices Architecture Explained",
22    excerpt:
23      "A comprehensive guide to understanding and implementing microservices in modern applications.",
24    date: "2024-01-10",
25    readTime: "12 min read",
26    category: "Architecture",
27    image:
28      "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=800&q=80",
29  },
30  {
31    title: "TypeScript Tips for Better Code",
32    excerpt:
33      "Advanced TypeScript techniques that will improve your code quality and developer experience.",
34    date: "2024-01-05",
35    readTime: "6 min read",
36    category: "TypeScript",
37    image:
38      "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=800&q=80",
39  },
40];
41 
42const container = {
43  hidden: { opacity: 0 },
44  show: {
45    opacity: 1,
46    transition: { staggerChildren: 0.15 },
47  },
48};
49 
50const item = {
51  hidden: { opacity: 0, y: 30 },
52  show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
53};
54 
55export function BlogBlock() {
56  return (
57    <section className="bg-background px-4 py-24 sm:px-6 lg:px-8">
58      <div className="mx-auto max-w-7xl">
59        <motion.div
60          initial={{ opacity: 0, y: -20 }}
61          whileInView={{ opacity: 1, y: 0 }}
62          viewport={{ once: true }}
63          transition={{ duration: 0.6 }}
64          className="mb-16 text-center"
65        >
66          <h2 className="mb-4 text-4xl font-bold text-foreground md:text-5xl">
67            Latest Blog Posts
68          </h2>
69          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
70            Insights, tutorials, and thoughts on web development and technology
71          </p>
72        </motion.div>
73 
74        <motion.div
75          variants={container}
76          initial="hidden"
77          whileInView="show"
78          viewport={{ once: true }}
79          className="grid gap-4 sm:gap-6 grid-cols-1 md:grid-cols-2"
80        >
81// … truncated