Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portfolio: Contract Versioning System</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"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Apply Inter font */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| /* Gradient background for hero section */ | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); | |
| } | |
| /* Animation classes */ | |
| .animate-in { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| .animate-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* Feature cards */ | |
| .feature-card { | |
| background-color: white; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02); | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 4px; | |
| height: 0; | |
| background: #3b82f6; | |
| transition: height 0.3s ease; | |
| } | |
| .feature-card:hover::before { | |
| height: 100%; | |
| } | |
| /* Step indicators */ | |
| .step-indicator { | |
| position: relative; | |
| } | |
| .step-indicator:not(:last-child)::after { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| right: -2rem; | |
| width: 1.5rem; | |
| height: 2px; | |
| background: #d1d5db; | |
| transform: translateY(-50%); | |
| } | |
| /* Diff visualization */ | |
| .diff-container { | |
| background: #f8fafc; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .diff-line { | |
| padding: 0.25rem 1rem; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.875rem; | |
| } | |
| .diff-added { | |
| background-color: #dcfce7; | |
| border-left: 3px solid #22c55e; | |
| } | |
| .diff-removed { | |
| background-color: #fee2e2; | |
| border-left: 3px solid #ef4444; | |
| } | |
| .diff-unchanged { | |
| background-color: white; | |
| } | |
| /* Floating action button */ | |
| .fab { | |
| position: fixed; | |
| bottom: 2rem; | |
| right: 2rem; | |
| width: 3.5rem; | |
| height: 3.5rem; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| z-index: 50; | |
| } | |
| .fab:hover { | |
| transform: translateY(-3px) scale(1.05); | |
| background: #2563eb; | |
| } | |
| /* Tech stack icons */ | |
| .tech-icon { | |
| width: 3rem; | |
| height: 3rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 0.5rem; | |
| background: white; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .step-indicator:not(:last-child)::after { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 leading-relaxed"> | |
| <!-- Floating action button --> | |
| <a href="#contact" class="fab animate-in" style="transition-delay: 0.4s;"> | |
| <i class="fas fa-paper-plane text-xl"></i> | |
| </a> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg"> | |
| <i class="fas fa-file-contract text-xl"></i> | |
| </div> | |
| <div class="text-xl font-bold text-gray-900">ContractFlow</div> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#features" class="text-gray-600 hover:text-blue-600 transition">Features</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-blue-600 transition">How It Works</a> | |
| <a href="#tech-stack" class="text-gray-600 hover:text-blue-600 transition">Technology</a> | |
| <a href="#contact" class="text-gray-600 hover:text-blue-600 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section id="hero" class="hero-gradient py-20 md:py-28"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="inline-block px-4 py-2 bg-white rounded-full shadow-sm mb-6 animate-in"> | |
| <span class="text-blue-600 font-medium">Version 2.0 Released</span> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 animate-in">Revolutionizing Contract Management</h1> | |
| <p class="text-xl md:text-2xl text-gray-700 mb-8 animate-in" style="transition-delay: 0.1s;">Git-like version control for legal documents. Track changes, collaborate seamlessly, and finalize contracts faster.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16 animate-in" style="transition-delay: 0.2s;"> | |
| <a href="#features" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center justify-center"> | |
| <i class="fas fa-rocket mr-2"></i> Explore Features | |
| </a> | |
| <a href="#demo" class="bg-white hover:bg-gray-50 text-gray-800 font-semibold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center justify-center border border-gray-200"> | |
| <i class="fas fa-play-circle mr-2 text-blue-600"></i> Watch Demo | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md animate-in" style="transition-delay: 0.3s;"> | |
| <div class="diff-container"> | |
| <div class="diff-line diff-removed">- This Agreement is made and entered into as of [Date] by and between</div> | |
| <div class="diff-line diff-added">+ This Agreement is made and entered into as of January 15, 2023 by and between</div> | |
| <div class="diff-line diff-unchanged"> Party A ("Client") and Party B ("Service Provider").</div> | |
| <div class="diff-line diff-removed">- The term of this Agreement shall be one (1) year.</div> | |
| <div class="diff-line diff-added">+ The initial term of this Agreement shall be two (2) years.</div> | |
| <div class="diff-line diff-added">+ Either party may terminate this Agreement with thirty (30) days written notice.</div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-3">Example of visual diff comparison between contract versions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem Section --> | |
| <section id="problem" class="py-20 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">The Contract Negotiation Nightmare</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div> | |
| <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">Traditional contract negotiation is plagued with inefficiencies that cost time and money.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-in"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-envelope text-3xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Email Chaos</h3> | |
| <p class="text-gray-600">Version confusion with attachments named "Contract_Final_v3_Revised_FINAL.docx"</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-in" style="transition-delay: 0.1s;"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-search text-3xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Manual Comparisons</h3> | |
| <p class="text-gray-600">Hours wasted comparing documents side-by-side to spot changes</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-in" style="transition-delay: 0.2s;"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-users-slash text-3xl"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-2">Collaboration Issues</h3> | |
| <p class="text-gray-600">No clear record of who made which changes and when</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solution Section --> | |
| <section id="solution" class="py-20 bg-gray-50 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Modern Solution for Contract Management</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div> | |
| <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">Applying software engineering best practices to legal document workflows.</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="md:w-1/2 animate-in"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Contract management" | |
| class="rounded-xl shadow-lg w-full h-auto"> | |
| </div> | |
| <div class="md:w-1/2 space-y-6 animate-in" style="transition-delay: 0.1s;"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-history text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-1">Complete Version History</h3> | |
| <p class="text-gray-600">Every edit is tracked with timestamps and attribution. Roll back to any previous version with one click.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-code-compare text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-1">Visual Diff Comparison</h3> | |
| <p class="text-gray-600">Instantly see what changed between any two versions with color-coded highlighting.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-users text-lg"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-1">Collaborative Editing</h3> | |
| <p class="text-gray-600">Multiple stakeholders can work on the same document with tracked changes and comments.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Powerful Features</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div> | |
| <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">Everything you need for efficient contract management in one platform.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card p-6 animate-in"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4"> | |
| <i class="fas fa-code-branch text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-900">Branching & Merging</h3> | |
| <p class="text-gray-600">Create alternative versions of clauses or entire documents in isolated branches, then merge approved changes back to the main document.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card p-6 animate-in" style="transition-delay: 0.1s;"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4"> | |
| <i class="fas fa-comment-dots text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-900">Inline Comments</h3> | |
| <p class="text-gray-600">Add context to changes with threaded discussions tied to specific document sections. Resolve comments when issues are addressed.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card p-6 animate-in" style="transition-delay: 0.2s;"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4"> | |
| <i class="fas fa-user-shield text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-900">Role-Based Access</h3> | |
| <p class="text-gray-600">Control who can view, edit, comment, or approve changes with granular permission settings for each document.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card p-6 animate-in" style="transition-delay: 0.3s;"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-900">Change Notifications</h3> | |
| <p class="text-gray-600">Get real-time alerts when documents you're watching are modified, with summaries of what changed.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card p-6 animate-in" style="transition-delay: 0.4s;"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4"> | |
| <i class="fas fa-file-export text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-900">Export Versions</h3> | |
| <p class="text-gray-600">Download any version as a clean Word or PDF document with optional change tracking visible.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card p-6 animate-in" style="transition-delay: 0.5s;"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-900">AI Suggestions</h3> | |
| <p class="text-gray-600">Get smart recommendations for common clauses based on document context and your past agreements.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-gray-50 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Simple Workflow</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div> | |
| <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">From initial draft to signed agreement in a streamlined process.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-8 text-center mb-12"> | |
| <!-- Step 1 --> | |
| <div class="flex flex-col items-center step-indicator animate-in"> | |
| <div class="bg-blue-600 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold mb-3">1</div> | |
| <h3 class="font-semibold mb-1">Upload</h3> | |
| <p class="text-sm text-gray-600">Start with your initial contract template or draft</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex flex-col items-center step-indicator animate-in" style="transition-delay: 0.1s;"> | |
| <div class="bg-blue-600 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold mb-3">2</div> | |
| <h3 class="font-semibold mb-1">Edit</h3> | |
| <p class="text-sm text-gray-600">Make changes with automatic version tracking</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex flex-col items-center step-indicator animate-in" style="transition-delay: 0.2s;"> | |
| <div class="bg-blue-600 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold mb-3">3</div> | |
| <h3 class="font-semibold mb-1">Review</h3> | |
| <p class="text-sm text-gray-600">Compare versions and discuss changes</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="flex flex-col items-center step-indicator animate-in" style="transition-delay: 0.3s;"> | |
| <div class="bg-blue-600 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold mb-3">4</div> | |
| <h3 class="font-semibold mb-1">Approve</h3> | |
| <p class="text-sm text-gray-600">Mark the final version as approved</p> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="flex flex-col items-center animate-in" style="transition-delay: 0.4s;"> | |
| <div class="bg-blue-600 text-white rounded-full h-16 w-16 flex items-center justify-center text-2xl font-bold mb-3">5</div> | |
| <h3 class="font-semibold mb-1">Sign</h3> | |
| <p class="text-sm text-gray-600">Send for e-signature or download for wet ink</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm animate-in" style="transition-delay: 0.5s;"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <h3 class="font-semibold text-lg">Real-World Example</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">A legal team reduced contract negotiation time from 3 weeks to 5 days by using ContractFlow's version control and collaboration features.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <div class="bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center mr-2"> | |
| <i class="fas fa-building"></i> | |
| </div> | |
| <span>Legal Department, Fortune 500 Company</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tech Stack Section --> | |
| <section id="tech-stack" class="py-20 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Technology Stack</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div> | |
| <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">Built with modern technologies for performance and reliability.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm mb-8 animate-in"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8"> | |
| <div class="tech-icon"> | |
| <i class="fab fa-react text-2xl text-blue-500"></i> | |
| </div> | |
| <div class="tech-icon"> | |
| <i class="fab fa-python text-2xl text-blue-700"></i> | |
| </div> | |
| <div class="tech-icon"> | |
| <i class="fas fa-database text-2xl text-blue-400"></i> | |
| </div> | |
| <div class="tech-icon"> | |
| <i class="fab fa-node-js text-2xl text-green-500"></i> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-4">Frontend</h3> | |
| <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> | |
| React with TypeScript | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Quill Rich Text Editor | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| React Diff Viewer | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Tailwind CSS | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-4">Backend</h3> | |
| <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> | |
| FastAPI (Python) | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| PostgreSQL Database | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| SQLAlchemy ORM | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-blue-500 mr-2"></i> | |
| Docker Containers | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl border border-blue-100 animate-in" style="transition-delay: 0.1s;"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg mb-2">Key Technical Challenges</h3> | |
| <ul class="list-disc list-inside text-gray-600 space-y-1"> | |
| <li>Implementing efficient diff algorithms for large documents</li> | |
| <li>Maintaining document integrity through version transitions</li> | |
| <li>Designing a permission system that scales with organizational complexity</li> | |
| <li>Optimizing real-time collaboration features</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section id="benefits" class="py-20 bg-gray-50 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Measurable Benefits</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div> | |
| <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">How ContractFlow transforms contract workflows.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center animate-in"> | |
| <div class="text-blue-600 text-5xl font-bold mb-4">83%</div> | |
| <h3 class="font-semibold text-lg mb-2">Faster Negotiations</h3> | |
| <p class="text-gray-600">Reduced time spent tracking changes and comparing versions</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center animate-in" style="transition-delay: 0.1s;"> | |
| <div class="text-blue-600 text-5xl font-bold mb-4">90%</div> | |
| <h3 class="font-semibold text-lg mb-2">Fewer Errors</h3> | |
| <p class="text-gray-600">Eliminated version confusion and missed changes</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center animate-in" style="transition-delay: 0.2s;"> | |
| <div class="text-blue-600 text-5xl font-bold mb-4">4.7/5</div> | |
| <h3 class="font-semibold text-lg mb-2">User Satisfaction</h3> | |
| <p class="text-gray-600">Average rating from legal teams and contract managers</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo/Contact Section --> | |
| <section id="contact" class="py-20 scroll-mt-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-blue-600 p-8 text-white"> | |
| <h2 class="text-2xl font-bold mb-4 animate-in">Request a Demo</h2> | |
| <p class="mb-6 animate-in" style="transition-delay: 0.1s;">See how ContractFlow can streamline your contract management process.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center animate-in" style="transition-delay: 0.2s;"> | |
| <i class="fas fa-check-circle mr-3"></i> | |
| <span>15-minute overview</span> | |
| </div> | |
| <div class="flex items-center animate-in" style="transition-delay: 0.3s;"> | |
| <i class="fas fa-check-circle mr-3"></i> | |
| <span>Live Q&A</span> | |
| </div> | |
| <div class="flex items-center animate-in" style="transition-delay: 0.4s;"> | |
| <i class="fas fa-check-circle mr-3"></i> | |
| <span>Customized to your needs</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <form class="space-y-4"> | |
| <div class="animate-in" style="transition-delay: 0.2s;"> | |
| <label class="block text-gray-700 mb-1">Name</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="animate-in" style="transition-delay: 0.3s;"> | |
| <label class="block text-gray-700 mb-1">Email</label> | |
| <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="animate-in" style="transition-delay: 0.4s;"> | |
| <label class="block text-gray-700 mb-1">Company</label> | |
| <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="animate-in" style="transition-delay: 0.5s;"> | |
| <label class="block text-gray-700 mb-1">Message</label> | |
| <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 animate-in" style="transition-delay: 0.6s;"> | |
| Request Demo | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-800 text-gray-300 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-2"> | |
| <i class="fas fa-file-contract"></i> | |
| </div> | |
| <div class="text-xl font-bold text-white">ContractFlow</div> | |
| </div> | |
| <p class="text-gray-400">Modern version control for legal documents and contracts.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li> | |
| <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition">How It Works</a></li> | |
| <li><a href="#tech-stack" class="text-gray-400 hover:text-white transition">Technology</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <p class="text-gray-400">contact@contractflow.example</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2023 ContractFlow. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Intersection Observer for scroll animations | |
| const animateElements = document.querySelectorAll('.animate-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| animateElements.forEach(element => { | |
| observer.observe(element); | |
| }); | |
| // Mobile menu toggle (would need additional implementation) | |
| const mobileMenuButton = document.querySelector('button.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| // Implementation for mobile menu would go here | |
| console.log('Mobile menu clicked'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=manideepreddym/hey" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |