Skip to content

Commit bc8c1e2

Browse files
dtinthclaude[bot]
dtinth
and
claude[bot]
committed
ปรับปรุงดีไซน์ Event Agenda ให้เป็นแบบ pill และเปลี่ยนสไตล์ agenda items
- แปลงหัวข้อ Day 1 และ Day 2 เป็นแบบ pill เดียวที่แบ่งออกเป็น 2 ส่วน - ใช้ border radius 24px และสี neutral gray - วางตำแหน่ง mascot ให้โผล่ออกจากด้านบนขวาของ pill - ขยายความกว้างของ time labels ใน agenda items - เปลี่ยน agenda items ให้มี border neutral-700 และไม่มี background Co-Authored-By: Claude <209825114+claude[bot]@users.noreply.github.com>
1 parent 0e26418 commit bc8c1e2

1 file changed

Lines changed: 79 additions & 38 deletions

File tree

‎src/components/EventAgenda.astro‎

Lines changed: 79 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -5,102 +5,143 @@ import mascot2 from "../assets/mascot2.webp?url";
55

66
<section class="w-full bg-black py-16">
77
<div class="max-w-6xl mx-auto px-4 md:px-8">
8-
<h2 class="text-3xl md:text-5xl text-white mb-8 md:mb-12 text-left" style="font-family: 'Righteous', cursive;">
8+
<h2
9+
class="text-3xl md:text-5xl text-white mb-8 md:mb-12 text-left"
10+
style="font-family: 'Righteous', cursive;"
11+
>
912
Event Agenda
1013
</h2>
11-
14+
1215
<!-- Day 1 -->
1316
<div class="mb-8 md:mb-12">
14-
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 md:mb-8 bg-gray-800 rounded-2xl p-4 md:p-6">
15-
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-4 sm:mb-0">
16-
<div class="bg-blue-600 text-white px-4 py-2 md:px-6 md:py-3 rounded-xl font-bold text-base md:text-lg w-fit">
17+
<div class="relative mb-6 md:mb-8">
18+
<div class="flex rounded-[24px] overflow-hidden">
19+
<!-- Left side - Day badge (fits content) -->
20+
<div class="bg-blue-600 text-white px-4 py-4 md:px-6 md:py-6 font-bold text-base md:text-lg flex items-center">
1721
Day 1
1822
</div>
19-
<div class="text-white text-lg md:text-xl font-medium">
23+
<!-- Right side - Date (fills remaining space) -->
24+
<div class="bg-neutral-800 text-white px-4 py-4 md:px-6 md:py-6 text-lg md:text-xl font-medium flex-1 flex items-center">
2025
Saturday, July 26
2126
</div>
2227
</div>
23-
<img src={mascot1} alt="Mascot 1" class="w-12 h-12 md:w-16 md:h-16 object-contain self-end sm:self-auto" />
28+
<!-- Mascot jutting out from top right -->
29+
<img
30+
src={mascot1}
31+
alt="Mascot 1"
32+
class="absolute -top-2 right-4 w-12 h-12 md:w-16 md:h-16 object-contain"
33+
/>
2434
</div>
25-
35+
2636
<div class="space-y-4 md:space-y-6">
27-
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
28-
<div class="text-white text-base md:text-lg min-w-[100px] sm:min-w-[120px] flex items-center gap-2">
37+
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0">
38+
<div
39+
class="text-white text-base md:text-lg min-w-[140px] sm:min-w-[160px] flex items-center gap-2"
40+
>
2941
<span class="text-xl md:text-2xl">☁️</span>
3042
<span>Morning</span>
3143
</div>
32-
<div class="bg-gray-800 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg">
44+
<div
45+
class="border border-neutral-700 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg"
46+
>
3347
Ice-breaking & team formation
3448
</div>
3549
</div>
36-
37-
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
38-
<div class="text-white text-base md:text-lg min-w-[100px] sm:min-w-[120px] flex items-center gap-2">
50+
51+
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0">
52+
<div
53+
class="text-white text-base md:text-lg min-w-[140px] sm:min-w-[160px] flex items-center gap-2"
54+
>
3955
<span class="text-xl md:text-2xl">☀️</span>
4056
<span>Afternoon</span>
4157
</div>
42-
<div class="bg-gray-800 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg">
58+
<div
59+
class="border border-neutral-700 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg"
60+
>
4361
Hacking time begins!
4462
</div>
4563
</div>
46-
47-
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
48-
<div class="text-white text-base md:text-lg min-w-[100px] sm:min-w-[120px] flex items-center gap-2">
64+
65+
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0">
66+
<div
67+
class="text-white text-base md:text-lg min-w-[140px] sm:min-w-[160px] flex items-center gap-2"
68+
>
4969
<span class="text-xl md:text-2xl">🌙</span>
5070
<span>Overnight</span>
5171
</div>
52-
<div class="bg-gray-800 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg">
72+
<div
73+
class="border border-neutral-700 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg"
74+
>
5375
Keep hacking (bring sleeping gear!)
5476
</div>
5577
</div>
5678
</div>
5779
</div>
58-
80+
5981
<!-- Day 2 -->
6082
<div class="mb-8 md:mb-12">
61-
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 md:mb-8 bg-gray-800 rounded-2xl p-4 md:p-6">
62-
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-4 sm:mb-0">
63-
<div class="bg-blue-600 text-white px-4 py-2 md:px-6 md:py-3 rounded-xl font-bold text-base md:text-lg w-fit">
83+
<div class="relative mb-6 md:mb-8">
84+
<div class="flex rounded-[24px] overflow-hidden">
85+
<!-- Left side - Day badge (fits content) -->
86+
<div class="bg-blue-600 text-white px-4 py-4 md:px-6 md:py-6 font-bold text-base md:text-lg flex items-center">
6487
Day 2
6588
</div>
66-
<div class="text-white text-lg md:text-xl font-medium">
89+
<!-- Right side - Date (fills remaining space) -->
90+
<div class="bg-neutral-800 text-white px-4 py-4 md:px-6 md:py-6 text-lg md:text-xl font-medium flex-1 flex items-center">
6791
Sunday, July 27
6892
</div>
6993
</div>
70-
<img src={mascot2} alt="Mascot 2" class="w-12 h-12 md:w-16 md:h-16 object-contain self-end sm:self-auto" />
94+
<!-- Mascot jutting out from top right -->
95+
<img
96+
src={mascot2}
97+
alt="Mascot 2"
98+
class="absolute -top-2 right-4 w-12 h-12 md:w-16 md:h-16 object-contain"
99+
/>
71100
</div>
72-
101+
73102
<div class="space-y-4 md:space-y-6">
74-
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
75-
<div class="text-white text-base md:text-lg min-w-[100px] sm:min-w-[120px] flex items-center gap-2">
103+
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0">
104+
<div
105+
class="text-white text-base md:text-lg min-w-[140px] sm:min-w-[160px] flex items-center gap-2"
106+
>
76107
<span class="text-xl md:text-2xl">☁️</span>
77108
<span>Morning</span>
78109
</div>
79-
<div class="bg-gray-800 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg">
110+
<div
111+
class="border border-neutral-700 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg"
112+
>
80113
Keep hacking
81114
</div>
82115
</div>
83-
84-
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
85-
<div class="text-white text-base md:text-lg min-w-[100px] sm:min-w-[120px] flex items-center gap-2">
116+
117+
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0">
118+
<div
119+
class="text-white text-base md:text-lg min-w-[140px] sm:min-w-[160px] flex items-center gap-2"
120+
>
86121
<span class="text-xl md:text-2xl">☀️</span>
87122
<span>Afternoon</span>
88123
</div>
89-
<div class="bg-gray-800 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg">
124+
<div
125+
class="border border-neutral-700 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg"
126+
>
90127
Project pitching & awards
91128
</div>
92129
</div>
93-
94-
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
95-
<div class="text-white text-base md:text-lg min-w-[100px] sm:min-w-[120px] flex items-center gap-2">
130+
131+
<div class="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-0">
132+
<div
133+
class="text-white text-base md:text-lg min-w-[140px] sm:min-w-[160px] flex items-center gap-2"
134+
>
96135
<span class="text-xl md:text-2xl">🎉</span>
97136
<span>6:00 PM</span>
98137
</div>
99-
<div class="bg-gray-800 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg">
138+
<div
139+
class="border border-neutral-700 text-white px-4 py-3 md:px-6 md:py-4 rounded-xl flex-1 text-base md:text-lg"
140+
>
100141
Event ends
101142
</div>
102143
</div>
103144
</div>
104145
</div>
105146
</div>
106-
</section>
147+
</section>

0 commit comments

Comments
 (0)