New footer

apps/frontend/src/locales/en-US/index.json

@@ -338,6 +338,9 @@
   "label.scopes": {
     "message": "Scopes"
   },
+  "label.servers": {
+    "message": "Servers"
+  },
   "label.settings": {
     "message": "Settings"
   },
@@ -386,45 +389,81 @@
   "layout.banner.verify-email.title": {
     "message": "For security purposes, please verify your email address on Modrinth."
   },
-  "layout.footer.company.careers": {
-    "message": "Careers"
-  },
-  "layout.footer.company.privacy": {
-    "message": "Privacy"
+  "layout.footer.about": {
+    "message": "About"
   },
-  "layout.footer.company.rules": {
-    "message": "Rules"
+  "layout.footer.about.blog": {
+    "message": "Blog"
   },
-  "layout.footer.company.terms": {
-    "message": "Terms"
+  "layout.footer.about.rewards-program": {
+    "message": "Rewards Program"
   },
-  "layout.footer.company.title": {
-    "message": "Company"
+  "layout.footer.about.status": {
+    "message": "Status"
   },
-  "layout.footer.interact.title": {
-    "message": "Interact"
+  "layout.footer.legal": {
+    "message": "Legal"
   },
   "layout.footer.legal-disclaimer": {
     "message": "NOT AN OFFICIAL MINECRAFT SERVICE. NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT."
   },
+  "layout.footer.legal.privacy-policy": {
+    "message": "Privacy Policy"
+  },
+  "layout.footer.legal.rules": {
+    "message": "Content Rules"
+  },
+  "layout.footer.legal.terms-of-use": {
+    "message": "Terms of Use"
+  },
   "layout.footer.open-source": {
     "message": "Modrinth is <github-link>open source</github-link>."
   },
-  "layout.footer.resources.blog": {
-    "message": "Blog"
+  "layout.footer.products": {
+    "message": "Products"
   },
-  "layout.footer.resources.docs": {
-    "message": "Docs"
+  "layout.footer.products.app": {
+    "message": "Modrinth App"
   },
-  "layout.footer.resources.status": {
-    "message": "Status"
+  "layout.footer.products.plus": {
+    "message": "Modrinth+"
   },
-  "layout.footer.resources.support": {
-    "message": "Support"
+  "layout.footer.products.servers": {
+    "message": "Modrinth Servers"
   },
-  "layout.footer.resources.title": {
+  "layout.footer.resources": {
     "message": "Resources"
   },
+  "layout.footer.resources.api-docs": {
+    "message": "API documentation"
+  },
+  "layout.footer.resources.help-center": {
+    "message": "Help Center"
+  },
+  "layout.footer.resources.report-issues": {
+    "message": "Report issues"
+  },
+  "layout.footer.resources.translate": {
+    "message": "Translate"
+  },
+  "layout.footer.social.bluesky": {
+    "message": "Bluesky"
+  },
+  "layout.footer.social.discord": {
+    "message": "Discord"
+  },
+  "layout.footer.social.github": {
+    "message": "GitHub"
+  },
+  "layout.footer.social.mastodon": {
+    "message": "Mastodon"
+  },
+  "layout.footer.social.tumblr": {
+    "message": "Tumblr"
+  },
+  "layout.footer.social.x": {
+    "message": "X"
+  },
   "layout.menu-toggle.action": {
     "message": "Toggle menu"
   },
@@ -977,6 +1016,12 @@
   "settings.billing.payment_method_type.visa": {
     "message": "Visa"
   },
+  "settings.billing.pyro_subscription.description": {
+    "message": "Manage your Modrinth Server subscriptions."
+  },
+  "settings.billing.pyro_subscription.title": {
+    "message": "Modrinth Server Subscriptions"
+  },
   "settings.billing.subscription.description": {
     "message": "Manage your Modrinth subscriptions."
   },

packages/assets/index.ts

@@ -13,14 +13,17 @@ import _SSOGoogleIcon from './external/sso/google.svg?component'
 import _SSOMicrosoftIcon from './external/sso/microsoft.svg?component'
 import _SSOSteamIcon from './external/sso/steam.svg?component'
 import _AppleIcon from './external/apple.svg?component'
+import _BlueskyIcon from './external/bluesky.svg?component'
 import _BuyMeACoffeeIcon from './external/bmac.svg?component'
 import _DiscordIcon from './external/discord.svg?component'
+import _GithubIcon from './external/github.svg?component'
 import _KoFiIcon from './external/kofi.svg?component'
 import _MastodonIcon from './external/mastodon.svg?component'
 import _OpenCollectiveIcon from './external/opencollective.svg?component'
 import _PatreonIcon from './external/patreon.svg?component'
 import _PayPalIcon from './external/paypal.svg?component'
 import _RedditIcon from './external/reddit.svg?component'
+import _TumblrIcon from './external/tumblr.svg?component'
 import _TwitterIcon from './external/twitter.svg?component'
 import _WindowsIcon from './external/windows.svg?component'
 import _YouTubeIcon from './external/youtube.svg?component'
@@ -195,14 +198,17 @@ export const SSOGoogleIcon = _SSOGoogleIcon
 export const SSOMicrosoftIcon = _SSOMicrosoftIcon
 export const SSOSteamIcon = _SSOSteamIcon
 export const AppleIcon = _AppleIcon
+export const BlueskyIcon = _BlueskyIcon
 export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
+export const GithubIcon = _GithubIcon
 export const DiscordIcon = _DiscordIcon
 export const KoFiIcon = _KoFiIcon
 export const MastodonIcon = _MastodonIcon
 export const OpenCollectiveIcon = _OpenCollectiveIcon
 export const PatreonIcon = _PatreonIcon
 export const PayPalIcon = _PayPalIcon
 export const RedditIcon = _RedditIcon
+export const TumblrIcon = _TumblrIcon
 export const TwitterIcon = _TwitterIcon
 export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon

packages/assets/styles/variables.scss

@@ -69,6 +69,18 @@ html {
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
 
   --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
+
+  --brand-gradient-strong-bg: linear-gradient(
+      270deg,
+      rgba(68, 182, 138, 0.175) 0%,
+      rgba(36, 225, 91, 0.12) 100%
+  );
+  --brand-gradient-bg: linear-gradient(
+      0deg,
+      rgba(68, 182, 138, 0.175) 0%,
+      rgba(58, 250, 112, 0.125) 100%
+  );
+  --brand-gradient-border: rgba(32, 64, 32, 0.15);
 }
 
 .dark-mode,
@@ -113,6 +125,10 @@ html {
     hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
 
   --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
+
+  --brand-gradient-strong-bg: linear-gradient(270deg, #09110D 10%, #131F17 100%);
+  --brand-gradient-bg: linear-gradient(0deg, rgba(14, 35, 19, 0.2) 0%, rgba(55, 137, 73, 0.1) 100%);
+  --brand-gradient-border: rgba(155, 255, 160, 0.08);
 }
 
 .oled-mode {
@@ -122,4 +138,10 @@ html {
   --color-button-bg: #222329;
 
   --color-ad: #0d1828;
+
+  --brand-gradient-strong-bg: linear-gradient(270deg, rgba(9, 18, 14, 0.6) 10%, rgba(19, 31, 23, 0.5) 100%);
+}
+
+.retro-mode {
+  --brand-gradient-strong-bg: #3A3B38
 }