style: standardize layout widths and padding across all pages

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>

app/accessibility/colorblind/page.tsx

@@ -59,7 +59,7 @@ export default function ColorBlindPage() {
   };
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Color Blindness Simulator</h1>

app/accessibility/contrast/page.tsx

@@ -56,7 +56,7 @@ export default function ContrastPage() {
   );
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Contrast Checker</h1>

app/accessibility/page.tsx

@@ -27,7 +27,7 @@ export default function AccessibilityPage() {
   ];
 
   return (
-    <div className="min-h-screen p-8">
+    <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>

app/accessibility/textcolor/page.tsx

@@ -54,7 +54,7 @@ export default function TextColorPage() {
   };
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Text Color Optimizer</h1>

app/batch/page.tsx

@@ -84,7 +84,7 @@ export default function BatchPage() {
     rotateMutation.isPending;
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Batch Operations</h1>

app/names/page.tsx

@@ -32,7 +32,7 @@ export default function NamedColorsPage() {
   }, [data, search, sortBy]);
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Named Colors</h1>

app/page.tsx

@@ -1,7 +1,7 @@
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-8 md:p-24">
-      <div className="max-w-5xl w-full space-y-8 text-center">
+    <main className="flex min-h-screen flex-col items-center justify-center px-8 py-12 md:py-24">
+      <div className="max-w-7xl w-full space-y-8 text-center">
         <h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent animate-fade-in">
           Pastel UI
         </h1>

app/palettes/distinct/page.tsx

@@ -37,7 +37,7 @@ export default function DistinctPage() {
   };
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Distinct Colors Generator</h1>

app/palettes/gradient/page.tsx

@@ -52,7 +52,7 @@ export default function GradientPage() {
   };
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Gradient Creator</h1>

app/palettes/harmony/page.tsx

@@ -52,7 +52,7 @@ export default function HarmonyPage() {
   };
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Harmony Palette Generator</h1>

app/palettes/page.tsx

@@ -27,7 +27,7 @@ export default function PalettesPage() {
   ];
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Palette Generation</h1>

app/playground/page.tsx

@@ -81,7 +81,7 @@ function PlaygroundContent() {
   ]);
 
   return (
-    <div className="min-h-screen p-8">
+    <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">Color Playground</h1>
@@ -206,7 +206,7 @@ function PlaygroundContent() {
 export default function PlaygroundPage() {
   return (
     <Suspense fallback={
-      <div className="min-h-screen p-8">
+      <div className="min-h-screen px-8 py-12">
         <div className="max-w-7xl mx-auto flex items-center justify-center">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </div>

components/layout/Navbar.tsx

@@ -20,7 +20,7 @@ export function Navbar() {
 
   return (
     <nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container mx-auto px-4">
+      <div className="max-w-7xl mx-auto px-8">
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
           <Link href="/" className="flex items-center space-x-2 font-bold text-xl">