From 6c452f86b64423d4cabbb654fd88fef1b2420004 Mon Sep 17 00:00:00 2001
From: IMB11 <calum@modrinth.com>
Date: Mon, 28 Jul 2025 17:30:22 +0100
Subject: [PATCH] feat: hide globe behind flag

---
 .../src/components/ui/servers/Globe.vue       | 37 ++++----
 apps/frontend/src/composables/featureFlags.ts |  1 +
 apps/frontend/src/pages/servers/index.vue     | 94 +++++++++++++++++++
 3 files changed, 116 insertions(+), 16 deletions(-)

diff --git a/apps/frontend/src/components/ui/servers/Globe.vue b/apps/frontend/src/components/ui/servers/Globe.vue
index 56c9b826d..d9d7db72b 100644
--- a/apps/frontend/src/components/ui/servers/Globe.vue
+++ b/apps/frontend/src/components/ui/servers/Globe.vue
@@ -50,22 +50,27 @@ 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: "Spokane", lat: 47.667309, lng: -117.411922, active: true, clicked: false },
-  { name: "Dallas", lat: 32.78372, lng: -96.7947, 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 },
+  {
+    name: "Vint Hill",
+    lat: 38.74724876915715,
+    lng: -77.67436507922152,
+    active: true,
+    clicked: false,
+  },
+  {
+    name: "Coventry",
+    lat: 52.39751276904742,
+    lng: -1.5777183894453757,
+    active: true,
+    clicked: false,
+  },
+  {
+    name: "Limburg",
+    lat: 50.40863558430334,
+    lng: 8.062427315007714,
+    active: true,
+    clicked: false,
+  },
 ]);
 
 const isLocationVisible = (location) => {
diff --git a/apps/frontend/src/composables/featureFlags.ts b/apps/frontend/src/composables/featureFlags.ts
index df4c5d057..c769f7bcf 100644
--- a/apps/frontend/src/composables/featureFlags.ts
+++ b/apps/frontend/src/composables/featureFlags.ts
@@ -34,6 +34,7 @@ export const DEFAULT_FEATURE_FLAGS = validateValues({
   showProjectPageDownloadModalServersPromo: false,
   showProjectPageCreateServersTooltip: true,
   showProjectPageQuickServerButton: false,
+  showModrinthServersGlobe: false,
   // advancedRendering: true,
   // externalLinksNewTab: true,
   // notUsingBlockers: false,
diff --git a/apps/frontend/src/pages/servers/index.vue b/apps/frontend/src/pages/servers/index.vue
index 2ac52cbe8..d767b9a34 100644
--- a/apps/frontend/src/pages/servers/index.vue
+++ b/apps/frontend/src/pages/servers/index.vue
@@ -515,6 +515,98 @@
       </div>
     </section>
 
+    <section
+      v-if="flags.showModrinthServersGlobe"
+      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">
+                Global 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">
+                    Strategic Locations
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  With servers strategically placed in Vint Hill (USA), Coventry (UK), and Limburg
+                  (Germany), we provide excellent coverage across North America and Europe. Each
+                  location features high-performance hardware and comprehensive 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">
+                    Low Latency Connectivity
+                  </h2>
+                </div>
+                <p
+                  class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+                >
+                  Our three carefully chosen locations ensure optimal ping times and reliable
+                  connections for players across multiple continents. Choose the region closest to
+                  you for the best gaming experience.
+                </p>
+              </div>
+            </div>
+          </div>
+          <Globe />
+        </div>
+      </div>
+    </section>
+
     <section
       id="plan"
       pyro-hash="plan"
@@ -651,6 +743,7 @@ import { useServersFetch } from "~/composables/servers/servers-fetch.ts";
 import LoaderIcon from "~/components/ui/servers/icons/LoaderIcon.vue";
 import ServerPlanSelector from "~/components/ui/servers/marketing/ServerPlanSelector.vue";
 import OptionGroup from "~/components/ui/OptionGroup.vue";
+import Globe from "~/components/ui/servers/Globe.vue";
 
 const { locale } = useVIntl();
 
@@ -842,6 +935,7 @@ async function fetchPaymentData() {
 const selectedProjectId = ref();
 
 const route = useRoute();
+const flags = useFeatureFlags();
 const isAtCapacity = computed(
   () => isSmallAtCapacity.value && isMediumAtCapacity.value && isLargeAtCapacity.value,
 );