Skip to content

Tighten hero spacing for above-the-fold clarity and remove lint warning #11

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
MarvyNwaokobia merged 1 commit into from
May 16, 2026
Merged

Tighten hero spacing for above-the-fold clarity and remove lint warning #11

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
10 changes: 5 additions & 5 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,14 @@ function ArrowRightIcon({ className }: { className?: string }) {

function Hero() {
return (
<section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden pt-16">
<section className="relative min-h-[calc(100vh-4rem)] flex flex-col items-center justify-start overflow-hidden pt-16 md:pt-20">
{/* Background layers */}
<div className="absolute inset-0 bg-grid" />
<div className="absolute inset-0 hero-glow" />
{/* Radial fade to keep edges dark */}
<div className="absolute inset-0 bg-radial-[ellipse_at_center] from-transparent via-transparent to-gray-950/80" />

<div className="relative z-10 mx-auto max-w-5xl px-6 py-24 text-center lg:py-32">
<div className="relative z-10 mx-auto max-w-5xl px-6 py-10 sm:py-12 lg:py-16 text-center">
{/* Badge */}
<div className="mb-8 inline-flex items-center gap-2 rounded-full border border-emerald-500/25 bg-emerald-500/5 px-4 py-1.5 text-sm text-emerald-300">
<span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-glow-pulse" />
Expand All @@ -126,14 +126,14 @@ function Hero() {
</h1>

{/* Sub-headline */}
<p className="mx-auto mt-8 max-w-2xl text-lg leading-8 text-gray-400 sm:text-xl">
<p className="mx-auto mt-6 max-w-2xl text-lg leading-8 text-gray-400 sm:mt-8 sm:text-xl">
Shield your assets with zero-knowledge proofs on the Stellar blockchain —
without sacrificing regulatory compliance. Your balance stays invisible.
Your auditability stays intact.
</p>

{/* CTAs */}
<div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<div className="mt-8 flex flex-col items-center gap-4 sm:mt-10 sm:flex-row sm:justify-center">
<a
href="/portfolio"
className="group flex items-center gap-2 rounded-xl bg-emerald-500 px-7 py-3.5 text-base font-semibold text-white shadow-xl shadow-emerald-500/25 hover:bg-emerald-400 transition-all hover:shadow-emerald-400/30 hover:-translate-y-0.5"
Expand All @@ -150,7 +150,7 @@ function Hero() {
</div>

{/* Trust chips */}
<div className="mt-14 flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
<div className="mt-10 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 sm:mt-14">
{[
'Groth16 · BN254',
'Poseidon Hash',
Expand Down
1 change: 0 additions & 1 deletion components/ProofProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
'use client';
import { useState } from 'react';

type ProofStep =
| 'idle'
Expand Down
Loading
Loading