Add optional what's included section to product pages

Author: zackproser

src/components/ProductLanding.tsx

@@ -8,6 +8,7 @@ import { Pricing } from '@/components/Pricing'
 import { TableOfContents } from '@/components/TableOfContents'
 import { CanvasPattern } from '@/components/CanvasPattern'
 import { RealTestimonials } from '@/components/RealTestimonials'
+import { WhatsIncluded } from '@/components/WhatsIncluded'
 import { Content } from '@/types'
 import RenderNumYearsExperience from '@/components/NumYearsExperience'
 import Image from 'next/image'
@@ -107,7 +108,8 @@ export function ProductLanding({ content }: { content: Content }) {
         description: 'One-time purchase with unlimited future access'
       }
     ],
-    testimonials: []
+    testimonials: [],
+    whatsIncluded: []
   };
 
   // Use provided landing data or fallback to default
@@ -147,6 +149,16 @@ export function ProductLanding({ content }: { content: Content }) {
           description={safeDescription}
           features={landingData.features}
         />
+        
+        {/* What's Included Section - only render if whatsIncluded data exists */}
+        {landingData?.whatsIncluded && landingData.whatsIncluded.length > 0 && (
+          <WhatsIncluded 
+            items={landingData.whatsIncluded}
+            sectionTitle="What's Included"
+            sectionSubtitle="Everything you need to build production-ready solutions"
+          />
+        )}
+        
         <NavBar />
         <TableOfContents content={content} />
         <FreeChapters 

src/components/WhatsIncluded.tsx

@@ -0,0 +1,78 @@
+import Image from 'next/image'
+import { StaticImageData } from 'next/image'
+
+interface WhatsIncludedItem {
+  title: string
+  description: string
+  image: string | StaticImageData
+  imageAlt?: string
+}
+
+interface WhatsIncludedProps {
+  items: WhatsIncludedItem[]
+  sectionTitle?: string
+  sectionSubtitle?: string
+}
+
+export function WhatsIncluded({ 
+  items, 
+  sectionTitle = "What's Included",
+  sectionSubtitle = "Everything you need to build production-ready solutions"
+}: WhatsIncludedProps) {
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="py-16 sm:py-24">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        {/* Section Header */}
+        <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-4xl">
+            {sectionTitle}
+          </h2>
+          <p className="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">
+            {sectionSubtitle}
+          </p>
+        </div>
+
+        {/* Items */}
+        <div className="mx-auto mt-16 max-w-7xl">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className={`flex flex-col gap-8 lg:gap-16 ${
+                index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
+              } items-center ${index > 0 ? 'mt-16 lg:mt-24' : ''}`}
+            >
+              {/* Image */}
+              <div className="w-full lg:w-1/2">
+                <div className="relative overflow-hidden rounded-2xl bg-slate-50 dark:bg-slate-800/60 p-8">
+                  <Image
+                    src={item.image}
+                    alt={item.imageAlt || item.title}
+                    className="h-auto w-full object-cover rounded-xl"
+                    width={600}
+                    height={400}
+                  />
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="w-full lg:w-1/2">
+                <div className="max-w-xl">
+                  <h3 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white sm:text-3xl">
+                    {item.title}
+                  </h3>
+                  <p className="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-300">
+                    {item.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+} 

src/components/__tests__/WhatsIncluded.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen } from '@testing-library/react'
+import { WhatsIncluded } from '../WhatsIncluded'
+
+// Mock Next.js Image component
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ src, alt, ...props }: any) => (
+    <img src={src} alt={alt} {...props} />
+  ),
+}))
+
+describe('WhatsIncluded', () => {
+  const mockItems = [
+    {
+      title: 'Interactive Jupyter Notebook',
+      description: 'A complete, ready-to-run notebook that walks you through data processing.',
+      image: '/images/test-notebook.webp',
+      imageAlt: 'Jupyter Notebook interface'
+    },
+    {
+      title: 'Next.js Application',
+      description: 'Full source code for a modern web application.',
+      image: '/images/test-app.webp',
+      imageAlt: 'Next.js application'
+    }
+  ]
+
+  it('renders nothing when no items provided', () => {
+    const { container } = render(<WhatsIncluded items={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders section title and subtitle', () => {
+    render(<WhatsIncluded items={mockItems} />)
+    
+    expect(screen.getByText("What's Included")).toBeInTheDocument()
+    expect(screen.getByText("Everything you need to build production-ready solutions")).toBeInTheDocument()
+  })
+
+  it('renders custom section title and subtitle', () => {
+    render(
+      <WhatsIncluded 
+        items={mockItems} 
+        sectionTitle="Custom Title"
+        sectionSubtitle="Custom subtitle"
+      />
+    )
+    
+    expect(screen.getByText("Custom Title")).toBeInTheDocument()
+    expect(screen.getByText("Custom subtitle")).toBeInTheDocument()
+  })
+
+  it('renders all items with correct content', () => {
+    render(<WhatsIncluded items={mockItems} />)
+    
+    // Check first item
+    expect(screen.getByText('Interactive Jupyter Notebook')).toBeInTheDocument()
+    expect(screen.getByText('A complete, ready-to-run notebook that walks you through data processing.')).toBeInTheDocument()
+    
+    // Check second item
+    expect(screen.getByText('Next.js Application')).toBeInTheDocument()
+    expect(screen.getByText('Full source code for a modern web application.')).toBeInTheDocument()
+  })
+
+  it('renders images with correct alt text', () => {
+    render(<WhatsIncluded items={mockItems} />)
+    
+    const images = screen.getAllByRole('img')
+    expect(images).toHaveLength(2)
+    
+    expect(screen.getByAltText('Jupyter Notebook interface')).toBeInTheDocument()
+    expect(screen.getByAltText('Next.js application')).toBeInTheDocument()
+  })
+
+  it('uses title as alt text when imageAlt is not provided', () => {
+    const itemsWithoutAlt = [
+      {
+        title: 'Test Item',
+        description: 'Test description',
+        image: '/images/test.webp'
+      }
+    ]
+    
+    render(<WhatsIncluded items={itemsWithoutAlt} />)
+    
+    expect(screen.getByAltText('Test Item')).toBeInTheDocument()
+  })
+
+  it('applies alternating layout classes correctly', () => {
+    render(<WhatsIncluded items={mockItems} />)
+    
+    const itemContainers = screen.getAllByText(/Interactive Jupyter Notebook|Next.js Application/).map(
+      el => el.closest('.flex')
+    )
+    
+    // First item should have lg:flex-row
+    expect(itemContainers[0]).toHaveClass('lg:flex-row')
+    
+    // Second item should have lg:flex-row-reverse  
+    expect(itemContainers[1]).toHaveClass('lg:flex-row-reverse')
+  })
+}) 

src/content/blog/rag-pipeline-tutorial/page.mdx

@@ -3,9 +3,9 @@ import Link from 'next/link';
 
 import ragPipelineTutorialLogo from '@/images/rag-chatbot.webp';
 import ragProfileImage from '@/images/rag-chatbot-profile.webp';
-import customRagChat from '@/images/custom-rag-chat-screenshot.webp'
-import customRagFlowchart from '@/images/chat-with-blog-flowchart.webp';
-import googleColabSecrets from '@/images/rag-tutorial-colab-secrets.webp';
+import customRagChat from '@/images/rag-pipeline-ui.webp'
+import customRagFlowchart from '@/images/rag-pipeline-tutorial.webp';
+import googleColabSecrets from '@/images/rag-pipeline-jupyter.webp';
 import cloneExampleSite from '@/images/rag-pipeline-tutorial-clone-example-site.webp';
 import docsSanity from '@/images/rag-tutorial-docs-sanity.webp';
 import queryIndex from '@/images/rag-pipeline-tutorial-query-index.webp';
@@ -23,12 +23,12 @@ export const metadata = createMetadata({
     image: ragPipelineTutorialLogo,
     commerce: {
         isPaid: true,
-        price: 49,
+        price: 149,
         previewLength: 450,
         previewElements: 32,
         paywallHeader: "Master RAG Development: The Complete Package",
         paywallBody: "Get everything you need to build production-ready RAG applications: a step-by-step tutorial, ready-to-use Jupyter notebook for data processing, and a complete Next.js example site. Perfect for developers who want to add the most in-demand Gen AI skill to their toolkit.",
-        buttonText: "Get the complete package ($49)",
+        buttonText: "Get the complete package ($149)",
         miniPaywallTitle: "Master RAG pipeline creation",
         miniPaywallDescription: "Includes a Jupyter Notebook, a Next.js example site, and a step-by-step tutorial.",
         paywallImage: ragPipelineElements,
@@ -58,6 +58,26 @@ export const metadata = createMetadata({
                 description: "Learn how to ground AI responses in your actual content for accurate, trustworthy results"
             }
         ],
+        whatsIncluded: [
+            {
+                title: "Interactive Jupyter Notebook",
+                description: "A complete, ready-to-run notebook that walks you through data processing, embedding creation, and vector database setup. Simply add your API keys and run each cell to process your own content. Includes detailed explanations of chunking strategies, embedding techniques, and Pinecone integration.",
+                image: googleColabSecrets,
+                imageAlt: "Jupyter Notebook interface showing data processing and vector database creation"
+            },
+            {
+                title: "Production-Ready Next.js Application",
+                description: "Full source code for a modern web application built with the Vercel AI SDK. Features streaming responses, citation support, related content suggestions, and a beautiful chat interface. Deploy it to Vercel with one click or run it locally for development.",
+                image: customRagChat,
+                imageAlt: "Next.js chat application with streaming responses and citations"
+            },
+            {
+                title: "Comprehensive Step-by-Step Tutorial",
+                description: "Detailed written guide that explains every concept, from RAG fundamentals to advanced implementation patterns. Learn not just how to build it, but why each piece works and how to customize it for your specific use case. Perfect for developers who want to truly understand the technology.",
+                image: customRagFlowchart,
+                imageAlt: "RAG pipeline architecture diagram showing the complete system flow"
+            }
+        ],
         contentSections: [
             {
                 title: "Getting Started",

src/images/rag-pipeline-jupyter.webp

@@ -35,6 +35,12 @@ export interface ExtendedMetadata extends Metadata {
       description: string
       icon?: string
     }>
+    whatsIncluded?: Array<{
+      title: string
+      description: string
+      image: string | StaticImageData
+      imageAlt?: string
+    }>
     contentSections?: Array<{
       title: string
       subsections?: Array<string>