Init copy

site/src/assets/main.css

@@ -45,6 +45,10 @@
 		@apply bg-zinc-900 text-zinc-50 hover:brightness-125;
 	}
 
+	.btn-callout {
+		@apply hover:bg-zinc-850 bg-zinc-900 text-zinc-50 dark:bg-zinc-50 dark:text-zinc-900 hover:dark:bg-white;
+	}
+
 	.btn-secondary {
 		@apply hover:bg-zinc-100 dark:hover:bg-zinc-900;
 	}

site/src/components/AnimationsOnTheWeb.astro

@@ -0,0 +1,28 @@
+---
+import { Image } from 'astro:assets'
+import headshot from '@/assets/images/headshot.jpeg'
+import { ArrowUpRight } from 'lucide-react'
+---
+
+<aside class="border-faint my-16 border-y py-8">
+	<h2 class="not-prose text-lg font-medium">Learn to build components like NumberFlow</h2>
+	<blockquote class="text-pretty not-italic">
+		<!-- prettier-ignore -->
+		<p>Emil Kowalski's Animations on the Web course taught me everything I know about UI animation. I can't
+			imagine having built NumberFlow without it.</p>
+	</blockquote>
+	<p class="not-prose text-muted mb-6 flex items-center gap-2 text-sm">
+		<Image
+			src={headshot}
+			alt="Headshot of Maxwell Barvian"
+			width={64}
+			height={64}
+			class="size-6 rounded-full"
+		/>
+		Maxwell Barvian, NumberFlow creator
+	</p>
+	<a href="https://animations.dev" rel="external" target="_blank" class="btn btn-callout not-prose">
+		Take the course
+		<ArrowUpRight className="size-4" />
+	</a>
+</aside>

site/src/pages/[...framework]/index.mdx

@@ -12,6 +12,7 @@ import StylingDemo from './_demos/Styling'
 import Digits from './_Digits.astro'
 import Match from '@/components/Match.astro'
 import Meta from '@/components/Meta.astro'
+import AnimationsOnTheWeb from '@/components/AnimationsOnTheWeb.astro'
 import Type from '@/components/Type.astro'
 import Heading from '@/components/Heading.astro'
 import Union from '@/components/Union.astro'
@@ -62,7 +63,7 @@ import NumberFlow from '@number-flow/svelte'
 `<NumberFlow>` will automatically transition when the `value` prop changes.
 </Match>
 
----
+<AnimationsOnTheWeb />
 
 <Match>
 <Heading value="Props" />