From 022eb7844034758e5dc34338608f24fe813ffebb Mon Sep 17 00:00:00 2001 From: YeonGyu-Kim Date: Wed, 20 May 2026 14:27:02 +0900 Subject: [PATCH] refactor(web): decompose 358-LOC manifesto into 9 section components app/[locale]/manifesto/page.tsx: 358 LOC -> 22-LOC composition shell. components/manifesto/sections/: - hero.tsx - pain-points.tsx - indistinguishable.tsx (the 'AI vs senior engineer' argument) - token-cost.tsx - cognitive-load.tsx - principles.tsx - core-loop.tsx - future.tsx - final-cta.tsx Each section 26-68 LOC. Copy unchanged; section order unchanged. Same i18n namespace ('manifesto'). Renders identically to baseline in all 4 locales (en/ko/ja/zh). --- packages/web/app/[locale]/manifesto/page.tsx | 369 +----------------- .../manifesto/sections/cognitive-load.tsx | 84 ++++ .../manifesto/sections/core-loop.tsx | 74 ++++ .../manifesto/sections/final-cta.tsx | 32 ++ .../components/manifesto/sections/future.tsx | 28 ++ .../components/manifesto/sections/hero.tsx | 38 ++ .../manifesto/sections/indistinguishable.tsx | 39 ++ .../manifesto/sections/pain-points.tsx | 50 +++ .../manifesto/sections/principles.tsx | 34 ++ .../manifesto/sections/token-cost.tsx | 55 +++ 10 files changed, 454 insertions(+), 349 deletions(-) create mode 100644 packages/web/components/manifesto/sections/cognitive-load.tsx create mode 100644 packages/web/components/manifesto/sections/core-loop.tsx create mode 100644 packages/web/components/manifesto/sections/final-cta.tsx create mode 100644 packages/web/components/manifesto/sections/future.tsx create mode 100644 packages/web/components/manifesto/sections/hero.tsx create mode 100644 packages/web/components/manifesto/sections/indistinguishable.tsx create mode 100644 packages/web/components/manifesto/sections/pain-points.tsx create mode 100644 packages/web/components/manifesto/sections/principles.tsx create mode 100644 packages/web/components/manifesto/sections/token-cost.tsx diff --git a/packages/web/app/[locale]/manifesto/page.tsx b/packages/web/app/[locale]/manifesto/page.tsx index 2775e1839..27be2d4e8 100644 --- a/packages/web/app/[locale]/manifesto/page.tsx +++ b/packages/web/app/[locale]/manifesto/page.tsx @@ -1,358 +1,29 @@ -import { getTranslations } from "next-intl/server" -import Image from "next/image" -import { ArrowRight, Check, Terminal, Zap } from "lucide-react" - -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" -import { Section } from "@/components/ui/section" +import type { JSX } from "react" +import { HeroSection } from "@/components/manifesto/sections/hero" +import { PainPointsSection } from "@/components/manifesto/sections/pain-points" +import { IndistinguishableSection } from "@/components/manifesto/sections/indistinguishable" +import { TokenCostSection } from "@/components/manifesto/sections/token-cost" +import { CognitiveLoadSection } from "@/components/manifesto/sections/cognitive-load" +import { PrinciplesSection } from "@/components/manifesto/sections/principles" +import { CoreLoopSection } from "@/components/manifesto/sections/core-loop" +import { FutureSection } from "@/components/manifesto/sections/future" +import { FinalCtaSection } from "@/components/manifesto/sections/final-cta" import { Separator } from "@/components/ui/separator" -import { Link } from "@/i18n/routing" - -async function ManifestoPage() { - const t = await getTranslations("manifesto") - - const painPointKeys = ["fixing", "syntax", "copyPasting", "reviewing"] as const - const indistinguishableKeys = [ - "patterns", - "errorHandling", - "tests", - "noSlop", - "comments", - ] as const - const ultraworkStepKeys = ["analyze", "breakdown", "execute", "verify", "commit"] as const - - const coreLoopKeys = [ - "prometheus", - "metis", - "momus", - "orchestrator", - "todoContinuation", - "categorySystem", - "backgroundAgents", - "wisdomAccumulation", - ] as const - - const futureKeys = ["focus", "quality", "complexity", "promptEngineering"] as const +export default async function ManifestoPage(): Promise { return (
-
-
- Background -
-
- -
- - {t("badge")} - -

- {t("hero.title")} -

-

- {t("hero.subtitle")} -

-
-
- -
-
-
- {t("bottleneck")} -
- -
-

{t("autonomousCar")}

- -

{t("whyDifferent")}

- -

{t("micromanagement")}

- -
    - {painPointKeys.map((key) => ( -
  • - ✕ - {t(`painPoints.${key}`)} -
    • - ))} -
- -

- {t("notCollaboration")} -

- -

- - {t("premiseLinkText")} - {" "} - {t("premise", { linkText: "" })} -

-
-
-
- + + - -
-

{t("indistinguishable.title")}

- -

{t("indistinguishable.subtitle")}

- -
- {indistinguishableKeys.map((key) => ( -
- - {t(`indistinguishable.items.${key}`)} -
- ))} -
- -
- {t("indistinguishable.quote")} -
-
- -
-
-
-

{t("tokenCost.title")}

-

{t("tokenCost.description")}

-
    -
  • - - {t("tokenCost.parallelAgents")} -
    • -
  • - - {t("tokenCost.completeWork")} -
    • -
  • - - {t("tokenCost.selfVerification")} -
    • -
-
-
-

{t("tokenCost.however")}

-

{t("tokenCost.optimizeDescription")}

-
    -
  • -
    - {t("tokenCost.cheaperModels")} -
    • -
  • -
    - {t("tokenCost.avoidingRedundant")} -
    • -
  • -
    - {t("tokenCost.intelligentCaching")} -
    • -
  • -
    - {t("tokenCost.stoppingExactly")} -
    • -
-
-
-
- -
-
-

{t("cognitiveLoad.title")}

-

- {t("cognitiveLoad.subtitle")} -

-
- -
- -
- -
- - {t("cognitiveLoad.ultrawork.badge")} - {t("cognitiveLoad.ultrawork.title")} -

{t("cognitiveLoad.ultrawork.subtitle")}

- - -
- {ultraworkStepKeys.map((key) => ( -
-
-

{t(`cognitiveLoad.ultrawork.steps.${key}`)}

-
- ))} -
-
- {t("cognitiveLoad.ultrawork.footer")} -
- - - - - - - {t("cognitiveLoad.prometheus.badge")} - - {t("cognitiveLoad.prometheus.title")} -

{t("cognitiveLoad.prometheus.subtitle")}

- - -
-
-

- {t("cognitiveLoad.prometheus.prometheusTitle")} -

-

- {t("cognitiveLoad.prometheus.prometheusDescription")} -

-
-
- -
-
-

- {t("cognitiveLoad.prometheus.atlasTitle")} -

-

- {t("cognitiveLoad.prometheus.atlasDescription")} -

-
-
-
- {t("cognitiveLoad.prometheus.footer")} -
- - -
-
- -
-
- {(["predictable", "continuous", "delegatable"] as const).map((key) => ( -
-
- {key} -
-

{t(`principles.${key}.title`)}

-

{t(`principles.${key}.description`)}

-
- ))} -
-
- + + + + - -
-

{t("coreLoop.title")}

- -
-
-
- Human Intent -
- - - -
- Agent Execution -
- - - -
- Verified Result -
-
-

↻ Minimum Intervention

-
- -
- {coreLoopKeys.map((key) => ( - - - - {t(`coreLoop.features.${key}.feature`)} - - - -

- {t(`coreLoop.features.${key}.purpose`)} -

- - - ))} -
-
- -
-

{t("future.title")}

- -
- {futureKeys.map((key) => ( -
-
- {t(`future.items.${key}`)} -
- ))} -
- -
-

{t("future.quote1")}

-

{t("future.quote2")}

-
-
- -
-
-

- {t("finalCta.title")} -

- - -
-
+ + +
) } - -export default ManifestoPage diff --git a/packages/web/components/manifesto/sections/cognitive-load.tsx b/packages/web/components/manifesto/sections/cognitive-load.tsx new file mode 100644 index 000000000..07b784b0f --- /dev/null +++ b/packages/web/components/manifesto/sections/cognitive-load.tsx @@ -0,0 +1,84 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { ArrowRight, Terminal } from "lucide-react" +import { Badge } from "@/components/ui/badge" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Section } from "@/components/ui/section" + +export async function CognitiveLoadSection(): Promise { + const t = await getTranslations("manifesto") + const ultraworkStepKeys = ["analyze", "breakdown", "execute", "verify", "commit"] as const + + return ( +
+
+

{t("cognitiveLoad.title")}

+

+ {t("cognitiveLoad.subtitle")} +

+
+ +
+ +
+ +
+ + {t("cognitiveLoad.ultrawork.badge")} + {t("cognitiveLoad.ultrawork.title")} +

{t("cognitiveLoad.ultrawork.subtitle")}

+ + +
+ {ultraworkStepKeys.map((key) => ( +
+
+

{t(`cognitiveLoad.ultrawork.steps.${key}`)}

+
+ ))} +
+
+ {t("cognitiveLoad.ultrawork.footer")} +
+ + + + + + + {t("cognitiveLoad.prometheus.badge")} + + {t("cognitiveLoad.prometheus.title")} +

{t("cognitiveLoad.prometheus.subtitle")}

+ + +
+
+

+ {t("cognitiveLoad.prometheus.prometheusTitle")} +

+

+ {t("cognitiveLoad.prometheus.prometheusDescription")} +

+
+
+ +
+
+

+ {t("cognitiveLoad.prometheus.atlasTitle")} +

+

+ {t("cognitiveLoad.prometheus.atlasDescription")} +

+
+
+
+ {t("cognitiveLoad.prometheus.footer")} +
+ + +
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/core-loop.tsx b/packages/web/components/manifesto/sections/core-loop.tsx new file mode 100644 index 000000000..cf41508dd --- /dev/null +++ b/packages/web/components/manifesto/sections/core-loop.tsx @@ -0,0 +1,74 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" +import { Section } from "@/components/ui/section" + +export async function CoreLoopSection(): Promise { + const t = await getTranslations("manifesto") + const coreLoopKeys = [ + "prometheus", + "metis", + "momus", + "orchestrator", + "todoContinuation", + "categorySystem", + "backgroundAgents", + "wisdomAccumulation", + ] as const + + return ( +
+

{t("coreLoop.title")}

+ +
+
+
+ Human Intent +
+ + + +
+ Agent Execution +
+ + + +
+ Verified Result +
+
+

↻ Minimum Intervention

+
+ +
+ {coreLoopKeys.map((key) => ( + + + + {t(`coreLoop.features.${key}.feature`)} + + + +

+ {t(`coreLoop.features.${key}.purpose`)} +

+ + + ))} +
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/final-cta.tsx b/packages/web/components/manifesto/sections/final-cta.tsx new file mode 100644 index 000000000..45742766f --- /dev/null +++ b/packages/web/components/manifesto/sections/final-cta.tsx @@ -0,0 +1,32 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { ArrowRight } from "lucide-react" +import { Button } from "@/components/ui/button" +import { Link } from "@/i18n/routing" + +export async function FinalCtaSection(): Promise { + const t = await getTranslations("manifesto") + + return ( +
+
+

+ {t("finalCta.title")} +

+ + +
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/future.tsx b/packages/web/components/manifesto/sections/future.tsx new file mode 100644 index 000000000..bfbabf2d0 --- /dev/null +++ b/packages/web/components/manifesto/sections/future.tsx @@ -0,0 +1,28 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { Section } from "@/components/ui/section" + +export async function FutureSection(): Promise { + const t = await getTranslations("manifesto") + const futureKeys = ["focus", "quality", "complexity", "promptEngineering"] as const + + return ( +
+

{t("future.title")}

+ +
+ {futureKeys.map((key) => ( +
+
+ {t(`future.items.${key}`)} +
+ ))} +
+ +
+

{t("future.quote1")}

+

{t("future.quote2")}

+
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/hero.tsx b/packages/web/components/manifesto/sections/hero.tsx new file mode 100644 index 000000000..e278b7ba7 --- /dev/null +++ b/packages/web/components/manifesto/sections/hero.tsx @@ -0,0 +1,38 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import Image from "next/image" +import { Badge } from "@/components/ui/badge" + +export async function HeroSection(): Promise { + const t = await getTranslations("manifesto") + + return ( +
+
+ Background +
+
+ +
+ + {t("badge")} + +

+ {t("hero.title")} +

+

+ {t("hero.subtitle")} +

+
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/indistinguishable.tsx b/packages/web/components/manifesto/sections/indistinguishable.tsx new file mode 100644 index 000000000..b40dcb1ad --- /dev/null +++ b/packages/web/components/manifesto/sections/indistinguishable.tsx @@ -0,0 +1,39 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { Check } from "lucide-react" +import { Section } from "@/components/ui/section" + +export async function IndistinguishableSection(): Promise { + const t = await getTranslations("manifesto") + const indistinguishableKeys = [ + "patterns", + "errorHandling", + "tests", + "noSlop", + "comments", + ] as const + + return ( +
+

{t("indistinguishable.title")}

+ +

{t("indistinguishable.subtitle")}

+ +
+ {indistinguishableKeys.map((key) => ( +
+ + {t(`indistinguishable.items.${key}`)} +
+ ))} +
+ +
+ {t("indistinguishable.quote")} +
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/pain-points.tsx b/packages/web/components/manifesto/sections/pain-points.tsx new file mode 100644 index 000000000..edd6f44c1 --- /dev/null +++ b/packages/web/components/manifesto/sections/pain-points.tsx @@ -0,0 +1,50 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { X } from "lucide-react" +import { Section } from "@/components/ui/section" +import { Link } from "@/i18n/routing" + +export async function PainPointsSection(): Promise { + const t = await getTranslations("manifesto") + const painPointKeys = ["fixing", "syntax", "copyPasting", "reviewing"] as const + + return ( +
+
+
+ {t("bottleneck")} +
+ +
+

{t("autonomousCar")}

+ +

{t("whyDifferent")}

+ +

{t("micromanagement")}

+ +
    + {painPointKeys.map((key) => ( +
  • + + {t(`painPoints.${key}`)} +
    • + ))} +
+ +

+ {t("notCollaboration")} +

+ +

+ + {t("premiseLinkText")} + {" "} + {t("premise", { linkText: "" })} +

+
+
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/principles.tsx b/packages/web/components/manifesto/sections/principles.tsx new file mode 100644 index 000000000..855b96850 --- /dev/null +++ b/packages/web/components/manifesto/sections/principles.tsx @@ -0,0 +1,34 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import Image from "next/image" +import { Section } from "@/components/ui/section" + +export async function PrinciplesSection(): Promise { + const t = await getTranslations("manifesto") + const principles = ["predictable", "continuous", "delegatable"] as const + + return ( +
+
+ {principles.map((key) => ( +
+
+ {key} +
+

{t(`principles.${key}.title`)}

+

{t(`principles.${key}.description`)}

+
+ ))} +
+
+ ) +} diff --git a/packages/web/components/manifesto/sections/token-cost.tsx b/packages/web/components/manifesto/sections/token-cost.tsx new file mode 100644 index 000000000..35be81e38 --- /dev/null +++ b/packages/web/components/manifesto/sections/token-cost.tsx @@ -0,0 +1,55 @@ +import type { JSX } from "react" +import { getTranslations } from "next-intl/server" +import { Zap } from "lucide-react" +import { Section } from "@/components/ui/section" + +export async function TokenCostSection(): Promise { + const t = await getTranslations("manifesto") + + return ( +
+
+
+

{t("tokenCost.title")}

+

{t("tokenCost.description")}

+
    +
  • + + {t("tokenCost.parallelAgents")} +
    • +
  • + + {t("tokenCost.completeWork")} +
    • +
  • + + {t("tokenCost.selfVerification")} +
    • +
+
+
+

{t("tokenCost.however")}

+

{t("tokenCost.optimizeDescription")}

+
    +
  • +
    + {t("tokenCost.cheaperModels")} +
    • +
  • +
    + {t("tokenCost.avoidingRedundant")} +
    • +
  • +
    + {t("tokenCost.intelligentCaching")} +
    • +
  • +
    + {t("tokenCost.stoppingExactly")} +
    • +
+
+
+
+ ) +}