← back to Norma
app/pulse/about/page.tsx
165 lines
'use client';
import React from 'react';
import Link from 'next/link';
import {
Users, Shield, Globe, Heart, ArrowRight,
CheckCircle2, MessageSquare, TrendingUp,
} from 'lucide-react';
const C = {
darkGreen: '#1B4332',
gold: '#DAA520',
cream: '#FAFAF5',
text: '#1a1a1a',
textLight: '#fafafa',
textMuted: '#6b7280',
};
export default function AboutPage() {
return (
<div>
{/* Hero */}
<section style={{ backgroundColor: C.darkGreen, color: C.textLight, padding: '64px 24px 56px', textAlign: 'center' }}>
<div style={{ maxWidth: 700, margin: '0 auto' }}>
<h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 'bold', margin: '0 0 16px', fontFamily: 'Georgia, serif' }}>
About <span style={{ color: C.gold }}>Pulse of America</span>
</h1>
<p style={{ fontSize: 18, lineHeight: '28px', opacity: 0.85, fontFamily: 'system-ui, sans-serif' }}>
We believe every voice matters. Our platform empowers citizens to create, share, and sign
petitions that drive meaningful change in communities across America.
</p>
</div>
</section>
{/* Mission */}
<section style={{ maxWidth: 900, margin: '0 auto', padding: '64px 24px' }}>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 32 }}>
{[
{
icon: <Users size={28} />,
title: 'Collective Power',
desc: 'When thousands of voices unite around a shared cause, leaders listen. Our platform makes it easy to rally support for the issues that matter most.',
},
{
icon: <Shield size={28} />,
title: 'Transparency & Trust',
desc: 'Every signature is verified. Every petition is public. We believe in open, transparent civic engagement that holds everyone accountable.',
},
{
icon: <Globe size={28} />,
title: 'Accessible to All',
desc: 'No barriers, no paywalls, no gatekeepers. Anyone can start a petition, and anyone can sign one. Democracy should be simple.',
},
].map(item => (
<div key={item.title} style={{
backgroundColor: '#fff', borderRadius: 16, padding: 28,
border: '1px solid #e5e7eb',
}}>
<div style={{
width: 56, height: 56, borderRadius: 14,
backgroundColor: `${C.gold}18`, color: C.gold,
display: 'flex', alignItems: 'center', justifyContent: 'center',
marginBottom: 16,
}}>
{item.icon}
</div>
<h3 style={{ fontSize: 20, fontWeight: 'bold', color: C.text, margin: '0 0 8px', fontFamily: 'Georgia, serif' }}>
{item.title}
</h3>
<p style={{ fontSize: 15, lineHeight: '24px', color: C.textMuted, margin: 0, fontFamily: 'system-ui, sans-serif' }}>
{item.desc}
</p>
</div>
))}
</div>
</section>
{/* How it works */}
<section style={{ backgroundColor: '#fff', borderTop: '1px solid #e5e7eb', borderBottom: '1px solid #e5e7eb' }}>
<div style={{ maxWidth: 900, margin: '0 auto', padding: '64px 24px' }}>
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: C.text, margin: '0 0 40px', textAlign: 'center', fontFamily: 'Georgia, serif' }}>
How It Works
</h2>
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
{[
{ step: '1', icon: <MessageSquare size={20} />, title: 'Create Your Petition', desc: 'Describe the change you want to see. Set your target, share your story, and set a signature goal.' },
{ step: '2', icon: <Heart size={20} />, title: 'Gather Signatures', desc: 'Share your petition with friends, family, and your community. Every signature adds momentum.' },
{ step: '3', icon: <TrendingUp size={20} />, title: 'Drive Change', desc: 'When your petition reaches critical mass, decision-makers take notice. Your collective voice becomes action.' },
].map(item => (
<div key={item.step} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
<div style={{
width: 48, height: 48, borderRadius: '50%', flexShrink: 0,
backgroundColor: C.darkGreen, color: C.gold,
display: 'flex', alignItems: 'center', justifyContent: 'center',
fontSize: 20, fontWeight: 'bold', fontFamily: 'Georgia, serif',
}}>
{item.step}
</div>
<div>
<h3 style={{ fontSize: 18, fontWeight: 'bold', color: C.text, margin: '0 0 4px', fontFamily: 'Georgia, serif', display: 'flex', alignItems: 'center', gap: 8 }}>
{item.icon}
{item.title}
</h3>
<p style={{ fontSize: 15, lineHeight: '24px', color: C.textMuted, margin: 0, fontFamily: 'system-ui, sans-serif' }}>
{item.desc}
</p>
</div>
</div>
))}
</div>
</div>
</section>
{/* Values */}
<section style={{ maxWidth: 700, margin: '0 auto', padding: '64px 24px' }}>
<h2 style={{ fontSize: 36, fontWeight: 'bold', color: C.text, margin: '0 0 24px', textAlign: 'center', fontFamily: 'Georgia, serif' }}>
Our Values
</h2>
<ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
{[
'Every citizen deserves a platform to be heard.',
'Transparency is the foundation of trust.',
'Collective action drives lasting change.',
'No petition is too small if it matters to you.',
'We stand for nonpartisan civic engagement.',
].map((val, i) => (
<li key={i} style={{ display: 'flex', gap: 12, marginBottom: 16, alignItems: 'flex-start' }}>
<CheckCircle2 size={20} style={{ color: C.gold, flexShrink: 0, marginTop: 2 }} />
<span style={{ fontSize: 16, lineHeight: '26px', color: C.text, fontFamily: 'system-ui, sans-serif' }}>
{val}
</span>
</li>
))}
</ul>
</section>
{/* CTA */}
<section style={{ backgroundColor: C.darkGreen, padding: '64px 24px', textAlign: 'center' }}>
<div style={{ maxWidth: 600, margin: '0 auto' }}>
<h2 style={{ fontSize: 32, fontWeight: 'bold', color: C.textLight, margin: '0 0 16px', fontFamily: 'Georgia, serif' }}>
Ready to Take <span style={{ color: C.gold }}>Action</span>?
</h2>
<p style={{ fontSize: 16, color: 'rgba(255,255,255,0.8)', margin: '0 0 28px', fontFamily: 'system-ui, sans-serif' }}>
Browse active petitions or start your own today.
</p>
<div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
<Link
href="/pulse/petitions"
style={{
display: 'inline-flex', alignItems: 'center', gap: 8,
backgroundColor: C.gold, color: C.darkGreen, textDecoration: 'none',
fontSize: 16, fontWeight: 700, fontFamily: 'system-ui, sans-serif',
padding: '14px 28px', borderRadius: 9999,
}}
>
Browse Petitions
<ArrowRight size={18} />
</Link>
</div>
</div>
</section>
</div>
);
}