Migrate to HeroUI v3 and Tailwind CSS v4

- Upgrade from Tailwind CSS v3 to v4 with CSS-first configuration
- Install HeroUI v3 beta packages (@heroui/react, @heroui/styles)
- Migrate PostCSS config to new @tailwindcss/postcss plugin
- Convert tailwind.config.cjs to CSS @theme directive in globals.css
- Replace @tailwindcss/typography with custom prose styles

Component migrations:
- theme-toggle, back-to-top: HeroUI Button with onPress
- post-card, post-list-item: HeroUI Card compound components
- right-sidebar: HeroUI Card, Avatar, Chip
- search-modal: HeroUI Modal with compound structure
- nav-menu: HeroUI Button for mobile controls
- post-list-with-controls: HeroUI Button for sorting/pagination

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

components/post-list-item.tsx

@@ -4,6 +4,7 @@ import { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
 import { FiCalendar, FiTag } from 'react-icons/fi';
 import { MetaItem } from './meta-item';
+import { Card } from '@heroui/react';
 
 interface Props {
   post: Post;
@@ -19,7 +20,11 @@ export function PostListItem({ post }: Props) {
     post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
 
   return (
-    <article className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60">
+    <article>
+      <Card
+        variant="transparent"
+        className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60"
+      >
       <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
       {cover && (
         <div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">
@@ -34,7 +39,7 @@ export function PostListItem({ post }: Props) {
           />
         </div>
       )}
-      <div className="flex-1 space-y-1.5">
+      <Card.Content className="flex-1 space-y-1.5 p-0">
         <div className="flex flex-wrap gap-3 text-xs">
           {post.published_at && (
             <MetaItem icon={FiCalendar}>
@@ -49,15 +54,18 @@ export function PostListItem({ post }: Props) {
             </MetaItem>
           )}
         </div>
-        <h2 className="text-base font-semibold leading-snug text-slate-900 hover:text-accent sm:text-lg dark:text-slate-50 dark:hover:text-accent">
-          <Link href={post.url}>{post.title}</Link>
-        </h2>
+        <Card.Header className="p-0">
+          <Card.Title className="text-base font-semibold leading-snug text-slate-900 hover:text-[var(--color-accent)] sm:text-lg dark:text-slate-50 dark:hover:text-[var(--color-accent)]">
+            <Link href={post.url}>{post.title}</Link>
+          </Card.Title>
+        </Card.Header>
         {excerpt && (
-          <p className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
+          <Card.Description className="line-clamp-2 text-sm text-slate-600 group-hover:text-slate-800 dark:text-slate-300 dark:group-hover:text-slate-100">
             {excerpt}
-          </p>
+          </Card.Description>
         )}
-      </div>
+      </Card.Content>
+      </Card>
     </article>
   );
 }