Improve /organisation page

web/messages/de.json

@@ -356,6 +356,14 @@
   "notifications.tabs.notifications": "Benachrichtigungen",
   "notifications.tabs.settings": "Einstellungen",
   "notifications.title": "Updates",
+  "organization.about.title": "Über uns",
+  "organization.about.desc": "Wer wir sind, unsere Mission und wie die Organisation funktioniert.",
+  "organization.proof.title": "Nachweise & Transparenz",
+  "organization.proof.desc": "Wichtige Zahlen, Fortschritte und was andere über uns sagen.",
+  "organization.contactSection.title": "Kontakt & Support",
+  "organization.contactSection.desc": "Brauchen Sie Hilfe oder möchten Sie uns erreichen? Hier geht es los.",
+  "organization.trust.title": "Vertrauen & Rechtliches",
+  "organization.trust.desc": "Wie wir Ihre Daten schützen und die Regeln, die die Plattform governieren.",
   "organization.constitution": "Verfassung",
   "organization.contact": "Kontakt",
   "organization.financials": "Finanzen",

web/messages/fr.json

@@ -356,6 +356,14 @@
   "notifications.tabs.notifications": "Notifications",
   "notifications.tabs.settings": "Paramètres",
   "notifications.title": "Mises à jour",
+  "organization.about.title": "À propos de nous",
+  "organization.about.desc": "Qui nous sommes, notre mission et comment l'organisation fonctionne.",
+  "organization.proof.title": "Preuves & transparence",
+  "organization.proof.desc": "Chiffres clés, progrès et ce que les autres disent de nous.",
+  "organization.contactSection.title": "Contact & support",
+  "organization.contactSection.desc": "Besoin d'aide ou de nous contacter ? Commencez ici.",
+  "organization.trust.title": "Confiance & légal",
+  "organization.trust.desc": "Comment nous protégeons vos données et les règles qui régissent la plateforme.",
   "organization.constitution": "Constitution",
   "organization.contact": "Contact",
   "organization.financials": "Finances",

web/pages/organization.tsx

@@ -1,9 +1,26 @@
 import {PageBase} from 'web/components/page-base'
-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 {GeneralButton} from 'web/components/buttons/general-button'
+import {SEO} from 'web/components/SEO'
 import {useT} from 'web/lib/locale'
+import {Row} from "web/components/layout/row"
+
+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-col gap-4">{children}</div>
+    </div>
+  )
+}
 
 export default function Organization() {
   const t = useT()
@@ -11,29 +28,100 @@ export default function Organization() {
   return (
     <PageBase trackPageView={'social'}>
       <SEO
-        title={t('organization.seo.title','Organization')}
-        description={t('organization.seo.description','Organization')}
+        title={t('organization.seo.title', 'Organization')}
+        description={t('organization.seo.description', 'Organization')}
         url={`/organization`}
       />
-      <h3 className="text-4xl font-bold text-center mt-8 mb-8">{t('organization.title','Organization')}</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('organization.title', 'Organization')}</h3>
+
+      {/* ABOUT */}
+      <Section
+        title={t('organization.about.title', 'About us')}
+        description={t(
+          'organization.about.desc',
+          'Who we are, our mission, and how the organization works.'
         )}
       >
-        <GeneralButton url={'/stats'} content={t('organization.stats','Growth & Stats')}/>
-        <GeneralButton url={'/support'} content={t('organization.support','Support')}/>
-        <GeneralButton url={'/help'} content={t('organization.help','Help')}/>
-        <GeneralButton url={'/constitution'} content={t('organization.constitution','Constitution')}/>
-        <GeneralButton url={'/vote'} content={t('organization.vote','Proposals')}/>
-        <GeneralButton url={'/financials'} content={t('organization.financials','Financials')}/>
-        <GeneralButton url={'/terms'} content={t('organization.terms','Terms and Conditions')}/>
-        <GeneralButton url={'/privacy'} content={t('organization.privacy','Privacy Policy')}/>
-        <GeneralButton url={'/security'} content={t('organization.security','Security')}/>
-        <GeneralButton url={'/press'} content={t('press.title', 'Press')}/>
-        <GeneralButton url={'/contact'} content={t('organization.contact','Contact')}/>
-      </Col>
+        <Row className={'flex-wrap'}>
+          <GeneralButton
+            url={'/about'}
+            content={t('about.seo.description', 'About Compass')}
+          />
+          <GeneralButton
+            url={'/constitution'}
+            content={t('organization.constitution', 'Our constitution')}
+          />
+        </Row>
+      </Section>
+
+      {/* PROOF */}
+      <Section
+        title={t('organization.proof.title', 'Proof & transparency')}
+        description={t(
+          'organization.proof.desc',
+          'Key numbers, progress, and what others say about us.'
+        )}
+      >
+        <Row className={'flex-wrap'}>
+          <GeneralButton
+            url={'/stats'}
+            content={t('organization.stats', 'Key metrics & growth')}
+          />
+          <GeneralButton
+            url={'/press'}
+            content={t('press.title', 'Press')}
+          />
+          <GeneralButton
+            url={'/financials'}
+            content={t('organization.financials', 'Financial transparency')}
+          />
+        </Row>
+      </Section>
+
+      {/* CONTACT */}
+      <Section
+        title={t('organization.contactSection.title', 'Contact & support')}
+        description={t(
+          'organization.contactSection.desc',
+          'Need help or want to reach us? Start here.'
+        )}
+      >
+        <Row className={'flex-wrap'}>
+          <GeneralButton
+            url={'/contact'}
+            content={t('organization.contact', 'Contact us')}
+          />
+          <GeneralButton
+            url={'/help'}
+            content={t('organization.help', 'Help & support center')}
+          />
+        </Row>
+      </Section>
+
+      {/* TRUST / LEGAL */}
+      <Section
+        title={t('organization.trust.title', 'Trust & legal')}
+        description={t(
+          'organization.trust.desc',
+          'How we protect your data and the rules that govern the platform.'
+        )}
+      >
+        <Row className={'flex-wrap'}>
+          <GeneralButton
+            url={'/security'}
+            content={t('organization.security', 'Security')}
+          />
+          <GeneralButton
+            url={'/terms'}
+            content={t('organization.terms', 'Terms and conditions')}
+          />
+          <GeneralButton
+            url={'/privacy'}
+            content={t('organization.privacy', 'Privacy policy')}
+          />
+        </Row>
+      </Section>
     </PageBase>
   )
 }