feat: UX gap fixes — 404 page, empty state, hover states (#146)

* feat: add branded 404 page for unmatched routes

Closes #137

* feat: add empty column guidance with Inbox icon and hint text

Closes #139

* feat: enhance landing page hover states and add footer nav links

- Add hover lift effect (-translate-y-1) to feature and step cards
- Add group hover transitions to HowItWorksSection step cards
- Add cursor-pointer to interactive cards
- Add Privacy and Terms links to footer

Closes #140

Author: ryota-murakami

src/app/(landing)/FeaturesSection.tsx

@@ -87,7 +87,7 @@ export const FeaturesSection = memo(function FeaturesSection() {
           {features.map((feature, index) => (
             <div
               key={index}
-              className="group border-border bg-background/50 hover:bg-background hover:border-primary/20 relative rounded-2xl border p-8 backdrop-blur-sm transition-all duration-300 hover:shadow-lg"
+              className="group border-border bg-background/50 hover:bg-background hover:border-primary/20 relative cursor-pointer rounded-2xl border p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
             >
               <div className="text-primary mb-4 transition-transform duration-300 group-hover:scale-110">
                 {feature.icon}

src/app/(landing)/Footer.tsx

@@ -17,6 +17,15 @@ export const Footer = memo(function Footer() {
           <span className="text-foreground text-sm font-medium">GitBox</span>
         </div>
         <div className="text-muted-foreground flex items-center gap-6 text-sm">
+          <a
+            href="/privacy"
+            className="hover:text-foreground transition-colors"
+          >
+            Privacy
+          </a>
+          <a href="/terms" className="hover:text-foreground transition-colors">
+            Terms
+          </a>
           <a
             href="https://github.com/laststance/gitbox"
             target="_blank"
@@ -28,7 +37,11 @@ export const Footer = memo(function Footer() {
           </a>
           <span>
             Made by{' '}
-            <a href="https://laststance.io/" target="_blank">
+            <a
+              href="https://laststance.io/"
+              target="_blank"
+              className="hover:text-foreground transition-colors"
+            >
               Laststance.io
             </a>
           </span>

src/app/(landing)/HowItWorksSection.tsx

@@ -49,9 +49,9 @@ export const HowItWorksSection = memo(function HowItWorksSection() {
           {steps.map((item, index) => (
             <div
               key={index}
-              className="border-border/50 bg-background/30 relative flex gap-4 rounded-xl border p-6"
+              className="group border-border/50 bg-background/30 hover:bg-background/60 hover:border-primary/20 relative flex cursor-pointer gap-4 rounded-xl border p-6 transition-all duration-300 hover:-translate-y-1 hover:shadow-md"
             >
-              <div className="bg-primary/10 text-primary flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold">
+              <div className="bg-primary/10 text-primary flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-lg font-bold transition-transform duration-300 group-hover:scale-110">
                 {item.step}
               </div>
               <div>

src/app/not-found.tsx

@@ -0,0 +1,41 @@
+import { Columns3 } from 'lucide-react'
+import Link from 'next/link'
+import { memo } from 'react'
+
+import { Button } from '@/components/ui/button'
+
+/**
+ * Root 404 page for unmatched routes.
+ * Displayed when authenticated users navigate to URLs that don't exist.
+ * Unauthenticated users are redirected to /login by proxy.ts before reaching this page.
+ */
+const NotFound = memo(function NotFound() {
+  return (
+    <div className="bg-background flex min-h-screen flex-col items-center justify-center gap-8 p-4">
+      {/* Faded brand icon */}
+      <div className="text-muted-foreground/20">
+        <Columns3 className="h-24 w-24" strokeWidth={1} />
+      </div>
+
+      <div className="text-center">
+        <h1 className="text-foreground text-6xl font-bold tracking-tight">
+          404
+        </h1>
+        <p className="text-muted-foreground mt-3 text-lg">
+          This page doesn&apos;t exist or has been moved.
+        </p>
+      </div>
+
+      <div className="flex gap-3">
+        <Button asChild variant="default">
+          <Link href="/boards">Go to Boards</Link>
+        </Button>
+        <Button asChild variant="outline">
+          <Link href="/">Back to Home</Link>
+        </Button>
+      </div>
+    </div>
+  )
+})
+
+export default NotFound

src/components/Board/StatusColumn.tsx

@@ -3,7 +3,7 @@
 import { useDroppable } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { motion, AnimatePresence, useReducedMotion } from 'framer-motion'
-import { MoreHorizontal, Pencil, Trash2, Plus } from 'lucide-react'
+import { MoreHorizontal, Pencil, Trash2, Plus, Inbox } from 'lucide-react'
 import React, { memo } from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -184,6 +184,16 @@ export const StatusColumn = memo<StatusColumnProps>(
                 </motion.div>
               ))}
             </AnimatePresence>
+
+            {/* Empty column guidance */}
+            {cards.length === 0 && (
+              <div className="flex flex-col items-center gap-2 py-8 text-center">
+                <Inbox className="text-muted-foreground/40 h-8 w-8" />
+                <p className="text-muted-foreground text-xs">
+                  Drop repos here or click &quot;Add Repo&quot; below
+                </p>
+              </div>
+            )}
           </div>
         </SortableContext>