feat: new public website

apps/public/src/app/(home)/_sections/collaboration.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+}