Servers marketing enhancements (#3252)

* feat: locations page + stock callouts * feat: misalligned but spirits there!! * fix readability on colors on globe * Enhancements to globe * Fix out of stock indicator styling * Start globe near US and slow speed * Remove debug statement * Switch from capacity to stock API * Make custom use its own stock checker * Fix lint, add changelog entries --------- Co-authored-by: Elizabeth <checksum@pyro.host> Co-authored-by: Lio <git@lio.cat>
2025-02-12 12:06:51 -08:00
parent 098519dea1
commit 6d810a421a
8 changed files with 678 additions and 145 deletions
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -57,6 +57,8 @@
    "pinia": "^2.1.7",
    "qrcode.vue": "^3.4.0",
    "semver": "^7.5.4",
+    "three": "^0.172.0",
+    "@types/three": "^0.172.0",
    "vue-multiselect": "3.0.0-alpha.2",
    "vue-typed-virtual-list": "^1.0.10",
    "vue3-ace-editor": "^2.2.4",
--- a/apps/frontend/src/components/ui/servers/Globe.vue
+++ b/apps/frontend/src/components/ui/servers/Globe.vue
@@ -0,0 +1,308 @@
+<template>
+  <div ref="container" class="relative h-[400px] w-full cursor-move lg:h-[600px]">
+    <div
+      v-for="location in locations"
+      :key="location.name"
+      :class="{
+        'opacity-0': !showLabels,
+        hidden: !isLocationVisible(location),
+        'z-40': location.clicked,
+      }"
+      :style="{
+        position: 'absolute',
+        left: `${location.screenPosition?.x || 0}px`,
+        top: `${location.screenPosition?.y || 0}px`,
+      }"
+      class="location-button center-on-top-left flex transform cursor-pointer items-center rounded-full bg-bg px-3 outline-1 outline-red transition-opacity duration-200 hover:z-50"
+      @click="toggleLocationClicked(location)"
+    >
+      <div
+        :class="{
+          'animate-pulse': location.active,
+          'border-gray-400': !location.active,
+          'border-purple bg-purple': location.active,
+          'border-dashed': !location.active,
+          'opacity-40': !location.active,
+        }"
+        class="my-3 size-2.5 shrink-0 rounded-full border-2"
+      ></div>
+      <div
+        class="expanding-item"
+        :class="{
+          expanded: location.clicked,
+        }"
+      >
+        <div class="whitespace-nowrap text-sm">
+          <span class="ml-2"> {{ location.name }} </span>
+          <span v-if="!location.active" class="ml-1 text-xs text-secondary">(Coming Soon)</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { ref, onMounted, onUnmounted } from "vue";
+
+const container = ref(null);
+const showLabels = ref(false);
+
+const locations = ref([
+  // Active locations
+  { name: "New York", lat: 40.7128, lng: -74.006, active: true, clicked: false },
+  { name: "Los Angeles", lat: 34.0522, lng: -118.2437, active: true, clicked: false },
+  { name: "Miami", lat: 25.7617, lng: -80.1918, active: true, clicked: false },
+  { name: "Seattle", lat: 47.608013, lng: -122.3321, active: true, clicked: false },
+  // Future Locations
+  // { name: "London", lat: 51.5074, lng: -0.1278, active: false, clicked: false },
+  // { name: "Frankfurt", lat: 50.1109, lng: 8.6821, active: false, clicked: false },
+  // { name: "Amsterdam", lat: 52.3676, lng: 4.9041, active: false, clicked: false },
+  // { name: "Paris", lat: 48.8566, lng: 2.3522, active: false, clicked: false },
+  // { name: "Singapore", lat: 1.3521, lng: 103.8198, active: false, clicked: false },
+  // { name: "Tokyo", lat: 35.6762, lng: 139.6503, active: false, clicked: false },
+  // { name: "Sydney", lat: -33.8688, lng: 151.2093, active: false, clicked: false },
+  // { name: "São Paulo", lat: -23.5505, lng: -46.6333, active: false, clicked: false },
+  // { name: "Toronto", lat: 43.6532, lng: -79.3832, active: false, clicked: false },
+]);
+
+const isLocationVisible = (location) => {
+  if (!location.screenPosition || !globe) return false;
+
+  const vector = latLngToVector3(location.lat, location.lng).clone();
+  vector.applyMatrix4(globe.matrixWorld);
+
+  const cameraVector = new THREE.Vector3();
+  camera.getWorldPosition(cameraVector);
+
+  const viewVector = vector.clone().sub(cameraVector).normalize();
+
+  const normal = vector.clone().normalize();
+
+  const dotProduct = normal.dot(viewVector);
+
+  return dotProduct < -0.15;
+};
+
+const toggleLocationClicked = (location) => {
+  console.log("clicked", location.name);
+  locations.value.find((loc) => loc.name === location.name).clicked = !location.clicked;
+};
+
+let scene, camera, renderer, globe, controls;
+let animationFrame;
+
+const init = () => {
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(
+    45,
+    container.value.clientWidth / container.value.clientHeight,
+    0.1,
+    1000,
+  );
+  renderer = new THREE.WebGLRenderer({
+    antialias: true,
+    alpha: true,
+    powerPreference: "low-power",
+  });
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
+  container.value.appendChild(renderer.domElement);
+
+  const geometry = new THREE.SphereGeometry(5, 64, 64);
+  const outlineTexture = new THREE.TextureLoader().load("/earth-outline.png");
+  outlineTexture.minFilter = THREE.LinearFilter;
+  outlineTexture.magFilter = THREE.LinearFilter;
+
+  const material = new THREE.ShaderMaterial({
+    uniforms: {
+      outlineTexture: { value: outlineTexture },
+      globeColor: { value: new THREE.Color("#60fbb5") },
+    },
+    vertexShader: `
+      varying vec2 vUv;
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform sampler2D outlineTexture;
+      uniform vec3 globeColor;
+      varying vec2 vUv;
+      void main() {
+        vec4 texColor = texture2D(outlineTexture, vUv);
+
+        float brightness = max(max(texColor.r, texColor.g), texColor.b);
+        gl_FragColor = vec4(globeColor, brightness * 0.8);
+      }
+    `,
+    transparent: true,
+    side: THREE.FrontSide,
+  });
+
+  globe = new THREE.Mesh(geometry, material);
+  scene.add(globe);
+
+  const atmosphereGeometry = new THREE.SphereGeometry(5.2, 64, 64);
+  const atmosphereMaterial = new THREE.ShaderMaterial({
+    transparent: true,
+    side: THREE.BackSide,
+    uniforms: {
+      color: { value: new THREE.Color("#56f690") },
+      viewVector: { value: camera.position },
+    },
+    vertexShader: `
+      uniform vec3 viewVector;
+      varying float intensity;
+      void main() {
+        vec3 vNormal = normalize(normalMatrix * normal);
+        vec3 vNormel = normalize(normalMatrix * viewVector);
+        intensity = pow(0.7 - dot(vNormal, vNormel), 2.0);
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 color;
+      varying float intensity;
+      void main() {
+        gl_FragColor = vec4(color, intensity * 0.4);
+      }
+    `,
+  });
+
+  const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
+  scene.add(atmosphere);
+
+  const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
+  scene.add(ambientLight);
+
+  camera.position.z = 15;
+
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.dampingFactor = 0.05;
+  controls.rotateSpeed = 0.3;
+  controls.enableZoom = false;
+  controls.enablePan = false;
+  controls.autoRotate = true;
+  controls.autoRotateSpeed = 0.05;
+  controls.minPolarAngle = Math.PI * 0.3;
+  controls.maxPolarAngle = Math.PI * 0.7;
+
+  globe.rotation.y = Math.PI * 1.9;
+  globe.rotation.x = Math.PI * 0.15;
+};
+
+const animate = () => {
+  animationFrame = requestAnimationFrame(animate);
+  controls.update();
+
+  locations.value.forEach((location) => {
+    const position = latLngToVector3(location.lat, location.lng);
+    const vector = position.clone();
+    vector.applyMatrix4(globe.matrixWorld);
+
+    const coords = vector.project(camera);
+    const screenPosition = {
+      x: (coords.x * 0.5 + 0.5) * container.value.clientWidth,
+      y: (-coords.y * 0.5 + 0.5) * container.value.clientHeight,
+    };
+    location.screenPosition = screenPosition;
+  });
+
+  renderer.render(scene, camera);
+};
+
+const latLngToVector3 = (lat, lng) => {
+  const phi = (90 - lat) * (Math.PI / 180);
+  const theta = (lng + 180) * (Math.PI / 180);
+  const radius = 5;
+
+  return new THREE.Vector3(
+    -radius * Math.sin(phi) * Math.cos(theta),
+    radius * Math.cos(phi),
+    radius * Math.sin(phi) * Math.sin(theta),
+  );
+};
+
+const handleResize = () => {
+  if (!container.value) return;
+  camera.aspect = container.value.clientWidth / container.value.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.value.clientWidth, container.value.clientHeight);
+};
+
+onMounted(() => {
+  init();
+  animate();
+  window.addEventListener("resize", handleResize);
+
+  setTimeout(() => {
+    showLabels.value = true;
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (animationFrame) {
+    cancelAnimationFrame(animationFrame);
+  }
+  window.removeEventListener("resize", handleResize);
+  if (renderer) {
+    renderer.dispose();
+  }
+  if (container.value) {
+    container.value.innerHTML = "";
+  }
+});
+</script>
+
+<style scoped>
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(27, 217, 106, 0.3);
+  }
+  70% {
+    box-shadow: 0 0 0 4px rgba(27, 217, 106, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(27, 217, 106, 0);
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.center-on-top-left {
+  transform: translate(-50%, -50%);
+}
+
+.expanding-item.expanded {
+  grid-template-columns: 1fr;
+}
+
+@media (hover: hover) {
+  .location-button:hover .expanding-item {
+    grid-template-columns: 1fr;
+  }
+}
+
+.expanding-item {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns 0.15s ease-in-out;
+  overflow: hidden;
+
+  > div {
+    overflow: hidden;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .expanding-item {
+    transition: none !important;
+  }
+}
+</style>
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -494,6 +494,97 @@
      </div>
    </section>

+    <section
+      class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
+    >
+      <div class="faded-brand-line absolute left-0 top-0 h-[1px] w-full"></div>
+      <div class="mx-auto flex w-full max-w-7xl flex-col gap-8">
+        <div class="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
+          <div class="flex flex-col gap-8">
+            <div class="flex flex-col gap-4">
+              <div
+                class="relative w-fit rounded-full bg-highlight-green px-3 py-1 text-sm font-bold text-brand backdrop-blur-lg"
+              >
+                Server Locations
+              </div>
+              <h1 class="relative m-0 max-w-2xl text-4xl leading-[120%] md:text-7xl">
+                Coast-to-Coast Coverage
+              </h1>
+            </div>
+
+            <div class="flex flex-col gap-8">
+              <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-green">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-brand"
+                    >
+                      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
+                      <circle cx="12" cy="10" r="3" />
+                    </svg>
+                  </div>
+                  <h2 class="relative m-0 text-xl font-medium leading-[155%] md:text-2xl">
+                    US Coverage
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  With strategically placed servers in New York, Los Angeles, Seattle, and Miami, we
+                  ensure low latency connections for players across North America. Each location is
+                  equipped with high-performance hardware and DDoS protection.
+                </p>
+              </div>
+
+              <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                  <div class="grid size-8 place-content-center rounded-full bg-highlight-blue">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-blue"
+                    >
+                      <path d="M12 2a10 10 0 1 0 10 10" />
+                      <path d="M18 13a6 6 0 0 0-6-6" />
+                      <path d="M13 2.05a10 10 0 0 1 2 2" />
+                      <path d="M19.5 8.5a10 10 0 0 1 2 2" />
+                    </svg>
+                  </div>
+                  <h2 class="relative m-0 text-xl font-medium leading-[155%] md:text-2xl">
+                    Global Expansion
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  We're expanding to Europe and Asia-Pacific regions soon, bringing Modrinth's
+                  seamless hosting experience worldwide. Join our Discord to stay updated on new
+                  region launches.
+                </p>
+              </div>
+            </div>
+          </div>
+          <Globe />
+        </div>
+      </div>
+    </section>
+
    <section
      id="plan"
      class="relative mt-24 flex flex-col bg-[radial-gradient(65%_50%_at_50%_-10%,var(--color-brand-highlight)_0%,var(--color-accent-contrast)_100%)] px-3 pt-24 md:mt-48 md:pt-48"
@@ -511,147 +602,180 @@
              ? "We are currently at capacity. Please try again later."
              : "There's a plan for everyone! Choose the one that fits your needs."
          }}
-          <span class="font-bold">
-            Servers are currently US only, in New York, Los Angeles, Seattle, and Miami. More
-            regions coming soon!
-          </span>
        </h2>

-        <ul class="m-0 flex w-full flex-col gap-8 p-0 lg:flex-row">
-          <li class="flex w-full flex-col gap-4 rounded-2xl bg-bg p-8 text-left lg:w-1/3">
-            <div class="flex flex-row items-center justify-between">
-              <h1 class="m-0">Small</h1>
-              <div
-                class="grid size-8 place-content-center rounded-full bg-highlight-blue text-xs font-bold text-blue"
-              >
-                S
+        <ul class="m-0 mt-8 flex w-full flex-col gap-8 p-0 lg:flex-row">
+          <li class="relative flex w-full flex-col justify-between pt-12 lg:w-1/3">
+            <div
+              v-if="isSmallLowStock"
+              class="absolute left-0 right-0 top-[-2px] rounded-t-2xl bg-yellow-500/20 p-4 text-center font-bold"
+            >
+              Only {{ capacityStatuses?.small?.available }} left in stock!
+            </div>
+            <div
+              class="flex w-full flex-col justify-between gap-4 rounded-2xl bg-bg p-8 text-left"
+              :class="{ '!rounded-t-none': isSmallLowStock }"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-row items-center justify-between">
+                  <h1 class="m-0">Small</h1>
+                  <div
+                    class="grid size-8 place-content-center rounded-full bg-highlight-blue text-xs font-bold text-blue"
+                  >
+                    S
+                  </div>
+                </div>
+                <p class="m-0">
+                  Perfect for vanilla multiplayer, small friend groups, SMPs, and light modding.
+                </p>
+                <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
+                  <p class="m-0">4 GB RAM</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">4 vCPUs</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">32 GB Storage</p>
+                </div>
+                <h2 class="m-0 text-3xl text-contrast">
+                  $12<span class="text-sm font-normal text-secondary">/month</span>
+                </h2>
              </div>
+              <ButtonStyled color="blue" size="large">
+                <NuxtLink
+                  v-if="!loggedOut && isSmallAtCapacity"
+                  :to="outOfStockUrl"
+                  target="_blank"
+                  class="flex items-center gap-2 !bg-highlight-blue !font-medium !text-blue"
+                >
+                  Out of Stock
+                  <ExternalIcon class="!min-h-4 !min-w-4 !text-blue" />
+                </NuxtLink>
+                <button
+                  v-else
+                  class="!bg-highlight-blue !font-medium !text-blue"
+                  @click="selectProduct('small')"
+                >
+                  Get Started
+                  <RightArrowIcon class="!min-h-4 !min-w-4 !text-blue" />
+                </button>
+              </ButtonStyled>
            </div>
-            <p class="m-0">
-              Perfect for vanilla multiplayer, small friend groups, SMPs, and light modding.
-            </p>
-            <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
-              <p class="m-0">4 GB RAM</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">4 vCPUs</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">32 GB Storage</p>
-            </div>
-            <h2 class="m-0 text-3xl text-contrast">
-              $12<span class="text-sm font-normal text-secondary">/month</span>
-            </h2>
-            <ButtonStyled color="blue" size="large">
-              <NuxtLink
-                v-if="!loggedOut && isSmallAtCapacity"
-                :to="outOfStockUrl"
-                target="_blank"
-                class="!bg-highlight-blue !font-medium !text-blue"
-              >
-                Out of Stock
-                <ExternalIcon class="!min-h-4 !min-w-4 !text-blue" />
-              </NuxtLink>
-              <button
-                v-else
-                class="!bg-highlight-blue !font-medium !text-blue"
-                @click="selectProduct('small')"
-              >
-                Get Started
-                <RightArrowIcon class="!min-h-4 !min-w-4 !text-blue" />
-              </button>
-            </ButtonStyled>
          </li>

-          <li
-            style="
-              background: radial-gradient(
-                86.12% 101.64% at 95.97% 94.07%,
-                rgba(27, 217, 106, 0.23) 0%,
-                rgba(14, 115, 56, 0.2) 100%
-              );
-              border: 1px solid rgba(12, 107, 52, 0.55);
-              box-shadow: 0px 12px 38.1px rgba(27, 217, 106, 0.13);
-            "
-            class="flex w-full flex-col gap-4 rounded-2xl bg-bg p-8 text-left lg:w-1/3"
-          >
-            <div class="flex flex-row items-center justify-between">
-              <h1 class="m-0">Medium</h1>
-              <div
-                class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-brand"
-              >
-                M
+          <li class="relative flex w-full flex-col justify-between pt-12 lg:w-1/3">
+            <div
+              v-if="isMediumLowStock"
+              class="absolute left-0 right-0 top-[-2px] rounded-t-2xl bg-yellow-500/20 p-4 text-center font-bold"
+            >
+              Only {{ capacityStatuses?.medium?.available }} left in stock!
+            </div>
+            <div
+              style="
+                background: radial-gradient(
+                  86.12% 101.64% at 95.97% 94.07%,
+                  rgba(27, 217, 106, 0.23) 0%,
+                  rgba(14, 115, 56, 0.2) 100%
+                );
+                border: 1px solid rgba(12, 107, 52, 0.55);
+                box-shadow: 0px 12px 38.1px rgba(27, 217, 106, 0.13);
+              "
+              class="flex w-full flex-col justify-between gap-4 rounded-2xl p-8 text-left"
+              :class="{ '!rounded-t-none': isMediumLowStock }"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-row items-center justify-between">
+                  <h1 class="m-0">Medium</h1>
+                  <div
+                    class="grid size-8 place-content-center rounded-full bg-highlight-green text-xs font-bold text-brand"
+                  >
+                    M
+                  </div>
+                </div>
+                <p class="m-0">Great for modded multiplayer and small communities.</p>
+                <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
+                  <p class="m-0">6 GB RAM</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">6 vCPUs</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">48 GB Storage</p>
+                </div>
+                <h2 class="m-0 text-3xl text-contrast">
+                  $18<span class="text-sm font-normal text-secondary">/month</span>
+                </h2>
              </div>
+              <ButtonStyled color="brand" size="large">
+                <NuxtLink
+                  v-if="!loggedOut && isMediumAtCapacity"
+                  :to="outOfStockUrl"
+                  target="_blank"
+                  class="flex items-center gap-2 !bg-highlight-green !font-medium !text-green"
+                >
+                  Out of Stock
+                  <ExternalIcon class="!min-h-4 !min-w-4 !text-green" />
+                </NuxtLink>
+                <button
+                  v-else
+                  class="!bg-highlight-green !font-medium !text-green"
+                  @click="selectProduct('medium')"
+                >
+                  Get Started
+                  <RightArrowIcon class="!min-h-4 !min-w-4 !text-green" />
+                </button>
+              </ButtonStyled>
            </div>
-            <p class="m-0">Great for modded multiplayer and small communities.</p>
-            <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
-              <p class="m-0">6 GB RAM</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">6 vCPUs</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">48 GB Storage</p>
-            </div>
-            <h2 class="m-0 text-3xl text-contrast">
-              $18<span class="text-sm font-normal text-secondary">/month</span>
-            </h2>
-            <ButtonStyled color="brand" size="large">
-              <NuxtLink
-                v-if="!loggedOut && isMediumAtCapacity"
-                :to="outOfStockUrl"
-                target="_blank"
-                class="!bg-highlight-green !font-medium !text-green"
-              >
-                Out of Stock
-                <ExternalIcon class="!min-h-4 !min-w-4 !text-green" />
-              </NuxtLink>
-              <button
-                v-else
-                class="!bg-highlight-green !font-medium !text-green"
-                @click="selectProduct('medium')"
-              >
-                Get Started
-                <RightArrowIcon class="!min-h-4 !min-w-4 !text-green" />
-              </button>
-            </ButtonStyled>
          </li>

-          <li class="flex w-full flex-col gap-4 rounded-2xl bg-bg p-8 text-left lg:w-1/3">
-            <div class="flex flex-row items-center justify-between">
-              <h1 class="m-0">Large</h1>
-              <div
-                class="grid size-8 place-content-center rounded-full bg-highlight-purple text-xs font-bold text-purple"
-              >
-                L
+          <li class="relative flex w-full flex-col justify-between pt-12 lg:w-1/3">
+            <div
+              v-if="isLargeLowStock"
+              class="absolute left-0 right-0 top-[-2px] rounded-t-2xl bg-yellow-500/20 p-4 text-center font-bold"
+            >
+              Only {{ capacityStatuses?.large?.available }} left in stock!
+            </div>
+            <div
+              class="flex w-full flex-col justify-between gap-4 rounded-2xl bg-bg p-8 text-left"
+              :class="{ '!rounded-t-none': isLargeLowStock }"
+            >
+              <div class="flex flex-col gap-4">
+                <div class="flex flex-row items-center justify-between">
+                  <h1 class="m-0">Large</h1>
+                  <div
+                    class="grid size-8 place-content-center rounded-full bg-highlight-purple text-xs font-bold text-purple"
+                  >
+                    L
+                  </div>
+                </div>
+                <p class="m-0">Ideal for larger communities, modpacks, and heavy modding.</p>
+                <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
+                  <p class="m-0">8 GB RAM</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">8 vCPUs</p>
+                  <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
+                  <p class="m-0">64 GB Storage</p>
+                </div>
+                <h2 class="m-0 text-3xl text-contrast">
+                  $24<span class="text-sm font-normal text-secondary">/month</span>
+                </h2>
              </div>
+              <ButtonStyled color="brand" size="large">
+                <NuxtLink
+                  v-if="!loggedOut && isLargeAtCapacity"
+                  :to="outOfStockUrl"
+                  target="_blank"
+                  class="flex items-center gap-2 !bg-highlight-purple !font-medium !text-purple"
+                >
+                  Out of Stock
+                  <ExternalIcon class="!min-h-4 !min-w-4 !text-purple" />
+                </NuxtLink>
+                <button
+                  v-else
+                  class="!bg-highlight-purple !font-medium !text-purple"
+                  @click="selectProduct('large')"
+                >
+                  Get Started
+                  <RightArrowIcon class="!min-h-4 !min-w-4 !text-purple" />
+                </button>
+              </ButtonStyled>
            </div>
-            <p class="m-0">Ideal for larger communities, modpacks, and heavy modding.</p>
-            <div class="flex flex-row flex-wrap items-center gap-3 text-nowrap">
-              <p class="m-0">8 GB RAM</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">8 vCPUs</p>
-              <div class="size-1.5 rounded-full bg-secondary opacity-25"></div>
-              <p class="m-0">64 GB Storage</p>
-            </div>
-            <h2 class="m-0 text-3xl text-contrast">
-              $24<span class="text-sm font-normal text-secondary">/month</span>
-            </h2>
-            <ButtonStyled color="brand" size="large">
-              <NuxtLink
-                v-if="!loggedOut && isLargeAtCapacity"
-                :to="outOfStockUrl"
-                target="_blank"
-                class="!bg-highlight-purple !font-medium !text-purple"
-              >
-                Out of Stock
-                <ExternalIcon class="!min-h-4 !min-w-4 !text-purple" />
-              </NuxtLink>
-              <button
-                v-else
-                class="!bg-highlight-purple !font-medium !text-purple"
-                @click="selectProduct('large')"
-              >
-                Get Started
-                <RightArrowIcon class="!min-h-4 !min-w-4 !text-purple" />
-              </button>
-            </ButtonStyled>
          </li>
        </ul>

@@ -697,6 +821,7 @@ import {
 } from "@modrinth/assets";
 import { products } from "~/generated/state.json";
 import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
+import Globe from "~/components/ui/servers/Globe.vue";

 const pyroProducts = products.filter((p) => p.metadata.type === "pyro");
 const pyroPlanProducts = pyroProducts.filter(
@@ -760,9 +885,16 @@ const { data: hasServers } = await useAsyncData("ServerListCountCheck", async ()

 async function fetchCapacityStatuses(customProduct = null) {
  try {
-    const productsToCheck = customProduct?.metadata ? [customProduct] : pyroPlanProducts;
+    const productsToCheck = customProduct?.metadata
+      ? [customProduct]
+      : [
+          ...pyroPlanProducts,
+          pyroProducts.reduce((min, product) =>
+            product.metadata.ram < min.metadata.ram ? product : min,
+          ),
+        ];
    const capacityChecks = productsToCheck.map((product) =>
-      usePyroFetch("capacity", {
+      usePyroFetch("stock", {
        method: "POST",
        body: {
          cpu: product.metadata.cpu,
@@ -774,6 +906,7 @@ async function fetchCapacityStatuses(customProduct = null) {
    );

    const results = await Promise.all(capacityChecks);
+
    if (customProduct?.metadata) {
      return {
        custom: results[0],
@@ -783,6 +916,7 @@ async function fetchCapacityStatuses(customProduct = null) {
        small: results[0],
        medium: results[1],
        large: results[2],
+        custom: results[3],
      };
    }
  } catch (error) {
@@ -804,6 +938,22 @@ const { data: capacityStatuses, refresh: refreshCapacity } = await useAsyncData(
 const isSmallAtCapacity = computed(() => capacityStatuses.value?.small?.available === 0);
 const isMediumAtCapacity = computed(() => capacityStatuses.value?.medium?.available === 0);
 const isLargeAtCapacity = computed(() => capacityStatuses.value?.large?.available === 0);
+const isCustomAtCapacity = computed(() => capacityStatuses.value?.custom?.available === 0);
+
+const isSmallLowStock = computed(() => {
+  const available = capacityStatuses.value?.small?.available;
+  return available !== undefined && available > 0 && available < 8;
+});
+
+const isMediumLowStock = computed(() => {
+  const available = capacityStatuses.value?.medium?.available;
+  return available !== undefined && available > 0 && available < 8;
+});
+
+const isLargeLowStock = computed(() => {
+  const available = capacityStatuses.value?.large?.available;
+  return available !== undefined && available > 0 && available < 8;
+});

 const startTyping = () => {
  const currentWord = words[currentWordIndex.value];
@@ -907,7 +1057,9 @@ const selectProduct = async (product) => {
  }

  await refreshCapacity();
-  if (isAtCapacity.value) {
+  console.log(capacityStatuses.value);
+
+  if ((product === "custom" && isCustomAtCapacity.value) || isAtCapacity.value) {
    addNotification({
      group: "main",
      title: "Server Capacity Full",
--- a/apps/frontend/src/public/earth-outline.png
+++ b/apps/frontend/src/public/earth-outline.png