Skip to content

redesign: modernize top page #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aster-void wants to merge 1 commit into
base: main
Choose a base branch
from
+298 −237
Open

redesign: modernize top page #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 68 additions & 53 deletions src/lib/components/home/ActivitiesSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,82 @@
<script lang="ts">
import { BookOpen, Code, Users } from "lucide-svelte";
import { ArrowRight } from "lucide-svelte";

const activities = [
{
number: "01",
title: "学習・教育",
description:
"プログラミング未経験者から経験者まで、共に学び教え合う学習会を開催。独自の学習コンテンツをオープンソースで公開しています。",
keywords: ["勉強会", "教材開発", "ハンズオン"],
},
{
number: "02",
title: "交流",
description:
"定期的なイベントでメンバー同士の交流を深めます。集中開発合宿やブレインストーミング大会など様々な活動を実施。",
keywords: ["合宿", "LT会", "ハッカソン"],
},
{
number: "03",
title: "開発",
description:
"大学や社会をより良くするソフトウェアを一緒に開発。Webアプリからモバイル、インフラまで幅広く挑戦しています。",
keywords: ["Web", "モバイル", "OSS"],
},
];
</script>

<section class="bg-white py-24">
<section class="bg-zinc-50 py-24">
<div class="mx-auto max-w-6xl px-6">
<div class="mb-20 text-center">
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-primary">WHAT WE DO</div>
<h2 class="text-5xl font-bold text-zinc-900 lg:text-6xl">
活動内容
</h2>
<p class="mx-auto mt-6 max-w-2xl text-lg text-zinc-600">
学習、交流、開発の3つの柱で、実践的なソフトウェアエンジニアリングを体験
</p>
</div>

<div class="grid gap-8 md:grid-cols-3">
<div class="group">
<div class="rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:bg-primary/5">
<div
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-white"
>
<BookOpen class="h-8 w-8" />
</div>
<h3 class="mb-4 text-2xl font-bold text-zinc-900">
学習・教育
</h3>
<p class="leading-relaxed text-zinc-600">
プログラミング未経験者から経験者まで、共に学び教え合う学習会を開催。独自の学習コンテンツをオープンソースで公開しています。
</p>
<div class="mb-16 flex items-end justify-between">
<div>
<div class="mb-4 font-mono text-sm font-medium uppercase tracking-widest text-primary">
WHAT WE DO
</div>
<h2 class="text-4xl font-bold text-zinc-900 sm:text-5xl lg:text-6xl">活動内容</h2>
</div>
<a
href="/activities"
class="group hidden items-center gap-2 font-semibold text-zinc-600 transition-colors hover:text-primary sm:flex"
>
詳しく見る
<ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-1" />
</a>
</div>

<div class="group">
<div class="rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:bg-primary/5">
<div
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-white"
<div class="grid gap-6 lg:grid-cols-3">
{#each activities as activity (activity.number)}
<div
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"
>
<!-- Large number background -->
<span
class="absolute -top-4 -right-4 font-mono text-[8rem] font-bold leading-none text-zinc-100 transition-colors group-hover:text-primary/10"
>
<Users class="h-8 w-8" />
</div>
<h3 class="mb-4 text-2xl font-bold text-zinc-900">
交流
</h3>
<p class="leading-relaxed text-zinc-600">
定期的なイベントでメンバー同士の交流を深めます。集中開発合宿やブレインストーミング大会など様々な活動を実施。
</p>
</div>
</div>
{activity.number}
</span>

<div class="group">
<div class="rounded-2xl border border-zinc-200 bg-white p-8 transition-all hover:border-primary/30 hover:bg-primary/5">
<div
class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-white"
>
<Code class="h-8 w-8" />
<div class="relative">
<h3 class="mb-4 text-2xl font-bold text-zinc-900">{activity.title}</h3>
<p class="mb-6 leading-relaxed text-zinc-600">{activity.description}</p>
<div class="flex flex-wrap gap-2">
{#each activity.keywords as keyword}
<span class="rounded-lg bg-zinc-100 px-3 py-1 font-mono text-xs text-zinc-600">
{keyword}
</span>
{/each}
</div>
</div>
<h3 class="mb-4 text-2xl font-bold text-zinc-900">
開発
</h3>
<p class="leading-relaxed text-zinc-600">
大学や社会をより良くするソフトウェアを一緒に開発。Webアプリからモバイル、インフラまで幅広く挑戦しています。
</p>
</div>
</div>
{/each}
</div>

<a
href="/activities"
class="mt-8 flex items-center justify-center gap-2 font-semibold text-zinc-600 transition-colors hover:text-primary sm:hidden"
>
詳しく見る
<ArrowRight class="h-4 w-4" />
</a>
</div>
</section>
86 changes: 55 additions & 31 deletions src/lib/components/home/HeroSection.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,67 @@
<script lang="ts">
import { ArrowRight } from "lucide-svelte";
import { ArrowRight, Terminal } from "lucide-svelte";
</script>

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

<!-- Grid pattern overlay -->
<div
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"
>
<h1 class="text-2xl font-bold text-zinc-900 md:text-3xl">
東京大学のソフトウェア開発サークル
</h1>
<p class="mt-4 leading-relaxed text-zinc-600">
ut.code(); は、2019
年に発足した東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。
プログラミングの学習・教育から、実社会で役立つソフトウェア製作まで、幅広い活動を行っています。
</p>
<div class="mt-8 flex flex-wrap gap-4">
<a
href="/join"
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"
>
<span>参加する</span>
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
</a>
<a
href="/projects"
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"
>
プロジェクトを見る
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
</a>
class="absolute inset-0 opacity-[0.03]"
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;)"
></div>

<!-- Content -->
<div class="relative flex min-h-[100svh] flex-col justify-center px-6 py-24">
<div class="mx-auto w-full max-w-6xl">
<!-- Terminal badge -->
<div class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2">
<Terminal class="h-4 w-4 text-primary" />
<span class="font-mono text-sm text-primary">東京大学ソフトウェアエンジニアリングサークル</span>
</div>

<!-- Main heading -->
<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">
コードで、<br />
<span class="text-primary">未来をつくる。</span>
</h1>

<!-- Description -->
<p class="mb-10 max-w-2xl text-lg leading-relaxed text-zinc-400 sm:text-xl">
ut.code(); は、プログラミングの学習・教育から実社会で役立つソフトウェア製作まで、幅広い活動を行う東京大学の技術コミュニティです。
</p>

<!-- CTAs -->
<div class="flex flex-wrap gap-4">
<a
href="/join"
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"
>
<span>参加する</span>
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
</a>
<a
href="/projects"
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"
>
プロジェクトを見る
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
</a>
</div>
</div>
</div>

<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2">
<div class="flex flex-col items-center gap-2 text-zinc-500">
<span class="font-mono text-xs uppercase tracking-widest">Scroll</span>
<div class="h-12 w-px bg-gradient-to-b from-zinc-500 to-transparent"></div>
</div>
</div>
</section>
36 changes: 25 additions & 11 deletions src/lib/components/home/JoinCTA.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,48 @@
import { ArrowRight, Sparkles } from "lucide-svelte";
</script>

<section id="join" class="bg-zinc-900 py-24">
<div class="mx-auto max-w-4xl px-6 text-center">
<div class="mb-6 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2">
<section id="join" class="relative overflow-hidden bg-zinc-950 py-32">
<!-- Gradient orbs -->
<div
class="absolute -top-40 -left-40 h-80 w-80 rounded-full bg-primary/20 blur-[100px]"
></div>
<div
class="absolute -right-40 -bottom-40 h-80 w-80 rounded-full bg-primary/10 blur-[100px]"
></div>

<!-- Grid pattern -->
<div
class="absolute inset-0 opacity-[0.02]"
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;)"
></div>

<div class="relative mx-auto max-w-4xl px-6 text-center">
<div class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2">
<Sparkles class="h-4 w-4 text-primary" />
<span class="font-mono text-sm font-medium text-primary">メンバー募集中</span>
</div>

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

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

<div class="flex flex-wrap items-center justify-center gap-4">
<a
href="/join"
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"
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"
>
JOIN US
参加する
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
</a>
<a
href="/about"
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"
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"
>
もっと詳しく
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
Expand Down
Loading