Merge pull request #72 from anscg/master

Update Hong Kong Page

components/HongKong/Faq.js

@@ -32,7 +32,7 @@ const faqData = [
     question: "我有資格報名嗎？",
     answer: `如果您未滿 18 歲，當然可以，我們非常期待您的參與！
     如果您已年滿 18 歲但仍在就讀高中，請發送電子郵件至
-     <a href="mailto:counterspell@hackclub.com">counterspell@hackclub.com</a> 與我們聯繫。`,
+     <a href="mailto:hongkong@counterspell.hackclub.com">hongkong@counterspell.hackclub.com</a> 與我們聯繫。`,
   },
   {
     question: "參加需要付費嗎？",
@@ -59,13 +59,13 @@ const faqData = [
   {
     question: "我的父母很擔心！",
     answer: `我們隨時準備提供協助！請他們通過
-     <a href="mailto:counterspell@hackclub.com">counterspell@hackclub.com</a> 與我們聯繫，
+     <a href="mailto:hongkong@counterspell.hackclub.com">hongkong@counterspell.hackclub.com</a> 與我們聯繫，
      我們會確保解答他們的所有問題！`,
   },
   {
     question: "我如何提出更多問題？",
     answer: `聯繫我們！請在 Hack Club Slack 上的 <a href="https://hackclub.com/slack/">#counterspell</a> 
-    或通過電子郵件 <a href="mailto:counterspell@hackclub.com">counterspell@hackclub.com</a> 與我們聯繫。
+    或通過電子郵件 <a href="mailto:hongkong@counterspell.hackclub.com">hongkong@counterspell.hackclub.com</a> 與我們聯繫。
     我們隨時準備回答您的所有問題！`,
   },
 ];

components/HongKong/Footer.js

@@ -24,6 +24,15 @@ export default function Footer() {
           YouTube
         </a>{" "}
         |{" "}
+        <a
+          href="https://www.facebook.com/profile.php?id=61567287088876"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mx-4"
+        >
+          Facebook
+        </a>{" "}
+        |{" "}
         <a
           href="https://www.instagram.com/CounterspellHongKong/"
           target="_blank"

components/HongKong/Guilds.js

@@ -49,6 +49,15 @@ export default function Guilds() {
           </p>
         </div>
       </div>
+      <a
+        className="z-30 w-full max-w-6xl px-6 py-6 mt-6 text-2xl uppercase bg-pink hover:text-white motion-safe:hover:scale-105 motion-safe:transition-all"
+        href="https://counterspell.fillout.com/hongkong?uid=guilds"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecorationLine: "none" }}
+      >
+        立即報名加入參加Counterspell！
+      </a>
     </div>
   );
 }

components/HongKong/Locations.js

@@ -36,7 +36,7 @@ export default function Locations() {
         <div className="px-6 py-6 text-4xl tracking-wider border-4 border-dashed border-pink neuebit">
           <p>
             {/* TODO: Replace `Example City` with your city */}
-            Counterspell Example City is organized by teenagers, for teenagers.
+            Counterspell Hong Kong is organized by teenagers, for teenagers.
           </p>
           <p>
             Organize a Counterspell event in your city.{" "}
@@ -54,11 +54,15 @@ export default function Locations() {
       </div>
 
       <div className="flex flex-col items-center space-y-3 uppercase">
-        <p className="text-xl text-center">
-          Get notified when registrations open
-        </p>
-        {/* TODO: Replace `Example City` with your city */}
-        <Subscribe eventName="Example City" />
+      <a
+        className="z-30 w-full max-w-6xl px-6 py-6 mt-6 text-2xl uppercase bg-pink hover:text-white fusion-pixel motion-safe:hover:scale-105 motion-safe:transition-all"
+        href="https://counterspell.fillout.com/hongkong?uid=locations"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecorationLine: "none" }}
+      >
+        立即報名加入參加Counterspell！
+      </a>
       </div>
     </div>
   );

components/HongKong/Schedule.js

@@ -23,7 +23,17 @@ export default function Schedule() {
               <p>{item.time}</p>
             </div>
           ))}
+          <a
+        className="z-30 w-full max-w-6xl px-6 py-6 mt-6 text-2xl uppercase bg-pink hover:text-white motion-safe:hover:scale-105 fusion-pixel text-center motion-safe:transition-all"
+        href="https://counterspell.fillout.com/hongkong?uid=schedule"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ textDecorationLine: "none" }}
+      >
+        立即報名加入參加Counterspell！
+      </a>
         </div>
+
       </div>
     </>
   );

components/HongKong/Sponsors.js

@@ -0,0 +1,77 @@
+export default function Sponsors() {
+  return (
+    <div className="relative px-6 py-24 text-center neuebit bg retro">
+      <p className="text-3xl fusion-pixel uppercase">
+        贊助這個奇妙週末
+      </p>
+      <p className="text-xl fusion-pixel">
+        助力香港首屆實體高中生黑客松！
+      </p>
+
+      <div className="z-30">
+        <a
+          className="inline-block px-12 py-3 my-12 text-2xl uppercase retro bg-pink hover:text-white motion-safe:hover:scale-105 motion-safe:transition-all"
+          href="mailto:[email protected]"
+          style={{ textDecorationLine: "none" }}
+        >
+          Send us an email!
+        </a>
+      </div>
+
+      <div class="flex flex-col items-center text-white">
+        <p class="py-2 text-xl">Thank you to our sponsors & partners!</p>
+        <div class="max-w-5xl bg-white w-full flex flex-col items-center p-8 md:p-12 py-8 md:py-20 gap-8 md:gap-12 z-40">
+          <a
+            href="https://kepler-interactive.com/"
+            target="_blank"
+            class="motion-safe:hover:scale-105 motion-safe:transition-all flex"
+          >
+            <img
+              src="/city/HongKong/KeplerKowloon.png"
+              alt="Kepler Interactive | Kowloon Nights"
+              class="w-auto h-20 md:h-40"
+              style={{ imageRendering: "auto" }}
+            />
+          </a>
+          <div class="flex gap-x-36 items-center flex-wrap justify-center gap-y-8">
+            <a
+              href="https://www.slashall.hk/"
+              target="_blank"
+              class="motion-safe:hover:scale-105 motion-safe:transition-all flex"
+            >
+              <img
+                src="/city/HongKong/SlashAll.webp"
+                alt="/all"
+                class="w-auto h-28 md:h-28"
+                style={{ imageRendering: "auto" }}
+              />
+            </a>
+            <a
+              href="https://www.fillout.com/"
+              target="_blank"
+              class="motion-safe:hover:scale-105 motion-safe:transition-all flex"
+            >
+              <img
+                src="/city/HongKong/Fillout.png"
+                alt="Fillout"
+                class="w-auto h-28 md:h-28"
+                style={{ imageRendering: "auto" }}
+              />
+            </a>
+          </div>
+          <a
+            href="https://gamedevhappyhour.com/"
+            target="_blank"
+            class="motion-safe:hover:scale-105 motion-safe:transition-all flex"
+          >
+            <img
+              src="/city/HongKong/gdhh.png"
+              alt="Game Dev Happy Hour"
+              class="w-auto h-12 md:h-28"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

pages/hongkong.js

@@ -9,6 +9,7 @@ import Steps from "../components/HongKong/Steps";
 import Locations from "../components/HongKong/Locations";
 import Faq from "../components/HongKong/Faq";
 import Footer from "../components/HongKong/Footer";
+import Sponsors from "../components/HongKong/Sponsors";
 
 export default function HongKong() {
   const [docHeight, setDocHeight] = useState(0);
@@ -45,6 +46,12 @@ export default function HongKong() {
     <>
       <Head>
         <title>Counterspell Hong Kong</title>
+        <!--<script>
+          {`
+            !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetGroupPropertiesForFlags resetPersonPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+            posthog.init('phc_6ZwHOIl8Q3SQVW3wyJtEeiBAEyy7wO90wE5jJEMftk1',{api_host:'https://data.anscg.workers.dev', person_profiles: 'always' });
+          `}
+        </script>-->
       </Head>
       <div>
         <div
@@ -98,6 +105,15 @@ export default function HongKong() {
           <source src="/music.mp3" type="audio/mp3" />
         </audio>
 
+        <a
+          className="fixed z-50 hidden px-3 py-2 text-white uppercase sm:block top-4 right-4 fusion-pixel bg-pink hover:scale-105 hover:text-white"
+          href="https://counterspell.fillout.com/hongkong?uid=page"
+          target="_blank"
+          style={{ textDecorationLine: "none" }}
+        >
+          立即報名！
+        </a>
+
         <Hero />
 
         <div className="relative">
@@ -109,6 +125,8 @@ export default function HongKong() {
           <Steps />
           <Locations />
 
+          <Sponsors />
+
           <div className="flex flex-col justify-center py-12 text-center faq fusion-pixel">
             <div className="m-6">
               <p className="mb-6 text-5xl uppercase">