feat: "Logg in"-knappen funker

FrameRate/package.json

@@ -13,7 +13,8 @@
   },
   "dependencies": {
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-router": "^8.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",

FrameRate/src/App.tsx

@@ -1,12 +1,22 @@
 import './index.css';
+import { Route, Routes } from 'react-router';
+import LoginPage from './pages/LoginPage';
 import { Layout } from './components/layout/Layout';
 import { FeaturedMovie } from './components/FeaturedMovie';
 
 function App() {
   return (
-    <Layout>
-      <FeaturedMovie />
-    </Layout>
+    <Routes>
+      <Route
+        path="/"
+        element={
+          <Layout>
+            <FeaturedMovie />
+          </Layout>
+        }
+      />
+      <Route path="/logg-inn" element={<LoginPage />} />
+    </Routes>
   );
 }
 

FrameRate/src/components/layout/Header.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router';
+
 // ---------- Lyset i menyen ----------
 
 /** Flytter lyset i menyen til en x-posisjon (piksler fra venstre kant av menyen). */
@@ -63,9 +65,9 @@ export function Header() {
         <a href="/min-liste">Min liste</a>
       </nav>
 
-      <a href="/logg-inn" className="login">
+      <Link to="/logg-inn" className="login">
         Logg inn
-      </a>
+      </Link>
     </header>
   );
 }

FrameRate/src/main.tsx

@@ -1,10 +1,13 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router';
 import './index.css';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>
 );

FrameRate/src/pages/LoginPage.css

@@ -0,0 +1,118 @@
+.login-page {
+  min-height: 100svh;
+  display: grid;
+  place-items: center;
+  padding: 2rem 1rem;
+  box-sizing: border-box;
+  background: radial-gradient(ellipse at top, rgba(242, 182, 48, 0.09), transparent 65%), #0b0c10;
+}
+.login-card {
+  width: 100%;
+  max-width: 27rem;
+  padding: clamp(1.5rem, 5vw, 3rem);
+  box-sizing: border-box;
+  border: 1px solid #2a2d35;
+  border-radius: 12px;
+  background: #15171c;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+.login-brand {
+  color: white;
+  font:
+    bold 1.75rem Georgia,
+    serif;
+  text-decoration: none;
+}
+.login-eyebrow {
+  margin: 0.5rem 0 2rem;
+  color: #f2b630;
+  font-style: italic;
+}
+.login-card h1 {
+  margin: 0 0 0.75rem;
+  font:
+    bold 2rem Georgia,
+    serif;
+}
+.login-intro,
+.login-message {
+  color: #a0a4ad;
+  line-height: 1.6;
+}
+.login-form {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+}
+.login-form label {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+.login-form input {
+  min-width: 0;
+  margin-bottom: 1.25rem;
+  padding: 0.85rem 1rem;
+  border: 1px solid #3a3e48;
+  border-radius: 8px;
+  background: #0b0c10;
+  color: white;
+  font: inherit;
+}
+.login-form input:focus-visible {
+  outline: 2px solid #f2b630;
+  outline-offset: 2px;
+}
+.login-form button {
+  margin-top: 0.5rem;
+  padding: 0.85rem 1rem;
+  border: none;
+  border-radius: 8px;
+  background: #f2b630;
+  color: #0b0c10;
+  font: inherit;
+  font-weight: bold;
+  cursor: pointer;
+}
+.login-form button:hover {
+  background: #ffca50;
+}
+.login-message {
+  margin: 0.75rem 0;
+}
+.login-hint {
+  margin: -0.75rem 0 1.25rem;
+  color: #a0a4ad;
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+.login-switch {
+  color: #a0a4ad;
+  line-height: 1.6;
+}
+.login-switch button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: #f2b630;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.login-switch button:hover {
+  color: #ffca50;
+  text-decoration: underline;
+}
+.login-switch button:focus-visible,
+.login-form button:focus-visible {
+  outline: 2px solid #f2b630;
+  outline-offset: 4px;
+}
+.login-back {
+  display: inline-block;
+  margin-top: 1rem;
+  color: #a0a4ad;
+  text-decoration: none;
+}
+.login-back:hover {
+  color: white;
+}