Spaces:

manideepreddym
/

contragit

Running

App Files Files Community

manideepreddym commited on Apr 6, 2025

Commit

020975f

verified ·

1 Parent(s): b881731

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +627 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Contragit
-emoji: 🌍
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: contragit
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,627 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>