スポットライトブログ

1import Link from "next/link";
2
3const spotlightPost = {
4  title: "デザインシステムの構築と運用 — 組織をスケールさせる設計手法",
5  excerpt:
6    "プロダクトの成長に伴い、デザインの一貫性を保つことは困難になります。デザインシステムはその課題を解決し、チーム全体の生産性を向上させます。構築から運用までの実践的なアプローチを解説します。",
7  date: "2026年7月20日",
8  category: "デザイン",
9  readTime: "8 min",
10};
11
12const recentPosts = [
13  {
14    title: "パフォーマンス最適化の実践ガイド",
15    excerpt: "Core Web Vitalsを改善するための具体的なテクニックと計測方法",
16    date: "2026年7月15日",
17    category: "エンジニアリング",
18    readTime: "5 min",
19  },
20  {
21    title: "アクセシビリティを考慮したUI設計",
22    excerpt: "すべてのユーザーに配慮したインターフェースを構築するための原則",
23    date: "2026年7月10日",
24    category: "デザイン",
25    readTime: "6 min",
26  },
27  {
28    title: "モダンCSSアーキテクチャの潮流",
29    excerpt: "Container QueriesからCascade Layersまで、最新のCSS設計手法",
30    date: "2026年7月5日",
31    category: "エンジニアリング",
32    readTime: "4 min",
33  },
34];
35
36export function BlogSpotlight001() {
37  return (
38    <section className="border-t border-border bg-background py-24">
39      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
40        {/* ヘッダー */}
41        <div className="flex items-end justify-between">
42          <div>
43            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground/60">
44              Journal
45            </p>
46            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
47              最新の記事
48            </h2>
49          </div>
50          <Link
51            href="#"
52            className="hidden items-center gap-2 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground sm:inline-flex"
53          >
54            すべての記事
55            <svg
56              className="h-4 w-4"
57              fill="none"
58              stroke="currentColor"
59              viewBox="0 0 24 24"
60            >
61              <path
62                strokeLinecap="round"
63                strokeLinejoin="round"
64                strokeWidth={1.5}
65                d="M17 8l4 4m0 0l-4 4m4-4H3"
66              />
67            </svg>
68          </Link>
69        </div>
70
71        {/* コンテンツグリッド */}
72        <div className="mt-12 grid gap-8 lg:grid-cols-2">
73          {/* スポットライト記事 */}
74          <Link href="#" className="group">
75            <article>
76              {/* サムネイルプレースホルダー */}
77              <div className="aspect-[16/10] overflow-hidden rounded-lg border border-border/40 bg-muted">
78                <svg
79                  className="h-full w-full text-muted-foreground/10"
80                  viewBox="0 0 400 250"
81                  fill="none"
82                >
83                  <rect width="400" height="250" fill="currentColor" />
84                  <rect
85                    x="140"
86                    y="90"
87                    width="120"
88                    height="70"
89                    rx="4"
90                    stroke="currentColor"
91                    strokeWidth="2"
92                    opacity="0.5"
93                    fill="none"
94                  />
95                  <path
96                    d="M170 125 L190 110 L210 120 L230 105"
97                    stroke="currentColor"
98                    strokeWidth="2"
99                    opacity="0.5"
100                    fill="none"
101                    strokeLinecap="round"
102                    strokeLinejoin="round"
103                  />
104                </svg>
105              </div>
106
107              <div className="mt-5">
108                <div className="flex items-center gap-3">
109                  <span className="rounded-full border border-border px-2.5 py-0.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
110                    {spotlightPost.category}
111                  </span>
112                  <span className="text-xs tracking-wide text-muted-foreground/60">
113                    {spotlightPost.readTime}
114                  </span>
115                </div>
116                <h3 className="mt-3 text-lg font-medium leading-snug tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
117                  {spotlightPost.title}
118                </h3>
119                <p className="mt-2 text-sm font-light leading-relaxed text-muted-foreground">
120                  {spotlightPost.excerpt}
121                </p>
122                <time className="mt-4 block text-xs tracking-wide text-muted-foreground/60">
123                  {spotlightPost.date}
124                </time>
125              </div>
126            </article>
127          </Link>
128
129          {/* 最近の記事リスト */}
130          <div className="flex flex-col">
131            <div className="divide-y divide-border">
132              {recentPosts.map((post) => (
133                <Link key={post.title} href="#" className="group block">
134                  <article className="py-6 first:pt-0 last:pb-0">
135                    <div className="flex items-center gap-3">
136                      <span className="rounded-full border border-border px-2.5 py-0.5 text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
137                        {post.category}
138                      </span>
139                      <span className="text-xs tracking-wide text-muted-foreground/60">
140                        {post.readTime}
141                      </span>
142                    </div>
143                    <h3 className="mt-2.5 text-base font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
144                      {post.title}
145                    </h3>
146                    <p className="mt-1.5 text-sm font-light leading-relaxed text-muted-foreground">
147                      {post.excerpt}
148                    </p>
149                    <time className="mt-3 block text-xs tracking-wide text-muted-foreground/60">
150                      {post.date}
151                    </time>
152                  </article>
153                </Link>
154              ))}
155            </div>
156          </div>
157        </div>
158
159        {/* モバイル用リンク */}
160        <div className="mt-10 text-center sm:hidden">
161          <Link
162            href="#"
163            className="inline-flex items-center gap-2 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
164          >
165            すべての記事
166            <svg
167              className="h-4 w-4"
168              fill="none"
169              stroke="currentColor"
170              viewBox="0 0 24 24"
171            >
172              <path
173                strokeLinecap="round"
174                strokeLinejoin="round"
175                strokeWidth={1.5}
176                d="M17 8l4 4m0 0l-4 4m4-4H3"
177              />
178            </svg>
179          </Link>
180        </div>
181      </div>
182    </section>
183  );
184}