major changes

.claude/settings.local.json

@@ -3,7 +3,14 @@
     "allow": [
       "Bash(npm install:*)",
       "Bash(npm run build:*)",
-      "Bash(npm run dev:*)"
+      "Bash(npm run dev:*)",
+      "WebSearch",
+      "mcp__fetch__imageFetch",
+      "mcp__puppeteer__puppeteer_navigate",
+      "mcp__puppeteer__puppeteer_screenshot",
+      "mcp__puppeteer__puppeteer_fill",
+      "mcp__puppeteer__puppeteer_evaluate",
+      "mcp__puppeteer__puppeteer_click"
     ],
     "deny": [],
     "ask": []

app/api/export-pptx/route.ts

@@ -36,45 +36,125 @@ export async function POST(request: NextRequest) {
     slides.forEach((slideData, index) => {
       const slide = pres.addSlide();
 
-      // Add title
+      // Add gradient background (Gamma AI style)
+      slide.background = {
+        fill: {
+          type: 'gradient',
+          dir: 45,
+          colors: [
+            { position: 0, color: '667eea' },   // Purple-blue
+            { position: 50, color: '764ba2' },  // Purple
+            { position: 100, color: 'f093fb' } // Pink
+          ]
+        }
+      };
+
+      // Add subtle pattern overlay
+      slide.addShape('rect', {
+        x: 0,
+        y: 0,
+        w: 10,
+        h: 5.625,
+        fill: {
+          type: 'pattern',
+          pattern: 'dots',
+          fgColor: 'FFFFFF',
+          bgColor: 'FFFFFF'
+        },
+        transparency: 95
+      });
+
+      // Add title with modern styling
       slide.addText(slideData.title, {
         x: 0.5,
-        y: 0.5,
+        y: 0.8,
         w: 9,
-        h: 1,
-        fontSize: 32,
+        h: 1.2,
+        fontSize: 36,
         bold: true,
-        color: '363636',
-        align: 'center',
+        color: 'FFFFFF',
+        align: 'left',
+        fontFace: 'Segoe UI',
+        shadow: {
+          type: 'outer',
+          color: '000000',
+          blur: 8,
+          offset: 2,
+          angle: 45,
+          opacity: 30
+        }
       });
 
-      // Add content points
+      // Add content points with modern styling
       if (slideData.content && slideData.content.length > 0) {
-        const contentText = slideData.content
-          .map(point => `• ${point}`)
-          .join('\n');
-
-        slide.addText(contentText, {
-          x: 1,
-          y: 2,
-          w: 8,
-          h: 3,
-          fontSize: 18,
-          color: '363636',
-          lineSpacing: 32,
-          valign: 'top',
+        slideData.content.forEach((point, pointIndex) => {
+          // Add bullet point with gradient accent
+          slide.addShape('circle', {
+            x: 0.8,
+            y: 2.2 + (pointIndex * 0.6),
+            w: 0.15,
+            h: 0.15,
+            fill: {
+              type: 'gradient',
+              dir: 45,
+              colors: [
+                { position: 0, color: 'ff6b6b' },   // Coral
+                { position: 100, color: 'feca57' }  // Yellow
+              ]
+            }
+          });
+
+          // Add content text
+          slide.addText(point, {
+            x: 1.2,
+            y: 2.1 + (pointIndex * 0.6),
+            w: 7.8,
+            h: 0.5,
+            fontSize: 18,
+            color: 'FFFFFF',
+            fontFace: 'Segoe UI',
+            valign: 'middle',
+            shadow: {
+              type: 'outer',
+              color: '000000',
+              blur: 4,
+              offset: 1,
+              angle: 45,
+              opacity: 20
+            }
+          });
         });
       }
 
-      // Add slide number
+      // Add slide number with modern badge style
+      slide.addShape('roundRect', {
+        x: 9.0,
+        y: 4.9,
+        w: 0.8,
+        h: 0.4,
+        fill: {
+          type: 'gradient',
+          dir: 90,
+          colors: [
+            { position: 0, color: '000000' },
+            { position: 100, color: '333333' }
+          ]
+        },
+        transparency: 30,
+        rectRadius: 0.2
+      });
+
       slide.addText(`${index + 1}`, {
-        x: 9.2,
-        y: 5,
-        w: 0.5,
-        h: 0.3,
-        fontSize: 12,
-        color: '999999',
+        x: 9.0,
+        y: 4.9,
+        w: 0.8,
+        h: 0.4,
+        fontSize: 14,
+        color: 'FFFFFF',
         align: 'center',
+        valign: 'middle',
+        bold: true,
+        fontFace: 'Segoe UI'
       });
 
       // Add speaker notes if available

app/api/unsplash-download/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const downloadUrl = searchParams.get('url');
+
+  if (!downloadUrl) {
+    return NextResponse.json({ error: 'Download URL is required' }, { status: 400 });
+  }
+
+  try {
+    // Trigger download tracking as required by Unsplash API
+    const response = await fetch(downloadUrl, {
+      headers: {
+        'Authorization': `Client-ID ${process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY}`,
+      },
+    });
+
+    if (!response.ok) {
+      console.error('Failed to track download:', response.statusText);
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Error tracking download:', error);
+    return NextResponse.json({ error: 'Failed to track download' }, { status: 500 });
+  }
+}

app/editor/page.tsx

@@ -1,150 +1,1363 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { renderSlide, type SlideSpec } from '@/components/slides/SlideFactory';
-
-interface PresentationData {
-  theme: string;
-  slides: SlideSpec[];
-}
-
-export default function EditorPage() {
-  const [presentation, setPresentation] = useState<PresentationData | null>(null);
-  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
-
-  useEffect(() => {
-    // Load presentation data from sessionStorage
-    const savedPresentation = sessionStorage.getItem('currentPresentation');
-    if (savedPresentation) {
-      try {
-        const data = JSON.parse(savedPresentation);
-        setPresentation(data);
-      } catch (error) {
-        console.error('Error parsing presentation data:', error);
-      }
-    }
-  }, []);
-
-  if (!presentation || !presentation.slides.length) {
-    return (
-      <div className="min-h-dvh w-full bg-gradient-to-b from-white to-gray-50 text-gray-900 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-2xl font-semibold mb-4">No presentation data found</h1>
-          <p className="text-gray-600">Please generate a presentation first.</p>
-          <button onClick={() => window.location.href = '/'} className="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-            Go back to home
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  const currentSlide = presentation.slides[currentSlideIndex];
-
-  return (
-    <div className="min-h-dvh w-full bg-gradient-to-b from-white to-gray-50 text-gray-900">
-      {/* Ribbon */}
-      <div className="border-b border-gray-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/80">
-        <div className="mx-auto max-w-[1400px] px-4">
-          <div className="flex items-center gap-3 py-2">
-            <div className="text-sm font-semibold text-orange-600">FILE</div>
-            <div className="flex items-center gap-5 text-xs text-gray-700">
-              <span className="font-semibold text-blue-700">HOME</span>
-              <span>INSERT</span>
-              <span>DESIGN</span>
-              <span>TRANSITIONS</span>
-              <span>ANIMATIONS</span>
-              <span>SLIDE SHOW</span>
-              <span>REVIEW</span>
-              <span>VIEW</span>
-            </div>
-          </div>
-          <div className="grid grid-cols-12 gap-4 py-2 pb-3">
-            <div className="col-span-2">
-              <div className="text-xs font-medium text-gray-600 mb-1">Clipboard</div>
-              <div className="h-10 rounded-md border border-gray-200 bg-white" />
-            </div>
-            <div className="col-span-2">
-              <div className="text-xs font-medium text-gray-600 mb-1">Slides</div>
-              <div className="h-10 rounded-md border border-gray-200 bg-white" />
-            </div>
-            <div className="col-span-3">
-              <div className="text-xs font-medium text-gray-600 mb-1">Font</div>
-              <div className="h-10 rounded-md border border-gray-200 bg-white" />
-            </div>
-            <div className="col-span-3">
-              <div className="text-xs font-medium text-gray-600 mb-1">Paragraph</div>
-              <div className="h-10 rounded-md border border-gray-200 bg-white" />
-            </div>
-            <div className="col-span-2">
-              <div className="text-xs font-medium text-gray-600 mb-1">Drawing</div>
-              <div className="h-10 rounded-md border border-gray-200 bg-white" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Body */}
-      <div className="mx-auto max-w-[1400px] px-4 py-6">
-        <div className="flex gap-6">
-          {/* Thumbnails */}
-          <div className="w-[220px] shrink-0 border-r border-gray-200 pr-4">
-            <div className="text-sm text-gray-600 mb-2">Slides ({presentation.slides.length})</div>
-            <div className="space-y-3">
-              {presentation.slides.map((slide, index) => (
-                <div
-                  key={slide.id}
-                  onClick={() => setCurrentSlideIndex(index)}
-                  className={`relative h-[140px] w-full rounded cursor-pointer transition-all overflow-hidden ${
-                    index === currentSlideIndex
-                      ? 'border-2 border-orange-400 bg-white shadow-lg'
-                      : 'border border-gray-300 bg-gray-50 hover:border-gray-400'
-                  } shadow-[inset_0_0_0_1px_rgba(0,0,0,0.04)]`}
-                >
-                  <div className="w-full h-full scale-[0.16] origin-top-left transform">
-                    <div className="w-[875px] h-[625px]">
-                      {renderSlide(slide, presentation.theme as 'dark' | 'light')}
-                    </div>
-                  </div>
-                  <div className="absolute bottom-1 left-1 text-xs text-gray-500 bg-white px-1 rounded">
-                    {index + 1}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Canvas */}
-          <div className="flex-1 overflow-auto">
-            <div className="relative mx-auto aspect-[16/10] w-[1100px] rounded bg-white shadow-md border border-gray-200">
-              {currentSlide && renderSlide(currentSlide, presentation.theme as 'dark' | 'light')}
-            </div>
-
-            {/* Navigation Controls */}
-            <div className="flex justify-center gap-4 mt-6">
-              <button
-                onClick={() => setCurrentSlideIndex(Math.max(0, currentSlideIndex - 1))}
-                disabled={currentSlideIndex === 0}
-                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400 disabled:cursor-not-allowed hover:bg-blue-700"
-              >
-                Previous
-              </button>
-              <span className="px-4 py-2 text-gray-600">
-                {currentSlideIndex + 1} of {presentation.slides.length}
-              </span>
-              <button
-                onClick={() => setCurrentSlideIndex(Math.min(presentation.slides.length - 1, currentSlideIndex + 1))}
-                disabled={currentSlideIndex === presentation.slides.length - 1}
-                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400 disabled:cursor-not-allowed hover:bg-blue-700"
-              >
-                Next
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { renderSlide, type SlideSpec } from '@/components/slides/SlideFactory';
+import UnsplashImageSearch from '@/components/UnsplashImageSearch';
+import { professionalTemplates, createTemplateSlides, type Template } from '@/data/templates';
+import {
+  Trash2, Palette, Plus, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight,
+  ChevronDown, Type, Paintbrush, Image, Upload, Download, Home, FileText, Presentation,
+  Play, X, ArrowLeft, ArrowRight, Pause
+} from 'lucide-react';
+
+interface PresentationData {
+  theme: string;
+  slides: SlideSpec[];
+}
+
+  type Theme = 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+
+const themes: { name: Theme; label: string; colors: string }[] = [
+  { name: 'dark', label: 'Dark', colors: 'bg-gradient-to-br from-gray-800 to-gray-900 text-white' },
+  { name: 'light', label: 'Light', colors: 'bg-white text-gray-900' },
+  { name: 'blue', label: 'Ocean Blue', colors: 'bg-gradient-to-br from-blue-600 to-blue-800 text-white' },
+  { name: 'purple', label: 'Royal Purple', colors: 'bg-gradient-to-br from-purple-600 to-purple-800 text-white' },
+  { name: 'green', label: 'Forest Green', colors: 'bg-gradient-to-br from-green-600 to-green-800 text-white' },
+  { name: 'orange', label: 'Sunset Orange', colors: 'bg-gradient-to-br from-orange-600 to-orange-800 text-white' },
+  { name: 'teal', label: 'Ocean Teal', colors: 'bg-gradient-to-br from-teal-600 to-cyan-700 text-white' },
+  { name: 'pink', label: 'Rose Pink', colors: 'bg-gradient-to-br from-pink-600 to-rose-700 text-white' },
+  { name: 'indigo', label: 'Deep Indigo', colors: 'bg-gradient-to-br from-indigo-600 to-purple-700 text-white' },
+  { name: 'amber', label: 'Golden Amber', colors: 'bg-gradient-to-br from-amber-500 to-orange-600 text-white' },
+  { name: 'emerald', label: 'Emerald Mint', colors: 'bg-gradient-to-br from-emerald-500 to-teal-600 text-white' },
+   { name: 'slate', label: 'Modern Slate', colors: 'bg-gradient-to-br from-slate-700 to-gray-800 text-white' },
+   { name: 'midnight', label: 'Midnight Indigo', colors: 'bg-gradient-to-br from-indigo-900 to-slate-900 text-white' },
+   { name: 'sunset', label: 'Sunset Orange', colors: 'bg-gradient-to-br from-orange-600 to-amber-500 text-white' },
+];
+
+const googleFonts = [
+  { name: 'Inter', family: 'var(--font-inter)', label: 'Inter' },
+  { name: 'Roboto', family: 'var(--font-roboto)', label: 'Roboto' },
+  { name: 'Open Sans', family: 'var(--font-open-sans)', label: 'Open Sans' },
+  { name: 'Lato', family: 'var(--font-lato)', label: 'Lato' },
+  { name: 'Montserrat', family: 'var(--font-montserrat)', label: 'Montserrat' },
+  { name: 'Poppins', family: 'var(--font-poppins)', label: 'Poppins' },
+  { name: 'Playfair Display', family: 'var(--font-playfair)', label: 'Playfair Display' },
+  { name: 'Merriweather', family: 'var(--font-merriweather)', label: 'Merriweather' },
+  { name: 'Geist Sans', family: 'var(--font-geist-sans)', label: 'Geist Sans' },
+];
+
+const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
+
+const colors = [
+  '#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF',
+  '#800000', '#008000', '#000080', '#808000', '#800080', '#008080', '#C0C0C0', '#808080',
+  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'
+];
+
+const layouts = [
+  { id: 'title', name: 'Title Slide', description: 'Title and subtitle', icon: '📰' },
+  { id: 'hero', name: 'Hero Slide', description: 'Large impactful title', icon: '🎯' },
+  { id: 'content-image', name: 'Content + Image', description: 'Text with image', icon: '🖼️' },
+  { id: 'bullets', name: 'Bullet Points', description: 'Bulleted list', icon: '📝' },
+  { id: 'chart', name: 'Chart', description: 'Data visualization', icon: '📊' },
+  { id: 'stats', name: 'Stats Display', description: 'Key metrics and numbers', icon: '📈' },
+  { id: 'two-column', name: 'Two Column', description: 'Side-by-side content', icon: '📄' },
+  { id: 'image-only', name: 'Image Focus', description: 'Large image with caption', icon: '🖼️' },
+  { id: 'quote', name: 'Quote Slide', description: 'Large quote with author', icon: '💬' },
+  { id: 'section', name: 'Section Header', description: 'Section divider', icon: '🏷️' },
+  { id: 'comparison', name: 'Comparison', description: 'Compare two items', icon: '⚖️' }
+];
+
+export default function EditorPage() {
+  const [presentation, setPresentation] = useState<PresentationData | null>(null);
+  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
+  const [showThemeSelector, setShowThemeSelector] = useState(false);
+  const [editingField, setEditingField] = useState<{ slideId: string; field: string; index?: number } | null>(null);
+
+  // Formatting states
+  const [selectedFont, setSelectedFont] = useState('Inter');
+  const [selectedFontSize, setSelectedFontSize] = useState(16);
+  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [alignment, setAlignment] = useState<'left' | 'center' | 'right'>('left');
+
+  // UI states
+  const [showFontDropdown, setShowFontDropdown] = useState(false);
+  const [showFontSizeDropdown, setShowFontSizeDropdown] = useState(false);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [showImageUpload, setShowImageUpload] = useState(false);
+  const [showUnsplashSearch, setShowUnsplashSearch] = useState(false);
+  const [showHomeWarning, setShowHomeWarning] = useState(false);
+  const [selectedTextElement, setSelectedTextElement] = useState<any>(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [showLayoutSelector, setShowLayoutSelector] = useState(false);
+  const [showTemplateSelector, setShowTemplateSelector] = useState(false);
+
+  // Homepage-style background noise
+  const noiseSvg = "<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(#n)' opacity='0.35'/></svg>";
+  const noiseDataUrl = `url('data:image/svg+xml;utf8,${encodeURIComponent(noiseSvg)}')`;
+
+  // Handle text selection from slides
+  const handleTextSelection = (element: any) => {
+    setSelectedTextElement(element);
+    if (element) {
+      setSelectedFont(element.currentFont || 'Inter');
+      setSelectedFontSize(element.currentFontSize || 16);
+      setSelectedColor(element.currentColor || '#000000');
+
+      // Update formatting states based on current element formatting
+      const currentSlide = presentation?.slides.find(s => s.id === element.slideId);
+      if (currentSlide?.formatting?.[element.field]) {
+        const formatting = currentSlide.formatting[element.field];
+        setIsBold(formatting.bold || false);
+        setIsItalic(formatting.italic || false);
+        setIsUnderline(formatting.underline || false);
+      } else {
+        setIsBold(false);
+        setIsItalic(false);
+        setIsUnderline(false);
+      }
+    }
+  };
+
+  // Apply formatting to selected text
+  const applyTextFormatting = (property: string, value: any) => {
+    if (!selectedTextElement || !presentation) return;
+
+    const { slideId, field } = selectedTextElement;
+    const slideIndex = presentation.slides.findIndex(s => s.id === slideId);
+
+    if (slideIndex === -1) return;
+
+    const updatedSlides = [...presentation.slides];
+    const slide = { ...updatedSlides[slideIndex] };
+
+    // Store formatting data
+    if (!slide.formatting) {
+      slide.formatting = {};
+    }
+    if (!slide.formatting[field]) {
+      slide.formatting[field] = {};
+    }
+
+    slide.formatting[field][property] = value;
+    updatedSlides[slideIndex] = slide;
+
+    const updatedPresentation = { ...presentation, slides: updatedSlides };
+    setPresentation(updatedPresentation);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+
+    // Force update of the selected font states to trigger re-render
+    if (property === 'fontFamily') setSelectedFont(value);
+    if (property === 'fontSize') setSelectedFontSize(value);
+    if (property === 'color') setSelectedColor(value);
+  };
+
+  // Apply text styling
+  const applyTextStyling = (style: string) => {
+    if (!selectedTextElement) return;
+
+    const currentValue = selectedTextElement.currentStyles?.[style] || false;
+    applyTextFormatting(style, !currentValue);
+
+    // Update UI state
+    if (style === 'bold') setIsBold(!currentValue);
+    if (style === 'italic') setIsItalic(!currentValue);
+    if (style === 'underline') setIsUnderline(!currentValue);
+  };
+
+  // Slideshow states
+  const [isInSlideshow, setIsInSlideshow] = useState(false);
+  const [slideshowIndex, setSlideshowIndex] = useState(0);
+  const [isAutoPlay, setIsAutoPlay] = useState(false);
+  const [autoPlayInterval, setAutoPlayInterval] = useState<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    // Load presentation data from sessionStorage
+    const savedPresentation = sessionStorage.getItem('currentPresentation');
+    if (savedPresentation) {
+      try {
+        const data = JSON.parse(savedPresentation);
+        setPresentation(data);
+      } catch (error) {
+        console.error('Error parsing presentation data:', error);
+      }
+    }
+  }, []);
+
+  const handleDeleteSlide = (index: number) => {
+    if (!presentation || presentation.slides.length <= 1) return;
+
+    const newSlides = presentation.slides.filter((_, i) => i !== index);
+    const updatedPresentation = { ...presentation, slides: newSlides };
+
+    setPresentation(updatedPresentation);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+
+    // Adjust current slide index if necessary
+    if (currentSlideIndex >= newSlides.length) {
+      setCurrentSlideIndex(newSlides.length - 1);
+    } else if (index <= currentSlideIndex && currentSlideIndex > 0) {
+      setCurrentSlideIndex(currentSlideIndex - 1);
+    }
+  };
+
+  const handleFieldEdit = (slideId: string, field: string, index?: number) => {
+    setEditingField({ slideId, field, index });
+  };
+
+  const handleFieldUpdate = (slideId: string, field: string, value: any, index?: number) => {
+    if (!presentation) return;
+
+    const newSlides = presentation.slides.map(slide => {
+      if (slide.id !== slideId) return slide;
+
+      const updatedSlide = { ...slide };
+
+      if (field === 'title') {
+        updatedSlide.title = value;
+      } else if (field === 'subtitle') {
+        updatedSlide.subtitle = value;
+      } else if (field === 'body' && typeof index === 'number') {
+        if (!updatedSlide.body) updatedSlide.body = [];
+        updatedSlide.body[index] = { ...updatedSlide.body[index], text: value };
+      }
+
+      return updatedSlide;
+    });
+
+    const updatedPresentation = { ...presentation, slides: newSlides };
+    setPresentation(updatedPresentation);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+  };
+
+  const handleFieldBlur = () => {
+    setEditingField(null);
+  };
+
+  const handleAddSlide = () => {
+    if (!presentation) return;
+
+    const newSlide: SlideSpec = {
+      id: `slide-${Date.now()}`,
+      layout: 'bullets',
+      title: 'New Slide',
+      body: [{ text: 'Add your content here' }]
+    };
+
+    const newSlides = [...presentation.slides, newSlide];
+    const updatedPresentation = { ...presentation, slides: newSlides };
+
+    setPresentation(updatedPresentation);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+    setCurrentSlideIndex(newSlides.length - 1);
+  };
+
+  const handleThemeChange = (theme: Theme) => {
+    if (!presentation) return;
+
+    const updatedPresentation = { ...presentation, theme };
+    setPresentation(updatedPresentation);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+    setShowThemeSelector(false);
+  };
+
+  const handleTemplateSelect = (template: Template) => {
+    const templateSlides = createTemplateSlides(template);
+    const newPresentation: PresentationData = {
+      theme: template.theme,
+      slides: templateSlides
+    };
+
+    setPresentation(newPresentation);
+    setCurrentSlideIndex(0);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(newPresentation));
+    setShowTemplateSelector(false);
+  };
+
+  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file || !presentation) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const imageUrl = e.target?.result as string;
+
+      // Add image to current slide or create new slide with image
+      const currentSlide = presentation.slides[currentSlideIndex];
+      if (currentSlide && currentSlide.layout === 'content-image') {
+        // Update existing content-image slide
+        const newSlides = presentation.slides.map((slide, index) =>
+          index === currentSlideIndex
+            ? { ...slide, images: [imageUrl] }
+            : slide
+        );
+        const updatedPresentation = { ...presentation, slides: newSlides };
+        setPresentation(updatedPresentation);
+        sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+      } else {
+        // Create new content-image slide
+        const newSlide: SlideSpec = {
+          id: `slide-${Date.now()}`,
+          layout: 'content-image',
+          title: 'New Image Slide',
+          body: [{ text: 'Add your content here' }],
+          images: [imageUrl]
+        };
+        const newSlides = [...presentation.slides, newSlide];
+        const updatedPresentation = { ...presentation, slides: newSlides };
+        setPresentation(updatedPresentation);
+        sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+        setCurrentSlideIndex(newSlides.length - 1);
+      }
+    };
+    reader.readAsDataURL(file);
+    setShowImageUpload(false);
+  };
+
+  const handleUnsplashImageSelect = (imageUrl: string) => {
+    if (!presentation) return;
+
+    // Add image to current slide or create new slide with image
+    const currentSlide = presentation.slides[currentSlideIndex];
+    if (currentSlide && currentSlide.layout === 'content-image') {
+      // Update existing content-image slide
+      const newSlides = presentation.slides.map((slide, index) =>
+        index === currentSlideIndex
+          ? { ...slide, images: [imageUrl] }
+          : slide
+      );
+      const updatedPresentation = { ...presentation, slides: newSlides };
+      setPresentation(updatedPresentation);
+      sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+    } else {
+      // Create new content-image slide
+      const newSlide: SlideSpec = {
+        id: `slide-${Date.now()}`,
+        layout: 'content-image',
+        title: 'New Image Slide',
+        body: [{ text: 'Add your content here' }],
+        images: [imageUrl]
+      };
+      const newSlides = [...presentation.slides, newSlide];
+      const updatedPresentation = { ...presentation, slides: newSlides };
+      setPresentation(updatedPresentation);
+      sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+      setCurrentSlideIndex(newSlides.length - 1);
+    }
+    setShowUnsplashSearch(false);
+  };
+
+  // Drag and drop handlers
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+
+    const files = Array.from(e.dataTransfer.files);
+    const imageFile = files.find(file => file.type.startsWith('image/'));
+
+    if (imageFile && presentation) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const imageUrl = event.target?.result as string;
+
+        // Add image to current slide or create new slide with image
+        const currentSlide = presentation.slides[currentSlideIndex];
+        if (currentSlide && currentSlide.layout === 'content-image') {
+          // Update existing content-image slide
+          const newSlides = presentation.slides.map((slide, index) =>
+            index === currentSlideIndex
+              ? { ...slide, images: [imageUrl] }
+              : slide
+          );
+          const updatedPresentation = { ...presentation, slides: newSlides };
+          setPresentation(updatedPresentation);
+          sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+        } else {
+          // Create new content-image slide
+          const newSlide: SlideSpec = {
+            id: `slide-${Date.now()}`,
+            layout: 'content-image',
+            title: 'New Image Slide',
+            body: [{ text: 'Add your content here' }],
+            images: [imageUrl]
+          };
+          const newSlides = [...presentation.slides, newSlide];
+          const updatedPresentation = { ...presentation, slides: newSlides };
+          setPresentation(updatedPresentation);
+          sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+          setCurrentSlideIndex(newSlides.length - 1);
+        }
+      };
+      reader.readAsDataURL(imageFile);
+    }
+  };
+
+  // Handle layout change
+  const handleLayoutChange = (newLayout: string) => {
+    if (!presentation) return;
+
+    const currentSlide = presentation.slides[currentSlideIndex];
+    const updatedSlide: SlideSpec = {
+      ...currentSlide,
+      layout: newLayout
+    };
+
+    // Ensure appropriate default content for each layout
+    switch (newLayout) {
+      case 'title':
+        if (!updatedSlide.subtitle) {
+          updatedSlide.subtitle = 'Subtitle';
+        }
+        break;
+      case 'content-image':
+        if (!updatedSlide.body || updatedSlide.body.length === 0) {
+          updatedSlide.body = [{ text: 'Add your content here' }];
+        }
+        if (!updatedSlide.images || updatedSlide.images.length === 0) {
+          updatedSlide.images = [];
+        }
+        break;
+      case 'bullets':
+        if (!updatedSlide.body || updatedSlide.body.length === 0) {
+          updatedSlide.body = [
+            { text: 'First bullet point' },
+            { text: 'Second bullet point' },
+            { text: 'Third bullet point' }
+          ];
+        }
+        break;
+      case 'chart':
+        if (!updatedSlide.chart) {
+          updatedSlide.chart = {
+            type: 'bar',
+            data: {
+              labels: ['A', 'B', 'C'],
+              datasets: [{ data: [10, 20, 15] }]
+            }
+          };
+        }
+        break;
+      case 'two-column':
+        if (!updatedSlide.body || updatedSlide.body.length < 2) {
+          updatedSlide.body = [
+            { heading: 'Left Column', text: 'Content for the left side' },
+            { heading: 'Right Column', text: 'Content for the right side' }
+          ];
+        }
+        break;
+      case 'image-only':
+        if (!updatedSlide.images || updatedSlide.images.length === 0) {
+          updatedSlide.images = [];
+        }
+        if (!updatedSlide.subtitle) {
+          updatedSlide.subtitle = 'Image caption';
+        }
+        break;
+      case 'quote':
+        if (!updatedSlide.body || updatedSlide.body.length === 0) {
+          updatedSlide.body = [{ text: 'Your inspiring quote goes here' }];
+        }
+        if (!updatedSlide.subtitle) {
+          updatedSlide.subtitle = '— Author Name';
+        }
+        break;
+      case 'section':
+        if (!updatedSlide.subtitle) {
+          updatedSlide.subtitle = 'Section description';
+        }
+        break;
+      case 'comparison':
+        if (!updatedSlide.body || updatedSlide.body.length < 2) {
+          updatedSlide.body = [
+            { heading: 'Option A', text: 'Benefits and features of option A' },
+            { heading: 'Option B', text: 'Benefits and features of option B' }
+          ];
+        }
+        break;
+    }
+
+    const newSlides = presentation.slides.map((slide, index) =>
+      index === currentSlideIndex ? updatedSlide : slide
+    );
+
+    const updatedPresentation = { ...presentation, slides: newSlides };
+    setPresentation(updatedPresentation);
+    sessionStorage.setItem('currentPresentation', JSON.stringify(updatedPresentation));
+    setShowLayoutSelector(false);
+  };
+
+  const exportPresentation = async () => {
+    if (!presentation) return;
+
+    try {
+      const response = await fetch('/api/export-pptx', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ slides: presentation.slides }),
+      });
+
+      if (response.ok) {
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'presentation.pptx';
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }
+    } catch (error) {
+      console.error('Export failed:', error);
+    }
+  };
+
+  // Slideshow functions
+  const startSlideshow = () => {
+    setIsInSlideshow(true);
+    setSlideshowIndex(currentSlideIndex);
+  };
+
+  const exitSlideshow = () => {
+    setIsInSlideshow(false);
+    if (autoPlayInterval) {
+      clearInterval(autoPlayInterval);
+      setAutoPlayInterval(null);
+    }
+    setIsAutoPlay(false);
+  };
+
+  const nextSlide = () => {
+    if (!presentation) return;
+    setSlideshowIndex((prev) =>
+      prev < presentation.slides.length - 1 ? prev + 1 : 0
+    );
+  };
+
+  const previousSlide = () => {
+    if (!presentation) return;
+    setSlideshowIndex((prev) =>
+      prev > 0 ? prev - 1 : presentation.slides.length - 1
+    );
+  };
+
+  const toggleAutoPlay = () => {
+    if (isAutoPlay) {
+      if (autoPlayInterval) {
+        clearInterval(autoPlayInterval);
+        setAutoPlayInterval(null);
+      }
+      setIsAutoPlay(false);
+    } else {
+      const interval = setInterval(() => {
+        nextSlide();
+      }, 5000); // 5 seconds per slide
+      setAutoPlayInterval(interval);
+      setIsAutoPlay(true);
+    }
+  };
+
+  // Keyboard navigation for slideshow
+  useEffect(() => {
+    if (!isInSlideshow) return;
+
+    const handleKeyPress = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowRight':
+        case ' ':
+          nextSlide();
+          break;
+        case 'ArrowLeft':
+          previousSlide();
+          break;
+        case 'Escape':
+          exitSlideshow();
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyPress);
+    return () => document.removeEventListener('keydown', handleKeyPress);
+  }, [isInSlideshow, presentation]);
+
+
+  if (!presentation || !presentation.slides.length) {
+    return (
+      <div className="min-h-dvh w-full bg-gradient-to-b from-white to-gray-50 text-gray-900 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-semibold mb-4">No presentation data found</h1>
+          <p className="text-gray-600">Please generate a presentation first.</p>
+          <button onClick={() => window.location.href = '/'} className="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
+            Go back to home
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const currentSlide = presentation.slides[currentSlideIndex];
+
+  return (
+    <div className="relative min-h-dvh w-full bg-background text-foreground flex flex-col">
+      <style>{`
+        @keyframes drift { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-55%, -48%) scale(1.06); } 100% { transform: translate(-46%, -52%) scale(1.12); } }
+        @keyframes panBeam { 0% { transform: translateX(-12%) translateY(-50%); } 100% { transform: translateX(12%) translateY(-50%); } }
+      `}</style>
+      {/* Emerald gradient background to match homepage */}
+      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10"
+        style={{
+          background:
+            'radial-gradient(60% 14% at 50% 62%, rgba(163,255,206,0.58) 0%, rgba(163,255,206,0.25) 45%, rgba(163,255,206,0.06) 70%, transparent 80%), radial-gradient(85% 50% at 50% -10%, rgba(60,255,170,0.25) 0%, transparent 70%), radial-gradient(100% 60% at 50% 15%, rgba(16,185,129,0.22) 0%, transparent 50%), linear-gradient(180deg, #03140e 0%, #061d17 35%, #070c0a 100%)',
+        }}
+      />
+      {/* animated glows & beam */}
+      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+        <div className="absolute left-1/2 top-[38%] w-[900px] h-[900px] -translate-x-1/2 -translate-y-1/2 rounded-full blur-[140px] opacity-35"
+          style={{ background: 'radial-gradient(closest-side, rgba(52,211,153,0.45), rgba(52,211,153,0.06))', animation: 'drift 18s ease-in-out infinite alternate' }} />
+        <div className="absolute left-[12%] top-[58%] w-[700px] h-[700px] rounded-full blur-[160px] opacity-25"
+          style={{ background: 'radial-gradient(closest-side, rgba(16,185,129,0.36), transparent 60%)', animation: 'drift 22s ease-in-out infinite alternate-reverse' }} />
+        <div className="absolute left-0 right-0 top-1/2 h-[220px] -translate-y-1/2 blur-[60px]"
+          style={{ background: 'linear-gradient(90deg, rgba(16,185,129,0) 0%, rgba(163,255,206,0.65) 50%, rgba(16,185,129,0) 100%)', opacity: 0.55, animation: 'panBeam 12s ease-in-out infinite alternate' }} />
+      </div>
+      {/* star field */}
+      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10"
+        style={{
+          backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.22) 1px, rgba(255,255,255,0) 1.6px), radial-gradient(circle, rgba(255,255,255,0.16) 1px, rgba(255,255,255,0) 1.6px), radial-gradient(circle, rgba(255,255,255,0.12) 1px, rgba(255,255,255,0) 1.6px)',
+          backgroundSize: '120px 120px, 180px 180px, 240px 240px',
+          backgroundPosition: '0 0, 60px 40px, 100px 80px',
+          opacity: 0.5,
+        }}
+      />
+      {/* noise overlay */}
+      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10"
+        style={{ backgroundImage: noiseDataUrl, backgroundRepeat: 'repeat', opacity: 0.08, mixBlendMode: 'overlay' }} />
+      {/* Title Bar */}
+      <div className="sticky top-0 z-30 border-b border-white/10 bg-slate-900/70 backdrop-blur px-4 py-2 text-white flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Presentation size={20} />
+            <span className="font-semibold">slidesAI</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowHomeWarning(true)}
+            className="h-8 px-3 rounded-md border border-white/10 bg-white/10 hover:bg-white/15 text-xs"
+          >
+            <Home size={14} />
+          </button>
+          <button
+            onClick={exportPresentation}
+            className="h-8 px-3 rounded-md border border-white/10 bg-white/10 hover:bg-white/15 text-xs flex items-center gap-1"
+          >
+            <Download size={14} />
+            Export
+          </button>
+        </div>
+      </div>
+
+
+      {/* slidesAI-style Ribbon */}
+      <div className="sticky top-[40px] z-20 bg-background/60 backdrop-blur border-b border-white/10 px-3 py-2">
+        <div className="flex items-center gap-3 overflow-x-auto">
+          {/* Clipboard */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Clipboard</div>
+            <div className="flex gap-1">
+              <button className="h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90">
+                <FileText size={14} />
+              </button>
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Templates */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Templates</div>
+            <div className="relative">
+              <button
+                onClick={() => setShowTemplateSelector(!showTemplateSelector)}
+                className="flex flex-col items-center h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90"
+              >
+                <Presentation size={14} />
+                <span className="text-xs mt-1">Browse</span>
+              </button>
+              {showTemplateSelector && (
+                <div className="absolute top-full left-0 mt-1 bg-slate-900 border border-white/10 rounded shadow-lg z-[200] min-w-[320px]">
+                  <div className="p-4">
+                    <div className="text-xs font-medium text-white/70 mb-3">Choose Template</div>
+                    <div className="space-y-2">
+                      {professionalTemplates.map((template) => (
+                        <button
+                          key={template.id}
+                          onClick={() => handleTemplateSelect(template)}
+                          className="w-full text-left p-3 rounded-lg hover:bg-white/10 transition-colors flex items-center gap-3 border border-transparent hover:border-white/20"
+                        >
+                          <span className="text-2xl">{template.thumbnail}</span>
+                          <div>
+                            <div className="font-medium text-sm text-white">{template.name}</div>
+                            <div className="text-xs text-white/60">{template.description}</div>
+                            <div className="text-xs text-emerald-400 mt-1">{template.slides.length} slides</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Slides */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1">Slides</div>
+            <div className="flex gap-1">
+              <button
+                onClick={handleAddSlide}
+                className="flex flex-col items-center h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90"
+              >
+                <Plus size={14} />
+                <span className="text-xs mt-1">New Slide</span>
+              </button>
+              <button
+                onClick={() => handleDeleteSlide(currentSlideIndex)}
+                disabled={presentation?.slides.length === 1}
+                className="h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Layout */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Layout</div>
+            <div className="relative">
+              <button
+                onClick={() => setShowLayoutSelector(!showLayoutSelector)}
+                className="flex flex-col items-center h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90"
+              >
+                <span className="text-lg">{layouts.find(l => l.id === presentation?.slides[currentSlideIndex]?.layout)?.icon || '📰'}</span>
+                <span className="text-xs mt-1">Change</span>
+              </button>
+              {showLayoutSelector && (
+                <div className="absolute top-full left-0 mt-1 bg-slate-900 border border-white/10 rounded shadow-lg z-[200] min-w-[250px]">
+                  <div className="p-3">
+                    <div className="text-xs font-medium text-white/70 mb-2">Choose Layout</div>
+                    <div className="space-y-1">
+                      {layouts.map((layout) => (
+                        <button
+                          key={layout.id}
+                          onClick={() => handleLayoutChange(layout.id)}
+                          className={`w-full text-left p-3 rounded-lg hover:bg-white/10 transition-colors flex items-center gap-3 ${
+                            presentation?.slides[currentSlideIndex]?.layout === layout.id
+                              ? 'bg-emerald-400/10 border border-emerald-400/40'
+                              : 'border border-transparent'
+                          }`}
+                        >
+                          <span className="text-xl">{layout.icon}</span>
+                          <div>
+                            <div className="font-medium text-sm text-white">{layout.name}</div>
+                            <div className="text-xs text-white/60">{layout.description}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Font */}
+          <div className="flex flex-col rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Font</div>
+            <div className="flex items-center gap-1">
+              {/* Font Family Dropdown */}
+              <div className="relative">
+                <button
+                  onClick={() => setShowFontDropdown(!showFontDropdown)}
+                  className="flex items-center gap-1 px-2 py-1 border border-white/10 rounded bg-white/[0.06] hover:bg-white/[0.1] min-w-[120px] text-xs"
+                >
+                  <span style={{ fontFamily: googleFonts.find(f => f.name === selectedFont)?.family }}>
+                    {selectedFont}
+                  </span>
+                  <ChevronDown size={12} />
+                </button>
+                {showFontDropdown && (
+                  <div className="absolute top-full left-0 mt-1 bg-slate-900 border border-white/10 rounded shadow-lg z-[200] min-w-[200px] max-h-60 overflow-y-auto">
+                    {googleFonts.map((font) => (
+                      <button
+                        key={font.name}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedFont(font.name);
+                          setShowFontDropdown(false);
+                          applyTextFormatting('fontFamily', font.name);
+                        }}
+                        className="w-full text-left px-3 py-2 text-sm hover:bg-white/10"
+                        style={{ fontFamily: font.family }}
+                      >
+                        {font.label}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Font Size Dropdown */}
+              <div className="relative">
+                <button
+                  onClick={() => setShowFontSizeDropdown(!showFontSizeDropdown)}
+                  className="flex items-center gap-1 px-1 py-1 border border-white/10 rounded bg-white/[0.06] hover:bg-white/[0.1] w-12 text-xs"
+                >
+                  {selectedFontSize}
+                  <ChevronDown size={12} />
+                </button>
+                {showFontSizeDropdown && (
+                  <div className="absolute top-full left-0 mt-1 bg-slate-900 border border-white/10 rounded shadow-lg z-[200] max-h-60 overflow-y-auto">
+                    {fontSizes.map((size) => (
+                      <button
+                        key={size}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedFontSize(size);
+                          setShowFontSizeDropdown(false);
+                          applyTextFormatting('fontSize', size);
+                        }}
+                        className="w-full text-left px-3 py-2 text-sm hover:bg-white/10"
+                      >
+                        {size}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Font Style Buttons */}
+            <div className="flex gap-1 mt-1">
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  applyTextStyling('bold');
+                }}
+                className={`p-1 border border-white/10 rounded hover:bg-white/10 ${isBold ? 'bg-emerald-400/10 border-emerald-400/40' : ''}`}
+              >
+                <Bold size={14} />
+              </button>
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  applyTextStyling('italic');
+                }}
+                className={`p-1 border border-white/10 rounded hover:bg-white/10 ${isItalic ? 'bg-emerald-400/10 border-emerald-400/40' : ''}`}
+              >
+                <Italic size={14} />
+              </button>
+              <button
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  applyTextStyling('underline');
+                }}
+                className={`p-1 border border-white/10 rounded hover:bg-white/10 ${isUnderline ? 'bg-emerald-400/10 border-emerald-400/40' : ''}`}
+              >
+                <Underline size={14} />
+              </button>
+              <div className="relative">
+                <button
+                  onClick={() => setShowColorPicker(!showColorPicker)}
+                  className="p-1 border border-white/10 rounded hover:bg-white/10 flex items-center"
+                >
+                  <Paintbrush size={14} />
+                  <div className="w-3 h-1 mt-1" style={{ backgroundColor: selectedColor }} />
+                </button>
+                {showColorPicker && (
+                  <div className="absolute top-full left-0 mt-1 bg-slate-900 border border-white/10 rounded shadow-lg z-[200] p-2">
+                    <div className="grid grid-cols-8 gap-1">
+                      {colors.map((color) => (
+                        <button
+                          key={color}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setSelectedColor(color);
+                            setShowColorPicker(false);
+                            applyTextFormatting('color', color);
+                          }}
+                          className="w-6 h-6 rounded border border-white/10 hover:scale-110 transition-transform"
+                          style={{ backgroundColor: color }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Paragraph */}
+          <div className="flex flex-col rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Paragraph</div>
+            <div className="flex gap-1">
+              <button
+                onClick={() => setAlignment('left')}
+                className={`p-1 border border-white/10 rounded hover:bg-white/10 ${alignment === 'left' ? 'bg-emerald-400/10 border-emerald-400/40' : ''}`}
+              >
+                <AlignLeft size={14} />
+              </button>
+              <button
+                onClick={() => setAlignment('center')}
+                className={`p-1 border border-white/10 rounded hover:bg-white/10 ${alignment === 'center' ? 'bg-emerald-400/10 border-emerald-400/40' : ''}`}
+              >
+                <AlignCenter size={14} />
+              </button>
+              <button
+                onClick={() => setAlignment('right')}
+                className={`p-1 border border-white/10 rounded hover:bg-white/10 ${alignment === 'right' ? 'bg-emerald-400/10 border-emerald-400/40' : ''}`}
+              >
+                <AlignRight size={14} />
+              </button>
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Insert */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Insert</div>
+            <div className="flex gap-1">
+              <button
+                onClick={() => setShowImageUpload(true)}
+                className="flex flex-col items-center h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90"
+              >
+                <Image size={14} />
+                <span className="text-xs mt-1">Images</span>
+              </button>
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Slideshow */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Slideshow</div>
+            <div className="flex gap-1">
+              <button
+                onClick={startSlideshow}
+                className="flex flex-col items-center h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90"
+              >
+                <Play size={14} />
+                <span className="text-xs mt-1">Start</span>
+              </button>
+            </div>
+          </div>
+
+          <div className="w-px h-10 bg-white/10" />
+
+          {/* Design */}
+          <div className="flex flex-col items-center rounded-lg border border-white/10 bg-white/[0.04] px-2 py-1.5 shrink-0">
+            <div className="text-xs text-white/80 mb-1 font-medium">Design</div>
+            <div className="relative">
+              <button
+                onClick={() => setShowThemeSelector(!showThemeSelector)}
+                className="flex flex-col items-center h-7 px-2 rounded border border-white/10 bg-white/[0.06] hover:bg-white/[0.1] text-white/90"
+              >
+                <Palette size={14} />
+                <span className="text-xs mt-1">Themes</span>
+              </button>
+              {showThemeSelector && (
+                <div className="absolute top-full left-0 mt-1 bg-slate-900 border border-white/10 rounded shadow-lg z-[200] min-w-[200px]">
+                  <div className="grid grid-cols-2 gap-2 p-3">
+                    {themes.map((theme) => (
+                      <button
+                        key={theme.name}
+                        onClick={() => handleThemeChange(theme.name)}
+                        className={`p-3 rounded border-2 transition-all ${
+                          presentation?.theme === theme.name
+                            ? 'border-emerald-400/60 bg-emerald-400/10'
+                            : 'border-white/10 hover:border-white/20'
+                        }`}
+                      >
+                        <div className={`w-full h-8 rounded mb-1 ${theme.colors}`} />
+                        <div className="text-xs font-medium">{theme.label}</div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Image Upload Modal */}
+      {showImageUpload && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold mb-4">Add Image</h3>
+
+            <div className="space-y-4">
+              {/* Upload from device */}
+              <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
+                <Upload size={40} className="mx-auto text-gray-400 mb-3" />
+                <p className="text-gray-600 mb-3">Upload from your device</p>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageUpload}
+                  className="hidden"
+                  id="image-upload"
+                />
+                <label
+                  htmlFor="image-upload"
+                  className="inline-block bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700"
+                >
+                  Choose File
+                </label>
+              </div>
+
+              {/* Divider */}
+              <div className="flex items-center gap-3">
+                <div className="flex-1 h-px bg-gray-300"></div>
+                <span className="text-gray-500 text-sm">or</span>
+                <div className="flex-1 h-px bg-gray-300"></div>
+              </div>
+
+              {/* Search Unsplash */}
+              <div className="border border-gray-300 rounded-lg p-6 text-center">
+                <Image size={40} className="mx-auto text-gray-400 mb-3" />
+                <p className="text-gray-600 mb-3">Search free stock photos</p>
+                <button
+                  onClick={() => {
+                    setShowImageUpload(false);
+                    setShowUnsplashSearch(true);
+                  }}
+                  className="inline-block bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700"
+                >
+                  Search Unsplash
+                </button>
+              </div>
+            </div>
+
+            <div className="flex gap-3 mt-6">
+              <button
+                onClick={() => setShowImageUpload(false)}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main Content Area */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Slide Thumbnails Panel */}
+        <div className="w-[220px] bg-sidebar text-sidebar-foreground border-r border-white/10 flex flex-col shrink-0">
+          <div className="p-2 border-b border-white/10 bg-white/[0.04]">
+            <h3 className="font-medium text-xs">Slides</h3>
+          </div>
+          <div className="flex-1 overflow-y-auto p-1.5">
+            <div className="space-y-2">
+              {presentation.slides.map((slide, index) => (
+                <div
+                  key={slide.id}
+                  className={`relative group cursor-pointer rounded-lg overflow-hidden transition-all ${
+                    index === currentSlideIndex
+                      ? 'ring-2 ring-emerald-400/70 bg-emerald-400/5 border-emerald-400/30'
+                      : 'hover:ring-1 hover:ring-white/20 bg-white/[0.03]'
+                  } shadow-sm border border-white/10`}
+                  onClick={() => setCurrentSlideIndex(index)}
+                >
+                  <div className="aspect-video p-1.5">
+                    <div className="w-full h-full scale-[0.1] origin-top-left transform">
+                      <div key={`${slide.id}-${presentation.theme}`} className="w-[1000px] h-[562px]">
+                        {renderSlide(slide, presentation.theme as Theme)}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Slide Number */}
+                  <div className="absolute top-1 left-1 bg-slate-900/80 text-white text-xs px-1.5 py-0.5 rounded">
+                    {index + 1}
+                  </div>
+
+                  {/* Delete Button */}
+                  {presentation.slides.length > 1 && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteSlide(index);
+                      }}
+                      className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity p-1 bg-red-500 text-white rounded hover:bg-red-600"
+                      title="Delete slide"
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  )}
+
+                  {/* Slide Title */}
+                  <div className="px-2 py-1 bg-white/[0.04] border-t border-white/10">
+                    <p className="text-xs truncate">
+                      {slide.title || `Slide ${index + 1}`}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Main Editing Area */}
+        <div className="flex-1 flex flex-col">
+          {/* Slide Canvas */}
+          <div className="flex-1 flex items-center justify-center p-4">
+            <div className="relative rounded-2xl ring-1 ring-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.45)] overflow-hidden w-full max-w-4xl aspect-video" style={{ background: '#0e131b' }}>
+              <div aria-hidden className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(rgba(148,163,184,0.15) 1px, transparent 1px)', backgroundSize: '18px 18px' }} />
+              {/* Ruler/Guide Indicators */}
+              <div className="absolute -top-6 left-0 right-0 h-4 bg-white/[0.04] border-b border-white/10 text-xs text-white/60 flex items-center px-2">
+                <div className="flex items-center gap-4">
+                  <span>0"</span>
+                  <span>1"</span>
+                  <span>2"</span>
+                  <span>3"</span>
+                  <span>4"</span>
+                  <span>5"</span>
+                  <span>6"</span>
+                  <span>7"</span>
+                  <span>8"</span>
+                  <span>9"</span>
+                  <span>10"</span>
+                </div>
+              </div>
+              <div className="absolute -left-6 top-0 bottom-0 w-4 bg-white/[0.04] border-r border-white/10 text-xs text-white/60 flex flex-col items-center justify-start pt-2 gap-4">
+                <span>0"</span>
+                <span>1"</span>
+                <span>2"</span>
+                <span>3"</span>
+                <span>4"</span>
+                <span>5"</span>
+                <span>6"</span>
+              </div>
+
+              {/* Slide Content */}
+              <div
+                className={`relative w-full h-full transition-all ${isDragOver ? 'ring-2 ring-emerald-400 bg-emerald-400/10' : ''}`}
+                onDragOver={handleDragOver}
+                onDragLeave={handleDragLeave}
+                onDrop={handleDrop}
+              >
+                {currentSlide && <div key={`${currentSlide.id}-${presentation.theme}`}>{renderSlide(currentSlide, presentation.theme as Theme, {
+                  isEditable: true,
+                  onFieldUpdate: handleFieldUpdate,
+                  onTextSelect: handleTextSelection,
+                  selectedFont: selectedFont,
+                  selectedFontSize: selectedFontSize,
+                  selectedColor: selectedColor,
+                  onImageEdit: () => setShowImageUpload(true)
+                })}</div>}
+
+                {/* Drag Overlay */}
+                {isDragOver && (
+                  <div className="absolute inset-0 bg-emerald-400/20 flex items-center justify-center pointer-events-none z-50">
+                    <div className="bg-emerald-500 text-white px-4 py-2 rounded-lg font-medium">
+                      Drop image here to add to slide
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Status Bar */}
+          <div className="bg-white/[0.04] border-t border-white/10 px-4 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="text-sm text-white/70">
+                Slide {currentSlideIndex + 1} of {presentation.slides.length}
+              </span>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setCurrentSlideIndex(Math.max(0, currentSlideIndex - 1))}
+                  disabled={currentSlideIndex === 0}
+                  className="p-1 hover:bg-white/10 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+                  title="Previous slide"
+                >
+                  <ChevronDown size={16} className="rotate-90" />
+                </button>
+                <button
+                  onClick={() => setCurrentSlideIndex(Math.min(presentation.slides.length - 1, currentSlideIndex + 1))}
+                  disabled={currentSlideIndex === presentation.slides.length - 1}
+                  className="p-1 hover:bg-white/10 rounded disabled:opacity-50 disabled:cursor-not-allowed"
+                  title="Next slide"
+                >
+                  <ChevronDown size={16} className="-rotate-90" />
+                </button>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-white/70">Zoom:</span>
+                <select className="text-sm border border-white/10 bg-white/[0.06] rounded px-2 py-1">
+                  <option value="100">100%</option>
+                  <option value="75">75%</option>
+                  <option value="50">50%</option>
+                  <option value="25">25%</option>
+                </select>
+              </div>
+              <div className="text-sm text-white/70">Ready</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Slideshow Modal */}
+      {isInSlideshow && presentation && (
+        <div className="fixed inset-0 bg-black z-50 flex flex-col">
+          {/* Slideshow Controls */}
+          <div className="absolute top-4 right-4 z-60 flex items-center gap-2">
+            <button
+              onClick={toggleAutoPlay}
+              className="p-2 bg-black/50 text-white rounded-full hover:bg-black/70 backdrop-blur-sm"
+              title={isAutoPlay ? 'Pause Auto Play' : 'Start Auto Play'}
+            >
+              {isAutoPlay ? <Pause size={20} /> : <Play size={20} />}
+            </button>
+            <button
+              onClick={exitSlideshow}
+              className="p-2 bg-black/50 text-white rounded-full hover:bg-black/70 backdrop-blur-sm"
+              title="Exit Slideshow (ESC)"
+            >
+              <X size={20} />
+            </button>
+          </div>
+
+          {/* Slide Counter */}
+          <div className="absolute top-4 left-4 z-60 text-white bg-black/50 px-3 py-1 rounded-full backdrop-blur-sm">
+            {slideshowIndex + 1} of {presentation.slides.length}
+          </div>
+
+          {/* Main Slide Area */}
+          <div className="flex-1 flex items-center justify-center p-8">
+            <div key={`slideshow-${presentation.slides[slideshowIndex]?.id}-${presentation.theme}`} className="w-full h-full max-w-6xl max-h-[80vh] bg-white rounded-lg shadow-2xl overflow-hidden">
+              {renderSlide(presentation.slides[slideshowIndex], presentation.theme as Theme)}
+            </div>
+          </div>
+
+          {/* Navigation Controls */}
+          <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-60 flex items-center gap-4">
+            <button
+              onClick={previousSlide}
+              className="p-3 bg-black/50 text-white rounded-full hover:bg-black/70 backdrop-blur-sm"
+              title="Previous Slide (←)"
+            >
+              <ArrowLeft size={24} />
+            </button>
+            <div className="flex items-center gap-2">
+              {presentation.slides.map((_, index) => (
+                <button
+                  key={index}
+                  onClick={() => setSlideshowIndex(index)}
+                  className={`w-3 h-3 rounded-full transition-all ${
+                    index === slideshowIndex
+                      ? 'bg-white'
+                      : 'bg-white/50 hover:bg-white/70'
+                  }`}
+                />
+              ))}
+            </div>
+            <button
+              onClick={nextSlide}
+              className="p-3 bg-black/50 text-white rounded-full hover:bg-black/70 backdrop-blur-sm"
+              title="Next Slide (→ or Space)"
+            >
+              <ArrowRight size={24} />
+            </button>
+          </div>
+
+          {/* Click Areas for Navigation */}
+          <button
+            onClick={previousSlide}
+            className="absolute left-0 top-0 w-1/3 h-full bg-transparent z-50"
+            title="Previous Slide"
+          />
+          <button
+            onClick={nextSlide}
+            className="absolute right-0 top-0 w-1/3 h-full bg-transparent z-50"
+            title="Next Slide"
+          />
+        </div>
+      )}
+
+      {/* Unsplash Image Search */}
+      {showUnsplashSearch && (
+        <UnsplashImageSearch
+          onImageSelect={handleUnsplashImageSelect}
+          onClose={() => setShowUnsplashSearch(false)}
+        />
+      )}
+
+      {/* Home Warning Dialog */}
+      {showHomeWarning && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <h3 className="text-lg font-semibold text-gray-900 mb-3">⚠️ Warning</h3>
+            <p className="text-gray-700 mb-6">
+              Going back to home will cause you to lose your current presentation. Make sure to export your slides before leaving.
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowHomeWarning(false)}
+                className="flex-1 px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 text-gray-700"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => window.location.href = '/'}
+                className="flex-1 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+              >
+                Continue to Home
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+    </div>
+  );
+}
+
+

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Sora } from "next/font/google";
+import { Geist, Geist_Mono, Sora, Inter, Roboto, Open_Sans, Lato, Montserrat, Poppins, Playfair_Display, Merriweather } from "next/font/google";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -17,6 +17,50 @@ const sora = Sora({
   subsets: ["latin"],
 });
 
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
+const roboto = Roboto({
+  variable: "--font-roboto",
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "700"],
+});
+
+const openSans = Open_Sans({
+  variable: "--font-open-sans",
+  subsets: ["latin"],
+});
+
+const lato = Lato({
+  variable: "--font-lato",
+  subsets: ["latin"],
+  weight: ["300", "400", "700"],
+});
+
+const montserrat = Montserrat({
+  variable: "--font-montserrat",
+  subsets: ["latin"],
+});
+
+const poppins = Poppins({
+  variable: "--font-poppins",
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
+});
+
+const playfair = Playfair_Display({
+  variable: "--font-playfair",
+  subsets: ["latin"],
+});
+
+const merriweather = Merriweather({
+  variable: "--font-merriweather",
+  subsets: ["latin"],
+  weight: ["300", "400", "700"],
+});
+
 export const metadata: Metadata = {
   title: "PowerPoint Generator",
   description: "Generate PowerPoint presentations",
@@ -30,7 +74,7 @@ export default function RootLayout({
   return (
     <html lang="en" className="dark">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${sora.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${sora.variable} ${inter.variable} ${roboto.variable} ${openSans.variable} ${lato.variable} ${montserrat.variable} ${poppins.variable} ${playfair.variable} ${merriweather.variable} antialiased`}
       >
         {children}
       </body>

app/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation';
 import { ArrowUp, ChevronDown, Check } from 'lucide-react';
 import { DeepSeek, OpenAI, Kimi, Ollama } from '@lobehub/icons';
 import * as Select from '@radix-ui/react-select';
+import HFAuth from '@/components/HFAuth';
 
 export default function Home() {
   const router = useRouter();
@@ -12,6 +13,7 @@ export default function Home() {
   const [selectedModel, setSelectedModel] = useState('gemini-2.5-flash-lite');
   const [isLoading, setIsLoading] = useState(false);
   const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [showAuthModal, setShowAuthModal] = useState(false);
 
   const noiseSvg = "<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(#n)' opacity='0.35'/></svg>";
   const noiseDataUrl = `url('data:image/svg+xml;utf8,${encodeURIComponent(noiseSvg)}')`;
@@ -21,6 +23,13 @@ export default function Home() {
 
     if (!prompt.trim()) return;
 
+    // Check if authentication is required for the selected model
+    const requiresAuth = selectedModel.includes('huggingface') || selectedModel.includes('meta') || selectedModel.includes('mistral');
+    if (requiresAuth && !isAuthenticated) {
+      alert('This model requires Hugging Face authentication. Please sign in first.');
+      return;
+    }
+
     setIsLoading(true);
 
     try {
@@ -55,29 +64,19 @@ export default function Home() {
     }
   };
 
-  const handleLogin = async () => {
-    const apiKey = prompt('Enter your HF Pro API Key:');
-    if (!apiKey) return;
+  const handleAuthSuccess = (result: any) => {
+    setIsAuthenticated(true);
+    setShowAuthModal(false);
+    console.log('Authentication successful:', result);
+  };
 
-    try {
-      const response = await fetch('/api/auth/hf', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ apiKey }),
-      });
+  const handleAuthError = (error: string) => {
+    console.error('Authentication error:', error);
+    alert('Authentication failed: ' + error);
+  };
 
-      if (response.ok) {
-        setIsAuthenticated(true);
-        alert('Successfully logged in with HF Pro!');
-      } else {
-        alert('Invalid API key. Please try again.');
-      }
-    } catch (error) {
-      console.error('Login error:', error);
-      alert('Login failed. Please try again.');
-    }
+  const handleLogin = () => {
+    setShowAuthModal(true);
   };
   return (
     <div className="relative min-h-dvh flex items-center justify-center px-4">
@@ -220,6 +219,25 @@ export default function Home() {
           </form>
         </div>
       </div>
+
+      {/* Authentication Modal */}
+      {showAuthModal && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg max-w-md w-full mx-4 relative">
+            <button
+              onClick={() => setShowAuthModal(false)}
+              className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-xl"
+            >
+              ×
+            </button>
+            <HFAuth
+              onAuthSuccess={handleAuthSuccess}
+              onAuthError={handleAuthError}
+            />
+          </div>
+        </div>
+      )}
+
     </div>
   );
 }

components/HFAuth.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
+
+interface OAuthResult {
+  accessToken: string;
+  userInfo: {
+    id: string;
+    name: string;
+    fullname: string;
+    email: string;
+    avatarUrl: string;
+  };
+}
+
+interface HFAuthProps {
+  onAuthSuccess: (result: OAuthResult) => void;
+  onAuthError: (error: string) => void;
+}
+
+export default function HFAuth({ onAuthSuccess, onAuthError }: HFAuthProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [oauthResult, setOauthResult] = useState<OAuthResult | null>(null);
+
+  useEffect(() => {
+    const initializeAuth = async () => {
+      try {
+        // Check for existing OAuth result in localStorage
+        let stored = localStorage.getItem('hf_oauth');
+        if (stored) {
+          try {
+            const parsedResult = JSON.parse(stored);
+            setOauthResult(parsedResult);
+            onAuthSuccess(parsedResult);
+            setIsLoading(false);
+            return;
+          } catch {
+            localStorage.removeItem('hf_oauth');
+          }
+        }
+
+        // Handle OAuth redirect if present
+        const result = await oauthHandleRedirectIfPresent();
+        if (result) {
+          const oauthData: OAuthResult = {
+            accessToken: result.accessToken,
+            userInfo: result.userInfo
+          };
+
+          setOauthResult(oauthData);
+          localStorage.setItem('hf_oauth', JSON.stringify(oauthData));
+          onAuthSuccess(oauthData);
+        }
+      } catch (error) {
+        console.error('OAuth initialization error:', error);
+        onAuthError('Failed to initialize authentication');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initializeAuth();
+  }, [onAuthSuccess, onAuthError]);
+
+  const handleSignIn = async () => {
+    try {
+      setIsLoading(true);
+      // Default scopes for reading user info
+      const scopes = 'read-repos read-billing';
+      const loginUrl = await oauthLoginUrl({ scopes });
+      window.location.href = loginUrl + '&prompt=consent';
+    } catch (error) {
+      console.error('Sign in error:', error);
+      onAuthError('Failed to initiate sign in');
+      setIsLoading(false);
+    }
+  };
+
+  const handleSignOut = () => {
+    localStorage.removeItem('hf_oauth');
+    setOauthResult(null);
+    // Redirect to clean URL without OAuth parameters
+    const cleanUrl = window.location.href.replace(/[?&]code=[^&]*/, '').replace(/[?&]state=[^&]*/, '');
+    window.location.href = cleanUrl;
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-orange-600"></div>
+        <span className="ml-2 text-sm text-gray-600">Checking authentication...</span>
+      </div>
+    );
+  }
+
+  if (oauthResult) {
+    return (
+      <div className="flex items-center gap-3 p-3 bg-green-50 border border-green-200 rounded-lg">
+        <img
+          src={oauthResult.userInfo.avatarUrl}
+          alt={oauthResult.userInfo.name}
+          className="w-8 h-8 rounded-full"
+        />
+        <div className="flex-1">
+          <div className="text-sm font-medium text-green-800">
+            Welcome, {oauthResult.userInfo.fullname || oauthResult.userInfo.name}!
+          </div>
+          <div className="text-xs text-green-600">Signed in with Hugging Face</div>
+        </div>
+        <button
+          onClick={handleSignOut}
+          className="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
+        >
+          Sign Out
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-center p-6">
+      <div className="mb-4">
+        <h3 className="text-lg font-semibold text-gray-900 mb-2">Sign in with Hugging Face</h3>
+        <p className="text-sm text-gray-600 mb-4">
+          Connect your Hugging Face account to access AI-powered presentation generation
+        </p>
+      </div>
+
+      <button
+        onClick={handleSignIn}
+        className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white font-medium rounded-lg hover:from-yellow-500 hover:to-orange-600 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+        </svg>
+        Sign in with Hugging Face
+      </button>
+
+      <div className="mt-4 text-xs text-gray-500">
+        Secure OAuth authentication • Your data stays private
+      </div>
+    </div>
+  );
+}

components/UnsplashImageSearch.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { createApi } from 'unsplash-js';
+import { Search, Download, X } from 'lucide-react';
+
+interface UnsplashImage {
+  id: string;
+  urls: {
+    small: string;
+    regular: string;
+    full: string;
+  };
+  alt_description: string;
+  user: {
+    name: string;
+    username: string;
+  };
+  links: {
+    download_location: string;
+  };
+}
+
+interface UnsplashImageSearchProps {
+  onImageSelect: (imageUrl: string) => void;
+  onClose: () => void;
+}
+
+export default function UnsplashImageSearch({ onImageSelect, onClose }: UnsplashImageSearchProps) {
+  const [query, setQuery] = useState('');
+  const [images, setImages] = useState<UnsplashImage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+
+  const unsplash = createApi({
+    accessKey: process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY || '',
+  });
+
+  const searchImages = async (searchQuery: string, pageNum: number = 1) => {
+    if (!process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY) {
+      setError('Unsplash API key not configured. Please add NEXT_PUBLIC_UNSPLASH_ACCESS_KEY to your environment variables.');
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await unsplash.search.getPhotos({
+        query: searchQuery,
+        page: pageNum,
+        perPage: 20,
+        orientation: 'landscape',
+      });
+
+      if (result.errors) {
+        setError('Failed to search images');
+        return;
+      }
+
+      const newImages = result.response?.results || [];
+
+      if (pageNum === 1) {
+        setImages(newImages);
+      } else {
+        setImages(prev => [...prev, ...newImages]);
+      }
+
+      setHasMore(newImages.length === 20);
+      setPage(pageNum);
+    } catch (err) {
+      setError('Failed to search images');
+      console.error('Unsplash search error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (query.trim()) {
+      searchImages(query.trim(), 1);
+    }
+  };
+
+  const loadMore = () => {
+    if (!isLoading && hasMore && query) {
+      searchImages(query, page + 1);
+    }
+  };
+
+  const handleImageSelect = (image: UnsplashImage) => {
+    // Trigger download tracking as required by Unsplash API
+    if (image.links.download_location) {
+      fetch(`/api/unsplash-download?url=${encodeURIComponent(image.links.download_location)}`);
+    }
+
+    onImageSelect(image.urls.regular);
+  };
+
+  useEffect(() => {
+    // Load popular images on component mount
+    searchImages('presentation', 1);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col">
+        <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900">Search Unsplash Images</h3>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-600"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="p-4 border-b border-gray-200">
+          <form onSubmit={handleSearch} className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={16} />
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search for images..."
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+            <button
+              type="submit"
+              disabled={isLoading || !query.trim()}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Search
+            </button>
+          </form>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-4">
+          {error && (
+            <div className="text-center py-8">
+              <div className="text-red-600 mb-2">{error}</div>
+              {!process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY && (
+                <div className="text-sm text-gray-600">
+                  Please add your Unsplash access key to .env.local file
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+            {images.map((image) => (
+              <div
+                key={image.id}
+                className="relative group cursor-pointer rounded-lg overflow-hidden bg-gray-100 aspect-video"
+                onClick={() => handleImageSelect(image)}
+              >
+                <img
+                  src={image.urls.small}
+                  alt={image.alt_description || 'Unsplash image'}
+                  className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity flex items-center justify-center">
+                  <Download className="text-white opacity-0 group-hover:opacity-100 transition-opacity" size={24} />
+                </div>
+                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-2">
+                  <div className="text-white text-xs truncate">
+                    Photo by {image.user.name}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {isLoading && (
+            <div className="text-center py-8">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+              <div className="text-gray-600 mt-2">Searching images...</div>
+            </div>
+          )}
+
+          {hasMore && images.length > 0 && !isLoading && (
+            <div className="text-center py-4">
+              <button
+                onClick={loadMore}
+                className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300"
+              >
+                Load More
+              </button>
+            </div>
+          )}
+
+          {!hasMore && images.length > 0 && (
+            <div className="text-center py-4 text-gray-500">
+              No more images to load
+            </div>
+          )}
+        </div>
+
+        <div className="p-4 border-t border-gray-200 text-xs text-gray-500 text-center">
+          Images provided by <a href="https://unsplash.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">Unsplash</a>
+        </div>
+      </div>
+    </div>
+  );
+}

components/slides/BulletsSlide.tsx

@@ -1,26 +1,211 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 export interface BulletsSlideProps {
   title: string;
   body: Array<{ heading?: string; text: string }>;
-  theme?: 'dark' | 'light';
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'sunset' | 'midnight';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  isEditable?: boolean;
 }
 
-export default function BulletsSlide({ title, body, theme = 'dark' }: BulletsSlideProps) {
-  const isDark = theme === 'dark';
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+const getBulletColor = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'bg-blue-600';
+    case 'blue':
+      return 'bg-blue-200';
+    case 'purple':
+      return 'bg-purple-200';
+    case 'green':
+      return 'bg-green-200';
+    case 'orange':
+      return 'bg-orange-200';
+    case 'teal':
+      return 'bg-teal-200';
+    case 'pink':
+      return 'bg-pink-200';
+    case 'indigo':
+      return 'bg-indigo-200';
+    case 'midnight':
+      return 'bg-indigo-200';
+    case 'sunset':
+      return 'bg-orange-200';
+    case 'amber':
+      return 'bg-amber-200';
+    case 'emerald':
+      return 'bg-emerald-200';
+    case 'slate':
+      return 'bg-slate-200';
+    default: // dark
+      return 'bg-white';
+  }
+};
+
+export default function BulletsSlide({
+  title,
+  body,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false
+}: BulletsSlideProps) {
+  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempBody, setTempBody] = useState<string[]>(body?.map(b => b.text) || []);
+
+  const themeClasses = getThemeClasses(theme);
+  const bulletColor = getBulletColor(theme);
+
+  const handleFieldClick = (field: string, index?: number) => {
+    if (!isEditable) return;
+    setEditingField({ field, index });
+    if (field === 'title') setTempTitle(title);
+    if (field === 'body' && typeof index === 'number') {
+      setTempBody(body?.map(b => b.text) || []);
+    }
+  };
+
+  const handleFieldBlur = (field: string, index?: number) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'body' && typeof index === 'number' && tempBody[index] !== body?.[index]?.text) {
+      onFieldUpdate(slideId, 'body', tempBody[index], index);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field, index);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'body') setTempBody(body?.map(b => b.text) || []);
+    }
+  };
+
+  const updateTempBodyItem = (index: number, value: string) => {
+    const newTempBody = [...tempBody];
+    newTempBody[index] = value;
+    setTempBody(newTempBody);
+  };
+
   return (
-    <div className={`w-full h-full ${isDark ? 'bg-black text-white' : 'bg-white text-slate-900'} p-10`}>
-      <h2 className="text-4xl font-semibold mb-8">{title}</h2>
-      <div className="space-y-6">
-        {body?.map((b, i) => (
-          <div key={i} className="flex items-start gap-4">
-            <div className="w-2 h-2 bg-current rounded-full mt-2 shrink-0" />
-            <div>
-              {b.heading && <div className="font-semibold text-lg mb-1">{b.heading}</div>}
-              <p className="opacity-90 leading-relaxed text-lg">{b.text}</p>
+    <div className={`w-full h-full ${themeClasses} p-10 relative overflow-hidden`}>
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <div
+          aria-hidden
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%)',
+          }}
+        />
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%)',
+          }}
+        />
+      )}
+      {/* Background pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px]" />
+      </div>
+
+      <div className="relative z-10">
+        {editingField?.field === 'title' ? (
+          <input
+            type="text"
+            value={tempTitle}
+            onChange={(e) => setTempTitle(e.target.value)}
+            onBlur={() => handleFieldBlur('title')}
+            onKeyDown={(e) => handleKeyDown(e, 'title')}
+            className="text-4xl font-semibold mb-8 drop-shadow-lg bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70 w-full"
+            placeholder="Enter title"
+            autoFocus
+          />
+        ) : (
+          <h2
+            className={`text-4xl font-semibold mb-8 drop-shadow-lg ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1 transition-colors' : ''}`}
+            onClick={() => handleFieldClick('title')}
+          >
+            {title}
+          </h2>
+        )}
+
+        <div className="space-y-6">
+          {body?.map((b, i) => (
+            <div key={i} className="flex items-start gap-4">
+              <div className={`w-3 h-3 ${bulletColor} rounded-full mt-2 shrink-0 shadow-lg`} />
+              <div className="flex-1">
+                {b.heading && <div className="font-semibold text-lg mb-1 drop-shadow-md">{b.heading}</div>}
+                {editingField?.field === 'body' && editingField?.index === i ? (
+                  <textarea
+                    value={tempBody[i] || ''}
+                    onChange={(e) => updateTempBodyItem(i, e.target.value)}
+                    onBlur={() => handleFieldBlur('body', i)}
+                    onKeyDown={(e) => handleKeyDown(e, 'body', i)}
+                    className="opacity-90 leading-relaxed text-lg drop-shadow-sm bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70 w-full resize-none"
+                    placeholder="Enter content"
+                    rows={2}
+                    autoFocus
+                  />
+                ) : (
+                  <p
+                    className={`opacity-90 leading-relaxed text-lg drop-shadow-sm ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1 transition-colors' : ''}`}
+                    onClick={() => handleFieldClick('body', i)}
+                  >
+                    {b.text}
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   );

components/slides/ChartSlide.tsx

@@ -7,40 +7,137 @@ export interface ChartSlideProps {
     data: Record<string, unknown>;
     options?: Record<string, unknown>;
   };
-  theme?: 'dark' | 'light';
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'sunset' | 'midnight';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  isEditable?: boolean;
 }
 
-export default function ChartSlide({ title, chart, theme = 'dark' }: ChartSlideProps) {
-  const isDark = theme === 'dark';
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+const getChartBarColor = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'bg-blue-600';
+    case 'blue':
+      return 'bg-blue-300';
+    case 'purple':
+      return 'bg-purple-300';
+    case 'green':
+      return 'bg-green-300';
+    case 'orange':
+      return 'bg-orange-300';
+    case 'teal':
+      return 'bg-teal-300';
+    case 'pink':
+      return 'bg-pink-300';
+    case 'indigo':
+      return 'bg-indigo-300';
+    case 'midnight':
+      return 'bg-indigo-300';
+    case 'sunset':
+      return 'bg-orange-300';
+    case 'amber':
+      return 'bg-amber-300';
+    case 'emerald':
+      return 'bg-emerald-300';
+    case 'slate':
+      return 'bg-slate-300';
+    default: // dark
+      return 'bg-white';
+  }
+};
+
+export default function ChartSlide({ title, chart, theme = 'dark', slideId, onFieldUpdate, isEditable = false }: ChartSlideProps) {
+  const themeClasses = getThemeClasses(theme);
+  const barColor = getChartBarColor(theme);
 
   return (
-    <div className={`w-full h-full ${isDark ? 'bg-black text-white' : 'bg-white text-slate-900'} p-10`}>
-      <h2 className="text-4xl font-semibold mb-8 text-center">{title}</h2>
-      <div className="flex-1 flex items-center justify-center">
-        {chart ? (
-          <div className="w-full max-w-2xl h-96 flex items-center justify-center border border-gray-300 rounded-lg">
-            <div className="text-center">
-              <div className="text-lg font-medium mb-2">Chart: {chart.type}</div>
-              <div className="text-sm opacity-70">
-                {chart.data?.labels?.join(', ') || 'Chart data'}
-              </div>
-              {chart.data?.datasets?.[0]?.data && (
-                <div className="mt-4 flex gap-2 justify-center">
-                  {chart.data.datasets[0].data.map((value: number, i: number) => (
-                    <div key={i} className="text-center">
-                      <div className="w-8 bg-blue-500 rounded-t" style={{ height: `${Math.max(8, value)}px` }}></div>
-                      <div className="text-xs mt-1">{value}</div>
-                    </div>
-                  ))}
+    <div className={`w-full h-full ${themeClasses} p-10 relative overflow-hidden`}>
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <div
+          aria-hidden
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%)',
+          }}
+        />
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%)',
+          }}
+        />
+      )}
+      {/* Background pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px]" />
+      </div>
+
+      <div className="relative z-10">
+        <h2 className="text-4xl font-semibold mb-8 text-center drop-shadow-lg">{title}</h2>
+        <div className="flex-1 flex items-center justify-center">
+          {chart ? (
+            <div className="w-full max-w-2xl h-96 flex items-center justify-center border border-white/20 rounded-lg bg-white/10 backdrop-blur-sm shadow-2xl">
+              <div className="text-center">
+                <div className="text-lg font-medium mb-2 drop-shadow-md">Chart: {chart.type}</div>
+                <div className="text-sm opacity-70 drop-shadow-sm">
+                  {Array.isArray((chart.data as any)?.labels) ? ((chart.data as any).labels as string[]).join(', ') : 'Chart data'}
                 </div>
-              )}
+                {(chart as any).data?.datasets?.[0]?.data && (
+                  <div className="mt-4 flex gap-2 justify-center">
+                    {((chart as any).data.datasets[0].data as number[]).map((value: number, i: number) => (
+                      <div key={i} className="text-center">
+                        <div className={`w-8 ${barColor} rounded-t shadow-lg`} style={{ height: `${Math.max(8, value * 2)}px` }}></div>
+                        <div className="text-xs mt-1 drop-shadow-sm">{value}</div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="w-full max-w-2xl h-96 flex items-center justify-center border border-white/20 rounded-lg opacity-70 bg-white/10 backdrop-blur-sm">
+              No chart data available
             </div>
-          </div>
-        ) : (
-          <div className="w-full max-w-2xl h-96 flex items-center justify-center border border-gray-300 rounded-lg opacity-70">
-            No chart data available
-          </div>
-        )}
+          )}
+        </div>
       </div>
     </div>
   );

components/slides/ComparisonSlide.tsx

@@ -0,0 +1,379 @@
+import React, { useState } from 'react';
+
+export interface ComparisonSlideProps {
+  title: string;
+  leftTitle: string;
+  rightTitle: string;
+  leftContent: Array<string>;
+  rightContent: Array<string>;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function ComparisonSlide({
+  title,
+  leftTitle,
+  rightTitle,
+  leftContent = ['Feature 1', 'Feature 2', 'Feature 3'],
+  rightContent = ['Feature A', 'Feature B', 'Feature C'],
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 16,
+  selectedColor,
+  formatting = {}
+}: ComparisonSlideProps) {
+  const [editingField, setEditingField] = useState<{ field: string; index?: number; side?: 'left' | 'right' } | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempLeftTitle, setTempLeftTitle] = useState(leftTitle);
+  const [tempRightTitle, setTempRightTitle] = useState(rightTitle);
+  const [tempLeftContent, setTempLeftContent] = useState(leftContent);
+  const [tempRightContent, setTempRightContent] = useState(rightContent);
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 32 : field.includes('Title') ? 20 : 16)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : (field.includes('Title') ? '600' : 'normal'),
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string, index?: number, side?: 'left' | 'right') => {
+    if (!isEditable) return;
+    setEditingField({ field, index, side });
+    setSelectedElement(field);
+
+    if (field === 'title') setTempTitle(title);
+    if (field === 'leftTitle') setTempLeftTitle(leftTitle);
+    if (field === 'rightTitle') setTempRightTitle(rightTitle);
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 32 : field.includes('Title') ? 20 : 16,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string, index?: number, side?: 'left' | 'right') => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'leftTitle' && tempLeftTitle !== leftTitle) {
+      onFieldUpdate(slideId, 'leftTitle', tempLeftTitle);
+    }
+    if (field === 'rightTitle' && tempRightTitle !== rightTitle) {
+      onFieldUpdate(slideId, 'rightTitle', tempRightTitle);
+    }
+    if (field === 'content' && typeof index === 'number' && side) {
+      const content = side === 'left' ? tempLeftContent : tempRightContent;
+      onFieldUpdate(slideId, `${side}Content`, JSON.stringify(content), index);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number, side?: 'left' | 'right') => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field, index, side);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'leftTitle') setTempLeftTitle(leftTitle);
+      if (field === 'rightTitle') setTempRightTitle(rightTitle);
+      if (field === 'content') {
+        setTempLeftContent([...leftContent]);
+        setTempRightContent([...rightContent]);
+      }
+    }
+  };
+
+  const updateTempContent = (side: 'left' | 'right', index: number, value: string) => {
+    if (side === 'left') {
+      const newContent = [...tempLeftContent];
+      newContent[index] = value;
+      setTempLeftContent(newContent);
+    } else {
+      const newContent = [...tempRightContent];
+      newContent[index] = value;
+      setTempRightContent(newContent);
+    }
+  };
+
+  return (
+    <div className={`w-full h-full ${themeClasses} p-12 relative overflow-hidden`}>
+      {/* Special backgrounds */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      <div className="relative z-10 h-full flex flex-col">
+        {/* Title */}
+        {editingField?.field === 'title' ? (
+          <input
+            type="text"
+            value={tempTitle}
+            onChange={(e) => setTempTitle(e.target.value)}
+            onBlur={() => handleFieldBlur('title')}
+            onKeyDown={(e) => handleKeyDown(e, 'title')}
+            className="mb-12 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            placeholder="Comparison Title"
+            autoFocus
+          />
+        ) : (
+          <h2
+            className={`mb-12 text-center font-semibold ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            onClick={() => handleFieldClick('title')}
+          >
+            {title}
+          </h2>
+        )}
+
+        {/* Comparison Grid */}
+        <div className="flex-1 grid md:grid-cols-2 gap-8">
+          {/* Left Side */}
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20 relative">
+            {/* VS indicator */}
+            <div className="absolute -right-4 top-1/2 transform -translate-y-1/2 bg-white/20 rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold border-2 border-white/30">
+              VS
+            </div>
+
+            {/* Left Title */}
+            {editingField?.field === 'leftTitle' ? (
+              <input
+                type="text"
+                value={tempLeftTitle}
+                onChange={(e) => setTempLeftTitle(e.target.value)}
+                onBlur={() => handleFieldBlur('leftTitle')}
+                onKeyDown={(e) => handleKeyDown(e, 'leftTitle')}
+                className="w-full mb-6 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                style={{
+                  fontFamily: getFieldFormatting('leftTitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('leftTitle').fontFamily})`,
+                  fontSize: `${getFieldFormatting('leftTitle').fontSize}px`,
+                  color: getFieldFormatting('leftTitle').color || 'inherit',
+                  fontWeight: getFieldFormatting('leftTitle').fontWeight,
+                  fontStyle: getFieldFormatting('leftTitle').fontStyle,
+                  textDecoration: getFieldFormatting('leftTitle').textDecoration
+                }}
+                placeholder="Option A"
+                autoFocus
+              />
+            ) : (
+              <h3
+                className={`mb-6 text-center font-semibold ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${selectedElement === 'leftTitle' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                style={{
+                  fontFamily: getFieldFormatting('leftTitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('leftTitle').fontFamily})`,
+                  fontSize: `${getFieldFormatting('leftTitle').fontSize}px`,
+                  color: getFieldFormatting('leftTitle').color || 'inherit',
+                  fontWeight: getFieldFormatting('leftTitle').fontWeight,
+                  fontStyle: getFieldFormatting('leftTitle').fontStyle,
+                  textDecoration: getFieldFormatting('leftTitle').textDecoration
+                }}
+                onClick={() => handleFieldClick('leftTitle')}
+              >
+                {leftTitle}
+              </h3>
+            )}
+
+            {/* Left Content */}
+            <ul className="space-y-3">
+              {leftContent.map((item, index) => (
+                <li key={index} className="flex items-start">
+                  <span className="text-green-400 mr-3 mt-1">✓</span>
+                  {editingField?.field === 'content' && editingField.index === index && editingField.side === 'left' ? (
+                    <input
+                      type="text"
+                      value={tempLeftContent[index] || ''}
+                      onChange={(e) => updateTempContent('left', index, e.target.value)}
+                      onBlur={() => handleFieldBlur('content', index, 'left')}
+                      onKeyDown={(e) => handleKeyDown(e, 'content', index, 'left')}
+                      className="flex-1 bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+                      placeholder="Feature"
+                      autoFocus
+                    />
+                  ) : (
+                    <span
+                      className={`flex-1 ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''}`}
+                      onClick={() => handleFieldClick('content', index, 'left')}
+                    >
+                      {item}
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Right Side */}
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
+            {/* Right Title */}
+            {editingField?.field === 'rightTitle' ? (
+              <input
+                type="text"
+                value={tempRightTitle}
+                onChange={(e) => setTempRightTitle(e.target.value)}
+                onBlur={() => handleFieldBlur('rightTitle')}
+                onKeyDown={(e) => handleKeyDown(e, 'rightTitle')}
+                className="w-full mb-6 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                style={{
+                  fontFamily: getFieldFormatting('rightTitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('rightTitle').fontFamily})`,
+                  fontSize: `${getFieldFormatting('rightTitle').fontSize}px`,
+                  color: getFieldFormatting('rightTitle').color || 'inherit',
+                  fontWeight: getFieldFormatting('rightTitle').fontWeight,
+                  fontStyle: getFieldFormatting('rightTitle').fontStyle,
+                  textDecoration: getFieldFormatting('rightTitle').textDecoration
+                }}
+                placeholder="Option B"
+                autoFocus
+              />
+            ) : (
+              <h3
+                className={`mb-6 text-center font-semibold ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${selectedElement === 'rightTitle' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                style={{
+                  fontFamily: getFieldFormatting('rightTitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('rightTitle').fontFamily})`,
+                  fontSize: `${getFieldFormatting('rightTitle').fontSize}px`,
+                  color: getFieldFormatting('rightTitle').color || 'inherit',
+                  fontWeight: getFieldFormatting('rightTitle').fontWeight,
+                  fontStyle: getFieldFormatting('rightTitle').fontStyle,
+                  textDecoration: getFieldFormatting('rightTitle').textDecoration
+                }}
+                onClick={() => handleFieldClick('rightTitle')}
+              >
+                {rightTitle}
+              </h3>
+            )}
+
+            {/* Right Content */}
+            <ul className="space-y-3">
+              {rightContent.map((item, index) => (
+                <li key={index} className="flex items-start">
+                  <span className="text-blue-400 mr-3 mt-1">✓</span>
+                  {editingField?.field === 'content' && editingField.index === index && editingField.side === 'right' ? (
+                    <input
+                      type="text"
+                      value={tempRightContent[index] || ''}
+                      onChange={(e) => updateTempContent('right', index, e.target.value)}
+                      onBlur={() => handleFieldBlur('content', index, 'right')}
+                      onKeyDown={(e) => handleKeyDown(e, 'content', index, 'right')}
+                      className="flex-1 bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+                      placeholder="Feature"
+                      autoFocus
+                    />
+                  ) : (
+                    <span
+                      className={`flex-1 ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''}`}
+                      onClick={() => handleFieldClick('content', index, 'right')}
+                    >
+                      {item}
+                    </span>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/slides/ContentImageSlide.tsx

@@ -4,30 +4,107 @@ export interface ContentImageSlideProps {
   title: string;
   body: Array<{ heading?: string; text: string }>;
   imageUrl?: string;
-  theme?: 'dark' | 'light';
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'sunset' | 'midnight';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  isEditable?: boolean;
+  onImageEdit?: () => void;
 }
 
-export default function ContentImageSlide({ title, body, imageUrl, theme = 'dark' }: ContentImageSlideProps) {
-  const isDark = theme === 'dark';
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function ContentImageSlide({ title, body, imageUrl, theme = 'dark', slideId, onFieldUpdate, isEditable = false, onImageEdit }: ContentImageSlideProps) {
+  const themeClasses = getThemeClasses(theme);
+
   return (
-    <div className={`w-full h-full ${isDark ? 'bg-black text-white' : 'bg-white text-slate-900'} p-10 grid grid-cols-1 md:grid-cols-2 gap-8 items-center`}>
-      <div>
-        <h2 className="text-3xl font-semibold mb-4">{title}</h2>
+    <div className={`w-full h-full ${themeClasses} p-10 grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative overflow-hidden`}>
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <div
+          aria-hidden
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%)',
+          }}
+        />
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%)',
+          }}
+        />
+      )}
+      {/* Background pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px]" />
+      </div>
+
+      <div className="relative z-10">
+        <h2 className="text-3xl font-semibold mb-4 drop-shadow-lg">{title}</h2>
         <div className="space-y-4">
           {body?.map((b, i) => (
             <div key={i}>
-              {b.heading && <div className="font-semibold">{b.heading}</div>}
-              <p className="opacity-90 leading-relaxed">{b.text}</p>
+              {b.heading && <div className="font-semibold drop-shadow-md">{b.heading}</div>}
+              <p className="opacity-90 leading-relaxed drop-shadow-sm">{b.text}</p>
             </div>
           ))}
         </div>
       </div>
-      <div className="w-full h-72 md:h-full rounded-xl overflow-hidden border border-white/10">
+      <div
+        className={`w-full h-72 md:h-full rounded-xl overflow-hidden border border-white/20 shadow-2xl relative z-10 ${isEditable ? 'cursor-pointer group' : ''}`}
+        onClick={isEditable ? onImageEdit : undefined}
+      >
         {imageUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img src={imageUrl} alt="" className="w-full h-full object-cover" />
+          <>
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img src={imageUrl} alt="" className="w-full h-full object-cover" />
+            {isEditable && (
+              <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <div className="bg-white text-black px-3 py-1 rounded text-sm font-medium">
+                  Click to change image
+                </div>
+              </div>
+            )}
+          </>
         ) : (
-          <div className="w-full h-full grid place-items-center opacity-70">No image</div>
+          <div className={`w-full h-full grid place-items-center opacity-70 bg-black/20 ${isEditable ? 'hover:bg-black/30 transition-colors' : ''}`}>
+            {isEditable ? 'Click to add image' : 'No image'}
+          </div>
         )}
       </div>
     </div>

components/slides/HeroSlide.tsx

@@ -0,0 +1,244 @@
+import React, { useState } from 'react';
+
+export interface HeroSlideProps {
+  title: string;
+  subtitle?: string;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function HeroSlide({
+  title,
+  subtitle,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 72,
+  selectedColor,
+  formatting = {}
+}: HeroSlideProps) {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 72 : 24)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : (field === 'title' ? '800' : 'normal'),
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string) => {
+    if (!isEditable) return;
+    setEditingField(field);
+    setSelectedElement(field);
+    if (field === 'title') setTempTitle(title);
+    if (field === 'subtitle') setTempSubtitle(subtitle || '');
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 72 : 24,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'subtitle' && tempSubtitle !== subtitle) {
+      onFieldUpdate(slideId, 'subtitle', tempSubtitle);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'subtitle') setTempSubtitle(subtitle || '');
+    }
+  };
+
+  return (
+    <div className={`w-full h-full flex flex-col items-center justify-center ${themeClasses} relative overflow-hidden`}>
+      {/* Special backgrounds for themed slides */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      {/* Minimal grid pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[length:60px_60px]" />
+      </div>
+
+      <div className="relative z-10 text-center max-w-6xl px-8">
+        {/* Hero Title - Extra large and bold */}
+        {editingField === 'title' ? (
+          <input
+            type="text"
+            value={tempTitle}
+            onChange={(e) => setTempTitle(e.target.value)}
+            onBlur={() => handleFieldBlur('title')}
+            onKeyDown={(e) => handleKeyDown(e, 'title')}
+            className="w-full mb-8 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            placeholder="Enter hero title"
+            autoFocus
+          />
+        ) : (
+          <h1
+            className={`mb-8 text-center leading-tight tracking-tight ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            onClick={() => handleFieldClick('title')}
+          >
+            {title}
+          </h1>
+        )}
+
+        {/* Hero Subtitle */}
+        {(subtitle || isEditable) && (
+          editingField === 'subtitle' ? (
+            <input
+              type="text"
+              value={tempSubtitle}
+              onChange={(e) => setTempSubtitle(e.target.value)}
+              onBlur={() => handleFieldBlur('subtitle')}
+              onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
+              className="w-full opacity-80 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+              style={{
+                fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                color: getFieldFormatting('subtitle').color || 'inherit',
+                fontWeight: getFieldFormatting('subtitle').fontWeight,
+                fontStyle: getFieldFormatting('subtitle').fontStyle,
+                textDecoration: getFieldFormatting('subtitle').textDecoration
+              }}
+              placeholder="Enter subtitle"
+              autoFocus
+            />
+          ) : (
+            <p
+              className={`opacity-80 max-w-4xl mx-auto text-center leading-relaxed ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${!subtitle && isEditable ? 'text-white/50' : ''} ${selectedElement === 'subtitle' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+              style={{
+                fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                color: getFieldFormatting('subtitle').color || 'inherit',
+                fontWeight: getFieldFormatting('subtitle').fontWeight,
+                fontStyle: getFieldFormatting('subtitle').fontStyle,
+                textDecoration: getFieldFormatting('subtitle').textDecoration
+              }}
+              onClick={() => handleFieldClick('subtitle')}
+            >
+              {subtitle || (isEditable ? 'Click to add subtitle' : '')}
+            </p>
+          )
+        )}
+      </div>
+    </div>
+  );
+}

components/slides/ImageOnlySlide.tsx

@@ -0,0 +1,277 @@
+import React, { useState } from 'react';
+
+export interface ImageOnlySlideProps {
+  title: string;
+  subtitle?: string;
+  imageUrl?: string;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string) => void;
+  isEditable?: boolean;
+  onImageEdit?: () => void;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function ImageOnlySlide({
+  title,
+  subtitle,
+  imageUrl,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onImageEdit,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 24,
+  selectedColor,
+  formatting = {}
+}: ImageOnlySlideProps) {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  // Get formatting for a specific field
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 24 : 16)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : 'normal',
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string) => {
+    if (!isEditable) return;
+    setEditingField(field);
+    setSelectedElement(field);
+    if (field === 'title') setTempTitle(title);
+    if (field === 'subtitle') setTempSubtitle(subtitle || '');
+
+    // Notify parent about text selection
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 24 : 16,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'subtitle' && tempSubtitle !== subtitle) {
+      onFieldUpdate(slideId, 'subtitle', tempSubtitle);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'subtitle') setTempSubtitle(subtitle || '');
+    }
+  };
+
+  return (
+    <div className={`w-full h-full ${themeClasses} relative overflow-hidden`}>
+      {/* Special backgrounds for themed slides */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      {/* Main Image */}
+      <div className="w-full h-full flex flex-col">
+        <div
+          className={`flex-1 ${isEditable ? 'cursor-pointer group' : ''}`}
+          onClick={isEditable ? onImageEdit : undefined}
+        >
+          {imageUrl ? (
+            <div className="relative w-full h-full">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={imageUrl} alt={title} className="w-full h-full object-cover" />
+              {isEditable && (
+                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                  <div className="bg-white text-black px-4 py-2 rounded text-sm font-medium">
+                    Click to change image
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className={`w-full h-full flex items-center justify-center bg-black/20 ${isEditable ? 'hover:bg-black/30 transition-colors' : ''}`}>
+              <div className="text-center">
+                <div className="text-6xl mb-4 opacity-50">🖼️</div>
+                <div className="text-white/70">
+                  {isEditable ? 'Click to add image' : 'No image'}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Caption Area */}
+        <div className="bg-black/30 backdrop-blur-sm p-6 text-center">
+          {/* Title */}
+          {editingField === 'title' ? (
+            <input
+              type="text"
+              value={tempTitle}
+              onChange={(e) => setTempTitle(e.target.value)}
+              onBlur={() => handleFieldBlur('title')}
+              onKeyDown={(e) => handleKeyDown(e, 'title')}
+              className="w-full mb-2 text-center drop-shadow-lg bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+              style={{
+                fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+                fontSize: `${getFieldFormatting('title').fontSize}px`,
+                color: getFieldFormatting('title').color || 'inherit',
+                fontWeight: getFieldFormatting('title').fontWeight,
+                fontStyle: getFieldFormatting('title').fontStyle,
+                textDecoration: getFieldFormatting('title').textDecoration
+              }}
+              placeholder="Enter title"
+              autoFocus
+            />
+          ) : (
+            <h2
+              className={`mb-2 text-center drop-shadow-lg transition-all font-semibold ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+              style={{
+                fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+                fontSize: `${getFieldFormatting('title').fontSize}px`,
+                color: getFieldFormatting('title').color || 'inherit',
+                fontWeight: getFieldFormatting('title').fontWeight,
+                fontStyle: getFieldFormatting('title').fontStyle,
+                textDecoration: getFieldFormatting('title').textDecoration
+              }}
+              onClick={() => handleFieldClick('title')}
+            >
+              {title}
+            </h2>
+          )}
+
+          {/* Subtitle/Caption */}
+          {(subtitle || isEditable) && (
+            editingField === 'subtitle' ? (
+              <input
+                type="text"
+                value={tempSubtitle}
+                onChange={(e) => setTempSubtitle(e.target.value)}
+                onBlur={() => handleFieldBlur('subtitle')}
+                onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
+                className="w-full text-center drop-shadow-md bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+                style={{
+                  fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                  fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                  color: getFieldFormatting('subtitle').color || 'inherit',
+                  fontWeight: getFieldFormatting('subtitle').fontWeight,
+                  fontStyle: getFieldFormatting('subtitle').fontStyle,
+                  textDecoration: getFieldFormatting('subtitle').textDecoration
+                }}
+                placeholder="Enter caption"
+                autoFocus
+              />
+            ) : (
+              <p
+                className={`text-center drop-shadow-md opacity-90 transition-all ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''} ${selectedElement === 'subtitle' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''} ${!subtitle && isEditable ? 'text-white/50' : ''}`}
+                style={{
+                  fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                  fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                  color: getFieldFormatting('subtitle').color || 'inherit',
+                  fontWeight: getFieldFormatting('subtitle').fontWeight,
+                  fontStyle: getFieldFormatting('subtitle').fontStyle,
+                  textDecoration: getFieldFormatting('subtitle').textDecoration
+                }}
+                onClick={() => handleFieldClick('subtitle')}
+              >
+                {subtitle || (isEditable ? 'Click to add caption' : '')}
+              </p>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/slides/QuoteSlide.tsx

@@ -0,0 +1,291 @@
+import React, { useState } from 'react';
+
+export interface QuoteSlideProps {
+  quote: string;
+  author?: string;
+  company?: string;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function QuoteSlide({
+  quote,
+  author,
+  company,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 32,
+  selectedColor,
+  formatting = {}
+}: QuoteSlideProps) {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempQuote, setTempQuote] = useState(quote);
+  const [tempAuthor, setTempAuthor] = useState(author || '');
+  const [tempCompany, setTempCompany] = useState(company || '');
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'quote' ? 32 : 18)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : 'normal',
+      fontStyle: fieldFormatting.italic ? 'italic' : (field === 'quote' ? 'italic' : 'normal'),
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string) => {
+    if (!isEditable) return;
+    setEditingField(field);
+    setSelectedElement(field);
+    if (field === 'quote') setTempQuote(quote);
+    if (field === 'author') setTempAuthor(author || '');
+    if (field === 'company') setTempCompany(company || '');
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'quote' ? 32 : 18,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'quote' && tempQuote !== quote) {
+      onFieldUpdate(slideId, 'quote', tempQuote);
+    }
+    if (field === 'author' && tempAuthor !== author) {
+      onFieldUpdate(slideId, 'author', tempAuthor);
+    }
+    if (field === 'company' && tempCompany !== company) {
+      onFieldUpdate(slideId, 'company', tempCompany);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
+    if (e.key === 'Enter' && field !== 'quote') {
+      e.preventDefault();
+      handleFieldBlur(field);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'quote') setTempQuote(quote);
+      if (field === 'author') setTempAuthor(author || '');
+      if (field === 'company') setTempCompany(company || '');
+    }
+  };
+
+  return (
+    <div className={`w-full h-full flex flex-col items-center justify-center ${themeClasses} p-12 relative overflow-hidden`}>
+      {/* Special backgrounds */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      <div className="relative z-10 text-center max-w-4xl">
+        {/* Quote Mark */}
+        <div className="text-8xl opacity-20 mb-8">"</div>
+
+        {/* Quote Text */}
+        {editingField === 'quote' ? (
+          <textarea
+            value={tempQuote}
+            onChange={(e) => setTempQuote(e.target.value)}
+            onBlur={() => handleFieldBlur('quote')}
+            onKeyDown={(e) => handleKeyDown(e, 'quote')}
+            className="w-full h-32 mb-12 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70 resize-none"
+            style={{
+              fontFamily: getFieldFormatting('quote').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('quote').fontFamily})`,
+              fontSize: `${getFieldFormatting('quote').fontSize}px`,
+              color: getFieldFormatting('quote').color || 'inherit',
+              fontWeight: getFieldFormatting('quote').fontWeight,
+              fontStyle: getFieldFormatting('quote').fontStyle,
+              textDecoration: getFieldFormatting('quote').textDecoration
+            }}
+            placeholder="Enter quote"
+            autoFocus
+          />
+        ) : (
+          <blockquote
+            className={`mb-12 leading-relaxed ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-4' : ''} ${selectedElement === 'quote' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+            style={{
+              fontFamily: getFieldFormatting('quote').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('quote').fontFamily})`,
+              fontSize: `${getFieldFormatting('quote').fontSize}px`,
+              color: getFieldFormatting('quote').color || 'inherit',
+              fontWeight: getFieldFormatting('quote').fontWeight,
+              fontStyle: getFieldFormatting('quote').fontStyle,
+              textDecoration: getFieldFormatting('quote').textDecoration
+            }}
+            onClick={() => handleFieldClick('quote')}
+          >
+            {quote}
+          </blockquote>
+        )}
+
+        {/* Attribution */}
+        <div className="space-y-2">
+          {/* Author */}
+          {(author || isEditable) && (
+            editingField === 'author' ? (
+              <input
+                type="text"
+                value={tempAuthor}
+                onChange={(e) => setTempAuthor(e.target.value)}
+                onBlur={() => handleFieldBlur('author')}
+                onKeyDown={(e) => handleKeyDown(e, 'author')}
+                className="w-full text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                style={{
+                  fontFamily: getFieldFormatting('author').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('author').fontFamily})`,
+                  fontSize: `${getFieldFormatting('author').fontSize}px`,
+                  color: getFieldFormatting('author').color || 'inherit',
+                  fontWeight: getFieldFormatting('author').fontWeight,
+                  fontStyle: getFieldFormatting('author').fontStyle,
+                  textDecoration: getFieldFormatting('author').textDecoration
+                }}
+                placeholder="Author name"
+                autoFocus
+              />
+            ) : (
+              <div
+                className={`font-semibold ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${!author && isEditable ? 'text-white/50' : ''} ${selectedElement === 'author' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                style={{
+                  fontFamily: getFieldFormatting('author').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('author').fontFamily})`,
+                  fontSize: `${getFieldFormatting('author').fontSize}px`,
+                  color: getFieldFormatting('author').color || 'inherit',
+                  fontWeight: getFieldFormatting('author').fontWeight,
+                  fontStyle: getFieldFormatting('author').fontStyle,
+                  textDecoration: getFieldFormatting('author').textDecoration
+                }}
+                onClick={() => handleFieldClick('author')}
+              >
+                {author || (isEditable ? 'Click to add author' : '')}
+              </div>
+            )
+          )}
+
+          {/* Company */}
+          {(company || isEditable) && (
+            editingField === 'company' ? (
+              <input
+                type="text"
+                value={tempCompany}
+                onChange={(e) => setTempCompany(e.target.value)}
+                onBlur={() => handleFieldBlur('company')}
+                onKeyDown={(e) => handleKeyDown(e, 'company')}
+                className="w-full text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                style={{
+                  fontFamily: getFieldFormatting('company').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('company').fontFamily})`,
+                  fontSize: `${getFieldFormatting('company').fontSize}px`,
+                  color: getFieldFormatting('company').color || 'inherit',
+                  fontWeight: getFieldFormatting('company').fontWeight,
+                  fontStyle: getFieldFormatting('company').fontStyle,
+                  textDecoration: getFieldFormatting('company').textDecoration
+                }}
+                placeholder="Company name"
+                autoFocus
+              />
+            ) : (
+              <div
+                className={`opacity-80 ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${!company && isEditable ? 'text-white/50' : ''} ${selectedElement === 'company' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                style={{
+                  fontFamily: getFieldFormatting('company').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('company').fontFamily})`,
+                  fontSize: `${getFieldFormatting('company').fontSize}px`,
+                  color: getFieldFormatting('company').color || 'inherit',
+                  fontWeight: getFieldFormatting('company').fontWeight,
+                  fontStyle: getFieldFormatting('company').fontStyle,
+                  textDecoration: getFieldFormatting('company').textDecoration
+                }}
+                onClick={() => handleFieldClick('company')}
+              >
+                {company || (isEditable ? 'Click to add company' : '')}
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/slides/SectionSlide.tsx

@@ -0,0 +1,299 @@
+import React, { useState } from 'react';
+
+export interface SectionSlideProps {
+  title: string;
+  subtitle?: string;
+  sectionNumber?: string;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function SectionSlide({
+  title,
+  subtitle,
+  sectionNumber,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 48,
+  selectedColor,
+  formatting = {}
+}: SectionSlideProps) {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
+  const [tempSectionNumber, setTempSectionNumber] = useState(sectionNumber || '');
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 48 : field === 'sectionNumber' ? 120 : 24)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : (field === 'title' ? '700' : field === 'sectionNumber' ? '900' : 'normal'),
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string) => {
+    if (!isEditable) return;
+    setEditingField(field);
+    setSelectedElement(field);
+    if (field === 'title') setTempTitle(title);
+    if (field === 'subtitle') setTempSubtitle(subtitle || '');
+    if (field === 'sectionNumber') setTempSectionNumber(sectionNumber || '');
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 48 : field === 'sectionNumber' ? 120 : 24,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'subtitle' && tempSubtitle !== subtitle) {
+      onFieldUpdate(slideId, 'subtitle', tempSubtitle);
+    }
+    if (field === 'sectionNumber' && tempSectionNumber !== sectionNumber) {
+      onFieldUpdate(slideId, 'sectionNumber', tempSectionNumber);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'subtitle') setTempSubtitle(subtitle || '');
+      if (field === 'sectionNumber') setTempSectionNumber(sectionNumber || '');
+    }
+  };
+
+  return (
+    <div className={`w-full h-full ${themeClasses} relative overflow-hidden`}>
+      {/* Special backgrounds */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      {/* Decorative elements */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent" />
+        <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-white to-transparent" />
+      </div>
+
+      <div className="relative z-10 h-full flex items-center">
+        <div className="w-full px-16">
+          <div className="grid grid-cols-12 gap-8 items-center">
+            {/* Large Section Number */}
+            <div className="col-span-4">
+              {editingField === 'sectionNumber' ? (
+                <input
+                  type="text"
+                  value={tempSectionNumber}
+                  onChange={(e) => setTempSectionNumber(e.target.value)}
+                  onBlur={() => handleFieldBlur('sectionNumber')}
+                  onKeyDown={(e) => handleKeyDown(e, 'sectionNumber')}
+                  className="w-full text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                  style={{
+                    fontFamily: getFieldFormatting('sectionNumber').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('sectionNumber').fontFamily})`,
+                    fontSize: `${getFieldFormatting('sectionNumber').fontSize}px`,
+                    color: getFieldFormatting('sectionNumber').color || 'inherit',
+                    fontWeight: getFieldFormatting('sectionNumber').fontWeight,
+                    fontStyle: getFieldFormatting('sectionNumber').fontStyle,
+                    textDecoration: getFieldFormatting('sectionNumber').textDecoration
+                  }}
+                  placeholder="01"
+                  autoFocus
+                />
+              ) : (
+                <div
+                  className={`text-center opacity-30 leading-none ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-4' : ''} ${selectedElement === 'sectionNumber' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                  style={{
+                    fontFamily: getFieldFormatting('sectionNumber').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('sectionNumber').fontFamily})`,
+                    fontSize: `${getFieldFormatting('sectionNumber').fontSize}px`,
+                    color: getFieldFormatting('sectionNumber').color || 'inherit',
+                    fontWeight: getFieldFormatting('sectionNumber').fontWeight,
+                    fontStyle: getFieldFormatting('sectionNumber').fontStyle,
+                    textDecoration: getFieldFormatting('sectionNumber').textDecoration
+                  }}
+                  onClick={() => handleFieldClick('sectionNumber')}
+                >
+                  {sectionNumber || (isEditable ? '01' : '')}
+                </div>
+              )}
+            </div>
+
+            {/* Section Content */}
+            <div className="col-span-8">
+              {/* Section Title */}
+              {editingField === 'title' ? (
+                <input
+                  type="text"
+                  value={tempTitle}
+                  onChange={(e) => setTempTitle(e.target.value)}
+                  onBlur={() => handleFieldBlur('title')}
+                  onKeyDown={(e) => handleKeyDown(e, 'title')}
+                  className="w-full mb-4 bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                  style={{
+                    fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+                    fontSize: `${getFieldFormatting('title').fontSize}px`,
+                    color: getFieldFormatting('title').color || 'inherit',
+                    fontWeight: getFieldFormatting('title').fontWeight,
+                    fontStyle: getFieldFormatting('title').fontStyle,
+                    textDecoration: getFieldFormatting('title').textDecoration
+                  }}
+                  placeholder="Section Title"
+                  autoFocus
+                />
+              ) : (
+                <h2
+                  className={`mb-4 leading-tight ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                  style={{
+                    fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+                    fontSize: `${getFieldFormatting('title').fontSize}px`,
+                    color: getFieldFormatting('title').color || 'inherit',
+                    fontWeight: getFieldFormatting('title').fontWeight,
+                    fontStyle: getFieldFormatting('title').fontStyle,
+                    textDecoration: getFieldFormatting('title').textDecoration
+                  }}
+                  onClick={() => handleFieldClick('title')}
+                >
+                  {title}
+                </h2>
+              )}
+
+              {/* Section Subtitle */}
+              {(subtitle || isEditable) && (
+                editingField === 'subtitle' ? (
+                  <input
+                    type="text"
+                    value={tempSubtitle}
+                    onChange={(e) => setTempSubtitle(e.target.value)}
+                    onBlur={() => handleFieldBlur('subtitle')}
+                    onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
+                    className="w-full bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                    style={{
+                      fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                      fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                      color: getFieldFormatting('subtitle').color || 'inherit',
+                      fontWeight: getFieldFormatting('subtitle').fontWeight,
+                      fontStyle: getFieldFormatting('subtitle').fontStyle,
+                      textDecoration: getFieldFormatting('subtitle').textDecoration
+                    }}
+                    placeholder="Section description"
+                    autoFocus
+                  />
+                ) : (
+                  <p
+                    className={`opacity-80 leading-relaxed ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${!subtitle && isEditable ? 'text-white/50' : ''} ${selectedElement === 'subtitle' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+                    style={{
+                      fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                      fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                      color: getFieldFormatting('subtitle').color || 'inherit',
+                      fontWeight: getFieldFormatting('subtitle').fontWeight,
+                      fontStyle: getFieldFormatting('subtitle').fontStyle,
+                      textDecoration: getFieldFormatting('subtitle').textDecoration
+                    }}
+                    onClick={() => handleFieldClick('subtitle')}
+                  >
+                    {subtitle || (isEditable ? 'Click to add description' : '')}
+                  </p>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/slides/SlideFactory.tsx

@@ -3,6 +3,13 @@ import TitleSlide from './TitleSlide';
 import ContentImageSlide from './ContentImageSlide';
 import BulletsSlide from './BulletsSlide';
 import ChartSlide from './ChartSlide';
+import TwoColumnSlide from './TwoColumnSlide';
+import ImageOnlySlide from './ImageOnlySlide';
+import HeroSlide from './HeroSlide';
+import StatsSlide from './StatsSlide';
+import QuoteSlide from './QuoteSlide';
+import SectionSlide from './SectionSlide';
+import ComparisonSlide from './ComparisonSlide';
 
 export type SlideSpec = {
   id: string;
@@ -16,20 +23,222 @@ export type SlideSpec = {
     data: Record<string, unknown>;
     options?: Record<string, unknown>;
   };
+  // New properties for modern slide types
+  quote?: string;
+  author?: string;
+  company?: string;
+  stats?: Array<{ number: string; label: string }>;
+  sectionNumber?: string;
+  leftTitle?: string;
+  rightTitle?: string;
+  leftContent?: Array<string>;
+  rightContent?: Array<string>;
+  // Optional per-field formatting captured by the editor (not required by renderers)
+  formatting?: Record<string, Record<string, unknown>>;
 };
 
-export function renderSlide(spec: SlideSpec, theme: 'dark' | 'light' = 'dark') {
+export function renderSlide(
+  spec: SlideSpec,
+  theme: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset' = 'dark',
+  options?: {
+    isEditable?: boolean;
+    onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+    onTextSelect?: (element: any) => void;
+    selectedFont?: string;
+    selectedFontSize?: number;
+    selectedColor?: string;
+    onImageEdit?: () => void;
+  }
+) {
+  const { isEditable = false, onFieldUpdate, onTextSelect, selectedFont, selectedFontSize, selectedColor, onImageEdit } = options || {};
+
   switch (spec.layout) {
     case 'title':
-      return <TitleSlide title={spec.title || ''} subtitle={spec.subtitle} theme={theme} />;
+      return (
+        <TitleSlide
+          title={spec.title || ''}
+          subtitle={spec.subtitle}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
     case 'content-image':
-      return <ContentImageSlide title={spec.title || ''} body={spec.body || []} imageUrl={spec.images?.[0]} theme={theme} />;
+      return (
+        <ContentImageSlide
+          title={spec.title || ''}
+          body={spec.body || []}
+          imageUrl={spec.images?.[0]}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onImageEdit={onImageEdit}
+        />
+      );
     case 'bullets':
-      return <BulletsSlide title={spec.title || ''} body={spec.body || []} theme={theme} />;
+      return (
+        <BulletsSlide
+          title={spec.title || ''}
+          body={spec.body || []}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+        />
+      );
     case 'chart':
-      return <ChartSlide title={spec.title || ''} chart={spec.chart} theme={theme} />;
+      return (
+        <ChartSlide
+          title={spec.title || ''}
+          chart={spec.chart}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+        />
+      );
+    case 'two-column':
+      return (
+        <TwoColumnSlide
+          title={spec.title || ''}
+          body={spec.body || []}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
+    case 'image-only':
+      return (
+        <ImageOnlySlide
+          title={spec.title || ''}
+          subtitle={spec.subtitle}
+          imageUrl={spec.images?.[0]}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onImageEdit={onImageEdit}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
+    case 'hero':
+      return (
+        <HeroSlide
+          title={spec.title || ''}
+          subtitle={spec.subtitle}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
+    case 'stats':
+      return (
+        <StatsSlide
+          title={spec.title || ''}
+          stats={spec.stats || []}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
+    case 'quote':
+      return (
+        <QuoteSlide
+          quote={spec.quote || ''}
+          author={spec.author}
+          company={spec.company}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
+    case 'section':
+      return (
+        <SectionSlide
+          title={spec.title || ''}
+          subtitle={spec.subtitle}
+          sectionNumber={spec.sectionNumber}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
+    case 'comparison':
+      return (
+        <ComparisonSlide
+          title={spec.title || ''}
+          leftTitle={spec.leftTitle || 'Option A'}
+          rightTitle={spec.rightTitle || 'Option B'}
+          leftContent={spec.leftContent || []}
+          rightContent={spec.rightContent || []}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
     default:
-      return <TitleSlide title={spec.title || 'Slide'} subtitle={spec.subtitle} theme={theme} />;
+      return (
+        <TitleSlide
+          title={spec.title || 'Slide'}
+          subtitle={spec.subtitle}
+          theme={theme}
+          slideId={spec.id}
+          onFieldUpdate={onFieldUpdate}
+          isEditable={isEditable}
+          onTextSelect={onTextSelect}
+          selectedFont={selectedFont}
+          selectedFontSize={selectedFontSize}
+          selectedColor={selectedColor}
+          formatting={spec.formatting}
+        />
+      );
   }
 }
 

components/slides/StatsSlide.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+
+export interface StatsSlideProps {
+  title: string;
+  stats: Array<{ number: string; label: string }>;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function StatsSlide({
+  title,
+  stats = [
+    { number: '100+', label: 'Customers' },
+    { number: '50M', label: 'Revenue' },
+    { number: '99%', label: 'Satisfaction' }
+  ],
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 16,
+  selectedColor,
+  formatting = {}
+}: StatsSlideProps) {
+  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempStats, setTempStats] = useState(stats);
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 32 : 16)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : 'normal',
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string, index?: number) => {
+    if (!isEditable) return;
+    setEditingField({ field, index });
+    setSelectedElement(field);
+    if (field === 'title') setTempTitle(title);
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 32 : 16,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string, index?: number) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'stat' && typeof index === 'number') {
+      // Handle stat updates
+      const statKey = `stat-${index}`;
+      onFieldUpdate(slideId, statKey, JSON.stringify(tempStats[index]));
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field, index);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'stat') setTempStats([...stats]);
+    }
+  };
+
+  const updateTempStat = (index: number, key: 'number' | 'label', value: string) => {
+    const newStats = [...tempStats];
+    newStats[index] = { ...newStats[index], [key]: value };
+    setTempStats(newStats);
+  };
+
+  return (
+    <div className={`w-full h-full ${themeClasses} p-12 relative overflow-hidden`}>
+      {/* Special backgrounds */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      <div className="relative z-10 h-full flex flex-col">
+        {/* Title */}
+        {editingField?.field === 'title' ? (
+          <input
+            type="text"
+            value={tempTitle}
+            onChange={(e) => setTempTitle(e.target.value)}
+            onBlur={() => handleFieldBlur('title')}
+            onKeyDown={(e) => handleKeyDown(e, 'title')}
+            className="mb-16 text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            placeholder="Enter title"
+            autoFocus
+          />
+        ) : (
+          <h2
+            className={`mb-16 text-center font-semibold ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-2' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            onClick={() => handleFieldClick('title')}
+          >
+            {title}
+          </h2>
+        )}
+
+        {/* Stats Grid */}
+        <div className="flex-1 flex items-center justify-center">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-16 w-full max-w-4xl">
+            {stats.map((stat, index) => (
+              <div key={index} className="text-center">
+                {/* Stat Number */}
+                {editingField?.field === 'stat' && editingField.index === index ? (
+                  <div className="space-y-4">
+                    <input
+                      type="text"
+                      value={tempStats[index]?.number || ''}
+                      onChange={(e) => updateTempStat(index, 'number', e.target.value)}
+                      onBlur={() => handleFieldBlur('stat', index)}
+                      onKeyDown={(e) => handleKeyDown(e, 'stat', index)}
+                      className="w-full text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70 text-4xl font-bold"
+                      placeholder="Number"
+                      autoFocus
+                    />
+                    <input
+                      type="text"
+                      value={tempStats[index]?.label || ''}
+                      onChange={(e) => updateTempStat(index, 'label', e.target.value)}
+                      className="w-full text-center bg-transparent border-2 border-white/50 rounded px-4 py-2 outline-none text-white placeholder-white/70"
+                      placeholder="Label"
+                    />
+                  </div>
+                ) : (
+                  <div
+                    className={`${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-4 py-6' : ''}`}
+                    onClick={() => handleFieldClick('stat', index)}
+                  >
+                    <div className="text-6xl font-bold mb-4 bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent">
+                      {stat.number}
+                    </div>
+                    <div className="text-lg opacity-80 font-medium uppercase tracking-wide">
+                      {stat.label}
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

components/slides/TitleSlide.tsx

@@ -1,17 +1,260 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 export interface TitleSlideProps {
   title: string;
   subtitle?: string;
-  theme?: 'dark' | 'light';
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
 }
 
-export default function TitleSlide({ title, subtitle, theme = 'dark' }: TitleSlideProps) {
-  const isDark = theme === 'dark';
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function TitleSlide({
+  title,
+  subtitle,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 48,
+  selectedColor,
+  formatting = {}
+}: TitleSlideProps) {
+  const [editingField, setEditingField] = useState<string | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  // Get formatting for a specific field
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 48 : 18)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : 'normal',
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string) => {
+    if (!isEditable) return;
+    setEditingField(field);
+    setSelectedElement(field);
+    if (field === 'title') setTempTitle(title);
+    if (field === 'subtitle') setTempSubtitle(subtitle || '');
+
+    // Notify parent about text selection
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 48 : 18,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleTextSelect = (field: string) => {
+    if (!isEditable) return;
+    setSelectedElement(field);
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 48 : 18,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'subtitle' && tempSubtitle !== subtitle) {
+      onFieldUpdate(slideId, 'subtitle', tempSubtitle);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'subtitle') setTempSubtitle(subtitle || '');
+    }
+  };
+
   return (
-    <div className={`w-full h-full flex flex-col items-center justify-center ${isDark ? 'text-white bg-black' : 'text-slate-900 bg-white'} p-10 transition-colors`}>
-      <h1 className="text-5xl font-serif mb-4 text-center">{title}</h1>
-      {subtitle && <p className="text-lg opacity-80 max-w-3xl text-center">{subtitle}</p>}
+    <div className={`w-full h-full flex flex-col items-center justify-center ${themeClasses} p-10 transition-colors relative overflow-hidden`}>
+      {/* Aurora background to match reference (purple/indigo on black) */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+      {/* Background pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px]" />
+      </div>
+
+      <div className="relative z-10 text-center">
+        {editingField === 'title' ? (
+          <input
+            type="text"
+            value={tempTitle}
+            onChange={(e) => setTempTitle(e.target.value)}
+            onBlur={() => handleFieldBlur('title')}
+            onKeyDown={(e) => handleKeyDown(e, 'title')}
+            className="mb-4 text-center drop-shadow-lg bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            placeholder="Enter title"
+            autoFocus
+          />
+        ) : (
+          <h1
+            className={`mb-4 text-center drop-shadow-lg transition-all ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            onClick={() => handleFieldClick('title')}
+            onMouseDown={() => handleTextSelect('title')}
+          >
+            {title}
+          </h1>
+        )}
+
+        {(subtitle || isEditable) && (
+          editingField === 'subtitle' ? (
+            <input
+              type="text"
+              value={tempSubtitle}
+              onChange={(e) => setTempSubtitle(e.target.value)}
+              onBlur={() => handleFieldBlur('subtitle')}
+              onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
+              className="opacity-90 max-w-3xl text-center drop-shadow-md bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+              style={{
+                fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                color: getFieldFormatting('subtitle').color || 'inherit',
+                fontWeight: getFieldFormatting('subtitle').fontWeight,
+                fontStyle: getFieldFormatting('subtitle').fontStyle,
+                textDecoration: getFieldFormatting('subtitle').textDecoration
+              }}
+              placeholder="Enter subtitle"
+              autoFocus
+            />
+          ) : (
+            <p
+              className={`opacity-90 max-w-3xl text-center drop-shadow-md transition-all ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''} ${!subtitle && isEditable ? 'text-white/50' : ''} ${selectedElement === 'subtitle' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+              style={{
+                fontFamily: getFieldFormatting('subtitle').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('subtitle').fontFamily})`,
+                fontSize: `${getFieldFormatting('subtitle').fontSize}px`,
+                color: getFieldFormatting('subtitle').color || 'inherit',
+                fontWeight: getFieldFormatting('subtitle').fontWeight,
+                fontStyle: getFieldFormatting('subtitle').fontStyle,
+                textDecoration: getFieldFormatting('subtitle').textDecoration
+              }}
+              onClick={() => handleFieldClick('subtitle')}
+              onMouseDown={() => handleTextSelect('subtitle')}
+            >
+              {subtitle || (isEditable ? 'Click to add subtitle' : '')}
+            </p>
+          )
+        )}
+      </div>
     </div>
   );
 }

components/slides/TwoColumnSlide.tsx

@@ -0,0 +1,284 @@
+import React, { useState } from 'react';
+
+export interface TwoColumnSlideProps {
+  title: string;
+  body: Array<{ heading?: string; text: string }>;
+  theme?: 'dark' | 'light' | 'blue' | 'purple' | 'green' | 'orange' | 'teal' | 'pink' | 'indigo' | 'amber' | 'emerald' | 'slate' | 'midnight' | 'sunset';
+  slideId?: string;
+  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  isEditable?: boolean;
+  onTextSelect?: (element: any) => void;
+  selectedFont?: string;
+  selectedFontSize?: number;
+  selectedColor?: string;
+  formatting?: Record<string, Record<string, any>>;
+}
+
+const getThemeClasses = (theme: string) => {
+  switch (theme) {
+    case 'light':
+      return 'text-slate-900 bg-white';
+    case 'blue':
+      return 'text-white bg-gradient-to-br from-blue-600 to-blue-800';
+    case 'purple':
+      return 'text-white bg-gradient-to-br from-purple-600 to-purple-800';
+    case 'green':
+      return 'text-white bg-gradient-to-br from-green-600 to-green-800';
+    case 'orange':
+      return 'text-white bg-gradient-to-br from-orange-600 to-orange-800';
+    case 'teal':
+      return 'text-white bg-gradient-to-br from-teal-600 to-cyan-700';
+    case 'pink':
+      return 'text-white bg-gradient-to-br from-pink-600 to-rose-700';
+    case 'indigo':
+      return 'text-white bg-[#0b0c14]';
+    case 'midnight':
+      return 'text-white bg-[#0b0c14]';
+    case 'sunset':
+      return 'text-white bg-[#220b03]';
+    case 'amber':
+      return 'text-white bg-gradient-to-br from-amber-500 to-orange-600';
+    case 'emerald':
+      return 'text-white bg-gradient-to-br from-emerald-500 to-teal-600';
+    case 'slate':
+      return 'text-white bg-gradient-to-br from-slate-700 to-gray-800';
+    default: // dark
+      return 'text-white bg-gradient-to-br from-gray-800 to-gray-900';
+  }
+};
+
+export default function TwoColumnSlide({
+  title,
+  body,
+  theme = 'dark',
+  slideId,
+  onFieldUpdate,
+  isEditable = false,
+  onTextSelect,
+  selectedFont = 'serif',
+  selectedFontSize = 16,
+  selectedColor,
+  formatting = {}
+}: TwoColumnSlideProps) {
+  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempBody, setTempBody] = useState<string[]>(body?.map(b => b.text) || []);
+  const [selectedElement, setSelectedElement] = useState<string | null>(null);
+
+  const themeClasses = getThemeClasses(theme);
+
+  // Get formatting for a specific field
+  const getFieldFormatting = (field: string) => {
+    const fieldFormatting = formatting[field] || {};
+    return {
+      fontFamily: fieldFormatting.fontFamily || (selectedElement === field ? selectedFont : 'serif'),
+      fontSize: fieldFormatting.fontSize || (selectedElement === field ? selectedFontSize : (field === 'title' ? 36 : 16)),
+      color: fieldFormatting.color || (selectedElement === field ? selectedColor : undefined),
+      fontWeight: fieldFormatting.bold ? 'bold' : 'normal',
+      fontStyle: fieldFormatting.italic ? 'italic' : 'normal',
+      textDecoration: fieldFormatting.underline ? 'underline' : 'none'
+    };
+  };
+
+  const handleFieldClick = (field: string, index?: number) => {
+    if (!isEditable) return;
+    setEditingField({ field, index });
+    setSelectedElement(field);
+    if (field === 'title') setTempTitle(title);
+    if (field === 'body' && typeof index === 'number') {
+      setTempBody(body?.map(b => b.text) || []);
+    }
+
+    // Notify parent about text selection
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 36 : 16,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleTextSelect = (field: string) => {
+    if (!isEditable) return;
+    setSelectedElement(field);
+
+    if (onTextSelect) {
+      onTextSelect({
+        field,
+        slideId,
+        currentFont: selectedFont,
+        currentFontSize: field === 'title' ? 36 : 16,
+        currentColor: selectedColor
+      });
+    }
+  };
+
+  const handleFieldBlur = (field: string, index?: number) => {
+    if (!slideId || !onFieldUpdate) return;
+
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'body' && typeof index === 'number' && tempBody[index] !== body?.[index]?.text) {
+      onFieldUpdate(slideId, 'body', tempBody[index], index);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFieldBlur(field, index);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      if (field === 'title') setTempTitle(title);
+      if (field === 'body') setTempBody(body?.map(b => b.text) || []);
+    }
+  };
+
+  const updateTempBodyItem = (index: number, value: string) => {
+    const newTempBody = [...tempBody];
+    newTempBody[index] = value;
+    setTempBody(newTempBody);
+  };
+
+  return (
+    <div className={`w-full h-full ${themeClasses} p-10 relative overflow-hidden`}>
+      {/* Special backgrounds for themed slides */}
+      {(theme === 'indigo' || theme === 'midnight') && (
+        <>
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              background:
+                'radial-gradient(55% 65% at 68% 12%, rgba(99,102,241,0.75) 0%, rgba(99,102,241,0.25) 45%, transparent 70%), radial-gradient(50% 60% at 32% 70%, rgba(168,85,247,0.7) 0%, rgba(168,85,247,0.25) 45%, transparent 70%), linear-gradient(180deg, #05050a 0%, #0b0c14 100%)',
+            }}
+          />
+          <div
+            aria-hidden
+            className="absolute inset-0 -z-10"
+            style={{
+              backgroundImage:
+                'radial-gradient(circle, rgba(255,255,255,0.2) 1px, rgba(255,255,255,0) 1.6px)',
+              backgroundSize: '160px 160px',
+              opacity: 0.25,
+            }}
+          />
+        </>
+      )}
+      {theme === 'sunset' && (
+        <div
+          aria-hidden
+          className="absolute inset-0 -z-10"
+          style={{
+            background:
+              'radial-gradient(60% 60% at 60% 0%, rgba(255,115,80,0.8) 0%, rgba(255,115,80,0.25) 40%, transparent 70%), radial-gradient(70% 50% at 0% 90%, rgba(255,191,0,0.6) 0%, rgba(255,191,0,0.2) 45%, transparent 70%), linear-gradient(180deg, #260a03 0%, #3a0d05 100%)',
+          }}
+        />
+      )}
+
+      {/* Background pattern */}
+      <div className="absolute inset-0 opacity-5">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_white_1px,_transparent_0)] bg-[length:20px_20px]" />
+      </div>
+
+      <div className="relative z-10">
+        {/* Title */}
+        {editingField?.field === 'title' ? (
+          <input
+            type="text"
+            value={tempTitle}
+            onChange={(e) => setTempTitle(e.target.value)}
+            onBlur={() => handleFieldBlur('title')}
+            onKeyDown={(e) => handleKeyDown(e, 'title')}
+            className="w-full mb-8 text-center drop-shadow-lg bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70"
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            placeholder="Enter title"
+            autoFocus
+          />
+        ) : (
+          <h2
+            className={`mb-8 text-center drop-shadow-lg transition-all ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''} ${selectedElement === 'title' ? 'ring-2 ring-blue-400 bg-blue-100/20' : ''}`}
+            style={{
+              fontFamily: getFieldFormatting('title').fontFamily === 'serif' ? 'serif' : `var(--font-${getFieldFormatting('title').fontFamily})`,
+              fontSize: `${getFieldFormatting('title').fontSize}px`,
+              color: getFieldFormatting('title').color || 'inherit',
+              fontWeight: getFieldFormatting('title').fontWeight,
+              fontStyle: getFieldFormatting('title').fontStyle,
+              textDecoration: getFieldFormatting('title').textDecoration
+            }}
+            onClick={() => handleFieldClick('title')}
+            onMouseDown={() => handleTextSelect('title')}
+          >
+            {title}
+          </h2>
+        )}
+
+        {/* Two Columns */}
+        <div className="grid md:grid-cols-2 gap-8 h-96">
+          {/* Left Column */}
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
+            {body?.[0]?.heading && (
+              <h3 className="text-xl font-semibold mb-4 drop-shadow-md">{body[0].heading}</h3>
+            )}
+            {editingField?.field === 'body' && editingField.index === 0 ? (
+              <textarea
+                value={tempBody[0] || ''}
+                onChange={(e) => updateTempBodyItem(0, e.target.value)}
+                onBlur={() => handleFieldBlur('body', 0)}
+                onKeyDown={(e) => handleKeyDown(e, 'body', 0)}
+                className="w-full h-32 bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70 resize-none"
+                placeholder="Left column content"
+                autoFocus
+              />
+            ) : (
+              <p
+                className={`opacity-90 leading-relaxed drop-shadow-sm ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''}`}
+                onClick={() => handleFieldClick('body', 0)}
+              >
+                {body?.[0]?.text || 'Left column content'}
+              </p>
+            )}
+          </div>
+
+          {/* Right Column */}
+          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 border border-white/20">
+            {body?.[1]?.heading && (
+              <h3 className="text-xl font-semibold mb-4 drop-shadow-md">{body[1].heading}</h3>
+            )}
+            {editingField?.field === 'body' && editingField.index === 1 ? (
+              <textarea
+                value={tempBody[1] || ''}
+                onChange={(e) => updateTempBodyItem(1, e.target.value)}
+                onBlur={() => handleFieldBlur('body', 1)}
+                onKeyDown={(e) => handleKeyDown(e, 'body', 1)}
+                className="w-full h-32 bg-transparent border-2 border-white/50 rounded px-2 py-1 outline-none text-white placeholder-white/70 resize-none"
+                placeholder="Right column content"
+                autoFocus
+              />
+            ) : (
+              <p
+                className={`opacity-90 leading-relaxed drop-shadow-sm ${isEditable ? 'cursor-pointer hover:bg-white/10 rounded px-2 py-1' : ''}`}
+                onClick={() => handleFieldClick('body', 1)}
+              >
+                {body?.[1]?.text || 'Right column content'}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

data/templates.ts

@@ -0,0 +1,391 @@
+import { SlideSpec } from '@/components/slides/SlideFactory';
+
+export interface Template {
+  id: string;
+  name: string;
+  description: string;
+  thumbnail: string;
+  theme: string;
+  slides: Omit<SlideSpec, 'id'>[];
+}
+
+export const professionalTemplates: Template[] = [
+  {
+    id: 'business-pitch',
+    name: 'Business Pitch',
+    description: 'Professional presentation for business proposals',
+    thumbnail: '💼',
+    theme: 'midnight',
+    slides: [
+      {
+        layout: 'hero',
+        title: 'Your Company Name',
+        subtitle: 'Innovative Solutions for Tomorrow'
+      },
+      {
+        layout: 'section',
+        title: 'Problem & Opportunity',
+        subtitle: 'Understanding the market challenge',
+        sectionNumber: '01'
+      },
+      {
+        layout: 'bullets',
+        title: 'Market Problem',
+        body: [
+          { text: 'Current solutions are outdated and inefficient' },
+          { text: '$2.5B market opportunity waiting to be captured' },
+          { text: 'Customers struggling with legacy systems' },
+          { text: '45% increase in demand for modern solutions' }
+        ]
+      },
+      {
+        layout: 'section',
+        title: 'Our Solution',
+        subtitle: 'Revolutionary approach to solving industry challenges',
+        sectionNumber: '02'
+      },
+      {
+        layout: 'two-column',
+        title: 'How We Solve It',
+        body: [
+          { heading: 'Traditional Approach', text: 'Manual processes\nHigh error rates\nSlow implementation\nLimited scalability' },
+          { heading: 'Our Innovation', text: 'Automated workflows\n99.9% accuracy\nRapid deployment\nInfinite scalability' }
+        ]
+      },
+      {
+        layout: 'stats',
+        title: 'Proven Results',
+        stats: [
+          { number: '300%', label: 'ROI Increase' },
+          { number: '50K+', label: 'Users' },
+          { number: '99.9%', label: 'Uptime' }
+        ]
+      },
+      {
+        layout: 'quote',
+        quote: 'This solution transformed our entire operation. We\'ve never seen results like this before.',
+        author: 'Jane Smith',
+        company: 'Fortune 500 Company'
+      },
+      {
+        layout: 'section',
+        title: 'Financial Projections',
+        subtitle: 'Expected growth and revenue targets',
+        sectionNumber: '03'
+      },
+      {
+        layout: 'chart',
+        title: 'Revenue Growth Forecast',
+        chart: {
+          type: 'bar',
+          data: {
+            labels: ['Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5'],
+            datasets: [{
+              data: [250, 500, 1200, 2800, 5000]
+            }]
+          }
+        }
+      },
+      {
+        layout: 'comparison',
+        title: 'Investment Options',
+        leftTitle: 'Basic Package',
+        rightTitle: 'Premium Package',
+        leftContent: [
+          'Core features',
+          'Email support',
+          '1 year license',
+          'Basic training'
+        ],
+        rightContent: [
+          'All premium features',
+          '24/7 phone support',
+          'Lifetime license',
+          'Comprehensive training'
+        ]
+      },
+      {
+        layout: 'hero',
+        title: 'Let\'s Build the Future Together',
+        subtitle: 'Ready to transform your business?'
+      }
+    ]
+  },
+  {
+    id: 'startup-deck',
+    name: 'Startup Pitch Deck',
+    description: 'Complete investor pitch deck template',
+    thumbnail: '🚀',
+    theme: 'blue',
+    slides: [
+      {
+        layout: 'hero',
+        title: 'Startup Name',
+        subtitle: 'Disrupting the Industry'
+      },
+      {
+        layout: 'bullets',
+        title: 'The Problem',
+        body: [
+          { text: 'Market inefficiency costs billions annually' },
+          { text: 'Current solutions are fragmented and complex' },
+          { text: 'Users demand better, faster alternatives' }
+        ]
+      },
+      {
+        layout: 'image-only',
+        title: 'Our Solution',
+        subtitle: 'Revolutionary platform that changes everything'
+      },
+      {
+        layout: 'stats',
+        title: 'Market Opportunity',
+        stats: [
+          { number: '$50B', label: 'Total Market' },
+          { number: '12M', label: 'Target Users' },
+          { number: '23%', label: 'Annual Growth' }
+        ]
+      },
+      {
+        layout: 'bullets',
+        title: 'Business Model',
+        body: [
+          { text: 'SaaS subscription with tiered pricing' },
+          { text: 'Premium features for enterprise clients' },
+          { text: 'Marketplace revenue sharing' },
+          { text: 'Data analytics and insights' }
+        ]
+      },
+      {
+        layout: 'chart',
+        title: 'Financial Projections',
+        chart: {
+          type: 'line',
+          data: {
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            datasets: [{
+              data: [100, 250, 600, 1200]
+            }]
+          }
+        }
+      },
+      {
+        layout: 'two-column',
+        title: 'Team & Advisors',
+        body: [
+          { heading: 'Core Team', text: 'Experienced founders\nTop-tier engineers\nIndustry veterans\nProven track record' },
+          { heading: 'Advisory Board', text: 'Former C-suite executives\nSerial entrepreneurs\nIndustry thought leaders\nTechnical experts' }
+        ]
+      },
+      {
+        layout: 'stats',
+        title: 'Funding Request',
+        stats: [
+          { number: '$2M', label: 'Series A' },
+          { number: '18', label: 'Months Runway' },
+          { number: '10x', label: 'Expected Return' }
+        ]
+      },
+      {
+        layout: 'hero',
+        title: 'Join Us in Changing the World',
+        subtitle: 'Together, we can build something extraordinary'
+      }
+    ]
+  },
+  {
+    id: 'product-launch',
+    name: 'Product Launch',
+    description: 'Comprehensive product introduction presentation',
+    thumbnail: '📱',
+    theme: 'purple',
+    slides: [
+      {
+        layout: 'hero',
+        title: 'Introducing [Product Name]',
+        subtitle: 'The future of [industry] is here'
+      },
+      {
+        layout: 'section',
+        title: 'Market Research',
+        subtitle: 'Understanding our customers\' needs',
+        sectionNumber: '01'
+      },
+      {
+        layout: 'stats',
+        title: 'Market Insights',
+        stats: [
+          { number: '78%', label: 'Want Better Solutions' },
+          { number: '2.3M', label: 'Potential Customers' },
+          { number: '$45', label: 'Avg. Monthly Spend' }
+        ]
+      },
+      {
+        layout: 'section',
+        title: 'Product Features',
+        subtitle: 'What makes our product special',
+        sectionNumber: '02'
+      },
+      {
+        layout: 'image-only',
+        title: 'Product Demo',
+        subtitle: 'See it in action'
+      },
+      {
+        layout: 'two-column',
+        title: 'Key Benefits',
+        body: [
+          { heading: 'For Users', text: 'Intuitive interface\nTime-saving features\nSeamless integration\nMobile-first design' },
+          { heading: 'For Business', text: 'Increased productivity\nCost reduction\nScalable solution\nReal-time analytics' }
+        ]
+      },
+      {
+        layout: 'comparison',
+        title: 'Competitive Advantage',
+        leftTitle: 'Competitors',
+        rightTitle: 'Our Product',
+        leftContent: [
+          'Complex setup process',
+          'Limited customization',
+          'Poor mobile experience',
+          'High learning curve'
+        ],
+        rightContent: [
+          'One-click setup',
+          'Fully customizable',
+          'Mobile-optimized',
+          'Intuitive from day one'
+        ]
+      },
+      {
+        layout: 'section',
+        title: 'Go-to-Market Strategy',
+        subtitle: 'How we\'ll reach our customers',
+        sectionNumber: '03'
+      },
+      {
+        layout: 'bullets',
+        title: 'Launch Strategy',
+        body: [
+          { text: 'Soft launch with beta customers' },
+          { text: 'Influencer partnerships and PR campaign' },
+          { text: 'Product Hunt and tech media coverage' },
+          { text: 'Direct sales to enterprise customers' },
+          { text: 'Content marketing and SEO strategy' }
+        ]
+      },
+      {
+        layout: 'stats',
+        title: 'Launch Targets',
+        stats: [
+          { number: '1K', label: 'Beta Users' },
+          { number: '10K', label: 'Month 1 Users' },
+          { number: '$100K', label: 'Month 3 Revenue' }
+        ]
+      },
+      {
+        layout: 'hero',
+        title: 'Ready to Launch',
+        subtitle: 'The future starts now'
+      }
+    ]
+  },
+  {
+    id: 'company-overview',
+    name: 'Company Overview',
+    description: 'Professional company introduction',
+    thumbnail: '🏢',
+    theme: 'emerald',
+    slides: [
+      {
+        layout: 'hero',
+        title: 'Company Name',
+        subtitle: 'Leading the industry since 2020'
+      },
+      {
+        layout: 'section',
+        title: 'Our Mission',
+        subtitle: 'What drives us every day',
+        sectionNumber: '01'
+      },
+      {
+        layout: 'quote',
+        quote: 'To empower businesses with innovative technology solutions that drive growth and create lasting value.',
+        author: 'CEO Name',
+        company: 'Company Name'
+      },
+      {
+        layout: 'stats',
+        title: 'Company at a Glance',
+        stats: [
+          { number: '500+', label: 'Employees' },
+          { number: '$50M', label: 'Annual Revenue' },
+          { number: '15+', label: 'Countries' }
+        ]
+      },
+      {
+        layout: 'section',
+        title: 'Our Services',
+        subtitle: 'Comprehensive solutions for modern businesses',
+        sectionNumber: '02'
+      },
+      {
+        layout: 'two-column',
+        title: 'What We Offer',
+        body: [
+          { heading: 'Technology Solutions', text: 'Custom software development\nCloud infrastructure\nCybersecurity services\nData analytics platforms' },
+          { heading: 'Consulting Services', text: 'Digital transformation\nProcess optimization\nStrategic planning\nChange management' }
+        ]
+      },
+      {
+        layout: 'bullets',
+        title: 'Industry Expertise',
+        body: [
+          { text: 'Financial Services - Banking, insurance, fintech' },
+          { text: 'Healthcare - Electronic records, telemedicine' },
+          { text: 'Retail - E-commerce, inventory management' },
+          { text: 'Manufacturing - Supply chain, automation' },
+          { text: 'Education - Learning platforms, student systems' }
+        ]
+      },
+      {
+        layout: 'section',
+        title: 'Our Success Stories',
+        subtitle: 'Real results for real clients',
+        sectionNumber: '03'
+      },
+      {
+        layout: 'quote',
+        quote: 'Working with this company transformed our operations. We achieved 200% growth in just one year.',
+        author: 'Client Name',
+        company: 'Fortune 500 Company'
+      },
+      {
+        layout: 'stats',
+        title: 'Client Success Metrics',
+        stats: [
+          { number: '200%', label: 'Avg. Growth' },
+          { number: '98%', label: 'Client Retention' },
+          { number: '4.9/5', label: 'Satisfaction' }
+        ]
+      },
+      {
+        layout: 'hero',
+        title: 'Partner With Us',
+        subtitle: 'Let\'s build something amazing together'
+      }
+    ]
+  }
+];
+
+// Helper function to create slides with unique IDs
+export function createTemplateSlides(template: Template): SlideSpec[] {
+  return template.slides.map((slide, index) => ({
+    ...slide,
+    id: `${template.id}-slide-${index + 1}`
+  }));
+}
+
+export function getTemplateById(id: string): Template | undefined {
+  return professionalTemplates.find(template => template.id === id);
+}

lib/gemini-client.ts

@@ -17,11 +17,23 @@ export class GeminiClient {
 
   async generateSlideContent(prompt: string): Promise<string> {
     try {
-      const fullPrompt = `You are a professional presentation content generator. Create clear, structured, and engaging slide content based on this prompt: "${prompt}". Format your response as clean text that can be used directly in presentation slides.`;
+      // The prompt already contains the JSON schema instructions from orchestrator
+      const result = await this.model.generateContent({
+        contents: [{
+          role: 'user',
+          parts: [{ text: prompt }]
+        }],
+        generationConfig: {
+          temperature: 0.4,
+          topK: 1,
+          topP: 1,
+          maxOutputTokens: 4096,
+          responseMimeType: 'application/json'
+        }
+      });
 
-      const result = await this.model.generateContent(fullPrompt);
       const response = await result.response;
-      return response.text() || '';
+      return response.text() || '{}';
     } catch (error) {
       console.error('Error generating slide content with Gemini:', error);
       throw new Error('Failed to generate slide content');

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@auth/core": "^0.34.2",
         "@google/generative-ai": "^0.24.1",
+        "@huggingface/hub": "^2.6.5",
         "@huggingface/inference": "^4.8.0",
         "@lobehub/icons": "^2.33.0",
         "@radix-ui/react-select": "^2.2.6",
@@ -30,7 +31,8 @@
         "react-chartjs-2": "^5.3.0",
         "react-dom": "19.1.0",
         "swiper": "^11.2.10",
-        "tailwind-merge": "^3.3.1"
+        "tailwind-merge": "^3.3.1",
+        "unsplash-js": "^7.0.20"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -1836,6 +1838,24 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@huggingface/hub": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-2.6.5.tgz",
+      "integrity": "sha512-3O20Pe9bSXQ/4LxUNnf75jZAZaYvF/3lVdIU0GrJOL3oTlneuxdRHZ9AXuu25hYY05fyng0G83EIS5Xn9uJtGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/tasks": "^0.19.46"
+      },
+      "bin": {
+        "hfjs": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "cli-progress": "^3.12.0"
+      }
+    },
     "node_modules/@huggingface/inference": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.8.0.tgz",
@@ -1859,9 +1879,9 @@
       }
     },
     "node_modules/@huggingface/tasks": {
-      "version": "0.19.45",
-      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.45.tgz",
-      "integrity": "sha512-lM3QOgbfkGZ5gAZOYWOmzMM6BbKcXOIHjgnUAoymTdZEcEcGSr0vy/LWGEiK+vBXC4vU+sCT+WNoA/JZ8TEWdA==",
+      "version": "0.19.46",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.46.tgz",
+      "integrity": "sha512-c6F/r7zRQjmyo6Ji8c2TUbdeeu6WAdZxYLRd+G7Xxvfbadi6iDwk2szt/oinC5v5Ljyc2sjzesaqGB6hLWy/DA==",
       "license": "MIT"
     },
     "node_modules/@humanfs/core": {
@@ -5722,6 +5742,16 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -6568,6 +6598,19 @@
       "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
       "license": "MIT"
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -9796,6 +9839,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
@@ -15384,6 +15437,28 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -15511,6 +15586,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -16206,6 +16294,15 @@
         "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
       }
     },
+    "node_modules/unsplash-js": {
+      "version": "7.0.20",
+      "resolved": "https://registry.npmjs.org/unsplash-js/-/unsplash-js-7.0.20.tgz",
+      "integrity": "sha512-0IzJGKbD6qHm0wg5sNndcCjhNDrtAr08/mySr9TGJ6biD7N03ZldidqXopkOvhAABaeFtRGYBrX1YkgMhKrFOQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@auth/core": "^0.34.2",
     "@google/generative-ai": "^0.24.1",
+    "@huggingface/hub": "^2.6.5",
     "@huggingface/inference": "^4.8.0",
     "@lobehub/icons": "^2.33.0",
     "@radix-ui/react-select": "^2.2.6",
@@ -31,7 +32,8 @@
     "react-chartjs-2": "^5.3.0",
     "react-dom": "19.1.0",
     "swiper": "^11.2.10",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "unsplash-js": "^7.0.20"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",