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>

frontend/src/views/Landing.vue

@@ -2,36 +2,7 @@
   <div class="roa-landing" :data-theme="theme">
    <div class="roa-page">
     <!-- NAV -->
-    <header class="nav">
-      <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>
+    <PublicNav />
 
     <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 -->
-      <section id="cum" class="showcase">
+      <!-- PUBLIC PROPERTIES — accent band, right under the hero -->
+      <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>
-
-      <!-- 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>
+       </div>
       </section>
 
       <!-- CTA BAND -->
@@ -280,17 +258,7 @@
     </main>
 
     <!-- FOOTER -->
-    <footer class="footer">
-      <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>
+    <PublicFooter />
    </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()
-    landingProperties.value = (props || []).filter((p) => p.list_on_landing === true)
+    // All public+active properties — same list as the /book picker.
+    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;
-}
-.landing-properties-sub {
-  font-size: 1rem;
-  color: var(--text-muted);
-  margin: 0 0 28px;
+  margin-bottom: 24px;
 }
 .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 ── */
-.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;
+/* ── Product showcase (faithful app screenshots) — muted, labeled band so
+   the mockups don't read as live controls or as the public-properties band ── */
+.showcase-band {
+  background: color-mix(in srgb, var(--text) 3%, var(--bg));
+  border-bottom: 1px solid var(--border-subtle);
 }
-.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: 1rem;
+  padding: 3rem 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;
-  background: var(--color-bg-primary);
+  flex: 1;
   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: 1rem;
+  padding: 3rem 1rem;
 }
 
 .register-card {