Boost contrast across entire homepage — text, cards, borders all more… #3963
1 changed file+52−46
Modifiedapp/page.jsx+52−46View fileUnifiedSplit
@@ -63,13 +63,13 @@ export default function LandingPage() {
6363 const r1 = useReveal(), r2 = useReveal(), r3 = useReveal(), r4 = useReveal(), r5 = useReveal()
6464
6565 return (
66 <main className="min-h-screen bg-navy-950 overflow-x-hidden">
66 <main className="min-h-screen bg-navy-950">
6767
6868 <Nav />
6969
7070 {/* ── HERO ──────────────────────────────────── */}
71 <section className="pt-44 pb-32 px-6 md:px-8 relative overflow-hidden">
72 <div className="absolute inset-0 bg-[radial-gradient(ellipse_50%_40%_at_50%_-5%,rgba(218,167,59,0.12),transparent_70%)]" />
71 <section className="pt-48 pb-32 px-6 md:px-8 relative">
72 <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_50%_at_50%_0%,rgba(218,167,59,0.15),transparent_70%)]" />
7373
7474 <div className="max-w-3xl mx-auto text-center relative z-10">
7575 <h1 className="text-4xl md:text-5xl lg:text-[3.5rem] font-bold tracking-tight text-white mb-6 animate-fade-up leading-[1.15]">
@@ -78,46 +78,46 @@ export default function LandingPage() {
7878 <span className="text-gold-400">beyond reproach.</span>
7979 </h1>
8080
81 <p className="text-[17px] text-white/60 max-w-lg mx-auto leading-relaxed mb-12 animate-fade-up" style={{ animationDelay: '0.15s' }}>
81 <p className="text-lg text-white/70 max-w-lg mx-auto leading-relaxed mb-12 animate-fade-up" style={{ animationDelay: '0.15s' }}>
8282 AI-powered grammar correction and voice-to-text for lawyers, accountants, and executives who cannot afford errors.
8383 </p>
8484
8585 <div className="flex flex-col sm:flex-row gap-3 justify-center mb-20 animate-fade-up" style={{ animationDelay: '0.25s' }}>
86 <a href="/download" className="px-8 py-3.5 rounded-xl bg-gold-400 hover:bg-gold-300 text-navy-950 text-[15px] font-semibold transition-all shadow-lg shadow-gold-400/20">
86 <a href="/download" className="px-8 py-3.5 rounded-xl bg-gold-400 hover:bg-gold-300 text-navy-950 text-[15px] font-semibold transition-all shadow-lg shadow-gold-400/25">
8787 Start Free Trial
8888 </a>
89 <a href="/security" className="px-8 py-3.5 rounded-xl border border-white/15 text-white/60 text-[15px] font-medium hover:border-white/25 hover:text-white/80 transition-all">
89 <a href="/security" className="px-8 py-3.5 rounded-xl border-2 border-white/30 text-white/70 text-[15px] font-medium hover:border-white/50 hover:text-white transition-all">
9090 View Security
9191 </a>
9292 </div>
9393
9494 {/* Demo Card */}
9595 <div className="max-w-xl mx-auto animate-fade-up" style={{ animationDelay: '0.35s' }}>
96 <div className="rounded-2xl overflow-hidden bg-white/[0.04] border border-white/[0.10]">
97 <div className="flex items-center justify-between px-5 py-3 border-b border-white/[0.08]">
98 <span className="text-[11px] text-white/40 font-mono">{typing.label}</span>
96 <div className="rounded-2xl overflow-hidden bg-navy-800 border border-white/20 shadow-2xl shadow-black/40">
97 <div className="flex items-center justify-between px-5 py-3 border-b border-white/15">
98 <span className="text-[11px] text-white/50 font-mono">{typing.label}</span>
9999 <span className={`w-2 h-2 rounded-full ${typing.isTyping ? 'bg-gold-400' : 'bg-white/30'}`} />
100100 </div>
101 <div className="px-5 py-3 border-b border-white/[0.06]">
102 <p className="text-[13px] text-white/35 leading-relaxed line-through decoration-white/15">{typing.before}</p>
101 <div className="px-5 py-3 border-b border-white/10">
102 <p className="text-[13px] text-white/40 leading-relaxed line-through decoration-white/20">{typing.before}</p>
103103 </div>
104104 <div className="px-5 py-4">
105 <p className={`text-[14px] text-white/80 leading-relaxed whitespace-pre-wrap min-h-[44px]`}>
105 <p className="text-[14px] text-white/90 leading-relaxed whitespace-pre-wrap min-h-[44px]">
106106 {typing.after || <span className="text-white/20">|</span>}
107107 </p>
108108 </div>
109109 </div>
110110 </div>
111111
112 <p className="text-[11px] text-white/30 mt-10 tracking-wide">
112 <p className="text-[12px] text-white/40 mt-10 tracking-wide">
113113 Mac · Windows · Chrome · Free to start
114114 </p>
115115 </div>
116116 </section>
117117
118118 {/* ── TRUST BAR ─────────────────────────────── */}
119 <section className="py-5 px-6 md:px-8 border-y border-white/[0.08]">
120 <div className="max-w-4xl mx-auto flex flex-wrap items-center justify-center gap-10 text-[11px] text-white/40 tracking-wide">
119 <section className="py-5 px-6 md:px-8 border-y border-white/15">
120 <div className="max-w-4xl mx-auto flex flex-wrap items-center justify-center gap-10 text-[12px] text-white/50 tracking-wide font-medium">
121121 <span>256-bit encryption</span>
122122 <span>GDPR compliant</span>
123123 <span>SOC 2 in progress</span>
@@ -128,12 +128,12 @@ export default function LandingPage() {
128128 {/* ── WHO IT'S FOR ──────────────────────────── */}
129129 <section ref={r1} className="reveal py-28 px-6 md:px-8">
130130 <div className="max-w-4xl mx-auto">
131 <p className="text-[11px] text-gold-400/80 uppercase tracking-[0.2em] text-center mb-4">Built for precision</p>
131 <p className="text-[12px] text-gold-400 uppercase tracking-[0.2em] text-center mb-4 font-semibold">Built for precision</p>
132132 <h2 className="text-2xl md:text-3xl font-bold text-white text-center mb-16">
133133 Professionals who write for a living
134134 </h2>
135135
136 <div className="grid md:grid-cols-3 gap-4">
136 <div className="grid md:grid-cols-3 gap-5">
137137 {[
138138 {
139139 title: 'Legal',
@@ -148,9 +148,9 @@ export default function LandingPage() {
148148 desc: 'Board reports, investor updates, client proposals. Your writing matches your authority.',
149149 },
150150 ].map((p) => (
151 <div key={p.title} className="rounded-xl border border-white/[0.10] bg-white/[0.04] p-8">
152 <h3 className="text-[15px] font-semibold text-white mb-3">{p.title}</h3>
153 <p className="text-[13px] text-white/50 leading-relaxed">{p.desc}</p>
151 <div key={p.title} className="rounded-xl border border-white/20 bg-navy-800 p-8">
152 <h3 className="text-base font-semibold text-white mb-3">{p.title}</h3>
153 <p className="text-sm text-white/60 leading-relaxed">{p.desc}</p>
154154 </div>
155155 ))}
156156 </div>
@@ -158,14 +158,14 @@ export default function LandingPage() {
158158 </section>
159159
160160 {/* ── CAPABILITIES ─────────────────────────── */}
161 <section ref={r2} className="reveal py-28 px-6 md:px-8 border-t border-white/[0.08]">
161 <section ref={r2} className="reveal py-28 px-6 md:px-8 border-t border-white/15">
162162 <div className="max-w-4xl mx-auto">
163 <p className="text-[11px] text-gold-400/80 uppercase tracking-[0.2em] text-center mb-4">Capabilities</p>
163 <p className="text-[12px] text-gold-400 uppercase tracking-[0.2em] text-center mb-4 font-semibold">Capabilities</p>
164164 <h2 className="text-2xl md:text-3xl font-bold text-white text-center mb-16">
165165 Comprehensive writing intelligence
166166 </h2>
167167
168 <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
168 <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
169169 {[
170170 { title: 'AI Grammar Correction', desc: 'Powered by Claude AI. Catches grammar, spelling, punctuation, and word choice errors that rule-based tools miss.' },
171171 { title: 'Voice-to-Text Dictation', desc: 'Dictate at natural speaking speed. 99%+ accuracy in 50+ languages. Cloud or fully offline.' },
@@ -174,9 +174,9 @@ export default function LandingPage() {
174174 { title: 'Confidential Offline Mode', desc: 'Full on-device processing. No data leaves your machine. Audit trail for compliance.' },
175175 { title: 'Every Platform', desc: 'Desktop app and Chrome extension. Mobile keyboards coming soon. Types directly into any application.' },
176176 ].map((f) => (
177 <div key={f.title} className="rounded-xl border border-white/[0.10] bg-white/[0.04] p-6">
178 <h3 className="text-[14px] font-semibold text-white mb-2">{f.title}</h3>
179 <p className="text-[13px] text-white/50 leading-relaxed">{f.desc}</p>
177 <div key={f.title} className="rounded-xl border border-white/20 bg-navy-800 p-6">
178 <h3 className="text-sm font-semibold text-white mb-2">{f.title}</h3>
179 <p className="text-sm text-white/60 leading-relaxed">{f.desc}</p>
180180 </div>
181181 ))}
182182 </div>
@@ -184,14 +184,14 @@ export default function LandingPage() {
184184 </section>
185185
186186 {/* ── BEFORE/AFTER ──────────────────────────── */}
187 <section ref={r3} className="reveal py-28 px-6 md:px-8 border-t border-white/[0.08]">
187 <section ref={r3} className="reveal py-28 px-6 md:px-8 border-t border-white/15">
188188 <div className="max-w-3xl mx-auto">
189 <p className="text-[11px] text-gold-400/80 uppercase tracking-[0.2em] text-center mb-4">Precision</p>
189 <p className="text-[12px] text-gold-400 uppercase tracking-[0.2em] text-center mb-4 font-semibold">Precision</p>
190190 <h2 className="text-2xl md:text-3xl font-bold text-white text-center mb-16">
191191 Every detail caught
192192 </h2>
193193
194 <div className="space-y-4">
194 <div className="space-y-5">
195195 {[
196196 {
197197 before: 'The parties here by agree to ammend the indemnification clause to include consequencial damages as outlined in the addendum',
@@ -209,16 +209,18 @@ export default function LandingPage() {
209209 context: 'Client Letter',
210210 },
211211 ].map((ex, i) => (
212 <div key={i} className="rounded-xl border border-white/[0.10] overflow-hidden">
213 <div className="px-5 py-2 border-b border-white/[0.08]">
214 <span className="text-[10px] text-white/35 font-medium uppercase tracking-wider">{ex.context}</span>
212 <div key={i} className="rounded-xl border border-white/20 overflow-hidden bg-navy-800 shadow-lg shadow-black/30">
213 <div className="px-5 py-2.5 border-b border-white/15 bg-navy-700/30">
214 <span className="text-[11px] text-white/50 font-semibold uppercase tracking-wider">{ex.context}</span>
215215 </div>
216216 <div className="grid md:grid-cols-2">
217 <div className="p-5 border-b md:border-b-0 md:border-r border-white/[0.08]">
218 <p className="text-[13px] text-white/40 leading-relaxed">{ex.before}</p>
217 <div className="p-5 border-b md:border-b-0 md:border-r border-white/15">
218 <p className="text-[11px] text-red-400/80 uppercase tracking-wider mb-2 font-semibold">Before</p>
219 <p className="text-sm text-white/50 leading-relaxed">{ex.before}</p>
219220 </div>
220221 <div className="p-5">
221 <p className="text-[13px] text-white/80 leading-relaxed">{ex.after}</p>
222 <p className="text-[11px] text-gold-400 uppercase tracking-wider mb-2 font-semibold">After</p>
223 <p className="text-sm text-white/90 leading-relaxed">{ex.after}</p>
222224 </div>
223225 </div>
224226 </div>
@@ -228,41 +230,45 @@ export default function LandingPage() {
228230 </section>
229231
230232 {/* ── PRICING ───────────────────────────────── */}
231 <section ref={r4} className="reveal py-28 px-6 md:px-8 border-t border-white/[0.08]">
233 <section ref={r4} className="reveal py-28 px-6 md:px-8 border-t border-white/15">
232234 <div className="max-w-3xl mx-auto text-center">
233 <p className="text-[11px] text-gold-400/80 uppercase tracking-[0.2em] mb-4">Pricing</p>
235 <p className="text-[12px] text-gold-400 uppercase tracking-[0.2em] mb-4 font-semibold">Pricing</p>
234236 <h2 className="text-2xl md:text-3xl font-bold text-white mb-16">Straightforward</h2>
235237
236 <div className="grid md:grid-cols-3 gap-4">
238 <div className="grid md:grid-cols-3 gap-5">
237239 {[
238240 { name: 'Free', price: '$0', desc: 'Basic grammar. 60 min voice/month.' },
239241 { name: 'Professional', price: '$12', period: '/mo', desc: 'Unlimited corrections, voice, offline mode.', highlight: true },
240242 { name: 'Firm', price: '$29', period: '/mo', desc: 'Up to 10 practitioners. $2.90 per seat.' },
241243 ].map((p) => (
242 <div key={p.name} className="rounded-xl border border-white/[0.10] bg-white/[0.04] p-8 text-center">
243 <p className="text-[12px] text-white/50 font-medium mb-3">{p.name}</p>
244 <p className="text-3xl font-bold text-white mb-1">{p.price}<span className="text-[14px] text-white/40 font-normal">{p.period || ''}</span></p>
245 <p className="text-[12px] text-white/45 mt-3">{p.desc}</p>
244 <div key={p.name} className={`rounded-xl border p-8 text-center ${
245 p.highlight
246 ? 'border-gold-400/50 bg-gold-400/10 shadow-xl shadow-gold-400/10 ring-1 ring-gold-400/30'
247 : 'border-white/20 bg-navy-800'
248 }`}>
249 <p className="text-sm text-white/60 font-medium mb-3">{p.name}</p>
250 <p className="text-3xl font-bold text-white mb-1">{p.price}<span className="text-sm text-white/50 font-normal">{p.period || ''}</span></p>
251 <p className="text-sm text-white/50 mt-3">{p.desc}</p>
246252 </div>
247253 ))}
248254 </div>
249255
250 <a href="/pricing" className="inline-block mt-8 text-[13px] text-white/45 hover:text-white/70 transition-colors">
256 <a href="/pricing" className="inline-block mt-8 text-sm text-white/60 hover:text-white/80 transition-colors">
251257 View full pricing →
252258 </a>
253259 </div>
254260 </section>
255261
256262 {/* ── CTA ───────────────────────────────────── */}
257 <section ref={r5} className="reveal py-28 px-6 md:px-8 border-t border-white/[0.08]">
263 <section ref={r5} className="reveal py-28 px-6 md:px-8 border-t border-white/15">
258264 <div className="max-w-2xl mx-auto text-center">
259265 <h2 className="text-2xl md:text-3xl font-bold text-white mb-5">
260266 Your reputation depends on<br />every word you write.
261267 </h2>
262 <p className="text-white/50 text-[15px] mb-10 max-w-md mx-auto leading-relaxed">
268 <p className="text-white/60 text-base mb-10 max-w-md mx-auto leading-relaxed">
263269 Start your free trial today. No credit card required.
264270 </p>
265 <a href="/download" className="inline-block px-10 py-3.5 rounded-xl bg-gold-400 hover:bg-gold-300 text-navy-950 text-[15px] font-semibold transition-all shadow-lg shadow-gold-400/20">
271 <a href="/download" className="inline-block px-10 py-3.5 rounded-xl bg-gold-400 hover:bg-gold-300 text-navy-950 text-[15px] font-semibold transition-all shadow-lg shadow-gold-400/25">
266272 Get Started
267273 </a>
268274 </div>
269275
c comment · e edit title · m merge · a approve · r request changes · ? shortcuts