568 lines
18 KiB
PHP
568 lines
18 KiB
PHP
<?php
|
|
// pricing.php — Pagina pubblica piani abbonamento (rivolta ai SALONI/titolari)
|
|
// Legge i piani reali da subscription_plans. Annuale = mensile x11 (1 mese gratis).
|
|
|
|
ini_set('display_errors', 1);
|
|
ini_set('display_startup_errors', 1);
|
|
error_reporting(E_ALL);
|
|
|
|
if (session_status() === PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
|
|
require_once(__DIR__ . '/userarea/class/db-functions.php');
|
|
$pdo = DBHandlerSelect::getInstance()->getConnection();
|
|
|
|
// Piani attivi, dal più economico al più caro
|
|
$plans = $pdo->query("
|
|
SELECT id, name, description, price, billing_period
|
|
FROM subscription_plans
|
|
WHERE is_active = 1
|
|
ORDER BY price ASC
|
|
")->fetchAll(PDO::FETCH_ASSOC);
|
|
|
|
// --- Feature per piano (mappate per nome). Modificabili qui. ---
|
|
// Ogni voce: [testo, incluso(true/false)]. Le non incluse appaiono barrate.
|
|
$featuresByPlan = [
|
|
'Base' => [
|
|
['Prenotazioni online illimitate', true],
|
|
['Agenda e calendario appuntamenti', true],
|
|
['Gestione clienti del salone', true],
|
|
['Pagina salone pubblica + QR', true],
|
|
['1 operatore', true],
|
|
['Statistiche avanzate', false],
|
|
['Priorità nei risultati di ricerca', false],
|
|
],
|
|
'Pro' => [
|
|
['Prenotazioni online illimitate', true],
|
|
['Agenda e calendario appuntamenti', true],
|
|
['Gestione clienti del salone', true],
|
|
['Pagina salone pubblica + QR', true],
|
|
['Operatori illimitati', true],
|
|
['Statistiche avanzate', true],
|
|
['Priorità nei risultati di ricerca', true],
|
|
],
|
|
];
|
|
// Fallback per piani senza mappa dedicata
|
|
$defaultFeatures = [
|
|
['Prenotazioni online', true],
|
|
['Agenda appuntamenti', true],
|
|
['Gestione clienti', true],
|
|
];
|
|
|
|
// Qual è il piano "consigliato" (badge)? Il più caro tra gli attivi.
|
|
$recommendedId = !empty($plans) ? (int)$plans[count($plans) - 1]['id'] : 0;
|
|
|
|
function euro($v): string
|
|
{
|
|
return number_format((float)$v, 2, ',', '.');
|
|
}
|
|
?>
|
|
<!doctype html>
|
|
<html class="no-js" lang="it">
|
|
|
|
<head>
|
|
<?php include('tophead.php'); ?>
|
|
<?php include('cssinclude.php'); ?>
|
|
<style>
|
|
.pr-hero {
|
|
padding: 90px 0 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pr-hero h1 {
|
|
font-size: 44px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.pr-hero h1 .accent {
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.pr-hero p {
|
|
font-size: 18px;
|
|
color: #6b6480;
|
|
max-width: 620px;
|
|
margin: 16px auto 0;
|
|
}
|
|
|
|
/* Toggle mensile/annuale */
|
|
.pr-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
background: #fff;
|
|
border: 1px solid #f0e6ee;
|
|
border-radius: 999px;
|
|
padding: 6px;
|
|
margin: 32px auto 10px;
|
|
box-shadow: 0 8px 30px rgba(230, 0, 126, .06);
|
|
}
|
|
|
|
.pr-toggle button {
|
|
border: none;
|
|
background: transparent;
|
|
padding: 10px 22px;
|
|
border-radius: 999px;
|
|
font-weight: 700;
|
|
color: #6b6480;
|
|
cursor: pointer;
|
|
transition: all .15s ease;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.pr-toggle button.active {
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
color: #fff;
|
|
box-shadow: 0 6px 16px rgba(230, 0, 126, .28);
|
|
}
|
|
|
|
.pr-save-badge {
|
|
display: inline-block;
|
|
background: #fff0e8;
|
|
color: #ff6a3d;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* Griglia piani */
|
|
.pr-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 26px;
|
|
max-width: 900px;
|
|
margin: 40px auto 0;
|
|
}
|
|
|
|
.pr-card {
|
|
position: relative;
|
|
background: #fff;
|
|
border: 1.5px solid #f0e6ee;
|
|
border-radius: 22px;
|
|
padding: 34px 30px;
|
|
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
|
|
}
|
|
|
|
.pr-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 24px 60px rgba(43, 37, 64, .12);
|
|
}
|
|
|
|
.pr-card.recommended {
|
|
border-color: #e6007e;
|
|
box-shadow: 0 24px 60px rgba(230, 0, 126, .16);
|
|
}
|
|
|
|
.pr-badge {
|
|
position: absolute;
|
|
top: -14px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
padding: 6px 18px;
|
|
border-radius: 999px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 8px 20px rgba(230, 0, 126, .3);
|
|
}
|
|
|
|
.pr-name {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
}
|
|
|
|
.pr-desc {
|
|
color: #6b6480;
|
|
font-size: 14px;
|
|
margin: 6px 0 22px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.pr-price {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pr-price .cur {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #2b2540;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.pr-price .amt {
|
|
font-size: 46px;
|
|
font-weight: 900;
|
|
color: #2b2540;
|
|
line-height: 1;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.pr-price .per {
|
|
color: #9a93ac;
|
|
font-size: 15px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.pr-price-sub {
|
|
color: #ff6a3d;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
min-height: 20px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.pr-btn {
|
|
display: block;
|
|
text-align: center;
|
|
padding: 14px;
|
|
border-radius: 12px;
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
transition: all .15s ease;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.pr-btn-primary {
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
color: #fff;
|
|
box-shadow: 0 10px 24px rgba(230, 0, 126, .28);
|
|
}
|
|
|
|
.pr-btn-primary:hover {
|
|
color: #fff;
|
|
opacity: .93;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.pr-btn-ghost {
|
|
background: #fff5f9;
|
|
color: #e6007e;
|
|
border: 1.5px solid #ffd9e8;
|
|
}
|
|
|
|
.pr-btn-ghost:hover {
|
|
background: #e6007e;
|
|
color: #fff;
|
|
}
|
|
|
|
.pr-feat {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.pr-feat li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 8px 0;
|
|
font-size: 14.5px;
|
|
color: #4a4458;
|
|
}
|
|
|
|
.pr-feat li i {
|
|
flex: 0 0 auto;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.pr-feat li.off {
|
|
color: #b7b1c4;
|
|
}
|
|
|
|
.pr-check {
|
|
color: #1db954;
|
|
}
|
|
|
|
.pr-cross {
|
|
color: #d9d3e0;
|
|
}
|
|
|
|
/* Sezione benefici sotto */
|
|
.pr-why {
|
|
max-width: 960px;
|
|
margin: 90px auto 0;
|
|
}
|
|
|
|
.pr-why h2 {
|
|
text-align: center;
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.pr-why-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
gap: 28px;
|
|
}
|
|
|
|
.pr-why-item {
|
|
text-align: center;
|
|
padding: 10px;
|
|
}
|
|
|
|
.pr-why-ico {
|
|
width: 62px;
|
|
height: 62px;
|
|
border-radius: 18px;
|
|
margin: 0 auto 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #e6007e, #ff6a3d);
|
|
box-shadow: 0 12px 26px rgba(230, 0, 126, .24);
|
|
}
|
|
|
|
.pr-why-item h4 {
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
color: #2b2540;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pr-why-item p {
|
|
font-size: 14px;
|
|
color: #6b6480;
|
|
}
|
|
|
|
/* FAQ mini */
|
|
.pr-faq {
|
|
max-width: 760px;
|
|
margin: 80px auto 0;
|
|
}
|
|
|
|
.pr-faq h2 {
|
|
text-align: center;
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.pr-faq details {
|
|
background: #fff;
|
|
border: 1px solid #f0e6ee;
|
|
border-radius: 14px;
|
|
padding: 18px 22px;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.pr-faq summary {
|
|
font-weight: 700;
|
|
color: #2b2540;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.pr-faq p {
|
|
color: #6b6480;
|
|
margin: 12px 0 0;
|
|
font-size: 14.5px;
|
|
}
|
|
|
|
.pr-cta {
|
|
text-align: center;
|
|
margin: 80px auto 40px;
|
|
}
|
|
|
|
.pr-cta h2 {
|
|
font-size: 30px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
}
|
|
|
|
.pr-cta p {
|
|
color: #6b6480;
|
|
margin: 12px 0 24px;
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.pr-hero h1 {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<?php include('preloader.php'); ?>
|
|
<?php include('offcanvas.php'); ?>
|
|
<header class="tp-header-height">
|
|
<?php include('topbar.php'); ?>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container">
|
|
|
|
<!-- HERO -->
|
|
<div class="pr-hero">
|
|
<h1>Fai crescere il tuo salone con <span class="accent">Come Li Facciamo</span></h1>
|
|
<p>Prenotazioni online 24/7, agenda sempre in ordine e nuovi clienti che ti trovano. Scegli il piano su misura per la tua attività.</p>
|
|
|
|
<!-- Toggle -->
|
|
<div class="pr-toggle">
|
|
<button type="button" id="btnMonthly" class="active" onclick="setCycle('monthly')">Mensile</button>
|
|
<button type="button" id="btnYearly" onclick="setCycle('yearly')">Annuale <span class="pr-save-badge">1 mese gratis</span></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PIANI -->
|
|
<?php if (empty($plans)): ?>
|
|
<p class="text-center text-muted py-5">Nessun piano disponibile al momento.</p>
|
|
<?php else: ?>
|
|
<div class="pr-grid">
|
|
<?php foreach ($plans as $p):
|
|
$isReco = ((int)$p['id'] === $recommendedId);
|
|
$monthly = (float)$p['price'];
|
|
$yearly = $monthly * 11; // 1 mese gratis
|
|
$yearlyPerMonth = $yearly / 12;
|
|
$feats = $featuresByPlan[$p['name']] ?? $defaultFeatures;
|
|
?>
|
|
<div class="pr-card <?= $isReco ? 'recommended' : '' ?>">
|
|
<?php if ($isReco): ?><span class="pr-badge">★ Più scelto</span><?php endif; ?>
|
|
|
|
<div class="pr-name"><?= htmlspecialchars($p['name']) ?></div>
|
|
<div class="pr-desc"><?= htmlspecialchars($p['description'] ?? '') ?></div>
|
|
|
|
<!-- Prezzo mensile -->
|
|
<div class="js-price-monthly">
|
|
<div class="pr-price">
|
|
<span class="cur">€</span>
|
|
<span class="amt"><?= euro($monthly) ?></span>
|
|
<span class="per">/mese</span>
|
|
</div>
|
|
<div class="pr-price-sub"> </div>
|
|
</div>
|
|
|
|
<!-- Prezzo annuale (nascosto di default) -->
|
|
<div class="js-price-yearly" style="display:none;">
|
|
<div class="pr-price">
|
|
<span class="cur">€</span>
|
|
<span class="amt"><?= euro($yearlyPerMonth) ?></span>
|
|
<span class="per">/mese</span>
|
|
</div>
|
|
<div class="pr-price-sub">Fatturati €<?= euro($yearly) ?>/anno · risparmi €<?= euro($monthly) ?></div>
|
|
</div>
|
|
|
|
<a href="checkout.php?plan=<?= (int)$p['id'] ?>&cycle=monthly"
|
|
class="js-plan-btn pr-btn <?= $isReco ? 'pr-btn-primary' : 'pr-btn-ghost' ?>">Inizia ora</a>
|
|
|
|
<ul class="pr-feat">
|
|
<?php foreach ($feats as $f): ?>
|
|
<li class="<?= $f[1] ? '' : 'off' ?>">
|
|
<?php if ($f[1]): ?>
|
|
<i class="fa-solid fa-circle-check pr-check"></i>
|
|
<?php else: ?>
|
|
<i class="fa-solid fa-circle-xmark pr-cross"></i>
|
|
<?php endif; ?>
|
|
<span><?= htmlspecialchars($f[0]) ?></span>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- PERCHÉ SCEGLIERCI -->
|
|
<div class="pr-why">
|
|
<h2>Perché i saloni scelgono Come Li Facciamo</h2>
|
|
<div class="pr-why-grid">
|
|
<div class="pr-why-item">
|
|
<div class="pr-why-ico"><i class="fa-solid fa-calendar-check"></i></div>
|
|
<h4>Prenotazioni 24/7</h4>
|
|
<p>I clienti prenotano quando vogliono, anche a salone chiuso. Meno telefonate, più appuntamenti.</p>
|
|
</div>
|
|
<div class="pr-why-item">
|
|
<div class="pr-why-ico"><i class="fa-solid fa-user-group"></i></div>
|
|
<h4>Nuovi clienti</h4>
|
|
<p>Comparì nella ricerca dei clienti della tua zona e riempi gli spazi liberi in agenda.</p>
|
|
</div>
|
|
<div class="pr-why-item">
|
|
<div class="pr-why-ico"><i class="fa-solid fa-clock-rotate-left"></i></div>
|
|
<h4>Meno assenze</h4>
|
|
<p>Promemoria automatici e storico clienti: riduci i "buchi" e i mancati appuntamenti.</p>
|
|
</div>
|
|
<div class="pr-why-item">
|
|
<div class="pr-why-ico"><i class="fa-solid fa-bolt"></i></div>
|
|
<h4>Pronto subito</h4>
|
|
<p>Attivi il salone in pochi minuti. Nessuna installazione, nessun hardware.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ -->
|
|
<div class="pr-faq">
|
|
<h2>Domande frequenti</h2>
|
|
<details>
|
|
<summary>Posso cambiare piano in seguito?</summary>
|
|
<p>Sì, puoi passare a un piano superiore o inferiore quando vuoi dalla tua area titolare.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Come funziona il pagamento?</summary>
|
|
<p>Il pagamento è online e sicuro. Puoi scegliere la fatturazione mensile o annuale (con un mese in omaggio).</p>
|
|
</details>
|
|
<details>
|
|
<summary>Cosa succede se non rinnovo?</summary>
|
|
<p>Alla scadenza il salone smette di essere visibile ai clienti, ma i tuoi dati restano al sicuro: ti basta rinnovare per riattivarlo.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Serve un contratto a lungo termine?</summary>
|
|
<p>No. Nessun vincolo: sei libero di disdire quando vuoi.</p>
|
|
</details>
|
|
</div>
|
|
|
|
<!-- CTA finale -->
|
|
<div class="pr-cta">
|
|
<h2>Pronto a far risplendere il tuo salone?</h2>
|
|
<p>Unisciti ai saloni che gestiscono le prenotazioni senza stress.</p>
|
|
<a href="javascript:;" onclick="document.querySelector('.pr-grid').scrollIntoView({behavior:'smooth'});" class="pr-btn pr-btn-primary" style="display:inline-block; padding:15px 40px;">Scegli il tuo piano</a>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<?php include('footer.php'); ?>
|
|
</footer>
|
|
|
|
<?php include('jsinclude.php'); ?>
|
|
|
|
<script>
|
|
function setCycle(cycle) {
|
|
var monthly = cycle === 'monthly';
|
|
document.getElementById('btnMonthly').classList.toggle('active', monthly);
|
|
document.getElementById('btnYearly').classList.toggle('active', !monthly);
|
|
document.querySelectorAll('.js-price-monthly').forEach(function(el) {
|
|
el.style.display = monthly ? 'block' : 'none';
|
|
});
|
|
document.querySelectorAll('.js-price-yearly').forEach(function(el) {
|
|
el.style.display = monthly ? 'none' : 'block';
|
|
});
|
|
// Aggiorna il ciclo nei link "Inizia ora" così il checkout riceve la scelta giusta
|
|
document.querySelectorAll('.js-plan-btn').forEach(function(a) {
|
|
a.href = a.href.replace(/cycle=(monthly|yearly)/, 'cycle=' + cycle);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|