Complete professional theme conversion across Romfast website
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:
793
.superdesign/design_iterations/romfast_soft_professional.html
Normal file
793
.superdesign/design_iterations/romfast_soft_professional.html
Normal file
@@ -0,0 +1,793 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ro">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Romfast - Program de Contabilitate, Gestiune, Resurse Umane, Imobilizari, Salarizare. Sisteme Informatice pentru Contabilitate.</title>
|
||||
<meta name="description" content="Romfast produce si implementeaza ROA - Romfast Applications, un sistem informatic ERP pentru managementul afacerii: contabilitate, gestiune, salarizare, service auto, HORECA.">
|
||||
<meta name="keywords" content="program service auto, program contabilitate, gestiune, salarii, facturare, mijloace fixe, productie, roa, romfast, soft contabilitate, sistem informatic erp, program restaurant, program hotel, suport tehnic, implementare erp">
|
||||
|
||||
<!-- 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&family=Merriweather:wght@300;400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* Soft Professional Blue Theme - Gentle & Attenuated Colors */
|
||||
:root {
|
||||
/* Soft Professional Color Palette - Reduced Saturation 40-50% */
|
||||
--executive-navy: #2c3e50; /* Softer navy foundation */
|
||||
--soft-professional-blue: #5288c4; /* Much lighter than #1565c0 - primary soft blue */
|
||||
--gentle-trust-blue: #4a7ba7; /* Softer than #0d47a1 - gentle trust */
|
||||
--muted-accent-red: #b85555; /* Much softer than #c62828 - muted red */
|
||||
--soft-executive-white: #fafbfc; /* Clean background maintained */
|
||||
|
||||
/* Soft Professional Design System */
|
||||
--background: #fafbfc !important; /* Soft executive white background */
|
||||
--foreground: #2c3e50 !important; /* Soft executive navy for text */
|
||||
--card: #ffffff !important; /* Pure white cards */
|
||||
--card-foreground: #2c3e50 !important; /* Soft executive navy text */
|
||||
--card-hover: #f8f9fa !important; /* Very light hover */
|
||||
|
||||
--primary: #5288c4 !important; /* Soft professional blue primary */
|
||||
--primary-foreground: #ffffff !important; /* White text on primary */
|
||||
--secondary: #4a7ba7 !important; /* Gentle trust blue secondary */
|
||||
--secondary-foreground: #ffffff !important; /* White text on secondary */
|
||||
|
||||
--accent: #b85555 !important; /* Muted accent red for attention */
|
||||
--accent-foreground: #ffffff !important; /* White text on accent */
|
||||
|
||||
--muted: #f5f6f7 !important; /* Light gray muted */
|
||||
--muted-foreground: #2c3e50 !important; /* Soft executive navy muted text */
|
||||
|
||||
--border: #e8f2ff !important; /* Very light blue border */
|
||||
--input: #ffffff !important; /* White input background */
|
||||
--ring: #5288c4 !important; /* Soft professional blue focus ring */
|
||||
|
||||
/* Soft Professional Gradients - Gentle & Muted */
|
||||
--navbar-bg: linear-gradient(135deg, #2c3e50, #4a7ba7) !important; /* Soft navy to gentle trust blue */
|
||||
--hero-gradient: linear-gradient(180deg, #fafbfc, #ffffff) !important; /* Soft executive white to pure white */
|
||||
--button-gradient: linear-gradient(90deg, #5288c4, #4a7ba7) !important; /* Soft professional blue to gentle trust blue */
|
||||
--red-gradient: linear-gradient(90deg, #b85555, #c67b7b) !important; /* Muted red accent gradient */
|
||||
|
||||
/* Typography - Professional and trustworthy */
|
||||
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
|
||||
--font-serif: 'Merriweather', Georgia, serif !important;
|
||||
--font-mono: 'JetBrains Mono', monospace !important;
|
||||
|
||||
/* Professional rounded corners */
|
||||
--radius: 8px !important;
|
||||
--radius-sm: 4px !important;
|
||||
--radius-md: 6px !important;
|
||||
--radius-lg: 12px !important;
|
||||
--radius-xl: 16px !important;
|
||||
|
||||
/* Soft professional shadows with reduced opacity - Gentle blue shadows */
|
||||
--shadow-2xs: 0 1px 3px 0px rgba(82, 136, 196, 0.03) !important;
|
||||
--shadow-xs: 0 2px 6px 0px rgba(82, 136, 196, 0.04) !important;
|
||||
--shadow-sm: 0 3px 10px 0px rgba(82, 136, 196, 0.05), 0 1px 2px 0px rgba(82, 136, 196, 0.02) !important;
|
||||
--shadow: 0 4px 16px 0px rgba(82, 136, 196, 0.06), 0 2px 4px 0px rgba(82, 136, 196, 0.03) !important;
|
||||
--shadow-md: 0 6px 20px 0px rgba(82, 136, 196, 0.08), 0 3px 6px 0px rgba(82, 136, 196, 0.04) !important;
|
||||
--shadow-lg: 0 8px 28px 0px rgba(82, 136, 196, 0.10), 0 4px 8px 0px rgba(82, 136, 196, 0.05) !important;
|
||||
--shadow-xl: 0 12px 36px 0px rgba(82, 136, 196, 0.12), 0 6px 12px 0px rgba(82, 136, 196, 0.06) !important;
|
||||
--shadow-2xl: 0 16px 48px 0px rgba(82, 136, 196, 0.16) !important;
|
||||
|
||||
/* Conservative spacing */
|
||||
--spacing: 0.375rem !important;
|
||||
--tracking-normal: -0.01em !important;
|
||||
}
|
||||
|
||||
/* Soft Professional Custom Styles */
|
||||
body {
|
||||
font-family: var(--font-sans) !important;
|
||||
background: var(--background) !important;
|
||||
color: var(--foreground) !important;
|
||||
letter-spacing: var(--tracking-normal) !important;
|
||||
line-height: 1.6 !important;
|
||||
}
|
||||
|
||||
/* Professional card styling with soft blue accents */
|
||||
.professional-card {
|
||||
background: var(--card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-card::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -1px !important;
|
||||
left: -1px !important;
|
||||
right: -1px !important;
|
||||
bottom: -1px !important;
|
||||
background: var(--button-gradient) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
z-index: -1 !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-card:hover {
|
||||
background: var(--card-hover) !important;
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
transform: translateY(-4px) !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
.professional-card:hover::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Soft professional blue buttons */
|
||||
.professional-btn-primary {
|
||||
background: var(--button-gradient) !important;
|
||||
color: var(--primary-foreground) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: -100% !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
background: var(--red-gradient) !important;
|
||||
transition: left 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary:hover::before {
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary:hover {
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary {
|
||||
background: var(--card) !important;
|
||||
color: var(--primary) !important;
|
||||
border: 2px solid var(--primary) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
font-weight: 500 !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 0 !important;
|
||||
height: 100% !important;
|
||||
background: var(--primary) !important;
|
||||
transition: width 0.3s ease !important;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary:hover {
|
||||
color: var(--primary-foreground) !important;
|
||||
border-color: var(--primary) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary:hover::before {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.professional-btn-secondary span {
|
||||
position: relative !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
/* Muted red accent button for urgent actions */
|
||||
.professional-btn-urgent {
|
||||
background: var(--red-gradient) !important;
|
||||
color: var(--accent-foreground) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
border: none !important;
|
||||
box-shadow: var(--shadow-sm) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.professional-btn-urgent:hover {
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
filter: brightness(1.05) !important;
|
||||
}
|
||||
|
||||
/* Professional navbar with soft gradient */
|
||||
.professional-navbar {
|
||||
background: var(--navbar-bg) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Hero section with soft professional styling */
|
||||
.professional-hero {
|
||||
background: var(--hero-gradient) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 4rem 2rem !important;
|
||||
margin-bottom: 4rem !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-hero::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -50% !important;
|
||||
left: -50% !important;
|
||||
width: 200% !important;
|
||||
height: 200% !important;
|
||||
background: radial-gradient(circle, rgba(82, 136, 196, 0.03) 0%, transparent 50%) !important;
|
||||
opacity: 0.5 !important;
|
||||
animation: subtle-float 12s ease-in-out infinite !important;
|
||||
}
|
||||
|
||||
@keyframes subtle-float {
|
||||
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
||||
50% { transform: translate(20px, -20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
|
||||
/* Professional support section */
|
||||
.professional-support {
|
||||
background: var(--muted) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius-xl) !important;
|
||||
padding: 3rem !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* Professional icon containers with soft blue themes */
|
||||
.professional-icon-wrapper {
|
||||
width: 80px !important;
|
||||
height: 80px !important;
|
||||
background: var(--button-gradient) !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 auto 1.5rem auto !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
transition: all 0.3s ease !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.professional-icon-wrapper::before {
|
||||
content: '' !important;
|
||||
position: absolute !important;
|
||||
top: -50% !important;
|
||||
left: -50% !important;
|
||||
width: 200% !important;
|
||||
height: 200% !important;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 30%, transparent 70%) !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.professional-card:hover .professional-icon-wrapper::before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Logo styling */
|
||||
.romfast-logo {
|
||||
height: 60px !important;
|
||||
filter: brightness(1.05) contrast(1.05) !important;
|
||||
}
|
||||
|
||||
/* Enhanced typography */
|
||||
h1, h2, h3 {
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: -0.02em !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
/* Soft professional text colors */
|
||||
.professional-text-primary {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.professional-text-secondary {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Special featured card (ROA AUTO) - Muted red accent styling */
|
||||
.professional-card-featured {
|
||||
background: var(--card) !important;
|
||||
border: 2px solid var(--accent) !important;
|
||||
box-shadow: var(--shadow-xl) !important;
|
||||
}
|
||||
|
||||
.professional-card-featured .professional-icon-wrapper {
|
||||
background: var(--red-gradient) !important;
|
||||
}
|
||||
|
||||
/* Muted red bullet points for ROA AUTO problems */
|
||||
.red-bullet {
|
||||
color: var(--accent) !important;
|
||||
}
|
||||
|
||||
/* Enhanced hover effects for support cards */
|
||||
.professional-support-card {
|
||||
background: var(--card) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: var(--radius) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.professional-support-card:hover {
|
||||
box-shadow: var(--shadow-lg) !important;
|
||||
transform: translateY(-2px) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Soft blue hover states for navigation */
|
||||
.nav-link {
|
||||
transition: color 0.3s ease !important;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #90caf9 !important; /* Gentle blue hover - softer than original */
|
||||
}
|
||||
|
||||
/* Professional service sections with soft blue accents */
|
||||
.service-technology {
|
||||
background: linear-gradient(135deg, rgba(82, 136, 196, 0.03), rgba(74, 123, 167, 0.03)) !important;
|
||||
border-left: 4px solid var(--primary) !important;
|
||||
padding: 1.5rem !important;
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
.service-reliability {
|
||||
background: linear-gradient(135deg, rgba(74, 123, 167, 0.03), rgba(82, 136, 196, 0.03)) !important;
|
||||
border-left: 4px solid var(--secondary) !important;
|
||||
padding: 1.5rem !important;
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for soft professional blue theme */
|
||||
.dark-mode {
|
||||
--background: #141822 !important;
|
||||
--foreground: #e2e8f0 !important;
|
||||
--card: #1e2235 !important;
|
||||
--card-foreground: #e2e8f0 !important;
|
||||
--card-hover: #252a3e !important;
|
||||
--muted: #252a3e !important;
|
||||
--muted-foreground: #94a3b8 !important;
|
||||
--border: #334155 !important;
|
||||
--input: #1e2235 !important;
|
||||
--navbar-bg: linear-gradient(135deg, #0f172a, #1e293b) !important;
|
||||
--hero-gradient: linear-gradient(180deg, #1e2235, #141822) !important;
|
||||
}
|
||||
|
||||
.dark-mode .professional-text-primary {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.dark-mode .professional-text-secondary {
|
||||
color: var(--muted-foreground) !important;
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for soft professional design */
|
||||
@media (max-width: 768px) {
|
||||
.professional-hero {
|
||||
padding: 2rem 1.5rem !important;
|
||||
border-radius: var(--radius-lg) !important;
|
||||
}
|
||||
|
||||
.professional-card {
|
||||
border-radius: var(--radius-md) !important;
|
||||
}
|
||||
|
||||
.professional-btn-primary,
|
||||
.professional-btn-secondary,
|
||||
.professional-btn-urgent {
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
<!-- 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>
|
||||
</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 font-medium 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="../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="../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">Referinte</a>
|
||||
<a href="../menu/contact.html" class="text-white hover:text-blue-200 transition-colors nav-link">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 Container -->
|
||||
<main class="container mx-auto px-4 py-8 max-w-7xl">
|
||||
|
||||
<!-- Soft Professional Blue Hero Section -->
|
||||
<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-6 professional-text-primary">
|
||||
ROA - Romfast Applications
|
||||
</h1>
|
||||
<p class="text-xl professional-text-secondary mb-8 leading-relaxed">
|
||||
Un sistem informatic complex de tip ERP destinat companiilor medii si mari,
|
||||
flexibil si capabil sa raspunda necesitatilor de dezvoltare.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button class="professional-btn-primary px-8 py-4 text-lg">
|
||||
<span>Descopera ROA</span>
|
||||
</button>
|
||||
<button class="professional-btn-secondary px-8 py-4 text-lg">
|
||||
<span>Vezi Demo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Soft Professional Blue Card Grid Layout -->
|
||||
<section class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-center mb-12 professional-text-primary">Solutii Complete pentru Afacerea Ta</h2>
|
||||
|
||||
<!-- First Row - Main Services -->
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-8 stagger-container">
|
||||
<!-- ROA ERP Card - Technology Focus -->
|
||||
<div class="professional-card service-technology p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="database" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA ERP</h3>
|
||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||
Sistem complet de management al afacerii: contabilitate, gestiune, resurse umane si salarizare.
|
||||
</p>
|
||||
<button class="professional-btn-secondary px-6 py-3 w-full">
|
||||
<span>Mai multe detalii</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ROA AUTO Card - Featured with muted red accents for urgent problems -->
|
||||
<div class="professional-card professional-card-featured p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="wrench" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA AUTO</h3>
|
||||
<ul class="text-left professional-text-secondary mb-6 space-y-2">
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="red-bullet">🔧</span>
|
||||
<span>Factura, bonul fiscal si inregistrarea in contabilitate dureaza mai mult de 1 minut?</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="red-bullet">🔧</span>
|
||||
<span>Clientii asteapta prea mult la receptie pentru un deviz estimativ?</span>
|
||||
</li>
|
||||
<li class="flex items-start space-x-2">
|
||||
<span class="red-bullet">🔧</span>
|
||||
<span>Seful de service pregateste manual rapoartele de manopera?</span>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="professional-btn-urgent px-6 py-3 w-full">
|
||||
<span>Eficientizeaza serviciul!</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ROA HORECA Card -->
|
||||
<div class="professional-card p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="utensils" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">ROA HORECA</h3>
|
||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||
Solutii complete pentru restaurante si hoteluri: comenzi, rezervari, gestiune si facturare.
|
||||
</p>
|
||||
<button class="professional-btn-secondary px-6 py-3 w-full">
|
||||
<span>Afla mai mult</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Row - Services with reliability focus -->
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
<!-- Implementare Card - Reliability Focus -->
|
||||
<div class="professional-card service-reliability p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="settings" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">Implementare</h3>
|
||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||
Servicii complete de implementare si configurare a sistemelor ERP adaptate necesitatilor tale.
|
||||
</p>
|
||||
<button class="professional-btn-secondary px-6 py-3 w-full">
|
||||
<span>Servicii implementare</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Suport Tehnic Card - Reliability Focus -->
|
||||
<div class="professional-card service-reliability p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="headphones" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">Suport Tehnic</h3>
|
||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||
Echipa noastra de specialisti iti ofera suport continuu pentru utilizarea optima a sistemelor.
|
||||
</p>
|
||||
<button class="professional-btn-secondary px-6 py-3 w-full">
|
||||
<span>Contacteaza suportul</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Analiza Card - Technology Focus -->
|
||||
<div class="professional-card service-technology p-8 text-center">
|
||||
<div class="professional-icon-wrapper">
|
||||
<i data-lucide="bar-chart-3" class="w-10 h-10 text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold mb-4 professional-text-primary">Analiza si Consultanta</h3>
|
||||
<p class="professional-text-secondary mb-6 leading-relaxed">
|
||||
Evaluam procesele actuale si recomandam cele mai potrivite solutii pentru optimizarea afacerii.
|
||||
</p>
|
||||
<button class="professional-btn-secondary px-6 py-3 w-full">
|
||||
<span>Programeaza consultanta</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Professional Support Tools Section -->
|
||||
<section class="professional-support text-center mb-16">
|
||||
<h2 class="text-2xl font-bold mb-8 professional-text-primary">Instrumente de Suport</h2>
|
||||
<div class="grid sm:grid-cols-3 gap-6">
|
||||
<div class="professional-support-card">
|
||||
<i data-lucide="download" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
|
||||
<h3 class="font-semibold mb-3 professional-text-primary">Romfast Suport</h3>
|
||||
<button class="professional-btn-secondary px-6 py-2 w-full">
|
||||
<span>Descarca</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="professional-support-card">
|
||||
<i data-lucide="monitor" class="w-8 h-8 mx-auto mb-4" style="color: #4a7ba7;"></i>
|
||||
<h3 class="font-semibold mb-3 professional-text-primary">Ammyy Admin</h3>
|
||||
<button class="professional-btn-secondary px-6 py-2 w-full">
|
||||
<span>Acceseaza</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="professional-support-card">
|
||||
<i data-lucide="video" class="w-8 h-8 mx-auto mb-4" style="color: #5288c4;"></i>
|
||||
<h3 class="font-semibold mb-3 professional-text-primary">TeamViewer</h3>
|
||||
<button class="professional-btn-secondary px-6 py-2 w-full">
|
||||
<span>Acceseaza</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 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 © 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>
|
||||
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Enhanced theme toggle functionality
|
||||
const themeToggle = document.getElementById('theme-toggle');
|
||||
const body = document.body;
|
||||
|
||||
// Check for saved theme preference or default to light mode
|
||||
const currentTheme = localStorage.getItem('theme') || 'light';
|
||||
if (currentTheme === 'dark') {
|
||||
body.classList.add('dark-mode');
|
||||
themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
|
||||
}
|
||||
|
||||
themeToggle.addEventListener('click', () => {
|
||||
body.classList.toggle('dark-mode');
|
||||
|
||||
// Update icon and save preference
|
||||
if (body.classList.contains('dark-mode')) {
|
||||
themeToggle.innerHTML = '<i data-lucide="moon" class="w-5 h-5"></i>';
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
themeToggle.innerHTML = '<i data-lucide="sun" class="w-5 h-5"></i>';
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
|
||||
// Reinitialize icons after DOM change
|
||||
lucide.createIcons();
|
||||
});
|
||||
|
||||
// Enhanced smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Professional card hover animations
|
||||
document.querySelectorAll('.professional-card').forEach(card => {
|
||||
card.addEventListener('mouseenter', (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const mouseX = e.clientX;
|
||||
const mouseY = e.clientY;
|
||||
|
||||
const deltaX = (mouseX - centerX) * 0.05;
|
||||
const deltaY = (mouseY - centerY) * 0.05;
|
||||
|
||||
card.style.transform = `translateY(-4px) rotateX(${-deltaY}deg) rotateY(${deltaX}deg)`;
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', () => {
|
||||
card.style.transform = 'translateY(0) rotateX(0deg) rotateY(0deg)';
|
||||
});
|
||||
});
|
||||
|
||||
// Intersection Observer for scroll animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.opacity = '1';
|
||||
entry.target.style.transform = 'translateY(0)';
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Apply scroll animations to cards
|
||||
document.querySelectorAll('.professional-card').forEach((card, index) => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = `opacity 0.6s ease ${index * 0.1}s, transform 0.6s ease ${index * 0.1}s`;
|
||||
observer.observe(card);
|
||||
});
|
||||
|
||||
// Subtle floating animation for hero background
|
||||
const hero = document.querySelector('.professional-hero');
|
||||
if (hero) {
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
|
||||
hero.addEventListener('mousemove', (e) => {
|
||||
const rect = hero.getBoundingClientRect();
|
||||
mouseX = (e.clientX - rect.left) / rect.width;
|
||||
mouseY = (e.clientY - rect.top) / rect.height;
|
||||
|
||||
const translateX = (mouseX - 0.5) * 10;
|
||||
const translateY = (mouseY - 0.5) * 10;
|
||||
hero.style.setProperty('--mouse-x', `${translateX}px`);
|
||||
hero.style.setProperty('--mouse-y', `${translateY}px`);
|
||||
});
|
||||
}
|
||||
|
||||
// Professional button interactions with enhanced effects
|
||||
document.querySelectorAll('.professional-btn-primary, .professional-btn-secondary, .professional-btn-urgent').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const ripple = document.createElement('div');
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const size = Math.max(rect.width, rect.height);
|
||||
const x = e.clientX - rect.left - size / 2;
|
||||
const y = e.clientY - rect.top - size / 2;
|
||||
|
||||
ripple.style.cssText = `
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
width: ${size}px;
|
||||
height: ${size}px;
|
||||
left: ${x}px;
|
||||
top: ${y}px;
|
||||
animation: ripple 0.5s linear;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
btn.style.position = 'relative';
|
||||
btn.style.overflow = 'hidden';
|
||||
btn.appendChild(ripple);
|
||||
|
||||
setTimeout(() => {
|
||||
ripple.remove();
|
||||
}, 500);
|
||||
});
|
||||
});
|
||||
|
||||
// Add ripple animation keyframes
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes ripple {
|
||||
to {
|
||||
transform: scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user