From 4964c8d3734b8d33f60c49b60aef66af0f5095a0 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Wed, 2 Jul 2025 21:50:33 -0700
Subject: [PATCH] Swap MR+ ad fallback to MRS (#3890)

* Replace Modrinth+ ad placeholder promo with Modrinth Servers promo

* Color toggle on web

* Remove plus link click helper
---
 .../src/components/ui/PromotionWrapper.vue    | 30 ++++++++++++--
 .../src/components/ui/AdPlaceholder.vue       | 40 +++++++++++++------
 apps/frontend/src/public/promo-frame.html     |  9 -----
 3 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/PromotionWrapper.vue b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
index 4e045fa2..273ffebb 100644
--- a/apps/app-frontend/src/components/ui/PromotionWrapper.vue
+++ b/apps/app-frontend/src/components/ui/PromotionWrapper.vue
@@ -32,8 +32,32 @@ function updateAdPosition() {
 
 <template>
   <div ref="adsWrapper" class="ad-parent relative flex w-full justify-center cursor-pointer bg-bg">
-    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
-      <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
-    </div>
+    <a
+      href="https://modrinth.gg?from=app-placeholder"
+      target="_blank"
+      class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
+    >
+      <img
+        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
+        alt="Host your next server with Modrinth Servers"
+        class="hidden light-image rounded-[inherit]"
+      />
+      <img
+        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+        alt="Host your next server with Modrinth Servers"
+        class="dark-image rounded-[inherit]"
+      />
+    </a>
   </div>
 </template>
+<style lang="scss" scoped>
+.light, .light-mode {
+  .dark-image {
+    display: none;
+  }
+
+  .light-image {
+    display: block;
+  }
+}
+</style>
diff --git a/apps/frontend/src/components/ui/AdPlaceholder.vue b/apps/frontend/src/components/ui/AdPlaceholder.vue
index 639a28b8..e2d5c9b4 100644
--- a/apps/frontend/src/components/ui/AdPlaceholder.vue
+++ b/apps/frontend/src/components/ui/AdPlaceholder.vue
@@ -1,15 +1,20 @@
 <template>
   <div class="ad-parent relative mb-3 flex w-full justify-center rounded-2xl bg-bg-raised">
-    <div class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 p-6">
-      <p class="m-0 text-2xl font-bold text-contrast">75% of ad revenue goes to creators</p>
-      <nuxt-link to="/plus" class="mt-auto items-center gap-1 text-purple hover:underline">
-        <span>
-          Support creators and Modrinth ad-free with
-          <span class="font-bold">Modrinth+</span>
-        </span>
-        <ChevronRightIcon class="relative top-[3px] h-5 w-5" />
-      </nuxt-link>
-    </div>
+    <nuxt-link
+      to="/servers"
+      class="flex max-h-[250px] min-h-[250px] min-w-[300px] max-w-[300px] flex-col gap-4 rounded-[inherit]"
+    >
+      <img
+        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-light.webp"
+        alt="Host your next server with Modrinth Servers"
+        class="light-image hidden rounded-[inherit]"
+      />
+      <img
+        src="https://cdn-raw.modrinth.com/modrinth-servers-placeholder-dark.webp"
+        alt="Host your next server with Modrinth Servers"
+        class="dark-image rounded-[inherit]"
+      />
+    </nuxt-link>
     <div
       class="absolute top-0 flex items-center justify-center overflow-hidden rounded-2xl bg-bg-raised"
     >
@@ -18,8 +23,6 @@
   </div>
 </template>
 <script setup>
-import { ChevronRightIcon } from "@modrinth/assets";
-
 useHead({
   script: [
     // {
@@ -137,3 +140,16 @@ iframe[id^="google_ads_iframe"] {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.light,
+.light-mode {
+  .dark-image {
+    display: none;
+  }
+
+  .light-image {
+    display: block;
+  }
+}
+</style>
diff --git a/apps/frontend/src/public/promo-frame.html b/apps/frontend/src/public/promo-frame.html
index 2dc4fc32..c8cce954 100644
--- a/apps/frontend/src/public/promo-frame.html
+++ b/apps/frontend/src/public/promo-frame.html
@@ -95,15 +95,6 @@
       });
 
       document.addEventListener("contextmenu", (event) => event.preventDefault());
-
-      const plusLink = document.getElementById("plus-link");
-      plusLink.addEventListener("click", function () {
-        window.__TAURI_INTERNALS__.invoke("plugin:ads|record_ads_click", {});
-        window.__TAURI_INTERNALS__.invoke("plugin:ads|open_link", {
-          path: "https://modrinth.com/plus",
-          origin: "https://modrinth.com",
-        });
-      });
     </script>
   </body>
 </html>