feat: certificates, landing pages, ai tutor, website update, compliance

packages/storybook/src/molecules/animation/animation.stories.svelte

@@ -16,7 +16,8 @@
     ShinnyText,
     Sparkle,
     SquareCardBody,
-    SquareCardIcon
+    SquareCardIcon,
+    Waves
   } from '@cio/ui/custom/animation';
 
   const { Story } = defineMeta({
@@ -72,6 +73,19 @@
   {/snippet}
 </Story>
 
+<Story name="Waves">
+  {#snippet template()}
+    <div
+      class="ui:relative ui:mx-auto ui:h-[500px] ui:w-full ui:max-w-3xl ui:overflow-hidden ui:rounded-xl ui:border ui:bg-background"
+    >
+      <Waves class="ui:absolute ui:inset-0 ui:h-full ui:w-full" />
+      <div class="ui:relative ui:z-10 ui:flex ui:h-full ui:items-center ui:justify-center ui:text-sm">
+        Move the cursor — animated waves use the theme primary stroke
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
 <Story name="CardContainer">
   {#snippet template()}
     <CardContainer className="ui:max-w-lg">

packages/storybook/src/molecules/model-picker/model-picker.stories.svelte

@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { ModelPicker } from '@cio/ui/custom/model-picker';
 
@@ -12,7 +12,7 @@
   });
 </script>
 
-<script>
+<script lang="ts">
   import { DEFAULT_PICKER_MODEL_ID, type AgentModelId } from '@cio/utils/agent-models';
 
   let selected = $state<AgentModelId>(DEFAULT_PICKER_MODEL_ID);

packages/storybook/src/molecules/public-course/public-course.stories.svelte

@@ -44,7 +44,7 @@
       onPrev={() => console.log('prev')}
       onNext={() => console.log('next')}
     >
-      <PublicCourse.PublicLessonView lesson={LESSON_FIXTURE} callout={CALLOUT_FIXTURE} />
+      <PublicCourse.PublicLessonView lesson={LESSON_FIXTURE} videoCaptionsLabel="Captions" callout={CALLOUT_FIXTURE} />
     </PublicCourse.PublicCourseShell>
   {/snippet}
 </Story>
@@ -68,7 +68,11 @@
       hasPrev
       hasNext={false}
     >
-      <PublicCourse.PublicLessonView lesson={LESSON_LOCKED_FIXTURE} callout={CALLOUT_FIXTURE} />
+      <PublicCourse.PublicLessonView
+        lesson={LESSON_LOCKED_FIXTURE}
+        videoCaptionsLabel="Captions"
+        callout={CALLOUT_FIXTURE}
+      />
     </PublicCourse.PublicCourseShell>
   {/snippet}
 </Story>
@@ -105,12 +109,26 @@
   {#snippet template()}
     <div class="ui:mx-auto ui:max-w-2xl ui:space-y-8 ui:p-8">
       <div>
-        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Inline (at bottom of lessons)</h3>
-        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="inline" />
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Inline · waves (default)</h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="inline" animation="waves" />
       </div>
       <div>
-        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Full (locked item replacement)</h3>
-        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="full" />
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Inline · dotted</h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="inline" animation="dotted" />
+      </div>
+      <div>
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">
+          Full (locked item replacement) · waves
+        </h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="full" animation="waves" />
+      </div>
+      <div>
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Full · dotted</h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="full" animation="dotted" />
+      </div>
+      <div>
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Inline · none (no motion)</h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="inline" animation="none" />
       </div>
       <div>
         <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Full (no callout configured)</h3>