67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { FeatureCard } from '@/components/feature-card';
|
|
import { GetStartedButton } from '@/components/get-started-button';
|
|
import { Section, SectionHeader } from '@/components/section';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
ChartBarIcon,
|
|
DollarSignIcon,
|
|
LayoutDashboardIcon,
|
|
RocketIcon,
|
|
WorkflowIcon,
|
|
} from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { CollaborationChart } from './collaboration-chart';
|
|
|
|
const features = [
|
|
{
|
|
title: 'Visualize your data',
|
|
description:
|
|
'See your data in a visual way. You can create advanced reports and more to understand',
|
|
icon: ChartBarIcon,
|
|
},
|
|
{
|
|
title: 'Share & Collaborate',
|
|
description:
|
|
'Build interactive dashboards and share insights with your team. Export reports, set up notifications, and keep everyone aligned.',
|
|
icon: LayoutDashboardIcon,
|
|
},
|
|
{
|
|
title: 'Integrations',
|
|
description:
|
|
'Get notified when new events are created, or forward specific events to your own systems with our east to use integrations.',
|
|
icon: WorkflowIcon,
|
|
},
|
|
];
|
|
|
|
export function Collaboration() {
|
|
return (
|
|
<Section className="container">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16">
|
|
<CollaborationChart />
|
|
<div>
|
|
<SectionHeader
|
|
title="Turn data into actionable insights"
|
|
description="Build interactive dashboards, share insights with your team, and make data-driven decisions faster. OpenPanel helps you understand not just what's happening, but why."
|
|
/>
|
|
|
|
<GetStartedButton className="mt-6" />
|
|
|
|
<div className="col gap-6 mt-16">
|
|
{features.map((feature) => (
|
|
<div className="col gap-2" key={feature.title}>
|
|
<h3 className="font-semibold">
|
|
<feature.icon className="size-6 inline-block mr-2 relative -top-0.5" />
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-muted-foreground text-sm">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|