feature(public): add supporter page

apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/layout-menu.tsx

@@ -9,6 +9,7 @@ import {
   DollarSignIcon,
   GanttChartIcon,
   Globe2Icon,
+  HeartHandshakeIcon,
   LayersIcon,
   LayoutPanelTopIcon,
   PlusIcon,
@@ -96,18 +97,16 @@ export default function LayoutMenu({
             </div>
           </ProjectLink>
         )}
-        {process.env.SELF_HOSTED && (
-          <ProjectLink
-            href={'/settings/organization?tab=billing'}
-            className={cn(
-              'rounded p-2 row items-center gap-2 pointer-events-none',
-            )}
+        {!process.env.SELF_HOSTED && (
+          <a
+            className="rounded p-2 row items-center gap-2 hover:bg-def-200"
+            href="https://openpanel.dev/supporter"
           >
-            <ServerIcon size={20} />
+            <HeartHandshakeIcon size={20} />
             <div className="flex-1 col gap-1">
-              <div className="font-medium">Self-hosted</div>
+              <div className="font-medium">Become a supporter</div>
             </div>
-          </ProjectLink>
+          </a>
         )}
         {isTrial && subscriptionEndsAt && (
           <ProjectLink
@@ -219,6 +218,11 @@ export default function LayoutMenu({
           ))}
         </div>
       </div>
+      <div className="mt-auto w-full">
+        <div className={cn('text-sm w-full text-center')}>
+          Self-hosted instance
+        </div>
+      </div>
     </>
   );
 }

apps/public/components/sections/supporter.tsx

@@ -0,0 +1,35 @@
+import { HeartHandshakeIcon } from 'lucide-react';
+import Link from 'next/link';
+import { SingleSwirl } from '../Swirls';
+import { SectionHeader } from '../section';
+import { Tag } from '../tag';
+import { Button } from '../ui/button';
+
+export function Supporter() {
+  return (
+    <section className="overflow-hidden relative bg-foreground dark:bg-background-dark text-background dark:text-foreground rounded-xl p-0 pb-32 pt-16 mx-auto">
+      <SingleSwirl className="pointer-events-none absolute top-0 bottom-0 left-0" />
+      <SingleSwirl className="pointer-events-none rotate-180 absolute top-0 bottom-0 -right-0 opacity-50" />
+      <div className="container center-center col">
+        <SectionHeader
+          tag={
+            <Tag>
+              <HeartHandshakeIcon className="size-4" />
+              Support OpenPanel
+            </Tag>
+          }
+          title="Support the future of open analytics"
+          description="Join our community of supporters and help us build the best open-source alternative to Mixpanel. Every contribution helps keep OpenPanel free and accessible."
+        />
+        <Button size="lg" variant="secondary" asChild>
+          <Link href="https://buy.polar.sh/polar_cl_Az1CruNFzQB2bYdMOZmGHqTevW317knWqV44W1FqZmV">
+            Become a supporter
+          </Link>
+        </Button>
+        <div className="text-xs text-muted-foreground max-w-sm mt-4">
+          Pay what you want and help us keep the lights on.
+        </div>
+      </div>
+    </section>
+  );
+}

apps/public/content/pages/supporter-thanks.mdx

@@ -0,0 +1,19 @@
+---
+title: Thank you
+description: Thank you for supporting OpenPanel and helping us build better developer tools
+---
+
+Hey there! 👋
+
+Wow – thank you so much for becoming an OpenPanel supporter! It means a lot to us that you've chosen to back our project. Your support just made our day a bit brighter.
+
+You should have received an invite to our private Discord channel – that's where you'll get priority support and can chat directly with our team. If you haven't received it, just let us know!
+
+Running and maintaining an open-source project takes time and effort, and supporters like you make it possible for us to keep improving OpenPanel. As a self-hosted user, you're now part of making OpenPanel better for everyone in the community.
+
+Your support helps us focus on what matters - making OpenPanel more stable and useful.
+
+Got ideas or feedback? We'd love to hear from you! Supporters like you are part of our community, and your input helps shape where we go next. Head over to https//feedback.openpanel.dev to ask for improvements or features.
+
+Thanks again for believing in what we're building. You rock! 🚀
+

apps/public/content/pages/supporter.mdx

@@ -0,0 +1,26 @@
+---
+title: Supporter
+description: As a OpenPanel supporter you support our project and keeping it floating. 
+---
+import { Supporter } from '@/components/sections/supporter'
+import Stats from '@/components/sections/stats';
+import Testimonials from '@/components/sections/testimonials';
+import Faq from '@/components/sections/faq';
+
+Hey there! 👋
+
+TL;DR [**Become a supporter 🫶**](https://buy.polar.sh/polar_cl_Az1CruNFzQB2bYdMOZmGHqTevW317knWqV44W1FqZmV)
+
+First off, we want to say a massive thank you for even considering supporting OpenPanel. As an open-source project, every single supporter means the world to us. We're not a big corporation – just a small team passionate about building something useful for the developer community.
+
+OpenPanel started because we believed monitoring and observability tools shouldn't be complicated or locked behind expensive enterprise subscriptions. We wanted to create something that developers could actually use, modify, and run themselves. That's why we made it open-source – it's not just about the code being free, it's about building something together with the community.
+
+If you're using OpenPanel self-hosted and decide to become a supporter, you're helping us keep this project alive and kicking. Your support means we can spend more time fixing bugs, adding features, and improving documentation. It's as simple as that. 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: building a tool that actually helps developers in their daily work.
+
+<div className="lg:-mx-20 xl:-mx-40 not-prose mt-8">
+  <Supporter />
+  <Testimonials />
+  <Faq />
+</div>

self-hosting/quiz.ts

@@ -178,6 +178,9 @@ async function initiateOnboarding() {
     `${T}1. Docker and Docker Compose installed on your machine.`,
     `${T}2. A domain name that you can use for this setup and point it to this machine's ip`,
     'For more information you can read our article on self-hosting at https://openpanel.dev/docs/self-hosting/self-hosting\n',
+    '',
+    '',
+    'Consider supporting us by becoming a supporter: https://openpanel.dev/supporter (pay what you want and help us keep the lights on)',
   ];
 
   console.log(