Spaces:
Running
Running
File size: 17,743 Bytes
b453440 8f9412f b453440 8f9412f b453440 8f9412f b453440 4977b16 b453440 35b3175 4977b16 8f9412f b453440 8f9412f b453440 30e51fe b453440 35b3175 b453440 35b3175 b453440 8f9412f 35b3175 b453440 35b3175 b453440 4977b16 35b3175 b453440 8f9412f b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 8f9412f b453440 8f9412f 35b3175 8f9412f 35b3175 8f9412f 35b3175 8f9412f 35b3175 8f9412f 35b3175 8f9412f 30e51fe 35b3175 8f9412f b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 35b3175 b453440 8f9412f b453440 8f9412f b453440 35b3175 b453440 35b3175 b453440 789fbd9 |
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 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 |
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Cidade dos 20 — Alma Shopping</title>
<meta name="description" content="Instala a app do Alma, encontra os 20 Corações espalhados por Coimbra, ganha moedas com QR codes e troca por prémios durante o 21º aniversário. Entra na Cidade dos 20." />
<!-- Open Graph / Social -->
<meta property="og:type" content="website" />
<meta property="og:title" content="A Cidade dos 20 — Joga por Coimbra, ganha no Alma" />
<meta property="og:description" content="20 corações. Mil prémios. Instala a app, segue o mapa e entra no jogo do 21º aniversário do Alma Shopping." />
<meta property="og:image" content="/og-cidade-dos-20.jpg" />
<meta property="og:url" content="https://alma.pt/cidade-dos-20" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" href="/favicon.ico" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
alma: {
bg: '#0B0C10',
ink: '#FFFFFF',
soft: '#C9CDD4',
red: '#FF2A4D',
redsoft: '#FF2A4D22'
}
},
fontFamily: {
sans: ['Inter','ui-sans-serif','system-ui']
},
boxShadow: {
glow: '0 0 0 4px rgba(255,42,77,0.25)'
}
}
}
}
</script>
<style>
.grain{position:relative}
.grain:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'140\' height=\'140\'><filter id=\'n\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.8\' numOctaves=\'2\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'table\' tableValues=\'0 0 0 0 0 0.08 0\'/></feComponentTransfer></filter><rect width=\'100%\' height=\'100%\' filter=\'url(%23n)\'/></svg>');mix-blend-mode:soft-light;opacity:.35}
</style>
</head>
<body class="bg-alma-bg text-alma-ink font-sans antialiased">
<!-- Sticky mobile CTA -->
<div class="fixed bottom-0 inset-x-0 z-50 md:hidden bg-black/80 backdrop-blur border-t border-white/10 px-4 py-3 flex items-center justify-between">
<span class="text-sm">A Cidade dos 20 já começou</span>
<a href="#download" class="px-4 py-2 rounded-xl bg-alma-red font-semibold">Descarregar</a>
</div>
<!-- HERO -->
<header class="relative overflow-hidden grain">
<div aria-hidden="true" class="absolute -top-40 right-[-10%] h-[40rem] w-[40rem] rounded-full bg-alma-redsoft blur-3xl"></div>
<div class="max-w-7xl mx-auto px-6 pt-16 pb-20 md:pt-28 md:pb-28 relative">
<div class="max-w-3xl">
<p class="uppercase tracking-widest text-alma-soft/80 text-xs mb-3">Revelação • 01.04.2026</p>
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight">A Cidade dos 20</h1>
<p class="mt-4 text-lg md:text-xl text-alma-soft">O centro não fechou. <span class="text-white font-semibold">Espalhou-se por Coimbra.</span> Encontra <span class="font-semibold text-white">20 Corações</span> e <span class="font-semibold text-white">lê os QR codes</span> nesta celebração dos <span class="font-semibold text-white">20 anos do Alma Shopping</span>. Ganha <span class="font-semibold text-white">moedas</span> e troca por <span class="font-semibold text-white">prémios</span>.</p>
<div class="mt-8 flex flex-col sm:flex-row gap-3">
<a href="#download" class="inline-flex items-center justify-center px-5 py-3 rounded-2xl bg-alma-red font-semibold shadow-glow">Descarregar a App</a>
<a href="#como-funciona" class="inline-flex items-center justify-center px-5 py-3 rounded-2xl border border-white/20 hover:border-white/40">Como funciona</a>
</div>
<div class="mt-6 text-sm text-alma-soft">Disponível para iOS e Android</div>
</div>
</div>
</header>
<!-- TRUST / DOWNLOAD -->
<section id="download" class="bg-white text-black">
<div class="max-w-7xl mx-auto px-6 py-12 md:py-16 grid md:grid-cols-2 gap-10 items-center">
<div>
<h2 class="text-2xl md:text-3xl font-extrabold">Entra no jogo</h2>
<p class="mt-3 text-zinc-700">Instala a app do Alma, cria conta e ativa a localização. Segue o mapa, encontra os 20 Corações e ganha moedas com os QR codes. Troca as tuas moedas por prémios durante o mês de abril.</p>
<div class="mt-6 flex flex-wrap gap-3">
<!-- Substituir pelos links reais -->
<a href="#" class="px-4 py-3 rounded-xl bg-black text-white font-semibold">App Store</a>
<a href="#" class="px-4 py-3 rounded-xl bg-black text-white font-semibold">Google Play</a>
</div>
<ul class="mt-6 space-y-2 text-sm text-zinc-700">
<li>• Requer iOS 14+ ou Android 9+</li>
<li>• Permitir localização para ver o mapa</li>
<li>• Permitir câmara para ler QR codes</li>
</ul>
</div>
<div class="relative">
<div class="aspect-[10/16] w-full rounded-3xl bg-zinc-100 border border-zinc-200 shadow-xl flex items-center justify-center">
<span class="text-zinc-400">Mockup do ecrã da app (placeholder)</span>
</div>
<div class="absolute -bottom-4 -left-4 hidden md:block rotate-[-6deg] bg-black text-white px-4 py-2 rounded-xl text-sm">A Cidade dos 20 já começou</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="como-funciona" class="relative">
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
<div class="max-w-3xl">
<h2 class="text-2xl md:text-4xl font-extrabold">Como funciona</h2>
<p class="mt-3 text-alma-soft max-w-prose">Duas formas de ganhar moedas — joga na cidade e no Alma.</p>
</div>
<div class="grid md:grid-cols-5 gap-6 mt-10">
<div class="p-5 rounded-2xl border border-white/10 bg-white/5">
<div class="text-4xl">1</div>
<h3 class="mt-2 font-semibold text-xl">Instala a app</h3>
<p class="mt-1 text-alma-soft">Ganhas <span class="text-white font-semibold">+1 moeda</span> inicial. <span class="text-white font-semibold">Instalação antecipada 20/03–21/03: +5 moedas</span>.</p>
</div>
<div class="p-5 rounded-2xl border border-white/10 bg-white/5">
<div class="text-4xl">2</div>
<h3 class="mt-2 font-semibold text-xl">Abre todos os dias</h3>
<p class="mt-1 text-alma-soft">A 1.ª abertura diária vale <span class="text-white font-semibold">+1 moeda</span>.</p>
</div>
<div class="p-5 rounded-2xl border border-white/10 bg-white/5">
<div class="text-4xl">3</div>
<h3 class="mt-2 font-semibold text-xl">Faz compras no Alma</h3>
<p class="mt-1 text-alma-soft"><span class="text-white font-semibold">+1 moeda por cada 5€</span> (mostra o QR da app na caixa).</p>
</div>
<div class="p-5 rounded-2xl border border-white/10 bg-white/5">
<div class="text-4xl">4</div>
<h3 class="mt-2 font-semibold text-xl">Explora & descobre</h3>
<p class="mt-1 text-alma-soft">Encontra os 20 Corações e lê os QR codes para ganhar moedas e vouchers.</p>
</div>
<div class="p-5 rounded-2xl border border-white/10 bg-white/5">
<div class="text-4xl">5</div>
<h3 class="mt-2 font-semibold text-xl">Troca por prémios</h3>
<p class="mt-1 text-alma-soft">Descontos, experiências e surpresas no Alma.</p>
</div>
</div>
<div class="mt-12 grid md:grid-cols-2 gap-6">
<div class="p-6 rounded-3xl border border-white/10 bg-white/5">
<h3 class="font-semibold text-xl">Na cidade</h3>
<p class="text-alma-soft mt-2">Segue o mapa, encontra os 20 Corações e lê os QR codes. Cada coração dá-te <span class="text-white font-semibold">+1 moeda</span> e um <span class="text-white font-semibold">vale de desconto válido por 48h</span> numa loja aderente.</p>
<ul class="mt-4 space-y-2 text-alma-soft">
<li>• Usa o vale e ganha <span class="text-white font-semibold">+1 moeda por cada 5€</span> gastos.</li>
</ul>
</div>
<div class="p-6 rounded-3xl border border-white/10 bg-white/5">
<h3 class="font-semibold text-xl">No Alma</h3>
<p class="text-alma-soft mt-2">Durante o mês de abril, cada <span class="text-white font-semibold">5€ em compras</span> dão-te <span class="text-white font-semibold">+1 moeda</span>. Mostra o <span class="text-white font-semibold">QR da app</span> na caixa para registar automaticamente.</p>
<ul class="mt-4 space-y-2 text-alma-soft">
<li>• <span class="text-white font-semibold">Moedas a duplicar</span> aos fins de semana.</li>
<li>• Parceiros com ofertas exclusivas.</li>
</ul>
</div>
</div>
</div>
</section>
<!-- EARNING RULES -->
<section id="ganhar-moedas" class="bg-white text-black">
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
<div class="max-w-3xl">
<h2 class="text-2xl md:text-4xl font-extrabold">Como ganhas moedas</h2>
<p class="mt-3 text-zinc-700">Acumula moedas a jogar na cidade e a comprar no Alma durante o mês de abril.</p>
</div>
<div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<h3 class="font-semibold">Visita a app diariamente</h3>
<p class="text-zinc-600 mt-1 text-sm">A 1.ª abertura do dia vale <strong>+1 moeda</strong>.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<h3 class="font-semibold">Encontrar corações</h3>
<p class="text-zinc-600 mt-1 text-sm">Cada QR lido = <strong>+1 moeda</strong> + <strong>vale 48h</strong> de desconto.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<h3 class="font-semibold">Usar o vale</h3>
<p class="text-zinc-600 mt-1 text-sm">Ao usar o vale numa loja aderente, recebes <strong>+1 moeda por cada 5€</strong> em compras.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<h3 class="font-semibold">Compras no Alma</h3>
<p class="text-zinc-600 mt-1 text-sm"><strong>+1 moeda por cada 5€</strong> (mostra o QR da app na caixa).</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<h3 class="font-semibold">Arranque antecipado</h3>
<p class="text-zinc-600 mt-1 text-sm">Instalação 20/03–21/03 rende <strong>+5 moedas</strong> extra.</p>
</div>
</div>
</div>
</section>
<!-- REWARDS -->
<section id="premios" class="bg-white text-black">
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
<div class="max-w-3xl">
<h2 class="text-2xl md:text-4xl font-extrabold">Prémios & Experiências</h2>
<p class="mt-3 text-zinc-700">As tuas moedas são o teu <strong>saldo</strong> dentro do jogo. Podes acumular e trocar quando e no que quiseres — quanto mais moedas tiveres, maior o prémio.</p>
</div>
<div class="mt-8 grid md:grid-cols-3 gap-6">
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<div class="text-sm text-zinc-500">A partir de</div>
<div class="text-3xl font-extrabold">25 moedas</div>
<h3 class="mt-2 font-semibold">Prémios de entrada</h3>
<p class="text-zinc-600 mt-1 text-sm">Vouchers de lojas aderentes, bilhetes de cinema, menus na restauração do Alma.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<div class="text-sm text-zinc-500">A partir de</div>
<div class="text-3xl font-extrabold">60 moedas</div>
<h3 class="mt-2 font-semibold">Prémios intermédios</h3>
<p class="text-zinc-600 mt-1 text-sm">Packs de experiências Alma, Cartões-Oferta Alma (50€).</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
<div class="text-sm text-zinc-500">A partir de</div>
<div class="text-3xl font-extrabold">120 moedas</div>
<h3 class="mt-2 font-semibold">Grandes prémios</h3>
<p class="text-zinc-600 mt-1 text-sm">Cartões-Oferta Alma (100€), vouchers de tecnologia, experiências Alma VIP.</p>
</div>
</div>
</div>
</section>
<!-- LEADERBOARD & REGRAS -->
<section id="coleciona" class="relative">
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
<div class="rounded-3xl border border-white/10 bg-white/5 p-8 md:p-12">
<h2 class="text-2xl md:text-4xl font-extrabold">Coleciona, partilha e ganha</h2>
<p class="mt-3 text-alma-soft">A tua coleção de moedas não tem fim. Completa a caderneta as vezes que conseguires. Cada visita, compra ou descoberta faz crescer o teu saldo — e podes <span class="text-white font-semibold">partilhar moedas</span> com amigos ou família para chegarem mais depressa aos prémios maiores.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="bg-white text-black">
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
<div class="max-w-3xl">
<h2 class="text-2xl md:text-4xl font-extrabold">Perguntas frequentes</h2>
</div>
<div class="mt-8 grid md:grid-cols-2 gap-6">
<div class="p-6 rounded-3xl border border-zinc-200 bg-white">
<h3 class="font-semibold">E se não conseguir encontrar todos os Pontos D’Alma (corações)?</h3>
<p class="text-zinc-600 mt-1">Não faz mal — cada leitura do QR code num coração vale <strong>+1 moeda</strong> e atribui um voucher de loja aderente válido por <strong>48h</strong>. Apenas é permitido <strong>um scan por coração</strong> (anti-fraude ativo). Mesmo sem completar os 20, podes ganhar prémios por patamares com as moedas da tua caderneta digital.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white">
<h3 class="font-semibold">Como valido compras no Alma?</h3>
<p class="text-zinc-600 mt-1">Mostra o <strong>QR da app</strong> na caixa no momento da compra. Recebes <strong>+1 moeda por cada 5€</strong>. Aos fins de semana, as moedas <strong>duplicam</strong>.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white">
<h3 class="font-semibold">Partilha de moedas</h3>
<p class="text-zinc-600 mt-1">Podes transferir moedas para amigos ou família através da app. A partilha é irreversível e fica registada no teu histórico.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white">
<h3 class="font-semibold">Privacidade</h3>
<p class="text-zinc-600 mt-1">Usamos localização aproximada para ativar o mapa. Os dados são tratados segundo o RGPD.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white">
<h3 class="font-semibold">Validade</h3>
<p class="text-zinc-600 mt-1">Campanha válida durante abril de 2026. As moedas acumuladas até ao final da campanha podem ser trocadas até <strong>05.04.2026</strong>. Consulta termos completos na app.</p>
</div>
<div class="p-6 rounded-3xl border border-zinc-200 bg-white">
<h3 class="font-semibold">Suporte</h3>
<p class="text-zinc-600 mt-1">Dúvidas? Fala connosco via chat in‑app ou em <em>contacto@alma.pt</em>.</p>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section id="cta" class="relative grain">
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24">
<div class="rounded-3xl border border-white/10 bg-white/5 p-8 md:p-12 text-center">
<h2 class="text-3xl md:text-4xl font-extrabold">O jogo começou. Estás dentro?</h2>
<p class="mt-3 text-alma-soft max-w-2xl mx-auto">Instala a app, segue o coração e celebra os 21 anos do Alma por toda a cidade.</p>
<div class="mt-6 flex flex-wrap gap-3 justify-center">
<a href="#" class="px-5 py-3 rounded-2xl bg-alma-red font-semibold shadow-glow">Descarregar App</a>
<a href="#download" class="px-5 py-3 rounded-2xl border border-white/20 hover:border-white/40">Saber mais</a>
</div>
<div class="mt-8 mx-auto max-w-sm border border-white/10 rounded-2xl p-4">
<div class="text-sm text-alma-soft">Preferes em desktop?</div>
<div class="mt-2 bg-white text-black rounded-xl aspect-square flex items-center justify-center">QR code para a app (placeholder)</div>
</div>
</div>
</div>
</section>
<footer class="border-t border-white/10">
<div class="max-w-7xl mx-auto px-6 py-10 text-sm text-alma-soft flex flex-col md:flex-row gap-3 md:items-center md:justify-between">
<div>© 2026 Alma Shopping — A Cidade dos 20</div>
<div class="flex flex-wrap gap-4">
<a href="#" class="hover:text-white">Termos & Condições</a>
<a href="#" class="hover:text-white">Política de Privacidade</a>
<a href="#" class="hover:text-white">Contactos</a>
</div>
</div>
</footer>
</body>
</html>
|