feature(public,docs): new public website and docs

apps/public/components/pricing-slider.tsx

@@ -0,0 +1,59 @@
+'use client';
+import NumberFlow from '@number-flow/react';
+
+import { useState } from 'react';
+import { Slider } from './ui/slider';
+
+const PRICING = [
+  { price: 0, events: 5_000 },
+  { price: 5, events: 10_000 },
+  { price: 20, events: 100_000 },
+  { price: 30, events: 250_000 },
+  { price: 50, events: 500_000 },
+  { price: 90, events: 1_000_000 },
+  { price: 180, events: 2_500_000 },
+  { price: 250, events: 5_000_000 },
+  { price: 400, events: 10_000_000 },
+  // { price: 650, events: 20_000_000 },
+  // { price: 900, events: 30_000_000 },
+];
+
+export function PricingSlider() {
+  const [index, setIndex] = useState(2);
+  const match = PRICING[index];
+  const formatNumber = (value: number) => value.toLocaleString();
+
+  return (
+    <>
+      <Slider
+        value={[index]}
+        max={PRICING.length}
+        step={1}
+        tooltip={
+          match
+            ? `${formatNumber(match.events)} events`
+            : `More than ${formatNumber(PRICING[PRICING.length - 1].events)} events`
+        }
+        onValueChange={(value) => setIndex(value[0])}
+      />
+
+      {match ? (
+        <div>
+          <NumberFlow
+            className="text-5xl"
+            value={match.price}
+            format={{
+              style: 'currency',
+              currency: 'USD',
+              maximumFractionDigits: 0,
+            }}
+            locales={'en-US'}
+          />
+          <span className="text-sm text-muted-foreground ml-2">/ month</span>
+        </div>
+      ) : (
+        <div>Contact us hello@openpanel.dev</div>
+      )}
+    </>
+  );
+}