From b99961670ccffe242462c716e8e87af9af9f9711 Mon Sep 17 00:00:00 2001 From: aster <137767097+aster-void@users.noreply.github.com> Date: Thu, 15 Jan 2026 12:12:31 +0900 Subject: [PATCH] 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 --- .../components/home/ActivitiesSection.svelte | 121 ++++++----- src/lib/components/home/HeroSection.svelte | 86 +++++--- src/lib/components/home/JoinCTA.svelte | 36 +++- .../components/home/ProjectsSection.svelte | 193 +++++++++++------- src/lib/components/home/StatsSection.svelte | 99 +++------ 5 files changed, 298 insertions(+), 237 deletions(-) diff --git a/src/lib/components/home/ActivitiesSection.svelte b/src/lib/components/home/ActivitiesSection.svelte index 0863359..368eafb 100644 --- a/src/lib/components/home/ActivitiesSection.svelte +++ b/src/lib/components/home/ActivitiesSection.svelte @@ -1,67 +1,82 @@ -
+
-
-
WHAT WE DO
-

- 活動内容 -

-

- 学習、交流、開発の3つの柱で、実践的なソフトウェアエンジニアリングを体験 -

-
- -
-
-
-
- -
-

- 学習・教育 -

-

- プログラミング未経験者から経験者まで、共に学び教え合う学習会を開催。独自の学習コンテンツをオープンソースで公開しています。 -

+
+
+
+ WHAT WE DO
+

活動内容

+ +
-
-
-
+ {#each activities as activity (activity.number)} +
+ + - -
-

- 交流 -

-

- 定期的なイベントでメンバー同士の交流を深めます。集中開発合宿やブレインストーミング大会など様々な活動を実施。 -

-
-
+ {activity.number} + -
-
-
- +
+

{activity.title}

+

{activity.description}

+
+ {#each activity.keywords as keyword} + + {keyword} + + {/each} +
-

- 開発 -

-

- 大学や社会をより良くするソフトウェアを一緒に開発。Webアプリからモバイル、インフラまで幅広く挑戦しています。 -

-
+ {/each}
+ + + 詳しく見る + +
diff --git a/src/lib/components/home/HeroSection.svelte b/src/lib/components/home/HeroSection.svelte index a20c3bd..fe03111 100644 --- a/src/lib/components/home/HeroSection.svelte +++ b/src/lib/components/home/HeroSection.svelte @@ -1,43 +1,67 @@ - -
+
+ - -
+
+
-

- 東京大学のソフトウェア開発サークル -

-

- ut.code(); は、2019 - 年に発足した東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。 - プログラミングの学習・教育から、実社会で役立つソフトウェア製作まで、幅広い活動を行っています。 -

-
- - 参加する - - - - プロジェクトを見る - - + class="absolute inset-0 opacity-[0.03]" + style="background-image: url("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")" + >
+ + +
+
+ +
+ + 東京大学ソフトウェアエンジニアリングサークル +
+ + +

+ コードで、
+ 未来をつくる。 +

+ + +

+ ut.code(); は、プログラミングの学習・教育から実社会で役立つソフトウェア製作まで、幅広い活動を行う東京大学の技術コミュニティです。 +

+ + +
+ + 参加する + + + + プロジェクトを見る + + +
+
+
+ + +
+
+ Scroll +
diff --git a/src/lib/components/home/JoinCTA.svelte b/src/lib/components/home/JoinCTA.svelte index 7d837af..a6d5b26 100644 --- a/src/lib/components/home/JoinCTA.svelte +++ b/src/lib/components/home/JoinCTA.svelte @@ -2,34 +2,48 @@ import { ArrowRight, Sparkles } from "lucide-svelte"; -
-
-
+
+ +
+
+ + +
+ +
+
メンバー募集中
-

+

未来のソフトウェアを
- デザインしよう + 一緒につくろう

-

- ut.code(); で一緒にワクワクするソフトウェアを作りませんか?
- 初心者から実務経験者、学年を問わずどなたでも大歓迎です。 +

+ 初心者から経験者まで、学年を問わずどなたでも大歓迎。
+ ut.code(); で、ワクワクするソフトウェアを作りませんか?

- JOIN US + 参加する もっと詳しく diff --git a/src/lib/components/home/ProjectsSection.svelte b/src/lib/components/home/ProjectsSection.svelte index 143fd4a..9b2b052 100644 --- a/src/lib/components/home/ProjectsSection.svelte +++ b/src/lib/components/home/ProjectsSection.svelte @@ -1,83 +1,124 @@ -
-
-
-
-
- PROJECTS -
-

つくったもの

-

- 実際に使われるプロダクトを開発し、世に届ける -

-
- -
-
- {#each projects as project (project.id)} - - {#if project.coverUrl} -
- {project.name} -
- {:else} -
- No Image -
- {/if} -

- {project.name} -

- {#if project.description} -

- {project.description} -

- {/if} -
- - {PROJECT_CATEGORIES[project.category]} - -
- - {/each} -
- - すべて見る - - -
+
+
+
+
+
+ PROJECTS +
+

つくったもの

+
+ +
+ + {#if featured} + + +
+ {#if featured.coverUrl} +
+ {featured.name} +
+ {:else} +
+ No Image +
+ {/if} +
+
+ + Featured + +
+

+ {featured.name} +

+ {#if featured.description} +

+ {featured.description} +

+ {/if} +
+ 詳しく見る + +
+
+
+ + {/if} + + + {#if others.length > 0} +
+ {#each others as project (project.id)} + + {#if project.coverUrl} +
+ {project.name} +
+ {:else} +
+ No Image +
+ {/if} +
+

{project.name}

+ {#if project.description} +

{project.description}

+ {/if} + + {PROJECT_CATEGORIES[project.category]} + +
+ + {/each} +
+ {/if} + + + すべて見る + + +
diff --git a/src/lib/components/home/StatsSection.svelte b/src/lib/components/home/StatsSection.svelte index cd99902..ce05a75 100644 --- a/src/lib/components/home/StatsSection.svelte +++ b/src/lib/components/home/StatsSection.svelte @@ -1,6 +1,4 @@ -
+
-
- -
-
Members
- -
-
- - {members} - - + -
- - - -
-
Projects
- -
-
- - {projects} - - + -
- - - -
-
Articles
- -
-
- - {articles} - - + -
- - -
-
-
Years Active
- -
-
- - {years} - - + -
-
+
+ {#each stats as stat (stat.label)} + {#if stat.href} + + + {stat.value}+ + + + {stat.label} + + + {:else} +
+ + {stat.value}+ + + + {stat.label} + +
+ {/if} + {/each}