landing page for new users

public/css/style.css

@@ -444,6 +444,70 @@ tr:hover {
   margin-bottom: 1rem;
 }
 
+/* ─── Loot Teaser Page ────────────────────────────────── */
+.teaser-page {
+  text-align: center;
+  padding: 3rem 1rem;
+  max-width: 480px;
+  margin: 0 auto;
+}
+
+.teaser-emoji {
+  font-size: 5rem;
+  margin-bottom: 0.5rem;
+}
+
+.teaser-headline {
+  font-size: 2.4rem;
+  font-weight: 800;
+  margin: 0 0 0.5rem;
+  color: var(--text);
+}
+
+.teaser-subtext {
+  font-size: 1.1rem;
+  color: var(--muted);
+  margin: 0 0 0.25rem;
+}
+
+.teaser-points {
+  font-size: 3.5rem;
+  font-weight: 900;
+  color: var(--primary);
+  margin: 0.25rem 0 1rem;
+  line-height: 1;
+}
+
+.teaser-points span {
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.teaser-cta {
+  font-size: 1.05rem;
+  color: var(--text);
+  margin-bottom: 1.5rem;
+}
+
+.teaser-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 2rem;
+}
+
+.teaser-buttons .btn-lg {
+  padding: 0.75rem 2rem;
+  font-size: 1.1rem;
+}
+
+.teaser-hunt-info {
+  font-size: 0.85rem;
+  color: var(--muted);
+  font-family: monospace;
+}
+
 /* ─── Package Profile ─────────────────────────────────── */
 .package-hero {
   text-align: center;
@@ -786,6 +850,12 @@ tr:hover {
     font-size: 3rem;
   }
 
+  /* Teaser */
+  .teaser-page { padding: 2rem 0.5rem; }
+  .teaser-emoji { font-size: 3.5rem; }
+  .teaser-headline { font-size: 1.8rem; }
+  .teaser-points { font-size: 2.8rem; }
+
   .points-badge.large {
     font-size: 1.5rem;
     padding: 0.4rem 1rem;

src/routes/loot.js

@@ -49,10 +49,20 @@ router.get('/:shortName/:code', (req, res) => {
     return res.render('loot/expired', { title: 'Hunt Expired', pkg });
   }
 
-  // If not logged in, save this URL and redirect to auth
+  // If not logged in, show teaser landing page
   if (!req.session.userId) {
     req.session.returnTo = req.originalUrl;
-    return res.redirect('/auth/login');
+    const hunt = Hunts.findById(pkg.hunt_id);
+    // Calculate potential points: next scan number determines points
+    const scanNumber = pkg.scan_count + 1;
+    const potentialPoints = scanNumber === 1 ? 500 : scanNumber === 2 ? 250 : scanNumber === 3 ? 100 : 50;
+    return res.render('loot/teaser', {
+      title: 'Loot Found!',
+      potentialPoints,
+      huntName: hunt.name,
+      cardNumber: pkg.card_number,
+      packageCount: hunt.package_count
+    });
   }
 
   // Perform the scan

src/views/loot/teaser.ejs

@@ -0,0 +1,36 @@
+<%- include('../partials/header') %>
+
+<div class="container">
+  <div class="teaser-page">
+    <div class="teaser-emoji" id="teaserEmoji">🎉</div>
+    <h1 class="teaser-headline" id="teaserHeadline">Nice find!</h1>
+    <p class="teaser-subtext">This loot is worth</p>
+    <div class="teaser-points"><%= potentialPoints %> <span>points</span></div>
+    <p class="teaser-cta">Sign in or create an account to claim it!</p>
+    <div class="teaser-buttons">
+      <a href="/auth/login" class="btn btn-primary btn-lg">Log In</a>
+      <a href="/auth/register" class="btn btn-success btn-lg">Sign Up</a>
+    </div>
+    <p class="teaser-hunt-info"><%= huntName %> &middot; Package <%= cardNumber %> of <%= packageCount %></p>
+  </div>
+</div>
+
+<script>
+(function() {
+  var messages = [
+    { emoji: '🎉', text: 'Nice find!' },
+    { emoji: '🔥', text: 'Woah, great discovery!' },
+    { emoji: '💎', text: 'You found treasure!' },
+    { emoji: '🏆', text: 'Lucky you!' },
+    { emoji: '⚡', text: 'What a score!' },
+    { emoji: '🎯', text: 'Bullseye!' },
+    { emoji: '🚀', text: 'Incredible find!' },
+    { emoji: '✨', text: 'Look what you found!' }
+  ];
+  var pick = messages[Math.floor(Math.random() * messages.length)];
+  document.getElementById('teaserEmoji').textContent = pick.emoji;
+  document.getElementById('teaserHeadline').textContent = pick.text;
+})();
+</script>
+
+<%- include('../partials/footer') %>