feat: Implement website structure

- Add navigation with Themes, Puzzles, and Miscellany.
- Create "coming soon" pages for Puzzles and Miscellany.
- Create a Themes page with cards for various topics.
- Implement basic boxy layout.
- Prepare for future interactive additions and filtering.
- Set up for Netlify deployment.

src/components/ThemeCard.tsx

@@ -0,0 +1,42 @@
+import { Link } from "react-router-dom";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ThemeCardProps {
+  title: string;
+  description: string;
+  path: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const ThemeCard = ({ title, description, path, icon, className }: ThemeCardProps) => {
+  return (
+    <Link
+      to={path}
+      className={cn(
+        "group block bg-surface border border-outline rounded-lg p-6 shadow-card hover:shadow-card-hover transition-all duration-200 hover:-translate-y-1",
+        className
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          {icon && (
+            <div className="w-12 h-12 bg-surface-variant rounded-lg flex items-center justify-center mb-4 group-hover:bg-accent group-hover:text-accent-foreground transition-colors">
+              {icon}
+            </div>
+          )}
+          <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
+            {title}
+          </h3>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            {description}
+          </p>
+        </div>
+        <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-accent group-hover:translate-x-1 transition-all flex-shrink-0 ml-4" />
+      </div>
+    </Link>
+  );
+};
+
+export default ThemeCard;