163 lines
6.9 KiB
TypeScript
163 lines
6.9 KiB
TypeScript
import { Logo } from '@/components/Logo';
|
|
import Image from 'next/image';
|
|
|
|
import { db } from '@mixan/db';
|
|
|
|
import { PreviewCarousel } from './carousel';
|
|
import { Heading2, Lead2, Paragraph } from './copy';
|
|
import { Hero } from './hero';
|
|
import { JoinWaitlist } from './join-waitlist';
|
|
import { Sections } from './section';
|
|
|
|
export const dynamic = 'force-dynamic';
|
|
export const revalidate = 3600;
|
|
|
|
export default async function Page() {
|
|
const waitlistCount = await db.waitlist.count();
|
|
return (
|
|
<div>
|
|
<Hero waitlistCount={waitlistCount} />
|
|
<div className="bg-gradient-to-b from-blue-light to-[#FFFFFF] pb-16 text-center">
|
|
<div className="relative -top-20">
|
|
<PreviewCarousel />
|
|
</div>
|
|
</div>
|
|
<div className="container">
|
|
<div className="mb-24">
|
|
<Heading2 className="md:text-5xl mb-2 leading-none">
|
|
Analytics should be easy
|
|
<br />
|
|
and powerful
|
|
</Heading2>
|
|
<Lead2>
|
|
The power of Mixpanel, the ease of Plausible and nothing from Google
|
|
Analytics 😉
|
|
</Lead2>
|
|
</div>
|
|
<Sections />
|
|
</div>
|
|
<div className="container mt-40">
|
|
<div className="flex flex-col md:flex-row gap-8">
|
|
<div className="mb-4 md:w-1/2 flex-shrink-0 relative">
|
|
<Heading2>Another analytic tool? Really?</Heading2>
|
|
{/* <SirenIcon
|
|
strokeWidth={0.5}
|
|
size={300}
|
|
className="opacity-10 absolute -rotate-12 -left-20 -top-10"
|
|
/> */}
|
|
</div>
|
|
<div className="flex flex-col gap-4 max-w-3xl">
|
|
<h3 className="text-lg font-bold text-blue-dark">TL;DR</h3>
|
|
<Paragraph>
|
|
Our open-source analytic library fills a crucial gap by combining
|
|
the strengths of Mixpanel's powerful features with Plausible's
|
|
clear overview page. Motivated by the lack of an open-source
|
|
alternative to Mixpanel and inspired by Plausible's simplicity, we
|
|
aim to create an intuitive platform with predictable pricing. With
|
|
a single-tier pricing model and limits only on monthly event
|
|
counts, our goal is to democratize analytics, offering
|
|
unrestricted access to all features while ensuring affordability
|
|
and transparency for users of all project sizes.
|
|
</Paragraph>
|
|
|
|
<h3 className="text-lg font-bold text-blue-dark mt-12">The why</h3>
|
|
<Paragraph>
|
|
Our open-source analytic library emerged from a clear need within
|
|
the analytics community. While platforms like Mixpanel offer
|
|
powerful and user-friendly features, they lack a comprehensive
|
|
overview page akin to Plausible's, which succinctly summarizes
|
|
essential metrics. Recognizing this gap, we saw an opportunity to
|
|
combine the strengths of both platforms while addressing their
|
|
respective shortcomings.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
One significant motivation behind our endeavor was the absence of
|
|
an open-source alternative to Mixpanel. We believe in the
|
|
importance of accessibility and transparency in analytics, which
|
|
led us to embark on creating a solution that anyone can freely use
|
|
and contribute to.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
Inspired by Plausible's exemplary approach to simplicity and
|
|
clarity, we aim to build upon their foundation and further refine
|
|
the user experience. By harnessing the best practices demonstrated
|
|
by Plausible, we aspire to create an intuitive and streamlined
|
|
analytics platform that empowers users to derive actionable
|
|
insights effortlessly.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
Our own experiences with traditional analytics platforms like
|
|
Mixpanel underscored another critical aspect driving our project:
|
|
the need for predictable pricing. As project owners ourselves, we
|
|
encountered the frustration of escalating costs as our user base
|
|
grew. Therefore, we are committed to offering a single-tier
|
|
pricing model that provides unlimited access to all features
|
|
without the fear of unexpected expenses.
|
|
</Paragraph>
|
|
|
|
<Paragraph>
|
|
In line with our commitment to fairness and accessibility, our
|
|
pricing model will only impose limits on the number of events
|
|
users can send each month. This approach, akin to Plausible's,
|
|
ensures that users have the freedom to explore and utilize our
|
|
platform to its fullest potential without arbitrary restrictions
|
|
on reports or user counts. Ultimately, our goal is to democratize
|
|
analytics by offering a reliable, transparent, and cost-effective
|
|
solution for projects of all sizes.
|
|
</Paragraph>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer className="bg-blue-darker text-white relative mt-40 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 container flex flex-col items-center text-center">
|
|
<div className="my-24">
|
|
<Heading2 className="text-white mb-2">Get early access</Heading2>
|
|
<Lead2>
|
|
Ready to set your analytics free? Get on our waitlist.
|
|
</Lead2>
|
|
|
|
<div className="mt-8">
|
|
<JoinWaitlist className="text-white bg-white/20 border-white/30 focus:ring-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="overflow-hidden rounded-xl">
|
|
<div className="p-3 bg-white/20">
|
|
<Image
|
|
src="/demo/overview-min.png"
|
|
width={1080}
|
|
height={608}
|
|
alt="Openpanel overview page"
|
|
className="w-full rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<div className="h-px w-full 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>
|
|
<div className="p-4 bg-blue-darker">
|
|
<div className="container">
|
|
<div className="flex justify-between items-center text-sm">
|
|
<Logo />
|
|
<a
|
|
className="hover:underline"
|
|
href="https://twitter.com/CarlLindesvard"
|
|
target="_blank"
|
|
rel="nofollow"
|
|
>
|
|
Follow on X
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|