Hugging Face's logo

Spaces:
emanueledecandia
/
anycoder-c20ff48b
Running

App Files Community
emanueledecandia commited on
Commit
7833fcc
·
verified ·
1 Parent(s): aafb4a1

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +709 -620
index.html CHANGED
@@ -1,649 +1,738 @@
1
  <!DOCTYPE html>
2
  <html lang="it">
 
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Calcolatore Prezzi Avanzato - Servizi Digitali</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
11
- <style>
12
- :root {
13
- --primary-color: #2563eb;
14
- --primary-hover: #1d4ed8;
15
- --bg-color: #f8fafc;
16
- --text-color: #0f172a;
17
- }
18
- body {
19
- font-family: 'Inter', sans-serif;
20
- background-color: var(--bg-color);
21
- color: var(--text-color);
22
- scroll-behavior: smooth;
23
- }
24
- ::-webkit-scrollbar {
25
- width: 8px;
26
- }
27
- ::-webkit-scrollbar-track {
28
- background: #f1f1f1;
29
- }
30
- ::-webkit-scrollbar-thumb {
31
- background: #cbd5e1;
32
- border-radius: 4px;
33
- }
34
- ::-webkit-scrollbar-thumb:hover {
35
- background: #94a3b8;
36
- }
37
- .price-card {
38
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
39
- border: 1px solid #e2e8f0;
40
- position: relative;
41
- overflow: hidden;
42
- }
43
- .price-card:hover {
44
- transform: translateY(-5px);
45
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
46
- border-color: #cbd5e1;
47
- }
48
- .price-card.selected {
49
- border-color: var(--primary-color);
50
- box-shadow: 0 0 0 2px var(--primary-color);
51
- background-color: #eff6ff;
52
- transform: scale(1.02);
53
- z-index: 10;
54
- }
55
- .check-icon {
56
- opacity: 0;
57
- transform: scale(0.5);
58
- transition: all 0.3s ease;
59
- position: absolute;
60
- top: 1rem;
61
- right: 1rem;
62
- background-color: var(--primary-color);
63
- color: white;
64
- border-radius: 50%;
65
- width: 24px;
66
- height: 24px;
67
- display: flex;
68
- align-items: center;
69
- justify-content: center;
70
- font-size: 14px;
71
- }
72
- .price-card.selected .check-icon {
73
- opacity: 1;
74
- transform: scale(1);
75
- }
76
- .custom-input {
77
- background-color: #fff;
78
- border: 1px solid #cbd5e1;
79
- border-radius: 0.5rem;
80
- padding: 0.5rem 1rem;
81
- transition: all 0.2s;
82
- width: 100%;
83
- }
84
- .custom-input:focus {
85
- outline: none;
86
- border-color: var(--primary-color);
87
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
88
- }
89
- input[type=range] {
90
- -webkit-appearance: none;
91
- width: 100%;
92
- background: transparent;
93
- }
94
- input[type=range]::-webkit-slider-thumb {
95
- -webkit-appearance: none;
96
- height: 24px;
97
- width: 24px;
98
- border-radius: 50%;
99
- background: var(--primary-color);
100
- cursor: pointer;
101
- margin-top: -10px;
102
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
103
- transition: transform 0.1s;
104
- }
105
- input[type=range]::-webkit-slider-thumb:hover {
106
- transform: scale(1.1);
107
- }
108
- input[type=range]::-webkit-slider-runnable-track {
109
- width: 100%;
110
- height: 4px;
111
- cursor: pointer;
112
- background: #e2e8f0;
113
- border-radius: 2px;
114
- }
115
- input[type=range]::-moz-range-thumb {
116
- height: 24px;
117
- width: 24px;
118
- border: none;
119
- border-radius: 50%;
120
- background: var(--primary-color);
121
- cursor: pointer;
122
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
123
- }
124
- input[type=range]::-moz-range-track {
125
- width: 100%;
126
- height: 4px;
127
- cursor: pointer;
128
- background: #e2e8f0;
129
- border-radius: 2px;
130
- }
131
- .feature-list {
132
- list-style: none;
133
- padding: 0;
134
- margin: 0;
135
- }
136
- .feature-list li {
137
- display: flex;
138
- align-items: flex-start;
139
- margin-bottom: 0.5rem;
140
- font-size: 0.9rem;
141
- line-height: 1.5;
142
- color: #475569;
143
- }
144
- .feature-list li::before {
145
- content: '✓';
146
- color: var(--primary-color);
147
- font-weight: 700;
148
- margin-right: 0.5rem;
149
- flex-shrink: 0;
150
- font-size: 1rem;
151
- }
152
- .feature-list li.highlight {
153
- font-weight: 600;
154
- color: #1e293b;
155
- }
156
- .price-update-anim {
157
- animation: pulse-green 0.5s ease-in-out;
158
- }
159
- @keyframes pulse-green {
160
- 0% { color: inherit; }
161
- 50% { color: #16a34a; }
162
- 100% { color: inherit; }
163
- }
164
- /* Simulator Styles */
165
- .simulator-card {
166
- background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
167
- border-radius: 1.5rem;
168
- overflow: hidden;
169
- position: relative;
170
- }
171
- .simulator-card::before {
172
- content: '';
173
- position: absolute;
174
- top: 0;
175
- left: 0;
176
- right: 0;
177
- height: 4px;
178
- background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
179
- }
180
- .stat-card {
181
- background: rgba(255, 255, 255, 0.05);
182
- border: 1px solid rgba(255, 255, 255, 0.1);
183
- border-radius: 1rem;
184
- backdrop-filter: blur(10px);
185
- transition: all 0.3s ease;
186
- }
187
- .stat-card:hover {
188
- background: rgba(255, 255, 255, 0.08);
189
- transform: translateY(-2px);
190
- }
191
- .progress-ring {
192
- transform: rotate(-90deg);
193
- }
194
- .progress-ring-circle {
195
- transition: stroke-dashoffset 0.5s ease;
196
- }
197
- .timeline-bar {
198
- height: 8px;
199
- border-radius: 4px;
200
- background: #e2e8f0;
201
- overflow: hidden;
202
- }
203
- .timeline-progress {
204
- height: 100%;
205
- border-radius: 4px;
206
- background: linear-gradient(90deg, #3b82f6, #8b5cf6);
207
- transition: width 0.5s ease;
208
- }
209
- .growth-indicator {
210
- animation: float 3s ease-in-out infinite;
211
- }
212
- @keyframes float {
213
- 0%, 100% { transform: translateY(0); }
214
- 50% { transform: translateY(-10px); }
215
- }
216
- .pulse-dot {
217
- animation: pulse 2s infinite;
218
- }
219
- @keyframes pulse {
220
- 0%, 100% { transform: scale(1); opacity: 1; }
221
- 50% { transform: scale(1.5); opacity: 0.5; }
222
- }
223
- .chart-bar {
224
- transition: height 0.5s ease;
225
- }
226
- .fade-in {
227
- animation: fadeIn 0.5s ease forwards;
228
- }
229
- @keyframes fadeIn {
230
- from { opacity: 0; transform: translateY(20px); }
231
- to { opacity: 1; transform: translateY(0); }
232
- }
233
- .stagger-1 { animation-delay: 0.1s; }
234
- .stagger-2 { animation-delay: 0.2s; }
235
- .stagger-3 { animation-delay: 0.3s; }
236
- .stagger-4 { animation-delay: 0.4s; }
237
-
238
- /* Custom scrollbar for feature list */
239
- .custom-scrollbar::-webkit-scrollbar {
240
- width: 6px;
241
- }
242
- .custom-scrollbar::-webkit-scrollbar-track {
243
- background: transparent;
244
- }
245
- .custom-scrollbar::-webkit-scrollbar-thumb {
246
- background: #e2e8f0;
247
- border-radius: 10px;
248
- }
249
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
250
  </head>
 
251
  <body class="antialiased selection:bg-blue-100 selection:text-blue-900">
252
 
253
- <!-- Navigation / Branding -->
254
- <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
255
- <div class="container mx-auto px-6 py-4 flex justify-between items-center">
256
- <div class="flex items-center space-x-2">
257
- <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">D</div>
258
- <span class="text-xl font-bold text-gray-900 tracking-tight">DigitalGrowth<span class="text-blue-600">Calc</span></span>
259
- </div>
260
- <div class="text-sm font-medium text-gray-500">
261
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hover:text-blue-600 transition-colors">Built with anycoder</a>
262
- </div>
263
  </div>
264
- </nav>
265
-
266
- <header class="bg-gradient-to-b from-white to-blue-50/50 py-16 md:py-24 border-b border-gray-100">
267
- <div class="container mx-auto px-6 text-center max-w-4xl">
268
- <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide uppercase mb-4">Preventivo 2024</span>
269
- <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight tracking-tight">
270
- Calcolatore di <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Investimento Digitale</span>
271
- </h1>
272
- <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
273
- Configura il tuo piano di crescita su misura. Scegli il pacchetto, stima le performance e ottieni un preventivo istantaneo.
274
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
- </header>
277
-
278
- <main class="container mx-auto px-4 md:px-6 py-12 max-w-7xl">
279
-
280
- <!-- SECTION 1: PACKAGES -->
281
- <section class="mb-20">
282
- <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
283
- <div>
284
- <h2 class="text-3xl font-bold text-gray-900">1. Scegli il tuo Pacchetto Base</h2>
285
- <p class="text-gray-500 mt-2">Seleziona il livello di servizio adatto alle tue esigenze.</p>
286
- </div>
287
- </div>
288
 
289
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
290
-
291
- <!-- STANDARD CARD -->
292
- <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Standard', 2500, this)">
293
- <div class="check-icon">✓</div>
294
- <div class="mb-6">
295
- <h3 class="text-2xl font-bold text-gray-900">Standard</h3>
296
- <p class="text-gray-500 text-sm mt-1">Per chi inizia la crescita.</p>
297
- </div>
298
- <div class="flex items-baseline mb-8">
299
- <span class="text-4xl font-extrabold text-gray-900">€2.500</span>
300
- <span class="text-gray-500 ml-2 font-medium">una tantum</span>
301
- </div>
302
-
303
- <div class="space-y-4 mb-8">
304
- <div class="h-px bg-gray-100 w-full"></div>
305
- <ul class="feature-list space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
306
- <li class="highlight">Paid Search Competitor</li>
307
- <li class="highlight">Keyword Analysis & Planner</li>
308
- <li><strong>20-</strong> Editing (Copy/Headline)</li>
309
- <li><strong>4-</strong> Video per campagna</li>
310
- <li>Video Editor & Designer Dedicato</li>
311
- <li><strong>2-</strong> Ad Copy & Graphics</li>
312
- <li>Google Ads (Search & Video)</li>
313
- <li>Performance Max Campaign</li>
314
- <li>Configurazione Account & Analytics</li>
315
- <li>Targeting & Reporting</li>
316
- <li>Gestione Conversioni</li>
317
- <li>Creazione Contenuti Email</li>
318
- <li><strong>2-</strong> Landing Pages Sponsor</li>
319
- <li>Widget Integration (Survey & Form)</li>
320
- <li>Contest & Micro Influencer</li>
321
- <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
322
- <li>Demand Generation Campaign</li>
323
- <li>Sales & Customer Agent App</li>
324
- </ul>
325
- </div>
326
- </div>
327
 
328
- <!-- GOLD CARD -->
329
- <div class="price-card bg-white rounded-2xl p-8 cursor-pointer relative border-blue-600 ring-1 ring-blue-600 group" onclick="selectPackage('Gold', 3500, this)">
330
- <div class="absolute -top-4 left-1/2 -translate-x-1/2">
331
- <span class="bg-blue-600 text-white px-5 py-1.5 rounded-full text-sm font-bold tracking-wide shadow-lg shadow-blue-600/30">Consigliato</span>
332
- </div>
333
- <div class="check-icon">✓</div>
334
- <div class="mb-6">
335
- <h3 class="text-2xl font-bold text-gray-900">Gold</h3>
336
- <p class="text-gray-500 text-sm mt-1">Per accelerare le performance.</p>
337
- </div>
338
- <div class="flex items-baseline mb-8">
339
- <span class="text-4xl font-extrabold text-gray-900">€3.500</span>
340
- <span class="text-gray-500 ml-2 font-medium">una tantum</span>
341
- </div>
342
-
343
- <div class="space-y-4 mb-8">
344
- <div class="h-px bg-gray-100 w-full"></div>
345
- <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
346
- <li class="font-bold text-blue-600">Tutto dello Standard, più:</li>
347
- <li><strong>30-</strong> Editing (Copy/Headline)</li>
348
- <li><strong>10-</strong> Video per campagna</li>
349
- <li><strong>3-</strong> Ad Copy & Graphics</li>
350
- <li>Google Shopping</li>
351
- <li>Integrazione Merchant Center</li>
352
- <li>Customer Match (con CRM)</li>
353
- <li>Email Marketing Aziendale</li>
354
- <li><strong>2-</strong> Multi Landing Pages & A/B Test</li>
355
- <li><strong>1-</strong> Store eCommerce Landing</li>
356
- <li>Plugin Loyalty & Referral</li>
357
- <li>Contest + Professional Influencer</li>
358
- <li>CSR: Web Disclosure & Impact</li>
359
- <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
360
- <li>ML Analytics Application</li>
361
- <li>Customer Advanced Data Analytics</li>
362
- <li>Market & Competitive Intelligence</li>
363
- <li class="font-semibold text-gray-800">Advanced Program (1 incluso):</li>
364
- <li>a. Referral Martech App</li>
365
- <li>b. Loyalty Program</li>
366
- <li>c. Social Coalition Loyalty</li>
367
- <li>d. Cause Related Marketing</li>
368
- <li>e. Affiliation Management</li>
369
- <li>f. Influencer Management</li>
370
- </ul>
371
- </div>
372
- </div>
373
 
374
- <!-- PLATINUM CARD -->
375
- <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Platinum', 5000, this)">
376
- <div class="check-icon">✓</div>
377
- <div class="mb-6">
378
- <h3 class="text-2xl font-bold text-gray-900">Platinum</h3>
379
- <p class="text-gray-500 text-sm mt-1">Soluzione completa di dominio.</p>
380
- </div>
381
- <div class="flex items-baseline mb-8">
382
- <span class="text-4xl font-extrabold text-gray-900">€5.000</span>
383
- <span class="text-gray-500 ml-2 font-medium">una tantum</span>
384
- </div>
385
-
386
- <div class="space-y-4 mb-8">
387
- <div class="h-px bg-gray-100 w-full"></div>
388
- <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
389
- <li class="font-bold text-blue-600">Tutto del Gold, più:</li>
390
- <li><strong>50-</strong> Editing (Copy/Headline)</li>
391
- <li><strong>20-</strong> Video per campagna</li>
392
- <li><strong>5-</strong> Ad Copy & Graphics</li>
393
- <li>Integrazione Piattaforme Multiple</li>
394
- <li>Campagne Asset Affiliati</li>
395
- <li>Tools Campagne Avanzate</li>
396
- <li>Co-Marketing Multichannel</li>
397
- <li><strong>2-</strong> Landing Pages Evento</li>
398
- <li><strong>5-</strong> Multi Landing Pages & A/B Test</li>
399
- <li><strong>2-</strong> Store eCommerce Landing</li>
400
- <li>CSR: Metodo Cultural Impact</li>
401
- <li>CSR: Media Relations</li>
402
- <li>Generative AI App (inclusa)</li>
403
- <li class="font-semibold text-gray-800">Advanced Program (2 inclusi):</li>
404
- <li>a. Referral Martech App</li>
405
- <li>b. Loyalty Program</li>
406
- <li>c. Social Coalition Loyalty</li>
407
- <li>d. Cause Related Marketing</li>
408
- <li>e. Affiliation Management</li>
409
- <li>f. Influencer Management</li>
410
- </ul>
411
- </div>
412
- </div>
413
- </div>
414
- </section>
415
-
416
- <!-- SECTION 2: PERFORMANCE CALCULATOR -->
417
- <section class="mb-20">
418
- <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm">
419
- <div class="text-center mb-10">
420
- <h2 class="text-3xl font-bold text-gray-900 mb-2">2. Aggiungi Servizi a Performance</h2>
421
- <p class="text-gray-600">Paga solo per i risultati. Definisci tu il valore dei tuoi clienti.</p>
422
- </div>
423
 
424
- <div class="grid md:grid-cols-2 gap-8 items-start">
425
- <!-- Inputs Grid -->
426
- <div class="grid md:grid-cols-2 gap-6">
427
- <div>
428
- <label for="clvInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Customer Lifetime Value (CLV)</label>
429
- <div class="relative">
430
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
431
- <span class="text-gray-500 sm:text-sm">€</span>
432
- </div>
433
- <input type="number" id="clvInput" placeholder="Es. 300" class="custom-input pl-7" oninput="calculateTotal()">
434
- </div>
435
- <p class="text-xs text-gray-400 mt-1">Valore medio di un cliente nel tempo</p>
436
- </div>
437
-
438
- <div>
439
- <label for="percentageInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Percentuale a Performance</label>
440
- <div class="relative">
441
- <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
442
- <span class="text-gray-500 sm:text-sm">%</span>
443
- </div>
444
- <input type="number" id="percentageInput" placeholder="Es. 25" class="custom-input pr-7" oninput="calculateTotal()">
445
- </div>
446
- <p class="text-xs text-gray-400 mt-1">La tua fee sul valore generato</p>
447
- </div>
448
- </div>
449
-
450
- <!-- Cost Per Client Display -->
451
- <div class="bg-gray-50 rounded-xl p-6 border border-gray-100 flex flex-col justify-center items-center h-full md:h-auto">
452
- <div class="text-sm font-medium text-gray-500 mb-1">Costo per Nuovo Cliente</div>
453
- <div class="text-4xl font-extrabold text-blue-600" id="costPerClient">€0.00</div>
454
- <div class="text-xs text-gray-400 mt-2">Calcolato come (CLV × %)</div>
455
- </div>
456
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
457
 
458
- <div class="mt-10 pt-8 border-t border-gray-100">
459
- <div class="flex justify-between items-end mb-4">
460
- <label for="clientsInput" class="block text-sm font-semibold text-gray-700 uppercase tracking-wide">Nuovi Clienti Acquisiti (Simulazione)</label>
461
- <span id="clientsValue" class="text-2xl font-bold text-gray-900 bg-white px-3 py-1 rounded border border-gray-200 shadow-sm">0</span>
462
- </div>
463
- <input type="range" id="clientsInput" min="0" max="500" value="0" step="1" oninput="calculateTotal()">
464
- <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium">
465
- <span>0</span>
466
- <span>100</span>
467
- <span>250</span>
468
- <span>500+</span>
469
- </div>
 
 
 
 
470
  </div>
 
 
 
471
  </div>
472
- </section>
473
-
474
- <!-- SECTION 3: SUMMARY -->
475
- <section class="mb-20">
476
- <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative">
477
- <!-- Decorative background elements -->
478
- <div class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -translate-y-1/2 translate-x-1/2"></div>
479
- <div class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 translate-y-1/2 -translate-x-1/2"></div>
480
-
481
- <h3 class="text-2xl md:text-3xl font-bold mb-8 text-center relative z-10">Riepilogo del Tuo Investimento</h3>
482
-
483
- <div class="grid md:grid-cols-3 gap-8 text-center relative z-10 divide-y md:divide-y-0 md:divide-x divide-slate-700">
484
- <div class="p-4">
485
- <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Pacchetto Base</div>
486
- <div class="text-2xl font-bold text-white" id="selectedPackageDisplay">Nessuno</div>
487
- </div>
488
- <div class="p-4">
489
- <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Costo a Performance</div>
490
- <div class="text-2xl font-bold text-blue-400" id="performanceTotal">€0</div>
491
- </div>
492
- <div class="p-4 md:pl-8">
493
- <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Investimento Totale Stimato</div>
494
- <div class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400" id="totalCost">€0</div>
495
- </div>
496
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
497
 
498
- <div class="text-center mt-12 relative z-10">
499
- <button class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 focus:ring-offset-slate-900" onclick="generateQuote()">
500
  <span class="mr-2">📋</span>
501
  Copia Preventivo Personalizzato
502
  <div class="absolute inset-0 rounded-full ring-2 ring-white/20 group-hover:ring-white/40 transition-all duration-200"></div>
503
  </button>
504
- <p class="text-slate-500 text-sm mt-4">Il preventivo verrà copiato negli appunti per essere incollato su WhatsApp o Email.</p>
505
- </div>
506
- </div>
507
- </section>
508
-
509
- <!-- SECTION 4: ROI SIMULATOR -->
510
- <section class="mb-20">
511
- <div class="simulator-card p-8 md:p-12">
512
- <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
513
- <div>
514
- <div class="flex items-center gap-3 mb-2">
515
- <span class="p-2 bg-white/10 rounded-lg">
 
516
  <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
517
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
518
  </svg>
519
  </span>
520
- <h2 class="text-3xl font-bold text-white">3. Simulatore ROI & Crescita</h2>
521
- </div>
522
- <p class="text-slate-400">Proiezione dei ritorni sull'investimento e timeline di crescita</p>
523
- </div>
524
- <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full">
525
- <span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span>
526
- <span class="text-sm text-slate-300">Simulazione in tempo reale</span>
527
- </div>
528
- </div>
529
 
530
- <!-- Simulator Inputs -->
531
- <div class="grid md:grid-cols-3 gap-6 mb-10">
532
- <div class="stat-card p-5">
533
- <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Durata Campagna (Mesi)</label>
534
- <input type="range" id="campaignMonths" min="3" max="24" value="6" class="w-full mb-2" oninput="calculateROI()">
535
- <div class="flex justify-between items-center">
536
- <span class="text-2xl font-bold text-white" id="monthsValue">6</span>
537
- <span class="text-sm text-slate-400">mesi</span>
538
- </div>
539
- </div>
540
-
541
- <div class="stat-card p-5">
542
- <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Tasso Conversione (%)</label>
543
- <input type="range" id="conversionRate" min="1" max="15" value="3" step="0.5" class="w-full mb-2" oninput="calculateROI()">
544
- <div class="flex justify-between items-center">
545
- <span class="text-2xl font-bold text-white" id="conversionValue">3</span>
546
- <span class="text-sm text-slate-400">%</span>
547
- </div>
548
- </div>
549
-
550
- <div class="stat-card p-5">
551
- <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Valore Medio Ordine (€)</label>
552
- <input type="number" id="avgOrderValue" placeholder="Es. 150" value="150" class="custom-input bg-white/5 border-white/10 text-white placeholder-slate-500" oninput="calculateROI()">
553
- </div>
554
- </div>
555
 
556
- <!-- ROI Results Grid -->
557
- <div class="grid md:grid-cols-4 gap-4 mb-10">
558
- <div class="stat-card p-6 text-center fade-in stagger-1">
559
- <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ritorno Investimento</div>
560
- <div class="text-3xl font-bold text-emerald-400" id="roiPercent">0%</div>
561
- <div class="text-xs text-slate-500 mt-1">ROI totale</div>
562
- </div>
563
-
564
- <div class="stat-card p-6 text-center fade-in stagger-2">
565
- <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ricavi Stimati</div>
566
- <div class="text-3xl font-bold text-blue-400" id="projectedRevenue">€0</div>
567
- <div class="text-xs text-slate-500 mt-1">12 mesi</div>
568
- </div>
569
-
570
- <div class="stat-card p-6 text-center fade-in stagger-3">
571
- <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Break-even</div>
572
- <div class="text-3xl font-bold text-purple-400" id="breakEven">0</div>
573
- <div class="text-xs text-slate-500 mt-1">nuovi clienti</div>
574
- </div>
575
-
576
- <div class="stat-card p-6 text-center fade-in stagger-4">
577
- <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Cliente Netto</div>
578
- <div class="text-3xl font-bold text-amber-400" id="netPerClient">€0</div>
579
- <div class="text-xs text-slate-500 mt-1">dopo costi</div>
580
- </div>
581
- </div>
582
 
583
- <!-- Visual Timeline & Charts -->
584
- <div class="grid md:grid-cols-2 gap-8">
585
- <!-- Growth Timeline -->
586
- <div class="stat-card p-6">
587
- <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
588
- <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
589
- <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"></path>
590
- </svg>
591
- Timeline Crescita Mensile
592
- </h4>
593
- <div class="space-y-3" id="timelineBars">
594
- <!-- Bars will be generated by JS -->
595
- </div>
596
- </div>
597
-
598
- <!-- Funnel Visualization -->
599
- <div class="stat-card p-6">
600
- <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
601
- <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
602
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
603
- </svg>
604
- Funnel Conversione
605
- </h4>
606
- <div class="flex items-center justify-center gap-2">
607
- <div class="flex-1 text-center">
608
- <div class="bg-blue-500/20 rounded-t-lg p-4 border border-blue-500/30">
609
- <div class="text-2xl font-bold text-white" id="impressions">0</div>
610
- <div class="text-xs text-slate-400">Impression</div>
611
- </div>
612
- <div class="bg-blue-500/30 p-3 border-x border-b border-blue-500/30">
613
- <div class="text-lg font-bold text-blue-300" id="clicks">0</div>
614
- <div class="text-xs text-slate-400">Clic</div>
615
- </div>
616
- <div class="bg-blue-500/40 p-3 border-x border-b border-blue-500/30">
617
- <div class="text-lg font-bold text-blue-200" id="leads">0</div>
618
- <div class="text-xs text-slate-400">Lead</div>
619
- </div>
620
- <div class="bg-emerald-500/50 rounded-b-lg p-4 border border-emerald-500/30">
621
- <div class="text-2xl font-bold text-emerald-300" id="customers">0</div>
622
- <div class="text-xs text-slate-400">Clienti</div>
623
- </div>
624
- </div>
625
- </div>
626
- <div class="mt-4 text-center text-xs text-slate-500">
627
- Basato su <span id="totalVisits">0</span> visite mensili stimate
628
- </div>
629
- </div>
630
- </div>
631
 
632
- <!-- Summary Comparison -->
633
- <div class="mt-8 p-6 bg-white/5 rounded-xl border border-white/10">
634
- <h4 class="text-white font-semibold mb-4 flex items-center gap-2">
635
- <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
636
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
637
- </svg>
638
- Confronto Investimento vs Ritorno
639
- </h4>
640
- <div class="grid md:grid-cols-2 gap-8">
641
- <div>
642
- <div class="flex justify-between mb-2">
643
- <span class="text-slate-400 text-sm">Investimento Totale</span>
644
- <span class="text-white font-semibold" id="investmentCompare">€0</span>
645
- </div>
646
- <div class="timeline-bar">
647
- <div class="timeline-progress bg-red-500/50" style="width: 30%"></div>
648
- </div>
649
- </
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="it">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Calcolatore Prezzi Avanzato - Servizi Digitali</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
12
+ rel="stylesheet">
13
+ <style>
14
+ :root {
15
+ --primary-color: #2563eb;
16
+ --primary-hover: #1d4ed8;
17
+ --bg-color: #f8fafc;
18
+ --text-color: #0f172a;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Inter', sans-serif;
23
+ background-color: var(--bg-color);
24
+ color: var(--text-color);
25
+ scroll-behavior: smooth;
26
+ }
27
+
28
+ ::-webkit-scrollbar {
29
+ width: 8px;
30
+ }
31
+
32
+ ::-webkit-scrollbar-track {
33
+ background: #f1f1f1;
34
+ }
35
+
36
+ ::-webkit-scrollbar-thumb {
37
+ background: #cbd5e1;
38
+ border-radius: 4px;
39
+ }
40
+
41
+ ::-webkit-scrollbar-thumb:hover {
42
+ background: #94a3b8;
43
+ }
44
+
45
+ .price-card {
46
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
47
+ border: 1px solid #e2e8f0;
48
+ position: relative;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .price-card:hover {
53
+ transform: translateY(-5px);
54
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
55
+ border-color: #cbd5e1;
56
+ }
57
+
58
+ .price-card.selected {
59
+ border-color: var(--primary-color);
60
+ box-shadow: 0 0 0 2px var(--primary-color);
61
+ background-color: #eff6ff;
62
+ transform: scale(1.02);
63
+ z-index: 10;
64
+ }
65
+
66
+ .check-icon {
67
+ opacity: 0;
68
+ transform: scale(0.5);
69
+ transition: all 0.3s ease;
70
+ position: absolute;
71
+ top: 1rem;
72
+ right: 1rem;
73
+ background-color: var(--primary-color);
74
+ color: white;
75
+ border-radius: 50%;
76
+ width: 24px;
77
+ height: 24px;
78
+ display: flex;
79
+ align-items: center;
80
+ justify-content: center;
81
+ font-size: 14px;
82
+ }
83
+
84
+ .price-card.selected .check-icon {
85
+ opacity: 1;
86
+ transform: scale(1);
87
+ }
88
+
89
+ .custom-input {
90
+ background-color: #fff;
91
+ border: 1px solid #cbd5e1;
92
+ border-radius: 0.5rem;
93
+ padding: 0.5rem 1rem;
94
+ transition: all 0.2s;
95
+ width: 100%;
96
+ }
97
+
98
+ .custom-input:focus {
99
+ outline: none;
100
+ border-color: var(--primary-color);
101
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
102
+ }
103
+
104
+ input[type=range] {
105
+ -webkit-appearance: none;
106
+ width: 100%;
107
+ background: transparent;
108
+ }
109
+
110
+ input[type=range]::-webkit-slider-thumb {
111
+ -webkit-appearance: none;
112
+ height: 24px;
113
+ width: 24px;
114
+ border-radius: 50%;
115
+ background: var(--primary-color);
116
+ cursor: pointer;
117
+ margin-top: -10px;
118
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
119
+ transition: transform 0.1s;
120
+ }
121
+
122
+ input[type=range]::-webkit-slider-thumb:hover {
123
+ transform: scale(1.1);
124
+ }
125
+
126
+ input[type=range]::-webkit-slider-runnable-track {
127
+ width: 100%;
128
+ height: 4px;
129
+ cursor: pointer;
130
+ background: #e2e8f0;
131
+ border-radius: 2px;
132
+ }
133
+
134
+ input[type=range]::-moz-range-thumb {
135
+ height: 24px;
136
+ width: 24px;
137
+ border: none;
138
+ border-radius: 50%;
139
+ background: var(--primary-color);
140
+ cursor: pointer;
141
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
142
+ }
143
+
144
+ input[type=range]::-moz-range-track {
145
+ width: 100%;
146
+ height: 4px;
147
+ cursor: pointer;
148
+ background: #e2e8f0;
149
+ border-radius: 2px;
150
+ }
151
+
152
+ .feature-list {
153
+ list-style: none;
154
+ padding: 0;
155
+ margin: 0;
156
+ }
157
+
158
+ .feature-list li {
159
+ display: flex;
160
+ align-items: flex-start;
161
+ margin-bottom: 0.5rem;
162
+ font-size: 0.9rem;
163
+ line-height: 1.5;
164
+ color: #475569;
165
+ }
166
+
167
+ .feature-list li::before {
168
+ content: '✓';
169
+ color: var(--primary-color);
170
+ font-weight: 700;
171
+ margin-right: 0.5rem;
172
+ flex-shrink: 0;
173
+ font-size: 1rem;
174
+ }
175
+
176
+ .feature-list li.highlight {
177
+ font-weight: 600;
178
+ color: #1e293b;
179
+ }
180
+
181
+ .price-update-anim {
182
+ animation: pulse-green 0.5s ease-in-out;
183
+ }
184
+
185
+ @keyframes pulse-green {
186
+ 0% {
187
+ color: inherit;
188
+ }
189
+
190
+ 50% {
191
+ color: #16a34a;
192
+ }
193
+
194
+ 100% {
195
+ color: inherit;
196
+ }
197
+ }
198
+
199
+ /* Simulator Styles */
200
+ .simulator-card {
201
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
202
+ border-radius: 1.5rem;
203
+ overflow: hidden;
204
+ position: relative;
205
+ }
206
+
207
+ .simulator-card::before {
208
+ content: '';
209
+ position: absolute;
210
+ top: 0;
211
+ left: 0;
212
+ right: 0;
213
+ height: 4px;
214
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
215
+ }
216
+
217
+ .stat-card {
218
+ background: rgba(255, 255, 255, 0.05);
219
+ border: 1px solid rgba(255, 255, 255, 0.1);
220
+ border-radius: 1rem;
221
+ backdrop-filter: blur(10px);
222
+ transition: all 0.3s ease;
223
+ }
224
+
225
+ .stat-card:hover {
226
+ background: rgba(255, 255, 255, 0.08);
227
+ transform: translateY(-2px);
228
+ }
229
+
230
+ .progress-ring {
231
+ transform: rotate(-90deg);
232
+ }
233
+
234
+ .progress-ring-circle {
235
+ transition: stroke-dashoffset 0.5s ease;
236
+ }
237
+
238
+ .timeline-bar {
239
+ height: 8px;
240
+ border-radius: 4px;
241
+ background: #e2e8f0;
242
+ overflow: hidden;
243
+ }
244
+
245
+ .timeline-progress {
246
+ height: 100%;
247
+ border-radius: 4px;
248
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
249
+ transition: width 0.5s ease;
250
+ }
251
+
252
+ .growth-indicator {
253
+ animation: float 3s ease-in-out infinite;
254
+ }
255
+
256
+ @keyframes float {
257
+
258
+ 0%,
259
+ 100% {
260
+ transform: translateY(0);
261
+ }
262
+
263
+ 50% {
264
+ transform: translateY(-10px);
265
+ }
266
+ }
267
+
268
+ .pulse-dot {
269
+ animation: pulse 2s infinite;
270
+ }
271
+
272
+ @keyframes pulse {
273
+
274
+ 0%,
275
+ 100% {
276
+ transform: scale(1);
277
+ opacity: 1;
278
+ }
279
+
280
+ 50% {
281
+ transform: scale(1.5);
282
+ opacity: 0.5;
283
+ }
284
+ }
285
+
286
+ .chart-bar {
287
+ transition: height 0.5s ease;
288
+ }
289
+
290
+ .fade-in {
291
+ animation: fadeIn 0.5s ease forwards;
292
+ }
293
+
294
+ @keyframes fadeIn {
295
+ from {
296
+ opacity: 0;
297
+ transform: translateY(20px);
298
+ }
299
+
300
+ to {
301
+ opacity: 1;
302
+ transform: translateY(0);
303
+ }
304
+ }
305
+
306
+ .stagger-1 {
307
+ animation-delay: 0.1s;
308
+ }
309
+
310
+ .stagger-2 {
311
+ animation-delay: 0.2s;
312
+ }
313
+
314
+ .stagger-3 {
315
+ animation-delay: 0.3s;
316
+ }
317
+
318
+ .stagger-4 {
319
+ animation-delay: 0.4s;
320
+ }
321
+
322
+ /* Custom scrollbar for feature list */
323
+ .custom-scrollbar::-webkit-scrollbar {
324
+ width: 6px;
325
+ }
326
+
327
+ .custom-scrollbar::-webkit-scrollbar-track {
328
+ background: transparent;
329
+ }
330
+
331
+ .custom-scrollbar::-webkit-scrollbar-thumb {
332
+ background: #e2e8f0;
333
+ border-radius: 10px;
334
+ }
335
+ </style>
336
  </head>
337
+
338
  <body class="antialiased selection:bg-blue-100 selection:text-blue-900">
339
 
340
+ <!-- Navigation / Branding -->
341
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
342
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
343
+ <div class="flex items-center space-x-2">
344
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">D
 
 
 
 
 
345
  </div>
346
+ <span class="text-xl font-bold text-gray-900 tracking-tight">DigitalGrowth<span class="text-blue-600">Calc</span></span>
347
+ </div>
348
+ <div class="text-sm font-medium text-gray-500">
349
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
350
+ class="hover:text-blue-600 transition-colors">Built with anycoder</a>
351
+ </div>
352
+ </div>
353
+ </nav>
354
+
355
+ <header class="bg-gradient-to-b from-white to-blue-50/50 py-16 md:py-24 border-b border-gray-100">
356
+ <div class="container mx-auto px-6 text-center max-w-4xl">
357
+ <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide uppercase mb-4">Preventivo 2024</span>
358
+ <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight tracking-tight">
359
+ Calcolatore di
360
+ <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Investimento Digitale</span>
361
+ </h1>
362
+ <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
363
+ Configura il tuo piano di crescita su misura. Scegli il pacchetto, stima le performance e ottieni un preventivo
364
+ istantaneo.
365
+ </p>
366
+ </div>
367
+ </header>
368
+
369
+ <main class="container mx-auto px-4 md:px-6 py-12 max-w-7xl">
370
+
371
+ <!-- SECTION 1: PACKAGES -->
372
+ <section class="mb-20">
373
+ <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
374
+ <div>
375
+ <h2 class="text-3xl font-bold text-gray-900">1. Scegli il tuo Pacchetto Base</h2>
376
+ <p class="text-gray-500 mt-2">Seleziona il livello di servizio adatto alle tue esigenze.</p>
377
  </div>
378
+ </div>
 
 
 
 
 
 
 
 
 
 
 
379
 
380
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381
 
382
+ <!-- STANDARD CARD -->
383
+ <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group"
384
+ onclick="selectPackage('Standard', 2500, this)">
385
+ <div class="check-icon">✓</div>
386
+ <div class="mb-6">
387
+ <h3 class="text-2xl font-bold text-gray-900">Standard</h3>
388
+ <p class="text-gray-500 text-sm mt-1">Per chi inizia la crescita.</p>
389
+ </div>
390
+ <div class="flex items-baseline mb-8">
391
+ <span class="text-4xl font-extrabold text-gray-900">€2.500</span>
392
+ <span class="text-gray-500 ml-2 font-medium">una tantum</span>
393
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
394
 
395
+ <div class="space-y-4 mb-8">
396
+ <div class="h-px bg-gray-100 w-full"></div>
397
+ <ul class="feature-list space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
398
+ <li class="highlight">Paid Search Competitor</li>
399
+ <li class="highlight">Keyword Analysis & Planner</li>
400
+ <li><strong>20-</strong> Editing (Copy/Headline)</li>
401
+ <li><strong>4-</strong> Video per campagna</li>
402
+ <li>Video Editor & Designer Dedicato</li>
403
+ <li><strong>2-</strong> Ad Copy & Graphics</li>
404
+ <li>Google Ads (Search & Video)</li>
405
+ <li>Performance Max Campaign</li>
406
+ <li>Configurazione Account & Analytics</li>
407
+ <li>Targeting & Reporting</li>
408
+ <li>Gestione Conversioni</li>
409
+ <li>Creazione Contenuti Email</li>
410
+ <li><strong>2-</strong> Landing Pages Sponsor</li>
411
+ <li>Widget Integration (Survey & Form)</li>
412
+ <li>Contest & Micro Influencer</li>
413
+ <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
414
+ <li>Demand Generation Campaign</li>
415
+ <li>Sales & Customer Agent App</li>
416
+ </ul>
417
+ </div>
418
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
419
 
420
+ <!-- GOLD CARD -->
421
+ <div
422
+ class="price-card bg-white rounded-2xl p-8 cursor-pointer relative border-blue-600 ring-1 ring-blue-600 group"
423
+ onclick="selectPackage('Gold', 3500, this)">
424
+ <div class="absolute -top-4 left-1/2 -translate-x-1/2">
425
+ <span class="bg-blue-600 text-white px-5 py-1.5 rounded-full text-sm font-bold tracking-wide shadow-lg shadow-blue-600/30">Consigliato</span>
426
+ </div>
427
+ <div class="check-icon">✓</div>
428
+ <div class="mb-6">
429
+ <h3 class="text-2xl font-bold text-gray-900">Gold</h3>
430
+ <p class="text-gray-500 text-sm mt-1">Per accelerare le performance.</p>
431
+ </div>
432
+ <div class="flex items-baseline mb-8">
433
+ <span class="text-4xl font-extrabold text-gray-900">€3.500</span>
434
+ <span class="text-gray-500 ml-2 font-medium">una tantum</span>
435
+ </div>
436
+
437
+ <div class="space-y-4 mb-8">
438
+ <div class="h-px bg-gray-100 w-full"></div>
439
+ <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
440
+ <li class="font-bold text-blue-600">Tutto dello Standard, più:</li>
441
+ <li><strong>30-</strong> Editing (Copy/Headline)</li>
442
+ <li><strong>10-</strong> Video per campagna</li>
443
+ <li><strong>3-</strong> Ad Copy & Graphics</li>
444
+ <li>Google Shopping</li>
445
+ <li>Integrazione Merchant Center</li>
446
+ <li>Customer Match (con CRM)</li>
447
+ <li>Email Marketing Aziendale</li>
448
+ <li><strong>2-</strong> Multi Landing Pages & A/B Test</li>
449
+ <li><strong>1-</strong> Store eCommerce Landing</li>
450
+ <li>Plugin Loyalty & Referral</li>
451
+ <li>Contest + Professional Influencer</li>
452
+ <li>CSR: Web Disclosure & Impact</li>
453
+ <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
454
+ <li>ML Analytics Application</li>
455
+ <li>Customer Advanced Data Analytics</li>
456
+ <li>Market & Competitive Intelligence</li>
457
+ <li class="font-semibold text-gray-800">Advanced Program (1 incluso):</li>
458
+ <li>a. Referral Martech App</li>
459
+ <li>b. Loyalty Program</li>
460
+ <li>c. Social Coalition Loyalty</li>
461
+ <li>d. Cause Related Marketing</li>
462
+ <li>e. Affiliation Management</li>
463
+ <li>f. Influencer Management</li>
464
+ </ul>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- PLATINUM CARD -->
469
+ <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group"
470
+ onclick="selectPackage('Platinum', 5000, this)">
471
+ <div class="check-icon">✓</div>
472
+ <div class="mb-6">
473
+ <h3 class="text-2xl font-bold text-gray-900">Platinum</h3>
474
+ <p class="text-gray-500 text-sm mt-1">Soluzione completa di dominio.</p>
475
+ </div>
476
+ <div class="flex items-baseline mb-8">
477
+ <span class="text-4xl font-extrabold text-gray-900">€5.000</span>
478
+ <span class="text-gray-500 ml-2 font-medium">una tantum</span>
479
+ </div>
480
+
481
+ <div class="space-y-4 mb-8">
482
+ <div class="h-px bg-gray-100 w-full"></div>
483
+ <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
484
+ <li class="font-bold text-blue-600">Tutto del Gold, più:</li>
485
+ <li><strong>50-</strong> Editing (Copy/Headline)</li>
486
+ <li><strong>20-</strong> Video per campagna</li>
487
+ <li><strong>5-</strong> Ad Copy & Graphics</li>
488
+ <li>Integrazione Piattaforme Multiple</li>
489
+ <li>Campagne Asset Affiliati</li>
490
+ <li>Tools Campagne Avanzate</li>
491
+ <li>Co-Marketing Multichannel</li>
492
+ <li><strong>2-</strong> Landing Pages Evento</li>
493
+ <li><strong>5-</strong> Multi Landing Pages & A/B Test</li>
494
+ <li><strong>2-</strong> Store eCommerce Landing</li>
495
+ <li>CSR: Metodo Cultural Impact</li>
496
+ <li>CSR: Media Relations</li>
497
+ <li>Generative AI App (inclusa)</li>
498
+ <li class="font-semibold text-gray-800">Advanced Program (2 inclusi):</li>
499
+ <li>a. Referral Martech App</li>
500
+ <li>b. Loyalty Program</li>
501
+ <li>c. Social Coalition Loyalty</li>
502
+ <li>d. Cause Related Marketing</li>
503
+ <li>e. Affiliation Management</li>
504
+ <li>f. Influencer Management</li>
505
+ </ul>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </section>
510
 
511
+ <!-- SECTION 2: PERFORMANCE CALCULATOR -->
512
+ <section class="mb-20">
513
+ <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm">
514
+ <div class="text-center mb-10">
515
+ <h2 class="text-3xl font-bold text-gray-900 mb-2">2. Aggiungi Servizi a Performance</h2>
516
+ <p class="text-gray-600">Paga solo per i risultati. Definisci tu il valore dei tuoi clienti.</p>
517
+ </div>
518
+
519
+ <div class="grid md:grid-cols-2 gap-8 items-start">
520
+ <!-- Inputs Grid -->
521
+ <div class="grid md:grid-cols-2 gap-6">
522
+ <div>
523
+ <label for="clvInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Customer Lifetime Value (CLV)</label>
524
+ <div class="relative">
525
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
526
+ <span class="text-gray-500 sm:text-sm">€</span>
527
  </div>
528
+ <input type="number" id="clvInput" placeholder="Es. 300" class="custom-input pl-7" oninput="calculateTotal()">
529
+ </div>
530
+ <p class="text-xs text-gray-400 mt-1">Valore medio di un cliente nel tempo</p>
531
  </div>
532
+
533
+ <div>
534
+ <label for="percentageInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Percentuale a Performance</label>
535
+ <div class="relative">
536
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
537
+ <span class="text-gray-500 sm:text-sm">%</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
538
  </div>
539
+ <input type="number" id="percentageInput" placeholder="Es. 25" class="custom-input pr-7" oninput="calculateTotal()">
540
+ </div>
541
+ <p class="text-xs text-gray-400 mt-1">La tua fee sul valore generato</p>
542
+ </div>
543
+ </div>
544
+
545
+ <!-- Cost Per Client Display -->
546
+ <div
547
+ class="bg-gray-50 rounded-xl p-6 border border-gray-100 flex flex-col justify-center items-center h-full md:h-auto">
548
+ <div class="text-sm font-medium text-gray-500 mb-1">Costo per Nuovo Cliente</div>
549
+ <div class="text-4xl font-extrabold text-blue-600" id="costPerClient">€0.00</div>
550
+ <div class="text-xs text-gray-400 mt-2">Calcolato come (CLV × %)</div>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="mt-10 pt-8 border-t border-gray-100">
555
+ <div class="flex justify-between items-end mb-4">
556
+ <label for="clientsInput" class="block text-sm font-semibold text-gray-700 uppercase tracking-wide">Nuovi Clienti Acquisiti (Simulazione)</label>
557
+ <span id="clientsValue" class="text-2xl font-bold text-gray-900 bg-white px-3 py-1 rounded border border-gray-200 shadow-sm">0</span>
558
+ </div>
559
+ <input type="range" id="clientsInput" min="0" max="500" value="0" step="1" oninput="calculateTotal()">
560
+ <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium">
561
+ <span>0</span>
562
+ <span>100</span>
563
+ <span>250</span>
564
+ <span>500+</span>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </section>
569
+
570
+ <!-- SECTION 3: SUMMARY -->
571
+ <section class="mb-20">
572
+ <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative">
573
+ <!-- Decorative background elements -->
574
+ <div
575
+ class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -translate-y-1/2 translate-x-1/2">
576
+ </div>
577
+ <div
578
+ class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 translate-y-1/2 -translate-x-1/2">
579
+ </div>
580
+
581
+ <h3 class="text-2xl md:text-3xl font-bold mb-8 text-center relative z-10">Riepilogo del Tuo Investimento</h3>
582
+
583
+ <div
584
+ class="grid md:grid-cols-3 gap-8 text-center relative z-10 divide-y md:divide-y-0 md:divide-x divide-slate-700">
585
+ <div class="p-4">
586
+ <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Pacchetto Base</div>
587
+ <div class="text-2xl font-bold text-white" id="selectedPackageDisplay">Nessuno</div>
588
+ </div>
589
+ <div class="p-4">
590
+ <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Costo a Performance</div>
591
+ <div class="text-2xl font-bold text-blue-400" id="performanceTotal">€0</div>
592
+ </div>
593
+ <div class="p-4 md:pl-8">
594
+ <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Investimento Totale Stimato</div>
595
+ <div
596
+ class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400"
597
+ id="totalCost">€0</div>
598
+ </div>
599
+ </div>
600
 
601
+ <div class="text-center mt-12 relative z-10">
602
+ <button class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 focus:ring-offset-slate-900" onclick="generateQuote()">
603
  <span class="mr-2">📋</span>
604
  Copia Preventivo Personalizzato
605
  <div class="absolute inset-0 rounded-full ring-2 ring-white/20 group-hover:ring-white/40 transition-all duration-200"></div>
606
  </button>
607
+ <p class="text-slate-500 text-sm mt-4">Il preventivo verrà copiato negli appunti per essere incollato su
608
+ WhatsApp o Email.</p>
609
+ </div>
610
+ </div>
611
+ </section>
612
+
613
+ <!-- SECTION 4: ROI SIMULATOR -->
614
+ <section class="mb-20">
615
+ <div class="simulator-card p-8 md:p-12">
616
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
617
+ <div>
618
+ <div class="flex items-center gap-3 mb-2">
619
+ <span class="p-2 bg-white/10 rounded-lg">
620
  <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
621
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
622
  </svg>
623
  </span>
624
+ <h2 class="text-3xl font-bold text-white">3. Simulatore ROI & Crescita</h2>
625
+ </div>
626
+ <p class="text-slate-400">Proiezione dei ritorni sull'investimento e timeline di crescita</p>
627
+ </div>
628
+ <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full">
629
+ <span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span>
630
+ <span class="text-sm text-slate-300">Simulazione in tempo reale</span>
631
+ </div>
632
+ </div>
633
 
634
+ <!-- Simulator Inputs (Updated Grid) -->
635
+ <div class="grid md:grid-cols-4 gap-4 mb-10">
636
+
637
+ <!-- NEW: Spesa Advertising -->
638
+ <div class="stat-card p-5">
639
+ <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Spesa Advertising (€)</label>
640
+ <input type="range" id="adSpend" min="0" max="50000" step="500" value="10000" class="w-full mb-2 accent-blue-500" oninput="calculateROI()">
641
+ <div class="flex justify-between items-center">
642
+ <span class="text-2xl font-bold text-white" id="adSpendValue">10.000</span>
643
+ <span class="text-sm text-slate-400">€ budget</span>
644
+ </div>
645
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
646
 
647
+ <!-- NEW: CPM -->
648
+ <div class="stat-card p-5">
649
+ <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">CPM (€)</label>
650
+ <input type="range" id="cpmInput" min="1" max="50" step="0.5" value="2" class="w-full mb-2 accent-purple-500" oninput="calculateROI()">
651
+ <div class="flex justify-between items-center">
652
+ <span class="text-2xl font-bold text-white" id="cpmValue">2.00</span>
653
+ <span class="text-sm text-slate-400">Costo x 1k</span>
654
+ </div>
655
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
656
 
657
+ <!-- Existing: Conversion Rate -->
658
+ <div class="stat-card p-5">
659
+ <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Tasso Conversione (%)</label>
660
+ <input type="range" id="conversionRate" min="0.1" max="15" value="3" step="0.1" class="w-full mb-2 accent-emerald-500" oninput="calculateROI()">
661
+ <div class="flex justify-between items-center">
662
+ <span class="text-2xl font-bold text-white" id="conversionValue">3.0</span>
663
+ <span class="text-sm text-slate-400">%</span>
664
+ </div>
665
+ </div>
666
+
667
+ <!-- Existing: AOV -->
668
+ <div class="stat-card p-5">
669
+ <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Valore Medio Ordine (€)</label>
670
+ <input type="number" id="avgOrderValue" placeholder="Es. 150" value="150" class="custom-input bg-white/5 border-white/10 text-white placeholder-slate-500" oninput="calculateROI()">
671
+ </div>
672
+ </div>
673
+
674
+ <!-- ROI Results Grid -->
675
+ <div class="grid md:grid-cols-4 gap-4 mb-10">
676
+ <div class="stat-card p-6 text-center fade-in stagger-1">
677
+ <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ritorno Investimento</div>
678
+ <div class="text-3xl font-bold text-emerald-400" id="roiPercent">0%</div>
679
+ <div class="text-xs text-slate-500 mt-1">ROI totale</div>
680
+ </div>
681
+
682
+ <div class="stat-card p-6 text-center fade-in stagger-2">
683
+ <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ricavi Stimati</div>
684
+ <div class="text-3xl font-bold text-blue-400" id="projectedRevenue">€0</div>
685
+ <div class="text-xs text-slate-500 mt-1">12 mesi</div>
686
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
687
 
688
+ <div class="stat-card p-6 text-center fade-in stagger-3">
689
+ <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Break-even</div>
690
+ <div class="text-3xl font-bold text-purple-400" id="breakEven">0</div>
691
+ <div class="text-xs text-slate-500 mt-1">nuovi clienti</div>
692
+ </div>
693
+
694
+ <div class="stat-card p-6 text-center fade-in stagger-4">
695
+ <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Cliente Netto</div>
696
+ <div class="text-3xl font-bold text-amber-400" id="netPerClient">€0</div>
697
+ <div class="text-xs text-slate-500 mt-1">dopo costi</div>
698
+ </div>
699
+ </div>
700
+
701
+ <!-- Visual Timeline & Charts -->
702
+ <div class="grid md:grid-cols-2 gap-8">
703
+ <!-- Growth Timeline -->
704
+ <div class="stat-card p-6">
705
+ <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
706
+ <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
707
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
708
+ 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">
709
+ </path>
710
+ </svg>
711
+ Timeline Crescita Mensile
712
+ </h4>
713
+ <div class="space-y-3" id="timelineBars">
714
+ <!-- Bars will be generated by JS -->
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Funnel Visualization -->
719
+ <div class="stat-card p-6">
720
+ <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
721
+ <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
722
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
723
+ d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z">
724
+ </path>
725
+ </svg>
726
+ Funnel Conversione
727
+ </h4>
728
+ <div class="flex items-center justify-center gap-2">
729
+ <div class="flex-1 text-center">
730
+ <div class="bg-blue-500/20 rounded-t-lg p-4 border border-blue-500/30">
731
+ <div class="text-2xl font-bold text-white" id="impressions">0</div>
732
+ <div class="text-xs text-slate-400">Impression</div>
733
+ </div>
734
+ <div class="bg-blue-500/30 p-3 border-x border-b border-blue-500/30">
735
+ <div class="text-lg font-bold text-blue-300" id="clicks">0</div>
736
+ <div class="text-xs text-slate-400">Clic</div>
737
+ </div>
738
+ <div class="bg-blue-500/40 p-3 border-x border-b border-blue-50