-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
134 lines (117 loc) · 10.5 KB
/
Copy pathindex.html
File metadata and controls
134 lines (117 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HaukLabz | Arranjos de Alma e Tempo</title>
<meta name="description" content="E-commerce de flores desidratadas e arranjos artesanais para decoração. Beleza que perdura.">
<!-- Google Fonts Otimizado com &display=swap -->
<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=Inter:wght@300;400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<!-- CORREÇÃO 1: Adicionada a classe 'loading' para o loader funcionar -->
<body class="loading home-page">
<!-- Loader de Transição de Página -->
<div class="page-loader">
<span class="loader-logo">Hauk Labz</span>
</div>
<!-- TELA PARA AS PARTÍCULAS -->
<div id="particles-js"></div>
<header class="main-header">
<div class="announcement-bar">
<span>Frete Grátis em compras acima de R$199</span>
</div>
<div class="header-content">
<!-- Logo na Esquerda -->
<a href="index.html" class="logo">Hauk Labz</a>
<!-- Navegação Principal (Central em Desktop) -->
<nav class="main-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Coleções</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<!-- Ações na Direita (Carrinho e Menu Mobile) -->
<div class="header-actions">
<!-- Ícone de Perfil -->
<a href="login-registro.html" class="header-user-icon" aria-label="Minha conta">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</a>
<!-- Ícone do Carrinho -->
<a href="carrinho.html" class="header-cart-icon" aria-label="Ver carrinho">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
</a>
<!-- Botão de Menu Mobile -->
<button class="mobile-menu-toggle" aria-label="Abrir menu">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</div>
</div>
</header>
<main>
<section class="hero-section">
<div class="hero-content-wrapper">
<span class="hero-pre-title">Coleção Atemporal</span>
<h1 class="hero-title">A Poesia que o Tempo Escreve na Flor</h1>
<p class="hero-subtitle">Nossos arranjos são mais que decoração; são fragmentos de natureza preservada, prontos para contar histórias no seu espaço.</p>
<a href="produtos.html" class="cta-button">Explorar Coleção</a>
</div>
</section>
<section class="featured-products">
<div class="container">
<div class="section-title-wrapper">
<h2 class="section-title">Best Sellers</h2>
<p>Arranjos selecionados que encantam e transformam ambientes.</p>
</div>
<div class="products-grid">
<article class="product-card"> <div class="product-image-wrapper"> <img src="images/prod1.jpg" alt="Buquê de tons terrosos com capim dos pampas."> </div> <div class="card-content"> <h3>Buquê Terracota</h3> <span class="product-price">R$ 289,90</span> <a href="detalhe-produto.html" class="details-button">Ver Detalhes</a> </div> </article>
<article class="product-card"> <div class="product-image-wrapper"> <img src="images/prod2.jpg" alt="Arranjo delicado com flores brancas e lavanda."> </div> <div class="card-content"> <h3>Sinfonia de Lavanda</h3> <span class="product-price">R$ 249,90</span> <a href="detalhe-produto.html" class="details-button">Ver Detalhes</a> </div> </article>
<article class="product-card"> <div class="product-image-wrapper"> <img src="images/prod3.jpg" alt="Composição minimalista com folhas de eucalipto."> </div> <div class="card-content"> <h3>Ramo de Eucalipto</h3> <span class="product-price">R$ 179,90</span> <a href="detalhe-produto.html" class="details-button">Ver Detalhes</a> </div> </article>
</div>
</div>
</section>
<section class="our-philosophy">
<div class="container philosophy-grid">
<div class="philosophy-image"> <img src="images/prod1.jpg" alt="Mãos de artesã cuidando de flores secas."> </div>
<div class="philosophy-text"> <span class="pre-title">Feito à mão, com alma</span> <h2>Design que Respeita a Natureza</h2> <p>Acreditamos na beleza imperfeita e duradoura. Cada arranjo é montado à mão em nosso ateliê, honrando o ciclo de vida de cada flor e folha. Utilizamos técnicas de desidratação que preservam a forma, a cor e a delicadeza, criando peças que atravessam as estações.</p> <a href="sobre.html" class="text-link">Conheça nossa história →</a> </div>
</div>
</section>
<section class="testimonials">
<div class="container">
<h2 class="section-title">O que dizem nossos clientes</h2>
<div class="testimonial-slider-wrapper">
<div class="testimonial-slider">
<div class="testimonial-slide"> <p class="quote">“O arranjo transformou minha sala. É delicado, elegante e a qualidade é impecável. Chegou super bem embalado e com um cheirinho maravilhoso!”</p> <p class="author">- Mariana L.</p> </div>
<div class="testimonial-slide"> <p class="quote">“Comprei para presentear e foi um sucesso absoluto. Muito mais especial que flores frescas que morrem em uma semana. Virei fã e cliente fiel.”</p> <p class="author">- João P.</p> </div>
<div class="testimonial-slide"> <p class="quote">“Atendimento nota mil e o produto é uma obra de arte. As flores dão uma sensação de aconchego e paz ao meu escritório. Recomendo de olhos fechados.”</p> <p class="author">- Camila S.</p> </div>
</div>
<div class="slider-controls"> <button class="slider-btn prev-btn" aria-label="Depoimento anterior">←</button> <button class="slider-btn next-btn" aria-label="Próximo depoimento">→</button> </div>
</div>
</div>
</section>
</main>
<!-- Botão Flutuante do WhatsApp -->
<a href="https://api.whatsapp.com/send?phone=SEUNUMERO" class="whatsapp-float" target="_blank" rel="noopener noreferrer">
<div class="whatsapp-message-bubble">
<span id="whatsapp-text">Olá! Posso ajudar?</span>
</div>
<svg class="whatsapp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.8 0-67.6-9.5-97.8-27.2l-4.8-2.9-72.5 19 19.3-71.1-3.1-5c-18.7-31.9-29.6-69.2-29.6-107.8 0-107.8 87.5-195.3 195.3-195.3 51.9 0 100.8 20.3 138.2 57.6 37.4 37.4 57.6 86.4 57.6 138.2-.1 107.8-87.6 195.3-195.4 195.3zm100.9-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
</a>
<footer class="main-footer">
<div class="container footer-grid">
<div class="footer-column about-us"> <h4>Hauk Labz</h4> <p>Celebrando a beleza atemporal da natureza através de arranjos desidratados feitos à mão.</p> <div class="social-links"> <a href="#" aria-label="Instagram"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> </a> <a href="#" aria-label="Facebook"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg> </a> </div> </div>
<div class="footer-column"> <h4>Links Úteis</h4> <ul> <li><a href="trocas.html">Trocas e Devoluções</a></li> <li><a href="privacidade.html">Política de Privacidade</a></li> <li><a href="termos.html">Termos de Serviço</a></li> <li><a href="faq.html">FAQ</a></li> </ul> </div>
<div class="footer-column"> <h4>Newsletter</h4> <p>Receba inspirações e ofertas exclusivas em primeira mão.</p> <form class="newsletter-form"> <input type="email" placeholder="Seu melhor e-mail" required> <button type="submit">Inscrever</button> </form> </div>
</div>
<div class="footer-bottom"> <p>© 2025 HaukLabz. Feito Com Amor.</p> </div>
</footer>
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles-slim@2.12.0/tsparticles.slim.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>