Added login and profile pages + updated App

frontend/src/App.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Link, Route, Routes, useNavigate } from 'react-router-dom'
+import { Link, Route, Routes, useNavigate, Navigate } from 'react-router-dom'
 import { AnalysisPage } from './pages/Analysis'
+import { LoginPage } from './pages/Login'
+import { ProfilePage } from './pages/Profile'
 
 function usePrefersReducedMotion() {
   const [reduced, setReduced] = useState(false)
@@ -395,6 +397,44 @@ function HomePage() {
 
 function App() {
   const [scrolled, setScrolled] = useState(false)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [userEmail, setUserEmail] = useState<string | null>(null)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem('s2s_auth')
+      if (raw) {
+        const obj = JSON.parse(raw)
+        setUserEmail(obj?.email ?? null)
+        setIsAuthenticated(true)
+      } else {
+        setUserEmail(null)
+        setIsAuthenticated(false)
+      }
+    } catch (err) {
+      setIsAuthenticated(false)
+      setUserEmail(null)
+    }
+  }, [])
+
+  const handleLogin = (user?: { email: string }) => {
+    setIsAuthenticated(true)
+    setUserEmail(user?.email ?? null)
+  }
+
+  const handleLogout = () => {
+    setIsAuthenticated(false)
+    try {
+      localStorage.removeItem('s2s_auth')
+    } catch (err) {
+      // ignore
+    }
+    setUserEmail(null)
+    setMenuOpen(false)
+    navigate('/')
+  }
 
   useEffect(() => {
     const onScroll = () => setScrolled(window.scrollY > 14)
@@ -430,19 +470,51 @@ function App() {
             <a className="hover:text-white transition-colors" href="/#second-life">
               Second-life
             </a>
-            <Link className="hover:text-white transition-colors" to="/analysis">
+            <Link className="hover:text-white/70 transition-colors" to="/analysis">
               Analysis
             </Link>
             <a className="hover:text-white transition-colors" href="/#contact">
               Contact
             </a>
+            {/* show account menu when authenticated */}
+            {isAuthenticated ? (
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setMenuOpen((v) => !v)}
+                  className="ml-3 flex items-center gap-2 rounded-full border border-white/10 bg-white/3 px-3 py-1 text-sm text-white/90 hover:bg-white/5"
+                >
+                  <span className="truncate max-w-[10rem]">{userEmail ?? 'Account'}</span>
+                </button>
+
+                {menuOpen && (
+                  <div className="absolute right-0 mt-2 w-40 origin-top-right rounded-md border border-white/10 bg-ink-2 py-1 shadow-lg">
+                    <Link
+                      to="/profile"
+                      onClick={() => setMenuOpen(false)}
+                      className="block px-3 py-2 text-sm text-white/90 hover:bg-white/5"
+                    >
+                      Profile
+                    </Link>
+                    <button
+                      onClick={handleLogout}
+                      className="w-full text-left px-3 py-2 text-sm text-white/90 hover:bg-white/5"
+                    >
+                      Sign out
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : null}
           </div>
         </nav>
       </header>
 
       <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/analysis" element={<AnalysisPage />} />
+        {/* root shows login when unauthenticated, profile when authenticated */}
+        <Route path="/" element={isAuthenticated ? <HomePage /> : <LoginPage onLogin={handleLogin} />} />
+  <Route path="/profile" element={isAuthenticated ? <ProfilePage onLogout={handleLogout} /> : <Navigate to="/" replace />} />
+        <Route path="/analysis" element={isAuthenticated ? <AnalysisPage /> : <Navigate to="/" replace />} />
       </Routes>
     </div>
   )

frontend/src/pages/Login.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+type Props = { onLogin: (user?: { email: string }) => void }
+
+export function LoginPage({ onLogin }: Props) {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    // Minimal client-side "auth" — in a real app replace with API call
+    if (!email || !password) {
+      setError('Please enter email and password')
+      return
+    }
+
+    // mark logged in
+    try {
+      localStorage.setItem('s2s_auth', JSON.stringify({ email }))
+      onLogin({ email })
+      navigate('/')
+    } catch (err) {
+      setError('Unable to persist login state')
+    }
+  }
+
+  return (
+    <main className="relative min-h-screen overflow-hidden bg-ink text-white">
+      <video
+        className="pointer-events-none absolute inset-0 h-full w-full object-cover -z-20"
+        src="/videos/video3.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        preload="auto"
+      />
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.75),rgba(0,0,0,0.9))] -z-10" />
+
+      <div className="relative mx-auto flex min-h-screen items-center justify-center px-6">
+        <div className="w-full max-w-sm rounded-2xl border border-white/10 bg-[rgba(20,25,30,0.6)] p-8 shadow-[0_30px_120px_rgba(0,0,0,0.85)] backdrop-blur-xl">
+          <h1 className="text-2xl font-semibold">Sign in</h1>
+          <p className="mt-2 text-sm text-white/70">Sign in to view your profile and run analyses.</p>
+
+          <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
+            <div>
+              <label className="block text-xs font-medium text-white/70">Email</label>
+              <input
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-white outline-none focus:ring-2 focus:ring-accent/60"
+                type="email"
+                autoComplete="email"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-white/70">Password</label>
+              <input
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="mt-1 w-full rounded-md border border-white/10 bg-transparent px-3 py-2 text-white outline-none focus:ring-2 focus:ring-accent/60"
+                type="password"
+                autoComplete="current-password"
+              />
+            </div>
+
+            {error && <div className="text-sm text-rose-400">{error}</div>}
+
+            <div className="mt-4">
+              <button
+                type="submit"
+                className="inline-flex w-full items-center justify-center rounded-[10px] bg-[radial-gradient(circle_at_0%_0%,#1b2a23,#0f1714)] px-4 py-2 text-sm font-medium text-white shadow transition hover:brightness-110"
+              >
+                Sign in
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default LoginPage

frontend/src/pages/Profile.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+type Props = { onLogout: () => void }
+
+export function ProfilePage({ onLogout }: Props) {
+  const [email, setEmail] = useState<string | null>(null)
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem('s2s_auth')
+      if (raw) {
+        const obj = JSON.parse(raw)
+        setEmail(obj.email ?? null)
+      }
+    } catch (err) {
+      setEmail(null)
+    }
+  }, [])
+
+  const initials = useMemo(() => {
+    if (!email) return 'U'
+    const name = String(email).split('@')[0] || String(email)
+    const parts = name.split(/[^A-Za-z0-9]+/).filter(Boolean)
+    const chars = parts.map((p) => p[0]?.toUpperCase() ?? '')
+    return (chars[0] ?? 'U') + (chars[1] ?? '')
+  }, [email])
+
+  const handleLogout = () => {
+    localStorage.removeItem('s2s_auth')
+    onLogout()
+    navigate('/')
+  }
+
+  return (
+    <main className="relative min-h-screen overflow-hidden bg-ink text-white">
+      <video
+        className="pointer-events-none absolute inset-0 h-full w-full object-cover -z-20"
+        src="/videos/video3.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        preload="auto"
+      />
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.85))] -z-10" />
+
+      <div className="relative mx-auto flex min-h-screen items-center justify-center px-6">
+        <div className="w-full max-w-lg rounded-3xl border border-white/10 bg-[rgba(10,15,12,0.45)] p-10 shadow-[0_40px_140px_rgba(0,0,0,0.9)] backdrop-blur-xl">
+          <div className="flex items-center gap-6">
+            <div className="flex h-20 w-20 items-center justify-center rounded-full bg-white/8 text-2xl font-semibold text-white">
+              {initials}
+            </div>
+            <div>
+              <h1 className="text-3xl font-semibold tracking-tight">Profile</h1>
+              <div className="mt-2 text-sm text-white/60">Member since {new Date().getFullYear()}</div>
+            </div>
+          </div>
+
+          <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
+            <div className="rounded-lg border border-white/6 bg-white/2 p-4">
+              <div className="text-xs text-white/60">Email</div>
+              <div className="mt-2 text-lg font-medium text-white">{email ?? 'Unknown'}</div>
+            </div>
+
+            <div className="rounded-lg border border-white/6 bg-white/2 p-4">
+              <div className="text-xs text-white/60">Account</div>
+              <div className="mt-2 text-lg font-medium text-white">Standard user</div>
+            </div>
+          </div>
+
+          <div className="mt-8 flex items-center gap-3">
+            <button
+              onClick={handleLogout}
+              className="inline-flex items-center justify-center rounded-[10px] bg-[radial-gradient(circle_at_0%_0%,#1b2a23,#0f1714)] px-4 py-2 text-sm font-medium text-white shadow hover:brightness-110"
+            >
+              Sign out
+            </button>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default ProfilePage