feat: add marketing skill blog generation and landing learning loop

Author: study8677

frontend/src/api/blogGen.ts

@@ -1,15 +1,18 @@
 import { apiJson } from "./client";
-import type { BlogDraft, BlogStyle } from "../types";
+import type { BlogDraft, BlogStyle, MarketingSkillId } from "../types";
 
 export interface BlogGenerateParams {
   style: BlogStyle;
+  skill_id: MarketingSkillId;
   bilingual: boolean;
 }
 
 export interface BlogGenerateResult {
   task_id: string;
   project_id: number;
   style: string;
+  skill_id: MarketingSkillId;
+  skill_name: string;
   status: string;
 }
 

frontend/src/components/marketing/PublicSiteHeader.tsx

@@ -1,4 +1,5 @@
 import { ExternalLink, Sparkles } from "lucide-react";
+import type { MouseEvent } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 import { useI18n } from "../../i18n";
 import { LOCALE_LABELS, SUPPORTED_LOCALES, type Locale } from "../../i18n/locale";
@@ -23,8 +24,17 @@ function PublicNavLink({
   className,
 }: { href: string; label: string; className: string }) {
   if (href.startsWith("#")) {
+    const scrollToSection = (event: MouseEvent<HTMLAnchorElement>) => {
+      const target = document.getElementById(href.slice(1));
+      if (!target) return;
+
+      event.preventDefault();
+      target.scrollIntoView({ behavior: "smooth", block: "start" });
+      window.history.replaceState(null, "", href);
+    };
+
     return (
-      <a href={href} className={className}>
+      <a href={href} className={className} onClick={scrollToSection}>
         {label}
       </a>
     );

frontend/src/components/project/BlogGenerateButton.tsx

@@ -4,7 +4,7 @@ import { useBlogGenerate } from "../../hooks/useBlogGen";
 import { useTaskPoll } from "../../hooks/useTasks";
 import { useQueryClient } from "@tanstack/react-query";
 import { useI18n } from "../../i18n";
-import type { BlogStyle } from "../../types";
+import type { BlogStyle, MarketingSkillId } from "../../types";
 import type { TranslationKey } from "../../i18n";
 
 const STYLES: { value: BlogStyle; labelKey: TranslationKey; descKey: TranslationKey }[] = [
@@ -14,6 +14,15 @@ const STYLES: { value: BlogStyle; labelKey: TranslationKey; descKey: Translation
   { value: "thought_leadership", labelKey: "blogGen.style.thought_leadership", descKey: "blogGen.style.thought_leadershipDesc" },
 ];
 
+const MARKETING_SKILLS: { value: MarketingSkillId; labelKey: TranslationKey; descKey: TranslationKey }[] = [
+  { value: "content_strategy", labelKey: "blogGen.skill.content_strategy", descKey: "blogGen.skill.content_strategyDesc" },
+  { value: "copywriting", labelKey: "blogGen.skill.copywriting", descKey: "blogGen.skill.copywritingDesc" },
+  { value: "ai_seo", labelKey: "blogGen.skill.ai_seo", descKey: "blogGen.skill.ai_seoDesc" },
+  { value: "competitor_alternatives", labelKey: "blogGen.skill.competitor_alternatives", descKey: "blogGen.skill.competitor_alternativesDesc" },
+  { value: "programmatic_seo", labelKey: "blogGen.skill.programmatic_seo", descKey: "blogGen.skill.programmatic_seoDesc" },
+  { value: "directory_submissions", labelKey: "blogGen.skill.directory_submissions", descKey: "blogGen.skill.directory_submissionsDesc" },
+];
+
 export function BlogGenerateButton({
   projectId,
   onViewDrafts,
@@ -24,6 +33,7 @@ export function BlogGenerateButton({
   const [taskId, setTaskId] = useState<string | null>(null);
   const [showConfig, setShowConfig] = useState(false);
   const [style, setStyle] = useState<BlogStyle>("launch");
+  const [skillId, setSkillId] = useState<MarketingSkillId>("content_strategy");
   const [bilingual, setBilingual] = useState(false);
 
   const blogGenerate = useBlogGenerate(projectId);
@@ -45,7 +55,7 @@ export function BlogGenerateButton({
   const handleGenerate = async () => {
     setShowConfig(false);
     try {
-      const result = await blogGenerate.mutateAsync({ style, bilingual });
+      const result = await blogGenerate.mutateAsync({ style, skill_id: skillId, bilingual });
       setTaskId(result.task_id);
     } catch {
       // mutation error handled by TanStack
@@ -147,6 +157,33 @@ export function BlogGenerateButton({
           ))}
         </div>
 
+        <p className="mt-4 text-xs font-semibold text-slate-700">{t("blogGen.selectSkill")}</p>
+        <div className="mt-2 grid gap-2 sm:grid-cols-2">
+          {MARKETING_SKILLS.map((s) => (
+            <label
+              key={s.value}
+              className={`flex cursor-pointer items-start gap-2 rounded-xl border px-3 py-2 transition-colors ${
+                skillId === s.value
+                  ? "border-emerald-300 bg-emerald-50/50"
+                  : "border-slate-200 hover:bg-slate-50"
+              }`}
+            >
+              <input
+                type="radio"
+                name="marketingSkill"
+                value={s.value}
+                checked={skillId === s.value}
+                onChange={() => setSkillId(s.value)}
+                className="mt-0.5"
+              />
+              <div className="min-w-0">
+                <span className="text-xs font-medium text-slate-900">{t(s.labelKey)}</span>
+                <p className="text-[11px] leading-4 text-slate-500">{t(s.descKey)}</p>
+              </div>
+            </label>
+          ))}
+        </div>
+
         <label className="mt-3 flex items-center gap-2">
           <input
             type="checkbox"

frontend/src/content/marketing.ts

@@ -40,6 +40,7 @@ export type BlogArticle = {
 
 export const PUBLIC_HOME_NAV: PublicNavItem[] = [
   { href: "#product", label: "landing.navPlatform" },
+  { href: "#learning", label: "landing.navLearning" },
   { href: "#workflow", label: "landing.navWorkflow" },
   { href: "#open-source", label: "landing.navOpenSource" },
   { href: "#mentions", label: "landing.navMentions" },
@@ -74,6 +75,25 @@ export const LANDING_PLATFORM_ITEMS: MarketingItem[] = [
   },
 ];
 
+export const LANDING_LEARNING_LOOP_ITEMS: MarketingItem[] = [
+  {
+    title: "landing.learningLoop1Title",
+    description: "landing.learningLoop1Desc",
+  },
+  {
+    title: "landing.learningLoop2Title",
+    description: "landing.learningLoop2Desc",
+  },
+  {
+    title: "landing.learningLoop3Title",
+    description: "landing.learningLoop3Desc",
+  },
+  {
+    title: "landing.learningLoop4Title",
+    description: "landing.learningLoop4Desc",
+  },
+];
+
 export const LANDING_WORKFLOW_STEPS: MarketingItem[] = [
   {
     title: "landing.stage1",

frontend/src/i18n/locales/en.ts

@@ -404,19 +404,20 @@ export const en = {
   "onboarding.limitedModeWorks": "Crawl-based SEO checks, Google Search snapshots, and community discovery still run from the URL-first flow.",
   "onboarding.limitedModeNeedsKeyTitle": "Works better with a key",
   "onboarding.limitedModeNeedsKey": "AI-assisted keyword extraction, automatic competitor context, and broader AI Search checks need a configured provider.",
-  "landing.headerTagline": "Search, AI visibility, and next actions.",
-  "landing.metaTitle": "OpenCMO | Open-source AI CMO for developer products",
-  "landing.metaDescription": "OpenCMO helps developer products understand how they show up in search, AI answers, and developer communities, then turns those signals into next actions.",
+  "landing.headerTagline": "Visibility work that learns each loop.",
+  "landing.metaTitle": "OpenCMO | Open-source AI CMO that learns from every scan",
+  "landing.metaDescription": "OpenCMO is an open-source AI CMO for developer products, turning search, AI visibility, community signals, approvals, and follow-up scans into one compounding visibility system.",
   "landing.navOpenSource": "Open source",
   "landing.navPlatform": "First scan",
+  "landing.navLearning": "Learning loop",
   "landing.navWorkflow": "Workflow",
   "landing.navBlog": "Blog",
   "landing.navTrust": "Trust",
   "landing.navMentions": "Mentions",
   "landing.navFaq": "FAQ",
-  "landing.heroEyebrow": "Open-source AI CMO for developer products",
-  "landing.heroTitle": "Run one scan to see how your product is understood across search, AI answers, and community.",
-  "landing.heroSubtitle": "OpenCMO turns the first scan into one working brief: site-health blockers, AI-search gaps, community demand, and the next move to ship.",
+  "landing.heroEyebrow": "Open-source AI CMO system",
+  "landing.heroTitle": "A visibility operating system that learns from every scan.",
+  "landing.heroSubtitle": "OpenCMO connects search, AI answers, community signals, approvals, and follow-up scans into one evidence trail, so each loop makes the next action sharper.",
   "landing.badge": "Built for open-source projects, developer tools, and technical products that need clear first-run answers.",
   "landing.title": "One open-source AI CMO workspace for search, AI answers, and developer communities.",
   "landing.subtitle": "OpenCMO helps you understand how your brand is discovered by Google, AI assistants, and real communities, then turns those signals into concrete growth actions.",
@@ -456,7 +457,7 @@ export const en = {
   "landing.stage6": "Persist and publish",
   "landing.platformEyebrow": "First scan output",
   "landing.platformTitle": "The first scan should not end as another dashboard.",
-  "landing.platformSubtitle": "OpenCMO turns the public evidence into work your team can review, prioritize, and ship.",
+  "landing.platformSubtitle": "OpenCMO turns public evidence into work your team can review, prioritize, ship, and measure again.",
   "landing.platform1Title": "Site health and SEO",
   "landing.platform1Desc": "Audit crawlability, Core Web Vitals, metadata, and technical issues before they quietly suppress discovery.",
   "landing.platform2Title": "AI Search visibility",
@@ -467,6 +468,34 @@ export const en = {
   "landing.platform4Desc": "Keep competitor context, topic gaps, and market structure close to the scan so strategy stays grounded.",
   "landing.platform5Title": "Reports, approvals, and leads",
   "landing.platform5Desc": "Move from findings into Review & Publish, reports, and developer leads without rebuilding the context in another tool.",
+  "landing.learningEyebrow": "Learning loop",
+  "landing.learningTitle": "The value compounds when evidence, decisions, and outcomes stay together.",
+  "landing.learningSubtitle": "The strongest idea from autonomous marketing systems is not more tools. It is continuity. OpenCMO keeps each scan, review, approved action, and follow-up result attached to the same project context.",
+  "landing.learningLoop1Title": "Observe the public surface",
+  "landing.learningLoop1Desc": "Capture search, AI-answer, SERP, site-health, and community evidence before the team debates what to do.",
+  "landing.learningLoop2Title": "Interpret the drift",
+  "landing.learningLoop2Desc": "Compare the new readout with prior context so category mismatch, narrative gaps, and competitor pressure are easier to see.",
+  "landing.learningLoop3Title": "Ship with guardrails",
+  "landing.learningLoop3Desc": "Route recommendations into reports, approvals, content work, and outbound actions with the evidence still attached.",
+  "landing.learningLoop4Title": "Feed the result back",
+  "landing.learningLoop4Desc": "Use the next scan to see what changed, what held, and what should be adjusted instead of starting from zero.",
+  "landing.learningMemoryEyebrow": "System memory",
+  "landing.learningMemoryTitle": "Every run updates the next recommendation.",
+  "landing.learningMemoryBody": "OpenCMO is shaped like a workspace because marketing judgment improves when signals, decisions, and shipped work are not scattered across separate tools.",
+  "landing.learningMemoryRow1Label": "Baseline",
+  "landing.learningMemoryRow1Value": "The first scan captures how the market currently reads the product.",
+  "landing.learningMemoryRow2Label": "Decision",
+  "landing.learningMemoryRow2Value": "The strongest findings move into review with source evidence and tradeoffs.",
+  "landing.learningMemoryRow3Label": "Action",
+  "landing.learningMemoryRow3Value": "Approved fixes, reports, replies, and content stay tied to the project.",
+  "landing.learningMemoryRow4Label": "Next loop",
+  "landing.learningMemoryRow4Value": "Follow-up scans compare the outcome and reset the next priority.",
+  "landing.learningStat1Label": "Context",
+  "landing.learningStat1Value": "Retained",
+  "landing.learningStat2Label": "Decisions",
+  "landing.learningStat2Value": "Traceable",
+  "landing.learningStat3Label": "Actions",
+  "landing.learningStat3Value": "Measurable",
   "landing.workflowEyebrow": "How it works",
   "landing.workflowTitle": "From public signals to the next move.",
   "landing.workflowSubtitle": "Under the hood is a six-stage pipeline. For the team, the promise is simpler: see the gap clearly, then ship the highest-leverage fix.",
@@ -1122,6 +1151,7 @@ export const en = {
   "blogGen.regenerate": "Regenerate",
   "blogGen.cancel": "Cancel",
   "blogGen.selectStyle": "Select blog style",
+  "blogGen.selectSkill": "Select marketing framework",
   "blogGen.bilingual": "Generate bilingual (EN + ZH)",
   "blogGen.style.launch": "Launch Announcement",
   "blogGen.style.launchDesc": "Product launch news with what/why/when structure",
@@ -1131,6 +1161,18 @@ export const en = {
   "blogGen.style.comparisonDesc": "Feature-by-feature competitive comparison",
   "blogGen.style.thought_leadership": "Thought Leadership",
   "blogGen.style.thought_leadershipDesc": "Industry insight with product as part of the solution",
+  "blogGen.skill.content_strategy": "Content Strategy",
+  "blogGen.skill.content_strategyDesc": "Topic cluster, buyer stage, and internal-link strategy.",
+  "blogGen.skill.copywriting": "Conversion Copy",
+  "blogGen.skill.copywritingDesc": "Sharper positioning, benefits, objections, and CTA.",
+  "blogGen.skill.ai_seo": "AI SEO",
+  "blogGen.skill.ai_seoDesc": "Answer-engine structure, citations, FAQs, and schema notes.",
+  "blogGen.skill.competitor_alternatives": "Alternatives",
+  "blogGen.skill.competitor_alternativesDesc": "Fair comparison pages for competitor-intent searches.",
+  "blogGen.skill.programmatic_seo": "Programmatic SEO",
+  "blogGen.skill.programmatic_seoDesc": "Repeatable page patterns, data fields, and quality checks.",
+  "blogGen.skill.directory_submissions": "Directories",
+  "blogGen.skill.directory_submissionsDesc": "Readiness, assets, positioning variants, and tracker fields.",
   "blogGen.completed": "Blog generated successfully",
   "blogGen.failed": "Generation failed",
   "blogGen.retry": "Retry",
@@ -1139,6 +1181,7 @@ export const en = {
   "blogGen.scores.readability": "Readability",
   "blogGen.scores.keywords": "Keywords",
   "blogGen.scores.structure": "Structure",
+  "blogGen.scores.framework": "Framework",
   "project.content": "Content",
   "content.draftsTitle": "Generated drafts",
   "content.draftsSubtitle": "Blog drafts generated by the promotional blog pipeline. Approve them in the Review queue.",