ブログカード

1import Image from "next/image";
2import Link from "next/link";
3
4export function BlogCards001() {
5  const posts = [
6    {
7      title: "The Future of Web Development",
8      excerpt:
9        "Exploring the latest trends in web development and what they mean for developers in 2024 and beyond.",
10      category: "Technology",
11      date: "Jan 15, 2024",
12      readTime: "5 min read",
13      image:
14        "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&h=500&fit=crop",
15      author: {
16        name: "Sarah Chen",
17        avatar:
18          "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face",
19      },
20    },
21    {
22      title: "Design Systems That Scale",
23      excerpt:
24        "How to build and maintain design systems that grow with your product and team.",
25      category: "Design",
26      date: "Jan 12, 2024",
27      readTime: "8 min read",
28      image:
29        "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=800&h=500&fit=crop",
30      author: {
31        name: "Michael Rodriguez",
32        avatar:
33          "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face",
34      },
35    },
36    {
37      title: "Mastering TypeScript",
38      excerpt:
39        "Advanced TypeScript patterns and techniques for building type-safe applications.",
40      category: "Engineering",
41      date: "Jan 10, 2024",
42      readTime: "12 min read",
43      image:
44        "https://images.unsplash.com/photo-1516116216624-53e697fedbea?w=800&h=500&fit=crop",
45      author: {
46        name: "Emily Watson",
47        avatar:
48          "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face",
49      },
50    },
51  ];
52
53  return (
54    <section className="bg-zinc-950 py-24 border-t border-zinc-800/50">
55      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
56        {/* Header */}
57        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
58          <div>
59            <h2 className="text-2xl font-semibold tracking-wide text-white sm:text-3xl">
60              Latest Articles
61            </h2>
62            <p className="mt-3 text-base tracking-wide text-zinc-500">
63              Insights and stories from our team
64            </p>
65          </div>
66          <Link
67            href="#"
68            className="hidden text-sm font-medium tracking-wide text-zinc-400 transition-colors duration-200 hover:text-white sm:block"
69          >
70            View all articles
71          </Link>
72        </div>
73
74        {/* Cards Grid */}
75        <div className="mt-14 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
76          {posts.map((post) => (
77            <article
78              key={post.title}
79              className="group flex flex-col overflow-hidden rounded-xl border border-zinc-800/50 bg-zinc-900/50 transition-all duration-300 hover:border-zinc-700 hover:bg-zinc-900"
80            >
81              {/* Image */}
82              <div className="relative aspect-[16/10] overflow-hidden">
83                <Image
84                  src={post.image}
85                  alt={post.title}
86                  fill
87                  className="object-cover transition-transform duration-500 group-hover:scale-105"
88                />
89                <div className="absolute left-4 top-4">
90                  <span className="rounded-full border border-zinc-700 bg-zinc-900/90 px-3 py-1 text-xs font-medium tracking-wide text-zinc-300 backdrop-blur">
91                    {post.category}
92                  </span>
93                </div>
94              </div>
95
96              {/* Content */}
97              <div className="flex flex-1 flex-col p-6">
98                <div className="flex items-center gap-2 text-xs tracking-wide text-zinc-600">
99                  <time>{post.date}</time>
100                  <span className="text-zinc-700">|</span>
101                  <span>{post.readTime}</span>
102                </div>
103
104                <h3 className="mt-4 text-lg font-medium tracking-wide text-white transition-colors duration-200 group-hover:text-zinc-300">
105                  <Link href="#">{post.title}</Link>
106                </h3>
107
108                <p className="mt-3 flex-1 text-sm leading-relaxed tracking-wide text-zinc-500">
109                  {post.excerpt}
110                </p>
111
112                {/* Author */}
113                <div className="mt-6 flex items-center gap-3 border-t border-zinc-800/50 pt-6">
114                  <Image
115                    src={post.author.avatar}
116                    alt={post.author.name}
117                    width={36}
118                    height={36}
119                    className="rounded-full object-cover"
120                  />
121                  <span className="text-sm font-medium tracking-wide text-zinc-400">
122                    {post.author.name}
123                  </span>
124                </div>
125              </div>
126            </article>
127          ))}
128        </div>
129
130        {/* Mobile View All */}
131        <div className="mt-10 text-center sm:hidden">
132          <Link
133            href="#"
134            className="text-sm font-medium tracking-wide text-zinc-400 transition-colors duration-200 hover:text-white"
135          >
136            View all articles
137          </Link>
138        </div>
139      </div>
140    </section>
141  );
142}