Migrate from Vue2 to React with modern tech stack

- Replace Vue2 + Vue CLI with Vite + React 18 + TypeScript
- Add Tailwind CSS for efficient styling
- Implement clean component architecture:
  - Split 1000+ line Vue component into focused React components
  - Add proper type safety with TypeScript
  - Use React Query for efficient data fetching
- Update GitHub Actions for React build pipeline
- Maintain existing functionality and design
- Support Node.js 23 with .nvmrc

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

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

src/components/pages/HomePage.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import Navigation from '../common/Navigation';
+import { fetchUsers } from '../../utils/api';
+
+export default function HomePage() {
+  const [didEnable, setDidEnable] = useState(false);
+  
+  const { data: users, isLoading } = useQuery({
+    queryKey: ['users'],
+    queryFn: () => fetchUsers(),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen">
+      <Navigation />
+      
+      <div className="max-w-6xl mx-auto px-4">
+        <div className="mb-8">
+          <a href="/docs" className="btn">help</a>
+          <a href="/en" className="btn ml-2">en</a>
+          <a href="/pr" className="btn ml-2">fav</a>
+          <a href="/te" className="btn ml-2">ten</a>
+          <button 
+            onClick={() => setDidEnable(!didEnable)}
+            className="btn ml-2"
+          >
+            did
+          </button>
+          <a href="/c" className="btn ml-2">all</a>
+          <a href="/svn" className="btn ml-2">seven</a>
+        </div>
+
+        {users && (
+          <div className="bg-white rounded-lg p-6">
+            <div className="grid gap-4">
+              {users.data.map((user) => (
+                <div key={user.id} className="border-b pb-4 last:border-b-0">
+                  <div className="flex justify-between items-center mb-2">
+                    <div className="flex items-center gap-4">
+                      {user.model && (
+                        <button className="text-lg">
+                          <i className="fa-solid fa-cube"></i>
+                        </button>
+                      )}
+                      {user.fav !== '0' && (
+                        <button className="text-lg">✧</button>
+                      )}
+                      {user.username === 'ai' && (
+                        <a 
+                          href={`https://git.syui.ai/${user.username}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-lg"
+                        >
+                          <i className="fa-brands fa-git-alt"></i>
+                        </a>
+                      )}
+                      <button className="btn-sm">ID {user.id}</button>
+                    </div>
+                  </div>
+                  
+                  <div className="text-lg">
+                    <a href={`/${user.username}`} className="font-semibold">
+                      {user.username}
+                    </a>
+                  </div>
+                  
+                  {didEnable && user.did && (
+                    <div className="mt-2">
+                      {user.did.includes('did:') ? (
+                        <button className="btn-sm">
+                          <a 
+                            href={`https://plc.directory/${user.did}/log`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-light"
+                          >
+                            {user.did}
+                          </a>
+                        </button>
+                      ) : user.did.includes('http') ? (
+                        <button className="btn-sm">
+                          <a 
+                            href={user.did}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-light"
+                          >
+                            {user.did}
+                          </a>
+                        </button>
+                      ) : null}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}