Merge pull request #78 from near/feat/redacted-banner

Redacted banner on all pages

src/components/RedactedBanner.module.scss

@@ -0,0 +1,35 @@
+.redactedBanner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  a {
+    display: block;
+    outline: none;
+    transition: box-shadow 300ms;
+    position: relative;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      transition: box-shadow 300ms;
+    }
+
+    &:hover {
+      z-index: 100;
+      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
+    }
+
+    &:focus-visible {
+      z-index: 100;
+      &::before {
+        box-shadow: inset 0 0 0 4px var(--violet5);
+      }
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+}

src/components/RedactedBanner.tsx

@@ -0,0 +1,37 @@
+import { Container } from '@near-pagoda/ui';
+
+import s from './RedactedBanner.module.scss';
+
+export const RedactedBanner = () => {
+  const now = Date.now();
+  const redactedEndTime = 1731139200000; // Nov 9th 2024
+  const hackathonEndTime = 1727247600000; // Oct 25th 2024
+  const hackathonEndPassed = now > hackathonEndTime;
+  const redactedEndPassed = now > redactedEndTime;
+
+  if (redactedEndPassed) return null;
+
+  return (
+    <Container>
+      <div className={s.redactedBanner}>
+        <a href="https://airtable.com/appdLXQkwmt4rqtW0/pag21sUeq3cAW994V/form" target="_blank">
+          <img
+            src="/images/redacted/redacted-left.png"
+            alt="Redacted: Reclaim your sovereignty at no cost. Click to be there IRL"
+          />
+        </a>
+
+        {hackathonEndPassed ? (
+          <img src="/images/redacted/redacted-right-empty.png" alt="Redacted" />
+        ) : (
+          <a href="https://redacted.devpost.com/" target="_blank">
+            <img
+              src="/images/redacted/redacted-right.png"
+              alt="Redacted: It's so much more than a hackathon. Click to learn more"
+            />
+          </a>
+        )}
+      </div>
+    </Container>
+  );
+};

src/components/layouts/DefaultLayout.tsx

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 
 import { Footer } from '../Footer';
 import { Navigation } from '../navigation/Navigation';
+import { RedactedBanner } from '../RedactedBanner';
 import s from './DefaultLayout.module.scss';
 
 interface Props {
@@ -14,6 +15,7 @@ export function DefaultLayout({ children }: Props) {
       <Navigation />
 
       <div className={s.content}>
+        <RedactedBanner />
         {children}
         <Footer />
       </div>