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. be accessible.
</p> </p>
<p> <p>
Mark events as conversions to highlight and soon notifications with Mark events as conversions to highlight and get notifications with our
out iOS/Android app. iOS/Android app (app coming soon!)
</p> </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" /> <Logo className="max-sm:[&_span]:hidden" />
<nav className="flex gap-4"> <nav className="flex gap-4">
{pathname !== '/' && <Link href="/">Home</Link>} {pathname !== '/' && <Link href="/">Home</Link>}
<Link href="/#pricing" data-event="click_pricing">
Pricing
</Link>
<a href="https://docs.openpanel.dev" target="_blank"> <a href="https://docs.openpanel.dev" target="_blank">
Docs Docs
</a> </a>

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

@@ -2,69 +2,66 @@ import { CheckIcon } from 'lucide-react';
import { Heading2, Lead2 } from './copy'; 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() { export function Pricing() {
return ( return (
<div className="bg-slate-200 py-32" id="#pricing"> <div className="bg-slate-100 py-32" id="pricing">
<div className="container"> <div className="sm:max-w-xl md:max-w-3xl mx-auto px-4">
<section className="container flex flex-col gap-6 md:max-w-[64rem]"> <section className="flex flex-col gap-6">
<div className="mx-auto flex w-full flex-col gap-4 md:max-w-[58rem]"> <div className="flex w-full flex-col gap-4 md:max-w-[58rem]">
<Heading2>Simple, transparent pricing</Heading2> <Heading2>Simple, transparent pricing</Heading2>
<Lead2 className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7"> <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 Everything is included, just decide how many events you want to
track each month. track each month.
</Lead2> </Lead2>
</div> </div>
<div className="grid w-full items-start gap-10 rounded-lg border md:p-10 md:grid-cols-[1fr_200px]"> <ul className="grid gap-3 text-muted-foreground sm:grid-cols-2 md:grid-cols-3">
<div className="grid gap-6"> <li className="flex items-center">
<h3 className="text-xl font-bold sm:text-2xl"> <CheckIcon className="mr-2 h-4 w-4" /> Unlimited websites/apps
What&apos;s included for{' '} </li>
<span className="bg-slate-300 rounded px-0.5">all plans</span> <li className="flex items-center">
</h3> <CheckIcon className="mr-2 h-4 w-4" /> Unlimited users
<ul className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-2"> </li>
<li className="flex items-center"> <li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimited websites/apps <CheckIcon className="mr-2 h-4 w-4" /> Unlimted dashboards
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimited Users <CheckIcon className="mr-2 h-4 w-4" /> Unlimted charts
</li> </li>
<li className="flex items-center">
<li className="flex items-center"> <CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked profiles
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted dashboards </li>
</li> <li className="flex items-center font-bold text-slate-900">
<li className="flex items-center"> <CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted charts </li>
</li> </ul>
<li className="flex items-center"> <div className="grid md:grid-cols-2 gap-6">
<CheckIcon className="mr-2 h-4 w-4" /> Unlimted tracked {pricing.map((item) => (
profiles <div
</li> key={item.price}
<li className="flex items-center font-bold text-slate-900"> className="bg-white rounded-lg border border-blue-dark p-6 flex flex-col gap-1"
<CheckIcon className="mr-2 h-4 w-4" /> Yes, its that simple >
</li> <div className="text-3xl font-bold">{item.price}</div>
</ul> <div className="text-lg flex justify-between">
</div> <span>
<div className="flex flex-col gap-4 text-left md:text-right"> {new Intl.NumberFormat('en').format(item.events)} events
<div> </span>
<p className="text-sm font-medium text-muted-foreground"> <span className="text-muted-foreground">per month</span>
From </div>
</p>
<h4 className="text-7xl font-bold">$10</h4>
<p className="text-sm font-medium text-muted-foreground">
billed monthly
</p>
</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> </div>
<p className="font-bold">Everything is free during beta period!</p>
</section> </section>
</div> </div>
</div> </div>

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

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