Skip to content

Commit 16be8ff

Browse files
Shoaib AnsariShoaib Ansari
Shoaib Ansari
authored and
Shoaib Ansari
committed
feat(frontend): add accessibility statement page
1 parent 73d997f commit 16be8ff

2 files changed

Lines changed: 167 additions & 0 deletions

File tree

‎frontend/app/accessibility/page.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import type { Metadata } from 'next';
2+
import Link from 'next/link';
3+
import { ArrowLeft, CheckCircle2, LifeBuoy, ShieldCheck } from 'lucide-react';
4+
import { Navbar } from '@/components/landing/Navbar';
5+
6+
export const metadata: Metadata = {
7+
title: 'Accessibility Statement | AgenticPay',
8+
description:
9+
'Learn how AgenticPay approaches accessibility, inclusive design, keyboard support, and ongoing improvements.',
10+
};
11+
12+
const commitments = [
13+
'Design flows that work with keyboard navigation and visible focus states.',
14+
'Use semantic structure, readable content, and clear labels for interactive elements.',
15+
'Review motion and contrast choices so the interface stays comfortable to use.',
16+
'Keep improving accessibility as new product areas and integrations ship.',
17+
];
18+
19+
const supportItems = [
20+
'Tell us which page or feature caused trouble.',
21+
'Share the device, browser, and any assistive technology you were using.',
22+
'Include screenshots or exact steps when possible so we can reproduce the issue faster.',
23+
];
24+
25+
export default function AccessibilityPage() {
26+
return (
27+
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
28+
<Navbar />
29+
30+
<main className="pt-28 pb-20">
31+
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
32+
<div className="mx-auto max-w-4xl">
33+
<Link
34+
href="/"
35+
className="mb-8 inline-flex items-center gap-2 text-sm font-medium text-slate-600 transition-colors hover:text-blue-600"
36+
>
37+
<ArrowLeft className="h-4 w-4" />
38+
Back to home
39+
</Link>
40+
41+
<div className="overflow-hidden rounded-[2rem] border border-white/70 bg-white/90 shadow-xl shadow-blue-100/60 backdrop-blur-sm">
42+
<div className="border-b border-slate-100 bg-gradient-to-r from-blue-600 via-cyan-500 to-indigo-600 px-6 py-12 text-white sm:px-10">
43+
<div className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-2 text-sm font-medium">
44+
<ShieldCheck className="h-4 w-4" />
45+
Accessibility Statement
46+
</div>
47+
<h1 className="mt-6 text-4xl font-bold tracking-tight sm:text-5xl">
48+
Building AgenticPay for more people, in more ways
49+
</h1>
50+
<p className="mt-4 max-w-3xl text-base leading-7 text-blue-50 sm:text-lg">
51+
AgenticPay is committed to creating a product that is usable, understandable,
52+
and inclusive for everyone. Accessibility is part of how we design, build, and
53+
improve the platform.
54+
</p>
55+
<p className="mt-4 text-sm text-blue-100">Last updated: March 25, 2026</p>
56+
</div>
57+
58+
<div className="space-y-12 px-6 py-10 sm:px-10 sm:py-12">
59+
<section aria-labelledby="commitment-heading">
60+
<h2
61+
id="commitment-heading"
62+
className="text-2xl font-semibold tracking-tight text-slate-900"
63+
>
64+
Our commitment
65+
</h2>
66+
<p className="mt-4 text-base leading-7 text-slate-600">
67+
We aim to provide an experience that supports a wide range of users,
68+
including people who rely on assistive technologies such as screen readers,
69+
keyboard navigation, zoom, and reduced motion settings.
70+
</p>
71+
<div className="mt-6 grid gap-4 sm:grid-cols-2">
72+
{commitments.map((item) => (
73+
<div
74+
key={item}
75+
className="rounded-2xl border border-slate-200 bg-slate-50 p-5"
76+
>
77+
<div className="flex items-start gap-3">
78+
<CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0 text-blue-600" />
79+
<p className="text-sm leading-6 text-slate-700">{item}</p>
80+
</div>
81+
</div>
82+
))}
83+
</div>
84+
</section>
85+
86+
<section aria-labelledby="standards-heading">
87+
<h2
88+
id="standards-heading"
89+
className="text-2xl font-semibold tracking-tight text-slate-900"
90+
>
91+
Standards and ongoing work
92+
</h2>
93+
<div className="mt-4 space-y-4 text-base leading-7 text-slate-600">
94+
<p>
95+
Our goal is to align with generally accepted accessibility best practices,
96+
including the Web Content Accessibility Guidelines (WCAG), as the product
97+
evolves.
98+
</p>
99+
<p>
100+
Accessibility work is ongoing. Some areas of the platform may still be
101+
improving, especially where third-party wallets, external integrations, or
102+
rapidly changing product surfaces are involved.
103+
</p>
104+
<p>
105+
We treat accessibility feedback as product feedback, which means we use it to
106+
guide fixes, prioritization, and future design decisions.
107+
</p>
108+
</div>
109+
</section>
110+
111+
<section aria-labelledby="assistance-heading">
112+
<h2
113+
id="assistance-heading"
114+
className="text-2xl font-semibold tracking-tight text-slate-900"
115+
>
116+
Need help or want to report an issue?
117+
</h2>
118+
<div className="mt-4 rounded-3xl border border-blue-100 bg-blue-50/70 p-6">
119+
<div className="flex items-start gap-3">
120+
<LifeBuoy className="mt-1 h-5 w-5 shrink-0 text-blue-700" />
121+
<div>
122+
<p className="text-base leading-7 text-slate-700">
123+
If you experience an accessibility barrier while using AgenticPay, please
124+
report it through the project&apos;s{' '}
125+
<a
126+
href="https://github.com/Smartdevs17/agenticpay/issues"
127+
target="_blank"
128+
rel="noreferrer"
129+
className="font-semibold text-blue-700 underline decoration-blue-300 underline-offset-4"
130+
>
131+
GitHub issue tracker
132+
</a>
133+
.
134+
</p>
135+
<ul className="mt-4 list-disc space-y-2 pl-5 text-sm leading-6 text-slate-600">
136+
{supportItems.map((item) => (
137+
<li key={item}>{item}</li>
138+
))}
139+
</ul>
140+
</div>
141+
</div>
142+
</div>
143+
</section>
144+
145+
<section aria-labelledby="review-heading">
146+
<h2
147+
id="review-heading"
148+
className="text-2xl font-semibold tracking-tight text-slate-900"
149+
>
150+
Review and updates
151+
</h2>
152+
<p className="mt-4 text-base leading-7 text-slate-600">
153+
We review this statement at least annually and update it as our product,
154+
design system, and support processes mature.
155+
</p>
156+
</section>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
</main>
162+
</div>
163+
);
164+
}

‎frontend/app/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,9 @@ export default function Home() {
176176
<a href="#" className="hover:text-white transition-colors">
177177
Privacy
178178
</a>
179+
<Link href="/accessibility" className="hover:text-white transition-colors">
180+
Accessibility
181+
</Link>
179182
<a href="#" className="hover:text-white transition-colors">
180183
Support
181184
</a>

0 commit comments

Comments
 (0)