refactor goverance page, put in home

Author: marco66colombo

_config.yml

@@ -35,8 +35,8 @@ navbar:
       link: "#collaboration"
       autoscroll: true
     - name: Governance
-      link: "/governance.html"
-      autoscroll: false
+      link: "#governance"
+      autoscroll: true
     - name: Sponsors/Partners
       link: "#sponsors"
       autoscroll: true

_includes/nav.html

@@ -28,8 +28,6 @@
 					{% endif %}
 				</li>
 				{% endfor %}
-
-				</li>
 			</ul>
 		</div>
 </nav>

css/style.css

@@ -12,6 +12,7 @@
 #events,
 #resources,
 #collaboration,
+#governance,
 #sponsors {
     scroll-margin-top: var(--navbar-offset);
 }

governance.html

@@ -143,7 +143,7 @@ <h4 class="card-title text-center">{{ resource.title }}</h4>
         </div>
     </div>
     <div class="bg-primary container-fluid" id="collaboration">
-        <div class="px-4 my-5 pt-5 text-center text-light">
+        <div class="px-4 my-5 pt-5 pb-5 text-center text-light">
             <h1 class="display-5 fw-bold">Collaboration</h1>
             <div class="col-lg-6 mx-auto">
                 <p class="lead mb-4">{{site.collaboration.byline}}</p>
@@ -165,6 +165,61 @@ <h2 class="h3 fw-bold text-center">Collaborating Institutes</h2>
             </div>
         </div>
     </div>
+    <div class="bg-light container-fluid">
+        <div class="px-4 py-5 my-5 governance-page" id="governance">
+            <div class="governance-header text-center">
+                <h1 class="display-5 fw-bold">Governance</h1>
+                <p class="lead">Leadership and advisory groups guiding the Foundation's mission and programs.</p>
+            </div>
+
+            <section class="governance-section">
+                <div class="section-title">
+                    <h2 class="h4 fw-bold">Board of Directors</h2>
+                    <p class="text-muted">Executive leadership.</p>
+                </div>
+                <div class="leadership-grid">
+                    {% for member in site.data.board %}
+                    {% assign name_parts = member.name | split: ' ' %}
+                    {% assign first_initial = name_parts[0] | slice: 0 %}
+                    {% assign second_initial = name_parts[1] | slice: 0 %}
+                    <div class="leadership-card">
+                        <div class="leadership-avatar">
+                            {% if member.image %}
+                            <img src="{{ site.baseurl }}{{ member.image }}" alt="{{ member.name }}" />
+                            {% else %}
+                            <span>{{ first_initial }}{{ second_initial }}</span>
+                            {% endif %}
+                        </div>
+                        <div class="leadership-meta">
+                            <div class="leadership-name">{{ member.name }}</div>
+                            <div class="leadership-role">{{ member.role }}</div>
+                            <div class="leadership-inst">{{ member.institution }}</div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </section>
+
+            <section class="governance-section">
+                <div class="section-title">
+                    <h2 class="h4 fw-bold">Advisory Council</h2>
+                    <p class="text-muted">Representatives from collaborating institutes.</p>
+                </div>
+                <div class="advisory-grid advisory-grid--wide">
+                    {% for entry in site.data.advisory_council %}
+                    <div class="advisory-card">
+                        <div class="advisory-row">
+                            <div class="advisory-name">{{ entry.name }}</div>
+                            <div class="advisory-details">
+                                <div class="advisory-inst">{{ entry.institution }}</div>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+            </section>
+        </div>
+    </div>
     <div class="bg-light container-fluid">
         <div class="px-4 my-5 text-center" id="sponsors">
             <h1 class="pb-4 display-5 fw-bold">Sponsors and Partners</h1>