78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|