mirror of
https://github.com/CompassConnections/Compass.git
synced 2026-01-25 06:07:57 -05:00
Add /press page
This commit is contained in:
MartinBraquet
@@ -4,6 +4,27 @@
|
||||
"about.block.democratic.middle": " von der Gemeinschaft, während wir gleichzeitig keine Abweichungen durch unsere ",
|
||||
"about.block.democratic.prefix": "Verwaltet und ",
|
||||
"about.block.democratic.suffix": " garantieren.",
|
||||
"about.block.press.title": "Presse",
|
||||
"about.block.press.text": "Entdecken Sie die neuesten Presseberichte ",
|
||||
"about.block.press.link": "hier",
|
||||
"press.seo.title": "Presse - Compass",
|
||||
"press.seo.description": "Aktuelle Berichterstattung und Medienberichte über Compass",
|
||||
"press.title": "Presse",
|
||||
"press.subtitle": "Aktuelle Neuigkeiten und Medienberichte über Compass",
|
||||
"press.media_kit": "Medienpaket",
|
||||
"press.brand_assets": "Markenressourcen",
|
||||
"press.brand_assets_description": "Laden Sie unser Logo und unsere Markenrichtlinien herunter.",
|
||||
"press.download_assets": "Ressourcen herunterladen",
|
||||
"press.contact": "Pressekontakt",
|
||||
"press.contact_description": "Für Presseanfragen wenden Sie sich bitte an unser Team.",
|
||||
"press.contact_us": "Kontakt aufnehmen",
|
||||
"press.no_articles": "Derzeit sind keine Presseartikel verfügbar. Bitte schauen Sie später wieder vorbei.",
|
||||
"languages.en": "Englisch",
|
||||
"languages.fr": "Französisch",
|
||||
"languages.de": "Deutsch",
|
||||
"404.title": "404: Hoppla!",
|
||||
"404.default_message": "Diese Seite konnte nicht gefunden werden.",
|
||||
"404.help_text": "Falls Sie dies nicht erwartet haben, holen Sie sich ",
|
||||
"about.block.democratic.title": "Demokratisch",
|
||||
"about.block.free.text": "Kein Abonnement. Keine Bezahlschranke. Keine Werbung.",
|
||||
"about.block.free.title": "Kostenlos",
|
||||
|
||||
@@ -4,6 +4,27 @@
|
||||
"about.block.democratic.middle": " par la communauté, tout en garantissant aucune dérive via notre ",
|
||||
"about.block.democratic.prefix": "Gouverné et ",
|
||||
"about.block.democratic.suffix": ".",
|
||||
"about.block.press.title": "Presse",
|
||||
"about.block.press.text": "Découvrez les derniers articles de presse ",
|
||||
"about.block.press.link": "ici",
|
||||
"press.seo.title": "Presse - Compass",
|
||||
"press.seo.description": "Dernières actualités et mentions de Compass dans la presse",
|
||||
"press.title": "Presse",
|
||||
"press.subtitle": "Dernières actualités et couverture médiatique de Compass",
|
||||
"press.media_kit": "Kit Média",
|
||||
"press.brand_assets": "Ressources de marque",
|
||||
"press.brand_assets_description": "Téléchargez notre logo et nos directives de marque.",
|
||||
"press.download_assets": "Télécharger les ressources",
|
||||
"press.contact": "Contact presse",
|
||||
"press.contact_description": "Pour toute demande de presse, veuillez contacter notre équipe.",
|
||||
"press.contact_us": "Nous contacter",
|
||||
"press.no_articles": "Aucun article de presse disponible pour le moment. Veuillez réessayer ultérieurement.",
|
||||
"languages.en": "Anglais",
|
||||
"languages.fr": "Français",
|
||||
"languages.de": "Allemand",
|
||||
"404.title": "404 : Oups !",
|
||||
"404.default_message": "Je ne trouve pas cette page.",
|
||||
"404.help_text": "Si vous ne vous attendiez pas à cela, obtenez de l'",
|
||||
"about.block.democratic.title": "Démocratique",
|
||||
"about.block.free.text": "Sans abonnement. Sans paywall. Sans publicité.",
|
||||
"about.block.free.title": "Gratuit",
|
||||
|
||||
@@ -22,18 +22,18 @@ export default function About() {
|
||||
return (
|
||||
<PageBase trackPageView={'about'}>
|
||||
<SEO
|
||||
title={t('about.seo.title','About')}
|
||||
description={t('about.seo.description','About Compass')}
|
||||
title={t('about.seo.title', 'About')}
|
||||
description={t('about.seo.description', 'About Compass')}
|
||||
url={`/about`}
|
||||
/>
|
||||
<div className="text-gray-600 dark:text-white 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>
|
||||
<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-3xl mb-2">{t('about.subtitle','To find your people with ease.')}</h3>
|
||||
<h3 className="text-3xl mb-2">{t('about.subtitle', 'To find your people with ease.')}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,88 +42,101 @@ export default function About() {
|
||||
<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.')}
|
||||
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.")}
|
||||
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.')}
|
||||
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.')}
|
||||
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.')}
|
||||
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')}
|
||||
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','.')}
|
||||
{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.")}
|
||||
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.')}
|
||||
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>
|
||||
<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">
|
||||
<h5 id="give-suggestions-or-contribute" className="font-bold mb-4 text-xl text-center">{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>
|
||||
<h5 id="give-suggestions-or-contribute"
|
||||
className="font-bold mb-4 text-xl text-center">{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>
|
||||
<a
|
||||
href={formLink}
|
||||
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"
|
||||
>
|
||||
{t('about.suggestions.button','Suggest Here')}
|
||||
{t('about.suggestions.button', 'Suggest Here')}
|
||||
</a>
|
||||
</div>
|
||||
<div className="rounded-xl shadow p-6 flex flex-col items-center">
|
||||
<h5 id="share" className="font-bold mb-4 text-xl text-center">{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>
|
||||
<h5 id="share"
|
||||
className="font-bold mb-4 text-xl text-center">{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>
|
||||
<a
|
||||
href={githubRepo}
|
||||
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">
|
||||
{t('about.dev.button','View Code')}
|
||||
{t('about.dev.button', 'View Code')}
|
||||
</a>
|
||||
</div>
|
||||
<div className="rounded-xl shadow p-6 flex flex-col items-center">
|
||||
<h5 id="join-chats" className="font-bold mb-4 text-xl text-center">{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>
|
||||
<h5 id="join-chats"
|
||||
className="font-bold mb-4 text-xl text-center">{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">
|
||||
<a
|
||||
href={discordLink}
|
||||
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"
|
||||
>
|
||||
{t('about.join.button','Join the Discord')}
|
||||
{t('about.join.button', 'Join the Discord')}
|
||||
</a>
|
||||
{/*<a*/}
|
||||
{/* href={stoatLink}*/}
|
||||
@@ -135,14 +148,16 @@ export default function About() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl shadow p-6 flex flex-col items-center">
|
||||
<h5 id="donate" className="font-bold mb-4 text-xl text-center">{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>
|
||||
<h5 id="donate"
|
||||
className="font-bold mb-4 text-xl text-center">{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">
|
||||
<Link
|
||||
href="/support"
|
||||
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"
|
||||
>
|
||||
{t('about.donate.button','Donation Options')}
|
||||
{t('about.donate.button', 'Donation Options')}
|
||||
</Link>
|
||||
{/*<a*/}
|
||||
{/* href="https://patreon.com/CompassMeet"*/}
|
||||
@@ -178,8 +193,9 @@ export default function About() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl shadow p-6 flex flex-col items-center md:col-span-2">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -31,6 +31,7 @@ export default function Organization() {
|
||||
<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>
|
||||
</PageBase>
|
||||
|
||||
140
web/pages/press.tsx
Normal file
140
web/pages/press.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import {PageBase} from 'web/components/page-base'
|
||||
import {SEO} from "web/components/SEO";
|
||||
import {useLocale, useT} from "web/lib/locale";
|
||||
import Link from "next/link";
|
||||
|
||||
type PressItem = {
|
||||
title: string;
|
||||
source: string;
|
||||
date: string;
|
||||
url: string;
|
||||
language: 'en' | 'fr' | 'de';
|
||||
};
|
||||
|
||||
const pressItems: PressItem[] = [
|
||||
// Add press items here in the format:
|
||||
// {
|
||||
// title: 'Article Title',
|
||||
// source: 'Publication Name',
|
||||
// date: '2025-01-15',
|
||||
// url: 'https://example.com/article',
|
||||
// language: 'en',
|
||||
// },
|
||||
// {
|
||||
// title: 'Bonjour',
|
||||
// source: 'Matélé',
|
||||
// date: '2025-01-15',
|
||||
// url: 'https://example.com/article',
|
||||
// language: 'fr',
|
||||
// },
|
||||
];
|
||||
|
||||
const PressItem = ({item}: { item: PressItem, locales: Intl.LocalesArgument }) => (
|
||||
<div className="mb-8 px-6 pb-4 border border-canvas-200 rounded-lg shadow-md hover:shadow-lg transition-shadow">
|
||||
<h3 className="text-xl font-semibold mb-2">
|
||||
<Link href={item.url} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{item.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<div className="flex flex-col sm:flex-row sm:justify-between text-sm mb-2">
|
||||
<span>{item.source}</span>
|
||||
{/*<span>{new Date(item.date).toLocaleDateString(locales, { year: 'numeric', month: 'long', day: 'numeric' })}</span>*/}
|
||||
<span>{new Date(item.date).toLocaleDateString()}</span>
|
||||
</div>
|
||||
{/*<div className="mt-2">*/}
|
||||
{/* <span className="inline-block px-2 py-1 text-xs rounded-full">*/}
|
||||
{/* {item.language.toUpperCase()}*/}
|
||||
{/* </span>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function PressPage() {
|
||||
const t = useT();
|
||||
|
||||
const pressByLanguage = pressItems.reduce<Record<string, PressItem[]>>((acc, item) => {
|
||||
if (!acc[item.language]) {
|
||||
acc[item.language] = [];
|
||||
}
|
||||
acc[item.language].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const {locale} = useLocale()
|
||||
|
||||
return (
|
||||
<PageBase trackPageView={'press'}>
|
||||
<SEO
|
||||
title={t('press.seo.title', 'Press - Compass')}
|
||||
description={t('press.seo.description', 'Latest press coverage and media mentions of Compass')}
|
||||
url={'/press'}
|
||||
/>
|
||||
|
||||
<div className="max-w-4xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold mb-4">
|
||||
{t('press.title', 'Press')}
|
||||
</h1>
|
||||
<p className="text-xl max-w-3xl mx-auto">
|
||||
{t('press.subtitle', 'Latest news and media coverage about Compass')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12">
|
||||
<h2 className="text-2xl font-semibold mb-6">
|
||||
{t('press.media_kit', 'Media Kit')}
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="px-6 pb-4 border border-canvas-200 rounded-lg shadow">
|
||||
<h3 className="text-lg font-medium mb-3">{t('press.brand_assets', 'Brand Assets')}</h3>
|
||||
<p className=" mb-4">
|
||||
{t('press.brand_assets_description', 'Download our logo and brand guidelines.')}
|
||||
</p>
|
||||
<a
|
||||
href="https://github.com/CompassConnections/assets/archive/refs/heads/main.zip"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
{t('press.download_assets', 'Download Assets')}
|
||||
</a>
|
||||
</div>
|
||||
<div className="px-6 pb-4 border border-canvas-200 rounded-lg shadow">
|
||||
<h3 className="text-lg font-medium mb-3">{t('press.contact', 'Press Contact')}</h3>
|
||||
<p className="-300 mb-4">
|
||||
{t('press.contact_description', 'For press inquiries, please contact our team.')}
|
||||
</p>
|
||||
<a
|
||||
href="mailto:hello@compassmeet.com"
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
{t('press.contact_us', 'Contact Us')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{Object.entries(pressByLanguage).map(([language, items]) => (
|
||||
<div key={language}>
|
||||
<h2 className="text-2xl font-semibold mb-6">
|
||||
{t(`languages.${language}`, language.toUpperCase())}
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{items.map((item, index) => (
|
||||
<PressItem key={index} item={item} locales={locale}/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{pressItems.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="">
|
||||
{t('press.no_articles', 'No press articles available at the moment. Please check back later.')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageBase>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user