Skip to content

Commit bc28816

Browse files
aster-voidaster-void
committed
feat(home): redesign desktop hero section with asymmetric layout
デスクトップ向けにLPの初期ビューを再デザイン: - 非対称2カラムレイアウト (左: コンテンツ、右: 視覚要素) - 洗練されたタイポグラフィ階層 (6xl-7xl見出し) - フローティングカード (コードスニペット、統計、技術タグ) - CSSアニメーション (フェードイン、フロート効果) - モバイルは従来のセンター配置を維持 デザイン原則: Linear/Vercel/Stripeのミニマルな美学
1 parent 00dc633 commit bc28816

File tree

1 file changed

+225
-17
lines changed

1 file changed

+225
-17
lines changed

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

Lines changed: 225 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,28 @@
33
</script>
44

55
<section class="relative min-h-screen overflow-hidden bg-white">
6-
<!-- Subtle gradient mesh background -->
6+
<!-- Ambient background layers -->
77
<div class="pointer-events-none absolute inset-0" aria-hidden="true">
8+
<!-- Primary gradient mesh -->
89
<div
9-
class="absolute -left-1/4 top-0 h-[600px] w-[600px] rounded-full bg-[#00D372]/10 blur-3xl"
10+
class="absolute right-0 top-0 h-[800px] w-[800px] rounded-full bg-[#00D372]/[0.08] blur-3xl"
11+
style="transform: translate(30%, -20%);"
1012
></div>
13+
<!-- Secondary accent -->
1114
<div
12-
class="absolute -right-1/4 top-1/3 h-[500px] w-[500px] rounded-full bg-[#00D372]/5 blur-3xl"
15+
class="absolute bottom-0 left-0 h-[600px] w-[600px] rounded-full bg-[#00D372]/[0.04] blur-3xl"
16+
style="transform: translate(-40%, 20%);"
17+
></div>
18+
<!-- Subtle grid overlay -->
19+
<div
20+
class="absolute inset-0 opacity-[0.015]"
21+
style="background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 64px 64px;"
1322
></div>
1423
</div>
1524

16-
<!-- Grid pattern -->
17-
<div
18-
class="pointer-events-none absolute inset-0 opacity-[0.03]"
19-
style="background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 48px 48px;"
20-
aria-hidden="true"
21-
></div>
22-
23-
<div class="relative z-10 mx-auto flex min-h-screen max-w-6xl flex-col justify-center px-6 py-20">
24-
<div class="mx-auto max-w-3xl text-center">
25+
<div class="relative z-10 mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 py-20 lg:px-12">
26+
<!-- Mobile: centered layout -->
27+
<div class="lg:hidden mx-auto max-w-xl text-center">
2528
<div class="mb-8 flex flex-wrap items-center justify-center gap-3">
2629
<div
2730
class="flex items-center gap-2 rounded-full border border-[#00D372]/30 bg-[#00D372]/10 px-4 py-2"
@@ -37,34 +40,239 @@
3740
</div>
3841
</div>
3942

40-
<h1 class="mb-10 text-5xl font-bold leading-[1.1] tracking-tight text-zinc-900 sm:text-6xl lg:text-7xl">
43+
<h1 class="mb-10 text-5xl font-bold leading-[1.1] tracking-tight text-zinc-900 sm:text-6xl">
4144
Build<br />
4245
<span class="text-zinc-400">the</span>
4346
<span class="text-[#00D372]">Future</span><br />
4447
<span class="text-zinc-400">with</span> Code<span class="text-[#00D372]">;</span>
4548
</h1>
4649

47-
<p class="mb-10 mx-auto max-w-2xl text-lg leading-relaxed text-zinc-600 sm:text-xl">
50+
<p class="mb-10 mx-auto max-w-md text-lg leading-relaxed text-zinc-600">
4851
東京大学のソフトウェアエンジニアリングサークル。
4952
<span class="font-semibold text-zinc-800">学生が実際にプロダクトを作り、世に届ける。</span>
5053
</p>
5154

52-
<div class="flex flex-wrap items-center justify-center gap-4">
55+
<div class="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
5356
<a
5457
href="/join"
55-
class="group inline-flex items-center gap-2 rounded-lg bg-[#00D372] px-8 py-4 font-semibold text-white shadow-lg shadow-[#00D372]/30 transition-all hover:shadow-xl hover:shadow-[#00D372]/40 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
58+
class="group inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-lg bg-[#00D372] px-8 py-4 font-semibold text-white shadow-lg shadow-[#00D372]/30 transition-all hover:shadow-xl hover:shadow-[#00D372]/40 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
5659
>
5760
<span>参加する</span>
5861
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
5962
</a>
6063
<a
6164
href="/projects"
62-
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-[#00D372] focus:ring-offset-2"
65+
class="group inline-flex w-full sm:w-auto items-center justify-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-[#00D372] focus:ring-offset-2"
6366
>
6467
プロジェクトを見る
6568
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
6669
</a>
6770
</div>
6871
</div>
72+
73+
<!-- Desktop: asymmetric layout -->
74+
<div class="hidden lg:grid lg:grid-cols-2 lg:gap-16 xl:gap-24 lg:items-center">
75+
<!-- Left column: Content -->
76+
<div class="space-y-12 animate-fade-in-up">
77+
<!-- Meta badges -->
78+
<div class="flex flex-wrap items-center gap-3">
79+
<div
80+
class="flex items-center gap-2.5 rounded-full border border-[#00D372]/30 bg-[#00D372]/[0.08] px-5 py-2.5 backdrop-blur-sm"
81+
>
82+
<div class="h-2 w-2 rounded-full bg-[#00D372] shadow-[0_0_10px_rgba(0,211,114,0.7)] animate-pulse-glow"></div>
83+
<span class="font-mono text-sm font-medium text-zinc-700 tracking-wide">SINCE 2019</span>
84+
</div>
85+
<div
86+
class="flex items-center gap-2.5 rounded-full border border-zinc-200/80 bg-white/60 px-5 py-2.5 backdrop-blur-sm"
87+
>
88+
<Code2 class="h-4 w-4 text-zinc-500" />
89+
<span class="font-mono text-sm text-zinc-600">The University of Tokyo</span>
90+
</div>
91+
</div>
92+
93+
<!-- Headline -->
94+
<div class="space-y-4">
95+
<h1 class="text-6xl xl:text-7xl font-bold leading-[1.05] tracking-tight text-zinc-900">
96+
Build the <span class="text-[#00D372]">Future</span><br />
97+
with Code<span class="text-[#00D372]">;</span>
98+
</h1>
99+
</div>
100+
101+
<!-- Description -->
102+
<div class="space-y-6 max-w-xl">
103+
<p class="text-xl leading-relaxed text-zinc-600">
104+
東京大学のソフトウェアエンジニアリングサークル。
105+
</p>
106+
<p class="text-lg leading-relaxed text-zinc-700 font-medium">
107+
学生が実際にプロダクトを作り、世に届ける。
108+
</p>
109+
</div>
110+
111+
<!-- CTAs -->
112+
<div class="flex flex-wrap items-center gap-4 pt-4">
113+
<a
114+
href="/join"
115+
class="group inline-flex items-center gap-2.5 rounded-lg bg-[#00D372] px-8 py-4 font-semibold text-white shadow-lg shadow-[#00D372]/30 transition-all hover:shadow-xl hover:shadow-[#00D372]/40 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
116+
>
117+
<span>参加する</span>
118+
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
119+
</a>
120+
<a
121+
href="/projects"
122+
class="group inline-flex items-center gap-2.5 rounded-lg border border-zinc-900 bg-zinc-900 px-8 py-4 font-semibold text-white transition-all hover:bg-zinc-800 hover:border-zinc-800 focus:outline-none focus:ring-2 focus:ring-[#00D372] focus:ring-offset-2"
123+
>
124+
<span>プロジェクトを見る</span>
125+
<ArrowRight class="h-5 w-5 transition-transform group-hover:translate-x-1" />
126+
</a>
127+
</div>
128+
</div>
129+
130+
<!-- Right column: Visual elements -->
131+
<div class="relative animate-fade-in-right">
132+
<!-- Floating card stack -->
133+
<div class="relative h-[600px]">
134+
<!-- Card 1: Code snippet -->
135+
<div
136+
class="absolute left-0 top-0 w-full rounded-2xl border border-zinc-200/80 bg-white/80 p-8 shadow-2xl shadow-zinc-900/5 backdrop-blur-sm animate-float-1"
137+
>
138+
<div class="flex items-center justify-between mb-6">
139+
<div class="flex items-center gap-2">
140+
<div class="h-3 w-3 rounded-full bg-[#ff5f57]"></div>
141+
<div class="h-3 w-3 rounded-full bg-[#febc2e]"></div>
142+
<div class="h-3 w-3 rounded-full bg-[#28c840]"></div>
143+
</div>
144+
<span class="font-mono text-xs text-zinc-400">main.ts</span>
145+
</div>
146+
<pre class="font-mono text-sm leading-relaxed text-zinc-700"><code>{@html `<span class="text-purple-600">const</span> <span class="text-zinc-900">mission</span> = {
147+
<span class="text-[#00D372]">learn</span>: <span class="text-blue-600">"最新技術"</span>,
148+
<span class="text-[#00D372]">build</span>: <span class="text-blue-600">"実用プロダクト"</span>,
149+
<span class="text-[#00D372]">share</span>: <span class="text-blue-600">"知見と経験"</span>
150+
};`}</code></pre>
151+
</div>
152+
153+
<!-- Card 2: Stats -->
154+
<div
155+
class="absolute right-0 top-48 w-80 rounded-2xl border border-zinc-200/80 bg-white/90 p-6 shadow-xl shadow-zinc-900/5 backdrop-blur-sm animate-float-2"
156+
>
157+
<div class="space-y-4">
158+
<div class="flex items-baseline gap-3">
159+
<div class="text-4xl font-bold text-zinc-900">100+</div>
160+
<div class="font-mono text-sm text-zinc-500">メンバー</div>
161+
</div>
162+
<div class="flex items-baseline gap-3">
163+
<div class="text-4xl font-bold text-[#00D372]">50+</div>
164+
<div class="font-mono text-sm text-zinc-500">プロジェクト</div>
165+
</div>
166+
<div class="flex items-baseline gap-3">
167+
<div class="text-4xl font-bold text-zinc-900">6</div>
168+
<div class="font-mono text-sm text-zinc-500">年の実績</div>
169+
</div>
170+
</div>
171+
</div>
172+
173+
<!-- Card 3: Tech tags -->
174+
<div
175+
class="absolute left-12 bottom-0 rounded-2xl border border-zinc-200/80 bg-white/80 p-6 shadow-xl shadow-zinc-900/5 backdrop-blur-sm animate-float-3"
176+
>
177+
<div class="flex flex-wrap gap-2">
178+
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">TypeScript</span>
179+
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">React</span>
180+
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">Svelte</span>
181+
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">Python</span>
182+
<span class="rounded-lg bg-zinc-100 px-3 py-1.5 font-mono text-xs text-zinc-700">Go</span>
183+
<span class="rounded-lg bg-[#00D372]/10 px-3 py-1.5 font-mono text-xs text-[#00D372] font-medium">+More</span>
184+
</div>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
69189
</div>
70190
</section>
191+
192+
<style>
193+
/* Fade in animations */
194+
@keyframes fade-in-up {
195+
from {
196+
opacity: 0;
197+
transform: translateY(24px);
198+
}
199+
to {
200+
opacity: 1;
201+
transform: translateY(0);
202+
}
203+
}
204+
205+
@keyframes fade-in-right {
206+
from {
207+
opacity: 0;
208+
transform: translateX(-24px);
209+
}
210+
to {
211+
opacity: 1;
212+
transform: translateX(0);
213+
}
214+
}
215+
216+
.animate-fade-in-up {
217+
animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
218+
}
219+
220+
.animate-fade-in-right {
221+
animation: fade-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
222+
opacity: 0;
223+
}
224+
225+
/* Floating cards */
226+
@keyframes float-1 {
227+
0%, 100% {
228+
transform: translateY(0px) rotate(0deg);
229+
}
230+
50% {
231+
transform: translateY(-12px) rotate(-1deg);
232+
}
233+
}
234+
235+
@keyframes float-2 {
236+
0%, 100% {
237+
transform: translateY(0px) rotate(0deg);
238+
}
239+
50% {
240+
transform: translateY(-16px) rotate(1deg);
241+
}
242+
}
243+
244+
@keyframes float-3 {
245+
0%, 100% {
246+
transform: translateY(0px) rotate(0deg);
247+
}
248+
50% {
249+
transform: translateY(-10px) rotate(-0.5deg);
250+
}
251+
}
252+
253+
.animate-float-1 {
254+
animation: float-1 8s ease-in-out infinite;
255+
}
256+
257+
.animate-float-2 {
258+
animation: float-2 7s ease-in-out infinite 0.5s;
259+
}
260+
261+
.animate-float-3 {
262+
animation: float-3 9s ease-in-out infinite 1s;
263+
}
264+
265+
/* Pulse glow effect */
266+
@keyframes pulse-glow {
267+
0%, 100% {
268+
box-shadow: 0 0 10px rgba(0, 211, 114, 0.7);
269+
}
270+
50% {
271+
box-shadow: 0 0 20px rgba(0, 211, 114, 0.9);
272+
}
273+
}
274+
275+
.animate-pulse-glow {
276+
animation: pulse-glow 2s ease-in-out infinite;
277+
}
278+
</style>

0 commit comments

Comments
 (0)