45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
import { useSeoMeta } from '@unhead/react';
|
|
import { SupportSkateSpots } from '@/components/SupportSkateSpots';
|
|
import { SilentPaymentsCard } from '@/components/SilentPaymentsCard';
|
|
import { AngorProjectCard } from '@/components/AngorProjectCard';
|
|
import { WaysToSupport } from '@/components/WaysToSupport';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
/**
|
|
* Focused, shareable donation page: the three rails and nothing else.
|
|
* Reuses the same cards as /supporters (via the shared components).
|
|
*/
|
|
export default function DonatePage() {
|
|
const { t } = useTranslation();
|
|
useSeoMeta({
|
|
title: t('seoUi.donateTitle'),
|
|
description: t('seoUi.donateDesc'),
|
|
ogTitle: 'Support SkateSpots',
|
|
ogDescription: 'Keep the map free, ad-free and open-source.',
|
|
ogImage: 'https://skate-spots.org/images/og-card-v2.png',
|
|
});
|
|
|
|
return (
|
|
<div className="container max-w-3xl space-y-6 px-4 py-12 md:py-16">
|
|
<header className="text-center">
|
|
<div className="mb-4 text-6xl">⚡</div>
|
|
<h1 className="mb-3 text-4xl font-black uppercase leading-none md:text-5xl">
|
|
<span className="neon-lime">{t('walletUi.supporters.donateTitle')}</span>
|
|
</h1>
|
|
<p className="mx-auto max-w-lg text-gray-400">{t('walletUi.supporters.donateDesc')}</p>
|
|
</header>
|
|
|
|
<WaysToSupport />
|
|
|
|
<div id="support-lightning" className="scroll-mt-24">
|
|
<SupportSkateSpots />
|
|
</div>
|
|
<div id="support-silent" className="scroll-mt-24">
|
|
<SilentPaymentsCard />
|
|
</div>
|
|
<div id="support-angor" className="scroll-mt-24">
|
|
<AngorProjectCard />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|