| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SxHub - Streamlined Dev Nexus</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <link rel="stylesheet" href="style.css"> |
| <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> |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="components/hero.js"></script> |
| <script src="components/feature-card.js"></script> |
| <script src="components/api-showcase.js"></script> |
| </head> |
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 text-gray-800 font-sans min-h-screen flex flex-col"> |
| <custom-navbar></custom-navbar> |
|
|
| <main class="flex-grow container mx-auto px-4 py-8 md:px-6 lg:px-8"> |
| <custom-hero></custom-hero> |
|
|
| <section class="mt-16 mb-20"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-2">Why SxHub? 🤔</h2> |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-10">A curated collection of tools and APIs to supercharge your development workflow.</p> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"> |
| <custom-feature-card |
| icon="zap" |
| title="Lightning Fast" |
| description="Access high-performance public APIs with minimal latency. Built for speed and efficiency." |
| color="blue" |
| ></custom-feature-card> |
| <custom-feature-card |
| icon="shield" |
| title="Reliable & Secure" |
| description="All APIs are vetted for stability and security. Focus on building, we handle the rest." |
| color="green" |
| ></custom-feature-card> |
| <custom-feature-card |
| icon="code" |
| title="Developer First" |
| description="Clean documentation, intuitive examples, and tools that developers actually love to use." |
| color="purple" |
| ></custom-feature-card> |
| </div> |
| </section> |
|
|
| <section class="mt-16 mb-20"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 mb-2">Featured APIs 🚀</h2> |
| <p class="text-gray-600 text-center max-w-2xl mx-auto mb-10">Explore a hand-picked selection from the vast public API ecosystem.</p> |
| <div class="space-y-8"> |
| <custom-api-showcase |
| api-name="Random User Generator" |
| category="Data Mocking" |
| description="Generate realistic user profiles for testing and development. Perfect for populating UIs." |
| endpoint="https://randomuser.me/api/" |
| docs-url="https://randomuser.me/documentation" |
| ></custom-api-showcase> |
| <custom-api-showcase |
| api-name="Dog CEO" |
| category="Fun & Images" |
| description="The internet's biggest collection of open source dog pictures. Woof!" |
| endpoint="https://dog.ceo/api/breeds/image/random" |
| docs-url="https://dog.ceo/dog-api/" |
| ></custom-api-showcase> |
| <custom-api-showcase |
| api-name="OpenWeatherMap" |
| category="Weather Data" |
| description="Current weather and forecast data for any location on Earth. Powerful and reliable." |
| endpoint="https://api.openweathermap.org/data/2.5/weather" |
| docs-url="https://openweathermap.org/api" |
| ></custom-api-showcase> |
| </div> |
| </section> |
|
|
| <section class="mt-20 mb-16 p-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl shadow-2xl text-white"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Build Something Awesome? 🛠️</h2> |
| <p class="text-xl mb-8 opacity-90">Join thousands of developers using SxHub to discover and integrate powerful APIs into their projects.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="/explore" class="bg-white text-blue-600 hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"> |
| Explore All APIs |
| </a> |
| <a href="/docs" class="bg-transparent border-2 border-white hover:bg-white/20 font-semibold py-3 px-8 rounded-lg transition duration-300"> |
| <i data-feather="book" class="inline mr-2 w-5 h-5"></i> Read Docs |
| </a> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
