|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AITrek | AI-Powered Drilling Analytics Platform</title> |
|
|
<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."> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></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;800&family=JetBrains+Mono&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
navy: '#002E5B', |
|
|
teal: '#00A7B5', |
|
|
amber: '#FFB547', |
|
|
slate: '#1B1B1B', |
|
|
snow: '#F8FAFC', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
mono: ['JetBrains Mono', 'monospace'], |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
color: #1B1B1B; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #002E5B 0%, #00A7B5 100%); |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.timeline-step:not(:last-child):after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 24px; |
|
|
left: 100%; |
|
|
height: 2px; |
|
|
width: 40px; |
|
|
background: #00A7B5; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.timeline-step:not(:last-child):after { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
.animate-in { |
|
|
opacity: 0; |
|
|
transform: translateY(40px); |
|
|
} |
|
|
.animate-in.active { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
transition: all 0.6s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-snow"> |
|
|
|
|
|
<nav class="sticky top-0 z-50 bg-navy text-white h-18 shadow-md"> |
|
|
<div class="container mx-auto px-6 py-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-extrabold">AITrek</span> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="hover:text-amber transition">Platform</a> |
|
|
<a href="#" class="hover:text-amber transition">Solutions</a> |
|
|
<a href="#" class="hover:text-amber transition">Resources</a> |
|
|
<a href="#" class="hover:text-amber transition">Pricing</a> |
|
|
<button class="bg-amber text-navy px-6 py-2 rounded-md font-bold hover:bg-opacity-90 transition">Request Demo</button> |
|
|
<a href="#" class="hover:text-teal transition">Login</a> |
|
|
</div> |
|
|
<button class="md:hidden focus:outline-none"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white min-h-screen flex items-center"> |
|
|
<div class="container mx-auto px-6 py-20 md:py-0"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-16 md:mb-0 animate-in"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6">AI-Driven Drilling Intelligence</h1> |
|
|
<p class="text-xl mb-8 opacity-90">Unify rig data, ask natural-language questions, surface optimization insights in seconds.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-amber text-navy px-8 py-3 rounded-md font-bold hover:bg-opacity-90 transition">Request Demo</button> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative animate-in" style="animation-delay: 0.2s;"> |
|
|
<div class="relative"> |
|
|
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_5tkzkblw.json" background="transparent" speed="1" style="width: 100%; height: auto;" loop autoplay></lottie-player> |
|
|
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<div class="counter text-3xl font-bold mb-2" data-target="10000">0</div> |
|
|
<div class="text-sm opacity-80">wells analyzed</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-10 right-0 bg-white text-navy p-4 rounded-lg shadow-lg"> |
|
|
<div class="text-2xl font-bold">7%</div> |
|
|
<div class="text-sm">avg. NPT reduction</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6 animate-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy">From Chaos to Clarity</h2> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0"> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="lg:w-1/2 lg:pl-12"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-xl font-bold mb-4 text-slate">Common Drilling Data Challenges</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
<span>Data silos across WITSML, spreadsheets, and proprietary formats</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
<span>Days wasted validating and normalizing rig data</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
<span>Missed vibration patterns leading to costly tool failures</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4 text-slate">How AITrek Solves These</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Unified SQL data lake with automated ETL pipelines</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>AI-powered validation that learns your rig's patterns</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<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"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> |
|
|
</svg> |
|
|
<span>Real-time vibration alerts with prescriptive recommendations</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-snow"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy animate-in">Core Platform Features</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.1s;"> |
|
|
<div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Unified SQL Data Lake</h3> |
|
|
<p class="text-slate mb-4">Ingest slide sheets, surveys, mud logs, MWD/LWD, and daily ops reports into a single queryable repository.</p> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.2s;"> |
|
|
<div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">LLM-Powered Query</h3> |
|
|
<p class="text-slate mb-4">Chat interface that understands drilling acronyms, units, and your specific operational context.</p> |
|
|
<div class="bg-slate bg-opacity-5 p-4 rounded-md text-sm"> |
|
|
<span class="text-teal">User:</span> "Show wells where ROP dropped >20% during slide drilling last month"<br> |
|
|
<span class="text-teal">AI:</span> "Found 3 wells matching your criteria. Would you like vibration data for these intervals?" |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.3s;"> |
|
|
<div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Real-Time Dashboards</h3> |
|
|
<p class="text-slate mb-4">ROP, slide/rotate efficiency, torsional vs. axial vibration heat maps updated every 15 seconds.</p> |
|
|
<div class="relative"> |
|
|
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_5tkzkblw.json" background="transparent" speed="1" style="width: 100%; height: 120px;" loop autoplay></lottie-player> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300 animate-in" style="animation-delay: 0.4s;"> |
|
|
<div class="w-12 h-12 bg-teal bg-opacity-10 rounded-full flex items-center justify-center mb-6"> |
|
|
<svg class="w-6 h-6 text-teal" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Automated ETL Pipeline</h3> |
|
|
<p class="text-slate mb-4">Drag-and-drop file import or live rig-site connector with field validation rules.</p> |
|
|
<div class="bg-slate bg-opacity-5 p-4 rounded-md text-sm"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span>Connected to Rig #D-42 (Last sync: 2 min ago)</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
|
|
<span>Validating 1,248 new data points...</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6 animate-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy">Actionable Insights at a Glance</h2> |
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="relative w-full max-w-4xl"> |
|
|
<div class="bg-gray-100 rounded-xl p-2 shadow-inner"> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2"> |
|
|
<button class="bg-navy text-white px-6 py-2 rounded-full font-bold">Performance</button> |
|
|
<button class="bg-white text-navy border border-gray-200 px-6 py-2 rounded-full font-bold hover:bg-gray-50">Vibrations</button> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center max-w-3xl mx-auto"> |
|
|
<p class="text-xl text-slate">Monitor key metrics across your entire drilling program with configurable dashboards that highlight anomalies and optimization opportunities.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-snow"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy animate-in">How It Works</h2> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="relative timeline-step animate-in" style="animation-delay: 0.1s;"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md h-full"> |
|
|
<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> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Connect / Upload</h3> |
|
|
<p class="text-slate">Link to WITSML streams or upload historical data files from any rig or vendor format.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-step animate-in" style="animation-delay: 0.2s;"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md h-full"> |
|
|
<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> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Normalize & Validate</h3> |
|
|
<p class="text-slate">AI automatically maps fields, converts units, and flags potential data quality issues.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative timeline-step animate-in" style="animation-delay: 0.3s;"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md h-full"> |
|
|
<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> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Ask / Visualize</h3> |
|
|
<p class="text-slate">Query in natural language or use pre-built templates to generate interactive visualizations.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative animate-in" style="animation-delay: 0.4s;"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-md h-full"> |
|
|
<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> |
|
|
<h3 class="text-xl font-bold mb-3 text-navy">Act & Optimize</h3> |
|
|
<p class="text-slate">Implement recommendations and track impact on KPIs like ROP, NPT, and cost/ft.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6 animate-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-extrabold text-center mb-16 text-navy">Proven Results</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-snow p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mr-4"> |
|
|
<span class="text-xl font-bold text-navy">US</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-navy">Permian Basin Operator</h3> |
|
|
<p class="text-teal">Top 5 Independent E&P</p> |
|
|
</div> |
|
|
</div> |
|
|
<blockquote class="text-slate mb-6 italic"> |
|
|
"AITrek identified a 22% improvement opportunity in our slide drilling efficiency that we'd been missing in our manual analysis." |
|
|
</blockquote> |
|
|
<div class="bg-white p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span>Slide Drilling Efficiency</span> |
|
|
<span class="font-bold">+22%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-teal h-2.5 rounded-full" style="width: 72%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">Before: 50% → After: 72%</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-snow p-8 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mr-4"> |
|
|
<span class="text-xl font-bold text-navy">M</span> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold text-navy">Middle East NOC</h3> |
|
|
<p class="text-teal">Offshore Drilling Program</p> |
|
|
</div> |
|
|
</div> |
|
|
<blockquote class="text-slate mb-6 italic"> |
|
|
"The vibration detection algorithms prevented 3 potential downhole tool failures in the first month of deployment." |
|
|
</blockquote> |
|
|
<div class="bg-white p-4 rounded-lg"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span>Vibration-Related NPT</span> |
|
|
<span class="font-bold">-63%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div class="bg-teal h-2.5 rounded-full" style="width: 37%"></div> |
|
|
</div> |
|
|
<div class="text-xs text-gray-500 mt-1">Before: 100% → After: 37%</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-snow"> |
|
|
<div class="container mx-auto px-6 animate-in"> |
|
|
<h2 class="text-2xl font-bold text-center mb-12 text-navy">Seamless Integration With Your Stack</h2> |
|
|
<div class="flex flex-wrap justify-center items-center gap-12"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="text-xl font-mono font-bold text-navy">WITSML 2.1</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="text-xl font-bold text-navy">Peloton Wellview</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="text-xl font-bold text-navy">IBM Cognos</div> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="text-xl font-bold text-navy">Microsoft Azure</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-amber"> |
|
|
<div class="container mx-auto px-6 text-center animate-in"> |
|
|
<h2 class="text-3xl md:text-4xl font-extrabold mb-6 text-navy">Ready to turbocharge well delivery?</h2> |
|
|
<p class="text-xl mb-8 text-navy">Let's talk about how AITrek can transform your drilling operations.</p> |
|
|
<button class="bg-navy text-white px-8 py-3 rounded-md font-bold hover:bg-opacity-90 transition">Schedule Consultation</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-navy text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Platform</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-teal transition">Features</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Integrations</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Pricing</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Demo</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-teal transition">About</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Careers</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Partners</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-teal transition">Blog</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Case Studies</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">API Docs</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Help Center</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Legal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-teal transition">Privacy</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Terms</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Security</a></li> |
|
|
<li><a href="#" class="hover:text-teal transition">Compliance</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex space-x-6 mb-4 md:mb-0"> |
|
|
<a href="#" class="hover:text-teal transition"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="hover:text-teal transition"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="hover:text-teal transition"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
<a href="#" class="hover:text-teal transition"> |
|
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<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> |
|
|
</svg> |
|
|
</a> |
|
|
</div> |
|
|
<div class="text-sm"> |
|
|
© 2025 AITrek. All rights reserved. |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function animateCounters() { |
|
|
const counters = document.querySelectorAll('.counter'); |
|
|
const speed = 200; |
|
|
|
|
|
counters.forEach(counter => { |
|
|
const target = +counter.getAttribute('data-target'); |
|
|
const count = +counter.innerText; |
|
|
const increment = target / speed; |
|
|
|
|
|
if(count < target) { |
|
|
counter.innerText = Math.ceil(count + increment); |
|
|
setTimeout(animateCounters, 1); |
|
|
} else { |
|
|
counter.innerText = target.toLocaleString(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function initAnimations() { |
|
|
const animateEls = document.querySelectorAll('.animate-in'); |
|
|
|
|
|
animateEls.forEach(el => { |
|
|
gsap.fromTo(el, |
|
|
{ opacity: 0, y: 40 }, |
|
|
{ |
|
|
opacity: 1, |
|
|
y: 0, |
|
|
duration: 0.8, |
|
|
ease: "power2.out", |
|
|
scrollTrigger: { |
|
|
trigger: el, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
} |
|
|
} |
|
|
); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
animateCounters(); |
|
|
initAnimations(); |
|
|
|
|
|
|
|
|
}); |
|
|
</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=talkhan/aitrek" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
