Transform webapp into Resume Branches - Git for CVs

Features:
- Complete CV version control system with branching and submission tracking
- Interactive tree visualization showing master resume, branches, and submissions
- Diff viewer for tracking changes between CV versions
- Professional landing page with Git for CVs messaging
- Modern dashboard with three-panel layout (tree, details, preview)
- ATS-safe design philosophy throughout
- Tailwind 4 configuration with professional design system

Components:
- CVTree: Interactive expandable tree for CV versions
- DiffViewer: Visual diff display with add/remove/change highlighting
- Comprehensive data models for documents, versions, patches, submissions
- Upload modal and action buttons for CV management
- Status tracking and public sharing indicators

Architecture:
- TypeScript types for complete CV management workflow
- Responsive design with proper hover states and animations
- Mock data demonstrating realistic ML Engineer and Backend Engineer branches
- Ready for FastAPI backend integration and DOCX processing

This implements the complete 'Resume Branches' vision as a modern webapp
that treats CV management like version control for documents.

apps/webapp/src/components/Footer.tsx

@@ -1,35 +1,60 @@
-import Link from "next/link";
-import { getLocale } from "@/libs/locales";
-
 export default function Footer() {
-  const { common } = getLocale('en');
-  
   return (
-    <footer>
-      {/* TODO: Style this footer when implementing in your project */}
-      <div>
-        <div>
-          <div>
-            <h3>{common.footer.brand}</h3>
-            <p>{common.footer.description}</p>
+    <footer className="bg-gray-900 text-gray-300">
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <div className="grid md:grid-cols-4 gap-8">
+          <div className="col-span-1">
+            <h3 className="text-xl font-bold text-white mb-4">Resume Branches</h3>
+            <p className="text-sm mb-4">
+              Git for CVs. Manage your resume like code with version control, 
+              branching, and smart AI-assisted tailoring.
+            </p>
           </div>
+          
           <div>
-            <h4>{common.footer.legal.title}</h4>
-            <ul>
-              <li><Link href="/privacy-policy">{common.footer.legal.privacyPolicy}</Link></li>
-              <li><Link href="/tos">{common.footer.legal.termsOfService}</Link></li>
+            <h4 className="font-semibold text-white mb-4">Product</h4>
+            <ul className="space-y-2 text-sm">
+              <li><a href="/dashboard" className="hover:text-white transition-colors">Dashboard</a></li>
+              <li><a href="/features" className="hover:text-white transition-colors">Features</a></li>
+              <li><a href="/pricing" className="hover:text-white transition-colors">Pricing</a></li>
             </ul>
           </div>
+          
           <div>
-            <h4>{common.footer.company.title}</h4>
-            <ul>
-              <li><Link href="/blog">{common.footer.company.blog}</Link></li>
-              <li><Link href="/dashboard">{common.footer.company.dashboard}</Link></li>
+            <h4 className="font-semibold text-white mb-4">Resources</h4>
+            <ul className="space-y-2 text-sm">
+              <li><a href="/docs" className="hover:text-white transition-colors">Documentation</a></li>
+              <li><a href="/blog" className="hover:text-white transition-colors">Blog</a></li>
+              <li><a href="/support" className="hover:text-white transition-colors">Support</a></li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 className="font-semibold text-white mb-4">Company</h4>
+            <ul className="space-y-2 text-sm">
+              <li><a href="/about" className="hover:text-white transition-colors">About</a></li>
+              <li><a href="/privacy" className="hover:text-white transition-colors">Privacy</a></li>
+              <li><a href="/terms" className="hover:text-white transition-colors">Terms</a></li>
             </ul>
           </div>
         </div>
-        <div>
-          <p>{common.footer.copyright}</p>
+        
+        <div className="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row items-center justify-between">
+          <p className="text-sm">© 2024 Resume Branches. All rights reserved.</p>
+          <div className="flex items-center space-x-6 mt-4 md:mt-0">
+            <a href="#" className="text-gray-400 hover:text-white transition-colors">
+              <span className="sr-only">Twitter</span>
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
+              </svg>
+            </a>
+            <a href="#" className="text-gray-400 hover:text-white transition-colors">
+              <span className="sr-only">GitHub</span>
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
+              </svg>
+            </a>
+          </div>
         </div>
       </div>
     </footer>

apps/webapp/src/components/Header.tsx

@@ -1,24 +1,50 @@
 import Link from "next/link";
-import { getLocale } from "@/libs/locales";
 
 export default function Header() {
-  const { common } = getLocale('en');
-
   return (
-    <header>
-      {/* TODO: Style this header when implementing in your project */}
-      <div>
-        <div>
-          <div>
-            <Link href="/">{common.header.brand}</Link>
+    <header className="bg-white border-b border-gray-200 sticky top-0 z-40">
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <Link href="/" className="text-xl font-bold text-gray-900 hover:text-blue-600 transition-colors">
+              Resume Branches
+            </Link>
           </div>
-          <nav>
-            <Link href="/">{common.header.nav.home}</Link>
-            <Link href="/dashboard">{common.header.nav.dashboard}</Link>
-            <Link href="/blog">{common.header.nav.blog}</Link>
+          
+          <nav className="hidden md:flex items-center space-x-8">
+            <Link 
+              href="/" 
+              className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+            >
+              Home
+            </Link>
+            <Link 
+              href="/dashboard" 
+              className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+            >
+              Dashboard
+            </Link>
+            <Link 
+              href="/docs" 
+              className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+            >
+              Docs
+            </Link>
           </nav>
-          <div>
-            <Link href="/login">{common.header.actions.signIn}</Link>
+          
+          <div className="flex items-center gap-3">
+            <Link 
+              href="/login" 
+              className="text-gray-600 hover:text-gray-900 font-medium transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link 
+              href="/dashboard" 
+              className="btn-primary"
+            >
+              Get Started
+            </Link>
           </div>
         </div>
       </div>

apps/webapp/src/components/cv/CVTree.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useState } from 'react';
+import { CVTreeNode } from '@/types/cv';
+
+interface CVTreeProps {
+  treeData: CVTreeNode;
+  selectedNodeId?: string;
+  onNodeSelect: (nodeId: string) => void;
+  onCreateBranch: (parentId: string) => void;
+  onCreateSubmission: (branchId: string) => void;
+}
+
+const NODE_COLORS = {
+  root: 'bg-blue-100 border-blue-300 text-blue-900',
+  branch: 'bg-green-100 border-green-300 text-green-900',
+  submission: 'bg-yellow-100 border-yellow-300 text-yellow-900',
+};
+
+const STATUS_COLORS = {
+  draft: 'bg-gray-100 text-gray-700',
+  submitted: 'bg-yellow-100 text-yellow-700',
+  interviewing: 'bg-blue-100 text-blue-700',
+  offer: 'bg-green-100 text-green-700',
+  rejected: 'bg-red-100 text-red-700',
+  closed: 'bg-gray-100 text-gray-700',
+};
+
+function TreeNode({ 
+  node, 
+  level = 0, 
+  selectedNodeId, 
+  onNodeSelect, 
+  onCreateBranch, 
+  onCreateSubmission 
+}: {
+  node: CVTreeNode;
+  level?: number;
+  selectedNodeId?: string;
+  onNodeSelect: (nodeId: string) => void;
+  onCreateBranch: (parentId: string) => void;
+  onCreateSubmission: (branchId: string) => void;
+}) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const hasChildren = node.children.length > 0;
+  const isSelected = selectedNodeId === node.id;
+
+  const handleNodeClick = () => {
+    onNodeSelect(node.id);
+  };
+
+  const handleCreateBranch = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onCreateBranch(node.id);
+  };
+
+  const handleCreateSubmission = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onCreateSubmission(node.id);
+  };
+
+  const toggleExpanded = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className="select-none">
+      <div
+        className={`
+          flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-all
+          ${NODE_COLORS[node.type]}
+          ${isSelected ? 'ring-2 ring-blue-500 ring-offset-1' : ''}
+          hover:shadow-sm
+        `}
+        style={{ marginLeft: `${level * 24}px` }}
+        onClick={handleNodeClick}
+      >
+        {hasChildren && (
+          <button
+            onClick={toggleExpanded}
+            className="flex-shrink-0 w-4 h-4 flex items-center justify-center hover:bg-black/10 rounded"
+          >
+            <svg
+              className={`w-3 h-3 transform transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
+            </svg>
+          </button>
+        )}
+        
+        {!hasChildren && <div className="w-4" />}
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="font-medium truncate">{node.label}</span>
+            {node.metadata?.isPublic && (
+              <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
+                Public
+              </span>
+            )}
+            {node.metadata?.status && (
+              <span className={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${STATUS_COLORS[node.metadata.status as keyof typeof STATUS_COLORS] || 'bg-gray-100 text-gray-700'}`}>
+                {node.metadata.status}
+              </span>
+            )}
+          </div>
+          
+          {node.metadata?.companyName && (
+            <div className="text-sm text-gray-600 truncate">
+              {node.metadata.companyName} • {node.metadata.roleTitle}
+            </div>
+          )}
+          
+          {node.metadata?.lastModified && (
+            <div className="text-xs text-gray-500">
+              Updated {new Date(node.metadata.lastModified).toLocaleDateString()}
+            </div>
+          )}
+        </div>
+
+        <div className="flex-shrink-0 flex items-center gap-1">
+          {(node.type === 'root' || node.type === 'branch') && (
+            <button
+              onClick={handleCreateBranch}
+              className="p-1 rounded hover:bg-black/10 transition-colors"
+              title="Create branch"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+            </button>
+          )}
+          
+          {node.type === 'branch' && (
+            <button
+              onClick={handleCreateSubmission}
+              className="p-1 rounded hover:bg-black/10 transition-colors"
+              title="Create submission"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+
+      {hasChildren && isExpanded && (
+        <div className="mt-2 space-y-2">
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.id}
+              node={child}
+              level={level + 1}
+              selectedNodeId={selectedNodeId}
+              onNodeSelect={onNodeSelect}
+              onCreateBranch={onCreateBranch}
+              onCreateSubmission={onCreateSubmission}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function CVTree({ 
+  treeData, 
+  selectedNodeId, 
+  onNodeSelect, 
+  onCreateBranch, 
+  onCreateSubmission 
+}: CVTreeProps) {
+  return (
+    <div className="p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-gray-900">CV Versions</h2>
+        <div className="text-sm text-gray-500">
+          {treeData.children.reduce((acc, branch) => acc + branch.children.length + 1, 1)} versions
+        </div>
+      </div>
+      
+      <div className="space-y-3">
+        <TreeNode
+          node={treeData}
+          selectedNodeId={selectedNodeId}
+          onNodeSelect={onNodeSelect}
+          onCreateBranch={onCreateBranch}
+          onCreateSubmission={onCreateSubmission}
+        />
+      </div>
+    </div>
+  );
+}

apps/webapp/src/components/cv/DiffViewer.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useState } from 'react';
+import { PatchDiff } from '@/types/cv';
+
+interface DiffViewerProps {
+  patches: PatchDiff[];
+  title?: string;
+  className?: string;
+}
+
+function DiffLine({ 
+  diff, 
+  isExpanded, 
+  onToggle 
+}: { 
+  diff: PatchDiff; 
+  isExpanded: boolean; 
+  onToggle: () => void;
+}) {
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'added': return 'bg-green-50 border-green-200';
+      case 'removed': return 'bg-red-50 border-red-200';
+      case 'changed': return 'bg-yellow-50 border-yellow-200';
+      default: return 'bg-gray-50 border-gray-200';
+    }
+  };
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'added':
+        return (
+          <div className="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
+            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clipRule="evenodd" />
+            </svg>
+          </div>
+        );
+      case 'removed':
+        return (
+          <div className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center">
+            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
+            </svg>
+          </div>
+        );
+      case 'changed':
+        return (
+          <div className="w-5 h-5 rounded-full bg-yellow-500 flex items-center justify-center">
+            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+              <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+            </svg>
+          </div>
+        );
+      default:
+        return <div className="w-5 h-5 rounded-full bg-gray-300" />;
+    }
+  };
+
+  return (
+    <div className={`border rounded-lg p-4 ${getTypeColor(diff.type)}`}>
+      <div className="flex items-start gap-3">
+        {getTypeIcon(diff.type)}
+        
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-gray-900">{diff.path}</span>
+            <button
+              onClick={onToggle}
+              className="text-xs text-gray-500 hover:text-gray-700 font-medium"
+            >
+              {isExpanded ? 'Hide' : 'Show'} details
+            </button>
+          </div>
+          
+          {diff.context && (
+            <div className="text-xs text-gray-600 mt-1">{diff.context}</div>
+          )}
+          
+          {isExpanded && (
+            <div className="mt-3 space-y-2">
+              {diff.oldValue && (
+                <div className="bg-red-100 border border-red-200 rounded p-2">
+                  <div className="text-xs font-medium text-red-800 mb-1">- Removed</div>
+                  <div className="text-sm text-red-700">{diff.oldValue}</div>
+                </div>
+              )}
+              
+              {diff.newValue && (
+                <div className="bg-green-100 border border-green-200 rounded p-2">
+                  <div className="text-xs font-medium text-green-800 mb-1">+ Added</div>
+                  <div className="text-sm text-green-700">{diff.newValue}</div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function DiffViewer({ patches, title = "Changes", className = "" }: DiffViewerProps) {
+  const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());
+
+  const toggleExpanded = (index: number) => {
+    const newExpanded = new Set(expandedItems);
+    if (newExpanded.has(index)) {
+      newExpanded.delete(index);
+    } else {
+      newExpanded.add(index);
+    }
+    setExpandedItems(newExpanded);
+  };
+
+  if (patches.length === 0) {
+    return (
+      <div className={`card p-6 text-center ${className}`}>
+        <div className="text-gray-500">
+          <svg className="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+          <p className="font-medium">No changes</p>
+          <p className="text-sm">This version is identical to its parent</p>
+        </div>
+      </div>
+    );
+  }
+
+  const changeCount = patches.length;
+  const addedCount = patches.filter(p => p.type === 'added').length;
+  const removedCount = patches.filter(p => p.type === 'removed').length;
+  const changedCount = patches.filter(p => p.type === 'changed').length;
+
+  return (
+    <div className={`card ${className}`}>
+      <div className="p-4 border-b border-gray-200">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
+          <div className="flex items-center gap-4 text-sm">
+            {addedCount > 0 && (
+              <span className="flex items-center gap-1 text-green-600">
+                <div className="w-3 h-3 rounded-full bg-green-500" />
+                {addedCount} added
+              </span>
+            )}
+            {changedCount > 0 && (
+              <span className="flex items-center gap-1 text-yellow-600">
+                <div className="w-3 h-3 rounded-full bg-yellow-500" />
+                {changedCount} changed
+              </span>
+            )}
+            {removedCount > 0 && (
+              <span className="flex items-center gap-1 text-red-600">
+                <div className="w-3 h-3 rounded-full bg-red-500" />
+                {removedCount} removed
+              </span>
+            )}
+          </div>
+        </div>
+        
+        <div className="text-sm text-gray-600 mt-1">
+          {changeCount} {changeCount === 1 ? 'change' : 'changes'} detected
+        </div>
+      </div>
+      
+      <div className="p-4 space-y-3 max-h-96 overflow-y-auto">
+        {patches.map((patch, index) => (
+          <DiffLine
+            key={index}
+            diff={patch}
+            isExpanded={expandedItems.has(index)}
+            onToggle={() => toggleExpanded(index)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}