Hugging Face's logo

Spaces:
talkhan
/
aitrek
Running

App Files Community
talkhan commited on
Commit
152c1e8
·
verified ·
1 Parent(s): 2c5a072

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +536 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aitrek
3
- emoji: ⚡
4
- colorFrom: yellow
5
- colorTo: pink
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: aitrek
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
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,536 @@
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>AITrek | AI-Powered Drilling Analytics Platform</title>
7
+ <meta name="description" content="Unify rig data, ask natural-language questions, and surface optimization insights in seconds with AITrek's AI-driven drilling intelligence platform.">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&family=JetBrains+Mono&display=swap" rel="stylesheet">
15
+ <script>
16
+ tailwind.config = {
17
+ theme: {
18
+ extend: {
19
+ colors: {
20
+ navy: '#002E5B',
21
+ teal: '#00A7B5',
22
+ amber: '#FFB547',
23
+ slate: '#1B1B1B',
24
+ snow: '#F8FAFC',
25
+ },
26
+ fontFamily: {
27
+ sans: ['Inter', 'sans-serif'],
28
+ mono: ['JetBrains Mono', 'monospace'],
29
+ },
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <style>
35
+ body {
36
+ font-family: 'Inter', sans-serif;
37
+ color: #1B1B1B;
38
+ overflow-x: hidden;
39
+ }
40
+ .hero-gradient {
41
+ background: linear-gradient(135deg, #002E5B 0%, #00A7B5 100%);
42
+ }
43
+ .feature-card:hover {
44
+ transform: translateY(-4px);
45
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
46
+ }
47
+ .timeline-step:not(:last-child):after {
48
+ content: '';
49
+ position: absolute;
50
+ top: 24px;
51
+ left: 100%;
52
+ height: 2px;
53
+ width: 40px;
54
+ background: #00A7B5;
55
+ }
56
+ @media (max-width: 768px) {
57
+ .timeline-step:not(:last-child):after {
58
+ display: none;
59
+ }
60
+ }
61
+ .animate-in {
62
+ opacity: 0;
63
+ transform: translateY(40px);
64
+ }
65
+ .animate-in.active {
66
+ opacity: 1;
67
+ transform: translateY(0);
68
+ transition: all 0.6s ease-out;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body class="bg-snow">
73
+ <!-- Navigation -->
74
+ <nav class="sticky top-0 z-50 bg-navy text-white h-18 shadow-md">
75
+ <div class="container mx-auto px-6 py-4">
76
+ <div class="flex items-center justify-between">
77
+ <div class="flex items-center">
78
+ <span class="text-2xl font-extrabold">AITrek</span>
79
+ </div>
80
+ <div class="hidden md:flex items-center space-x-8">
81
+ <a href="#" class="hover:text-amber transition">Platform</a>
82
+ <a href="#" class="hover:text-amber transition">Solutions</a>
83
+ <a href="#" class="hover:text-amber transition">Resources</a>
84
+ <a href="#" class="hover:text-amber transition">Pricing</a>
85
+ <button class="bg-amber text-navy px-6 py-2 rounded-md font-bold hover:bg-opacity-90 transition">Request Demo</button>
86
+ <a href="#" class="hover:text-teal transition">Login</a>
87
+ </div>
88
+ <button class="md:hidden focus:outline-none">
89
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
90
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
91
+ </svg>
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </nav>
96
+
97
+ <!-- Hero Section -->
98
+ <section class="hero-gradient text-white min-h-screen flex items-center">
99
+ <div class="container mx-auto px-6 py-20 md:py-0">
100
+ <div class="flex flex-col md:flex-row items-center">
101
+ <div class="md:w-1/2 mb-16 md:mb-0 animate-in">
102
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">AI-Driven Drilling Intelligence</h1>
103
+ <p class="text-xl mb-8 opacity-90">Unify rig data, ask natural-language questions, surface optimization insights in seconds.</p>
104
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
105
+ <button class="bg-amber text-navy px-8 py-3 rounded-md font-bold hover:bg-opacity-90 transition">Request Demo</button>
106
+ <button class="border-2 border-white px-8 py-3 rounded-md font-bold hover:bg-white hover:bg-opacity-10 transition">60-sec Overview</button>
107
+ </div>
108
+ </div>
109
+ <div class="md:w-1/2 relative animate-in" style="animation-delay: 0.2s;">
110
+ <div class="relative">
111
+ <lottie-player src="https://assets5.lottiefiles.com/packages/lf20_5tkzkblw.json" background="transparent" speed="1" style="width: 100%; height: auto;" loop autoplay></lottie-player>
112
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
113
+ <div class="text-center">
114
+ <div class="counter text-3xl font-bold mb-2" data-target="10000">0</div>
115
+ <div class="text-sm opacity-80">wells analyzed</div>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ <div class="absolute -bottom-10 right-0 bg-white text-navy p-4 rounded-lg shadow-lg">
120
+ <div class="text-2xl font-bold">7%</div>
121
+ <div class="text-sm">avg. NPT reduction</div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Problem/Solution Section -->
129
+ <section class="py-20 bg-white">
130
+ <div class="container mx-auto px-6 animate-in">
131
+ <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy">From Chaos to Clarity</h2>
132
+ <div class="flex flex-col lg:flex-row items-center">
133
+ <div class="lg:w-1/2 mb-12 lg:mb-0">
134
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Chaotic drilling data spreadsheets" class="rounded-lg shadow-xl w-full">
135
+ </div>
136
+ <div class="lg:w-1/2 lg:pl-12">
137
+ <div class="mb-8">
138
+ <h3 class="text-xl font-bold mb-4 text-slate">Common Drilling Data Challenges</h3>
139
+ <ul class="space-y-3">
140
+ <li class="flex items-start">
141
+ <svg class="w-5 h-5 text-red-500 mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
142
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
143
+ </svg>
144
+ <span>Data silos across WITSML, spreadsheets, and proprietary formats</span>
145
+ </li>
146
+ <li class="flex items-start">
147
+ <svg class="w-5 h-5 text-red-500 mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
148
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
149
+ </svg>
150
+ <span>Days wasted validating and normalizing rig data</span>
151
+ </li>
152
+ <li class="flex items-start">
153
+ <svg class="w-5 h-5 text-red-500 mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
154
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
155
+ </svg>
156
+ <span>Missed vibration patterns leading to costly tool failures</span>
157
+ </li>
158
+ </ul>
159
+ </div>
160
+ <div>
161
+ <h3 class="text-xl font-bold mb-4 text-slate">How AITrek Solves These</h3>
162
+ <ul class="space-y-3">
163
+ <li class="flex items-start">
164
+ <svg class="w-5 h-5 text-teal mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
165
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
166
+ </svg>
167
+ <span>Unified SQL data lake with automated ETL pipelines</span>
168
+ </li>
169
+ <li class="flex items-start">
170
+ <svg class="w-5 h-5 text-teal mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
171
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
172
+ </svg>
173
+ <span>AI-powered validation that learns your rig's patterns</span>
174
+ </li>
175
+ <li class="flex items-start">
176
+ <svg class="w-5 h-5 text-teal mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
177
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
178
+ </svg>
179
+ <span>Real-time vibration alerts with prescriptive recommendations</span>
180
+ </li>
181
+ </ul>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- Features Grid -->
189
+ <section class="py-20 bg-snow">
190
+ <div class="container mx-auto px-6">
191
+ <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy animate-in">Core Platform Features</h2>
192
+ <div class="grid md:grid-cols-2 gap-8">
193
+ <!-- Feature 1 -->
194
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.1s;">
195
+ <div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6">
196
+ <svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
197
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
198
+ </svg>
199
+ </div>
200
+ <h3 class="text-xl font-bold mb-3 text-navy">Unified SQL Data Lake</h3>
201
+ <p class="text-slate mb-4">Ingest slide sheets, surveys, mud logs, MWD/LWD, and daily ops reports into a single queryable repository.</p>
202
+ <div class="bg-slate bg-opacity-5 p-4 rounded-md font-mono text-sm">SELECT well_id, avg(rop) FROM drilling_data<br>WHERE date > '2023-01-01' GROUP BY well_id</div>
203
+ </div>
204
+
205
+ <!-- Feature 2 -->
206
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.2s;">
207
+ <div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6">
208
+ <svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
209
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
210
+ </svg>
211
+ </div>
212
+ <h3 class="text-xl font-bold mb-3 text-navy">LLM-Powered Query</h3>
213
+ <p class="text-slate mb-4">Chat interface that understands drilling acronyms, units, and your specific operational context.</p>
214
+ <div class="bg-slate bg-opacity-5 p-4 rounded-md text-sm">
215
+ <span class="text-teal">User:</span> "Show wells where ROP dropped >20% during slide drilling last month"<br>
216
+ <span class="text-teal">AI:</span> "Found 3 wells matching your criteria. Would you like vibration data for these intervals?"
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Feature 3 -->
221
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.3s;">
222
+ <div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6">
223
+ <svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
224
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
225
+ </svg>
226
+ </div>
227
+ <h3 class="text-xl font-bold mb-3 text-navy">Real-Time Dashboards</h3>
228
+ <p class="text-slate mb-4">ROP, slide/rotate efficiency, torsional vs. axial vibration heat maps updated every 15 seconds.</p>
229
+ <div class="relative">
230
+ <lottie-player src="https://assets1.lottiefiles.com/packages/lf20_5tkzkblw.json" background="transparent" speed="1" style="width: 100%; height: 120px;" loop autoplay></lottie-player>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Feature 4 -->
235
+ <div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.4s;">
236
+ <div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6">
237
+ <svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
238
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
239
+ </svg>
240
+ </div>
241
+ <h3 class="text-xl font-bold mb-3 text-navy">Automated ETL Pipeline</h3>
242
+ <p class="text-slate mb-4">Drag-and-drop file import or live rig-site connector with field validation rules.</p>
243
+ <div class="bg-slate bg-opacity-5 p-4 rounded-md text-sm">
244
+ <div class="flex items-center mb-2">
245
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
246
+ <span>Connected to Rig #D-42 (Last sync: 2 min ago)</span>
247
+ </div>
248
+ <div class="flex items-center">
249
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
250
+ <span>Validating 1,248 new data points...</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </section>
257
+
258
+ <!-- Dashboard Showcase -->
259
+ <section class="py-20 bg-white">
260
+ <div class="container mx-auto px-6 animate-in">
261
+ <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy">Actionable Insights at a Glance</h2>
262
+ <div class="flex justify-center mb-12">
263
+ <div class="relative w-full max-w-4xl">
264
+ <div class="bg-gray-100 rounded-xl p-2 shadow-inner">
265
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="AITrek dashboard showing drilling analytics" class="rounded-lg w-full">
266
+ </div>
267
+ <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2">
268
+ <button class="bg-navy text-white px-6 py-2 rounded-full font-bold">Performance</button>
269
+ <button class="bg-white text-navy border border-gray-200 px-6 py-2 rounded-full font-bold hover:bg-gray-50">Vibrations</button>
270
+ <button class="bg-white text-navy border border-gray-200 px-6 py-2 rounded-full font-bold hover:bg-gray-50">Cost Savings</button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ <div class="text-center max-w-3xl mx-auto">
275
+ <p class="text-xl text-slate">Monitor key metrics across your entire drilling program with configurable dashboards that highlight anomalies and optimization opportunities.</p>
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+ <!-- How It Works Timeline -->
281
+ <section class="py-20 bg-snow">
282
+ <div class="container mx-auto px-6">
283
+ <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy animate-in">How It Works</h2>
284
+ <div class="grid md:grid-cols-4 gap-8">
285
+ <!-- Step 1 -->
286
+ <div class="relative timeline-step animate-in" style="animation-delay: 0.1s;">
287
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
288
+ <div class="w-12 h-12 bg-navy text-white rounded-full flex items-center justify-center mb-6 text-xl font-bold">1</div>
289
+ <h3 class="text-xl font-bold mb-3 text-navy">Connect / Upload</h3>
290
+ <p class="text-slate">Link to WITSML streams or upload historical data files from any rig or vendor format.</p>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Step 2 -->
295
+ <div class="relative timeline-step animate-in" style="animation-delay: 0.2s;">
296
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
297
+ <div class="w-12 h-12 bg-navy text-white rounded-full flex items-center justify-center mb-6 text-xl font-bold">2</div>
298
+ <h3 class="text-xl font-bold mb-3 text-navy">Normalize & Validate</h3>
299
+ <p class="text-slate">AI automatically maps fields, converts units, and flags potential data quality issues.</p>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Step 3 -->
304
+ <div class="relative timeline-step animate-in" style="animation-delay: 0.3s;">
305
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
306
+ <div class="w-12 h-12 bg-navy text-white rounded-full flex items-center justify-center mb-6 text-xl font-bold">3</div>
307
+ <h3 class="text-xl font-bold mb-3 text-navy">Ask / Visualize</h3>
308
+ <p class="text-slate">Query in natural language or use pre-built templates to generate interactive visualizations.</p>
309
+ </div>
310
+ </div>
311
+
312
+ <!-- Step 4 -->
313
+ <div class="relative animate-in" style="animation-delay: 0.4s;">
314
+ <div class="bg-white p-8 rounded-xl shadow-md h-full">
315
+ <div class="w-12 h-12 bg-navy text-white rounded-full flex items-center justify-center mb-6 text-xl font-bold">4</div>
316
+ <h3 class="text-xl font-bold mb-3 text-navy">Act & Optimize</h3>
317
+ <p class="text-slate">Implement recommendations and track impact on KPIs like ROP, NPT, and cost/ft.</p>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </section>
323
+
324
+ <!-- Case Studies -->
325
+ <section class="py-20 bg-white">
326
+ <div class="container mx-auto px-6 animate-in">
327
+ <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy">Proven Results</h2>
328
+ <div class="grid md:grid-cols-2 gap-8">
329
+ <!-- Case Study 1 -->
330
+ <div class="bg-snow p-8 rounded-xl shadow-md">
331
+ <div class="flex items-center mb-6">
332
+ <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mr-4">
333
+ <span class="text-xl font-bold text-navy">US</span>
334
+ </div>
335
+ <div>
336
+ <h3 class="text-xl font-bold text-navy">Permian Basin Operator</h3>
337
+ <p class="text-teal">Top 5 Independent E&P</p>
338
+ </div>
339
+ </div>
340
+ <blockquote class="text-slate mb-6 italic">
341
+ "AITrek identified a 22% improvement opportunity in our slide drilling efficiency that we'd been missing in our manual analysis."
342
+ </blockquote>
343
+ <div class="bg-white p-4 rounded-lg">
344
+ <div class="flex justify-between items-center mb-2">
345
+ <span>Slide Drilling Efficiency</span>
346
+ <span class="font-bold">+22%</span>
347
+ </div>
348
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
349
+ <div class="bg-teal h-2.5 rounded-full" style="width: 72%"></div>
350
+ </div>
351
+ <div class="text-xs text-gray-500 mt-1">Before: 50% → After: 72%</div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Case Study 2 -->
356
+ <div class="bg-snow p-8 rounded-xl shadow-md">
357
+ <div class="flex items-center mb-6">
358
+ <div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mr-4">
359
+ <span class="text-xl font-bold text-navy">M</span>
360
+ </div>
361
+ <div>
362
+ <h3 class="text-xl font-bold text-navy">Middle East NOC</h3>
363
+ <p class="text-teal">Offshore Drilling Program</p>
364
+ </div>
365
+ </div>
366
+ <blockquote class="text-slate mb-6 italic">
367
+ "The vibration detection algorithms prevented 3 potential downhole tool failures in the first month of deployment."
368
+ </blockquote>
369
+ <div class="bg-white p-4 rounded-lg">
370
+ <div class="flex justify-between items-center mb-2">
371
+ <span>Vibration-Related NPT</span>
372
+ <span class="font-bold">-63%</span>
373
+ </div>
374
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
375
+ <div class="bg-teal h-2.5 rounded-full" style="width: 37%"></div>
376
+ </div>
377
+ <div class="text-xs text-gray-500 mt-1">Before: 100% → After: 37%</div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </section>
383
+
384
+ <!-- Integrations -->
385
+ <section class="py-16 bg-snow">
386
+ <div class="container mx-auto px-6 animate-in">
387
+ <h2 class="text-2xl font-bold text-center mb-12 text-navy">Seamless Integration With Your Stack</h2>
388
+ <div class="flex flex-wrap justify-center items-center gap-12">
389
+ <div class="bg-white p-4 rounded-lg shadow-sm">
390
+ <div class="text-xl font-mono font-bold text-navy">WITSML 2.1</div>
391
+ </div>
392
+ <div class="bg-white p-4 rounded-lg shadow-sm">
393
+ <div class="text-xl font-bold text-navy">Peloton Wellview</div>
394
+ </div>
395
+ <div class="bg-white p-4 rounded-lg shadow-sm">
396
+ <div class="text-xl font-bold text-navy">IBM Cognos</div>
397
+ </div>
398
+ <div class="bg-white p-4 rounded-lg shadow-sm">
399
+ <div class="text-xl font-bold text-navy">Microsoft Azure</div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- CTA Banner -->
406
+ <section class="py-16 bg-amber">
407
+ <div class="container mx-auto px-6 text-center animate-in">
408
+ <h2 class="text-3xl md:text-4xl font-extrabold mb-6 text-navy">Ready to turbocharge well delivery?</h2>
409
+ <p class="text-xl mb-8 text-navy">Let's talk about how AITrek can transform your drilling operations.</p>
410
+ <button class="bg-navy text-white px-8 py-3 rounded-md font-bold hover:bg-opacity-90 transition">Schedule Consultation</button>
411
+ </div>
412
+ </section>
413
+
414
+ <!-- Footer -->
415
+ <footer class="bg-navy text-white py-12">
416
+ <div class="container mx-auto px-6">
417
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
418
+ <div>
419
+ <h3 class="text-lg font-bold mb-4">Platform</h3>
420
+ <ul class="space-y-2">
421
+ <li><a href="#" class="hover:text-teal transition">Features</a></li>
422
+ <li><a href="#" class="hover:text-teal transition">Integrations</a></li>
423
+ <li><a href="#" class="hover:text-teal transition">Pricing</a></li>
424
+ <li><a href="#" class="hover:text-teal transition">Demo</a></li>
425
+ </ul>
426
+ </div>
427
+ <div>
428
+ <h3 class="text-lg font-bold mb-4">Company</h3>
429
+ <ul class="space-y-2">
430
+ <li><a href="#" class="hover:text-teal transition">About</a></li>
431
+ <li><a href="#" class="hover:text-teal transition">Careers</a></li>
432
+ <li><a href="#" class="hover:text-teal transition">Partners</a></li>
433
+ <li><a href="#" class="hover:text-teal transition">Contact</a></li>
434
+ </ul>
435
+ </div>
436
+ <div>
437
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
438
+ <ul class="space-y-2">
439
+ <li><a href="#" class="hover:text-teal transition">Blog</a></li>
440
+ <li><a href="#" class="hover:text-teal transition">Case Studies</a></li>
441
+ <li><a href="#" class="hover:text-teal transition">API Docs</a></li>
442
+ <li><a href="#" class="hover:text-teal transition">Help Center</a></li>
443
+ </ul>
444
+ </div>
445
+ <div>
446
+ <h3 class="text-lg font-bold mb-4">Legal</h3>
447
+ <ul class="space-y-2">
448
+ <li><a href="#" class="hover:text-teal transition">Privacy</a></li>
449
+ <li><a href="#" class="hover:text-teal transition">Terms</a></li>
450
+ <li><a href="#" class="hover:text-teal transition">Security</a></li>
451
+ <li><a href="#" class="hover:text-teal transition">Compliance</a></li>
452
+ </ul>
453
+ </div>
454
+ </div>
455
+ <div class="pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
456
+ <div class="flex space-x-6 mb-4 md:mb-0">
457
+ <a href="#" class="hover:text-teal transition">
458
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
459
+ <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path>
460
+ </svg>
461
+ </a>
462
+ <a href="#" class="hover:text-teal transition">
463
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
464
+ <path d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"></path>
465
+ </svg>
466
+ </a>
467
+ <a href="#" class="hover:text-teal transition">
468
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
469
+ <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
470
+ </svg>
471
+ </a>
472
+ <a href="#" class="hover:text-teal transition">
473
+ <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
474
+ <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
475
+ </svg>
476
+ </a>
477
+ </div>
478
+ <div class="text-sm">
479
+ © 2025 AITrek. All rights reserved.
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </footer>
484
+
485
+ <script>
486
+ // Counter animation
487
+ function animateCounters() {
488
+ const counters = document.querySelectorAll('.counter');
489
+ const speed = 200;
490
+
491
+ counters.forEach(counter => {
492
+ const target = +counter.getAttribute('data-target');
493
+ const count = +counter.innerText;
494
+ const increment = target / speed;
495
+
496
+ if(count < target) {
497
+ counter.innerText = Math.ceil(count + increment);
498
+ setTimeout(animateCounters, 1);
499
+ } else {
500
+ counter.innerText = target.toLocaleString();
501
+ }
502
+ });
503
+ }
504
+
505
+ // Scroll animations
506
+ function initAnimations() {
507
+ const animateEls = document.querySelectorAll('.animate-in');
508
+
509
+ animateEls.forEach(el => {
510
+ gsap.fromTo(el,
511
+ { opacity: 0, y: 40 },
512
+ {
513
+ opacity: 1,
514
+ y: 0,
515
+ duration: 0.8,
516
+ ease: "power2.out",
517
+ scrollTrigger: {
518
+ trigger: el,
519
+ start: "top 80%",
520
+ toggleActions: "play none none none"
521
+ }
522
+ }
523
+ );
524
+ });
525
+ }
526
+
527
+ // Initialize everything when page loads
528
+ document.addEventListener('DOMContentLoaded', () => {
529
+ animateCounters();
530
+ initAnimations();
531
+
532
+ // Mobile menu toggle would go here
533
+ });
534
+ </script>
535
+ <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=talkhan/aitrek" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
536
+ </html>