docs: add overview for each compare page

apps/public/src/app/(content)/compare/[slug]/_components/compare-overview.tsx

@@ -0,0 +1,28 @@
+import { Section } from '@/components/section';
+import type { CompareOverview as CompareOverviewData } from '@/lib/compare';
+
+interface CompareOverviewProps {
+  overview: CompareOverviewData;
+}
+
+export function CompareOverview({ overview }: CompareOverviewProps) {
+  return (
+    <Section className="container">
+      <article className="col gap-6 max-w-3xl">
+        <h2 className="text-3xl md:text-4xl font-semibold">
+          {overview.title}
+        </h2>
+        <div className="col gap-4">
+          {overview.paragraphs.map((paragraph) => (
+            <p
+              key={paragraph.slice(0, 48)}
+              className="text-muted-foreground leading-relaxed text-base md:text-lg"
+            >
+              {paragraph}
+            </p>
+          ))}
+        </div>
+      </article>
+    </Section>
+  );
+}

apps/public/src/app/(content)/compare/[slug]/page.tsx

@@ -13,6 +13,7 @@ import Script from 'next/script';
 import { BenefitsSection } from './_components/benefits-section';
 import { CompareFaq } from './_components/compare-faq';
 import { CompareHero } from './_components/compare-hero';
+import { CompareOverview } from './_components/compare-overview';
 import { ComparisonTable } from './_components/comparison-table';
 import { FeaturesShowcase } from './_components/features-showcase';
 import { MigrationSection } from './_components/migration-section';
@@ -82,6 +83,9 @@ export default async function ComparePage({
 
   // Build ToC items
   const tocItems = [
+    ...(data.overview
+      ? [{ id: 'overview', label: data.overview.title }]
+      : []),
     { id: 'who-should-choose', label: data.summary_comparison.title },
     { id: 'comparison', label: data.highlights.title },
     { id: 'features', label: data.feature_comparison.title },
@@ -118,6 +122,12 @@ export default async function ComparePage({
         />
       </div>
 
+      {data.overview && (
+        <div id="overview">
+          <CompareOverview overview={data.overview} />
+        </div>
+      )}
+
       <div id="who-should-choose">
         <WhoShouldChoose
           summary={data.summary_comparison}
@@ -190,26 +200,27 @@ export default async function ComparePage({
       </div>
 
       {data.benefits_section && (
-        <div id="benefits">
-          <BenefitsSection
-            label={data.benefits_section.label}
-            title={data.benefits_section.title}
-            description={data.benefits_section.description}
-            cta={data.benefits_section.cta}
-            benefits={data.benefits_section.benefits}
-          />
-        </div>
+        <>
+          <div id="benefits">
+            <BenefitsSection
+              label={data.benefits_section.label}
+              title={data.benefits_section.title}
+              description={data.benefits_section.description}
+              cta={data.benefits_section.cta}
+              benefits={data.benefits_section.benefits}
+            />
+          </div>
+          <div className="container my-16">
+            <WindowImage
+              srcDark="/screenshots/profile-dark.webp"
+              srcLight="/screenshots/profile-light.webp"
+              alt="OpenPanel User Profiles"
+              caption="Deep dive into individual user profiles with complete event history and behavior tracking."
+            />
+          </div>
+        </>
       )}
 
-      <div className="container my-16">
-        <WindowImage
-          srcDark="/screenshots/profile-dark.webp"
-          srcLight="/screenshots/profile-light.webp"
-          alt="OpenPanel User Profiles"
-          caption="Deep dive into individual user profiles with complete event history and behavior tracking."
-        />
-      </div>
-
       <div id="faq">
         <CompareFaq faqs={data.faqs} pageUrl={pageUrl} />
       </div>

apps/public/src/lib/compare.ts

@@ -169,6 +169,11 @@ export interface RelatedLinks {
   alternatives?: RelatedLink[];
 }
 
+export interface CompareOverview {
+  title: string;
+  paragraphs: string[];
+}
+
 export interface CompareData {
   url: string;
   slug: string;
@@ -176,6 +181,7 @@ export interface CompareData {
   seo: CompareSeo;
   hero: CompareHero;
   competitor: CompareCompetitor;
+  overview?: CompareOverview;
   summary_comparison: CompareSummary;
   highlights: CompareHighlights;
   feature_comparison: CompareFeatureComparison;