Aggiunti script deploy e pagina coming soon

This commit is contained in:
2026-04-04 18:29:37 +02:00
parent 0ca0306a34
commit 8fb5ff41c3
3 changed files with 445 additions and 0 deletions

309
coming-soon/index.html Normal file
View File

@@ -0,0 +1,309 @@
<!doctype html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clinica Veterinaria Formiginese | Coming Soon</title>
<meta
name="description"
content="Il nuovo sito della Clinica Veterinaria Formiginese sarà presto online."
/>
<style>
:root {
--ink: #15384f;
--ink-soft: #315f78;
--aqua: #54c8bf;
--sand: #f4ede2;
--paper: #fffdf9;
--mist: rgba(255, 255, 255, 0.72);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Segoe UI", Arial, sans-serif;
color: var(--ink);
background:
radial-gradient(circle at top left, rgba(84, 200, 191, 0.22), transparent 38%),
radial-gradient(circle at bottom right, rgba(21, 56, 79, 0.18), transparent 32%),
linear-gradient(135deg, #f8f4ec 0%, #fefcf9 48%, #eef7f7 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.shell {
width: min(1120px, 100%);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 28px;
align-items: center;
}
.panel {
background: var(--mist);
backdrop-filter: blur(16px);
border: 1px solid rgba(21, 56, 79, 0.08);
border-radius: 30px;
box-shadow: 0 24px 70px rgba(21, 56, 79, 0.12);
}
.copy {
padding: 48px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-radius: 999px;
background: rgba(84, 200, 191, 0.16);
color: var(--ink);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--aqua);
box-shadow: 0 0 0 5px rgba(84, 200, 191, 0.16);
}
h1 {
margin: 28px 0 16px;
font-size: clamp(2.6rem, 5vw, 4.8rem);
line-height: 0.95;
letter-spacing: -0.04em;
}
h1 span {
display: block;
color: var(--ink-soft);
font-style: italic;
font-weight: 500;
}
p {
margin: 0;
max-width: 46ch;
font-size: 18px;
line-height: 1.75;
color: rgba(21, 56, 79, 0.82);
}
.chips {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.chip {
padding: 12px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(21, 56, 79, 0.1);
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
}
.note {
margin-top: 34px;
padding: 18px 20px;
border-radius: 20px;
background: rgba(21, 56, 79, 0.06);
color: var(--ink-soft);
font-size: 14px;
}
.visual {
padding: 22px;
}
.artboard {
overflow: hidden;
border-radius: 26px;
min-height: 560px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)),
linear-gradient(160deg, #dff5f1 0%, #f7f0e7 48%, #dcecf8 100%);
position: relative;
}
.artboard::before,
.artboard::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(4px);
}
.artboard::before {
width: 210px;
height: 210px;
background: rgba(84, 200, 191, 0.2);
top: -60px;
right: -40px;
}
.artboard::after {
width: 260px;
height: 260px;
background: rgba(21, 56, 79, 0.12);
bottom: -80px;
left: -70px;
}
.stamp {
position: absolute;
top: 22px;
left: 22px;
z-index: 2;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(21, 56, 79, 0.08);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
svg {
display: block;
width: 100%;
height: 100%;
}
@media (max-width: 900px) {
.shell {
grid-template-columns: 1fr;
}
.copy {
padding: 34px 26px;
}
.visual {
padding: 18px;
}
.artboard {
min-height: 420px;
}
p {
font-size: 16px;
}
}
</style>
</head>
<body>
<main class="shell">
<section class="panel copy">
<div class="eyebrow">Nuovo sito in preparazione</div>
<h1>
Clinica Veterinaria
<span>Formiginese</span>
</h1>
<p>
Stiamo preparando una nuova esperienza digitale pensata per presentare al meglio la
clinica, il team medico e i servizi dedicati alla salute dei vostri animali.
</p>
<div class="chips">
<div class="chip">Servizi specialistici</div>
<div class="chip">Team clinico</div>
<div class="chip">Prenotazioni online</div>
<div class="chip">Area clienti dedicata</div>
</div>
<div class="note">
Il sito completo sarà pubblicato a breve. Nel frattempo la clinica continua a essere
disponibile ai consueti recapiti telefonici.
</div>
</section>
<section class="panel visual">
<div class="artboard">
<div class="stamp">Coming Soon</div>
<svg viewBox="0 0 680 760" aria-hidden="true">
<defs>
<linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#f4ede2" />
</linearGradient>
<linearGradient id="teal" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#68d7cf" />
<stop offset="100%" stop-color="#2d9f98" />
</linearGradient>
<linearGradient id="blue" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#264f68" />
<stop offset="100%" stop-color="#16384f" />
</linearGradient>
</defs>
<g opacity="0.9">
<circle cx="540" cy="122" r="68" fill="#ffffff" />
<circle cx="578" cy="146" r="12" fill="#54c8bf" opacity="0.5" />
<circle cx="500" cy="106" r="14" fill="#15384f" opacity="0.08" />
</g>
<g transform="translate(62 118)">
<rect width="556" height="506" rx="38" fill="url(#card)" />
<rect x="24" y="22" width="508" height="462" rx="28" fill="#ffffff" opacity="0.78" />
<rect x="56" y="58" width="214" height="264" rx="26" fill="url(#teal)" opacity="0.18" />
<rect x="304" y="58" width="196" height="108" rx="24" fill="#edf5f7" />
<rect x="304" y="184" width="196" height="138" rx="24" fill="#f8f3ec" />
<rect x="56" y="348" width="444" height="84" rx="22" fill="#15384f" opacity="0.06" />
<circle cx="164" cy="172" r="82" fill="url(#blue)" />
<ellipse cx="162" cy="207" rx="104" ry="88" fill="#1c445d" />
<ellipse cx="392" cy="108" rx="46" ry="30" fill="#dce9ee" />
<ellipse cx="392" cy="234" rx="70" ry="42" fill="#efe4d4" />
<path d="M155 104c-18-28-45-43-76-43 8 20 21 42 39 62" fill="#0f344b" />
<path d="M174 104c18-28 45-43 76-43-8 20-21 42-39 62" fill="#0f344b" />
<ellipse cx="139" cy="192" rx="18" ry="14" fill="#ffffff" />
<ellipse cx="185" cy="192" rx="18" ry="14" fill="#ffffff" />
<circle cx="139" cy="192" r="7" fill="#15384f" />
<circle cx="185" cy="192" r="7" fill="#15384f" />
<path d="M151 222c12 14 26 14 38 0" stroke="#54c8bf" stroke-width="8" stroke-linecap="round" fill="none" />
<path d="M162 212l-12 12h24z" fill="#54c8bf" />
<g transform="translate(344 74)">
<rect width="146" height="18" rx="9" fill="#15384f" opacity="0.12" />
<rect y="34" width="108" height="14" rx="7" fill="#54c8bf" opacity="0.32" />
<rect y="60" width="122" height="14" rx="7" fill="#15384f" opacity="0.08" />
</g>
<g transform="translate(332 212)">
<rect width="144" height="16" rx="8" fill="#15384f" opacity="0.12" />
<rect y="34" width="122" height="14" rx="7" fill="#54c8bf" opacity="0.26" />
<rect y="60" width="138" height="14" rx="7" fill="#15384f" opacity="0.08" />
<rect y="86" width="104" height="14" rx="7" fill="#15384f" opacity="0.08" />
</g>
<g transform="translate(82 370)">
<rect width="84" height="40" rx="20" fill="#54c8bf" />
<rect x="100" width="112" height="40" rx="20" fill="#ffffff" stroke="#15384f" opacity="0.28" />
<rect x="228" width="160" height="40" rx="20" fill="#15384f" opacity="0.08" />
</g>
</g>
</svg>
</div>
</section>
</main>
</body>
</html>