From 4e63eb002200a92e8485fec612a82602ba71436c Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 2 Dec 2023 15:38:45 +0200
Subject: [PATCH] Add temp top banner to advertise season finale

---
 app/features/front-page/routes/index.tsx | 24 ++++++++++++++++++++++++
 app/styles/front.css                     | 16 ++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/app/features/front-page/routes/index.tsx b/app/features/front-page/routes/index.tsx
index db3118189..bd4a6f563 100644
--- a/app/features/front-page/routes/index.tsx
+++ b/app/features/front-page/routes/index.tsx
@@ -53,6 +53,7 @@ export default function FrontPage() {
           Log-in is temporarily disabled due to problems with the Discord API
         </div>
       )}
+      <TopBanner />
       <div className="front__nav-items-container">
         <div className="front__nav-item round">
           <LanguageChanger plain>
@@ -112,6 +113,29 @@ export default function FrontPage() {
   );
 }
 
+// TODO: make into a dynamic feature
+function TopBanner() {
+  const eventInThePast = new Date() > new Date("2023-12-03T22:00:00Z");
+
+  if (eventInThePast) return null;
+
+  return (
+    <div className="front__top-banner">
+      SendouQ Season 1 Finale tournament featuring Jackpot, FTWin, Starburst,
+      Alliance Rogue and more top level teams! Catch the action{" "}
+      <a
+        href="https://www.twitch.tv/iplsplatoon"
+        className="front__top-banner__link"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        via IPL
+      </a>{" "}
+      on Sunday 3rd @ 10AM PST / 1PM EST / 6PM GMT
+    </div>
+  );
+}
+
 function LogInButton() {
   const data = useRootLoaderData();
   const { t } = useTranslation(["common"]);
diff --git a/app/styles/front.css b/app/styles/front.css
index 4eb423c8a..4e93c8739 100644
--- a/app/styles/front.css
+++ b/app/styles/front.css
@@ -1,3 +1,19 @@
+.front__top-banner {
+  border-radius: var(--rounded);
+  background: linear-gradient(to right, #4568dc, #b06ab3);
+  font-weight: var(--bold);
+  color: var(--button-text);
+  font-size: var(--fonts-sm);
+  padding-block: var(--s-1);
+  padding-inline: var(--s-2);
+  text-align: center;
+}
+
+.front__top-banner__link {
+  color: var(--button-text);
+  text-decoration: underline;
+}
+
 .front__nav-items-container {
   display: flex;
   margin: 0 auto;