| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DocuCraft - AI-Powered Documentary Creation</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8f9fa; |
| } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, #1e3a8a 0%, #111827 100%); |
| } |
| |
| .playfair { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .ai-tool-card { |
| border-left: 4px solid #3b82f6; |
| } |
| |
| .topic-chip { |
| transition: all 0.2s ease; |
| } |
| |
| .topic-chip:hover { |
| background-color: #3b82f6; |
| color: white; |
| } |
| |
| .documentary-type-card { |
| background-size: cover; |
| background-position: center; |
| height: 300px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .documentary-type-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%); |
| } |
| |
| .type-content { |
| position: relative; |
| z-index: 2; |
| } |
| |
| .process-step { |
| position: relative; |
| padding-left: 3rem; |
| } |
| |
| .process-step::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 2px; |
| height: 100%; |
| background-color: #3b82f6; |
| } |
| |
| .step-number { |
| position: absolute; |
| left: -1.5rem; |
| top: 0; |
| width: 3rem; |
| height: 3rem; |
| border-radius: 50%; |
| background-color: #3b82f6; |
| color: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| } |
| |
| .ai-chat-container { |
| background-color: #1f2937; |
| border-radius: 0.5rem; |
| height: 400px; |
| overflow-y: auto; |
| } |
| |
| .ai-message { |
| background-color: #374151; |
| border-radius: 1rem 1rem 1rem 0; |
| } |
| |
| .user-message { |
| background-color: #3b82f6; |
| border-radius: 1rem 1rem 0 1rem; |
| } |
| |
| .input-glow:focus { |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| |
| .animate-pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| |
| .ai-tool-modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0,0,0,0.5); |
| z-index: 1000; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .ai-tool-modal-content { |
| background-color: white; |
| border-radius: 0.5rem; |
| width: 90%; |
| max-width: 800px; |
| max-height: 90vh; |
| overflow-y: auto; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| } |
| |
| .loading-dots { |
| display: inline-flex; |
| align-items: center; |
| } |
| |
| .loading-dots span { |
| width: 8px; |
| height: 8px; |
| margin: 0 2px; |
| background-color: currentColor; |
| border-radius: 50%; |
| display: inline-block; |
| animation: bounce 1.4s infinite ease-in-out both; |
| } |
| |
| .loading-dots span:nth-child(1) { |
| animation-delay: -0.32s; |
| } |
| |
| .loading-dots span:nth-child(2) { |
| animation-delay: -0.16s; |
| } |
| |
| @keyframes bounce { |
| 0%, 80%, 100% { |
| transform: scale(0); |
| } 40% { |
| transform: scale(1.0); |
| } |
| } |
| </style> |
| </head> |
| <body class="text-gray-800"> |
| |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <i class="fas fa-film text-blue-600 text-2xl mr-2"></i> |
| <span class="text-xl font-bold text-gray-900 playfair">DocuCraft</span> |
| </div> |
| </div> |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> |
| <a href="#features" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Features</a> |
| <a href="#process" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Process</a> |
| <a href="#topics" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Topics</a> |
| <a href="#ai-tools" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">AI Tools</a> |
| <a href="#resources" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">Resources</a> |
| </div> |
| <div class="flex items-center"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300"> |
| Get Started |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="researchModal" class="ai-tool-modal"> |
| <div class="ai-tool-modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold playfair">Research Assistant</h3> |
| <button onclick="closeModal('researchModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="mb-6"> |
| <p class="text-gray-600 mb-4">Enter your research topic to get AI-generated information, sources, and analysis.</p> |
| <div class="flex"> |
| <input type="text" id="researchInput" placeholder="e.g., Crimes of passion in Victorian England" class="flex-grow border border-gray-300 rounded-l-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button onclick="generateResearch()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg"> |
| Research |
| </button> |
| </div> |
| </div> |
| <div id="researchResults" class="bg-gray-50 p-4 rounded-lg min-h-48"> |
| <p class="text-gray-500 italic">Your research results will appear here...</p> |
| </div> |
| <div class="mt-4 flex justify-end"> |
| <button onclick="copyToClipboard('researchResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2"> |
| <i class="fas fa-copy mr-2"></i>Copy |
| </button> |
| <button onclick="downloadAsText('researchResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| <i class="fas fa-download mr-2"></i>Download |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="scriptModal" class="ai-tool-modal"> |
| <div class="ai-tool-modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold playfair">Script Generator</h3> |
| <button onclick="closeModal('scriptModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="mb-6"> |
| <p class="text-gray-600 mb-4">Describe your documentary to generate a script outline or full script.</p> |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Documentary Type</label> |
| <select id="scriptType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="investigative">Investigative</option> |
| <option value="character-driven">Character-Driven</option> |
| <option value="historical">Historical</option> |
| <option value="social-issue">Social Issue</option> |
| <option value="nature">Nature/Wildlife</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Tone</label> |
| <select id="scriptTone" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="serious">Serious</option> |
| <option value="dramatic">Dramatic</option> |
| <option value="informative">Informative</option> |
| <option value="emotional">Emotional</option> |
| <option value="hopeful">Hopeful</option> |
| </select> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Documentary Description</label> |
| <textarea id="scriptDescription" rows="3" placeholder="Describe your documentary topic, focus, and key elements..." class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| <div class="flex"> |
| <button onclick="generateScriptOutline()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg mr-2"> |
| Generate Outline |
| </button> |
| <button onclick="generateFullScript()" class="bg-blue-800 hover:bg-blue-900 text-white px-4 py-2 rounded-lg"> |
| Full Script |
| </button> |
| </div> |
| </div> |
| <div id="scriptResults" class="bg-gray-50 p-4 rounded-lg min-h-48"> |
| <p class="text-gray-500 italic">Your script will appear here...</p> |
| </div> |
| <div class="mt-4 flex justify-end"> |
| <button onclick="copyToClipboard('scriptResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2"> |
| <i class="fas fa-copy mr-2"></i>Copy |
| </button> |
| <button onclick="downloadAsText('scriptResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| <i class="fas fa-download mr-2"></i>Download |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="voiceoverModal" class="ai-tool-modal"> |
| <div class="ai-tool-modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold playfair">Voiceover Studio</h3> |
| <button onclick="closeModal('voiceoverModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="mb-6"> |
| <p class="text-gray-600 mb-4">Generate natural-sounding voiceovers for your documentary narration.</p> |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Voice Style</label> |
| <select id="voiceStyle" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="professional-male">Professional Male</option> |
| <option value="professional-female">Professional Female</option> |
| <option value="warm-male">Warm Male</option> |
| <option value="warm-female">Warm Female</option> |
| <option value="authoritative">Authoritative</option> |
| <option value="conversational">Conversational</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Language</label> |
| <select id="voiceLanguage" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="english">English</option> |
| <option value="spanish">Spanish</option> |
| <option value="french">French</option> |
| <option value="german">German</option> |
| <option value="italian">Italian</option> |
| </select> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Narration Text</label> |
| <textarea id="voiceoverText" rows="5" placeholder="Enter the text you want to convert to voiceover..." class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| <button onclick="generateVoiceover()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg"> |
| Generate Voiceover |
| </button> |
| </div> |
| <div id="voiceoverResults" class="bg-gray-50 p-4 rounded-lg min-h-48 flex flex-col items-center justify-center"> |
| <p class="text-gray-500 italic mb-4">Your voiceover will appear here...</p> |
| <audio id="voiceoverAudio" controls class="w-full hidden"></audio> |
| </div> |
| <div class="mt-4 flex justify-end"> |
| <button onclick="downloadVoiceover()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| <i class="fas fa-download mr-2"></i>Download |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="musicModal" class="ai-tool-modal"> |
| <div class="ai-tool-modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold playfair">Music Recommender</h3> |
| <button onclick="closeModal('musicModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="mb-6"> |
| <p class="text-gray-600 mb-4">Get personalized music recommendations based on your documentary's mood and scenes.</p> |
| <div class="grid md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-gray-700 mb-2">Scene Type</label> |
| <select id="sceneType" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="opening">Opening Sequence</option> |
| <option value="interview">Interview Background</option> |
| <option value="dramatic">Dramatic Moment</option> |
| <option value="emotional">Emotional Scene</option> |
| <option value="montage">Montage Sequence</option> |
| <option value="closing">Closing Credits</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-2">Mood</label> |
| <select id="musicMood" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="inspiring">Inspiring</option> |
| <option value="tense">Tense</option> |
| <option value="sad">Sad</option> |
| <option value="hopeful">Hopeful</option> |
| <option value="mysterious">Mysterious</option> |
| <option value="upbeat">Upbeat</option> |
| </select> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Scene Description (optional)</label> |
| <textarea id="sceneDescription" rows="2" placeholder="Briefly describe the scene you're scoring..." class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| <button onclick="recommendMusic()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg"> |
| Recommend Music |
| </button> |
| </div> |
| <div id="musicResults" class="bg-gray-50 p-4 rounded-lg min-h-48"> |
| <p class="text-gray-500 italic">Your music recommendations will appear here...</p> |
| </div> |
| <div class="mt-4 flex justify-end"> |
| <button onclick="copyToClipboard('musicResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| <i class="fas fa-copy mr-2"></i>Copy |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="editingModal" class="ai-tool-modal"> |
| <div class="ai-tool-modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold playfair">Editing Assistant</h3> |
| <button onclick="closeModal('editingModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="mb-6"> |
| <p class="text-gray-600 mb-4">Get AI-powered suggestions for editing your documentary footage.</p> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Upload Footage (simulated)</label> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-gray-500">Drag and drop video files here or click to browse</p> |
| <input type="file" id="footageUpload" class="hidden" accept="video/*"> |
| <button onclick="document.getElementById('footageUpload').click()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| Select Files |
| </button> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Editing Goals</label> |
| <select id="editingGoals" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="pacing">Improve Pacing</option> |
| <option value="storyflow">Enhance Story Flow</option> |
| <option value="interview">Best Interview Clips</option> |
| <option value="broll">B-Roll Placement</option> |
| <option value="transitions">Smooth Transitions</option> |
| </select> |
| </div> |
| <button onclick="analyzeFootage()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg"> |
| Analyze Footage |
| </button> |
| </div> |
| <div id="editingResults" class="bg-gray-50 p-4 rounded-lg min-h-48"> |
| <p class="text-gray-500 italic">Your editing suggestions will appear here...</p> |
| </div> |
| <div class="mt-4 flex justify-end"> |
| <button onclick="copyToClipboard('editingResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| <i class="fas fa-copy mr-2"></i>Copy |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="analyticsModal" class="ai-tool-modal"> |
| <div class="ai-tool-modal-content"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold playfair">Analytics Dashboard</h3> |
| <button onclick="closeModal('analyticsModal')" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-xl"></i> |
| </button> |
| </div> |
| <div class="mb-6"> |
| <p class="text-gray-600 mb-4">Upload your documentary to get viewer engagement analytics and insights.</p> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Upload Documentary (simulated)</label> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-gray-500">Drag and drop your documentary file here or click to browse</p> |
| <input type="file" id="docUpload" class="hidden" accept="video/*"> |
| <button onclick="document.getElementById('docUpload').click()" class="mt-4 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| Select File |
| </button> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-gray-700 mb-2">Target Audience</label> |
| <select id="targetAudience" class="w-full border border-gray-300 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="general">General Audience</option> |
| <option value="young-adults">Young Adults (18-30)</option> |
| <option value="middle-aged">Middle-Aged (30-50)</option> |
| <option value="seniors">Seniors (50+)</option> |
| <option value="students">Students</option> |
| <option value="professionals">Professionals</option> |
| </select> |
| </div> |
| <button onclick="analyzeDocumentary()" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg"> |
| Analyze Documentary |
| </button> |
| </div> |
| <div id="analyticsResults" class="bg-gray-50 p-4 rounded-lg min-h-48"> |
| <p class="text-gray-500 italic">Your analytics report will appear here...</p> |
| </div> |
| <div class="mt-4 flex justify-end"> |
| <button onclick="copyToClipboard('analyticsResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md mr-2"> |
| <i class="fas fa-copy mr-2"></i>Copy |
| </button> |
| <button onclick="downloadAsText('analyticsResults')" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md"> |
| <i class="fas fa-download mr-2"></i>Download |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <section class="hero-gradient text-white py-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="md:flex items-center justify-between"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 playfair">Craft Captivating Documentaries with AI</h1> |
| <p class="text-xl mb-8 text-blue-100">From research to final cut, our platform helps you create powerful documentaries with expert guidance and AI assistance at every step.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-md text-lg font-semibold transition duration-300"> |
| Start Your Project |
| </button> |
| <button class="border border-white text-white hover:bg-blue-700 px-6 py-3 rounded-md text-lg font-semibold transition duration-300"> |
| Watch Demo |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <div class="relative w-full max-w-md"> |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> |
| <div class="relative bg-white rounded-xl shadow-2xl overflow-hidden"> |
| <div class="bg-gray-800 p-4 text-white text-center font-medium"> |
| AI Documentary Assistant |
| </div> |
| <div class="p-6"> |
| <div class="flex mb-4"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-blue-600"></i> |
| </div> |
| <div class="bg-gray-100 p-3 rounded-lg max-w-xs"> |
| <p class="text-gray-800">Hi! I can help you research, write scripts, and plan your documentary. What topic are you exploring?</p> |
| </div> |
| </div> |
| <div class="flex justify-end mb-4"> |
| <div class="bg-blue-100 p-3 rounded-lg max-w-xs"> |
| <p class="text-blue-800">I'm interested in crimes of passion throughout history.</p> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center ml-3"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| </div> |
| <div class="flex"> |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-blue-600"></i> |
| </div> |
| <div class="bg-gray-100 p-3 rounded-lg max-w-xs"> |
| <p class="text-gray-800">Fascinating topic! Let me suggest some famous cases and storytelling approaches...</p> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <input type="text" placeholder="Ask the AI anything..." class="w-full border border-gray-300 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4 playfair">Your Complete Documentary Toolkit</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything you need to research, plan, shoot, and edit compelling documentaries with professional results.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover"> |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-book-open text-blue-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Research & Story Development</h3> |
| <p class="text-gray-600 mb-4">Access curated databases of historical events, expert interviews, and case studies to build your narrative foundation.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| AI-powered research assistant |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| Story structure templates |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> |
| Character development tools |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover"> |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-pen-fancy text-purple-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Scriptwriting & Storyboarding</h3> |
| <p class="text-gray-600 mb-4">Collaborative tools to craft your documentary script with AI suggestions for pacing, dialogue, and visual storytelling.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| Interactive script editor |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| Visual storyboard creator |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-purple-500 mr-2"></i> |
| Narrative flow analyzer |
| </li> |
| </ul> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg p-8 card-hover"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-video text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Production & Post-Production</h3> |
| <p class="text-gray-600 mb-4">Comprehensive guides and tools for shooting techniques, editing workflows, and adding music/sound design.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| Shot composition analyzer |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| AI-powered editing assistant |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| Royalty-free music library |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl font-bold text-center mb-12 playfair">Explore Documentary Styles</h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"> |
| <div class="type-content h-full flex flex-col justify-end p-6"> |
| <h3 class="text-2xl font-bold text-white mb-2 playfair">Crimes of Passion</h3> |
| <p class="text-gray-200 mb-4">Explore the psychology behind crimes committed in the name of love and obsession.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Love Gone Wrong</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Jealousy</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Obsession</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1600077106724-946750eeaf3c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"> |
| <div class="type-content h-full flex flex-col justify-end p-6"> |
| <h3 class="text-2xl font-bold text-white mb-2 playfair">Historical Mysteries</h3> |
| <p class="text-gray-200 mb-4">Uncover forgotten stories and re-examine historical events with new perspectives.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Unsolved Cases</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Cold Cases</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Historical Figures</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1452421822248-d49c2fafb6a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"> |
| <div class="type-content h-full flex flex-col justify-end p-6"> |
| <h3 class="text-2xl font-bold text-white mb-2 playfair">Social Justice</h3> |
| <p class="text-gray-200 mb-4">Examine systemic issues and highlight voices working toward change.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Activism</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Human Rights</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Inequality</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1504868584819-f8e8b4b630d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80')"> |
| <div class="type-content h-full flex flex-col justify-end p-6"> |
| <h3 class="text-2xl font-bold text-white mb-2 playfair">Biographical</h3> |
| <p class="text-gray-200 mb-4">Dive deep into the lives of fascinating individuals who shaped our world.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Artists</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Scientists</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Pioneers</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1500382018108-823d5c3c1f3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"> |
| <div class="type-content h-full flex flex-col justify-end p-6"> |
| <h3 class="text-2xl font-bold text-white mb-2 playfair">Nature & Environment</h3> |
| <p class="text-gray-200 mb-4">Showcase the beauty of our planet and the challenges it faces.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Conservation</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Wildlife</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Climate Change</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="documentary-type-card rounded-xl" style="background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80')"> |
| <div class="type-content h-full flex flex-col justify-end p-6"> |
| <h3 class="text-2xl font-bold text-white mb-2 playfair">Science & Technology</h3> |
| <p class="text-gray-200 mb-4">Explore breakthroughs, innovations, and the people behind them.</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Innovation</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Future Tech</span> |
| <span class="topic-chip bg-white bg-opacity-20 text-white px-3 py-1 rounded-full text-sm">Medical Advances</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md text-lg font-semibold transition duration-300"> |
| Browse All Documentary Types |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="process" class="py-20 bg-white"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4 playfair">The Documentary Creation Process</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">From initial concept to final cut, we guide you through every step of creating a compelling documentary.</p> |
| </div> |
| |
| <div class="max-w-3xl mx-auto space-y-12"> |
| |
| <div class="process-step"> |
| <div class="step-number">1</div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-2xl font-bold mb-3 playfair">Research & Concept Development</h3> |
| <p class="text-gray-600 mb-4">Dive deep into your subject matter, identify key themes, and develop your unique angle. Our AI research assistant can help uncover obscure facts and suggest narrative directions.</p> |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> |
| <h4 class="font-bold text-blue-800 mb-2 flex items-center"> |
| <i class="fas fa-lightbulb mr-2"></i> Pro Tip |
| </h4> |
| <p class="text-blue-700">For crimes of passion documentaries, focus on the psychological aspects rather than just the sensational details. Interview psychologists to add depth to your analysis.</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="process-step"> |
| <div class="step-number">2</div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-2xl font-bold mb-3 playfair">Scriptwriting & Storyboarding</h3> |
| <p class="text-gray-600 mb-4">Structure your narrative with our interactive script tools. Our AI can suggest dramatic arcs, interview questions, and visual sequences based on successful documentaries in your genre.</p> |
| <div class="grid md:grid-cols-2 gap-4 mt-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h5 class="font-bold mb-2">Script Elements to Include:</h5> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> |
| <li>Strong opening hook</li> |
| <li>Clear central question</li> |
| <li>Character development</li> |
| <li>Evidence presentation</li> |
| <li>Emotional climax</li> |
| <li>Thought-provoking conclusion</li> |
| </ul> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h5 class="font-bold mb-2">Storyboard Tips:</h5> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1"> |
| <li>Vary shot types for visual interest</li> |
| <li>Plan interview setups</li> |
| <li>Sketch archival material placement</li> |
| <li>Note transitions between scenes</li> |
| <li>Indicate music/sound effects</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="process-step"> |
| <div class="step-number">3</div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-2xl font-bold mb-3 playfair">Production Planning</h3> |
| <p class="text-gray-600 mb-4">Organize your shoots, interviews, and location scouting. Our platform helps you create production schedules, shot lists, and equipment checklists tailored to your budget.</p> |
| <div class="bg-white p-4 rounded-lg border border-gray-200 mt-4"> |
| <h4 class="font-bold mb-3">Essential Production Documents:</h4> |
| <div class="grid md:grid-cols-3 gap-3"> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="font-medium text-blue-800 mb-1">Shot List</div> |
| <div class="text-sm text-blue-700">Every visual element you need to capture</div> |
| </div> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="font-medium text-blue-800 mb-1">Interview Questions</div> |
| <div class="text-sm text-blue-700">Tailored for each subject</div> |
| </div> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="font-medium text-blue-800 mb-1">Release Forms</div> |
| <div class="text-sm text-blue-700">Legal permissions from participants</div> |
| </div> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="font-medium text-blue-800 mb-1">Equipment List</div> |
| <div class="text-sm text-blue-700">Cameras, mics, lighting, etc.</div> |
| </div> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="font-medium text-blue-800 mb-1">Location Scouting</div> |
| <div class="text-sm text-blue-700">Notes on each potential filming site</div> |
| </div> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="font-medium text-blue-800 mb-1">Schedule</div> |
| <div class="text-sm text-blue-700">Detailed timeline for each shoot day</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="process-step"> |
| <div class="step-number">4</div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-2xl font-bold mb-3 playfair">Filming Techniques</h3> |
| <p class="text-gray-600 mb-4">Learn professional techniques for capturing compelling footage, whether you're using a smartphone or cinema camera.</p> |
| <div class="grid md:grid-cols-2 gap-6 mt-4"> |
| <div> |
| <h4 class="font-bold mb-2 text-lg">Interview Setup</h4> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <div class="flex items-start mb-3"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Lighting</div> |
| <div class="text-sm text-gray-600">Three-point lighting setup for professional interviews</div> |
| </div> |
| </div> |
| <div class="flex items-start mb-3"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Framing</div> |
| <div class="text-sm text-gray-600">Rule of thirds, proper headroom, and eye line</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Audio</div> |
| <div class="text-sm text-gray-600">Lavalier mics for clean dialogue, room tone recording</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-bold mb-2 text-lg">B-Roll Capture</h4> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <div class="flex items-start mb-3"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Variety</div> |
| <div class="text-sm text-gray-600">Wide, medium, close-up, and extreme close-up shots</div> |
| </div> |
| </div> |
| <div class="flex items-start mb-3"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Movement</div> |
| <div class="text-sm text-gray-600">Static shots, pans, tilts, and tracking shots</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-check text-blue-600"></i> |
| </div> |
| <div> |
| <div class="font-medium">Details</div> |
| <div class="text-sm text-gray-600">Capture textures, objects, and environmental details</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="process-step"> |
| <div class="step-number">5</div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-2xl font-bold mb-3 playfair">Editing & Post-Production</h3> |
| <p class="text-gray-600 mb-4">Transform your raw footage into a polished documentary with our editing guides and AI-powered tools.</p> |
| <div class="bg-white p-4 rounded-lg border border-gray-200 mt-4"> |
| <h4 class="font-bold mb-3">Editing Workflow:</h4> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">1</div> |
| <div> |
| <div class="font-medium">Assembly Cut</div> |
| <div class="text-sm text-gray-600">String together your best footage in rough sequence</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">2</div> |
| <div> |
| <div class="font-medium">Fine Cut</div> |
| <div class="text-sm text-gray-600">Refine pacing, tighten sequences, add transitions</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">3</div> |
| <div> |
| <div class="font-medium">Sound Design</div> |
| <div class="text-sm text-gray-600">Add music, sound effects, and mix audio levels</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">4</div> |
| <div> |
| <div class="font-medium">Color Grading</div> |
| <div class="text-sm text-gray-600">Create visual consistency and mood</div> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0">5</div> |
| <div> |
| <div class="font-medium">Titles & Graphics</div> |
| <div class="text-sm text-gray-600">Add lower thirds, credits, and informational graphics</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="process-step"> |
| <div class="step-number">6</div> |
| <div class="bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-2xl font-bold mb-3 playfair">Music & Sound Design</h3> |
| <p class="text-gray-600 mb-4">The right soundtrack can elevate your documentary from good to unforgettable. Access our royalty-free music library or get AI suggestions based on your film's mood.</p> |
| <div class="grid md:grid-cols-3 gap-4 mt-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <div class="font-bold mb-2">Music Selection Guide</div> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm"> |
| <li>Match music to emotional tone of scenes</li> |
| <li>Consider tempo and instrumentation</li> |
| <li>Use leitmotifs for recurring themes</li> |
| <li>Ensure proper licensing</li> |
| </ul> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <div class="font-bold mb-2">Sound Design Tips</div> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm"> |
| <li>Record clean ambient sound</li> |
| <li>Layer subtle sound effects</li> |
| <li>Use audio transitions between scenes</li> |
| <li>Balance dialogue, music, and effects</li> |
| </ul> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <div class="font-bold mb-2">Voiceover Considerations</div> |
| <ul class="list-disc pl-5 text-gray-600 space-y-1 text-sm"> |
| <li>Choose the right narrator voice</li> |
| <li>Record in a treated space</li> |
| <li>Maintain consistent audio levels</li> |
| <li>Use AI voiceovers for drafts</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="ai-tools" class="py-20 bg-gray-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl font-bold text-gray-900 mb-4 playfair">AI-Powered Documentary Tools</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Leverage artificial intelligence to enhance every aspect of your documentary creation process.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-search text-blue-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Research Assistant</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Our AI scans thousands of sources to find relevant facts, historical context, and expert opinions for your documentary topic.</p> |
| <div class="bg-blue-50 p-3 rounded-lg"> |
| <div class="text-sm font-medium text-blue-800 mb-1">Try asking:</div> |
| <p class="text-sm text-blue-700">"Find me primary sources about crimes of passion in Victorian England"</p> |
| </div> |
| <button onclick="openModal('researchModal')" class="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-md font-medium transition duration-300"> |
| Open Research Assistant |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-scroll text-purple-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Script Generator</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Generate documentary script drafts based on your research, with options for different narrative styles and tones.</p> |
| <div class="bg-purple-50 p-3 rounded-lg"> |
| <div class="text-sm font-medium text-purple-800 mb-1">Try asking:</div> |
| <p class="text-sm text-purple-700">"Create a script outline for a documentary about fatal attraction cases"</p> |
| </div> |
| <button onclick="openModal('scriptModal')" class="w-full mt-4 bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-md font-medium transition duration-300"> |
| Open Script Generator |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-microphone-alt text-green-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Voiceover Studio</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Create natural-sounding voiceovers in multiple languages and accents to use in your documentary drafts.</p> |
| <div class="bg-green-50 p-3 rounded-lg"> |
| <div class="text-sm font-medium text-green-800 mb-1">Try asking:</div> |
| <p class="text-sm text-green-700">"Generate a British female voiceover for my crime documentary introduction"</p> |
| </div> |
| <button onclick="openModal('voiceoverModal')" class="w-full mt-4 bg-green-600 hover:bg-green-700 text-white py-2 rounded-md font-medium transition duration-300"> |
| Open Voiceover Studio |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-music text-yellow-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Music Recommender</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Get personalized music recommendations based on the mood and pacing of your documentary scenes.</p> |
| <div class="bg-yellow-50 p-3 rounded-lg"> |
| <div class="text-sm font-medium text-yellow-800 mb-1">Try asking:</div> |
| <p class="text-sm text-yellow-700">"Suggest tense, dramatic music for a crime scene recreation"</p> |
| </div> |
| <button onclick="openModal('musicModal')" class="w-full mt-4 bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-md font-medium transition duration-300"> |
| Open Music Recommender |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-cut text-red-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Editing Assistant</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Upload your footage and get AI-powered suggestions for editing sequences, pacing, and transitions.</p> |
| <div class="bg-red-50 p-3 rounded-lg"> |
| <div class="text-sm font-medium text-red-800 mb-1">Try asking:</div> |
| <p class="text-sm text-red-700">"Analyze my interview footage and suggest the best soundbites"</p> |
| </div> |
| <button onclick="openModal('editingModal')" class="w-full mt-4 bg-red-600 hover:bg-red-700 text-white py-2 rounded-md font-medium transition duration-300"> |
| Open Editing Assistant |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden ai-tool-card"> |
| <div class="p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-chart-line text-indigo-600 text-xl"></i> |
| </div> |
| <h3 class="text-xl font-bold">Analytics Dashboard</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Track viewer engagement with your documentary and get insights about which segments resonate most.</p> |
| <div class="bg-indigo-50 p-3 rounded-lg"> |
| <div class="text-sm font-medium text-indigo-800 mb-1">Try asking:</div> |
| <p class="text-sm text-indigo-700">"Show me which parts of my documentary had the highest drop-off rates"</p> |
| </div> |
| <button onclick="openModal('analyticsModal')" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-md font-medium transition duration-300"> |
| Open Analytics Dashboard |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16 bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 p-8 md:p-12"> |
| <h3 class="text-2xl font-bold mb-4 playfair">Try Our AI Documentary Assistant</h3> |
| <p class="text-gray-600 mb-6">Get instant help with research, scripting, and planning your documentary. Our AI has been trained on thousands of successful documentaries to provide expert guidance.</p> |
| <div class="ai-chat-container p-4 mb-4"> |
| <div class="flex mb-4"> |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-gray-600"></i> |
| </div> |
| <div class="ai-message p-3 max-w-xs"> |
| <p class="text-white">Hello! I'm your documentary assistant. What topic would you like to explore today?</p> |
| </div> |
| </div> |
| <div class="flex justify-end mb-4"> |
| <div class="user-message p-3 max-w-xs"> |
| <p class="text-white">I'm interested in crimes of passion in the 1920s.</p> |
| </div> |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center ml-3"> |
| <i class="fas fa-user text-white"></i> |
| </div> |
| </div> |
| <div class="flex mb-4"> |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3"> |
| <i class="fas fa-robot text-gray-600"></i> |
| </div> |
| <div class="ai-message p-3 max-w-xs"> |
| <p class="text-white">Fascinating era! The 1920s saw many high-profile crimes of passion due to changing social norms. Would you like me to suggest:</p> |
| <div class="mt-2 space-y-2"> |
| <div class="bg-gray-700 p-2 rounded-lg text-sm">1. Famous cases from that decade</div> |
| <div class="bg-gray-700 p-2 rounded-lg text-sm">2. Social context analysis</div> |
| <div class="bg-gray-700 p-2 rounded-lg text-sm">3. Potential interview subjects</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="relative"> |
| <input type="text" placeholder="Ask the AI anything about your documentary..." class="w-full border border-gray-300 rounded-full py-3 px-5 pr-12 focus:outline-none input-glow"> |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white rounded-full w-10 h-10 flex items-center justify-center"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 bg-blue-600 text-white p-8 md:p-12 flex flex-col justify-center"> |
| <h3 class="text-2xl font-bold mb-4 playfair">How AI Can Enhance Your Documentary</h3> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <div class="bg-blue-700 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> |
| <i class="fas fa-check text-sm"></i> |
| </div> |
| <div> |
| <div class="font-medium">Save hundreds of research hours</div> |
| <div class="text-blue-100 text-sm">AI quickly surfaces relevant facts, sources, and expert opinions</div> |
| </div> |
| </li> |
| <li class="flex items-start"> |
| <div class="bg-blue-700 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1 flex-shrink-0"> |
| <i class="fas fa-check text-sm"></i> |
| </div> |
| <div> |
| <div class="font-medium">Overcome writer's block</div> |
| < |
| </html> |
