chore: riorganizzazione e pulizia della cartella di progetto
Rimossi i doppioni e gli artefatti accumulati, senza cancellare nulla di definitivo: tutto cio' che serviva una revisione e' parcheggiato in cestino/ (gitignored), documentato in cestino/LEGGIMI.md. - .planning/phases/01-10: 10 cartelle identiche byte-per-byte alle copie in .planning/milestones/v1.0-phases e v2.0-phases. HANDOFF.md:33 documentava che furono copiate e non spostate, lasciando la pulizia 'facoltativa in futuro'. Verificata l'identita' con diff -rq prima di spostare ciascuna. - scripts/: 13 script one-off gia' eseguiti (push-*, migrate-*, validate-*, verify-12-03-*) piu' reset-and-import-services.ts, che cancella dati. Restano i 3 riutilizzabili: seed, import-services-notion, import-service-offer-tags. - CLAUDE-SECURITY-20260727-210226/: cartella di lavoro della run interrotta. Cancellati subito, senza revisione: 6 .DS_Store, le due cache .impeccable/ (una era dentro src/) e tsconfig.tsbuildinfo. .gitignore: aggiunti cestino/, .impeccable/ e CLAUDE-SECURITY-*/ per evitare che si riformino. src/ non e' stato toccato: la struttura e' dettata dall'App Router di Next. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,378 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modifica Offerta — Luxury Admin CRM</title>
|
||||
<!-- Google Fonts: Plus Jakarta Sans -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ['Plus Jakarta Sans', 'sans-serif'],
|
||||
},
|
||||
colors: {
|
||||
brand: {
|
||||
dark: '#1A463C', /* Verde scuro lusso */
|
||||
darkHover: '#13342D', /* Variante scura per hover */
|
||||
active: 'rgba(255, 255, 255, 0.08)',
|
||||
bg: '#F8F9FA',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.sidebar-transition {
|
||||
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-brand-bg font-sans text-slate-800 antialiased min-h-screen flex overflow-x-hidden">
|
||||
|
||||
<!-- SIDEBAR -->
|
||||
<aside id="sidebar" class="w-64 bg-brand-dark text-white flex flex-col justify-between p-6 border-r border-emerald-950/20 shrink-0 sidebar-transition relative z-10">
|
||||
<div class="overflow-hidden">
|
||||
<!-- Logo e Intestazione -->
|
||||
<div class="mb-10 px-2 flex items-center justify-between">
|
||||
<span id="sidebar-logo-text" class="text-lg font-bold tracking-wider text-emerald-50 whitespace-nowrap transition-opacity duration-300">iamcavalli</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigazione Principale -->
|
||||
<nav class="space-y-1">
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Dashboard</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a.598.598 0 01-.73-.578 5.672 5.672 0 011.02-3.155A8.72 8.72 0 013 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Conversazioni</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Lead</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path 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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Clienti</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Progetti</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Preventivi</span>
|
||||
</a>
|
||||
<!-- Stato Attivo su Offerte -->
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-brand-active font-medium transition-all duration-200 shadow-sm">
|
||||
<svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M7 7h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
||||
<span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Offerte</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Area Inferiore Sidebar -->
|
||||
<div class="border-t border-white/10 pt-4 space-y-3 overflow-hidden">
|
||||
<div class="flex items-center justify-between px-3 py-1 text-xs text-emerald-200/50 whitespace-nowrap">
|
||||
<span class="sidebar-text transition-opacity duration-300">Tema</span>
|
||||
<button class="p-1 rounded-full bg-white/5 hover:bg-white/10 text-emerald-200 hover:text-white transition-all duration-200">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M14 12a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-300/80 hover:text-red-200 hover:bg-red-950/20 transition-all duration-200 whitespace-nowrap">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path 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>
|
||||
<span class="sidebar-text transition-opacity duration-300">Esci</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- SEZIONE PRINCIPALE -->
|
||||
<div class="flex-1 flex flex-col min-w-0">
|
||||
|
||||
<!-- BARRA DI INTESTAZIONE SUPERIORE -->
|
||||
<header class="h-16 border-b border-slate-100 bg-white px-8 flex items-center justify-between shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Pulsante Apri/Chiudi Sidebar -->
|
||||
<button id="sidebar-toggle" class="p-2 -ml-2 rounded-lg text-slate-500 hover:bg-slate-50 hover:text-slate-800 transition-colors focus:outline-none" title="Espandi/Comprimi Sidebar">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M4 12h12M4 18h16"/></svg>
|
||||
</button>
|
||||
<span class="text-xs text-slate-400 font-medium">Gestione Offerte</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-xs font-semibold text-slate-700 bg-slate-100 px-2.5 py-1 rounded-full">Admin Panel</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- AREA DEL CONTENUTO -->
|
||||
<main class="flex-1 p-8 lg:p-10 max-w-[1400px] w-full mx-auto flex flex-col gap-8 overflow-y-auto">
|
||||
|
||||
<!-- INTESTAZIONE SEZIONE -->
|
||||
<div class="border-b border-slate-100 pb-6">
|
||||
<a href="#" class="text-xs font-bold text-slate-400 hover:text-slate-800 flex items-center gap-1.5 mb-2">
|
||||
← Indietro
|
||||
</a>
|
||||
<h1 class="text-2xl font-semibold text-slate-900 tracking-tight">Modifica Offerta</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Stai modificando il pacchetto: <span class="font-bold text-brand-dark">Sblocca Business</span></p>
|
||||
</div>
|
||||
|
||||
<!-- MODULO 1: PARAMETRI DI BASE -->
|
||||
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6 space-y-6">
|
||||
|
||||
<!-- Modalità / Frequenza di pagamento -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Modalità Offerta</h3>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">Definisci la ricorrenza del pagamento</p>
|
||||
</div>
|
||||
<!-- Sliding Toggle Capsule -->
|
||||
<div class="bg-slate-100 p-1 rounded-lg flex gap-1 self-start sm:self-auto">
|
||||
<button class="px-5 py-1.5 rounded-md text-xs font-bold bg-brand-dark text-white shadow-sm transition-all duration-200">
|
||||
Una tantum
|
||||
</button>
|
||||
<button class="px-5 py-1.5 rounded-md text-xs font-semibold text-slate-400 hover:text-slate-800 transition-all duration-200">
|
||||
Retainer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Descrizione Interna -->
|
||||
<div class="pt-4 border-t border-slate-50">
|
||||
<label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Descrizione Interna</label>
|
||||
<textarea
|
||||
rows="3"
|
||||
placeholder="Scrivi qui una descrizione dell'offerta ad uso interno (non visibile al cliente)..."
|
||||
class="w-full bg-slate-50/50 border border-slate-200/80 rounded-lg p-3 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:bg-white transition-all resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- MODULO 2: TASSONOMIE / TAG -->
|
||||
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6 space-y-4">
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-4">Tagging e Tassonomia</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Categoria & Ticket -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<span class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Categoria</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-100 uppercase tracking-wide">Entry Offer</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Ticket</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded text-xs font-semibold bg-purple-50 text-purple-700 border border-purple-100 uppercase tracking-wide">Low Ticket</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tipo & Obiettivo con aggiunta interattiva -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<span class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Tipo</span>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-amber-50 text-amber-700 border border-amber-100 uppercase">Audit <button class="text-amber-400 hover:text-amber-800">×</button></span>
|
||||
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100 uppercase">Done For You <button class="text-emerald-400 hover:text-emerald-800">×</button></span>
|
||||
<button class="inline-flex items-center justify-center w-6 h-6 rounded-full border border-dashed border-slate-200 text-slate-400 hover:text-slate-600 hover:border-slate-400 transition-colors">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2">Obiettivo</span>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-purple-50 text-purple-700 border border-purple-100 uppercase">Primo Acquisto <button class="text-purple-400 hover:text-purple-800">×</button></span>
|
||||
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100 uppercase">Up Scala Valore <button class="text-emerald-400 hover:text-emerald-800">×</button></span>
|
||||
<span class="inline-flex items-center gap-1 pl-2.5 pr-1.5 py-1 rounded-md text-[11px] font-semibold bg-rose-50 text-rose-700 border border-rose-100 uppercase">Lead Gen <button class="text-rose-400 hover:text-rose-800">×</button></span>
|
||||
<button class="inline-flex items-center justify-center w-6 h-6 rounded-full border border-dashed border-slate-200 text-slate-400 hover:text-slate-600 hover:border-slate-400 transition-colors">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- MODULO 3: MATRICE SERVIZI INCLUSI -->
|
||||
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6 space-y-6">
|
||||
<div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
|
||||
<div>
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Servizi Inclusi & Matrice Tier</h3>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">Associa i singoli servizi del catalogo ai Tier A, B e C</p>
|
||||
</div>
|
||||
<!-- Filtro Tabella -->
|
||||
<div class="flex gap-1.5 flex-wrap">
|
||||
<button class="px-3.5 py-1.5 text-[11px] font-bold bg-brand-dark text-white rounded-lg transition-colors">Tutti</button>
|
||||
<button class="px-3.5 py-1.5 text-[11px] font-semibold bg-slate-50 text-slate-500 hover:bg-slate-100 rounded-lg transition-all">Entry Offer</button>
|
||||
<button class="px-3.5 py-1.5 text-[11px] font-semibold bg-slate-50 text-slate-500 hover:bg-slate-100 rounded-lg transition-all">Retainer Offer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Matrice Tabellare dei Servizi -->
|
||||
<div class="border border-slate-100 rounded-xl overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse min-w-[700px]">
|
||||
<thead>
|
||||
<tr class="border-b border-slate-100 bg-slate-50/50 text-[11px] font-bold uppercase tracking-wider text-slate-400">
|
||||
<th class="py-3 px-5 w-1/2">Servizio</th>
|
||||
<th class="py-3 px-4 w-[120px] text-right">Prezzo Unitario</th>
|
||||
<th class="py-3 px-4 text-center w-[80px]">A</th>
|
||||
<th class="py-3 px-4 text-center w-[80px]">B</th>
|
||||
<th class="py-3 px-4 text-center w-[80px]">C</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100 text-xs">
|
||||
|
||||
<!-- Riga 1 (Non selezionata) -->
|
||||
<tr class="hover:bg-slate-50/30 transition-colors">
|
||||
<td class="py-3 px-5 text-slate-700 font-medium truncate">QA - Test Cross Browser e responsive</td>
|
||||
<td class="py-3 px-4 text-right font-mono text-slate-500">€400,00</td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" class="w-4 h-4 text-brand-dark rounded border-slate-300 focus:ring-brand-dark focus:ring-opacity-25" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" class="w-4 h-4 text-brand-dark rounded border-slate-300 focus:ring-brand-dark focus:ring-opacity-25" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" class="w-4 h-4 text-brand-dark rounded border-slate-300 focus:ring-brand-dark focus:ring-opacity-25" /></td>
|
||||
</tr>
|
||||
|
||||
<!-- Riga 2 (Selezionata in A, B, C - Evidenziata con sfondo leggero) -->
|
||||
<tr class="bg-emerald-50/10 hover:bg-emerald-50/20 transition-colors">
|
||||
<td class="py-3 px-5 text-slate-900 font-medium truncate">Raccolta e Mappatura Materiali</td>
|
||||
<td class="py-3 px-4 text-right font-mono text-slate-700">€100,00</td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
</tr>
|
||||
|
||||
<!-- Riga 3 -->
|
||||
<tr class="bg-emerald-50/10 hover:bg-emerald-50/20 transition-colors">
|
||||
<td class="py-3 px-5 text-slate-900 font-medium truncate">Audit iniziale (UX/UI, struttura, conversione)</td>
|
||||
<td class="py-3 px-4 text-right font-mono text-slate-700">€500,00</td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
</tr>
|
||||
|
||||
<!-- Riga 4 -->
|
||||
<tr class="bg-emerald-50/10 hover:bg-emerald-50/20 transition-colors">
|
||||
<td class="py-3 px-5 text-slate-900 font-medium truncate">Workshop (1° fase)</td>
|
||||
<td class="py-3 px-4 text-right font-mono text-slate-700">€900,00</td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
<td class="py-3 px-4 text-center"><input type="checkbox" checked class="w-4 h-4 text-brand-dark rounded border-brand-dark bg-brand-dark focus:ring-brand-dark" /></td>
|
||||
</tr>
|
||||
|
||||
<!-- Riga Totale Servizi Calcolati (Stile Finanziario) -->
|
||||
<tr class="bg-slate-50 font-semibold border-t-2 border-slate-100">
|
||||
<td class="py-3.5 px-5 text-slate-500 uppercase tracking-wider text-[11px]">Totale Servizi Calcolati</td>
|
||||
<td class="py-3.5 px-4"></td>
|
||||
<td class="py-3.5 px-4 text-center font-mono text-slate-900">€2.600,00</td>
|
||||
<td class="py-3.5 px-4 text-center font-mono text-slate-900">€3.300,00</td>
|
||||
<td class="py-3.5 px-4 text-center font-mono text-slate-900">€3.900,00</td>
|
||||
</tr>
|
||||
|
||||
<!-- Riga Input Prezzo Pubblico Scontato (Per vendita ad alto biglietto) -->
|
||||
<tr class="bg-slate-50/40">
|
||||
<td class="py-3 px-5 text-brand-dark font-bold uppercase tracking-wider text-[11px]">Prezzo Pubblico Scontato</td>
|
||||
<td class="py-3 px-4"></td>
|
||||
<td class="py-3 px-4 text-center">
|
||||
<input type="text" value="400,00" class="w-full text-center bg-white border border-slate-200 rounded px-2 py-1 text-xs font-mono font-bold text-brand-dark focus:outline-none focus:border-brand-dark" />
|
||||
</td>
|
||||
<td class="py-3 px-4 text-center">
|
||||
<input type="text" value="600,00" class="w-full text-center bg-white border border-slate-200 rounded px-2 py-1 text-xs font-mono font-bold text-brand-dark focus:outline-none focus:border-brand-dark" />
|
||||
</td>
|
||||
<td class="py-3 px-4 text-center">
|
||||
<input type="text" value="1.200,00" class="w-full text-center bg-white border border-slate-200 rounded px-2 py-1 text-xs font-mono font-bold text-brand-dark focus:outline-none focus:border-brand-dark" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- MODULO 4: PROMESSA DI TRASFORMAZIONE (High-ticket Sales Framework) -->
|
||||
<section class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] p-6 space-y-6">
|
||||
<div>
|
||||
<h3 class="text-xs font-bold uppercase tracking-wider text-slate-400">Promessa di Trasformazione</h3>
|
||||
<p class="text-[11px] text-slate-400 mt-0.5">Struttura la proposta commerciale secondo un modello di copywriting orientato al risultato</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 pt-4 border-t border-slate-50">
|
||||
|
||||
<!-- Aiuto -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 items-center gap-2">
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Aiuto</span>
|
||||
<input type="text" value="Non altezza sogni FOMO" class="md:col-span-3 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:bg-white transition-all" />
|
||||
</div>
|
||||
|
||||
<!-- A Ottenere -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 items-center gap-2">
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">A ottenere</span>
|
||||
<input type="text" value="Chiarezza e direzione sul proprio business per non sbagliare da oggi in avanti" class="md:col-span-3 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:bg-white transition-all" />
|
||||
</div>
|
||||
|
||||
<!-- In -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 items-center gap-2">
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">In</span>
|
||||
<input type="text" value="2 settimane" class="md:col-span-3 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:bg-white transition-all" />
|
||||
</div>
|
||||
|
||||
<!-- Senza -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 items-center gap-2">
|
||||
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider">Senza</span>
|
||||
<input type="text" value="sentirsi perso e sentire di non sapere che pesci prendere" class="md:col-span-3 bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:bg-white transition-all" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BARRA DELLE AZIONI SALVATAGGIO / AZIONI GENERALI -->
|
||||
<footer class="flex flex-col sm:flex-row justify-between sm:items-center gap-4 pt-4">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<button class="bg-brand-dark hover:bg-brand-darkHover text-white text-xs font-medium tracking-wide px-5 py-3 rounded-lg transition-all duration-200 shadow-sm">
|
||||
Salva Offerta
|
||||
</button>
|
||||
<button class="px-5 py-3 border border-slate-200 hover:bg-slate-50 text-slate-600 hover:text-slate-900 text-xs font-semibold rounded-lg transition-colors">
|
||||
Annulla
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Azione distruttiva discreta -->
|
||||
<button class="text-xs font-bold text-red-500 hover:text-red-700 transition-colors self-start sm:self-auto">
|
||||
Archivia Offerta
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- SCRIPT DI LOGICA (Gestione Sidebar) -->
|
||||
<script>
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleButton = document.getElementById('sidebar-toggle');
|
||||
const logoText = document.getElementById('sidebar-logo-text');
|
||||
const sidebarTexts = document.querySelectorAll('.sidebar-text');
|
||||
|
||||
toggleButton.addEventListener('click', () => {
|
||||
const isCollapsed = sidebar.classList.contains('w-20');
|
||||
|
||||
if (isCollapsed) {
|
||||
sidebar.classList.remove('w-20');
|
||||
sidebar.classList.add('w-64');
|
||||
setTimeout(() => {
|
||||
logoText.classList.remove('opacity-0');
|
||||
sidebarTexts.forEach(text => text.classList.remove('opacity-0'));
|
||||
}, 150);
|
||||
} else {
|
||||
logoText.classList.add('opacity-0');
|
||||
sidebarTexts.forEach(text => text.classList.add('opacity-0'));
|
||||
sidebar.classList.remove('w-64');
|
||||
sidebar.classList.add('w-20');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user