Add responsive Header component with navigation

.wrangler/deploy/config.json

@@ -0,0 +1 @@
+{"configPath":"../../dist/vite_react_template/wrangler.json","auxiliaryWorkers":[]}

src/react-app/App.css

@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem 2rem 2rem;
   text-align: center;
 }
 

src/react-app/App.tsx

@@ -5,6 +5,7 @@ import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import cloudflareLogo from "./assets/Cloudflare_Logo.svg";
 import honoLogo from "./assets/hono.svg";
+import Header from "./components/Header";
 import "./App.css";
 
 function App() {
@@ -13,6 +14,7 @@ function App() {
 
   return (
     <>
+      <Header />
       <div>
         <a href="https://vite.dev" target="_blank">
           <img src={viteLogo} className="logo" alt="Vite logo" />

src/react-app/components/Header.css

@@ -0,0 +1,129 @@
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  border-bottom: 1px solid #333;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 1rem 0;
+}
+
+.header-content {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.header-branding {
+  flex: 1;
+  min-width: 250px;
+}
+
+.header-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.2;
+}
+
+.header-subtitle {
+  margin: 0.25rem 0 0 0;
+  font-size: 0.875rem;
+  color: #888;
+  line-height: 1.2;
+}
+
+.header-nav {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.nav-link {
+  color: #646cff;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+}
+
+.nav-link:hover {
+  color: #535bf2;
+  background-color: rgba(100, 108, 255, 0.1);
+  transform: translateY(-1px);
+}
+
+.nav-link:active {
+  transform: translateY(0);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    text-align: center;
+    gap: 1.5rem;
+  }
+
+  .header-branding {
+    min-width: auto;
+  }
+
+  .header-nav {
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  .nav-link {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .header-content {
+    padding: 0 1rem;
+  }
+
+  .header-title {
+    font-size: 1.25rem;
+  }
+
+  .header-subtitle {
+    font-size: 0.8rem;
+  }
+
+  .nav-link {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+}
+
+/* Light theme support */
+@media (prefers-color-scheme: light) {
+  .header {
+    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+    border-bottom: 1px solid #e9ecef;
+  }
+
+  .header-title {
+    color: #213547;
+  }
+
+  .header-subtitle {
+    color: #6c757d;
+  }
+
+  .nav-link:hover {
+    background-color: rgba(116, 123, 255, 0.1);
+  }
+}

src/react-app/components/Header.tsx

@@ -0,0 +1,30 @@
+import "./Header.css";
+
+function Header() {
+  return (
+    <header className="header">
+      <div className="header-content">
+        <div className="header-branding">
+          <h1 className="header-title">Vite React Template</h1>
+          <p className="header-subtitle">Built with Vite + React + Hono + Cloudflare</p>
+        </div>
+        <nav className="header-nav">
+          <a href="https://vite.dev" target="_blank" rel="noopener noreferrer" className="nav-link">
+            Vite
+          </a>
+          <a href="https://react.dev" target="_blank" rel="noopener noreferrer" className="nav-link">
+            React
+          </a>
+          <a href="https://hono.dev" target="_blank" rel="noopener noreferrer" className="nav-link">
+            Hono
+          </a>
+          <a href="https://workers.cloudflare.com" target="_blank" rel="noopener noreferrer" className="nav-link">
+            Cloudflare
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}
+
+export default Header;