Il tuo carrello è vuoto
È possibile controllare tutti i prodotti disponibili e acquistare nel negozio
Torna al negozio<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Vento Pelletterie – Pelletteria artigianale premium</title>
<meta name="description" content="Pelletteria artigianale: borse, cinture e accessori in vera pelle. Design essenziale, qualità che dura." />
<style>
:root{
--bg:#0b0c0f;
--surface:rgba(255,255,255,.06);
--surface2:rgba(255,255,255,.09);
--stroke:rgba(255,255,255,.12);
--text:#f5f6f7;
--muted:rgba(245,246,247,.72);
--accent:#d9b47a; /* oro pelle */
--accent2:#89a7ff; /* micro-accent freddo */
--radius:18px;
--shadow: 0 18px 60px rgba(0,0,0,.45);
--max:1180px;
--gap:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
background:
radial-gradient(1200px 600px at 20% -10%, rgba(217,180,122,.18), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(137,167,255,.15), transparent 55%),
radial-gradient(900px 600px at 40% 110%, rgba(255,255,255,.08), transparent 55%),
var(--bg);
color:var(--text);
letter-spacing:.2px;
overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
/* Header */
header{
position:sticky; top:0; z-index:20;
background: linear-gradient(to bottom, rgba(11,12,15,.88), rgba(11,12,15,.55));
backdrop-filter: blur(14px);
border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:14px 0;
gap:14px;
}
.brand{
display:flex; align-items:center; gap:10px;
font-weight:700; letter-spacing:.6px;
}
.logo{
width:34px; height:34px; border-radius:12px;
background: linear-gradient(135deg, rgba(217,180,122,.95), rgba(255,255,255,.12));
box-shadow: 0 10px 30px rgba(217,180,122,.18);
border:1px solid rgba(255,255,255,.18);
}
.brand small{display:block; font-weight:500; color:var(--muted); letter-spacing:.2px}
nav ul{list-style:none; display:flex; gap:14px; padding:0; margin:0}
nav a{
padding:10px 12px; border-radius:12px;
color:rgba(245,246,247,.86);
border:1px solid transparent;
transition: .2s ease;
font-size:14px;
}
nav a:hover{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05)}
.actions{display:flex; align-items:center; gap:10px}
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:10px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.05);
color:var(--text);
font-weight:600;
font-size:14px;
cursor:pointer;
transition:.2s ease;
white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.08); transform:translateY(-1px)}
.btn.primary{
background: linear-gradient(135deg, rgba(217,180,122,.95), rgba(217,180,122,.25));
border-color: rgba(217,180,122,.55);
color:#111;
}
.btn.primary:hover{filter:saturate(1.08); transform:translateY(-1px)}
.iconBtn{
width:40px; height:40px; padding:0;
border-radius:14px;
}
/* Mobile menu */
.burger{display:none}
@media (max-width: 920px){
nav ul{display:none}
.burger{display:inline-flex}
}
/* Hero */
.hero{
position:relative;
padding:48px 0 22px;
}
.heroGrid{
display:grid;
grid-template-columns: 1.15fr .85fr;
gap:var(--gap);
align-items:stretch;
}
@media (max-width: 980px){
.heroGrid{grid-template-columns: 1fr; }
}
.card{
border:1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.heroLeft{
padding:26px;
position:relative;
overflow:hidden;
min-height: 420px;
}
.heroLeft:before{
content:"";
position:absolute; inset:-80px -140px auto auto;
width:420px; height:420px; border-radius:50%;
background: radial-gradient(circle at 30% 30%, rgba(217,180,122,.36), transparent 60%);
filter: blur(10px);
}
.heroKicker{
display:flex; gap:10px; flex-wrap:wrap; align-items:center;
color:rgba(245,246,247,.82);
font-size:13px;
}
.pill{
display:inline-flex; align-items:center; gap:8px;
padding:8px 10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.04);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
h1{
margin:14px 0 10px;
font-size: clamp(32px, 4.1vw, 54px);
line-height:1.02;
letter-spacing:-.6px;
}
.lead{
margin:0 0 16px;
max-width: 60ch;
color:var(--muted);
font-size:16px;
line-height:1.55;
}
.heroCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.metaRow{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:10px;
margin-top:18px;
}
@media (max-width: 520px){ .metaRow{grid-template-columns: 1fr; } }
.meta{
padding:14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
}
.meta b{display:block; font-size:14px}
.meta span{display:block; color:var(--muted); font-size:13px; margin-top:6px}
.heroRight{
padding:14px;
display:grid;
gap:10px;
}
.visual{
border-radius: 16px;
border:1px solid rgba(255,255,255,.10);
overflow:hidden;
min-height: 260px;
background:
linear-gradient(135deg, rgba(217,180,122,.22), rgba(255,255,255,.05)),
url("https://images.unsplash.com/photo-1520975682071-a9b3bdfd0c33?auto=format&fit=crop&w=1400&q=70") center/cover no-repeat;
position:relative;
}
.visual:after{
content:"";
position:absolute; inset:0;
background: linear-gradient(to top, rgba(11,12,15,.9), transparent 55%);
}
.visualLabel{
position:absolute; left:14px; right:14px; bottom:14px;
display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
z-index:1;
}
.visualLabel b{font-size:14px}
.visualLabel small{display:block; color:rgba(245,246,247,.7); margin-top:3px}
.badge{
padding:8px 10px; border-radius:999px;
border:1px solid rgba(217,180,122,.35);
background: rgba(217,180,122,.18);
font-size:12px;
color:rgba(245,246,247,.92);
white-space:nowrap;
}
.miniGrid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
@media (max-width: 980px){ .miniGrid{grid-template-columns: 1fr 1fr} }
@media (max-width: 520px){ .miniGrid{grid-template-columns: 1fr} }
.mini{
padding:14px;
border-radius:16px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
}
.mini .t{font-size:13px; color:rgba(245,246,247,.88); font-weight:650}
.mini .s{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.45}
/* Sections */
section{padding:28px 0}
.sectionHead{
display:flex; align-items:flex-end; justify-content:space-between;
gap:12px; margin-bottom:14px;
}
.sectionHead h2{
margin:0;
font-size:24px;
letter-spacing:-.3px;
}
.sectionHead p{margin:0; color:var(--muted); max-width:70ch; font-size:14px; line-height:1.5}
.grid3{
display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--gap);
}
.grid4{
display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--gap);
}
@media (max-width: 980px){ .grid4{grid-template-columns: repeat(2, 1fr);} .grid3{grid-template-columns: 1fr;} }
@media (max-width: 520px){ .grid4{grid-template-columns: 1fr;} }
/* Category cards */
.cat{
position:relative;
overflow:hidden;
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
min-height: 210px;
background: rgba(255,255,255,.04);
transition:.22s ease;
}
.cat:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.16)}
.cat .bg{
position:absolute; inset:0;
background-size:cover; background-position:center;
filter: saturate(1.05) contrast(1.02);
transform: scale(1.02);
}
.cat .shade{
position:absolute; inset:0;
background: linear-gradient(to top, rgba(11,12,15,.92), rgba(11,12,15,.25));
}
.cat .content{
position:relative; z-index:1;
padding:16px;
display:flex; flex-direction:column; justify-content:flex-end;
height:100%;
}
.cat b{font-size:15px}
.cat span{font-size:13px; color:rgba(245,246,247,.72); margin-top:6px}
/* Product cards */
.product{
overflow:hidden;
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
transition:.22s ease;
}
.product:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.16)}
.ph{
aspect-ratio: 4/3;
background: linear-gradient(135deg, rgba(217,180,122,.18), rgba(255,255,255,.06));
border-bottom:1px solid rgba(255,255,255,.08);
position:relative;
overflow:hidden;
}
.ph img{
width:100%; height:100%; object-fit:cover;
filter: saturate(1.05) contrast(1.02);
transform: scale(1.02);
}
.tag{
position:absolute; top:12px; left:12px;
padding:7px 9px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background: rgba(11,12,15,.42);
backdrop-filter: blur(10px);
font-size:12px;
color:rgba(245,246,247,.9);
}
.pbody{padding:14px}
.pname{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.pname b{font-size:14px; line-height:1.25}
.price{font-weight:800; color:rgba(245,246,247,.95)}
.psub{margin-top:6px; font-size:13px; color:var(--muted); line-height:1.45}
.prow{display:flex; gap:10px; margin-top:12px}
.btn.small{padding:9px 12px; border-radius:12px; font-size:13px; width:100%}
/* Feature row */
.featureRow{
display:grid;
grid-template-columns: 1.05fr .95fr;
gap:var(--gap);
align-items:stretch;
}
@media (max-width: 980px){ .featureRow{grid-template-columns: 1fr;} }
.feature{
padding:18px;
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
}
.feature h3{margin:0 0 10px; font-size:18px; letter-spacing:-.2px}
.feature p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}
.bullets{display:grid; gap:10px; margin-top:12px}
.bullet{
display:flex; gap:10px; align-items:flex-start;
padding:12px; border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
}
.i{
width:28px;height:28px;border-radius:10px;
background: rgba(217,180,122,.18);
border:1px solid rgba(217,180,122,.35);
display:flex; align-items:center; justify-content:center;
flex:0 0 auto;
font-weight:900; color:rgba(245,246,247,.92);
}
.bullet b{display:block; font-size:13px}
.bullet span{display:block; font-size:12px; color:var(--muted); margin-top:4px; line-height:1.45}
/* Lookbook */
.masonry{
display:grid;
grid-template-columns: 1.2fr .8fr;
gap:var(--gap);
}
@media (max-width: 980px){ .masonry{grid-template-columns:1fr;} }
.mcol{display:grid; gap:var(--gap)}
.shot{
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
overflow:hidden;
background: rgba(255,255,255,.04);
position:relative;
min-height: 260px;
}
.shot img{width:100%; height:100%; object-fit:cover}
.shot .cap{
position:absolute; left:14px; right:14px; bottom:14px;
padding:12px 12px;
border-radius:16px;
border:1px solid rgba(255,255,255,.14);
background: rgba(11,12,15,.45);
backdrop-filter: blur(12px);
display:flex; justify-content:space-between; gap:10px;
align-items:flex-end;
}
.shot .cap b{font-size:13px}
.shot .cap span{display:block; font-size:12px; color:rgba(245,246,247,.7); margin-top:3px}
/* Testimonials */
.quote{
padding:16px;
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
}
.quote p{margin:0; color:rgba(245,246,247,.88); line-height:1.6; font-size:14px}
.quote .who{margin-top:10px; color:var(--muted); font-size:13px}
/* FAQ */
details{
border-radius: var(--radius);
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
padding:14px 14px;
}
details + details{margin-top:10px}
summary{
cursor:pointer;
font-weight:700;
font-size:14px;
list-style:none;
}
summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.6}
/* CTA */
.cta{
padding:22px;
border-radius: calc(var(--radius) + 4px);
border:1px solid rgba(217,180,122,.22);
background: linear-gradient(135deg, rgba(217,180,122,.18), rgba(255,255,255,.04));
display:flex; align-items:center; justify-content:space-between; gap:14px;
flex-wrap:wrap;
}
.cta b{font-size:16px}
.cta span{display:block; color:var(--muted); margin-top:6px; font-size:13px; line-height:1.5}
.cta form{display:flex; gap:10px; flex-wrap:wrap}
input{
width:min(360px, 72vw);
padding:12px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
background: rgba(11,12,15,.35);
color:var(--text);
outline:none;
}
input::placeholder{color:rgba(245,246,247,.45)}
input:focus{border-color:rgba(217,180,122,.45)}
/* Footer */
footer{padding:26px 0 34px; border-top:1px solid rgba(255,255,255,.08); margin-top:10px}
.footerGrid{
display:grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap:var(--gap);
}
@media (max-width: 980px){ .footerGrid{grid-template-columns: 1fr 1fr} }
@media (max-width: 520px){ .footerGrid{grid-template-columns: 1fr} }
.fcol b{display:block; margin-bottom:10px}
.fcol a{display:block; color:var(--muted); padding:6px 0; font-size:13px}
.fcol a:hover{color:rgba(245,246,247,.9)}
.subtle{color:rgba(245,246,247,.55); font-size:12px; line-height:1.55}
/* Tiny utilities */
.divider{height:1px; background:rgba(255,255,255,.08); margin:18px 0}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="wrap">
<div class="nav">
<a class="brand" href="#top">
<span class="logo" aria-hidden="true"></span>
<span>
VENTO <span style="color:var(--accent)">PELLETTERIE</span>
<small>Vera pelle • Design essenziale • Fatto per durare</small>
</span>
</a>
<nav aria-label="Navigazione principale">
<ul>
<li><a href="#collezioni">Collezioni</a></li>
<li><a href="#best">Best seller</a></li>
<li><a href="#artigianalita">Artigianalità</a></li>
<li><a href="#lookbook">Lookbook</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contatti">Contatti</a></li>
</ul>
</nav>
<div class="actions">
<button class="btn iconBtn burger" id="burger" aria-label="Apri menu">☰</button>
<a class="btn" href="#best">Scopri</a>
<a class="btn primary" href="#contatti">Richiedi info</a>
</div>
</div>
<!-- Mobile dropdown -->
<div id="mobileMenu" class="card" style="display:none; padding:12px; margin:0 0 14px; border-radius:16px;">
<div style="display:grid; gap:8px;">
<a class="btn" href="#collezioni">Collezioni</a>
<a class="btn" href="#best">Best seller</a>
<a class="btn" href="#artigianalita">Artigianalità</a>
<a class="btn" href="#lookbook">Lookbook</a>
<a class="btn" href="#faq">FAQ</a>
<a class="btn primary" href="#contatti">Contatti</a>
</div>
</div>
</div>
</header>
<!-- Hero -->
<main id="top" class="hero">
<div class="wrap">
<div class="heroGrid">
<div class="card heroLeft">
<div class="heroKicker">
<span class="pill"><span class="dot"></span> Nuova stagione • Edizione limitata</span>
<span class="pill">Spedizione rapida • Assistenza dedicata</span>
</div>
<h1>Pelletteria premium, <br/>minimal e potente.</h1>
<p class="lead">
Borse, cinture e accessori in vera pelle: linee pulite, materiali selezionati e finiture
curate in ogni dettaglio. Un’eleganza che non passa.
</p>
<div class="heroCtas">
<a class="btn primary" href="#collezioni">Esplora collezioni</a>
<a class="btn" href="#artigianalita">Come lavoriamo</a>
<a class="btn" href="#contatti">Preventivo / rivenditori</a>
</div>
<div class="metaRow">
<div class="meta">
<b>Vera pelle selezionata</b>
<span>Concia e finiture premium, hand-feel morbido.</span>
</div>
<div class="meta">
<b>Design senza tempo</b>
<span>Stile essenziale: abbinabile, sempre attuale.</span>
</div>
<div class="meta">
<b>Qualità “da toccare”</b>
<span>Cuciture precise, bordi rifiniti, durata reale.</span>
</div>
</div>
</div>
<div class="heroRight">
<div class="visual">
<div class="visualLabel">
<div>
<b>Collezione Icon</b>
<small>Forme pulite • Pelle martellata • Hardware metallico</small>
</div>
<span class="badge">Nuovi arrivi</span>
</div>
</div>
<div class="miniGrid">
<div class="mini">
<div class="t">🧵 Artigianalità</div>
<div class="s">Finiture curate: cuciture, bordi e dettagli.</div>
</div>
<div class="mini">
<div class="t">🧴 Cura & manutenzione</div>
<div class="s">Consigli rapidi per mantenere la pelle perfetta.</div>
</div>
<div class="mini">
<div class="t">📦 Packaging premium</div>
<div class="s">Unboxing elegante, ideale anche come regalo.</div>
</div>
<div class="mini">
<div class="t">🤝 B2B / Rivenditori</div>
<div class="s">Catalogo dedicato e condizioni commerciali.</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
</div>
</main>
<!-- Collezioni -->
<section id="collezioni">
<div class="wrap">
<div class="sectionHead">
<div>
<h2>Collezioni</h2>
<p>3 ingressi chiari: scegli in base a ciò che cerchi. (Ottimo per conversione: poche scelte, ben guidate.)</p>
</div>
<a class="btn" href="#best">Vai ai prodotti →</a>
</div>
<div class="grid3">
<a class="cat" href="#">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1520975693411-6a53f1ccba51?auto=format&fit=crop&w=1400&q=70');"></div>
<div class="shade"></div>
<div class="content">
<b>Borse</b>
<span>Crossbody • Tote • Mini bag</span>
</div>
</a>
<a class="cat" href="#">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1514997130083-1b8b28c4c6a8?auto=format&fit=crop&w=1400&q=70');"></div>
<div class="shade"></div>
<div class="content">
<b>Cinture</b>
<span>Classiche • Minimal • Statement</span>
</div>
</a>
<a class="cat" href="#">
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=1400&q=70');"></div>
<div class="shade"></div>
<div class="content">
<b>Accessori</b>
<span>Portafogli • Porta carte • Piccola pelletteria</span>
</div>
</a>
</div>
</div>
</section>
<!-- Best seller -->
<section id="best">
<div class="wrap">
<div class="sectionHead">
<div>
<h2>Best seller</h2>
<p>Card prodotto “shop-ready”: immagine, micro-copy, prezzo e CTA immediata.</p>
</div>
<a class="btn primary" href="#">Apri shop</a>
</div>
<div class="grid4">
<article class="product">
<div class="ph">
<span class="tag">Icon</span>
<img alt="Borsa Icon" src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?auto=format&fit=crop&w=1400&q=70">
</div>
<div class="pbody">
<div class="pname"><b>Borsa “Icon”</b><span class="price">€189</span></div>
<div class="psub">Pelle martellata • Tracolla regolabile • Hardware satinato.</div>
<div class="prow">
<a class="btn small primary" href="#">Aggiungi</a>
<a class="btn small" href="#">Dettagli</a>
</div>
</div>
</article>
<article class="product">
<div class="ph">
<span class="tag">Essential</span>
<img alt="Cintura Essential" src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?auto=format&fit=crop&w=1400&q=70">
</div>
<div class="pbody">
<div class="pname"><b>Cintura “Essential”</b><span class="price">€59</span></div>
<div class="psub">Fibbia minimal • Taglio pulito • Look quotidiano premium.</div>
<div class="prow">
<a class="btn small primary" href="#">Aggiungi</a>
<a class="btn small" href="#">Dettagli</a>
</div>
</div>
</article>
<article class="product">
<div class="ph">
<span class="tag">New</span>
<img alt="Portafoglio" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1400&q=70">
</div>
<div class="pbody">
<div class="pname"><b>Portafoglio Slim</b><span class="price">€79</span></div>
<div class="psub">Compatto • Multi-scomparto • Perfetto per tasca e borse piccole.</div>
<div class="prow">
<a class="btn small primary" href="#">Aggiungi</a>
<a class="btn small" href="#">Dettagli</a>
</div>
</div>
</article>
<article class="product">
<div class="ph">
<span class="tag">Limited</span>
<img alt="Mini bag" src="https://images.unsplash.com/photo-1520975958224-5a1f32f0b21a?auto=format&fit=crop&w=1400&q=70">
</div>
<div class="pbody">
<div class="pname"><b>Mini Bag “Nox”</b><span class="price">€139</span></div>
<div class="psub">Linea decisa • Chiusura magnetica • Edizione limitata.</div>
<div class="prow">
<a class="btn small primary" href="#">Aggiungi</a>
<a class="btn small" href="#">Dettagli</a>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Artigianalità -->
<section id="artigianalita">
<div class="wrap">
<div class="sectionHead">
<div>
<h2>Artigianalità che si vede</h2>
<p>Sezione “fiducia”: spiega perché costi di più e perché vale di più. Qui converti gli scettici.</p>
</div>
</div>
<div class="featureRow">
<div class="feature">
<h3>Dal taglio alla rifinitura: ogni step è controllato.</h3>
<p>
Mostra 3–4 punti concreti (non parole generiche): pelle, cuciture, bordi, accessori metallici.
È qui che costruisci “premium perception”.
</p>
<div class="bullets">
<div class="bullet">
<div class="i">✓</div>
<div>
<b>Pelle selezionata</b>
<span>Texture coerente, mano morbida, resa estetica alta.</span>
</div>
</div>
<div class="bullet">
<div class="i">✓</div>
<div>
<b>Cuciture precise</b>
<span>Punti regolari e resistenti: durata e pulizia visiva.</span>
</div>
</div>
<div class="bullet">
<div class="i">✓</div>
<div>
<b>Bordi rifiniti</b>
<span>Taglio e finitura che “sembra costosa” anche da lontano.</span>
</div>
</div>
</div>
</div>
<div class="feature">
<h3>Materiali & sostenibilità (se reale)</h3>
<p>
Se hai certificazioni o filiera controllata, mettile qui con icone e micro-copy.
Se non le hai, meglio parlare di “durabilità” (che è sostenibilità vera).
</p>
<div class="bullets">
<div class="bullet">
<div class="i">⟡</div>
<div>
<b>Durata nel tempo</b>
<span>Più usi → meno sostituzioni. Il vero lusso è non dover ricomprare.</span>
</div>
</div>
<div class="bullet">
<div class="i">⟡</div>
<div>
<b>Cura semplice</b>
<span>Consigli rapidi + kit: mantieni il prodotto “nuovo” più a lungo.</span>
</div>
</div>
<div class="bullet">
<div class="i">⟡</div>
<div>
<b>Packaging premium</b>
<span>Impatto visivo + protezione: esperienza completa.</span>
</div>
</div>
</div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- Lookbook -->
<section id="lookbook">
<div class="wrap">
<div class="sectionHead">
<div>
<h2>Lookbook</h2>
<p>Immagini “editoriali” per alzare il valore percepito. Questa sezione ti fa vendere senza parlare.</p>
</div>
<a class="btn" href="#">Guarda su Instagram</a>
</div>
<div class="masonry">
<div class="mcol">
<div class="shot" style="min-height:340px">
<img alt="Lookbook 1" src="https://images.unsplash.com/photo-1520975661595-6453be3f7070?auto=format&fit=crop&w=1600&q=70">
<div class="cap">
<div>
<b>Icon Tote</b>
<span>Spazio e struttura • Ufficio e weekend</span>
</div>
<span class="badge">Editorial</span>
</div>
</div>
<div class="shot" style="min-height:260px">
<img alt="Lookbook 2" src="https://images.unsplash.com/photo-1514997130083-1b8b28c4c6a8?auto=format&fit=crop&w=1600&q=70">
<div class="cap">
<div>
<b>Essential Belt</b>
<span>Dettaglio che completa il look</span>
</div>
<span class="badge">Daily</span>
</div>
</div>
</div>
<div class="mcol">
<div class="shot" style="min-height:280px">
<img alt="Lookbook 3" src="https://images.unsplash.com/photo-1520975682071-a9b3bdfd0c33?auto=format&fit=crop&w=1600&q=70">
<div class="cap">
<div>
<b>Mini Bag</b>
<span>Minimal • Serata • Essenziale</span>
</div>
<span class="badge">New</span>
</div>
</div>
<div class="shot" style="min-height:320px">
<img alt="Lookbook 4" src="https://images.unsplash.com/photo-1520975732132-2800d05c5c35?auto=format&fit=crop&w=1600&q=70">
<div class="cap">
<div>
<b>Small Leather Goods</b>
<span>Porta carte • Portafogli • Accessori</span>
</div>
<span class="badge">Gift</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section>
<div class="wrap">
<div class="sectionHead">
<div>
<h2>Dicono di noi</h2>
<p>Recensioni brevi e “concrete”. Se puoi, aggiungi stelle + fonte (Google/Trustpilot) + foto reali.</p>
</div>
</div>
<div class="grid3">
<div class="quote">
<p>“Materiali top e finiture davvero curate. La borsa dal vivo è ancora più bella.”</p>
<div class="who">— Martina, cliente</div>
</div>
<div class="quote">
<p>“Cintura minimal perfetta. Si sente la qualità appena la prendi in mano.”</p>
<div class="who">— Luca, cliente</div>
</div>
<div class="quote">
<p>“Packaging stupendo e spedizione veloce. Acquisterò di nuovo.”</p>
<div class="who">— Giulia, cliente</div>
</div>
</div>
<div class="divider"></div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="wrap">
<div class="sectionHead">
<div>
<h2>FAQ</h2>
<p>Riduci dubbi → riduci abbandoni. Metti le risposte che ti chiedono davvero (spedizione, resi, cura, tempi).</p>
</div>
</div>
<details>
<summary>Che tipo di pelle utilizzate?</summary>
<p>Indica la tipologia (martellata, liscia, conciata al vegetale…), la provenienza e cosa rende la pelle “premium”.</p>
</details>
<details>
<summary>Spedizione e tempi di consegna</summary>
<p>Inserisci tempi reali (es. 24/48h) + costo + soglia spedizione gratuita se presente.</p>
</details>
<details>
<summary>Resi e cambi</summary>
<p>Spiega in modo semplice: entro quanti giorni, condizioni del prodotto, come richiedere il reso.</p>
</details>
<details>
<summary>Come si pulisce e mantiene la pelle?</summary>
<p>2–3 consigli pratici + eventuale kit cura. Questa FAQ aumenta fiducia e valore percepito.</p>
</details>
</div>
</section>
<!-- CTA Newsletter -->
<section>
<div class="wrap">
<div class="cta">
<div>
<b>Vuoi anteprime e drop limitati?</b>
<span>Iscriviti e ricevi novità, restock e offerte riservate. Niente spam, solo pelle buona.</span>
</div>
<form onsubmit="event.preventDefault(); alert('Demo: email salvata (finto) ✅');">
<input type="email" placeholder="La tua email" required />
<button class="btn primary" type="submit">Iscrivimi</button>
</form>
</div>
</div>
</section>
<!-- Contatti -->
<section id="contatti">
<div class="wrap">
<div class="sectionHead">
<div>
<h2>Contatti</h2>
<p>Qui puoi mettere: WhatsApp, email, form veloce e se hai showroom/negozio anche mappa e orari.</p>
</div>
</div>
<div class="grid3">
<div class="feature">
<h3>Assistenza</h3>
<p>WhatsApp: <b>+39 000 000 000</b><br/>Email: <b>info@ventopelletterie.it</b></p>
<div style="margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;">
<a class="btn primary" href="#">Scrivi su WhatsApp</a>
<a class="btn" href="#">Invia email</a>
</div>
</div>
<div class="feature">
<h3>B2B / Rivenditori</h3>
<p>Se lavori anche con negozi, metti una CTA dedicata (catalogo + listino + condizioni).</p>
<div style="margin-top:12px">
<a class="btn" href="#">Richiedi catalogo</a>
</div>
</div>
<div class="feature">
<h3>Form veloce</h3>
<form onsubmit="event.preventDefault(); alert('Demo: richiesta inviata ✅');" style="display:grid; gap:10px; margin-top:10px;">
<input placeholder="Nome" required />
<input placeholder="Email" type="email" required />
<input placeholder="Messaggio (es. info prodotto / rivenditore)" required />
<button class="btn primary" type="submit">Invia</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="wrap">
<div class="footerGrid">
<div class="fcol">
<b>VENTO PELLETTERIE</b>
<div class="subtle">
Pelletteria premium: design essenziale, finiture curate, materiali selezionati.
<br/><br/>
© <span id="year"></span> — Tutti i diritti riservati.
</div>
</div>
<div class="fcol">
<b>Shop</b>
<a href="#">Borse</a>
<a href="#">Cinture</a>
<a href="#">Accessori</a>
<a href="#">Gift card</a>
</div>
<div class="fcol">
<b>Info</b>
<a href="#artigianalita">Artigianalità</a>
<a href="#faq">FAQ</a>
<a href="#">Spedizioni</a>
<a href="#">Resi</a>
</div>
<div class="fcol">
<b>Legal</b>
<a href="#">Privacy Policy</a>
<a href="#">Cookie Policy</a>
<a href="#">Termini & Condizioni</a>
</div>
</div>
</div>
</footer>
<script>
// anno automatico
document.getElementById("year").textContent = new Date().getFullYear();
// mobile menu
const burger = document.getElementById("burger");
const menu = document.getElementById("mobileMenu");
if (burger) {
burger.addEventListener("click", () => {
const open = menu.style.display === "block";
menu.style.display = open ? "none" : "block";
burger.textContent = open ? "☰" : "✕";
});
}
// chiudi menu su click link
menu?.querySelectorAll("a").forEach(a => a.addEventListener("click", () => {
menu.style.display = "none";
burger.textContent = "☰";
}));
</script>
</body>
</html>