mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-05-09 07:34:55 -04:00
Code Issues Packages Projects Releases Wiki Activity

Update button styles, text classes, and French translations for consistency and clarity

Browse Source
This commit is contained in:
MartinBraquet
2026-05-01 13:11:52 +02:00
parent 98a1091fcf
commit b057f179d6
10 changed files with 400 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/email/emails/share-compass.tsx
View File

@@ -25,7 +25,7 @@ export const ShareCompassEmail = ({
const name = toUser.name.split(' ')[0]
const t = createT(locale)
const profileShareUrl = getXShareProfileUrl(toUser.username, t)
const profileShareUrl = getXShareProfileUrl(t, toUser.username)
return (
<Html>

24
common/messages/de.json
View File

@@ -9,7 +9,7 @@
"about.block.democratic.suffix": " garantieren.",
"about.block.democratic.title": "Demokratisch",
"about.block.free.text": "Kein Abonnement. Keine Bezahlschranke. Keine Werbung.",
"about.block.free.title": "Kostenlos",
"about.block.free.title": "Völlig kostenlos",
"about.block.keyword.text": "\"Meditation\", \"Wandern\", \"Neurowissenschaften\", \"Nietzsche\". Greifen Sie auf jedes Profil zu und finden Sie Ihre Nische.",
"about.block.keyword.title": "Suche nach Schlüsselwörtern",
"about.block.mission.text": "Unsere einzige Mission ist es, mehr authentische menschliche Beziehungen zu schaffen, und jede Entscheidung muss diesem Ziel dienen.",
@@ -25,27 +25,31 @@
"about.block.transparent.title": "Transparenz",
"about.block.vision.text": "Compass ist für menschliche Beziehungen das, was Linux, Wikipedia und Firefox für Software und Wissen sind: ein öffentliches Gut, das von den Menschen, die es nutzen, für das Wohl aller aufgebaut wird.",
"about.block.vision.title": "Vision",
"about.dev.button": "Code ansehen",
"about.dev.button": "Code ansehen →",
"about.dev.text": "Der vollständige Quellcode und Anleitungen sind auf GitHub verfügbar.",
"about.dev.title": "Die App entwickeln",
"about.donate.button": "Spendenoptionen",
"about.donate.text": "Unterstützen Sie unsere gemeinnützige Infrastruktur.",
"about.donate.button": "Spendenoptionen →",
"about.donate.text": "Unterstützen Sie unsere gemeinnützige Infrastruktur. Jeder Beitrag hält die Lichter an.",
"about.donate.title": "Spenden",
"about.final.text": "Vielen Dank für die Unterstützung unserer Mission!",
"about.final.text": "Der beste Weg, Compass wachsen zu lassen, ist Mundpropaganda. Vielen Dank für die Unterstützung unserer Mission.",
"about.final.title": "Erzählen Sie Ihren Freunden und Ihrer Familie davon",
"about.help.title": "Compass helfen",
"about.join.button": "Discord beitreten",
"about.join.text": "Lassen Sie uns die Plattform gemeinsam gestalten.",
"about.join.button": "Discord beitreten →",
"about.join.text": "Lassen Sie uns die Plattform gemeinsam gestalten. Teilen Sie Ideen, geben Sie Feedback, treffen Sie andere Builder.",
"about.join.title": "Der Community beitreten",
"about.seo.description": "Über Compass",
"about.seo.title": "Über uns",
"about.settings.copied": "Kopiert!",
"about.settings.copy_info": "Infos kopieren",
"about.subtitle": "Finden Sie Ihre Leute ganz einfach.",
"about.suggestions.button": "Hier vorschlagen",
"about.suggestions.text": "Machen Sie Vorschläge oder teilen Sie uns mit, dass Sie über dieses Formular helfen möchten!",
"about.subtitle": "Finden Sie Ihre Leute ganz einfach — basierend auf wer sie sind, nicht wie sie aussehen.",
"about.suggestions.button": "Hier vorschlagen →",
"about.suggestions.text": "Machen Sie Vorschläge oder lassen Sie uns wissen, dass Sie durch dieses Formular helfen möchten. Jede Idee zählt.",
"about.suggestions.title": "Vorschläge machen oder beitragen",
"about.title": "Warum Compass wählen?",
"about.copy_link": " Link kopieren",
"about.eyebrow": "Über Compass",
"about.features.label": "Was uns unterscheidet",
"about.help.label": "Helfen Sie Compass zu wachsen",
"add_photos.add_description": "Beschreibung hinzufügen",
"add_photos.profile_picture_hint": "Das hervorgehobene Bild ist Ihr Profilbild",
"answers.add.error_create": "Fehler beim Erstellen der Kompatibilitätsfrage. Erneut versuchen?",

28
common/messages/fr.json
View File

@@ -9,7 +9,7 @@
"about.block.democratic.suffix": ".",
"about.block.democratic.title": "Démocratique",
"about.block.free.text": "Sans abonnement. Sans paywall. Sans publicité.",
"about.block.free.title": "Gratuit",
"about.block.free.title": "Complètement gratuit",
"about.block.keyword.text": "\"Méditation\", \"Randonnée\", \"Neurosciences\", \"Nietzsche\". Accédez à n'importe quel profil et trouvez votre niche.",
"about.block.keyword.title": "Recherche par mots-clés",
"about.block.mission.text": "Notre unique mission est de créer plus de relations humaines authentiques, et chaque décision doit servir cet objectif.",
@@ -25,27 +25,31 @@
"about.block.transparent.title": "Transparence",
"about.block.vision.text": "Compass est aux relations humaines ce que Linux, Wikipédia et Firefox sont aux logiciels et au savoir : un bien public construit par les personnes qui l'utilisent, pour le bien de tous.",
"about.block.vision.title": "Vision",
"about.dev.button": "Voir le code",
"about.dev.button": "Voir le code →",
"about.dev.text": "Le code source complet et les instructions sont disponibles sur GitHub.",
"about.dev.title": "Développer l'application",
"about.donate.button": "Options de don",
"about.donate.text": "Soutenez notre infrastructure à but non lucratif.",
"about.donate.button": "Options de don →",
"about.donate.text": "Soutiens notre infrastructure à but non lucratif. Chaque contribution permet de faire tourner les serveurs.",
"about.donate.title": "Faire un don",
"about.final.text": "Merci de soutenir notre mission !",
"about.final.title": "Parlez-en à vos amis et votre famille",
"about.help.title": "Aidez Compass",
"about.join.button": "Rejoindre le Discord",
"about.join.text": "Façonnons la plateforme ensemble.",
"about.final.text": "Le meilleur moyen de faire grandir Compass est le bouche-à-oreille. Merci de soutenir notre mission.",
"about.final.title": "Parles-en à tes amis et ta famille",
"about.help.title": "Aide Compass",
"about.join.button": "Rejoindre le Discord →",
"about.join.text": "Façonnons la plateforme ensemble. Partage des idées, donne ton avis, rencontre d'autres personnes.",
"about.join.title": "Rejoindre la communauté",
"about.seo.description": "À propos de Compass",
"about.seo.title": "À propos",
"about.settings.copied": "Copié !",
"about.settings.copy_info": "Copier les infos",
"about.subtitle": "Trouvez vos personnes en toute simplicité.",
"about.suggestions.button": "Suggérer ici",
"about.suggestions.text": "Faites des suggestions ou dites-nous que vous voulez aider via ce formulaire !",
"about.subtitle": "Trouve tes personnes en toute simplicité — selon qui ils sont, pas selon leur apparence.",
"about.suggestions.button": "Suggérer ici →",
"about.suggestions.text": "Donne des suggestions ou fais-nous savoir que tu souhaites aider via ce formulaire. Chaque idée compte.",
"about.suggestions.title": "Faire des suggestions ou contribuer",
"about.title": "Pourquoi choisir Compass ?",
"about.copy_link": " Copier le lien",
"about.eyebrow": "À propos de Compass",
"about.features.label": "Ce qui nous différencie",
"about.help.label": "Aide Compass à grandir",
"add_photos.add_description": "Ajouter une description",
"add_photos.profile_picture_hint": "L'image mise en surbrillance est votre photo de profil",
"answers.add.error_create": "Erreur lors de la création de la question de compatibilité. Réessayez ?",

4
common/src/socials.ts
View File

@@ -123,8 +123,8 @@ export const PLATFORM_LABELS: {[key in Site]: string} = {
}
export function getXShareProfileUrl(
username: string,
t: (key: string, fallback: string, vars?: Record<string, string | number>) => string,
username?: string,
) {
const encodedText = encodeURIComponent(
t(
@@ -132,7 +132,7 @@ export function getXShareProfileUrl(
"There's a free, open-source alternative to dating and networking apps.\nNo swipes. No ads. No algorithms. Just search for people who share your values.",
) + '\n@compassmeet',
)
const encodedUrl = encodeURIComponent(`${DEPLOYED_WEB_URL}/${username}`)
const encodedUrl = encodeURIComponent(`${DEPLOYED_WEB_URL}/${username || ''}`)
return `https://x.com/intent/tweet?text=${encodedText}&url=${encodedUrl}`
}

4
web/components/buttons/button.tsx
View File

@@ -35,9 +35,9 @@ const sizeClasses = {
export const baseButtonClasses =
'font-md inline-flex items-center justify-center rounded-md ring-inset transition-colors disabled:cursor-not-allowed text-center'
const solid = 'disabled:bg-ink-300 text-white'
const solid = 'disabled:bg-canvas-200 text-white'
export const outline =
'ring-1 ring-current ring-ink-300 disabled:ring-ink-300 disabled:text-ink-300 disabled:bg-inherit'
'ring-1 ring-current ring-canvas-200 disabled:ring-canvas-200 disabled:text-canvas-200 disabled:bg-inherit'
const gradient = [solid, 'bg-gradient-to-r hover:saturate-150 disabled:bg-none']
export function buttonClass(size: SizeType, color: ColorType) {

8
web/components/buttons/copy-link-button.tsx
View File

@@ -13,7 +13,7 @@ import {Tooltip} from '../widgets/tooltip'
export function CopyLinkOrShareButton(props: {
url: string
eventTrackingName: string // was type ShareEventName — why??
eventTrackingName?: string // was type ShareEventName — why??
tooltip?: string
className?: string
iconClassName?: string
@@ -49,7 +49,7 @@ export function CopyLinkOrShareButton(props: {
onClick={onClick}
className={clsx(
className,
'text-primary-700 hover:text-primary-800',
'text-primary-700 hover:text-primary-800 gap-2',
isSuccess && 'duration-[25ms]',
)}
disabled={!url}
@@ -199,12 +199,12 @@ export const shareOnLinkedIn = (profileUrl: string) => {
window.open(shareUrl, '_blank', 'noopener,noreferrer')
}
export const ShareProfileOnXButton = (props: {username: string; className?: string}) => {
export const ShareProfileOnXButton = (props: {username?: string; className?: string}) => {
const {username, className} = props
const t = useT()
return (
<Button className={className} onClick={() => shareOnX(getXShareProfileUrl(username, t))}>
<Button className={className} onClick={() => shareOnX(getXShareProfileUrl(t, username))}>
{t('share_profile.on_x', 'Share on X')}
</Button>
)

16
web/components/buttons/general-button.tsx
View File

@@ -1,15 +1,19 @@
import clsx from 'clsx'
import Link from 'next/link'
export const GeneralButton = (props: {url: string; content: string}) => {
const {url, content} = props
export const GeneralButton = (props: {url: string; content: string; color?: string}) => {
const {url, content, color} = props
return (
<div className="rounded-xl p-3 flex flex-col items-center group">
<div className="rounded-xl p-3 flex flex-col group">
<Link
href={url}
className="w-full px-8 py-3 rounded-full border-2 border-primary-200 dark:border-gray-600 text-gray-800 dark:text-white font-medium text-lg
hover:translate-y-[-2px] transition-transform duration-200 ease-in-out
bg-canvas-50 hover:bg-canvas-100 dark:hover:bg-gray-800/50"
className={clsx(
'w-fit px-6 py-3 rounded-xl border-2 font-medium text-md',
'hover:translate-y-[-2px] transition-transform duration-200 ease-in-out',
color ??
'bg-canvas-50 hover:bg-canvas-100 dark:hover:bg-gray-800/50 border-primary-200 dark:border-gray-600 text-gray-800 dark:text-white',
)}
target={url.startsWith('http') ? '_blank' : undefined}
rel={url.startsWith('http') ? 'noopener noreferrer' : undefined}
>

2
web/components/widgets/title.tsx
View File

@@ -4,7 +4,7 @@ import {ReactNode} from 'react'
export function Title(props: {className?: string; children?: ReactNode}) {
const {className, children} = props
return (
<h1 className={clsx('mb-4 inline-block text-2xl font-normal sm:mb-6 sm:text-3xl', className)}>
<h1 className={clsx('mb-4 inline-block text-2xl sm:mb-6 sm:text-3xl', className)}>
{children}
</h1>
)

556
web/pages/about.tsx
View File

@@ -1,247 +1,359 @@
import clsx from 'clsx'
import {discordLink, formLink, githubRepo} from 'common/constants'
import {DEPLOYED_WEB_URL} from 'common/envs/constants'
import Link from 'next/link'
import {ReactNode} from 'react'
import {CopyLinkOrShareButton, ShareProfileOnXButton} from 'web/components/buttons/copy-link-button'
import {GeneralButton} from 'web/components/buttons/general-button'
import {PageBase} from 'web/components/page-base'
import {SEO} from 'web/components/SEO'
import {useT} from 'web/lib/locale'
export const AboutBlock = (props: {text: ReactNode; title: string}) => {
const {text, title} = props
// ─── Types ────────────────────────────────────────────────────────────────────
interface FeatureCardProps {
icon: string
title: string
text: ReactNode
}
interface HelpCardProps {
icon: string
title: string
text: ReactNode
buttonLabel: string
buttonUrl: string
buttonPrimary?: boolean
id?: string
}
// ─── Feature Card ─────────────────────────────────────────────────────────────
function FeatureCard({icon, title, text}: FeatureCardProps) {
return (
<section className="mb-12 px-4 pb-4 bg-canvas-50 border border-canvas-200 rounded-xl shadow-xl">
<h2 className="text-primary-600 text-3xl font-bold mb-4">{title}</h2>
<p className="text-lg">{text}</p>
</section>
<div
className="
group relative overflow-hidden
bg-canvas-50 border-[1.5px] border-canvas-200 rounded-2xl p-7
transition-all duration-[120ms] ease-in
hover:shadow-[0_10px_30px_rgba(44,36,22,0.09)]
hover:border-primary-500
before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]
before:bg-primary-500 before:rounded-l-2xl
before:opacity-0 before:transition-opacity before:duration-[120ms]
hover:before:opacity-100
"
>
<div className="w-11 h-11 rounded-xl bg-canvas-200 border border-canvas-300 flex items-center justify-center text-xl mb-5 flex-shrink-0">
{icon}
</div>
<h3 className="text-base font-bold text-ink-900 mb-2.5">{title}</h3>
<p className="text-sm text-ink-500 leading-relaxed">{text}</p>
</div>
)
}
// ─── Full-width Feature Card ──────────────────────────────────────────────────
function FeatureCardWide({icon, title, text}: FeatureCardProps) {
return (
<div
className="
group relative overflow-hidden col-span-1 md:col-span-2
bg-canvas-50 border-[1.5px] border-canvas-200 rounded-2xl p-7
flex items-center gap-6
transition-all duration-[120ms] ease-in
hover:shadow-[0_10px_30px_rgba(44,36,22,0.09)]
hover:border-primary-500
before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]
before:bg-primary-500 before:rounded-l-2xl
before:opacity-0 before:transition-opacity before:duration-[120ms]
hover:before:opacity-100
"
>
<div className="w-11 h-11 rounded-xl bg-canvas-200 border border-canvas-300 flex items-center justify-center text-xl flex-shrink-0">
{icon}
</div>
<div>
<h3 className="text-base font-bold text-ink-900 mb-2">{title}</h3>
<p className="text-sm text-ink-500 leading-relaxed">{text}</p>
</div>
</div>
)
}
// ─── Help Card ────────────────────────────────────────────────────────────────
function HelpCard({icon, title, text, buttonLabel, buttonUrl, buttonPrimary, id}: HelpCardProps) {
return (
<div
className="
group relative overflow-hidden
bg-canvas-50 border-[1.5px] border-canvas-200 rounded-2xl p-7
transition-all duration-[120ms] ease-in
hover:shadow-[0_10px_30px_rgba(44,36,22,0.09)]
hover:border-green-500
before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]
before:bg-green-500 before:rounded-l-2xl
before:opacity-0 before:transition-opacity before:duration-[120ms]
hover:before:opacity-100
"
>
<div className="w-10 h-10 rounded-xl bg-[#D6E8D9] border border-[#B8D6BC] flex items-center justify-center text-lg mb-4 flex-shrink-0">
{icon}
</div>
<h3 id={id} className="text-base font-bold text-ink-900 mb-2">
{title}
</h3>
<p className="text-sm text-ink-500 leading-relaxed flex-1 mb-5">{text}</p>
<div>
<GeneralButton
url={buttonUrl}
content={buttonLabel}
color={
buttonPrimary
? 'bg-primary-500 hover:bg-primary-600 text-white border-primary-500 shadow-[0_3px_12px_rgba(193,127,62,0.3)]'
: 'bg-canvas-100 hover:border-green-500 hover:text-green-500 border-canvas-300 text-ink-900'
}
/>
</div>
</div>
)
}
// ─── Section Label ────────────────────────────────────────────────────────────
function SectionLabel({children}: {children: ReactNode}) {
return (
<div className="flex items-center gap-3 mb-4">
<span className="text-[11px] font-bold tracking-[1.2px] uppercase text-ink-500">
{children}
</span>
<div className="flex-1 h-px bg-canvas-200" />
</div>
)
}
// ─── Share Strip ──────────────────────────────────────────────────────────────
function ShareStrip({title, text}: {title: string; text: string}) {
const t = useT()
return (
<div className="bg-canvas-950 rounded-2xl px-9 py-8 flex items-center justify-between gap-6 flex-wrap">
<div className={'max-w-[500px]'}>
<h3 className="text-white text-lg font-bold mb-1.5">📣 {title}</h3>
<p className="text-primary-500 text-sm leading-relaxed">{text}</p>
</div>
<div className="flex gap-2 flex-wrap flex-shrink-0">
{/*// */}
{/*// ${*/}
{/*// primary*/}
{/*// ? 'bg-primary-500 text-white border-primary-500 hover:bg-primary-600'*/}
{/*// : 'bg-white/[0.06] text-canvas-200 border-white/10 hover:bg-white/[0.12] hover:text-canvas-50'*/}
{/*// }*/}
<ShareProfileOnXButton
className={clsx(
'px-4 py-2 rounded-xl text-sm font-semibold border transition-all duration-150',
'bg-white/[0.06] !text-white/60 border-white/10 hover:bg-white/[0.12] hover:text-white',
)}
/>
<CopyLinkOrShareButton
url={DEPLOYED_WEB_URL}
children={t('about.copy_link', ' Copy Link')}
className={clsx(
'px-4 py-2 rounded-xl text-sm font-semibold border transition-all duration-150',
'bg-primary-500 text-white hover:text-white border-primary-500 hover:bg-primary-600',
)}
/>
</div>
</div>
)
}
// ─── Divider ──────────────────────────────────────────────────────────────────
function Divider() {
return (
<div className="h-px bg-gradient-to-r from-transparent via-canvas-200 to-transparent my-10" />
)
}
// ─── Page ─────────────────────────────────────────────────────────────────────
export default function About() {
const t = useT()
const features: (FeatureCardProps & {wide?: boolean})[] = [
{
icon: '🔍',
title: t('about.block.keyword.title', 'Keyword Search the Database'),
text: t(
'about.block.keyword.text',
'"Meditation", "Hiking", "Neuroscience", "Nietzsche". Access any profile and get niche.',
),
},
{
icon: '🔔',
title: t('about.block.notify.title', 'Get Notified About Searches'),
text: t(
'about.block.notify.text',
"No need to constantly check the app! We'll contact you when new users fit your searches.",
),
},
{
icon: '🎭',
title: t('about.block.personality.title', 'Personality-Centered'),
text: t('about.block.personality.text', 'Values and interests first, photos are secondary.'),
},
{
icon: '🎁',
title: t('about.block.free.title', 'Completely Free'),
text: t('about.block.free.text', 'Subscription-free. Paywall-free. Ad-free.'),
},
{
icon: '🗳️',
title: t('about.block.democratic.title', 'Democratic'),
text: (
<span>
{t('about.block.democratic.prefix', 'Governed and ')}
<Link href="/vote" className="text-primary-500 hover:underline">
{t('about.block.democratic.link_voted', 'voted')}
</Link>
{t(
'about.block.democratic.middle',
' by the community, while ensuring no drift through our ',
)}
<Link href="/constitution" className="text-primary-500 hover:underline">
{t('about.block.democratic.link_constitution', 'constitution')}
</Link>
{t('about.block.democratic.suffix', '.')}
</span>
),
},
{
icon: '🎯',
title: t('about.block.mission.title', 'One Mission'),
text: t(
'about.block.mission.text',
'Our only mission is to create more genuine human connections, and every decision must serve that goal.',
),
},
{
icon: '🌍',
title: t('about.block.vision.title', 'Vision'),
text: t(
'about.block.vision.text',
'Compass is to human connection what Linux, Wikipedia, and Firefox are to software and knowledge: a public good built by the people who use it, for the benefit of everyone.',
),
wide: true,
},
]
const helpCards: HelpCardProps[] = [
{
icon: '💡',
id: 'give-suggestions-or-contribute',
title: t('about.suggestions.title', 'Give Suggestions or Contribute'),
text: t(
'about.suggestions.text',
'Give suggestions or let us know you want to help through this form. Every idea matters.',
),
buttonLabel: t('about.suggestions.button', 'Suggest Here →'),
buttonUrl: formLink,
// buttonPrimary: true,
},
{
icon: '💻',
id: 'share',
title: t('about.dev.title', 'Develop the App'),
text: t(
'about.dev.text',
'The full source code and instructions are available on GitHub. PRs welcome.',
),
buttonLabel: t('about.dev.button', 'View Code →'),
buttonUrl: githubRepo,
},
{
icon: '💬',
id: 'join-chats',
title: t('about.join.title', 'Join the Community'),
text: t(
'about.join.text',
"Let's shape the platform together. Share ideas, give feedback, meet other builders.",
),
buttonLabel: t('about.join.button', 'Join the Discord →'),
buttonUrl: discordLink,
},
{
icon: '❤️',
id: 'donate',
title: t('about.donate.title', 'Donate'),
text: t(
'about.donate.text',
'Support our not-for-profit infrastructure. Every contribution keeps the lights on.',
),
buttonLabel: t('about.donate.button', 'Donation Options →'),
buttonUrl: '/support',
},
]
return (
<PageBase trackPageView={'about'}>
<SEO
title={t('about.seo.title', 'About')}
description={t('about.seo.description', 'About Compass')}
url={`/about`}
url="/about"
/>
<div className="min-h-screen p-6">
<div className="w-full">
<div className="relative py-8 mb-8 overflow-hidden">
<div className="relative z-10 max-w-3xl mx-auto px-4">
<h1 className="text-3xl font-bold mb-4 text-center">
{t('about.title', 'Why Choose Compass?')}
</h1>
<div className="flex flex-col md:flex-row items-center justify-center mb-8 gap-8">
<div className="w-full text-center">
<h3 className="text-primary-600 text-3xl mb-2">
{t('about.subtitle', 'To find your people with ease.')}
</h3>
</div>
</div>
</div>
</div>
<div className="et_pb_text_inner">
<div className="max-w-3xl mx-auto mt-20 mb-8 ">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<AboutBlock
title={t('about.block.keyword.title', 'Keyword Search the Database')}
text={t(
'about.block.keyword.text',
'"Meditation", "Hiking", "Neuroscience", "Nietzsche". Access any profile and get niche.',
)}
/>
<AboutBlock
title={t('about.block.notify.title', 'Get Notified About Searches')}
text={t(
'about.block.notify.text',
"No need to constantly check the app! We'll contact you when new users fit your searches.",
)}
/>
<AboutBlock
title={t('about.block.free.title', 'Free')}
text={t('about.block.free.text', 'Subscription-free. Paywall-free. Ad-free.')}
/>
<AboutBlock
title={t('about.block.personality.title', 'Personality-Centered')}
text={t(
'about.block.personality.text',
'Values and interests first, photos are secondary.',
)}
/>
<AboutBlock
title={t('about.block.transparent.title', 'Transparent')}
text={t(
'about.block.transparent.text',
'Open source code and community designed.',
)}
/>
<AboutBlock
title={t('about.block.democratic.title', 'Democratic')}
text={
<span className="custom-link">
{t('about.block.democratic.prefix', 'Governed and ')}
<Link href="/vote">{t('about.block.democratic.link_voted', 'voted')}</Link>
{t(
'about.block.democratic.middle',
' by the community, while ensuring no drift through our ',
)}
<Link href="/constitution">
{t('about.block.democratic.link_constitution', 'constitution')}
</Link>
{t('about.block.democratic.suffix', '.')}
</span>
}
/>
<AboutBlock
title={t('about.block.mission.title', 'One Mission')}
text={t(
'about.block.mission.text',
'Our only mission is to create more genuine human connections, and every decision must serve that goal.',
)}
/>
<AboutBlock
title={t('about.block.vision.title', 'Vision')}
text={t(
'about.block.vision.text',
'Compass is to human connection what Linux, Wikipedia, and Firefox are to software and knowledge: a public good built by the people who use it, for the benefit of everyone.',
)}
/>
{/*<AboutBlock*/}
{/* title={t('about.block.press.title', 'Press')}*/}
{/* text={<span className="custom-link">*/}
{/* {t('about.block.press.text', 'Explore the latest press stories ')}*/}
{/* <Link href="/press">{t('about.block.press.link', 'here')}</Link>.*/}
{/*</span>}*/}
{/*/>*/}
</div>
</div>
</div>
<div className="relative py-8 mt-12 overflow-hidden">
<div className="relative z-10 max-w-3xl mx-auto px-4">
<h3 className="text-4xl font-bold text-center mt-8 mb-8">
{t('about.help.title', 'Help Compass')}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
<div className="rounded-xl shadow p-6 flex flex-col items-center bg-canvas-50">
<h5
id="give-suggestions-or-contribute"
className="font-bold mb-4 text-xl text-center text-primary-600"
>
{t('about.suggestions.title', 'Give Suggestions or Contribute')}
</h5>
<p className="mb-4 text-center">
{t(
'about.suggestions.text',
'Give suggestions or let us know you want to help through this form!',
)}
</p>
<GeneralButton
url={formLink}
content={t('about.suggestions.button', 'Suggest Here')}
/>
</div>
<div className="rounded-xl shadow p-6 flex flex-col items-center bg-canvas-50">
<h5 id="share" className="font-bold mb-4 text-xl text-center text-primary-600">
{t('about.dev.title', 'Develop the App')}
</h5>
<p className="mb-4 text-center">
{t(
'about.dev.text',
'The full source code and instructions are available on GitHub.',
)}
</p>
<GeneralButton url={githubRepo} content={t('about.dev.button', 'View Code')} />
</div>
<div className="rounded-xl shadow p-6 flex flex-col items-center bg-canvas-50">
<h5
id="join-chats"
className="font-bold mb-4 text-xl text-center text-primary-600"
>
{t('about.join.title', 'Join the Community')}
</h5>
<p className="mb-4 text-center">
{t('about.join.text', "Let's shape the platform together.")}
</p>
<div className="flex flex-col gap-4 w-full items-center">
<GeneralButton
url={discordLink}
content={t('about.join.button', 'Join the Discord')}
/>
{/*<a*/}
{/* href={stoatLink}*/}
{/* className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition"*/}
{/* target="_blank" rel="noopener noreferrer"*/}
{/*>*/}
{/* Join on Stoat / Revolt*/}
{/*</a>*/}
</div>
</div>
<div className="rounded-xl shadow p-6 flex flex-col items-center bg-canvas-50">
<h5 id="donate" className="font-bold mb-4 text-xl text-center text-primary-600">
{t('about.donate.title', 'Donate')}
</h5>
<p className="mb-4 text-center custom-link">
{t('about.donate.text', 'Support our not-for-profit infrastructure.')}
</p>
<div className="flex flex-col gap-4 w-full items-center">
<GeneralButton
url={'/support'}
content={t('about.donate.button', 'Donation Options')}
/>
{/*<a*/}
{/* href="https://patreon.com/CompassMeet"*/}
{/* className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"*/}
{/* target="_blank" rel="noopener noreferrer"*/}
{/*>*/}
{/* Donate on Patreon*/}
{/*</a>*/}
{/*<a*/}
{/* href="https://www.paypal.com/paypalme/CompassConnections"*/}
{/* className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"*/}
{/* target="_blank" rel="noopener noreferrer"*/}
{/*>*/}
{/* Donate on PayPal*/}
{/*</a>*/}
{/*<a*/}
{/* href="https://ko-fi.com/compassconnections"*/}
{/* className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition text-center"*/}
{/* target="_blank" rel="noopener noreferrer"*/}
{/*>*/}
{/* Donate on Ko-fi*/}
{/*</a>*/}
{/*<a*/}
{/* href="https://github.com/sponsors/CompassConnections"*/}
{/* className="px-6 py-2 rounded-full bg-gray-200 text-gray-800 font-semibold text-lg shadow hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transition w-full text-center"*/}
{/* target="_blank" rel="noopener noreferrer"*/}
{/*>*/}
{/* Donate on GitHub*/}
{/*</a>*/}
{/*<span className="text-sm text-gray-400 mt-2 text-center block">*/}
{/*GitHub has increased transparency,<br/>but requires an account.*/}
{/*</span>*/}
</div>
</div>
<div className="rounded-xl shadow p-6 flex flex-col items-center md:col-span-2 bg-canvas-200">
<h5 id="github-repo" className="font-bold mb-4 text-xl text-center">
{t('about.final.title', 'Tell Your Friends and Family')}
</h5>
<p className="mb-4 text-center">
{t('about.final.text', 'Thank you for supporting our mission!')}
</p>
</div>
</div>
</div>
</div>
<div className="max-w-4xl mx-auto px-6 py-12 pb-20">
{/* ── Page header ── */}
<div className="mb-10">
<p className="text-xs font-bold tracking-[1.5px] uppercase text-primary-500 mb-3">
{t('about.eyebrow', 'About Compass')}
</p>
<h1 className="text-[clamp(28px,4vw,40px)] font-black text-ink-900 tracking-tight leading-tight mb-3">
{t('about.title', 'Why Choose Compass?')}
</h1>
<p className="text-lg text-ink-500 max-w-lg leading-relaxed">
{t(
'about.subtitle',
'To find your people with ease — based on who they are, not how they look.',
)}
</p>
</div>
{/* ── Features ── */}
<SectionLabel>{t('about.features.label', 'What makes us different')}</SectionLabel>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
{features.map((f) =>
f.wide ? (
<FeatureCardWide key={f.title} icon={f.icon} title={f.title} text={f.text} />
) : (
<FeatureCard key={f.title} icon={f.icon} title={f.title} text={f.text} />
),
)}
</div>
<Divider />
{/* ── Help ── */}
<SectionLabel>{t('about.help.label', 'Help Compass grow')}</SectionLabel>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
{helpCards.map((card) => (
<HelpCard key={card.id} {...card} />
))}
</div>
{/* ── Share strip ── */}
<ShareStrip
title={t('about.final.title', 'Tell Your Friends and Family')}
text={t(
'about.final.text',
'The best way to grow Compass is word of mouth. Thank you for supporting our mission.',
)}
/>
</div>
</PageBase>
)

38
web/styles/globals.css
View File

@@ -105,22 +105,6 @@
/* Green - Accents */
--color-green-500: 107 143 113; /* Accent - Sage Green (#6B8F71) */
/* Text / Ink Grey Scale */
/* High Contrast */
--color-ink-0: 255 255 255; /* white */
--color-ink-50: 255 255 255;
--color-ink-100: 255 255 255;
--color-ink-200: 255 255 255;
--color-ink-300: 160 160 160;
--color-ink-400: 160 160 160;
/*--color-ink-500: 80 80 80;*/
--color-ink-600: 0 0 0;
--color-ink-700: 0 0 0;
--color-ink-800: 0 0 0;
/*--color-ink-900: 0 0 0;*/
--color-ink-950: 0 0 0;
--color-ink-1000: 0 0 0; /* black */
/* Canvas - Backgrounds & Surfaces */
--color-canvas-0: 255 255 255; /* white */
--color-canvas-25: 242 240 232;
@@ -128,11 +112,6 @@
--color-canvas-100: 237 232 224; /* Main Page Background - Warm Beige (#EDE8E0) */
--color-canvas-200: 232 213 188; /* Tags - Light Tan (#E8D5BC) */
--color-canvas-300: 222 203 178;
--color-canvas-400: 160 160 160;
--color-canvas-500: 130 130 130;
--color-canvas-600: 100 100 100;
--color-canvas-700: 75 75 75;
--color-canvas-800: 50 50 50;
--color-canvas-900: 68 52 34; /* Sidebar pressed */
--color-canvas-950: 44 36 22; /* Sidebar - Dark Espresso (#2C2416) */
--color-canvas-1000: 44 36 22; /* black */
@@ -150,6 +129,20 @@
--color-primary-900: 71 39 16; /* #472710 */
--color-primary-950: 43 21 8; /* #2B1508 */
--color-ink-0: 255 255 255; /* white */
--color-ink-50: 255 255 255;
--color-ink-100: 255 255 255;
--color-ink-200: 255 255 255;
--color-ink-300: 160 160 160;
--color-ink-400: 160 160 160;
/*--color-ink-500: 80 80 80;*/
--color-ink-600: 0 0 0;
--color-ink-700: 0 0 0;
--color-ink-800: 0 0 0;
/*--color-ink-900: 0 0 0;*/
--color-ink-950: 0 0 0;
--color-ink-1000: 0 0 0; /* black */
--color-yes-0: 255 255 255;
--color-yes-50: 249 249 249;
--color-yes-100: 242 242 242;
@@ -248,6 +241,7 @@
--color-canvas-100: 26 22 18; /* Main Page Background (#2C2416) */
--color-canvas-200: 68 52 34; /* UI Elements/Tags */
--color-canvas-300: 78 62 44;
--color-canvas-900: 25 23 20; /* Sidebar pressed */
--color-canvas-950: 15 13 10; /* Deepest depth (Sidebar/Bottom) */
--color-canvas-1000: 247 244 239; /* Deepest depth (Sidebar/Bottom) */
@@ -414,7 +408,7 @@ h4,
h5,
h6 {
/*font-family: 'Inter', sans-serif; !* Clean modern font *!*/
font-weight: 600; /* Semi-bold for clarity */
font-weight: 900; /* Semi-bold for clarity */
/*color: #111827; !* Near-black text for readability *!*/
line-height: 1.25;
margin-top: 1.5rem;