Hugging Face's logo

Spaces:
manideepreddym
/
hey
Running

App Files Community
manideepreddym commited on
Commit
494a016
·
verified ·
1 Parent(s): baa889c

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +709 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hey
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hey
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,709 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Portfolio: Contract Versioning System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+ <style>
13
+ /* Apply Inter font */
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ /* Gradient background for hero section */
20
+ .hero-gradient {
21
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
22
+ }
23
+
24
+ /* Animation classes */
25
+ .animate-in {
26
+ opacity: 0;
27
+ transform: translateY(20px);
28
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
29
+ }
30
+
31
+ .animate-in.visible {
32
+ opacity: 1;
33
+ transform: translateY(0);
34
+ }
35
+
36
+ /* Feature cards */
37
+ .feature-card {
38
+ background-color: white;
39
+ border-radius: 0.75rem;
40
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
41
+ transition: all 0.3s ease;
42
+ position: relative;
43
+ overflow: hidden;
44
+ }
45
+
46
+ .feature-card:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
49
+ }
50
+
51
+ .feature-card::before {
52
+ content: '';
53
+ position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 4px;
57
+ height: 0;
58
+ background: #3b82f6;
59
+ transition: height 0.3s ease;
60
+ }
61
+
62
+ .feature-card:hover::before {
63
+ height: 100%;
64
+ }
65
+
66
+ /* Step indicators */
67
+ .step-indicator {
68
+ position: relative;
69
+ }
70
+
71
+ .step-indicator:not(:last-child)::after {
72
+ content: '';
73
+ position: absolute;
74
+ top: 50%;
75
+ right: -2rem;
76
+ width: 1.5rem;
77
+ height: 2px;
78
+ background: #d1d5db;
79
+ transform: translateY(-50%);
80
+ }
81
+
82
+ /* Diff visualization */
83
+ .diff-container {
84
+ background: #f8fafc;
85
+ border-radius: 0.5rem;
86
+ overflow: hidden;
87
+ }
88
+
89
+ .diff-line {
90
+ padding: 0.25rem 1rem;
91
+ font-family: 'Courier New', monospace;
92
+ font-size: 0.875rem;
93
+ }
94
+
95
+ .diff-added {
96
+ background-color: #dcfce7;
97
+ border-left: 3px solid #22c55e;
98
+ }
99
+
100
+ .diff-removed {
101
+ background-color: #fee2e2;
102
+ border-left: 3px solid #ef4444;
103
+ }
104
+
105
+ .diff-unchanged {
106
+ background-color: white;
107
+ }
108
+
109
+ /* Floating action button */
110
+ .fab {
111
+ position: fixed;
112
+ bottom: 2rem;
113
+ right: 2rem;
114
+ width: 3.5rem;
115
+ height: 3.5rem;
116
+ border-radius: 50%;
117
+ background: #3b82f6;
118
+ color: white;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
123
+ transition: all 0.3s ease;
124
+ z-index: 50;
125
+ }
126
+
127
+ .fab:hover {
128
+ transform: translateY(-3px) scale(1.05);
129
+ background: #2563eb;
130
+ }
131
+
132
+ /* Tech stack icons */
133
+ .tech-icon {
134
+ width: 3rem;
135
+ height: 3rem;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: center;
139
+ border-radius: 0.5rem;
140
+ background: white;
141
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
142
+ }
143
+
144
+ /* Responsive adjustments */
145
+ @media (max-width: 768px) {
146
+ .step-indicator:not(:last-child)::after {
147
+ display: none;
148
+ }
149
+ }
150
+ </style>
151
+ </head>
152
+ <body class="bg-gray-50 text-gray-800 leading-relaxed">
153
+
154
+ <!-- Floating action button -->
155
+ <a href="#contact" class="fab animate-in" style="transition-delay: 0.4s;">
156
+ <i class="fas fa-paper-plane text-xl"></i>
157
+ </a>
158
+
159
+ <header class="bg-white shadow-sm sticky top-0 z-50">
160
+ <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
161
+ <div class="flex items-center space-x-2">
162
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg">
163
+ <i class="fas fa-file-contract text-xl"></i>
164
+ </div>
165
+ <div class="text-xl font-bold text-gray-900">ContractFlow</div>
166
+ </div>
167
+ <div class="hidden md:flex space-x-6">
168
+ <a href="#features" class="text-gray-600 hover:text-blue-600 transition">Features</a>
169
+ <a href="#how-it-works" class="text-gray-600 hover:text-blue-600 transition">How It Works</a>
170
+ <a href="#tech-stack" class="text-gray-600 hover:text-blue-600 transition">Technology</a>
171
+ <a href="#contact" class="text-gray-600 hover:text-blue-600 transition">Contact</a>
172
+ </div>
173
+ <button class="md:hidden text-gray-600">
174
+ <i class="fas fa-bars text-xl"></i>
175
+ </button>
176
+ </nav>
177
+ </header>
178
+
179
+ <main>
180
+ <!-- Hero Section -->
181
+ <section id="hero" class="hero-gradient py-20 md:py-28">
182
+ <div class="container mx-auto px-6">
183
+ <div class="max-w-4xl mx-auto text-center">
184
+ <div class="inline-block px-4 py-2 bg-white rounded-full shadow-sm mb-6 animate-in">
185
+ <span class="text-blue-600 font-medium">Version 2.0 Released</span>
186
+ </div>
187
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 animate-in">Revolutionizing Contract Management</h1>
188
+ <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>
189
+
190
+ <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16 animate-in" style="transition-delay: 0.2s;">
191
+ <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">
192
+ <i class="fas fa-rocket mr-2"></i> Explore Features
193
+ </a>
194
+ <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">
195
+ <i class="fas fa-play-circle mr-2 text-blue-600"></i> Watch Demo
196
+ </a>
197
+ </div>
198
+
199
+ <div class="bg-white p-6 rounded-xl shadow-md animate-in" style="transition-delay: 0.3s;">
200
+ <div class="diff-container">
201
+ <div class="diff-line diff-removed">- This Agreement is made and entered into as of [Date] by and between</div>
202
+ <div class="diff-line diff-added">+ This Agreement is made and entered into as of January 15, 2023 by and between</div>
203
+ <div class="diff-line diff-unchanged"> Party A ("Client") and Party B ("Service Provider").</div>
204
+ <div class="diff-line diff-removed">- The term of this Agreement shall be one (1) year.</div>
205
+ <div class="diff-line diff-added">+ The initial term of this Agreement shall be two (2) years.</div>
206
+ <div class="diff-line diff-added">+ Either party may terminate this Agreement with thirty (30) days written notice.</div>
207
+ </div>
208
+ <p class="text-sm text-gray-500 mt-3">Example of visual diff comparison between contract versions</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Problem Section -->
215
+ <section id="problem" class="py-20 scroll-mt-20">
216
+ <div class="container mx-auto px-6">
217
+ <div class="max-w-4xl mx-auto">
218
+ <div class="text-center mb-12">
219
+ <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">The Contract Negotiation Nightmare</h2>
220
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div>
221
+ <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>
222
+ </div>
223
+
224
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
225
+ <div class="bg-white p-6 rounded-xl shadow-sm animate-in">
226
+ <div class="text-blue-600 mb-4">
227
+ <i class="fas fa-envelope text-3xl"></i>
228
+ </div>
229
+ <h3 class="font-semibold text-lg mb-2">Email Chaos</h3>
230
+ <p class="text-gray-600">Version confusion with attachments named "Contract_Final_v3_Revised_FINAL.docx"</p>
231
+ </div>
232
+
233
+ <div class="bg-white p-6 rounded-xl shadow-sm animate-in" style="transition-delay: 0.1s;">
234
+ <div class="text-blue-600 mb-4">
235
+ <i class="fas fa-search text-3xl"></i>
236
+ </div>
237
+ <h3 class="font-semibold text-lg mb-2">Manual Comparisons</h3>
238
+ <p class="text-gray-600">Hours wasted comparing documents side-by-side to spot changes</p>
239
+ </div>
240
+
241
+ <div class="bg-white p-6 rounded-xl shadow-sm animate-in" style="transition-delay: 0.2s;">
242
+ <div class="text-blue-600 mb-4">
243
+ <i class="fas fa-users-slash text-3xl"></i>
244
+ </div>
245
+ <h3 class="font-semibold text-lg mb-2">Collaboration Issues</h3>
246
+ <p class="text-gray-600">No clear record of who made which changes and when</p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- Solution Section -->
254
+ <section id="solution" class="py-20 bg-gray-50 scroll-mt-20">
255
+ <div class="container mx-auto px-6">
256
+ <div class="max-w-4xl mx-auto">
257
+ <div class="text-center mb-12">
258
+ <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Modern Solution for Contract Management</h2>
259
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div>
260
+ <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">Applying software engineering best practices to legal document workflows.</p>
261
+ </div>
262
+
263
+ <div class="flex flex-col md:flex-row items-center gap-8">
264
+ <div class="md:w-1/2 animate-in">
265
+ <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"
266
+ alt="Contract management"
267
+ class="rounded-xl shadow-lg w-full h-auto">
268
+ </div>
269
+
270
+ <div class="md:w-1/2 space-y-6 animate-in" style="transition-delay: 0.1s;">
271
+ <div class="flex items-start">
272
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4">
273
+ <i class="fas fa-history text-lg"></i>
274
+ </div>
275
+ <div>
276
+ <h3 class="font-semibold text-lg mb-1">Complete Version History</h3>
277
+ <p class="text-gray-600">Every edit is tracked with timestamps and attribution. Roll back to any previous version with one click.</p>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="flex items-start">
282
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4">
283
+ <i class="fas fa-code-compare text-lg"></i>
284
+ </div>
285
+ <div>
286
+ <h3 class="font-semibold text-lg mb-1">Visual Diff Comparison</h3>
287
+ <p class="text-gray-600">Instantly see what changed between any two versions with color-coded highlighting.</p>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="flex items-start">
292
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4">
293
+ <i class="fas fa-users text-lg"></i>
294
+ </div>
295
+ <div>
296
+ <h3 class="font-semibold text-lg mb-1">Collaborative Editing</h3>
297
+ <p class="text-gray-600">Multiple stakeholders can work on the same document with tracked changes and comments.</p>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </section>
305
+
306
+ <!-- Features Section -->
307
+ <section id="features" class="py-20 scroll-mt-20">
308
+ <div class="container mx-auto px-6">
309
+ <div class="max-w-4xl mx-auto">
310
+ <div class="text-center mb-12">
311
+ <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Powerful Features</h2>
312
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div>
313
+ <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>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
317
+ <!-- Feature 1 -->
318
+ <div class="feature-card p-6 animate-in">
319
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4">
320
+ <i class="fas fa-code-branch text-xl"></i>
321
+ </div>
322
+ <h3 class="text-xl font-semibold mb-3 text-gray-900">Branching & Merging</h3>
323
+ <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>
324
+ </div>
325
+
326
+ <!-- Feature 2 -->
327
+ <div class="feature-card p-6 animate-in" style="transition-delay: 0.1s;">
328
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4">
329
+ <i class="fas fa-comment-dots text-xl"></i>
330
+ </div>
331
+ <h3 class="text-xl font-semibold mb-3 text-gray-900">Inline Comments</h3>
332
+ <p class="text-gray-600">Add context to changes with threaded discussions tied to specific document sections. Resolve comments when issues are addressed.</p>
333
+ </div>
334
+
335
+ <!-- Feature 3 -->
336
+ <div class="feature-card p-6 animate-in" style="transition-delay: 0.2s;">
337
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4">
338
+ <i class="fas fa-user-shield text-xl"></i>
339
+ </div>
340
+ <h3 class="text-xl font-semibold mb-3 text-gray-900">Role-Based Access</h3>
341
+ <p class="text-gray-600">Control who can view, edit, comment, or approve changes with granular permission settings for each document.</p>
342
+ </div>
343
+
344
+ <!-- Feature 4 -->
345
+ <div class="feature-card p-6 animate-in" style="transition-delay: 0.3s;">
346
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4">
347
+ <i class="fas fa-bell text-xl"></i>
348
+ </div>
349
+ <h3 class="text-xl font-semibold mb-3 text-gray-900">Change Notifications</h3>
350
+ <p class="text-gray-600">Get real-time alerts when documents you're watching are modified, with summaries of what changed.</p>
351
+ </div>
352
+
353
+ <!-- Feature 5 -->
354
+ <div class="feature-card p-6 animate-in" style="transition-delay: 0.4s;">
355
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4">
356
+ <i class="fas fa-file-export text-xl"></i>
357
+ </div>
358
+ <h3 class="text-xl font-semibold mb-3 text-gray-900">Export Versions</h3>
359
+ <p class="text-gray-600">Download any version as a clean Word or PDF document with optional change tracking visible.</p>
360
+ </div>
361
+
362
+ <!-- Feature 6 -->
363
+ <div class="feature-card p-6 animate-in" style="transition-delay: 0.5s;">
364
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg inline-block mb-4">
365
+ <i class="fas fa-robot text-xl"></i>
366
+ </div>
367
+ <h3 class="text-xl font-semibold mb-3 text-gray-900">AI Suggestions</h3>
368
+ <p class="text-gray-600">Get smart recommendations for common clauses based on document context and your past agreements.</p>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </section>
374
+
375
+ <!-- How It Works Section -->
376
+ <section id="how-it-works" class="py-20 bg-gray-50 scroll-mt-20">
377
+ <div class="container mx-auto px-6">
378
+ <div class="max-w-4xl mx-auto">
379
+ <div class="text-center mb-12">
380
+ <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Simple Workflow</h2>
381
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div>
382
+ <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>
383
+ </div>
384
+
385
+ <div class="grid grid-cols-1 md:grid-cols-5 gap-8 text-center mb-12">
386
+ <!-- Step 1 -->
387
+ <div class="flex flex-col items-center step-indicator animate-in">
388
+ <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>
389
+ <h3 class="font-semibold mb-1">Upload</h3>
390
+ <p class="text-sm text-gray-600">Start with your initial contract template or draft</p>
391
+ </div>
392
+
393
+ <!-- Step 2 -->
394
+ <div class="flex flex-col items-center step-indicator animate-in" style="transition-delay: 0.1s;">
395
+ <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>
396
+ <h3 class="font-semibold mb-1">Edit</h3>
397
+ <p class="text-sm text-gray-600">Make changes with automatic version tracking</p>
398
+ </div>
399
+
400
+ <!-- Step 3 -->
401
+ <div class="flex flex-col items-center step-indicator animate-in" style="transition-delay: 0.2s;">
402
+ <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>
403
+ <h3 class="font-semibold mb-1">Review</h3>
404
+ <p class="text-sm text-gray-600">Compare versions and discuss changes</p>
405
+ </div>
406
+
407
+ <!-- Step 4 -->
408
+ <div class="flex flex-col items-center step-indicator animate-in" style="transition-delay: 0.3s;">
409
+ <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>
410
+ <h3 class="font-semibold mb-1">Approve</h3>
411
+ <p class="text-sm text-gray-600">Mark the final version as approved</p>
412
+ </div>
413
+
414
+ <!-- Step 5 -->
415
+ <div class="flex flex-col items-center animate-in" style="transition-delay: 0.4s;">
416
+ <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>
417
+ <h3 class="font-semibold mb-1">Sign</h3>
418
+ <p class="text-sm text-gray-600">Send for e-signature or download for wet ink</p>
419
+ </div>
420
+ </div>
421
+
422
+ <div class="bg-white p-6 rounded-xl shadow-sm animate-in" style="transition-delay: 0.5s;">
423
+ <div class="flex items-center mb-4">
424
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-4">
425
+ <i class="fas fa-user-tie"></i>
426
+ </div>
427
+ <h3 class="font-semibold text-lg">Real-World Example</h3>
428
+ </div>
429
+ <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>
430
+ <div class="flex items-center text-sm text-gray-500">
431
+ <div class="bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center mr-2">
432
+ <i class="fas fa-building"></i>
433
+ </div>
434
+ <span>Legal Department, Fortune 500 Company</span>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Tech Stack Section -->
442
+ <section id="tech-stack" class="py-20 scroll-mt-20">
443
+ <div class="container mx-auto px-6">
444
+ <div class="max-w-4xl mx-auto">
445
+ <div class="text-center mb-12">
446
+ <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Technology Stack</h2>
447
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div>
448
+ <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">Built with modern technologies for performance and reliability.</p>
449
+ </div>
450
+
451
+ <div class="bg-white p-8 rounded-xl shadow-sm mb-8 animate-in">
452
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
453
+ <div class="tech-icon">
454
+ <i class="fab fa-react text-2xl text-blue-500"></i>
455
+ </div>
456
+ <div class="tech-icon">
457
+ <i class="fab fa-python text-2xl text-blue-700"></i>
458
+ </div>
459
+ <div class="tech-icon">
460
+ <i class="fas fa-database text-2xl text-blue-400"></i>
461
+ </div>
462
+ <div class="tech-icon">
463
+ <i class="fab fa-node-js text-2xl text-green-500"></i>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
468
+ <div>
469
+ <h3 class="font-semibold text-lg mb-4">Frontend</h3>
470
+ <ul class="space-y-2 text-gray-600">
471
+ <li class="flex items-center">
472
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
473
+ React with TypeScript
474
+ </li>
475
+ <li class="flex items-center">
476
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
477
+ Quill Rich Text Editor
478
+ </li>
479
+ <li class="flex items-center">
480
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
481
+ React Diff Viewer
482
+ </li>
483
+ <li class="flex items-center">
484
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
485
+ Tailwind CSS
486
+ </li>
487
+ </ul>
488
+ </div>
489
+
490
+ <div>
491
+ <h3 class="font-semibold text-lg mb-4">Backend</h3>
492
+ <ul class="space-y-2 text-gray-600">
493
+ <li class="flex items-center">
494
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
495
+ FastAPI (Python)
496
+ </li>
497
+ <li class="flex items-center">
498
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
499
+ PostgreSQL Database
500
+ </li>
501
+ <li class="flex items-center">
502
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
503
+ SQLAlchemy ORM
504
+ </li>
505
+ <li class="flex items-center">
506
+ <i class="fas fa-check-circle text-blue-500 mr-2"></i>
507
+ Docker Containers
508
+ </li>
509
+ </ul>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div class="bg-blue-50 p-6 rounded-xl border border-blue-100 animate-in" style="transition-delay: 0.1s;">
515
+ <div class="flex items-start">
516
+ <div class="bg-blue-100 text-blue-600 p-3 rounded-lg mr-4">
517
+ <i class="fas fa-lightbulb"></i>
518
+ </div>
519
+ <div>
520
+ <h3 class="font-semibold text-lg mb-2">Key Technical Challenges</h3>
521
+ <ul class="list-disc list-inside text-gray-600 space-y-1">
522
+ <li>Implementing efficient diff algorithms for large documents</li>
523
+ <li>Maintaining document integrity through version transitions</li>
524
+ <li>Designing a permission system that scales with organizational complexity</li>
525
+ <li>Optimizing real-time collaboration features</li>
526
+ </ul>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </section>
533
+
534
+ <!-- Benefits Section -->
535
+ <section id="benefits" class="py-20 bg-gray-50 scroll-mt-20">
536
+ <div class="container mx-auto px-6">
537
+ <div class="max-w-4xl mx-auto">
538
+ <div class="text-center mb-12">
539
+ <h2 class="text-3xl font-semibold text-gray-900 mb-4 animate-in">Measurable Benefits</h2>
540
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6 animate-in" style="transition-delay: 0.1s;"></div>
541
+ <p class="text-gray-600 text-lg animate-in" style="transition-delay: 0.2s;">How ContractFlow transforms contract workflows.</p>
542
+ </div>
543
+
544
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
545
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center animate-in">
546
+ <div class="text-blue-600 text-5xl font-bold mb-4">83%</div>
547
+ <h3 class="font-semibold text-lg mb-2">Faster Negotiations</h3>
548
+ <p class="text-gray-600">Reduced time spent tracking changes and comparing versions</p>
549
+ </div>
550
+
551
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center animate-in" style="transition-delay: 0.1s;">
552
+ <div class="text-blue-600 text-5xl font-bold mb-4">90%</div>
553
+ <h3 class="font-semibold text-lg mb-2">Fewer Errors</h3>
554
+ <p class="text-gray-600">Eliminated version confusion and missed changes</p>
555
+ </div>
556
+
557
+ <div class="bg-white p-6 rounded-xl shadow-sm text-center animate-in" style="transition-delay: 0.2s;">
558
+ <div class="text-blue-600 text-5xl font-bold mb-4">4.7/5</div>
559
+ <h3 class="font-semibold text-lg mb-2">User Satisfaction</h3>
560
+ <p class="text-gray-600">Average rating from legal teams and contract managers</p>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </section>
566
+
567
+ <!-- Demo/Contact Section -->
568
+ <section id="contact" class="py-20 scroll-mt-20">
569
+ <div class="container mx-auto px-6">
570
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
571
+ <div class="md:flex">
572
+ <div class="md:w-1/2 bg-blue-600 p-8 text-white">
573
+ <h2 class="text-2xl font-bold mb-4 animate-in">Request a Demo</h2>
574
+ <p class="mb-6 animate-in" style="transition-delay: 0.1s;">See how ContractFlow can streamline your contract management process.</p>
575
+
576
+ <div class="space-y-4">
577
+ <div class="flex items-center animate-in" style="transition-delay: 0.2s;">
578
+ <i class="fas fa-check-circle mr-3"></i>
579
+ <span>15-minute overview</span>
580
+ </div>
581
+ <div class="flex items-center animate-in" style="transition-delay: 0.3s;">
582
+ <i class="fas fa-check-circle mr-3"></i>
583
+ <span>Live Q&A</span>
584
+ </div>
585
+ <div class="flex items-center animate-in" style="transition-delay: 0.4s;">
586
+ <i class="fas fa-check-circle mr-3"></i>
587
+ <span>Customized to your needs</span>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="md:w-1/2 p-8">
593
+ <form class="space-y-4">
594
+ <div class="animate-in" style="transition-delay: 0.2s;">
595
+ <label class="block text-gray-700 mb-1">Name</label>
596
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
597
+ </div>
598
+
599
+ <div class="animate-in" style="transition-delay: 0.3s;">
600
+ <label class="block text-gray-700 mb-1">Email</label>
601
+ <input type="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
602
+ </div>
603
+
604
+ <div class="animate-in" style="transition-delay: 0.4s;">
605
+ <label class="block text-gray-700 mb-1">Company</label>
606
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
607
+ </div>
608
+
609
+ <div class="animate-in" style="transition-delay: 0.5s;">
610
+ <label class="block text-gray-700 mb-1">Message</label>
611
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3"></textarea>
612
+ </div>
613
+
614
+ <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;">
615
+ Request Demo
616
+ </button>
617
+ </form>
618
+ </div>
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </section>
623
+ </main>
624
+
625
+ <footer class="bg-gray-800 text-gray-300 py-12">
626
+ <div class="container mx-auto px-6">
627
+ <div class="max-w-6xl mx-auto">
628
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
629
+ <div>
630
+ <div class="flex items-center mb-4">
631
+ <div class="bg-blue-100 text-blue-600 p-2 rounded-lg mr-2">
632
+ <i class="fas fa-file-contract"></i>
633
+ </div>
634
+ <div class="text-xl font-bold text-white">ContractFlow</div>
635
+ </div>
636
+ <p class="text-gray-400">Modern version control for legal documents and contracts.</p>
637
+ </div>
638
+
639
+ <div>
640
+ <h3 class="text-white font-semibold mb-4">Product</h3>
641
+ <ul class="space-y-2">
642
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
643
+ <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition">How It Works</a></li>
644
+ <li><a href="#tech-stack" class="text-gray-400 hover:text-white transition">Technology</a></li>
645
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Pricing</a></li>
646
+ </ul>
647
+ </div>
648
+
649
+ <div>
650
+ <h3 class="text-white font-semibold mb-4">Resources</h3>
651
+ <ul class="space-y-2">
652
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
653
+ <li><a href="#" class="text-gray-400 hover:text-white transition">API Reference</a></li>
654
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
655
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Support</a></li>
656
+ </ul>
657
+ </div>
658
+
659
+ <div>
660
+ <h3 class="text-white font-semibold mb-4">Connect</h3>
661
+ <div class="flex space-x-4 mb-4">
662
+ <a href="#" class="text-gray-400 hover:text-white transition">
663
+ <i class="fab fa-twitter"></i>
664
+ </a>
665
+ <a href="#" class="text-gray-400 hover:text-white transition">
666
+ <i class="fab fa-linkedin"></i>
667
+ </a>
668
+ <a href="#" class="text-gray-400 hover:text-white transition">
669
+ <i class="fab fa-github"></i>
670
+ </a>
671
+ </div>
672
+ <p class="text-gray-400">contact@contractflow.example</p>
673
+ </div>
674
+ </div>
675
+
676
+ <div class="border-t border-gray-700 pt-8 text-center text-gray-400 text-sm">
677
+ <p>&copy; 2023 ContractFlow. All rights reserved.</p>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </footer>
682
+
683
+ <script>
684
+ // Intersection Observer for scroll animations
685
+ const animateElements = document.querySelectorAll('.animate-in');
686
+
687
+ const observer = new IntersectionObserver((entries) => {
688
+ entries.forEach(entry => {
689
+ if (entry.isIntersecting) {
690
+ entry.target.classList.add('visible');
691
+ }
692
+ });
693
+ }, {
694
+ threshold: 0.1
695
+ });
696
+
697
+ animateElements.forEach(element => {
698
+ observer.observe(element);
699
+ });
700
+
701
+ // Mobile menu toggle (would need additional implementation)
702
+ const mobileMenuButton = document.querySelector('button.md\\:hidden');
703
+ mobileMenuButton.addEventListener('click', () => {
704
+ // Implementation for mobile menu would go here
705
+ console.log('Mobile menu clicked');
706
+ });
707
+ </script>
708
+ <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>
709
+ </html>