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>
This commit is contained in:
Claude Agent
2026-07-10 18:10:17 +00:00
parent 2c417bf36a
commit b2080e79b2
7 changed files with 464 additions and 34 deletions

View File

@@ -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>

View File

@@ -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 }
}

View File

@@ -12,6 +12,24 @@ const router = createRouter({
component: () => import('@/views/Landing.vue'), component: () => import('@/views/Landing.vue'),
meta: { requiresAuth: false, fullBleed: true } 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', path: '/login',
name: 'Login', name: 'Login',

View File

@@ -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>

View File

@@ -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>

View File

@@ -172,9 +172,9 @@
<div class="footer-inner"> <div class="footer-inner">
<span class="footer-copy">© 2026 ROMFAST · Constanța, din 1991</span> <span class="footer-copy">© 2026 ROMFAST · Constanța, din 1991</span>
<nav class="footer-links"> <nav class="footer-links">
<a href="#">Termeni</a> <router-link to="/termeni">Termeni</router-link>
<a href="#">Confidențialitate / GDPR</a> <router-link to="/confidentialitate">Confidențialitate / GDPR</router-link>
<a href="#">Contact</a> <router-link to="/contact">Contact</router-link>
<a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a> <a href="https://romfast.ro" target="_blank" rel="noopener">romfast.ro</a>
</nav> </nav>
</div> </div>
@@ -185,40 +185,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import { useLandingTheme } from '@/composables/useLandingTheme'
const ctaText = 'Creează cont gratuit' const ctaText = 'Creează cont gratuit'
/* Theme selector — same 8 themes and cycle order as the ROA app / autopass landing. */ const { theme, themeLabel, cycleTheme } = useLandingTheme()
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)
}
interface Slot { interface Slot {
time: string time: string

View File

@@ -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ă
administrezi și rezervi spații birouri, săli de ședință, open space-uri sau hub-uri și
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 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>