|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>XtractoBot - AI Automation Agency</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
.globe-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
opacity: 0.3; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<div id="globe-bg" class="globe-bg"></div> |
|
|
|
|
|
|
|
|
<nav class="py-6 px-4 sm:px-6 lg:px-8 bg-white/80 backdrop-blur-md sticky top-0 z-50 shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<a href="#" class="text-2xl font-bold gradient-text">XtractoBot</a> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="text-gray-700 hover:text-indigo-600 font-medium">Home</a> |
|
|
<a href="#services" class="text-gray-700 hover:text-indigo-600 font-medium">Services</a> |
|
|
<a href="#process" class="text-gray-700 hover:text-indigo-600 font-medium">Process</a> |
|
|
<a href="#pricing" class="text-gray-700 hover:text-indigo-600 font-medium">Pricing</a> |
|
|
<a href="#contact" class="text-gray-700 hover:text-indigo-600 font-medium">Contact</a> |
|
|
</div> |
|
|
<a href="#" class="hidden md:block bg-indigo-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-indigo-700 transition">Book a Call</a> |
|
|
<button class="md:hidden"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative py-20 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<span class="inline-block bg-indigo-100 text-indigo-600 px-3 py-1 rounded-full text-sm font-medium mb-4">New</span> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-6"> |
|
|
Automated <span class="gradient-text">Lead Generation</span> |
|
|
</h1> |
|
|
<p class="text-xl text-gray-600 mb-8 max-w-lg"> |
|
|
Intelligent Automation for Modern Businesses. XtractoBot brings AI automation to your fingertips & streamlines tasks. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<a href="#contact" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition">Get in touch</a> |
|
|
<a href="#services" class="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition">View services</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="bg-indigo-100 rounded-2xl p-8 shadow-xl"> |
|
|
<div class="bg-white rounded-lg p-6 shadow-sm"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">What can I help with?</h3> |
|
|
<p class="text-gray-600 mb-4">Whether you want help in customer handling or make changes in your system just give me command</p> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-2 px-3 rounded-md text-sm font-medium">Generate invoice</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-2 px-3 rounded-md text-sm font-medium">Add document</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-2 px-3 rounded-md text-sm font-medium">Analyze</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-2 px-3 rounded-md text-sm font-medium">Generate Image</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-2 px-3 rounded-md text-sm font-medium">research</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-2 px-3 rounded-md text-sm font-medium">E-mail Sending</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-12 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<p class="text-center text-gray-500 mb-8">Over 50+ businesses trust us</p> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-8"> |
|
|
|
|
|
<div class="flex justify-center"> |
|
|
<div class="h-16 w-16 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<div class="h-16 w-16 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<div class="h-16 w-16 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<div class="h-16 w-16 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<div class="h-16 w-16 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
<div class="flex justify-center"> |
|
|
<div class="h-16 w-16 bg-gray-200 rounded-full"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Services</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
AI Solutions That Take Your Business to the Next Level |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition"> |
|
|
<div class="bg-indigo-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="cpu" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Workflow Automation</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Automate repetitive tasks like data entry, reporting, and approval chains saving time and cutting down errors. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Internal Task Bots</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">100+ Automations</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition"> |
|
|
<div class="bg-indigo-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="user" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">AI Assistant</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
From managing calendars to drafting emails and summarizing meetings, our AI assistants work around the clock. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Summaries</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Scheduling</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Many more</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover:shadow-lg transition"> |
|
|
<div class="bg-indigo-100 w-16 h-16 rounded-lg flex items-center justify-center mb-6"> |
|
|
<i data-feather="trending-up" class="text-indigo-600 w-8 h-8"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Sales & Marketing</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
AI tools for lead generation, personalized outreach, and automated content creation that scales your sales efforts. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Leads</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Content</span> |
|
|
<span class="bg-indigo-50 text-indigo-600 py-1 px-3 rounded-full text-xs font-medium">Social post</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="process" class="py-20 px-4 sm:px-6 lg:px-8 bg-white"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Our Process</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
Simple, Smart, and Scalable Process to Automate Your Business |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6"> |
|
|
<div class="bg-indigo-100 text-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="font-bold">1</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Smart Analyzing</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
We assess your needs and identify AI solutions to streamline workflows and improve efficiency. |
|
|
</p> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-sm text-gray-600">Analyzing current workflow</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-sm text-gray-600">System check</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-sm text-gray-600">Process check</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6"> |
|
|
<div class="bg-indigo-100 text-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="font-bold">2</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">AI Development</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Our team builds intelligent automation systems tailored to your business processes. |
|
|
</p> |
|
|
<div class="bg-gray-100 p-3 rounded-md overflow-x-auto"> |
|
|
<code class="text-xs text-gray-800"> |
|
|
class AutomationTrigger:<br> |
|
|
def __init__(self, threshold):<br> |
|
|
self.threshold = threshold<br> |
|
|
self.status = "inactive"<br> |
|
|
def check_trigger(self, value):<br> |
|
|
if value > self.threshold:<br> |
|
|
self.status = "active"<br> |
|
|
return "Automation triggered!"<br> |
|
|
else:<br> |
|
|
return "No action taken." |
|
|
</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6"> |
|
|
<div class="bg-indigo-100 text-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="font-bold">3</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Seamless Integration</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
We smoothly integrate AI solutions into your existing infrastructure with minimal disruption. |
|
|
</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i data-feather="code" class="text-indigo-600 w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-xs text-gray-600">Your stack</span> |
|
|
</div> |
|
|
<i data-feather="arrow-right" class="text-gray-400 mx-2"></i> |
|
|
<div class="text-center"> |
|
|
<div class="bg-indigo-100 w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-2"> |
|
|
<i data-feather="cpu" class="text-indigo-600 w-4 h-4"></i> |
|
|
</div> |
|
|
<span class="text-xs text-gray-600">Our solution</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 rounded-xl p-6"> |
|
|
<div class="bg-indigo-100 text-indigo-600 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="font-bold">4</span> |
|
|
</div> |
|
|
<h3 class="text-lg font-bold text-gray-900 mb-3">Continuous Optimization</h3> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
We refine performance, analyze insights, and enhance automation for long-term growth. |
|
|
</p> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm text-gray-600 mb-1"> |
|
|
<span>Chatbot system</span> |
|
|
<span>20% ↑</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 70%"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="flex justify-between text-sm text-gray-600 mb-1"> |
|
|
<span>Workflow system</span> |
|
|
<span>Update available</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5"> |
|
|
<div class="bg-indigo-600 h-1.5 rounded-full" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Pricing</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
|
|
The Best AI Automation, at the Right Price |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="bg-white p-1 rounded-lg inline-flex"> |
|
|
<button class="px-6 py-2 rounded-md font-medium text-indigo-600">Monthly</button> |
|
|
<button class="px-6 py-2 rounded-md font-medium text-gray-600 bg-gray-100">Annually</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Starter</h3> |
|
|
<p class="text-3xl font-bold text-gray-900 mb-4">$37<span class="text-lg font-normal text-gray-600">/month</span></p> |
|
|
<p class="text-gray-600 mb-6">Perfect for small businesses starting with AI automation.</p> |
|
|
<a href="#" class="block w-full bg-indigo-600 text-white text-center py-3 rounded-lg font-medium hover:bg-indigo-700 transition">Choose this plan</a> |
|
|
</div> |
|
|
<div class="border-t border-gray-200 p-6 bg-gray-50"> |
|
|
<h4 class="text-sm font-semibold text-gray-900 uppercase mb-4">What's Included:</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Basic workflow automation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">AI-powered personal assistant</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Standard analytics & reporting</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Email & chat support</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Up to 3 AI integrations</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-indigo-500 relative hover:shadow-xl transition"> |
|
|
<div class="absolute top-0 right-0 bg-indigo-500 text-white text-xs font-bold px-2 py-1 rounded-bl-lg rounded-tr-lg">Popular</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Professional</h3> |
|
|
<p class="text-3xl font-bold text-gray-900 mb-4">$75<span class="text-lg font-normal text-gray-600">/month</span></p> |
|
|
<p class="text-gray-600 mb-6">Ideal for growing businesses needing advanced automation.</p> |
|
|
<a href="#" class="block w-full bg-indigo-600 text-white text-center py-3 rounded-lg font-medium hover:bg-indigo-700 transition">Choose this plan</a> |
|
|
</div> |
|
|
<div class="border-t border-gray-200 p-6 bg-gray-50"> |
|
|
<h4 class="text-sm font-semibold text-gray-900 uppercase mb-4">What's Included:</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Advanced workflow automation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">AI-driven sales & marketing tools</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Enhanced data analytics & insights</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Priority customer support</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Up to 10 AI integrations</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-2">Enterprise</h3> |
|
|
<p class="text-3xl font-bold text-gray-900 mb-4">Custom</p> |
|
|
<p class="text-gray-600 mb-6">For large enterprises needing fully customized solutions.</p> |
|
|
<a href="#" class="block w-full bg-gray-900 text-white text-center py-3 rounded-lg font-medium hover:bg-gray-800 transition">Schedule a call</a> |
|
|
</div> |
|
|
<div class="border-t border-gray-200 p-6 bg-gray-50"> |
|
|
<h4 class="text-sm font-semibold text-gray-900 uppercase mb-4">What's Included:</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Fully customizable AI automation</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Dedicated AI business consultant</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Enterprise-grade compliance</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">24/7 VIP support</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> |
|
|
<span class="text-gray-600">Unlimited AI integrations</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-indigo-600 text-white"> |
|
|
<div class="max-w-7xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Let AI do the Work so you can Scale Faster</h2> |
|
|
<p class="text-xl mb-8 max-w-3xl mx-auto opacity-90"> |
|
|
Book a Call Today and Start Automating Your Business Processes |
|
|
</p> |
|
|
<a href="#" class="inline-block bg-white text-indigo-600 px-8 py-3 rounded-lg font-bold hover:bg-gray-100 transition">Book a free call</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-gray-400 py-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
|
|
<div> |
|
|
<a href="#" class="text-2xl font-bold text-white mb-4 block">XtractoBot</a> |
|
|
<p class="mb-6">Automate Smarter, Optimize Faster, and Grow Stronger.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-semibold mb-4">Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#services" class="hover:text-white transition">Services</a></li> |
|
|
<li><a href="#process" class="hover:text-white transition">Process</a></li> |
|
|
<li><a href="#cases" class="hover:text-white transition">Case studies</a></li> |
|
|
<li><a href="#benefits" class="hover:text-white transition">Benefits</a></li> |
|
|
<li><a href="#pricing" class="hover:text-white transition">Pricing</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-semibold mb-4">Pages</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-white transition">Home</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">About</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Blog</a></li> |
|
|
<li><a href="#" class="hover:text-white transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white font-semibold mb-4">Join our newsletter</h3> |
|
|
<form class="mb-4"> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"> |
|
|
<button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition">Subscribe</button> |
|
|
</div> |
|
|
</form> |
|
|
<p class="text-xs"> |
|
|
© 2023 XtractoBot. All rights reserved.<br> |
|
|
Designed with ❤️ by AI Wizards |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#globe-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x5b6cf9, |
|
|
backgroundColor: 0xf8fafc, |
|
|
size: 1.00 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
