about edits

app/about/page.tsx

@@ -1,14 +1,15 @@
 import Image from "next/image";
 import Typography from "@/components/ui/typography";
 import { Metadata } from "next";
+import Link from "next/link";
 
 export const metadata: Metadata = {
   title: "Mechanism Institute | About",
 };
 
 export default function Page() {
   return (
-    <div className="flex flex-col lg:flex-row gap-[120px] relative mt-8 md:mt-16 pb-8 md:pb-16">
+    <div className="flex flex-col lg:flex-row gap-[120px] relative mt-8 pb-8 md:pb-16">
       <div className="w-[240px] hidden lg:block">
         <Image
           className="absolute top-0"
@@ -19,67 +20,53 @@ export default function Page() {
         />
       </div>
       <div className="flex flex-col flex-1">
-        <div className="flex flex-col max-w-[720px] gap-12">
-          <div className="flex flex-col gap-6">
-            <Typography variant="title2" className="text-stone font-gotham">
-              Decentralizing coordination, one mechanism at a time
+        <div className="flex flex-col max-w-[720px]">
+          <Typography variant="body" className="leading-[175%] mb-8">
+            Mechanism Institute is a research hub dedicated to advancing onchain mechanisms. We document, invent, remix, compose, and deploy mechanisms that improve human institutions. Our three pillars are:
+          </Typography>
+
+          <div className="flex flex-col gap-2 mb-6 pb-6 border-b border-gray-300">
+            <Typography variant="subtitle2" className="text-stone font-gotham">
+              The Mechanism Library
             </Typography>
-            <div className="flex flex-col gap-10">
-              <div className="flex flex-col gap-2">
-                <Typography variant="body" className="leading-[175%]">
-                  Mechanism Institute is a research hub that advances onchain mechanisms. Our mission is to empower communities worldwide to design and deploy mechanisms that unlock new forms of coordination.
-                </Typography>
-              </div>
-            </div>
-            <div className="flex flex-col gap-10">
-              <div className="flex flex-col gap-2">
-                <Typography variant="body" className="leading-[175%]">
-                  Blockchain-based mechanisms represent a paradigm shift from legacy institutions, enabling agreements that are:
-                </Typography>
-                <div className="pl-6">
-                  <Typography variant="body" className="leading-[175%]">
-                    1. Self-executing: Automatically enforce their own conditions<br />
-                    2. Censorship-resistant: Cannot be interfered with by central authorities<br />
-                    3. Socially scalable: Coordinate an unbounded number of actors and interactions
-                  </Typography>
-                </div>
-                <Typography variant="body" className="leading-[175%]">
-                  Yet, these mechanisms remain underexplored and poorly understood.
-                </Typography>
-              </div>
-            </div>
-          </div>
-          <div className="flex flex-col gap-6">
             <Typography variant="body" className="leading-[175%]">
-              Our Theory of Change centers on:
+              Our library maps the onchain design space across seven fundamental functions.
             </Typography>
-            <div className="flex flex-col gap-2">
-              <Typography variant="subtitle2" className="text-stone font-gotham">
-                The Library
-              </Typography>
-              <Typography variant="body" className="leading-[175%]">
-                Mapping the mechanism design space to illuminate the range of onchain experiments conducted to date.
-              </Typography>
-            </div>
-            <div className="flex flex-col gap-2">
-              <Typography variant="subtitle2" className="text-stone font-gotham">
-                Research Reports
-              </Typography>
-              <Typography variant="body" className="leading-[175%]">
-                Deep-diving into how existing mechanisms can be composed to solve complex problems in specific domains.
-              </Typography>
-            </div>
-            <div className="flex flex-col gap-2">
-              <Typography variant="subtitle2" className="text-stone font-gotham">
-                Inventions & Interventions
-              </Typography>
+            <div className="pl-6 mt-2">
               <Typography variant="body" className="leading-[175%]">
-                Designing new mechanisms and orchestrating real-world interventions that accelerate the shift to intermediary-less institutions.
+                - <em>Fundraising</em>: Coordinating the flow of capital into a system.<br />
+                - <em>Allocation</em>: Determining how resources are distributed.<br />
+                - <em>Value Capture</em>: Structuring how value is retained and redistributed.<br />
+                - <em>Rewards & Penalties</em>: Shaping incentives to influence behavior.<br />
+                - <em>Exchange</em>: Facilitating the transfer, trade, and pricing of assets.<br />
+                - <em>Governance</em>: Establishing processes for collective decision-making.<br />
+                - <em>Data</em>: Managing information flow, integrity, and access.
               </Typography>
             </div>
           </div>
+
+          <div className="flex flex-col gap-2 mb-6 pb-6 border-b border-gray-300">
+            <Typography variant="subtitle2" className="text-stone font-gotham">
+              Research
+            </Typography>
+            <Typography variant="body" className="leading-[175%]">
+              We investigate how mechanisms can be applied to solve complex problems across domains, including <Link href="https://paragraph.xyz/@mechanism.institute/prediction-markets" className="underline" target="_blank">prediction markets</Link>, <Link href="https://paragraph.xyz/@mechanism.institute/public-goods" className="underline" target="_blank">public goods</Link>, <Link href="https://www.projectliberty.io/wp-content/uploads/2024/06/PL_Toolkit_Report_v7.pdf" className="underline" target="_blank">governance</Link>, <Link href="https://research.allo.capital/t/futarchy-let-the-markets-decide/157" className="underline" target="_blank">venture studios</Link>, <Link href="https://github.com/Mechanism-Institute/slashing-engine" className="underline" target="_blank">sybil prevention</Link>, <Link href="https://youtu.be/Lr9-D9lU4cs?si=M10aRnwXTquykExK" className="underline" target="_blank">network sovereignties</Link>, <Link href="https://observablehq.com/@mechanisminstitute/impact-measurement" className="underline" target="_blank">impact measurement</Link>, and <Link href="https://observablehq.com/@mechanisminstitute/5-research-directions-for-blockchain-mechanisms" className="underline" target="_blank">more</Link>.
+            </Typography>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <Typography variant="subtitle2" className="text-stone font-gotham">
+              Collaborations
+            </Typography>
+            <Typography variant="body" className="leading-[175%]">
+              We partner with researchers and institutions looking to understand and apply onchain mechanisms to new domains. Our work has been financially supported by <Link href="https://www.gitcoin.co/" className="underline" target="_blank">Gitcoin</Link> and <Link href="https://optimism.io/" className="underline" target="_blank">Optimism</Link>, and we actively collaborate with <Link href="https://blockchaingov.eu/" className="underline" target="_blank">BlockchainGov</Link> on research and library maintenance.
+            </Typography>
+            <Typography variant="body" className="leading-[175%] mt-4">
+              If you are interested in working with us, reach out at <Link href="mailto:hello@mechanism.institute" className="underline">hello@mechanism.institute</Link>.
+            </Typography>
+          </div>
         </div>
       </div>
     </div>
   );
-}
+}

app/layout.tsx

@@ -5,8 +5,6 @@ import { MechanismCategory } from "@/types/mechanism-category";
 import Providers from "@/components/providers";
 import { cn } from "@/utils/shadui";
 import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
-
 // this is needed because otherwise the tailwind JIT compiler will not be able to find the dynamic classes
 // the type is to ensure every category is covered
 const backgroundVariants: Record<MechanismCategory, string> = {
@@ -18,7 +16,6 @@ const backgroundVariants: Record<MechanismCategory, string> = {
   "exchange": "bg-purple",
   "data": "bg-pink",
 };
-
 export const metadata: Metadata = {
   title: "Mechanism Institute",
   description:
@@ -30,7 +27,6 @@ export const metadata: Metadata = {
     },
   ],
 };
-
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
@@ -43,9 +39,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Providers>
           <Navbar />
           <main className="flex flex-col flex-1 pb-16">{children}</main>
-          <Footer />
         </Providers>
       </body>
     </html>
   );
-}
+}

components/navbar.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import Link from "next/link";
 import Image from "next/image";
 import Typography from "@/components/ui/typography";
@@ -12,17 +11,15 @@ import { useAtom } from "jotai";
 import { supporterDialogAtom } from "@/state/supporter-atom";
 import clsx from "clsx";
 import { usePathname } from "next/navigation";
+import X from "@/components/ui/x";
 
 export default function Navbar() {
   const [, setDialogOpen] = useAtom(supporterDialogAtom);
   const [open, setOpen] = useState(false);
-
   const activePage = usePathname();
   const isHome = activePage === "/";
-
   const activeClasses =
     "underline underline-offset-[49px] decoration-4 decoration-gray-900 text-gray-900";
-
   return (
     <nav className="flex items-center justify-between w-full px-2 py-8 border-b border-divider">
       <Link href="/" className="transition-opacity duration-300 cursor-pointer hover:opacity-70">
@@ -33,7 +30,7 @@ export default function Navbar() {
           height={40}
         />
       </Link>
-      <div className="hidden gap-10 md:flex">
+      <div className="hidden gap-10 md:flex items-center">
         <Typography
           className={clsx(activePage === "/about" && activeClasses)}
           variant="nav-link"
@@ -57,8 +54,15 @@ export default function Navbar() {
         >
           Connect
         </Typography>
+        <Link 
+          href="https://x.com/mechanism_inst" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="ml-2 transition-opacity duration-300 hover:opacity-70 text-gray-600"
+        >
+          <X width={16} height={16} />
+        </Link>
       </div>
-
       <div className="md:hidden">
         <Dialog.Root open={open} onOpenChange={setOpen}>
           <Dialog.Trigger className="button">
@@ -96,10 +100,21 @@ export default function Navbar() {
             >
               Get Involved
             </Typography>
+            <Typography variant="nav-link" asChild>
+              <Link 
+                href="https://x.com/mechanism_inst" 
+                target="_blank" 
+                rel="noopener noreferrer"
+                className="flex items-center gap-2"
+                onClick={() => setOpen(false)}
+              >
+                X <X width={16} height={16} />
+              </Link>
+            </Typography>
           </Transition>
         </Dialog.Root>
       </div>
       <SupporterDialog />
     </nav>
   );
-}
+}