Skip to content

Commit 5754f44

Browse files
aster-voidclaude
aster-void
and
claude
committed
treewide: apply glassmorphism effect to card components
- Change bg-white to bg-white/80 for semi-transparency - Change border-zinc-200 to border-zinc-200/50 - Add backdrop-blur-md for blur effect - Update ui-design.md with new card styling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent c7d4a1f commit 5754f44

File tree

14 files changed

+67
-67
lines changed

14 files changed

+67
-67
lines changed

‎docs/knowledges/ui-design.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,15 @@
3030

3131
## Component Patterns
3232

33-
| Component | Style |
34-
| ------------------- | ----------------------------------------------------------- |
35-
| Buttons (primary) | bg-[#00D372], rounded-lg, font-semibold, shadow-lg |
36-
| Buttons (secondary) | bg-zinc-900, text-white |
37-
| Cards | bg-white, border border-zinc-200, rounded-2xl, hover:shadow |
38-
| Featured card | bg-zinc-900, text-white (inverted) |
39-
| Section labels | Monospace, uppercase, tracking-widest, text-[#00D372] |
40-
| Tech tags | Monospace, text-xs, bg-zinc-100/zinc-800, rounded-lg |
41-
| Page headers | border-b, bg-zinc-50/50, py-16 |
33+
| Component | Style |
34+
| ------------------- | ---------------------------------------------------------------------------------------- |
35+
| Buttons (primary) | bg-[#00D372], rounded-lg, font-semibold, shadow-lg |
36+
| Buttons (secondary) | bg-zinc-900, text-white |
37+
| Cards | bg-white/80, backdrop-blur-md, border border-zinc-200/50, rounded-2xl, hover:shadow |
38+
| Featured card | bg-zinc-900, text-white (inverted) |
39+
| Section labels | Monospace, uppercase, tracking-widest, text-[#00D372] |
40+
| Tech tags | Monospace, text-xs, bg-zinc-100/zinc-800, rounded-lg |
41+
| Page headers | border-b, bg-zinc-50/50, py-16 |
4242

4343
## Layout
4444

‎src/lib/components/home/ActivitiesSection.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</div>
1515
<div class="grid gap-6 md:grid-cols-3">
1616
<div
17-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
17+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
1818
>
1919
<div
2020
class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors group-hover:bg-[#00D372] group-hover:text-zinc-900"
@@ -27,7 +27,7 @@
2727
</p>
2828
</div>
2929
<div
30-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
30+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
3131
>
3232
<div
3333
class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors group-hover:bg-[#00D372] group-hover:text-zinc-900"
@@ -40,7 +40,7 @@
4040
</p>
4141
</div>
4242
<div
43-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
43+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
4444
>
4545
<div
4646
class="mb-6 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-900 text-white transition-colors group-hover:bg-[#00D372] group-hover:text-zinc-900"

‎src/lib/components/home/ArticlesSection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
{#each articles as article (article.id)}
3434
<a
3535
href="/articles/{article.slug}"
36-
class="group rounded-2xl border border-zinc-200 bg-white p-6 transition-all hover:border-[#00D372] hover:shadow-md"
36+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6 transition-all hover:border-[#00D372] hover:shadow-md"
3737
>
3838
{#if article.coverUrl}
3939
<img

‎src/lib/components/home/ProjectsSection.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
{#each projects as project (project.id)}
7171
<a
7272
href="/projects/{project.slug}"
73-
class="group rounded-2xl border border-zinc-200 bg-white p-6 transition-all hover:border-[#00D372] hover:shadow-md"
73+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6 transition-all hover:border-[#00D372] hover:shadow-md"
7474
>
7575
{#if project.coverUrl}
7676
<img

‎src/routes/(site)/about/+page.svelte‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<Building2 class="h-5 w-5 text-[#00D372]" />
5353
基本情報
5454
</h2>
55-
<div class="grid gap-4 rounded-2xl border border-zinc-200 bg-white p-6">
55+
<div class="grid gap-4 rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
5656
<div class="flex items-start gap-4">
5757
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#00D372]/10">
5858
<Code class="h-5 w-5 text-[#00D372]" />
@@ -107,21 +107,21 @@
107107
<Rocket class="h-5 w-5 text-[#00D372]" />
108108
活動内容
109109
</h2>
110-
<div class="mb-4 rounded-2xl border border-zinc-200 bg-white p-6">
110+
<div class="mb-4 rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
111111
<p class="leading-relaxed text-zinc-700">
112112
ut.code(); には「学習・教育」「交流」「開発」の三軸を主にして活動しています。
113113
</p>
114114
</div>
115115
<div class="grid gap-4 sm:grid-cols-3">
116-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
116+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
117117
<h3 class="mb-2 font-semibold">学習・教育</h3>
118118
<p class="text-sm text-zinc-500">ut.code(); Learn、全ゼミ・自主ゼミ</p>
119119
</div>
120-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
120+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
121121
<h3 class="mb-2 font-semibold">交流</h3>
122122
<p class="text-sm text-zinc-500">五月祭・駒場祭、合宿</p>
123123
</div>
124-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
124+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
125125
<h3 class="mb-2 font-semibold">開発</h3>
126126
<p class="text-sm text-zinc-500">プロジェクト、ハッカソン</p>
127127
</div>
@@ -134,7 +134,7 @@
134134
<MapPin class="h-5 w-5 text-[#00D372]" />
135135
活動場所
136136
</h2>
137-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
137+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
138138
<ul class="space-y-3">
139139
<li class="flex items-start gap-3">
140140
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
@@ -161,7 +161,7 @@
161161
<div class="mb-4 rounded-2xl border border-[#1DA1F2]/20 bg-[#1DA1F2]/5 p-4">
162162
<p class="text-sm text-zinc-700">具体的な使用技術はプロジェクトによって異なります。</p>
163163
</div>
164-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
164+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
165165
<ul class="space-y-3">
166166
<li class="flex items-start gap-3">
167167
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
@@ -205,21 +205,21 @@
205205
<section class="mb-12">
206206
<h2 class="mb-6 text-xl font-bold">FAQ / よくある質問</h2>
207207
<div class="space-y-4">
208-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
208+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
209209
<h3 class="mb-2 font-semibold">Q: 活動頻度はどのくらいですか？</h3>
210210
<p class="text-sm leading-relaxed text-zinc-700">
211211
A:
212212
プロジェクトの参加数や各プロジェクトによって異なりますが、一般的には毎週夜のミーティングと月1~2回の作業会になります。
213213
</p>
214214
</div>
215-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
215+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
216216
<h3 class="mb-2 font-semibold">Q: 初心者でも大丈夫ですか？</h3>
217217
<p class="text-sm leading-relaxed text-zinc-700">
218218
A: 全く問題ありません！ ut.code();
219219
は全くの初心者がフルスタックのアプリケーションを作成できるようになる教材を公開しており、その教材を用いた勉強会や講習会も実施しています！
220220
</p>
221221
</div>
222-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
222+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
223223
<h3 class="mb-2 font-semibold">Q: 東京大学ではないです・一年生ではありません・文系です</h3>
224224
<p class="text-sm leading-relaxed text-zinc-700">
225225
A: 全く問題ありません！ ut.code(); は大学名・学年・文理による制限は設けていません。
@@ -231,7 +231,7 @@
231231
<!-- Video -->
232232
<section class="mb-12">
233233
<h2 class="mb-6 text-xl font-bold">紹介動画</h2>
234-
<div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white">
234+
<div class="overflow-hidden rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md">
235235
<iframe
236236
title="ut.code(); 紹介動画"
237237
class="aspect-video w-full"
@@ -249,7 +249,7 @@
249249
<Mail class="h-5 w-5 text-[#00D372]" />
250250
お問い合わせ・SNS
251251
</h2>
252-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
252+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
253253
<div class="mb-4 space-y-3">
254254
<div class="flex items-center gap-3">
255255
<Github class="h-5 w-5 text-zinc-500" />
@@ -295,7 +295,7 @@
295295
<Heart class="h-5 w-5 text-[#00D372]" />
296296
ご寄付・ご協賛のお願い
297297
</h2>
298-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
298+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
299299
<p class="mb-4 leading-relaxed text-zinc-700">
300300
ut.code();
301301
では、活動を支援していただける方を募集しております。詳細につきましては、お問い合わせください。

‎src/routes/(site)/about/faq/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
<!-- FAQ Items -->
106106
<div class="space-y-3">
107107
{#each faqs as faq, i (i)}
108-
<div class="collapse-plus collapse rounded-2xl border border-zinc-200 bg-white">
108+
<div class="collapse-plus collapse rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md">
109109
<input type="radio" name="faq-accordion" />
110110
<div class="collapse-title text-lg font-semibold">
111111
{faq.question}
@@ -120,7 +120,7 @@
120120
</div>
121121

122122
<!-- CTA -->
123-
<div class="mt-12 rounded-2xl border border-zinc-200 bg-white p-8 text-center">
123+
<div class="mt-12 rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 text-center">
124124
<h2 class="mb-4 text-xl font-bold">他にご質問はありますか?</h2>
125125
<p class="mb-6 text-zinc-500">お気軽にお問い合わせください。メンバー一同、お待ちしています。</p>
126126
<div class="flex flex-wrap justify-center gap-4">

‎src/routes/(site)/activities/+page.svelte‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
</div>
3737
</div>
3838

39-
<div class="mb-12 rounded-2xl border border-zinc-200 bg-white p-8">
39+
<div class="mb-12 rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8">
4040
<p class="leading-relaxed text-zinc-600">
4141
ut.code();
4242
は、全ての人にソフトウェア開発の魅力を伝えるべく、教材の作成から教育活動までを一貫して行っており、さらに高みを目指すための自学自習の機会も提供しています。充実した教材、気軽に質問できる環境、切磋琢磨する仲間、この3つの柱により、初心者から上級者まですべての人に新しい学びを提供します。
@@ -46,7 +46,7 @@
4646
<div class="space-y-8">
4747
<!-- ut.code(); Learn -->
4848
<div
49-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
49+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
5050
>
5151
<h3 class="mb-4 text-xl font-semibold">ut.code(); Learn</h3>
5252
<div class="space-y-4 text-zinc-600">
@@ -62,7 +62,7 @@
6262

6363
<!-- Document Reading -->
6464
<div
65-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
65+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
6666
>
6767
<h3 class="mb-4 text-xl font-semibold">ドキュメントを読む会</h3>
6868
<div class="space-y-4 text-zinc-600">
@@ -78,7 +78,7 @@
7878

7979
<!-- Seminar -->
8080
<div
81-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
81+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
8282
>
8383
<h3 class="mb-4 text-xl font-semibold">全ゼミ / 自主ゼミ「モダン Web システム開発入門」</h3>
8484
<div class="space-y-4 text-zinc-600">
@@ -105,7 +105,7 @@
105105
</div>
106106
</div>
107107

108-
<div class="mb-12 rounded-2xl border border-zinc-200 bg-white p-8">
108+
<div class="mb-12 rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8">
109109
<p class="leading-relaxed text-zinc-600">
110110
ut.code();
111111
では、社会をより良い方向へ導くことを目指し、様々なプロダクトを開発しています。ut.code();
@@ -116,7 +116,7 @@
116116
<div class="space-y-8">
117117
<!-- Projects -->
118118
<div
119-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
119+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
120120
>
121121
<h3 class="mb-4 text-xl font-semibold">プロジェクト</h3>
122122
<div class="space-y-4 text-zinc-600">
@@ -140,7 +140,7 @@
140140

141141
<!-- Hackathon -->
142142
<div
143-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
143+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
144144
>
145145
<h3 class="mb-4 text-xl font-semibold">ハッカソン</h3>
146146
<div class="space-y-4 text-zinc-600">
@@ -152,7 +152,7 @@
152152

153153
<!-- Solo Development -->
154154
<div
155-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
155+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
156156
>
157157
<h3 class="mb-4 text-xl font-semibold">個人開発</h3>
158158
<div class="space-y-4 text-zinc-600">
@@ -179,7 +179,7 @@
179179
</div>
180180
</div>
181181

182-
<div class="mb-12 rounded-2xl border border-zinc-200 bg-white p-8">
182+
<div class="mb-12 rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8">
183183
<p class="leading-relaxed text-zinc-600">
184184
ソフトウェア開発のために必要な技術は増加の一途をたどっており、ひとつのソフトウェアのために投資されるエネルギーも拡大し続けています。現代の開発者にとって、多くの関係者と密にコミュニケーションをとり、互いの足りない部分を補い合うことは、大切な技術のひとつです。
185185
</p>
@@ -188,7 +188,7 @@
188188
<div class="space-y-8">
189189
<!-- Work Session -->
190190
<div
191-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
191+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
192192
>
193193
<h3 class="mb-4 text-xl font-semibold">作業会</h3>
194194
<div class="space-y-4 text-zinc-600">
@@ -205,7 +205,7 @@
205205

206206
<!-- Festival -->
207207
<div
208-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
208+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
209209
>
210210
<h3 class="mb-4 text-xl font-semibold">五月祭・駒場祭</h3>
211211
<div class="space-y-4 text-zinc-600">
@@ -222,7 +222,7 @@
222222

223223
<!-- Camp -->
224224
<div
225-
class="group rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
225+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8 transition-all hover:border-[#00D372]/50 hover:shadow-lg hover:shadow-[#00D372]/5"
226226
>
227227
<h3 class="mb-4 text-xl font-semibold">合宿</h3>
228228
<div class="space-y-4 text-zinc-600">

‎src/routes/(site)/articles/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
{#each paginatedArticles as article (article.id)}
5151
<a
5252
href="/articles/{article.slug}"
53-
class="group rounded-2xl border border-zinc-200 bg-white p-6 transition-all hover:border-[#00D372] hover:shadow-lg hover:shadow-[#00D372]/5"
53+
class="group rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6 transition-all hover:border-[#00D372] hover:shadow-lg hover:shadow-[#00D372]/5"
5454
>
5555
{#if article.coverUrl}
5656
<img

‎src/routes/(site)/articles/[slug]/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
{#each relatedArticles as relatedArticle (relatedArticle.id)}
9191
<a
9292
href="/articles/{relatedArticle.slug}"
93-
class="group rounded-xl border border-zinc-200 bg-white p-4 transition-all hover:border-[#00D372] hover:shadow-md"
93+
class="group rounded-xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-4 transition-all hover:border-[#00D372] hover:shadow-md"
9494
>
9595
{#if relatedArticle.coverUrl}
9696
<img

‎src/routes/(site)/donation/+page.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<Building2 class="h-5 w-5 text-[#00D372]" />
4848
協賛による支援
4949
</h2>
50-
<div class="rounded-2xl border border-zinc-200 bg-white p-8">
50+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8">
5151
<p class="mb-4 leading-relaxed text-zinc-700">
5252
ut.code();は、ご協賛いただいた企業様のロゴをウェブサイトに掲載しております。
5353
</p>
@@ -77,7 +77,7 @@
7777
<Banknote class="h-5 w-5 text-[#00D372]" />
7878
ご寄付による支援
7979
</h2>
80-
<div class="rounded-2xl border border-zinc-200 bg-white p-8">
80+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8">
8181
<p class="mb-6 leading-relaxed text-zinc-700">
8282
ご寄付いただける方は、以下の口座にお振込みください。
8383
</p>
@@ -110,7 +110,7 @@
110110
<Laptop class="h-5 w-5 text-[#00D372]" />
111111
使用しなくなったノートパソコンの譲渡
112112
</h2>
113-
<div class="rounded-2xl border border-zinc-200 bg-white p-8">
113+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-8">
114114
<div class="mb-6 space-y-3 leading-relaxed text-zinc-700">
115115
<p>
116116
ut.code();
@@ -137,7 +137,7 @@
137137
<!-- Supporters -->
138138
<section class="mb-12">
139139
<h2 class="mb-6 text-xl font-bold">ご支援いただいた皆様</h2>
140-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
140+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
141141
<ul class="space-y-2">
142142
<li class="flex items-center gap-2 text-sm text-zinc-700">
143143
<span class="font-medium text-zinc-500">2024/3/11</span>
@@ -150,7 +150,7 @@
150150
<!-- Contact -->
151151
<section class="mb-12">
152152
<h2 class="mb-6 text-xl font-bold">お問い合わせ</h2>
153-
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
153+
<div class="rounded-2xl border border-zinc-200/50 bg-white/80 backdrop-blur-md p-6">
154154
<p class="mb-4 text-zinc-700">
155155
ご寄付・ご協賛に関するお問い合わせは、以下の SNS からお気軽にどうぞ。
156156
</p>

0 commit comments

Comments
 (0)