improvement(comparisons): answer Copilot Studio buyer questions in place with an at-a-glance table

apps/sim/app/(landing)/comparisons/[provider]/page.tsx

@@ -11,11 +11,14 @@ import { BrandIconTile, SimIconTile } from '@/app/(landing)/comparisons/componen
 import { ComparisonCards } from '@/app/(landing)/comparisons/components/comparison-cards'
 import { ComparisonLinkRow } from '@/app/(landing)/comparisons/components/comparison-link-row'
 import { ComparisonTable } from '@/app/(landing)/comparisons/components/comparison-table'
+import { GlanceTable } from '@/app/(landing)/comparisons/components/glance-table'
 import { MigrationSection } from '@/app/(landing)/comparisons/components/migration-section'
 import { ProseText } from '@/app/(landing)/comparisons/components/prose-text'
+import { QuestionSections } from '@/app/(landing)/comparisons/components/question-sections'
 import { getLibraryPostsForCompetitor } from '@/app/(landing)/comparisons/library-links'
 import {
   ALL_COMPETITORS,
+  betterThanQuestion,
   buildBottomLine,
   buildComparisonFaqs,
   getCompetitorBySlug,
@@ -117,6 +120,17 @@ export default async function ComparisonProviderPage({
     Math.max(SIM_LATEST_VERIFIED.getTime(), getLatestVerifiedDate(competitor).getTime())
   )
 
+  const verifiedDate = (
+    <time dateTime={latestVerified.toISOString().slice(0, 10)}>
+      {latestVerified.toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        timeZone: 'UTC',
+      })}
+    </time>
+  )
+
   const productComparisonJsonLd = {
     '@context': 'https://schema.org',
     '@type': 'ItemList',
@@ -186,26 +200,41 @@ export default async function ComparisonProviderPage({
             >
               Sim vs {competitor.name}
             </h1>
-            {competitor.leadAnswer ? (
-              <p className='max-w-[720px] text-[var(--text-body)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
-                <ProseText prose={competitor.leadAnswer} />
-              </p>
-            ) : null}
-            <p className='max-w-[720px] text-[var(--text-muted)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
-              Sim is the open-source AI workspace where teams build, deploy, and manage AI agents
-              visually, conversationally, or with code. Here is how Sim compares to{' '}
-              {competitor.name} on platform architecture, AI capabilities, integrations, pricing,
-              security, and support. Every fact below is sourced and dated, last verified{' '}
-              <time dateTime={latestVerified.toISOString().slice(0, 10)}>
-                {latestVerified.toLocaleDateString('en-US', {
-                  month: 'long',
-                  day: 'numeric',
-                  year: 'numeric',
-                  timeZone: 'UTC',
-                })}
-              </time>
-              .
-            </p>
+            {competitor.leadQuestion && competitor.leadAnswer ? (
+              <section
+                id='lead-question'
+                aria-labelledby='lead-question-heading'
+                className='flex flex-col gap-3'
+              >
+                <h2
+                  id='lead-question-heading'
+                  className='max-w-[720px] text-balance text-[var(--text-primary)] text-xl leading-[120%] tracking-[-0.02em] lg:text-2xl'
+                >
+                  {competitor.leadQuestion}
+                </h2>
+                <p className='max-w-[720px] text-[var(--text-body)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
+                  <ProseText prose={competitor.leadAnswer} />
+                </p>
+                <p className='max-w-[720px] text-[var(--text-muted)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
+                  Every fact below is sourced and dated, last verified {verifiedDate}.
+                </p>
+              </section>
+            ) : (
+              <>
+                {competitor.leadAnswer ? (
+                  <p className='max-w-[720px] text-[var(--text-body)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
+                    <ProseText prose={competitor.leadAnswer} />
+                  </p>
+                ) : null}
+                <p className='max-w-[720px] text-[var(--text-muted)] text-sm leading-[150%] tracking-[0.02em] lg:text-base'>
+                  Sim is the open-source AI workspace where teams build, deploy, and manage AI
+                  agents visually, conversationally, or with code. Here is how Sim compares to{' '}
+                  {competitor.name} on platform architecture, AI capabilities, integrations,
+                  pricing, security, and support. Every fact below is sourced and dated, last
+                  verified {verifiedDate}.
+                </p>
+              </>
+            )}
             <p className='sr-only'>
               Sim is an open-source AI workspace for building, deploying, and managing AI agents.
               This page compares Sim to {competitor.name} across platform architecture, AI
@@ -232,7 +261,7 @@ export default async function ComparisonProviderPage({
                     id='better-than-heading'
                     className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'
                   >
-                    Is Sim better than {competitor.name}?
+                    {betterThanQuestion(competitor)}
                   </h2>
                   <p className='max-w-[720px] text-[var(--text-body)] text-small leading-[150%]'>
                     <ProseText prose={competitor.betterThanAnswer} />
@@ -241,6 +270,9 @@ export default async function ComparisonProviderPage({
                 <div className='h-px w-full bg-[var(--border)]' />
               </>
             ) : null}
+            {competitor.questions?.intro ? (
+              <QuestionSections questions={competitor.questions.intro} idPrefix='intro-question' />
+            ) : null}
             <div className='grid grid-cols-1 sm:grid-cols-2'>
               <section
                 aria-labelledby='what-is-sim-heading'
@@ -280,6 +312,19 @@ export default async function ComparisonProviderPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
+            {competitor.glance ? (
+              <>
+                <GlanceTable rows={competitor.glance} competitorName={competitor.name} />
+                <div className='h-px w-full bg-[var(--border)]' />
+              </>
+            ) : null}
+            {competitor.questions?.glance ? (
+              <QuestionSections
+                questions={competitor.questions.glance}
+                idPrefix='glance-question'
+              />
+            ) : null}
+
             <section aria-labelledby='comparison-table-heading' className='px-6 pt-10 pb-4'>
               <h2
                 id='comparison-table-heading'
@@ -351,6 +396,13 @@ export default async function ComparisonProviderPage({
 
             <div className='h-px w-full bg-[var(--border)]' />
 
+            {competitor.questions?.closing ? (
+              <QuestionSections
+                questions={competitor.questions.closing}
+                idPrefix='closing-question'
+              />
+            ) : null}
+
             <section aria-labelledby='bottom-line-heading' className='px-6 py-10'>
               <h2
                 id='bottom-line-heading'
@@ -406,17 +458,19 @@ export default async function ComparisonProviderPage({
               </ul>
             </section>
 
-            <section aria-labelledby='faq-heading' className='px-6 py-10'>
-              <h2
-                id='faq-heading'
-                className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'
-              >
-                Frequently asked questions
-              </h2>
-              <div>
-                <LandingFAQ faqs={faqs} />
-              </div>
-            </section>
+            {competitor.questions ? null : (
+              <section aria-labelledby='faq-heading' className='px-6 py-10'>
+                <h2
+                  id='faq-heading'
+                  className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'
+                >
+                  Frequently asked questions
+                </h2>
+                <div>
+                  <LandingFAQ faqs={faqs} />
+                </div>
+              </section>
+            )}
           </div>
         </div>
 

apps/sim/app/(landing)/comparisons/components/glance-table/glance-table.tsx

@@ -0,0 +1,85 @@
+import { cn } from '@sim/emcn'
+import type { GlanceRow } from '@/lib/compare/data'
+import { ProseText } from '@/app/(landing)/comparisons/components/prose-text'
+
+interface GlanceTableProps {
+  rows: GlanceRow[]
+  competitorName: string
+}
+
+const HEADER_CELL_CLASS =
+  'border-[var(--border)] border-l bg-[var(--surface-1)] px-4 py-3 font-medium text-[var(--text-muted)] text-small'
+const VALUE_CELL_CLASS =
+  'align-top text-[var(--text-body)] text-small leading-[150%] max-lg:block max-lg:px-4 max-lg:py-1 lg:border-[var(--border)] lg:border-t lg:border-l lg:px-4 lg:py-3'
+const STACKED_LABEL_CLASS = 'block font-medium text-[var(--text-muted)] text-caption lg:hidden'
+
+/**
+ * The main buying decision points as one table, each cell a sourced sentence with its citation
+ * links. Below `lg` each row stacks with labeled values, as the feature-by-feature table does.
+ * Server-rendered, so answer engines can extract the table without hydration.
+ */
+export function GlanceTable({ rows, competitorName }: GlanceTableProps) {
+  const heading = `Sim vs ${competitorName}: at a glance`
+  return (
+    <section id='glance' aria-labelledby='glance-heading' className='px-6 py-10'>
+      <h2
+        id='glance-heading'
+        className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'
+      >
+        {heading}
+      </h2>
+      <div className='w-full overflow-hidden rounded-xl border border-[var(--border)]'>
+        <table className='w-full border-separate border-spacing-0 text-left max-lg:block lg:table-fixed'>
+          <caption className='sr-only'>{heading}</caption>
+          <colgroup>
+            <col className='w-[22%]' />
+            <col />
+            <col />
+          </colgroup>
+          <thead className='max-lg:hidden'>
+            <tr>
+              <th
+                scope='col'
+                className='bg-[var(--surface-1)] px-4 py-3 font-medium text-[var(--text-muted)] text-small'
+              >
+                Decision point
+              </th>
+              <th scope='col' className={HEADER_CELL_CLASS}>
+                Sim
+              </th>
+              <th scope='col' className={HEADER_CELL_CLASS}>
+                {competitorName}
+              </th>
+            </tr>
+          </thead>
+          <tbody className='max-lg:block'>
+            {rows.map((row, index) => (
+              <tr
+                key={row.label}
+                className={cn(
+                  'max-lg:block',
+                  index > 0 && 'max-lg:border-[var(--border)] max-lg:border-t'
+                )}
+              >
+                <th
+                  scope='row'
+                  className='align-top font-medium text-[var(--text-primary)] text-small leading-[150%] max-lg:block max-lg:px-4 max-lg:pt-3 max-lg:pb-1 lg:border-[var(--border)] lg:border-t lg:px-4 lg:py-3'
+                >
+                  {row.label}
+                </th>
+                <td className={VALUE_CELL_CLASS}>
+                  <span className={STACKED_LABEL_CLASS}>Sim</span>
+                  <ProseText prose={row.sim} />
+                </td>
+                <td className={cn(VALUE_CELL_CLASS, 'max-lg:pb-3')}>
+                  <span className={STACKED_LABEL_CLASS}>{competitorName}</span>
+                  <ProseText prose={row.competitor} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}

apps/sim/app/(landing)/comparisons/components/glance-table/index.ts

@@ -0,0 +1 @@
+export { GlanceTable } from './glance-table'

apps/sim/app/(landing)/comparisons/components/question-sections/index.ts

@@ -0,0 +1 @@
+export { QuestionSections } from './question-sections'

apps/sim/app/(landing)/comparisons/components/question-sections/question-sections.tsx

@@ -0,0 +1,37 @@
+import { Fragment } from 'react'
+import type { ComparisonQuestion } from '@/lib/compare/data'
+import { ProseText } from '@/app/(landing)/comparisons/components/prose-text'
+
+interface QuestionSectionsProps {
+  questions: ComparisonQuestion[]
+  /** Prefix for each section's id, unique on the page. */
+  idPrefix: string
+}
+
+/**
+ * One section per buyer question, its heading worded as the buyer asks it and its answer
+ * directly beneath, each followed by a divider. Server-rendered, so answer engines can quote
+ * every answer on its own.
+ */
+export function QuestionSections({ questions, idPrefix }: QuestionSectionsProps) {
+  return questions.map(({ question, answer }, index) => {
+    const sectionId = `${idPrefix}-${index}`
+    const headingId = `${sectionId}-heading`
+    return (
+      <Fragment key={question}>
+        <section id={sectionId} aria-labelledby={headingId} className='px-6 py-10'>
+          <h2
+            id={headingId}
+            className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'
+          >
+            {question}
+          </h2>
+          <p className='max-w-[720px] text-[var(--text-body)] text-small leading-[150%]'>
+            <ProseText prose={answer} />
+          </p>
+        </section>
+        <div className='h-px w-full bg-[var(--border)]' />
+      </Fragment>
+    )
+  })
+}

apps/sim/app/(landing)/comparisons/library-links.ts

@@ -76,12 +76,16 @@ function topByScore<T>(items: T[], score: (item: T) => number): T[] {
 }
 
 /**
- * Library articles about, linking to, or naming `competitor`, strongest match first, then
- * newest first.
+ * The profile's `relatedReading` articles when it sets them; otherwise library articles about,
+ * linking to, or naming `competitor`, strongest match first, then newest first.
  */
 export async function getLibraryPostsForCompetitor(
   competitor: CompetitorProfile
 ): Promise<ContentMeta[]> {
+  if (competitor.relatedReading) {
+    const postsBySlug = new Map((await getAllPostMeta()).map((post) => [post.slug, post]))
+    return competitor.relatedReading.flatMap((slug) => postsBySlug.get(slug) ?? [])
+  }
   const patterns = buildMentionPatterns(competitor)
   const [posts, linkingPosts] = await Promise.all([
     getAllPostMeta(),