From e6045b532b459c184bb836761bd69490376d19d1 Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 21 May 2026 01:56:41 -0400
Subject: [PATCH] render about page at / for unauthed

---
 app/(home-pages)/page.tsx | 10 ++++++-
 app/about/AboutPage.tsx   | 55 +++++++++++++++++++++++++++++++++++++++
 app/about/LandingCTA.tsx  | 36 +++++++++++++++++--------
 app/about/page.tsx        | 54 ++------------------------------------
 4 files changed, 91 insertions(+), 64 deletions(-)
 create mode 100644 app/about/AboutPage.tsx

diff --git a/app/(home-pages)/page.tsx b/app/(home-pages)/page.tsx
index 5b1539da..1922786b 100644
--- a/app/(home-pages)/page.tsx
+++ b/app/(home-pages)/page.tsx
@@ -1,12 +1,20 @@
+import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { AboutPage } from "../about/AboutPage";
+
+export const metadata: Metadata = {
+  title: "Leaflet — social publishing on the Atmosphere",
+  description:
+    "A simple and powerful platform for social publishing — blogs, newsletters, and more!",
+};
 
 export default async function RootPage() {
   const cookieStore = await cookies();
   const hasAuth =
     cookieStore.has("auth_token") || cookieStore.has("external_auth_token");
 
-  if (!hasAuth) redirect("/reader");
+  if (!hasAuth) return <AboutPage />;
 
   const navState = cookieStore.get("nav-state")?.value;
   if (navState === "reader") redirect("/reader");
diff --git a/app/about/AboutPage.tsx b/app/about/AboutPage.tsx
new file mode 100644
index 00000000..5637933e
--- /dev/null
+++ b/app/about/AboutPage.tsx
@@ -0,0 +1,55 @@
+import "./about.css";
+import { IBM_Plex_Serif } from "next/font/google";
+import { LandingCTA, LandingCTABottom } from "./LandingCTA";
+import { Demo } from "./Demo";
+import { Features } from "./Features";
+import { Examples } from "./Examples";
+import { Pricing } from "./Pricing";
+import { Footer } from "./Footer";
+
+const ibmPlexSerif = IBM_Plex_Serif({
+  subsets: ["latin"],
+  weight: ["600", "700"],
+  style: ["normal", "italic"],
+  display: "swap",
+  variable: "--font-ibm-plex-serif",
+});
+
+export function AboutPage() {
+  return (
+    <main
+      className={`${ibmPlexSerif.variable} aboutPage w-full bg-[#FDFCFA] flex flex-col justify-center sm:px-12 px-4 mx-auto overflow-x-hidden`}
+    >
+      <div className="spacer h-[96px] sm:h-[160px]" />
+      <div className="aboutCover relative  max-w-full mx-auto w-[800px] flex flex-col gap-3 sm:gap-4">
+        <h1
+          className={` text-[#57822B] leading-none absolute -top-16 left-4 sm:-top-28 md:-left-16 sm:left-6 z-10`}
+          style={{
+            textShadow: "3px 7px 0 #D9EA72",
+            WebkitTextStroke: "0.5px #D9EA72",
+          }}
+        >
+          Leaflet
+        </h1>
+
+        <img
+          src="/about/hero.png"
+          alt=""
+          className="w-full h-full object-cover aspect-3/2"
+        />
+        <LandingCTA />
+      </div>
+
+      <p className=" pt-6 text-tertiary text-center leading-snug mx-auto text-lg sm:text-xl!">
+        A simple and powerful platform for social publishing <br />— blogs,
+        newsletters, and more!
+      </p>
+      <Demo />
+      <Features />
+      <Examples />
+      <Pricing />
+      <LandingCTABottom />
+      <Footer />
+    </main>
+  );
+}
diff --git a/app/about/LandingCTA.tsx b/app/about/LandingCTA.tsx
index 51fc248f..c6df80ef 100644
--- a/app/about/LandingCTA.tsx
+++ b/app/about/LandingCTA.tsx
@@ -4,22 +4,36 @@ import { useState } from "react";
 import { LoginModal } from "components/LoginButton";
 import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
 import { Input } from "components/Input";
+import { useIdentityData } from "components/IdentityProvider";
 
 export function LandingCTA() {
   let [loginOpen, setLoginOpen] = useState(false);
+  let { identity } = useIdentityData();
+  let signedIn = !!identity?.atp_did;
   return (
     <div className="flex items-center justify-end gap-4 sm:gap-6">
-      <button
-        onClick={() => setLoginOpen(true)}
-        className="text-[#57822B] font-bold text-lg! sm:text-xl!"
-      >
-        Log in
-      </button>
-      <LoginModal
-        open={loginOpen}
-        onOpenChange={setLoginOpen}
-        redirectRoute="/home"
-      />
+      {signedIn ? (
+        <Link
+          href="/home"
+          className="text-[#57822B] font-bold text-lg! sm:text-xl! no-underline!"
+        >
+          Log in
+        </Link>
+      ) : (
+        <>
+          <button
+            onClick={() => setLoginOpen(true)}
+            className="text-[#57822B] font-bold text-lg! sm:text-xl!"
+          >
+            Log in
+          </button>
+          <LoginModal
+            open={loginOpen}
+            onOpenChange={setLoginOpen}
+            redirectRoute="/home"
+          />
+        </>
+      )}
       <Link href="/new?welcomeModal" className="no-underline!">
         <ButtonPrimary className="rounded-lg! text-lg! sm:text-xl! bg-[#57822B]! border-[#57822B]! hover:outline-[#57822B]! text-white! py-0.5! px-2! sm:py-1 ! sm:px-4!">
           Start Writing
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 6a9798c5..fb74a6d9 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,19 +1,4 @@
-import "./about.css";
-import { IBM_Plex_Serif } from "next/font/google";
-import { LandingCTA, LandingCTABottom } from "./LandingCTA";
-import { Demo } from "./Demo";
-import { Features } from "./Features";
-import { Examples } from "./Examples";
-import { Pricing } from "./Pricing";
-import { Footer } from "./Footer";
-
-const ibmPlexSerif = IBM_Plex_Serif({
-  subsets: ["latin"],
-  weight: ["600", "700"],
-  style: ["normal", "italic"],
-  display: "swap",
-  variable: "--font-ibm-plex-serif",
-});
+import { AboutPage } from "./AboutPage";
 
 export const metadata = {
   title: "Leaflet — social publishing on the Atmosphere",
@@ -22,40 +7,5 @@ export const metadata = {
 };
 
 export default async function About() {
-  return (
-    <main
-      className={`${ibmPlexSerif.variable} aboutPage w-full bg-[#FDFCFA] flex flex-col justify-center sm:px-12 px-4 mx-auto overflow-x-hidden`}
-    >
-      <div className="spacer h-[96px] sm:h-[160px]" />
-      <div className="aboutCover relative  max-w-full mx-auto w-[800px] flex flex-col gap-3 sm:gap-4">
-        <h1
-          className={` text-[#57822B] leading-none absolute -top-16 left-4 sm:-top-28 md:-left-16 sm:left-6 z-10`}
-          style={{
-            textShadow: "3px 7px 0 #D9EA72",
-            WebkitTextStroke: "0.5px #D9EA72",
-          }}
-        >
-          Leaflet
-        </h1>
-
-        <img
-          src="/about/hero.png"
-          alt=""
-          className="w-full h-full object-cover aspect-3/2"
-        />
-        <LandingCTA />
-      </div>
-
-      <p className=" pt-6 text-tertiary text-center leading-snug mx-auto text-lg sm:text-xl!">
-        A simple and powerful platform for social publishing <br />— blogs,
-        newsletters, and more!
-      </p>
-      <Demo />
-      <Features />
-      <Examples />
-      <Pricing />
-      <LandingCTABottom />
-      <Footer />
-    </main>
-  );
+  return <AboutPage />;
 }
-- 
2.51.2