feat(landing-page): add /alternatives/pencil-dev/ comparison page (#5254)

Co-authored-by: Joey <276262049+xne998808-ai@users.noreply.github.com>

Author: xne998808-ai

apps/landing-page/app/_components/site-footer.astro

@@ -108,6 +108,7 @@ const l = getFooterLegalCopy(locale);
           <li><a href={href('/alternatives/figma-make/')}>Figma Make</a></li>
           <li><a href={href('/alternatives/qoder/')}>Qoder</a></li>
           <li><a href={href('/alternatives/trae/')}>Trae</a></li>
+          <li><a href={href('/alternatives/pencil-dev/')}>Pencil</a></li>
         </ul>
       </div>
 

apps/landing-page/app/alternatives-i18n.part-h.ts

@@ -7,15 +7,29 @@ import { ALT_PART_D } from './alternatives-i18n.part-d';
 import { ALT_PART_E } from './alternatives-i18n.part-e';
 import { ALT_PART_F } from './alternatives-i18n.part-f';
 import { ALT_PART_G } from './alternatives-i18n.part-g';
+import { ALT_PART_H } from './alternatives-i18n.part-h';
 
 type AltMap = Partial<Record<string, AlternativeDetailCopy>>;
 
-export const LOCALIZED_ALTERNATIVES: Partial<Record<string, AltMap>> = {
-  ...ALT_PART_A,
-  ...ALT_PART_B,
-  ...ALT_PART_C,
-  ...ALT_PART_D,
-  ...ALT_PART_E,
-  ...ALT_PART_F,
-  ...ALT_PART_G,
-};
+const PARTS: Partial<Record<string, AltMap>>[] = [
+  ALT_PART_A,
+  ALT_PART_B,
+  ALT_PART_C,
+  ALT_PART_D,
+  ALT_PART_E,
+  ALT_PART_F,
+  ALT_PART_G,
+  ALT_PART_H,
+];
+
+// Deep-merge per locale so a later shard can contribute a single slug to a
+// locale without clobbering the slugs an earlier shard already supplied.
+export const LOCALIZED_ALTERNATIVES: Partial<Record<string, AltMap>> = {};
+for (const part of PARTS) {
+  for (const [locale, map] of Object.entries(part)) {
+    LOCALIZED_ALTERNATIVES[locale] = {
+      ...(LOCALIZED_ALTERNATIVES[locale] ?? {}),
+      ...(map ?? {}),
+    };
+  }
+}

apps/landing-page/app/alternatives-i18n.ts

@@ -0,0 +1,12 @@
+---
+import PencilDevAlternativePage from '../../../alternatives/pencil-dev/index.astro';
+import { DEFAULT_LOCALE, LANDING_LOCALES } from '../../../../i18n';
+
+export function getStaticPaths() {
+  return LANDING_LOCALES.filter((locale) => locale.code !== DEFAULT_LOCALE).map(
+    (locale) => ({ params: { locale: locale.code } }),
+  );
+}
+---
+
+<PencilDevAlternativePage />

apps/landing-page/app/info-page-i18n.ts

@@ -0,0 +1,5 @@
+---
+import AlternativeDetail from '../../../_components/alternative-detail.astro';
+---
+
+<AlternativeDetail slug="pencil-dev" competitorName="Pencil" />

apps/landing-page/app/pages/[locale]/alternatives/pencil-dev/index.astro

@@ -40,7 +40,7 @@ const limitsFaq = page.limitsFaq.map(({ name, text }) => ({ q: name, a: text }))
 // comparison pages and is localized for free. Add a slug here when a new
 // alternatives page lands. `cta` reuses the localized "read the full
 // comparison" label from the compare copy block.
-const COMPARE_SLUGS = ['claude-design', 'figma', 'lovable', 'bolt', 'v0', 'framer', 'stitch', 'genspark', 'figma-make', 'qoder', 'trae'];
+const COMPARE_SLUGS = ['claude-design', 'figma', 'lovable', 'bolt', 'v0', 'framer', 'stitch', 'genspark', 'figma-make', 'qoder', 'trae', 'pencil-dev'];
 const NAMES: Record<string, string> = {
   'claude-design': 'Claude Design',
   figma: 'Figma',
@@ -53,6 +53,7 @@ const NAMES: Record<string, string> = {
   'figma-make': 'Figma Make',
   qoder: 'Qoder',
   trae: 'Trae',
+  'pencil-dev': 'Pencil',
 };
 const ctaLabel = page.comparisons[0]?.cta ?? 'Read the full comparison ->';
 const comparisons = COMPARE_SLUGS.map((slug) => {