Projects Page restructure and New Home Banner for Impact Initiatives 2026 (#1206)

* Add projects page redesign with new components

- Add split-section component with light/dark themes and configurable backgrounds
- Add ordered-cards component for 4-card grid layout
- Add projects data file with categories and descriptions
- Add project page SVG assets and icons
- Update projects.md with new layout and dynamic content
- Add placeholder pages for collabs and community sections

* feat: add Creative Block header theme and update projects page styling

* feat: add hero animations and update banner images

* feat: add hero mask reveal animation and localize GSAP

* fix: add missing project ID 1 (Reference wallet)

* Update projects with correct descriptions and funding section

* feat(home): add Impact Initiatives callout and lock Creative Block theme

* chore(images): optimize PNG assets and add OG images for projects page

* style(header): flip text to be above image on mobile

* feat(projects): improve OG tags and add nav_title support

* chore(projects): change text from connect to join...

* fix(projects): render markdown in projects list description reported by @swedishfrenchpress

* style: improve projects page styling and fix content issues

- Fix markdown bold formatting in projects YAML by moving commas inside markers
- Enable markdown processing in project descriptions with markdownify filter
- Fix bold text color inheritance with !important to override global styles
- Add underlines to footer links for better visibility
- Remove spacing between split sections on mobile
- Update split section background graphics with new designs
- Fix duplicate project images for projects 16 and 17
- Increase Impact Initiatives heading size to h2 for consistency

* style(mobile): improve spacing and typography on projects page

- Add spacing after projects grid on mobile
- Increase intro text size to 24px on mobile
- Increase intro text line-height to 1.4 on mobile for better readability

* feat(projects): add Discord channel links for Humans of Bitcoin and BIP-353

- Add dedicated Discord channel link for Humans of Bitcoin project
- Update channel name from #general to #humans-of-bitcoin
- Add Discord channel link for BIP-353 (Human Bitcoin Addresses) project

* optimize: compress projects page images

Optimized 30 SVG and PNG files used on /projects page. Reference @GBKS for compression work.

* optimize: replace supergraphic SVG with smaller PNG

Converted supergraphic--community-projects-grid from SVG to PNG for reduced file size.

Author: johnsBeharry

.gitignore

@@ -3,6 +3,9 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+.bundle/
+.claude/
+_/
 
 # OS GENERATED
 .DS_Store

_data/projects.yaml

@@ -20,14 +20,19 @@
           {%- if my_page.title -%}
             {% assign current_page = page.url | replace:'/',' ' | truncatewords: 1,"" %}
             {% assign menu_page = my_page.url | replace:'/',' ' | truncatewords: 1,"" %}
-            <a class="page-link{% if current_page == menu_page %} active{% endif %}" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+            <a class="page-link{% if current_page == menu_page %} active{% endif %}" href="{{ my_page.url | relative_url }}">{{ my_page.nav_title | default: my_page.title | escape }}</a>
           {%- endif -%}
         {% endif %}
       {%- endfor -%}
     </nav>
 
   </div>
 
+  {% if page.url == '/projects/' %}
+  <script src="{{ "/js/gsap.min.js" | relative_url }}"></script>
+  <script src="{{ "/js/ScrollTrigger.min.js" | relative_url }}"></script>
+  {% endif %}
+
   <script src="{{ "/js/scripts.js" | relative_url }}"></script>
   <script src="{{ "/js/lunr.min.js" | relative_url }}"></script>
   <script src="{{ "/js/themes.js" | relative_url }}"></script>

_includes/footer.html

@@ -18,7 +18,7 @@
               {%- if my_page.title -%}
                 {% assign current_page = page.url | replace:'/',' ' | truncatewords: 1,"" %}
                 {% assign menu_page = my_page.url | replace:'/',' ' | truncatewords: 1,"" %}
-                <a class="page-link{% if current_page == menu_page %} active{% endif %}" href="{{ my_page.url | relative_url }}"{% if page.url == my_page.url %} aria-current="page"{% endif %}>{{ my_page.title | escape }}</a>
+                <a class="page-link{% if current_page == menu_page %} active{% endif %}" href="{{ my_page.url | relative_url }}"{% if page.url == my_page.url %} aria-current="page"{% endif %}>{{ my_page.nav_title | default: my_page.title | escape }}</a>
 
                 {%- if my_page.title contains 'Guide' -%}
                   {% include secondary-nav.html id="top" %}

_includes/header.html

@@ -5,12 +5,12 @@
           {% include_relative /assets/bitcoin-design-community-banner.svg svgId="banner-bitcoin-logo-svg" pathId="banner-bitcoin-logo-path" %}
       </div>
       <h1>
-        Design bitcoin for everyone
+        Design <em>your</em><br>new money
       </h1>
-      <p>Open-source design for bitcoin products.</p>
+      <p>We're at a tipping point in Bitcoin's design culture, seeking creative leaders for impact initiatives shaping how ownership is experienced.</p>
       <div class="home-banner-buttons-wrapper">
-        <a id="link-button-1" href="{{ site.discord_invite_url }}" rel="me">Join us on Discord</a>
-        <a id="link-button-2" href="{{ "/guide" | relative_url }}" >Design guide</a>
+        <a id="link-button-1" href="{{ "/projects" | relative_url }}">View Impact Initiatives</a>
+        <a id="link-button-2" href="{{ "/guide" | relative_url }}">Bitcoin Design Guide</a>
       </div>
     </div>
   </div>

_includes/home-banner.html

@@ -0,0 +1,21 @@
+<section class="split-section -full-width {{ include.class }}">
+  <div class="split-section__graphic {{ include.graphic_class }}" style="{% if include.graphic_color %}background-color: {{ include.graphic_color }};{% endif %}{% if include.graphic_bg_image %}background-image: url('{{ include.graphic_bg_image }}'); background-position: center center; background-repeat: no-repeat; background-size: cover;{% endif %}">
+    {% if include.graphic_image %}<img src="{{ include.graphic_image }}" alt="" class="split-section__graphic-image">{% endif %}
+  </div>
+  <div class="split-section__content" {% if include.content_color %}style="background-color: {{ include.content_color }};"{% endif %}>
+    <div class="split-section__inner">
+      {% if include.label %}
+      <span class="split-section__label">{{ include.label }}</span>
+      {% endif %}
+      {% if include.headline %}
+      <h2 class="split-section__headline">{{ include.headline }}</h2>
+      {% endif %}
+      <div class="split-section__body">
+        {{ include.body }}
+      </div>
+      {% if include.cta_text %}
+      <a href="{{ include.cta_url }}" class="button {{ include.cta_class | default: '-white' }}">{{ include.cta_text }}</a>
+      {% endif %}
+    </div>
+  </div>
+</section>

_includes/split-section.html

@@ -3,7 +3,7 @@
 
   {%- include head.html -%}
 
-  <body class="{% if page.path contains 'guide' %}sidebar{% endif %}">
+  <body class="{% if page.path contains 'guide' %}sidebar{% endif %}{% if page.body_class %} {{ page.body_class }}{% endif %}">
 
     <a class="skip-to-content-link" href="#main">
       Skip to content

_layouts/default.html

@@ -54,6 +54,26 @@ article.guide {
         border-color: var(--link-hover-color);
       }
     }
+
+    &.-white {
+      background-color: white;
+      color: #032869;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.9);
+        color: #032869;
+      }
+    }
+
+    &.-purple {
+      background-color: #AE66D6;
+      color: white;
+
+      &:hover {
+        background-color: darken(#AE66D6, 10%);
+        color: white;
+      }
+    }
   }
 
   a.video-link,

_sass/minima/_article.scss

@@ -0,0 +1,82 @@
+// Ordered Cards Component
+// Fits within standard article.guide 800px content width
+
+.ordered-cards-section {
+    padding: $spacing-unit * 2 0;
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.ordered-cards-container {
+    display: flex;
+    gap: $spacing-unit * 0.5;
+    align-items: flex-start;
+    width: 100%;
+
+    @include media-query(medium-down) {
+        flex-wrap: wrap;
+    }
+
+    @include media-query(small) {
+        flex-wrap: wrap;
+        gap: $spacing-unit * 0.5;
+    }
+}
+
+.ordered-card {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-unit * 0.5;
+    flex: 1;
+    min-width: 0;
+
+    @include media-query(medium-down) {
+        flex: 1 1 calc(50% - #{$spacing-unit * 0.25});
+        max-width: calc(50% - #{$spacing-unit * 0.25});
+    }
+
+    @include media-query(small) {
+        flex: 1 1 calc(50% - #{$spacing-unit * 0.25});
+        max-width: calc(50% - #{$spacing-unit * 0.25});
+    }
+
+    &__square {
+        width: 100%;
+        aspect-ratio: 1;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        img {
+            max-width: 50%;
+            max-height: 50%;
+            width: auto;
+            height: auto;
+        }
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-unit * 0.5;
+    }
+
+    // Reuse split-section label pattern
+    &__number {
+        font-family: $code-font-family;
+        font-size: $small-font-size;
+        text-transform: uppercase;
+        letter-spacing: 1.4px;
+        line-height: 1;
+    }
+
+    // Reuse base font size with tighter line-height
+    &__description {
+        font-size: $base-font-size;
+        line-height: 1.2;
+        letter-spacing: -0.02em;
+        margin: 0;
+    }
+}