fix: address review feedback

- Compress all images (15MB+ → ~2MB total)
- Add rounded-2xl and backdrop-blur to hero card
- Add gradient overlay for text readability
- Fix mobile hero card spacing
- Replace activities page header icon with section label
- Update REVIEW.md with response and fixes applied

Author: aster-void

REVIEW.md

@@ -0,0 +1,144 @@
+# Design Review: Picture-ful Design PR
+
+## Overview
+
+This PR transitions the design from a **minimal card-based layout** to an **image-rich magazine-style layout**. The changes affect the hero section and activities page.
+
+---
+
+## Strengths
+
+1. **Visual Impact**: The full-height hero with background imagery creates a stronger first impression than the previous centered text approach
+
+2. **Reusable Component**: `ImageSection.svelte` is well-structured with clean alternating left/right alignment logic
+
+3. **Content Density**: The magazine layout allows more visual storytelling while maintaining readability
+
+4. **Join CTA**: The new dark section with image creates a strong closing statement
+
+---
+
+## Design Concerns
+
+### 1. Image Performance (Critical)
+
+| File | Size | Issue |
+|------|------|-------|
+| `lab-cafe.jpg` | **6.8 MB** | Far too large |
+| `hero.jpg` | **2.1 MB** | Should be < 300KB |
+| `solo-dev.jpg` | **1.7 MB** | Needs compression |
+| `hackathon.jpg` | **1.3 MB** | Needs compression |
+
+**Recommendation**: Compress all images. Target < 200-300KB each. Consider using AVIF format (only one image uses it currently). The activities page will load 10+ MB of images.
+
+### 2. Hero Section Issues
+
+```svelte
+<div class="absolute top-[40%] left-6 mr-6 max-w-lg bg-white p-8 shadow-xl md:left-10">
+```
+
+- **No rounded corners** on the floating card (inconsistent with `ImageSection`'s `rounded-2xl`)
+- **`top-[40%]`** is unusual positioning—may clip on shorter viewports
+- **No dark overlay** on background image—text readability depends entirely on image content
+- **`left-6`** feels cramped on mobile; consider `left-4` or full-width on mobile
+
+### 3. ImageSection Mobile Experience
+
+On mobile, the image bleeds edge-to-edge but text has no background. This creates a jarring visual break. Consider:
+- Adding a subtle background to text section
+- Or keeping consistent edge spacing
+
+### 4. Activities Page Header Icon
+
+```svelte
+<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-900 text-white">
+    <BookOpen class="h-6 w-6" />
+</div>
+```
+
+Uses `BookOpen` (the Learn section icon) for the page header. Consider a more generic icon or removing it since it's redundant with section icons below.
+
+### 5. Missing Design System Elements
+
+The new design drops several patterns from the design language:
+
+| Pattern | Before | After |
+|---------|--------|-------|
+| Section labels | `font-mono uppercase tracking-widest text-primary` | Removed |
+| Hover states | `hover:bg-primary/5 hover:border-primary/30` | Not on ImageSection |
+| Card styling | `backdrop-blur-md border-zinc-200/50` | Plain white card in hero |
+
+---
+
+## Recommendations
+
+1. **Compress images** before merging—this is blocking
+2. Add `rounded-2xl` to hero card for consistency
+3. Add overlay or gradient to hero image for text readability
+4. Consider responsive hero card (full-width on mobile with proper spacing)
+5. Add subtle hover state to ImageSection CTA buttons
+6. Replace page header icon or remove it
+
+---
+
+## Questions for Discussion
+
+1. Is the full-height hero intentional for landing? On the activities page, users must scroll past empty space to see content
+2. Should `ImageSection` support a `caption` prop for image credits/alt descriptions?
+3. Is the sharp contrast between hero card (no radius) and content sections (rounded) intentional?
+
+---
+
+## Response from Author
+
+Thank you for the thorough review. You've raised valid concerns.
+
+### Answers to Questions
+
+1. **Full-height hero**: Yes, intentional for homepage only. The activities page does NOT have a full-height hero—it has a `h-72 md:h-96` cover image (same as utcode.net's activity pages). The full-height hero is only on the homepage.
+
+2. **Caption prop**: Good idea, but I'd defer this—we don't currently have image credits in the source content. Can add when needed.
+
+3. **Sharp contrast on hero card**: Not intentional—this was an oversight. Will fix.
+
+### Fixes I'll Apply
+
+| Issue | Action |
+|-------|--------|
+| Image sizes (blocking) | Compress all to AVIF < 200KB |
+| Hero card no radius | Add `rounded-2xl` |
+| Hero no overlay | Add gradient overlay for text readability |
+| Activities header icon | Remove redundant BookOpen icon, use generic layout |
+| ImageSection hover | CTA buttons already have hover states (`hover:bg-primary hover:text-zinc-900`) |
+| Design system patterns | The section labels were intentionally simplified to reduce visual noise with large images |
+
+### On Mobile Experience
+
+The edge-to-edge image with text below is intentional—it matches utcode.net's pattern. The text section has sufficient padding (`p-8`). Adding a background would create extra visual weight. Happy to discuss further if you feel strongly.
+
+### Image Compression Plan
+
+Will convert to AVIF and target:
+- Hero/cover images: < 200KB
+- Section images: < 150KB
+- Total page weight: < 1.5MB (down from 15MB+)
+
+Proceeding with fixes now.
+
+---
+
+## Fixes Applied
+
+All fixes have been implemented:
+
+1. **Images compressed** - Total reduced from 15MB+ to ~2MB
+   - Largest image now 240KB (was 6.8MB)
+   - All images under 250KB
+
+2. **Hero card** - Added `rounded-2xl`, `backdrop-blur-sm`, gradient overlay
+
+3. **Activities header** - Replaced icon with monospace section label (matches design system)
+
+4. **Mobile hero** - Card now uses `left-4 right-4` on mobile for full-width feel
+
+Ready for re-review.

src/lib/components/home/HeroSection.svelte

@@ -9,12 +9,16 @@
 		alt=""
 		class="absolute inset-0 h-full w-full object-cover"
 	/>
+	<!-- Gradient overlay for text readability -->
+	<div class="absolute inset-0 bg-gradient-to-r from-black/40 to-transparent"></div>
 
-	<div class="absolute top-[40%] left-6 mr-6 max-w-lg bg-white p-8 shadow-xl md:left-10">
+	<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="prose mt-4 text-zinc-600">
+		<p class="mt-4 leading-relaxed text-zinc-600">
 			ut.code(); は、2019
 			年に発足した東京大学のソフトウェアエンジニアリングコミュニティ・プログラミングサークルです。
 			プログラミングの学習・教育から、実社会で役立つソフトウェア製作まで、幅広い活動を行っています。

src/routes/(site)/activities/+page.svelte

@@ -18,12 +18,12 @@
 <!-- Title Section -->
 <section class="py-16">
 	<div class="container mx-auto px-6 lg:max-w-screen-lg">
-		<div class="flex items-center gap-4">
-			<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-900 text-white">
-				<BookOpen class="h-6 w-6" />
-			</div>
-			<h1 class="text-3xl font-bold md:text-4xl">活動内容</h1>
+		<div
+			class="mb-3 font-[JetBrains_Mono,monospace] text-xs font-medium uppercase tracking-widest text-primary"
+		>
+			Activities
 		</div>
+		<h1 class="text-3xl font-bold md:text-4xl">活動内容</h1>
 		<p class="mt-6 max-w-2xl text-lg leading-relaxed text-zinc-600">
 			ut.code();
 			は、全ての人にソフトウェア開発の魅力を伝えるべく、教材の作成から教育活動までを一貫して行っており、さらに高みを目指すための自学自習の機会も提供しています。充実した教材、気軽に質問できる環境、切磋琢磨する仲間、この3つの柱により、初心者から上級者まですべての人に新しい学びを提供します。