refactor(footer): rearrange links to better fit grouping

src/components/Footer.astro

@@ -48,40 +48,28 @@ const {
       class="grid w-full max-w-5xl place-items-center gap-12 text-center sm:text-left"
       aria-label="Footer navigation and links"
     >
-      <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:w-full">
-        <div class="grid gap-8 sm:col-span-2 sm:grid-cols-2 md:col-span-1 md:grid-cols-1">
-          <section
-            class="flex flex-col items-center gap-2 sm:items-start"
-            aria-labelledby="follow-us-heading"
-          >
-            <h2 id="follow-us-heading" class="text-base !font-semibold">
-              {footer.followUs}
-            </h2>
-            <SocialMediaStrip />
-          </section>
-          <section class="flex flex-col gap-2" aria-labelledby="about-us-heading">
-            <h2 id="about-us-heading" class="text-base !font-semibold">
-              {footer.aboutUs}
-            </h2>
-            <nav aria-label="About navigation">
-              <ul class="grid gap-2 opacity-80">
-                <li>
-                  <a href={getLocalePath('/about')} class="font-normal"
-                    >{footer.teamAndContributors}</a
-                  >
-                </li>
-                <li>
-                  <a href={getLocalePath('/privacy-policy')} class="font-normal"
-                    >{footer.privacyPolicy}</a
-                  >
-                </li>
-              </ul>
-            </nav>
-          </section>
-        </div>
-        <nav class="flex flex-col gap-2" aria-labelledby="get-started-heading">
-          <h2 id="get-started-heading" class="text-base !font-semibold">
-            {footer.getStarted}
+      <div class="grid w-full grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-4">
+        <section class="flex flex-col gap-3" aria-labelledby="follow-us-heading">
+          <h2 id="follow-us-heading" class="text-base !font-semibold">
+            {footer.socialLinks}
+          </h2>
+          <ul class="grid gap-2 opacity-80">
+            <li>
+              <a href="https://github.com/zen-browser" target="_blank" class="font-normal">
+                {footer.github}
+              </a>
+            </li>
+            <li>
+              <a href="https://discord.gg/zen-browser" target="_blank" class="font-normal">
+                {footer.discord}
+              </a>
+            </li>
+          </ul>
+          <SocialMediaStrip excludeIcons={['github', 'discord']} />
+        </section>
+        <nav class="flex flex-col gap-2" aria-labelledby="primary-links-heading">
+          <h2 id="primary-links-heading" class="text-base !font-semibold">
+            {footer.primaryLinks}
           </h2>
           <ul class="grid gap-2 opacity-80">
             <li>
@@ -95,7 +83,27 @@ const {
               >
             </li>
             <li>
-              <a href={getLocalePath('/download?twilight')} class="font-normal">{footer.twilight}</a
+              <a href={getLocalePath('/about')} class="font-normal">{footer.aboutUs}</a>
+            </li>
+          </ul>
+        </nav>
+        <nav class="flex flex-col gap-2" aria-labelledby="more-links-heading">
+          <h2 id="more-links-heading" class="text-base !font-semibold">
+            {footer.more}
+          </h2>
+          <ul class="grid gap-2 opacity-80">
+            <li>
+              <a href={getLocalePath('/download')} class="font-normal">{footer.download}</a>
+            </li>
+            <li>
+              <a href={getLocalePath('/donate')} class="font-normal">{footer.supportUs}</a>
+            </li>
+            <li>
+              <a href={getLocalePath('/about')} class="font-normal">{footer.teamAndContributors}</a>
+            </li>
+            <li>
+              <a href={getLocalePath('/privacy-policy')} class="font-normal"
+                >{footer.privacyPolicy}</a
               >
             </li>
           </ul>
@@ -105,9 +113,6 @@ const {
             {footer.getHelp}
           </h2>
           <ul class="grid gap-2 opacity-80">
-            <li>
-              <a href="https://discord.gg/zen-browser" class="font-normal">{footer.discord}</a>
-            </li>
             <li>
               <a href="https://uptime.zen-browser.app/" class="font-normal">{footer.uptimeStatus}</a
               >

src/components/Hero.astro

@@ -65,7 +65,10 @@ const {
         </div>
       </div>
     </div>
-    <SocialMediaStrip style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)" />
+    <SocialMediaStrip
+      excludeIcons={['discord']}
+      style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
+    />
   </div>
   <Video
     name="hero-video"

src/components/SocialMediaStrip.astro

@@ -1,73 +1,119 @@
 ---
-const { class: className, ...props } = Astro.props
+const { class: className, excludeIcons = [], ...props } = Astro.props
 
 import { icon, library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBluesky,
+  faDiscord,
   faGithub,
   faMastodon,
   faReddit,
   faXTwitter,
 } from '@fortawesome/free-brands-svg-icons'
 import { cn } from '~/utils/merge'
 
-library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
+library.add(faMastodon, faBluesky, faGithub, faDiscord, faXTwitter, faReddit)
 const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
 const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
 const Github = icon({ prefix: 'fab', iconName: 'github' })
+const Discord = icon({ prefix: 'fab', iconName: 'discord' })
 const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
 const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
+
+const allowedIcons = new Set(['github', 'discord', 'x', 'mastodon', 'bluesky', 'reddit'])
+const excluded = new Set(
+  Array.isArray(excludeIcons)
+    ? excludeIcons
+        .filter(v => typeof v === 'string')
+        .map(v => v.toLowerCase())
+        .filter(v => allowedIcons.has(v))
+    : []
+)
 ---
 
 <ul class={cn('flex items-center gap-4 opacity-80', className)} {...props}>
-  <li>
-    <a
-      href="https://github.com/zen-browser"
-      target="_blank"
-      class="font-bold"
-      aria-label="Visit Zen Browser on GitHub"
-    >
-      <Fragment set:html={Github.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://x.com/zen_browser"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on X"
-    >
-      <Fragment set:html={XTwitter.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://floss.social/@zenbrowser"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on Mastodon"
-    >
-      <Fragment set:html={Mastodon.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://bsky.app/profile/zen-browser.app"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on Bluesky"
-    >
-      <Fragment set:html={Bluesky.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://www.reddit.com/r/zen_browser"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on Reddit"
-    >
-      <Fragment set:html={Reddit.html} />
-    </a>
-  </li>
+  {
+    !excluded.has('github') && (
+      <li>
+        <a
+          href="https://github.com/zen-browser"
+          target="_blank"
+          class="font-bold"
+          aria-label="Visit Zen Browser on GitHub"
+        >
+          <Fragment set:html={Github.html} />
+        </a>
+      </li>
+    )
+  }
+  {
+    !excluded.has('discord') && (
+      <li>
+        <a
+          href="https://discord.gg/zen-browser"
+          target="_blank"
+          class="font-bold"
+          aria-label="Join Zen Browser on Discord"
+        >
+          <Fragment set:html={Discord.html} />
+        </a>
+      </li>
+    )
+  }
+  {
+    !excluded.has('x') && (
+      <li>
+        <a
+          href="https://x.com/zen_browser"
+          target="_blank"
+          class="font-normal"
+          aria-label="Visit Zen Browser on X"
+        >
+          <Fragment set:html={XTwitter.html} />
+        </a>
+      </li>
+    )
+  }
+  {
+    !excluded.has('mastodon') && (
+      <li>
+        <a
+          href="https://floss.social/@zenbrowser"
+          target="_blank"
+          class="font-normal"
+          aria-label="Visit Zen Browser on Mastodon"
+        >
+          <Fragment set:html={Mastodon.html} />
+        </a>
+      </li>
+    )
+  }
+  {
+    !excluded.has('bluesky') && (
+      <li>
+        <a
+          href="https://bsky.app/profile/zen-browser.app"
+          target="_blank"
+          class="font-normal"
+          aria-label="Visit Zen Browser on Bluesky"
+        >
+          <Fragment set:html={Bluesky.html} />
+        </a>
+      </li>
+    )
+  }
+  {
+    !excluded.has('reddit') && (
+      <li>
+        <a
+          href="https://www.reddit.com/r/zen_browser"
+          target="_blank"
+          class="font-normal"
+          aria-label="Visit Zen Browser on Reddit"
+        >
+          <Fragment set:html={Reddit.html} />
+        </a>
+      </li>
+    )
+  }
 </ul>

src/i18n/en/translation.json

@@ -474,11 +474,14 @@
       "title": "Zen Browser",
       "description": "Beautifully designed, privacy-focused, and packed with features. We care about your experience, not your data.",
       "download": "Download",
-      "followUs": "Follow Us",
+      "socialLinks": "Social Links",
+      "github": "GitHub",
+      "primaryLinks": "Browse",
+      "more": "More",
+      "supportUs": "Support Us",
       "aboutUs": "About Us",
       "teamAndContributors": "Team & Contributors",
       "privacyPolicy": "Privacy Policy",
-      "getStarted": "Get Started",
       "documentation": "Documentation",
       "zenMods": "Zen Mods",
       "releaseNotes": "Release Notes",
@@ -487,7 +490,6 @@
       "discord": "Discord",
       "uptimeStatus": "Uptime Status",
       "reportAnIssue": "Report an Issue",
-      "twilight": "Twilight",
       "madeWith": "Made with <span aria-label='love'>❤️</span> by the <a href='{link}' class='zen-link inline-block font-bold'>Zen Team</a>"
     },
     "nav": {

src/i18n/ja/translation.json

@@ -479,11 +479,14 @@
       "title": "Zenブラウザー",
       "description": "美しいデザイン、プライバシー重視、機能満載。私たちはあなたのデータではなく、体験を大切にします。",
       "download": "ダウンロード",
-      "followUs": "フォローする",
+      "socialLinks": "ソーシャルリンク",
+      "github": "GitHub",
+      "primaryLinks": "主要リンク",
+      "more": "その他",
+      "supportUs": "支援する",
       "aboutUs": "私たちについて",
       "teamAndContributors": "チーム・コントリビューター",
       "privacyPolicy": "プライバシーポリシー",
-      "getStarted": "はじめに",
       "documentation": "ドキュメント",
       "zenMods": "Zen Mods",
       "releaseNotes": "リリースノート",
@@ -492,7 +495,6 @@
       "discord": "Discord",
       "uptimeStatus": "稼働状況",
       "reportAnIssue": "問題を報告",
-      "twilight": "Twilight",
       "madeWith": "<span aria-label='love'>❤️</span>と共に<a href='{link}' class='zen-link inline-block font-bold'>Zenチーム</a>が作りました"
     },
     "nav": {

src/pages/[...locale]/whatsnew.astro

@@ -65,7 +65,7 @@ if (latestVersion.version.split('.').length > 2 && whatsNewText[1] !== latestVer
           <span>{whatsNew.readFullReleaseNotes}</span>
           <ArrowRightIcon />
         </Button>
-        <SocialMediaStrip gap="6" />
+        <SocialMediaStrip excludeIcons={['discord']} gap="6" />
       </div>
     </div>