|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Platforms - Palantir</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); |
|
|
* { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.hero-gradient { |
|
|
background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%); |
|
|
} |
|
|
.hover-lift { |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
.hover-lift:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.nav-blur { |
|
|
backdrop-filter: blur(20px); |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
} |
|
|
.platform-hero { |
|
|
background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%); |
|
|
} |
|
|
.feature-card { |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
.feature-card:hover { |
|
|
background: rgba(255, 255, 255, 0.06); |
|
|
border-color: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.animated-gradient { |
|
|
background: linear-gradient(270deg, #3b82f6, #8b5cf6, #ec4899); |
|
|
background-size: 600% 600%; |
|
|
animation: gradientShift 8s ease infinite; |
|
|
} |
|
|
@keyframes gradientShift { |
|
|
0% { background-position: 0% 50%; } |
|
|
50% { background-position: 100% 50%; } |
|
|
100% { background-position: 0% 50%; } |
|
|
} |
|
|
.glow-effect { |
|
|
box-shadow: 0 0 60px rgba(59, 130, 246, 0.4); |
|
|
} |
|
|
.mega-glow { |
|
|
box-shadow: 0 0 80px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-white text-gray-900"> |
|
|
|
|
|
<nav class="fixed w-full z-50 nav-blur border-b border-white/10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center h-20"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<a href="index.html" class="text-white font-black text-2xl tracking-tight hover:scale-105 transition-transform">PALANTIR</a> |
|
|
</div> |
|
|
<div class="hidden lg:ml-12 lg:flex lg:space-x-10"> |
|
|
<a href="platforms.html" class="text-white px-3 py-2 text-sm font-black border-b-2 border-white">Platforms</a> |
|
|
<a href="#solutions" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-200 hover:scale-105">Solutions</a> |
|
|
<a href="#customers" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-200 hover:scale-105">Customers</a> |
|
|
<a href="#company" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-200 hover:scale-105">Company</a> |
|
|
<a href="#careers" class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium transition-all duration-200 hover:scale-105">Careers</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden lg:flex items-center space-x-6"> |
|
|
<a href="#" class="text-gray-300 hover:text-white text-sm font-semibold transition-all duration-200 hover:scale-105">Contact</a> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-sm font-black transition-all duration-200 hover:scale-105 hover:shadow-lg glow-effect"> |
|
|
Request Demo |
|
|
</button> |
|
|
</div> |
|
|
<div class="lg:hidden"> |
|
|
<button type="button" class="text-gray-300 hover:text-white focus:outline-none p-2"> |
|
|
<i data-feather="menu" class="w-6 h-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<section class="pt-32 pb-32 platform-hero text-white relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black"></div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-7xl md:text-9xl font-black mb-8">Platforms</h1> |
|
|
<p class="text-3xl md:text-4xl text-gray-300 max-w-5xl mx-auto font-light leading-relaxed"> |
|
|
Foundational software that transforms how the world's most important organizations operate |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-32 bg-white" id="foundry"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid lg:grid-cols-2 gap-20 items-center"> |
|
|
<div> |
|
|
<div class="inline-flex items-center px-8 py-4 rounded-full bg-blue-100 text-blue-800 text-xl font-black mb-10"> |
|
|
FOUNDRY |
|
|
</div> |
|
|
<h2 class="text-6xl md:text-7xl font-black text-gray-900 mb-10">Transform how your organization operates</h2> |
|
|
<p class="text-2xl text-gray-600 mb-16 leading-relaxed font-light"> |
|
|
Foundry enables organizations to integrate their data, decisions, and operations at scale. |
|
|
Build applications that connect your entire enterprise in a single, unified platform. |
|
|
</p> |
|
|
<div class="space-y-6 mb-12"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 mt-1"> |
|
|
<i data-feather="check" class="text-white w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Connect disparate data sources</h4> |
|
|
<p class="text-gray-600">Integrate any data type from any system into a unified operational picture</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 mt-1"> |
|
|
<i data-feather="check" class="text-white w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Build custom applications</h4> |
|
|
<p class="text-gray-600">Create powerful applications without writing code using our no-code platform</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 mt-1"> |
|
|
<i data-feather="check" class="text-white w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Scale across your organization</h4> |
|
|
<p class="text-gray-600">Deploy solutions that scale to millions of users and petabytes of data</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-10 bg-blue-600 hover:bg-blue-700 text-white px-10 py-5 rounded-2xl text-xl font-black transition-all hover-lift glow-effect"> |
|
|
Learn more about Foundry |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-3xl p-16 shadow-2xl mega-glow"> |
|
|
<div class="aspect-video bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-xl"> |
|
|
<div class="text-center"> |
|
|
<i data-feather="layers" class="text-white w-20 h-20 mx-auto mb-6"></i> |
|
|
<span class="text-white text-3xl font-black">Foundry Platform Interface</span> |
|
|
<p class="text-blue-100 mt-3 text-xl">Real-time data integration and visualization</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-20 bg-gray-50" id="gotham"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center"> |
|
|
<div class="order-2 lg:order-1"> |
|
|
<div class="bg-gray-100 rounded-2xl p-8"> |
|
|
<div class="aspect-video bg-gradient-to-br from-gray-700 to-gray-900 rounded-xl flex items-center justify-center"> |
|
|
<span class="text-white text-lg font-medium">Gotham Platform Interface</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="order-1 lg:order-2"> |
|
|
<div class="inline-flex items-center px-4 py-2 rounded-full bg-purple-100 text-purple-800 text-sm font-medium mb-6"> |
|
|
GOTHAM |
|
|
</div> |
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-6">For defense and intelligence</h2> |
|
|
<p class="text-lg text-gray-600 mb-8 leading-relaxed"> |
|
|
Gotham enables defense and intelligence communities to model, plan, and execute |
|
|
complex operations using integrated data. |
|
|
</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="shield" class="text-purple-500 w-5 h-5 mr-3"></i> |
|
|
<span class="text-gray-700">Mission-critical operations</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="shield" class="text-purple-500 w-5 h-5 mr-3"></i> |
|
|
<span class="text-gray-700">Secure and compliant</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="shield" class="text-purple-500 w-5 h-5 mr-3"></i> |
|
|
<span class="text-gray-700">Real-time collaboration</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-8 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-colors"> |
|
|
Learn more about Gotham |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-32 bg-white" id="apollo"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid lg:grid-cols-2 gap-20 items-center"> |
|
|
<div> |
|
|
<div class="inline-flex items-center px-6 py-3 rounded-full bg-green-100 text-green-800 text-lg font-black mb-8"> |
|
|
APOLLO |
|
|
</div> |
|
|
<h2 class="text-5xl md:text-6xl font-black text-gray-900 mb-8">Continuous software delivery</h2> |
|
|
<p class="text-xl text-gray-600 mb-12 leading-relaxed font-light"> |
|
|
Apollo continuously deploys and operates our software platforms across |
|
|
classified, air-gapped, and public cloud environments at global scale. |
|
|
</p> |
|
|
<div class="space-y-6 mb-12"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 mt-1"> |
|
|
<i data-feather="zap" class="text-white w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Automated deployment</h4> |
|
|
<p class="text-gray-600">Deploy software across any environment with zero-touch automation</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 mt-1"> |
|
|
<i data-feather="zap" class="text-white w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Continuous updates</h4> |
|
|
<p class="text-gray-600">Maintain peak performance with continuous integration and delivery</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0 mt-1"> |
|
|
<i data-feather="zap" class="text-white w-5 h-5"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold text-gray-900 mb-2">Multi-environment management</h4> |
|
|
<p class="text-gray-600">Seamlessly operate across cloud, on-premise, and air-gapped systems</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-8 bg-green-600 hover:bg-green-700 text-white px-8 py-4 rounded-xl text-lg font-semibold transition-all hover-lift"> |
|
|
Learn more about Apollo |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-green-50 to-blue-50 rounded-3xl p-12 shadow-2xl"> |
|
|
<div class="aspect-video bg-gradient-to-br from-green-500 to-blue-600 rounded-2xl flex items-center justify-center shadow-xl"> |
|
|
<div class="text-center"> |
|
|
<i data-feather="cpu" class="text-white w-16 h-16 mx-auto mb-4"></i> |
|
|
<span class="text-white text-2xl font-bold">Apollo Control Tower</span> |
|
|
<p class="text-green-100 mt-2">Global deployment management</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-5xl md:text-6xl font-black text-gray-900 mb-8">Choose Your Platform</h2> |
|
|
<p class="text-2xl text-gray-600 max-w-4xl mx-auto font-light leading-relaxed"> |
|
|
Each platform is designed for specific use cases while sharing common foundations |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-3xl shadow-2xl overflow-hidden"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="bg-gray-900 text-white"> |
|
|
<th class="px-8 py-6 text-left text-lg font-black">Feature</th> |
|
|
<th class="px-8 py-6 text-center text-lg font-black">Foundry</th> |
|
|
<th class="px-8 py-6 text-center text-lg font-black">Gotham</th> |
|
|
<th class="px-8 py-6 text-center text-lg font-black">Apollo</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="px-8 py-6 text-lg font-semibold">Data Integration</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="px-8 py-6 text-lg font-semibold">Real-time Analytics</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="circle" class="w-6 h-6 text-gray-300 mx-auto"></i> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="px-8 py-6 text-lg font-semibold">Security Clearance</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="circle" class="w-6 h-6 text-gray-300 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-100"> |
|
|
<td class="px-8 py-6 text-lg font-semibold">No-code Development</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="circle" class="w-6 h-6 text-gray-300 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="circle" class="w-6 h-6 text-gray-300 mx-auto"></i> |
|
|
</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="px-8 py-6 text-lg font-semibold">Deployment Automation</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="circle" class="w-6 h-6 text-gray-300 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="circle" class="w-6 h-6 text-gray-300 mx-auto"></i> |
|
|
</td> |
|
|
<td class="px-8 py-6 text-center"> |
|
|
<i data-feather="check-circle" class="w-6 h-6 text-green-500 mx-auto"></i> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-32 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-20"> |
|
|
<h2 class="text-5xl md:text-6xl font-black text-gray-900 mb-8">Platform Use Cases</h2> |
|
|
<p class="text-2xl text-gray-600 max-w-4xl mx-auto font-light leading-relaxed"> |
|
|
See how organizations apply our platforms to solve real-world challenges |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="feature-card rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="globe" class="text-blue-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Global Supply Chain</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4">Track and optimize supply chains across continents with real-time visibility</p> |
|
|
<div class="text-sm text-blue-600 font-semibold">Foundry →</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-purple-500/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="shield" class="text-purple-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Counterterrorism</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4">Analyze threat patterns and coordinate response across agencies</p> |
|
|
<div class="text-sm text-purple-600 font-semibold">Gotham →</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="activity" class="text-blue-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Clinical Trials</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4">Accelerate drug development with integrated research data</p> |
|
|
<div class="text-sm text-blue-600 font-semibold">Foundry →</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-green-500/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="zap" class="text-green-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Cloud Migration</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4">Seamlessly deploy and manage software across hybrid environments</p> |
|
|
<div class="text-sm text-green-600 font-semibold">Apollo →</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-blue-500/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="trending-up" class="text-blue-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Financial Analytics</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4">Detect fraud and optimize investment strategies with AI</p> |
|
|
<div class="text-sm text-blue-600 font-semibold">Foundry →</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card rounded-2xl p-8 hover-lift"> |
|
|
<div class="w-16 h-16 bg-purple-500/20 rounded-xl flex items-center justify-center mb-6"> |
|
|
<i data-feather="compass" class="text-purple-500 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-black text-gray-900 mb-4">Military Operations</h3> |
|
|
<p class="text-gray-600 leading-relaxed mb-4">Plan and execute complex missions with integrated intelligence</p> |
|
|
<div class="text-sm text-purple-600 font-semibold">Gotham →</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 bg-gradient-to-br from-blue-600 to-purple-700 text-white"> |
|
|
<div class="max-w-5xl mx-auto text-center px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-5xl md:text-6xl font-black mb-8">Ready to get started?</h2> |
|
|
<p class="text-2xl text-blue-100 mb-12 font-light leading-relaxed"> |
|
|
Contact our team to learn which platform is right for your organization's specific needs. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-6 justify-center"> |
|
|
<button class="bg-white text-blue-600 hover:bg-blue-50 px-10 py-5 rounded-xl text-xl font-semibold transition-all hover-lift glow-effect"> |
|
|
Request a Demo |
|
|
</button> |
|
|
<button class="border-2 border-white/30 hover:border-white text-white px-10 py-5 rounded-xl text-xl font-semibold transition-all hover-lift"> |
|
|
Talk to an Expert |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
const offset = 100; |
|
|
const targetPosition = target.offsetTop - offset; |
|
|
window.scrollTo({ |
|
|
top: targetPosition, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const observerOptions = { |
|
|
threshold: 0.1, |
|
|
rootMargin: '0px 0px -50px 0px' |
|
|
}; |
|
|
|
|
|
const observer = new IntersectionObserver(function(entries) { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
}, observerOptions); |
|
|
|
|
|
document.querySelectorAll('.feature-card').forEach(el => { |
|
|
el.style.opacity = '0'; |
|
|
el.style.transform = 'translateY(30px)'; |
|
|
el.style.transition = 'all 0.6s ease-out'; |
|
|
observer.observe(el); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.feature-card.visible').forEach(el => { |
|
|
el.style.opacity = '1'; |
|
|
el.style.transform = 'translateY(0)'; |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
