Skip to content

style: improve small font visibility across all pages and components,… #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LuminaEnvision merged 1 commit into from
Feb 8, 2026
Merged

style: improve small font visibility across all pages and components,… #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 82 additions & 20 deletions app/coordinate/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function CoordinatePage() {
<p className="text-xl md:text-2xl text-[#58B12F] mb-4 font-medium uppercase">
For those who build and coordinate impact
</p>
<p className="text-lg text-gray-400">
<p className="text-lg text-gray-200">
Open infrastructure for transparent, scalable environmental coordination.
</p>
</div>
Expand All @@ -63,34 +63,63 @@ export default function CoordinatePage() {
>
The Problem
</h2>
<p className="text-gray-400 mb-8 text-lg">
<p className="text-gray-200 mb-8 text-lg">
Impact coordinators struggle with:
</p>
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
{[
{ icon: "🧩", title: "Fragmented data" },
{ icon: "📝", title: "Manual reporting" },
{ icon: "🔒", title: "Trust bottlenecks" },
{
icon: "🏗️",
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
),
title: "Fragmented data"
},
{
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
),
title: "Manual reporting"
},
{
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
),
title: "Trust bottlenecks"
},
{
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
),
title: "No shared infrastructure",
subtitle: "for verification",
},
{
icon: "⚖️",
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
</svg>
),
title: "Hard-to-govern",
subtitle: "funding decisions",
},
].map((item, index) => (
<div
key={index}
className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 text-center hover:border-[#58B12F]/50 transition-colors"
className="bg-gray-900/50 border border-gray-800 rounded-xl p-6 text-center hover:border-[#58B12F]/50 transition-colors flex flex-col items-center"
>
<div className="text-4xl mb-4">{item.icon}</div>
<div className="mb-4">{item.icon}</div>
<h3 className="text-white font-medium">
{item.title}
{item.subtitle && (
<span className="block text-gray-500 text-sm mt-1">
<span className="block text-gray-300 text-sm mt-1">
{item.subtitle}
</span>
)}
Expand Down Expand Up @@ -137,17 +166,38 @@ export default function CoordinatePage() {
>
DMRV as Infrastructure
</h2>
<p className="text-gray-400 mb-6">
<p className="text-gray-200 mb-6">
We treat DMRV as a public good layer:
</p>
<div className="space-y-6">
{[
{ icon: "🔗", title: "Cleanup records are immutable" },
{ icon: "🌐", title: "Data structures are open and interoperable" },
{ icon: "🆓", title: "No dependency on proprietary standards" },
{
icon: (
<svg className="w-6 h-6 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
</svg>
),
title: "Cleanup records are immutable"
},
{
icon: (
<svg className="w-6 h-6 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path strokeLinecap="round" strokeLinejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
</svg>
),
title: "Data structures are open and interoperable"
},
{
icon: (
<svg className="w-6 h-6 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path strokeLinecap="round" strokeLinejoin="round" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
</svg>
),
title: "No dependency on proprietary standards"
},
].map((item, index) => (
<div key={index} className="flex items-start gap-4">
<span className="text-2xl mt-1">{item.icon}</span>
<div className="mt-1 shrink-0">{item.icon}</div>
<span className="text-lg text-gray-200">{item.title}</span>
</div>
))}
Expand Down Expand Up @@ -185,26 +235,38 @@ export default function CoordinatePage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{[
{
icon: "💰",
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
title: "$cDCU Token",
desc: "Used for proposals and voting",
},
{
icon: "🌱",
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
),
title: "Gardens.fund",
desc: "Coordination platform",
},
{
icon: "🗳️",
icon: (
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
),
title: "Community Decides",
desc: "Verification rules, funding priorities, new pools",
},
].map((item, index) => (
<div key={index} className="bg-gradient-to-br from-gray-900 to-black border border-gray-800 p-8 rounded-xl relative overflow-hidden group hover:border-[#58B12F]/50 transition-all">
<div className="absolute top-0 right-0 w-24 h-24 bg-[#58B12F]/5 rounded-full blur-2xl -mr-12 -mt-12 group-hover:bg-[#58B12F]/10 transition-colors" />
<div className="text-4xl mb-6">{item.icon}</div>
<div className="mb-6">{item.icon}</div>
<h3 className="text-xl font-bold text-white mb-2">{item.title}</h3>
<p className="text-gray-400">{item.desc}</p>
<p className="text-gray-200">{item.desc}</p>
</div>
))}
</div>
Expand Down
46 changes: 33 additions & 13 deletions app/docs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function DocsPage() {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-normal uppercase text-white mb-4">
Developer Documentation
</h1>
<p className="text-lg md:text-xl text-gray-400">
<p className="text-lg md:text-xl text-gray-200">
Technical guides and resources for the DeCleanup Network
</p>
</div>
Expand All @@ -44,9 +44,13 @@ export default function DocsPage() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
{/* Contracts */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-[#58B12F]/50 transition-colors group">
<div className="text-3xl mb-4 text-[#58B12F]">📜</div>
<div className="mb-4">
<svg className="w-10 h-10 text-[#58B12F]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#58B12F] transition-colors">Smart Contracts</h3>
<p className="text-gray-400 mb-4 text-sm">
<p className="text-gray-200 mb-4 text-sm">
Explore the core contracts powering DeCleanup, cleanups verification, and token logic.
</p>
<a href="https://github.com/DeCleanup-Network/contracts" target="_blank" rel="noopener noreferrer" className="text-[#58B12F] text-sm font-medium hover:underline">
Expand All @@ -56,21 +60,29 @@ export default function DocsPage() {

{/* Subgraph */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-[#FAFF00]/50 transition-colors group">
<div className="text-3xl mb-4 text-[#FAFF00]">🕸️</div>
<div className="mb-4">
<svg className="w-10 h-10 text-[#FAFF00]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.152A10.962 10.962 0 0112 21c-2.578 0-4.95-.903-6.855-2.43M6.551 16.5A10.964 10.964 0 013 11.25c0-1.879.468-3.649 1.289-5.21M17.449 16.5A10.964 10.964 0 0021 11.25c0-1.879-.468-3.649-1.289-5.21" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#FAFF00] transition-colors">Indexing & Subgraphs</h3>
<p className="text-gray-400 mb-4 text-sm">
<p className="text-gray-200 mb-4 text-sm">
Query DeCleanup data for integrations, analytics and governance apps.
</p>
<div className="flex gap-4">
<span className="text-gray-600 text-sm cursor-not-allowed">Coming soon</span>
<span className="text-gray-200 text-sm cursor-not-allowed">Coming soon</span>
</div>
</div>

{/* Frontend */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-cyan-400/50 transition-colors group">
<div className="text-3xl mb-4 text-cyan-400">🖥️</div>
<div className="mb-4">
<svg className="w-10 h-10 text-cyan-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-cyan-400 transition-colors">Frontend & Mini Apps</h3>
<p className="text-gray-400 mb-4 text-sm">
<p className="text-gray-200 mb-4 text-sm">
Contribute to the user interfaces, PWA, and Farcaster frames.
</p>
<a href="https://github.com/DeCleanup-Network" target="_blank" rel="noopener noreferrer" className="text-cyan-400 text-sm font-medium hover:underline">
Expand All @@ -80,9 +92,13 @@ export default function DocsPage() {

{/* Verification AI */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-purple-400/50 transition-colors group">
<div className="text-3xl mb-4 text-purple-400">🤖</div>
<div className="mb-4">
<svg className="w-10 h-10 text-purple-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-purple-400 transition-colors">AI Verification</h3>
<p className="text-gray-400 mb-4 text-sm">
<p className="text-gray-200 mb-4 text-sm">
Learn about the computer vision models used for verifying cleanup impact.
</p>
<a href="#" className="text-purple-400 text-sm font-medium hover:underline opacity-50 cursor-not-allowed">
Expand All @@ -92,9 +108,13 @@ export default function DocsPage() {

{/* Governance */}
<div className="bg-gray-900 border border-gray-800 p-6 rounded-xl hover:border-pink-400/50 transition-colors group">
<div className="text-3xl mb-4 text-pink-400">⚖️</div>
<div className="mb-4">
<svg className="w-10 h-10 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
</svg>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-pink-400 transition-colors">Governance</h3>
<p className="text-gray-400 mb-4 text-sm">
<p className="text-gray-200 mb-4 text-sm">
Technical details on how funding pools and voting mechanisms work.
</p>
<a href="https://gardens.fund" target="_blank" rel="noopener noreferrer" className="text-pink-400 text-sm font-medium hover:underline">
Expand All @@ -104,7 +124,7 @@ export default function DocsPage() {
</div>

<div className="mt-16 text-center">
<p className="text-gray-400">
<p className="text-gray-200">
Looking for the impact coordination guide? <Link href="/coordinate" className="text-[#58B12F] hover:underline">Click here</Link>.
</p>
</div>
Expand Down
Loading