Skip to content

Commit afcb446

Browse files
aster-voidclaude
aster-void
and
claude
committed
treewide: add missing pages from utcode.net
- /about: organization overview page - /about/faq: frequently asked questions - /activities: combined learn/develop/share activities - /donation: sponsorship and donation info - /join/welcome-events: 2025 spring events - +error.svelte: custom 404 error page - SponsorsSection on homepage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
1 parent 4bcb4c6 commit afcb446

File tree

8 files changed

+1289
-0
lines changed

8 files changed

+1289
-0
lines changed

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<section class="bg-zinc-50 py-24">
2+
<div class="mx-auto max-w-6xl px-6">
3+
<div class="mb-12 text-center">
4+
<div
5+
class="mb-3 font-[JetBrains_Mono,monospace] text-xs font-medium tracking-widest text-[#00D372] uppercase"
6+
>
7+
Sponsors
8+
</div>
9+
<h2 class="text-3xl font-bold">協賛企業様</h2>
10+
</div>
11+
12+
<div class="mx-auto max-w-4xl">
13+
<div
14+
class="flex min-h-48 flex-wrap items-center justify-center gap-12 rounded-2xl border border-zinc-200 bg-white p-12"
15+
>
16+
<div class="text-center text-zinc-400">
17+
<p class="mb-4 text-lg">協賛企業を募集中です</p>
18+
<a
19+
href="/donation"
20+
class="inline-block rounded-lg bg-zinc-100 px-6 py-3 font-medium text-zinc-700 transition-colors hover:bg-zinc-200"
21+
>
22+
寄付について詳しく見る
23+
</a>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
</section>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import ProjectsSection from "$lib/components/home/ProjectsSection.svelte";
88
import ArticlesSection from "$lib/components/home/ArticlesSection.svelte";
99
import JoinCTA from "$lib/components/home/JoinCTA.svelte";
10+
import SponsorsSection from "$lib/components/home/SponsorsSection.svelte";
1011
import AboutSection from "$lib/components/home/AboutSection.svelte";
1112
1213
const stats = $derived(await getStats());
@@ -38,4 +39,6 @@
3839

3940
<JoinCTA />
4041

42+
<SponsorsSection />
43+
4144
<AboutSection members={stats.members} />

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

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
<script lang="ts">
2+
import {
3+
Building2,
4+
Users,
5+
Calendar,
6+
MapPin,
7+
Github,
8+
Twitter,
9+
Mail,
10+
Code,
11+
GraduationCap,
12+
Heart,
13+
Rocket,
14+
} from "lucide-svelte";
15+
</script>
16+
17+
<svelte:head>
18+
<title>団体概要 | ut.code();</title>
19+
<meta property="og:title" content="団体概要 | ut.code();" />
20+
<meta
21+
name="description"
22+
content="ut.code();は2019年に発足した東京大学のソフトウェアエンジニアリングサークルです。約30名のメンバーが学習・交流・開発の三軸で活動しています。"
23+
/>
24+
</svelte:head>
25+
26+
<!-- Header -->
27+
<section class="border-b border-zinc-200 bg-zinc-50/50 py-16">
28+
<div class="mx-auto max-w-6xl px-6">
29+
<div
30+
class="mb-3 font-[JetBrains_Mono,monospace] text-xs font-medium tracking-widest text-[#00D372] uppercase"
31+
>
32+
About Us
33+
</div>
34+
<h1 class="mb-2 text-3xl font-bold">団体概要</h1>
35+
<p class="text-zinc-500">ut.code(); の活動内容や団体情報をご紹介します。</p>
36+
</div>
37+
</section>
38+
39+
<div class="mx-auto max-w-4xl px-6 py-12">
40+
<!-- Organization Overview -->
41+
<div class="mb-12 rounded-2xl border border-[#00D372]/20 bg-[#00D372]/5 p-8">
42+
<h2 class="mb-4 text-2xl font-bold">ut.code(); について</h2>
43+
<p class="leading-relaxed text-zinc-700">
44+
ut.code();
45+
は東京大学のソフトウェアエンジニアリングサークルです。プログラミングを通じて、より良い社会を創ることを目指しています。「学習・教育」「交流」「開発」の三軸を主にして活動しています。
46+
</p>
47+
</div>
48+
49+
<!-- Basic Information -->
50+
<section class="mb-12">
51+
<h2 class="mb-6 flex items-center gap-2 text-xl font-bold">
52+
<Building2 class="h-5 w-5 text-[#00D372]" />
53+
基本情報
54+
</h2>
55+
<div class="grid gap-4 rounded-2xl border border-zinc-200 bg-white p-6">
56+
<div class="flex items-start gap-4">
57+
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#00D372]/10">
58+
<Code class="h-5 w-5 text-[#00D372]" />
59+
</div>
60+
<div class="flex-1">
61+
<div class="text-sm text-zinc-500">団体名</div>
62+
<div class="font-semibold text-zinc-900">ut.code();</div>
63+
</div>
64+
</div>
65+
<div class="flex items-start gap-4">
66+
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#00D372]/10">
67+
<Users class="h-5 w-5 text-[#00D372]" />
68+
</div>
69+
<div class="flex-1">
70+
<div class="text-sm text-zinc-500">構成人数</div>
71+
<div class="font-semibold text-zinc-900">30 人程度</div>
72+
</div>
73+
</div>
74+
<div class="flex items-start gap-4">
75+
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#00D372]/10">
76+
<Calendar class="h-5 w-5 text-[#00D372]" />
77+
</div>
78+
<div class="flex-1">
79+
<div class="text-sm text-zinc-500">発足</div>
80+
<div class="font-semibold text-zinc-900">2019 年</div>
81+
</div>
82+
</div>
83+
<div class="flex items-start gap-4">
84+
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#00D372]/10">
85+
<MapPin class="h-5 w-5 text-[#00D372]" />
86+
</div>
87+
<div class="flex-1">
88+
<div class="text-sm text-zinc-500">部室</div>
89+
<div class="font-semibold text-zinc-900">駒場学生会館 313B</div>
90+
</div>
91+
</div>
92+
<div class="flex items-start gap-4">
93+
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#00D372]/10">
94+
<GraduationCap class="h-5 w-5 text-[#00D372]" />
95+
</div>
96+
<div class="flex-1">
97+
<div class="text-sm text-zinc-500">所属</div>
98+
<div class="font-semibold text-zinc-900">東京大学工学部丁友会 (2025年度)</div>
99+
</div>
100+
</div>
101+
</div>
102+
</section>
103+
104+
<!-- Activities -->
105+
<section class="mb-12">
106+
<h2 class="mb-6 flex items-center gap-2 text-xl font-bold">
107+
<Rocket class="h-5 w-5 text-[#00D372]" />
108+
活動内容
109+
</h2>
110+
<div class="mb-4 rounded-2xl border border-zinc-200 bg-white p-6">
111+
<p class="leading-relaxed text-zinc-700">
112+
ut.code(); には「学習・教育」「交流」「開発」の三軸を主にして活動しています。
113+
</p>
114+
</div>
115+
<div class="grid gap-4 sm:grid-cols-3">
116+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
117+
<h3 class="mb-2 font-semibold">学習・教育</h3>
118+
<p class="text-sm text-zinc-500">ut.code(); Learn、全ゼミ・自主ゼミ</p>
119+
</div>
120+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
121+
<h3 class="mb-2 font-semibold">交流</h3>
122+
<p class="text-sm text-zinc-500">五月祭・駒場祭、合宿</p>
123+
</div>
124+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
125+
<h3 class="mb-2 font-semibold">開発</h3>
126+
<p class="text-sm text-zinc-500">プロジェクト、ハッカソン</p>
127+
</div>
128+
</div>
129+
</section>
130+
131+
<!-- Location -->
132+
<section class="mb-12">
133+
<h2 class="mb-6 flex items-center gap-2 text-xl font-bold">
134+
<MapPin class="h-5 w-5 text-[#00D372]" />
135+
活動場所
136+
</h2>
137+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
138+
<ul class="space-y-3">
139+
<li class="flex items-start gap-3">
140+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
141+
<span class="text-zinc-700">部室: 駒場学生会館 313B</span>
142+
</li>
143+
<li class="flex items-start gap-3">
144+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
145+
<span class="text-zinc-700">本郷図書館 プロジェクトボックス</span>
146+
</li>
147+
<li class="flex items-start gap-3">
148+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
149+
<span class="text-zinc-700">オンライン (Discord)</span>
150+
</li>
151+
</ul>
152+
</div>
153+
</section>
154+
155+
<!-- Tech Stack -->
156+
<section class="mb-12">
157+
<h2 class="mb-6 flex items-center gap-2 text-xl font-bold">
158+
<Code class="h-5 w-5 text-[#00D372]" />
159+
主な使用技術・スタック
160+
</h2>
161+
<div class="mb-4 rounded-2xl border border-[#1DA1F2]/20 bg-[#1DA1F2]/5 p-4">
162+
<p class="text-sm text-zinc-700">具体的な使用技術はプロジェクトによって異なります。</p>
163+
</div>
164+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
165+
<ul class="space-y-3">
166+
<li class="flex items-start gap-3">
167+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
168+
<span class="text-zinc-700"><strong>言語:</strong> TypeScript など</span>
169+
</li>
170+
<li class="flex items-start gap-3">
171+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
172+
<span class="text-zinc-700"
173+
><strong>フレームワーク:</strong> React・Next.js, Svelte(Kit) など</span
174+
>
175+
</li>
176+
<li class="flex items-start gap-3">
177+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
178+
<span class="text-zinc-700"><strong>UI:</strong> MUI, Tailwind, DaisyUI など</span>
179+
</li>
180+
<li class="flex items-start gap-3">
181+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
182+
<span class="text-zinc-700"
183+
><strong>バックエンド:</strong> Hono, Express, Prisma, Drizzle など</span
184+
>
185+
</li>
186+
<li class="flex items-start gap-3">
187+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
188+
<span class="text-zinc-700"><strong>データベース:</strong> Supabase, Neon など</span>
189+
</li>
190+
<li class="flex items-start gap-3">
191+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
192+
<span class="text-zinc-700"
193+
><strong>インフラ:</strong> Cloudflare, Fly.io, Render など</span
194+
>
195+
</li>
196+
<li class="flex items-start gap-3">
197+
<span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-[#00D372]"></span>
198+
<span class="text-zinc-700"><strong>情報:</strong> Notion, Discord, GitHub など</span>
199+
</li>
200+
</ul>
201+
</div>
202+
</section>
203+
204+
<!-- FAQ -->
205+
<section class="mb-12">
206+
<h2 class="mb-6 text-xl font-bold">FAQ / よくある質問</h2>
207+
<div class="space-y-4">
208+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
209+
<h3 class="mb-2 font-semibold">Q: 活動頻度はどのくらいですか？</h3>
210+
<p class="text-sm leading-relaxed text-zinc-700">
211+
A:
212+
プロジェクトの参加数や各プロジェクトによって異なりますが、一般的には毎週夜のミーティングと月1~2回の作業会になります。
213+
</p>
214+
</div>
215+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
216+
<h3 class="mb-2 font-semibold">Q: 初心者でも大丈夫ですか？</h3>
217+
<p class="text-sm leading-relaxed text-zinc-700">
218+
A: 全く問題ありません！ ut.code();
219+
は全くの初心者がフルスタックのアプリケーションを作成できるようになる教材を公開しており、その教材を用いた勉強会や講習会も実施しています！
220+
</p>
221+
</div>
222+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
223+
<h3 class="mb-2 font-semibold">Q: 東京大学ではないです・一年生ではありません・文系です</h3>
224+
<p class="text-sm leading-relaxed text-zinc-700">
225+
A: 全く問題ありません！ ut.code(); は大学名・学年・文理による制限は設けていません。
226+
</p>
227+
</div>
228+
</div>
229+
</section>
230+
231+
<!-- Video -->
232+
<section class="mb-12">
233+
<h2 class="mb-6 text-xl font-bold">紹介動画</h2>
234+
<div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white">
235+
<iframe
236+
title="ut.code(); 紹介動画"
237+
class="aspect-video w-full"
238+
src="https://www.youtube-nocookie.com/embed/aUoa1AyfbMA?rel=0"
239+
loading="lazy"
240+
allow="picture-in-picture; web-share"
241+
allowfullscreen
242+
></iframe>
243+
</div>
244+
</section>
245+
246+
<!-- Contact -->
247+
<section class="mb-12">
248+
<h2 class="mb-6 flex items-center gap-2 text-xl font-bold">
249+
<Mail class="h-5 w-5 text-[#00D372]" />
250+
お問い合わせ・SNS
251+
</h2>
252+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
253+
<div class="mb-4 space-y-3">
254+
<div class="flex items-center gap-3">
255+
<Github class="h-5 w-5 text-zinc-500" />
256+
<span class="text-sm text-zinc-500">GitHub:</span>
257+
<a
258+
href="https://github.com/ut-code"
259+
target="_blank"
260+
rel="noopener noreferrer"
261+
class="text-sm font-medium text-[#00D372] hover:underline"
262+
>
263+
ut-code
264+
</a>
265+
</div>
266+
<div class="flex items-center gap-3">
267+
<Twitter class="h-5 w-5 text-zinc-500" />
268+
<span class="text-sm text-zinc-500">X (Twitter):</span>
269+
<a
270+
href="https://x.com/utokyo_code"
271+
target="_blank"
272+
rel="noopener noreferrer"
273+
class="text-sm font-medium text-[#00D372] hover:underline"
274+
>
275+
utokyo_code
276+
</a>
277+
</div>
278+
<div class="flex items-center gap-3">
279+
<Mail class="h-5 w-5 text-zinc-500" />
280+
<span class="text-sm text-zinc-500">Email:</span>
281+
<a
282+
href="mailto:[email protected]"
283+
class="text-sm font-medium text-[#00D372] hover:underline"
284+
>
285+
[email protected]
286+
</a>
287+
</div>
288+
</div>
289+
</div>
290+
</section>
291+
292+
<!-- Donation CTA -->
293+
<section class="mb-12">
294+
<h2 class="mb-6 flex items-center gap-2 text-xl font-bold">
295+
<Heart class="h-5 w-5 text-[#00D372]" />
296+
ご寄付・ご協賛のお願い
297+
</h2>
298+
<div class="rounded-2xl border border-zinc-200 bg-white p-6">
299+
<p class="mb-4 leading-relaxed text-zinc-700">
300+
ut.code();
301+
では、活動を支援していただける方を募集しております。詳細につきましては、お問い合わせください。
302+
</p>
303+
</div>
304+
</section>
305+
</div>

0 commit comments

Comments
 (0)