feat: ✨ Add experimental warning banner

app/layout.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from "react";
 
 export const metadata: Metadata = {
     title: {
-        template: "%s - Lysand API Reference",
+        template: "%s • Lysand API Reference",
         default: "Lysand API Reference",
     },
 };

components/ExperimentalWarning.tsx

@@ -0,0 +1,22 @@
+import type { FC } from "react";
+
+export const ExperimentalWarning: FC = () => (
+    <>
+        <div className="pointer-events-none z-50 fixed inset-x-0 bottom-0 sm:flex sm:justify-start sm:px-6 sm:pb-5 lg:px-8">
+            <div className="pointer-events-auto flex items-center justify-between gap-x-6 bg-zinc-900 sm:dark:shadow-brand-600 shadow-glow px-6 py-2.5 sm:rounded-md ring-1 ring-white/10 sm:py-3 sm:pl-4 sm:pr-3.5">
+                <p className="text-sm leading-6 text-white">
+                    <strong className="font-semibold">Warning!</strong>
+                    <svg
+                        viewBox="0 0 2 2"
+                        className="mx-2 inline h-0.5 w-0.5 fill-current"
+                        aria-hidden="true"
+                    >
+                        <circle cx={1} cy={1} r={1} />
+                    </svg>
+                    This is a testing site used for development, not a finished
+                    page.
+                </p>
+            </div>
+        </div>
+    </>
+);

components/Layout.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 import type { ReactNode } from "react";
+import { ExperimentalWarning } from "./ExperimentalWarning";
 import { Footer } from "./Footer";
 import { Header } from "./Header";
 import { Logo } from "./Logo";
@@ -42,6 +43,7 @@ export function Layout({
                     <Footer />
                 </div>
             </div>
+            <ExperimentalWarning />
         </SectionProvider>
     );
 }