feat: redesign entire CRM theme from brutalist to glassmorphism
Templates modified: - templates/base.html.twig: header frosted glass (glass-heavy, backdrop-blur-24px), footer dark glass (glass-dark-heavy), cookie banner floating glass panel with rounded corners, all buttons converted to btn-glass/btn-gold/btn-dark classes, body background with radial gradient mesh (gold + indigo orbs), removed all border-4/border-8 thick borders, added rounded-lg corners on nav items - templates/admin/_layout.html.twig: sidebar dark glass (glass-dark-heavy), nav items with sidebar-nav-item class (rounded-lg, hover glow), active items with gold glow shadow, avatar rounded-lg, dropdown borders changed to border-white/10, mobile overlay with backdrop-blur-4px - templates/home/index.html.twig: login card with glass-heavy + glass-gold header, inputs with input-glass class (frosted blur, gold focus ring), buttons btn-gold with hover lift effect - templates/security/login.html.twig: same glass treatment as home - templates/security/2fa_*.html.twig: glass cards and inputs - templates/security/forgot_password.html.twig: glass treatment - templates/security/set_password*.html.twig: glass treatment - templates/legal/_layout.html.twig: glass header - templates/legal/tarif.html.twig: tabs converted to glass/glass-dark, all pricing cards glass/glass-gold, tables glass with rounded overflow - templates/external_redirect.html.twig: glass card SCSS (assets/app.scss): - Added CSS custom properties: --glass-bg, --glass-border, --glass-blur, --gold, --gold-glow, --radius, --shadow-glass, etc. - Added glass classes: .glass, .glass-heavy, .glass-dark, .glass-dark-heavy, .glass-gold (each with backdrop-filter, semi-transparent bg, subtle borders) - Added button classes: .btn-glass, .btn-gold, .btn-dark (with hover lift, glow shadows, smooth cubic-bezier transitions) - Added .input-glass (frosted input with gold focus ring) - Added .sidebar-nav-item with .active/.active-danger states - Added .glass-bg body class with radial gradient background - Added custom scrollbar for sidebar - Moved admin layout styles from inline <style> to SCSS JavaScript (assets/app.js): - Updated tarif tab classes from brutalist to glass Config: - .env.local: OAUTH_KEYCLOAK_REALM changed from siteconseil to master Design direction: frosted glass panels over gradient mesh background, semi-transparent surfaces, subtle 1px borders with white/20 opacity, soft box-shadows, rounded-16px corners, smooth hover transitions with translateY(-1px) lift effect, gold (#fabf04) accent glow shadows Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
@@ -142,8 +142,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Tarif tabs
|
||||
const tarifTabs = document.getElementById('tarif-tabs');
|
||||
if (tarifTabs) {
|
||||
const active = 'px-6 py-3 font-black uppercase text-sm tracking-widest bg-gray-900 text-white border-2 border-gray-900 border-b-0 cursor-pointer';
|
||||
const inactive = 'px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all';
|
||||
const active = 'px-6 py-3 font-bold uppercase text-sm tracking-wider glass-dark text-white border border-white/20 border-b-0 cursor-pointer';
|
||||
const inactive = 'px-6 py-3 font-bold uppercase text-sm tracking-wider glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all';
|
||||
|
||||
tarifTabs.querySelectorAll('[data-tab]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
|
||||
243
assets/app.scss
243
assets/app.scss
@@ -1,5 +1,152 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ─── Glass Design System ─── */
|
||||
|
||||
:root {
|
||||
--glass-bg: rgba(255, 255, 255, 0.65);
|
||||
--glass-bg-heavy: rgba(255, 255, 255, 0.85);
|
||||
--glass-border: rgba(255, 255, 255, 0.3);
|
||||
--glass-border-strong: rgba(255, 255, 255, 0.5);
|
||||
--glass-dark: rgba(17, 24, 39, 0.85);
|
||||
--glass-dark-heavy: rgba(17, 24, 39, 0.92);
|
||||
--glass-blur: 16px;
|
||||
--glass-blur-heavy: 24px;
|
||||
--gold: #fabf04;
|
||||
--gold-light: rgba(250, 191, 4, 0.15);
|
||||
--gold-glow: rgba(250, 191, 4, 0.4);
|
||||
--radius: 16px;
|
||||
--radius-sm: 10px;
|
||||
--radius-xs: 6px;
|
||||
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
--shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
--shadow-gold: 0 4px 24px rgba(250, 191, 4, 0.25);
|
||||
}
|
||||
|
||||
/* ─── Animated background ─── */
|
||||
|
||||
body.glass-bg {
|
||||
background: #f0f0f5;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(250, 191, 4, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 50% 80%, rgba(250, 191, 4, 0.05) 0%, transparent 50%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* ─── Glass panel ─── */
|
||||
|
||||
.glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-glass);
|
||||
}
|
||||
|
||||
.glass-heavy {
|
||||
background: var(--glass-bg-heavy);
|
||||
backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
border: 1px solid var(--glass-border-strong);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-glass);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: var(--glass-dark);
|
||||
backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.glass-dark-heavy {
|
||||
background: var(--glass-dark-heavy);
|
||||
backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur-heavy));
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.glass-gold {
|
||||
background: rgba(250, 191, 4, 0.12);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid rgba(250, 191, 4, 0.3);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
|
||||
/* ─── Glass buttons ─── */
|
||||
|
||||
.btn-glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-xs);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--glass-bg-heavy);
|
||||
box-shadow: var(--shadow-glass-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gold {
|
||||
background: var(--gold);
|
||||
border: 1px solid rgba(250, 191, 4, 0.6);
|
||||
border-radius: var(--radius-xs);
|
||||
box-shadow: var(--shadow-gold);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 6px 28px rgba(250, 191, 4, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: var(--glass-dark-heavy);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-xs);
|
||||
color: white;
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(99, 102, 241, 0.85);
|
||||
border-color: rgba(99, 102, 241, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Glass input ─── */
|
||||
|
||||
.input-glass {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--radius-xs);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: var(--gold);
|
||||
box-shadow: 0 0 0 3px var(--gold-light), var(--shadow-glass);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Page containers ─── */
|
||||
|
||||
.page-container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
@@ -13,9 +160,9 @@
|
||||
}
|
||||
|
||||
.heading-page {
|
||||
border-bottom: 4px solid #111827;
|
||||
border-bottom: 2px solid var(--gold);
|
||||
display: inline-block;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-content .page-container {
|
||||
@@ -26,3 +173,95 @@
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Admin layout ─── */
|
||||
|
||||
.admin-wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.admin-sidebar {
|
||||
position: fixed;
|
||||
left: -260px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.admin-sidebar.open { left: 0; }
|
||||
.admin-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 40;
|
||||
}
|
||||
.admin-sidebar.open + .admin-overlay { display: block; }
|
||||
}
|
||||
|
||||
/* ─── Sidebar nav items ─── */
|
||||
|
||||
.sidebar-nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.625rem 0.875rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.2s ease;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--gold);
|
||||
color: #111827;
|
||||
box-shadow: 0 2px 12px rgba(250, 191, 4, 0.3);
|
||||
}
|
||||
|
||||
&.active-danger {
|
||||
background: rgba(220, 38, 38, 0.8);
|
||||
color: white;
|
||||
box-shadow: 0 2px 12px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Scrollbar styling ─── */
|
||||
|
||||
.admin-sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.admin-sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.admin-sidebar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ─── Smooth transitions ─── */
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@@ -3,84 +3,71 @@
|
||||
{% block body_class %}{% endblock %}
|
||||
{% block header %}{% endblock %}
|
||||
{% block main_class %}flex{% endblock %}
|
||||
{% block stylesheets %}
|
||||
<style>
|
||||
.admin-wrapper { display: flex; min-height: 100vh; }
|
||||
.admin-sidebar { width: 240px; flex-shrink: 0; overflow-y: auto; }
|
||||
.admin-content { flex: 1; min-width: 0; overflow-y: auto; }
|
||||
@media (max-width: 1023px) {
|
||||
.admin-sidebar { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 50; transition: left 0.2s; }
|
||||
.admin-sidebar.open { left: 0; }
|
||||
.admin-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 40; }
|
||||
.admin-sidebar.open + .admin-overlay { display: block; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% set current_route = app.request.attributes.get('_route') %}
|
||||
|
||||
{% block body %}
|
||||
<div class="admin-wrapper">
|
||||
<aside class="admin-sidebar bg-gray-900 border-r-4 border-[#fabf04] flex flex-col" id="admin-sidebar">
|
||||
<div class="p-4 border-b border-gray-700">
|
||||
<aside class="admin-sidebar glass-dark-heavy flex flex-col" id="admin-sidebar" style="border-radius: 0;">
|
||||
<div class="p-5 border-b border-white/10">
|
||||
<a href="{{ path('app_admin_dashboard') }}" class="flex items-center gap-3">
|
||||
<img class="h-8 w-auto" src="{{ 'logo_facture.png' | imagine_filter('navbar_logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<span class="text-white font-black uppercase text-xs tracking-widest">Admin</span>
|
||||
<span class="text-white/80 font-bold uppercase text-xs tracking-widest">Admin</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
|
||||
<a href="{{ path('app_admin_dashboard') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_dashboard' ? 'bg-[#fabf04] text-gray-900' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}">
|
||||
<a href="{{ path('app_admin_dashboard') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_dashboard' ? 'active' : '' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
|
||||
Tableau de bord
|
||||
</a>
|
||||
<div class="sidebar-dropdown">
|
||||
<button class="sidebar-dropdown-btn flex items-center justify-between w-full px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_services' ? 'bg-[#fabf04] text-gray-900' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}">
|
||||
<button class="sidebar-dropdown-btn sidebar-nav-item w-full justify-between {{ current_route starts with 'app_admin_services' ? 'active' : '' }}">
|
||||
<span class="flex items-center gap-3">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/></svg>
|
||||
Services
|
||||
</span>
|
||||
<svg class="w-3 h-3 sidebar-dropdown-arrow transition-transform {{ current_route starts with 'app_admin_services' ? 'rotate-180' : '' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"/></svg>
|
||||
</button>
|
||||
<div class="sidebar-dropdown-menu ml-7 pl-3 border-l-2 border-gray-700 space-y-0.5 py-1 {{ current_route starts with 'app_admin_services' ? '' : 'hidden' }}">
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_site' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">Site Internet</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_ticket' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">E-Ticket</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_asso' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">E-Asso</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_mail' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">E-Mail</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_newsletter' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">E-Newsletter</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_sign' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">E-Sign</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all {{ current_route == 'app_admin_services_ndd' ? 'text-[#fabf04]' : 'text-gray-500 hover:text-gray-300' }}">E-Ndd</a>
|
||||
<div class="sidebar-dropdown-menu ml-7 pl-3 border-l border-white/10 space-y-0.5 py-1 {{ current_route starts with 'app_admin_services' ? '' : 'hidden' }}">
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_site' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">Site Internet</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_ticket' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">E-Ticket</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_asso' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">E-Asso</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_mail' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">E-Mail</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_newsletter' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">E-Newsletter</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_sign' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">E-Sign</a>
|
||||
<a href="#" class="block px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-md transition-all {{ current_route == 'app_admin_services_ndd' ? 'text-[#fabf04]' : 'text-white/40 hover:text-white/70' }}">E-Ndd</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ path('app_admin_clients_index') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_clients' ? 'bg-[#fabf04] text-gray-900' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}">
|
||||
<a href="{{ path('app_admin_clients_index') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_clients' ? 'active' : '' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||||
Clients
|
||||
</a>
|
||||
<a href="{{ path('app_admin_facturation_index') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_facturation' ? 'bg-[#fabf04] text-gray-900' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}">
|
||||
<a href="{{ path('app_admin_facturation_index') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_facturation' ? 'active' : '' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/></svg>
|
||||
Facturation
|
||||
</a>
|
||||
<a href="{{ path('app_admin_revendeurs_index') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_revendeurs' ? 'bg-[#fabf04] text-gray-900' : 'text-gray-300 hover:bg-gray-800 hover:text-white' }}">
|
||||
<a href="{{ path('app_admin_revendeurs_index') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_revendeurs' ? 'active' : '' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
|
||||
Revendeurs
|
||||
</a>
|
||||
|
||||
{% if is_granted('ROLE_ROOT') %}
|
||||
<div class="pt-4 mt-4 border-t border-gray-700">
|
||||
<p class="px-3 mb-2 text-[9px] font-black uppercase tracking-widest text-red-500">Super Admin</p>
|
||||
<a href="{{ path('app_admin_membres') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_membres' ? 'bg-red-600 text-white' : 'text-red-400 hover:bg-gray-800 hover:text-red-300' }}">
|
||||
<div class="pt-4 mt-4 border-t border-white/10">
|
||||
<p class="px-3 mb-2 text-[9px] font-bold uppercase tracking-widest text-red-400/70">Super Admin</p>
|
||||
<a href="{{ path('app_admin_membres') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_membres' ? 'active-danger' : '' }}" style="color: {{ current_route starts with 'app_admin_membres' ? 'white' : 'rgba(248,113,113,0.7)' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
|
||||
Administration
|
||||
</a>
|
||||
<a href="{{ path('app_admin_stats_index') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_stats' ? 'bg-red-600 text-white' : 'text-red-400 hover:bg-gray-800 hover:text-red-300' }}">
|
||||
<a href="{{ path('app_admin_stats_index') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_stats' ? 'active-danger' : '' }}" style="color: {{ current_route starts with 'app_admin_stats' ? 'white' : 'rgba(248,113,113,0.7)' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
|
||||
Statistiques
|
||||
</a>
|
||||
<a href="{{ path('app_admin_status_index') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_status' ? 'bg-red-600 text-white' : 'text-red-400 hover:bg-gray-800 hover:text-red-300' }}">
|
||||
<a href="{{ path('app_admin_status_index') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_status' ? 'active-danger' : '' }}" style="color: {{ current_route starts with 'app_admin_status' ? 'white' : 'rgba(248,113,113,0.7)' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
|
||||
Status services
|
||||
</a>
|
||||
<a href="{{ path('app_admin_sync_index') }}" class="flex items-center gap-3 px-3 py-2.5 text-xs font-black uppercase tracking-widest transition-all {{ current_route starts with 'app_admin_sync' ? 'bg-red-600 text-white' : 'text-red-400 hover:bg-gray-800 hover:text-red-300' }}">
|
||||
<a href="{{ path('app_admin_sync_index') }}" class="sidebar-nav-item {{ current_route starts with 'app_admin_sync' ? 'active-danger' : '' }}" style="color: {{ current_route starts with 'app_admin_sync' ? 'white' : 'rgba(248,113,113,0.7)' }}">
|
||||
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
||||
Synchronisation
|
||||
</a>
|
||||
@@ -88,25 +75,24 @@
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
<div class="p-4 border-t border-gray-700">
|
||||
<a href="{{ path('app_admin_profil') }}" class="flex items-center gap-3 mb-3 p-2 -m-2 rounded hover:bg-gray-800 transition-colors">
|
||||
<div class="p-4 border-t border-white/10">
|
||||
<a href="{{ path('app_admin_profil') }}" class="flex items-center gap-3 mb-3 p-2 -m-2 rounded-lg hover:bg-white/5 transition-colors">
|
||||
{% if app.user.avatar %}
|
||||
<img src="{{ ('uploads/avatars/' ~ app.user.avatar) | imagine_filter('avatar_small') }}" alt="Avatar" class="w-8 h-8 border-2 border-gray-700 object-contain">
|
||||
<img src="{{ ('uploads/avatars/' ~ app.user.avatar) | imagine_filter('avatar_small') }}" alt="Avatar" class="w-8 h-8 rounded-lg border border-white/10 object-contain">
|
||||
{% else %}
|
||||
<div class="w-8 h-8 bg-[#fabf04] border-2 border-gray-700 flex items-center justify-center font-black text-xs text-gray-900">
|
||||
<div class="w-8 h-8 bg-[#fabf04] rounded-lg flex items-center justify-center font-bold text-xs text-gray-900">
|
||||
{{ app.user.firstName|first }}{{ app.user.lastName|first }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-white text-xs font-bold truncate">{{ app.user.fullName }}</p>
|
||||
<p class="text-gray-500 text-[10px] truncate">{{ app.user.email }}</p>
|
||||
<p class="text-white/40 text-[10px] truncate">{{ app.user.email }}</p>
|
||||
</div>
|
||||
{% if is_granted('ROLE_ROOT') %}
|
||||
<span class="px-1.5 py-0.5 bg-red-600 text-white text-[8px] font-black uppercase">Root</span>
|
||||
<span class="px-1.5 py-0.5 bg-red-500/80 text-white text-[8px] font-bold uppercase rounded">Root</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<a href="{{ path('app_logout') }}" class="flex items-center justify-center gap-2 w-full px-3 py-2 border border-gray-700 text-gray-400 text-xs font-black uppercase tracking-widest hover:bg-gray-800 hover:text-white transition-all">
|
||||
<a href="{{ path('app_logout') }}" class="flex items-center justify-center gap-2 w-full px-3 py-2 rounded-lg border border-white/10 text-white/50 text-xs font-bold uppercase tracking-widest hover:bg-white/5 hover:text-white/80 transition-all">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
|
||||
Deconnexion
|
||||
</a>
|
||||
@@ -115,12 +101,12 @@
|
||||
|
||||
<div class="admin-overlay" id="admin-overlay"></div>
|
||||
|
||||
<div class="admin-content bg-[#fbfbfb] flex flex-col">
|
||||
<div class="lg:hidden sticky top-0 z-30 bg-gray-900 border-b border-gray-700 px-4 py-3 flex items-center justify-between">
|
||||
<button id="admin-sidebar-toggle" class="text-gray-400 hover:text-white" aria-label="Menu">
|
||||
<div class="admin-content glass-bg flex flex-col">
|
||||
<div class="lg:hidden sticky top-0 z-30 glass-dark-heavy px-4 py-3 flex items-center justify-between" style="border-radius: 0;">
|
||||
<button id="admin-sidebar-toggle" class="text-white/60 hover:text-white" aria-label="Menu">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
</button>
|
||||
<span class="text-white font-black uppercase text-xs tracking-widest">Admin</span>
|
||||
<span class="text-white/80 font-bold uppercase text-xs tracking-widest">Admin</span>
|
||||
<span class="w-5"></span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -75,53 +75,51 @@
|
||||
{% endblock %}
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="{% block body_class %}min-h-screen flex flex-col{% endblock %} bg-[#fbfbfb] text-[#111827]">
|
||||
<body class="{% block body_class %}min-h-screen flex flex-col{% endblock %} glass-bg text-[#111827]">
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<nav class="mx-auto px-4 lg:px-8" role="navigation" aria-label="Navigation principale" itemscope itemtype="https://schema.org/SiteNavigationElement">
|
||||
<div class="flex justify-between items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<nav class="max-w-7xl mx-auto px-4 lg:px-8" role="navigation" aria-label="Navigation principale" itemscope itemtype="https://schema.org/SiteNavigationElement">
|
||||
<div class="flex justify-between items-center h-16">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ path('app_home') }}" class="flex items-center group" aria-label="CRM SITECONSEIL - Retour a l'accueil">
|
||||
<img class="h-10 md:h-14 w-auto" src="{{ 'logo_facture.png' | imagine_filter('navbar_logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('navbar_logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden lg:flex items-center space-x-1">
|
||||
<div class="hidden lg:flex items-center gap-1">
|
||||
{% set current_route = app.request.attributes.get('_route') %}
|
||||
<a href="{{ path('app_home') }}" itemprop="url" class="px-3 py-2 text-xs font-black uppercase tracking-widest transition-all {{ current_route == 'app_home' ? 'bg-yellow-400 border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]' : 'hover:text-indigo-600' }}"><span itemprop="name">Accueil</span></a>
|
||||
<a href="{{ path('app_home') }}" itemprop="url" class="px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg transition-all {{ current_route == 'app_home' ? 'bg-[#fabf04] text-gray-900 shadow-[0_2px_12px_rgba(250,191,4,0.3)]' : 'text-gray-600 hover:text-gray-900 hover:bg-white/50' }}"><span itemprop="name">Accueil</span></a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 border-l-4 border-gray-900 pl-6 h-full">
|
||||
<div class="flex items-center gap-2">
|
||||
{% if app.user %}
|
||||
<a href="{{ path('app_espace_client_index') }}" class="px-3 py-1.5 border-2 border-gray-900 bg-[#fabf04] text-gray-900 text-xs font-black uppercase tracking-widest hover:bg-yellow-500 transition-all hidden lg:inline-flex">Espace Client</a>
|
||||
<a href="{{ path('app_espace_prestataire_index') }}" class="px-3 py-1.5 border-2 border-gray-900 bg-white text-gray-900 text-xs font-black uppercase tracking-widest hover:bg-gray-900 hover:text-white transition-all hidden lg:inline-flex">Espace Prestataire</a>
|
||||
<a href="#" class="p-2 border-2 border-gray-900 bg-white text-gray-900 hover:bg-gray-900 hover:text-white transition-all flex items-center justify-center" aria-label="Mon compte">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ path('app_home') }}" class="p-2 border-2 border-gray-900 bg-white text-gray-900 hover:bg-gray-900 hover:text-white transition-all flex items-center justify-center" aria-label="Connexion">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
<div class="flex items-center gap-3">
|
||||
{% if app.user %}
|
||||
<a href="{{ path('app_espace_client_index') }}" class="btn-gold px-4 py-2 text-xs font-bold uppercase tracking-wider hidden lg:inline-flex">Espace Client</a>
|
||||
<a href="{{ path('app_espace_prestataire_index') }}" class="btn-glass px-4 py-2 text-xs font-bold uppercase tracking-wider hidden lg:inline-flex">Espace Prestataire</a>
|
||||
<a href="#" class="btn-glass p-2 flex items-center justify-center" aria-label="Mon compte">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ path('app_home') }}" class="btn-glass p-2 flex items-center justify-center" aria-label="Connexion">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<button id="mobile-menu-btn" class="lg:hidden p-2 border-2 border-gray-900 bg-yellow-400" aria-label="Ouvrir le menu de navigation" aria-expanded="false" aria-controls="mobile-menu">
|
||||
<svg id="menu-icon-open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
<svg id="menu-icon-close" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<button id="mobile-menu-btn" class="lg:hidden btn-gold p-2" aria-label="Ouvrir le menu de navigation" aria-expanded="false" aria-controls="mobile-menu">
|
||||
<svg id="menu-icon-open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
|
||||
<svg id="menu-icon-close" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div id="mobile-menu" class="hidden lg:hidden border-t-4 border-gray-900 bg-white" role="menu">
|
||||
<div class="p-4 space-y-2 uppercase font-black italic">
|
||||
<a href="{{ path('app_home') }}" class="block p-3 border-2 {{ current_route == 'app_home' ? 'border-gray-900 bg-yellow-400' : 'border-transparent hover:border-gray-900 hover:bg-gray-50' }}" role="menuitem">Accueil</a>
|
||||
<div id="mobile-menu" class="hidden lg:hidden border-t border-white/20 px-4 pb-4" role="menu">
|
||||
<div class="pt-3 space-y-2">
|
||||
<a href="{{ path('app_home') }}" class="block px-4 py-3 rounded-lg text-sm font-bold {{ current_route == 'app_home' ? 'bg-[#fabf04] text-gray-900' : 'text-gray-700 hover:bg-white/50' }}" role="menuitem">Accueil</a>
|
||||
{% if app.user %}
|
||||
<a href="#" class="block p-3 border-2 border-transparent hover:border-gray-900 hover:bg-gray-50" role="menuitem">Espace Client</a>
|
||||
<a href="#" class="block p-3 border-2 border-transparent hover:border-gray-900 hover:bg-gray-50" role="menuitem">Espace Prestataire</a>
|
||||
<a href="{{ path('app_espace_client_index') }}" class="block px-4 py-3 rounded-lg text-sm font-bold text-gray-700 hover:bg-white/50" role="menuitem">Espace Client</a>
|
||||
<a href="{{ path('app_espace_prestataire_index') }}" class="block px-4 py-3 rounded-lg text-sm font-bold text-gray-700 hover:bg-white/50" role="menuitem">Espace Prestataire</a>
|
||||
{% else %}
|
||||
<a href="{{ path('app_home') }}" class="block p-3 border-2 border-gray-900 bg-[#fabf04] text-center" role="menuitem">Connexion</a>
|
||||
<a href="{{ path('app_home') }}" class="block px-4 py-3 rounded-lg text-sm font-bold bg-[#fabf04] text-gray-900 text-center" role="menuitem">Connexion</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,20 +132,20 @@
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
<footer class="bg-yellow-400 border-t-8 border-gray-900 text-gray-900 mt-auto">
|
||||
<footer class="glass-dark-heavy mt-auto text-white" style="border-radius: 0;">
|
||||
<div class="max-w-7xl mx-auto py-12 px-4">
|
||||
<div class="flex flex-wrap gap-12 pb-12 mb-12 border-b-4 border-gray-900">
|
||||
<div class="flex flex-wrap gap-12 pb-12 mb-12 border-b border-white/10">
|
||||
<div class="flex-1 min-w-[280px]">
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block mb-4">Nous Contacter</h3>
|
||||
<p class="font-bold text-lg leading-snug">27 RUE LE SÉRURIER<br>02100 SAINT-QUENTIN, FRANCE</p>
|
||||
<a href="mailto:contact@siteconseil.fr" class="inline-block mt-4 px-4 py-2 bg-gray-900 text-white font-black uppercase text-sm hover:bg-indigo-600 transition-colors">
|
||||
<h3 class="text-2xl font-bold mb-4 text-[#fabf04]">Nous Contacter</h3>
|
||||
<p class="text-sm text-white/70 leading-relaxed">27 rue Le Serurier<br>02100 Saint-Quentin, France</p>
|
||||
<a href="mailto:contact@siteconseil.fr" class="inline-block mt-4 btn-gold px-4 py-2 text-xs font-bold uppercase tracking-wider text-gray-900">
|
||||
contact@siteconseil.fr
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-[280px]">
|
||||
<h3 class="text-3xl font-black uppercase tracking-tighter italic border-b-4 border-gray-900 inline-block mb-4">CRM SITECONSEIL</h3>
|
||||
<p class="font-bold text-gray-800 italic leading-normal">
|
||||
<h3 class="text-2xl font-bold mb-4 text-[#fabf04]">CRM SITECONSEIL</h3>
|
||||
<p class="text-sm text-white/60 leading-relaxed">
|
||||
CRM SITECONSEIL est la plateforme de relation entre
|
||||
SITECONSEIL, ses clients et ses revendeurs.
|
||||
Retrouvez vos factures, commandes et devis directement en un seul endroit.
|
||||
@@ -157,33 +155,33 @@
|
||||
|
||||
<div class="flex flex-col sm:flex-row flex-wrap justify-between items-start sm:items-center gap-6">
|
||||
<div>
|
||||
<p class="font-black uppercase text-sm">© {{ "now"|date("Y") }} CRM SITECONSEIL.</p>
|
||||
<p class="text-[11px] font-bold opacity-80">Solution proposee par la <a href="https://www.siteconseil.fr" class="underline hover:no-underline">SARL SITECONSEIL</a></p>
|
||||
<p class="text-[10px] font-bold opacity-70">Siret : 418 664 058</p>
|
||||
<p class="font-bold text-sm text-white/80">© {{ "now"|date("Y") }} CRM SITECONSEIL</p>
|
||||
<p class="text-[11px] text-white/50 mt-1">Solution proposee par la <a href="https://www.siteconseil.fr" class="text-[#fabf04] hover:underline">SARL SITECONSEIL</a></p>
|
||||
<p class="text-[10px] text-white/40 mt-0.5">Siret : 418 664 058</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a href="{{ path('app_legal_mention_legal') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Mentions Legales</a>
|
||||
<a href="{{ path('app_legal_cookie') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Politique de Cookies</a>
|
||||
<a href="{{ path('app_legal_cgu') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">CGU</a>
|
||||
<a href="{{ path('app_legal_cgv') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">CGV</a>
|
||||
<a href="{{ path('app_legal_rgpd') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Politique RGPD</a>
|
||||
<a href="{{ path('app_legal_hebergement') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Hebergement</a>
|
||||
<a href="{{ path('app_legal_tarif') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Tarifs</a>
|
||||
<a href="{{ path('app_legal_conformite') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Conformite</a>
|
||||
<a href="{{ path('app_status') }}" class="text-[10px] px-2 py-1 font-black uppercase bg-gray-900 text-white hover:bg-indigo-600 transition-colors">Status</a>
|
||||
<a href="{{ path('app_legal_mention_legal') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">Mentions Legales</a>
|
||||
<a href="{{ path('app_legal_cookie') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">Cookies</a>
|
||||
<a href="{{ path('app_legal_cgu') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">CGU</a>
|
||||
<a href="{{ path('app_legal_cgv') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">CGV</a>
|
||||
<a href="{{ path('app_legal_rgpd') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">RGPD</a>
|
||||
<a href="{{ path('app_legal_hebergement') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">Hebergement</a>
|
||||
<a href="{{ path('app_legal_tarif') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">Tarifs</a>
|
||||
<a href="{{ path('app_legal_conformite') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">Conformite</a>
|
||||
<a href="{{ path('app_status') }}" class="text-[10px] px-3 py-1.5 font-bold uppercase rounded-md bg-white/10 text-white/70 hover:bg-[#fabf04] hover:text-gray-900 transition-all">Status</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="cookie-banner" class="hidden fixed bottom-0 left-0 right-0 z-50 border-t-4 border-gray-900 bg-white p-4">
|
||||
<div class="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p class="text-sm font-bold text-gray-700">
|
||||
Ce site utilise des cookies pour mesurer l'audience. <a href="{{ path('app_legal_cookie') }}" class="text-indigo-800 underline hover:text-indigo-950">En savoir plus</a>
|
||||
<div id="cookie-banner" class="hidden fixed bottom-4 left-4 right-4 z-50 glass-heavy p-4 max-w-4xl mx-auto">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p class="text-sm text-gray-700">
|
||||
Ce site utilise des cookies pour mesurer l'audience. <a href="{{ path('app_legal_cookie') }}" class="text-indigo-600 underline hover:text-indigo-800">En savoir plus</a>
|
||||
</p>
|
||||
<div class="flex gap-2">
|
||||
<button id="cookie-refuse" class="px-4 py-2 border-2 border-gray-900 bg-white font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all cursor-pointer">Refuser</button>
|
||||
<button id="cookie-accept" class="px-4 py-2 border-2 border-gray-900 bg-[#fabf04] font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all cursor-pointer">Accepter</button>
|
||||
<button id="cookie-refuse" class="btn-glass px-4 py-2 text-xs font-bold uppercase tracking-wider">Refuser</button>
|
||||
<button id="cookie-accept" class="btn-gold px-4 py-2 text-xs font-bold uppercase tracking-wider text-gray-900">Accepter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
{% block title %}Redirection externe - CRM SITECONSEIL{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -15,7 +15,7 @@
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white p-8 shadow-[8px_8px_0px_rgba(0,0,0,1)] text-center">
|
||||
<div class="glass-heavy overflow-hidden p-8 text-center">
|
||||
<div class="mb-4">
|
||||
<svg class="w-12 h-12 mx-auto text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<a href="{{ url }}" rel="noopener noreferrer" class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1 text-center">
|
||||
<a href="{{ url }}" rel="noopener noreferrer" class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900 text-center">
|
||||
Continuer
|
||||
</a>
|
||||
<a href="{{ path('app_home') }}" class="text-xs font-bold text-gray-500 hover:text-indigo-600 transition-colors">
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
{% block description %}Connectez-vous au CRM SITECONSEIL pour acceder a votre espace client ou revendeur.{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -15,47 +15,44 @@
|
||||
|
||||
{% block body %}
|
||||
{% if app.user %}
|
||||
{# Tableau de bord dynamique selon le role #}
|
||||
<div class="page-container">
|
||||
<h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page mb-8">Tableau de bord</h1>
|
||||
<h1 class="text-2xl font-bold heading-page mb-8">Tableau de bord</h1>
|
||||
<p class="text-sm text-gray-600">Bienvenue, <strong>{{ app.user.fullName }}</strong>.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
|
||||
<div class="bg-yellow-400 border-b-4 border-gray-900 p-6 text-center">
|
||||
<h1 class="text-3xl font-black uppercase tracking-tighter italic">CRM SITECONSEIL</h1>
|
||||
<p class="text-sm font-bold mt-1">Espace de gestion</p>
|
||||
<div class="glass-heavy overflow-hidden">
|
||||
<div class="glass-gold p-6 text-center" style="border-radius: 16px 16px 0 0; border-bottom: 1px solid rgba(250,191,4,0.3);">
|
||||
<h1 class="text-2xl font-bold text-gray-900">CRM SITECONSEIL</h1>
|
||||
<p class="text-sm text-gray-700/70 mt-1">Espace de gestion</p>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<form method="post" action="{{ path('app_home') }}" class="flex flex-col gap-5">
|
||||
<div>
|
||||
<label for="email" class="block text-xs font-black uppercase tracking-widest mb-2">Email</label>
|
||||
<label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Email</label>
|
||||
<input type="email" id="email" name="_username" required
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="input-glass w-full px-4 py-3 text-sm font-medium"
|
||||
placeholder="votre@email.fr">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-xs font-black uppercase tracking-widest mb-2">Mot de passe</label>
|
||||
<label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Mot de passe</label>
|
||||
<input type="password" id="password" name="_password" required
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="input-glass w-full px-4 py-3 text-sm font-medium"
|
||||
placeholder="••••••••">
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
<button type="submit" class="btn-gold w-full px-6 py-3 text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Connexion a mon espace
|
||||
</button>
|
||||
<a href="{{ path('app_forgot_password') }}" class="block text-center mt-3 text-xs font-bold text-gray-500 hover:text-indigo-600 transition-colors">Mot de passe oublie ?</a>
|
||||
<a href="{{ path('app_forgot_password') }}" class="block text-center mt-1 text-xs text-gray-500 hover:text-indigo-600 transition-colors">Mot de passe oublie ?</a>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 pt-6 border-t-2 border-gray-200">
|
||||
<a href="{{ path('connect_keycloak') }}"
|
||||
class="w-full flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-900 bg-gray-900 text-white font-black uppercase tracking-widest text-sm hover:bg-indigo-600 transition-all">
|
||||
<div class="mt-6 pt-6 border-t border-gray-200/50">
|
||||
<a href="{{ path('connect_keycloak') }}" class="btn-dark w-full flex items-center justify-center gap-2 px-6 py-3 text-sm font-bold uppercase tracking-wider">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
|
||||
Connexion SITECONSEIL
|
||||
</a>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -15,15 +15,15 @@
|
||||
|
||||
{# ─── Tabs ─── #}
|
||||
<div>
|
||||
<div class="flex flex-wrap border-b-4 border-gray-900" id="tarif-tabs">
|
||||
<button data-tab="site" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-gray-900 text-white border-2 border-gray-900 border-b-0 cursor-pointer">Site Internet</button>
|
||||
<button data-tab="ecommerce" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">E-Commerce</button>
|
||||
<button data-tab="domaine" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">Nom de domaine</button>
|
||||
<button data-tab="mail" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">Esy-Mail</button>
|
||||
<button data-tab="mailer" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">Esy-Mailer</button>
|
||||
<button data-tab="tchat" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">Esy-Tchat</button>
|
||||
<button data-tab="meet" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">Esy-Meet</button>
|
||||
<button data-tab="defender" class="px-6 py-3 font-black uppercase text-sm tracking-widest bg-white text-gray-900 border-2 border-gray-900 border-b-0 cursor-pointer hover:bg-gray-100 transition-all">Esy-Defender</button>
|
||||
<div class="flex flex-wrap border-b border-gray-200" id="tarif-tabs">
|
||||
<button data-tab="site" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass-dark text-white border border-white/20 border-b-0 cursor-pointer">Site Internet</button>
|
||||
<button data-tab="ecommerce" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">E-Commerce</button>
|
||||
<button data-tab="domaine" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Nom de domaine</button>
|
||||
<button data-tab="mail" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Mail</button>
|
||||
<button data-tab="mailer" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Mailer</button>
|
||||
<button data-tab="tchat" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Tchat</button>
|
||||
<button data-tab="meet" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Meet</button>
|
||||
<button data-tab="defender" class="px-6 py-3 font-black uppercase text-sm tracking-widest glass text-gray-700 border border-gray-200 border-b-0 cursor-pointer hover:bg-white/80 transition-all">Esy-Defender</button>
|
||||
</div>
|
||||
|
||||
{# ─── TAB : Site Internet ─── #}
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">Offre Business</h3>
|
||||
<p class="text-3xl font-black mt-2">500 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Paiement unique</p>
|
||||
@@ -58,8 +58,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900 text-white text-[8px] font-black uppercase tracking-widest px-2 py-1">Premium</span>
|
||||
<div class="glass-gold p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">Premium</span>
|
||||
<h3 class="font-black uppercase text-lg">Offre Premium</h3>
|
||||
<p class="text-3xl font-black mt-2">3 200 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs mt-1">Paiement unique</p>
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Ces offres comprennent</h2>
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<ul class="text-sm space-y-2">
|
||||
<li>✓ L'achat de la licence Esy-Web</li>
|
||||
<li>✓ Un acces a 100 % des fonctionnalites, sans options payantes ni plugins supplementaires</li>
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Puis 100 € HT / mois</h2>
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<ul class="text-sm space-y-2">
|
||||
<li>✓ Hebergement securise</li>
|
||||
<li>✓ Sauvegardes regulieres</li>
|
||||
@@ -108,8 +108,8 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Descriptif technique des deux formules</h2>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Caracteristiques</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Caracteristiques</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Site Internet securise et crypte</li>
|
||||
@@ -131,8 +131,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Editeur de texte</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Editeur de texte</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Choix de la police</li>
|
||||
@@ -160,8 +160,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Fonctionnalites et modules</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Fonctionnalites et modules</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Gestion de contenu</li>
|
||||
@@ -206,8 +206,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Outils et utilitaires</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Outils et utilitaires</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Esy-Analytics</li>
|
||||
@@ -224,8 +224,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Hebergement et serveur</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Hebergement et serveur</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1">
|
||||
<li>✓ Infrastructure serveurs dedies</li>
|
||||
@@ -236,8 +236,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Options</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Options</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1">
|
||||
<li>✓ Graphisme prive</li>
|
||||
@@ -251,20 +251,20 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Avantages cles SITECONSEIL</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Maitrise budgetaire</h3>
|
||||
<p class="text-sm">Vous choisissez l'offre la plus adaptee a votre tresorerie. L'approche progressive reduit la pression d'un cout initial important.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Evolutivite et puissance</h3>
|
||||
<p class="text-sm">Votre solution evolue en permanence et suit l'evolution de la technologie. Vous beneficiez de toutes les fonctionnalites offertes par la puissance du CMS Esy-Web.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Accompagnement specifique</h3>
|
||||
<p class="text-sm">Un support est garanti quelle que soit la formule choisie : Business ou Premium.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="mt-6 glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Ne reportez plus votre projet web par prudence financiere.</p>
|
||||
<p class="text-sm mt-2">Notre promesse est un site internet concu pour etre evolutif et perenne sur le long terme. Chaque offre est structuree comme une etape vers votre reussite numerique.</p>
|
||||
</div>
|
||||
@@ -283,7 +283,7 @@
|
||||
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">E-Commerce Business</h3>
|
||||
<p class="text-3xl font-black mt-2">999 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Paiement unique</p>
|
||||
@@ -295,8 +295,8 @@
|
||||
<p class="mt-4 text-sm">Toutes les fonctionnalites de la formule <strong>Premium site internet</strong> + toutes les fonctionnalites de notre E-boutique E-Commerce.</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900 text-white text-[8px] font-black uppercase tracking-widest px-2 py-1">La formule royale</span>
|
||||
<div class="glass-gold p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">La formule royale</span>
|
||||
<h3 class="font-black uppercase text-lg">E-Commerce Premium</h3>
|
||||
<p class="text-3xl font-black mt-2">5 110 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs mt-1">soit 14 € HT / jour pendant 1 an</p>
|
||||
@@ -318,8 +318,8 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Fonctionnalites E-Commerce</h2>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Affichage et gestion des produits</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Affichage et gestion des produits</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Catalogue en ligne</li>
|
||||
@@ -352,8 +352,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Modes de paiement</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Modes de paiement</span></div>
|
||||
<div class="p-4">
|
||||
<p class="text-sm font-bold mb-2">Paiement securise bancaire integre compris dans l'offre :</p>
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-3">
|
||||
@@ -374,8 +374,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Gestion des frais de port</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Gestion des frais de port</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1">
|
||||
<li>✓ Possibilite d'offrir les frais de port aux clients</li>
|
||||
@@ -387,8 +387,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Gestion des commandes</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Gestion des commandes</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Notification des commandes par email</li>
|
||||
@@ -405,8 +405,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Fonctionnalites avancees</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Fonctionnalites avancees</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1 columns-1 md:columns-2">
|
||||
<li>✓ Module de gestion de contenu</li>
|
||||
@@ -431,20 +431,20 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Pourquoi choisir nos offres E-Commerce ?</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Maitrise budgetaire</h3>
|
||||
<p class="text-sm">Vous investissez selon vos moyens, sans la pression d'un cout initial trop important pour vos finances.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Croissance securisee</h3>
|
||||
<p class="text-sm">Votre site evolue en meme temps que votre activite et vos revenus. Vous disposez d'une solution toutes options et de toute la puissance de notre CMS.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Accompagnement garanti</h3>
|
||||
<p class="text-sm">Nous vous accompagnons dans la mise en place de l'offre que vous choisissez : E-Commerce Business ou E-Commerce Premium.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="mt-6 glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Ne reportez plus votre projet web par crainte pour votre tresorerie.</p>
|
||||
<p class="text-sm mt-2">Notre promesse : un site professionnel, evolutif sur le long terme. Chaque offre est pensee comme une etape vers votre succes numerique.</p>
|
||||
</div>
|
||||
@@ -459,7 +459,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="glass overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-gray-900 text-white">
|
||||
@@ -531,7 +531,7 @@
|
||||
<h2 class="text-xl font-black uppercase mb-2">Esy-Mail</h2>
|
||||
<p class="text-sm font-bold">SITECONSEIL vous propose sa propre messagerie professionnelle !</p>
|
||||
<p class="text-sm mt-2">Une plateforme <strong>100 % francaise</strong>, certifiee, securisee et independante.</p>
|
||||
<div class="mt-4 border-2 border-gray-900 p-6">
|
||||
<div class="mt-4 glass p-6">
|
||||
<ul class="text-sm space-y-2">
|
||||
<li>✓ Creation et gestion completes de vos boites mail</li>
|
||||
<li>✓ Cryptage de bout en bout pour une securite maximale</li>
|
||||
@@ -553,14 +553,14 @@
|
||||
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">Mise en service</h3>
|
||||
<p class="text-3xl font-black mt-2">50 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Paiement unique</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900 text-white text-[8px] font-black uppercase tracking-widest px-2 py-1">Pack de base</span>
|
||||
<div class="glass-gold p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">Pack de base</span>
|
||||
<h3 class="font-black uppercase text-lg">Abonnement mensuel</h3>
|
||||
<p class="text-3xl font-black mt-2">30 € <span class="text-sm font-bold">HT / mois</span></p>
|
||||
<p class="text-xs mt-1">Tout compris</p>
|
||||
@@ -570,7 +570,7 @@
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Le pack de base comprend</h2>
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<ul class="text-sm space-y-2 columns-1 md:columns-2">
|
||||
<li>✓ 2 boites mail professionnelles</li>
|
||||
<li>✓ 5 Go de stockage (extensible a la demande)</li>
|
||||
@@ -592,8 +592,8 @@
|
||||
|
||||
<section>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Webmail moderne et intuitif</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Webmail moderne et intuitif</span></div>
|
||||
<div class="p-4">
|
||||
<p class="text-xs text-gray-500 mb-2">Developpe sur-mesure pour une gestion facile</p>
|
||||
<ul class="text-sm space-y-1">
|
||||
@@ -605,8 +605,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Fiabilite et securite</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Fiabilite et securite</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1">
|
||||
<li>✓ Certificats VMIC compatibles (protection de marque - en option via Certigo)</li>
|
||||
@@ -616,8 +616,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Options</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Options</span></div>
|
||||
<div class="p-4">
|
||||
<table class="w-full text-sm">
|
||||
<tbody>
|
||||
@@ -645,7 +645,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Pret a simplifier votre messagerie pro ?</p>
|
||||
<p class="text-sm mt-2">Passez a Esy-Mail : la solution certifiee, claire et sans surprise. Contactez-nous, nous activerons votre messagerie en quelques clics.</p>
|
||||
<p class="text-xs mt-4 opacity-80">Cette application respecte a la lettre la reglementation en vigueur en France et en Europe. Elle a ete approuvee et certifiee.</p>
|
||||
@@ -671,13 +671,13 @@
|
||||
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">Mise en service</h3>
|
||||
<p class="text-3xl font-black mt-2">50 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Paiement unique</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6">
|
||||
<div class="glass-gold p-6">
|
||||
<h3 class="font-black uppercase text-lg">Abonnement mensuel</h3>
|
||||
<p class="text-3xl font-black mt-2">30 € <span class="text-sm font-bold">HT / mois</span></p>
|
||||
<p class="text-xs mt-1">Tout compris</p>
|
||||
@@ -687,7 +687,7 @@
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">L'abonnement comprend</h2>
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<ul class="text-sm space-y-2 columns-1 md:columns-2">
|
||||
<li>✓ Installation et parametrage du service</li>
|
||||
<li>✓ Mise en service rapide</li>
|
||||
@@ -705,8 +705,8 @@
|
||||
|
||||
<section>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Mailer moderne et intuitif</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Mailer moderne et intuitif</span></div>
|
||||
<div class="p-4">
|
||||
<p class="text-xs text-gray-500 mb-2">Developpe sur-mesure pour une gestion facile</p>
|
||||
<ul class="text-sm space-y-1">
|
||||
@@ -717,8 +717,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Fiabilite et securite</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Fiabilite et securite</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-1">
|
||||
<li>✓ Disponibilite garantie : 99,99 % (hors maintenance)</li>
|
||||
@@ -730,7 +730,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Pret a simplifier vos campagnes email ?</p>
|
||||
<p class="text-sm mt-2">Passez a Esy-Mailer : la solution certifiee, claire et sans surprise. Contactez-nous, nous activerons votre mailer en quelques clics.</p>
|
||||
<p class="text-xs mt-4 opacity-80">Cette application respecte a la lettre la reglementation en vigueur en France et en Europe.</p>
|
||||
@@ -749,7 +749,7 @@
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Esy-Defender, c'est</h2>
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<ul class="text-sm space-y-3">
|
||||
<li>✓ Une barriere invisible mais bien reelle contre les attaques (DDoS, pirates, bots, IA, scripts de copie d'images ou de contenu)</li>
|
||||
<li>✓ Un systeme intelligent qui distingue automatiquement les menaces sans gener vos vrais visiteurs</li>
|
||||
@@ -764,7 +764,7 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Deux formules</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">Standard</h3>
|
||||
<p class="text-3xl font-black mt-2 text-green-700">Inclus</p>
|
||||
<p class="text-xs text-gray-500 mt-1">Integre nativement a Esy-Web</p>
|
||||
@@ -779,8 +779,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900 text-white text-[8px] font-black uppercase tracking-widest px-2 py-1">Recommande</span>
|
||||
<div class="glass-gold p-6 relative">
|
||||
<span class="absolute top-0 right-0 bg-gray-900/80 text-white text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-bl-lg rounded-tr-[15px]">Recommande</span>
|
||||
<h3 class="font-black uppercase text-lg">Pro</h3>
|
||||
<p class="text-3xl font-black mt-2">60 € <span class="text-sm font-bold">HT / mois</span></p>
|
||||
<p class="text-xs mt-1">Mise en service : 50 € HT</p>
|
||||
@@ -808,15 +808,15 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Pourquoi choisir Esy-Defender Pro ?</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Votre site le merite</h3>
|
||||
<p class="text-sm">Votre site merite d'etre protege, meme (surtout) s'il est petit.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Votre image</h3>
|
||||
<p class="text-sm">Un piratage peut ruiner votre image et votre activite.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Tranquillite d'esprit</h3>
|
||||
<p class="text-sm">La tranquillite d'esprit n'a pas de prix. Restez concentre sur l'essentiel : on s'occupe du reste.</p>
|
||||
</div>
|
||||
@@ -824,7 +824,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Faites le choix de la serenite et demarquez-vous.</p>
|
||||
<p class="text-sm mt-2">Esy-Defender protege votre site, vos contenus, vos idees et la confiance de vos visiteurs. Zero configuration, zero plugin : vous n'avez rien a faire.</p>
|
||||
</div>
|
||||
@@ -842,13 +842,13 @@
|
||||
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">Mise en service</h3>
|
||||
<p class="text-3xl font-black mt-2">50 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Paiement unique</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6">
|
||||
<div class="glass-gold p-6">
|
||||
<h3 class="font-black uppercase text-lg">Abonnement mensuel</h3>
|
||||
<p class="text-3xl font-black mt-2">30 € <span class="text-sm font-bold">HT / mois</span></p>
|
||||
</div>
|
||||
@@ -858,8 +858,8 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Fonctionnalites cles</h2>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Prise de rendez-vous</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Prise de rendez-vous</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-3">
|
||||
<li><strong>Calendrier de disponibilites</strong> : vos clients accedent a un calendrier unique et mis a jour en temps reel. Ils visualisent instantanement les creneaux disponibles de chaque personne, ce qui leur permet de choisir le moment qui leur convient le mieux.</li>
|
||||
@@ -870,8 +870,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900">
|
||||
<div class="bg-gray-900 text-white px-4 py-2"><span class="font-black uppercase text-xs tracking-widest">Gestion et personnalisation</span></div>
|
||||
<div class="glass overflow-hidden">
|
||||
<div class="glass-dark text-white px-4 py-2" style="border-radius: 16px 16px 0 0;"><span class="font-black uppercase text-xs tracking-widest">Gestion et personnalisation</span></div>
|
||||
<div class="p-4">
|
||||
<ul class="text-sm space-y-3">
|
||||
<li><strong>Tableau de bord pour les formateurs</strong> : chaque formateur dispose d'un tableau de bord personnel pour visualiser et gerer ses rendez-vous, ajouter ses indisponibilites et suivre son activite.</li>
|
||||
@@ -885,19 +885,19 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Pourquoi choisir Esy-Meet ?</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Experience client</h3>
|
||||
<p class="text-sm">Offrez a vos clients un service accessible et reactif. Une prise de rendez-vous facile est un gage de professionnalisme.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Gain de temps</h3>
|
||||
<p class="text-sm">Liberez vos formateurs des taches administratives liees a la gestion des rendez-vous. Ils peuvent se concentrer sur l'essentiel : repondre aux questions de vos clients.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Productivite</h3>
|
||||
<p class="text-sm">Un agenda bien organise et des rappels automatiques reduisent les rendez-vous manques et augmentent l'efficacite de vos sessions.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Accessibilite 24/7</h3>
|
||||
<p class="text-sm">Vos clients peuvent prendre rendez-vous a tout moment, meme en dehors des heures de bureau, ce qui vous permet de ne rater aucune opportunite.</p>
|
||||
</div>
|
||||
@@ -905,7 +905,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Esy-Meet : la rencontre facilitee, le succes assure !</p>
|
||||
<p class="text-sm mt-2">Demandez des aujourd'hui une demonstration personnalisee d'Esy-Meet et decouvrez comment notre solution peut simplifier votre quotidien et ameliorer la satisfaction de vos clients.</p>
|
||||
</div>
|
||||
@@ -922,13 +922,13 @@
|
||||
|
||||
<section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<h3 class="font-black uppercase text-lg">Mise en service</h3>
|
||||
<p class="text-3xl font-black mt-2">50 € <span class="text-sm font-bold">HT</span></p>
|
||||
<p class="text-xs text-gray-500 mt-1">Paiement unique</p>
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6">
|
||||
<div class="glass-gold p-6">
|
||||
<h3 class="font-black uppercase text-lg">Abonnement mensuel</h3>
|
||||
<p class="text-3xl font-black mt-2">15 € <span class="text-sm font-bold">HT / mois</span></p>
|
||||
</div>
|
||||
@@ -942,7 +942,7 @@
|
||||
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Comment fonctionne un chat ?</h2>
|
||||
<div class="border-2 border-gray-900 p-6">
|
||||
<div class="glass p-6">
|
||||
<ul class="text-sm space-y-3">
|
||||
<li><strong>Interface utilisateur</strong> : les participants utilisent une interface (une fenetre de discussion sur un site web, une application mobile ou un logiciel) pour taper leurs messages.</li>
|
||||
<li><strong>Envoi instantane</strong> : des qu'un message est envoye, il apparait presque immediatement sur l'ecran du ou des destinataires, ce qui donne l'impression d'une conversation face a face.</li>
|
||||
@@ -953,15 +953,15 @@
|
||||
<section>
|
||||
<h2 class="text-xl font-black uppercase mb-4">Pourquoi utiliser un chat ?</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Rapidite</h3>
|
||||
<p class="text-sm">Il permet une communication rapide et directe, ideale pour les questions urgentes ou les conversations courtes.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Praticite</h3>
|
||||
<p class="text-sm">Il est accessible depuis divers appareils (ordinateurs, smartphones, tablettes), ce qui permet de rester en contact ou que l'on soit.</p>
|
||||
</div>
|
||||
<div class="border-2 border-gray-900 p-5">
|
||||
<div class="glass p-5">
|
||||
<h3 class="font-black uppercase text-sm mb-2">Simplicite</h3>
|
||||
<p class="text-sm">L'interface est generalement intuitive et facile a prendre en main, meme pour les personnes moins a l'aise avec la technologie.</p>
|
||||
</div>
|
||||
@@ -969,7 +969,7 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="border-2 border-gray-900 bg-[#fabf04] p-6 text-center">
|
||||
<div class="glass-gold p-6 text-center">
|
||||
<p class="font-black uppercase text-sm">Un chat est un moyen simple, rapide et efficace de communiquer par ecrit en temps reel.</p>
|
||||
<p class="text-sm mt-2">Contactez-nous pour integrer Esy-Tchat a votre site.</p>
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
{% block title %}Verification par email - CRM SITECONSEIL{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -15,13 +15,13 @@
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
|
||||
<div class="glass-heavy overflow-hidden">
|
||||
<div class="bg-yellow-400 border-b-4 border-gray-900 p-6 text-center">
|
||||
<h1 class="text-2xl font-black uppercase tracking-tighter italic">Verification par email</h1>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
{% if authenticationError %}
|
||||
<div class="mb-6 p-4 border-2 border-red-600 bg-red-50 text-red-800 font-bold text-sm">
|
||||
<div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
|
||||
{{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<form method="post" action="{{ checkPathUrl }}" class="flex flex-col gap-5">
|
||||
<div>
|
||||
<label for="code" class="block text-xs font-black uppercase tracking-widest mb-2">Code de verification</label>
|
||||
<label for="code" class="block text-xs font-bold uppercase tracking-wider mb-2">Code de verification</label>
|
||||
<input type="text" id="code" name="{{ authCodeParameterName }}" required maxlength="6" pattern="[0-9]{6}" autocomplete="one-time-code"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold text-center tracking-[0.5em] focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
placeholder="000000">
|
||||
@@ -41,7 +41,7 @@
|
||||
{% endif %}
|
||||
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Verifier
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
{% block title %}Verification 2FA - CRM SITECONSEIL{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -15,13 +15,13 @@
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
|
||||
<div class="glass-heavy overflow-hidden">
|
||||
<div class="bg-yellow-400 border-b-4 border-gray-900 p-6 text-center">
|
||||
<h1 class="text-2xl font-black uppercase tracking-tighter italic">Double authentification</h1>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
{% if authenticationError %}
|
||||
<div class="mb-6 p-4 border-2 border-red-600 bg-red-50 text-red-800 font-bold text-sm">
|
||||
<div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
|
||||
{{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
<form method="post" action="{{ checkPathUrl }}" class="flex flex-col gap-5">
|
||||
<div>
|
||||
<label for="code" class="block text-xs font-black uppercase tracking-widest mb-2">Code OTP</label>
|
||||
<label for="code" class="block text-xs font-bold uppercase tracking-wider mb-2">Code OTP</label>
|
||||
<input type="text" id="code" name="{{ authCodeParameterName }}" required maxlength="6" pattern="[0-9]{6}" autocomplete="one-time-code"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold text-center tracking-[0.5em] focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
placeholder="000000">
|
||||
@@ -48,7 +48,7 @@
|
||||
{% endif %}
|
||||
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Verifier
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
{% block description %}Reinitialisation de votre mot de passe CRM SITECONSEIL.{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -16,14 +16,14 @@
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
|
||||
<div class="glass-heavy overflow-hidden">
|
||||
<div class="bg-yellow-400 border-b-4 border-gray-900 p-6 text-center">
|
||||
<h1 class="text-2xl font-black uppercase tracking-tighter italic">Mot de passe oublie</h1>
|
||||
</div>
|
||||
|
||||
<div class="p-8">
|
||||
{% if error %}
|
||||
<div class="mb-6 p-4 border-2 border-red-600 bg-red-50 text-red-800 font-bold text-sm">
|
||||
<div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -39,13 +39,13 @@
|
||||
<form method="post" class="flex flex-col gap-5">
|
||||
<input type="hidden" name="action" value="send_code">
|
||||
<div>
|
||||
<label for="email" class="block text-xs font-black uppercase tracking-widest mb-2">Email</label>
|
||||
<label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2">Email</label>
|
||||
<input type="email" id="email" name="email" required
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="w-full px-4 py-3 input-glass text-sm font-medium"
|
||||
placeholder="votre@email.fr">
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Envoyer le code
|
||||
</button>
|
||||
</form>
|
||||
@@ -54,19 +54,19 @@
|
||||
<form method="post" class="flex flex-col gap-5">
|
||||
<input type="hidden" name="action" value="reset">
|
||||
<div>
|
||||
<label for="code" class="block text-xs font-black uppercase tracking-widest mb-2">Code de verification</label>
|
||||
<label for="code" class="block text-xs font-bold uppercase tracking-wider mb-2">Code de verification</label>
|
||||
<input type="text" id="code" name="code" required maxlength="6" pattern="[0-9]{6}"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold text-center tracking-[0.5em] focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
placeholder="000000" autocomplete="one-time-code">
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-xs font-black uppercase tracking-widest mb-2">Nouveau mot de passe</label>
|
||||
<label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2">Nouveau mot de passe</label>
|
||||
<input type="password" id="password" name="password" required minlength="8"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="w-full px-4 py-3 input-glass text-sm font-medium"
|
||||
placeholder="Minimum 8 caracteres">
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Modifier mon mot de passe
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -4,45 +4,44 @@
|
||||
{% block description %}Connectez-vous au CRM SITECONSEIL.{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-4rem)] px-4">
|
||||
<div class="w-full max-w-sm">
|
||||
{% if error %}
|
||||
<div class="mb-6 p-4 border-2 border-red-600 bg-red-50 text-red-800 font-bold text-sm">
|
||||
<div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
|
||||
{{ error.messageKey|trans(error.messageData, 'security') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
|
||||
<div class="glass-heavy overflow-hidden">
|
||||
<div class="p-8">
|
||||
<form method="post" class="flex flex-col gap-5">
|
||||
<div>
|
||||
<label for="email" class="block text-xs font-black uppercase tracking-widest mb-2">Email</label>
|
||||
<label for="email" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Email</label>
|
||||
<input type="email" id="email" name="_username" required value="{{ last_username }}"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="input-glass w-full px-4 py-3 text-sm font-medium"
|
||||
placeholder="votre@email.fr">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-xs font-black uppercase tracking-widest mb-2">Mot de passe</label>
|
||||
<label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2 text-gray-600">Mot de passe</label>
|
||||
<input type="password" id="password" name="_password" required
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="input-glass w-full px-4 py-3 text-sm font-medium"
|
||||
placeholder="••••••••">
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
|
||||
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
<button type="submit" class="btn-gold w-full px-6 py-3 text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Connexion SITECONSEIL
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
{% block title %}Definir votre mot de passe - CRM SITECONSEIL{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -15,7 +15,7 @@
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white shadow-[8px_8px_0px_rgba(0,0,0,1)]">
|
||||
<div class="glass-heavy overflow-hidden">
|
||||
<div class="bg-yellow-400 border-b-4 border-gray-900 p-6 text-center">
|
||||
<h1 class="text-2xl font-black uppercase tracking-tighter italic">Definir votre mot de passe</h1>
|
||||
<p class="text-sm font-bold mt-1">Bienvenue {{ user.firstName }} !</p>
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
<div class="p-8">
|
||||
{% if error %}
|
||||
<div class="mb-6 p-4 border-2 border-red-600 bg-red-50 text-red-800 font-bold text-sm">
|
||||
<div class="mb-6 p-4 glass border border-red-300 text-red-800 font-medium text-sm rounded-xl">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -32,21 +32,21 @@
|
||||
|
||||
<form method="post" class="flex flex-col gap-5">
|
||||
<div>
|
||||
<label for="password" class="block text-xs font-black uppercase tracking-widest mb-2">Nouveau mot de passe</label>
|
||||
<label for="password" class="block text-xs font-bold uppercase tracking-wider mb-2">Nouveau mot de passe</label>
|
||||
<input type="password" id="password" name="password" required minlength="8"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="w-full px-4 py-3 input-glass text-sm font-medium"
|
||||
placeholder="Minimum 8 caracteres">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password_confirm" class="block text-xs font-black uppercase tracking-widest mb-2">Confirmer le mot de passe</label>
|
||||
<label for="password_confirm" class="block text-xs font-bold uppercase tracking-wider mb-2">Confirmer le mot de passe</label>
|
||||
<input type="password" id="password_confirm" name="password_confirm" required minlength="8"
|
||||
class="w-full px-4 py-3 border-2 border-gray-900 bg-white text-sm font-bold focus:outline-none focus:border-indigo-600 focus:shadow-[4px_4px_0px_rgba(79,70,229,0.3)]"
|
||||
class="w-full px-4 py-3 input-glass text-sm font-medium"
|
||||
placeholder="Retapez le mot de passe">
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="w-full px-6 py-3 border-2 border-gray-900 bg-[#fabf04] text-gray-900 font-black uppercase tracking-widest text-sm hover:bg-yellow-500 transition-all shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-[2px_2px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-1 active:translate-y-1">
|
||||
class="w-full px-6 py-3 btn-gold text-sm font-bold uppercase tracking-wider text-gray-900">
|
||||
Definir mon mot de passe
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
{% block title %}Lien expire - CRM SITECONSEIL{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="sticky top-0 z-50 bg-white border-b-4 border-gray-900">
|
||||
<div class="flex justify-center items-center h-20">
|
||||
<header class="sticky top-0 z-50 glass-heavy" style="border-radius: 0;">
|
||||
<div class="flex justify-center items-center h-16">
|
||||
<a href="{{ path('app_home') }}" aria-label="CRM SITECONSEIL - Accueil">
|
||||
<img class="h-12 md:h-16 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
<img class="h-10 md:h-12 w-auto" src="{{ 'logo_facture.png' | imagine_filter('logo') }}" alt="CRM SITECONSEIL" loading="eager">
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -15,7 +15,7 @@
|
||||
{% block body %}
|
||||
<div class="flex items-center justify-center min-h-[calc(100vh-5rem)] px-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="border-4 border-gray-900 bg-white p-8 shadow-[8px_8px_0px_rgba(0,0,0,1)] text-center">
|
||||
<div class="glass-heavy overflow-hidden p-8 text-center">
|
||||
<div class="mb-4">
|
||||
<svg class="w-12 h-12 mx-auto text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user