Add landing page for ironservices.io
- Single page website showcasing IronServices - IronLicensing, IronTelemetry, IronNotify services - Multi-platform SDK showcase - CNAME for ironservices.io custom domain Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
David Friedel
parent
0ae0650da4
commit
ca08347e97
|
|
@ -0,0 +1,517 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IronServices - Developer Tools for Modern Applications</title>
|
||||
<meta name="description" content="IronServices provides developer tools for software licensing, error monitoring, and event notifications. SDKs available for .NET, JavaScript, Python, Go, Java, and Rust.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-dark: #1d4ed8;
|
||||
--gray-50: #f9fafb;
|
||||
--gray-100: #f3f4f6;
|
||||
--gray-200: #e5e7eb;
|
||||
--gray-600: #4b5563;
|
||||
--gray-700: #374151;
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--licensing-color: #7c3aed;
|
||||
--telemetry-color: #dc2626;
|
||||
--notify-color: #0891b2;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--gray-800);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: white;
|
||||
border-bottom: 1px solid var(--gray-200);
|
||||
padding: 16px 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--gray-600);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.github-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--gray-900);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
background: var(--gray-700);
|
||||
}
|
||||
|
||||
.github-link svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, white 0%, var(--gray-50) 100%);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 20px;
|
||||
color: var(--gray-600);
|
||||
max-width: 600px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: var(--gray-700);
|
||||
border: 1px solid var(--gray-200);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: var(--gray-300);
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
/* Services */
|
||||
.services {
|
||||
padding: 80px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title p {
|
||||
font-size: 18px;
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
border: 1px solid var(--gray-200);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.service-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-card.licensing .service-icon {
|
||||
background: var(--licensing-color);
|
||||
}
|
||||
|
||||
.service-card.telemetry .service-icon {
|
||||
background: var(--telemetry-color);
|
||||
}
|
||||
|
||||
.service-card.notify .service-icon {
|
||||
background: var(--notify-color);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--gray-900);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: var(--gray-600);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.service-features {
|
||||
list-style: none;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.service-features li {
|
||||
padding: 8px 0;
|
||||
color: var(--gray-700);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.service-features li::before {
|
||||
content: "✓";
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.service-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.service-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* SDKs */
|
||||
.sdks {
|
||||
padding: 80px 0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.sdk-grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sdk-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
background: var(--gray-50);
|
||||
min-width: 120px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.sdk-item:hover {
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
.sdk-item img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.sdk-item span {
|
||||
font-weight: 500;
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 48px 0;
|
||||
background: var(--gray-900);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--gray-400);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
color: var(--gray-400);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="container header-content">
|
||||
<a href="/" class="logo">Iron<span>Services</span></a>
|
||||
<nav>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#sdks">SDKs</a></li>
|
||||
<li><a href="https://github.com/IronServices">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="https://github.com/IronServices" class="github-link">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Developer Tools for<br>Modern Applications</h1>
|
||||
<p>Everything you need to license, monitor, and engage with your users. Multi-platform SDKs for all major languages.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#services" class="btn btn-primary">Explore Services</a>
|
||||
<a href="https://github.com/IronServices" class="btn btn-secondary">View on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="services" id="services">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Our Services</h2>
|
||||
<p>Three powerful services to help you build better software</p>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
<div class="service-card licensing">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
||||
</div>
|
||||
<h3>IronLicensing</h3>
|
||||
<p>Software licensing and activation made simple. Protect your applications with flexible license management.</p>
|
||||
<ul class="service-features">
|
||||
<li>License key validation & activation</li>
|
||||
<li>Feature-based licensing</li>
|
||||
<li>Trial management</li>
|
||||
<li>In-app purchase flows</li>
|
||||
<li>Offline grace period support</li>
|
||||
</ul>
|
||||
<a href="https://ironlicensing.com" class="service-link">Learn more →</a>
|
||||
</div>
|
||||
|
||||
<div class="service-card telemetry">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
</div>
|
||||
<h3>IronTelemetry</h3>
|
||||
<p>Error monitoring and crash reporting for your applications. Know when things break before your users tell you.</p>
|
||||
<ul class="service-features">
|
||||
<li>Exception capture & stack traces</li>
|
||||
<li>User journey tracking</li>
|
||||
<li>Breadcrumb trails</li>
|
||||
<li>Performance monitoring</li>
|
||||
<li>Offline queue with retry</li>
|
||||
</ul>
|
||||
<a href="https://irontelemetry.com" class="service-link">Learn more →</a>
|
||||
</div>
|
||||
|
||||
<div class="service-card notify">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
</div>
|
||||
<h3>IronNotify</h3>
|
||||
<p>Event notifications and alerts for your applications. Keep your users and team informed in real-time.</p>
|
||||
<ul class="service-features">
|
||||
<li>Multi-channel notifications</li>
|
||||
<li>Customizable severity levels</li>
|
||||
<li>Action buttons & deep links</li>
|
||||
<li>Real-time WebSocket support</li>
|
||||
<li>Offline queue with persistence</li>
|
||||
</ul>
|
||||
<a href="https://ironnotify.com" class="service-link">Learn more →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sdks" id="sdks">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Multi-Platform SDKs</h2>
|
||||
<p>Native SDKs for all major platforms and languages</p>
|
||||
</div>
|
||||
<div class="sdk-grid">
|
||||
<div class="sdk-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/dotnetcore/dotnetcore-original.svg" alt=".NET">
|
||||
<span>.NET</span>
|
||||
</div>
|
||||
<div class="sdk-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg" alt="JavaScript">
|
||||
<span>JavaScript</span>
|
||||
</div>
|
||||
<div class="sdk-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" alt="Python">
|
||||
<span>Python</span>
|
||||
</div>
|
||||
<div class="sdk-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original-wordmark.svg" alt="Go">
|
||||
<span>Go</span>
|
||||
</div>
|
||||
<div class="sdk-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg" alt="Java">
|
||||
<span>Java</span>
|
||||
</div>
|
||||
<div class="sdk-item">
|
||||
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/rust/rust-plain.svg" alt="Rust">
|
||||
<span>Rust</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container footer-content">
|
||||
<div class="footer-logo">IronServices</div>
|
||||
<ul class="footer-links">
|
||||
<li><a href="https://ironlicensing.com">IronLicensing</a></li>
|
||||
<li><a href="https://irontelemetry.com">IronTelemetry</a></li>
|
||||
<li><a href="https://ironnotify.com">IronNotify</a></li>
|
||||
<li><a href="https://github.com/IronServices">GitHub</a></li>
|
||||
</ul>
|
||||
<div class="footer-copy">© 2024 IronServices. All rights reserved.</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue