|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>API Amazement Accelerator</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&display=swap'); |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.globe-bg { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: 0; |
|
|
opacity: 0.3; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="zap" class="text-blue-600 h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">API Amazement</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Features</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Documentation</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Pricing</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false" id="mobile-menu-button"> |
|
|
<i data-feather="menu" class="block h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sm:hidden hidden" id="mobile-menu"> |
|
|
<div class="pt-2 pb-3 space-y-1"> |
|
|
<a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Features</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Documentation</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Pricing</a> |
|
|
<div class="mt-4 pl-3"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium w-full">Get Started</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="relative hero-gradient text-white overflow-hidden"> |
|
|
<div class="globe-bg" id="vanta-globe"></div> |
|
|
<div class="max-w-7xl mx-auto"> |
|
|
<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> |
|
|
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20"> |
|
|
<div class="sm:text-center lg:text-left"> |
|
|
<h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
|
|
<span class="block">Accelerate Your API</span> |
|
|
<span class="block text-blue-200">Integration Journey</span> |
|
|
</h1> |
|
|
<p class="mt-3 text-base text-blue-100 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
|
|
The ultimate toolkit for Amazon API developers. Build, scale, and optimize your eCommerce integrations with our powerful suite of tools. |
|
|
</p> |
|
|
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> |
|
|
Get Started |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-3"> |
|
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-700 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
|
|
Live Demo |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> |
|
|
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="http://static.photos/technology/1200x630/42" alt="API integration illustration"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Everything you need to integrate |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Our platform provides all the tools necessary for seamless Amazon API integration. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white"> |
|
|
<i data-feather="zap"></i> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Lightning Fast Sync</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Real-time data synchronization with Amazon's APIs ensures your inventory and orders are always up-to-date. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white"> |
|
|
<i data-feather="shield"></i> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Bulletproof Security</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Enterprise-grade security with OAuth 2.0 and automatic token refresh keeps your data safe. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i data-feather="activity"></i> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Smart Alerts</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Get notified immediately about API changes, rate limits, and critical business metrics. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white"> |
|
|
<i data-feather="code"></i> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Developer Friendly</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Clean REST APIs with detailed documentation and SDKs for all major programming languages. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white"> |
|
|
<i data-feather="trending-up"></i> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Scalable Infrastructure</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Our cloud-based platform scales automatically to handle your growing business needs. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300"> |
|
|
<div class="p-5"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
|
<i data-feather="bar-chart-2"></i> |
|
|
</div> |
|
|
<div class="mt-5"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Advanced Analytics</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
Powerful reporting and analytics to help you understand your Amazon business performance. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 gap-8 md:grid-cols-4"> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-blue-400">2500+</div> |
|
|
<div class="text-gray-400 mt-2">Active Integrations</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-green-400">99.9%</div> |
|
|
<div class="text-gray-400 mt-2">Uptime</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-purple-400">1.4M</div> |
|
|
<div class="text-gray-400 mt-2">API Calls/Day</div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="text-4xl font-bold text-yellow-400">20+</div> |
|
|
<div class="text-gray-400 mt-2">Supported Countries</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Trusted by developers worldwide |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/1" alt="Testimonial"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Sarah Johnson</h4> |
|
|
<p class="text-gray-500">CTO at EcomSolutions</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600 italic"> |
|
|
"API Amazement Accelerator saved us hundreds of development hours. The documentation is crystal clear and the support team is fantastic." |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/2" alt="Testimonial"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">Michael Chen</h4> |
|
|
<p class="text-gray-500">Lead Developer at ShopFast</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600 italic"> |
|
|
"The auto-retry mechanism for API calls has been a game-changer for our business. No more worrying about rate limits!" |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="flex items-center"> |
|
|
<img class="h-12 w-12 rounded-full" src="http://static.photos/people/200x200/3" alt="Testimonial"> |
|
|
<div class="ml-4"> |
|
|
<h4 class="text-lg font-medium text-gray-900">David Rodriguez</h4> |
|
|
<p class="text-gray-500">Founder of MarketPulse</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-600 italic"> |
|
|
"From setup to production in under a week. The pre-built connectors eliminated months of development work." |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex"> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
<i data-feather="star" class="text-yellow-400 w-4 h-4"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-700"> |
|
|
<div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-extrabold text-white sm:text-4xl"> |
|
|
<span class="block">Ready to accelerate your API integration?</span> |
|
|
<span class="block">Start your free trial today.</span> |
|
|
</h2> |
|
|
<p class="mt-4 text-lg leading-6 text-blue-200"> |
|
|
No credit card required. Get started in minutes. |
|
|
</p> |
|
|
<a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 sm:w-auto"> |
|
|
Sign up for free |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 gap-8 md:grid-cols-4"> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Documentation</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">GDPR</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3> |
|
|
<ul class="mt-4 space-y-4"> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Twitter</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">GitHub</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">LinkedIn</a></li> |
|
|
<li><a href="#" class="text-base text-gray-300 hover:text-white">Facebook</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between"> |
|
|
<div class="flex space-x-6 md:order-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">Twitter</span> |
|
|
<i data-feather="twitter" class="h-6 w-6"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">GitHub</span> |
|
|
<i data-feather="github" class="h-6 w-6"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<span class="sr-only">LinkedIn</span> |
|
|
<i data-feather="linkedin" class="h-6 w-6"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> |
|
|
© 2023 API Amazement Accelerator. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
if (menu.classList.contains('hidden')) { |
|
|
menu.classList.remove('hidden'); |
|
|
} else { |
|
|
menu.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-globe", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
size: 1.00, |
|
|
backgroundColor: 0x0 |
|
|
}); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
