From d3d4522b977822cab2e6085b980717c7220aaefb Mon Sep 17 00:00:00 2001
From: another-simple-pixel <anton.m.egorov@gmail.com>
Date: Mon, 15 Jun 2026 09:08:27 -0700
Subject: [PATCH] website: switch the home first section via a homeHero flag

Adds homeHero global data (default | testing-water | crowdfunding-full)
plus a placeholder wefunderUrl. index.html renders the current hero
verbatim when default (outside <main>), otherwise includes the
crowdfunding partial inside <main> after .section-bg so it reuses the
shared sticky gradient. Gates the cover-image preloads to default, and
makes the nav / mobile-header observers tolerate a missing .cover so the
crowd hero gets the blue nav like sections 2+. Revert = homeHero default.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 website/.eleventy.js   |  6 ++++++
 website/src/index.html | 11 +++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/website/.eleventy.js b/website/.eleventy.js
index f0310c5665..025914f9b6 100644
--- a/website/.eleventy.js
+++ b/website/.eleventy.js
@@ -95,6 +95,12 @@ module.exports = function (ty) {
   const catPills = Object.keys(catCounts).sort()
   ty.addGlobalData("linkPills", mediaPills.concat(catPills))
 
+  // Home first-section variant: "default" | "testing-water" | "crowdfunding-full".
+  // Selects which hero index.html renders; "default" = the current site, untouched.
+  ty.addGlobalData("homeHero", "default")
+  // TODO: replace with the live SimpleX campaign URL once the Wefunder page exists.
+  ty.addGlobalData("wefunderUrl", "https://wefunder.com/")
+
   ty.addShortcode("cfg", (name) => globalConfig[name])
 
   ty.addFilter("getlang", (path) => {
diff --git a/website/src/index.html b/website/src/index.html
index ba4494ab1d..66a7993fe7 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -36,8 +36,10 @@ active_home: true
     <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
     <meta name="theme-color" content="#C1E3FE">
 
+    {%- if homeHero == 'default' -%}
     <link rel="preload" href="/img/design_3/cover.webp" as="image" type="image/webp">
     <link rel="preload" href="/img/design_3/cover-light.webp" as="image" type="image/webp" media="(prefers-color-scheme: light)">
+    {%- endif -%}
     <link rel="preload" href="/img/new/logo-dark.png" as="image">
     <link rel="preload" href="/img/new/logo-light.png" as="image" media="(prefers-color-scheme: light)">
     <link rel="preload" href="/img/design_3/publications/trail-of-bits.png" as="image">
@@ -94,6 +96,7 @@ active_home: true
     {% set lang = page.url | getlang %}
 
     <div class="screen">
+        {%- if homeHero == 'default' -%}
         <section class="page-1 cover page">
             <div class="area">
                 <div class="content">
@@ -152,9 +155,13 @@ active_home: true
                 </div>
             </div>
         </section>
+        {%- endif -%}
 
         <main>
             <div class="section-bg"></div>
+            {%- if homeHero != 'default' -%}
+            {% include "hero-crowdfunding.html" %}
+            {%- endif -%}
 
             <section id="messaging" class="page-2 page">
                 <div class="area">
@@ -271,7 +278,7 @@ active_home: true
         const header = document.querySelector('header#navbar');
         const cover = document.querySelector('.page-1.cover');
         const footer = document.querySelector('.footer.page');
-        if (!header || !cover || !footer || !('IntersectionObserver' in window)) {
+        if (!header || !footer || !('IntersectionObserver' in window)) {
             window.addEventListener('load', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10));
             window.addEventListener('scroll', () => header && document.body.classList.toggle('change-nav-color', window.scrollY > 10));
             return;
@@ -281,7 +288,7 @@ active_home: true
             const onObserved = entries.some((e) => e.isIntersecting && e.intersectionRatio >= 0.02);
             document.body.classList.toggle('change-nav-color', !onObserved);
         }, { threshold: [0, 0.02, 1] });
-        io.observe(cover);
+        if (cover) io.observe(cover);
         io.observe(footer);
     })();
     </script>