public: feature pages

apps/public/src/app/(home)/_sections/analytics-insights.tsx

@@ -1,11 +1,12 @@
 import { FeatureCard } from '@/components/feature-card';
-import { Section, SectionHeader, SectionLabel } from '@/components/section';
+import { Section, SectionHeader } from '@/components/section';
 import {
   BarChart3Icon,
+  ChevronRightIcon,
   DollarSignIcon,
   GlobeIcon,
-  ZapIcon,
 } from 'lucide-react';
+import Link from 'next/link';
 import { ProductAnalyticsIllustration } from './illustrations/product-analytics';
 import { WebAnalyticsIllustration } from './illustrations/web-analytics';
 
@@ -15,18 +16,30 @@ const features = [
     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',
+    },
   },
 ];
 
@@ -62,9 +75,19 @@ export function AnalyticsInsights() {
             title={feature.title}
             description={feature.description}
             icon={feature.icon}
+            link={feature.link}
           />
         ))}
       </div>
+      <p className="mt-8 text-center">
+        <Link
+          href="/features"
+          className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1 transition-colors"
+        >
+          Explore all features
+          <ChevronRightIcon className="size-3.5" />
+        </Link>
+      </p>
     </Section>
   );
 }

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

@@ -4,6 +4,7 @@ import { Section, SectionHeader } from '@/components/section';
 import { Button } from '@/components/ui/button';
 import {
   ChartBarIcon,
+  ChevronRightIcon,
   DollarSignIcon,
   LayoutDashboardIcon,
   RocketIcon,
@@ -18,18 +19,21 @@ const features = [
     description:
       'See your data in a visual way. You can create advanced reports and more to understand',
     icon: ChartBarIcon,
+    slug: 'data-visualization',
   },
   {
     title: 'Share & Collaborate',
     description:
-      'Build interactive dashboards and share insights with your team. Export reports, set up notifications, and keep everyone aligned.',
+      'Invite unlimited members with org-wide or project-level access. Share full dashboards or individual reports—publicly or behind a password.',
     icon: LayoutDashboardIcon,
+    slug: 'share-and-collaborate',
   },
   {
     title: 'Integrations',
     description:
-      'Get notified when new events are created, or forward specific events to your own systems with our east to use integrations.',
+      'Get notified when new events are created, or forward specific events to your own systems with our easy-to-use integrations.',
     icon: WorkflowIcon,
+    slug: 'integrations',
   },
 ];
 
@@ -48,7 +52,11 @@ export function Collaboration() {
 
           <div className="col gap-6 mt-16">
             {features.map((feature) => (
-              <div className="col gap-2" key={feature.title}>
+              <Link
+                href={`/features/${feature.slug}`}
+                className="group relative col gap-2 pr-10 overflow-hidden"
+                key={feature.title}
+              >
                 <h3 className="font-semibold">
                   <feature.icon className="size-6 inline-block mr-2 relative -top-0.5" />
                   {feature.title}
@@ -56,7 +64,11 @@ export function Collaboration() {
                 <p className="text-muted-foreground text-sm">
                   {feature.description}
                 </p>
-              </div>
+                <ChevronRightIcon
+                  className="absolute right-0 top-1/2 size-5 -translate-y-1/2 text-muted-foreground transition-transform duration-200 translate-x-full group-hover:translate-x-0"
+                  aria-hidden
+                />
+              </Link>
             ))}
           </div>
         </div>