Skip to content

Commit db7121a

Browse files
dtinthclaude[bot]
dtinth
and
claude[bot]
committed
เพิ่มส่วนหัวแบบโปร่งใสพร้อมเมนูนำทาง
- สร้าง Header component ใหม่ที่มีพื้นหลังโปร่งใสและเมนูนำทางแบบพิว - จัดเรียงรายการเมนูไปทางขวาด้วยระยะห่าง 12px และ 20px สำหรับปุ่มสุดท้าย - แต่ละพิวมีพื้นหลังสีขาวโปร่งใส 12% ยกเว้นปุ่ม Sponsor ที่เป็นสีขาวเต็ม - เพิ่มไอคอนลูกศรหันขึ้น 45 องศาในวงกลมสีน้ำเงินสำหรับปุ่ม Sponsor - รองรับการใช้งานบนมือถือด้วยเมนูแฮมเบอร์เกอร์ - เพิ่ม ID ให้กับส่วนต่างๆ เพื่อให้การนำทางทำงานได้ - ปรับ padding ของ hero section เพื่อหลีกเลี่ยงการทับซ้อนกับ header 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <209825114+claude[bot]@users.noreply.github.com>
1 parent a4b7619 commit db7121a

5 files changed

Lines changed: 249 additions & 6 deletions

File tree

‎src/components/AboutSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import skibidi from "../assets/skibidi.webp?url";
33
---
44

5-
<section class="about-section">
5+
<section id="about" class="about-section">
66
<div class="about-marquee">
77
<marquee behavior="scroll" direction="left" scrollamount="10">
88
<span class="about-title">What is stupid hackathon?</span>

‎src/components/EventSection.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { getSponsorsByTier, tierNames } from "../data/sponsors";
66

77
<section class="event-section">
88
{/* Section 3: Event Information */}
9-
<div class="venue-block">
9+
<div id="venue" class="venue-block">
1010
<h2 class="section-title orange-bg">Venue</h2>
1111
<div class="venue-details">
1212
<div>
@@ -34,7 +34,7 @@ import { getSponsorsByTier, tierNames } from "../data/sponsors";
3434
</div>
3535

3636
{/* Section 4: Registration */}
37-
<div class="registration-block pink-bg">
37+
<div id="agenda" class="registration-block pink-bg">
3838
<h2 class="section-title">Registration</h2>
3939
<p class="tickets">
4040
Tickets Coming Soon!<br />
@@ -57,7 +57,7 @@ import { getSponsorsByTier, tierNames } from "../data/sponsors";
5757
</div>
5858

5959
{/* Section 5: Sponsorship & Funding Goals */}
60-
<div class="sponsor-block orange-bg">
60+
<div id="sponsor" class="sponsor-block orange-bg">
6161
<h2 class="section-title">Sponsorship & Funding</h2>
6262
<div class="funding-milestones">
6363
<div><b>฿60,000</b> → Basic event 🎯</div>
@@ -80,7 +80,7 @@ import { getSponsorsByTier, tierNames } from "../data/sponsors";
8080
</div>
8181

8282
{/* Section 6: Schedule */}
83-
<div class="schedule-block">
83+
<div id="schedule" class="schedule-block">
8484
<h2 class="section-title pink-bg">Schedule</h2>
8585
<div class="schedule-details">
8686
<div class="schedule-day">

‎src/components/Header.astro‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
---
2+
import logotype from "../assets/logotype.svg?url";
3+
---
4+
5+
<style>
6+
.header-gradient {
7+
background: transparent;
8+
}
9+
10+
.nav-pill {
11+
background: rgba(255, 255, 255, 0.12);
12+
color: white;
13+
padding: 12px 28px;
14+
border-radius: 9999px;
15+
font-weight: 500;
16+
text-decoration: none;
17+
transition: all 0.3s ease;
18+
display: inline-flex;
19+
align-items: center;
20+
}
21+
22+
.nav-pill:hover {
23+
background: rgba(255, 255, 255, 0.2);
24+
transform: translateY(-2px);
25+
}
26+
27+
.nav-pill-solid {
28+
background: white;
29+
color: black;
30+
padding: 12px 28px;
31+
border-radius: 9999px;
32+
font-weight: 600;
33+
text-decoration: none;
34+
transition: all 0.3s ease;
35+
display: inline-flex;
36+
align-items: center;
37+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
38+
}
39+
40+
.nav-pill-solid:hover {
41+
transform: translateY(-2px);
42+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
43+
}
44+
45+
.mobile-menu {
46+
transform: translateX(-100%);
47+
transition: transform 0.3s ease;
48+
}
49+
50+
.mobile-menu.open {
51+
transform: translateX(0);
52+
}
53+
54+
.hamburger {
55+
display: none;
56+
flex-direction: column;
57+
cursor: pointer;
58+
padding: 4px;
59+
}
60+
61+
@media (max-width: 767px) {
62+
.hamburger {
63+
display: flex;
64+
}
65+
}
66+
67+
.hamburger span {
68+
width: 25px;
69+
height: 3px;
70+
background: white;
71+
margin: 3px 0;
72+
transition: 0.3s;
73+
}
74+
75+
.hamburger.open span:nth-child(1) {
76+
transform: rotate(-45deg) translate(-5px, 6px);
77+
}
78+
79+
.hamburger.open span:nth-child(2) {
80+
opacity: 0;
81+
}
82+
83+
.hamburger.open span:nth-child(3) {
84+
transform: rotate(45deg) translate(-5px, -6px);
85+
}
86+
</style>
87+
88+
<header class="header-gradient fixed top-0 left-0 right-0 z-50 px-4 py-4">
89+
<div class="max-w-7xl mx-auto flex items-center justify-between">
90+
<!-- Logo -->
91+
<div class="flex items-center">
92+
<img
93+
src={logotype}
94+
alt="Stupido Hackettino"
95+
class="h-8 w-auto"
96+
/>
97+
</div>
98+
99+
<!-- Desktop Navigation -->
100+
<div class="hidden md:flex items-center ml-auto">
101+
<a href="#about" class="nav-pill mr-3">
102+
About
103+
</a>
104+
<a href="#agenda" class="nav-pill mr-3">
105+
Agenda
106+
</a>
107+
<a href="#venue" class="nav-pill mr-3">
108+
Venue
109+
</a>
110+
<a href="#sponsor" class="nav-pill mr-3">
111+
Sponsor
112+
</a>
113+
<a href="#schedule" class="nav-pill mr-5">
114+
Schedule
115+
</a>
116+
<a href="#sponsor" class="nav-pill-solid">
117+
<span>Sponsor</span>
118+
<div class="ml-2 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
119+
<svg class="w-3 h-3 text-white transform rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24">
120+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
121+
</svg>
122+
</div>
123+
</a>
124+
</div>
125+
126+
<!-- Mobile Menu Button -->
127+
<button
128+
id="mobile-menu-button"
129+
class="hamburger md:hidden"
130+
aria-label="Toggle menu"
131+
>
132+
<span></span>
133+
<span></span>
134+
<span></span>
135+
</button>
136+
</div>
137+
138+
<!-- Mobile Navigation -->
139+
<div id="mobile-menu" class="mobile-menu md:hidden fixed inset-y-0 left-0 w-80 bg-gray-900 bg-opacity-95 backdrop-blur-sm z-40">
140+
<div class="flex flex-col h-full">
141+
<div class="flex items-center justify-between p-4 border-b border-gray-700">
142+
<img
143+
src={logotype}
144+
alt="Stupido Hackettino"
145+
class="h-8 w-auto"
146+
/>
147+
<button
148+
id="mobile-menu-close"
149+
class="text-white text-2xl"
150+
aria-label="Close menu"
151+
>
152+
×
153+
</button>
154+
</div>
155+
156+
<nav class="flex-1 px-4 py-6">
157+
<div class="space-y-6">
158+
<a href="#about" class="mobile-nav-link block text-white text-lg font-medium hover:text-gray-300">
159+
About
160+
</a>
161+
<a href="#agenda" class="mobile-nav-link block text-white text-lg font-medium hover:text-gray-300">
162+
Agenda
163+
</a>
164+
<a href="#venue" class="mobile-nav-link block text-white text-lg font-medium hover:text-gray-300">
165+
Venue
166+
</a>
167+
<a href="#sponsor" class="mobile-nav-link block text-white text-lg font-medium hover:text-gray-300">
168+
Sponsor
169+
</a>
170+
<a href="#schedule" class="mobile-nav-link block text-white text-lg font-medium hover:text-gray-300">
171+
Schedule
172+
</a>
173+
</div>
174+
175+
<div class="mt-8">
176+
<a
177+
href="#sponsor"
178+
class="sponsor-button inline-flex items-center w-full justify-center px-6 py-3 rounded-full text-white font-semibold shadow-lg"
179+
>
180+
<span>Sponsor</span>
181+
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
182+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
183+
</svg>
184+
</a>
185+
</div>
186+
</nav>
187+
</div>
188+
</div>
189+
</header>
190+
191+
<script>
192+
// Mobile menu functionality
193+
document.addEventListener('DOMContentLoaded', () => {
194+
const mobileMenuButton = document.getElementById('mobile-menu-button');
195+
const mobileMenu = document.getElementById('mobile-menu');
196+
const mobileMenuClose = document.getElementById('mobile-menu-close');
197+
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
198+
199+
function toggleMobileMenu() {
200+
mobileMenu?.classList.toggle('open');
201+
mobileMenuButton?.classList.toggle('open');
202+
}
203+
204+
function closeMobileMenu() {
205+
mobileMenu?.classList.remove('open');
206+
mobileMenuButton?.classList.remove('open');
207+
}
208+
209+
mobileMenuButton?.addEventListener('click', toggleMobileMenu);
210+
mobileMenuClose?.addEventListener('click', closeMobileMenu);
211+
212+
// Close menu when clicking on nav links
213+
mobileNavLinks.forEach(link => {
214+
link.addEventListener('click', closeMobileMenu);
215+
});
216+
217+
// Close menu when clicking outside
218+
document.addEventListener('click', (e) => {
219+
const isClickInsideMenu = mobileMenu?.contains(e.target as Node);
220+
const isClickOnMenuButton = mobileMenuButton?.contains(e.target as Node);
221+
222+
if (!isClickInsideMenu && !isClickOnMenuButton && mobileMenu?.classList.contains('open')) {
223+
closeMobileMenu();
224+
}
225+
});
226+
227+
// Smooth scrolling for navigation links
228+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
229+
anchor.addEventListener('click', function (e) {
230+
e.preventDefault();
231+
const target = document.querySelector(this.getAttribute('href') as string);
232+
if (target) {
233+
target.scrollIntoView({
234+
behavior: 'smooth',
235+
block: 'start'
236+
});
237+
}
238+
});
239+
});
240+
});
241+
</script>

‎src/components/HeroSection.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ import manorah from "../assets/manorah_cappuccina_blur.webp?url";
6969
</style>
7070

7171
<section
72-
class="px-4 pt-16 relative bg-cover bg-center overflow-hidden"
72+
class="px-4 pt-24 relative bg-cover bg-center overflow-hidden"
7373
style={`background-image: url(${heroBg})`}
7474
>
7575
<div class="flex flex-col justify-center items-center relative">

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
import "../styles/global.css";
3+
import Header from "../components/Header.astro";
34
---
45

56
<!doctype html>
@@ -12,6 +13,7 @@ import "../styles/global.css";
1213
<title>Stupido Hackettino</title>
1314
</head>
1415
<body>
16+
<Header />
1517
<slot />
1618
</body>
1719
<style is:global>

0 commit comments

Comments
 (0)