jeffemmett
/
cosmolocal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-02-07 13:50:26 +00:00
parent a36244187a
commit 93fcbd45ef
2 changed files with 61 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/globals.css
View File

@ -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%);
}

56
src/app/page.tsx
View File

@ -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>