Improve /socials page

web/messages/de.json

@@ -852,6 +852,14 @@
   "signup.submit": "Konto erstellen",
   "signup.title": "Konto erstellen",
   "signup.toast.created": "Konto erstellt",
+  "social.community.title": "Community",
+  "social.community.desc": "Treten Sie unseren Community-Diskussionen und Chats bei.",
+  "social.follow.title": "Folgen & Updates",
+  "social.follow.desc": "Bleiben Sie über Ankündigungen und Nachrichten informiert.",
+  "social.dev.title": "Entwicklung",
+  "social.dev.desc": "Sehen Sie sich unseren Quellcode an oder tragen Sie bei.",
+  "social.contact.title": "Kontakt",
+  "social.contact.desc": "Kontaktieren Sie uns direkt für Anfragen.",
   "social.discord": "Discord",
   "social.email_button": "E-Mail",
   "social.github": "GitHub",

web/messages/fr.json

@@ -852,6 +852,14 @@
   "signup.submit": "Créer le compte",
   "signup.title": "Créer un compte",
   "signup.toast.created": "Compte créé",
+  "social.community.title": "Communauté",
+  "social.community.desc": "Rejoignez nos discussions et chats communautaires.",
+  "social.follow.title": "Annonces & Mises à jour",
+  "social.follow.desc": "Restez informé des annonces et actualités.",
+  "social.dev.title": "Développement",
+  "social.dev.desc": "Consultez notre code source ou contribuez.",
+  "social.contact.title": "Contact",
+  "social.contact.desc": "Contactez-nous directement pour toute demande.",
   "social.discord": "Discord",
   "social.email_button": "E‑mail",
   "social.github": "GitHub",

web/pages/social.tsx

@@ -1,36 +1,73 @@
 import {PageBase} from 'web/components/page-base'
-import {discordLink, githubRepo, redditLink, stoatLink, supportEmail, xLink} from "common/constants";
-import {GeneralButton} from "web/components/buttons/general-button";
-import clsx from "clsx";
-import {Col} from "web/components/layout/col";
-import {SEO} from "web/components/SEO";
-import {useT} from 'web/lib/locale'
-
+import {discordLink, githubRepo, redditLink, stoatLink, supportEmail, xLink} from "common/constants"
+import {GeneralButton} from "web/components/buttons/general-button"
+import {SEO} from "web/components/SEO"
+import {useT} from "web/lib/locale"
 
+function Section({
+                   title,
+                   description,
+                   children,
+                 }: {
+  title: string
+  description: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="max-w-3xl mb-8 mx-4 sm:mx-16 min-w-[200px]">
+      <h4 className="text-2xl font-bold mb-2">{title}</h4>
+      <p className="text-ink-600 mb-6">{description}</p>
+      <div className="flex flex-row gap-4">{children}</div>
+    </div>
+  )
+}
 
 export default function Social() {
   const t = useT()
+
   return (
     <PageBase trackPageView={'social'}>
       <SEO
-        title={t('social.seo.title','Socials')}
-        description={t('social.seo.description','Socials')}
+        title={t('social.seo.title', 'Socials')}
+        description={t('social.seo.description', 'All our social channels and contact info')}
         url={`/social`}
       />
-      <h3 className="text-4xl font-bold text-center mt-8 mb-8">{t('social.title','Socials')}</h3>
-      <Col
-        className={clsx(
-          'pb-[58px] lg:pb-0', // bottom bar padding
-          'text-ink-1000 mx-auto w-full grid grid-cols-1 gap-8 max-w-3xl sm:grid-cols-2 lg:min-h-0 lg:pt-4 mt-4',
-        )}
+
+      <h3 className="text-4xl font-bold text-center mt-8 mb-8">{t('social.title', 'Socials')}</h3>
+
+      {/* COMMUNITY */}
+      <Section
+        title={t('social.community.title', 'Community')}
+        description={t('social.community.desc', 'Join our community chats and discussions.')}
       >
-        <GeneralButton url={discordLink} content={t('social.discord','Discord')}/>
-        <GeneralButton url={stoatLink} content={t('social.stoat','Revolt / Stoat')}/>
-        <GeneralButton url={redditLink} content={t('social.reddit','Reddit')}/>
-        <GeneralButton url={githubRepo} content={t('social.github','GitHub')}/>
-        <GeneralButton url={xLink} content={t('social.x','X')}/>
-        <GeneralButton url={`mailto:${supportEmail}`} content={t('social.email_button','Email') + ' ' + supportEmail}/>
-      </Col>
+        <GeneralButton url={discordLink} content={t('social.discord', 'Discord')}/>
+        <GeneralButton url={redditLink} content={t('social.reddit', 'Reddit')}/>
+        <GeneralButton url={stoatLink} content={t('social.stoat', 'Revolt / Stoat')}/>
+      </Section>
+
+      {/* FOLLOW / UPDATES */}
+      <Section
+        title={t('social.follow.title', 'Follow & Updates')}
+        description={t('social.follow.desc', 'Stay informed about announcements and news.')}
+      >
+        <GeneralButton url={xLink} content={t('social.x', 'X')}/>
+      </Section>
+
+      {/* DEVELOPMENT */}
+      <Section
+        title={t('social.dev.title', 'Development')}
+        description={t('social.dev.desc', 'See our source code or contribute.')}
+      >
+        <GeneralButton url={githubRepo} content={t('social.github', 'GitHub')}/>
+      </Section>
+
+      {/* CONTACT */}
+      <Section
+        title={t('social.contact.title', 'Contact')}
+        description={t('social.contact.desc', 'Reach out to us directly for inquiries.')}
+      >
+        <GeneralButton url={`mailto:${supportEmail}`} content={`${t('social.email_button', 'Email')} ${supportEmail}`}/>
+      </Section>
     </PageBase>
   )
 }