diff --git a/src/renderer/app/app.tsx b/src/renderer/app/app.tsx
index 86eb68174..f831d1639 100644
--- a/src/renderer/app/app.tsx
+++ b/src/renderer/app/app.tsx
@@ -4,6 +4,7 @@ import { Navigate, Route, Routes } from "react-router-dom";
import { Header } from "@/app/header/header";
import { LoginDialog } from "@/app/header/login_dialog";
import type { MenuItem } from "@/app/header/main_menu";
+import { AdDialog } from "@/components/ad_dialog";
import { AuthGuard } from "@/components/auth_guard";
import { PersistentNotification } from "@/components/persistent_notification";
@@ -44,6 +45,7 @@ export const App = React.memo(({ menuItems }: { menuItems: readonly MainMenuItem
+
);
});
diff --git a/src/renderer/components/ad_dialog.tsx b/src/renderer/components/ad_dialog.tsx
new file mode 100644
index 000000000..6edb2ab5e
--- /dev/null
+++ b/src/renderer/components/ad_dialog.tsx
@@ -0,0 +1,95 @@
+import { css } from "@emotion/react";
+import CloseIcon from "@mui/icons-material/Close";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useState } from "react";
+
+import { ExternalLink as A } from "@/components/external_link";
+
+// import spifShopImage from "@/styles/images/ads/spif-slippi-shop-full-size.png";
+
+const getActiveCampaign = ():
+ | {
+ image: string;
+ seenKey: string;
+ }
+ | undefined => {
+ // const now = new Date();
+
+ // // I'm disabling this because the banner by itself is probably enough. This feels quite heavy.
+ // const start = new Date("2024-12-25");
+ // const end = new Date("2025-01-12");
+ // if (now >= start && now <= end) {
+ // return { image: spifShopImage, seenKey: "SPIF_SHOP_SEEN" };
+ // }
+
+ return undefined;
+};
+
+export const AdDialog = () => {
+ const theme = useTheme();
+ const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
+ const campaign = getActiveCampaign();
+
+ const [modalOpen, setModalOpen] = useState(Boolean(campaign));
+
+ const defaultSeen = campaign && localStorage.getItem(campaign.seenKey) === "true";
+ const [seenNotice, setSeenNotice] = useState(defaultSeen);
+
+ const closeModal = () => {
+ if (campaign) {
+ localStorage.setItem(campaign.seenKey, "true");
+ setSeenNotice(true);
+ }
+ setModalOpen(false);
+ };
+
+ if (!campaign || seenNotice) {
+ return null;
+ }
+
+ return (
+
+ );
+};
diff --git a/src/renderer/pages/home/news_feed/ad_banner.tsx b/src/renderer/pages/home/news_feed/ad_banner.tsx
new file mode 100644
index 000000000..d97f33f8c
--- /dev/null
+++ b/src/renderer/pages/home/news_feed/ad_banner.tsx
@@ -0,0 +1,60 @@
+import { css } from "@emotion/react";
+
+import { ExternalLink as A } from "@/components/external_link";
+import spifShopBanner from "@/styles/images/ads/spif-shop-banner.png";
+
+const getActiveBanner = () => {
+ const now = new Date();
+ const start = new Date("2024-12-25");
+ const end = new Date("2025-01-12");
+
+ if (now >= start && now <= end) {
+ return { image: spifShopBanner, url: "https://spif.space/pages/spif-x-slippi" };
+ }
+
+ return undefined;
+};
+
+export const AdBanner = () => {
+ const banner = getActiveBanner();
+
+ if (!banner) {
+ return null;
+ }
+
+ return (
+
+ );
+};
diff --git a/src/renderer/pages/home/news_feed/news_feed.tsx b/src/renderer/pages/home/news_feed/news_feed.tsx
index 4696d6df6..a0f23c4fb 100644
--- a/src/renderer/pages/home/news_feed/news_feed.tsx
+++ b/src/renderer/pages/home/news_feed/news_feed.tsx
@@ -5,6 +5,7 @@ import { useQuery } from "react-query";
import { LoadingScreen } from "@/components/loading_screen";
+import { AdBanner } from "./ad_banner";
import { NewsArticle } from "./news_article/news_article";
const ITEMS_TO_SHOW = 7;
@@ -65,6 +66,7 @@ export const NewsFeed = React.memo(function NewsFeedContainer() {
)}
+
);
});
diff --git a/src/renderer/styles/images/ads/spif-shop-banner.png b/src/renderer/styles/images/ads/spif-shop-banner.png
new file mode 100644
index 000000000..7c882ded3
Binary files /dev/null and b/src/renderer/styles/images/ads/spif-shop-banner.png differ
diff --git a/src/renderer/styles/images/ads/spif-slippi-shop-full-size.png b/src/renderer/styles/images/ads/spif-slippi-shop-full-size.png
new file mode 100644
index 000000000..4036b91e5
Binary files /dev/null and b/src/renderer/styles/images/ads/spif-slippi-shop-full-size.png differ