zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

public: update public website (mainly pricing)

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2024-03-24 18:25:53 +01:00
parent d0beb1e04a
commit 13c2d20961
4 changed files with 106 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/public/src/app/features.tsx
View File

@@ -43,8 +43,8 @@ const features: FeatureItem[] = [
be accessible.
</p>
<p>
Mark events as conversions to highlight and soon notifications with
out iOS/Android app.
Mark events as conversions to highlight and get notifications with our
iOS/Android app (app coming soon!)
</p>
</>
),

3
apps/public/src/app/navbar.tsx
View File

@@ -21,6 +21,9 @@ export function Navbar({ darkText = false, className }: Props) {
<Logo className="max-sm:[&_span]:hidden" />
<nav className="flex gap-4">
{pathname !== '/' && <Link href="/">Home</Link>}
<Link href="/#pricing" data-event="click_pricing">
Pricing
</Link>
<a href="https://docs.openpanel.dev" target="_blank">
Docs
</a>

103
apps/public/src/app/pricing.tsx
View File

@@ -2,69 +2,66 @@ import { CheckIcon } from 'lucide-react';
import { Heading2, Lead2 } from './copy';
const pricing = [
{ price: 'Free', events: 3000 },
{ price: '$5', events: 10_000 },
{ price: '$10', events: 20_000 },
{ price: '$20', events: 100_000 },
{ price: '$30', events: 200_000 },
{ price: '$50', events: 400_000 },
{ price: '$70', events: 600_000 },
{ price: '$90', events: 1_000_000 },
];
export function Pricing() {
return (
<div className="bg-slate-200 py-32" id="#pricing">
<div className="container">
<section className="container flex flex-col gap-6 md:max-w-[64rem]">
<div className="mx-auto flex w-full flex-col gap-4 md:max-w-[58rem]">
<div className="bg-slate-100 py-32" id="pricing">
<div className="sm:max-w-xl md:max-w-3xl mx-auto px-4">
<section className="flex flex-col gap-6">
<div className="flex w-full flex-col gap-4 md:max-w-[58rem]">
<Heading2>Simple, transparent pricing</Heading2>
<Lead2 className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
Everything is included, just decide how many events you want to
track each month.
</Lead2>
</div>
<div className="grid w-full items-start gap-10 rounded-lg border md:p-10 md:grid-cols-[1fr_200px]">
<div className="grid gap-6">
<h3 className="text-xl font-bold sm:text-2xl">
What&apos;s included for{' '}
<span className="bg-slate-300 rounded px-0.5">all plans</span>
</h3>
<ul className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-2">
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimited websites/apps
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimited Users
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted dashboards
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted charts
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked
profiles
</li>
<li className="flex items-center font-bold text-slate-900">
<CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple
</li>
</ul>
</div>
<div className="flex flex-col gap-4 text-left md:text-right">
<div>
<p className="text-sm font-medium text-muted-foreground">
From
</p>
<h4 className="text-7xl font-bold">$10</h4>
<p className="text-sm font-medium text-muted-foreground">
billed monthly
</p>
<ul className="grid gap-3 text-muted-foreground sm:grid-cols-2 md:grid-cols-3">
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimited websites/apps
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimited users
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted dashboards
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted charts
</li>
<li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked profiles
</li>
<li className="flex items-center font-bold text-slate-900">
<CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple
</li>
</ul>
<div className="grid md:grid-cols-2 gap-6">
{pricing.map((item) => (
<div
key={item.price}
className="bg-white rounded-lg border border-blue-dark p-6 flex flex-col gap-1"
>
<div className="text-3xl font-bold">{item.price}</div>
<div className="text-lg flex justify-between">
<span>
{new Intl.NumberFormat('en').format(item.events)} events
</span>
<span className="text-muted-foreground">per month</span>
</div>
</div>
{/* <Link href="/login" className={cn(buttonVariants({ size: "lg" }))}>
Get Started
</Link> */}
</div>
</div>
<div className="mx-auto flex w-full max-w-[58rem] flex-col gap-4">
<p className="max-w-[85%] leading-normal text-muted-foreground sm:leading-7">
Exact pricing will come soon, but we asure you, it will be cheaper
than the competition.
</p>
<p className="font-bold">During beta everything is free!</p>
))}
</div>
<p className="font-bold">Everything is free during beta period!</p>
</section>
</div>
</div>

78
apps/public/src/app/punch-lines.tsx
View File

@@ -7,24 +7,38 @@ import {
DollarSignIcon,
HandshakeIcon,
KeyIcon,
ShieldIcon,
WebhookIcon,
} from 'lucide-react';
import Image from 'next/image';
import { Heading2, Heading3, Heading4 } from './copy';
import { Heading2, Heading4 } from './copy';
const items = [
{
title: 'Own Your Own Data',
description: (
<p>
All our serveres are hosted in EU (Stockholm) and we are fully GDPR
compliant.
We believe that you should own your own data. That's why we don't sell
your data to third parties. <strong>Ever. Period.</strong>
</p>
),
icon: KeyIcon,
color: '#2563EB',
className: 'bg-blue-light',
},
{
title: 'GDPR Compliant',
description: (
<p>
All our serveres are hosted in EU (Stockholm) and we are fully GDPR
compliant.
</p>
),
icon: ShieldIcon,
color: '#b051d3',
className: 'bg-[#b051d3]',
},
{
title: 'Cloud or Self-Hosting',
description: (
@@ -103,37 +117,47 @@ const items = [
color: '#3ba974',
className: 'bg-[#e19900]',
},
{
title: 'Powerful Export API',
description: <p>Use our powerful export API to access your data.</p>,
icon: WebhookIcon,
color: '#3ba974',
className: 'bg-[#e93838]',
},
];
export function PunchLines() {
return (
<div className="bg-slate-700 py-32">
<Heading2 className="text-white text-center mb-16">
Not convinced?
</Heading2>
<div className="container">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{items.map((item) => {
const Icon = item.icon;
return (
<div
className="border border-border p-6 rounded-xl bg-white"
key={item.title}
>
<div className="bg-blue-darker py-32 relative">
<div className="inset-0 absolute h-full w-full bg-[radial-gradient(circle,rgba(255,255,255,0.2)_0%,rgba(255,255,255,0)_100%)]"></div>
<div className="relative">
<Heading2 className="text-white text-center mb-16">
Not convinced?
</Heading2>
<div className="container">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{items.map((item) => {
const Icon = item.icon;
return (
<div
className={cn(
'h-14 w-14 rounded-full flex items-center justify-center mb-4',
item.color
)}
style={{ background: item.color }}
className="border border-border p-6 rounded-xl bg-white"
key={item.title}
>
<Icon color="#fff" />
<div
className={cn(
'h-14 w-14 rounded-full flex items-center justify-center mb-4',
item.color
)}
style={{ background: item.color }}
>
<Icon color="#fff" />
</div>
<Heading4>{item.title}</Heading4>
<div className="prose">{item.description}</div>
</div>
<Heading4>{item.title}</Heading4>
<div className="prose">{item.description}</div>
</div>
);
})}
);
})}
</div>
</div>
</div>
</div>