フィーチャーブログ

1export function BlogFeatured001() {
2  const featured = {
3    title: "デザインシステムの構築と運用",
4    excerpt:
5      "プロダクトの成長に伴いデザインの一貫性を保つことは難しくなります。デザインシステムを導入し、チーム全体で共有可能な設計言語を構築するための実践的なアプローチを解説します。",
6    date: "2024.02.08",
7    category: "デザイン",
8    readTime: "8 min read",
9  };
10
11  const posts = [
12    {
13      title: "タイポグラフィの基礎と実践",
14      excerpt:
15        "ウェブにおける読みやすさを追求するタイポグラフィ設計の基本原則。",
16      date: "2024.02.01",
17      category: "デザイン",
18      readTime: "5 min read",
19    },
20    {
21      title: "パフォーマンス最適化の手法",
22      excerpt:
23        "Core Web Vitalsを改善するための具体的な施策とモニタリング戦略。",
24      date: "2024.01.25",
25      category: "エンジニアリング",
26      readTime: "6 min read",
27    },
28    {
29      title: "アクセシビリティを考慮したUI設計",
30      excerpt:
31        "すべてのユーザーが快適に利用できるインターフェースを設計するための指針。",
32      date: "2024.01.18",
33      category: "デザイン",
34      readTime: "7 min read",
35    },
36  ];
37
38  return (
39    <section className="bg-background py-28 border-t border-border">
40      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
41        {/* ヘッダー */}
42        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
43          <div>
44            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
45              Latest Articles
46            </p>
47            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
48              ブログ
49            </h2>
50          </div>
51          <a
52            href="#"
53            className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-muted-foreground transition-colors duration-200 hover:text-foreground"
54          >
55            すべての記事
56            <svg
57              className="h-3.5 w-3.5"
58              fill="none"
59              stroke="currentColor"
60              viewBox="0 0 24 24"
61            >
62              <path
63                strokeLinecap="round"
64                strokeLinejoin="round"
65                strokeWidth={1.5}
66                d="M17 8l4 4m0 0l-4 4m4-4H3"
67              />
68            </svg>
69          </a>
70        </div>
71
72        <div className="mt-4 h-px bg-border/40" />
73
74        {/* フィーチャー記事 */}
75        <div className="mt-12 group">
76          <a href="#" className="block">
77            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
78              {/* サムネイルプレースホルダー */}
79              <div className="relative aspect-[16/10] overflow-hidden rounded-lg border border-border bg-muted">
80                <div className="absolute inset-0 bg-gradient-to-br from-foreground/5 to-foreground/10 transition-all duration-500 group-hover:from-foreground/10 group-hover:to-foreground/15" />
81                {/* コーナードット */}
82                <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
83                <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
84                <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
85                <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />
86              </div>
87
88              {/* テキスト情報 */}
89              <div className="flex flex-col justify-center">
90                <div className="flex items-center gap-3">
91                  <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/70">
92                    {featured.category}
93                  </span>
94                  <span className="h-px w-4 bg-border" />
95                  <span className="text-[10px] tracking-[0.2em] text-muted-foreground/50">
96                    {featured.date}
97                  </span>
98                </div>
99                <h3 className="mt-4 text-xl font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground sm:text-2xl">
100                  {featured.title}
101                </h3>
102                <p className="mt-4 text-sm font-light leading-relaxed text-muted-foreground">
103                  {featured.excerpt}
104                </p>
105                <div className="mt-6 flex items-center gap-2 text-[10px] tracking-[0.2em] text-muted-foreground/50">
106                  <svg
107                    className="h-3 w-3"
108                    fill="none"
109                    stroke="currentColor"
110                    viewBox="0 0 24 24"
111                  >
112                    <path
113                      strokeLinecap="round"
114                      strokeLinejoin="round"
115                      strokeWidth={1.5}
116                      d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
117                    />
118                  </svg>
119                  {featured.readTime}
120                </div>
121              </div>
122            </div>
123          </a>
124        </div>
125
126        {/* 区切り線 */}
127        <div className="mt-12 h-px bg-border/40" />
128
129        {/* 記事一覧 */}
130        <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
131          {posts.map((post) => (
132            <a key={post.title} href="#" className="group/card block">
133              {/* サムネイルプレースホルダー */}
134              <div className="relative aspect-[16/10] overflow-hidden rounded-lg border border-border bg-muted">
135                <div className="absolute inset-0 bg-gradient-to-br from-foreground/5 to-foreground/10 transition-all duration-500 group-hover/card:from-foreground/10 group-hover/card:to-foreground/15" />
136                <div className="absolute left-2.5 top-2.5 h-1 w-1 rounded-full bg-foreground/15" />
137                <div className="absolute right-2.5 top-2.5 h-1 w-1 rounded-full bg-foreground/15" />
138                <div className="absolute bottom-2.5 left-2.5 h-1 w-1 rounded-full bg-foreground/15" />
139                <div className="absolute bottom-2.5 right-2.5 h-1 w-1 rounded-full bg-foreground/15" />
140              </div>
141
142              {/* テキスト情報 */}
143              <div className="mt-4">
144                <div className="flex items-center gap-3">
145                  <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground/70">
146                    {post.category}
147                  </span>
148                  <span className="h-px w-3 bg-border" />
149                  <span className="text-[10px] tracking-[0.2em] text-muted-foreground/50">
150                    {post.date}
151                  </span>
152                </div>
153                <h3 className="mt-2.5 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 group-hover/card:text-muted-foreground">
154                  {post.title}
155                </h3>
156                <p className="mt-2 text-xs font-light leading-relaxed text-muted-foreground">
157                  {post.excerpt}
158                </p>
159                <div className="mt-3 flex items-center gap-2 text-[10px] tracking-[0.2em] text-muted-foreground/50">
160                  <svg
161                    className="h-3 w-3"
162                    fill="none"
163                    stroke="currentColor"
164                    viewBox="0 0 24 24"
165                  >
166                    <path
167                      strokeLinecap="round"
168                      strokeLinejoin="round"
169                      strokeWidth={1.5}
170                      d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"
171                    />
172                  </svg>
173                  {post.readTime}
174                </div>
175              </div>
176            </a>
177          ))}
178        </div>
179      </div>
180    </section>
181  );
182}