Manual changes saved

index.html

@@ -5,14 +5,16 @@
   <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="http://static.photos/red/1200x630/42" />
-  <meta property="og:url" content="https://almaheartquest.com" />
+  <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 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>
@@ -74,11 +76,11 @@
         <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">
-        <!-- App download links -->
-        <a href="https://apps.apple.com/pt/app/alma-shopping/id1234567890" class="px-4 py-3 rounded-xl bg-black text-white font-semibold">App Store</a>
-        <a href="https://play.google.com/store/apps/details?id=pt.alma.shopping" class="px-4 py-3 rounded-xl bg-black text-white font-semibold">Google Play</a>
-        <a href="#qr" class="px-4 py-3 rounded-xl border border-black/20">Ler QR code</a>
-</div>
+          <!-- 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>
+          <a href="#qr" class="px-4 py-3 rounded-xl border border-black/20">Ler QR code</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>
@@ -90,7 +92,7 @@
           <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>
     </div>
   </section>
 
@@ -99,61 +101,102 @@
     <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>
+        <p class="mt-3 text-alma-soft max-w-prose">Duas formas de ganhar moedas — joga na cidade e no Alma. E há bónus diários para manteres o ritmo.</p>
       </div>
 
       <div class="grid md:grid-cols-4 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">Cria conta e ativa a localização.</p>
+          <p class="mt-1 text-alma-soft">Recebes <span class="text-white font-semibold">+1 moeda</span> inicial automaticamente.</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">Explora a cidade</h3>
-          <p class="mt-1 text-alma-soft">Encontra os 20 Corações no mapa.</p>
+          <h3 class="mt-2 font-semibold text-xl">Abre todos os dias</h3>
+          <p class="mt-1 text-alma-soft">A primeira 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">Scana e ganha</h3>
-          <p class="mt-1 text-alma-soft">Lê os QR codes e recebe moedas.</p>
+          <h3 class="mt-2 font-semibold text-xl">Explora & scana</h3>
+          <p class="mt-1 text-alma-soft">Encontra os 20 Corações e lê os QR codes para ganhar moedas.</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">Troca por prémios</h3>
-          <p class="mt-1 text-alma-soft">Descontos, experiências e surpresas.</p>
+          <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. Alguns têm bónus, incluindo o <span class="text-white font-semibold">Coração Dourado</span>.</p>
+          <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 24h</span> numa loja aderente.</p>
           <ul class="mt-4 space-y-2 text-alma-soft">
-            <li>• Pistas diárias nas redes sociais</li>
-            <li>• Bónus por completar 5 / 10 / 20 corações</li>
-            <li>• Leaderboard com prémios semanais</li>
+            <li>• Usa o vale: ganhas <span class="text-white font-semibold">moedas extra</span>.</li>
+            <li>• Pistas diárias nas redes sociais.</li>
+            <li>• Bónus por completar 5 / 10 / 20 corações.</li>
+            <li>• Leaderboard com prémios semanais.</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 abril, <span class="text-white font-semibold">cada compra</span> no Alma dá-te <span class="text-white font-semibold">moedas extra</span>. Mostra o teu QR da app na caixa.</p>
+          <p class="text-alma-soft mt-2">Durante abril, <span class="text-white font-semibold">cada compra</span> no Alma dá-te <span class="text-white font-semibold">+1 moeda por cada 5€</span>. Mostra o teu QR da app na caixa no momento da compra.</p>
           <ul class="mt-4 space-y-2 text-alma-soft">
-            <li>• Multiplicadores em dias especiais</li>
-            <li>• Parceiros com ofertas exclusivas</li>
-            <li>• Surpresas instantâneas via app</li>
+            <li>• Multiplicadores em dias especiais.</li>
+            <li>• Parceiros com ofertas exclusivas.</li>
+            <li>• Surpresas instantâneas via app.</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 jogando na cidade e comprando no Alma durante 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">Instala a app</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Recebes <strong>+1 moeda</strong> inicial na tua caderneta.</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Abertura diária</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 24h</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">Quando usas o vale numa loja aderente, recebes <strong>moedas extra</strong>.</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> de compras (mostra o teu QR na caixa).</p>
+        </div>
+        <div class="p-6 rounded-3xl border border-zinc-200 bg-white shadow-sm">
+          <h3 class="font-semibold">Bónus & desafios</h3>
+          <p class="text-zinc-600 mt-1 text-sm">Bónus por 5/10/20 corações e desafios semanais com moedas 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">Troca as tuas moedas por ofertas no Alma. Exemplos ilustrativos (podem variar):</p>
+        <p class="mt-3 text-zinc-700">Troca as tuas moedas por ofertas no Alma. Níveis de referência:</p>
+        <ul class="mt-4 text-zinc-700 list-disc pl-5">
+          <li><strong>20 moedas</strong> — prémio de entrada (ex.: voucher loja aderente)</li>
+          <li><strong>50 moedas</strong> — prémio intermédio (ex.: pack experiência)</li>
+          <li><strong>100 moedas</strong> — grande prémio (ex.: Cartão-Oferta Alma 100€)</li>
+        </ul>
       </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">
@@ -202,8 +245,8 @@
           <ol class="list-decimal pl-5 mt-3 space-y-2 text-alma-soft">
             <li>Participação gratuita com a app instalada.</li>
             <li>Um scan por coração/conta (anti-fraude ativo).</li>
+            <li>Apresenta o <strong>QR da app</strong> no momento da compra para receber moedas.</li>
             <li>As moedas expiram a 30/04; troca antes dessa data.</li>
-            <li>Compras no Alma: apresenta o QR da app na caixa.</li>
             <li>Consulta termos completos na app/landing.</li>
           </ol>
         </div>
@@ -253,16 +296,14 @@
         <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="https://apps.apple.com/pt/app/alma-shopping/id1234567890" class="px-5 py-3 rounded-2xl bg-alma-red font-semibold shadow-glow">Descarregar App</a>
+          <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">
-            <img src="http://api.qrserver.com/v1/create-qr-code/?data=https://almaheartquest.com&size=200x200&margin=10" alt="QR Code para o site" class="w-full h-full rounded-xl"/>
-          </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>
     </div>
   </section>
 
@@ -270,11 +311,11 @@
     <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="/termos.html" class="hover:text-white">Termos & Condições</a>
-        <a href="/privacidade.html" class="hover:text-white">Política de Privacidade</a>
-        <a href="mailto:info@almaheartquest.com" class="hover:text-white">Contactos</a>
+        <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>
+    </div>
   </footer>
 </body>
 </html>