public: new page and copy improvements

Author: lindesvard

apps/public/src/app/(content)/features/_components/feature-card.tsx

@@ -1,31 +1,34 @@
-import { FeatureCardContainer } from '@/components/feature-card';
-import { ArrowRightIcon } from 'lucide-react';
+import { ArrowRightIcon, type LucideIcon } from 'lucide-react';
 import Link from 'next/link';
+import { FeatureCardContainer } from '@/components/feature-card';
 
 interface FeatureCardLinkProps {
   url: string;
   title: string;
   description: string;
+  icon?: LucideIcon;
 }
 
 export function FeatureCardLink({
   url,
   title,
   description,
+  icon: Icon,
 }: FeatureCardLinkProps) {
   return (
     <Link href={url}>
       <FeatureCardContainer>
-        <div className="row gap-3 items-center">
-          <div className="col gap-1 flex-1 min-w-0">
-            <h3 className="text-lg font-semibold group-hover:text-primary transition-colors">
+        <div className="row items-center gap-3">
+          <div className="col min-w-0 flex-1 gap-1">
+            {Icon && <Icon className="mb-2 size-6 shrink-0" />}
+            <h3 className="font-semibold text-lg transition-colors group-hover:text-primary">
               {title}
             </h3>
-            <p className="text-sm text-muted-foreground line-clamp-2">
+            <p className="line-clamp-2 text-muted-foreground text-sm">
               {description}
             </p>
           </div>
-          <ArrowRightIcon className="opacity-0 group-hover:opacity-100 size-5 shrink-0 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 transition-all duration-300" />
+          <ArrowRightIcon className="size-5 shrink-0 text-muted-foreground opacity-0 transition-all duration-300 group-hover:translate-x-1 group-hover:text-primary group-hover:opacity-100" />
         </div>
       </FeatureCardContainer>
     </Link>

apps/public/src/app/(content)/features/page.tsx

@@ -1,12 +1,42 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+  BellIcon,
+  ConeIcon,
+  DollarSignIcon,
+  FilterIcon,
+  GlobeIcon,
+  MonitorIcon,
+  MousePointerClickIcon,
+  PieChartIcon,
+  RefreshCwIcon,
+  ShareIcon,
+  UserIcon,
+  WorkflowIcon,
+} from 'lucide-react';
+import type { Metadata } from 'next';
+import { FeatureCardLink } from './_components/feature-card';
 import { FeatureHero } from '@/app/(content)/features/[slug]/_components/feature-hero';
 import { CtaBanner } from '@/app/(home)/_sections/cta-banner';
 import { Section, SectionHeader } from '@/components/section';
 import { WindowImage } from '@/components/window-image';
 import { url } from '@/lib/layout.shared';
 import { getOgImageUrl, getPageMetadata } from '@/lib/metadata';
 import { featureSource } from '@/lib/source';
-import type { Metadata } from 'next';
-import { FeatureCardLink } from './_components/feature-card';
+
+const featureIcons: Record<string, LucideIcon> = {
+  conversion: FilterIcon,
+  'data-visualization': PieChartIcon,
+  'event-tracking': MousePointerClickIcon,
+  funnels: ConeIcon,
+  'identify-users': UserIcon,
+  integrations: WorkflowIcon,
+  notifications: BellIcon,
+  retention: RefreshCwIcon,
+  'revenue-tracking': DollarSignIcon,
+  'session-tracking': MonitorIcon,
+  'share-and-collaborate': ShareIcon,
+  'web-analytics': GlobeIcon,
+};
 
 export const metadata: Metadata = getPageMetadata({
   title: 'Product analytics features',
@@ -32,36 +62,37 @@ export default async function FeaturesIndexPage() {
 
       <div className="container my-16">
         <WindowImage
-          srcDark="/screenshots/overview-dark.webp"
-          srcLight="/screenshots/overview-light.webp"
           alt="OpenPanel Dashboard Overview"
           caption="Get a clear view of your product analytics with real-time insights and customizable dashboards."
+          srcDark="/screenshots/overview-dark.webp"
+          srcLight="/screenshots/overview-light.webp"
         />
       </div>
 
       <Section className="container">
         <SectionHeader
-          title="All features"
           description="Browse our capabilities. Each feature is designed to answer specific questions about your product and users."
+          title="All features"
           variant="sm"
         />
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-12">
+        <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 2xl:grid-cols-3">
           {features.map((feature) => (
             <FeatureCardLink
+              description={feature.hero.subheading}
+              icon={featureIcons[feature.slug]}
               key={feature.slug}
-              url={feature.url}
               title={feature.hero.heading}
-              description={feature.hero.subheading}
+              url={feature.url}
             />
           ))}
         </div>
       </Section>
 
       <CtaBanner
-        title="Ready to get started?"
-        description="Join thousands of teams using OpenPanel for their analytics needs."
-        ctaText="Get Started Free"
         ctaLink="https://dashboard.openpanel.dev/onboarding"
+        ctaText="Get Started Free"
+        description="Join thousands of teams using OpenPanel for their analytics needs."
+        title="Ready to get started?"
       />
     </div>
   );