feat: Add optional hero background image to tutorial pages

- Add hero_image field to tutorials schema in content config
- Update TutorialLayout to conditionally render background image when specified
- Position image on right 60% with gradient overlay (opaque left -> transparent right)
- Add hero image to initial-setup-jetson-orin-nano tutorial as example
- Background blurs reduce opacity when hero image is present

Each tutorial can now optionally specify a hero_image in frontmatter to display
a background image with gradient overlay, keeping text readable on the left.

Author: tokk-nv

public/images/hero/isometric_jon.png …lic/images/hero/isometric_jon-devkit.pngpublic/images/hero/isometric_jon.png renamed to public/images/hero/isometric_jon-devkit.png public/images/hero/isometric_jon.png renamed to public/images/hero/isometric_jon-devkit.png

@@ -12,6 +12,7 @@ const tutorials = defineCollection({
     model: z.string().optional(),
     featured: z.boolean().optional(),
     isNew: z.boolean().optional(), // Mark as new tutorial
+    hero_image: z.string().optional(), // Optional background image for hero section
   }),
 });
 

src/content/config.ts

@@ -5,6 +5,7 @@ category: "Setup"
 section: "Jetson Setup"
 order: 1
 tags: ["setup", "jetson", "orin-nano", "jetpack", "firmware", "microsd", "getting-started"]
+hero_image: "/images/hero/isometric_jon-devkit.png"
 ---
 
 > This guide supplements the official [Jetson Orin Nano Developer Kit Getting Started Guide](https://developer.nvidia.com/embedded/learn/get-started-jetson-orin-nano-devkit).

src/content/tutorials/initial-setup-jetson-orin-nano.md

@@ -20,24 +20,45 @@ const { Content, headings } = await tutorial.render();
 <Layout title={tutorial.data.title} description={tutorial.data.description}>
 	<div class="bg-white min-h-screen">
 		<!-- Hero Section -->
-		<div class="bg-slate-900 text-white border-b border-slate-800">
+		<div class="bg-slate-900 text-white border-b border-slate-800 relative">
+			{tutorial.data.hero_image && (
+				<>
+					<!-- Background Image with Gradient Overlay -->
+					<div class="absolute inset-y-0 right-0 w-3/5 overflow-hidden">
+						<img
+							src={tutorial.data.hero_image}
+							alt={tutorial.data.title}
+							class="w-full h-full object-cover object-center opacity-40"
+						/>
+					</div>
+					<!-- Gradient overlay: opaque left to semi-transparent right -->
+					<div class="absolute inset-0 bg-gradient-to-r from-slate-900 via-slate-900/90 via-60% to-transparent"></div>
+				</>
+			)}
+
 			<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative overflow-hidden">
-				<!-- Background pattern -->
-				<div class="absolute top-0 right-0 -mt-20 -mr-20 w-96 h-96 bg-nvidia-green/10 rounded-full blur-3xl"></div>
-				<div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
-				
+				<!-- Background pattern (subtle when image present) -->
+				<div class:list={[
+					"absolute top-0 right-0 -mt-20 -mr-20 w-96 h-96 rounded-full blur-3xl",
+					tutorial.data.hero_image ? "bg-nvidia-green/5" : "bg-nvidia-green/10"
+				]}></div>
+				<div class:list={[
+					"absolute bottom-0 left-0 -mb-20 -ml-20 w-80 h-80 rounded-full blur-3xl",
+					tutorial.data.hero_image ? "bg-blue-500/5" : "bg-blue-500/10"
+				]}></div>
+
 				<div class="relative z-10 max-w-3xl">
 					<div class="flex items-center gap-4 mb-6 text-sm font-medium text-nvidia-green">
 						<a href="/tutorials" class="hover:text-white transition-colors flex items-center gap-1">
 							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
 							Back to Tutorials
 						</a>
 					</div>
-					
+
 					<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight leading-tight">
 						{tutorial.data.title}
 					</h1>
-					
+
 					<p class="text-xl text-slate-300 mb-8 leading-relaxed max-w-2xl">
 						{tutorial.data.description}
 					</p>
@@ -55,15 +76,15 @@ const { Content, headings } = await tutorial.render();
 						</h3>
 						<nav class="space-y-1">
 							{headings.filter(h => h.depth <= 2).map((heading) => (
-								<a 
+								<a
 									href={`#${heading.slug}`}
 									class="block py-1.5 text-sm text-slate-600 hover:text-nvidia-green hover:pl-1 transition-all duration-200 border-l-2 border-transparent hover:border-nvidia-green pl-3 -ml-3"
 								>
 									{heading.text}
 								</a>
 							))}
 						</nav>
-						
+
 						<div class="mt-8 pt-8 border-t border-slate-200">
 							<h3 class="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-4">
 								Resources
@@ -84,7 +105,7 @@ const { Content, headings } = await tutorial.render();
 
 				<!-- Main Content -->
 				<main class="lg:col-span-9">
-					<div class="prose prose-slate prose-lg max-w-none 
+					<div class="prose prose-slate prose-lg max-w-none
 						prose-headings:font-bold prose-headings:tracking-tight prose-headings:text-slate-900
 						prose-p:text-slate-600 prose-p:leading-relaxed
 						prose-a:text-nvidia-green prose-a:no-underline hover:prose-a:underline
@@ -126,7 +147,7 @@ const { Content, headings } = await tutorial.render();
 	:global(.prose h2), :global(.prose h3) {
 		position: relative;
 	}
-	
+
 	html {
 		scroll-behavior: smooth;
 		scroll-padding-top: 100px;