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

apps/public/components/sections/pricing.tsx

@@ -0,0 +1,77 @@
+import { CheckIcon, DollarSignIcon } from 'lucide-react';
+import Link from 'next/link';
+import { DoubleSwirl } from '../Swirls';
+import { PricingSlider } from '../pricing-slider';
+import { Section, SectionHeader } from '../section';
+import { Tag } from '../tag';
+import { Button } from '../ui/button';
+
+export default Pricing;
+export function Pricing() {
+  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 max-w-7xl mx-auto">
+      <DoubleSwirl className="absolute -top-32 left-0" />
+      <div className="container relative z-10">
+        <SectionHeader
+          tag={
+            <Tag variant={'dark'}>
+              <DollarSignIcon className="size-4" />
+              Simple and predictable
+            </Tag>
+          }
+          title="Simple pricing"
+          description="Our simple, usage-based pricing means you only pay for what you use. Scale effortlessly for the best value."
+        />
+
+        <div className="grid md:grid-cols-[400px_1fr] gap-8">
+          <div className="col gap-4">
+            <h3 className="font-medium text-xl text-background/90 dark:text-foreground/90">
+              Stop overpaying <br />
+              for features
+            </h3>
+            <ul className="gap-1 col text-background/70 dark:text-foreground/70">
+              <li className="flex items-center gap-2">
+                <CheckIcon className="text-background/30 dark:text-foreground/30 size-4" />
+                Unlimited websites or apps
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckIcon className="text-background/30 dark:text-foreground/30 size-4" />{' '}
+                Unlimited users
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckIcon className="text-background/30 dark:text-foreground/30 size-4" />{' '}
+                Unlimited dashboards
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckIcon className="text-background/30 dark:text-foreground/30 size-4" />{' '}
+                Unlimited charts
+              </li>
+              <li className="flex items-center gap-2">
+                <CheckIcon className="text-background/30 dark:text-foreground/30 size-4" />{' '}
+                Unlimited tracked profiles
+              </li>
+            </ul>
+
+            <Button variant="secondary" className="self-start mt-4" asChild>
+              <Link href="https://dashboard.openpanel.dev/register">
+                Start for free
+              </Link>
+            </Button>
+          </div>
+
+          <div className="col justify-between pt-14">
+            <PricingSlider />
+
+            <div className="text-sm text-muted-foreground">
+              <strong className="text-background/80 dark:text-foreground/80">
+                All features are included upfront - no hidden costs.
+              </strong>{' '}
+              You choose how many events to track each month. During the beta
+              phase, everything is offered for free to users.
+            </div>
+          </div>
+        </div>
+      </div>
+    </Section>
+  );
+}