Skip to content

Commit b999616

Browse files
aster-voidaster-void
committed
redesign: modernize top page with improved visual hierarchy
- Hero: dark theme with gradient orbs, grid pattern, bolder typography - Stats: compact horizontal layout with dividers - Activities: numbered cards with background decorations and keywords - Projects: featured project with large card, horizontal list for others - JoinCTA: gradient orbs and enhanced visual impact
1 parent b3713df commit b999616

5 files changed

Lines changed: 298 additions & 237 deletions

File tree

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

Lines changed: 68 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,82 @@
11
<script lang="ts">
2-
import { BookOpen, Code, Users } from "lucide-svelte";
2+
import { ArrowRight } from "lucide-svelte";
3+
4+
const activities = [
5+
{
6+
number: "01",
7+
title: "学習・教育",
8+
description:
9+
"プログラミング未経験者から経験者まで、共に学び教え合う学習会を開催。独自の学習コンテンツをオープンソースで公開しています。",
10+
keywords: ["勉強会", "教材開発", "ハンズオン"],
11+
},
12+
{
13+
number: "02",
14+
title: "交流",
15+
description:
16+
"定期的なイベントでメンバー同士の交流を深めます。集中開発合宿やブレインストーミング大会など様々な活動を実施。",
17+
keywords: ["合宿", "LT会", "ハッカソン"],
18+
},
19+
{
20+
number: "03",
21+
title: "開発",
22+
description:
23+
"大学や社会をより良くするソフトウェアを一緒に開発。Webアプリからモバイル、インフラまで幅広く挑戦しています。",
24+
keywords: ["Web", "モバイル", "OSS"],
25+
},
26+
];
327
</script>
428

5-
<section class="bg-white py-24">
29+
<section class="bg-zinc-50 py-24">
630
<div class="mx-auto max-w-6xl px-6">
7-
<div class="mb-20 text-center">
8-
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-primary">WHAT WE DO</div>
9-
<h2 class="text-5xl font-bold text-zinc-900 lg:text-6xl">
10-
活動内容
11-
</h2>
12-
<p class="mx-auto mt-6 max-w-2xl text-lg text-zinc-600">
13-
学習、交流、開発の3つの柱で、実践的なソフトウェアエンジニアリングを体験
14-
</p>
15-
</div>
16-
17-
<div class="grid gap-8 md:grid-cols-3">
18-
<div class="group">
19-
<div class="rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:bg-primary/5">
20-
<div
21-
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-white"
22-
>
23-
<BookOpen class="h-8 w-8" />
24-
</div>
25-
<h3 class="mb-4 text-2xl font-bold text-zinc-900">
26-
学習・教育
27-
</h3>
28-
<p class="leading-relaxed text-zinc-600">
29-
プログラミング未経験者から経験者まで、共に学び教え合う学習会を開催。独自の学習コンテンツをオープンソースで公開しています。
30-
</p>
31+
<div class="mb-16 flex items-end justify-between">
32+
<div>
33+
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-primary">
34+
WHAT WE DO
3135
</div>
36+
<h2 class="text-4xl font-bold text-zinc-900 sm:text-5xl lg:text-6xl">活動内容</h2>
3237
</div>
38+
<a
39+
href="/activities"
40+
class="group hidden items-center gap-2 font-semibold text-zinc-600 transition-colors hover:text-primary sm:flex"
41+
>
42+
詳しく見る
43+
<ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-1" />
44+
</a>
45+
</div>
3346

34-
<div class="group">
35-
<div class="rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:bg-primary/5">
36-
<div
37-
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-white"
47+
<div class="grid gap-6 lg:grid-cols-3">
48+
{#each activities as activity (activity.number)}
49+
<div
50+
class="group relative overflow-hidden rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5"
51+
>
52+
<!-- Large number background -->
53+
<span
54+
class="absolute -top-4 -right-4 font-mono text-[8rem] font-bold leading-none text-zinc-100 transition-colors group-hover:text-primary/10"
3855
>
39-
<Users class="h-8 w-8" />
40-
</div>
41-
<h3 class="mb-4 text-2xl font-bold text-zinc-900">
42-
交流
43-
</h3>
44-
<p class="leading-relaxed text-zinc-600">
45-
定期的なイベントでメンバー同士の交流を深めます。集中開発合宿やブレインストーミング大会など様々な活動を実施。
46-
</p>
47-
</div>
48-
</div>
56+
{activity.number}
57+
</span>
4958

50-
<div class="group">
51-
<div class="rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:bg-primary/5">
52-
<div
53-
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-white"
54-
>
55-
<Code class="h-8 w-8" />
59+
<div class="relative">
60+
<h3 class="mb-4 text-2xl font-bold text-zinc-900">{activity.title}</h3>
61+
<p class="mb-6 leading-relaxed text-zinc-600">{activity.description}</p>
62+
<div class="flex flex-wrap gap-2">
63+
{#each activity.keywords as keyword}
64+
<span class="rounded-lg bg-zinc-100 px-3 py-1 font-mono text-xs text-zinc-600">
65+
{keyword}
66+
</span>
67+
{/each}
68+
</div>
5669
</div>
57-
<h3 class="mb-4 text-2xl font-bold text-zinc-900">
58-
開発
59-
</h3>
60-
<p class="leading-relaxed text-zinc-600">
61-
大学や社会をより良くするソフトウェアを一緒に開発。Webアプリからモバイル、インフラまで幅広く挑戦しています。
62-
</p>
6370
</div>
64-
</div>
71+
{/each}
6572
</div>
73+
74+
<a
75+
href="/activities"
76+
class="mt-8 flex items-center justify-center gap-2 font-semibold text-zinc-600 transition-colors hover:text-primary sm:hidden"
77+
>
78+
詳しく見る
79+
<ArrowRight class="h-4 w-4" />
80+
</a>
6681
</div>
6782
</section>

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

Lines changed: 55 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,67 @@
11
<script lang="ts">
2-
import { ArrowRight } from "lucide-svelte";
2+
import { ArrowRight, Terminal } from "lucide-svelte";
33
</script>
44

5-
<!-- Full-height hero with background image -->
6-
<section class="relative h-screen">
5+
<section class="relative min-h-[100svh] overflow-hidden bg-zinc-950">
6+
<!-- Background image with overlay -->
77
<img
88
src="/images/headers/hero.jpg"
99
alt=""
10-
class="absolute inset-0 h-full w-full object-cover"
10+
class="absolute inset-0 h-full w-full object-cover opacity-40"
1111
/>
12-
<!-- Gradient overlay for text readability -->
13-
<div class="absolute inset-0 bg-gradient-to-r from-black/40 to-transparent"></div>
12+
<div class="absolute inset-0 bg-gradient-to-b from-zinc-950/60 via-zinc-950/40 to-zinc-950"></div>
1413

14+
<!-- Grid pattern overlay -->
1515
<div
16-
class="absolute top-1/3 left-4 right-4 max-w-lg rounded-2xl bg-white/95 p-8 shadow-xl backdrop-blur-sm sm:left-8 md:left-10 md:right-auto"
17-
>
18-
<h1 class="text-2xl font-bold text-zinc-900 md:text-3xl">
19-
東京大学のソフトウェア開発サークル
20-
</h1>
21-
<p class="mt-4 leading-relaxed text-zinc-600">
22-
ut.code(); は、2019
23-
年に発足した東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。
24-
プログラミングの学習・教育から、実社会で役立つソフトウェア製作まで、幅広い活動を行っています。
25-
</p>
26-
<div class="mt-8 flex flex-wrap gap-4">
27-
<a
28-
href="/join"
29-
class="group inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-semibold text-white shadow-lg transition-all hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
30-
>
31-
<span>参加する</span>
32-
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
33-
</a>
34-
<a
35-
href="/projects"
36-
class="group inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 font-semibold text-white transition-all hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
37-
>
38-
プロジェクトを見る
39-
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
40-
</a>
16+
class="absolute inset-0 opacity-[0.03]"
17+
style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;)"
18+
></div>
19+
20+
<!-- Content -->
21+
<div class="relative flex min-h-[100svh] flex-col justify-center px-6 py-24">
22+
<div class="mx-auto w-full max-w-6xl">
23+
<!-- Terminal badge -->
24+
<div class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2">
25+
<Terminal class="h-4 w-4 text-primary" />
26+
<span class="font-mono text-sm text-primary">東京大学ソフトウェアエンジニアリングサークル</span>
27+
</div>
28+
29+
<!-- Main heading -->
30+
<h1 class="mb-6 max-w-4xl text-4xl font-bold leading-[1.1] tracking-tight text-white sm:text-5xl md:text-6xl lg:text-7xl">
31+
コードで、<br />
32+
<span class="text-primary">未来をつくる。</span>
33+
</h1>
34+
35+
<!-- Description -->
36+
<p class="mb-10 max-w-2xl text-lg leading-relaxed text-zinc-400 sm:text-xl">
37+
ut.code(); は、プログラミングの学習・教育から実社会で役立つソフトウェア製作まで、幅広い活動を行う東京大学の技術コミュニティです。
38+
</p>
39+
40+
<!-- CTAs -->
41+
<div class="flex flex-wrap gap-4">
42+
<a
43+
href="/join"
44+
class="group inline-flex items-center gap-2 rounded-lg bg-primary px-8 py-4 font-semibold text-white shadow-lg shadow-primary/25 transition-all hover:shadow-xl hover:shadow-primary/30 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-zinc-950"
45+
>
46+
<span>参加する</span>
47+
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
48+
</a>
49+
<a
50+
href="/projects"
51+
class="group inline-flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-800/50 px-8 py-4 font-semibold text-white transition-all hover:border-zinc-600 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-zinc-950"
52+
>
53+
プロジェクトを見る
54+
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
55+
</a>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<!-- Scroll indicator -->
61+
<div class="absolute bottom-8 left-1/2 -translate-x-1/2">
62+
<div class="flex flex-col items-center gap-2 text-zinc-500">
63+
<span class="font-mono text-xs uppercase tracking-widest">Scroll</span>
64+
<div class="h-12 w-px bg-gradient-to-b from-zinc-500 to-transparent"></div>
4165
</div>
4266
</div>
4367
</section>

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

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,48 @@
22
import { ArrowRight, Sparkles } from "lucide-svelte";
33
</script>
44

5-
<section id="join" class="bg-zinc-900 py-24">
6-
<div class="mx-auto max-w-4xl px-6 text-center">
7-
<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2">
5+
<section id="join" class="relative overflow-hidden bg-zinc-950 py-32">
6+
<!-- Gradient orbs -->
7+
<div
8+
class="absolute -top-40 -left-40 h-80 w-80 rounded-full bg-primary/20 blur-[100px]"
9+
></div>
10+
<div
11+
class="absolute -right-40 -bottom-40 h-80 w-80 rounded-full bg-primary/10 blur-[100px]"
12+
></div>
13+
14+
<!-- Grid pattern -->
15+
<div
16+
class="absolute inset-0 opacity-[0.02]"
17+
style="background-image: url(&quot;data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E&quot;)"
18+
></div>
19+
20+
<div class="relative mx-auto max-w-4xl px-6 text-center">
21+
<div class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2">
822
<Sparkles class="h-4 w-4 text-primary" />
923
<span class="font-mono text-sm font-medium text-primary">メンバー募集中</span>
1024
</div>
1125

12-
<h2 class="mb-6 text-5xl font-bold leading-tight text-white sm:text-6xl lg:text-7xl">
26+
<h2 class="mb-6 text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
1327
未来のソフトウェアを<br />
14-
<span class="text-primary">デザインしよう</span>
28+
<span class="text-primary">一緒につくろう</span>
1529
</h2>
1630

17-
<p class="mx-auto mb-10 max-w-2xl text-lg leading-relaxed text-zinc-400 sm:text-xl">
18-
ut.code(); で一緒にワクワクするソフトウェアを作りませんか?<br />
19-
初心者から実務経験者、学年を問わずどなたでも大歓迎です。
31+
<p class="mx-auto mb-12 max-w-2xl text-lg leading-relaxed text-zinc-400">
32+
初心者から経験者まで、学年を問わずどなたでも大歓迎。<br />
33+
ut.code(); で、ワクワクするソフトウェアを作りませんか?
2034
</p>
2135

2236
<div class="flex flex-wrap items-center justify-center gap-4">
2337
<a
2438
href="/join"
25-
class="group inline-flex items-center gap-2 rounded-lg bg-primary px-8 py-4 font-semibold text-white shadow-lg shadow-primary/30 transition-all hover:shadow-xl hover:shadow-primary/40 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
39+
class="group inline-flex items-center gap-2 rounded-lg bg-primary px-8 py-4 font-semibold text-white shadow-lg shadow-primary/25 transition-all hover:shadow-xl hover:shadow-primary/35 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-zinc-950"
2640
>
27-
JOIN US
41+
参加する
2842
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
2943
</a>
3044
<a
3145
href="/about"
32-
class="group inline-flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-800/50 px-8 py-4 font-semibold text-white transition-all hover:border-zinc-600 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
46+
class="group inline-flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900/50 px-8 py-4 font-semibold text-white transition-all hover:border-zinc-600 hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-zinc-950"
3347
>
3448
もっと詳しく
3549
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />

0 commit comments

Comments
 (0)