Add SplatNet gear page

src/assets/img/gesotown-coin.svg

@@ -0,0 +1,43 @@
+<svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.23211 0.000908151C9.8898 -0.023374 11.5173 0.439776 12.9077 1.33141C14.298 2.22304 15.3883 3.50288 16.0398 5.00807C16.6912 6.51325 16.8745 8.17577 16.5662 9.78409C16.258 11.3924 15.4721 12.8738 14.3086 14.0399C13.1451 15.2059 11.6565 16.0039 10.0323 16.3323C8.40817 16.6607 6.72177 16.5046 5.1877 15.8839C3.65363 15.2632 2.34129 14.206 1.41754 12.8468C0.493788 11.4876 0.000427787 9.88777 0.000245359 8.25091C-0.00813334 7.17547 0.198156 6.10895 0.607357 5.11226C1.01656 4.11557 1.62064 3.20824 2.38508 2.44211C3.14953 1.67598 4.05936 1.06608 5.06262 0.647216C6.06587 0.228349 7.14287 0.00870838 8.23211 0.000908151V0.000908151Z" fill="#FFDC00"/>
+<path d="M8.44189 0.00408936H10.4601C10.7525 0.010083 11.0442 0.0321092 11.3341 0.0700145H9.31594C9.02605 0.0321092 8.73425 0.010083 8.44189 0.00408936" fill="#FFC100"/>
+<path d="M9.31592 0.0700073H11.3341C11.6106 0.107664 11.884 0.157867 12.151 0.220629H10.1327C9.86571 0.157867 9.59243 0.107664 9.31592 0.0700073Z" fill="#FFC300"/>
+<path d="M10.1327 0.220642H12.151C12.4196 0.284751 12.6848 0.362254 12.9455 0.452858H10.9273C10.6667 0.361853 10.4028 0.286542 10.1327 0.220642Z" fill="#FFC500"/>
+<path d="M10.9272 0.452881H12.9455C13.2188 0.54402 13.4871 0.648755 13.7497 0.766685H11.7314C11.4689 0.648755 11.2005 0.54402 10.9272 0.452881" fill="#FFC700"/>
+<path d="M11.7314 0.782349H13.7497C14.0388 0.917719 14.319 1.07072 14.5888 1.24049H12.5706C12.3008 1.07072 12.0205 0.917719 11.7314 0.782349Z" fill="#FFCA00"/>
+<path d="M12.5706 1.24048H14.5888C14.9241 1.45073 15.2428 1.68571 15.5423 1.9434H13.5241C13.2246 1.68571 12.9059 1.45073 12.5706 1.24048" fill="#FFCC00"/>
+<path d="M13.5367 1.94342H15.5645C16.8982 3.07391 17.8377 4.59004 18.2502 6.27708H16.232C15.8195 4.59004 14.8799 3.07391 13.5462 1.94342" fill="#FFCE00"/>
+<path d="M16.2224 6.2771H18.2406C18.3351 6.65896 18.4021 7.04699 18.4409 7.43821H16.4194C16.3817 7.04706 16.3158 6.65903 16.2224 6.2771" fill="#FFCC00"/>
+<path d="M16.4194 7.43817H18.4409C18.4663 7.70491 18.479 7.97477 18.479 8.25092C18.479 8.30741 18.479 8.3639 18.479 8.42039H16.4608C16.4608 8.3639 16.4608 8.30741 16.4608 8.25092C16.4615 7.97947 16.4477 7.70818 16.4194 7.43817" fill="#FFCA00"/>
+<path d="M16.4576 8.41412H18.4758C18.4722 8.70799 18.451 9.00141 18.4122 9.2928H16.394C16.4312 9.00126 16.4524 8.70793 16.4576 8.41412" fill="#FFC700"/>
+<path d="M16.394 9.29901H18.425C18.391 9.57542 18.3422 9.84986 18.2788 10.1212H16.2605C16.3239 9.84986 16.3727 9.57542 16.4067 9.29901" fill="#FFC500"/>
+<path d="M16.2479 10.1212H18.2661C18.2055 10.3907 18.1302 10.6568 18.0405 10.9183H16.0222C16.108 10.6578 16.1843 10.3911 16.2479 10.1212Z" fill="#FFC300"/>
+<path d="M16.0222 10.9246H18.0405C17.9451 11.2008 17.837 11.4675 17.7226 11.7311H15.7043C15.8251 11.4675 15.9332 11.2008 16.0222 10.9246Z" fill="#FFC100"/>
+<path d="M15.698 11.7248H17.7163C17.5834 12.0124 17.4338 12.2921 17.2682 12.5626H15.2467C15.4134 12.2922 15.564 12.0124 15.698 11.7248" fill="#FFBE00"/>
+<path d="M15.2467 12.5626H17.2681C17.0616 12.8995 16.8311 13.2214 16.5784 13.526H14.5602C14.8118 13.2214 15.0412 12.8994 15.2467 12.5626" fill="#FFBC00"/>
+<path d="M14.5602 13.5261H16.5784C15.8137 14.455 14.8491 15.204 13.7544 15.7186C12.6598 16.2332 11.4627 16.5004 10.2503 16.5009H8.23206C9.44444 16.5004 10.6415 16.2332 11.7361 15.7186C12.8308 15.204 13.7955 14.455 14.5602 13.5261Z" fill="#FFBA00"/>
+<path d="M8.25122 14.0281C11.4828 14.0281 14.1025 11.4416 14.1025 8.25094C14.1025 5.06029 11.4828 2.47375 8.25122 2.47375C5.01963 2.47375 2.3999 5.06029 2.3999 8.25094C2.3999 11.4416 5.01963 14.0281 8.25122 14.0281Z" fill="#FFBA00"/>
+<path d="M9.23975 14.0281C12.4713 14.0281 15.0911 11.4416 15.0911 8.25094C15.0911 5.06029 12.4713 2.47375 9.23975 2.47375C6.00815 2.47375 3.38843 5.06029 3.38843 8.25094C3.38843 11.4416 6.00815 14.0281 9.23975 14.0281Z" fill="#FFDC00"/>
+<path d="M11.0863 8.31676H13.1077C12.4893 8.30742 11.871 8.34311 11.2579 8.42348C11.0452 8.45752 10.8534 8.5696 10.7208 8.73729H8.69934C8.83313 8.5694 9.02609 8.45737 9.23972 8.42348C9.85177 8.34317 10.4689 8.30748 11.0863 8.31676" fill="#FFAD00"/>
+<path d="M8.69928 8.72784H10.7207C10.6862 8.76864 10.6543 8.81163 10.6254 8.85652H8.60718C8.63578 8.81258 8.6675 8.76864 8.69928 8.72784Z" fill="#FFAF00"/>
+<path d="M8.60722 8.86591H10.6254C10.6 8.90984 10.5778 8.95379 10.5555 8.99772H8.53723C8.55803 8.95253 8.58144 8.90851 8.60722 8.86591" fill="#FFB100"/>
+<path d="M8.53717 8.99774H10.5554C10.5337 9.04369 10.5146 9.09086 10.4983 9.13898H8.47998C8.49629 9.09086 8.51537 9.04369 8.53717 8.99774" fill="#FFB300"/>
+<path d="M8.48001 9.13898H10.4983C10.4983 9.18919 10.4665 9.24253 10.4537 9.29274H8.43555C8.43555 9.24253 8.46412 9.18919 8.48001 9.13898Z" fill="#FFB400"/>
+<path d="M8.43549 9.29272H10.4537C10.4411 9.34971 10.4316 9.4073 10.4251 9.46529H8.40686C8.41329 9.4073 8.42287 9.34971 8.43549 9.29272" fill="#FFB600"/>
+<path d="M8.40687 9.46533H10.4251C10.4204 9.528 10.4204 9.59093 10.4251 9.6536H8.40369C8.40369 9.59084 8.4037 9.52809 8.41959 9.46533" fill="#FFB800"/>
+<path d="M8.39099 9.66931H10.4124C10.4077 9.74036 10.4077 9.81166 10.4124 9.88272H8.39417C8.39417 9.81054 8.39417 9.74149 8.39417 9.66931" fill="#FFBA00"/>
+<path d="M8.40051 9.86694H10.4188C10.4276 9.94616 10.4414 10.0248 10.4601 10.1023H8.44187C8.42168 10.0251 8.40782 9.94637 8.40051 9.86694Z" fill="#FFBC00"/>
+<path d="M8.44189 10.1024H10.4601C10.5033 10.3271 10.6141 10.5337 10.7779 10.6955H8.75973C8.59473 10.5346 8.48378 10.3275 8.44189 10.1024" fill="#FFBD00"/>
+<path d="M8.77551 10.6954H10.797C10.8256 10.7202 10.8564 10.7422 10.8892 10.7613H8.8677C8.836 10.7422 8.80619 10.7201 8.77869 10.6954" fill="#FFBC00"/>
+<path d="M8.8645 10.7614H10.886L10.9304 10.7896L10.9718 10.8084H8.95032L8.91222 10.7896L8.8645 10.7614Z" fill="#FFBA00"/>
+<path d="M8.95044 10.8084H10.9719C11.0036 10.8244 11.0366 10.8381 11.0704 10.8492H9.05217L8.95044 10.8084Z" fill="#FFB800"/>
+<path d="M9.05212 10.8492H11.0704C11.1181 10.868 11.1721 10.8806 11.2261 10.8963H9.20786C9.15383 10.8806 9.0998 10.868 9.05212 10.8492Z" fill="#FFB600"/>
+<path d="M9.20789 10.8963H11.2262C11.312 10.9151 11.4009 10.9308 11.4963 10.9434H9.47808C9.38273 10.9434 9.2937 10.9151 9.20789 10.8963Z" fill="#FFB400"/>
+<path d="M9.47803 10.9434H11.4962C11.6512 10.9629 11.8072 10.9744 11.9634 10.9779H9.94523C9.78899 10.9744 9.63305 10.9629 9.47803 10.9434" fill="#FFB300"/>
+<path d="M10.0724 4.39734H12.0907C12.4657 4.39734 12.8502 4.42245 13.238 4.44756H11.2198C10.832 4.42245 10.4474 4.40675 10.0724 4.39734Z" fill="#FFB300"/>
+<path d="M11.2293 12.2394H13.2475C12.3925 12.2802 11.6583 12.2959 11.0767 12.2959H9.05847C9.64964 12.2959 10.3711 12.2959 11.2293 12.2394Z" fill="#FFAD00"/>
+<path d="M11.2499 9.33356H13.2682C13.2904 10.1087 13.284 10.9465 13.2682 11.5302H11.2499C11.2499 10.934 11.2689 10.0961 11.2499 9.33356Z" fill="#FFBA00"/>
+<path d="M11.2516 11.5521H13.2698C13.2698 11.8659 13.2539 12.117 13.2476 12.2488H11.2294C11.2294 12.117 11.2293 11.8691 11.2516 11.5521Z" fill="#FFB800"/>
+<path d="M11.2197 4.44757H13.2379C13.2379 4.91514 13.3111 6.78228 13.2793 8.3168H11.261C11.2928 6.78228 11.2293 4.91514 11.2197 4.44757Z" fill="#FFBA00"/>
+<path d="M9.16658 4.38483C9.80225 4.38483 10.511 4.38481 11.2198 4.44757C11.2198 4.91515 11.2928 6.78228 11.2611 8.3168H11.0862C10.4689 8.30752 9.85172 8.34321 9.23967 8.42352C8.21943 8.58984 8.13361 10.3722 8.92184 10.7896C9.29364 10.9343 9.69225 10.9995 10.0914 10.9811H10.3076C10.3583 10.6583 10.3785 10.3315 10.3679 10.0051H9.69415C9.69415 9.76659 9.69415 9.49671 9.69415 9.37747C10.2885 9.3555 10.9814 9.35552 11.2579 9.35552C11.2897 10.5386 11.2579 11.866 11.2388 12.2614C10.3806 12.3022 9.64967 12.3178 9.06803 12.3178C8.3827 12.3277 7.69735 12.3015 7.01484 12.2394C5.31761 12.0542 4.47213 11.1285 4.1988 9.97057C3.75383 8.08773 4.08754 4.4915 6.8082 4.47895C6.84952 4.45384 7.81896 4.38483 9.16658 4.38483Z" fill="#FFC800"/>
+</svg>

src/assets/img/gesotown-tape.svg

@@ -0,0 +1,16 @@
+<svg width="246" height="38" viewBox="0 0 246 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_11226_43679)">
+<path d="M243.842 12.7046C244.21 12.025 244.223 11.3014 244.198 10.584C244.14 9.16191 243.69 7.74609 244.039 6.3114C243.664 5.22279 243.836 4.11531 243.855 3.00783C243.925 2.70579 243.855 2.40375 243.461 2.3597C242.808 2.28419 242.135 2.2716 241.475 2.2716C233.002 2.27789 224.535 2.30936 216.062 2.30936C190.187 2.30936 132.577 2.29048 106.702 2.27789C100.501 2.27789 94.3063 2.1898 88.1056 2.05766C76.5735 1.81854 65.0351 2.07024 53.5031 1.76191C47.5054 1.6046 41.5014 1.67381 35.4973 1.5983C30.5659 1.53538 25.6345 1.58572 20.7031 1.39694C15.3781 1.18929 10.0342 1.31514 4.70292 1.29626L3.09084 1.32772C3.09084 1.32772 3.05276 1.35919 3.03372 1.37806L3.09084 1.32772C2.51964 1.30255 2.03728 1.40953 1.82149 1.91293C1.77072 2.18351 1.65648 2.45409 1.67552 2.71837C1.86592 5.12841 2.08806 7.53844 2.2975 9.94847C2.33558 11.2762 2.25942 12.6102 2.43078 13.9253C2.72908 16.241 2.72908 18.5629 2.65292 20.8849C2.35462 21.5015 2.67196 22.0867 2.82428 22.6719C3.61128 25.7616 4.42366 28.8512 5.21066 31.9408C5.69936 33.8663 5.68666 33.8663 8.0667 33.9041C14.534 34.0048 20.995 33.9481 27.4687 34.1432C37.395 34.439 47.334 34.1747 57.273 34.4767C64.8003 34.7032 72.3466 34.5774 79.8802 34.6088C82.0761 34.6214 84.2785 34.6214 86.4744 34.6655C88.004 34.6969 89.5336 34.8605 91.0631 34.8668C103.604 34.9046 116.145 34.9298 128.68 34.9361C150.024 34.9361 203.102 34.9235 224.446 34.9172C229.848 34.9172 235.255 34.9172 240.656 34.892C241.443 34.892 242.268 35.0116 242.973 34.5648C243.011 34.4641 243.023 34.3634 243.017 34.2628C243.017 34.2565 243.017 34.2502 243.011 34.2376C243.277 33.7908 243.322 33.3063 243.328 32.8218C243.353 31.406 243.366 29.9964 243.385 28.5806C243.963 24.2702 243.817 19.941 243.817 15.618C243.829 14.6427 243.836 13.6736 243.848 12.6983L243.842 12.7046ZM222.193 15.2719C222.193 15.2719 222.174 15.2594 222.162 15.2531C222.162 15.2531 222.187 15.2657 222.2 15.2719H222.193ZM212.743 4.7949C212.908 4.76973 213.079 4.78232 213.263 4.7949C213.086 4.80749 212.908 4.82007 212.743 4.7949ZM53.5285 14.7937C53.5285 14.7937 53.5412 14.8126 53.5475 14.8189C53.484 14.8503 53.4586 14.8503 53.4396 14.8252C53.465 14.8189 53.4904 14.8063 53.5221 14.7937H53.5285Z" fill="#656565"/>
+</g>
+<defs>
+<filter id="filter0_d_11226_43679" x="0.0534009" y="0.195513" width="245.772" height="36.9005" 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="0.54"/>
+<feGaussianBlur stdDeviation="0.81"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_11226_43679"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_11226_43679" result="shape"/>
+</filter>
+</defs>
+</svg>

src/assets/img/paper-tear-mask.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1920" height="6000px" viewBox="0 0 1920 6000" preserveAspectRatio="xMidYMin" xmlns="http://www.w3.org/2000/svg">
+  <path d="M -1 5943 L -1 -1 L 1920 -1 L 1920 5748 L 1885 5735 L 1823 5742 L 1734 5754 L 1671 5749 L 1617 5766 L 1589 5768 L 1552 5777 L 1512 5782 L 1474 5781 L 1307 5825 L 1292 5840 L 1279 5829 L 1203 5851 L 1162 5842 L 1149 5855 L 1120 5863 L 1055 5846 L 1039 5846 L 976 5854 L 878 5857 L 863 5850 L 792 5862 L 741 5886 L 652 5880 L 626 5887 L 590 5882 L 532 5892 L 489 5912 L 419 5908 L 395 5919 L 330 5933 L 255 5981 L 194 5990 L 168 6000 L 77 5959 L 40 5948 L -1 5943 Z"/>
+</svg>

src/common/links.js

@@ -0,0 +1,5 @@
+const baseUrl = 'com.nintendo.znca://znca/game/4834290508791808';
+
+export function getGesotownGearUrl(id) {
+  return `${baseUrl}?p=/gesotown/${id}`
+}

src/common/time.js

@@ -1,5 +1,9 @@
 import { useTimeStore } from '../stores/time';
 
+export function formatDateTime(value) {
+  return (new Date(value)).toLocaleString(undefined, { month: 'numeric', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
 export function formatTime(value) {
   return (new Date(value)).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
 }
@@ -47,3 +51,21 @@ export function formatDurationFromNow(value, hideSeconds = false) {
 
   return formatDuration((Date.parse(value) - time.now) / 1000, hideSeconds);
 }
+
+export function formatShortDuration(value) {
+  let { negative, days, hours, minutes, seconds } = getDurationParts(value);
+
+    if (days)
+      return `${negative}${days} ${days === 1 ? 'day' : 'days'}`;
+    if (hours)
+      return `${negative}${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+    if (minutes)
+      return `${negative}${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`;
+    return `${negative}${seconds} ${seconds === 1 ? 'second' : 'seconds'}`;
+}
+
+export function formatShortDurationFromNow(value) {
+  let time = useTimeStore();
+
+  return formatShortDuration((Date.parse(value) - time.now) / 1000);
+}

src/components/SquidTape.vue

@@ -3,7 +3,7 @@
     <div class="relative">
       <div class="absolute squid-tl top-0 left-0" :class="squidBg" :style="squidStyles"></div>
       <div class="absolute squid-br bottom-0 right-0" :class="squidBg" :style="squidStyles"></div>
-      <div class="label border" :style="labelStyles">
+      <div class="label border" :class="props.border" :style="labelStyles">
         <slot />
       </div>
     </div>
@@ -21,7 +21,7 @@ const props = defineProps({
     default: 'bg-white',
   },
   border: {
-    default: 'border border-white',
+    default: 'border-white',
   },
   squidSize: {
     default: '10px',

src/components/gear/DailyDropGear.vue

@@ -0,0 +1,71 @@
+<template>
+  <ProductContainer class="pt-10 pb-4" bg="bg-splatoon-blue bg-circles">
+    <div class="space-y-4">
+      <div>
+        <div>
+          <img :src="brand.image.url" v-if="brand" />
+        </div>
+        <div class="flex flex-col items-center -mt-10 -space-y-2">
+          <SquidTape class="font-splatoon2 text-sm text-black rounded-sm -rotate-2 z-10" bg="bg-splatoon-green" squidBg="bg-black"
+            border="border border-black">
+            <div class="px-1">
+              The Daily Drop
+            </div>
+          </SquidTape>
+
+          <div class="relative -rotate-2">
+            <img src="@/assets/img/gesotown-daily-drop-bg.png" class="w-64" />
+            <div class="absolute inset-0 flex items-center ml-4">
+              <div class="font-splatoon2 text-lg">
+                {{ brand?.brand.name }}
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-daily-drop">
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center font-splatoon2 text-splatoon-yellow">
+        Until {{ formatDateTime(brand?.saleEndTime) }}
+      </div>
+      <div class="space-y-4 px-4">
+        <GearCardHorizontal
+          class="bg-gray-100 bg-opacity-20 backdrop-blur-sm border border-gray-50 border-opacity-20 rounded-lg"
+          v-for="gear in gears"
+          :key="gear.id"
+          :gear="gear"
+          />
+      </div>
+    </div>
+  </ProductContainer>
+</template>
+
+<script setup>
+import { useGearStore } from '@/stores/gear.mjs';
+import { computed } from '@vue/reactivity';
+import { formatDateTime } from '@/common/time';
+import GearCardHorizontal from './GearCardHorizontal.vue';
+import ProductContainer from '../ProductContainer.vue';
+import SquidTape from '../SquidTape.vue';
+
+const gearStore = useGearStore();
+const brand = computed(() => gearStore.dailyDropBrand);
+const gears = computed(() => gearStore.dailyDropGear);
+</script>
+
+<style scoped>
+:deep(.bg-circles) {
+  background-image: url('@/assets/img/circles-transparent.png'),
+    linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%);
+  background-size: contain;
+}
+
+.bg-daily-drop {
+  background-image: url('@/assets/img/gesotown-daily-drop-bg.png');
+  background-repeat: no-repeat;
+  background-size: 420px 73px;
+  background-position: center;
+}
+</style>

src/components/gear/GearCard.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="relative">
+    <img src="@/assets/img/gesotown-tape-blob-bg.png" />
+
+    <div class="absolute inset-0 flex flex-col items-center justify-evenly my-4">
+      <!-- Gear Image -->
+      <div>
+        <img :src="gear.image.url" class="h-20 w-20 xl:h-28 xl:w-28" />
+      </div>
+
+      <!-- Powers -->
+      <div>
+        <div class="flex items-center space-x-px">
+          <div :title="gear.primaryGearPower.name" class="bg-black rounded-full">
+            <img :src="gear.primaryGearPower.image.url" class="h-8" />
+          </div>
+
+          <div v-for="(power, i) in gear.additionalGearPowers" :key="i" :title="power.name" class="bg-black rounded-full">
+            <img :src="power.image.url" class="h-6" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Name -->
+      <div class="relative text-center">
+        <div class="mx-6">
+          <img src="@/assets/img/gesotown-tape.svg" />
+        </div>
+        <div class="absolute inset-0 flex items-center justify-center">
+          <div class="font-splatoon2 text-sm xl:text-base text-shadow">
+            {{ gear.name }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Price -->
+      <div class="flex items-center space-x-2">
+        <div>
+          <img src="@/assets/img/gesotown-coin.svg" />
+        </div>
+        <div class="font-splatoon1">
+          {{ price }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Brand -->
+    <div class="absolute top-0 right-10">
+      <div class="relative rotate-2">
+        <img src="@/assets/img/gesotown-brand-bg.png" class="w-10" />
+        <div class="absolute inset-0 p-2">
+          <img :src="gear.brand.image.url" class="w-full h-full" :title="gear.brand.name" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Time left/Order button -->
+    <div class="absolute top-1 left-6 space-y-2">
+      <div class="lg:hidden -ml-4">
+        <a :href="shopUrl">
+          <SquidTape class="font-splatoon2 text-sm text-black rounded-sm -rotate-3" bg="bg-splatoon-yellow" squidBg="bg-black"
+            border="border border-black">
+            <div class="px-1">
+              Order
+            </div>
+          </SquidTape>
+        </a>
+      </div>
+
+      <div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
+        {{ formatShortDurationFromNow(props.gear.saleEndTime) }}
+        left
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '@vue/reactivity';
+import SquidTape from '../SquidTape.vue';
+import { getGesotownGearUrl } from '@/common/links';
+import { formatShortDurationFromNow } from '../../common/time';
+
+const props = defineProps({
+  gear: Object,
+});
+
+const price = computed(() => props.gear.price);
+const gear = computed(() => props.gear.gear);
+
+const shopUrl = computed(() => getGesotownGearUrl(props.gear.id));
+</script>
+
+<style scoped>
+.bg-price {
+  background-image: url('@/assets/img/gesotown-price-bg.png');
+  background-repeat: no-repeat;
+  background-size: 120px 31px;
+  background-position: left;
+}
+</style>

src/components/gear/GearCardHorizontal.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex items-center space-x-4 py-2">
+    <!-- Gear Image -->
+    <div class="ml-2 shrink-0">
+      <img :src="gear.image.url" class="h-20 w-20" />
+    </div>
+
+    <!-- Details -->
+    <div class="grow min-w-0 flex flex-col justify-evenly space-y-2">
+      <div class="flex">
+        <div class="inline-block text-xs bg-zinc-200 bg-opacity-30 rounded px-1 py-px font-semibold">
+          {{ formatShortDurationFromNow(props.gear.saleEndTime) }}
+          left
+        </div>
+      </div>
+
+      <div class="flex items-center space-x-2">
+        <div class="bg-white h-6 aspect-square rounded">
+          <img :src="gear.brand.image.url" :title="gear.brand.name" />
+        </div>
+
+        <div class="flex-1 font-splatoon2 text-shadow overflow-hidden overflow-ellipsis whitespace-nowrap">
+          {{ gear.name }}
+        </div>
+      </div>
+
+      <div class="flex items-center space-x-px">
+        <div :title="gear.primaryGearPower.name" class="bg-black rounded-full">
+          <img :src="gear.primaryGearPower.image.url" class="h-8" />
+        </div>
+
+        <div v-for="(power, i) in gear.additionalGearPowers" :key="i" :title="power.name" class="bg-black rounded-full">
+          <img :src="power.image.url" class="h-6" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Price/Order button -->
+    <div class="flex-none flex flex-col self-stretch items-end">
+      <div class="flex-1">
+        <div class="lg:hidden">
+          <a :href="shopUrl">
+            <SquidTape
+              class="font-splatoon2 text-sm text-black rounded-sm -rotate-2"
+              bg="bg-splatoon-yellow"
+              squidBg="bg-black"
+              border="border border-black"
+              >
+              <div class="px-1">
+                Order
+              </div>
+            </SquidTape>
+          </a>
+        </div>
+      </div>
+
+      <div class="flex items-center space-x-2 bg-price w-28 pl-2 -mr-px">
+        <div>
+          <img src="@/assets/img/gesotown-coin.svg" />
+        </div>
+        <div class="font-splatoon1">
+          {{ price }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from '@vue/reactivity';
+import SquidTape from '../SquidTape.vue';
+import { getGesotownGearUrl } from '@/common/links';
+import { formatShortDurationFromNow } from '../../common/time';
+
+const props = defineProps({
+  gear: Object,
+});
+
+const price = computed(() => props.gear.price);
+const gear = computed(() => props.gear.gear);
+
+const shopUrl = computed(() => getGesotownGearUrl(props.gear.id));
+</script>
+
+<style scoped>
+.bg-price {
+  background-image: url('@/assets/img/gesotown-price-bg.png');
+  background-repeat: no-repeat;
+  background-size: 120px 31px;
+  background-position: left;
+}
+</style>

src/components/gear/RegularGear.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="relative">
+    <div class="bg-paper absolute inset-0 -z-50"></div>
+    <div class="absolute bottom-0 inset-x-0 -mb-px">
+      <img src="@/assets/img/paper-tear-overlay-w.png" />
+    </div>
+
+    <div class="absolute top-4 left-4">
+      <img src="@/assets/img/staple-left.png" class="w-12" />
+    </div>
+    <div class="absolute top-4 right-4">
+      <img src="@/assets/img/staple-right.png" class="w-12" />
+    </div>
+
+    <div class="pb-24 lg:pb-36">
+      <div class="text-center py-4">
+        <SquidTape
+          class="font-splatoon1 text-2xl text-black rounded-sm -rotate-2 z-10"
+          bg="bg-splatoon-orange"
+          squidBg="bg-black"
+          border="border border-black"
+          squidSize="15px"
+          >
+          <div class="px-1">
+            Gear on Sale Now
+          </div>
+        </SquidTape>
+      </div>
+
+      <div class="md:hidden px-2">
+        <div class="bg-horiz-card" v-for="gear in gears" :key="gear.id">
+          <GearCardHorizontal :gear="gear" />
+        </div>
+      </div>
+
+      <div class="hidden md:block px-2">
+        <div class="flex flex-wrap justify-center">
+          <div class="my-6 w-1/3 flex justify-center" v-for="gear in gears" :key="gear.id">
+            <GearCard class="w-64"  :gear="gear" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useGearStore } from '@/stores/gear.mjs';
+import { computed } from '@vue/reactivity';
+import GearCard from './GearCard.vue';
+import GearCardHorizontal from './GearCardHorizontal.vue';
+import SquidTape from '../SquidTape.vue';
+
+const gearStore = useGearStore();
+const gears = computed(() => gearStore.regularGear);
+</script>
+
+<style scoped>
+.bg-paper {
+  background-image: url('@/assets/img/paper-bg.jpg');
+  background-size: cover;
+  background-repeat: repeat-y;
+
+  mask-image: url('@/assets/img/paper-tear-mask.svg');
+  mask-position: bottom;
+  mask-size: 100%;
+}
+
+.bg-horiz-card {
+  background-image: url('@/assets/img/gesotown-horiz-card-bg.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+</style>

src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import GearView from '../views/GearView.vue'
 import AboutView from '../views/AboutView.vue'
 
 const router = createRouter({
@@ -10,6 +11,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/gear',
+      name: 'gear',
+      component: GearView,
+    },
     {
       path: '/about',
       name: 'about',

src/stores/gear.mjs

@@ -21,9 +21,9 @@ export const useGearStore = defineStore('gear', () => {
 
   const dailyDropBrand = computed(() => whenCurrent(gesotown.value?.pickupBrand));
   const dailyDropGear = computed(() => currentNodes(gesotown.value?.pickupBrand.brandGears));
-  const normalGear = computed(() => currentNodes(gesotown.value?.limitedGears));
+  const regularGear = computed(() => currentNodes(gesotown.value?.limitedGears));
 
-  return { dailyDropBrand, dailyDropGear, normalGear };
+  return { dailyDropBrand, dailyDropGear, regularGear };
 });
 
 if (import.meta.hot) {

src/views/GearView.vue

@@ -0,0 +1,28 @@
+<template>
+  <MainLayout title="SplatNet Gear">
+    <div class="grow flex items-center justify-center">
+      <div class="mx-4 md:mx-12 max-w-screen-xl w-full">
+        <div class="flex items-center flex-col lg:flex-row space-y-10 lg:space-y-0 lg:space-x-16">
+          <div class="max-w-sm xl:max-w-md">
+            <DailyDropGear class="md:-rotate-1" />
+          </div>
+
+          <div>
+            <RegularGear class="md:rotate-1" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </MainLayout>
+</template>
+
+<script setup>
+import MainLayout from '@/layouts/MainLayout.vue'
+import { useDataStore } from '../stores/data';
+import { onMounted } from 'vue';
+import DailyDropGear from '../components/gear/DailyDropGear.vue';
+import RegularGear from '../components/gear/RegularGear.vue';
+
+const data = useDataStore();
+onMounted(() => data.updateAll());
+</script>