Add initial templates for code snippets and explanations

- Introduced a variety of templates including "Code Snippet", "Code with Title", "Before & After", "Code Explanation", "Social Tip Card", "Code Flow", and "LinkedIn Carousel".
- Each template includes detailed properties such as background styles, elements, and code examples.
- Enhanced user experience with visually appealing gradients and structured layouts for better presentation of code.

src/App.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { useRef, useEffect, useCallback, useState } from 'react';
 import type Konva from 'konva';
 import Canvas from './components/Canvas';
 import TopBar from './components/TopBar';
@@ -6,10 +6,12 @@ import Toolbar from './components/Toolbar';
 import Inspector from './components/Inspector';
 import LayersPanel from './components/LayersPanel';
 import FontLoader from './components/FontLoader';
+import MainScreen from './components/MainScreen';
 import { useCanvasStore } from './store/canvasStore';
 import { useRecentSnapsStore } from './store/recentSnapsStore';
 
 function App() {
+  const [showMainScreen, setShowMainScreen] = useState(true);
   const stageRef = useRef<Konva.Stage>(null);
   const { 
     snap,
@@ -79,6 +81,14 @@ function App() {
     }
   }, [snap, addRecentSnap, newSnap]);
 
+  // Handle going back to main screen
+  const handleGoToMainScreen = useCallback(() => {
+    if (snap.elements.length > 0) {
+      addRecentSnap(snap);
+    }
+    setShowMainScreen(true);
+  }, [snap, addRecentSnap]);
+
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -178,10 +188,20 @@ function App() {
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [selectedElementId, deleteElement, duplicateElement, undo, redo, zoom, setZoom, showGrid, setShowGrid, setTool, selectElement, handleNewSnap, handleImportFile, handleExportFile]);
 
+  // Show main screen
+  if (showMainScreen) {
+    return (
+      <>
+        <FontLoader />
+        <MainScreen onOpenEditor={() => setShowMainScreen(false)} />
+      </>
+    );
+  }
+
   return (
     <div className="h-screen flex flex-col bg-neutral-900 text-white">
       <FontLoader />
-      <TopBar stageRef={stageRef} />
+      <TopBar stageRef={stageRef} onGoHome={handleGoToMainScreen} />
       <div className="flex-1 flex overflow-hidden">
         <LayersPanel />
         <Toolbar />

src/components/MainScreen.tsx

@@ -0,0 +1,277 @@
+import { useState } from 'react';
+import { Plus, FileText, Layout, Clock, Trash2, ChevronRight, Sparkles } from 'lucide-react';
+import { useRecentSnapsStore, formatRelativeTime } from '../store/recentSnapsStore';
+import { useCanvasStore } from '../store/canvasStore';
+import { templates, type Template } from '../data/templates';
+import SnapPreview from './SnapPreview';
+import type { Snap } from '../types';
+
+interface MainScreenProps {
+  onOpenEditor: () => void;
+}
+
+export default function MainScreen({ onOpenEditor }: MainScreenProps) {
+  const [activeTab, setActiveTab] = useState<'recent' | 'templates'>('recent');
+  const { recentSnaps, removeRecentSnap, clearRecentSnaps } = useRecentSnapsStore();
+  const { setSnap, newSnap } = useCanvasStore();
+
+  const handleNewSnap = () => {
+    newSnap({ title: 'Untitled', aspect: '16:9', width: 1920, height: 1080 });
+    onOpenEditor();
+  };
+
+  const handleOpenRecent = (snap: Snap) => {
+    setSnap(snap);
+    onOpenEditor();
+  };
+
+  const handleUseTemplate = (template: Template) => {
+    setSnap(template.snap);
+    onOpenEditor();
+  };
+
+  const handleImportFile = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.json';
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (evt) => {
+          try {
+            const json = evt.target?.result as string;
+            const snap = JSON.parse(json) as Snap;
+            setSnap(snap);
+            onOpenEditor();
+          } catch {
+            alert('Invalid file format');
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    input.click();
+  };
+
+  return (
+    <div className="min-h-screen bg-neutral-900 text-white">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-[#09090b]/95 backdrop-blur-xl border-b border-white/[0.08]">
+        <div className="max-w-6xl mx-auto px-6 py-6">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
+              <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-xl font-semibold">YvCode</h1>
+              <p className="text-sm text-neutral-400">Create beautiful code screenshots</p>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-6xl mx-auto px-6 py-8">
+        {/* Create New Section */}
+        <section className="mb-10">
+          <h2 className="text-lg font-medium mb-4">Create New</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {/* New Blank */}
+            <button
+              onClick={handleNewSnap}
+              className="group relative bg-neutral-900 border border-white/10 rounded-xl p-6 hover:border-blue-500/50 hover:bg-white/[0.03] transition-all duration-200 text-left"
+            >
+              <div className="w-12 h-12 bg-white/[0.05] group-hover:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 transition-colors">
+                <Plus className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
+              </div>
+              <h3 className="font-medium mb-1">Blank Canvas</h3>
+              <p className="text-sm text-neutral-500">Start from scratch with a fresh canvas</p>
+              <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
+            </button>
+
+            {/* Import File */}
+            <button
+              onClick={handleImportFile}
+              className="group relative bg-neutral-900 border border-white/10 rounded-xl p-6 hover:border-blue-500/50 hover:bg-white/[0.03] transition-all duration-200 text-left"
+            >
+              <div className="w-12 h-12 bg-white/[0.05] group-hover:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 transition-colors">
+                <FileText className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
+              </div>
+              <h3 className="font-medium mb-1">Import File</h3>
+              <p className="text-sm text-neutral-500">Open an existing .json project file</p>
+              <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
+            </button>
+
+            {/* Quick Template */}
+            <button
+              onClick={() => setActiveTab('templates')}
+              className="group relative bg-neutral-900 border border-white/10 rounded-xl p-6 hover:border-blue-500/50 hover:bg-white/[0.03] transition-all duration-200 text-left"
+            >
+              <div className="w-12 h-12 bg-white/[0.05] group-hover:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 transition-colors">
+                <Layout className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
+              </div>
+              <h3 className="font-medium mb-1">Use Template</h3>
+              <p className="text-sm text-neutral-500">Start with a pre-designed template</p>
+              <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
+            </button>
+          </div>
+        </section>
+
+        {/* Tabs */}
+        <div className="flex items-center gap-1 border-b border-white/[0.08] mb-6">
+          <button
+            onClick={() => setActiveTab('recent')}
+            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === 'recent'
+                ? 'border-blue-500 text-white'
+                : 'border-transparent text-neutral-500 hover:text-neutral-300'
+            }`}
+          >
+            <Clock className="w-4 h-4 inline-block mr-2 -mt-0.5" />
+            Recent Work
+          </button>
+          <button
+            onClick={() => setActiveTab('templates')}
+            className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === 'templates'
+                ? 'border-blue-500 text-white'
+                : 'border-transparent text-neutral-500 hover:text-neutral-300'
+            }`}
+          >
+            <Sparkles className="w-4 h-4 inline-block mr-2 -mt-0.5" />
+            Templates
+          </button>
+        </div>
+
+        {/* Tab Content */}
+        {activeTab === 'recent' && (
+          <section>
+            {recentSnaps.length === 0 ? (
+              <div className="text-center py-16">
+                <div className="w-16 h-16 bg-neutral-900 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <Clock className="w-8 h-8 text-neutral-600" />
+                </div>
+                <h3 className="text-lg font-medium mb-2">No recent work</h3>
+                <p className="text-neutral-500 mb-6">Your recent projects will appear here</p>
+                <button
+                  onClick={handleNewSnap}
+                  className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
+                >
+                  <Plus className="w-4 h-4" />
+                  Create your first snap
+                </button>
+              </div>
+            ) : (
+              <>
+                <div className="flex items-center justify-between mb-4">
+                  <p className="text-sm text-neutral-500">{recentSnaps.length} recent project{recentSnaps.length !== 1 ? 's' : ''}</p>
+                  <button
+                    onClick={() => {
+                      if (confirm('Clear all recent projects?')) {
+                        clearRecentSnaps();
+                      }
+                    }}
+                    className="text-sm text-neutral-500 hover:text-red-400 transition-colors"
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {recentSnaps.map((entry) => (
+                    <div
+                      key={entry.id}
+                      className="group relative bg-neutral-900 border border-white/10 rounded-xl overflow-hidden hover:border-white/20 transition-colors"
+                    >
+                      {/* Preview */}
+                      <button
+                        onClick={() => handleOpenRecent(entry.snap)}
+                        className="w-full aspect-video relative overflow-hidden"
+                      >
+                        <SnapPreview snap={entry.snap} />
+                        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
+                          <span className="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-lg text-sm">Open</span>
+                        </div>
+                      </button>
+
+                      {/* Info */}
+                      <div className="p-4">
+                        <div className="flex items-start justify-between">
+                          <div className="flex-1 min-w-0">
+                            <h3 className="font-medium truncate">{entry.title}</h3>
+                            <p className="text-sm text-neutral-500">{formatRelativeTime(entry.savedAt)}</p>
+                          </div>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              removeRecentSnap(entry.id);
+                            }}
+                            className="p-1.5 text-neutral-600 hover:text-red-400 hover:bg-neutral-800 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </div>
+                        <div className="mt-2 flex items-center gap-2 text-xs text-neutral-600">
+                          <span>{entry.snap.meta.width}×{entry.snap.meta.height}</span>
+                          <span>•</span>
+                          <span>{entry.snap.elements.length} element{entry.snap.elements.length !== 1 ? 's' : ''}</span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </section>
+        )}
+
+        {activeTab === 'templates' && (
+          <section>
+            <p className="text-sm text-neutral-500 mb-4">{templates.length} templates available</p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {templates.map((template) => (
+                <div
+                  key={template.id}
+                  className="group relative bg-neutral-900 border border-white/10 rounded-xl overflow-hidden hover:border-white/20 transition-colors"
+                >
+                  {/* Preview */}
+                  <button
+                    onClick={() => handleUseTemplate(template)}
+                    className="w-full aspect-video relative overflow-hidden"
+                  >
+                    <SnapPreview snap={template.snap} />
+                    <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
+                      <span className="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-lg text-sm">Use Template</span>
+                    </div>
+                  </button>
+
+                  {/* Info */}
+                  <div className="p-4">
+                    <h3 className="font-medium mb-1">{template.name}</h3>
+                    <p className="text-sm text-neutral-500">{template.description}</p>
+                    <div className="mt-2 flex items-center gap-2 text-xs text-neutral-600">
+                      <span>{template.snap.meta.width}×{template.snap.meta.height}</span>
+                      <span>•</span>
+                      <span>{template.snap.elements.length} element{template.snap.elements.length !== 1 ? 's' : ''}</span>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </section>
+        )}
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-white/[0.08] mt-16">
+        <div className="max-w-6xl mx-auto px-6 py-6">
+          <p className="text-sm text-neutral-600 text-center">
+            YvCode — Create beautiful code screenshots for social media
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/components/SnapPreview.tsx

@@ -0,0 +1,222 @@
+import type { Snap, CanvasElement, CodeElement, TextElement, ArrowElement } from '../types';
+
+interface SnapPreviewProps {
+  snap: Snap;
+}
+
+// Helper to get code theme background color
+function getCodeThemeBg(theme: string): string {
+  const themes: Record<string, string> = {
+    'andromeeda': '#23262e',
+    'aurora-x': '#07090f',
+    'dark-plus': '#1e1e1e',
+    'dracula': '#282a36',
+    'dracula-soft': '#282a36',
+    'github-dark': '#0d1117',
+    'github-dark-dimmed': '#22272e',
+    'github-light': '#ffffff',
+    'light-plus': '#ffffff',
+    'material-theme-darker': '#212121',
+    'material-theme-ocean': '#0f111a',
+    'material-theme-palenight': '#292d3e',
+    'min-dark': '#1f1f1f',
+    'min-light': '#ffffff',
+    'monokai': '#272822',
+    'night-owl': '#011627',
+    'nord': '#2e3440',
+    'one-dark-pro': '#282c34',
+    'poimandres': '#1b1e28',
+    'rose-pine': '#191724',
+    'rose-pine-moon': '#232136',
+    'slack-dark': '#222222',
+    'solarized-dark': '#002b36',
+    'solarized-light': '#fdf6e3',
+    'tokyo-night': '#1a1b26',
+    'vesper': '#101010',
+    'vitesse-dark': '#121212',
+    'vitesse-light': '#ffffff',
+  };
+  return themes[theme] || '#1e1e1e';
+}
+
+// Helper to get highlight color for code lines
+function getHighlightColor(lineNum: number, highlights: { from: number; to: number; style: string }[]): string | null {
+  for (const h of highlights) {
+    if (lineNum >= h.from && lineNum <= h.to) {
+      switch (h.style) {
+        case 'focus': return 'rgba(251, 191, 36, 0.4)';
+        case 'added': return 'rgba(34, 197, 94, 0.4)';
+        case 'removed': return 'rgba(239, 68, 68, 0.4)';
+      }
+    }
+  }
+  return null;
+}
+
+export default function SnapPreview({ snap }: SnapPreviewProps) {
+  const { meta, background, elements } = snap;
+  const scaleX = 1 / (meta.width / 400); // Scale to fit ~400px width
+  const scaleY = 1 / (meta.height / 225); // Scale to fit ~225px height (16:9 aspect)
+  const scale = Math.min(scaleX, scaleY);
+
+  const getBackground = () => {
+    if (background.type === 'gradient') {
+      return `linear-gradient(${background.gradient.angle}deg, ${background.gradient.from}, ${background.gradient.to})`;
+    }
+    return background.solid.color;
+  };
+
+  const renderElement = (element: CanvasElement) => {
+    if (!element.visible) return null;
+
+    switch (element.type) {
+      case 'code': {
+        const codeEl = element as CodeElement;
+        return (
+          <div
+            key={element.id}
+            style={{
+              position: 'absolute',
+              left: codeEl.x * scale,
+              top: codeEl.y * scale,
+              width: codeEl.width * scale,
+              height: codeEl.height * scale,
+              backgroundColor: getCodeThemeBg(codeEl.props.theme),
+              borderRadius: codeEl.props.cornerRadius * scale,
+              overflow: 'hidden',
+              boxShadow: codeEl.props.shadow.blur > 0
+                ? `0 ${codeEl.props.shadow.blur * scale * 0.5}px ${codeEl.props.shadow.blur * scale}px ${codeEl.props.shadow.color}`
+                : undefined,
+            }}
+          >
+            {/* Code lines preview */}
+            <div style={{ padding: codeEl.props.padding * scale * 0.5 }}>
+              {codeEl.props.code.split('\n').slice(0, 8).map((line, i) => (
+                <div
+                  key={i}
+                  style={{
+                    height: Math.max(2, codeEl.props.fontSize * scale * 0.8),
+                    marginBottom: Math.max(1, codeEl.props.fontSize * scale * 0.3),
+                    display: 'flex',
+                    gap: 2,
+                  }}
+                >
+                  {codeEl.props.lineNumbers && (
+                    <div
+                      style={{
+                        width: Math.max(8, 16 * scale),
+                        backgroundColor: 'rgba(255,255,255,0.1)',
+                        borderRadius: 1,
+                      }}
+                    />
+                  )}
+                  <div
+                    style={{
+                      width: `${Math.min(100, Math.max(20, line.length * 3))}%`,
+                      backgroundColor: getHighlightColor(i + 1, codeEl.props.highlights) || 'rgba(255,255,255,0.3)',
+                      borderRadius: 1,
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      }
+
+      case 'text': {
+        const textEl = element as TextElement;
+        const fontSize = Math.max(6, textEl.props.fontSize * scale);
+        return (
+          <div
+            key={element.id}
+            style={{
+              position: 'absolute',
+              left: textEl.x * scale,
+              top: textEl.y * scale,
+              fontSize,
+              fontFamily: textEl.props.fontFamily,
+              fontWeight: textEl.props.bold ? 'bold' : 'normal',
+              fontStyle: textEl.props.italic ? 'italic' : 'normal',
+              color: textEl.props.color,
+              whiteSpace: 'pre',
+              lineHeight: 1.2,
+              padding: textEl.props.background ? textEl.props.padding * scale : 0,
+              backgroundColor: textEl.props.background?.color,
+              borderRadius: textEl.props.cornerRadius * scale,
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {textEl.props.text.length > 50 ? textEl.props.text.slice(0, 50) + '...' : textEl.props.text}
+          </div>
+        );
+      }
+
+      case 'arrow': {
+        const arrowEl = element as ArrowElement;
+        if (arrowEl.points.length < 2) return null;
+        const start = arrowEl.points[0];
+        const end = arrowEl.points[arrowEl.points.length - 1];
+        
+        // Calculate SVG bounds
+        const minX = Math.min(start.x, end.x) - 10;
+        const minY = Math.min(start.y, end.y) - 10;
+        const maxX = Math.max(start.x, end.x) + 10;
+        const maxY = Math.max(start.y, end.y) + 10;
+        
+        return (
+          <svg
+            key={element.id}
+            style={{
+              position: 'absolute',
+              left: minX * scale,
+              top: minY * scale,
+              width: (maxX - minX) * scale,
+              height: (maxY - minY) * scale,
+              overflow: 'visible',
+            }}
+          >
+            <defs>
+              <marker
+                id={`arrowhead-${element.id}`}
+                markerWidth="10"
+                markerHeight="7"
+                refX="9"
+                refY="3.5"
+                orient="auto"
+              >
+                <polygon
+                  points="0 0, 10 3.5, 0 7"
+                  fill={arrowEl.props.color}
+                />
+              </marker>
+            </defs>
+            <line
+              x1={(start.x - minX) * scale}
+              y1={(start.y - minY) * scale}
+              x2={(end.x - minX) * scale}
+              y2={(end.y - minY) * scale}
+              stroke={arrowEl.props.color}
+              strokeWidth={Math.max(1, arrowEl.props.thickness * scale)}
+              markerEnd={arrowEl.props.head !== 'none' ? `url(#arrowhead-${element.id})` : undefined}
+            />
+          </svg>
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div
+      className="w-full h-full relative overflow-hidden"
+      style={{ background: getBackground() }}
+    >
+      {elements.map(renderElement)}
+    </div>
+  );
+}

src/components/TopBar.tsx

@@ -7,9 +7,10 @@ import RecentSnapsDropdown from './RecentSnapsDropdown';
 
 interface TopBarProps {
   stageRef: React.RefObject<Konva.Stage | null>;
+  onGoHome?: () => void;
 }
 
-const TopBar: React.FC<TopBarProps> = ({ stageRef }) => {
+const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
   const [showRecentSnaps, setShowRecentSnaps] = useState(false);
   const [showExportMenu, setShowExportMenu] = useState(false);
   const recentButtonRef = useRef<HTMLButtonElement>(null);
@@ -138,11 +139,15 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef }) => {
         {/* Left section: Logo & Actions */}
         <div className="flex items-center gap-5">
           <div className="flex items-center gap-3 pr-5 border-r border-white/[0.08]">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 shadow-lg shadow-blue-500/20 flex items-center justify-center">
+            <button
+              onClick={onGoHome}
+              className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 shadow-lg shadow-blue-500/20 flex items-center justify-center hover:from-blue-500 hover:to-blue-600 transition-all"
+              title="Go to Home"
+            >
               <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
-            </div>
+            </button>
             <span className="font-bold text-base tracking-tight text-white">
               YvCode
             </span>

src/index.css

@@ -6,7 +6,8 @@
 html, body, #root {
   height: 100%;
   width: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 body {
@@ -37,6 +38,7 @@ body {
 /* Color picker styling */
 input[type="color"] {
   -webkit-appearance: none;
+  appearance: none;
   border: none;
   padding: 0;
 }