feat: optimize all assets down to 11MiB

frontend/public/compressed/icons/email.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 25 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M0.0843333 1.82619L11.0911 12.7636C11.4167 13.0873 11.8516 13.2795 12.3116 13.303C12.7717 13.3264 13.2241 13.1795 13.5814 12.8905L13.7227 12.7636L24.722 1.83358C24.758 1.96913 24.7816 2.10714 24.794 2.24884L24.8039 2.46449V17.2514C24.8041 17.8732 24.5677 18.472 24.1422 18.9279C23.7167 19.3838 23.1335 19.6631 22.5095 19.7097L22.3235 19.7159H2.48039C1.85461 19.7161 1.25189 19.4813 0.793044 19.0585C0.334196 18.6357 0.053134 18.0563 0.00620111 17.4362L0 17.2514V2.46449C0 2.31662 0.0124019 2.17368 0.0372058 2.0332L0.0843333 1.82619ZM22.3235 0C22.4735 0 22.6211 0.0123226 22.7638 0.0381997L22.9746 0.0862573L12.4081 10.585L1.83797 0.0837924C1.97439 0.0468251 2.11577 0.0221803 2.25963 0.00985782L2.48039 0H22.3235Z" fill="var(--fill-0, #854D16)"/>
+</svg>

frontend/public/compressed/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Icon" d="M16 2V30M2 16H30" stroke="var(--stroke-0, #F5F5F5)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

frontend/public/compressed/ui/faq-organizer-bg.svg

@@ -0,0 +1,16 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 609 1520" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg" filter="url(#filter0_d_267_298)">
+<path d="M0 0H35C35 0 54 16.9782 88.5 17.5C96.8246 17.6259 102.5 0 102.5 0H272.5L293.5 17.5L300 0L445.5 5L471.5 17.5L595 0V256.5L576 288L595 298L608.5 686C608.5 686 588.499 699.907 587.5 715C586.441 730.991 608.5 738.5 608.5 738.5V1116.5C608.5 1116.5 588.5 1118 588.5 1135.5C588.5 1151.1 608.5 1150.5 608.5 1150.5V1476L459 1485C459 1485 416.208 1460.75 399 1464C372.5 1469 350 1490 350 1490H215C215 1490 189.5 1483.5 185 1485C168.872 1490.38 161 1505 161 1505L96 1476L0 1484L13 948C13 948 24.5 906 28 884.5C31.5 863 8 864 8 864L0 566L18 451L9 381L0 0Z" fill="var(--fill-0, #AD684F)"/>
+</g>
+<defs>
+<filter id="filter0_d_267_298" x="0" y="0" width="608.5" height="1520" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="15"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_267_298"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_267_298" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/public/compressed/ui/faq-participant-bg.svg

@@ -0,0 +1,16 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 609 1506" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bg" filter="url(#filter0_d_267_304)">
+<path d="M0 0H284C284 0 291.826 13.3764 300 13.5C308.325 13.6259 316.5 0 316.5 0L434 7.5L456.5 13.5L469.5 0H595L598.5 454C598.5 454 575.863 474 579 490C583.593 513.425 598.5 528.5 598.5 528.5V954.5L582 995L598.5 1020L608.5 1166C608.5 1166 591 1169 591 1186.5C591 1202.1 608.5 1205.5 608.5 1205.5L595 1484H526C526 1484 526.476 1467.44 523 1461C516.737 1449.39 491.5 1446.5 481.5 1454C468.994 1463.38 476.5 1484 476.5 1484L455 1476H438.5C438.5 1476 412 1464.5 405 1468C389.795 1475.6 385.5 1490.5 385.5 1490.5L276.5 1472.5L0 1484L8 907.5C8 907.5 24.5 906 28 884.5C31.5 863 8 864 8 864V461L28 430.5L8 395.5L0 0Z" fill="var(--fill-0, #AD684F)"/>
+</g>
+<defs>
+<filter id="filter0_d_267_304" x="0" y="0" width="608.5" height="1505.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="15"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_267_304"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_267_304" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/public/compressed/ui/faq-speech-bubble.svg

@@ -0,0 +1,16 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1736 2203" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="speech-bubble-bg" filter="url(#filter0_d_267_306)">
+<path d="M866.63 2162.05C851.359 2131.93 912.467 1898.29 852.135 1867.72L0 1810.82L129.379 16.4642L1732.09 0L1635.43 1849.57C1387.78 1848.97 1159.28 1865.48 1061.79 1888.38C1039.06 1893.72 878.183 2126.79 866.63 2162.05Z" fill="var(--fill-0, #384FBC)"/>
+</g>
+<defs>
+<filter id="filter0_d_267_306" x="0" y="0" width="1735.09" height="2202.05" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="3" dy="40"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_267_306"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_267_306" result="shape"/>
+</filter>
+</defs>
+</svg>

frontend/public/compressed/ui/woodboard-1-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="601" height="819" viewBox="0 0 601 819" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.94084 178C4.94084 178 28.2671 177 24.7929 198.5C21.3188 220 9.90386 262 9.90386 262L0 799L92.2901 790L156.809 819C156.809 819 164.624 804.376 180.632 799C185.099 797.5 210.41 804 210.41 804H344.412C344.412 804 366.745 783 393.049 778C410.13 774.753 452.606 799 452.606 799L601 790V464.5C601 464.5 581.148 465.103 581.148 449.5C581.148 432 601 430.5 601 430.5V52.5C601 52.5 579.104 44.9908 580.155 29C581.147 13.9068 601 0 601 0H0L4.94084 178Z" fill="#AD684F"/>
+</svg>

frontend/public/compressed/ui/woodboard-1-top.svg

@@ -0,0 +1,3 @@
+<svg width="601" height="566" viewBox="0 0 601 566" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M99.4449 0C99.4449 0 93.7726 17.6259 85.4524 17.5C50.971 16.9782 31.9812 0 31.9812 0H0L5.99516 381L14.9903 451L0 566H601L591.68 298L572.69 288L591.68 256.5L601 5L468.247 17.5L442.261 5L296.839 0L290.342 17.5L269.354 0H99.4449Z" fill="#AD684F"/>
+</svg>

frontend/public/compressed/ui/woodboard-2-bottom.svg

@@ -0,0 +1,3 @@
+<svg width="591" height="627" viewBox="0 0 591 627" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9836 20.5234C23.0342 1.75331 5.55542 0.118699 1.04302 0.00724884H0C0 0.00724884 0.382666 -0.00906105 1.04302 0.00724884H590.015L580.023 89.3336L563.537 129.866L580.023 154.885L590.015 301C590.015 301 572.529 304.002 572.529 321.516C572.529 337.131 590.015 340.531 590.015 340.531V620.495H517.574C517.574 620.495 518.05 603.923 514.577 597.477C508.319 585.861 483.103 582.965 473.111 590.471C460.616 599.858 468.115 620.495 468.115 620.495L446.633 612.489H430.146C430.146 612.489 403.668 600.98 396.674 604.482C381.481 612.091 377.19 627 377.19 627L268.279 608.986L1.81198e-05 620.495L0 43.5415C0 43.5415 16.4864 42.0403 19.9836 20.5234Z" fill="#AD684F"/>
+</svg>

frontend/public/compressed/ui/woodboard-2-top.svg

@@ -0,0 +1,3 @@
+<svg width="590" height="529" viewBox="0 0 590 529" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M308.242 0C308.242 0 300.074 13.6388 291.756 13.5128C283.589 13.389 275.77 0 275.77 0H0.000152588L9.15527e-05 395.874L19.9834 430.907L9.15527e-05 461.436V529H590.007C590.007 529 575.112 513.91 570.523 490.464C567.388 474.448 590.007 454.43 590.007 454.43L586.51 0H461.115L448.125 13.5128L425.644 7.5071L308.242 0Z" fill="#AD684F"/>
+</svg>

frontend/src/App.tsx

@@ -42,7 +42,7 @@ function App() {
     <div className="w-full min-h-screen flex flex-col overflow-x-hidden">
       <div className="absolute top-0 left-0 w-1/3 md:z-40 pointer-events-none">
         <img 
-          src="/backgrounds/corner-cloud.png" 
+          src="/compressed/backgrounds/corner-cloud.webp" 
           alt=""
           className="w-full h-full object-cover select-none"
         />
@@ -73,12 +73,12 @@ function App() {
           >
             {/* fishy on the right. His name is frederick. */}
             <div className="absolute top-[128px] md:top-[96px] right-[-50px] md:right-[100px] w-1/3 md:w-1/6">
-              <img src="/characters/fish-2.png" alt="Fish named Frederick" className="w-full h-full object-cover select-none" />
+              <img src="/compressed/characters/fish-2.webp" alt="Fish named Frederick" className="w-full h-full object-cover select-none" />
             </div>
 
             {/* fishy on the left. His name is gubson */}
             <div className="absolute top-[96px] md:top-[60px] right-[-10px] md:right-[300px] w-1/3 md:w-1/6">
-              <img src="/characters/fish-1.png" alt="Fish named Gubson" className="w-full h-full object-cover select-none" />
+              <img src="/compressed/characters/fish-1.webp" alt="Fish named Gubson" className="w-full h-full object-cover select-none" />
             </div>
           </div>
 
@@ -107,7 +107,7 @@ function App() {
                 <div className="flex items-center gap-2 mb-4">
                   <a href='https://hackclub.com' className='transition-transform hover:scale-105 active:scale-95'>
                     <img 
-                      src="/decorative/hack-club-flag.png" 
+                      src="/compressed/decorative/hack-club-flag.webp" 
                       alt="Hack Club" 
                       className="w-[151px] h-[53px] object-cover transform rotate-[-4.8deg] select-none"
                     />
@@ -204,7 +204,7 @@ function App() {
                 </p>
 
                 <img 
-                  src="/ui/arrow.png" 
+                  src="/compressed/ui/arrow.webp" 
                   alt="" 
                   className="w-[45px] md:w-[55px] h-[33px] md:h-[41px] translate-y-6 rotate-[6.2deg] z-50 select-none"
                 />
@@ -229,7 +229,7 @@ function App() {
 
         <div className="absolute bottom-0 left-0 w-full pointer-events-none">
           <img
-            src="/backgrounds/landing-grass.png"
+            src="/compressed/backgrounds/landing-grass.webp"
             alt=""
             className="w-full h-full object-cover select-none"
             style={{
@@ -255,7 +255,7 @@ function App() {
         
         <div className="absolute bottom-[200px] left-32 w-[569px] h-[676px] pointer-events-none">
           <img 
-            src="/characters/astronaut.png" 
+            src="/compressed/characters/astronaut.webp" 
             alt="" 
             className="w-full h-full object-cover transform rotate-[172deg] scale-y-[-1] select-none"
           />
@@ -263,27 +263,27 @@ function App() {
         
         <div className="absolute top-[0px] z-45 right-0 w-[150px] md:w-[352px] pointer-events-none">
           <img
-            src="/decorative/cogs-top-right.png" alt=""
+            src="/compressed/decorative/cogs-top-right.webp" alt=""
             className="w-full h-full object-contain select-none"
           />
         </div>
 
         <div className="absolute invisible md:visible top-[55%] z-45 left-0 w-[260px] pointer-events-none">
-          <img src="/decorative/cogs-mid-left.png" alt="" className="w-full h-full object-contain select-none" />
+          <img src="/compressed/decorative/cogs-mid-left.webp" alt="" className="w-full h-full object-contain select-none" />
         </div>
         
         <div className="absolute invisible md:visible top-[75%] z-45 right-0 translate-x-20 w-[280px] pointer-events-none">
-          <img src="/decorative/single-cog-1.png" alt="" className="w-full h-full object-contain select-none" />
+          <img src="/compressed/decorative/single-cog-1.webp" alt="" className="w-full h-full object-contain select-none" />
         </div>
 
         <div className="absolute invisible md:visible top-[82%] z-45 left-0 translate-x-10 w-[280px] pointer-events-none">
-          <img src="/decorative/single-cog-2.png" alt="" className="w-full h-full object-contain select-none" />
+          <img src="/compressed/decorative/single-cog-2.webp" alt="" className="w-full h-full object-contain select-none" />
         </div>
 
         <div id="steps" className="relative z-40 flex flex-col gap-24 items-center px-12 max-w-7xl mx-auto pt-12 md:pt-0">
           <Step 
             stepNumber={1}
-            imageSrc="/ui/step-signup.jpeg"
+            imageSrc="/compressed/ui/step-signup.webp"
             imageAlt="Step 1"
           >
             Find a team of <br></br><span className="font-bold text-[#F77034]">CO-ORGANIZERS</span>
@@ -291,7 +291,7 @@ function App() {
 
           <Step 
             stepNumber={2}
-            imageSrc="/ui/step-team.jpeg"
+            imageSrc="/compressed/ui/step-team.webp"
             imageAlt="Step 2"
             isReversed={true}
           >
@@ -300,7 +300,7 @@ function App() {
 
           <Step 
             stepNumber={3}
-            imageSrc="/ui/step-workshops.jpeg"
+            imageSrc="/compressed/ui/step-workshops.webp"
             imageAlt="Step 3"
           >
             Find <span className="text-[#F77034] font-bold">SPONSORS</span> to buy merch and prizes, and make your event <span className="text-[#F77034] font-bold">SPECIAL!</span>
@@ -308,7 +308,7 @@ function App() {
 
           <Step 
             stepNumber={4}
-            imageSrc="/ui/step-build.jpeg"
+            imageSrc="/compressed/ui/step-build.webp"
             imageAlt="Step 4"
             isReversed={true}
           >
@@ -338,7 +338,7 @@ function App() {
         </div>
 
         <div id="letter" className="relative w-full h-full z-50 translate-y-20 md:translate-y-64 flex justify-center">
-          <img src='/backgrounds/world-map-left.png' alt='' className='h-full hidden md:block' />
+          <img src='/compressed/backgrounds/world-map-left.webp' alt='' className='h-full hidden md:block' />
           <div className='flex items-center md:block md:relative'>
             <img src='/backgrounds/world-map-right.webp' alt='' className='h-full hidden md:block' />
             <div className='md:absolute md:top-0 md:left-0 py-12 md:py-16 md:pb-0 rounded-xl shadow-[0_8px_20px_rgba(0,0,0,0.25)] md:rounded-none md:shadow-none md:pt-30 pl-6 md:pl-12 pr-6 md:pr-64 text-xl bg-[#EAD6BE] border-[#DCA87E] border-4 md:border-0 md:bg-transparent flex flex-col gap-6 font-solway'>
@@ -416,7 +416,7 @@ function App() {
             <StoryCard 
               imageSrc="/stories/counterspell.webp"
               imageAlt=""
-              titleImageSrc="/branding/logo-counterspell.png"
+              titleImageSrc="/compressed/branding/logo-counterspell.webp"
               titleImageAlt="Counterspell logo"
               description="Our first worldwide game jam! In 50 cities including Toronto, Boston, & Singapore"
               videoButtonText='Watch the video'
@@ -438,9 +438,9 @@ function App() {
             />
 
             <StoryCard 
-              imageSrc="/stories/daydream.jpg"
+              imageSrc="/compressed/stories/daydream.webp"
               imageAlt=""
-              titleImageSrc="/branding/logo-daydream.png"
+              titleImageSrc="/compressed/branding/logo-daydream.webp"
               titleImageAlt="Daydream logo"
               description="Game jam in 100 cities worldwide -- from London to NYC to Penang!"
               videoButtonText='Video here!'
@@ -515,7 +515,7 @@ function App() {
       <section className="relative pb-64 bg-[#384FBC] md:bg-[#081F8B]">
         <div className="absolute w-full h-full z-10 pointer-events-none invisible md:visible">
           <img 
-            src="/decorative/speech-bubble-bg.png" 
+            src="/compressed/decorative/speech-bubble-bg.webp" 
             alt=""
             className="w-full h-full select-none pointer-events-none"
           />

frontend/src/components/Step.tsx

@@ -11,7 +11,7 @@ function Step({ stepNumber, imageSrc, imageAlt, isReversed = false, children }:
       <div className={`relative flex flex-col text-[#000] flex-1 ${isReversed ? 'md:items-start' : 'md:items-end md:text-right'}`}>
         <div className="absolute -inset-12 md:-inset-16 -z-60 pointer-events-none">
           <img 
-            src="/ui/step-bg.png" 
+            src="/compressed/ui/step-bg.webp" 
             alt="" 
             className="w-min h-full object-cover select-none translate-y-2 md:translate-y-0"
           />