feat(frontend): pagini Termeni, Confidențialitate/GDPR și Contact

Activează linkurile din footer-ul landing-ului către pagini reale, în stilul paginilor statice din autopass. - Componentă comună LegalPage.vue: același antet (brand + selector de temă), footer și paletă (8 teme) ca landing-ul, cu slot "prose" - Logica temei extrasă în composable useLandingTheme (partajat de landing și paginile legale, persistat în localStorage) - Rute publice /termeni, /confidentialitate, /contact (fullBleed) - Footer-ul (landing + pagini) trimite acum la aceste rute Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-10 18:10:17 +00:00
parent 2c417bf36a
commit b2080e79b2
7 changed files with 464 additions and 34 deletions
--- a/frontend/src/components/LegalPage.vue
+++ b/frontend/src/components/LegalPage.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="roa-landing" :data-theme="theme">
+    <div class="roa-page">
+      <!-- NAV -->
+      <header class="nav">
+        <div class="nav-inner">
+          <router-link to="/" class="brand">
+            <img src="/romfast_logo.png" alt="Romfast" class="brand-logo" />
+            <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>
+          </router-link>
+          <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">
+        <h1>{{ title }}</h1>
+        <p v-if="subtitle" class="prose-sub">{{ subtitle }}</p>
+        <slot />
+      </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>
+            <router-link to="/contact">Contact</router-link>
+            <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'
+
+defineProps<{
+  title: string
+  subtitle?: string
+}>()
+
+const { theme, themeLabel, cycleTheme } = 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 ── */
+.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);
+
+  --font-display: 'Plus Jakarta Sans', sans-serif;
+  --font-body: 'Manrope', 'Plus Jakarta Sans', sans-serif;
+  --font-mark: 'Space Grotesk', sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --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); }
+
+/* ── 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 { 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(--text-strong);
+}
+.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),
+.prose h1 {
+  font-family: var(--font-display); font-size: 2.25rem; line-height: 1.15;
+  letter-spacing: -0.02em; color: var(--text-strong); font-weight: 700; margin: 0 0 8px;
+}
+.prose-sub { font-size: 0.875rem; color: var(--text-subtle); margin: 0 0 36px; }
+.prose :deep(h2) {
+  font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.3;
+  letter-spacing: -0.01em; color: var(--text-strong); font-weight: 700; margin: 36px 0 10px;
+}
+.prose :deep(p), .prose :deep(li) { font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); }
+.prose :deep(p) { margin: 0 0 12px; }
+.prose :deep(ul) { margin: 0 0 12px; padding-left: 22px; }
+.prose :deep(li) { margin-bottom: 6px; }
+.prose :deep(strong) { color: var(--text-strong); font-weight: 600; }
+.prose :deep(a) { color: var(--brand); text-decoration: none; }
+.prose :deep(a:hover) { text-decoration: underline; }
+.prose :deep(table) { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
+.prose :deep(th), .prose :deep(td) {
+  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-default);
+  font-size: 0.875rem; line-height: 1.5; color: var(--text-muted);
+}
+.prose :deep(th) { color: var(--text-strong); font-weight: 600; }
+.prose :deep(.card) {
+  background: var(--surface-card); border: 1px solid var(--border-default);
+  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>
--- a/frontend/src/composables/useLandingTheme.ts
+++ b/frontend/src/composables/useLandingTheme.ts
@@ -0,0 +1,43 @@
+import { ref, computed } from 'vue'
+
+/**
+ * Theme selector for the public pages (landing + legal/contact).
+ * Same 8 themes and cycle order as the ROA app / autopass landing.
+ * Persisted under its own key so it doesn't clash with the in-app theme.
+ */
+const THEMES: [string, string][] = [
+  ['light', 'Light'],
+  ['dark', 'Dark'],
+  ['petrol', 'Petrol'],
+  ['grafit', 'Grafit'],
+  ['cobalt', 'Cobalt'],
+  ['cupru', 'Cupru'],
+  ['hartie', 'Hârtie'],
+  ['auto', 'Auto']
+]
+const THEME_KEY = 'roa-landing-theme'
+const VALID = new Set(THEMES.map((t) => t[0]))
+
+function resolve(id: string): string {
+  if (id === 'auto') {
+    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+  }
+  return id
+}
+
+// Module-level singleton so every public page shares the same selection.
+const stored = localStorage.getItem(THEME_KEY)
+const themeId = ref(stored && VALID.has(stored) ? stored : 'grafit')
+
+export function useLandingTheme() {
+  const theme = computed(() => resolve(themeId.value))
+  const themeLabel = computed(() => THEMES.find((t) => t[0] === themeId.value)?.[1] ?? 'Grafit')
+
+  function cycleTheme() {
+    const idx = THEMES.findIndex((t) => t[0] === themeId.value)
+    themeId.value = THEMES[(idx + 1) % THEMES.length][0]
+    localStorage.setItem(THEME_KEY, themeId.value)
+  }
+
+  return { themeId, theme, themeLabel, cycleTheme }
+}
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -12,6 +12,24 @@ const router = createRouter({
      component: () => import('@/views/Landing.vue'),
      meta: { requiresAuth: false, fullBleed: true }
    },
+    {
+      path: '/termeni',
+      name: 'Termeni',
+      component: () => import('@/views/Termeni.vue'),
+      meta: { requiresAuth: false, fullBleed: true }
+    },
+    {
+      path: '/confidentialitate',
+      name: 'Confidentialitate',
+      component: () => import('@/views/Confidentialitate.vue'),
+      meta: { requiresAuth: false, fullBleed: true }
+    },
+    {
+      path: '/contact',
+      name: 'Contact',
+      component: () => import('@/views/Contact.vue'),
+      meta: { requiresAuth: false, fullBleed: true }
+    },
    {
      path: '/login',
      name: 'Login',
--- a/frontend/src/views/Confidentialitate.vue
+++ b/frontend/src/views/Confidentialitate.vue
@@ -0,0 +1,76 @@
+<template>
+  <LegalPage title="Politica de confidențialitate / GDPR" subtitle="Ultima actualizare: 10 iulie 2026">
+    <h2>1. Cine prelucrează datele</h2>
+    <p>
+      Operatorul datelor este <strong>ROMFAST</strong>, furnizorul serviciului ROA Space.
+      Ne poți contacta oricând la <a href="mailto:contact@romfast.ro">contact@romfast.ro</a>.
+    </p>
+
+    <h2>2. Ce date prelucrăm și de ce</h2>
+    <table>
+      <thead><tr><th>Date</th><th>Scop</th><th>Temei</th></tr></thead>
+      <tbody>
+        <tr>
+          <td>Date de cont: nume, email, parolă (stocată ca hash)</td>
+          <td>Crearea și administrarea contului</td>
+          <td>Executarea contractului</td>
+        </tr>
+        <tr>
+          <td>Rezervări: spațiu, interval orar, titlu/descriere</td>
+          <td>Gestionarea rezervărilor și evitarea suprapunerilor</td>
+          <td>Executarea contractului</td>
+        </tr>
+        <tr>
+          <td>Rezervări ca oaspete: nume și email introduse la rezervare</td>
+          <td>Identificarea cererii și confirmarea rezervării</td>
+          <td>Interes legitim / executarea contractului</td>
+        </tr>
+        <tr>
+          <td>Jurnal tehnic (autentificări, acțiuni administrative)</td>
+          <td>Securitate, suport, dovada acțiunilor</td>
+          <td>Interes legitim</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Nu colectăm date suplimentare față de cele necesare funcționării rezervărilor și nu folosim datele în scop de marketing.</p>
+
+    <h2>3. Cui le transmitem</h2>
+    <p>
+      Dacă activezi sincronizarea cu <strong>Google Calendar</strong>, evenimentele rezervărilor tale
+      sunt transmise contului tău Google, la cererea ta. În rest nu vindem și nu cedăm datele către alte părți.
+    </p>
+
+    <h2>4. Cât le păstrăm</h2>
+    <ul>
+      <li>Datele de cont se păstrează cât timp contul este activ.</li>
+      <li>Poți șterge rezervările din aplicație; le poți solicita ștergerea completă oricând.</li>
+      <li>La ștergerea contului, datele asociate sunt eliminate, cu excepția celor cerute de lege.</li>
+    </ul>
+
+    <h2>5. Cum le protejăm</h2>
+    <ul>
+      <li>Parolele se stochează doar ca hash, niciodată în clar.</li>
+      <li>Accesul la date este separat pe roluri și pe proprietăți: nu vezi datele la care nu ai drept.</li>
+      <li>Conexiunile către serviciu sunt criptate (HTTPS).</li>
+    </ul>
+
+    <h2>6. Drepturile tale</h2>
+    <p>
+      Conform GDPR ai dreptul de acces, rectificare, ștergere, restricționare, portabilitate și opoziție,
+      precum și dreptul de a depune o plângere la ANSPDCP
+      (<a href="https://www.dataprotection.ro" target="_blank" rel="noopener">dataprotection.ro</a>).
+      Pentru exercitarea drepturilor scrie-ne la <a href="mailto:contact@romfast.ro">contact@romfast.ro</a> —
+      răspundem în cel mult 30 de zile.
+    </p>
+
+    <h2>7. Cookies</h2>
+    <p>
+      Folosim doar cookie-uri și stocare locală strict necesare (sesiunea de autentificare și preferințe
+      precum tema aleasă). Nu folosim cookie-uri de tracking sau de marketing.
+    </p>
+  </LegalPage>
+</template>
+
+<script setup lang="ts">
+import LegalPage from '@/components/LegalPage.vue'
+</script>
--- a/frontend/src/views/Contact.vue
+++ b/frontend/src/views/Contact.vue
@@ -0,0 +1,30 @@
+<template>
+  <LegalPage title="Contact" subtitle="Suntem aici pentru orice întrebare despre ROA Space.">
+    <p>
+      <strong>ROA Space</strong> este un serviciu operat de <strong>ROMFAST</strong>, din Constanța, din 1991.
+      Scrie-ne și îți răspundem cât putem de repede.
+    </p>
+
+    <h2>Email</h2>
+    <p><a href="mailto:contact@romfast.ro">contact@romfast.ro</a> — pentru suport, întrebări și solicitări GDPR.</p>
+
+    <h2>Web</h2>
+    <p><a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a> — despre ROMFAST și celelalte servicii.</p>
+
+    <h2>Ai deja cont?</h2>
+    <p>
+      Poți intra direct în aplicație la <router-link to="/login">Autentificare</router-link>
+      sau îți creezi unul gratuit la <router-link to="/register">Creează cont</router-link>.
+    </p>
+
+    <h2>Documente</h2>
+    <p>
+      <router-link to="/termeni">Termeni și condiții</router-link> ·
+      <router-link to="/confidentialitate">Confidențialitate / GDPR</router-link>
+    </p>
+  </LegalPage>
+</template>
+
+<script setup lang="ts">
+import LegalPage from '@/components/LegalPage.vue'
+</script>
--- a/frontend/src/views/Landing.vue
+++ b/frontend/src/views/Landing.vue
@@ -172,9 +172,9 @@
      <div class="footer-inner">
        <span class="footer-copy">© 2026 ROMFAST · Constanța, din 1991</span>
        <nav class="footer-links">
-          <a href="#">Termeni</a>
-          <a href="#">Confidențialitate / GDPR</a>
-          <a href="#">Contact</a>
+          <router-link to="/termeni">Termeni</router-link>
+          <router-link to="/confidentialitate">Confidențialitate / GDPR</router-link>
+          <router-link to="/contact">Contact</router-link>
          <a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a>
        </nav>
      </div>
@@ -185,40 +185,11 @@

 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { useLandingTheme } from '@/composables/useLandingTheme'

 const ctaText = 'Creează cont gratuit'

-/* Theme selector — same 8 themes and cycle order as the ROA app / autopass landing. */
-const THEMES: [string, string][] = [
-  ['light', 'Light'],
-  ['dark', 'Dark'],
-  ['petrol', 'Petrol'],
-  ['grafit', 'Grafit'],
-  ['cobalt', 'Cobalt'],
-  ['cupru', 'Cupru'],
-  ['hartie', 'Hârtie'],
-  ['auto', 'Auto']
-]
-const THEME_KEY = 'roa-landing-theme'
-const VALID = new Set(THEMES.map((t) => t[0]))
-
-function resolve(id: string): string {
-  if (id === 'auto') {
-    return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
-  }
-  return id
-}
-
-const stored = localStorage.getItem(THEME_KEY)
-const themeId = ref(stored && VALID.has(stored) ? stored : 'grafit')
-const theme = computed(() => resolve(themeId.value))
-const themeLabel = computed(() => THEMES.find((t) => t[0] === themeId.value)?.[1] ?? 'Grafit')
-
-function cycleTheme() {
-  const idx = THEMES.findIndex((t) => t[0] === themeId.value)
-  themeId.value = THEMES[(idx + 1) % THEMES.length][0]
-  localStorage.setItem(THEME_KEY, themeId.value)
-}
+const { theme, themeLabel, cycleTheme } = useLandingTheme()

 interface Slot {
  time: string
--- a/frontend/src/views/Termeni.vue
+++ b/frontend/src/views/Termeni.vue
@@ -0,0 +1,60 @@
+<template>
+  <LegalPage title="Termeni și condiții" subtitle="Ultima actualizare: 10 iulie 2026">
+    <h2>1. Serviciul</h2>
+    <p>
+      <strong>ROA Space</strong> este un serviciu operat de <strong>ROMFAST</strong> care te ajută să
+      administrezi și să rezervi spații — birouri, săli de ședință, open space-uri sau hub-uri — și să
+      vezi în timp real ce este liber și ce este ocupat.
+    </p>
+    <p>
+      Serviciul este un instrument de organizare a rezervărilor: nu garantează accesul fizic în spații
+      și nu înlocuiește regulile interne ale organizației care le pune la dispoziție.
+    </p>
+
+    <h2>2. Contul</h2>
+    <ul>
+      <li>Contul se creează gratuit, pe baza unui email și a unei parole.</li>
+      <li>Primul cont înregistrat pe o instanță devine administrator (proprietarul instanței).</li>
+      <li>Ești responsabil de confidențialitatea parolei și de activitatea desfășurată din contul tău.</li>
+    </ul>
+
+    <h2>3. Rezervări</h2>
+    <ul>
+      <li>O rezervare validă ocupă un interval; sistemul nu permite suprapuneri pe același spațiu.</li>
+      <li>Spațiile pot fi <strong>publice</strong> (rezervabile și fără cont, ca oaspete) sau <strong>private</strong>.</li>
+      <li>Administratorul spațiului poate cere aprobarea manuală a fiecărei cereri de rezervare.</li>
+    </ul>
+
+    <h2>4. Ce garantăm și ce nu</h2>
+    <ul>
+      <li>Depunem eforturi rezonabile ca serviciul să fie disponibil, dar nu garantăm funcționarea neîntreruptă.</li>
+      <li>Nu răspundem pentru neînțelegeri privind utilizarea efectivă a spațiilor rezervate.</li>
+      <li>Răspunderea ROMFAST este limitată la contravaloarea eventualului abonament plătit pe ultimele 3 luni.</li>
+    </ul>
+
+    <h2>5. Utilizare acceptabilă</h2>
+    <p>
+      Este interzisă folosirea serviciului pentru a bloca abuziv spații, pentru a rezerva în numele altor
+      persoane fără acordul lor sau în orice mod care afectează funcționarea platformei. Conturile care
+      încalcă aceste reguli pot fi suspendate.
+    </p>
+
+    <h2>6. Datele tale</h2>
+    <p>
+      Prelucrarea datelor cu caracter personal este descrisă în
+      <router-link to="/confidentialitate">Politica de confidențialitate / GDPR</router-link>.
+      Pe scurt: reținem doar strictul necesar pentru funcționarea rezervărilor.
+    </p>
+
+    <h2>7. Contact</h2>
+    <p>
+      Pentru orice întrebare legată de acești termeni:
+      <a href="mailto:contact@romfast.ro">contact@romfast.ro</a> sau pagina de
+      <router-link to="/contact">Contact</router-link>.
+    </p>
+  </LegalPage>
+</template>
+
+<script setup lang="ts">
+import LegalPage from '@/components/LegalPage.vue'
+</script>