feat: landing refăcut + înveliș public unificat pentru login/register/book

Landing:
- hero cu un singur CTA (scoase „Vezi cum arată", „Rezervă fără cont" și nota)
- „Spații deschise rezervării acum" pe poziția 2, în bandă evidențiată cu accent;
  listează toate proprietățile publice active (fără filtrul list_on_landing)
- showcase-ul mutat în bandă neutră etichetată „Demonstrație" ca să nu se
  confunde cu controale reale

Pagini publice:
- PublicNav.vue + PublicFooter.vue extrase și refolosite de Landing, LegalPage
  și noul PublicShell.vue (login/register/book primesc header/footer de landing,
  cu cele 8 teme; tokenii --color-* remapați la paleta landing în scope-ul shell)
- pe mobil: nav compact cu meniu hamburger (drawer ancorat dreapta, iconițe
  lucide, închidere la tap în afară/Escape); logo-ul Romfast rămâne în footer

Fix-uri:
- QR-ul proprietății encodează URL-ul cu slug (fallback pe id)
- deep-link-urile către rutele manager/admin nu mai sar la /dashboard:
  guard-ul așteaptă authStore.ready înainte de verificarea rolurilor
- drawer-ul nu se mai închidea singur la tap pe iconiță (listener pe pointerdown
  + gardă pentru target detașat după re-render)

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

.gitignore

@@ -36,3 +36,6 @@ Thumbs.db
 # Runtime
 .pids
 .gstack/
+
+# Playwright MCP artifacts
+.playwright-mcp/

frontend/src/components/LegalPage.vue

@@ -2,37 +2,7 @@
   <div class="roa-landing" :data-theme="theme">
     <div class="roa-page">
       <!-- NAV -->
-      <header class="nav">
+      <PublicNav />
-        <div class="nav-inner">
-          <div class="brand">
-            <router-link to="/" class="brand-logo-link" aria-label="Acasă">
-              <img src="/romfast_logo.png" alt="Romfast" class="brand-logo" />
-            </router-link>
-            <span class="brand-divider"></span>
-            <span class="brand-text">
-              <span class="brand-word">ROA Space</span>
-              <span class="brand-sub">Rezervări de spații</span>
-            </span>
-          </div>
-          <div class="nav-actions">
-            <button
-              type="button"
-              class="theme-btn"
-              @click="cycleTheme"
-              :title="`Temă: ${themeLabel}`"
-              aria-label="Schimbă tema"
-            >
-              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
-                <circle cx="12" cy="12" r="9" />
-                <path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none" />
-              </svg>
-              <span class="theme-label">{{ themeLabel }}</span>
-            </button>
-            <router-link to="/login" class="nav-login">Autentificare</router-link>
-            <router-link to="/register" class="btn btn-primary btn-sm">Creează cont gratuit</router-link>
-          </div>
-        </div>
-      </header>
 
       <!-- PROSE -->
       <main class="prose">
@@ -42,30 +12,22 @@
       </main>
 
       <!-- FOOTER -->
-      <footer class="footer">
+      <PublicFooter />
-        <div class="footer-inner">
-          <span class="footer-copy">© 2026 ROMFAST · Constanța, din 1991</span>
-          <nav class="footer-links">
-            <router-link to="/termeni">Termeni</router-link>
-            <router-link to="/confidentialitate">Confidențialitate / GDPR</router-link>
-            <a href="https://romfast.ro/menu/contact.html" target="_blank" rel="noopener">Contact</a>
-            <a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a>
-          </nav>
-        </div>
-      </footer>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useLandingTheme } from '@/composables/useLandingTheme'
+import PublicNav from '@/components/PublicNav.vue'
+import PublicFooter from '@/components/PublicFooter.vue'
 
 defineProps<{
   title: string
   subtitle?: string
 }>()
 
-const { theme, themeLabel, cycleTheme } = useLandingTheme()
+const { theme } = useLandingTheme()
 </script>
 
 <style scoped>
@@ -136,49 +98,6 @@ const { theme, themeLabel, cycleTheme } = useLandingTheme()
 }
 .roa-page { width: 100%; max-width: 1280px; margin: 0 auto; background: var(--surface-page); }
 
-/* ── Buttons ── */
-.btn {
-  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-  font-family: var(--font-body); font-weight: 600; border: 1px solid transparent;
-  border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap;
-  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
-}
-.btn-sm { padding: 8px 16px; font-size: 0.875rem; height: 34px; }
-.btn-primary { background: var(--brand); color: #fff; }
-.btn-primary:hover { background: var(--brand-hover); color: #fff; }
-
-/* ── Nav ── */
-.nav {
-  position: sticky; top: 0; z-index: 200;
-  background: var(--hbg); backdrop-filter: saturate(180%) blur(10px);
-  border-bottom: 1px solid var(--border-subtle);
-}
-.nav-inner {
-  max-width: var(--container); margin: 0 auto; height: 64px; padding: 0 32px;
-  display: flex; align-items: center; gap: 28px;
-}
-.brand { display: flex; align-items: center; gap: 12px; }
-.brand-logo-link { display: flex; }
-.brand-logo { height: 42px; width: auto; display: block; }
-.brand-divider { width: 1px; height: 30px; background: var(--border-default); }
-.brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
-.brand-word {
-  font-family: var(--font-mark); font-weight: 700; font-size: 18px;
-  letter-spacing: -0.01em; color: var(--brand);
-}
-.brand-sub { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-subtle); }
-.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
-.theme-btn {
-  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px;
-  border-radius: var(--radius-md); background: transparent; border: 1px solid var(--border-default);
-  color: var(--text-muted); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500;
-  cursor: pointer; transition: color 180ms ease, border-color 180ms ease;
-}
-.theme-btn:hover { color: var(--text-strong); border-color: var(--brand); }
-.theme-label { line-height: 1; }
-.nav-login { font-size: 0.875rem; font-weight: 600; color: var(--text-body); }
-.nav-login:hover { color: var(--brand); }
-
 /* ── Prose ── */
 .prose { max-width: 820px; margin: 0 auto; padding: 64px 32px 88px; }
 .prose :deep(h1),
@@ -209,27 +128,8 @@ const { theme, themeLabel, cycleTheme } = useLandingTheme()
   border-radius: var(--radius-md); padding: 18px 20px; margin: 0 0 12px;
 }
 
-/* ── Footer ── */
-.footer { background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
-.footer-inner {
-  max-width: var(--container); margin: 0 auto; padding: 28px 32px;
-  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
-}
-.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
-.footer-links a { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
-.footer-links a:hover { color: var(--brand); }
-.footer-copy { font-size: 0.8125rem; color: var(--text-subtle); }
-
 /* ── Responsive ── */
 @media (max-width: 700px) {
   .prose { padding: 40px 20px 56px; }
-  .nav-inner { padding: 0 20px; gap: 16px; }
-}
-@media (max-width: 560px) {
-  .theme-label { display: none; }
-  .theme-btn { padding: 0 10px; }
-}
-@media (max-width: 480px) {
-  .nav-login { display: none; }
 }
 </style>

frontend/src/components/PublicFooter.vue

@@ -0,0 +1,45 @@
+<template>
+  <footer class="footer">
+    <div class="footer-inner">
+      <div class="footer-brand">
+        <a href="https://romfast.ro" target="_blank" rel="noopener" class="footer-logo-link">
+          <img src="/romfast_logo.png" alt="Romfast" class="footer-logo" />
+        </a>
+        <span class="footer-copy">© 2026 ROMFAST · Constanța, din 1991</span>
+      </div>
+      <nav class="footer-links">
+        <router-link to="/termeni">Termeni</router-link>
+        <router-link to="/confidentialitate">Confidențialitate / GDPR</router-link>
+        <a href="https://romfast.ro/menu/contact.html" target="_blank" rel="noopener">Contact</a>
+        <a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a>
+      </nav>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+/* Colors/fonts come from the .roa-landing token scope of the parent page. */
+.footer { background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
+.footer-inner {
+  max-width: var(--container);
+  margin: 0 auto;
+  padding: 28px 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.footer-brand { display: flex; align-items: center; gap: 14px; }
+.footer-logo-link { display: flex; flex: none; }
+.footer-logo { height: 34px; width: auto; display: block; }
+.footer-copy { font-size: 0.8125rem; color: var(--text-subtle); }
+.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
+.footer-links a { font-size: 0.875rem; color: var(--text-muted); text-decoration: none; }
+.footer-links a:hover { color: var(--brand); }
+
+@media (max-width: 700px) {
+  .footer-inner { padding: 24px 20px; }
+  .footer-links { gap: 14px 18px; }
+}
+</style>

frontend/src/components/PublicNav.vue

@@ -0,0 +1,253 @@
+<template>
+  <header class="nav" ref="navRef">
+    <div class="nav-inner">
+      <div class="brand">
+        <router-link to="/" class="brand-logo-link" aria-label="Acasă">
+          <img src="/romfast_logo.png" alt="Romfast" class="brand-logo" />
+        </router-link>
+        <span class="brand-divider"></span>
+        <span class="brand-app-icon"><LayoutDashboard :size="24" /></span>
+        <router-link to="/" class="brand-text" aria-label="Acasă">
+          <span class="brand-word">ROA Space</span>
+          <span class="brand-sub">Rezervări de spații</span>
+        </router-link>
+      </div>
+
+      <!-- Desktop actions -->
+      <div class="nav-actions">
+        <button
+          type="button"
+          class="theme-btn"
+          @click="cycleTheme"
+          :title="`Temă: ${themeLabel}`"
+          aria-label="Schimbă tema"
+        >
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none" />
+          </svg>
+          <span class="theme-label">{{ themeLabel }}</span>
+        </button>
+        <router-link v-if="!hideLogin" to="/login" class="nav-login">Autentificare</router-link>
+        <router-link v-if="!hideRegister" to="/register" class="btn btn-primary btn-sm">
+          Creează cont gratuit
+        </router-link>
+      </div>
+
+      <!-- Mobile burger -->
+      <button
+        type="button"
+        class="nav-burger"
+        @click="open = !open"
+        :aria-expanded="open"
+        aria-label="Meniu"
+      >
+        <X v-if="open" :size="22" />
+        <Menu v-else :size="22" />
+      </button>
+    </div>
+
+    <!-- Mobile drawer -->
+    <div v-if="open" class="nav-drawer">
+      <button type="button" class="drawer-item" @click="cycleTheme">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none" />
+        </svg>
+        Temă: {{ themeLabel }}
+      </button>
+      <router-link v-if="!hideLogin" to="/login" class="drawer-item" @click="open = false">
+        <LogIn :size="18" />
+        Autentificare
+      </router-link>
+      <router-link v-if="!hideRegister" to="/register" class="drawer-item" @click="open = false">
+        <UserPlus :size="18" />
+        Creează cont gratuit
+      </router-link>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useLandingTheme } from '@/composables/useLandingTheme'
+import { LayoutDashboard, Menu, X, LogIn, UserPlus } from 'lucide-vue-next'
+
+defineProps<{
+  hideLogin?: boolean
+  hideRegister?: boolean
+}>()
+
+const { themeLabel, cycleTheme } = useLandingTheme()
+const open = ref(false)
+const navRef = ref<HTMLElement | null>(null)
+
+// pointerdown, not click: click fires after Vue re-renders the burger icon
+// (☰→X), so its original SVG target is already detached and would read as
+// "outside", closing the drawer in the same tap that opened it.
+const onOutsidePointer = (e: PointerEvent) => {
+  const target = e.target as Node | null
+  if (!open.value || !navRef.value || !target || !target.isConnected) return
+  if (!navRef.value.contains(target)) {
+    open.value = false
+  }
+}
+const onEscape = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') open.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onOutsidePointer)
+  document.addEventListener('keydown', onEscape)
+})
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onOutsidePointer)
+  document.removeEventListener('keydown', onEscape)
+})
+</script>
+
+<style scoped>
+/* Colors/fonts come from the .roa-landing token scope of the parent page. */
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 200;
+  background: var(--hbg);
+  backdrop-filter: saturate(180%) blur(10px);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.nav-inner {
+  max-width: var(--container);
+  margin: 0 auto;
+  height: 72px;
+  padding: 0 32px;
+  display: flex;
+  align-items: center;
+  gap: 28px;
+}
+.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.brand-logo-link { display: flex; flex: none; }
+.brand-logo { height: 48px; width: auto; display: block; }
+.brand-divider { width: 1px; height: 34px; background: var(--border-default); flex: none; }
+/* App brand color — the real accent used inside the ROA app (indigo). */
+.brand-app-icon { display: flex; align-items: center; color: #6366f1; flex: none; }
+.brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; text-decoration: none; min-width: 0; }
+.brand-word {
+  font-family: var(--font-mark);
+  font-weight: 700;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+  color: #6366f1;
+  white-space: nowrap;
+}
+.brand-sub {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--text-subtle);
+  white-space: nowrap;
+}
+
+.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
+.theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 38px;
+  padding: 0 13px;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: 1px solid var(--border-default);
+  color: var(--text-muted);
+  font-family: var(--font-body);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 180ms ease, border-color 180ms ease;
+}
+.theme-btn:hover { color: var(--text-strong); border-color: var(--brand); }
+.theme-label { line-height: 1; }
+.nav-login { font-size: 0.875rem; font-weight: 600; color: var(--text-body); text-decoration: none; white-space: nowrap; }
+.nav-login:hover { color: var(--brand); }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-family: var(--font-body);
+  font-weight: 600;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
+}
+.btn-sm { padding: 8px 16px; font-size: 0.875rem; height: 34px; }
+.btn-primary { background: var(--brand); color: #fff; }
+.btn-primary:hover { background: color-mix(in srgb, var(--brand) 82%, #000); color: #fff; }
+
+/* Burger + drawer (hidden on desktop) */
+.nav-burger {
+  display: none;
+  margin-left: auto;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border-radius: var(--radius-md);
+  background: transparent;
+  border: 1px solid var(--border-default);
+  color: var(--text-body);
+  cursor: pointer;
+}
+.nav-drawer { display: none; }
+
+@media (max-width: 640px) {
+  .nav-inner { height: 56px; padding: 0 16px; gap: 12px; }
+  /* Keep only the app brand on mobile; the Romfast logo stays in the footer. */
+  .brand-logo-link, .brand-divider, .brand-sub { display: none; }
+  .nav-actions { display: none; }
+  .nav-burger { display: flex; }
+
+  /* Floats over the page as a distinct card, anchored to the right. */
+  .nav-drawer {
+    position: absolute;
+    top: 100%;
+    right: 12px;
+    min-width: 240px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 4px;
+    padding: 10px;
+    margin-top: 6px;
+    background: var(--surface-card);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-md);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.16);
+  }
+  .drawer-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 10px;
+    padding: 12px 12px;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    font-family: var(--font-body);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: var(--text-body);
+    text-decoration: none;
+    cursor: pointer;
+    text-align: left;
+    white-space: nowrap;
+  }
+  .drawer-item svg { flex: none; color: var(--text-muted); }
+  .drawer-item:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
+  .drawer-item:hover svg { color: var(--brand); }
+}
+</style>

frontend/src/components/PublicShell.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="roa-landing" :data-theme="theme">
+    <div class="roa-page">
+      <!-- NAV — same as the landing -->
+      <PublicNav :hide-login="hideLogin" :hide-register="hideRegister" />
+
+      <main class="shell-main">
+        <slot />
+      </main>
+
+      <!-- FOOTER — same as the landing -->
+      <PublicFooter />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLandingTheme } from '@/composables/useLandingTheme'
+import PublicNav from '@/components/PublicNav.vue'
+import PublicFooter from '@/components/PublicFooter.vue'
+
+defineProps<{
+  hideLogin?: boolean
+  hideRegister?: boolean
+}>()
+
+const { theme } = useLandingTheme()
+</script>
+
+<style scoped>
+/* ── Theme palettes (same 8 themes as the landing) ── */
+.roa-landing,
+.roa-landing[data-theme="grafit"] {
+  --bg: #0f1218; --card: #181c24; --card2: #0f1218; --text: #e6e9ef;
+  --sub: #8b93a7; --mut: #5c6473; --line: #262b36; --line2: #1f2530;
+  --accent: #2E74D6; --hbg: rgba(15,18,24,.88); --okt: #2FBF8F; --errt: #E05D5D;
+}
+.roa-landing[data-theme="light"] {
+  --bg: #f5f7fa; --card: #ffffff; --card2: #f5f7fa; --text: #1a1d24;
+  --sub: #5c6473; --mut: #8a92a0; --line: #e2e5ea; --line2: #eaedf2;
+  --accent: #1F66C9; --hbg: rgba(245,247,250,.9); --okt: #15803d; --errt: #dc2626;
+}
+.roa-landing[data-theme="dark"] {
+  --bg: #0f1218; --card: #181c24; --card2: #0f1218; --text: #e6e9ef;
+  --sub: #8b93a7; --mut: #5c6473; --line: #262b36; --line2: #1f2530;
+  --accent: #2E74D6; --hbg: rgba(15,18,24,.88); --okt: #2FBF8F; --errt: #E05D5D;
+}
+.roa-landing[data-theme="petrol"] {
+  --bg: #0e1416; --card: #161e20; --card2: #0e1416; --text: #e6e9ef;
+  --sub: #8b93a7; --mut: #5c6473; --line: #232c2e; --line2: #1c2426;
+  --accent: #0E7C7B; --hbg: rgba(14,20,22,.9); --okt: #2FBF8F; --errt: #E05D5D;
+}
+.roa-landing[data-theme="cobalt"] {
+  --bg: #080d1c; --card: #111a33; --card2: #0b1226; --text: #e9ecfb;
+  --sub: #8a93b8; --mut: #5a6390; --line: #1d2747; --line2: #161f3a;
+  --accent: #4068FF; --hbg: rgba(8,13,28,.9); --okt: #2fd0a6; --errt: #f06a7a;
+}
+.roa-landing[data-theme="cupru"] {
+  --bg: #15110b; --card: #211a12; --card2: #15110b; --text: #efe6d6;
+  --sub: #a89a85; --mut: #6d5f4c; --line: #36291c; --line2: #281e14;
+  --accent: #D98A3D; --hbg: rgba(21,17,11,.9); --okt: #67b98c; --errt: #e2685a;
+}
+.roa-landing[data-theme="hartie"] {
+  --bg: #f3efe6; --card: #fffdf7; --card2: #f3efe6; --text: #1e1a13;
+  --sub: #6a6052; --mut: #9a8f7d; --line: #e2dccc; --line2: #ece6d9;
+  --accent: #1F5FBF; --hbg: rgba(255,253,247,.92); --okt: #1c7d5d; --errt: #bd463c;
+}
+
+/* ── Semantic tokens + remap of the app-level tokens ──
+   The app-level --color-* custom properties are redefined here so existing
+   page content (cards, forms, the public calendar) inherits the landing
+   theme without restyling each component. */
+.roa-landing {
+  --brand: var(--accent);
+  --brand-hover: color-mix(in srgb, var(--accent) 82%, #000);
+  --text-strong: var(--text);
+  --text-body: color-mix(in srgb, var(--text) 86%, var(--sub));
+  --text-muted: var(--sub);
+  --text-subtle: var(--mut);
+  --surface-page: var(--bg);
+  --surface-card: var(--card);
+  --border-subtle: var(--line2);
+  --border-default: var(--line);
+
+  --color-bg-primary: var(--bg);
+  --color-bg-secondary: var(--card2);
+  --color-bg-tertiary: color-mix(in srgb, var(--card) 60%, var(--bg));
+  --color-surface: var(--card);
+  --color-surface-hover: color-mix(in srgb, var(--card) 94%, var(--text));
+  --color-text-primary: var(--text);
+  --color-text-secondary: var(--sub);
+  --color-text-muted: var(--mut);
+  --color-accent: var(--accent);
+  --color-accent-hover: color-mix(in srgb, var(--accent) 82%, #000);
+  --color-accent-light: color-mix(in srgb, var(--accent) 14%, var(--card));
+  --color-success: var(--okt);
+  --color-danger: var(--errt);
+  --color-border: var(--line);
+  --color-border-light: var(--line2);
+
+  --font-display: 'Plus Jakarta Sans', sans-serif;
+  --font-body: 'Manrope', 'Plus Jakarta Sans', sans-serif;
+  --font-mark: 'Space Grotesk', sans-serif;
+  --radius-md: 10px;
+  --container: 1200px;
+
+  min-height: 100vh;
+  background: var(--surface-page);
+  color: var(--text-body);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+  transition: background 180ms ease, color 180ms ease;
+}
+.roa-page {
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  background: var(--surface-page);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.shell-main { flex: 1; display: flex; flex-direction: column; }
+
+</style>

frontend/src/router/index.ts

@@ -28,13 +28,13 @@ const router = createRouter({
       path: '/login',
       name: 'Login',
       component: Login,
-      meta: { requiresAuth: false }
+      meta: { requiresAuth: false, fullBleed: true }
     },
     {
       path: '/register',
       name: 'Register',
       component: () => import('@/views/Register.vue'),
-      meta: { requiresAuth: false }
+      meta: { requiresAuth: false, fullBleed: true }
     },
     {
       path: '/verify',
@@ -46,7 +46,7 @@ const router = createRouter({
       path: '/book/:slug?',
       name: 'PublicBooking',
       component: () => import('@/views/PublicBooking.vue'),
-      meta: { requiresAuth: false, isPublic: true }
+      meta: { requiresAuth: false, isPublic: true, fullBleed: true }
     },
     {
       path: '/dashboard',
@@ -138,9 +138,15 @@ const router = createRouter({
 })
 
 // Navigation guard
-router.beforeEach((to, _from, next) => {
+router.beforeEach(async (to, _from, next) => {
   const authStore = useAuthStore()
 
+  // On a hard page load the user is fetched asynchronously; wait for it so
+  // role-based checks below don't reject a deep link before the user exists.
+  if (authStore.token && !authStore.user) {
+    await authStore.ready
+  }
+
   if (to.meta.isPublic) {
     next()
   } else if (to.meta.requiresAuth && !authStore.isAuthenticated) {

frontend/src/stores/auth.ts

@@ -37,11 +37,14 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
-  initFromToken()
+  // Router guards await this so role checks don't run before the user loads
+  // on a hard page load (deep link to a manager/admin route).
+  const ready = initFromToken()
 
   return {
     token,
     user,
+    ready,
     isAuthenticated,
     isAdmin,
     isSuperadmin,

frontend/src/views/Landing.vue

@@ -2,36 +2,7 @@
   <div class="roa-landing" :data-theme="theme">
    <div class="roa-page">
     <!-- NAV -->
-    <header class="nav">
+    <PublicNav />
-      <div class="nav-inner">
-        <div class="brand">
-          <img src="/romfast_logo.png" alt="Romfast" class="brand-logo" />
-          <span class="brand-divider"></span>
-          <span class="brand-app-icon"><LayoutDashboard :size="26" /></span>
-          <span class="brand-text">
-            <span class="brand-word">ROA Space</span>
-            <span class="brand-sub">Rezervări de spații</span>
-          </span>
-        </div>
-        <div class="nav-actions">
-          <button
-            type="button"
-            class="theme-btn"
-            @click="cycleTheme"
-            :title="`Temă: ${themeLabel}`"
-            aria-label="Schimbă tema"
-          >
-            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
-              <circle cx="12" cy="12" r="9" />
-              <path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none" />
-            </svg>
-            <span class="theme-label">{{ themeLabel }}</span>
-          </button>
-          <router-link to="/login" class="nav-login">Autentificare</router-link>
-          <router-link to="/register" class="btn btn-primary btn-sm">{{ ctaText }}</router-link>
-        </div>
-      </div>
-    </header>
 
     <main id="top">
       <!-- HERO -->
@@ -45,10 +16,7 @@
           </p>
           <div class="hero-cta">
             <router-link to="/register" class="btn btn-primary btn-lg">{{ ctaText }}</router-link>
-            <a href="#cum" class="btn btn-secondary btn-lg">Vezi cum arată</a>
-            <router-link to="/book" class="btn btn-ghost btn-lg">Rezervă fără cont</router-link>
           </div>
-          <p class="hero-note">Cont gratuit, gata în câteva secunde.</p>
         </div>
 
         <!-- Interactive booking card (same app style as the mockups below) -->
@@ -87,13 +55,53 @@
         </div>
       </section>
 
-      <!-- PRODUCT SHOWCASE -->
+      <!-- PUBLIC PROPERTIES — accent band, right under the hero -->
-      <section id="cum" class="showcase">
+      <section v-if="showLandingProperties" class="landing-properties">
+        <div class="lp-inner">
+          <h2>Spații deschise rezervării acum</h2>
+
+          <div class="lp-grid">
+            <template v-if="loadingProperties">
+              <div v-for="i in 3" :key="`sk-${i}`" class="lp-card lp-skeleton">
+                <div class="lp-skel-line lp-skel-title"></div>
+                <div class="lp-skel-line lp-skel-sub"></div>
+                <div class="lp-skel-line lp-skel-sub short"></div>
+              </div>
+            </template>
+            <template v-else>
+              <router-link
+                v-for="p in landingProperties"
+                :key="p.id"
+                :to="`/book/${p.slug || p.id}`"
+                class="lp-card"
+              >
+                <div class="lp-card-head">
+                  <h3>{{ p.name }}</h3>
+                  <span v-if="p.slug === 'proprietate-demo'" class="lp-badge">Demo</span>
+                </div>
+                <p v-if="p.address" class="lp-address"><MapPin :size="14" />{{ p.address }}</p>
+                <p class="lp-count">{{ p.space_count ?? 0 }} {{ (p.space_count ?? 0) === 1 ? 'spațiu' : 'spații' }}</p>
+                <p v-if="p.slug === 'proprietate-demo'" class="lp-demo-note">se resetează la 3 ore</p>
+                <span class="lp-cta">Rezervă acum →</span>
+              </router-link>
+            </template>
+          </div>
+        </div>
+      </section>
+
+      <!-- PRODUCT SHOWCASE — labeled band so the mockups read as demos -->
+      <section id="cum" class="showcase-band">
+       <div class="showcase">
+        <div class="showcase-head">
+          <h2>Vezi cum arată aplicația</h2>
+          <p class="showcase-sub">Capturi demonstrative din ROA Space — nu sunt controale reale.</p>
+        </div>
         <!-- Screen 1 — Dashboard -->
         <div class="app-window">
           <div class="app-bar">
             <span class="app-dot"></span><span class="app-dot"></span><span class="app-dot"></span>
             <span class="app-url">roa.space/dashboard</span>
+            <span class="app-bar-tag">Demonstrație</span>
           </div>
           <div class="app-body">
             <aside class="app-side">
@@ -139,6 +147,7 @@
           <div class="app-bar">
             <span class="app-dot"></span><span class="app-dot"></span><span class="app-dot"></span>
             <span class="app-url">roa.space/spaces</span>
+            <span class="app-bar-tag">Demonstrație</span>
           </div>
           <div class="app-body">
             <aside class="app-side">
@@ -186,6 +195,7 @@
           <div class="app-bar">
             <span class="app-dot"></span><span class="app-dot"></span><span class="app-dot"></span>
             <span class="app-url">roa.space/spaces/aurora-room</span>
+            <span class="app-bar-tag">Demonstrație</span>
           </div>
           <div class="app-body">
             <aside class="app-side">
@@ -231,39 +241,7 @@
             </div>
           </div>
         </div>
-      </section>
+       </div>
-
-      <!-- PUBLIC PROPERTIES -->
-      <section v-if="showLandingProperties" class="landing-properties">
-        <h2>Spații deschise rezervării acum</h2>
-        <p class="landing-properties-sub">Alege un spațiu și rezervă fără cont, în câteva minute.</p>
-
-        <div class="lp-grid">
-          <template v-if="loadingProperties">
-            <div v-for="i in 3" :key="`sk-${i}`" class="lp-card lp-skeleton">
-              <div class="lp-skel-line lp-skel-title"></div>
-              <div class="lp-skel-line lp-skel-sub"></div>
-              <div class="lp-skel-line lp-skel-sub short"></div>
-            </div>
-          </template>
-          <template v-else>
-            <router-link
-              v-for="p in landingProperties"
-              :key="p.id"
-              :to="`/book/${p.slug || p.id}`"
-              class="lp-card"
-            >
-              <div class="lp-card-head">
-                <h3>{{ p.name }}</h3>
-                <span v-if="p.slug === 'proprietate-demo'" class="lp-badge">Demo</span>
-              </div>
-              <p v-if="p.address" class="lp-address"><MapPin :size="14" />{{ p.address }}</p>
-              <p class="lp-count">{{ p.space_count ?? 0 }} {{ (p.space_count ?? 0) === 1 ? 'spațiu' : 'spații' }}</p>
-              <p v-if="p.slug === 'proprietate-demo'" class="lp-demo-note">se resetează la 3 ore</p>
-              <span class="lp-cta">Rezervă acum →</span>
-            </router-link>
-          </template>
-        </div>
       </section>
 
       <!-- CTA BAND -->
@@ -280,17 +258,7 @@
     </main>
 
     <!-- FOOTER -->
-    <footer class="footer">
+    <PublicFooter />
-      <div class="footer-inner">
-        <span class="footer-copy">© 2026 ROMFAST · Constanța, din 1991</span>
-        <nav class="footer-links">
-          <router-link to="/termeni">Termeni</router-link>
-          <router-link to="/confidentialitate">Confidențialitate / GDPR</router-link>
-          <a href="https://romfast.ro/menu/contact.html" target="_blank" rel="noopener">Contact</a>
-          <a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a>
-        </nav>
-      </div>
-    </footer>
    </div>
   </div>
 </template>
@@ -298,6 +266,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useLandingTheme } from '@/composables/useLandingTheme'
+import PublicNav from '@/components/PublicNav.vue'
+import PublicFooter from '@/components/PublicFooter.vue'
 import { publicApi } from '@/services/api'
 import type { Property } from '@/types'
 import {
@@ -314,7 +284,7 @@ import {
 
 const ctaText = 'Creează cont gratuit'
 
-const { theme, themeLabel, cycleTheme } = useLandingTheme()
+const { theme } = useLandingTheme()
 
 interface Slot {
   time: string
@@ -400,8 +370,8 @@ const showLandingProperties = computed(() => {
 
 onMounted(async () => {
   try {
-    const props = await publicApi.getProperties()
+    // All public+active properties — same list as the /book picker.
-    landingProperties.value = (props || []).filter((p) => p.list_on_landing === true)
+    landingProperties.value = (await publicApi.getProperties()) || []
   } catch {
     propertiesFetchFailed.value = true
     landingProperties.value = []
@@ -532,71 +502,6 @@ onMounted(async () => {
   border-color: var(--border-default);
 }
 .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
-.btn-ghost {
-  background: transparent;
-  color: var(--text-muted);
-  border-color: transparent;
-}
-.btn-ghost:hover { color: var(--brand); border-color: var(--border-default); }
-
-/* ── Nav ── */
-.nav {
-  position: sticky;
-  top: 0;
-  z-index: 200;
-  background: var(--hbg);
-  backdrop-filter: saturate(180%) blur(10px);
-  border-bottom: 1px solid var(--border-subtle);
-}
-.nav-inner {
-  max-width: var(--container);
-  margin: 0 auto;
-  height: 80px;
-  padding: 0 32px;
-  display: flex;
-  align-items: center;
-  gap: 28px;
-}
-.brand { display: flex; align-items: center; gap: 14px; }
-.brand-logo { height: 60px; width: auto; display: block; }
-.brand-divider { width: 1px; height: 38px; background: var(--border-default); }
-/* App brand color — the real accent used inside the ROA app (indigo). */
-.brand-app-icon { display: flex; align-items: center; color: #6366f1; flex: none; }
-.brand-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; }
-.brand-word {
-  font-family: var(--font-mark);
-  font-weight: 700;
-  font-size: 18px;
-  letter-spacing: -0.01em;
-  color: #6366f1;
-}
-.brand-sub {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: var(--text-subtle);
-}
-.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
-.theme-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 38px;
-  padding: 0 13px;
-  border-radius: var(--radius-md);
-  background: transparent;
-  border: 1px solid var(--border-default);
-  color: var(--text-muted);
-  font-family: var(--font-body);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: color 180ms ease, border-color 180ms ease;
-}
-.theme-btn:hover { color: var(--text-strong); border-color: var(--brand); }
-.theme-label { line-height: 1; }
-.nav-login { font-size: 0.875rem; font-weight: 600; color: var(--text-body); }
-.nav-login:hover { color: var(--brand); }
 
 /* ── Hero ── */
 .hero {
@@ -695,21 +600,21 @@ onMounted(async () => {
 
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
 
-/* ── Public properties open for booking ── */
+/* ── Public properties open for booking — accent band under the hero ── */
 .landing-properties {
+  background: color-mix(in srgb, var(--accent) 7%, var(--card));
+  border-top: 1px solid var(--border-subtle);
+  border-bottom: 1px solid var(--border-subtle);
+}
+.lp-inner {
   max-width: var(--container);
   margin: 0 auto;
-  padding: 8px 32px 64px;
+  padding: 48px 32px 52px;
 }
 .landing-properties h2 {
   font-size: 1.875rem;
   letter-spacing: -0.02em;
-  margin-bottom: 8px;
+  margin-bottom: 24px;
-}
-.landing-properties-sub {
-  font-size: 1rem;
-  color: var(--text-muted);
-  margin: 0 0 28px;
 }
 .lp-grid {
   display: grid;
@@ -778,7 +683,8 @@ onMounted(async () => {
   margin: 0;
 }
 .lp-cta {
-  margin-top: 10px;
+  margin-top: auto;
+  padding-top: 10px;
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--brand);
@@ -816,28 +722,41 @@ onMounted(async () => {
 .cta-inner p { font-size: 1.125rem; line-height: 1.55; color: var(--text-muted); margin: 0 auto 30px; max-width: 440px; }
 .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
 
-/* ── Footer ── */
+/* ── Product showcase (faithful app screenshots) — muted, labeled band so
-.footer { background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
+   the mockups don't read as live controls or as the public-properties band ── */
-.footer-inner {
+.showcase-band {
-  max-width: var(--container);
+  background: color-mix(in srgb, var(--text) 3%, var(--bg));
-  margin: 0 auto;
+  border-bottom: 1px solid var(--border-subtle);
-  padding: 28px 32px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 16px;
 }
-.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
-.footer-links a { font-size: 0.875rem; color: var(--text-muted); }
-.footer-links a:hover { color: var(--brand); }
-.footer-copy { font-size: 0.8125rem; color: var(--text-subtle); }
-
-/* ── Product showcase (faithful app screenshots) ── */
 .showcase {
   max-width: 1040px;
   margin: 0 auto;
-  padding: 40px 32px 64px;
+  padding: 48px 32px 64px;
+}
+.showcase-head { margin-bottom: 28px; }
+.showcase-head h2 {
+  font-size: 1.875rem;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+.showcase-sub {
+  font-size: 1rem;
+  color: var(--text-muted);
+  margin: 0;
+}
+.app-bar-tag {
+  margin-left: auto;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ts);
+  background: var(--bg3);
+  border: 1px solid var(--bd);
+  border-radius: 10px;
+  padding: 3px 10px;
+  white-space: nowrap;
+  flex: none;
 }
 
 /* App tokens — fixed to the real app's light theme so the mockups read as
@@ -1081,10 +1000,7 @@ onMounted(async () => {
   .hero { grid-template-columns: 1fr; gap: 40px; }
   .hero { padding: 56px 24px 48px; }
   .hero-copy h1 { font-size: 2.5rem; }
-  .nav-inner { padding: 0 20px; gap: 16px; }
-  .nav-links { display: none; }
   .cta-inner { padding: 64px 24px; }
-  .footer-inner { padding: 32px 24px; }
   .showcase { padding: 32px 20px 48px; }
 }
 @media (max-width: 620px) {
@@ -1095,14 +1011,9 @@ onMounted(async () => {
   .app-cal-track { height: 180px; }
   .app-search { display: none; }
 }
-@media (max-width: 560px) {
-  .theme-label { display: none; }
-  .theme-btn { padding: 0 10px; }
-}
 @media (max-width: 480px) {
   .hero-copy h1 { font-size: 2rem; }
   .btn-lg { padding: 12px 20px; font-size: 0.9375rem; }
-  .nav-login { display: none; }
   .app-pills { gap: 6px; }
 }
 </style>

frontend/src/views/Login.vue

@@ -1,4 +1,5 @@
 <template>
+  <PublicShell hide-login>
   <div class="login-container">
     <div class="login-card card">
       <h2>Space Booking</h2>
@@ -48,6 +49,7 @@
       </p>
     </div>
   </div>
+  </PublicShell>
 </template>
 
 <script setup lang="ts">
@@ -55,6 +57,7 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { handleApiError } from '@/services/api'
+import PublicShell from '@/components/PublicShell.vue'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -89,11 +92,11 @@ const handleLogin = async () => {
 
 <style scoped>
 .login-container {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  padding: 3rem 1rem;
-  padding: 1rem;
 }
 
 .login-card {

frontend/src/views/PropertyDetail.vue

@@ -656,7 +656,8 @@ const renderQr = async () => {
     const mod = await import('qrcode')
     // `qrcode` is CommonJS; under Vite its methods land on `.default`.
     const QRCode = (mod as any).default ?? mod
-    await QRCode.toCanvas(qrCanvas.value, publicBookingIdUrl.value, {
+    // Prefer the slug URL; fall back to the id URL for properties without a slug.
+    await QRCode.toCanvas(qrCanvas.value, publicBookingUrl.value || publicBookingIdUrl.value, {
       width: 512,
       margin: 4
     })
@@ -670,7 +671,7 @@ const renderQr = async () => {
 // Render the QR whenever the canvas is mounted and the property is public.
 // (renderQr called during load() can run before the canvas ref binds.)
 watch(
-  [qrCanvas, () => property.value?.is_public, publicBookingIdUrl],
+  [qrCanvas, () => property.value?.is_public, publicBookingUrl, publicBookingIdUrl],
   ([canvas, isPublic]) => {
     if (canvas && isPublic) renderQr()
   }

frontend/src/views/PublicBooking.vue

@@ -1,4 +1,5 @@
 <template>
+  <PublicShell>
   <div class="public-booking-page">
     <!-- Property picker (no slug in route) -->
     <div v-if="phase === 'picker'" class="picker-wrap">
@@ -138,6 +139,7 @@
       </p>
     </div>
   </div>
+  </PublicShell>
 </template>
 
 <script setup lang="ts">
@@ -148,6 +150,7 @@ import { publicApi, handleApiError } from '@/services/api'
 import type { Property, Space, Booking, AnonymousBookingCreate } from '@/types'
 import PublicCalendar from '@/components/PublicCalendar.vue'
 import GuestBookingForm from '@/components/GuestBookingForm.vue'
+import PublicShell from '@/components/PublicShell.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -289,8 +292,7 @@ init()
 
 <style scoped>
 .public-booking-page {
-  min-height: 100vh;
+  flex: 1;
-  background: var(--color-bg-primary);
   padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem;
 }
 

frontend/src/views/Register.vue

@@ -1,4 +1,5 @@
 <template>
+  <PublicShell hide-register>
   <div class="register-container">
     <div class="register-card card">
       <h2>Create Account</h2>
@@ -86,12 +87,14 @@
       </p>
     </div>
   </div>
+  </PublicShell>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { authApi, handleApiError } from '@/services/api'
+import PublicShell from '@/components/PublicShell.vue'
 
 const router = useRouter()
 
@@ -130,11 +133,11 @@ const handleRegister = async () => {
 
 <style scoped>
 .register-container {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 100vh;
+  padding: 3rem 1rem;
-  padding: 1rem;
 }
 
 .register-card {