fimo 2.2.0-staging.16 → 2.2.0-staging.18

package/templates/welcome/template/.fimo/agents/welcome-guide/config.yaml

@@ -1,8 +1,8 @@
 version: 1
-description: 'Send one tiny onboarding pulse so you can see a scheduled agent run.'
+description: 'Reviews the site copy and proposes one small improvement for you to approve.'
 
+# Manual only. Pool preparation creates the tutorial's deterministic proposal
+# without firing this trigger; keeping the trigger allows later real runs while
+# avoiding a schedule that would keep spawning task environments.
 triggers:
   - type: manual
-  - type: schedule
-    cron: '*/2 * * * *'
-    tz: 'UTC'

package/templates/welcome/template/src/pages/ArticleDetail.tsx

@@ -1,14 +1,45 @@
 import { Image, RichText, Text } from 'fimo-react';
 import { ArrowLeft } from 'lucide-react';
+import { useEffect, useRef } from 'react';
 import { Link, useParams } from 'react-router';
 
 import ArticleContent from '@/schemas/Article';
 
 import '../font.css';
+import { ARTICLE_POPULATE, AuthorLine, useStudioScrollRelay } from './SiteContent';
 
 const ArticleDetail = () => {
   const { slug = '' } = useParams();
-  const { data: article, isLoading } = ArticleContent.useGetBySlug(slug);
+  const { data: article, isLoading } = ArticleContent.useGetBySlug(slug, { populate: ARTICLE_POPULATE });
+  useStudioScrollRelay();
+
+  const bodyRef = useRef<HTMLDivElement | null>(null);
+
+  // Prompts in articles double as one-click actions: a button under each
+  // code block hands its text to the Studio chat, which submits it for the
+  // user. Injected into the DOM because the rich-text renderer owns the
+  // markup; the guard keeps re-renders from stacking duplicates.
+  useEffect(() => {
+    const container = bodyRef.current;
+    if (!container) {
+      return;
+    }
+    for (const pre of Array.from(container.querySelectorAll('pre'))) {
+      if (pre.nextElementSibling?.classList.contains('fimo-prompt-cta')) {
+        continue;
+      }
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.textContent = 'Ask Fimo to build this';
+      button.className =
+        'fimo-prompt-cta mt-3 w-full cursor-pointer rounded-[8px] border border-orange-600 py-2.5 text-[15px] font-semibold text-orange-700 transition-colors hover:bg-orange-600 hover:text-white';
+      const text = pre.innerText;
+      button.addEventListener('click', () => {
+        window.parent.postMessage({ type: 'fimo:welcome:chat-prompt', text }, '*');
+      });
+      pre.insertAdjacentElement('afterend', button);
+    }
+  });
 
   if (!article) {
     return (
@@ -42,23 +73,28 @@ const ArticleDetail = () => {
           </Link>
         </header>
         <div className="px-6 py-12 sm:px-12 sm:py-16">
-          <p className="text-xs font-semibold tracking-[0.18em] text-orange-700 uppercase">Fimo tutorial</p>
+          <p className="text-xs font-semibold tracking-[0.18em] text-orange-700 uppercase">
+            {article.category ? <Text value={article.category.name} as="span" /> : 'Fimo tutorial'}
+          </p>
           <Text
             value={article.title}
             as="h1"
             className="mt-5 max-w-3xl text-4xl font-bold tracking-[-0.04em] sm:text-6xl"
           />
           <Text value={article.summary} as="p" className="mt-6 max-w-2xl text-lg leading-8 text-zinc-600" />
+          {article.author ? <AuthorLine author={article.author} className="mt-6 !text-[14px]" /> : null}
           <Image
             value={article.cover}
             className="mt-10 aspect-[48/25] w-full rounded-[8px] border border-zinc-950 object-cover"
             loading="eager"
             fetchPriority="high"
           />
-          <RichText
-            value={article.body}
-            className="mx-auto mt-12 max-w-2xl text-lg leading-8 text-zinc-700 [&_a]:cursor-pointer [&_a]:font-semibold [&_a]:text-orange-700 [&_a]:underline [&_a]:underline-offset-4 [&_h2]:mt-12 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-[-0.02em] [&_h2]:text-zinc-950 [&_h2+p]:mt-4 [&_h3]:mt-8 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:text-zinc-950 [&_li+li]:mt-2 [&_p+p]:mt-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-[8px] [&_pre]:bg-zinc-950 [&_pre]:p-5 [&_pre]:text-[15px] [&_pre]:leading-7 [&_pre]:whitespace-pre-wrap [&_pre]:text-zinc-100 [&_pre+p]:mt-6 [&_ul]:mt-6 [&_ul]:list-disc [&_ul]:pl-6 [&_ul+p]:mt-6"
-          />
+          <div ref={bodyRef}>
+            <RichText
+              value={article.body}
+              className="mx-auto mt-12 max-w-2xl text-lg leading-8 text-zinc-700 [&_a]:cursor-pointer [&_a]:font-semibold [&_a]:text-orange-700 [&_a]:underline [&_a]:underline-offset-4 [&_h2]:mt-12 [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:tracking-[-0.02em] [&_h2]:text-zinc-950 [&_h2+p]:mt-4 [&_h3]:mt-8 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:text-zinc-950 [&_li+li]:mt-2 [&_p+p]:mt-6 [&_pre]:mt-6 [&_pre]:overflow-x-auto [&_pre]:rounded-[8px] [&_pre]:bg-zinc-950 [&_pre]:p-5 [&_pre]:text-[15px] [&_pre]:leading-7 [&_pre]:whitespace-pre-wrap [&_pre]:text-zinc-100 [&_pre+p]:mt-6 [&_ul]:mt-6 [&_ul]:list-disc [&_ul]:pl-6 [&_ul+p]:mt-6"
+            />
+          </div>
         </div>
       </article>
     </main>

package/templates/welcome/template/src/pages/Index.tsx

@@ -3,11 +3,15 @@ import HomePageContent from '@/schemas/HomePage';
 
 import '../font.css';
 import { FALLBACK_ARTICLES, FALLBACK_PAGE } from './fallback-content';
-import { ContentFallback, TutorialPage } from './SiteContent';
+import { ARTICLE_POPULATE, ContentFallback, TutorialPage } from './SiteContent';
 
 const Index = () => {
   const { data: page, isLoading, isError } = HomePageContent.useGet();
-  const { data: articles = [], isLoading: articlesLoading, isError: articlesError } = ArticleContent.useGet();
+  const {
+    data: articles = [],
+    isLoading: articlesLoading,
+    isError: articlesError,
+  } = ArticleContent.useGet({ populate: ARTICLE_POPULATE });
 
   // While loading, the page renders the seed copy through the same
   // components, so the live values reconcile in place with no visible

package/templates/welcome/template/src/pages/SiteContent.tsx

@@ -1,29 +1,48 @@
 import { Image, RichText, Text } from 'fimo-react';
-import { Bot, Check, Copy, Database, GitBranch, MousePointerClick } from 'lucide-react';
+import { Bot, Check, Copy, Database, GitBranch, MousePointerClick, X } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router';
 
-import type { Article } from '@/schemas/Article';
+import type { ArticleResult } from '@/schemas/Article';
 import type { HomePage } from '@/schemas/HomePage';
 
+import { FALLBACK_PAGE } from './fallback-content';
+
+/**
+ * Every article read in this site resolves its two references, so the cards
+ * and the detail page can name the author and the category. `populate` is
+ * depth-one: without it both fields come back as bare `{ id }`.
+ */
+export const ARTICLE_POPULATE = ['author', 'category'] as const;
+export type TutorialArticle = ArticleResult<undefined, typeof ARTICLE_POPULATE>;
+
 interface TutorialPageProps {
   page: HomePage;
-  articles: Article[];
+  articles: TutorialArticle[];
 }
 
 const COMPLETED_ACTIONS_KEY = 'fimo-welcome-completed-actions-v2';
+const DISMISSED_KEY = 'fimo-welcome-dismissed';
 const ARTICLE_COVER_CLASS = 'aspect-[48/25] w-full border-b border-zinc-200 bg-white';
 const OUTLINE_BUTTON_CLASS =
   'mt-4 w-full cursor-pointer rounded-md border border-orange-600/40 py-2 text-[13px] font-semibold text-orange-700 transition-colors hover:border-orange-600 hover:bg-orange-50';
 
 export function TutorialPage({ page, articles }: TutorialPageProps) {
+  useStudioScrollRelay();
+
+  const [completedActions, setCompletedActions] = useState<string[]>(readCompletedActions);
+  const allDone = page.steps.length > 0 && page.steps.every((step) => completedActions.includes(String(step.action)));
+  const [dismissed, dismiss] = useOnboardingDismissed();
+  const showNudge = allDone && !dismissed;
+
   return (
     <main className="min-h-screen bg-white px-4 py-10 text-zinc-950 sm:px-6">
+      <img src="/fimo-logo-black.svg" alt="Fimo" className="mx-auto mb-8 h-7 w-auto" />
       <article className="relative mx-auto max-w-6xl border-x border-t border-zinc-200">
         <Hero page={page} />
-        <Tutorial page={page} />
-        <div className="relative h-14 border-b border-zinc-200" />
-        <Articles articles={articles} />
+        <Tutorial page={page} completedActions={completedActions} setCompletedActions={setCompletedActions} />
+        <DeveloperCallout />
+        <Articles articles={articles} showNudge={showNudge} onDismiss={dismiss} />
         <div className="relative h-14 border-b border-zinc-200">
           <GridDot edgeX="left" edgeY="top" />
           <GridDot x="33.333%" edgeY="top" />
@@ -33,17 +52,41 @@ export function TutorialPage({ page, articles }: TutorialPageProps) {
           <GridDot x="50%" edgeY="bottom" />
           <GridDot edgeX="right" edgeY="bottom" />
         </div>
-        <WhatComesNext page={page} />
+        <WhatComesNext page={page} showNudge={showNudge} onDismiss={dismiss} />
         <div className="relative">
           <GridDot edgeX="left" edgeY="top" />
           <GridDot x="50%" edgeY="top" />
           <GridDot edgeX="right" edgeY="top" />
         </div>
+        <footer className="relative border-b border-zinc-200 px-8 py-6 text-center">
+          <Text value={page.footerNote} className="text-[12px] leading-5 text-zinc-500" />
+        </footer>
       </article>
     </main>
   );
 }
 
+// The one tinted band in the grid: a quiet orange wash that reads as an
+// aside for developers without breaking the page's white sobriety.
+function DeveloperCallout() {
+  return (
+    <div className="flex items-center gap-3 border-b border-zinc-200 bg-orange-50/80 px-6 py-7">
+      <span className="fimo-mono text-[12px] text-orange-600">{'</>'}</span>
+      <span className="text-[14px] font-bold text-zinc-950">
+        You are a developer?{' '}
+        <a
+          href="https://fimo.ai/docs"
+          target="_blank"
+          rel="noreferrer"
+          className="cursor-pointer font-medium text-orange-600 underline underline-offset-4 transition-colors hover:text-orange-700"
+        >
+          Use our CLI & start from the terminal here.
+        </a>
+      </span>
+    </div>
+  );
+}
+
 // Fimo grid intersection marker, light theme. The edge clip mirrors the
 // website's GridDot: it stops the halo from spilling outside the column.
 function GridDot({ x, edgeX, edgeY }: { x?: string; edgeX?: 'left' | 'right'; edgeY: 'top' | 'bottom' }) {
@@ -77,6 +120,111 @@ function GridDot({ x, edgeX, edgeY }: { x?: string; edgeX?: 'left' | 'right'; ed
   );
 }
 
+/**
+ * Closing a hint closes that hint, here and now. Whether it also ends the
+ * tour is the Studio's call — it counts closes across both surfaces and asks
+ * before stopping — so the close is reported upwards and the page adopts
+ * whatever comes back, which is also how the decision reaches the other
+ * preview origins (each has its own storage).
+ */
+function useOnboardingDismissed(): [boolean, () => void] {
+  const [dismissed, setDismissed] = useState(() => window.sessionStorage.getItem(DISMISSED_KEY) === '1');
+
+  useEffect(() => {
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'fimo:welcome:steps-sync' || event.data.dismissed !== true) {
+        return;
+      }
+      window.sessionStorage.setItem(DISMISSED_KEY, '1');
+      setDismissed(true);
+    };
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, []);
+
+  const dismiss = useCallback(() => {
+    // Local, so the bubble goes away on the click that asked for it; the
+    // Studio decides whether the tour itself is over.
+    setDismissed(true);
+    window.parent.postMessage({ type: 'fimo:welcome:dismiss' }, '*');
+  }, []);
+
+  return [dismissed, dismiss];
+}
+
+// The finished tour hands over to the rest of the page with the same orange
+// voice the Studio bubbles use.
+function SectionNudge({ text, onDismiss }: { text: string; onDismiss: () => void }) {
+  return (
+    <span className="absolute -top-5 left-8 z-10 inline-flex max-w-72 rounded-lg bg-orange-600 py-3 pr-10 pl-4 text-sm leading-5 font-semibold text-white shadow-xl shadow-orange-600/30">
+      {text}
+      <button
+        type="button"
+        aria-label="Dismiss the onboarding"
+        onClick={onDismiss}
+        className="absolute top-2 right-2 cursor-pointer rounded p-0.5 text-white/70 transition-colors hover:bg-white/15 hover:text-white"
+      >
+        <X className="size-3.5" aria-hidden />
+      </button>
+      <span className="absolute top-full left-8 border-[6px] border-transparent border-t-orange-600" aria-hidden />
+    </span>
+  );
+}
+
+// The Studio paints a static snapshot of this page first and swaps in the
+// dev server mid-read. Both documents are cross-origin to the Studio, so
+// the page itself reports its scroll position up, and restores the one the
+// Studio hands back after the swap (retrying briefly: late images can
+// still be growing the page when the position arrives).
+export function useStudioScrollRelay() {
+  useEffect(() => {
+    if (window.parent === window) {
+      return;
+    }
+
+    let reportFrame = 0;
+    const report = () => {
+      cancelAnimationFrame(reportFrame);
+      reportFrame = requestAnimationFrame(() => {
+        window.parent.postMessage({ type: 'fimo:welcome:scroll', y: window.scrollY }, '*');
+      });
+    };
+
+    let restoreTimer = 0;
+    const cancelRestore = () => window.clearInterval(restoreTimer);
+    const onMessage = (event: MessageEvent) => {
+      if (event.data?.type !== 'fimo:welcome:restore-scroll' || typeof event.data.y !== 'number') {
+        return;
+      }
+
+      const y = event.data.y;
+      const deadline = Date.now() + 2000;
+      cancelRestore();
+      const attempt = () => {
+        window.scrollTo(0, y);
+        if (Math.abs(window.scrollY - y) < 2 || Date.now() > deadline) {
+          cancelRestore();
+        }
+      };
+      attempt();
+      restoreTimer = window.setInterval(attempt, 100);
+    };
+
+    window.addEventListener('scroll', report, { passive: true });
+    window.addEventListener('wheel', cancelRestore, { passive: true });
+    window.addEventListener('touchmove', cancelRestore, { passive: true });
+    window.addEventListener('message', onMessage);
+    return () => {
+      cancelAnimationFrame(reportFrame);
+      cancelRestore();
+      window.removeEventListener('scroll', report);
+      window.removeEventListener('wheel', cancelRestore);
+      window.removeEventListener('touchmove', cancelRestore);
+      window.removeEventListener('message', onMessage);
+    };
+  }, []);
+}
+
 function Hero({ page }: { page: HomePage }) {
   return (
     <section className="relative border-b border-zinc-200 px-6 py-10 text-center">
@@ -93,39 +241,86 @@ function Hero({ page }: { page: HomePage }) {
   );
 }
 
-function Tutorial({ page }: { page: HomePage }) {
-  const [completedActions, setCompletedActions] = useState<string[]>(readCompletedActions);
+function Tutorial({
+  page,
+  completedActions,
+  setCompletedActions,
+}: {
+  page: HomePage;
+  completedActions: string[];
+  setCompletedActions: React.Dispatch<React.SetStateAction<string[]>>;
+}) {
   const currentStepIndex = page.steps.findIndex((step) => !completedActions.includes(String(step.action)));
 
-  const completeAction = useCallback((action: string) => {
-    setCompletedActions((current) => {
-      if (current.includes(action)) {
-        return current;
+  const completeAction = useCallback(
+    (action: string) => {
+      // Persisted and announced synchronously: a step CTA can navigate the
+      // Studio away and tear this document down before React flushes, and a
+      // completion living only in a pending state update dies with it.
+      const current = readCompletedActions();
+      if (!current.includes(action)) {
+        const next = [...current, action];
+        window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(next));
+        window.parent.postMessage({ type: 'fimo:welcome:steps', steps: next }, '*');
       }
-
-      const next = [...current, action];
-      window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(next));
-      return next;
-    });
-  }, []);
+      setCompletedActions((state) => (state.includes(action) ? state : [...state, action]));
+    },
+    [setCompletedActions]
+  );
 
   const [editActive, setEditActive] = useState(false);
 
   useEffect(() => {
     const onMessage = (event: MessageEvent) => {
-      if (event.data?.type !== 'mode/change') {
+      if (event.data?.type === 'mode/change') {
+        setEditActive(event.data?.payload?.mode === 'edit');
         return;
       }
-      const isEdit = event.data?.payload?.mode === 'edit';
-      setEditActive(isEdit);
-      if (isEdit) {
-        completeAction('toggleEditMode');
+      // The Studio owns step completion per project: every preview origin
+      // (snapshot, main dev, each branch dev) has isolated storage, so the
+      // local record alone would restart the tour on each of them.
+      if (event.data?.type === 'fimo:welcome:steps-sync' && Array.isArray(event.data.steps)) {
+        const incoming = event.data.steps.filter((step: unknown): step is string => typeof step === 'string');
+        setCompletedActions((current) => {
+          const merged = [...new Set([...current, ...incoming])];
+          if (merged.length === current.length) {
+            return current;
+          }
+          window.sessionStorage.setItem(COMPLETED_ACTIONS_KEY, JSON.stringify(merged));
+          return merged;
+        });
       }
     };
 
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
-  }, [completeAction]);
+  }, []);
+
+  // Announces on load (the Studio answers with the merged set) and reports
+  // every completion so other preview documents inherit it.
+  useEffect(() => {
+    window.parent.postMessage({ type: 'fimo:welcome:steps', steps: completedActions }, '*');
+  }, [completedActions]);
+
+  // Step 1 is the edit, not the doorway: activating Edit mode proves
+  // nothing, so the step only completes once the title differs from the
+  // seed copy — whichever surface the change came from.
+  const titleChanged = String(page.title) !== String(FALLBACK_PAGE.title);
+  useEffect(() => {
+    if (titleChanged) {
+      completeAction('toggleEditMode');
+    }
+  }, [titleChanged, completeAction]);
+
+  // Step 4 is the accepted proposal, not the visit: once the welcome
+  // guide's footer change has been merged into this env, the footer no
+  // longer matches the seed copy.
+  const footerChanged = String(page.footerNote) !== String(FALLBACK_PAGE.footerNote);
+  useEffect(() => {
+    if (footerChanged) {
+      completeAction('openAgents');
+    }
+  }, [footerChanged, completeAction]);
 
   return (
     <section
@@ -169,7 +364,12 @@ function Tutorial({ page }: { page: HomePage }) {
               editActive={editActive}
               primary={current}
               onClick={() => {
-                completeAction(action);
+                // Steps 1 and 4 complete on their real outcome (the title
+                // edit, the accepted merge — the Studio reports both), not
+                // on opening the door.
+                if (action !== 'toggleEditMode' && action !== 'openAgents') {
+                  completeAction(action);
+                }
                 postShortcut(action);
               }}
             />
@@ -203,13 +403,13 @@ function InstructionText({ value }: { value: string }) {
 
   return (
     <>
-      {explanation ? <p>{formatInstruction(explanation)}</p> : null}
+      {explanation ? <p className="font-medium">{formatInstruction(explanation)}</p> : null}
       {instructions.length > 0 ? (
         <div className={explanation ? 'mt-2.5' : ''}>
-          <span className="fimo-mono text-[10px] font-medium text-orange-600">ACTION</span>
+          <span className="text-[11px] font-extrabold tracking-[0.05em] text-black uppercase">Action</span>
           <ul className="mt-1 space-y-1.5">
             {instructions.map((instruction) => (
-              <li key={instruction} className="font-medium text-zinc-800">
+              <li key={instruction} className="font-semibold text-zinc-900">
                 {formatInstruction(instruction.replace(/^-\s*/, ''))}
               </li>
             ))}
@@ -289,7 +489,7 @@ function TutorialAction({
     );
   }
 
-  return <ActionButton label={label} primary={primary} onClick={onClick} />;
+  return <ActionButton label={label} primary={primary} onClick={onClick} shortcut={action} />;
 }
 
 function ActionButton({
@@ -297,15 +497,20 @@ function ActionButton({
   primary,
   onClick,
   className = '',
+  shortcut,
 }: {
   label: HomePage['steps'][number]['actionLabel'];
   primary: boolean;
   onClick: () => void;
   className?: string;
+  /** Names the Studio shortcut this button fires, so the generated static
+   * snapshot can rewire it without matching on button copy. */
+  shortcut?: string;
 }) {
   return (
     <button
       type="button"
+      data-shortcut={shortcut}
       onClick={onClick}
       className={`${
         primary
@@ -318,9 +523,50 @@ function ActionButton({
   );
 }
 
-function Articles({ articles }: { articles: Article[] }) {
+/**
+ * The byline shared by the article cards and the article page. Both fields
+ * come from the linked Author entry, so editing that one entry renames the
+ * author everywhere it appears — the point of a reference.
+ */
+export function AuthorLine({
+  author,
+  className = '',
+}: {
+  author: NonNullable<TutorialArticle['author']>;
+  className?: string;
+}) {
+  return (
+    <p className={`text-[12px] leading-5 text-zinc-500 ${className}`}>
+      By <Text value={author.name} as="span" className="font-semibold text-zinc-700" />
+      {/* `FimoString` is a String object, so a cleared role is truthy — the
+          raw value is what decides whether the separator earns its place. */}
+      {String(author.role) ? (
+        <>
+          {' · '}
+          <Text value={author.role} as="span" />
+        </>
+      ) : null}
+    </p>
+  );
+}
+
+function Articles({
+  articles,
+  showNudge,
+  onDismiss,
+}: {
+  articles: TutorialArticle[];
+  showNudge: boolean;
+  onDismiss: () => void;
+}) {
   return (
-    <section className="grid border-b border-zinc-200 max-md:divide-y max-md:divide-zinc-200 md:grid-cols-3 md:divide-x md:divide-zinc-200">
+    <section className="relative grid border-b border-zinc-200 max-md:divide-y max-md:divide-zinc-200 md:grid-cols-3 md:divide-x md:divide-zinc-200">
+      {showNudge && (
+        <SectionNudge
+          text="Tour done! Each concept has a short guide here — worth five more minutes."
+          onDismiss={onDismiss}
+        />
+      )}
       {articles.map((article, index) => (
         <Link
           key={article.id}
@@ -333,9 +579,18 @@ function Articles({ articles }: { articles: Article[] }) {
             <div className={ARTICLE_COVER_CLASS} aria-hidden />
           )}
           <div className="p-6 pt-5">
-            <p className="fimo-mono text-[11px] text-zinc-400">ARTICLES / 0{index + 1}</p>
+            <p className="fimo-mono text-[11px] text-zinc-400">
+              ARTICLES / 0{index + 1}
+              {article.category ? (
+                <>
+                  {' / '}
+                  <Text value={article.category.name} as="span" className="text-orange-600 uppercase" />
+                </>
+              ) : null}
+            </p>
             <Text value={article.title} as="h3" className="mt-2 line-clamp-2 text-[15px] font-bold" />
             <Text value={article.summary} as="p" className="mt-1.5 line-clamp-2 text-[13px] leading-5 text-zinc-600" />
+            {article.author ? <AuthorLine author={article.author} className="mt-3" /> : null}
             <span className="mt-4 inline-block text-[13px] font-bold text-orange-600 group-hover:text-orange-700">
               Read in the CMS →
             </span>
@@ -346,9 +601,15 @@ function Articles({ articles }: { articles: Article[] }) {
   );
 }
 
-function WhatComesNext({ page }: { page: HomePage }) {
+function WhatComesNext({ page, showNudge, onDismiss }: { page: HomePage; showNudge: boolean; onDismiss: () => void }) {
   return (
-    <section className="grid border-b border-zinc-200 max-lg:divide-y max-lg:divide-zinc-200 lg:grid-cols-2 lg:divide-x lg:divide-zinc-200">
+    <section className="relative grid border-b border-zinc-200 max-lg:divide-y max-lg:divide-zinc-200 lg:grid-cols-2 lg:divide-x lg:divide-zinc-200">
+      {showNudge && (
+        <SectionNudge
+          text="You are ready. Migrate or create your own website, and enjoy Fimo on a real project!"
+          onDismiss={onDismiss}
+        />
+      )}
       <div className="p-6 sm:p-8">
         <p className="fimo-mono text-[11px] font-medium text-orange-600">WHAT COMES NEXT</p>
         <Text value={page.migrationTitle} as="h3" className="mt-2 text-xl font-bold tracking-[-0.02em]" />