Add 3 files
Browse files- README.md +7 -5
- index.html +623 -19
- prompts.txt +3 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: nexpop
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: pink
|
| 5 |
+
colorTo: gray
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,623 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="pt-AO">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>NEXPOP Angola - Explosão de Sabor!</title>
|
| 7 |
+
<meta name="description" content="NEXPOP Angola - Marca angolana de pipocas doces de alta qualidade nos sabores chocolate e leite. Descubra o sabor da felicidade!">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
|
| 11 |
+
<style>
|
| 12 |
+
:root {
|
| 13 |
+
--red-primary: #D7263D;
|
| 14 |
+
--yellow-accent: #FFD93D;
|
| 15 |
+
--white: #FFFFFF;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
html {
|
| 19 |
+
scroll-behavior: smooth;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
body {
|
| 23 |
+
font-family: 'Roboto', sans-serif;
|
| 24 |
+
color: #333;
|
| 25 |
+
overflow-x: hidden;
|
| 26 |
+
}
|
| 27 |
+
|
| 28 |
+
h1, h2, h3, h4, h5, h6 {
|
| 29 |
+
font-family: 'Poppins', sans-serif;
|
| 30 |
+
font-weight: 700;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
.bg-primary {
|
| 34 |
+
background-color: var(--red-primary);
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.text-primary {
|
| 38 |
+
color: var(--red-primary);
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.bg-accent {
|
| 42 |
+
background-color: var(--yellow-accent);
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.text-accent {
|
| 46 |
+
color: var(--yellow-accent);
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
.btn-primary {
|
| 50 |
+
background-color: var(--red-primary);
|
| 51 |
+
color: white;
|
| 52 |
+
transition: all 0.3s ease;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
.btn-primary:hover {
|
| 56 |
+
transform: translateY(-2px);
|
| 57 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
.btn-secondary {
|
| 61 |
+
background-color: var(--yellow-accent);
|
| 62 |
+
color: #333;
|
| 63 |
+
transition: all 0.3s ease;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.btn-secondary:hover {
|
| 67 |
+
transform: translateY(-2px);
|
| 68 |
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
.section {
|
| 72 |
+
padding: 5rem 1rem;
|
| 73 |
+
}
|
| 74 |
+
|
| 75 |
+
.hero {
|
| 76 |
+
min-height: 80vh;
|
| 77 |
+
background: linear-gradient(rgba(215, 38, 61, 0.9), rgba(215, 38, 61, 0.85)), url('https://images.unsplash.com/photo-1578995511335-b54ca0772e83?auto=format&fit=crop&q=80');
|
| 78 |
+
background-size: cover;
|
| 79 |
+
background-position: center;
|
| 80 |
+
display: flex;
|
| 81 |
+
align-items: center;
|
| 82 |
+
justify-content: center;
|
| 83 |
+
text-align: center;
|
| 84 |
+
color: white;
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
.flavor-card {
|
| 88 |
+
border-radius: 1rem;
|
| 89 |
+
overflow: hidden;
|
| 90 |
+
transition: transform 0.3s ease;
|
| 91 |
+
}
|
| 92 |
+
|
| 93 |
+
.flavor-card:hover {
|
| 94 |
+
transform: translateY(-10px);
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
.event-card {
|
| 98 |
+
border-radius: 0.5rem;
|
| 99 |
+
overflow: hidden;
|
| 100 |
+
transition: all 0.3s ease;
|
| 101 |
+
}
|
| 102 |
+
|
| 103 |
+
.event-card:hover {
|
| 104 |
+
transform: translateY(-5px);
|
| 105 |
+
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
+
.whatsapp-button {
|
| 109 |
+
position: fixed;
|
| 110 |
+
bottom: 20px;
|
| 111 |
+
right: 20px;
|
| 112 |
+
z-index: 100;
|
| 113 |
+
background-color: #25d366;
|
| 114 |
+
color: white;
|
| 115 |
+
border-radius: 50%;
|
| 116 |
+
width: 60px;
|
| 117 |
+
height: 60px;
|
| 118 |
+
display: flex;
|
| 119 |
+
justify-content: center;
|
| 120 |
+
align-items: center;
|
| 121 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
| 122 |
+
transition: all 0.3s ease;
|
| 123 |
+
animation: pulse 2s infinite;
|
| 124 |
+
}
|
| 125 |
+
|
| 126 |
+
.whatsapp-button:hover {
|
| 127 |
+
transform: scale(1.1);
|
| 128 |
+
}
|
| 129 |
+
|
| 130 |
+
@keyframes pulse {
|
| 131 |
+
0% {
|
| 132 |
+
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
|
| 133 |
+
}
|
| 134 |
+
70% {
|
| 135 |
+
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
|
| 136 |
+
}
|
| 137 |
+
100% {
|
| 138 |
+
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
|
| 139 |
+
}
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
.nav-link {
|
| 143 |
+
position: relative;
|
| 144 |
+
}
|
| 145 |
+
|
| 146 |
+
.nav-link::after {
|
| 147 |
+
content: '';
|
| 148 |
+
position: absolute;
|
| 149 |
+
width: 0;
|
| 150 |
+
height: 2px;
|
| 151 |
+
background-color: var(--yellow-accent);
|
| 152 |
+
bottom: -5px;
|
| 153 |
+
left: 0;
|
| 154 |
+
transition: width 0.3s ease;
|
| 155 |
+
}
|
| 156 |
+
|
| 157 |
+
.nav-link:hover::after {
|
| 158 |
+
width: 100%;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
.content-wrapper {
|
| 162 |
+
max-width: 1200px;
|
| 163 |
+
margin: 0 auto;
|
| 164 |
+
}
|
| 165 |
+
|
| 166 |
+
/* Animation classes */
|
| 167 |
+
.fade-in {
|
| 168 |
+
animation: fadeIn 1s ease-in;
|
| 169 |
+
}
|
| 170 |
+
|
| 171 |
+
@keyframes fadeIn {
|
| 172 |
+
from { opacity: 0; }
|
| 173 |
+
to { opacity: 1; }
|
| 174 |
+
}
|
| 175 |
+
</style>
|
| 176 |
+
</head>
|
| 177 |
+
|
| 178 |
+
<body>
|
| 179 |
+
<!-- Navigation -->
|
| 180 |
+
<nav class="bg-white shadow-md py-4 sticky top-0 z-50">
|
| 181 |
+
<div class="container mx-auto px-4 flex justify-between items-center">
|
| 182 |
+
<div class="flex items-center">
|
| 183 |
+
<h1 class="text-3xl font-bold text-primary">NEXPOP</h1>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<div class="hidden md:flex space-x-8">
|
| 187 |
+
<a href="#home" class="nav-link font-medium">Home</a>
|
| 188 |
+
<a href="#sobre" class="nav-link font-medium">Sobre Nós</a>
|
| 189 |
+
<a href="#sabores" class="nav-link font-medium">Sabores</a>
|
| 190 |
+
<a href="#eventos" class="nav-link font-medium">Eventos</a>
|
| 191 |
+
<a href="#contato" class="nav-link font-medium">Contato</a>
|
| 192 |
+
</div>
|
| 193 |
+
|
| 194 |
+
<div class="md:hidden">
|
| 195 |
+
<button id="menu-toggle" class="focus:outline-none">
|
| 196 |
+
<i class="fas fa-bars text-2xl text-primary"></i>
|
| 197 |
+
</button>
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
|
| 201 |
+
<!-- Mobile Menu -->
|
| 202 |
+
<div id="mobile-menu" class="hidden md:hidden bg-white shadow-md">
|
| 203 |
+
<div class="flex flex-col items-center py-4 space-y-4">
|
| 204 |
+
<a href="#home" class="nav-link font-medium">Home</a>
|
| 205 |
+
<a href="#sobre" class="nav-link font-medium">Sobre Nós</a>
|
| 206 |
+
<a href="#sabores" class="nav-link font-medium">Sabores</a>
|
| 207 |
+
<a href="#eventos" class="nav-link font-medium">Eventos</a>
|
| 208 |
+
<a href="#contato" class="nav-link font-medium">Contato</a>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
</nav>
|
| 212 |
+
|
| 213 |
+
<!-- Hero Section -->
|
| 214 |
+
<section id="home" class="hero">
|
| 215 |
+
<div class="container mx-auto px-4 fade-in">
|
| 216 |
+
<h1 class="text-5xl md:text-6xl font-bold mb-6">NEXPOP</h1>
|
| 217 |
+
<p class="text-2xl md:text-3xl mb-8">Mais que pipocas, explosão de sabor!</p>
|
| 218 |
+
<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
|
| 219 |
+
<a href="#sabores" class="btn-secondary px-8 py-3 rounded-full font-bold">Ver Sabores</a>
|
| 220 |
+
<a href="#contato" class="btn-primary px-8 py-3 rounded-full font-bold">Onde Encontrar</a>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
</section>
|
| 224 |
+
|
| 225 |
+
<!-- About Section -->
|
| 226 |
+
<section id="sobre" class="section bg-gray-50">
|
| 227 |
+
<div class="content-wrapper">
|
| 228 |
+
<div class="container mx-auto px-4">
|
| 229 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-primary">Sobre Nós</h2>
|
| 230 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
| 231 |
+
<div>
|
| 232 |
+
<div class="bg-white rounded-lg shadow-lg p-8">
|
| 233 |
+
<h3 class="text-2xl font-bold mb-4">Nossa História</h3>
|
| 234 |
+
<p class="mb-6">A NEXPOP nasceu da paixão por criar momentos de felicidade através do sabor inigualável das pipocas doces. Em Malanje, Angola, começamos nossa jornada com a missão de trazer um produto de alta qualidade e sabor inesquecível para todas as famílias angolanas.</p>
|
| 235 |
+
|
| 236 |
+
<h3 class="text-2xl font-bold mb-4">Missão</h3>
|
| 237 |
+
<p class="mb-6">"Endoçicar a vida dos nossos clientes com pipocas de qualidade!"</p>
|
| 238 |
+
|
| 239 |
+
<h3 class="text-2xl font-bold mb-4">Visão</h3>
|
| 240 |
+
<p class="mb-6">"Ser a marca de pipocas doces mais amada de Angola."</p>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
|
| 244 |
+
<div>
|
| 245 |
+
<div class="bg-white rounded-lg shadow-lg p-8">
|
| 246 |
+
<h3 class="text-2xl font-bold mb-4">Nossos Valores</h3>
|
| 247 |
+
<ul class="space-y-4">
|
| 248 |
+
<li class="flex items-start">
|
| 249 |
+
<div class="bg-primary rounded-full p-2 mr-4">
|
| 250 |
+
<i class="fas fa-check text-white"></i>
|
| 251 |
+
</div>
|
| 252 |
+
<div>
|
| 253 |
+
<h4 class="font-bold text-xl">Qualidade</h4>
|
| 254 |
+
<p>Compromisso com ingredientes selecionados e processos que garantem o melhor sabor em cada pipoca.</p>
|
| 255 |
+
</div>
|
| 256 |
+
</li>
|
| 257 |
+
<li class="flex items-start">
|
| 258 |
+
<div class="bg-primary rounded-full p-2 mr-4">
|
| 259 |
+
<i class="fas fa-smile text-white"></i>
|
| 260 |
+
</div>
|
| 261 |
+
<div>
|
| 262 |
+
<h4 class="font-bold text-xl">Alegria</h4>
|
| 263 |
+
<p>Acreditamos que nossas pipocas trazem momentos felizes e compartilhados entre amigos e família.</p>
|
| 264 |
+
</div>
|
| 265 |
+
</li>
|
| 266 |
+
<li class="flex items-start">
|
| 267 |
+
<div class="bg-primary rounded-full p-2 mr-4">
|
| 268 |
+
<i class="fas fa-lightbulb text-white"></i>
|
| 269 |
+
</div>
|
| 270 |
+
<div>
|
| 271 |
+
<h4 class="font-bold text-xl">Inovação</h4>
|
| 272 |
+
<p>Buscamos constantemente aprimorar nossos produtos e criar novas experiências de sabor.</p>
|
| 273 |
+
</div>
|
| 274 |
+
</li>
|
| 275 |
+
<li class="flex items-start">
|
| 276 |
+
<div class="bg-primary rounded-full p-2 mr-4">
|
| 277 |
+
<i class="fas fa-users text-white"></i>
|
| 278 |
+
</div>
|
| 279 |
+
<div>
|
| 280 |
+
<h4 class="font-bold text-xl">Comunidade</h4>
|
| 281 |
+
<p>Valorizamos nossa conexão com a comunidade angolana e nosso papel no desenvolvimento local.</p>
|
| 282 |
+
</div>
|
| 283 |
+
</li>
|
| 284 |
+
</ul>
|
| 285 |
+
</div>
|
| 286 |
+
</div>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
</div>
|
| 290 |
+
</section>
|
| 291 |
+
|
| 292 |
+
<!-- Flavors Section -->
|
| 293 |
+
<section id="sabores" class="section">
|
| 294 |
+
<div class="content-wrapper">
|
| 295 |
+
<div class="container mx-auto px-4">
|
| 296 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-primary">Nossos Sabores</h2>
|
| 297 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
| 298 |
+
<!-- Chocolate Flavor -->
|
| 299 |
+
<div class="flavor-card shadow-xl bg-white">
|
| 300 |
+
<div class="h-64 bg-gray-200 flex items-center justify-center">
|
| 301 |
+
<div class="text-center p-4">
|
| 302 |
+
<div class="w-32 h-32 bg-primary mx-auto rounded-full flex items-center justify-center mb-4">
|
| 303 |
+
<i class="fas fa-cookie-bite text-5xl text-white"></i>
|
| 304 |
+
</div>
|
| 305 |
+
<p class="text-gray-500">Imagem ilustrativa de Pipocas de Chocolate</p>
|
| 306 |
+
</div>
|
| 307 |
+
</div>
|
| 308 |
+
<div class="p-6">
|
| 309 |
+
<h3 class="text-2xl font-bold mb-3">Pipoca de Chocolate</h3>
|
| 310 |
+
<p class="text-gray-700 mb-4">O irresistível sabor do chocolate em cada grão. Nossas pipocas de chocolate são feitas com ingredientes de alta qualidade, proporcionando uma experiência única de sabor em cada mordida. Perfeitas para momentos de lazer, reuniões familiares ou simplesmente para saborear em qualquer hora do dia.</p>
|
| 311 |
+
<div class="flex justify-center">
|
| 312 |
+
<span class="inline-block bg-accent rounded-full px-4 py-1 font-semibold">Best-seller</span>
|
| 313 |
+
</div>
|
| 314 |
+
</div>
|
| 315 |
+
</div>
|
| 316 |
+
|
| 317 |
+
<!-- Milk Flavor -->
|
| 318 |
+
<div class="flavor-card shadow-xl bg-white">
|
| 319 |
+
<div class="h-64 bg-gray-200 flex items-center justify-center">
|
| 320 |
+
<div class="text-center p-4">
|
| 321 |
+
<div class="w-32 h-32 bg-yellow-200 mx-auto rounded-full flex items-center justify-center mb-4">
|
| 322 |
+
<i class="fas fa-glass-whiskey text-5xl text-yellow-600"></i>
|
| 323 |
+
</div>
|
| 324 |
+
<p class="text-gray-500">Imagem ilustrativa de Pipocas de Leite</p>
|
| 325 |
+
</div>
|
| 326 |
+
</div>
|
| 327 |
+
<div class="p-6">
|
| 328 |
+
<h3 class="text-2xl font-bold mb-3">Pipoca de Leite</h3>
|
| 329 |
+
<p class="text-gray-700 mb-4">Suavidade e doçura para um lanche perfeito. Nossas pipocas de leite combinam o sabor tradicional com uma deliciosa camada de doçura cremosa. São ideais para quem procura um sabor mais suave, mas igualmente satisfatório. Uma opção perfeita para todas as idades.</p>
|
| 330 |
+
<div class="flex justify-center">
|
| 331 |
+
<span class="inline-block bg-accent rounded-full px-4 py-1 font-semibold">Favorito das famílias</span>
|
| 332 |
+
</div>
|
| 333 |
+
</div>
|
| 334 |
+
</div>
|
| 335 |
+
</div>
|
| 336 |
+
</div>
|
| 337 |
+
</div>
|
| 338 |
+
</section>
|
| 339 |
+
|
| 340 |
+
<!-- Events Section -->
|
| 341 |
+
<section id="eventos" class="section bg-gray-50">
|
| 342 |
+
<div class="content-wrapper">
|
| 343 |
+
<div class="container mx-auto px-4">
|
| 344 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-primary">Eventos</h2>
|
| 345 |
+
|
| 346 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 347 |
+
<!-- Event 1 -->
|
| 348 |
+
<div class="event-card bg-white shadow-lg">
|
| 349 |
+
<div class="h-48 bg-gray-300 flex items-center justify-center">
|
| 350 |
+
<div class="text-center">
|
| 351 |
+
<i class="fas fa-calendar-alt text-5xl text-gray-500"></i>
|
| 352 |
+
<p class="mt-2 text-gray-600">Imagem do evento</p>
|
| 353 |
+
</div>
|
| 354 |
+
</div>
|
| 355 |
+
<div class="p-6">
|
| 356 |
+
<div class="flex justify-between items-center mb-3">
|
| 357 |
+
<h3 class="text-xl font-bold">Festival de Sabores</h3>
|
| 358 |
+
<span class="text-sm bg-primary text-white px-2 py-1 rounded">Próximo</span>
|
| 359 |
+
</div>
|
| 360 |
+
<p class="text-gray-700 mb-2">15 de Dezembro, 2023</p>
|
| 361 |
+
<p class="text-gray-700">Centro de Malanje</p>
|
| 362 |
+
<p class="mt-4">Venha provar nossas deliciosas pipocas e participar de atividades para toda a família!</p>
|
| 363 |
+
</div>
|
| 364 |
+
</div>
|
| 365 |
+
|
| 366 |
+
<!-- Event 2 -->
|
| 367 |
+
<div class="event-card bg-white shadow-lg">
|
| 368 |
+
<div class="h-48 bg-gray-300 flex items-center justify-center">
|
| 369 |
+
<div class="text-center">
|
| 370 |
+
<i class="fas fa-calendar-alt text-5xl text-gray-500"></i>
|
| 371 |
+
<p class="mt-2 text-gray-600">Imagem do evento</p>
|
| 372 |
+
</div>
|
| 373 |
+
</div>
|
| 374 |
+
<div class="p-6">
|
| 375 |
+
<div class="flex justify-between items-center mb-3">
|
| 376 |
+
<h3 class="text-xl font-bold">NEXPOP na Escola</h3>
|
| 377 |
+
<span class="text-sm bg-gray-500 text-white px-2 py-1 rounded">Passado</span>
|
| 378 |
+
</div>
|
| 379 |
+
<p class="text-gray-700 mb-2">10 de Outubro, 2023</p>
|
| 380 |
+
<p class="text-gray-700">Escola Primária Central</p>
|
| 381 |
+
<p class="mt-4">Distribuímos alegria e pipocas para as crianças durante o dia de atividades recreativas.</p>
|
| 382 |
+
</div>
|
| 383 |
+
</div>
|
| 384 |
+
|
| 385 |
+
<!-- Event 3 -->
|
| 386 |
+
<div class="event-card bg-white shadow-lg">
|
| 387 |
+
<div class="h-48 bg-gray-300 flex items-center justify-center">
|
| 388 |
+
<div class="text-center">
|
| 389 |
+
<i class="fas fa-calendar-alt text-5xl text-gray-500"></i>
|
| 390 |
+
<p class="mt-2 text-gray-600">Imagem do evento</p>
|
| 391 |
+
</div>
|
| 392 |
+
</div>
|
| 393 |
+
<div class="p-6">
|
| 394 |
+
<div class="flex justify-between items-center mb-3">
|
| 395 |
+
<h3 class="text-xl font-bold">Feira Gastronômica</h3>
|
| 396 |
+
<span class="text-sm bg-gray-500 text-white px-2 py-1 rounded">Passado</span>
|
| 397 |
+
</div>
|
| 398 |
+
<p class="text-gray-700 mb-2">5 de Setembro, 2023</p>
|
| 399 |
+
<p class="text-gray-700">Praça da Independência</p>
|
| 400 |
+
<p class="mt-4">Participamos da maior feira gastronômica de Malanje com nossas pipocas de chocolate e leite.</p>
|
| 401 |
+
</div>
|
| 402 |
+
</div>
|
| 403 |
+
</div>
|
| 404 |
+
|
| 405 |
+
<div class="flex justify-center mt-12">
|
| 406 |
+
<button class="btn-primary px-6 py-2 rounded-full font-bold">Ver Todos os Eventos</button>
|
| 407 |
+
</div>
|
| 408 |
+
</div>
|
| 409 |
+
</div>
|
| 410 |
+
</section>
|
| 411 |
+
|
| 412 |
+
<!-- Testimonials Section -->
|
| 413 |
+
<section class="section">
|
| 414 |
+
<div class="content-wrapper">
|
| 415 |
+
<div class="container mx-auto px-4">
|
| 416 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-primary">O Que Nossos Clientes Dizem</h2>
|
| 417 |
+
|
| 418 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 419 |
+
<!-- Testimonial 1 -->
|
| 420 |
+
<div class="bg-white p-6 rounded-lg shadow-lg">
|
| 421 |
+
<div class="flex justify-center mb-4">
|
| 422 |
+
<div class="flex">
|
| 423 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 424 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 425 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 426 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 427 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 428 |
+
</div>
|
| 429 |
+
</div>
|
| 430 |
+
<p class="text-gray-700 text-center italic mb-6">"As melhores pipocas doces que já experimentei! O sabor de chocolate é simplesmente irresistível. Toda a minha família é fã da NEXPOP!"</p>
|
| 431 |
+
<div class="text-center">
|
| 432 |
+
<p class="font-bold">Maria C.</p>
|
| 433 |
+
<p class="text-gray-600 text-sm">Malanje</p>
|
| 434 |
+
</div>
|
| 435 |
+
</div>
|
| 436 |
+
|
| 437 |
+
<!-- Testimonial 2 -->
|
| 438 |
+
<div class="bg-white p-6 rounded-lg shadow-lg">
|
| 439 |
+
<div class="flex justify-center mb-4">
|
| 440 |
+
<div class="flex">
|
| 441 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 442 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 443 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 444 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 445 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 446 |
+
</div>
|
| 447 |
+
</div>
|
| 448 |
+
<p class="text-gray-700 text-center italic mb-6">"Meus filhos só querem NEXPOP! As pipocas de leite são as preferidas deles. Qualidade incrível e sabor que não encontramos em nenhuma outra marca."</p>
|
| 449 |
+
<div class="text-center">
|
| 450 |
+
<p class="font-bold">João P.</p>
|
| 451 |
+
<p class="text-gray-600 text-sm">Luanda</p>
|
| 452 |
+
</div>
|
| 453 |
+
</div>
|
| 454 |
+
|
| 455 |
+
<!-- Testimonial 3 -->
|
| 456 |
+
<div class="bg-white p-6 rounded-lg shadow-lg">
|
| 457 |
+
<div class="flex justify-center mb-4">
|
| 458 |
+
<div class="flex">
|
| 459 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 460 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 461 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 462 |
+
<i class="fas fa-star text-yellow-500"></i>
|
| 463 |
+
<i class="fas fa-star-half-alt text-yellow-500"></i>
|
| 464 |
+
</div>
|
| 465 |
+
</div>
|
| 466 |
+
<p class="text-gray-700 text-center italic mb-6">"NEXPOP é sempre a minha escolha para eventos e reuniões. Todos adoram e sempre perguntam onde comprar. A qualidade é consistente e o sabor é inigualável."</p>
|
| 467 |
+
<div class="text-center">
|
| 468 |
+
<p class="font-bold">Ana F.</p>
|
| 469 |
+
<p class="text-gray-600 text-sm">Benguela</p>
|
| 470 |
+
</div>
|
| 471 |
+
</div>
|
| 472 |
+
</div>
|
| 473 |
+
</div>
|
| 474 |
+
</div>
|
| 475 |
+
</section>
|
| 476 |
+
|
| 477 |
+
<!-- Contact Section -->
|
| 478 |
+
<section id="contato" class="section bg-gray-800 text-white">
|
| 479 |
+
<div class="content-wrapper">
|
| 480 |
+
<div class="container mx-auto px-4">
|
| 481 |
+
<h2 class="text-4xl font-bold text-center mb-12">Contato</h2>
|
| 482 |
+
|
| 483 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
| 484 |
+
<div>
|
| 485 |
+
<h3 class="text-2xl font-bold mb-6">Entre em Contato</h3>
|
| 486 |
+
<form action="#" method="POST" class="space-y-6">
|
| 487 |
+
<div>
|
| 488 |
+
<label for="name" class="block mb-2">Nome</label>
|
| 489 |
+
<input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-md bg-gray-700 border border-gray-600 focus:outline-none focus:border-yellow-500 text-white" required>
|
| 490 |
+
</div>
|
| 491 |
+
|
| 492 |
+
<div>
|
| 493 |
+
<label for="email" class="block mb-2">Email</label>
|
| 494 |
+
<input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-md bg-gray-700 border border-gray-600 focus:outline-none focus:border-yellow-500 text-white" required>
|
| 495 |
+
</div>
|
| 496 |
+
|
| 497 |
+
<div>
|
| 498 |
+
<label for="message" class="block mb-2">Mensagem</label>
|
| 499 |
+
<textarea id="message" name="message" rows="5" class="w-full px-4 py-2 rounded-md bg-gray-700 border border-gray-600 focus:outline-none focus:border-yellow-500 text-white" required></textarea>
|
| 500 |
+
</div>
|
| 501 |
+
|
| 502 |
+
<div>
|
| 503 |
+
<button type="submit" class="btn-secondary px-8 py-3 rounded-full font-bold">Enviar Mensagem</button>
|
| 504 |
+
</div>
|
| 505 |
+
</form>
|
| 506 |
+
</div>
|
| 507 |
+
|
| 508 |
+
<div>
|
| 509 |
+
<h3 class="text-2xl font-bold mb-6">Informações de Contato</h3>
|
| 510 |
+
|
| 511 |
+
<div class="space-y-4">
|
| 512 |
+
<div class="flex items-start">
|
| 513 |
+
<div class="bg-primary rounded-full p-3 mr-4">
|
| 514 |
+
<i class="fas fa-map-marker-alt text-white"></i>
|
| 515 |
+
</div>
|
| 516 |
+
<div>
|
| 517 |
+
<h4 class="font-bold text-xl">Localização</h4>
|
| 518 |
+
<p>Malanje, Angola</p>
|
| 519 |
+
</div>
|
| 520 |
+
</div>
|
| 521 |
+
|
| 522 |
+
<div class="flex items-start">
|
| 523 |
+
<div class="bg-primary rounded-full p-3 mr-4">
|
| 524 |
+
<i class="fas fa-phone text-white"></i>
|
| 525 |
+
</div>
|
| 526 |
+
<div>
|
| 527 |
+
<h4 class="font-bold text-xl">Telefone/WhatsApp</h4>
|
| 528 |
+
<p>940-392-698 / 929-926-334</p>
|
| 529 |
+
</div>
|
| 530 |
+
</div>
|
| 531 |
+
|
| 532 |
+
<div class="flex items-start">
|
| 533 |
+
<div class="bg-primary rounded-full p-3 mr-4">
|
| 534 |
+
<i class="fab fa-facebook-f text-white"></i>
|
| 535 |
+
</div>
|
| 536 |
+
<div>
|
| 537 |
+
<h4 class="font-bold text-xl">Facebook</h4>
|
| 538 |
+
<a href="https://web.facebook.com/nexpop1.0" target="_blank" class="text-accent hover:underline">NEXPOP Angola</a>
|
| 539 |
+
</div>
|
| 540 |
+
</div>
|
| 541 |
+
</div>
|
| 542 |
+
|
| 543 |
+
<div class="mt-8">
|
| 544 |
+
<h3 class="text-2xl font-bold mb-4">Horário de Atendimento</h3>
|
| 545 |
+
<p>Segunda a Sexta: 9h às 17h</p>
|
| 546 |
+
<p>Sábado: 10h às 14h</p>
|
| 547 |
+
<p>Domingo: Fechado</p>
|
| 548 |
+
</div>
|
| 549 |
+
</div>
|
| 550 |
+
</div>
|
| 551 |
+
</div>
|
| 552 |
+
</div>
|
| 553 |
+
</section>
|
| 554 |
+
|
| 555 |
+
<!-- Footer -->
|
| 556 |
+
<footer class="bg-gray-900 text-white py-8">
|
| 557 |
+
<div class="container mx-auto px-4">
|
| 558 |
+
<div class="flex flex-col md:flex-row justify-between items-center">
|
| 559 |
+
<div class="mb-6 md:mb-0">
|
| 560 |
+
<h2 class="text-2xl font-bold">NEXPOP</h2>
|
| 561 |
+
<p class="text-gray-400">Mais que pipocas, explosão de sabor!</p>
|
| 562 |
+
</div>
|
| 563 |
+
|
| 564 |
+
<div class="flex space-x-6">
|
| 565 |
+
<a href="https://web.facebook.com/nexpop1.0" target="_blank" class="hover:text-accent transition-colors">
|
| 566 |
+
<i class="fab fa-facebook-f text-2xl"></i>
|
| 567 |
+
</a>
|
| 568 |
+
<a href="#" class="hover:text-accent transition-colors">
|
| 569 |
+
<i class="fab fa-instagram text-2xl"></i>
|
| 570 |
+
</a>
|
| 571 |
+
<a href="#" class="hover:text-accent transition-colors">
|
| 572 |
+
<i class="fab fa-whatsapp text-2xl"></i>
|
| 573 |
+
</a>
|
| 574 |
+
</div>
|
| 575 |
+
</div>
|
| 576 |
+
|
| 577 |
+
<hr class="border-gray-800 my-8">
|
| 578 |
+
|
| 579 |
+
<div class="text-center">
|
| 580 |
+
<p class="text-gray-400">© 2023 NEXPOP Angola. Todos os direitos reservados.</p>
|
| 581 |
+
</div>
|
| 582 |
+
</div>
|
| 583 |
+
</footer>
|
| 584 |
+
|
| 585 |
+
<!-- WhatsApp Button -->
|
| 586 |
+
<a href="https://wa.me/244940392698" target="_blank" class="whatsapp-button">
|
| 587 |
+
<i class="fab fa-whatsapp text-2xl"></i>
|
| 588 |
+
</a>
|
| 589 |
+
|
| 590 |
+
<script>
|
| 591 |
+
// Mobile menu toggle
|
| 592 |
+
document.getElementById('menu-toggle').addEventListener('click', function() {
|
| 593 |
+
const mobileMenu = document.getElementById('mobile-menu');
|
| 594 |
+
mobileMenu.classList.toggle('hidden');
|
| 595 |
+
});
|
| 596 |
+
|
| 597 |
+
// Close mobile menu when clicking a link
|
| 598 |
+
const mobileLinks = document.querySelectorAll('#mobile-menu a');
|
| 599 |
+
mobileLinks.forEach(link => {
|
| 600 |
+
link.addEventListener('click', function() {
|
| 601 |
+
document.getElementById('mobile-menu').classList.add('hidden');
|
| 602 |
+
});
|
| 603 |
+
});
|
| 604 |
+
|
| 605 |
+
// Smooth scrolling for anchor links
|
| 606 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 607 |
+
anchor.addEventListener('click', function(e) {
|
| 608 |
+
e.preventDefault();
|
| 609 |
+
|
| 610 |
+
const targetId = this.getAttribute('href');
|
| 611 |
+
const targetElement = document.querySelector(targetId);
|
| 612 |
+
|
| 613 |
+
if (targetElement) {
|
| 614 |
+
window.scrollTo({
|
| 615 |
+
top: targetElement.offsetTop - 80,
|
| 616 |
+
behavior: 'smooth'
|
| 617 |
+
});
|
| 618 |
+
}
|
| 619 |
+
});
|
| 620 |
+
});
|
| 621 |
+
</script>
|
| 622 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lemosiluv/nexpop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 623 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
**Pacote de Instruções para criação do Site Oficial da NEXPOP** --- # 1. Nome do Site **NEXPOP Angola** # 2. Descrição da Marca **NEXPOP** é uma marca angolana dedicada à comercialização de pipocas doces de alta qualidade, com dois sabores principais: **chocolate** e **leite**. Nosso compromisso é proporcionar momentos de prazer, crocância e felicidade em cada pipoca. # 3. Propósito do Site - Divulgar informações sobre a marca. - Anunciar novidades e eventos. - Permitir que clientes conheçam melhor os produtos. - Facilitar o contato e pedidos. - Mostrar a presença da marca em eventos. # 4. Estrutura do Site **Páginas principais:** - **Home** - Slogan principal: "NEXPOP - Mais que pipocas, explosão de sabor!" - Imagem de destaque com pipocas de chocolate e leite. - Botões de acesso rápido: "Ver Sabores" | "Onde Encontrar" - **Sobre Nós** - História breve da criação da marca. - Missão: "Endocicar a vida dos nossos clientes com pipocas de qualidade!" - Visão: "Ser a marca de pipocas doces mais amada de Angola." - Valores: Qualidade, Alegria, Inovação, Comunidade. - **Sabores** - Pipoca de Chocolate - Descrição: "O irresistível sabor do chocolate em cada grão." - Imagem ilustrativa. - Pipoca de Leite - Descrição: "Suavidade e doçura para um lanche perfeito." - Imagem ilustrativa. - **Eventos** - Lista de eventos futuros e passados. - Fotos de participação. - **Contato** - Formulário de contato rápido. - Telefone/WhatsApp: 940-392-698 / 929-926-334 - Redes Sociais: Facebook (link para https://web.facebook.com/nexpop1.0) # 5. Paleta de Cores - **Vermelho vibrante** (#D7263D) — cor principal. - **Branco** (#FFFFFF) — para contrastes e limpezas visuais. - **Amarelo claro** (#FFD93D) — para detalhes (ex.: chamadas de ação). # 6. Tipografia (Fontes) - Títulos: "Poppins" (negrito) - Textos corridos: "Roboto" # 7. Logotipo - Versão branca do logotipo enviada. - Formato ideal para o site: PNG (fundo transparente). - Tamanho recomendado para a página: largura mínima de 250px. # 8. Conteúdos de Imagens - Imagens reais de pipocas (chocolate e leite). - Imagens de eventos (famílias angolanas se divertindo, público sorrindo com pipocas). - Fotos da equipe NEXPOP em eventos (opcional). # 9. Extras - Botões de WhatsApp direto na tela. - Área para depoimentos de clientes no futuro. - Possível futuro e-commerce (não obrigatório na primeira versão). # 10. Observações Importantes - Deixar claro em todos os textos que **só existem pipocas doces**. - Evitar mencionar pipocas salgadas em qualquer seção. # 11. Dados para Contato - Nome da Marca: NEXPOP Angola - Local: Malanje, Angola - Telefone/WhatsApp: 940-392-698 / 929-926-334 - Facebook: https://web.facebook.com/nexpop1.0 --- **Instruções para Compactar em Pasta .ZIP:** 1. Criar uma pasta chamada **NEXPOP Site**. 2. Dentro dela colocar: - Documento com essas instruções (.pdf ou .docx) - Logotipo branco em PNG - Imagens dos sabores (separadas) - Imagens de eventos (separadas) 3. Compactar tudo em **NEXPOP_Site.zip**. **Agora posso também preparar essa pasta e gerar o .zip para ti se quiser.** ✅ Deseja que eu prossiga e crie o arquivo compactado agora?
|
| 2 |
+
<!DOCTYPE html> <html lang="pt-AO"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NEXPOP Angola - Explosão de Sabor!</title> <meta name="description" content="NEXPOP Angola - Marca angolana de pipocas doces de alta qualidade nos sabores chocolate e leite. Descubra o sabor da felicidade!"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --red-primary: #D7263D; --yellow-accent: #FFD93D; --white: #FFFFFF; } html { scroll-behavior: smooth; } body { font-family: 'Roboto', sans-serif; color: #333; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; } .bg-primary { background-color: var(--red-primary); } .text-primary { color: var(--red-primary); } .bg-accent { background-color: var(--yellow-accent); } .text-accent { color: var(--yellow-accent); } .btn-primary { background-color: var(--red-primary); color: white; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .btn-secondary { background-color: var(--yellow-accent); color: #333; transition: all 0.3s ease; } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .section { padding: 5rem 1rem; } .hero { min-height: 80vh; background: linear-gradient(rgba(215, 38, 61, 0.9), rgba(215, 38, 61, 0.85)), url('https://images.unsplash.com/photo-1578995511335-b54ca0772e83?auto=format&fit=crop&q=80'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .flavor-card { border-radius: 1rem; overflow: hidden; transition: transform 0.3s ease; } .flavor-card:hover { transform: translateY(-10px); } .event-card { border-radius: 0.5rem; overflow: hidden; transition: all 0.3s ease; } .event-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .whatsapp-button { position: fixed; bottom: 20px; right: 20px; z-index: 100; background-color: #25d366; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .whatsapp-button:hover { transform: scale(1.1); } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; background-color: var(--yellow-accent); bottom: -5px; left: 0; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .content-wrapper { max-width: 1200px; margin: 0 auto; } /* Animation classes */ .fade-in { animation: fadeIn 1s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <!-- Navigation --> <nav class="bg-white shadow-md py-4 sticky top-0 z-50"> <div class="container mx-auto px-4 flex justify-between items-center"> <div class="flex items-center"> <h1 class="text-3xl font-bold text-primary">NEXPOP</h1> </div> <div class="hidden md:flex space-x-8"> <a href="#home" class="nav-link font-medium">Home</a> <a href="#sobre" class="nav-link font-medium">Sobre Nós</a> <a href="#sabores" class="nav-link font-medium">Sabores</a> <a href="#eventos" class="nav-link font-medium">Eventos</a> <a href="#contato" class="nav-link font-medium">Contato</a> </div> <div class="md:hidden"> <button id="menu-toggle" class="focus:outline-none"> <i class="fas fa-bars text-2xl text-primary"></i> </button> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="hidden md:hidden bg-white shadow-md"> <div class="flex flex-col items-center py-4 space-y-4"> <a href="#home" class="nav-link font-medium">Home</a> <a href="#sobre" class="nav-link font-medium">Sobre Nós</a> <a href="#sabores" class="nav-link font-medium">Sabores</a> <a href="#eventos" class="nav-link font-medium">Eventos</a> <a href="#contato" class="nav-link font-medium">Contato</a> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="container mx-auto px-4 fade-in"> <h1 class="text-5xl md:text-6xl font-bold mb-6">NEXPOP</h1> <p class="text-2xl md:text-3xl mb-8">Mais que pipocas, explosão de sabor!</p> <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> <a href="#sabores" class="btn-secondary px-8 py-3 rounded-full font-bold">Ver Sabores</a> <a href="#contato" class="btn-primary px-8 py-3 rounded-full font-bold">Onde Encontrar</a> </div> </div> </section> <!-- About Section --> <section id="sobre" class="section bg-gray-50"> <div class="content-wrapper"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12 text-primary">Sobre Nós</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div> <div class="bg-white rounded-lg shadow-lg p-8"> <h3 class="text-2xl font-bold mb-4">Nossa História</h3> <p class="mb-6">A NEXPOP nasceu da paixão por criar momentos de felicidade através do sabor inigualável das pipocas doces. Em Malanje, Angola, começamos nossa jornada com a missão de trazer um produto de alta qualidade e sabor inesquecível para todas as famílias angolanas.</p> <h3 class="text-2xl font-bold mb-4">Missão</h3> <p class="mb-6">"Endoçicar a vida dos nossos clientes com pipocas de qualidade!"</p> <h3 class="text-2xl font-bold mb-4">Visão</h3> <p class="mb-6">"Ser a marca de pipocas doces mais amada de Angola."</p> </div> </div> <div> <div class="bg-white rounded-lg shadow-lg p-8"> <h3 class="text-2xl font-bold mb-4">Nossos Valores</h3> <ul class="space-y-4"> <li class="flex items-start"> <div class="bg-primary rounded-full p-2 mr-4"> <i class="fas fa-check text-white"></i> </div> <div> <h4 class="font-bold text-xl">Qualidade</h4> <p>Compromisso com ingredientes selecionados e processos que garantem o melhor sabor em cada pipoca.</p> </div> </li> <li class="flex items-start"> <div class="bg-primary rounded-full p-2 mr-4"> <i class="fas fa-smile text-white"></i> </div> <div> <h4 class="font-bold text-xl">Alegria</h4> <p>Acreditamos que nossas pipocas trazem momentos felizes e compartilhados entre amigos e família.</p> </div> </li> <li class="flex items-start"> <div class="bg-primary rounded-full p-2 mr-4"> <i class="fas fa-lightbulb text-white"></i> </div> <div> <h4 class="font-bold text-xl">Inovação</h4> <p>Buscamos constantemente aprimorar nossos produtos e criar novas experiências de sabor.</p> </div> </li> <li class="flex items-start"> <div class="bg-primary rounded-full p-2 mr-4"> <i class="fas fa-users text-white"></i> </div> <div> <h4 class="font-bold text-xl">Comunidade</h4> <p>Valorizamos nossa conexão com a comunidade angolana e nosso papel no desenvolvimento local.</p> </div> </li> </ul> </div> </div> </div> </div> </div> </section> <!-- Flavors Section --> <section id="sabores" class="section"> <div class="content-wrapper"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12 text-primary">Nossos Sabores</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <!-- Chocolate Flavor --> <div class="flavor-card shadow-xl bg-white"> <div class="h-64 bg-gray-200 flex items-center justify-center"> <div class="text-center p-4"> <div class="w-32 h-32 bg-primary mx-auto rounded-full flex items-center justify-center mb-4"> <i class="fas fa-cookie-bite text-5xl text-white"></i> </div> <p class="text-gray-500">Imagem ilustrativa de Pipocas de Chocolate</p> </div> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-3">Pipoca de Chocolate</h3> <p class="text-gray-700 mb-4">O irresistível sabor do chocolate em cada grão. Nossas pipocas de chocolate são feitas com ingredientes de alta qualidade, proporcionando uma experiência única de sabor em cada mordida. Perfeitas para momentos de lazer, reuniões familiares ou simplesmente para saborear em qualquer hora do dia.</p> <div class="flex justify-center"> <span class="inline-block bg-accent rounded-full px-4 py-1 font-semibold">Best-seller</span> </div> </div> </div> <!-- Milk Flavor --> <div class="flavor-card shadow-xl bg-white"> <div class="h-64 bg-gray-200 flex items-center justify-center"> <div class="text-center p-4"> <div class="w-32 h-32 bg-yellow-200 mx-auto rounded-full flex items-center justify-center mb-4"> <i class="fas fa-glass-whiskey text-5xl text-yellow-600"></i> </div> <p class="text-gray-500">Imagem ilustrativa de Pipocas de Leite</p> </div> </div> <div class="p-6"> <h3 class="text-2xl font-bold mb-3">Pipoca de Leite</h3> <p class="text-gray-700 mb-4">Suavidade e doçura para um lanche perfeito. Nossas pipocas de leite combinam o sabor tradicional com uma deliciosa camada de doçura cremosa. São ideais para quem procura um sabor mais suave, mas igualmente satisfatório. Uma opção perfeita para todas as idades.</p> <div class="flex justify-center"> <span class="inline-block bg-accent rounded-full px-4 py-1 font-semibold">Favorito das famílias</span> </div> </div> </div> </div> </div> </div> </section> <!-- Events Section --> <section id="eventos" class="section bg-gray-50"> <div class="content-wrapper"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12 text-primary">Eventos</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Event 1 --> <div class="event-card bg-white shadow-lg"> <div class="h-48 bg-gray-300 flex items-center justify-center"> <div class="text-center"> <i class="fas fa-calendar-alt text-5xl text-gray-500"></i> <p class="mt-2 text-gray-600">Imagem do evento</p> </div> </div> <div class="p-6"> <div class="flex justify-between items-center mb-3"> <h3 class="text-xl font-bold">Festival de Sabores</h3> <span class="text-sm bg-primary text-white px-2 py-1 rounded">Próximo</span> </div> <p class="text-gray-700 mb-2">15 de Dezembro, 2023</p> <p class="text-gray-700">Centro de Malanje</p> <p class="mt-4">Venha provar nossas deliciosas pipocas e participar de atividades para toda a família!</p> </div> </div> <!-- Event 2 --> <div class="event-card bg-white shadow-lg"> <div class="h-48 bg-gray-300 flex items-center justify-center"> <div class="text-center"> <i class="fas fa-calendar-alt text-5xl text-gray-500"></i> <p class="mt-2 text-gray-600">Imagem do evento</p> </div> </div> <div class="p-6"> <div class="flex justify-between items-center mb-3"> <h3 class="text-xl font-bold">NEXPOP na Escola</h3> <span class="text-sm bg-gray-500 text-white px-2 py-1 rounded">Passado</span> </div> <p class="text-gray-700 mb-2">10 de Outubro, 2023</p> <p class="text-gray-700">Escola Primária Central</p> <p class="mt-4">Distribuímos alegria e pipocas para as crianças durante o dia de atividades recreativas.</p> </div> </div> <!-- Event 3 --> <div class="event-card bg-white shadow-lg"> <div class="h-48 bg-gray-300 flex items-center justify-center"> <div class="text-center"> <i class="fas fa-calendar-alt text-5xl text-gray-500"></i> <p class="mt-2 text-gray-600">Imagem do evento</p> </div> </div> <div class="p-6"> <div class="flex justify-between items-center mb-3"> <h3 class="text-xl font-bold">Feira Gastronômica</h3> <span class="text-sm bg-gray-500 text-white px-2 py-1 rounded">Passado</span> </div> <p class="text-gray-700 mb-2">5 de Setembro, 2023</p> <p class="text-gray-700">Praça da Independência</p> <p class="mt-4">Participamos da maior feira gastronômica de Malanje com nossas pipocas de chocolate e leite.</p> </div> </div> </div> <div class="flex justify-center mt-12"> <button class="btn-primary px-6 py-2 rounded-full font-bold">Ver Todos os Eventos</button> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="section"> <div class="content-wrapper"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12 text-primary">O Que Nossos Clientes Dizem</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Testimonial 1 --> <div class="bg-white p-6 rounded-lg shadow-lg"> <div class="flex justify-center mb-4"> <div class="flex"> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> </div> </div> <p class="text-gray-700 text-center italic mb-6">"As melhores pipocas doces que já experimentei! O sabor de chocolate é simplesmente irresistível. Toda a minha família é fã da NEXPOP!"</p> <div class="text-center"> <p class="font-bold">Maria C.</p> <p class="text-gray-600 text-sm">Malanje</p> </div> </div> <!-- Testimonial 2 --> <div class="bg-white p-6 rounded-lg shadow-lg"> <div class="flex justify-center mb-4"> <div class="flex"> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> </div> </div> <p class="text-gray-700 text-center italic mb-6">"Meus filhos só querem NEXPOP! As pipocas de leite são as preferidas deles. Qualidade incrível e sabor que não encontramos em nenhuma outra marca."</p> <div class="text-center"> <p class="font-bold">João P.</p> <p class="text-gray-600 text-sm">Luanda</p> </div> </div> <!-- Testimonial 3 --> <div class="bg-white p-6 rounded-lg shadow-lg"> <div class="flex justify-center mb-4"> <div class="flex"> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star text-yellow-500"></i> <i class="fas fa-star-half-alt text-yellow-500"></i> </div> </div> <p class="text-gray-700 text-center italic mb-6">"NEXPOP é sempre a minha escolha para eventos e reuniões. Todos adoram e sempre perguntam onde comprar. A qualidade é consistente e o sabor é inigualável."</p> <div class="text-center"> <p class="font-bold">Ana F.</p> <p class="text-gray-600 text-sm">Benguela</p> </div> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contato" class="section bg-gray-800 text-white"> <div class="content-wrapper"> <div class="container mx-auto px-4"> <h2 class="text-4xl font-bold text-center mb-12">Contato</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <div> <h3 class="text-2xl font-bold mb-6">Entre em Contato</h3> <form action="#" method="POST" class="space-y-6"> <div> <label for="name" class="block mb-2">Nome</label> <input type="text" id="name" name="name" class="w-full px-4 py-2 rounded-md bg-gray-700 border border-gray-600 focus:outline-none focus:border-yellow-500 text-white" required> </div> <div> <label for="email" class="block mb-2">Email</label> <input type="email" id="email" name="email" class="w-full px-4 py-2 rounded-md bg-gray-700 border border-gray-600 focus:outline-none focus:border-yellow-500 text-white" required> </div> <div> <label for="message" class="block mb-2">Mensagem</label> <textarea id="message" name="message" rows="5" class="w-full px-4 py-2 rounded-md bg-gray-700 border border-gray-600 focus:outline-none focus:border-yellow-500 text-white" required></textarea> </div> <div> <button type="submit" class="btn-secondary px-8 py-3 rounded-full font-bold">Enviar Mensagem</button> </div> </form> </div> <div> <h3 class="text-2xl font-bold mb-6">Informações de Contato</h3> <div class="space-y-4"> <div class="flex items-start"> <div class="bg-primary rounded-full p-3 mr-4"> <i class="fas fa-map-marker-alt text-white"></i> </div> <div> <h4 class="font-bold text-xl">Localização</h4> <p>Malanje, Angola</p> </div> </div> <div class="flex items-start"> <div class="bg-primary rounded-full p-3 mr-4"> <i class="fas fa-phone text-white"></i> </div> <div> <h4 class="font-bold text-xl">Telefone/WhatsApp</h4> <p>940-392-698 / 929-926-334</p> </div> </div> <div class="flex items-start"> <div class="bg-primary rounded-full p-3 mr-4"> <i class="fab fa-facebook-f text-white"></i> </div> <div> <h4 class="font-bold text-xl">Facebook</h4> <a href="https://web.facebook.com/nexpop1.0" target="_blank" class="text-accent hover:underline">NEXPOP Angola</a> </div> </div> </div> <div class="mt-8"> <h3 class="text-2xl font-bold mb-4">Horário de Atendimento</h3> <p>Segunda a Sexta: 9h às 17h</p> <p>Sábado: 10h às 14h</p> <p>Domingo: Fechado</p> </div> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-8"> <div class="container mx-auto px-4"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="mb-6 md:mb-0"> <h2 class="text-2xl font-bold">NEXPOP</h2> <p class="text-gray-400">Mais que pipocas, explosão de sabor!</p> </div> <div class="flex space-x-6"> <a href="https://web.facebook.com/nexpop1.0" target="_blank" class="hover:text-accent transition-colors"> <i class="fab fa-facebook-f text-2xl"></i> </a> <a href="#" class="hover:text-accent transition-colors"> <i class="fab fa-instagram text-2xl"></i> </a> <a href="#" class="hover:text-accent transition-colors"> <i class="fab fa-whatsapp text-2xl"></i> </a> </div> </div> <hr class="border-gray-800 my-8"> <div class="text-center"> <p class="text-gray-400">© 2023 NEXPOP Angola. Todos os direitos reservados.</p> </div> </div> </footer> <!-- WhatsApp Button --> <a href="https://wa.me/244940392698" target="_blank" class="whatsapp-button"> <i class="fab fa-whatsapp text-2xl"></i> </a> <script> // Mobile menu toggle document.getElementById('menu-toggle').addEventListener('click', function() { const mobileMenu = document.getElementById('mobile-menu'); mobileMenu.classList.toggle('hidden'); }); // Close mobile menu when clicking a link const mobileLinks = document.querySelectorAll('#mobile-menu a'); mobileLinks.forEach(link => { link.addEventListener('click', function() { document.getElementById('mobile-menu').classList.add('hidden'); }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); </script> </body> </html>
|
| 3 |
+
qual é o url ?
|