feat(homepage-legacy): deprecation banner

apps/homepage-legacy/src/components/App.tsx

@@ -1,6 +1,7 @@
 import { simplePie, simpleDoughnut } from "simple-pie";
 import { SimplePie, SimpleDoughnut } from "react-simple-pie";
 import { NetworkUseCase } from "./NetworkUseCase.tsx";
+import { DeprecationBanner } from "./DeprecationBanner.tsx";
 import "./App.css";
 
 function getRandomPieDataUri() {
@@ -19,6 +20,7 @@ function getRandomPieDataUri() {
 export function App(): JSX.Element {
   return (
     <main className="app">
+      <DeprecationBanner />
       <article>
         <h2 className="title">
           Network Graph Demo

apps/homepage-legacy/src/components/DeprecationBanner.module.css

@@ -0,0 +1,41 @@
+.banner__wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.banner {
+  background-color: #E36F2C;
+  border-radius: 28px;
+  font-size: 28px;
+  padding: 8px;
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.banner h3 {
+  margin: 0;
+}
+
+.banner a {
+  white-space: nowrap;
+}
+
+.banner a:after {
+  position: absolute;
+  content: '';
+  inset: 0;
+}
+
+.banner__inner {
+  border-radius: 24px;
+  border: 8px solid black;
+  padding: 8px 16px 16px;
+  text-align: center;
+}
+
+.icon_container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}

apps/homepage-legacy/src/components/DeprecationBanner.tsx

@@ -0,0 +1,36 @@
+import style from "./DeprecationBanner.module.css";
+
+export function DeprecationBanner() {
+  return (
+    <div className={style.banner__wrapper}>
+      <section className={style.banner}>
+        <div className={style.banner__inner}>
+          <div className={style.icon_container}>
+            <img alt="bicycle" src="/bicycle.svg" height="80px" width="80px" />
+            <img
+              alt="walking person"
+              src="/walk.svg"
+              height="60px"
+              width="60px"
+            />
+          </div>
+          <h3>DETOUR</h3>
+          <div>
+            <img
+              alt="detour-arrow"
+              src="/detour-arrow.svg"
+              height="40px"
+              width="40px"
+            />
+          </div>
+          The site is deprecated. Please visit our new site at
+          <div>
+            <a href="https://simple-pie.netlify.app">
+              https://simple-pie.netlify.app
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}