289 lines
11 KiB
TypeScript
289 lines
11 KiB
TypeScript
import { url } from '@/app/layout.config';
|
||
import { HeroContainer } from '@/components/hero';
|
||
import { Section, SectionHeader } from '@/components/section';
|
||
import { Faq } from '@/components/sections/faq';
|
||
import { SupporterPerks } from '@/components/sections/supporter-perks';
|
||
import { Testimonials } from '@/components/sections/testimonials';
|
||
import { Tag } from '@/components/tag';
|
||
import { Button } from '@/components/ui/button';
|
||
import {
|
||
ArrowDownIcon,
|
||
HeartHandshakeIcon,
|
||
SparklesIcon,
|
||
ZapIcon,
|
||
} from 'lucide-react';
|
||
import type { Metadata } from 'next';
|
||
import Link from 'next/link';
|
||
import Script from 'next/script';
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'Become a Supporter',
|
||
description:
|
||
'Support OpenPanel and get exclusive perks like latest Docker images, prioritized support, and early access to new features.',
|
||
alternates: {
|
||
canonical: url('/supporter'),
|
||
},
|
||
openGraph: {
|
||
title: 'Become a Supporter',
|
||
description:
|
||
'Support OpenPanel and get exclusive perks like latest Docker images, prioritized support, and early access to new features.',
|
||
type: 'website',
|
||
url: url('/supporter'),
|
||
},
|
||
twitter: {
|
||
card: 'summary_large_image',
|
||
title: 'Become a Supporter',
|
||
description:
|
||
'Support OpenPanel and get exclusive perks like latest Docker images, prioritized support, and early access to new features.',
|
||
},
|
||
};
|
||
|
||
const jsonLd = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'Article',
|
||
headline: 'Become a Supporter',
|
||
publisher: {
|
||
'@type': 'Organization',
|
||
name: 'OpenPanel',
|
||
logo: {
|
||
'@type': 'ImageObject',
|
||
url: url('/logo.png'),
|
||
},
|
||
},
|
||
mainEntityOfPage: {
|
||
'@type': 'WebPage',
|
||
'@id': url('/supporter'),
|
||
},
|
||
};
|
||
|
||
export default function SupporterPage() {
|
||
return (
|
||
<div>
|
||
<Script
|
||
id="supporter-schema"
|
||
strategy="beforeInteractive"
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||
/>
|
||
<HeroContainer>
|
||
<div className="container relative z-10 col sm:py-44 max-sm:pt-32">
|
||
<div className="col gap-8 text-center">
|
||
<div className="col gap-4">
|
||
<Tag className="self-center">
|
||
<HeartHandshakeIcon className="size-4 text-rose-600" />
|
||
Support Open-Source Analytics
|
||
</Tag>
|
||
<h1 className="text-4xl md:text-5xl font-extrabold leading-[1.1]">
|
||
Help us build the future of{' '}
|
||
<span className="text-primary">open analytics</span>
|
||
</h1>
|
||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||
Your support accelerates development, funds infrastructure, and
|
||
helps us build features faster. Plus, you get exclusive perks
|
||
and early access to everything we ship.
|
||
</p>
|
||
</div>
|
||
<div className="col gap-4 justify-center items-center">
|
||
<Button size="lg" asChild>
|
||
<Link href="https://buy.polar.sh/polar_cl_Az1CruNFzQB2bYdMOZmGHqTevW317knWqV44W1FqZmV">
|
||
Become a Supporter
|
||
<SparklesIcon className="size-4" />
|
||
</Link>
|
||
</Button>
|
||
<p className="text-sm text-muted-foreground">
|
||
Starting at $20/month • Cancel anytime
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</HeroContainer>
|
||
<div className="container max-w-7xl">
|
||
{/* Main Content with Sidebar */}
|
||
<div className="grid lg:grid-cols-[1fr_380px] gap-8 mb-16">
|
||
{/* Main Content */}
|
||
<div className="col gap-12">
|
||
{/* Why Support Section */}
|
||
<section className="col gap-6">
|
||
<h2 className="text-3xl font-bold">Why your support matters</h2>
|
||
<div className="col gap-6 text-muted-foreground">
|
||
<p className="text-lg">
|
||
We're not a big corporation – just a small team passionate
|
||
about building something useful for developers. OpenPanel
|
||
started because we believed analytics tools shouldn't be
|
||
complicated or locked behind expensive enterprise
|
||
subscriptions.
|
||
</p>
|
||
<p>When you become a supporter, you're directly funding:</p>
|
||
<ul className="col gap-3 list-none pl-0">
|
||
<li className="flex items-start gap-3">
|
||
<ZapIcon className="size-5 text-primary mt-0.5 shrink-0" />
|
||
<div>
|
||
<strong className="text-foreground">
|
||
Active Development
|
||
</strong>
|
||
<p className="text-sm mt-1">
|
||
More time fixing bugs, adding features, and improving
|
||
documentation
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<ZapIcon className="size-5 text-primary mt-0.5 shrink-0" />
|
||
<div>
|
||
<strong className="text-foreground">
|
||
Infrastructure
|
||
</strong>
|
||
<p className="text-sm mt-1">
|
||
Keeping servers running, CI/CD pipelines, and
|
||
development tools
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<ZapIcon className="size-5 text-primary mt-0.5 shrink-0" />
|
||
<div>
|
||
<strong className="text-foreground">Independence</strong>
|
||
<p className="text-sm mt-1">
|
||
Staying focused on what matters: building a tool
|
||
developers actually want
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<p>
|
||
No corporate speak, no fancy promises – just honest work on
|
||
making OpenPanel better for everyone. Every contribution, no
|
||
matter the size, helps us stay independent and focused on what
|
||
matters.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* What You Get Section */}
|
||
<section className="col gap-6">
|
||
<h2 className="text-3xl font-bold">
|
||
What you get as a supporter
|
||
</h2>
|
||
<div className="grid md:grid-cols-2 gap-4">
|
||
<div className="p-6 rounded-lg border bg-card">
|
||
<h3 className="font-semibold text-lg mb-2">
|
||
🚀 Latest Docker Images
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Get bleeding-edge builds on every commit. Access new
|
||
features weeks before public release.
|
||
</p>
|
||
<Link
|
||
href="/docs/self-hosting/supporter-access-latest-docker-images"
|
||
className="text-sm text-primary hover:underline"
|
||
>
|
||
Learn more →
|
||
</Link>
|
||
</div>
|
||
<div className="p-6 rounded-lg border bg-card">
|
||
<h3 className="font-semibold text-lg mb-2">
|
||
💬 Prioritized Support
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Get help faster with priority support in our Discord
|
||
community. Your questions get answered first.
|
||
</p>
|
||
</div>
|
||
<div className="p-6 rounded-lg border bg-card">
|
||
<h3 className="font-semibold text-lg mb-2">
|
||
✨ Feature Requests
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Your ideas and feature requests get prioritized in our
|
||
roadmap. Shape the future of OpenPanel.
|
||
</p>
|
||
</div>
|
||
<div className="p-6 rounded-lg border bg-card">
|
||
<h3 className="font-semibold text-lg mb-2">
|
||
⭐ Exclusive Discord Role
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Special badge and recognition in our community. Show your
|
||
support with pride.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Impact Section */}
|
||
<section className="p-8 rounded-xl border bg-gradient-to-br from-primary/5 to-primary/10">
|
||
<h2 className="text-2xl font-bold mb-4">Your impact</h2>
|
||
<p className="text-muted-foreground mb-6">
|
||
Every dollar you contribute goes directly into development,
|
||
infrastructure, and making OpenPanel better. Here's what your
|
||
support enables:
|
||
</p>
|
||
<div className="grid md:grid-cols-3 gap-4">
|
||
<div className="text-center">
|
||
<div className="text-3xl font-bold text-primary mb-2">
|
||
100%
|
||
</div>
|
||
<div className="text-sm text-muted-foreground">
|
||
Open Source
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl font-bold text-primary mb-2">
|
||
24/7
|
||
</div>
|
||
<div className="text-sm text-muted-foreground">
|
||
Active Development
|
||
</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-3xl font-bold text-primary mb-2">∞</div>
|
||
<div className="text-sm text-muted-foreground">
|
||
Self-Hostable
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
{/* Sidebar */}
|
||
<aside className="lg:block hidden">
|
||
<SupporterPerks />
|
||
</aside>
|
||
</div>
|
||
|
||
{/* Mobile Perks */}
|
||
<div className="lg:hidden mb-16">
|
||
<SupporterPerks />
|
||
</div>
|
||
|
||
{/* CTA Section */}
|
||
<Section className="container my-0 py-20">
|
||
<SectionHeader
|
||
tag={
|
||
<Tag>
|
||
<ArrowDownIcon className="size-4" strokeWidth={1.5} />
|
||
Starting at $20/month
|
||
</Tag>
|
||
}
|
||
title="Ready to support OpenPanel?"
|
||
description="Join our community of supporters and help us build the best open-source alternative to Mixpanel. Every contribution helps accelerate development and make OpenPanel better for everyone."
|
||
/>
|
||
<div className="center-center">
|
||
<Button size="lg" asChild>
|
||
<Link href="https://buy.polar.sh/polar_cl_Az1CruNFzQB2bYdMOZmGHqTevW317knWqV44W1FqZmV">
|
||
Become a Supporter Now
|
||
<HeartHandshakeIcon className="size-4" />
|
||
</Link>
|
||
</Button>
|
||
</div>
|
||
</Section>
|
||
</div>
|
||
|
||
<div className="lg:-mx-20 xl:-mx-40 not-prose mt-16">
|
||
<Testimonials />
|
||
<Faq />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|