romfast/romfast-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete professional theme conversion across Romfast website

Browse Source 
Converted all website pages to modern professional theme with consistent design system:

### Pages Converted (21 total):
**Menu Pages (10):**
- desprenoi.html, contact.html, analiza.html, implementare.html
- roa-suport-tehnic.html, alteservicii.html, angajari.html
- suport.html, referinte.html, politica-confidentialitate.html

**ROA Module Pages (11):**
- roa-financiar-contabilitate.html (calculator icon)
- roa-resurse-umane.html (users icon)
- roa-imobilizari.html (building icon)
- roa-gestiune.html (package icon)
- roa-contracte-furnizori.html (truck icon)
- roa-clienti.html (user-check icon)
- roa-horeca.html (utensils icon)
- roa-analiza.html (bar-chart-3 icon)
- roa-aplicatii-specifice.html (settings icon)
- roa-service-auto.html, roa-proiecte-devize.html

### Technical Implementation:
- Migrated from Bootstrap 5 to Tailwind CSS + Flowbite
- Applied professional-theme.css with soft blue color palette
- Integrated Lucide icons for modern iconography
- Implemented responsive design with mobile-first approach
- Added dark/light theme toggle functionality
- Enhanced SEO with Romanian meta descriptions
- Maintained all original content and functionality

### Design Features:
- Consistent professional navbar with gradient background
- Hero sections with appropriate module icons
- Professional cards with hover effects and animations
- Modern typography using Inter, Merriweather fonts
- Unified color scheme: #5288c4 (primary), #4a7ba7 (secondary)
- Professional footer with company branding

All pages now follow the same professional design system established in index.html.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Marius Mutu
2025-08-15 00:00:46 +03:00
parent 9cd7886320
commit 90aa51bcf9
24 changed files with 6736 additions and 2674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
menu/contact.html
View File

@@ -3,143 +3,218 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Romfast</title>
<title>Contact - Romfast - Program de Contabilitate, Gestiune, Resurse Umane</title>
<meta name="description" content="Contactati echipa Romfast. Gasiti aici adresa, numere de telefon, adresa de e-mail si o harta pentru a ajunge la sediul nostru.">
<meta name="keywords" content="contact romfast, adresa romfast, telefon romfast, email romfast, harta sediu">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="keywords" content="contact romfast, adresa romfast, telefon romfast, email romfast, harta sediu, suport tehnic roa">
<!-- 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=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link href="../new-style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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">
</head>
<body>
<div class="page-wrapper">
<body class="min-h-screen">
<!-- Navigation & Branding Header -->
<header class="shadow-sm">
<nav class="navbar navbar-expand-lg navbar-dark py-3">
<div class="container">
<!-- Branding Section -->
<a class="navbar-brand d-flex flex-column align-items-start" href="../index.html">
<img src="../images/romfast_logo.png" alt="Romfast Logo" style="height: 70px; margin-bottom: 5px;">
<div>
<div class="slogan fs-6 text-white" style="font-family: 'Open Sans', sans-serif; font-style: italic;">Aduce informația în mâinile tale</div>
<!-- Soft Professional Blue 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">
<!-- Logo Section -->
<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>
</a>
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Links -->
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="../index.html">Prima pagina</a></li>
<li class="nav-item"><a class="nav-link" href="desprenoi.html">Despre noi</a></li>
<li class="nav-item"><a class="nav-link" href="../roa/aplicatii-erp.html">ROA</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="serviciiDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Servicii
</a>
<ul class="dropdown-menu" aria-labelledby="serviciiDropdown">
<li><a class="dropdown-item" href="analiza.html">Analiza</a></li>
<li><a class="dropdown-item" href="implementare.html">Implementare</a></li>
<li><a class="dropdown-item" href="roa-suport-tehnic.html">Suport tehnic ROA</a></li>
<li><a class="dropdown-item" href="alteservicii.html">Alte servicii</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="referinte.html">Referinte</a></li>
<li class="nav-item"><a class="nav-link" href="angajari.html">Angajari</a></li>
<li class="nav-item"><a class="nav-link active" href="contact.html">Contact</a></li>
<li class="nav-item dropdown">
<button class="btn btn-outline-light dropdown-toggle ms-2" type="button" id="themeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
Theme
</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
<li><a class="dropdown-item" href="#" data-theme="light">Light Mode</a></li>
<li><a class="dropdown-item" href="#" data-theme="dark">Dark Mode</a></li>
<li><a class="dropdown-item" href="#" data-theme="system">System Mode</a></li>
</ul>
</li>
</ul>
</div>
<!-- Centered Navigation -->
<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="desprenoi.html" class="text-white hover:text-blue-200 transition-colors nav-link">Despre noi</a>
<a href="../roa/aplicatii-erp.html" class="text-white hover:text-blue-200 transition-colors nav-link">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="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="implementare.html" class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-800">Implementare</a>
<a href="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="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="referinte.html" class="text-white hover:text-blue-200 transition-colors nav-link">Referinte</a>
<a href="angajari.html" class="text-white hover:text-blue-200 transition-colors nav-link">Angajari</a>
<a href="contact.html" class="text-white hover:text-blue-200 transition-colors nav-link font-semibold">Contact</a>
</div>
<!-- Theme Toggle & Mobile Menu -->
<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 class="lg:hidden text-white p-2">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</nav>
</header>
<!-- Main Content -->
<main class="container my-5">
<h1 class="text-center mb-5">Contactati-ne</h1>
<div class="row">
<div class="col-lg-6 mb-4">
<h2 class="h4">Date de Contact</h2>
<div class="card">
<div class="card-body">
<p><strong>Adresa:</strong><br>
900673 Constanta, Bd. Mamaia Nr. 17</p>
<p><strong>Telefon:</strong></p>
<ul class="list-unstyled">
<li>0241 / 541000 (Romtelecom)</li>
<li>0723 / 197939 (Vodafone)</li>
</ul>
<!-- Main Content Container -->
<main class="container mx-auto px-4 py-8 max-w-7xl">
<!-- Professional Contact Hero Section -->
<section class="professional-hero text-center mb-16">
<div class="max-w-4xl mx-auto relative z-10">
<h1 class="text-4xl md:text-5xl font-bold mb-6 professional-text-primary">
Contactati-ne
</h1>
<p class="text-xl professional-text-secondary mb-8 leading-relaxed">
Suntem aici să vă ajutăm cu orice întrebare despre ROA - Romfast Applications.
Echipa noastră de specialiști vă asteaptă pentru consultanta și suport tehnic.
</p>
</div>
</section>
<p><strong>E-mail:</strong><br>
<a href="mailto:office@romfast.ro">office@romfast.ro</a></p>
<!-- Contact Information Grid -->
<section class="grid lg:grid-cols-2 gap-8 mb-16">
<!-- Contact Details Card -->
<div class="professional-card p-8">
<div class="flex items-center justify-center mb-6">
<div class="professional-icon-wrapper">
<i data-lucide="map-pin" class="w-10 h-10 text-white"></i>
</div>
</div>
<div class="card mt-4">
<div class="card-header">
Harta Sediu
<h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Date de Contact</h2>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<i data-lucide="map-pin" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
<div>
<h3 class="font-semibold professional-text-primary">Adresa</h3>
<p class="professional-text-secondary">900673 Constanta, Bd. Mamaia Nr. 17</p>
</div>
</div>
<div class="card-body p-0">
<div class="ratio ratio-16x9">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2850.837519439238!2d28.64031631552195!3d44.19852697910627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40bae51c3a543781%3A0x40e3494663457b0!2sBulevardul%20Mamaia%2017%2C%20Constan%C8%9Ba%20900673!5e0!3m2!1sen!2sro!4v1678886759363!5m2!1sen!2sro" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<div class="flex items-start space-x-4">
<i data-lucide="phone" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
<div>
<h3 class="font-semibold professional-text-primary">Telefon</h3>
<div class="space-y-1">
<p class="professional-text-secondary">0241 / 541000 (Romtelecom)</p>
<p class="professional-text-secondary">0723 / 197939 (Vodafone)</p>
</div>
</div>
</div>
<div class="flex items-start space-x-4">
<i data-lucide="mail" class="w-5 h-5 text-blue-600 mt-1 flex-shrink-0"></i>
<div>
<h3 class="font-semibold professional-text-primary">E-mail</h3>
<a href="mailto:office@romfast.ro" class="text-blue-600 hover:text-blue-800 transition-colors">
office@romfast.ro
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h2 class="h4">Formular de Contact</h2>
<div class="card">
<div class="card-body">
<form>
<div class="mb-3">
<label for="nume" class="form-label">Nume</label>
<input type="text" class="form-control" id="nume" placeholder="Numele dvs.">
</div>
<div class="mb-3">
<label for="email" class="form-label">Adresa de Email</label>
<input type="email" class="form-control" id="email" placeholder="exemplu@email.com">
</div>
<div class="mb-3">
<label for="subiect" class="form-label">Subiect</label>
<input type="text" class="form-control" id="subiect" placeholder="Subiectul mesajului">
</div>
<div class="mb-3">
<label for="mesaj" class="form-label">Mesaj</label>
<textarea class="form-control" id="mesaj" rows="5" placeholder="Scrieti mesajul aici..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Trimite Mesajul</button>
</form>
<!-- Contact Form Card -->
<div class="professional-card p-8">
<div class="flex items-center justify-center mb-6">
<div class="professional-icon-wrapper">
<i data-lucide="message-circle" class="w-10 h-10 text-white"></i>
</div>
</div>
<h2 class="text-2xl font-semibold mb-6 professional-text-primary text-center">Trimite-ne un Mesaj</h2>
<form class="space-y-6">
<div>
<label for="nume" class="block text-sm font-medium professional-text-primary mb-2">Nume complet</label>
<input type="text" id="nume" name="nume" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="Numele dumneavoastră">
</div>
<div>
<label for="email" class="block text-sm font-medium professional-text-primary mb-2">Adresa de e-mail</label>
<input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="exemplu@email.com">
</div>
<div>
<label for="telefon" class="block text-sm font-medium professional-text-primary mb-2">Telefon (opțional)</label>
<input type="tel" id="telefon" name="telefon" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" placeholder="0241 / 123456">
</div>
<div>
<label for="subiect" class="block text-sm font-medium professional-text-primary mb-2">Subiect</label>
<select id="subiect" name="subiect" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors">
<option value="">Selectați subiectul</option>
<option value="informaii-roa">Informații despre ROA</option>
<option value="suport-tehnic">Suport tehnic</option>
<option value="implementare">Implementare soluție</option>
<option value="demo">Solicitare demo</option>
<option value="altele">Altele</option>
</select>
</div>
<div>
<label for="mesaj" class="block text-sm font-medium professional-text-primary mb-2">Mesajul dumneavoastră</label>
<textarea id="mesaj" name="mesaj" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-none" placeholder="Descrieți cererea dumneavoastră în detaliu..."></textarea>
</div>
<button type="submit" class="professional-btn-primary px-8 py-4 text-lg w-full">
<span>Trimite Mesajul</span>
</button>
</form>
</div>
</div>
</section>
<!-- Map Section -->
<section class="professional-card p-8 mb-16">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold professional-text-primary mb-4">Locatia Noastra</h2>
<p class="professional-text-secondary text-lg">Vă așteptăm la sediul nostru din Constanța pentru consultanță personalizată.</p>
</div>
<div class="rounded-lg overflow-hidden border border-gray-200" style="aspect-ratio: 16/9;">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2850.837519439238!2d28.64031631552195!3d44.19852697910627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40bae51c3a543781%3A0x40e3494663457b0!2sBulevardul%20Mamaia%2017%2C%20Constan%C8%9Ba%20900673!5e0!3m2!1sen!2sro!4v1678886759363!5m2!1sen!2sro"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-dark text-white text-center py-4 mt-5">
<div class="container">
<p>Copyright &copy; 2025 Romfast SRL. Toate drepturile rezervate.</p>
<p><a href="../politica-confidentialitate.html" class="text-white">Politica de confidentialitate</a></p>
<!-- Professional 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>
<a href="../politica-confidentialitate.html" class="text-blue-400 hover:text-blue-300 transition-colors text-sm">
Politica de confidentialitate
</a>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Chatbot -->
<script type="module">
import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js"
@@ -179,48 +254,8 @@
}
})
</script>
<script>
function applyTheme(theme) {
const body = document.body;
const themeDropdownButton = document.getElementById('themeDropdown');
body.classList.remove('dark-mode'); // Always remove first
if (theme === 'dark') {
body.classList.add('dark-mode');
} else if (theme === 'system') {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
body.classList.add('dark-mode');
}
}
themeDropdownButton.textContent = theme.charAt(0).toUpperCase() + theme.slice(1) + ' Mode';
localStorage.setItem('themePreference', theme);
}
document.querySelectorAll('.dropdown-item[data-theme]').forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault();
const theme = this.getAttribute('data-theme');
applyTheme(theme);
});
});
// Initial theme application based on saved preference or system preference
const savedTheme = localStorage.getItem('themePreference');
if (savedTheme) {
applyTheme(savedTheme);
} else {
// Default to system mode if no preference is saved
applyTheme('system');
}
// Listen for system theme changes if currently in system mode
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (localStorage.getItem('themePreference') === 'system') {
applyTheme('system');
}
});
</script>
</div>
<!-- Professional Theme JavaScript -->
<script src="../professional-theme.js"></script>
</body>
</html>