Landing page philosophy across ALL dashboard pages
Home: - Empty state: 2-column with 'How it works' 5-step guide - Has data: 7/5 grid — pledges left, education right - Right column: status breakdown, sources, 'What to do next' contextual links, 'What the statuses mean' guide Money: - 8/4 two-column layout: table left, education right - Right column: 'How matching works' 4-step guide, status explainer, collection tips, quick action buttons - No more wasted right margin Reports: - 7/5 two-column layout: downloads left, education right - Right column: 'For your treasurer' 3-step guide, Gift Aid FAQ, 'Understanding your numbers' explainer - Activity log moved to right column Settings: - Removed max-w-2xl constraint, now uses full width - 7/5 two-column: checklist left, education right - Right column: 'What you're setting up' (5 items with Required badges), Privacy & data assurance, Common questions FAQ, 'Need help?' CTA - Every setting explained in human language
This commit is contained in:
@@ -186,7 +186,7 @@ export default function SettingsPage() {
|
||||
: `${totalCount - doneCount} thing${totalCount - doneCount > 1 ? "s" : ""} left before you go live.`
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-2xl">
|
||||
<div className="space-y-6">
|
||||
|
||||
{/* ── Header — human progress, not a form page ── */}
|
||||
<div className={`p-6 mb-6 ${doneCount === totalCount ? "bg-[#16A34A]" : "bg-[#111827]"}`}>
|
||||
@@ -210,7 +210,11 @@ export default function SettingsPage() {
|
||||
|
||||
{error && <div className="border-l-2 border-[#DC2626] bg-[#DC2626]/5 p-3 text-sm text-[#DC2626]">{error}</div>}
|
||||
|
||||
{/* ── The Checklist ── */}
|
||||
{/* ━━ TWO-COLUMN: Checklist left, Education right ━━━━━━ */}
|
||||
<div className="grid lg:grid-cols-12 gap-6">
|
||||
|
||||
{/* LEFT: The Checklist */}
|
||||
<div className="lg:col-span-7">
|
||||
<div className="border border-gray-200 divide-y divide-gray-100 bg-white">
|
||||
|
||||
{/* ▸ WhatsApp ─────────────────────────── */}
|
||||
@@ -501,6 +505,85 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</SettingRow>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT: Education + Context */}
|
||||
<div className="lg:col-span-5 space-y-6">
|
||||
|
||||
{/* What each setting does */}
|
||||
<div className="border border-gray-200 bg-white">
|
||||
<div className="border-b border-gray-100 px-5 py-3">
|
||||
<h3 className="text-sm font-bold text-[#111827]">What you're setting up</h3>
|
||||
</div>
|
||||
<div className="divide-y divide-gray-50">
|
||||
{[
|
||||
{ n: "01", title: "WhatsApp", desc: "Scan a QR code to connect your phone. Donors get receipts and reminders automatically. They can reply PAID, HELP, or CANCEL.", essential: true },
|
||||
{ n: "02", title: "Bank account", desc: "Your sort code and account number. Shown to donors after they pledge so they know where to send money.", essential: true },
|
||||
{ n: "03", title: "Your charity", desc: "Name and brand colour shown on pledge pages. Donors see this when they tap your link.", essential: true },
|
||||
{ n: "04", title: "Card payments", desc: "Connect Stripe to let donors pay by Visa, Mastercard, or Apple Pay. Money goes straight to your account.", essential: false },
|
||||
{ n: "05", title: "Team", desc: "Invite community leaders and volunteers. They get their own pledge links and can see their own results.", essential: false },
|
||||
].map(s => (
|
||||
<div key={s.n} className="px-5 py-3 flex gap-3">
|
||||
<span className={`text-lg font-black shrink-0 w-6 ${s.essential ? "text-[#1E40AF]" : "text-gray-200"}`}>{s.n}</span>
|
||||
<div>
|
||||
<p className="text-xs font-bold text-[#111827] flex items-center gap-1.5">
|
||||
{s.title}
|
||||
{s.essential && <span className="text-[8px] font-bold bg-[#1E40AF]/10 text-[#1E40AF] px-1 py-0.5">Required</span>}
|
||||
</p>
|
||||
<p className="text-[11px] text-gray-500 leading-relaxed mt-0.5">{s.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy & data */}
|
||||
<div className="border-l-2 border-[#1E40AF] pl-4 space-y-2">
|
||||
<p className="text-xs font-bold text-[#111827]">Privacy & data</p>
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-[10px] text-gray-500">
|
||||
<strong className="text-[#111827]">Your data stays yours.</strong> We never access your Stripe account, bank details, or WhatsApp messages. Everything is stored encrypted.
|
||||
</p>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
<strong className="text-[#111827]">GDPR compliant.</strong> Donor consent is recorded at pledge time. You can export or delete all data anytime.
|
||||
</p>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
<strong className="text-[#111827]">No vendor lock-in.</strong> Download your full data as CSV from Reports. Your donors, your data, always.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Common questions */}
|
||||
<div className="border-l-2 border-[#F59E0B] pl-4 space-y-2">
|
||||
<p className="text-xs font-bold text-[#111827]">Common questions</p>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ q: "Do I need Stripe?", a: "No — most charities use bank transfer only. Stripe is optional for orgs that want card payments." },
|
||||
{ q: "Can I change my bank details later?", a: "Yes. New pledges will show the updated details. Existing pledges keep the original reference." },
|
||||
{ q: "What happens if WhatsApp disconnects?", a: "Reminders pause until you reconnect. Come back here, scan the QR again. It takes 30 seconds." },
|
||||
{ q: "Can volunteers see financial data?", a: "No. Volunteers only see their own link performance. Admins see everything." },
|
||||
].map(item => (
|
||||
<div key={item.q}>
|
||||
<p className="text-[11px] font-bold text-[#111827]">{item.q}</p>
|
||||
<p className="text-[10px] text-gray-500">{item.a}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Need help? */}
|
||||
<div className="bg-[#111827] p-5">
|
||||
<p className="text-xs font-bold text-white">Need help setting up?</p>
|
||||
<p className="text-[11px] text-gray-400 mt-1 leading-relaxed">
|
||||
Our team can walk you through the setup in 15 minutes. Free, no strings attached.
|
||||
</p>
|
||||
<a href="mailto:omair@quikcue.com" className="inline-block mt-3 border border-gray-600 px-3 py-1.5 text-[11px] font-bold text-gray-300 hover:text-white hover:border-white transition-colors">
|
||||
Get in touch →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user