540 lines
16 KiB
PHP
540 lines
16 KiB
PHP
<?php
|
|
// business.php — Landing "Sei un salone?" — spiega il servizio, i vantaggi, i costi bassi
|
|
// e spinge a pricing.php. Pagina di marketing, contenuti statici.
|
|
|
|
ini_set('display_errors', 1);
|
|
ini_set('display_startup_errors', 1);
|
|
error_reporting(E_ALL);
|
|
|
|
if (session_status() === PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
?>
|
|
<!doctype html>
|
|
<html class="no-js" lang="it">
|
|
|
|
<head>
|
|
<?php include('tophead.php'); ?>
|
|
<?php include('cssinclude.php'); ?>
|
|
<style>
|
|
.bz-accent {
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.bz-btn {
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 15px 38px;
|
|
border-radius: 12px;
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
text-decoration: none;
|
|
transition: all .15s ease;
|
|
}
|
|
|
|
.bz-btn-primary {
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
color: #fff;
|
|
box-shadow: 0 12px 28px rgba(230, 0, 126, .3);
|
|
}
|
|
|
|
.bz-btn-primary:hover {
|
|
color: #fff;
|
|
transform: translateY(-2px);
|
|
opacity: .95;
|
|
}
|
|
|
|
.bz-btn-ghost {
|
|
background: #fff;
|
|
color: #e6007e;
|
|
border: 1.5px solid #ffd0e4;
|
|
}
|
|
|
|
.bz-btn-ghost:hover {
|
|
background: #e6007e;
|
|
color: #fff;
|
|
}
|
|
|
|
/* HERO */
|
|
.bz-hero {
|
|
position: relative;
|
|
padding: 100px 0 90px;
|
|
overflow: hidden;
|
|
background: linear-gradient(160deg, #fff5f9 0%, #fff 55%, #fff7f3 100%);
|
|
}
|
|
|
|
.bz-hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.1fr .9fr;
|
|
gap: 50px;
|
|
align-items: center;
|
|
max-width: 1150px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width:900px) {
|
|
.bz-hero-grid {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bz-hero h1 {
|
|
font-size: 52px;
|
|
line-height: 1.08;
|
|
font-weight: 900;
|
|
color: #2b2540;
|
|
letter-spacing: -.03em;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.bz-hero p {
|
|
font-size: 19px;
|
|
color: #6b6480;
|
|
line-height: 1.6;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.bz-hero-cta {
|
|
display: flex;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width:900px) {
|
|
.bz-hero-cta {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.bz-hero-badge {
|
|
display: inline-block;
|
|
background: #fff0e8;
|
|
color: #ff6a3d;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
padding: 7px 16px;
|
|
border-radius: 999px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.bz-hero-visual {
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
box-shadow: 0 30px 70px rgba(43, 37, 64, .18);
|
|
aspect-ratio: 4/3;
|
|
background: linear-gradient(135deg, #e6007e, #ff6a3d);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bz-hero-visual i {
|
|
font-size: 120px;
|
|
color: rgba(255, 255, 255, .9);
|
|
}
|
|
|
|
@media (max-width:575px) {
|
|
.bz-hero h1 {
|
|
font-size: 36px;
|
|
}
|
|
}
|
|
|
|
/* STRISCIA numeri */
|
|
.bz-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 56px 20px;
|
|
}
|
|
|
|
@media (max-width:700px) {
|
|
.bz-stats {
|
|
grid-template-columns: 1fr;
|
|
gap: 24px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.bz-stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.bz-stat .num {
|
|
font-size: 44px;
|
|
font-weight: 900;
|
|
color: #e6007e;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
.bz-stat .lbl {
|
|
color: #6b6480;
|
|
font-size: 15px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* SEZIONE come funziona */
|
|
.bz-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.bz-section h2 {
|
|
text-align: center;
|
|
font-size: 34px;
|
|
font-weight: 900;
|
|
color: #2b2540;
|
|
letter-spacing: -.02em;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.bz-section .bz-lead {
|
|
text-align: center;
|
|
color: #6b6480;
|
|
font-size: 17px;
|
|
max-width: 600px;
|
|
margin: 0 auto 50px;
|
|
}
|
|
|
|
.bz-steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width:800px) {
|
|
.bz-steps {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.bz-step {
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.bz-step-num {
|
|
width: 56px;
|
|
height: 56px;
|
|
margin: 0 auto 18px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #e6007e, #ff6a3d);
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 12px 26px rgba(230, 0, 126, .24);
|
|
}
|
|
|
|
.bz-step h4 {
|
|
font-size: 19px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.bz-step p {
|
|
color: #6b6480;
|
|
font-size: 15px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* VANTAGGI a due colonne */
|
|
.bz-benefits {
|
|
background: #fff5f9;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.bz-ben-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 26px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
@media (max-width:800px) {
|
|
.bz-ben-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.bz-ben {
|
|
display: flex;
|
|
gap: 18px;
|
|
background: #fff;
|
|
border: 1px solid #ffe0ee;
|
|
border-radius: 16px;
|
|
padding: 26px;
|
|
}
|
|
|
|
.bz-ben-ico {
|
|
flex: 0 0 auto;
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 14px;
|
|
background: linear-gradient(135deg, #e6007e, #ff6a3d);
|
|
color: #fff;
|
|
font-size: 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bz-ben h4 {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: #2b2540;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.bz-ben p {
|
|
color: #6b6480;
|
|
font-size: 14.5px;
|
|
line-height: 1.55;
|
|
margin: 0;
|
|
}
|
|
|
|
/* COSTI */
|
|
.bz-cost {
|
|
padding: 80px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.bz-cost-box {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
background: linear-gradient(160deg, #fff, #fff5f9);
|
|
border: 1.5px solid #ffd9e8;
|
|
border-radius: 24px;
|
|
padding: 50px 40px;
|
|
}
|
|
|
|
.bz-cost h2 {
|
|
font-size: 32px;
|
|
font-weight: 900;
|
|
color: #2b2540;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.bz-cost p {
|
|
color: #6b6480;
|
|
font-size: 17px;
|
|
line-height: 1.6;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.bz-cost-points {
|
|
display: flex;
|
|
gap: 24px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 34px;
|
|
}
|
|
|
|
.bz-cost-point {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #2b2540;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.bz-cost-point i {
|
|
color: #1db954;
|
|
}
|
|
|
|
/* CTA finale */
|
|
.bz-final {
|
|
background: linear-gradient(120deg, #e6007e, #ff6a3d);
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.bz-final h2 {
|
|
font-size: 38px;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
letter-spacing: -.02em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.bz-final p {
|
|
color: rgba(255, 255, 255, .92);
|
|
font-size: 18px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.bz-final .bz-btn-white {
|
|
background: #fff;
|
|
color: #e6007e;
|
|
}
|
|
|
|
.bz-final .bz-btn-white:hover {
|
|
background: #2b2540;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<?php include('preloader.php'); ?>
|
|
<?php include('offcanvas.php'); ?>
|
|
<header class="tp-header-height"><?php include('topbar.php'); ?></header>
|
|
|
|
<main>
|
|
|
|
<!-- HERO -->
|
|
<section class="bz-hero">
|
|
<div class="container">
|
|
<div class="bz-hero-grid">
|
|
<div>
|
|
<span class="bz-hero-badge">★ La piattaforma per il tuo salone</span>
|
|
<h1>Il tuo salone, sempre <span class="bz-accent">prenotabile online</span></h1>
|
|
<p>Basta telefonate e agende cartacee. Con Come Li Facciamo i tuoi clienti prenotano da soli, a qualsiasi ora, e tu riempi la giornata senza pensieri.</p>
|
|
<div class="bz-hero-cta">
|
|
<a href="pricing.php" class="bz-btn bz-btn-primary">Scopri i piani</a>
|
|
<a href="#come-funziona" class="bz-btn bz-btn-ghost">Come funziona</a>
|
|
</div>
|
|
</div>
|
|
<div class="bz-hero-visual">
|
|
<i class="fa-solid fa-scissors"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- STATS -->
|
|
<div class="container">
|
|
<div class="bz-stats">
|
|
<div class="bz-stat">
|
|
<div class="num">24/7</div>
|
|
<div class="lbl">Prenotazioni sempre aperte, anche a salone chiuso</div>
|
|
</div>
|
|
<div class="bz-stat">
|
|
<div class="num">0€</div>
|
|
<div class="lbl">Nessun costo di installazione o hardware</div>
|
|
</div>
|
|
<div class="bz-stat">
|
|
<div class="num">5 min</div>
|
|
<div class="lbl">Per attivare il salone e iniziare</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COME FUNZIONA -->
|
|
<section class="bz-section" id="come-funziona">
|
|
<div class="container">
|
|
<h2>Come funziona</h2>
|
|
<p class="bz-lead">Tre passi e sei operativo. Nessuna competenza tecnica richiesta.</p>
|
|
<div class="bz-steps">
|
|
<div class="bz-step">
|
|
<div class="bz-step-num">1</div>
|
|
<h4>Crea il tuo salone</h4>
|
|
<p>Ti registri, inserisci i servizi, gli orari e il tuo staff. In pochi minuti la tua pagina è online.</p>
|
|
</div>
|
|
<div class="bz-step">
|
|
<div class="bz-step-num">2</div>
|
|
<h4>Ricevi prenotazioni</h4>
|
|
<p>I clienti ti trovano nella ricerca, scelgono servizio, operatore e orario. Tu li vedi subito in agenda.</p>
|
|
</div>
|
|
<div class="bz-step">
|
|
<div class="bz-step-num">3</div>
|
|
<h4>Gestisci tutto</h4>
|
|
<p>Confermi, sposti o annulli con un tocco. Agenda per operatore, storico clienti e tutto sotto controllo.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VANTAGGI -->
|
|
<section class="bz-benefits">
|
|
<div class="container">
|
|
<h2 style="text-align:center; font-size:34px; font-weight:900; color:#2b2540; margin-bottom:12px;">Perché sceglierci</h2>
|
|
<p style="text-align:center; color:#6b6480; font-size:17px; max-width:600px; margin:0 auto 50px;">Tutto quello che serve per gestire e far crescere il salone, in un unico posto.</p>
|
|
<div class="bz-ben-grid">
|
|
<div class="bz-ben">
|
|
<div class="bz-ben-ico"><i class="fa-solid fa-calendar-check"></i></div>
|
|
<div>
|
|
<h4>Agenda intelligente</h4>
|
|
<p>Vista per operatore, slot automatici in base a orari e durata dei servizi. Niente più doppie prenotazioni.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bz-ben">
|
|
<div class="bz-ben-ico"><i class="fa-solid fa-magnifying-glass"></i></div>
|
|
<div>
|
|
<h4>Nuovi clienti</h4>
|
|
<p>Comparì nella ricerca dei clienti della tua zona e riempi gli spazi vuoti in agenda.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bz-ben">
|
|
<div class="bz-ben-ico"><i class="fa-solid fa-mobile-screen"></i></div>
|
|
<div>
|
|
<h4>Prenotazioni da mobile</h4>
|
|
<p>I tuoi clienti prenotano dallo smartphone in pochi tap, senza chiamare né aspettare.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bz-ben">
|
|
<div class="bz-ben-ico"><i class="fa-solid fa-qrcode"></i></div>
|
|
<div>
|
|
<h4>Pagina salone + QR</h4>
|
|
<p>Una pagina professionale con i tuoi servizi e un QR code da mettere in vetrina o sui social.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bz-ben">
|
|
<div class="bz-ben-ico"><i class="fa-solid fa-users-gear"></i></div>
|
|
<div>
|
|
<h4>Gestione staff</h4>
|
|
<p>Ogni operatore ha la sua agenda e i suoi orari. Il cliente sceglie da chi farsi servire.</p>
|
|
</div>
|
|
</div>
|
|
<div class="bz-ben">
|
|
<div class="bz-ben-ico"><i class="fa-solid fa-heart"></i></div>
|
|
<div>
|
|
<h4>Clienti fidelizzati</h4>
|
|
<p>Storico appuntamenti e preferiti: i clienti ti ritrovano e tornano con un tap.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COSTI -->
|
|
<section class="bz-cost">
|
|
<div class="container">
|
|
<div class="bz-cost-box">
|
|
<h2>Prezzi trasparenti, senza sorprese</h2>
|
|
<p>Un canone chiaro, tutto incluso. Nessun costo nascosto, nessuna commissione sulle prenotazioni, nessun vincolo a lungo termine.</p>
|
|
<div class="bz-cost-points">
|
|
<div class="bz-cost-point"><i class="fa-solid fa-circle-check"></i> Nessuna commissione</div>
|
|
<div class="bz-cost-point"><i class="fa-solid fa-circle-check"></i> Nessun vincolo</div>
|
|
<div class="bz-cost-point"><i class="fa-solid fa-circle-check"></i> Disdici quando vuoi</div>
|
|
</div>
|
|
<a href="pricing.php" class="bz-btn bz-btn-primary">Vedi i piani e i prezzi</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA FINALE -->
|
|
<section class="bz-final">
|
|
<h2>Pronto a far risplendere il tuo salone?</h2>
|
|
<p>Attivalo oggi e inizia a ricevere prenotazioni da subito.</p>
|
|
<a href="pricing.php" class="bz-btn bz-btn-white">Inizia ora</a>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer><?php include('footer.php'); ?></footer>
|
|
<?php include('jsinclude.php'); ?>
|
|
</body>
|
|
|
|
</html>
|