Blog Block

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