Spaces:
Running
Running
| <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> | |