Add regular gear screenshot view

src/components/gear/GearCard.vue

@@ -5,7 +5,7 @@
     <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" />
+        <img :src="gear.image.url" class="h-20 w-20 lg:h-24 lg:w-24 xl:h-28 xl:w-28" />
       </div>
 
       <!-- Powers -->
@@ -27,7 +27,7 @@
           <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">
+          <div class="font-splatoon2 text-sm xl:text-base ss:text-lg text-shadow">
             {{ gear.name }}
           </div>
         </div>

src/components/screenshots/RegularGear.vue

@@ -0,0 +1,63 @@
+<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 pt-4">
+        <SquidTape class="font-splatoon1 text-4xl text-black rounded-sm -rotate-2 z-10" bg="bg-splatoon-orange"
+          squidBg="bg-black" border="border-2 border-black" squidSize="25px">
+          <div class="px-3 py-1">
+            Gear on Sale Now
+          </div>
+        </SquidTape>
+      </div>
+
+      <div class="mx-8 space-x-6 flex">
+        <div class="w-96 flex justify-center items-center">
+          <div class="scale-[1.85]">
+            <GearCard class="w-56" :gear="latestGear" v-if="latestGear" />
+          </div>
+        </div>
+
+        <div class="flex flex-wrap justify-center max-w-2xl">
+          <div class="my-4 w-1/3 flex justify-center" v-for="gear in gears" :key="gear.id">
+            <GearCard :gear="gear" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useGearStore } from '@/stores/gear.mjs';
+import { computed } from '@vue/reactivity';
+import GearCard from '@/components/gear/GearCard.vue';
+import SquidTape from '@/components/SquidTape.vue';
+
+const gearStore = useGearStore();
+const gears = computed(() => gearStore.regularGear?.slice(1));
+const latestGear = computed(() => gearStore.regularGear?.[0]);
+</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%;
+}
+</style>

src/layouts/ScreenshotLayout.vue

@@ -2,7 +2,9 @@
   <main class="min-h-screen flex flex-col overflow-hidden">
     <slot />
 
-    <div class="h-12 m-4 bg-black bg-opacity-50 rounded-full">
+    <div class="h-16"></div>
+
+    <div class="h-12 m-4 bg-black bg-opacity-50 backdrop-blur-sm rounded-full absolute bottom-0 inset-x-0">
       <div class="flex justify-between h-full font-splatoon2 text-sm text-zinc-300">
         <div class="flex justify-start items-center space-x-6 ml-4">
           <div>

src/router/screenshots.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import ScreenshotsHomeView from '@/views/screenshots/ScreenshotsHomeView.vue'
 import CountdownView from '@/views/screenshots/CountdownView.vue'
 import SchedulesView from '@/views/screenshots/SchedulesView.vue'
+import RegularGearView from '@/views/screenshots/RegularGearView.vue'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL + 'screenshots/'),
@@ -18,6 +19,10 @@ const router = createRouter({
       path: '/schedules',
       component: SchedulesView,
     },
+    {
+      path: '/gear/regular',
+      component: RegularGearView,
+    },
   ]
 })
 

src/views/screenshots/RegularGearView.vue

@@ -0,0 +1,12 @@
+<template>
+  <ScreenshotLayout header="SplatNet Gear">
+    <div class="flex justify-center mt-4">
+      <RegularGear class="-rotate-1" />
+    </div>
+  </ScreenshotLayout>
+</template>
+
+<script setup>
+import ScreenshotLayout from '../../layouts/ScreenshotLayout.vue';
+import RegularGear from '@/components/screenshots/RegularGear.vue';
+</script>

src/views/screenshots/ScreenshotsHomeView.vue

@@ -9,6 +9,9 @@
       <div>
         <router-link to="/schedules">Schedules</router-link>
       </div>
+      <div>
+        <router-link to="/gear/regular">Gear (Regular)</router-link>
+      </div>
     </div>
   </div>
 </template>