Skip to content

Commit cb86085

Browse files
aster-voidaster-void
committed
feat: add picture-ful design from utcode.net
- Add full-height hero with background image overlay - Create reusable ImageSection component for alternating image-text layout - Redesign activities page with large images and cover header - Copy activity images from utcode.net (learn, develop, share sections)
1 parent b942f73 commit cb86085

17 files changed

Lines changed: 267 additions & 223 deletions

File tree

‎src/lib/components/ImageSection.svelte‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
import type { Snippet } from "svelte";
3+
4+
interface Props {
5+
title: string;
6+
image: string;
7+
imageAlt?: string;
8+
alignImage: "left" | "right";
9+
children: Snippet;
10+
}
11+
12+
const { title, image, imageAlt = "", alignImage, children }: Props = $props();
13+
</script>
14+
15+
<section class="mt-16 lg:grid lg:items-center">
16+
<div style:grid-area="1 / 1">
17+
<div
18+
class="isolate h-[300px] overflow-clip md:h-[400px] lg:h-[500px] lg:w-1/2 xl:h-[600px] {alignImage ===
19+
'left'
20+
? 'lg:rounded-r-2xl'
21+
: 'lg:ml-auto lg:rounded-l-2xl'}"
22+
>
23+
<img src={image} alt={imageAlt} class="h-full w-full object-cover" />
24+
</div>
25+
</div>
26+
<div style:grid-area="1 / 1" class="container mx-auto lg:max-w-screen-lg">
27+
<div class="p-8 lg:w-1/2 {alignImage === 'left' ? 'lg:ml-auto' : ''}">
28+
<h2 class="text-3xl font-bold text-zinc-900 lg:text-4xl">{title}</h2>
29+
<div class="mt-4 space-y-4 text-zinc-600">
30+
{@render children()}
31+
</div>
32+
</div>
33+
</div>
34+
</section>

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

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,38 @@
22
import { ArrowRight } from "lucide-svelte";
33
</script>
44

5-
<section class="bg-white py-32">
6-
<div class="mx-auto max-w-6xl px-6">
7-
<div class="mx-auto max-w-4xl text-center">
8-
<div class="mb-6 font-mono text-sm font-medium uppercase tracking-widest text-primary">SINCE 2019</div>
5+
<!-- Full-height hero with background image -->
6+
<section class="relative h-screen">
7+
<img
8+
src="/images/headers/hero.jpg"
9+
alt=""
10+
class="absolute inset-0 h-full w-full object-cover"
11+
/>
912

10-
<h1 class="mb-8 text-5xl font-bold leading-tight text-zinc-900 sm:text-6xl lg:text-7xl">
11-
Build the <span class="text-primary">Future</span><br />
12-
with Code<span class="text-primary">;</span>
13-
</h1>
14-
15-
<p class="mb-4 text-xl leading-relaxed text-zinc-600">
16-
東京大学のソフトウェアエンジニアリングサークル。
17-
</p>
18-
<p class="mb-12 text-lg font-medium leading-relaxed text-zinc-700">
19-
学生が実際にプロダクトを作り、世に届ける。
20-
</p>
21-
22-
<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
23-
<a
24-
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 transition-all hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
26-
>
27-
<span>参加する</span>
28-
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
29-
</a>
30-
<a
31-
href="/projects"
32-
class="group inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-8 py-4 font-semibold text-white transition-all hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
33-
>
34-
プロジェクトを見る
35-
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
36-
</a>
37-
</div>
13+
<div class="absolute top-[40%] left-6 mr-6 max-w-lg bg-white p-8 shadow-xl md:left-10">
14+
<h1 class="text-2xl font-bold text-zinc-900 md:text-3xl">
15+
東京大学のソフトウェア開発サークル
16+
</h1>
17+
<p class="prose mt-4 text-zinc-600">
18+
ut.code(); は、2019
19+
年に発足した東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。
20+
プログラミングの学習・教育から、実社会で役立つソフトウェア製作まで、幅広い活動を行っています。
21+
</p>
22+
<div class="mt-8 flex flex-wrap gap-4">
23+
<a
24+
href="/join"
25+
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"
26+
>
27+
<span>参加する</span>
28+
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
29+
</a>
30+
<a
31+
href="/projects"
32+
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"
33+
>
34+
プロジェクトを見る
35+
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
36+
</a>
3837
</div>
3938
</div>
4039
</section>

0 commit comments

Comments
 (0)