Add About section: Mission & Vision, Founding Board, Contact Us

- Add real social links (LinkedIn, X, GitHub, Mastodon, Slack) to the
  site footer and fix a wrong Twitter/GitHub handle in hugo.yaml
- Add an "About" dropdown to the main nav (About > Mission & Vision,
  Founding Board, Contact Us), with a mobile-friendly static variant
- Build the Mission & Vision page: hero, mission/vision statements,
  values grid, founder quote, "Dive Deeper" links, FAQ accordion
- Build the Founding Board page: 7 members with real photos, role/org
  badges (Foundation role kept visually separate from company
  affiliation), and social links per member
- Build the Contact Us page: 4 "get in touch" mailto cards, a
  Formspree-backed contact form (AJAX submit, inline status), Slack/
  newsletter channel cards, and a "Follow us" social row
- Add a shared social-icon.html partial (LinkedIn/X/GitHub/Mastodon/
  Bluesky/Slack) reused across footer, Founding Board, and Contact Us
- Introduce .about-prose (720px) so About-page prose stays readable
  while card grids keep the site's full container width
- Remove a stale, unused .board-grid/.board-member CSS scaffold from
  _sections.scss that collided with the new Founding Board grid

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Mazizova

assets/scss/_about.scss

@@ -166,6 +166,30 @@
       margin: 0;
     }
 
+    .footer-social {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        color: $muted;
+        border: 1px solid $dark-border;
+        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+
+        &:hover {
+          color: $off-white;
+          border-color: rgba($accent, 0.35);
+          background: $dark-card;
+        }
+      }
+    }
+
     .footer-legal {
       display: flex;
       gap: 1.5rem;

assets/scss/_footer.scss

@@ -128,6 +128,61 @@
   }
 }
 
+.nav-item--dropdown {
+  position: relative;
+
+  &.active > .nav-dropdown-trigger {
+    color: $white;
+    background: $dark-card;
+  }
+
+  &:hover > .nav-dropdown-menu,
+  &:focus-within > .nav-dropdown-menu {
+    display: flex;
+  }
+}
+
+.nav-dropdown-trigger {
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: $muted;
+  background: none;
+  border: none;
+  padding: 0.5rem 0.875rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: color 0.2s ease, background 0.2s ease;
+
+  &:hover { color: $white; background: $dark-card; }
+}
+
+.nav-dropdown-menu {
+  display: none;
+  flex-direction: column;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  padding: 0.5rem;
+  margin-top: 0.25rem;
+  background: $dark-card;
+  border: 1px solid $dark-border;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  z-index: 10;
+
+  a {
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: $muted;
+
+    &:hover { color: $white; background: $dark-surface; }
+  }
+}
+
 .nav-toggle {
   display: none;
   flex-direction: column;
@@ -192,4 +247,32 @@
       margin-top: 0.5rem;
     }
   }
+
+  // No hover on touch — the dropdown is always expanded, flat in the stack.
+  .nav-item--dropdown {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-dropdown-trigger {
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+  }
+
+  .nav-dropdown-menu {
+    display: flex;
+    position: static;
+    box-shadow: none;
+    border: none;
+    background: none;
+    padding: 0 0 0 1rem;
+    margin: 0;
+
+    a {
+      padding: 0.625rem 1rem;
+      font-size: 0.9375rem;
+      color: darken($muted, 5%);
+    }
+  }
 }

assets/scss/_header.scss

@@ -22,6 +22,18 @@
       a { color: #334155; &:hover, &.active { background: #f1f5f9; color: #0f172a; } }
     }
     .nav-toggle span { background: #334155; }
+    .nav-dropdown-trigger { color: #334155; }
+    .nav-dropdown-menu a { color: #64748b; }
+  }
+
+  .nav-item--dropdown.active > .nav-dropdown-trigger { color: #0f172a; background: #f1f5f9; }
+  .nav-dropdown-trigger { color: #64748b; &:hover { color: #0f172a; background: #f1f5f9; } }
+  .nav-dropdown-menu {
+    background: #ffffff;
+    border-color: #dde3ed;
+    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
+
+    a { color: #64748b; &:hover { color: #0f172a; background: #f8f9fc; } }
   }
 
   // Logo
@@ -257,6 +269,156 @@
     &:hover { color: #0f172a; border-color: rgba(0, 200, 255, 0.4); }
   }
 
+  // About pages (Mission & Vision / Founding Board / Contact Us)
+  .about-hero h1 { color: #0f172a; }
+  .about-hero-sub { color: #64748b; }
+  .about-block-text { color: #334155; }
+
+  .about-value-card {
+    background: #ffffff;
+    border-color: #dde3ed;
+    border-left-color: #0ea5e9;
+
+    h3 { color: #0f172a; }
+  }
+  .about-value-claim { color: #0272a5; }
+  .about-value-desc { color: #64748b; }
+
+  .about-quote {
+    border-color: #dde3ed;
+
+    p { color: #0f172a; }
+    cite { color: #64748b; }
+  }
+
+  .about-dive-card {
+    background: #ffffff;
+    border-color: #dde3ed;
+
+    &:hover { border-color: rgba(0, 200, 255, 0.4); background: #f8f9fc; }
+
+    &--soon:hover { border-color: #dde3ed; background: #ffffff; }
+  }
+  .about-dive-title { color: #0f172a; }
+  .about-dive-desc { color: #64748b; }
+  .about-dive-arrow { color: #0272a5; }
+  .about-dive-soon { color: #94a3b8; }
+
+  .about-btn {
+    &--primary {
+      background: #0ea5e9;
+      border-color: #0ea5e9;
+      color: #ffffff;
+      &:hover { background: #0284c7; }
+    }
+    &--secondary {
+      color: #0f172a;
+      border-color: #dde3ed;
+      &:hover { color: #0272a5; border-color: rgba(0, 200, 255, 0.4); }
+    }
+  }
+
+  .about-faq-item {
+    border-bottom-color: #dde3ed;
+    &:first-child { border-top-color: #dde3ed; }
+
+    summary { color: #0f172a; }
+    .about-faq-chevron { color: #94a3b8; }
+    p { color: #64748b; }
+  }
+
+  .board-card {
+    background: none;
+    border-color: #334155;
+  }
+  .board-photo {
+    background: #f1f5f9;
+
+    &--placeholder {
+      background: rgba(0, 200, 255, 0.08);
+      color: #0272a5;
+    }
+  }
+  .board-name { color: #0f172a; }
+  .board-role { color: #64748b; }
+  .board-org {
+    color: #0272a5;
+    background: rgba(0, 200, 255, 0.08);
+    border-color: rgba(0, 200, 255, 0.3);
+  }
+  .board-bio { color: #64748b; }
+  .board-links {
+    border-top-color: #dde3ed;
+    a { color: #64748b; &:hover { color: #0272a5; } }
+  }
+
+  .contact-card {
+    background: #ffffff;
+    border-color: #dde3ed;
+  }
+  .contact-card-icon {
+    background: rgba(0, 200, 255, 0.08);
+    color: #0272a5;
+  }
+  .contact-card-title { color: #0f172a; }
+  .contact-card-desc { color: #64748b; }
+  .contact-card-email { color: #0272a5; }
+
+  .contact-form-card { background: #ffffff; border: 1px solid #dde3ed; }
+  .contact-form-title { color: #0f172a; }
+  .contact-form-sub { color: #64748b; }
+
+  .contact-field {
+    label { color: #64748b; }
+
+    input, select, textarea {
+      color: #0f172a;
+      background-color: #f8f9fc;
+      border-color: #dde3ed;
+
+      &::placeholder { color: #94a3b8; }
+      &:focus { border-color: rgba(0, 200, 255, 0.5); }
+    }
+
+    select {
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 0.875rem center;
+    }
+  }
+
+  .contact-consent-text { color: #64748b; }
+  .contact-form-status { color: #64748b; }
+
+  .contact-channel {
+    background: #ffffff;
+    border-color: #dde3ed;
+
+    svg { color: #0272a5; }
+
+    &:hover { border-color: rgba(0, 200, 255, 0.4); background: #f8f9fc; }
+
+    &--soon {
+      svg { color: #94a3b8; }
+      &:hover { border-color: #dde3ed; background: #ffffff; }
+    }
+  }
+  .contact-channel-title { color: #0f172a; }
+  .contact-channel-sub { color: #64748b; }
+
+  .contact-social-row { border-color: #dde3ed; }
+  .contact-social-label { color: #0f172a; }
+  .contact-social-icons a {
+    color: #64748b;
+    border-color: #dde3ed;
+
+    &:hover {
+      color: #0f172a;
+      border-color: rgba(0, 200, 255, 0.4);
+      background: #f1f5f9;
+    }
+  }
+
   // Contribute page
   .contribute-method {
     background: #ffffff;
@@ -631,6 +793,17 @@
     }
 
     .footer-bottom p { color: #94a3b8; }
+
+    .footer-social a {
+      color: #64748b;
+      border-color: #dde3ed;
+
+      &:hover {
+        color: #0f172a;
+        border-color: rgba(0, 200, 255, 0.4);
+        background: #f1f5f9;
+      }
+    }
   }
 
   // Blog

assets/scss/_light-theme.scss

@@ -128,46 +128,6 @@
   }
 }
 
-// Founding board grid
-.board-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1px;
-  background: $dark-border;
-  border: 1px solid $dark-border;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.board-member {
-  background: $dark-card;
-  padding: 1.5rem;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: lighten($dark-card, 3%);
-  }
-
-  .board-name {
-    font-size: 1rem;
-    font-weight: 700;
-    color: $white;
-    margin-bottom: 0.25rem;
-  }
-
-  .board-role {
-    font-size: 0.8125rem;
-    color: $accent;
-    font-weight: 500;
-    margin-bottom: 0.2rem;
-  }
-
-  .board-org {
-    font-size: 0.8125rem;
-    color: $muted;
-  }
-}
-
 // Quotes grid
 .quotes-grid {
   display: grid;

assets/scss/_sections.scss

@@ -30,6 +30,7 @@ img {
 @import "sections";
 @import "blog";
 @import "resources";
+@import "about";
 @import "showcase";
 @import "footer";
 @import "light-theme";

assets/scss/main.scss

@@ -0,0 +1,4 @@
+---
+title: "About"
+description: "Who the OurSQL Foundation is, how it's governed, and how to reach us."
+---

content/about/_index.md

@@ -0,0 +1,5 @@
+---
+title: "Contact Us"
+description: "Whether you're a journalist, a potential member, or simply curious about MySQL's next chapter — we'd love to hear from you."
+layout: "contact-us"
+---

content/about/contact-us.md

@@ -0,0 +1,5 @@
+---
+title: "Founding Board"
+description: "The OurSQL Foundation is led by an independent founding board — individuals from across the MySQL community who came together to build a vendor-neutral home for the ecosystem."
+layout: "founding-board"
+---