<![CDATA[<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verde&Flor — Cosméticos Naturais</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="nav-wrap">
<div class="logo">
<svg viewBox="0 0 24 24" fill="none"><path d="M12 3C9 6 6 9 6 13a6 6 0 0 0 12 0c0-4-3-7-6-10Z" stroke="currentColor" stroke-width="1.4"/></svg>
Verde&Flor
</div>
<nav class="links">
<a href="#hero">Início</a>
<a href="#produtos">Produtos</a>
<a href="#sobre">Sobre</a>
<a href="#newsletter">Contato</a>
</nav>
<button class="cart-btn" id="cartOpenBtn" aria-haspopup="true" aria-controls="drawer">
Sacola <span class="cart-count" id="cartCount">0</span>
</button>
</div>
</header>
<section class="hero" id="hero">
<div>
<div class="eyebrow">Cosmética natural, feita à mão</div>
<h1>Rituais de beleza <em>vindos da terra</em></h1>
<p class="sub">Fórmulas veganas com ingredientes botânicos selecionados, pensadas para quem cuida da pele com a mesma atenção que cuida do planeta.</p>
<div class="hero-actions">
<a href="#produtos" class="btn-primary">Ver produtos</a>
<a href="#sobre" class="btn-ghost">Nossa história →</a>
</div>
<div class="stat-row">
<div><strong>100%</strong><span>Vegano & cruelty-free</span></div>
<div><strong>+40</strong><span>Ingredientes botânicos</span></div>
<div><strong>4.9★</strong><span>Avaliação média</span></div>
</div>
</div>
<div class="shelf" aria-hidden="true">
<div class="shelf-row">
<div class="bottle b5"></div>
<div class="bottle b1"></div>
<div class="bottle b2"></div>
<div class="bottle b4"></div>
<div class="bottle b3"></div>
</div>
<div class="shelf-plank"></div>
</div>
</section>
<div class="divider" aria-hidden="true">
<svg viewBox="0 0 120 24" fill="none"><path d="M0 12h40M80 12h40" stroke="currentColor" stroke-width="1.2"/><path d="M60 4c6 3 10 8 10 14 0-6 4-11 10-14-6 3-10 8-10 14 0-6-4-11-10-14Z" fill="currentColor"/></svg>
</div>
<section class="products" id="produtos">
<div class="section-head">
<h2>Nossa seleção</h2>
<p>Cada produto é formulado em pequenos lotes, com extratos vegetais e óleos prensados a frio.</p>
</div>
<div class="categories" id="categories">
<button class="pill active" data-filter="todos">Todos</button>
<button class="pill" data-filter="skincare">Skincare</button>
<button class="pill" data-filter="maquiagem">Maquiagem</button>
<button class="pill" data-filter="cabelo">Cabelo</button>
<button class="pill" data-filter="corpo">Corpo</button>
</div>
<div class="grid" id="grid"></div>
</section>
<section class="about" id="sobre">
<div class="about-inner">
<div>
<h2>Da colheita ao vidro, com cuidado</h2>
<p>Trabalhamos com pequenos produtores locais para garantir ingredientes frescos e rastreáveis, do campo até a sua rotina de cuidado.</p>
</div>
<div class="about-list">
<div><strong>Origem certificada</strong><span>Extratos vegetais de fornecedores parceiros, com rastreabilidade total.</span></div>
<div><strong>Embalagens circulares</strong><span>Vidro reciclável e recarga disponível para toda a linha.</span></div>
<div><strong>Sem testes em animais</strong><span>Certificação cruelty-free em todas as etapas da produção.</span></div>
<div><strong>Lotes pequenos</strong><span>Produção artesanal semanal para garantir frescor das fórmulas.</span></div>
</div>
</div>
</section>
<section class="newsletter" id="newsletter">
<h2>Receba novidades e dicas de cuidado natural</h2>
<p>Sem spam — só lançamentos, promoções e conteúdo sobre beleza natural.</p>
<form id="newsletterForm">
<input type="email" placeholder="seu@email.com" required aria-label="Seu e-mail">
<button class="btn-primary" type="submit">Inscrever-se</button>
</form>
</section>
<footer>
<div class="footer-inner">
<div>
<div class="footer-logo">Verde&Flor</div>
<p style="font-size:0.88rem; max-width:32ch;">Cosmética natural feita à mão, com ingredientes botânicos e embalagens circulares.</p>
</div>
<div>
<h4>Loja</h4>
<ul>
<li><a href="#produtos">Skincare</a></li>
<li><a href="#produtos">Maquiagem</a></li>
<li><a href="#produtos">Cabelo</a></li>
<li><a href="#produtos">Corpo</a></li>
</ul>
</div>
<div>
<h4>Empresa</h4>
<ul>
<li><a href="#sobre">Sobre nós</a></li>
<li><a href="#">Sustentabilidade</a></li>
<li><a href="#">Trabalhe conosco</a></li>
</ul>
</div>
<div>
<h4>Ajuda</h4>
<ul>
<li><a href="#">Trocas e devoluções</a></li>
<li><a href="#">Entrega</a></li>
<li><a href="#newsletter">Contato</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© 2026 Verde&Flor. Todos os direitos reservados.</span>
<span>Página de demonstração — loja fictícia.</span>
</div>
</footer>
<div class="overlay" id="overlay"></div>
<aside class="drawer" id="drawer" aria-label="Sacola de compras">
<div class="drawer-head">
<h3>Sua sacola</h3>
<button class="drawer-close" id="drawerClose" aria-label="Fechar sacola">✕</button>
</div>
<div class="drawer-items" id="drawerItems">
<p class="drawer-empty">Sua sacola está vazia.</p>
</div>
<div class="drawer-foot">
<div class="total-row"><span>Total</span><span id="drawerTotal">R$ 0,00</span></div>
<button class="checkout-btn" id="checkoutBtn">Finalizar compra</button>
</div>
</aside>
<div class="toast" id="toast"></div>
<script>
const products = [
{id:1, name:"Sérum Facial de Vitamina C", cat:"skincare", price:89.90, color:"linear-gradient(160deg,#F3C77A,#C39A5B)", desc:"Uniformiza o tom da pele e ilumina."},
{id:2, name:"Água Micelar Suave", cat:"skincare", price:39.90, color:"linear-gradient(160deg,#EAF2E9,#C9DCC5)", desc:"Remove maquiagem sem ressecar."},
{id:3, name:"Batom Matte Rosa Nude", cat:"maquiagem", price:45.00, color:"linear-gradient(160deg,#D98F86,#B85E55)", desc:"Cor intensa e acabamento aveludado."},
{id:4, name:"Base Líquida Natural", cat:"maquiagem", price:79.90, color:"linear-gradient(160deg,#E8C9A8,#CBA37C)", desc:"Cobertura leve com ativos vegetais."},
{id:5, name:"Óleo Capilar de Argan", cat:"cabelo", price:54.90, color:"linear-gradient(160deg,#8A6A3E,#5C4526)", desc:"Nutre e reduz o frizz dos fios."},
{id:6, name:"Máscara Capilar Reconstrutora", cat:"cabelo", price:62.90, color:"linear-gradient(160deg,#C9A15A,#8FA88A)", desc:"Repõe massa capilar em 3 minutos."},
{id:7, name:"Manteiga Corporal de Karité", cat:"corpo", price:47.90, color:"linear-gradient(160deg,#F7E6DF,#E7C9BC)", desc:"Hidratação profunda por 48h."},
{id:8, name:"Esfoliante de Café e Coco", cat:"corpo", price:38.90, color:"linear-gradient(160deg,#7A5A44,#4E3A2C)", desc:"Renova a pele e ativa a circulação."},
];
const grid = document.getElementById('grid');
const categories = document.getElementById('categories');
let cart = [];
function formatBRL(v){
return v.toLocaleString('pt-BR', {style:'currency', currency:'BRL'});
}
function renderGrid(filter){
grid.innerHTML = '';
const list = filter === 'todos' ? products : products.filter(p => p.cat === filter);
list.forEach(p => {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<div class="card-media" style="background:${p.color}22">
<span class="tag">${p.cat}</span>
<div class="mini-bottle" style="background:${p.color}"></div>
</div>
<div class="card-body">
<h3>${p.name}</h3>
<p class="desc">${p.desc}</p>
<div class="card-footer">
<span class="price">${formatBRL(p.price)}</span>
<button class="add-btn" data-id="${p.id}">Adicionar</button>
</div>
</div>
`;
grid.appendChild(card);
});
}
categories.addEventListener('click', (e) => {
const btn = e.target.closest('.pill');
if(!btn) return;
categories.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
btn.classList.add('active');
renderGrid(btn.dataset.filter);
});
grid.addEventListener('click', (e) => {
const btn = e.target.closest('.add-btn');
if(!btn) return;
const id = Number(btn.dataset.id);
const product = products.find(p => p.id === id);
addToCart(product);
btn.textContent = 'Adicionado ✓';
btn.classList.add('added');
setTimeout(() => {
btn.textContent = 'Adicionar';
btn.classList.remove('added');
}, 1200);
});
function addToCart(product){
const existing = cart.find(i => i.id === product.id);
if(existing){ existing.qty += 1; }
else { cart.push({...product, qty:1}); }
updateCart();
showToast(`${product.name} adicionado à sacola`);
}
function removeFromCart(id){
cart = cart.filter(i => i.id !== id);
updateCart();
}
function updateCart(){
const count = cart.reduce((s,i) => s + i.qty, 0);
document.getElementById('cartCount').textContent = count;
const drawerItems = document.getElementById('drawerItems');
const total = cart.reduce((s,i) => s + i.qty * i.price, 0);
document.getElementById('drawerTotal').textContent = formatBRL(total);
if(cart.length === 0){
drawerItems.innerHTML = '<p class="drawer-empty">Sua sacola está vazia.</p>';
return;
}
drawerItems.innerHTML = cart.map(i => `
<div class="drawer-item">
<div class="swatch" style="background:${i.color}"></div>
<div class="info">
<h5>${i.name}</h5>
<span>${i.qty} × ${formatBRL(i.price)}</span>
</div>
<button class="remove" data-id="${i.id}">Remover</button>
</div>
`).join('');
}
document.getElementById('drawerItems').addEventListener('click', (e) => {
const btn = e.target.closest('.remove');
if(!btn) return;
removeFromCart(Number(btn.dataset.id));
});
const drawer = document.getElementById('drawer');
const overlay = document.getElementById('overlay');
function openDrawer(){
drawer.classList.add('open');
overlay.classList.add('open');
}
function closeDrawer(){
drawer.classList.remove('open');
overlay.classList.remove('open');
}
document.getElementById('cartOpenBtn').addEventListener('click', openDrawer);
document.getElementById('drawerClose').addEventListener('click', closeDrawer);
overlay.addEventListener('click', closeDrawer);
document.getElementById('checkoutBtn').addEventListener('click', () => {
if(cart.length === 0){
showToast('Sua sacola está vazia');
return;
}
showToast('Pedido simulado enviado com sucesso!');
cart = [];
updateCart();
closeDrawer();
});
let toastTimer;
function showToast(msg){
const toast = document.getElementById('toast');
toast.textContent = msg;
toast.classList.add('show');
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toast.classList.remove('show'), 2400);
}
document.getElementById('newsletterForm').addEventListener('submit', (e) => {
e.preventDefault();
showToast('Inscrição confirmada! Obrigado.');
e.target.reset();
});
renderGrid('todos');
</script>
</body>
</html>
]]>