From 93fcbd45ef24705aa55ca2d532f5cb1a17545825 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sat, 7 Feb 2026 13:50:26 +0000
Subject: [PATCH] Restyle hero with gradient background, remove old tagline

Replace plain hero with rich forest-green gradient, radial glow
effects, and subtle grid pattern. Remove "Bridging cosmic
perspective with local action" tagline. Hero heading is now
just "Cosmolocal Foundation" with white-on-dark treatment.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/globals.css | 32 ++++++++++++++++++++++++++
 src/app/page.tsx    | 56 +++++++++++++++++++++++----------------------
 2 files changed, 61 insertions(+), 27 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 1744fdd..5609b57 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -35,3 +35,35 @@ body {
   background: var(--background);
   color: var(--foreground);
 }
+
+/* Hero section */
+.hero-section {
+  background: linear-gradient(
+    145deg,
+    #1a2e1a 0%,
+    #2d4a2d 25%,
+    #1c3a2a 50%,
+    #1a2835 75%,
+    #0f1f2e 100%
+  );
+}
+
+.hero-glow {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(107, 159, 91, 0.2) 0%, transparent 70%),
+    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(79, 121, 66, 0.12) 0%, transparent 60%),
+    radial-gradient(ellipse 40% 40% at 80% 60%, rgba(30, 80, 100, 0.1) 0%, transparent 60%);
+}
+
+.hero-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6655472..06e0731 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -34,33 +34,35 @@ export default function Home() {
       </header>
 
       {/* Hero */}
-      <section className="flex flex-1 flex-col items-center justify-center px-6 py-24 text-center">
-        <blockquote className="text-lg italic text-muted sm:text-xl">
-          &ldquo;What is heavy should be local, and what is light should be global and shared.&rdquo;
-        </blockquote>
-        <h1 className="mt-8 max-w-3xl text-4xl font-bold leading-tight tracking-tight sm:text-5xl">
-          Bridging cosmic perspective
-          <br />
-          with local action
-        </h1>
-        <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted">
-          The Cosmolocal Foundation envisions a world where local communities
-          thrive within regenerative economies, connected through global
-          knowledge-sharing and commons-based collaboration.
-        </p>
-        <div className="mt-10 flex gap-4">
-          <a
-            href="#vision"
-            className="rounded-full bg-accent px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-accent-light"
-          >
-            Learn More
-          </a>
-          <a
-            href="https://docs.cosmolocal.world"
-            className="rounded-full border border-border px-6 py-2.5 text-sm font-medium transition-colors hover:bg-foreground/5"
-          >
-            Documentation
-          </a>
+      <section className="hero-section relative flex flex-1 flex-col items-center justify-center overflow-hidden px-6 py-28 text-center sm:py-36">
+        <div className="hero-glow" aria-hidden="true" />
+        <div className="hero-grid" aria-hidden="true" />
+        <div className="relative z-10">
+          <blockquote className="text-lg italic text-white/70 sm:text-xl">
+            &ldquo;What is heavy should be local, and what is light should be global and shared.&rdquo;
+          </blockquote>
+          <h1 className="mt-8 max-w-3xl text-4xl font-bold leading-tight tracking-tight text-white sm:text-5xl">
+            Cosmolocal Foundation
+          </h1>
+          <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-white/75">
+            Empowering communities to build localized, regenerative economies
+            connected through global knowledge-sharing and commons-based
+            collaboration.
+          </p>
+          <div className="mt-10 flex justify-center gap-4">
+            <a
+              href="#vision"
+              className="rounded-full bg-white px-6 py-2.5 text-sm font-medium text-stone-900 transition-colors hover:bg-white/90"
+            >
+              Learn More
+            </a>
+            <a
+              href="https://docs.cosmolocal.world"
+              className="rounded-full border border-white/25 px-6 py-2.5 text-sm font-medium text-white transition-colors hover:bg-white/10"
+            >
+              Documentation
+            </a>
+          </div>
         </div>
       </section>