0d03156e04
Ensure consistent spacing and alignment between header, main content, and footer: - Update Navbar to use max-w-7xl and px-8 (matching Footer) - Standardize all page containers to use px-8 py-12 padding - Change home page from max-w-5xl to max-w-7xl for consistency - Update all 12 pages to use consistent padding (px-8 py-12 instead of p-8) This creates a unified visual alignment across the entire application, with all content sections (navbar, main, footer) using the same max-width (7xl) and horizontal padding (px-8). 🤖 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 px-8 py-12">
|
|
<div className="max-w-7xl mx-auto 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>
|
|
);
|
|
}
|