From 7a42b8bfa32988caafedd5cfbe8a185855113c4d Mon Sep 17 00:00:00 2001
From: Henrik Jess Nielsen <lrihni@egmont.com>
Date: Sun, 26 Apr 2026 23:12:10 +0200
Subject: [PATCH] Improve landing page: hero CTA, founding member note, share
 box on tak

- Add hero CTA button linking directly to signup form (#tilmeld anchor)
- Add id='tilmeld' anchor to signup section
- Add founding-note: early signups shape the initiative
- Improve /tak page: share box with pre-written copy-paste text + clipboard button
- Update tak contact link styling (remove inline styles)
- Add CSS for .hero-cta, .founding-note, .share-box, .copy-btn, .copy-confirm
---
 static/style.css     | 107 +++++++++++++++++++++++++++++++++++++++++++
 templates/index.html |   4 +-
 templates/tak.html   |  27 ++++++++++-
 3 files changed, 135 insertions(+), 3 deletions(-)

diff --git a/static/style.css b/static/style.css
index 2ba0c22..3ca0b64 100644
--- a/static/style.css
+++ b/static/style.css
@@ -103,6 +103,24 @@ header nav {
     padding-left: 1rem;
 }
 
+.hero-cta {
+    display: inline-block;
+    margin-top: 2rem;
+    padding: 0.875rem 2rem;
+    background: var(--primary);
+    color: var(--white);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.975rem;
+    border-radius: 0;
+    transition: background 0.15s;
+    letter-spacing: 0.01em;
+}
+
+.hero-cta:hover {
+    background: var(--primary-d);
+}
+
 /* ── Sections ────────────────────────── */
 .section {
     padding: 3.5rem 1.5rem;
@@ -356,6 +374,16 @@ header nav {
     padding-left: 1rem;
 }
 
+.form-section .founding-note {
+    color: var(--dark) !important;
+    font-size: 0.9rem !important;
+    margin-bottom: 1rem;
+    background: var(--primary-bg);
+    border-left: 3px solid var(--primary);
+    padding: 0.75rem 1rem;
+    line-height: 1.6;
+}
+
 .signup-form {
     margin-top: 1.5rem;
 }
@@ -554,6 +582,85 @@ footer {
     text-decoration: underline;
 }
 
+.tak-contact {
+    font-size: 0.82rem;
+    color: var(--muted);
+    margin-top: 1.25rem;
+    margin-bottom: 0;
+}
+
+.tak-contact a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+.tak-contact a:hover {
+    text-decoration: underline;
+}
+
+/* ── Share box (tak page) ────────────── */
+.share-box {
+    margin: 2rem 0 1.5rem;
+    background: var(--gray-10);
+    border: 1px solid var(--gray-20);
+    padding: 1.5rem;
+    text-align: left;
+}
+
+.share-heading {
+    font-size: 0.9rem !important;
+    font-weight: 700;
+    color: var(--dark) !important;
+    margin-bottom: 0.4rem !important;
+}
+
+.share-sub {
+    font-size: 0.82rem !important;
+    color: var(--muted) !important;
+    margin-bottom: 1rem !important;
+    line-height: 1.55;
+}
+
+.share-text {
+    background: var(--white);
+    border: 1px solid var(--gray-20);
+    padding: 0.875rem 1rem;
+    font-size: 0.82rem;
+    color: var(--text);
+    line-height: 1.55;
+    font-family: var(--mono);
+    margin-bottom: 0.75rem;
+    word-break: break-word;
+    user-select: all;
+    cursor: text;
+}
+
+.copy-btn {
+    background: var(--dark);
+    color: var(--white);
+    border: none;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.82rem;
+    font-weight: 600;
+    border-radius: 0;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background 0.15s;
+}
+
+.copy-btn:hover {
+    background: #333;
+}
+
+.copy-confirm {
+    display: none;
+    margin-left: 0.75rem;
+    font-size: 0.82rem;
+    color: var(--green);
+    font-family: var(--mono);
+    font-weight: 500;
+}
+
 /* ── Admin ───────────────────────────── */
 .admin-section {
     padding: 2rem 1.5rem;
diff --git a/templates/index.html b/templates/index.html
index 22de261..ccfac68 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,6 +14,7 @@
             Det rammer dig, der kører egne navneservere og aldrig har haft brug for hjælp.
             Vi undersøger, om vi kan gøre noget ved det — på vores egne præmisser.
         </p>
+        <a href="#tilmeld" class="hero-cta">Tilmeld din interesse →</a>
     </div>
 </section>
 
@@ -104,10 +105,11 @@
 </section>
 
 <!-- 6. Signup -->
-<section class="section form-section">
+<section class="section form-section" id="tilmeld">
     <div class="section-inner">
         <h2>Er du interesseret?</h2>
         <p class="lead">Tilmeld dig som interesseret — det forpligter dig til ingenting.</p>
+        <p class="founding-note">De første, der tilmelder sig, er med til at afgøre, om idéen er levedygtig — og får direkte indflydelse på, hvordan foreningen eventuelt formes.</p>
         <p class="disclaimer">
             Vi bruger dine oplysninger til at vurdere, om der er tilstrækkelig interesse til at gå videre.
             Ingen spam, ingen salg, ingen automatiske abonnementer. Kun en enkelt opdatering, når vi ved mere.
diff --git a/templates/tak.html b/templates/tak.html
index 8b043b8..04fa5c3 100644
--- a/templates/tak.html
+++ b/templates/tak.html
@@ -12,10 +12,33 @@
             Vi vender tilbage med en enkelt opdatering, når vi ved, om der er tilstrækkelig
             interesse til at gå videre med idéen.
         </p>
-        <p style="font-size: 0.8rem; color: #9ca3af;">
-            Spørgsmål? Skriv til <a href="mailto:info@punktfri.dk" style="color: #6366f1;">info@punktfri.dk</a>
+
+        <div class="share-box">
+            <p class="share-heading">Kender du andre, der er i samme situation?</p>
+            <p class="share-sub">
+                Jo flere selvhostere der tilkendegiver interesse, jo bedre argumenterer vi overfor
+                Punktum dk og potentielle medstiftere. Send dem linket.
+            </p>
+            <div class="share-text" id="shareText">Punktum dk tvinger fra 2026 alle .dk-domæneejere ind under en kommerciel forhandler — selvom du kører egne navneservere og aldrig har haft brug for hjælp. PunktFri undersøger, om vi kan lave en non-profit registrator til os selv. Tilmeld din interesse: https://punktfri.dk</div>
+            <button class="copy-btn" onclick="copyShare()">Kopiér tekst</button>
+            <span class="copy-confirm" id="copyConfirm">Kopieret!</span>
+        </div>
+
+        <p class="tak-contact">
+            Spørgsmål? Skriv til <a href="mailto:info@punktfri.dk">info@punktfri.dk</a>
         </p>
         <a href="/" class="back-link">← Tilbage til forsiden</a>
     </div>
 </section>
+
+<script>
+function copyShare() {
+    var text = document.getElementById('shareText').innerText;
+    navigator.clipboard.writeText(text).then(function() {
+        var confirm = document.getElementById('copyConfirm');
+        confirm.style.display = 'inline';
+        setTimeout(function() { confirm.style.display = 'none'; }, 2500);
+    });
+}
+</script>
 {% endblock %}