Skip to content

Commit 22062bf

Browse files
dtinthclaude[bot]
dtinth
and
claude[bot]
committed
เพิ่มส่วน DIY Swag Station และอัปเดตรายการของที่ต้องเตรียม
- สร้าง SwagSection.astro ใหม่พร้อมคำแนะนำครบถ้วนสำหรับ DIY swag - อธิบาย 3 ประเภทของ swag: สติกเกอร์ PVC, แผ่นลอกลาย UV DTF และ DTF สำหรับผ้า - เพิ่มคำแนะนำความปลอดภัยในการใช้เตารีดและข้อควรระวัง - เพิ่มรายการ "ขวดน้ำ/แก้วสำหรับ DIY swag" และ "เสื้อ/กระเป๋าผ้า" ในส่วน What to Bring Co-authored-by: Claude[bot] <209825114+claude[bot]@users.noreply.github.com>
1 parent b21b093 commit 22062bf

3 files changed

Lines changed: 176 additions & 1 deletion

File tree

‎src/components/SwagSection.astro‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
---
3+
4+
<section id="diy-swag" class="w-full bg-gradient-to-br from-[#1a0d2e] to-[#2d1b69] text-white pt-24 pb-16">
5+
<div class="max-w-6xl mx-auto px-8">
6+
<div class="text-center mb-16">
7+
<h2 class="text-4xl md:text-7xl text-white mb-6 tracking-wide font-display scroll-animate fade-down">
8+
DIY SWAG STATION
9+
</h2>
10+
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto scroll-animate fade-up stagger-1">
11+
Create your own unique mementos with our special DIY swag kit
12+
</p>
13+
</div>
14+
15+
<!-- Swag Types Grid -->
16+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
17+
<!-- PVC Stickers -->
18+
<div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-[#19806f] transition-colors group scroll-animate rotate-in stagger-2">
19+
<div class="text-center">
20+
<iconify-icon icon="mdi:sticker" class="text-[#19806f] text-6xl mb-6 block"></iconify-icon>
21+
<h3 class="text-2xl font-bold mb-4 font-subhead text-white">PVC Stickers</h3>
22+
<p class="text-gray-300 mb-4">Durable waterproof stickers that stick to any surface</p>
23+
<ul class="space-y-2 text-gray-300 text-left">
24+
<li class="flex items-center gap-3">
25+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
26+
<span>Perfect for laptops</span>
27+
</li>
28+
<li class="flex items-center gap-3">
29+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
30+
<span>Water & weather resistant</span>
31+
</li>
32+
<li class="flex items-center gap-3">
33+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
34+
<span>Easy peel & stick</span>
35+
</li>
36+
</ul>
37+
</div>
38+
</div>
39+
40+
<!-- UV DTF Transfer Sheets -->
41+
<div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-[#19806f] transition-colors group scroll-animate rotate-in stagger-3">
42+
<div class="text-center">
43+
<iconify-icon icon="mdi:cup" class="text-[#19806f] text-6xl mb-6 block"></iconify-icon>
44+
<h3 class="text-2xl font-bold mb-4 font-subhead text-white">UV DTF Transfers</h3>
45+
<p class="text-gray-300 mb-4">For hard, smooth surfaces like bottles and cups</p>
46+
<ul class="space-y-2 text-gray-300 text-left">
47+
<li class="flex items-center gap-3">
48+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
49+
<span>Water bottles & cups</span>
50+
</li>
51+
<li class="flex items-center gap-3">
52+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
53+
<span>Simple: peel, stick, rub</span>
54+
</li>
55+
<li class="flex items-center gap-3">
56+
<iconify-icon icon="mdi:alert-circle" class="text-yellow-400 text-lg"></iconify-icon>
57+
<span class="text-yellow-300">Not recommended for laptops</span>
58+
</li>
59+
</ul>
60+
</div>
61+
</div>
62+
63+
<!-- DTF Fabric Transfers -->
64+
<div class="bg-gray-900 rounded-xl p-8 border border-gray-800 hover:border-[#19806f] transition-colors group scroll-animate rotate-in stagger-4">
65+
<div class="text-center">
66+
<iconify-icon icon="mdi:tshirt-crew" class="text-[#19806f] text-6xl mb-6 block"></iconify-icon>
67+
<h3 class="text-2xl font-bold mb-4 font-subhead text-white">Fabric Transfers</h3>
68+
<p class="text-gray-300 mb-4">Iron-on transfers for clothing and fabric items</p>
69+
<ul class="space-y-2 text-gray-300 text-left">
70+
<li class="flex items-center gap-3">
71+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
72+
<span>T-shirts & tote bags</span>
73+
</li>
74+
<li class="flex items-center gap-3">
75+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-lg"></iconify-icon>
76+
<span>Any fabric surface</span>
77+
</li>
78+
<li class="flex items-center gap-3">
79+
<iconify-icon icon="mdi:iron" class="text-[#19806f] text-lg"></iconify-icon>
80+
<span>Requires iron application</span>
81+
</li>
82+
</ul>
83+
</div>
84+
</div>
85+
</div>
86+
87+
<!-- Preparation Instructions -->
88+
<div class="space-y-8">
89+
<!-- What to Bring for Fabric Transfers -->
90+
<div class="bg-[#19806f]/10 border border-[#19806f]/30 rounded-xl p-6 scroll-animate fade-up stagger-5">
91+
<div class="flex items-start gap-4">
92+
<iconify-icon icon="mdi:tshirt-crew" class="text-[#19806f] text-2xl mt-1"></iconify-icon>
93+
<div>
94+
<h4 class="text-xl font-bold mb-3 text-white font-subhead">Bring Your Own Canvas</h4>
95+
<p class="text-gray-300 leading-relaxed mb-4">
96+
For fabric transfers, bring your own items to customize:
97+
</p>
98+
<div class="grid md:grid-cols-2 gap-4 text-gray-300">
99+
<ul class="space-y-2">
100+
<li class="flex items-center gap-2">
101+
<iconify-icon icon="mdi:check" class="text-[#19806f]"></iconify-icon>
102+
<span>T-shirts or tank tops</span>
103+
</li>
104+
<li class="flex items-center gap-2">
105+
<iconify-icon icon="mdi:check" class="text-[#19806f]"></iconify-icon>
106+
<span>Tote bags or canvas bags</span>
107+
</li>
108+
</ul>
109+
<ul class="space-y-2">
110+
<li class="flex items-center gap-2">
111+
<iconify-icon icon="mdi:check" class="text-[#19806f]"></iconify-icon>
112+
<span>Hoodies or sweatshirts</span>
113+
</li>
114+
<li class="flex items-center gap-2">
115+
<iconify-icon icon="mdi:check" class="text-[#19806f]"></iconify-icon>
116+
<span>Any fabric item you love!</span>
117+
</li>
118+
</ul>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
124+
<!-- Iron Safety & Instructions -->
125+
<div class="bg-yellow-900/20 border border-yellow-600/30 rounded-xl p-6 scroll-animate fade-up stagger-6">
126+
<div class="flex items-start gap-4">
127+
<iconify-icon icon="mdi:alert" class="text-yellow-400 text-2xl mt-1"></iconify-icon>
128+
<div>
129+
<h4 class="text-xl font-bold mb-3 text-white font-subhead">Iron Safety Guidelines</h4>
130+
<div class="space-y-4 text-gray-300 leading-relaxed">
131+
<p>
132+
<strong>Important:</strong> Using an iron requires some skill and experience. If you're not comfortable with ironing,
133+
please ask a more experienced friend for help to prevent accidents or damage.
134+
</p>
135+
<p>
136+
<strong>Disclaimer:</strong> You assume all responsibility for any damage to your clothing.
137+
We cannot be held responsible for any mishaps, but don't worry too much - we'll have practice fabric
138+
available so you can test your technique first!
139+
</p>
140+
<p class="text-yellow-200">
141+
<iconify-icon icon="mdi:lightbulb" class="text-yellow-400 mr-2"></iconify-icon>
142+
<strong>Alternative:</strong> You can also take the transfer sheets home and iron them yourself at your own pace.
143+
</p>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
149+
<!-- Sharing is Caring -->
150+
<div class="bg-purple-900/20 border border-purple-500/30 rounded-xl p-6 scroll-animate fade-up stagger-7">
151+
<div class="flex items-start gap-4">
152+
<iconify-icon icon="mdi:heart-multiple" class="text-purple-400 text-2xl mt-1"></iconify-icon>
153+
<div>
154+
<h4 class="text-xl font-bold mb-3 text-white font-subhead">Sharing is Caring</h4>
155+
<p class="text-gray-300 leading-relaxed">
156+
Please take only what you need so everyone can enjoy the DIY swag experience!
157+
We've prepared enough for everyone, but a little consideration goes a long way in making sure
158+
all attendees get to create their own awesome memorabilia. ✨
159+
</p>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
</div>
165+
</section>

‎src/components/WhatToBringSection.astro‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-xl"></iconify-icon>
3232
<span>Extension cords</span>
3333
</li>
34+
<li class="flex items-center gap-3">
35+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-xl"></iconify-icon>
36+
<span>Water bottle/cup for DIY swag</span>
37+
</li>
3438
</ul>
3539
</div>
3640
</div>
@@ -80,6 +84,10 @@
8084
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-xl"></iconify-icon>
8185
<span>Water bottle or cup 💧</span>
8286
</li>
87+
<li class="flex items-center gap-3">
88+
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-xl"></iconify-icon>
89+
<span>T-shirt/tote bag for DIY swag</span>
90+
</li>
8391
<li class="flex items-center gap-3">
8492
<iconify-icon icon="mdi:check-circle" class="text-[#19806f] text-xl"></iconify-icon>
8593
<span>Your creativity! ✨</span>

‎src/pages/index.astro‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
import CodeOfConductSection from "../components/CodeOfConductSection.astro";
33
import CreatoriGiardinoMarquee from "../components/CreatoriGiardinoMarquee.astro";
44
import EventAgenda from "../components/EventAgenda.astro";
5+
import FundingSection from "../components/FundingSection.astro";
56
import HeroSection from "../components/HeroSection.astro";
67
import RegistrationSection from "../components/RegistrationSection.astro";
7-
import FundingSection from "../components/FundingSection.astro";
88
import SponsorsSection from "../components/SponsorsSection.astro";
9+
import SwagSection from "../components/SwagSection.astro";
910
import VenueSection from "../components/VenueSection.astro";
1011
import WhatIsStupidHackSection from "../components/WhatIsStupidHackSection.astro";
1112
import WhatToBringSection from "../components/WhatToBringSection.astro";
@@ -20,6 +21,7 @@ import Layout from "../layouts/Layout.astro";
2021
<VenueSection />
2122
<EventAgenda />
2223
<WhatToBringSection />
24+
<SwagSection />
2325
<CodeOfConductSection />
2426
<SponsorsSection />
2527
<FundingSection />

0 commit comments

Comments
 (0)