Implement souvenir page

src/locale/en.yml

@@ -15,6 +15,7 @@ nav.live: Livestream
 nav.media: Media
 nav.presskit: Press Kit
 nav.newsletter: Newsletter
+nav.souvenir: Summit Souvenir
 nav.guide: Visitors’ Guide
 nav.safety: Safety Tips
 nav.about: About Summit
@@ -151,13 +152,17 @@ guide.title: Pre-event Guide
 souvenir.title: Summit Souvenir
 souvenir.intro: Fancy the colorful stickers that can decorate your devices? Perhaps a pangolin in your room? A treasure hunt awaits you outside of R0 on 4F. Find the souvenirs that suits you and bring them home!
 souvenir.hours: "<strong>Hours:</strong> Sat. 10:00 ~ 17:00、Sun. 10:00 ~ 15:00"
+souvenir.promos: Participate in community booth <strong>Stamp Rally</strong> or elect to purchase the Summit Starter Pack <span class="text-sm">(lens cover, a pair of skill stickers, and T-shirt)</span> qualifies for additional discount. Don’t miss your chance!
 souvenir.items: Inventory
 souvenir.lenscover: Lens Cover
+souvenir.lenscover.desc: Twin colors, get your privacy covered.
 souvenir.sticker: Skill Sticker Pack
+souvenir.sticker.desc: Waterproof. Might last longer than your skills do.
 souvenir.tshirt: T-shirt
+souvenir.tshirt.desc: Adopt these lavender-colored pangolins as your vision guardian!
 souvenir.everything: Starter Pack (everything above)
-souvenir.classic_tshirt: Classic T-shirt
-souvenir.whilelasts: (*while supplies last)
+souvenir.classic: Classic Goods
+souvenir.whilelasts: "*while supplies last"
 souvenir.mascot: Mascot
 souvenir.pangolin: Pangolin
 souvenir.mascot.reason: Pangolin is the mascot of g0v Summit 2024! Not only because this rare creature is a local endemic favorite, the fact that pangolins dig holes and hunt for bugs suits well with g0ver’s daily life.<br>If you happen to bump into one either on roadside or at the conference venue, don’t forget to greet them with a sincere awe!

src/pug/_layout.pug

@@ -26,7 +26,7 @@ html(lang="zh-Hant-TW")
     block head
   body
     #loading.fixed.top-0.left-0.w-screen.h-screen.hidden
-      img(src="assets/img/loading 畫面.svg", alt="")
+      img(src="assets/img/loading.svg", alt="")
     header.container.flex.flex-wrap.items-center.justify-between.py-4
       a.me-2(href=base)
         img.w-auto.h-12(src="assets/img/pgln_g0v_summit.svg", alt="g0v Summit 2024")
@@ -62,6 +62,7 @@ html(lang="zh-Hant-TW")
           a.block(href="//g0v.hackmd.io/@SQLfOC1bRwKstcPS84Gu_w/H1aRf_W8a", target="_blank", data-i18n="nav.presskit") 新聞素材
           a.block(href="guide", data-i18n="nav.guide") 行前資訊
           a.block(href="//us21.campaign-archive.com/home/?u=5f2da7dc5b32fcf00c4e26170&id=cf109d5e52", target="_blank", data-i18n="nav.newsletter") 電子報
+          a.block(href="souvenir", data-i18n="nav.souvenir") 紀念品販售
         .leading-loose
           .mb-4.font-bold(data-i18n="nav.about") 關於 Summit
           a.block(href="staff", data-i18n="nav.staff") 工作團隊

src/pug/souvenir/index.pug

@@ -10,17 +10,31 @@ block main
     section.my-20
       p(data-i18n="souvenir.intro") 想用色彩斑斕的技能貼紙點綴你的資訊設備？還是對今年 Summit 的吉祥物一見鍾情，想把穿山甲帶回家養呢？在 4F 國際會議廳後方的大會攤位區，年會宣傳組準備了各式各樣的週邊紀念品，歡迎大家來尋寶！
       p(data-i18n="[html]souvenir.hours") #[strong 營業時間：]週六 10:00 ~ 17:00、週日 10:00 ~ 15:00
+      p(data-i18n="[html]souvenir.promos") 參與現場#[strong 攤位集章]活動、或認購年會紀念品大全套 #[span.text-sm （防窺貼、兩款技能貼紙、紀念T恤一件）]另有優惠，還請把握機會囉！
     section.my-20
-      h3.mb-12(data-i18n="souvenir.items") 販售商品
-      ul
-        li(data-i18n="souvenir.lenscover") 鏡頭防窺貼
-        li(data-i18n="souvenir.sticker") 技能貼紙
-        li(data-i18n="souvenir.tshirt") 紀念T恤
-        li(data-i18n="souvenir.everything") 大全套
-        li
-          span(data-i18n="souvenir.classic_tshirt") 絕版年會T恤
-          span(data-i18n="souvenir.whilelasts") （*數量有限，售完為止）
+      h3.mb-4(data-i18n="souvenir.items") 販售商品
+      .grid.mb-12.items-start(class="grid-cols-2 md:grid-cols-4 gap-8")
+        .mb-4.text-center
+          img.my-2.rounded-3xl(src="assets/img/souvenir/lens-cover.jpg")
+          h6.my-1(data-i18n="souvenir.lenscover") 鏡頭防窺貼
+          .text-sm.text-secondary(data-i18n="souvenir.lenscover.desc") 黑白仝款，隱身鏡中
+        .mb-4.text-center
+          img.my-2.rounded-3xl(src="assets/img/souvenir/skill-stickers.jpg")
+          h6.my-1(data-i18n="souvenir.sticker") 防水技能貼紙
+          .text-sm.text-secondary(data-i18n="souvenir.sticker.desc") 經典復刻、防水耐用，筆電新朋友
+        .mb-4.text-center
+          img.my-2.rounded-3xl(src="assets/img/souvenir/t-shirt.jpg")
+          h6.my-1(data-i18n="souvenir.tshirt") 紀念T恤
+          .text-sm.text-secondary(data-i18n="souvenir.tshirt.desc") 讓穿山甲伴您守護視力！
+        .mb-4.text-center
+          img.my-2.rounded-3xl(src="assets/img/souvenir/classic-goods.jpg")
+          h6.my-1(data-i18n="souvenir.classic") 絕版年會小物
+          .text-sm.text-secondary(data-i18n="souvenir.whilelasts") *數量有限，售完為止
     section.my-20
       h3.mb-12(data-i18n="souvenir.mascot") 年會吉祥物
-      h5.mb-4(data-i18n="souvenir.pangolin") 穿山甲
-      p(data-i18n="[html]souvenir.mascot.reason") 穿山甲 (pangolin) 被選為 Summit 2024 的年會吉祥物！不單單是因為台灣穿山甲屬於特有亞種的緣故，穿山甲會挖掘洞穴、覓食蟲蟻的的習性，也與 g0v 參與者們挖坑、抓蟲 debug 的日常生活不謀而合。<br>當您無意在山道間、或是研討會現場看到牠，別忘記向挖坑者的好朋友致上誠摯的招呼：「欸，是穿山甲耶！」
+      .mb-12
+        .flex.flex-col.items-center.gap-12(class="md:flex-row md:items-start")
+          img.shrink-0.w-full.h-auto.max-w-56(class="md:max-w-48", src="assets/img/pangolin.svg", alt="穿山甲 pangolin")
+          div
+            h5.mb-6(data-i18n="souvenir.pangolin") 穿山甲
+            p(data-i18n="[html]souvenir.mascot.reason") 穿山甲 (pangolin) 被選為 Summit 2024 的年會吉祥物！不單單是因為台灣穿山甲屬於特有亞種的緣故，穿山甲會挖掘洞穴、覓食蟲蟻的的習性，也與 g0v 參與者們挖坑、抓蟲 debug 的日常生活不謀而合。<br>當您無意在山道間、或是研討會現場看到牠，別忘記向挖坑者的好朋友致上誠摯的招呼：「欸，是穿山甲耶！」