's'

app/topic/components/TopicHero.tsx

@@ -1,11 +1,26 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import { getTopicConfig, getTopicCurriculum } from "../config";
 import { getLastWatched, getProgress } from "@/app/cloudphone/lib/learning";
 import { ParticleBackground } from "@/app/cloudphone/components/ParticleBackground";
 import { triggerPay } from "@/app/lib/triggerPay";
+import type { TopicPrepVariant } from "./TopicPrepThreeScene";
+
+const TopicPrepThreeScene = dynamic(
+  () => import("./TopicPrepThreeScene").then((m) => m.TopicPrepThreeScene),
+  {
+    ssr: false,
+    loading: () => (
+      <div
+        className="mx-auto mt-2 min-h-[260px] w-full max-w-2xl animate-pulse rounded-2xl border border-[var(--border)] bg-[var(--muted)]/20"
+        aria-hidden
+      />
+    ),
+  },
+);
 
 type TopicHeroProps = {
   topicId: string;
@@ -36,6 +51,10 @@ export function TopicHero({ topicId }: TopicHeroProps) {
 
   const isEnrollCta = !config.externalUrl && !last;
 
+  const showPrepThree =
+    (topicId === "indie" || topicId === "aiagent") && !curriculum?.hasContent;
+  const prepVariant: TopicPrepVariant = topicId === "indie" ? "indie" : "aiagent";
+
   return (
     <section className="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--gradient-accent),transparent)] animate-gradient" />
@@ -74,6 +93,14 @@ export function TopicHero({ topicId }: TopicHeroProps) {
             </div>
           ))}
         </div>
+        {showPrepThree ? (
+          <div
+            className="animate__animated animate__fadeInUp mx-auto mb-10 w-full max-w-2xl sm:mb-12"
+            style={{ animationDelay: "0.5s", animationFillMode: "both" }}
+          >
+            <TopicPrepThreeScene variant={prepVariant} />
+          </div>
+        ) : null}
         {curriculum?.hasContent && (
           <div
             className="animate__animated animate__fadeInDown flex flex-wrap justify-center gap-3 sm:gap-4"