Add EpicAI.pro course as primary focus to courses page and course section

Co-authored-by: kentcdodds <1500684+kentcdodds@users.noreply.github.com>

Author: Copilot

app/components/sections/course-section.tsx

@@ -15,14 +15,25 @@ function CourseSection() {
 			/>
 			<Grid className="!grid-cols-12 gap-6 @container/grid md:gap-6 xl:gap-8">
 				<div className="col-span-full @container">
+					<CourseCard
+						title="Epic AI"
+						description="Learn to build AI-powered applications."
+						label="AI development course"
+						lightImageBuilder={images.courseEpicAILight}
+						darkImageBuilder={images.courseEpicAIDark}
+						courseUrl="https://www.epicai.pro"
+						horizontal
+					/>
+				</div>
+
+				<div className="col-span-full @container @2xl:col-span-6">
 					<CourseCard
 						title="Epic Web"
 						description="Become a full stack web dev."
 						label="Full stack course"
 						lightImageBuilder={images.courseEpicWebLight}
 						darkImageBuilder={images.courseEpicWebDark}
 						courseUrl="https://www.epicweb.dev"
-						horizontal
 					/>
 				</div>
 

app/images.tsx

@@ -53,6 +53,7 @@ const epicWebClassName =
 const epicReactClassName = 'h-[82%]'
 const testingJSClassName =
 	'h-[94%] -translate-y-[8%] dark:-translate-x-[0.6%] dark:h-[98%] dark:-translate-y-[6%]'
+const epicAIClassName = 'h-[80%] -translate-y-[8%]'
 
 const images = createImages({
 	kentSignatureDarkMode: {
@@ -459,6 +460,16 @@ const images = createImages({
 		alt: 'The EpicWeb.dev logo',
 		className: epicWebClassName,
 	},
+	courseEpicAILight: {
+		id: 'kentcdodds.com/pages/courses/v2/epic-ai-light',
+		alt: 'The EpicAI.pro logo',
+		className: epicAIClassName,
+	},
+	courseEpicAIDark: {
+		id: 'kentcdodds.com/pages/courses/v2/epic-ai-dark',
+		alt: 'The EpicAI.pro logo',
+		className: epicAIClassName,
+	},
 	courseHowToContributeToAnOpenSourceProjectOnGitHub: {
 		id: 'kentcdodds.com/pages/courses/how-to-contribute-to-an-open-source-project-on-github',
 		alt: 'Illustration for How to Contribute to an Open Source Project on GitHub',

app/routes/courses.tsx

@@ -112,6 +112,17 @@ function CoursesHome() {
 			</h2>
 
 			<Grid className="!grid-cols-12 gap-6 @container/grid md:gap-6 xl:gap-8">
+				<div className="col-span-full @container">
+					<CourseCard
+						title="Epic AI"
+						description="Learn to architect next-generation, AI-powered applications that are adaptive, context-aware, and deeply personalized using the Model Context Protocol (MCP)."
+						label="AI development course"
+						lightImageBuilder={images.courseEpicAILight}
+						darkImageBuilder={images.courseEpicAIDark}
+						courseUrl="https://www.epicai.pro"
+						horizontal
+					/>
+				</div>
 				<div className="col-span-full @container">
 					<CourseCard
 						title="Epic Web"