From 2ec4f7268f689f6ef33992d5c592a7081e0dc634 Mon Sep 17 00:00:00 2001
From: jh3y <jh3y@users.noreply.github.com>
Date: Thu, 3 Jul 2025 12:22:40 +0100
Subject: [PATCH 01/10] fix: navigation stretch + grid alignment

---
 .../src/components/layout-client.tsx          | 14 +++++------
 .../src/components/navigation/index.tsx       | 24 +++++++------------
 apps/craft-of-ui/src/styles/globals.css       | 16 +++++++++++--
 3 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/apps/craft-of-ui/src/components/layout-client.tsx b/apps/craft-of-ui/src/components/layout-client.tsx
index ab8bfff5b..a03034cac 100644
--- a/apps/craft-of-ui/src/components/layout-client.tsx
+++ b/apps/craft-of-ui/src/components/layout-client.tsx
@@ -28,6 +28,10 @@ export default function LayoutClient({
 }) {
 	return (
 		<div className={cn(withGrid && 'home-page-grid')}>
+			<Navigation
+				highlightedResource={highlightedResource}
+				withContainer={withContainer}
+			/>
 			<div
 				className={cn(
 					'',
@@ -37,14 +41,8 @@ export default function LayoutClient({
 					className,
 				)}
 			>
-				<div className="">
-					<Navigation
-						highlightedResource={highlightedResource}
-						withContainer={withContainer}
-					/>
-					{children}
-					<Footer />
-				</div>
+				{children}
+				<Footer />
 			</div>
 		</div>
 	)
diff --git a/apps/craft-of-ui/src/components/navigation/index.tsx b/apps/craft-of-ui/src/components/navigation/index.tsx
index 016b60058..407a104aa 100644
--- a/apps/craft-of-ui/src/components/navigation/index.tsx
+++ b/apps/craft-of-ui/src/components/navigation/index.tsx
@@ -12,7 +12,7 @@ import { useSession } from 'next-auth/react'
 import { Button } from '@coursebuilder/ui'
 import { useFeedback } from '@coursebuilder/ui/feedback-widget/feedback-context'
 
-import { Logo } from '../brand/logo'
+import { Logo, LogoMark } from '../brand/logo'
 import { MobileNavigation } from './mobile-navigation'
 import { NavLinkItem } from './nav-link-item'
 import { ThemeToggle } from './theme-toggle'
@@ -52,7 +52,7 @@ const Navigation = ({
 	return (
 		<header
 			className={cn(
-				'relative z-50 flex h-[var(--nav-height)] w-full items-center justify-between print:hidden',
+				'sticky top-0 z-50 flex h-[var(--nav-height)] items-center justify-between px-[var(--gutter)] print:hidden',
 				{
 					'px-5': !withContainer,
 				},
@@ -70,20 +70,14 @@ const Navigation = ({
 					// 	router.push('/brand')
 					// }}
 				>
-					<Button
-						asChild
-						variant="ghost"
-						className="h-10 p-0 text-lg hover:bg-transparent"
+					<Link
+						prefetch
+						tabIndex={isRoot ? -1 : 0}
+						href="/"
+						className="font-heading absolute left-0 flex items-center justify-center gap-2 pr-5 text-lg font-semibold leading-none transition"
 					>
-						<Link
-							prefetch
-							tabIndex={isRoot ? -1 : 0}
-							href="/"
-							className="font-heading absolute left-0 flex items-center justify-center gap-2 pr-5 text-lg font-semibold leading-none transition"
-						>
-							<Logo className="[&_svg]:hover:text-primary origin-left [&_svg]:transition" />
-						</Link>
-					</Button>
+						<LogoMark className="w-7 -translate-x-[1px] text-[canvasText] opacity-50 hover:opacity-100" />
+					</Link>
 				</span>
 				{links.length > 0 && (
 					<nav
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index a439a4790..078f8cb8d 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -15,7 +15,7 @@
 
 @layer base {
 	:root {
-		--nav-height: 5rem;
+		--nav-height: 80px;
 		--command-bar-height: 2.25rem;
 		--pane-layout-height: calc(
 			100vh - var(--nav-height) - var(--command-bar-height)
@@ -50,6 +50,18 @@
 		--chart-5: 27 87% 67%;
 		color-scheme: light;
 
+		/* imported */
+		--header-height: 80px;
+		--content: 600px;
+		--gutter: 1.5rem;
+		--font-size-min: 14;
+		--font-size-max: 20;
+		--font-ratio-min: 1.2;
+		--font-ratio-max: 1.33;
+		--font-width-min: 375;
+		--font-width-max: 1500;
+		--breakpoint-lg: 968px;
+
 		/* codehike theme */
 		--ch-0: light;
 		--ch-1: #6e7781;
@@ -202,7 +214,7 @@
 		text-decoration: var(--shiki-dark-text-decoration) !important;
 	}
 
-	/* 
+	/*
   Hide the second #primary-newsletter-cta only if there are exactly two on the page.
   This is a temporary workaround for duplicate IDs rendered by the framework.
   Ideally, IDs should be unique—consider refactoring to use class names or unique IDs.

From 8a7d80a502a2156af034fcbd242121f24f1c5f9b Mon Sep 17 00:00:00 2001
From: jh3y <jh3y@users.noreply.github.com>
Date: Thu, 3 Jul 2025 16:18:55 +0100
Subject: [PATCH 02/10] feat: align more styling before form completion

---
 apps/craft-of-ui/src/app/layout.tsx           |   2 +-
 apps/craft-of-ui/src/app/page.tsx             |  31 +-
 .../src/components/jhey-profile.tsx           |  67 ++-
 .../src/components/primary-newsletter-cta.tsx | 103 ++--
 .../convertkit/convertkit-subscribe-form.tsx  | 467 ++++++++++++------
 apps/craft-of-ui/src/styles/globals.css       | 155 +++++-
 .../src/styles/primary-newsletter-cta.css     |   2 +-
 7 files changed, 575 insertions(+), 252 deletions(-)

diff --git a/apps/craft-of-ui/src/app/layout.tsx b/apps/craft-of-ui/src/app/layout.tsx
index 5044df5a4..4e18d2ea5 100644
--- a/apps/craft-of-ui/src/app/layout.tsx
+++ b/apps/craft-of-ui/src/app/layout.tsx
@@ -74,7 +74,7 @@ export default function RootLayout({
 				<AxiomWebVitals />
 				<body
 					id="layout"
-					className={`relative ${inter.variable} ${dmSerifText.variable} antialised font-sans`}
+					className={`antialised relative ${inter.variable} ${dmSerifText.variable} font-sans`}
 				>
 					<Toaster />
 					<FeedbackInsert />
diff --git a/apps/craft-of-ui/src/app/page.tsx b/apps/craft-of-ui/src/app/page.tsx
index 77e747266..8dc59009a 100644
--- a/apps/craft-of-ui/src/app/page.tsx
+++ b/apps/craft-of-ui/src/app/page.tsx
@@ -89,14 +89,14 @@ const Home = async (props: Props) => {
 			withContainer
 			withGrid
 		>
-			<div className="min-h-screen overflow-auto pb-16">
-				<div className="mx-auto max-w-3xl px-4 pb-16 pt-16">
-					<header className="text-gray-900 dark:text-gray-100">
-						<h1 className="mb-4 flex items-center text-sm font-extralight text-gray-800 dark:text-gray-200">
+			<div className="mask-content fixed inset-0 min-h-screen overflow-auto pb-[calc(var(--header-height)*1)] [--end:calc(2*var(--header-height))] [--start:var(--header-height)] lg:[--end:var(--header-height)] lg:[--start:0]">
+				<div className="mx-auto w-[var(--content)] max-w-[calc(100vw-(2*var(--gutter)))] pb-[var(--header-height)] pt-[calc(2*var(--header-height))]">
+					<header className="text-[canvasText] dark:text-gray-100">
+						<h1 className="mb-4 flex items-center font-sans text-sm font-[200] text-gray-900 dark:text-gray-200">
 							The Craft of UI — by&nbsp;
 							<Link
 								aria-label="Jhey Tompkins"
-								className="flex items-center gap-x-2 text-gray-600 outline-red-500 transition-colors hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400"
+								className="flex items-center gap-x-2 text-gray-900 outline-red-500 transition-colors hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400"
 								href="https://twitter.com/intent/follow?screen_name=jh3yy"
 								target="_blank"
 							>
@@ -110,7 +110,7 @@ const Home = async (props: Props) => {
 								/>
 							</Link>
 						</h1>
-						<p className="mb-6 font-serif text-4xl leading-none sm:text-5xl md:text-6xl">
+						<p className="text-fluid mb-6 font-serif leading-none [--font-level:4] [--font-size-min:20]">
 							What if you could build{' '}
 							<span className="text-red-500">anything</span>?
 						</p>
@@ -118,11 +118,9 @@ const Home = async (props: Props) => {
 
 					<main
 						className={cn(
-							'prose prose-lg dark:prose-invert',
-							'[&>p:not(:has(+ul))]:mb-8 [&_p]:text-gray-600 [&_p]:dark:text-gray-300',
-							'[&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6',
-							'[&_h2]:font-serif [&_h2]:text-3xl [&_h2]:font-normal [&_h2]:leading-none',
-							'[&_h2]:mb-4 [&_h2]:mt-20',
+							'[&_p]:text-md leading-[1.5]',
+							'[&_h2]:mb-4 [&_h2]:mt-20 [&_h2]:font-serif [&_h2]:font-[600] [&_h2]:leading-none [&_h2]:[--font-level:1.8] [&_h2]:[--font-size-min:20]',
+							'[&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6',
 						)}
 					>
 						{firstPageResource && (
@@ -138,6 +136,17 @@ const Home = async (props: Props) => {
 							</Link>
 						)}
 
+						<p className="text-fluid text-balance font-[200] leading-[1.25] [--font-level:0.6]">
+							Master the tools, mindset, and techniques behind crafting
+							exceptional user interfaces with HTML, CSS, and JavaScript
+						</p>
+
+						<PrimaryNewsletterCta
+							title="You want to build exceptional user interfaces, I want to empower you to do so."
+							byline="Join the waitlist to learn more and get course launch updates."
+							actionLabel="Subscribe"
+						/>
+
 						<article className="mx-auto w-full max-w-3xl pb-10">
 							{page?.fields?.body ? (
 								<>
diff --git a/apps/craft-of-ui/src/components/jhey-profile.tsx b/apps/craft-of-ui/src/components/jhey-profile.tsx
index f68621b9f..86c0f4d7d 100644
--- a/apps/craft-of-ui/src/components/jhey-profile.tsx
+++ b/apps/craft-of-ui/src/components/jhey-profile.tsx
@@ -4,10 +4,8 @@ import Link from 'next/link'
 
 export function JheyProfile() {
 	return (
-		<section className="not-prose mx-auto w-full max-w-3xl">
-			<div className="mb-8 flex items-center gap-2 font-serif text-2xl font-bold leading-tight tracking-tight sm:text-3xl md:text-4xl">
-				Hey – I'm Jhey Tompkins 🤙
-			</div>
+		<section className="not-prose mx-auto w-full">
+			<h2 className="text-fluid font-serif">Hey – I'm Jhey Tompkins 🤙</h2>
 			<div className="clearfix">
 				<Image
 					className="float-none mb-4 mr-6 h-[180px] w-[180px] rounded-lg bg-gray-500 object-cover sm:float-left"
@@ -17,9 +15,13 @@ export function JheyProfile() {
 					height={180}
 					priority
 				/>
-				<div className="space-y-5 text-base text-gray-300">
+				<div
+					className="[&_p]:text-md leading-[1.5]
+				[&_h2]:mb-4 [&_h2]:mt-20 [&_h2]:font-serif [&_h2]:font-[600] [&_h2]:leading-none [&_h2]:[--font-level:1.8] [&_h2]:[--font-size-min:20]
+				[&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6"
+				>
 					<p>
-						I'm a web developer who loves making the web feel magical whilst
+						I'm a design engineer who loves making the web feel magical whilst
 						showing others how to do the same.
 					</p>
 					<p>
@@ -106,11 +108,13 @@ export function JheyProfile() {
 			<div className="flex flex-col gap-y-2 pt-2">
 				<div className="font-semibold">– Jhey, the Craft of UI</div>
 				<svg
-					className="sig w-48"
+					aria-hidden="true"
+					className="sig text-[canvasText]"
 					viewBox="0 0 271 209"
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
 				>
+					<title>Signature</title>
 					<path
 						d="M40.3725 26.8984C58.6558 41.1564 141.659 43.1867 128.248 5.48254C127.911 4.53766 127.085 2.2403 125.938 2.0095C124.714 1.76297 121.929 6.39448 121.627 6.82375C100.965 36.1863 95.2641 73.5992 74.5923 102.644C63.7045 117.942 14.7891 145.678 5.55986 113.481C-17.5939 32.705 78.7483 76.0672 105.741 67.4678C119.757 63.0021 125.297 50.6825 132.831 39.1622C135.218 35.5126 137.628 24.6153 140.043 28.2467C144.771 35.3581 119.642 69.8761 115.559 78.4692C110.959 88.1482 129.228 46.7461 136.796 54.3333C146.229 63.7897 128.236 82.7359 153.367 61.6804C157.634 58.1059 166.582 46.4029 161.033 46.8455C153.977 47.4085 141.565 67.0198 151.685 70.0327C161.531 72.9635 176.039 38.7196 174.012 48.7901C173.009 53.769 168.343 67.3695 175.978 68.9069C186.537 71.0328 191.574 35.8659 197.537 44.8359C240.356 109.24 81.7126 283.324 50.2184 167.261C25.2159 75.1229 240.563 89.2082 268.88 137.08"
 						stroke="currentColor"
@@ -119,8 +123,8 @@ export function JheyProfile() {
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						pathLength="1"
-						style={{}}
-					/>
+						style={{ '--path-speed': 0.831875 } as React.CSSProperties}
+					></path>
 					<path
 						className="ear"
 						d="M187.183 101.246C182.107 82.5407 155.739 77.9455 151.5 99"
@@ -130,8 +134,13 @@ export function JheyProfile() {
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						pathLength="1"
-						style={{}}
-					/>
+						style={
+							{
+								'--path-speed': 0.03187,
+								'--path-delay': 0.831875,
+							} as React.CSSProperties
+						}
+					></path>
 					<path
 						className="ear"
 						d="M117.998 100.704C117.998 91.1516 103.912 87.3662 96.5585 89.3717C84.7816 92.5836 80.6315 99.053 80.6315 110.505"
@@ -141,8 +150,13 @@ export function JheyProfile() {
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						pathLength="1"
-						style={{}}
-					/>
+						style={
+							{
+								'--path-speed': 0.035625,
+								'--path-delay': 0.86375,
+							} as React.CSSProperties
+						}
+					></path>
 					<path
 						className="eye"
 						d="M170.025 108.347C168.627 105.551 162.781 110.631 165.494 114.577C168.207 118.523 173.936 114.091 171.643 109.965C171.035 108.871 168.547 107.832 167.355 108.428"
@@ -152,8 +166,13 @@ export function JheyProfile() {
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						pathLength="1"
-						style={{}}
-					/>
+						style={
+							{
+								'--path-speed': 0.0175,
+								'--path-delay': 0.899375,
+							} as React.CSSProperties
+						}
+					></path>
 					<path
 						className="eye"
 						d="M102.952 112.797C97.2672 112.797 96.7371 120.527 102.224 119.917C108.363 119.235 105.409 110.012 100.363 113.04"
@@ -163,8 +182,13 @@ export function JheyProfile() {
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						pathLength="1"
-						style={{}}
-					/>
+						style={
+							{
+								'--path-speed': 0.01625,
+								'--path-delay': 0.916875,
+							} as React.CSSProperties
+						}
+					></path>
 					<path
 						className="nose"
 						d="M144.745 123.82C146.652 122.562 141.479 121.621 140.561 121.402C136.485 120.429 124.736 118.793 124.42 125.721C123.695 141.628 160.767 131.457 140.492 121.735"
@@ -174,8 +198,13 @@ export function JheyProfile() {
 						strokeLinecap="round"
 						strokeLinejoin="round"
 						pathLength="1"
-						style={{}}
-					/>
+						style={
+							{
+								'--path-speed': 0.04,
+								'--path-delay': 0.933125,
+							} as React.CSSProperties
+						}
+					></path>
 				</svg>
 			</div>
 		</section>
diff --git a/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx b/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
index 11a5d1a23..ae5b0b7d1 100644
--- a/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
+++ b/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
@@ -94,81 +94,40 @@ export const PrimaryNewsletterCta: React.FC<
 			aria-label="Newsletter sign-up"
 			className={cn('', className)}
 		>
-			{children ? (
-				children
-			) : (
-				<div
-					className={cn(
-						'relative z-10 flex max-w-3xl flex-col items-center justify-center pb-5 pt-10 sm:pb-10',
-						{
-							'opacity-85 blur-sm': subscriber && shouldHideTitleWhenSubscribed,
-						},
-					)}
-				>
-					{withImage && (
-						<CldImage
-							src="https://res.cloudinary.com/epic-web/image/upload/v1744279600/epicdev.ai/beacon_2x.png"
-							width={281 * 1.2}
-							height={206 * 1.2}
-							alt=""
-							aria-hidden="true"
-							className="mx-auto mb-5"
-						/>
-					)}
-					<h2 className="sm:fluid-2xl fluid-xl text-balance text-center font-bold">
-						{title}
-					</h2>
-					<h3 className="text-balance pt-5 text-center font-sans text-base font-normal opacity-90 sm:text-lg lg:text-xl">
-						{byline}
-					</h3>
-				</div>
-			)}
-
-			<div className="relative flex w-full items-center justify-center py-5">
-				{subscriber && (
-					<div className="absolute z-10 flex flex-col text-center">
-						<p className="font-semibold">
-							{subscribedTitle || "You're subscribed, thanks!"}
-						</p>
-						{resource && (
-							<p className="[&_a]:text-primary text-center font-sans font-normal">
-								{subscribedSubtitle ||
-									(session?.user
-										? common['newsletter-subscribed-logged-in']({
-												resource,
-											})
-										: common['newsletter-subscribed-logged-out']({
-												resource,
-											}))}
-							</p>
-						)}
-					</div>
-				)}
-				<div
-					className={cn('flex w-full flex-col items-center', {
-						'pointer-events-none select-none opacity-75 blur-sm transition ease-in-out':
-							subscriber && !formId,
-					})}
-				>
-					<SubscribeToConvertkitForm
-						onSuccess={onSuccess ? onSuccess : handleOnSuccess}
-						actionLabel={actionLabel}
-						formId={formId}
-						className="[&_input]:border-foreground/40 relative z-10 [&_input]:h-16"
-						onEmailFocus={handleEmailFocus}
-						onEmailBlur={handleEmailBlur}
-						showMascot={showMascot}
-					/>
-					{!formId && (
-						<p
-							data-nospam=""
-							className="text-muted-foreground inline-flex items-center pt-8 text-xs opacity-75 sm:text-sm"
-						>
-							<ShieldCheckIcon className="mr-2 h-4 w-4" /> I respect your
-							privacy. Unsubscribe at any time.
+			{subscriber && (
+				<div className="absolute z-10 flex flex-col text-center">
+					<p className="font-semibold">
+						{subscribedTitle || "You're subscribed, thanks!"}
+					</p>
+					{resource && (
+						<p className="[&_a]:text-primary text-center font-sans font-normal">
+							{subscribedSubtitle ||
+								(session?.user
+									? common['newsletter-subscribed-logged-in']({
+											resource,
+										})
+									: common['newsletter-subscribed-logged-out']({
+											resource,
+										}))}
 						</p>
 					)}
 				</div>
+			)}
+			<div
+				className={cn('flex w-full flex-col items-center', {
+					'pointer-events-none select-none opacity-75 blur-sm transition ease-in-out':
+						subscriber && !formId,
+				})}
+			>
+				<SubscribeToConvertkitForm
+					onSuccess={onSuccess ? onSuccess : handleOnSuccess}
+					actionLabel={actionLabel}
+					formId={formId}
+					className="[&_input]:border-foreground/40 relative z-10 w-full [&_input]:flex-1"
+					onEmailFocus={handleEmailFocus}
+					onEmailBlur={handleEmailBlur}
+					showMascot={showMascot}
+				/>
 			</div>
 		</section>
 	)
diff --git a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
index 405a0ffdd..be542de63 100644
--- a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
@@ -3,7 +3,9 @@ import Spinner from '@/components/spinner'
 import { useConvertkitForm } from '@/hooks/use-convertkit-form'
 import { type Subscriber } from '@/schemas/subscriber'
 import { api } from '@/trpc/react'
+import { cn } from '@/utils/cn'
 import { CK_SUBSCRIBER_KEY } from '@skillrecordings/config'
+import { LockIcon, ShieldCheckIcon } from 'lucide-react'
 import queryString from 'query-string'
 import * as Yup from 'yup'
 
@@ -115,157 +117,332 @@ export const SubscribeToConvertkitForm: React.FC<
 		validateOnChange,
 	})
 
+	console.info({ status, values })
+
 	return (
-		<form
-			data-sr-convertkit-subscribe-form={status}
-			onSubmit={handleSubmit}
-			className={className}
-			{...rest}
+		<div
+			data-waitlist-form
+			className="relative mb-24 mt-20 scroll-mt-[calc(var(--header-height)*2)]"
+			id={id}
 		>
-			<div data-sr-fieldset="" className="w-full">
-				<Label
-					data-sr-input-label=""
-					htmlFor={id ? `first_name_${id}` : 'first_name'}
+			<div
+				className="[[inert]_svg]:animate-none relative"
+				data-waitlist-content=""
+			>
+				<p className="mb-4 text-pretty">
+					You want to build exceptional user interfaces, I want to empower you
+					to do so.
+					<br />
+					<strong className="text-balance font-bold text-[canvasText]">
+						Join the waitlist to learn more and get course launch updates.
+					</strong>
+				</p>
+
+				<form
+					data-sr-convertkit-subscribe-form={status}
+					onSubmit={handleSubmit}
+					className={className}
+					{...rest}
 				>
-					First Name
-				</Label>
-				<Input
-					data-input-with-error={Boolean(
-						touched.first_name && errors.first_name,
-					)}
-					className="h-auto"
-					name="first_name"
-					id={id ? `first_name_${id}` : 'first_name'}
-					onChange={handleChange}
-					placeholder="Preferred name"
-					type="text"
-					defaultValue={values.first_name}
-				/>
-				{validationSchema && touched.first_name && errors.first_name && (
-					<p data-input-error-message>{errors.first_name}</p>
-				)}
-			</div>
-			<div data-sr-fieldset="" className="w-full">
-				<Label data-sr-input-label="" htmlFor={id ? `email_${id}` : 'email'}>
-					Email*
-				</Label>
-				<div className="relative">
-					{showMascot && (
-						<svg
-							className="pointer-events-none absolute -top-12 left-1/2 z-0 w-12 -translate-x-1/2"
-							viewBox="0 0 240 333"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-							aria-hidden="true"
+					<div
+						data-controls
+						className="mb-4 flex w-full flex-wrap items-center justify-end gap-2"
+					>
+						<label
+							className="sr-only"
+							data-sr-input-label=""
+							htmlFor={id ? `first_name_${id}` : 'first_name'}
+						>
+							Preferred name
+						</label>
+						<input
+							autoComplete="off"
+							className={cn(
+								'h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
+								'placeholder:text-sm focus-visible:border-red-400',
+								'text-[canvasText] placeholder:text-gray-400',
+							)}
+							id={id ? `first_name_${id}` : 'first_name'}
+							onChange={handleChange}
+							defaultValue={values.first_name}
+							name="first_name"
+							type="text"
+							placeholder="Your name [optional]"
+						/>
+						<label
+							className="sr-only"
+							data-sr-input-label=""
+							htmlFor={id ? `email_${id}` : 'email'}
 						>
-							<path
-								d="M213.17 108.419c0 5.314.127 11.574.269 18.56.618 30.513 1.518 74.863-6.657 114.572-5.019 24.378-13.419 46.767-27.227 63.031C165.817 320.764 146.633 331 119.678 331c-26.9555 0-46.1392-10.236-59.8774-26.418-13.8078-16.264-22.2078-38.653-27.2266-63.031-8.175-39.709-7.2757-84.059-6.6569-114.572.1417-6.986.2686-13.246.2686-18.56 0-55.6867 41.9903-100.5811 93.4923-100.5811S213.17 52.7323 213.17 108.419Z"
-								fill="#AF7128"
-								stroke="#000"
-								strokeWidth="4"
-							></path>
-							<circle
-								cx="36.8416"
-								cy="36.8416"
-								r="34.8416"
-								fill="#AF7128"
-								stroke="#000"
-								strokeWidth="4"
-							></circle>
-							<circle
-								cx="202.952"
-								cy="36.8416"
-								r="34.8416"
-								fill="#AF7128"
-								stroke="#000"
-								strokeWidth="4"
-							></circle>
-							<circle
-								className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
-								cx="174.19"
-								cy="105.677"
-								r="8.0793"
-								fill="#000"
-							></circle>
-							<circle
-								className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
-								cx="65.604"
-								cy="105.677"
-								r="8.0793"
-								fill="#000"
-							></circle>
-							<path
-								d="M140.689 120.281c0 8.21-9.868 17.451-20.844 17.451-10.977 0-20.845-9.241-20.845-17.451C99 112.07 108.868 108 119.845 108c10.976 0 20.844 4.07 20.844 12.281Z"
-								fill="#000"
-							></path>
-							<path
-								fill="#FF1E1E"
-								d="M75.2366 69.8052h88.3706v13.25H75.2366z"
-							></path>
-							<path
-								fillRule="evenodd"
-								clipRule="evenodd"
-								d="M187.215 28.6207c17.939 14.394 28.018 37.1482 28.018 57.5045h-61.648c-.087-13.6688-11.194-24.7227-24.883-24.7227h-18.56c-13.6891 0-24.7966 11.0539-24.8835 24.7227H23.9148c0-20.3563 10.0783-43.1105 28.0178-57.5045C69.8722 14.2266 94.2034 6.1401 119.574 6.1401c25.37 0 49.701 8.0865 67.641 22.4806Z"
-								fill="#000"
-							></path>
-						</svg>
-					)}
-					<Input
-						data-input-with-error={Boolean(touched.email && errors.email)}
-						className="relative z-10 h-auto"
-						name="email"
-						id={id ? `email_${id}` : 'email'}
-						onChange={handleChange}
-						placeholder="you@example.com"
-						type="email"
-						required
-						defaultValue={values.email}
-						onFocus={onEmailFocus}
-						onBlur={onEmailBlur}
-					/>
-				</div>
-				{validationSchema && touched.email && errors.email && (
-					<p data-input-error-message>{errors.email}</p>
+							Email Address
+						</label>
+						<div
+							className={cn(
+								'relative flex flex-1 focus-within:has-[:invalid:not(:placeholder-shown)]:[&_div]:[--show:1]',
+							)}
+						>
+							<div
+								className={cn(
+									'pointer-events-none absolute inset-0 -translate-y-full [clip-path:inset(-200%_0_0px_0)]',
+									'[container-type:inline-size]',
+								)}
+							>
+								<svg
+									className={cn(
+										'absolute bottom-0 left-[55%] -z-20 w-12 translate-y-full',
+										'motion-safe:[translate:0_calc(100%+(var(--show,0)*-50%))]',
+										'delay-200 ease-out motion-safe:transition-transform',
+									)}
+									aria-hidden="true"
+									viewBox="0 0 240 333"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M213.17 108.419c0 5.314.127 11.574.269 18.56.618 30.513 1.518 74.863-6.657 114.572-5.019 24.378-13.419 46.767-27.227 63.031C165.817 320.764 146.633 331 119.678 331c-26.9555 0-46.1392-10.236-59.8774-26.418-13.8078-16.264-22.2078-38.653-27.2266-63.031-8.175-39.709-7.2757-84.059-6.6569-114.572.1417-6.986.2686-13.246.2686-18.56 0-55.6867 41.9903-100.5811 93.4923-100.5811S213.17 52.7323 213.17 108.419Z"
+										fill="#AF7128"
+										stroke="#000"
+										strokeWidth="4"
+									></path>
+									<circle
+										cx="36.8416"
+										cy="36.8416"
+										r="34.8416"
+										fill="#AF7128"
+										stroke="#000"
+										strokeWidth="4"
+									></circle>
+									<circle
+										cx="202.952"
+										cy="36.8416"
+										r="34.8416"
+										fill="#AF7128"
+										stroke="#000"
+										strokeWidth="4"
+									></circle>
+									<circle
+										className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
+										cx="174.19"
+										cy="105.677"
+										r="8.0793"
+										fill="#000"
+									></circle>
+									<circle
+										className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
+										cx="65.604"
+										cy="105.677"
+										r="8.0793"
+										fill="#000"
+									></circle>
+									<path
+										d="M140.689 120.281c0 8.21-9.868 17.451-20.844 17.451-10.977 0-20.845-9.241-20.845-17.451C99 112.07 108.868 108 119.845 108c10.976 0 20.844 4.07 20.844 12.281Z"
+										fill="#000"
+									></path>
+									<path
+										fill="#FF1E1E"
+										d="M75.2366 69.8052h88.3706v13.25H75.2366z"
+									></path>
+									<path
+										fillRule="evenodd"
+										clipRule="evenodd"
+										d="M187.215 28.6207c17.939 14.394 28.018 37.1482 28.018 57.5045h-61.648c-.087-13.6688-11.194-24.7227-24.883-24.7227h-18.56c-13.6891 0-24.7966 11.0539-24.8835 24.7227H23.9148c0-20.3563 10.0783-43.1105 28.0178-57.5045C69.8722 14.2266 94.2034 6.1401 119.574 6.1401c25.37 0 49.701 8.0865 67.641 22.4806Z"
+										fill="#000"
+									></path>
+								</svg>
+							</div>
+							<input
+								autoComplete="off"
+								className={cn(
+									'h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
+									'placeholder:text-sm focus-visible:border-red-400',
+									'text-[canvasText] placeholder:text-gray-400',
+								)}
+								name="email"
+								type="email"
+								placeholder="Email"
+								required
+								id={id ? `email_${id}` : 'email'}
+								onChange={handleChange}
+								defaultValue={values.email}
+								onFocus={onEmailFocus}
+								onBlur={onEmailBlur}
+							/>
+						</div>
+						<button
+							aria-label={isSubmitting ? 'Submitting...' : 'Join'}
+							aria-disabled={isSubmitting}
+							className={cn(
+								"[[aria-label='Done']]:bg-green-600 group overflow-hidden",
+								'relative rounded-md bg-red-600 bg-gradient-to-b from-white/10 text-gray-100',
+								'shadow-inner shadow-gray-100/50 motion-safe:transition-all',
+								'grid h-9 cursor-pointer place-items-center active:scale-[0.98]',
+								"after:absolute after:inset-0 after:rounded-md after:content-['']",
+								'after:bg-gradient-to-b after:from-white/40 after:to-white/10',
+								'after:opacity-70 hover:after:opacity-100 after:motion-safe:transition-all',
+							)}
+							type="submit"
+						>
+							<span
+								className={cn(
+									'motion-safe:transition-all',
+									"group-[[aria-label='Submitting...']]:translate-x-full",
+									"group-[[aria-label='Done']]:translate-x-[200%]",
+									'relative h-full w-full',
+								)}
+							>
+								<span
+									className={cn(
+										'text-shadow-lg grid h-full place-items-center px-4 py-1 [text-shadow:0_1px_1px_var(--color-red-800)]',
+										"h-full group-[[aria-label='Submitting...']]:opacity-0",
+									)}
+								>
+									Join
+								</span>
+								<span
+									className={cn(
+										'absolute inset-0 grid h-full w-full -translate-x-full place-items-center',
+										'opacity-0 motion-safe:transition-opacity',
+										"group-[[aria-label='Submitting...']]:opacity-100",
+									)}
+								>
+									<svg
+										viewBox="0 0 24 24"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+										stroke="currentColor"
+										aria-hidden="true"
+										className={cn(
+											'animate-spin overflow-visible [animation-play-state:paused] [animation-timing-function:steps(8)]',
+											"aspect-square w-6 motion-safe:group-[[aria-label='Submitting...']]:[animation-play-state:running]",
+										)}
+									>
+										<path
+											d="M12 18V22"
+											strokeWidth="2"
+											strokeOpacity="1"
+											strokeLinecap="round"
+										></path>
+										<path
+											d="M19.0703 19.0703L16.2419 16.2419"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.875"
+										></path>
+										<path
+											d="M6 12L2 12"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.25"
+										></path>
+										<path
+											d="M12 2V6"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.5"
+										></path>
+										<path
+											d="M22 12L18 12"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.75"
+										></path>
+										<path
+											d="M7.75781 7.75781L4.92939 4.92939"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.375"
+										></path>
+										<path
+											d="M16.2422 7.75781L19.0706 4.92939"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.625"
+										></path>
+										<path
+											d="M4.92969 19.0703L7.75811 16.2419"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeOpacity="0.125"
+										></path>
+									</svg>
+								</span>
+								<span
+									className={cn(
+										'absolute inset-0 grid h-full w-full -translate-x-[200%] place-items-center',
+										'opacity-0 motion-safe:transition-opacity',
+										"group-[[aria-label='Done']]:opacity-100",
+									)}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										aria-hidden="true"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										strokeWidth="2"
+										strokeLinecap="round"
+										strokeLinejoin="round"
+									>
+										<path d="M20 6 9 17l-5-5"></path>
+									</svg>
+								</span>
+							</span>
+						</button>
+					</div>
+				</form>
+				{!formId && (
+					<p
+						data-nospam=""
+						className="text-muted-foreground mx-auto inline-flex w-full items-center justify-center text-center text-xs opacity-75 sm:text-sm"
+					>
+						<ShieldCheckIcon className="mr-2 h-4 w-4" /> I respect your privacy.
+						Unsubscribe at any time.
+					</p>
 				)}
 			</div>
-			{submitButtonElem ? (
-				React.cloneElement(submitButtonElem, {
-					type: 'submit',
-					disabled: Boolean(isSubmitting),
-					children: isSubmitting ? (
-						<Spinner className="h-5 w-5" />
-					) : (
-						submitButtonElem.props.children
-					),
-				})
-			) : (
-				<Button
-					variant="default"
-					size="lg"
-					disabled={
-						(touched.first_name && errors.first_name) ||
-						(touched.email && errors.email) ||
-						Boolean(isSubmitting)
-					}
-					type="submit"
-					formNoValidate={Boolean(validationSchema)}
-				>
-					{isSubmitting ? <Spinner className="h-5 w-5" /> : actionLabel}
-				</Button>
-			)}
-			{status === 'success' &&
-				(React.isValidElement(successMessage) ? (
-					successMessage
-				) : (
-					<p>{successMessage}</p>
-				))}
-			{status === 'error' &&
-				(React.isValidElement(errorMessage) ? (
-					errorMessage
-				) : (
-					<p>{errorMessage}</p>
-				))}
-		</form>
+			<output
+				className={cn(
+					'absolute left-0 right-0 top-full text-center text-sm outline-none',
+					'data-[status=error]:text-red-400 [&_p]:text-balance',
+					'opacity-100 blur-none motion-safe:data-[status=error]:transition-all',
+					'not-data-[status=success]:opacity-0 data-[status=error]:opacity-100',
+					'not-data-[status=success]:translate-y-4 data-[status=error]:translate-y-2',
+					'not-data-[status=success]:blur-sm data-[status=error]:blur-none',
+					'data-[status=success]:inset-0 data-[status=success]:grid data-[status=success]:place-items-center',
+					'data-[status=success]:[&_p]:rounded-md data-[status=success]:[&_p]:p-2',
+					'data-[status=success]:[&_p]:bg-green-200/10 data-[status=success]:[&_p]:text-green-800',
+					'data-[status=success]:[&_p]:border data-[status=success]:[&_p]:border-green-800',
+					'dark:data-[status=success]:[&_p]:bg-green-200/10 dark:data-[status=success]:[&_p]:text-green-200',
+					'dark:data-[status=success]:[&_p]:border-green-200',
+					isSubmitting ? 'sr-only' : '',
+				)}
+				data-status={status}
+			>
+				{status === 'error' ? (
+					<p>
+						<strong className="font-[500]">
+							Something went wrong on our end.
+						</strong>
+						<br />
+						Your spot might not be saved — try again or refresh the page.
+					</p>
+				) : null}
+				{isSubmitting ? 'Submitting...' : ''}
+				{status === 'success' ? (
+					<p>
+						<strong className="font-[500]">
+							Thanks${values.first_name ? ` ${values.first_name}` : ''}!
+						</strong>
+						<br />
+						You’re on the waitlist. Please check your email to confirm your
+						spot.
+					</p>
+				) : null}
+			</output>
+			{isSubmitting ? <p className="sr-only">loading...</p> : null}
+		</div>
 	)
 }
 
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index 078f8cb8d..74970f2ef 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -23,7 +23,7 @@
 		--code-editor-layout-height: calc(
 			100vh - var(--nav-height) - var(--command-bar-height) - 30px
 		);
-		--background: 0 0% 93%;
+		--background: 0 0% 98%;
 		--foreground: 240 2% 20%;
 		--card: 0 0% 100%;
 		--card-foreground: 240 2% 20%;
@@ -55,12 +55,26 @@
 		--content: 600px;
 		--gutter: 1.5rem;
 		--font-size-min: 14;
-		--font-size-max: 20;
+		--font-size-max: 18;
 		--font-ratio-min: 1.2;
 		--font-ratio-max: 1.33;
 		--font-width-min: 375;
 		--font-width-max: 1500;
 		--breakpoint-lg: 968px;
+		--color-red-400: oklch(0.704 0.191 22.216);
+		--color-red-500: oklch(0.637 0.237 25.331);
+		--color-red-800: oklch(0.444 0.177 26.899);
+		--color-green-200: oklch(0.925 0.084 155.995);
+		--color-green-600: oklch(0.627 0.194 149.214);
+		--color-green-800: oklch(0.448 0.119 151.328);
+		--color-gray-100: oklch(0.967 0.003 264.542);
+		--color-gray-200: oklch(0.928 0.006 264.531);
+		--color-gray-300: oklch(0.872 0.01 258.338);
+		--color-gray-400: oklch(0.707 0.022 261.325);
+		--color-gray-500: oklch(0.551 0.027 264.364);
+		--color-gray-800: oklch(0.278 0.033 256.848);
+		--color-gray-900: oklch(0.21 0.034 264.665);
+		--color-white: #fff;
 
 		/* codehike theme */
 		--ch-0: light;
@@ -175,7 +189,8 @@
 	}
 
 	body {
-		@apply bg-background text-foreground selection:bg-primary selection:text-primary-foreground overflow-x-hidden font-normal antialiased;
+		@apply bg-background selection:bg-primary selection:text-primary-foreground overflow-x-hidden font-[300] text-[canvasText] antialiased;
+		color: color-mix(in hsl, canvasText, canvas 40%);
 		font-feature-settings:
 			'rlig' 1,
 			'calt' 1;
@@ -200,10 +215,71 @@
 		z-index: -1;
 	}
 
+	.text-fluid {
+		--fluid-min: calc(
+			var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
+		);
+		--fluid-max: calc(
+			var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
+		);
+		--fluid-preferred: calc(
+			(var(--fluid-max) - var(--fluid-min)) /
+				(var(--font-width-max) - var(--font-width-min))
+		);
+		--fluid-type: clamp(
+			(var(--fluid-min) / 16) * 1rem,
+			((var(--fluid-min) / 16) * 1rem) -
+				(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
+				(var(--fluid-preferred) * var(--variable-unit, 100vi)),
+			(var(--fluid-max) / 16) * 1rem
+		);
+		font-size: var(--fluid-type);
+	}
+	.mask-content {
+		mask-image:
+			linear-gradient(
+				#0000 var(--start),
+				#fff var(--end) calc(100% - var(--header-height)),
+				#0000
+			),
+			linear-gradient(#fff 0 100%);
+		mask-position:
+			0 50%,
+			calc(100vw - var(--gutter)) 0;
+		mask-size: calc(100vw - var(--gutter)) 100%;
+		mask-repeat: no-repeat;
+	}
+
 	html {
 		/* scrollbar-gutter: stable; */
 	}
 
+	:where(a, button):focus-visible {
+		outline: 2px solid var(--color-red-400);
+		outline-offset: 2px;
+	}
+
+	strong {
+		@apply font-[600];
+	}
+
+	::selection {
+		background: var(--color-red-400);
+		color: #fff;
+	}
+
+	html[lang] {
+		color-scheme: light dark;
+		scrollbar-color: light-dark(var(--color-red-400), var(--color-red-500))
+			#0000;
+		scrollbar-width: thin;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.overflow-auto {
+			scroll-behavior: smooth;
+		}
+	}
+
 	html.dark .shiki,
 	html.dark .shiki span {
 		color: var(--shiki-dark) !important;
@@ -234,3 +310,76 @@
 		list-style-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0IDMuMTVMMTMuMyAxLjc1QzcuMjYyIDMuNSA0LjIgNy4zNSA0LjIgNy4zNUwxLjQgNS4yNUwwIDYuNjVMNC4yIDEyLjI1QzcuNDM3IDYuMjEzIDE0IDMuMTUgMTQgMy4xNVoiIGZpbGw9IiM3QzNCRUQiLz4KPC9zdmc+Cg==');
 	}
 }
+
+@layer signature {
+	.sig {
+		--duration: 1.4;
+		--delay: 0.2;
+		--base-delay: calc((var(--duration) + var(--delay)));
+		--natty-delay: 0.973125;
+		width: 160px;
+		rotate: 10deg;
+		path {
+			--end: 1.025;
+			stroke-dasharray: var(--end);
+			stroke-dashoffset: var(--end);
+			animation: draw calc(var(--path-speed) * 1s)
+				calc((var(--base-delay) * 1s) + var(--path-delay, 0) * 1s) ease-in
+				forwards;
+		}
+
+		:is(.eye, .nose) {
+			fill: hsl(0 0% 0% / 0);
+			animation:
+				draw calc(var(--path-speed) * 1s)
+					calc((var(--base-delay) * 1s) + var(--path-delay, 0) * 1s) ease-in
+					forwards,
+				fill 0.5s calc((var(--base-delay) * 1s) + var(--natty-delay, 0) * 1s)
+					forwards;
+		}
+		.eye {
+			transform-box: fill-box;
+			transform-origin: 50% 50%;
+			animation:
+				draw calc(var(--path-speed) * 1s)
+					calc((var(--base-delay) * 1s) + var(--path-delay, 0) * 1s) ease-in
+					forwards,
+				fill 0.5s calc((var(--base-delay) * 1s) + var(--natty-delay, 0) * 1s)
+					forwards,
+				blink 6s calc((var(--base-delay) * 1s) + var(--natty-delay, 0) * 1s)
+					infinite;
+		}
+	}
+
+	@keyframes fill {
+		to {
+			fill: currentColor;
+		}
+	}
+
+	@keyframes draw {
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+
+	@keyframes blink {
+		0%,
+		46%,
+		48%,
+		50%,
+		100% {
+			transform: scaleY(1);
+		}
+		47%,
+		49% {
+			transform: scaleY(0.1);
+		}
+	}
+}
+
+@keyframes move {
+	50% {
+		transform: translate(calc(100cqi - 100%), 0);
+	}
+}
diff --git a/apps/craft-of-ui/src/styles/primary-newsletter-cta.css b/apps/craft-of-ui/src/styles/primary-newsletter-cta.css
index 6a7ebe03c..cd86887ae 100644
--- a/apps/craft-of-ui/src/styles/primary-newsletter-cta.css
+++ b/apps/craft-of-ui/src/styles/primary-newsletter-cta.css
@@ -5,7 +5,7 @@
 		@apply mb-0;
 	}
 	input {
-		@apply placeholder:text-muted-foreground text-foreground relative flex p-5 text-base placeholder:opacity-75;
+		@apply placeholder:text-muted-foreground text-foreground relative flex text-base placeholder:opacity-75;
 		@apply before:absolute before:left-0 before:top-0 before:h-px before:w-full before:bg-gradient-to-r before:from-transparent before:via-white before:to-transparent;
 	}
 	[data-sr-input-label] {

From 048ba3f30fabd4fa506cfa6a264443219e8fab97 Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Thu, 24 Jul 2025 17:13:07 -0500
Subject: [PATCH 03/10] feat: fix differences between .dev and .com and add
 beard for confirming subscriber with inline message

---
 .../src/components/jhey-profile.tsx           |  32 +-
 .../src/components/primary-newsletter-cta.tsx |   5 +-
 .../convertkit/convertkit-subscribe-form.tsx  | 626 ++++++++++--------
 apps/craft-of-ui/src/convertkit/index.ts      |   6 +-
 apps/craft-of-ui/src/styles/globals.css       |  25 +-
 5 files changed, 391 insertions(+), 303 deletions(-)

diff --git a/apps/craft-of-ui/src/components/jhey-profile.tsx b/apps/craft-of-ui/src/components/jhey-profile.tsx
index 86c0f4d7d..fa2eabb83 100644
--- a/apps/craft-of-ui/src/components/jhey-profile.tsx
+++ b/apps/craft-of-ui/src/components/jhey-profile.tsx
@@ -8,11 +8,11 @@ export function JheyProfile() {
 			<h2 className="text-fluid font-serif">Hey – I'm Jhey Tompkins 🤙</h2>
 			<div className="clearfix">
 				<Image
-					className="float-none mb-4 mr-6 h-[180px] w-[180px] rounded-lg bg-gray-500 object-cover sm:float-left"
+					className="float-none mb-4 mr-6 h-[220px] w-[220px] rounded-lg bg-gray-500 object-cover sm:float-left"
 					src="/headshot.jpeg"
 					alt="Jhey on stage at All Day Hey"
-					width={180}
-					height={180}
+					width={220}
+					height={220}
 					priority
 				/>
 				<div
@@ -21,18 +21,18 @@ export function JheyProfile() {
 				[&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6"
 				>
 					<p>
-						I'm a design engineer who loves making the web feel magical whilst
+						I’m a web developer who loves making the web feel magical whilst
 						showing others how to do the same.
 					</p>
 					<p>
 						Currently, I'm a{' '}
 						<Link
-							href="https://vercel.com/design"
+							href="https://www.shopify.com/online"
 							className="text-red-400 hover:underline"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							Design Engineer at Vercel
+							Staff Design Engineer at Shopify
 						</Link>
 						. Before that I worked in{' '}
 						<Link
@@ -52,8 +52,8 @@ export function JheyProfile() {
 						>
 							CSS and UI
 						</Link>{' '}
-						team on Chrome. Along the way, I've built for brands like Nike,
-						Uber, Nearform, and Monzo.
+						team on Chrome. I was also a Design Engineer at Vercel. Along the
+						way, I’ve built for brands like Nike, Uber, Nearform, and Monzo.
 					</p>
 					<p>
 						Over the years I've shared thousands of demos with the community
@@ -66,7 +66,7 @@ export function JheyProfile() {
 						>
 							following on X
 						</Link>{' '}
-						of over 120,000 people and 18,000 on{' '}
+						of over 130,000 people and 19,000 on{' '}
 						<Link
 							href="https://codepen.io/jh3y"
 							className="text-red-400 hover:underline"
@@ -75,8 +75,16 @@ export function JheyProfile() {
 						>
 							CodePen
 						</Link>{' '}
-						(of which many have asked for this course). It's given me the
-						opportunity to{' '}
+						(of which many have asked for this course). becoming the{' '}
+						<Link
+							href="https://x.com/jh3yy/status/1937200950567195036"
+							className="text-red-400 hover:underline"
+							target="_blank"
+							rel="noopener noreferrer"
+						>
+							"Most Hearted"
+						</Link>{' '}
+						of all time. It's given me the opportunity to{' '}
 						<Link
 							href="https://youtu.be/loKm4JcT4U4"
 							className="text-red-400 hover:underline"
@@ -112,7 +120,7 @@ export function JheyProfile() {
 					className="sig text-[canvasText]"
 					viewBox="0 0 271 209"
 					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
+					xmlns="http://www.w3.org/2200/svg"
 				>
 					<title>Signature</title>
 					<path
diff --git a/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx b/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
index ae5b0b7d1..5631c20d2 100644
--- a/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
+++ b/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
@@ -5,7 +5,7 @@ import { useCallback, useState } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import { redirectUrlBuilder, SubscribeToConvertkitForm } from '@/convertkit'
+import { SubscribeToConvertkitForm } from '@/convertkit'
 import { Subscriber } from '@/schemas/subscriber'
 import { api } from '@/trpc/react'
 import { track } from '@/utils/analytics'
@@ -66,8 +66,7 @@ export const PrimaryNewsletterCta: React.FC<
 	const handleOnSuccess = (subscriber: Subscriber | undefined) => {
 		if (subscriber) {
 			track(trackProps.event as string, trackProps.params)
-			const redirectUrl = redirectUrlBuilder(subscriber, '/confirm')
-			router.push(redirectUrl)
+			// No redirect - let the form handle inline success response
 		}
 	}
 	const { data: session } = useSession()
diff --git a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
index be542de63..2c91e7c57 100644
--- a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Spinner from '@/components/spinner'
 import { useConvertkitForm } from '@/hooks/use-convertkit-form'
 import { type Subscriber } from '@/schemas/subscriber'
@@ -119,12 +119,125 @@ export const SubscribeToConvertkitForm: React.FC<
 
 	console.info({ status, values })
 
+	const [showBear, setShowBear] = useState(false)
+
+	useEffect(() => {
+		if (status === 'success') {
+			setShowBear(true)
+		}
+	}, [status])
+
 	return (
 		<div
 			data-waitlist-form
-			className="relative mb-24 mt-20 scroll-mt-[calc(var(--header-height)*2)]"
+			className="relative mb-6 mt-6 scroll-mt-[calc(var(--header-height)*2)]"
 			id={id}
 		>
+			{/* Bear with balloon animation on success */}
+			{status === 'success' && showBear && (
+				<div
+					data-bear-cave
+					className="pointer-events-none fixed inset-0 z-[100] mx-auto w-[600px] max-w-[calc(100vw-2rem)] overflow-visible"
+				>
+					<div
+						aria-hidden="true"
+						className={cn(
+							'absolute left-1/2 w-20 -translate-x-1/2 drop-shadow-lg',
+							status === 'success'
+								? 'animate-bear-float-up'
+								: 'translate-y-full',
+						)}
+						data-bear-template
+						style={{ bottom: 0 }}
+					>
+						<svg
+							className="overflow-visible"
+							aria-hidden="true"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 478 931"
+						>
+							<rect
+								width="115"
+								height="52"
+								x="294.5"
+								y="872.5"
+								fill="#AF7128"
+								stroke="#000"
+								strokeWidth="6"
+								rx="26"
+								transform="rotate(-90 294.5 872.5)"
+							></rect>
+							<path
+								d="M294.5 783.5V846.5C294.5 860.859 306.141 872.5 320.5 872.5C334.859 872.5 346.5 860.859 346.5 846.5V783.5C346.5 769.141 334.859 757.5 320.5 757.5C306.141 757.5 294.5 769.141 294.5 783.5Z"
+								fill="#AF7128"
+								stroke="black"
+							/>
+							<path
+								d="M318.674 859.205C318.674 857.548 317.331 856.205 315.674 856.205C314.017 856.205 312.674 857.548 312.674 859.205H318.674ZM318.674 871.205V859.205H312.674V871.205H318.674ZM331.34 859.205C331.34 857.548 329.996 856.205 328.34 856.205C326.683 856.205 325.34 857.548 325.34 859.205H331.34ZM331.34 871.205V859.205H325.34V871.205H331.34Z"
+								fill="black"
+							/>
+							<path
+								d="M272.653 584.433C264.081 570.25 265.905 551.554 278.132 539.327C292.52 524.94 315.863 524.957 330.272 539.365C340.425 549.518 343.432 564.107 339.289 576.874C352.36 580.791 364.679 587.914 375.007 598.243L389.17 612.405C399.452 622.688 406.558 634.942 410.486 647.947C423.23 643.849 437.773 646.866 447.901 656.995C462.31 671.403 462.327 694.747 447.939 709.135C435.761 721.313 417.166 723.171 403.005 714.716C399.332 721.152 394.75 727.21 389.258 732.701L342.193 779.767L264.61 857.35C262.633 859.327 260.887 861.521 259.404 863.891L243.643 889.088C240.437 894.213 236.893 899.552 231.259 901.743C223.369 904.811 214.061 903.155 207.684 896.778L194.569 884.931L187.165 878.072L178.16 868.832C169.556 860.228 172.326 848.624 177.145 838.223L190.459 815.162C188.411 813.755 185.748 810.468 183.939 808.659C182.376 807.096 180.889 803.872 179.627 802.128L164.298 823.3C157.786 831.718 144.057 833.152 135.453 824.547L109.25 799.024C100.646 790.42 93.7864 777.972 104.273 762.254L150.623 702.243C149.789 699.54 149.339 696.668 149.337 693.692L149.291 630.646C149.279 614.618 162.263 601.634 178.291 601.646C194.319 601.658 207.321 614.66 207.333 630.688L207.344 645.522L254.711 598.155C260.191 592.675 266.233 588.101 272.653 584.433Z"
+								fill="#AF7128"
+							/>
+							<path
+								d="M342.193 779.767L389.258 732.701C394.75 727.21 399.332 721.152 403.005 714.716C417.166 723.171 435.761 721.313 447.939 709.135C462.327 694.747 462.31 671.403 447.901 656.995C437.773 646.866 423.23 643.849 410.486 647.947C406.558 634.942 399.452 622.688 389.17 612.405L375.007 598.243C364.679 587.914 352.36 580.791 339.289 576.874C343.432 564.107 340.425 549.518 330.272 539.365C315.863 524.957 292.52 524.94 278.132 539.327C265.905 551.554 264.081 570.25 272.653 584.433C266.233 588.101 260.191 592.675 254.711 598.155L207.344 645.522L207.333 630.688C207.321 614.66 194.319 601.658 178.291 601.646C162.263 601.634 149.279 614.618 149.291 630.646L149.337 693.692C149.339 696.668 149.789 699.54 150.623 702.243L104.273 762.254C93.7864 777.972 100.646 790.42 109.25 799.024L135.453 824.547C144.057 833.152 157.786 831.718 164.298 823.3L179.627 802.128C180.889 803.872 182.376 807.096 183.939 808.659C185.748 810.468 188.411 813.755 190.459 815.162L177.145 838.223C172.326 848.624 169.556 860.228 178.16 868.832L187.165 878.072L194.569 884.931L207.684 896.778C214.061 903.155 223.369 904.811 231.259 901.743C236.893 899.552 240.437 894.213 243.643 889.088L259.404 863.891C260.887 861.521 262.633 859.327 264.61 857.35L304.425 817.535"
+								stroke="black"
+							/>
+							<path
+								d="M178.783 616.187C178.784 617.844 180.128 619.188 181.785 619.189C183.442 619.191 184.784 617.848 184.783 616.192L178.783 616.187ZM178.774 604.178L178.783 616.187L184.783 616.192L184.774 604.183L178.774 604.178ZM166.676 616.178C166.677 617.835 168.021 619.179 169.678 619.181C171.335 619.182 172.677 617.84 172.676 616.183L166.676 616.178ZM166.667 604.17L166.676 616.178L172.676 616.183L172.667 604.174L166.667 604.17Z"
+								fill="black"
+							/>
+							<path
+								d="M308.738 613.92L371.317 676.499L361.948 685.868L299.369 623.289L308.738 613.92Z"
+								fill="#F0C3C9"
+							/>
+							<path
+								d="M417.156 664.094C419.682 686.976 410.729 710.203 396.335 724.597L352.68 680.942C362.284 671.215 362.246 655.545 352.566 645.865L339.372 632.671C329.692 622.991 314.022 622.953 304.295 632.557L260.855 589.117C275.249 574.723 298.476 565.77 321.358 568.296C344.239 570.821 367.187 582.333 385.153 600.299C403.119 618.265 414.631 641.213 417.156 664.094Z"
+								fill="black"
+							/>
+							<path
+								d="M343.383 719.973C346.543 723.133 351.662 723.136 354.817 719.981C357.972 716.826 357.969 711.707 354.809 708.547C351.649 705.387 346.53 705.383 343.375 708.539C340.22 711.694 340.223 716.813 343.383 719.973Z"
+								fill="black"
+							/>
+							<path
+								d="M266.489 643.079C269.649 646.239 274.768 646.242 277.923 643.087C281.078 639.932 281.075 634.813 277.915 631.653C274.755 628.493 269.636 628.489 266.481 631.645C263.325 634.8 263.329 639.919 266.489 643.079Z"
+								fill="black"
+							/>
+							<path
+								d="M315.046 700.863C309.241 706.669 295.719 706.215 287.946 698.442C280.173 690.669 279.719 677.147 285.525 671.341C291.33 665.536 301.196 669.646 308.969 677.419C316.742 685.192 320.852 695.058 315.046 700.863Z"
+								fill="black"
+							/>
+							<path
+								d="M197.373 866.873L188.888 875.358M214.369 883.869L205.883 892.354M124.435 793.935L115.95 802.42M141.43 810.93L132.945 819.415"
+								stroke="black"
+							/>
+							<path d="M193.5 732.5L188.5 356.5" stroke="black" />
+							<path
+								d="M188.5 353.5C281.836 353.5 357.5 277.836 357.5 184.5C357.5 91.1639 281.836 15.5 188.5 15.5C95.1639 15.5 19.5 91.1639 19.5 184.5C19.5 277.836 95.1639 353.5 188.5 353.5Z"
+								fill="#F0C3C9"
+								stroke="black"
+							/>
+							<path
+								d="M151.119 53.7383C124.612 61.3158 101.033 76.7706 83.5092 98.054C65.9853 119.337 55.3436 145.443 52.9946 172.912"
+								fill="#F0C3C9"
+							/>
+							<path
+								d="M151.119 53.7383C124.612 61.3158 101.033 76.7706 83.5092 98.054C65.9853 119.337 55.3436 145.443 52.9946 172.912"
+								stroke="white"
+							/>
+							<path
+								d="M172.5 355.5H204L213.5 375.5H163.5L172.5 355.5Z"
+								fill="#F0C3C9"
+								stroke="black"
+							/>
+							<path d="M147 668L209 626" stroke="black" />
+						</svg>
+					</div>
+				</div>
+			)}
+			{/* Remove the old bear container that was causing the duplicate */}
 			<div
 				className="[[inert]_svg]:animate-none relative"
 				data-waitlist-content=""
@@ -137,119 +250,25 @@ export const SubscribeToConvertkitForm: React.FC<
 						Join the waitlist to learn more and get course launch updates.
 					</strong>
 				</p>
-
-				<form
-					data-sr-convertkit-subscribe-form={status}
-					onSubmit={handleSubmit}
-					className={className}
-					{...rest}
-				>
-					<div
-						data-controls
-						className="mb-4 flex w-full flex-wrap items-center justify-end gap-2"
+				{/* Hide form on success */}
+				{status !== 'success' && (
+					<form
+						data-sr-convertkit-subscribe-form={status}
+						onSubmit={handleSubmit}
+						className={className}
+						{...rest}
 					>
-						<label
-							className="sr-only"
-							data-sr-input-label=""
-							htmlFor={id ? `first_name_${id}` : 'first_name'}
-						>
-							Preferred name
-						</label>
-						<input
-							autoComplete="off"
-							className={cn(
-								'h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
-								'placeholder:text-sm focus-visible:border-red-400',
-								'text-[canvasText] placeholder:text-gray-400',
-							)}
-							id={id ? `first_name_${id}` : 'first_name'}
-							onChange={handleChange}
-							defaultValue={values.first_name}
-							name="first_name"
-							type="text"
-							placeholder="Your name [optional]"
-						/>
-						<label
-							className="sr-only"
-							data-sr-input-label=""
-							htmlFor={id ? `email_${id}` : 'email'}
-						>
-							Email Address
-						</label>
 						<div
-							className={cn(
-								'relative flex flex-1 focus-within:has-[:invalid:not(:placeholder-shown)]:[&_div]:[--show:1]',
-							)}
+							data-controls
+							className="mb-4 flex w-full flex-wrap items-center justify-end gap-2"
 						>
-							<div
-								className={cn(
-									'pointer-events-none absolute inset-0 -translate-y-full [clip-path:inset(-200%_0_0px_0)]',
-									'[container-type:inline-size]',
-								)}
+							<label
+								className="sr-only"
+								data-sr-input-label=""
+								htmlFor={id ? `first_name_${id}` : 'first_name'}
 							>
-								<svg
-									className={cn(
-										'absolute bottom-0 left-[55%] -z-20 w-12 translate-y-full',
-										'motion-safe:[translate:0_calc(100%+(var(--show,0)*-50%))]',
-										'delay-200 ease-out motion-safe:transition-transform',
-									)}
-									aria-hidden="true"
-									viewBox="0 0 240 333"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M213.17 108.419c0 5.314.127 11.574.269 18.56.618 30.513 1.518 74.863-6.657 114.572-5.019 24.378-13.419 46.767-27.227 63.031C165.817 320.764 146.633 331 119.678 331c-26.9555 0-46.1392-10.236-59.8774-26.418-13.8078-16.264-22.2078-38.653-27.2266-63.031-8.175-39.709-7.2757-84.059-6.6569-114.572.1417-6.986.2686-13.246.2686-18.56 0-55.6867 41.9903-100.5811 93.4923-100.5811S213.17 52.7323 213.17 108.419Z"
-										fill="#AF7128"
-										stroke="#000"
-										strokeWidth="4"
-									></path>
-									<circle
-										cx="36.8416"
-										cy="36.8416"
-										r="34.8416"
-										fill="#AF7128"
-										stroke="#000"
-										strokeWidth="4"
-									></circle>
-									<circle
-										cx="202.952"
-										cy="36.8416"
-										r="34.8416"
-										fill="#AF7128"
-										stroke="#000"
-										strokeWidth="4"
-									></circle>
-									<circle
-										className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
-										cx="174.19"
-										cy="105.677"
-										r="8.0793"
-										fill="#000"
-									></circle>
-									<circle
-										className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
-										cx="65.604"
-										cy="105.677"
-										r="8.0793"
-										fill="#000"
-									></circle>
-									<path
-										d="M140.689 120.281c0 8.21-9.868 17.451-20.844 17.451-10.977 0-20.845-9.241-20.845-17.451C99 112.07 108.868 108 119.845 108c10.976 0 20.844 4.07 20.844 12.281Z"
-										fill="#000"
-									></path>
-									<path
-										fill="#FF1E1E"
-										d="M75.2366 69.8052h88.3706v13.25H75.2366z"
-									></path>
-									<path
-										fillRule="evenodd"
-										clipRule="evenodd"
-										d="M187.215 28.6207c17.939 14.394 28.018 37.1482 28.018 57.5045h-61.648c-.087-13.6688-11.194-24.7227-24.883-24.7227h-18.56c-13.6891 0-24.7966 11.0539-24.8835 24.7227H23.9148c0-20.3563 10.0783-43.1105 28.0178-57.5045C69.8722 14.2266 94.2034 6.1401 119.574 6.1401c25.37 0 49.701 8.0865 67.641 22.4806Z"
-										fill="#000"
-									></path>
-								</svg>
-							</div>
+								Preferred name
+							</label>
 							<input
 								autoComplete="off"
 								className={cn(
@@ -257,142 +276,242 @@ export const SubscribeToConvertkitForm: React.FC<
 									'placeholder:text-sm focus-visible:border-red-400',
 									'text-[canvasText] placeholder:text-gray-400',
 								)}
-								name="email"
-								type="email"
-								placeholder="Email"
-								required
-								id={id ? `email_${id}` : 'email'}
+								id={id ? `first_name_${id}` : 'first_name'}
 								onChange={handleChange}
-								defaultValue={values.email}
-								onFocus={onEmailFocus}
-								onBlur={onEmailBlur}
+								defaultValue={values.first_name}
+								name="first_name"
+								type="text"
+								placeholder="Your name [optional]"
 							/>
-						</div>
-						<button
-							aria-label={isSubmitting ? 'Submitting...' : 'Join'}
-							aria-disabled={isSubmitting}
-							className={cn(
-								"[[aria-label='Done']]:bg-green-600 group overflow-hidden",
-								'relative rounded-md bg-red-600 bg-gradient-to-b from-white/10 text-gray-100',
-								'shadow-inner shadow-gray-100/50 motion-safe:transition-all',
-								'grid h-9 cursor-pointer place-items-center active:scale-[0.98]',
-								"after:absolute after:inset-0 after:rounded-md after:content-['']",
-								'after:bg-gradient-to-b after:from-white/40 after:to-white/10',
-								'after:opacity-70 hover:after:opacity-100 after:motion-safe:transition-all',
-							)}
-							type="submit"
-						>
-							<span
+							<label
+								className="sr-only"
+								data-sr-input-label=""
+								htmlFor={id ? `email_${id}` : 'email'}
+							>
+								Email Address
+							</label>
+							<div
 								className={cn(
-									'motion-safe:transition-all',
-									"group-[[aria-label='Submitting...']]:translate-x-full",
-									"group-[[aria-label='Done']]:translate-x-[200%]",
-									'relative h-full w-full',
+									'relative flex flex-1 focus-within:has-[:invalid:not(:placeholder-shown)]:[&_div]:[--show:1]',
 								)}
 							>
-								<span
-									className={cn(
-										'text-shadow-lg grid h-full place-items-center px-4 py-1 [text-shadow:0_1px_1px_var(--color-red-800)]',
-										"h-full group-[[aria-label='Submitting...']]:opacity-0",
-									)}
-								>
-									Join
-								</span>
-								<span
-									className={cn(
-										'absolute inset-0 grid h-full w-full -translate-x-full place-items-center',
-										'opacity-0 motion-safe:transition-opacity',
-										"group-[[aria-label='Submitting...']]:opacity-100",
-									)}
-								>
+								{showMascot && (
 									<svg
-										viewBox="0 0 24 24"
+										style={{ left: '70%' }}
+										className="absolute -top-8 -z-10 w-12 delay-200 ease-out motion-safe:transition-transform"
+										viewBox="0 0 240 333"
 										fill="none"
 										xmlns="http://www.w3.org/2000/svg"
-										stroke="currentColor"
 										aria-hidden="true"
-										className={cn(
-											'animate-spin overflow-visible [animation-play-state:paused] [animation-timing-function:steps(8)]',
-											"aspect-square w-6 motion-safe:group-[[aria-label='Submitting...']]:[animation-play-state:running]",
-										)}
 									>
 										<path
-											d="M12 18V22"
-											strokeWidth="2"
-											strokeOpacity="1"
-											strokeLinecap="round"
-										></path>
-										<path
-											d="M19.0703 19.0703L16.2419 16.2419"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.875"
-										></path>
+											d="M213.17 108.419c0 5.314.127 11.574.269 18.56.618 30.513 1.518 74.863-6.657 114.572-5.019 24.378-13.419 46.767-27.227 63.031C165.817 320.764 146.633 331 119.678 331c-26.9555 0-46.1392-10.236-59.8774-26.418-13.8078-16.264-22.2078-38.653-27.2266-63.031-8.175-39.709-7.2757-84.059-6.6569-114.572.1417-6.986.2686-13.246.2686-18.56 0-55.6867 41.9903-100.5811 93.4923-100.5811S213.17 52.7323 213.17 108.419Z"
+											fill="#AF7128"
+											stroke="#000"
+											strokeWidth="4"
+										/>
+										<circle
+											cx="36.8416"
+											cy="36.8416"
+											r="34.8416"
+											fill="#AF7128"
+											stroke="#000"
+											strokeWidth="4"
+										/>
+										<circle
+											cx="202.952"
+											cy="36.8416"
+											r="34.8416"
+											fill="#AF7128"
+											stroke="#000"
+											strokeWidth="4"
+										/>
+										<circle
+											className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
+											cx="174.19"
+											cy="105.677"
+											r="8.0793"
+											fill="#000"
+										/>
+										<circle
+											className="origin-center animate-[blink_8s_infinite] [transform-box:fill-box]"
+											cx="65.604"
+											cy="105.677"
+											r="8.0793"
+											fill="#000"
+										/>
 										<path
-											d="M6 12L2 12"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.25"
-										></path>
-										<path
-											d="M12 2V6"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.5"
-										></path>
-										<path
-											d="M22 12L18 12"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.75"
-										></path>
-										<path
-											d="M7.75781 7.75781L4.92939 4.92939"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.375"
-										></path>
+											d="M140.689 120.281c0 8.21-9.868 17.451-20.844 17.451-10.977 0-20.845-9.241-20.845-17.451C99 112.07 108.868 108 119.845 108c10.976 0 20.844 4.07 20.844 12.281Z"
+											fill="#000"
+										/>
 										<path
-											d="M16.2422 7.75781L19.0706 4.92939"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.625"
-										></path>
+											fill="#FF1E1E"
+											d="M75.2366 69.8052h88.3706v13.25H75.2366z"
+										/>
 										<path
-											d="M4.92969 19.0703L7.75811 16.2419"
-											strokeWidth="2"
-											strokeLinecap="round"
-											strokeOpacity="0.125"
-										></path>
+											fillRule="evenodd"
+											clipRule="evenodd"
+											d="M187.215 28.6207c17.939 14.394 28.018 37.1482 28.018 57.5045h-61.648c-.087-13.6688-11.194-24.7227-24.883-24.7227h-18.56c-13.6891 0-24.7966 11.0539-24.8835 24.7227H23.9148c0-20.3563 10.0783-43.1105 28.0178-57.5045C69.8722 14.2266 94.2034 6.1401 119.574 6.1401c25.37 0 49.701 8.0865 67.641 22.4806Z"
+											fill="#000"
+										/>
 									</svg>
-								</span>
+								)}
+								<input
+									autoComplete="off"
+									className={cn(
+										'h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
+										'placeholder:text-sm focus-visible:border-red-400',
+										'text-[canvasText] placeholder:text-gray-400',
+									)}
+									name="email"
+									type="email"
+									placeholder="Email"
+									required
+									id={id ? `email_${id}` : 'email'}
+									onChange={handleChange}
+									defaultValue={values.email}
+									onFocus={onEmailFocus}
+									onBlur={onEmailBlur}
+								/>
+							</div>
+							<button
+								aria-label={isSubmitting ? 'Submitting...' : 'Join'}
+								aria-disabled={isSubmitting}
+								className={cn(
+									"[[aria-label='Done']]:bg-green-600 group overflow-hidden",
+									'relative rounded-md bg-red-600 bg-gradient-to-b from-white/10 text-gray-100',
+									'shadow-inner shadow-gray-100/50 motion-safe:transition-all',
+									'grid h-9 cursor-pointer place-items-center active:scale-[0.98]',
+									"after:absolute after:inset-0 after:rounded-md after:content-['']",
+									'after:bg-gradient-to-b after:from-white/40 after:to-white/10',
+									'after:opacity-70 hover:after:opacity-100 after:motion-safe:transition-all',
+								)}
+								type="submit"
+							>
 								<span
 									className={cn(
-										'absolute inset-0 grid h-full w-full -translate-x-[200%] place-items-center',
-										'opacity-0 motion-safe:transition-opacity',
-										"group-[[aria-label='Done']]:opacity-100",
+										'motion-safe:transition-all',
+										"group-[[aria-label='Submitting...']]:translate-x-full",
+										"group-[[aria-label='Done']]:translate-x-[200%]",
+										'relative h-full w-full',
 									)}
 								>
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										width="24"
-										aria-hidden="true"
-										height="24"
-										viewBox="0 0 24 24"
-										fill="none"
-										stroke="currentColor"
-										strokeWidth="2"
-										strokeLinecap="round"
-										strokeLinejoin="round"
+									<span
+										className={cn(
+											'text-shadow-lg grid h-full place-items-center px-4 py-1 [text-shadow:0_1px_1px_var(--color-red-800)]',
+											"h-full group-[[aria-label='Submitting...']]:opacity-0",
+										)}
 									>
-										<path d="M20 6 9 17l-5-5"></path>
-									</svg>
+										Join
+									</span>
+									<span
+										className={cn(
+											'absolute inset-0 grid h-full w-full -translate-x-full place-items-center',
+											'opacity-0 motion-safe:transition-opacity',
+											"group-[[aria-label='Submitting...']]:opacity-100",
+										)}
+									>
+										<svg
+											viewBox="0 0 24 24"
+											fill="none"
+											xmlns="http://www.w3.org/2000/svg"
+											stroke="currentColor"
+											aria-hidden="true"
+											className={cn(
+												'animate-spin overflow-visible [animation-play-state:paused] [animation-timing-function:steps(8)]',
+												"aspect-square w-6 motion-safe:group-[[aria-label='Submitting...']]:[animation-play-state:running]",
+											)}
+										>
+											<path
+												d="M12 18V22"
+												strokeWidth="2"
+												strokeOpacity="1"
+												strokeLinecap="round"
+											></path>
+											<path
+												d="M19.0703 19.0703L16.2419 16.2419"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.875"
+											></path>
+											<path
+												d="M6 12L2 12"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.25"
+											></path>
+											<path
+												d="M12 2V6"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.5"
+											></path>
+											<path
+												d="M22 12L18 12"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.75"
+											></path>
+											<path
+												d="M7.75781 7.75781L4.92939 4.92939"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.375"
+											></path>
+											<path
+												d="M16.2422 7.75781L19.0706 4.92939"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.625"
+											></path>
+											<path
+												d="M4.92969 19.0703L7.75811 16.2419"
+												strokeWidth="2"
+												strokeLinecap="round"
+												strokeOpacity="0.125"
+											></path>
+										</svg>
+									</span>
+									<span
+										className={cn(
+											'absolute inset-0 grid h-full w-full -translate-x-[200%] place-items-center',
+											'opacity-0 motion-safe:transition-opacity',
+											"group-[[aria-label='Done']]:opacity-100",
+										)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="24"
+											aria-hidden="true"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth="2"
+											strokeLinecap="round"
+											strokeLinejoin="round"
+										>
+											<path d="M20 6 9 17l-5-5"></path>
+										</svg>
+									</span>
 								</span>
-							</span>
-						</button>
+							</button>
+						</div>
+					</form>
+				)}
+				{/* Success message */}
+				{status === 'success' && (
+					<div className="mt-8 flex flex-col items-center justify-center">
+						<p className="rounded-md border border-green-800 bg-green-200/10 p-2 text-green-800 dark:border-green-200 dark:text-green-200">
+							<strong className="font-[500]">
+								Thanks{values.first_name ? ` ${values.first_name}` : ''}!
+							</strong>
+							<br />
+							Please check your email to confirm your subscription.
+						</p>
 					</div>
-				</form>
-				{!formId && (
+				)}
+				{!formId && status !== 'success' && (
 					<p
 						data-nospam=""
 						className="text-muted-foreground mx-auto inline-flex w-full items-center justify-center text-center text-xs opacity-75 sm:text-sm"
@@ -402,66 +521,9 @@ export const SubscribeToConvertkitForm: React.FC<
 					</p>
 				)}
 			</div>
-			<output
-				className={cn(
-					'absolute left-0 right-0 top-full text-center text-sm outline-none',
-					'data-[status=error]:text-red-400 [&_p]:text-balance',
-					'opacity-100 blur-none motion-safe:data-[status=error]:transition-all',
-					'not-data-[status=success]:opacity-0 data-[status=error]:opacity-100',
-					'not-data-[status=success]:translate-y-4 data-[status=error]:translate-y-2',
-					'not-data-[status=success]:blur-sm data-[status=error]:blur-none',
-					'data-[status=success]:inset-0 data-[status=success]:grid data-[status=success]:place-items-center',
-					'data-[status=success]:[&_p]:rounded-md data-[status=success]:[&_p]:p-2',
-					'data-[status=success]:[&_p]:bg-green-200/10 data-[status=success]:[&_p]:text-green-800',
-					'data-[status=success]:[&_p]:border data-[status=success]:[&_p]:border-green-800',
-					'dark:data-[status=success]:[&_p]:bg-green-200/10 dark:data-[status=success]:[&_p]:text-green-200',
-					'dark:data-[status=success]:[&_p]:border-green-200',
-					isSubmitting ? 'sr-only' : '',
-				)}
-				data-status={status}
-			>
-				{status === 'error' ? (
-					<p>
-						<strong className="font-[500]">
-							Something went wrong on our end.
-						</strong>
-						<br />
-						Your spot might not be saved — try again or refresh the page.
-					</p>
-				) : null}
-				{isSubmitting ? 'Submitting...' : ''}
-				{status === 'success' ? (
-					<p>
-						<strong className="font-[500]">
-							Thanks${values.first_name ? ` ${values.first_name}` : ''}!
-						</strong>
-						<br />
-						You’re on the waitlist. Please check your email to confirm your
-						spot.
-					</p>
-				) : null}
-			</output>
 			{isSubmitting ? <p className="sr-only">loading...</p> : null}
 		</div>
 	)
 }
 
 export default SubscribeToConvertkitForm
-
-export const redirectUrlBuilder = (
-	subscriber: Subscriber,
-	path: string,
-	queryParams?: {
-		[key: string]: string
-	},
-) => {
-	const url = queryString.stringifyUrl({
-		url: path,
-		query: {
-			[CK_SUBSCRIBER_KEY]: subscriber.id,
-			email: subscriber.email_address,
-			...queryParams,
-		},
-	})
-	return url
-}
diff --git a/apps/craft-of-ui/src/convertkit/index.ts b/apps/craft-of-ui/src/convertkit/index.ts
index dac61bfe3..ae5866dcf 100644
--- a/apps/craft-of-ui/src/convertkit/index.ts
+++ b/apps/craft-of-ui/src/convertkit/index.ts
@@ -1,5 +1,3 @@
-import SubscribeToConvertkitForm, {
-	redirectUrlBuilder,
-} from './convertkit-subscribe-form'
+import SubscribeToConvertkitForm from './convertkit-subscribe-form'
 
-export { SubscribeToConvertkitForm, redirectUrlBuilder }
+export { SubscribeToConvertkitForm }
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index 74970f2ef..dd071e9c2 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -379,7 +379,28 @@
 }
 
 @keyframes move {
-	50% {
-		transform: translate(calc(100cqi - 100%), 0);
+	0% {
+		transform: translateX(0);
 	}
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes bear-float-up {
+	0% {
+		transform: translateY(100%);
+		opacity: 1;
+	}
+	80% {
+		opacity: 1;
+	}
+	100% {
+		transform: translateY(-200vh);
+		opacity: 0;
+	}
+}
+
+.animate-bear-float-up {
+	animation: bear-float-up 10s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

From 9802a0d96fa376621d5ea75b4c3e70a3776e51bb Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Thu, 24 Jul 2025 17:32:35 -0500
Subject: [PATCH 04/10] refactor(newsletter): remove redirect logic from
 success handler in SubscribeToConvertkitForm

---
 .../posts/_components/post-video-subscribe-form.tsx          | 5 ++---
 .../src/components/video-block-newsletter-cta.tsx            | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/craft-of-ui/src/app/(content)/posts/_components/post-video-subscribe-form.tsx b/apps/craft-of-ui/src/app/(content)/posts/_components/post-video-subscribe-form.tsx
index 68b3269df..4cf8b990e 100644
--- a/apps/craft-of-ui/src/app/(content)/posts/_components/post-video-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/app/(content)/posts/_components/post-video-subscribe-form.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
-import { redirectUrlBuilder, SubscribeToConvertkitForm } from '@/convertkit'
+import { SubscribeToConvertkitForm } from '@/convertkit'
 import { Subscriber } from '@/schemas/subscriber'
 import common from '@/text/common'
 import { api } from '@/trpc/react'
@@ -41,8 +41,7 @@ export const PostNewsletterCta: React.FC<
 	const handleOnSuccess = (subscriber: Subscriber | undefined) => {
 		if (subscriber) {
 			track(trackProps.event as string, trackProps.params)
-			const redirectUrl = redirectUrlBuilder(subscriber, '/confirm')
-			router.push(redirectUrl)
+			// No redirect - let the form handle inline success response
 		}
 	}
 
diff --git a/apps/craft-of-ui/src/components/video-block-newsletter-cta.tsx b/apps/craft-of-ui/src/components/video-block-newsletter-cta.tsx
index 5ac52e045..46e8f0485 100644
--- a/apps/craft-of-ui/src/components/video-block-newsletter-cta.tsx
+++ b/apps/craft-of-ui/src/components/video-block-newsletter-cta.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import { useRouter } from 'next/navigation'
-import { redirectUrlBuilder, SubscribeToConvertkitForm } from '@/convertkit'
+import { SubscribeToConvertkitForm } from '@/convertkit'
 import { Subscriber } from '@/schemas/subscriber'
 import { track } from '@/utils/analytics'
 import {
@@ -44,8 +44,7 @@ export const VideoBlockNewsletterCta: React.FC<
 	const handleOnSuccess = (subscriber: Subscriber | undefined) => {
 		if (subscriber) {
 			track(trackProps.event as string, trackProps.params)
-			const redirectUrl = redirectUrlBuilder(subscriber, '/confirm')
-			router.push(redirectUrl)
+			// No redirect - let the form handle inline success response
 		}
 	}
 

From 193bcfeee174ed1f321599c59f60de852e439e68 Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Tue, 29 Jul 2025 14:25:33 -0500
Subject: [PATCH 05/10] feat(ui): add compatibility to tailwind v4

---
 .../convertkit/convertkit-subscribe-form.tsx  | 124 +-----------------
 apps/craft-of-ui/src/styles/globals.css       |   7 +
 apps/craft-of-ui/tailwind.config.ts           |  37 ++++++
 3 files changed, 50 insertions(+), 118 deletions(-)

diff --git a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
index 2c91e7c57..9df52597a 100644
--- a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
@@ -117,126 +117,12 @@ export const SubscribeToConvertkitForm: React.FC<
 		validateOnChange,
 	})
 
-	console.info({ status, values })
-
-	const [showBear, setShowBear] = useState(false)
-
-	useEffect(() => {
-		if (status === 'success') {
-			setShowBear(true)
-		}
-	}, [status])
-
 	return (
 		<div
 			data-waitlist-form
 			className="relative mb-6 mt-6 scroll-mt-[calc(var(--header-height)*2)]"
 			id={id}
 		>
-			{/* Bear with balloon animation on success */}
-			{status === 'success' && showBear && (
-				<div
-					data-bear-cave
-					className="pointer-events-none fixed inset-0 z-[100] mx-auto w-[600px] max-w-[calc(100vw-2rem)] overflow-visible"
-				>
-					<div
-						aria-hidden="true"
-						className={cn(
-							'absolute left-1/2 w-20 -translate-x-1/2 drop-shadow-lg',
-							status === 'success'
-								? 'animate-bear-float-up'
-								: 'translate-y-full',
-						)}
-						data-bear-template
-						style={{ bottom: 0 }}
-					>
-						<svg
-							className="overflow-visible"
-							aria-hidden="true"
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 478 931"
-						>
-							<rect
-								width="115"
-								height="52"
-								x="294.5"
-								y="872.5"
-								fill="#AF7128"
-								stroke="#000"
-								strokeWidth="6"
-								rx="26"
-								transform="rotate(-90 294.5 872.5)"
-							></rect>
-							<path
-								d="M294.5 783.5V846.5C294.5 860.859 306.141 872.5 320.5 872.5C334.859 872.5 346.5 860.859 346.5 846.5V783.5C346.5 769.141 334.859 757.5 320.5 757.5C306.141 757.5 294.5 769.141 294.5 783.5Z"
-								fill="#AF7128"
-								stroke="black"
-							/>
-							<path
-								d="M318.674 859.205C318.674 857.548 317.331 856.205 315.674 856.205C314.017 856.205 312.674 857.548 312.674 859.205H318.674ZM318.674 871.205V859.205H312.674V871.205H318.674ZM331.34 859.205C331.34 857.548 329.996 856.205 328.34 856.205C326.683 856.205 325.34 857.548 325.34 859.205H331.34ZM331.34 871.205V859.205H325.34V871.205H331.34Z"
-								fill="black"
-							/>
-							<path
-								d="M272.653 584.433C264.081 570.25 265.905 551.554 278.132 539.327C292.52 524.94 315.863 524.957 330.272 539.365C340.425 549.518 343.432 564.107 339.289 576.874C352.36 580.791 364.679 587.914 375.007 598.243L389.17 612.405C399.452 622.688 406.558 634.942 410.486 647.947C423.23 643.849 437.773 646.866 447.901 656.995C462.31 671.403 462.327 694.747 447.939 709.135C435.761 721.313 417.166 723.171 403.005 714.716C399.332 721.152 394.75 727.21 389.258 732.701L342.193 779.767L264.61 857.35C262.633 859.327 260.887 861.521 259.404 863.891L243.643 889.088C240.437 894.213 236.893 899.552 231.259 901.743C223.369 904.811 214.061 903.155 207.684 896.778L194.569 884.931L187.165 878.072L178.16 868.832C169.556 860.228 172.326 848.624 177.145 838.223L190.459 815.162C188.411 813.755 185.748 810.468 183.939 808.659C182.376 807.096 180.889 803.872 179.627 802.128L164.298 823.3C157.786 831.718 144.057 833.152 135.453 824.547L109.25 799.024C100.646 790.42 93.7864 777.972 104.273 762.254L150.623 702.243C149.789 699.54 149.339 696.668 149.337 693.692L149.291 630.646C149.279 614.618 162.263 601.634 178.291 601.646C194.319 601.658 207.321 614.66 207.333 630.688L207.344 645.522L254.711 598.155C260.191 592.675 266.233 588.101 272.653 584.433Z"
-								fill="#AF7128"
-							/>
-							<path
-								d="M342.193 779.767L389.258 732.701C394.75 727.21 399.332 721.152 403.005 714.716C417.166 723.171 435.761 721.313 447.939 709.135C462.327 694.747 462.31 671.403 447.901 656.995C437.773 646.866 423.23 643.849 410.486 647.947C406.558 634.942 399.452 622.688 389.17 612.405L375.007 598.243C364.679 587.914 352.36 580.791 339.289 576.874C343.432 564.107 340.425 549.518 330.272 539.365C315.863 524.957 292.52 524.94 278.132 539.327C265.905 551.554 264.081 570.25 272.653 584.433C266.233 588.101 260.191 592.675 254.711 598.155L207.344 645.522L207.333 630.688C207.321 614.66 194.319 601.658 178.291 601.646C162.263 601.634 149.279 614.618 149.291 630.646L149.337 693.692C149.339 696.668 149.789 699.54 150.623 702.243L104.273 762.254C93.7864 777.972 100.646 790.42 109.25 799.024L135.453 824.547C144.057 833.152 157.786 831.718 164.298 823.3L179.627 802.128C180.889 803.872 182.376 807.096 183.939 808.659C185.748 810.468 188.411 813.755 190.459 815.162L177.145 838.223C172.326 848.624 169.556 860.228 178.16 868.832L187.165 878.072L194.569 884.931L207.684 896.778C214.061 903.155 223.369 904.811 231.259 901.743C236.893 899.552 240.437 894.213 243.643 889.088L259.404 863.891C260.887 861.521 262.633 859.327 264.61 857.35L304.425 817.535"
-								stroke="black"
-							/>
-							<path
-								d="M178.783 616.187C178.784 617.844 180.128 619.188 181.785 619.189C183.442 619.191 184.784 617.848 184.783 616.192L178.783 616.187ZM178.774 604.178L178.783 616.187L184.783 616.192L184.774 604.183L178.774 604.178ZM166.676 616.178C166.677 617.835 168.021 619.179 169.678 619.181C171.335 619.182 172.677 617.84 172.676 616.183L166.676 616.178ZM166.667 604.17L166.676 616.178L172.676 616.183L172.667 604.174L166.667 604.17Z"
-								fill="black"
-							/>
-							<path
-								d="M308.738 613.92L371.317 676.499L361.948 685.868L299.369 623.289L308.738 613.92Z"
-								fill="#F0C3C9"
-							/>
-							<path
-								d="M417.156 664.094C419.682 686.976 410.729 710.203 396.335 724.597L352.68 680.942C362.284 671.215 362.246 655.545 352.566 645.865L339.372 632.671C329.692 622.991 314.022 622.953 304.295 632.557L260.855 589.117C275.249 574.723 298.476 565.77 321.358 568.296C344.239 570.821 367.187 582.333 385.153 600.299C403.119 618.265 414.631 641.213 417.156 664.094Z"
-								fill="black"
-							/>
-							<path
-								d="M343.383 719.973C346.543 723.133 351.662 723.136 354.817 719.981C357.972 716.826 357.969 711.707 354.809 708.547C351.649 705.387 346.53 705.383 343.375 708.539C340.22 711.694 340.223 716.813 343.383 719.973Z"
-								fill="black"
-							/>
-							<path
-								d="M266.489 643.079C269.649 646.239 274.768 646.242 277.923 643.087C281.078 639.932 281.075 634.813 277.915 631.653C274.755 628.493 269.636 628.489 266.481 631.645C263.325 634.8 263.329 639.919 266.489 643.079Z"
-								fill="black"
-							/>
-							<path
-								d="M315.046 700.863C309.241 706.669 295.719 706.215 287.946 698.442C280.173 690.669 279.719 677.147 285.525 671.341C291.33 665.536 301.196 669.646 308.969 677.419C316.742 685.192 320.852 695.058 315.046 700.863Z"
-								fill="black"
-							/>
-							<path
-								d="M197.373 866.873L188.888 875.358M214.369 883.869L205.883 892.354M124.435 793.935L115.95 802.42M141.43 810.93L132.945 819.415"
-								stroke="black"
-							/>
-							<path d="M193.5 732.5L188.5 356.5" stroke="black" />
-							<path
-								d="M188.5 353.5C281.836 353.5 357.5 277.836 357.5 184.5C357.5 91.1639 281.836 15.5 188.5 15.5C95.1639 15.5 19.5 91.1639 19.5 184.5C19.5 277.836 95.1639 353.5 188.5 353.5Z"
-								fill="#F0C3C9"
-								stroke="black"
-							/>
-							<path
-								d="M151.119 53.7383C124.612 61.3158 101.033 76.7706 83.5092 98.054C65.9853 119.337 55.3436 145.443 52.9946 172.912"
-								fill="#F0C3C9"
-							/>
-							<path
-								d="M151.119 53.7383C124.612 61.3158 101.033 76.7706 83.5092 98.054C65.9853 119.337 55.3436 145.443 52.9946 172.912"
-								stroke="white"
-							/>
-							<path
-								d="M172.5 355.5H204L213.5 375.5H163.5L172.5 355.5Z"
-								fill="#F0C3C9"
-								stroke="black"
-							/>
-							<path d="M147 668L209 626" stroke="black" />
-						</svg>
-					</div>
-				</div>
-			)}
 			{/* Remove the old bear container that was causing the duplicate */}
 			<div
 				className="[[inert]_svg]:animate-none relative"
@@ -293,12 +179,13 @@ export const SubscribeToConvertkitForm: React.FC<
 							<div
 								className={cn(
 									'relative flex flex-1 focus-within:has-[:invalid:not(:placeholder-shown)]:[&_div]:[--show:1]',
+									'isolate',
 								)}
 							>
+								{/* Mascot bear - shows when email input is focused */}
 								{showMascot && (
 									<svg
-										style={{ left: '70%' }}
-										className="absolute -top-8 -z-10 w-12 delay-200 ease-out motion-safe:transition-transform"
+										className="absolute -top-8 left-[70%] -z-50 w-12 delay-200 ease-out motion-safe:transition-transform"
 										viewBox="0 0 240 333"
 										fill="none"
 										xmlns="http://www.w3.org/2000/svg"
@@ -359,9 +246,10 @@ export const SubscribeToConvertkitForm: React.FC<
 								<input
 									autoComplete="off"
 									className={cn(
-										'h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
+										'relative z-10 h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
 										'placeholder:text-sm focus-visible:border-red-400',
 										'text-[canvasText] placeholder:text-gray-400',
+										'bg-background',
 									)}
 									name="email"
 									type="email"
@@ -379,7 +267,7 @@ export const SubscribeToConvertkitForm: React.FC<
 								aria-disabled={isSubmitting}
 								className={cn(
 									"[[aria-label='Done']]:bg-green-600 group overflow-hidden",
-									'relative rounded-md bg-red-600 bg-gradient-to-b from-white/10 text-gray-100',
+									'relative rounded-md bg-red-600 text-white',
 									'shadow-inner shadow-gray-100/50 motion-safe:transition-all',
 									'grid h-9 cursor-pointer place-items-center active:scale-[0.98]',
 									"after:absolute after:inset-0 after:rounded-md after:content-['']",
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index 132386c24..64caeac8d 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -76,7 +76,9 @@
 		--breakpoint-lg: 968px;
 		--color-red-400: oklch(0.704 0.191 22.216);
 		--color-red-500: oklch(0.637 0.237 25.331);
+		--color-red-600: oklch(0.637 0.237 25.331);
 		--color-red-800: oklch(0.444 0.177 26.899);
+		--red-600: oklch(0.637 0.237 25.331);
 		--color-green-200: oklch(0.925 0.084 155.995);
 		--color-green-600: oklch(0.627 0.194 149.214);
 		--color-green-800: oklch(0.448 0.119 151.328);
@@ -417,3 +419,8 @@
 .animate-bear-float-up {
 	animation: bear-float-up 10s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
+
+/* Ensure red button background is applied correctly */
+.bg-red-600 {
+	background-color: var(--red-600, oklch(0.637 0.237 25.331));
+}
diff --git a/apps/craft-of-ui/tailwind.config.ts b/apps/craft-of-ui/tailwind.config.ts
index db92b3a74..52ff584f4 100644
--- a/apps/craft-of-ui/tailwind.config.ts
+++ b/apps/craft-of-ui/tailwind.config.ts
@@ -69,6 +69,17 @@ module.exports = {
 					DEFAULT: 'hsl(var(--card))',
 					foreground: 'hsl(var(--card-foreground))',
 				},
+				red: {
+					400: 'var(--color-red-400)',
+					500: 'var(--color-red-500)',
+					600: 'var(--color-red-600)',
+					800: 'var(--color-red-800)',
+				},
+				green: {
+					200: 'var(--color-green-200)',
+					600: 'var(--color-green-600)',
+					800: 'var(--color-green-800)',
+				},
 			},
 			borderRadius: {
 				lg: `var(--radius)`,
@@ -93,11 +104,37 @@ module.exports = {
 					'0%': { 'background-position': '100%' },
 					'100%': { 'background-position': '-100%' },
 				},
+				// Add missing animations that might be used
+				blink: {
+					'0%, 46%, 48%, 50%, 100%': { transform: 'scaleY(1)' },
+					'47%, 49%': { transform: 'scaleY(0.1)' },
+				},
+				draw: {
+					to: { strokeDashoffset: 0 },
+				},
+				fill: {
+					to: { fill: 'currentColor' },
+				},
+				move: {
+					'0%': { transform: 'translateX(0)' },
+					'100%': { transform: 'translateX(100%)' },
+				},
+				'bear-float-up': {
+					'0%': { transform: 'translateY(100%)', opacity: 1 },
+					'80%': { opacity: 1 },
+					'100%': { transform: 'translateY(-200vh)', opacity: 0 },
+				},
 			},
 			animation: {
 				'accordion-down': 'accordion-down 0.2s ease-out',
 				'accordion-up': 'accordion-up 0.2s ease-out',
 				shine: 'shine 5s linear infinite',
+				blink: 'blink 6s infinite',
+				draw: 'draw var(--path-speed, 1s) ease-in forwards',
+				fill: 'fill 0.5s forwards',
+				move: 'move 1s ease-in-out',
+				'bear-float-up':
+					'bear-float-up 10s cubic-bezier(0.4, 0, 0.2, 1) forwards',
 			},
 			typography: (theme: any) => ({
 				DEFAULT: {

From d1c6efec5f1c7c1d519ebb3e21749f92a707b0ae Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Tue, 29 Jul 2025 14:44:23 -0500
Subject: [PATCH 06/10] feat(convertkit): bear animation in input working --
 blinks evey 8 seconds, and peeks out smoothly

---
 .../convertkit/convertkit-subscribe-form.tsx  | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
index 9df52597a..aa11ba20d 100644
--- a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
@@ -99,6 +99,7 @@ export const SubscribeToConvertkitForm: React.FC<
 	showMascot,
 	...rest
 }) => {
+	const [isEmailFocused, setIsEmailFocused] = useState(false)
 	const {
 		isSubmitting,
 		status,
@@ -117,6 +118,10 @@ export const SubscribeToConvertkitForm: React.FC<
 		validateOnChange,
 	})
 
+	// Check if bear should show: focused AND has content
+	const shouldShowBear =
+		isEmailFocused && values.email && values.email.trim().length > 0
+
 	return (
 		<div
 			data-waitlist-form
@@ -182,10 +187,21 @@ export const SubscribeToConvertkitForm: React.FC<
 									'isolate',
 								)}
 							>
-								{/* Mascot bear - shows when email input is focused */}
-								{showMascot && (
+								{/* Mascot bear - peeks out when email input is focused */}
+								<div
+									className="pointer-events-none absolute left-[70%] top-0 -z-50 w-12"
+									style={{
+										clipPath: 'inset(-200% 0 0px 0)',
+										transform: 'translateY(-100%)',
+									}}
+								>
 									<svg
-										className="absolute -top-8 left-[70%] -z-50 w-12 delay-200 ease-out motion-safe:transition-transform"
+										className={cn(
+											'w-full motion-safe:transition-transform motion-safe:delay-200 motion-safe:ease-out',
+											shouldShowBear
+												? 'motion-safe:[translate:0_calc(100%+(-50%))]'
+												: 'motion-safe:translate-y-full',
+										)}
 										viewBox="0 0 240 333"
 										fill="none"
 										xmlns="http://www.w3.org/2000/svg"
@@ -242,7 +258,7 @@ export const SubscribeToConvertkitForm: React.FC<
 											fill="#000"
 										/>
 									</svg>
-								)}
+								</div>
 								<input
 									autoComplete="off"
 									className={cn(
@@ -258,8 +274,14 @@ export const SubscribeToConvertkitForm: React.FC<
 									id={id ? `email_${id}` : 'email'}
 									onChange={handleChange}
 									defaultValue={values.email}
-									onFocus={onEmailFocus}
-									onBlur={onEmailBlur}
+									onFocus={() => {
+										setIsEmailFocused(true)
+										onEmailFocus?.()
+									}}
+									onBlur={() => {
+										setIsEmailFocused(false)
+										onEmailBlur?.()
+									}}
 								/>
 							</div>
 							<button

From 89530ec0334ad00f9068a55d1ef012c3667333c6 Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Tue, 29 Jul 2025 15:22:38 -0500
Subject: [PATCH 07/10] style(convertkit): update background styles

---
 .../src/convertkit/convertkit-subscribe-form.tsx         | 3 ++-
 apps/craft-of-ui/src/styles/globals.css                  | 9 +++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
index aa11ba20d..9214646c0 100644
--- a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
@@ -166,6 +166,7 @@ export const SubscribeToConvertkitForm: React.FC<
 									'h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
 									'placeholder:text-sm focus-visible:border-red-400',
 									'text-[canvasText] placeholder:text-gray-400',
+									'bg-white dark:bg-transparent',
 								)}
 								id={id ? `first_name_${id}` : 'first_name'}
 								onChange={handleChange}
@@ -265,7 +266,7 @@ export const SubscribeToConvertkitForm: React.FC<
 										'relative z-10 h-9 flex-1 rounded-md border border-gray-300 px-4 outline-none',
 										'placeholder:text-sm focus-visible:border-red-400',
 										'text-[canvasText] placeholder:text-gray-400',
-										'bg-background',
+										'bg-white dark:bg-transparent',
 									)}
 									name="email"
 									type="email"
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index 64caeac8d..801d47645 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -204,14 +204,19 @@
 	}
 
 	body {
-		@apply bg-background selection:bg-primary selection:text-primary-foreground overflow-x-hidden font-[300] text-[canvasText] antialiased;
+		background: color-mix(in hsl, #fff, hsl(45 80% 50%) 1%);
+		@apply selection:bg-primary selection:text-primary-foreground overflow-x-hidden font-[300] text-[canvasText] antialiased;
 		color: color-mix(in hsl, canvasText, canvas 40%);
 		font-feature-settings:
 			'rlig' 1,
 			'calt' 1;
 	}
 
-	.home-page-grid::before {
+	.dark body {
+		background: hsl(210 10% 10%);
+	}
+
+	body::before {
 		--size: 40px;
 		--line: color-mix(in hsl, canvasText, transparent 90%);
 		content: '';

From 3708fac0b1776697ead4b098e23bfe8beb207af3 Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Tue, 29 Jul 2025 16:05:31 -0500
Subject: [PATCH 08/10] fixing the shades of red

---
 apps/craft-of-ui/src/app/page.tsx       |  4 ++--
 apps/craft-of-ui/src/styles/globals.css | 21 +++++++++++++--------
 apps/craft-of-ui/tailwind.config.ts     |  8 ++++----
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/apps/craft-of-ui/src/app/page.tsx b/apps/craft-of-ui/src/app/page.tsx
index 31b385b4d..e44bc8db8 100644
--- a/apps/craft-of-ui/src/app/page.tsx
+++ b/apps/craft-of-ui/src/app/page.tsx
@@ -96,7 +96,7 @@ const Home = async (props: Props) => {
 							The Craft of UI — by&nbsp;
 							<Link
 								aria-label="Jhey Tompkins"
-								className="flex items-center gap-x-2 text-gray-900 outline-red-500 transition-colors hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400"
+								className="flex items-center gap-x-2 text-gray-900 outline-red-500 transition-colors hover:text-red-400 dark:text-gray-300 dark:hover:text-red-400"
 								href="https://twitter.com/intent/follow?screen_name=jh3yy"
 								target="_blank"
 							>
@@ -112,7 +112,7 @@ const Home = async (props: Props) => {
 						</h1>
 						<p className="text-fluid mb-6 font-serif leading-none [--font-level:4] [--font-size-min:20]">
 							What if you could build{' '}
-							<span className="text-red-500">anything</span>?
+							<span className="text-red-400">anything</span>?
 						</p>
 					</header>
 
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index 801d47645..bd73cea89 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -74,11 +74,11 @@
 		--font-width-min: 375;
 		--font-width-max: 1500;
 		--breakpoint-lg: 968px;
-		--color-red-400: oklch(0.704 0.191 22.216);
-		--color-red-500: oklch(0.637 0.237 25.331);
-		--color-red-600: oklch(0.637 0.237 25.331);
-		--color-red-800: oklch(0.444 0.177 26.899);
-		--red-600: oklch(0.637 0.237 25.331);
+		--color-red-400: oklch(70.4% 0.191 22.216);
+		--color-red-500: #ef4444;
+		--color-red-600: #ef4444;
+		--color-red-800: #991b1b;
+		--red-600: #ef4444;
 		--color-green-200: oklch(0.925 0.084 155.995);
 		--color-green-600: oklch(0.627 0.194 149.214);
 		--color-green-800: oklch(0.448 0.119 151.328);
@@ -284,13 +284,18 @@
 	}
 
 	::selection {
-		background: var(--color-red-400);
-		color: #fff;
+		background: oklch(70.4% 0.191 22.216) !important;
+		color: #fff !important;
+	}
+
+	::-moz-selection {
+		background: oklch(70.4% 0.191 22.216) !important;
+		color: #fff !important;
 	}
 
 	html[lang] {
 		color-scheme: light dark;
-		scrollbar-color: light-dark(var(--color-red-400), var(--color-red-500))
+		scrollbar-color: light-dark(var(--color-red-400), var(--color-red-400))
 			#0000;
 		scrollbar-width: thin;
 	}
diff --git a/apps/craft-of-ui/tailwind.config.ts b/apps/craft-of-ui/tailwind.config.ts
index 52ff584f4..2746f9a98 100644
--- a/apps/craft-of-ui/tailwind.config.ts
+++ b/apps/craft-of-ui/tailwind.config.ts
@@ -70,10 +70,10 @@ module.exports = {
 					foreground: 'hsl(var(--card-foreground))',
 				},
 				red: {
-					400: 'var(--color-red-400)',
-					500: 'var(--color-red-500)',
-					600: 'var(--color-red-600)',
-					800: 'var(--color-red-800)',
+					400: '#f87171',
+					500: '#ef4444',
+					600: '#ef4444',
+					800: '#991b1b',
 				},
 				green: {
 					200: 'var(--color-green-200)',

From b962ce4d698976222bec3fe1091daab45511dfe6 Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Tue, 29 Jul 2025 17:51:22 -0500
Subject: [PATCH 09/10] feat(bear-animation): implement floating bear animation
 on subscription success and add pop sound effect

---
 apps/craft-of-ui/public/audio/pop.mp3         | Bin 0 -> 1513 bytes
 apps/craft-of-ui/src/app/page.tsx             |   5 +-
 .../src/components/bear-animation.tsx         | 238 ++++++++++++++++++
 .../src/components/primary-newsletter-cta.tsx |   3 +
 .../convertkit/convertkit-subscribe-form.tsx  |   2 +-
 apps/craft-of-ui/src/styles/globals.css       |   6 +
 apps/craft-of-ui/tailwind.config.ts           |   4 +
 7 files changed, 256 insertions(+), 2 deletions(-)
 create mode 100644 apps/craft-of-ui/public/audio/pop.mp3
 create mode 100644 apps/craft-of-ui/src/components/bear-animation.tsx

diff --git a/apps/craft-of-ui/public/audio/pop.mp3 b/apps/craft-of-ui/public/audio/pop.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..4b64f7f6282be9cdff7605eb6dd1f4e827627147
GIT binary patch
literal 1513
zcmezWd%_V0bP$o5mkt!;2Vy1$2G*Ahhe-whNd`c>0(=~OU5)h&4GdUz!ki?kpu$|>
z$iVmj<c@uXYbsz8BZdC|`vNe6*h2*KLkt*H<Q!N3H+S%4V9@nk_WO(94he~k4}RG3
z?~&(keh8$Se-_lpvop&qKgi(xFF?MIbN~N8JL>;`w5b1RQ5R!>ka@yS#t94(8$DP$
z4~Nan-4=GS;gPV6Gmny^^%*UplvFkgrc|lthni0ER@!oK`y?z_DU-cm{Q{Og?nrqj
zX6BMMg&yX+N(p)lrGg0^2}d2$oVg9cmiHcEk#1@h%V5kEh>2}|6e)K3OjD9j-y*#r
z4Q>+_X13QnjiQo|c(j8GI%iB~dNyrN-F$uV)-%34ZNg<9sl@9}<7Sp~?N}+QGco95
zmaFRHqJq~mq{TfJiYqM%i_#T4u`(~-sxEe}V(X=c6(>%di-}D5Sny`2Rl!3(OS>40
zl9yT~&nvG?u$s7L+q|?=6+S<eq=cDP=X}okO;6{O*B3wicw4NcRgCWiV4BpMtGD$3
z|9?rJwU`Sy7&=<b98>1$<+C*%Xpk}Yn#|NF>~iIju#XIPS<>~%b^^_OLN`q3GQ3d`
z^-G*kG<~+pyj-@(nNlenQictW)qd~X!E^lb)inx|K64FLR?g&z5jr*@BvUZ*hu2ia
z$!(MFoZVp4U(7qjJi18ymfpWjGg{*270K7$*Nn*u4r<bsUEQ9Y&a3fh`qpF9KK|7`
zQMK<?@SW@b?8BD0{@tv$aQV!8F;laxFU`K0eExK~>HVqYoIML)c5nG`cmDssse7`X
z-v9sq{_D!T@6WTfCRts5wscF0NzrVJYv<N%FI{&r=;oigZTn?P%RkOqd$<1f#(e$%
r`Tq~qhQf1L=m-M;e<vLI+90=fq5sdb0tXlv><>3Eu#6!8gS`p>I*}Zs

literal 0
HcmV?d00001

diff --git a/apps/craft-of-ui/src/app/page.tsx b/apps/craft-of-ui/src/app/page.tsx
index e44bc8db8..09f0441d3 100644
--- a/apps/craft-of-ui/src/app/page.tsx
+++ b/apps/craft-of-ui/src/app/page.tsx
@@ -6,6 +6,7 @@ import {
 	SubscribeForm,
 	Testimonial,
 } from '@/app/admin/pages/_components/page-builder-mdx-components'
+import { BearAnimation } from '@/components/bear-animation'
 import { CldImage, ThemeImage } from '@/components/cld-image'
 import MDXVideo from '@/components/content/mdx-video'
 import { JheyProfile } from '@/components/jhey-profile'
@@ -89,6 +90,8 @@ const Home = async (props: Props) => {
 			withContainer
 			withGrid
 		>
+			<BearAnimation />
+
 			<div className="mask-content fixed inset-0 min-h-screen overflow-auto pb-[calc(var(--header-height)*1)] [--end:calc(2*var(--header-height))] [--start:var(--header-height)] lg:[--end:var(--header-height)] lg:[--start:0]">
 				<div className="mx-auto w-[var(--content)] max-w-[calc(100vw-(2*var(--gutter)))] pb-[var(--header-height)] pt-[calc(2*var(--header-height))]">
 					<header className="text-[canvasText] dark:text-gray-100">
@@ -136,7 +139,7 @@ const Home = async (props: Props) => {
 							</Link>
 						)}
 
-						<p className="text-fluid text-balance font-[200] leading-[1.25] [--font-level:0.6]">
+						<p className="text-fluid text-balance font-[200] leading-[1.25] text-black [--font-level:1] dark:text-white">
 							Master the tools, mindset, and techniques behind crafting
 							exceptional user interfaces with HTML, CSS, and JavaScript
 						</p>
diff --git a/apps/craft-of-ui/src/components/bear-animation.tsx b/apps/craft-of-ui/src/components/bear-animation.tsx
new file mode 100644
index 000000000..11c3709a0
--- /dev/null
+++ b/apps/craft-of-ui/src/components/bear-animation.tsx
@@ -0,0 +1,238 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useRef } from 'react'
+
+/**
+ * BearAnimation component that creates floating bear animations on subscription success
+ * Implements the complete balloon bear animation system with random colors, positions, and durations
+ */
+export const BearAnimation: React.FC = () => {
+	const bearCaveRef = useRef<HTMLDivElement>(null)
+	const bearTemplateRef = useRef<HTMLDivElement>(null)
+
+	/**
+	 * Creates a new floating bear animation
+	 * @param subscriber - The subscriber data from successful subscription
+	 */
+	const createFloatingBear = React.useCallback((subscriber: any) => {
+		if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
+			const successBear = bearTemplateRef.current?.cloneNode(
+				true,
+			) as HTMLElement
+
+			if (successBear && bearCaveRef.current) {
+				const randomHue = Math.random() * 359
+				const randomX = Math.random().toFixed(2)
+				const randomDuration = (10 + Math.random() * 20).toFixed(2)
+
+				successBear.style.setProperty('--accent', `hsl(${randomHue} 90% 80%)`)
+				successBear.style.setProperty('--x', randomX)
+				successBear.style.setProperty('--duration', `${randomDuration}s`)
+
+				const svg = successBear.querySelector('svg')
+				if (svg) {
+					svg.style.setProperty('--accent', `hsl(${randomHue} 90% 80%)`)
+				}
+
+				successBear.classList.remove('sr-only')
+				successBear.style.animation = `float ${randomDuration}s linear 2s forwards`
+
+				const balloonButton = successBear.querySelector('button')
+				if (balloonButton) {
+					balloonButton.addEventListener('click', () => {
+						// Play pop sound
+						const pop = new Audio('/audio/pop.mp3')
+						pop.play()
+
+						const balloon = successBear.querySelector('.balloon')
+						if (balloon) {
+							// Balloon pop animation
+							balloon.animate(
+								{
+									scale: [2],
+									opacity: [0],
+								},
+								{
+									fill: 'forwards',
+									duration: 75,
+									easing: 'ease-out',
+								},
+							)
+
+							successBear.animate(
+								{
+									translate: ['0 100%'],
+								},
+								{
+									composite: 'replace',
+									duration: 200,
+									easing: 'linear',
+								},
+							).onfinish = () => {
+								successBear.remove()
+							}
+						}
+					})
+				}
+
+				bearCaveRef.current.appendChild(successBear)
+
+				setTimeout(
+					() => {
+						if (successBear.parentNode) {
+							successBear.remove()
+						}
+					},
+					(parseFloat(randomDuration) + 2) * 1000,
+				)
+			}
+		}
+	}, [])
+
+	useEffect(() => {
+		;(window as any).createFloatingBear = createFloatingBear
+
+		return () => {
+			delete (window as any).createFloatingBear
+		}
+	}, [createFloatingBear])
+
+	return (
+		<>
+			{/* Bear Cave Container */}
+			<div
+				ref={bearCaveRef}
+				data-bear-cave
+				className="pointer-events-none fixed inset-0 z-[100] mx-auto w-[600px] max-w-[calc(100vw-(2*var(--gutter)))] overflow-hidden [container-type:inline-size]"
+			></div>
+
+			{/* Bear Template (Hidden) */}
+			<div
+				ref={bearTemplateRef}
+				data-bear-template
+				className="sr-only absolute bottom-0 left-[calc((100cqi-4rem)*var(--x,0))] w-20 translate-y-full drop-shadow-lg"
+			>
+				<button className="pointer-events-auto absolute left-[4%] top-[1%] aspect-square w-[72%] cursor-pointer"></button>
+
+				{/* Bear SVG with Balloon */}
+				<svg
+					className="h-full w-full overflow-visible"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 478 931"
+					style={{ '--accent': 'hsl(0 90% 80%)' } as React.CSSProperties}
+				>
+					<rect
+						width="115"
+						height="52"
+						x="294.5"
+						y="872.5"
+						fill="#AF7128"
+						stroke="#000"
+						strokeWidth="6"
+						rx="26"
+						transform="rotate(-90 294.5 872.5)"
+					/>
+					<path
+						fill="#000"
+						d="M318.674 859.205c0-1.657-1.343-3-3-3s-3 1.343-3 3h6Zm0 12v-12h-6v12h6ZM331.34 859.205c0-1.657-1.344-3-3-3-1.657 0-3 1.343-3 3h6Zm0 12v-12h-6v12h6Z"
+					/>
+					<path
+						fill="#AF7128"
+						d="M272.653 584.433c-8.572-14.183-6.748-32.879 5.479-45.106 14.388-14.387 37.731-14.37 52.14.038 10.153 10.153 13.16 24.742 9.017 37.509 13.071 3.917 25.39 11.04 35.718 21.369l14.163 14.162c10.282 10.283 17.388 22.537 21.316 35.542 12.744-4.098 27.287-1.081 37.415 9.048 14.409 14.408 14.426 37.752.038 52.14-12.178 12.178-30.773 14.036-44.934 5.581-3.673 6.436-8.255 12.494-13.747 17.985l-47.065 47.066-77.583 77.583a36.9858 36.9858 0 0 0-5.206 6.541l-15.761 25.197c-3.206 5.125-6.75 10.464-12.384 12.655-7.89 3.068-17.198 1.412-23.575-4.965l-13.115-11.847-7.404-6.859-9.005-9.24c-8.604-8.604-5.834-20.208-1.015-30.609l13.314-23.061c-2.048-1.407-4.711-4.694-6.52-6.503-1.563-1.563-3.05-4.787-4.312-6.531L164.298 823.3c-6.512 8.418-20.241 9.852-28.845 1.247l-26.203-25.523c-8.604-8.604-15.4636-21.052-4.977-36.77l46.35-60.011c-.834-2.703-1.284-5.575-1.286-8.551l-.046-63.046c-.012-16.028 12.972-29.012 29-29 16.028.012 29.03 13.014 29.042 29.042l.011 14.834 47.367-47.367c5.48-5.48 11.522-10.054 17.942-13.722Z"
+					/>
+					<path
+						stroke="#000"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeWidth="6"
+						d="m342.193 779.767 47.065-47.066c5.492-5.491 10.074-11.549 13.747-17.985 14.161 8.455 32.756 6.597 44.934-5.581 14.388-14.388 14.371-37.732-.038-52.14-10.128-10.129-24.671-13.146-37.415-9.048-3.928-13.005-11.034-25.259-21.316-35.542l-14.163-14.162c-10.328-10.329-22.647-17.452-35.718-21.369 4.143-12.767 1.136-27.356-9.017-37.509-14.409-14.408-37.752-14.425-52.14-.038-12.227 12.227-14.051 30.923-5.479 45.106-6.42 3.668-12.462 8.242-17.942 13.722l-47.367 47.367-.011-14.834c-.012-16.028-13.014-29.03-29.042-29.042-16.028-.012-29.012 12.972-29 29l.046 63.046c.002 2.976.452 5.848 1.286 8.551l-46.35 60.011c-10.4866 15.718-3.627 28.166 4.977 36.77l26.203 25.523c8.604 8.605 22.333 7.171 28.845-1.247l15.329-21.172c1.262 1.744 2.749 4.968 4.312 6.531 1.809 1.809 4.472 5.096 6.52 6.503l-13.314 23.061c-4.819 10.401-7.589 22.005 1.015 30.609l9.005 9.24 7.404 6.859 13.115 11.847c6.377 6.377 15.685 8.033 23.575 4.965 5.634-2.191 9.178-7.53 12.384-12.655l15.761-25.197a36.9858 36.9858 0 0 1 5.206-6.541l39.815-39.815"
+					/>
+					<path
+						fill="#000"
+						d="M178.783 616.187c.001 1.657 1.345 3.001 3.002 3.002 1.657.002 2.999-1.341 2.998-2.997l-6-.005Zm-.009-12.009.009 12.009 6 .005-.009-12.009-6-.005ZM166.676 616.178c.001 1.657 1.345 3.001 3.002 3.003 1.657.001 2.999-1.341 2.998-2.998l-6-.005Zm-.009-12.008.009 12.008 6 .005-.009-12.009-6-.004Z"
+					/>
+					<path
+						fill="var(--accent,red)"
+						d="m308.738 613.92 62.5788 62.5788-9.3692 9.3692-62.5788-62.5788z"
+					/>
+					<path
+						fill="#000"
+						fillRule="evenodd"
+						d="M417.156 664.094c2.526 22.882-6.427 46.109-20.821 60.503l-43.655-43.655c9.604-9.727 9.566-25.397-.114-35.077l-13.194-13.194c-9.68-9.68-25.35-9.718-35.077-.114l-43.44-43.44c14.394-14.394 37.621-23.347 60.503-20.821 22.881 2.525 45.829 14.037 63.795 32.003s29.478 40.914 32.003 63.795Z"
+						clipRule="evenodd"
+					/>
+					<ellipse
+						className="origin-center rotate-45 animate-[blink_8s_infinite] [transform-box:fill-box]"
+						cx="349.096"
+						cy="714.26"
+						fill="#000"
+						rx="8.0911"
+						ry="8.0793"
+						transform="rotate(45 349.096 714.26)"
+					/>
+					<ellipse
+						className="origin-center rotate-45 animate-[blink_8s_infinite] [transform-box:fill-box]"
+						cx="272.202"
+						cy="637.366"
+						fill="#000"
+						rx="8.0911"
+						ry="8.0793"
+						transform="rotate(45 272.202 637.366)"
+					/>
+					<path
+						fill="#000"
+						d="M315.046 700.863c-5.805 5.806-19.327 5.352-27.1-2.421s-8.227-21.295-2.421-27.101c5.805-5.805 15.671-1.695 23.444 6.078 7.773 7.773 11.883 17.639 6.077 23.444Z"
+					/>
+					<path
+						stroke="#000"
+						strokeLinecap="round"
+						strokeWidth="6"
+						d="m197.373 866.873-8.485 8.485M214.369 883.869l-8.486 8.485M124.435 793.935l-8.485 8.485M141.43 810.93l-8.485 8.485"
+					/>
+					<path
+						stroke="#000"
+						strokeLinecap="round"
+						strokeWidth="5"
+						d="m193.5 732.5-5-376"
+					/>
+					<g className="balloon origin-center [transform-box:fill-box]">
+						<circle
+							fillOpacity=".5"
+							cx="188.5"
+							cy="184.5"
+							r="169"
+							fill="var(--accent,red)"
+							stroke="#000"
+							strokeWidth="6"
+						/>
+						<path
+							stroke="#fff"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeOpacity=".75"
+							strokeWidth="30"
+							d="M151.119 53.7383A135.997 135.997 0 0 0 83.5092 98.054a135.9978 135.9978 0 0 0-30.5146 74.858"
+						/>
+					</g>
+					<path
+						fill="var(--accent,red)"
+						fillOpacity=".5"
+						stroke="#000"
+						strokeLinejoin="round"
+						strokeWidth="6"
+						d="M172.5 355.5H204l9.5 20h-50l9-20Z"
+					/>
+					<path
+						stroke="#000"
+						strokeLinecap="round"
+						strokeWidth="6"
+						d="m147 668 62-42"
+					/>
+				</svg>
+			</div>
+		</>
+	)
+}
diff --git a/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx b/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
index 5631c20d2..2e35f7625 100644
--- a/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
+++ b/apps/craft-of-ui/src/components/primary-newsletter-cta.tsx
@@ -66,6 +66,9 @@ export const PrimaryNewsletterCta: React.FC<
 	const handleOnSuccess = (subscriber: Subscriber | undefined) => {
 		if (subscriber) {
 			track(trackProps.event as string, trackProps.params)
+			if (typeof window !== 'undefined' && (window as any).createFloatingBear) {
+				;(window as any).createFloatingBear(subscriber)
+			}
 			// No redirect - let the form handle inline success response
 		}
 	}
diff --git a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
index 9214646c0..01a32047a 100644
--- a/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
+++ b/apps/craft-of-ui/src/convertkit/convertkit-subscribe-form.tsx
@@ -413,7 +413,7 @@ export const SubscribeToConvertkitForm: React.FC<
 				{/* Success message */}
 				{status === 'success' && (
 					<div className="mt-8 flex flex-col items-center justify-center">
-						<p className="rounded-md border border-green-800 bg-green-200/10 p-2 text-green-800 dark:border-green-200 dark:text-green-200">
+						<p className="rounded-md border border-green-800 bg-green-200/10 p-2 text-center text-green-800 dark:border-green-200 dark:text-green-200">
 							<strong className="font-[500]">
 								Thanks{values.first_name ? ` ${values.first_name}` : ''}!
 							</strong>
diff --git a/apps/craft-of-ui/src/styles/globals.css b/apps/craft-of-ui/src/styles/globals.css
index bd73cea89..1d292cb8f 100644
--- a/apps/craft-of-ui/src/styles/globals.css
+++ b/apps/craft-of-ui/src/styles/globals.css
@@ -412,6 +412,12 @@
 	}
 }
 
+@keyframes float {
+	to {
+		translate: 0 calc(-100% + -100vh);
+	}
+}
+
 @keyframes bear-float-up {
 	0% {
 		transform: translateY(100%);
diff --git a/apps/craft-of-ui/tailwind.config.ts b/apps/craft-of-ui/tailwind.config.ts
index 2746f9a98..bac65f9d2 100644
--- a/apps/craft-of-ui/tailwind.config.ts
+++ b/apps/craft-of-ui/tailwind.config.ts
@@ -124,6 +124,9 @@ module.exports = {
 					'80%': { opacity: 1 },
 					'100%': { transform: 'translateY(-200vh)', opacity: 0 },
 				},
+				float: {
+					to: { translate: '0 calc(-100% + -100vh)' },
+				},
 			},
 			animation: {
 				'accordion-down': 'accordion-down 0.2s ease-out',
@@ -135,6 +138,7 @@ module.exports = {
 				move: 'move 1s ease-in-out',
 				'bear-float-up':
 					'bear-float-up 10s cubic-bezier(0.4, 0, 0.2, 1) forwards',
+				float: 'float var(--duration, 15s) linear 2s forwards',
 			},
 			typography: (theme: any) => ({
 				DEFAULT: {

From 74e2b39fb4a1a1731707202bb91c4f94ba6e740f Mon Sep 17 00:00:00 2001
From: Nicoll Guarnizo <nicoll.g4@gmail.com>
Date: Tue, 29 Jul 2025 19:20:57 -0500
Subject: [PATCH 10/10] fix prettier

---
 apps/craft-of-ui/src/components/jhey-profile.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/craft-of-ui/src/components/jhey-profile.tsx b/apps/craft-of-ui/src/components/jhey-profile.tsx
index fa2eabb83..b397dfaaf 100644
--- a/apps/craft-of-ui/src/components/jhey-profile.tsx
+++ b/apps/craft-of-ui/src/components/jhey-profile.tsx
@@ -15,11 +15,7 @@ export function JheyProfile() {
 					height={220}
 					priority
 				/>
-				<div
-					className="[&_p]:text-md leading-[1.5]
-				[&_h2]:mb-4 [&_h2]:mt-20 [&_h2]:font-serif [&_h2]:font-[600] [&_h2]:leading-none [&_h2]:[--font-level:1.8] [&_h2]:[--font-size-min:20]
-				[&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6"
-				>
+				<div className="[&_p]:text-md leading-[1.5] [&_h2]:mb-4 [&_h2]:mt-20 [&_h2]:font-serif [&_h2]:font-[600] [&_h2]:leading-none [&_h2]:[--font-level:1.8] [&_h2]:[--font-size-min:20] [&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6">
 					<p>
 						I’m a web developer who loves making the web feel magical whilst
 						showing others how to do the same.