Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ContraGit - Version Control for Contracts</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <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> | |
| @font-face { | |
| font-family: 'LucideIcons'; | |
| src: url('https://cdn.jsdelivr.net/npm/lucide-static@latest/font/Lucide.ttf') format('truetype'); | |
| } | |
| .lucide { | |
| font-family: 'LucideIcons'; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| text-rendering: auto; | |
| line-height: 1; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .diff-add { color: #16a34a; background-color: #f0fdf4; } | |
| .diff-del { color: #dc2626; background-color: #fef2f2; text-decoration: line-through; } | |
| .diff-neutral { color: #6b7280; } | |
| .feature-card { | |
| transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| } | |
| [data-scroll-reveal] { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.6s ease-out, transform 0.6s ease-out; | |
| } | |
| [data-scroll-reveal].revealed { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .contract-timeline { | |
| position: relative; | |
| } | |
| .contract-timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 1.5rem; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: #e5e7eb; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-left: 3rem; | |
| margin-bottom: 2rem; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: 1.5rem; | |
| top: 0.25rem; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| transform: translateX(-50%); | |
| } | |
| .timeline-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .glow-card { | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); | |
| } | |
| .glow-card:hover { | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); | |
| } | |
| .contract-diff { | |
| font-family: 'Courier New', Courier, monospace; | |
| background: #f8fafc; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .diff-header { | |
| background: #e2e8f0; | |
| padding: 0.5rem 1rem; | |
| font-weight: 600; | |
| color: #334155; | |
| } | |
| .diff-line { | |
| padding: 0.25rem 1rem; | |
| display: flex; | |
| } | |
| .diff-line-number { | |
| color: #64748b; | |
| min-width: 2rem; | |
| text-align: right; | |
| margin-right: 1rem; | |
| user-select: none; | |
| } | |
| .diff-content { | |
| flex-grow: 1; | |
| } | |
| .diff-line-added { | |
| background: #f0fdf4; | |
| } | |
| .diff-line-removed { | |
| background: #fef2f2; | |
| } | |
| .diff-line-added .diff-content::before { | |
| content: '+'; | |
| color: #16a34a; | |
| margin-right: 0.5rem; | |
| } | |
| .diff-line-removed .diff-content::before { | |
| content: '-'; | |
| color: #dc2626; | |
| margin-right: 0.5rem; | |
| } | |
| .diff-line-neutral .diff-content::before { | |
| content: ' '; | |
| margin-right: 0.5rem; | |
| } | |
| </style> | |
| <script> | |
| const icons = { | |
| 'git-commit-vertical': '', 'git-branch-plus': '', 'git-pull-request-arrow': '', | |
| 'file-diff': '', 'history': '', 'users': '', | |
| 'file-check': '', 'shield-check': '', 'timer': '', | |
| 'check-circle': '', 'lightbulb': '', 'zap': '', | |
| 'arrow-right': '', 'mail': '', 'x-circle': '', | |
| 'menu': '', 'x': '', 'git-merge': '', | |
| 'git-pull-request': '', 'git-commit': '', 'git-branch': '' | |
| }; | |
| function getIcon(name) { | |
| return icons[name] || ''; | |
| } | |
| </script> | |
| </head> | |
| <body class="font-[Inter] bg-gray-50 text-gray-800 antialiased"> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <nav class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-blue-600 flex items-center"> | |
| <span class="lucide mr-2" aria-hidden="true" data-icon="git-merge"></span> | |
| ContraGit | |
| </a> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <a href="#features" class="text-gray-600 hover:text-blue-600 transition-colors">Features</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-blue-600 transition-colors">How It Works</a> | |
| <a href="#pricing" class="text-gray-600 hover:text-blue-600 transition-colors">Pricing</a> | |
| <a href="#cta" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition duration-200 shadow-sm">Get Started</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none"> | |
| <span class="lucide text-2xl menu-icon" aria-hidden="true" data-icon="menu"></span> | |
| </button> | |
| </nav> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg absolute top-full left-0 right-0 z-50"> | |
| <a href="#features" class="block px-6 py-3 text-gray-600 hover:bg-gray-100 transition-colors">Features</a> | |
| <a href="#how-it-works" class="block px-6 py-3 text-gray-600 hover:bg-gray-100 transition-colors">How It Works</a> | |
| <a href="#pricing" class="block px-6 py-3 text-gray-600 hover:bg-gray-100 transition-colors">Pricing</a> | |
| <a href="#cta" class="block px-6 py-3 bg-blue-600 text-white text-center hover:bg-blue-700 transition duration-200">Get Started</a> | |
| </div> | |
| </header> | |
| <section class="bg-gradient-to-br from-blue-50 via-white to-blue-50 py-20 md:py-32"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-4 leading-tight" data-scroll-reveal> | |
| Version Control for <span class="text-blue-600">Legal Documents</span> | |
| </h1> | |
| <h2 class="text-xl md:text-2xl font-semibold text-blue-700 mb-6" data-scroll-reveal> | |
| Track, compare, and collaborate on contracts with Git-like precision | |
| </h2> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto mb-8" data-scroll-reveal> | |
| ContraGit brings the power of version control to contract management, eliminating the chaos of document versions and email threads. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" data-scroll-reveal> | |
| <a href="#cta" class="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition duration-200 inline-block shadow-md hover:shadow-lg"> | |
| Start Free Trial | |
| </a> | |
| <a href="#how-it-works" class="bg-white text-blue-600 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-gray-100 transition duration-200 inline-block shadow-sm hover:shadow-md border border-gray-200"> | |
| See How It Works | |
| </a> | |
| </div> | |
| <div class="mt-16 max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200" data-scroll-reveal> | |
| <div class="bg-gray-800 text-gray-300 p-4 flex items-center"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm font-mono">contract-negotiation.md</div> | |
| </div> | |
| <div class="contract-diff"> | |
| <div class="diff-header">Version 3.2 vs 3.1</div> | |
| <div class="diff-line diff-line-neutral"> | |
| <div class="diff-line-number">12</div> | |
| <div class="diff-content">Payment terms shall be <span class="diff-del">Net 30</span><span class="diff-add">Net 45</span> days from the date of invoice.</div> | |
| </div> | |
| <div class="diff-line diff-line-neutral"> | |
| <div class="diff-line-number">13</div> | |
| <div class="diff-content">Late payments shall accrue interest at a rate of <span class="diff-del">1.5%</span><span class="diff-add">2%</span> per month.</div> | |
| </div> | |
| <div class="diff-line diff-line-added"> | |
| <div class="diff-line-number"></div> | |
| <div class="diff-content">The liability cap is set at $50,000 USD.</div> | |
| </div> | |
| <div class="diff-line diff-line-removed"> | |
| <div class="diff-line-number">27</div> | |
| <div class="diff-content">The governing law shall be that of the State of California.</div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 text-center text-sm text-gray-500"> | |
| Changes by <span class="font-medium text-gray-700">Jane Cooper</span> on May 15, 2023 at 2:47 PM | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div data-scroll-reveal> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-4">The Problem: Contract Chaos</h3> | |
| <p class="text-gray-600 mb-6">Managing contracts with traditional tools leads to version confusion, lost changes, and inefficient collaboration.</p> | |
| <div class="bg-red-50 border border-red-100 rounded-lg p-6 mb-6"> | |
| <div class="flex items-start"> | |
| <span class="lucide text-red-500 text-2xl mr-3 mt-1" aria-hidden="true" data-icon="x-circle"></span> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-1">Version Confusion</h4> | |
| <p class="text-gray-600">Contract_Final_v3_Revised_Updated.docx? Which one is actually the latest?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-red-50 border border-red-100 rounded-lg p-6 mb-6"> | |
| <div class="flex items-start"> | |
| <span class="lucide text-red-500 text-2xl mr-3 mt-1" aria-hidden="true" data-icon="x-circle"></span> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-1">Lost Changes</h4> | |
| <p class="text-gray-600">Important edits get buried in email threads or overwritten accidentally.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-red-50 border border-red-100 rounded-lg p-6"> | |
| <div class="flex items-start"> | |
| <span class="lucide text-red-500 text-2xl mr-3 mt-1" aria-hidden="true" data-icon="x-circle"></span> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-1">Inefficient Workflow</h4> | |
| <p class="text-gray-600">Manual comparisons and approvals slow down the negotiation process.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-br from-blue-50 to-green-50 p-8 rounded-xl shadow-md border border-gray-200" data-scroll-reveal> | |
| <h3 class="text-3xl font-bold text-gray-900 mb-4">The ContraGit Solution</h3> | |
| <p class="text-gray-700 mb-6">Bringing the clarity and efficiency of version control to contract management.</p> | |
| <div class="bg-white rounded-lg p-6 mb-6 shadow-sm"> | |
| <div class="flex items-start"> | |
| <span class="lucide text-green-500 text-2xl mr-3 mt-1" aria-hidden="true" data-icon="check-circle"></span> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-1">Complete Version History</h4> | |
| <p class="text-gray-600">Every change is tracked with timestamps and author attribution.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 mb-6 shadow-sm"> | |
| <div class="flex items-start"> | |
| <span class="lucide text-green-500 text-2xl mr-3 mt-1" aria-hidden="true" data-icon="check-circle"></span> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-1">Instant Comparisons</h4> | |
| <p class="text-gray-600">See exactly what changed between any two versions at a glance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <div class="flex items-start"> | |
| <span class="lucide text-green-500 text-2xl mr-3 mt-1" aria-hidden="true" data-icon="check-circle"></span> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-1">Collaborative Workflow</h4> | |
| <p class="text-gray-600">Multiple stakeholders can review and comment in one centralized place.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="features" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-blue-600 bg-blue-100 rounded-full mb-4" data-scroll-reveal>FEATURES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4" data-scroll-reveal>Powerful Tools for Contract Management</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-scroll-reveal>All the version control features you need, adapted specifically for legal documents.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card glow-card" data-scroll-reveal> | |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <span class="lucide text-2xl" aria-hidden="true" data-icon="git-commit"></span> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Version History</h4> | |
| <p class="text-gray-600 mb-4">Every edit is saved as a new version with timestamp and author information. Never lose track of changes again.</p> | |
| <div class="flex items-center text-blue-600 font-medium"> | |
| <span>Learn more</span> | |
| <span class="lucide ml-1" aria-hidden="true" data-icon="arrow-right"></span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card glow-card" data-scroll-reveal> | |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <span class="lucide text-2xl" aria-hidden="true" data-icon="file-diff"></span> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Side-by-Side Diffs</h4> | |
| <p class="text-gray-600 mb-4">Compare any two versions with highlighted changes. See additions in <span class="diff-add px-1 rounded">green</span> and deletions in <span class="diff-del px-1 rounded">red</span>.</p> | |
| <div class="flex items-center text-blue-600 font-medium"> | |
| <span>Learn more</span> | |
| <span class="lucide ml-1" aria-hidden="true" data-icon="arrow-right"></span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card glow-card" data-scroll-reveal> | |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <span class="lucide text-2xl" aria-hidden="true" data-icon="git-branch"></span> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Alternative Clauses</h4> | |
| <p class="text-gray-600 mb-4">Create parallel versions of specific clauses to explore different negotiation options before finalizing.</p> | |
| <div class="flex items-center text-blue-600 font-medium"> | |
| <span>Learn more</span> | |
| <span class="lucide ml-1" aria-hidden="true" data-icon="arrow-right"></span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card glow-card" data-scroll-reveal> | |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <span class="lucide text-2xl" aria-hidden="true" data-icon="git-pull-request"></span> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Change Requests</h4> | |
| <p class="text-gray-600 mb-4">Propose edits that can be reviewed and approved before being merged into the main document.</p> | |
| <div class="flex items-center text-blue-600 font-medium"> | |
| <span>Learn more</span> | |
| <span class="lucide ml-1" aria-hidden="true" data-icon="arrow-right"></span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card glow-card" data-scroll-reveal> | |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <span class="lucide text-2xl" aria-hidden="true" data-icon="users"></span> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Collaborative Review</h4> | |
| <p class="text-gray-600 mb-4">Add comments and discuss changes directly in the document with your team or counterparties.</p> | |
| <div class="flex items-center text-blue-600 font-medium"> | |
| <span>Learn more</span> | |
| <span class="lucide ml-1" aria-hidden="true" data-icon="arrow-right"></span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-100 feature-card glow-card" data-scroll-reveal> | |
| <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <span class="lucide text-2xl" aria-hidden="true" data-icon="shield-check"></span> | |
| </div> | |
| <h4 class="text-xl font-semibold mb-3">Audit Trail</h4> | |
| <p class="text-gray-600 mb-4">Maintain a complete record of all changes for compliance and dispute resolution purposes.</p> | |
| <div class="flex items-center text-blue-600 font-medium"> | |
| <span>Learn more</span> | |
| <span class="lucide ml-1" aria-hidden="true" data-icon="arrow-right"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="how-it-works" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-blue-600 bg-blue-100 rounded-full mb-4" data-scroll-reveal>WORKFLOW</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4" data-scroll-reveal>Streamlined Contract Negotiation</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-scroll-reveal>How ContraGit transforms your contract management process.</p> | |
| </div> | |
| <div class="contract-timeline max-w-3xl mx-auto"> | |
| <div class="timeline-item" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">1. Upload Initial Draft</h3> | |
| <p class="text-gray-600">Start with your standard contract template or an existing document. ContraGit automatically creates your first version.</p> | |
| </div> | |
| <div class="timeline-item" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">2. Share with Counterparties</h3> | |
| <p class="text-gray-600">Invite internal stakeholders or external parties to review and suggest changes with controlled access levels.</p> | |
| </div> | |
| <div class="timeline-item" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">3. Track All Changes</h3> | |
| <p class="text-gray-600">Every edit is recorded as a new version with clear attribution. No more guessing who made what change.</p> | |
| </div> | |
| <div class="timeline-item" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">4. Compare Versions</h3> | |
| <p class="text-gray-600">Instantly see differences between any two versions with our intuitive diff viewer that highlights changes.</p> | |
| </div> | |
| <div class="timeline-item" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">5. Approve & Finalize</h3> | |
| <p class="text-gray-600">Once all parties agree, mark the final version and export for signatures with our e-signature integration.</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center" data-scroll-reveal> | |
| <a href="#cta" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition duration-200 shadow-md"> | |
| Try ContraGit Free for 14 Days | |
| <span class="lucide ml-2" aria-hidden="true" data-icon="arrow-right"></span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="pricing" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-blue-600 bg-blue-100 rounded-full mb-4" data-scroll-reveal>PRICING</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4" data-scroll-reveal>Simple, Transparent Pricing</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto" data-scroll-reveal>Choose the plan that fits your needs. No hidden fees.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">Starter</h3> | |
| <p class="text-gray-600 mb-6">For individuals and small teams</p> | |
| <div class="text-4xl font-bold mb-6">$19<span class="text-lg text-gray-500 font-normal">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> 5 active contracts</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Unlimited versions</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Basic diff viewer</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> 2 collaborators</li> | |
| </ul> | |
| <a href="#cta" class="block w-full text-center py-3 border border-blue-600 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition duration-200">Get Started</a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border-2 border-blue-500 relative" data-scroll-reveal> | |
| <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">POPULAR</div> | |
| <h3 class="text-xl font-semibold mb-2">Professional</h3> | |
| <p class="text-gray-600 mb-6">For growing legal teams</p> | |
| <div class="text-4xl font-bold mb-6">$49<span class="text-lg text-gray-500 font-normal">/month</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> 20 active contracts</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Advanced diff tools</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Branching & merging</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> 10 collaborators</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Audit logs</li> | |
| </ul> | |
| <a href="#cta" class="block w-full text-center py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition duration-200">Get Started</a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200" data-scroll-reveal> | |
| <h3 class="text-xl font-semibold mb-2">Enterprise</h3> | |
| <p class="text-gray-600 mb-6">For large organizations</p> | |
| <div class="text-4xl font-bold mb-6">Custom</div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Unlimited contracts</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> All Pro features</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> SSO & SCIM</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Dedicated support</li> | |
| <li class="flex items-start"><span class="lucide text-green-500 mr-2 mt-1" aria-hidden="true" data-icon="check-circle"></span> Custom integrations</li> | |
| </ul> | |
| <a href="#cta" class="block w-full text-center py-3 border border-blue-600 text-blue-600 rounded-lg font-medium hover:bg-blue-50 transition duration-200">Contact Sales</a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center text-gray-600" data-scroll-reveal> | |
| <p>All plans include a 14-day free trial. No credit card required.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="cta" class="py-20 bg-gradient-to-r from-blue-600 to-blue-800 text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6" data-scroll-reveal>Ready to Transform Your Contract Workflow?</h2> | |
| <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-8" data-scroll-reveal>Join thousands of legal professionals who have streamlined their contract management with ContraGit.</p> | |
| <div class="max-w-md mx-auto bg-white rounded-lg shadow-xl overflow-hidden" data-scroll-reveal> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Start Your Free Trial</h3> | |
| <form class="space-y-4"> | |
| <input type="text" placeholder="Full Name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <input type="email" placeholder="Email Address" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition duration-200"> | |
| Get Started Now | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-500 mt-4">By signing up, you agree to our <a href="#" class="text-blue-600 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-600 hover:underline">Privacy Policy</a>.</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid md:grid-cols-3 gap-8 max-w-5xl mx-auto" data-scroll-reveal> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm"> | |
| <span class="lucide text-3xl mb-4 inline-block" aria-hidden="true" data-icon="check-circle"></span> | |
| <h4 class="font-semibold text-lg mb-2">No Credit Card Required</h4> | |
| <p class="text-blue-100">Start your free trial without any payment information.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm"> | |
| <span class="lucide text-3xl mb-4 inline-block" aria-hidden="true" data-icon="timer"></span> | |
| <h4 class="font-semibold text-lg mb-2">14-Day Free Trial</h4> | |
| <p class="text-blue-100">Full access to all features for two weeks.</p> | |
| </div> | |
| <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm"> | |
| <span class="lucide text-3xl mb-4 inline-block" aria-hidden="true" data-icon="shield-check"></span> | |
| <h4 class="font-semibold text-lg mb-2">Cancel Anytime</h4> | |
| <p class="text-blue-100">No long-term contracts or cancellation fees.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <a href="#" class="text-2xl font-bold text-white flex items-center mb-4"> | |
| <span class="lucide mr-2" aria-hidden="true" data-icon="git-merge"></span> | |
| ContraGit | |
| </a> | |
| <p class="text-sm">Version control for legal documents. Streamline your contract workflow with Git-like precision.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#how-it-works" class="hover:text-white transition-colors">How It Works</a></li> | |
| <li><a href="#pricing" class="hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Documentation</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">API Reference</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">About Us</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Legal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm mb-4 md:mb-0">© 2023 ContraGit. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-white transition-colors"> | |
| <span class="lucide" aria-hidden="true" data-icon="mail"></span> | |
| </a> | |
| <a href="#" class="hover:text-white transition-colors"> | |
| <span class="lucide" aria-hidden="true" data-icon="git-branch"></span> | |
| </a> | |
| <a href="#" class="hover:text-white transition-colors"> | |
| <span class="lucide" aria-hidden="true" data-icon="git-pull-request"></span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Lucide Icon Replacement | |
| const iconElements = document.querySelectorAll('.lucide[data-icon]'); | |
| iconElements.forEach(el => { | |
| const iconName = el.getAttribute('data-icon'); | |
| el.textContent = getIcon(iconName); | |
| }); | |
| // Mobile Menu Toggle | |
| const menuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| const menuIcon = menuButton.querySelector('.menu-icon'); | |
| menuButton.addEventListener('click', () => { | |
| const isExpanded = menuButton.getAttribute('aria-expanded') === 'true'; | |
| menuButton.setAttribute('aria-expanded', !isExpanded); | |
| mobileMenu.classList.toggle('hidden'); | |
| if (mobileMenu.classList.contains('hidden')) { | |
| menuIcon.textContent = getIcon('menu'); | |
| } else { | |
| menuIcon.textContent = getIcon('x'); | |
| } | |
| }); | |
| // Scroll Reveal Animation | |
| const revealElements = document.querySelectorAll('[data-scroll-reveal]'); | |
| const revealObserver = new IntersectionObserver((entries, observer) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const delay = parseInt(entry.target.getAttribute('data-delay') || '0'); | |
| setTimeout(() => { | |
| entry.target.classList.add('revealed'); | |
| }, delay); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| revealElements.forEach(el => { | |
| revealObserver.observe(el); | |
| }); | |
| }); | |
| </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/contragit" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |