e6b693dbd8
The previous implementation had misaligned padding structure:
- Navbar/Footer: padding INSIDE max-width container (max-w-7xl mx-auto px-8)
- Page content: padding OUTSIDE max-width container (px-8 on outer, max-w-7xl inside)
This caused content to have double horizontal spacing and misalign with
the navbar and footer borders.
**Fix:**
Move px-8 from outer container to inner max-w-7xl container on all pages,
matching the navbar and footer pattern.
**Structure (all components now consistent):**
```
<div className="py-12"> <!-- vertical padding only -->
<div className="max-w-7xl mx-auto px-8"> <!-- max-width + horizontal padding -->
<!-- content -->
</div>
</div>
```
Now navbar, main content, and footer all align perfectly at the same
left and right edges.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
import Link from 'next/link';
|
|
import { Contrast, Eye, Palette } from 'lucide-react';
|
|
|
|
export default function AccessibilityPage() {
|
|
const tools = [
|
|
{
|
|
title: 'Contrast Checker',
|
|
description: 'Test color combinations for WCAG 2.1 AA and AAA compliance',
|
|
href: '/accessibility/contrast',
|
|
icon: Contrast,
|
|
features: ['WCAG 2.1 standards', 'AA/AAA ratings', 'Live preview'],
|
|
},
|
|
{
|
|
title: 'Color Blindness Simulator',
|
|
description: 'Simulate how colors appear with different types of color blindness',
|
|
href: '/accessibility/colorblind',
|
|
icon: Eye,
|
|
features: ['Protanopia', 'Deuteranopia', 'Tritanopia'],
|
|
},
|
|
{
|
|
title: 'Text Color Optimizer',
|
|
description: 'Find the best text color for any background automatically',
|
|
href: '/accessibility/textcolor',
|
|
icon: Palette,
|
|
features: ['Automatic optimization', 'WCAG guaranteed', 'Light/dark options'],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen py-12">
|
|
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
|
<div>
|
|
<h1 className="text-4xl font-bold mb-2">Accessibility Tools</h1>
|
|
<p className="text-muted-foreground">
|
|
Ensure your colors are accessible to everyone
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{tools.map((tool) => {
|
|
const Icon = tool.icon;
|
|
return (
|
|
<Link
|
|
key={tool.href}
|
|
href={tool.href}
|
|
className="p-6 border rounded-lg bg-card hover:border-primary transition-colors"
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<Icon className="h-8 w-8 text-primary" />
|
|
</div>
|
|
<h2 className="text-xl font-semibold mb-2">{tool.title}</h2>
|
|
<p className="text-sm text-muted-foreground mb-4">{tool.description}</p>
|
|
<ul className="space-y-1">
|
|
{tool.features.map((feature) => (
|
|
<li key={feature} className="text-sm text-muted-foreground flex items-center">
|
|
<span className="mr-2">•</span>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Educational Content */}
|
|
<div className="p-6 border rounded-lg bg-card mt-8">
|
|
<h2 className="text-xl font-semibold mb-4">About WCAG 2.1</h2>
|
|
<div className="space-y-4 text-sm text-muted-foreground">
|
|
<p>
|
|
The Web Content Accessibility Guidelines (WCAG) 2.1 provide standards for making web
|
|
content more accessible to people with disabilities.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<h3 className="font-semibold text-foreground mb-2">Level AA (Minimum)</h3>
|
|
<ul className="space-y-1">
|
|
<li>• Normal text: 4.5:1 contrast ratio</li>
|
|
<li>• Large text: 3:1 contrast ratio</li>
|
|
<li>• UI components: 3:1 contrast ratio</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-foreground mb-2">Level AAA (Enhanced)</h3>
|
|
<ul className="space-y-1">
|
|
<li>• Normal text: 7:1 contrast ratio</li>
|
|
<li>• Large text: 4.5:1 contrast ratio</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|