feat(footer): group social links under the brand column and add Bluesky

components/Footer/index.jsx

@@ -2,6 +2,7 @@ import GitHubIcon from '@node-core/ui-components/Icons/Social/GitHub';
 import LinkedInIcon from '@node-core/ui-components/Icons/Social/LinkedIn';
 import DiscordIcon from '@node-core/ui-components/Icons/Social/Discord';
 import XIcon from '@node-core/ui-components/Icons/Social/X';
+import BlueskyIcon from '@node-core/ui-components/Icons/Social/Bluesky';
 import { footer } from '#theme/site';
 
 import Logo from '#theme/Logo';
@@ -10,6 +11,7 @@ import styles from './index.module.css';
 const SOCIAL_ICONS = {
   GitHub: GitHubIcon,
   X: XIcon,
+  Bluesky: BlueskyIcon,
   Discord: DiscordIcon,
   LinkedIn: LinkedInIcon,
 };
@@ -31,6 +33,28 @@ export default () => (
             A static module bundler for modern JavaScript applications.
             Maintained by the open-source community since 2012.
           </p>
+          <nav className={styles.socialGroup} aria-label="webpack on social">
+            <h2 className={styles.heading}>webpack on social</h2>
+            <ul className={styles.social}>
+              {footer.socialLinks.map(({ label, link }) => {
+                const Icon = SOCIAL_ICONS[label];
+
+                return (
+                  <li key={label}>
+                    <a
+                      href={link}
+                      className={styles.socialLink}
+                      aria-label={label}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      <Icon width={20} height={20} />
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
         </div>
 
         {footer.groups.map(section => (
@@ -70,25 +94,6 @@ export default () => (
           respective holders. Use of them does not imply any affiliation with or
           endorsement by them.
         </p>
-        <ul className={styles.social}>
-          {footer.socialLinks.map(({ label, link }) => {
-            const Icon = SOCIAL_ICONS[label];
-
-            return (
-              <li key={label}>
-                <a
-                  href={link}
-                  className={styles.socialLink}
-                  aria-label={label}
-                  target="_blank"
-                  rel="noreferrer noopener"
-                >
-                  <Icon width={20} height={20} />
-                </a>
-              </li>
-            );
-          })}
-        </ul>
       </div>
     </div>
   </footer>

components/Footer/index.module.css

@@ -86,16 +86,10 @@
 }
 
 .bottom {
-  @apply flex
-    flex-col
-    gap-4
-    items-center
-    mt-10
+  @apply mt-10
     pt-6
     border-t
-    border-neutral-900
-    sm:flex-row
-    sm:justify-between;
+    border-neutral-900;
 }
 
 .legal {
@@ -104,8 +98,27 @@
     text-neutral-600;
 }
 
+.legal a {
+  @apply text-neutral-400
+    underline
+    underline-offset-2
+    decoration-neutral-700
+    transition-colors
+    duration-150
+    hover:text-blue-300
+    hover:decoration-blue-300;
+}
+
+.socialGroup {
+  @apply flex
+    flex-col
+    gap-3.5
+    mt-2;
+}
+
 .social {
   @apply flex
+    flex-wrap
     items-center
     gap-4
     m-0
@@ -120,3 +133,7 @@
     duration-150
     hover:text-neutral-50;
 }
+
+.socialLink svg path {
+  @apply fill-current;
+}

pages/site.json

@@ -36,6 +36,10 @@
         "label": "X",
         "link": "https://x.com/webpack"
       },
+      {
+        "label": "Bluesky",
+        "link": "https://bsky.app/profile/webpack.js.org"
+      },
       {
         "label": "Discord",
         "link": "https://discord.com/invite/webpack"