| <!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> |
|
|
