From a109a1862798f6fd43bda85ee0733dcac0b5c221 Mon Sep 17 00:00:00 2001
From: valknarness <valknarness@pivoine.art>
Date: Fri, 7 Nov 2025 14:49:07 +0100
Subject: [PATCH] feat: add footer and fix TypeScript build errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add comprehensive footer component with:
- Four-column responsive layout (About, Resources, Documentation, Community)
- Links to all major features and GitHub repositories
- Copyright notice with dynamic year
- Attribution to Pastel CLI and David Peter
- MIT License link
- Built with acknowledgments

Fix TypeScript compilation errors:
- Remove all references to `comingSoon` property in accessibility/page.tsx
- Remove all references to `comingSoon` property in palettes/page.tsx
- Clean up conditional rendering logic

All features now properly linked and accessible.
Build now completes successfully for Docker deployment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/accessibility/page.tsx   |   9 +-
 app/layout.tsx               |   2 +
 app/palettes/page.tsx        |   9 +-
 components/layout/Footer.tsx | 203 +++++++++++++++++++++++++++++++++++
 4 files changed, 209 insertions(+), 14 deletions(-)
 create mode 100644 components/layout/Footer.tsx

diff --git a/app/accessibility/page.tsx b/app/accessibility/page.tsx
index 230a45f..34f1956 100644
--- a/app/accessibility/page.tsx
+++ b/app/accessibility/page.tsx
@@ -42,16 +42,11 @@ export default function AccessibilityPage() {
             return (
               <Link
                 key={tool.href}
-                href={tool.comingSoon ? '#' : tool.href}
-                className={`p-6 border rounded-lg bg-card hover:border-primary transition-colors ${
-                  tool.comingSoon ? 'opacity-60 cursor-not-allowed' : ''
-                }`}
+                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" />
-                  {tool.comingSoon && (
-                    <span className="text-xs bg-muted px-2 py-1 rounded">Coming Soon</span>
-                  )}
                 </div>
                 <h2 className="text-xl font-semibold mb-2">{tool.title}</h2>
                 <p className="text-sm text-muted-foreground mb-4">{tool.description}</p>
diff --git a/app/layout.tsx b/app/layout.tsx
index ec1e94d..7be433a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google';
 import './globals.css';
 import { Providers } from '@/components/providers/Providers';
 import { Navbar } from '@/components/layout/Navbar';
+import { Footer } from '@/components/layout/Footer';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -39,6 +40,7 @@ export default function RootLayout({
         <Providers>
           <Navbar />
           {children}
+          <Footer />
         </Providers>
       </body>
     </html>
diff --git a/app/palettes/page.tsx b/app/palettes/page.tsx
index 6c98720..d267d59 100644
--- a/app/palettes/page.tsx
+++ b/app/palettes/page.tsx
@@ -42,16 +42,11 @@ export default function PalettesPage() {
             return (
               <Link
                 key={type.href}
-                href={type.comingSoon ? '#' : type.href}
-                className={`p-6 border rounded-lg bg-card hover:border-primary transition-colors ${
-                  type.comingSoon ? 'opacity-60 cursor-not-allowed' : ''
-                }`}
+                href={type.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" />
-                  {type.comingSoon && (
-                    <span className="text-xs bg-muted px-2 py-1 rounded">Coming Soon</span>
-                  )}
                 </div>
                 <h2 className="text-xl font-semibold mb-2">{type.title}</h2>
                 <p className="text-sm text-muted-foreground mb-4">{type.description}</p>
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
new file mode 100644
index 0000000..768e832
--- /dev/null
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,203 @@
+'use client';
+
+import Link from 'next/link';
+import { Github, Heart, ExternalLink } from 'lucide-react';
+
+export function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="border-t bg-card/50 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          {/* About */}
+          <div className="space-y-3">
+            <h3 className="font-semibold text-lg">Pastel UI</h3>
+            <p className="text-sm text-muted-foreground">
+              A modern, interactive web application for color manipulation, palette generation,
+              and accessibility analysis.
+            </p>
+          </div>
+
+          {/* Resources */}
+          <div className="space-y-3">
+            <h3 className="font-semibold">Resources</h3>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <Link href="/playground" className="text-muted-foreground hover:text-foreground transition-colors">
+                  Color Playground
+                </Link>
+              </li>
+              <li>
+                <Link href="/palettes" className="text-muted-foreground hover:text-foreground transition-colors">
+                  Palette Generator
+                </Link>
+              </li>
+              <li>
+                <Link href="/accessibility" className="text-muted-foreground hover:text-foreground transition-colors">
+                  Accessibility Tools
+                </Link>
+              </li>
+              <li>
+                <Link href="/batch" className="text-muted-foreground hover:text-foreground transition-colors">
+                  Batch Operations
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Documentation */}
+          <div className="space-y-3">
+            <h3 className="font-semibold">Documentation</h3>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <a
+                  href="https://github.com/valknarness/pastel-ui#readme"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+                >
+                  Getting Started
+                  <ExternalLink className="h-3 w-3" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/valknarness/pastel-api#readme"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+                >
+                  API Documentation
+                  <ExternalLink className="h-3 w-3" />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/sharkdp/pastel"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-1"
+                >
+                  Pastel CLI
+                  <ExternalLink className="h-3 w-3" />
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Community */}
+          <div className="space-y-3">
+            <h3 className="font-semibold">Community</h3>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <a
+                  href="https://github.com/valknarness/pastel-ui"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
+                >
+                  <Github className="h-4 w-4" />
+                  Pastel UI
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/valknarness/pastel-api"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors inline-flex items-center gap-2"
+                >
+                  <Github className="h-4 w-4" />
+                  Pastel API
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/valknarness/pastel-ui/issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  Report an Issue
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/valknarness/pastel-ui/discussions"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  Discussions
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t">
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
+            <div className="text-sm text-muted-foreground">
+              <p className="inline-flex items-center gap-1">
+                © {currentYear} Pastel UI. Built with
+                <Heart className="h-4 w-4 text-red-500 fill-red-500" />
+                using
+                <a
+                  href="https://nextjs.org"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors underline"
+                >
+                  Next.js
+                </a>
+                and
+                <a
+                  href="https://tailwindcss.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors underline"
+                >
+                  Tailwind CSS
+                </a>
+              </p>
+            </div>
+
+            <div className="flex items-center gap-6 text-sm text-muted-foreground">
+              <p>
+                Based on{' '}
+                <a
+                  href="https://github.com/sharkdp/pastel"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors underline"
+                >
+                  Pastel
+                </a>
+                {' '}by{' '}
+                <a
+                  href="https://github.com/sharkdp"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors underline"
+                >
+                  David Peter
+                </a>
+              </p>
+              <span>•</span>
+              <a
+                href="https://github.com/valknarness/pastel-ui/blob/main/LICENSE"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-foreground transition-colors"
+              >
+                MIT License
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}