Skip to content

feat: improve dark mode contrast across landing sections #623

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
ezedike-evan merged 2 commits into from
Jul 3, 2026
Merged

feat: improve dark mode contrast across landing sections #623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8f9959
feat: improve dark mode contrast across landing sections
rahimatonize Jun 28, 2026
e3b4937
merge main
Jul 3, 2026
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
17 changes: 10 additions & 7 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,15 @@ export default function HomePage() {
aria-label="Off-ramp — route a USDC off-ramp to the cheapest anchor, by country and corridor"
className="block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-950"
>
<Card className="group h-full min-h-[44px] cursor-pointer transition-shadow hover:shadow-md">
<div className="mb-4 inline-flex rounded-lg p-2.5 bg-green-50 dark:bg-green-950/30">
<ArrowDownRight className="h-5 w-5 text-green-600" aria-hidden="true" />
<Card className="group h-full min-h-[44px] cursor-pointer transition-shadow hover:shadow-md dark:hover:shadow-gray-900/50">
<div className="mb-4 inline-flex rounded-lg p-2.5 bg-green-50 dark:bg-green-900/40">
<ArrowDownRight
className="h-5 w-5 text-green-600 dark:text-green-400"
aria-hidden="true"
/>
</div>
<h3 className="mb-2 font-semibold text-gray-900 dark:text-white">Off-ramp</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
<p className="text-sm text-gray-600 dark:text-gray-300">
Route a USDC off-ramp to the cheapest anchor, by country and corridor.
</p>
</Card>
Expand All @@ -55,7 +58,7 @@ export default function HomePage() {
</section>

{/* Explainer */}
<section className="rounded-xl border border-gray-200 p-4 dark:border-gray-700 sm:p-6">
<section className="rounded-xl border border-gray-200 p-4 dark:border-gray-700 dark:bg-gray-800/50 sm:p-6">
<h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">How it works</h2>
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
{[
Expand All @@ -76,12 +79,12 @@ export default function HomePage() {
},
].map(({ step, title, body }) => (
<div key={step} className="flex gap-4">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white">
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-600 text-xs font-bold text-white dark:bg-blue-500">
{step}
</div>
<div>
<div className="font-medium text-gray-900 dark:text-white">{title}</div>
<div className="mt-1 text-sm text-gray-600 dark:text-gray-400">{body}</div>
<div className="mt-1 text-sm text-gray-600 dark:text-gray-300">{body}</div>
</div>
</div>
))}
Expand Down
6 changes: 3 additions & 3 deletions components/landing/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Zap } from 'lucide-react';
export function Hero() {
return (
<section className="py-8 text-center sm:py-12" aria-labelledby="hero-heading">
<div className="mb-4 inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 dark:bg-blue-950 dark:text-blue-300">
<div className="mb-4 inline-flex items-center gap-2 rounded-full bg-blue-50 px-4 py-1.5 text-sm font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
<Zap className="h-3.5 w-3.5" aria-hidden="true" />
Stellar Execution Layer
</div>
Expand All @@ -14,9 +14,9 @@ export function Hero() {
>
The execution layer for
<br className="hidden sm:block" />
<span className="text-blue-600">stablecoin off-ramps.</span>
<span className="text-blue-600 dark:text-blue-400">stablecoin off-ramps.</span>
</h1>
<p className="mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-400">
<p className="mx-auto max-w-2xl text-lg text-gray-600 dark:text-gray-300">
Compare live SEP-38 quotes across every Stellar anchor, then settle a non-custodial USDC
off-ramp to Nigeria, Kenya, Ghana, Mexico, and more — in a single signed intent.
</p>
Expand Down
6 changes: 3 additions & 3 deletions components/landing/StatBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,16 +79,16 @@ export function StatBar({ stats }: { stats: Stat[] }) {
return (
<section
aria-label="Key statistics"
className="grid grid-cols-1 gap-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/50 sm:grid-cols-3"
className="grid grid-cols-1 gap-4 rounded-xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800 sm:grid-cols-3"
>
{stats.map(({ icon: Icon, value, label }) => (
<div key={label} className="flex items-center gap-3">
<Icon className="h-5 w-5 shrink-0 text-blue-600" aria-hidden="true" />
<Icon className="h-5 w-5 shrink-0 text-blue-600 dark:text-blue-400" aria-hidden="true" />
<div>
<div className="text-xl font-bold text-gray-900 dark:text-white">
<AnimatedStatValue value={value} />
</div>
<div className="text-xs text-gray-600 dark:text-gray-400">{label}</div>
<div className="text-xs text-gray-600 dark:text-gray-300">{label}</div>
</div>
</div>
))}
Expand Down
Loading