Initial commit

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom';
+import { Search, BookOpen, Download, Server, Library } from 'lucide-react';
+import { useStore } from '../store/useStore';
+
+export function HomePage() {
+  const { serverConnected } = useStore();
+
+  return (
+    <div className="page home-page">
+      <div className="hero">
+        <div className="hero-content">
+          <h1>MangaDL</h1>
+          <p className="hero-subtitle">Browse, read, and download manga from MangaKatana</p>
+          
+          <div className="hero-search">
+            <Search className="search-icon-large" />
+            <Link to="/search?q=" className="search-placeholder">
+              Search for manga...
+            </Link>
+          </div>
+
+          <div className="hero-features">
+            <div className="feature">
+              <BookOpen size={24} />
+              <span>Browse Manga</span>
+            </div>
+            <div className="feature">
+              <Download size={24} />
+              <span>Download Chapters</span>
+            </div>
+            <div className="feature">
+              <Library size={24} />
+              <span>Read Online</span>
+            </div>
+            <div className="feature">
+              <Server size={24} />
+              <span>Self-hosted Backend</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="server-status-banner">
+        <Server className={serverConnected ? 'online' : 'offline'} size={20} />
+        <span>
+          Backend: {serverConnected ? 'Connected' : 'Disconnected'}
+          {!serverConnected && ' - Start ifetch server on port 8080'}
+        </span>
+      </div>
+
+      <div className="getting-started">
+        <h2>Getting Started</h2>
+        <ol>
+          <li>Run <code>ifetch --server --port 8080</code> to start the backend server</li>
+          <li>Search for manga using the search bar above</li>
+          <li>Click on a manga to view chapters and start reading</li>
+        </ol>
+      </div>
+    </div>
+  );
+}