docs: add overview for each compare page

This commit is contained in:
Carl-Gerhard Lindesvärd
2026-02-09 22:17:52 +00:00
parent 9f441fd9fa
commit c8d78e31a1
25 changed files with 261 additions and 18 deletions

View File

@@ -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>