From af80791461e9d1bc6ea707ca1491318080effbd5 Mon Sep 17 00:00:00 2001
From: Anand Chowdhary <mail@anandchowdhary.com>
Date: Thu, 25 Apr 2024 13:16:50 +0200
Subject: [PATCH] :recycle: Use consistent tab positioning between sites

---
 src/app/foundation/components/Header.tsx | 36 +++++++++++++++++-------
 src/app/holdings/components/Header.tsx   | 28 ++++++++++++++----
 src/app/not-found.tsx                    | 28 ------------------
 3 files changed, 48 insertions(+), 44 deletions(-)
 delete mode 100644 src/app/not-found.tsx

diff --git a/src/app/foundation/components/Header.tsx b/src/app/foundation/components/Header.tsx
index 5cdfdd0..ad7d7a7 100644
--- a/src/app/foundation/components/Header.tsx
+++ b/src/app/foundation/components/Header.tsx
@@ -1,22 +1,38 @@
-import { Button } from '@/app/foundation/components/Button'
-import { Container } from '@/app/foundation/components/Container'
-import { Logo } from '@/app/foundation/components/Logo'
+import { Button } from '@/app/holdings/components/Button'
+import { Container } from '@/app/holdings/components/Container'
+import { Logo } from '@/app/holdings/components/Logo'
 
 export function Header() {
   return (
-    <header className="border-primary-500 relative z-50 flex-none border-b bg-white lg:pt-6">
-      <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
-        <div className="mt-10 flex items-center gap-8 lg:mt-0 lg:grow lg:basis-0">
-          <div className="border-primary-500 bg-primary-50 -my-px flex items-center gap-4 rounded-t-3xl border border-b-0 px-8 py-4">
-            <Logo className="text-primary-500 h-12 w-auto" />
-            <div className="text-xl font-bold uppercase">Foundation</div>
+    <header className="relative z-50 flex-none border-b border-primary-500 bg-white lg:pt-6">
+      <Container className="flex flex-wrap items-center justify-center text-center sm:justify-between lg:flex-nowrap">
+        <div className="pt-8 lg:hidden">
+          <div className="flex justify-center">
+            <Logo className="mb-8 h-12 w-auto text-primary-500" />
+          </div>
+          <div className="grid grid-cols-2 items-center">
+            <a
+              className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+              href="https://chowdhary.co"
+            >
+              Holdings
+            </a>
+            <div className="-my-px rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4 text-xl font-bold uppercase">
+              Foundation
+            </div>
           </div>
+        </div>
+        <div className="mt-10 hidden items-center gap-8 lg:mt-0 lg:flex lg:grow lg:basis-0">
           <a
-            className="focus-visible:outline-primary-500 text-primary-800 rounded text-xl font-bold uppercase focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
             href="https://chowdhary.co"
           >
             Holdings
           </a>
+          <div className="-my-px flex items-center gap-4 rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4">
+            <Logo className="h-12 w-auto text-primary-500" />
+            <div className="text-xl font-bold uppercase">Foundation</div>
+          </div>
         </div>
         <div className="hidden sm:mt-10 sm:flex lg:mt-0 lg:grow lg:basis-0 lg:justify-end">
           <Button href="#apply">Apply for a grant</Button>
diff --git a/src/app/holdings/components/Header.tsx b/src/app/holdings/components/Header.tsx
index f1ce705..b307d87 100644
--- a/src/app/holdings/components/Header.tsx
+++ b/src/app/holdings/components/Header.tsx
@@ -4,15 +4,31 @@ import { Logo } from '@/app/holdings/components/Logo'
 
 export function Header() {
   return (
-    <header className="border-primary-500 relative z-50 flex-none border-b bg-white lg:pt-6">
-      <Container className="flex flex-wrap items-center justify-center sm:justify-between lg:flex-nowrap">
-        <div className="mt-10 flex items-center gap-8 lg:mt-0 lg:grow lg:basis-0">
-          <div className="border-primary-500 bg-primary-50 -my-px flex items-center gap-4 rounded-t-3xl border border-b-0 px-8 py-4">
-            <Logo className="text-primary-500 h-12 w-auto" />
+    <header className="relative z-50 flex-none border-b border-primary-500 bg-white lg:pt-6">
+      <Container className="flex flex-wrap items-center justify-center text-center sm:justify-between lg:flex-nowrap">
+        <div className="pt-8 lg:hidden">
+          <div className="flex justify-center">
+            <Logo className="mb-8 h-12 w-auto text-primary-500" />
+          </div>
+          <div className="grid grid-cols-2 items-center">
+            <div className="-my-px rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4 text-xl font-bold uppercase">
+              Holdings
+            </div>
+            <a
+              className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
+              href="https://chowdhary.org"
+            >
+              Foundation
+            </a>
+          </div>
+        </div>
+        <div className="mt-10 hidden items-center gap-8 lg:mt-0 lg:flex lg:grow lg:basis-0">
+          <div className="-my-px flex items-center gap-4 rounded-t-3xl border border-b-0 border-primary-500 bg-primary-50 px-8 py-4">
+            <Logo className="h-12 w-auto text-primary-500" />
             <div className="text-xl font-bold uppercase">Holdings</div>
           </div>
           <a
-            className="focus-visible:outline-primary-500 text-primary-800 rounded text-xl font-bold uppercase focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2"
+            className="rounded text-xl font-bold uppercase text-primary-800 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500"
             href="https://chowdhary.org"
           >
             Foundation
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
deleted file mode 100644
index 78f637b..0000000
--- a/src/app/not-found.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { BackgroundImage } from '@/app/foundation/components/BackgroundImage'
-import { Button } from '@/app/foundation/components/Button'
-import { Container } from '@/app/foundation/components/Container'
-import { Layout } from '@/app/foundation/components/Layout'
-
-export default function NotFound() {
-  return (
-    <Layout showFooter={false}>
-      <div className="relative flex h-full items-center py-20 sm:py-36">
-        <BackgroundImage className="text-primary-300 -top-36 bottom-0" />
-        <Container className="relative flex w-full flex-col items-center">
-          <p className="text-primary-900 font-display text-2xl tracking-tight">
-            404
-          </p>
-          <h1 className="text-primary-600 mt-4 font-display text-4xl font-bold tracking-tighter sm:text-5xl">
-            Page not found
-          </h1>
-          <p className="text-primary-900 mt-4 text-lg tracking-tight">
-            Sorry, we couldn’t find the page you’re looking for.
-          </p>
-          <Button href="/" className="mt-8">
-            Go back home
-          </Button>
-        </Container>
-      </div>
-    </Layout>
-  )
-}