94 lines
3.0 KiB
TypeScript
94 lines
3.0 KiB
TypeScript
import {
|
|
BarChart3Icon,
|
|
ChevronRightIcon,
|
|
DollarSignIcon,
|
|
GlobeIcon,
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { FeatureCard } from '@/components/feature-card';
|
|
import { ProductAnalyticsIllustration } from '@/components/illustrations/product-analytics';
|
|
import { WebAnalyticsIllustration } from '@/components/illustrations/web-analytics';
|
|
import { Section, SectionHeader } from '@/components/section';
|
|
|
|
const features = [
|
|
{
|
|
title: 'Revenue tracking',
|
|
description:
|
|
'Track revenue from your payments and get insights into your revenue sources.',
|
|
icon: DollarSignIcon,
|
|
link: {
|
|
href: '/features/revenue-tracking',
|
|
children: 'More about revenue',
|
|
},
|
|
},
|
|
{
|
|
title: 'Profiles & Sessions',
|
|
description:
|
|
'Track individual users and their complete journey across your platform.',
|
|
icon: GlobeIcon,
|
|
link: {
|
|
href: '/features/identify-users',
|
|
children: 'Identify your users',
|
|
},
|
|
},
|
|
{
|
|
title: 'Event Tracking',
|
|
description:
|
|
'Capture every important interaction with flexible event tracking.',
|
|
icon: BarChart3Icon,
|
|
link: {
|
|
href: '/features/event-tracking',
|
|
children: 'All about tracking',
|
|
},
|
|
},
|
|
];
|
|
|
|
export function AnalyticsInsights() {
|
|
return (
|
|
<Section className="container">
|
|
<SectionHeader
|
|
className="mb-16"
|
|
description="Combine web and product analytics in one platform. Track visitors, events, revenue, and user journeys, all with privacy-first tracking."
|
|
label="ANALYTICS & INSIGHTS"
|
|
title="See the full picture of your users and product performance"
|
|
/>
|
|
<div className="mb-6 grid grid-cols-1 gap-6 md:grid-cols-2">
|
|
<FeatureCard
|
|
className="px-0 **:data-content:px-6"
|
|
description="Understand your website performance with privacy-first analytics and clear, actionable insights."
|
|
illustration={<WebAnalyticsIllustration />}
|
|
title="Web Analytics"
|
|
variant="large"
|
|
/>
|
|
<FeatureCard
|
|
className="px-0 **:data-content:px-6"
|
|
description="Turn raw data into clarity with real-time visualization of performance, behavior, and trends."
|
|
illustration={<ProductAnalyticsIllustration />}
|
|
title="Product Analytics"
|
|
variant="large"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
{features.map((feature) => (
|
|
<FeatureCard
|
|
description={feature.description}
|
|
icon={feature.icon}
|
|
key={feature.title}
|
|
link={feature.link}
|
|
title={feature.title}
|
|
/>
|
|
))}
|
|
</div>
|
|
<p className="mt-8 text-center">
|
|
<Link
|
|
className="inline-flex items-center gap-1 text-muted-foreground text-sm transition-colors hover:text-foreground"
|
|
href="/features"
|
|
>
|
|
Explore all features
|
|
<ChevronRightIcon className="size-3.5" />
|
|
</Link>
|
|
</p>
|
|
</Section>
|
|
);
|
|
}
|