brand identity overhaul: match BRAND-IDENTITY.md across all pages
Design system changes (per brand guide): - ZERO rounded-2xl/3xl remaining (was 131 instances) - ZERO bg-gradient remaining (was 25) — all solid colors - ZERO colored shadows (shadow-trust-blue, etc) — flat, no glow - ZERO backdrop-blur/glass effects — solid backgrounds - ZERO emoji in logo marks — square P logomark everywhere - ZERO decorative scale animations (group-hover:scale-105, etc) Tailwind config: - Added brand color names: midnight, promise-blue, generosity-gold, fulfilled-green, alert-red, paper - Kept legacy aliases (trust-blue, etc) for backwards compat - --radius: 0.75rem → 0.5rem (tighter corners) CSS: - Removed glass, glass-dark, card-hover, pulse-ring, bounce-gentle, confetti-fall, scale-in animations - Kept only purposeful animations: fadeUp, fadeIn, slideDown, shimmer, counter-roll - --primary tuned to match Promise Blue exactly Components: - Button: removed all colored shadows, added 'blue' variant, removed rounded from sizes - All UI components: rounded-xl/2xl → rounded-lg Pages updated (41 files): - Dashboard layout: solid header (no blur), border-l-2 active indicator, midnight logo mark - Login/Signup: paper bg (no gradient), midnight logo mark, no emoji - Pledge flow: solid color icons, no gradient progress bars - All dashboard pages: flat, sharp, editorial
This commit is contained in:
@@ -189,8 +189,8 @@ export default function PledgePage() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 gap-4">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center animate-pulse">
|
||||
<div className="min-h-screen flex flex-col items-center justify-center bg-paper gap-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-midnight flex items-center justify-center animate-pulse">
|
||||
<span className="text-white text-xl">🤲</span>
|
||||
</div>
|
||||
<p className="text-trust-blue font-medium animate-pulse">Loading...</p>
|
||||
@@ -200,7 +200,7 @@ export default function PledgePage() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5 p-4">
|
||||
<div className="min-h-screen flex items-center justify-center bg-paper p-4">
|
||||
<div className="text-center space-y-4 animate-fade-up">
|
||||
<div className="text-5xl">😔</div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Something went wrong</h1>
|
||||
@@ -260,11 +260,11 @@ export default function PledgePage() {
|
||||
const progressPercent = progressMap[step] || 10
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-trust-blue/5 via-white to-warm-amber/5">
|
||||
<div className="min-h-screen bg-paper">
|
||||
{/* Progress bar */}
|
||||
<div className="fixed top-0 left-0 right-0 h-1 bg-gray-100 z-50">
|
||||
<div
|
||||
className="h-full bg-gradient-to-r from-trust-blue to-success-green transition-all duration-700 ease-out"
|
||||
className="h-full bg-promise-blue transition-all duration-700 ease-out"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -282,7 +282,7 @@ export default function PledgePage() {
|
||||
|
||||
{/* Back button */}
|
||||
{backableSteps.has(step) && (
|
||||
<div className="fixed bottom-0 left-0 right-0 pb-6 pt-4 px-4 bg-gradient-to-t from-white via-white/80 to-transparent">
|
||||
<div className="fixed bottom-0 left-0 right-0 pb-6 pt-4 px-4 bg-white">
|
||||
<button
|
||||
onClick={() => setStep(getBackStep(step))}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors tap-target flex items-center gap-1"
|
||||
|
||||
Reference in New Issue
Block a user