redisign hero

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-02-15 09:45:03 +01:00
parent f6c6a403b4
commit 0381d60d90
6 changed files with 27 additions and 14 deletions

View File

@@ -36,7 +36,7 @@ const features = [
},
];
export function Hero() {
export function Hero({ waitlistCount }: { waitlistCount: number }) {
return (
<div>
<div className="absolute top-0 left-0 right-0 py-6">
@@ -53,25 +53,33 @@ export function Hero() {
backgroundSize: '70px 70px',
}}
>
<div className="py-20 pt-32 p-4 flex flex-col items-center max-w-3xl bg-[radial-gradient(circle,rgba(255,255,255,0.7)_0%,rgba(255,255,255,0.7)_50%,rgba(255,255,255,0)_100%)]">
<div className="py-32 p-4 flex flex-col items-center max-w-3xl bg-[radial-gradient(circle,rgba(255,255,255,0.7)_0%,rgba(255,255,255,0.7)_50%,rgba(255,255,255,0)_100%)]">
<Heading1 className="mb-4">
An open-source
<br />
alternative to Mixpanel
</Heading1>
<p className="mb-8">
Combine Mixpanel and Plausible and you get Openpanel. A simple
analytics tool that respects privacy.
Mixpanel + Plausible ={' '}
<strong className="text-blue-600">Openpanel!</strong> A simple
analytics tool that your wallet can afford.
</p>
<JoinWaitlist />
<div className="flex flex-wrap gap-10 mt-8 max-w-xl justify-center">
<div className="mt-4 text-sm">
<p>Get ahead of the curve and join our waiting list{' - '}</p>
<p>
there are already{' '}
<strong>{waitlistCount} savvy individuals on board!</strong> 🎉
</p>
</div>
{/* <div className="flex flex-wrap gap-10 mt-8 max-w-xl justify-center">
{features.map(({ icon: Icon, title }) => (
<div className="flex gap-2 items-center justify-center">
<Icon className="text-blue-light " />
{title}
</div>
))}
</div>
</div> */}
</div>
</div>
</div>