Files
romfast-website/roa/cum-arata-roa.html
Marius Mutu 61844c8b57 chore(cleanup): curățare masivă site Romfast — 29 ștergeri, design unitar, 404 custom
Faza A: șterge 29 fișiere orfane/duplicate (placeholder-e roa/2-5, module abandonate,
chatbot-uri experimentale, politica root duplicat, stub romfastsuport/index.html)

Faza C: design unitar pe 25 pagini rămase
- Navbar duplicate fix (mobile-class leaked în desktop nav)
- Hub aplicatii-erp.html: 6 carduri 2x3 simetric + card ROA AUTO nou
- Footer flex layout + copy "Ghid instalare ROA Client" (înlocuiește "Descarcă")
- Fonts normalizate la Inter:wght@300;400;500;600;700;800 (1 variant unic)
- href-uri interne corectate: politica → menu/politica, aplicatii → aplicatii-erp

Faza D: sitemap.xml regenerat (24 URL-uri valide, lastmod 2026-04-28),
robots.txt + Sitemap: directive

Faza F: 404.html custom (navbar + 6 recovery links + buton primar),
ErrorDocument 404 în .htaccess, sidebar roa-suport-tehnic (drop TeamViewer/Ammyy),
HORECA hotel section anchor #hotel + hero placeholder + sub-heading

verify-cleanup.sh: 17/17 chec-uri PASS (hrefs, og:url, canonical, sitemap, navbar,
footer flex, 404, hub carduri, sidebar, HORECA anchor)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 21:21:33 +00:00

461 lines
25 KiB
HTML

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cum arată ROA — Tour vizual | Romfast</title>
<meta name="description" content="Vezi interfețele ROA în acțiune: contabilitate, gestiune, service auto, construcții. Capturi reale din modulele cele mai folosite.">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Flowbite -->
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Professional Theme CSS -->
<link href="../professional-theme.css" rel="stylesheet">
<style>
.module-anchor { scroll-margin-top: 80px; }
/* Placeholder pentru secțiunile fără capturi încă */
.screenshot-placeholder {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #cbd5e1;
border-radius: 6px;
aspect-ratio: 16/10;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.screenshot-placeholder::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 24px;
background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%);
}
.screenshot-placeholder::after {
content: attr(data-title);
position: absolute; top: 5px; left: 12px;
color: #94a3b8; font-size: 10px; font-weight: 500;
}
.placeholder-body {
position: absolute; top: 24px; left: 0; right: 0; bottom: 0;
padding: 14px; display: flex; flex-direction: column; gap: 7px;
}
.placeholder-bar {
height: 14px; border-radius: 2px;
background: linear-gradient(to right, #e2e8f0 35%, #cbd5e1 35%, #cbd5e1 65%, #e2e8f0 65%);
}
.placeholder-bar-alt {
height: 14px; border-radius: 2px;
background: linear-gradient(to right, #e2e8f0 55%, #cbd5e1 55%, #cbd5e1 80%, #e2e8f0 80%);
}
.placeholder-header {
height: 20px; background: #08819c; border-radius: 2px; margin-bottom: 4px;
}
.placeholder-label {
position: absolute; bottom: 0; left: 0; right: 0;
background: rgba(8,129,156,0.08);
border-top: 1px dashed #cbd5e1;
padding: 8px 14px;
font-size: 11px; color: #64748b; text-align: center;
}
/* Screenshot real */
.screenshot-real {
border: 1px solid #cbd5e1;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
display: block;
width: 100%;
transition: box-shadow 0.15s;
}
.screenshot-real:hover {
box-shadow: 0 4px 12px rgba(8,129,156,0.12);
}
/* Pill nav */
.pill-nav a {
display: inline-block;
padding: 5px 14px;
border: 1px solid #cbd5e1;
border-radius: 999px;
font-size: 12px;
color: #64748b;
transition: border-color 0.15s, color 0.15s, background 0.15s;
text-decoration: none;
}
.pill-nav a:hover {
border-color: #08819c;
color: #08819c;
background: #f0f9fb;
}
</style>
</head>
<body class="min-h-screen">
<!-- Header -->
<header class="professional-navbar sticky top-0 z-50">
<nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="../images/romfast_logo.png" alt="Romfast Logo" class="romfast-logo">
<div class="hidden md:block">
<p class="text-white text-sm italic font-light">Aduce informația în mâinile tale</p>
</div>
</div>
<div class="hidden lg:flex items-center space-x-8">
<a href="../index.html" class="text-white hover:text-blue-200 transition-colors nav-link">Prima pagina</a>
<a href="../menu/desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
<a href="aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">ROA</a>
<a href="cum-arata-roa.html" class="text-blue-200 font-medium nav-link border-b border-blue-200">Cum arată ROA</a>
<div class="relative group">
<button class="text-white hover:text-blue-200 transition-colors flex items-center space-x-1 nav-link">
<span>Servicii</span>
<i data-lucide="chevron-down" class="w-4 h-4"></i>
</button>
<div class="absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300">
<a href="../menu/analiza.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-t-lg">Analiza</a>
<a href="../menu/implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
<a href="../menu/roa-suport-tehnic.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Suport tehnic ROA</a>
<a href="../menu/alteservicii.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800 rounded-b-lg">Alte servicii</a>
</div>
</div>
<a href="../menu/referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Cine folosește ROA</a>
<a href="../menu/angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
<a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">Contact</a>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
<i data-lucide="sun" class="w-5 h-5"></i>
</button>
<button id="mobile-menu-toggle" class="lg:hidden text-white p-2 rounded-lg hover:bg-white hover:bg-opacity-20 transition-all duration-300">
<i data-lucide="menu" class="w-6 h-6" id="menu-icon"></i>
<i data-lucide="x" class="w-6 h-6 hidden" id="close-icon"></i>
</button>
</div>
</div>
</nav>
<div id="mobile-menu" class="lg:hidden hidden bg-white border-t border-gray-200 shadow-lg">
<div class="px-4 py-4 space-y-3">
<a href="../index.html" class="block text-gray-700 hover:text-blue-600 transition-colors font-medium py-2">Prima pagina</a>
<a href="../menu/desprenoi.html" class="block text-gray-700 hover:text-blue-600 transition-colors py-2">Despre noi</a>
<a href="aplicatii-erp.html" class="block text-gray-700 hover:text-blue-600 transition-colors py-2">ROA</a>
<a href="cum-arata-roa.html" class="block text-blue-600 font-medium py-2">Cum arată ROA</a>
<div class="border-l-2 border-gray-300 pl-4 space-y-2">
<p class="text-gray-600 font-medium text-sm">Servicii</p>
<a href="../menu/analiza.html" class="block text-gray-600 hover:text-blue-600 transition-colors py-1 text-sm">Analiza</a>
<a href="../menu/implementare.html" class="block text-gray-600 hover:text-blue-600 transition-colors py-1 text-sm">Implementare</a>
<a href="../menu/roa-suport-tehnic.html" class="block text-gray-600 hover:text-blue-600 transition-colors py-1 text-sm">Suport tehnic ROA</a>
<a href="../menu/alteservicii.html" class="block text-gray-600 hover:text-blue-600 transition-colors py-1 text-sm">Alte servicii</a>
</div>
<a href="../menu/referinte.html" class="block text-gray-700 hover:text-blue-600 transition-colors py-2">Cine folosește ROA</a>
<a href="../menu/angajari.html" class="block text-gray-700 hover:text-blue-600 transition-colors py-2">Angajari</a>
<a href="../menu/contact.html" class="block text-gray-700 hover:text-blue-600 transition-colors py-2">Contact</a>
</div>
</div>
</header>
<main>
<!-- Hero -->
<section class="professional-hero text-center">
<div class="max-w-4xl mx-auto relative z-10">
<h1 class="text-4xl md:text-5xl font-bold mb-5 professional-text-primary max-w-3xl mx-auto leading-tight" style="letter-spacing:-0.02em">
Cum arată ROA
</h1>
<p class="text-xl professional-text-secondary mb-8 leading-relaxed max-w-2xl mx-auto">
Ecrane reale din modulele cele mai folosite — în firmele care lucrează cu sistemul de peste 10 ani.
</p>
<nav class="pill-nav flex flex-wrap justify-center gap-2">
<a href="#contabilitate">Contabilitate</a>
<a href="#gestiune">Gestiune</a>
<a href="#service-auto">Service Auto</a>
<a href="#constructii">Construcții</a>
<a href="#manager">Manager</a>
</nav>
</div>
</section>
<!-- CONTABILITATE -->
<section id="contabilitate" class="module-anchor py-14 px-6 border-b border-gray-100">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<span class="text-xs font-semibold tracking-wider uppercase" style="color:#08819c">Contabilitate</span>
<h2 class="text-2xl md:text-3xl font-bold mt-2 professional-text-primary">Validări care prind erorile înainte de închiderea lunii</h2>
</div>
<div class="grid md:grid-cols-3 gap-6">
<figure>
<img
src="images/tour/roacont-balanta-verificare.png"
alt="ROA Contabilitate — Balanță de verificare"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Balanță de verificare.</strong> Solduri precedente, rulaje și finale pe fiecare cont — calculat automat din înregistrările lunii.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roacont-situatii-invalidate.png"
alt="ROA Contabilitate — Validări înainte de închiderea lunii"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Validări înainte de închidere.</strong> ROA detectează automat situațiile invalidate — balanța, partenerii, registrul de cumpărări — și blochează închiderea lunii.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roacont-borderou-efactura.png"
alt="ROA Contabilitate — Borderou e-Factura SPV ANAF"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Borderou e-Factura.</strong> Transmitere și monitorizare SPV ANAF direct din ROA — status confirmare per factură, fără operații manuale.
</figcaption>
</figure>
</div>
</div>
</section>
<!-- GESTIUNE -->
<section id="gestiune" class="module-anchor py-14 px-6 bg-gray-50 border-b border-gray-100">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<span class="text-xs font-semibold tracking-wider uppercase" style="color:#08819c">Gestiune</span>
<h2 class="text-2xl md:text-3xl font-bold mt-2 professional-text-primary">Stocuri urmărite în timp real, transferuri trasabile</h2>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<figure>
<img
src="images/tour/roagest-stoc.png"
alt="ROA Gestiune — Situație stocuri"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Stoc curent.</strong> Situație completă pe toate gestiunile: cantitate, stoc precedent, intrări, ieșiri, stoc final și valoare de achiziție.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roagest-nir.png"
alt="ROA Gestiune — NIR intrare marfă"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>NIR — Intrare marfă.</strong> Recepție factură cu identificare articole din catalog, gestiunea destinație și clasificare taxă SAFT automată.
</figcaption>
</figure>
</div>
</div>
</section>
<!-- SERVICE AUTO -->
<section id="service-auto" class="module-anchor py-14 px-6 border-b border-gray-100">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<span class="text-xs font-semibold tracking-wider uppercase" style="color:#08819c">Service Auto</span>
<h2 class="text-2xl md:text-3xl font-bold mt-2 professional-text-primary">Recepție → deviz → comandă → factură, fără re-introducere date</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<figure>
<img
src="images/tour/roaauto-comanda-noua.png"
alt="ROA Service Auto — Generare comandă nouă"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Generare comandă nouă.</strong> Date mașină, asigurător, kilometraj și operațiile cerute de client selectate direct din nomenclator.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roaauto-deviz-estimativ.png"
alt="ROA Service Auto — Deviz estimativ pe comandă"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Deviz estimativ.</strong> Manoperă și materiale pe comandă cu totaluri detaliate — clientul vede costul complet înainte să aprobe lucrarea.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roaauto-normare.png"
alt="ROA Service Auto — Normare manoperă pe comandă"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Normare manoperă.</strong> Lista completă de operațiuni normată pe comandă — vizibilitate totală asupra lucrărilor în execuție.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roaauto-facturare.png"
alt="ROA Service Auto — Emitere factură finală"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Emitere factură finală.</strong> Factura se generează direct din comandă — manoperă, materiale și TVA calculate automat, fără re-introducere date.
</figcaption>
</figure>
</div>
</div>
</section>
<!-- CONSTRUCȚII / LUCRĂRI -->
<section id="constructii" class="module-anchor py-14 px-6 bg-gray-50 border-b border-gray-100">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<span class="text-xs font-semibold tracking-wider uppercase" style="color:#08819c">Construcții / Lucrări</span>
<h2 class="text-2xl md:text-3xl font-bold mt-2 professional-text-primary">Randament pe lucrare vizibil în timp real</h2>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<figure>
<img
src="images/tour/roalucrari-oferta.png"
alt="ROA Construcții — Ofertă pe lucrare"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Ofertă pe lucrare.</strong> Structura devizului de ofertă: materiale, manoperă, utilaje, terți, indirecte și profit — total per lucrare vizibil instant.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roalucrari-analiza.png"
alt="ROA Construcții — Analiză comparativă lucrări"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Analiză lucrări.</strong> Situație comparativă venituri și cheltuieli față de ofertă, per lucrare — randamentul real față de planificat.
</figcaption>
</figure>
</div>
</div>
</section>
<!-- MANAGER / RAPOARTE -->
<section id="manager" class="module-anchor py-14 px-6 border-b border-gray-100">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<span class="text-xs font-semibold tracking-wider uppercase" style="color:#08819c">Manager / Rapoarte</span>
<h2 class="text-2xl md:text-3xl font-bold mt-2 professional-text-primary">Situații financiare și rapoarte la un click</h2>
</div>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<figure>
<img
src="images/tour/roasitfin-bilant.png"
alt="ROA Situații Financiare — Bilanț agenți economici"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Bilanț agenți economici.</strong> F10 Bilanț, F20 Cont profit și pierdere, F30 Date informative — generate automat din datele contabile cu verificare corelații.
</figcaption>
</figure>
<figure>
<img
src="images/tour/roasitfin-flux-trezorerie.png"
alt="ROA Situații Financiare — Flux de trezorerie"
loading="lazy"
class="screenshot-real"
>
<figcaption class="mt-3 text-sm text-gray-700 leading-snug">
<strong>Flux de trezorerie.</strong> Situația fluxurilor de trezorerie prin metoda directă — defalcat pe luni, cu activități de exploatare, investiție și finanțare.
</figcaption>
</figure>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-16 px-6" style="background: linear-gradient(to bottom right, #e8f4f7, #ffffff, #f0f9fb)">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4 professional-text-primary">Vrei să vezi ROA pe situația ta concretă?</h2>
<p class="professional-text-secondary mb-8 max-w-xl mx-auto leading-relaxed">
Spune-ne din ce industrie ești și ce te interesează — vorbim direct cu cine implementează.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="../menu/contact.html" class="professional-btn-primary">
Cere acces la versiunea de probă
</a>
<a href="tel:+40723197939" class="professional-btn-secondary">
Sună-ne direct: 0723 197 939
</a>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gradient-to-r from-slate-900 via-gray-800 to-slate-900 text-white py-12" style="border-radius: 1rem 1rem 0 0;">
<div class="container mx-auto px-4 text-center">
<div class="mb-6">
<img src="../images/romfast_logo.png" alt="Romfast Logo" class="h-12 mx-auto mb-4">
<p class="text-gray-400 italic">Aduce informația în mâinile tale</p>
</div>
<div class="border-t border-gray-700 pt-6" style="border-radius: 0.5rem;"><p class="text-sm text-gray-400 mb-2">Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p><div class="flex flex-wrap justify-center gap-x-4 gap-y-2"><a href="../menu/roaclient-instalare.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">Ghid instalare ROA Client</a><a href="../menu/politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">Politica de confidentialitate</a></div></div>
</div>
</footer>
<script src="../professional-theme.js"></script>
<!-- tel: desktop fallback — copiază numărul în clipboard -->
<script>
document.querySelectorAll('a[href^="tel:"]').forEach(function(a) {
a.addEventListener('click', function(e) {
if (window.matchMedia('(min-width: 1024px)').matches && !/Mobi|Android/i.test(navigator.userAgent)) {
e.preventDefault();
var phone = a.href.replace('tel:', '');
navigator.clipboard && navigator.clipboard.writeText(phone).then(function() {
var toast = document.createElement('div');
toast.textContent = 'Număr copiat: ' + phone;
toast.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#08819c;color:white;padding:10px 20px;border-radius:8px;font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:9999';
document.body.appendChild(toast);
setTimeout(function(){ toast.remove(); }, 3000);
});
}
});
});
</script>
</body>
</html>