fix conflicts and unformatted commit

packages/client/src/pages/discover/page.tsx

@@ -1,11 +1,22 @@
 // import { usePrivy } from "privy";
 
+import FlexSeparator from "../../shared/components/FlexSeparator.tsx";
+import Header from "../../shared/components/Header.tsx";
+import LoginBanner from "../../shared/components/LoginBanner.tsx";
+import RiskWarningBanner from "../../shared/components/RiskWarningBanner.tsx";
+
 export default function () {
   // const { authenticated } = usePrivy();
 
   return (
     <div className={"p-page flex flex-col overflow-hidden"}>
-      {}
+      <RiskWarningBanner />
+
+      <FlexSeparator size="sm" />
+
+      <Header />
+
+      <LoginBanner />
     </div>
   );
 }

packages/client/src/router.tsx

@@ -2,17 +2,17 @@ import { ErrorBoundary, Route, Router as PreactRouter } from "preact-iso";
 import _404 from "./pages/_404.tsx";
 import Login from "./pages/login/page.tsx";
 import Discover from "./pages/discover/page.tsx";
-import Layout from "./layout.tsx";
-import ProtectedRoute from "./shared/components/ProtectedRoute.tsx";
+import Layout from "./Layout.tsx";
+// import ProtectedRoute from "./shared/components/ProtectedRoute.tsx";
 
 export default function Router() {
   return (
     <Layout>
       <ErrorBoundary onError={(e) => console.error(e)}>
         <PreactRouter>
-          <ProtectedRoute type="UnauthenticatedOnly">
-            <Route path="login" component={Login} />
-          </ProtectedRoute>
+          {/* <ProtectedRoute type="UnauthenticatedOnly"> */}
+          <Route path="login" component={Login} />
+          {/* </ProtectedRoute> */}
 
           <Route path="discover" component={Discover} />
 

packages/client/src/shared/components/Header.tsx

@@ -0,0 +1,17 @@
+import FlexSeparator from "./FlexSeparator.tsx";
+import Icon from "./Icon.tsx";
+import Logo from "./Logo.tsx";
+
+export default function Header() {
+  return (
+    <div className="flex items-center">
+      <Logo className="size-6" />
+
+      <FlexSeparator size="full" />
+
+      <Icon name="Search" weight="normal" className="size-5" />
+      <FlexSeparator size="md" />
+      <Icon name="Settings" weight="normal" className="size-5" />
+    </div>
+  );
+}

packages/client/src/shared/components/Link.tsx

@@ -0,0 +1,23 @@
+import { useLocation } from "preact-iso";
+import type { Children } from "../types/utils.d.ts";
+import { cn } from "../lib/tailwind.ts";
+
+interface ILinkProps {
+  to: string;
+  children: Children;
+  className?: string;
+}
+
+export default function (props: ILinkProps) {
+  const { route } = useLocation();
+
+  return (
+    <button
+      role="link"
+      onClick={() => route(props.to)}
+      className={cn("cursor-pointer", props.className)}
+    >
+      {props.children}
+    </button>
+  );
+}

packages/client/src/shared/components/LoginBanner.tsx

@@ -0,0 +1,31 @@
+import FlexSeparator from "./FlexSeparator.tsx";
+import Link from "./Link.tsx";
+
+export default function LoginBanner() {
+  return (
+    <div className="flex flex-col -translate-y-4">
+      <div className="flex items-end">
+        <h1 className="text-2xl font-semibold">
+          Back to the Fun <br /> Side of Crypto
+        </h1>
+        <FlexSeparator size="full" />
+        <img
+          src="https://media.tenor.com/8tgG_KyJqqwAAAAj/happy-happy-happy-happy.gif"
+          className="w-1/3 translate-y-8"
+        />
+      </div>
+
+      <FlexSeparator size="md" />
+
+      <div className="flex">
+        <Link to="/login" className="w-1/2 py-1 bg-foreground/20 rounded-xl">
+          Log In
+        </Link>
+        <FlexSeparator size="md" />
+        <Link to="/login" className="w-1/2 py-1 bg-primary rounded-xl">
+          Sign Up
+        </Link>
+      </div>
+    </div>
+  );
+}

packages/client/src/shared/components/Logo.tsx

@@ -0,0 +1,11 @@
+interface ILogoProps {
+  className?: string;
+}
+
+export default function Logo(props: ILogoProps) {
+  return (
+    <>
+      <img src="/logo.svg" alt="pumpfaxt logo" className={props.className} />
+    </>
+  );
+}