mirror of
https://github.com/psviderski/uncloud.git
synced 2026-08-26 19:13:34 +00:00
Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Anton Ovchinnikov
|
126a29bef9 | ||
|
Anton Ovchinnikov
|
20e85cd998 |
+301
-97
@@ -38,6 +38,44 @@
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
}
|
||||
|
||||
/* Feature cards */
|
||||
.hub-feature-card {
|
||||
padding: 1.5rem;
|
||||
border: 1px solid #e4e4e7;
|
||||
border-radius: 0.75rem;
|
||||
background: #fff;
|
||||
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hub-feature-card:hover {
|
||||
box-shadow: 0 8px 32px -8px rgba(0,0,0,0.12);
|
||||
border-color: #a1a1aa;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.hub-feature-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #f5f3ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hub-feature-grid {
|
||||
display: grid;
|
||||
gap: 1.25rem;
|
||||
max-width: 56rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.hub-feature-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -125,20 +163,19 @@
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="text-center pb-12 md:pb-16">
|
||||
<!-- Eyebrow -->
|
||||
<div class="inline-flex items-center text-sm font-medium text-zinc-500 px-4 py-0.5 mb-6 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-full">
|
||||
<span class="relative flex w-1.5 h-1.5 mr-2">
|
||||
<div class="inline-flex items-center text-base font-semibold text-violet-700 px-5 py-1.5 mb-6 border border-transparent rounded-full [background:linear-gradient(theme(colors.violet.50),theme(colors.violet.50))_padding-box,linear-gradient(120deg,theme(colors.violet.400),theme(colors.purple.300),theme(colors.violet.400))_border-box]">
|
||||
<span class="relative flex w-2 h-2 mr-2.5">
|
||||
<span class="absolute inline-flex w-full h-full rounded-full bg-violet-500 opacity-75 animate-ping"></span>
|
||||
<span class="relative inline-flex w-1.5 h-1.5 rounded-full bg-violet-500"></span>
|
||||
<span class="relative inline-flex w-2 h-2 rounded-full bg-violet-500"></span>
|
||||
</span>
|
||||
Coming soon
|
||||
</div>
|
||||
<h1 class="font-inter-tight text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-zinc-500 via-zinc-900 to-zinc-900 pb-4">
|
||||
See what's happening<br>
|
||||
<!-- TODO: highlight anything? e.g. "in production" -->
|
||||
in production
|
||||
Uncloud <span class="text-violet-600">Hub</span>:<br>
|
||||
See what's happening in production
|
||||
</h1>
|
||||
<p class="text-lg text-zinc-500 mb-8">
|
||||
<b>Uncloud Hub</b> is the UI and Grafana stack for your Uncloud clusters.<br>
|
||||
<b>Uncloud Hub</b> is the command center for your Uncloud clusters.<br>
|
||||
Get real-time metrics, logs, and alerts out of the box to catch issues early and fix
|
||||
faster.
|
||||
</p>
|
||||
@@ -146,7 +183,7 @@
|
||||
<div>
|
||||
<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow"
|
||||
href="#feedback">
|
||||
Help shape Hub
|
||||
Get early access
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
@@ -266,105 +303,65 @@
|
||||
<!-- Section heading -->
|
||||
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-16">
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
|
||||
Frustrated by the complexity of setting up observability?
|
||||
Your app is deployed. Now what?
|
||||
</h2>
|
||||
<p class="text-lg text-zinc-500">
|
||||
Observability is what killing the joy of shipping.
|
||||
Deploying is the easy part. Everything after is where most teams get stuck.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Vertical timeline: a single line carries Build, Ship, Run, the questions, and the stack. -->
|
||||
<div class="max-w-xl mx-auto">
|
||||
<div class="relative pl-10 sm:pl-12 pb-10">
|
||||
<!-- The continuous line, spanning from the first marker to just above the arrow. -->
|
||||
<span class="absolute left-3 sm:left-4 top-1.5 bottom-0 w-px bg-zinc-200" aria-hidden="true"></span>
|
||||
|
||||
<!-- Build. -->
|
||||
<div class="relative mb-10">
|
||||
<span class="absolute -left-[33px] sm:-left-[37px] top-1 w-3 h-3 rounded-full bg-emerald-500 ring-4 ring-zinc-50" aria-hidden="true"></span>
|
||||
<div class="text-xs font-semibold uppercase tracking-wider text-zinc-500">Build</div>
|
||||
<div class="text-sm text-zinc-500 mt-1">The fun part.</div>
|
||||
</div>
|
||||
|
||||
<!-- Ship. -->
|
||||
<div class="relative mb-10">
|
||||
<span class="absolute -left-[33px] sm:-left-[37px] top-1 w-3 h-3 rounded-full bg-emerald-500 ring-4 ring-zinc-50" aria-hidden="true"></span>
|
||||
<div class="text-xs font-semibold uppercase tracking-wider text-zinc-500">Ship</div>
|
||||
<div class="text-sm text-zinc-500 mt-1"><code class="font-mono text-zinc-700">uc deploy</code> and you're done.</div>
|
||||
</div>
|
||||
|
||||
<!-- Run, emphasized: filled dark marker, bolder copy. -->
|
||||
<div class="relative mb-10">
|
||||
<span class="absolute -left-[35px] sm:-left-[39px] top-0.5 w-3.5 h-3.5 rounded-full bg-zinc-900 ring-4 ring-zinc-50 shadow-sm" aria-hidden="true"></span>
|
||||
<div class="text-xs font-semibold uppercase tracking-wider text-zinc-900">Run / Monitor and observe</div>
|
||||
<p class="text-base text-zinc-900 mt-1 font-medium">This is what matters.</p>
|
||||
</div>
|
||||
|
||||
<!-- Bridge into the observability beat. New H2 + subhead carry the emotional load. -->
|
||||
<div class="mt-2 mb-6">
|
||||
<h3 class="font-inter-tight text-xl sm:text-2xl font-bold text-zinc-900 mb-2">
|
||||
Observability for developers who'd rather be shipping.
|
||||
</h3>
|
||||
<p class="text-sm text-zinc-600">
|
||||
It's not optional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- The questions: standalone list, ? as bullets. Mix of why and how to catch both ICPs. -->
|
||||
<ul class="space-y-3 mb-6 text-sm text-zinc-700">
|
||||
<li class="flex gap-3">
|
||||
<span class="font-inter-tight font-semibold text-base leading-snug text-zinc-400 shrink-0 select-none" aria-hidden="true">?</span>
|
||||
<span>Are you finding out about outages from your users?</span>
|
||||
<!-- Day-2 checklist: setup done, observability still open. -->
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="relative pb-10">
|
||||
<ul class="space-y-4">
|
||||
<!-- Setup steps: done. -->
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full bg-emerald-100 border border-emerald-300 flex items-center justify-center shrink-0" aria-hidden="true">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</span>
|
||||
<span class="text-lg text-zinc-700">Machines provisioned</span>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="font-inter-tight font-semibold text-base leading-snug text-zinc-400 shrink-0 select-none" aria-hidden="true">?</span>
|
||||
<span>When something breaks, where do you start looking?</span>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full bg-emerald-100 border border-emerald-300 flex items-center justify-center shrink-0" aria-hidden="true">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</span>
|
||||
<span class="text-lg text-zinc-700">App deployed — <code class="font-mono text-base text-zinc-900">uc deploy</code></span>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="font-inter-tight font-semibold text-base leading-snug text-zinc-400 shrink-0 select-none" aria-hidden="true">?</span>
|
||||
<span>Prometheus or VictoriaMetrics? Loki or VictoriaLogs?</span>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full bg-emerald-100 border border-emerald-300 flex items-center justify-center shrink-0" aria-hidden="true">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
|
||||
</span>
|
||||
<span class="text-lg text-zinc-700">HTTPS and custom domain</span>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="font-inter-tight font-semibold text-base leading-snug text-zinc-400 shrink-0 select-none" aria-hidden="true">?</span>
|
||||
<span>Vector, Grafana Alloy, or Fluent Bit?</span>
|
||||
|
||||
<!-- Divider -->
|
||||
<li class="pt-2 pb-1" aria-hidden="true"><hr class="border-dashed border-zinc-200"></li>
|
||||
|
||||
<!-- Day-2 operations: still open. -->
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full border-2 border-dashed border-zinc-400 flex items-center justify-center shrink-0 text-sm font-bold text-zinc-500 leading-none" aria-hidden="true">?</span>
|
||||
<span class="text-lg text-zinc-500">Services healthy right now?</span>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="font-inter-tight font-semibold text-base leading-snug text-zinc-400 shrink-0 select-none" aria-hidden="true">?</span>
|
||||
<span>Which alerts wake you for real problems, not 3 AM noise?</span>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full border-2 border-dashed border-zinc-400 flex items-center justify-center shrink-0 text-sm font-bold text-zinc-500 leading-none" aria-hidden="true">?</span>
|
||||
<span class="text-lg text-zinc-500">Logs you can search when something breaks?</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full border-2 border-dashed border-zinc-400 flex items-center justify-center shrink-0 text-sm font-bold text-zinc-500 leading-none" aria-hidden="true">?</span>
|
||||
<span class="text-lg text-zinc-500">Alerts before users notice?</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full border-2 border-dashed border-zinc-400 flex items-center justify-center shrink-0 text-sm font-bold text-zinc-500 leading-none" aria-hidden="true">?</span>
|
||||
<span class="text-lg text-zinc-500">Which deploy caused that error spike?</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-3">
|
||||
<span class="w-8 h-8 rounded-full border-2 border-dashed border-zinc-400 flex items-center justify-center shrink-0 text-sm font-bold text-zinc-500 leading-none" aria-hidden="true">?</span>
|
||||
<span class="text-lg text-zinc-500">Memory or CPU creeping up overnight?</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Connector line into the tangle. -->
|
||||
<p class="text-sm text-zinc-600 mb-6">
|
||||
And that's before you've drawn a single graph.
|
||||
</p>
|
||||
|
||||
<!-- Tangle: first-pass SVG. Overlapping bezier curves with tool name labels around a big "?". To be iterated separately. -->
|
||||
<div class="my-6">
|
||||
<svg viewBox="0 0 480 300" class="block w-full h-auto" style="max-width:100%;max-height:none;" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
||||
<g fill="none" stroke="rgb(212 212 216)" stroke-width="1.5" stroke-linecap="round">
|
||||
<path d="M 60 30 C 180 80, 100 180, 240 150 S 360 200, 420 110"/>
|
||||
<path d="M 100 260 C 200 220, 180 100, 320 130 S 420 220, 380 270"/>
|
||||
<path d="M 80 120 C 200 60, 320 200, 440 140"/>
|
||||
<path d="M 240 30 C 280 100, 160 200, 240 280"/>
|
||||
<path d="M 40 200 C 160 240, 240 80, 360 200"/>
|
||||
</g>
|
||||
<text x="240" y="195" text-anchor="middle" font-family="Inter Tight, Inter, sans-serif" font-size="140" font-weight="700" fill="rgb(228 228 231)">?</text>
|
||||
<g font-family="ui-monospace, Menlo, Monaco, monospace" font-size="11" fill="rgb(82 82 91)">
|
||||
<text x="60" y="44">prometheus</text>
|
||||
<text x="360" y="92">VictoriaMetrics</text>
|
||||
<text x="30" y="170">loki</text>
|
||||
<text x="380" y="170">grafana</text>
|
||||
<text x="90" y="250">vector</text>
|
||||
<text x="300" y="270">alertmanager</text>
|
||||
<text x="230" y="60">cadvisor</text>
|
||||
<text x="380" y="40">alloy</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Arrow capping the line, pointing into the next section. -->
|
||||
<span class="absolute left-3 sm:left-4 -bottom-1 -translate-x-1/2 translate-y-full" aria-hidden="true">
|
||||
<!-- Arrow pointing into the next section. -->
|
||||
<span class="absolute left-1/2 -bottom-1 -translate-x-1/2 translate-y-full" aria-hidden="true">
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" class="block fill-zinc-300">
|
||||
<path d="M5 10 0 0 H10 Z"/>
|
||||
</svg>
|
||||
@@ -376,6 +373,63 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dashboard overview: what Hub shows you. -->
|
||||
<section class="relative bg-white">
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="max-w-3xl mx-auto text-center pb-12 md:pb-16">
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">Your cluster, at a glance</h2>
|
||||
<p class="text-lg text-zinc-500">Hub provides you with a comprehensive view of your cluster's health and activity.</p>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:2fr 4.5fr;gap:4rem;align-items:center;max-width:72rem;margin:0 auto;">
|
||||
<!-- Left: feature list -->
|
||||
<div style="display:flex;flex-direction:column;gap:2rem;">
|
||||
<div style="display:flex;align-items:flex-start;gap:1rem;">
|
||||
<div style="width:2.75rem;height:2.75rem;border-radius:0.75rem;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:20px;max-height:20px;">
|
||||
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1rem;color:#18181b;margin:0 0 0.3rem;">Services</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.6;margin:0;">See what's running, where it's deployed, and whether it's healthy - across every machine.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:flex-start;gap:1rem;">
|
||||
<div style="width:2.75rem;height:2.75rem;border-radius:0.75rem;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:20px;max-height:20px;">
|
||||
<rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1rem;color:#18181b;margin:0 0 0.3rem;">Machines</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.6;margin:0;">See all nodes, their status, and what's running on each one. No terminal required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:flex-start;gap:1rem;">
|
||||
<div style="width:2.75rem;height:2.75rem;border-radius:0.75rem;background:#f3e8ff;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:20px;max-height:20px;">
|
||||
<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"/><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"/><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"/><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1rem;color:#18181b;margin:0 0 0.3rem;">Clusters</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.6;margin:0;">Manage multiple clusters from one place. Switch context without touching a config file.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: dashboard screenshot -->
|
||||
<div>
|
||||
<div style="border-radius:1rem;overflow:hidden;border:1px solid #e4e4e7;">
|
||||
<img src="images/dashboard-machines.png" alt="Hub cluster dashboard" style="width:100%;display:block;">
|
||||
</div>
|
||||
<p style="font-size:0.75rem;font-weight:600;color:#ef4444;text-align:center;margin:0.5rem 0 0;letter-spacing:0.05em;">PLACEHOLDER IMAGE</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="relative bg-white text-zinc-800">
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
@@ -384,11 +438,161 @@
|
||||
Untangle the observability mess and start monitoring instantly
|
||||
</h2>
|
||||
<p class="text-lg text-zinc-500">
|
||||
A hosted Grafana stack that knows about your Uncloud apps.
|
||||
Hub provides a hosted Grafana stack that knows about your Uncloud apps.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
...
|
||||
<!-- Feature blocks: 2x2 grid -->
|
||||
<div class="hub-feature-grid">
|
||||
|
||||
<!-- HTTP request metrics -->
|
||||
<div class="hub-feature-card">
|
||||
<div class="hub-feature-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:18px;max-height:18px;">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1.0625rem;color:#18181b;margin-bottom:0.5rem;letter-spacing:-0.017em;">HTTP request metrics</h3>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.65;">Response times, error rates, and traffic patterns from every service. Caddy is already collecting this. Hub just shows it to you.</p>
|
||||
</div>
|
||||
|
||||
<!-- Container logs -->
|
||||
<div class="hub-feature-card">
|
||||
<div class="hub-feature-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:18px;max-height:18px;">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1.0625rem;color:#18181b;margin-bottom:0.5rem;letter-spacing:-0.017em;">Container logs, always searchable</h3>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.65;">Filter by service, level, or time range. Jump from an anomaly in your metrics straight to the logs from that exact window.</p>
|
||||
</div>
|
||||
|
||||
<!-- Slow Postgres queries -->
|
||||
<div class="hub-feature-card">
|
||||
<div class="hub-feature-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:18px;max-height:18px;">
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3"/>
|
||||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
|
||||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1.0625rem;color:#18181b;margin-bottom:0.5rem;letter-spacing:-0.017em;">Slow Postgres queries</h3>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.65;">Find which queries are dragging down response times. Sorted by impact so you know where to look first, not a wall of query logs.</p>
|
||||
</div>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="hub-feature-card">
|
||||
<div class="hub-feature-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="max-width:18px;max-height:18px;">
|
||||
<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 style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:1.0625rem;color:#18181b;margin-bottom:0.5rem;letter-spacing:-0.017em;">Alerts on what actually affects users</h3>
|
||||
<p style="font-size:0.875rem;color:#71717a;line-height:1.65;">Get notified when error rates spike or latency climbs past your threshold. Know before a user reports it. Not after.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Roadmap -->
|
||||
<section class="relative bg-zinc-50">
|
||||
<div class="py-12 md:py-20">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
|
||||
<div class="text-center pb-10 md:pb-14">
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">What's next for Uncloud Hub</h2>
|
||||
<p class="text-lg text-zinc-500">Upcoming features to make Hub even more useful</p>
|
||||
</div>
|
||||
|
||||
<ul style="list-style:none;padding:0;margin:0;">
|
||||
|
||||
<li style="padding:1.25rem 0;border-bottom:1px solid #e4e4e7;display:flex;align-items:flex-start;gap:1rem;">
|
||||
<span style="width:0.5rem;height:0.5rem;border-radius:9999px;background:#7c3aed;flex-shrink:0;margin-top:0.45rem;"></span>
|
||||
<div>
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:0.9375rem;color:#18181b;margin:0 0 0.25rem;">Team access</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;margin:0;line-height:1.6;">Share cluster access with your team without handling SSH keys or root credentials.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="padding:1.25rem 0;border-bottom:1px solid #e4e4e7;display:flex;align-items:flex-start;gap:1rem;">
|
||||
<span style="width:0.5rem;height:0.5rem;border-radius:9999px;background:#7c3aed;flex-shrink:0;margin-top:0.45rem;"></span>
|
||||
<div>
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:0.9375rem;color:#18181b;margin:0 0 0.25rem;">Push to deploy</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;margin:0;line-height:1.6;">Deploy applications from your Git repository automatically.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li style="padding:1.25rem 0;border-bottom:1px solid #e4e4e7;display:flex;align-items:flex-start;gap:1rem;">
|
||||
<span style="width:0.5rem;height:0.5rem;border-radius:9999px;background:#7c3aed;flex-shrink:0;margin-top:0.45rem;"></span>
|
||||
<div>
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:0.9375rem;color:#18181b;margin:0 0 0.25rem;">Migration assistant</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;margin:0;line-height:1.6;">Move your data and services from the cloud and onto your own machines automagically.</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<a href="#feedback" style="display:block;margin-top:1.5rem;border:1.5px dashed #c4b5fd;border-radius:0.75rem;padding:1.25rem 1.5rem;background:#faf5ff;text-decoration:none;transition:border-color 0.2s,background 0.2s;"
|
||||
onmouseover="this.style.borderColor='#7c3aed';this.style.background='#f3e8ff';"
|
||||
onmouseout="this.style.borderColor='#c4b5fd';this.style.background='#faf5ff';">
|
||||
<p style="font-family:'Inter Tight',Inter,sans-serif;font-weight:600;font-size:0.9375rem;color:#7c3aed;margin:0 0 0.2rem;">...Add your most-needed feature</p>
|
||||
<p style="font-size:0.875rem;color:#71717a;margin:0;line-height:1.6;">Something missing from this list? Tell us about your pain points.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA: early access -->
|
||||
<section id="feedback" class="relative bg-zinc-900">
|
||||
<div class="py-16 md:py-24">
|
||||
<div class="max-w-6xl mx-auto px-4 sm:px-6">
|
||||
<div class="max-w-lg mx-auto">
|
||||
|
||||
<div class="text-center pb-10">
|
||||
<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Get early access
|
||||
</h2>
|
||||
<p class="text-lg text-zinc-400">
|
||||
Leave your email and we'll reach out with updates.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form action="/fill-form" method="POST">
|
||||
<div class="mb-4">
|
||||
<label for="hub-email" class="block text-sm font-medium text-zinc-300 mb-1.5">Your email</label>
|
||||
<input type="email" name="email" id="hub-email" required
|
||||
placeholder="you@example.com"
|
||||
style="display:block;width:100%;background:#fff;border:1px solid #3f3f46;border-radius:0.5rem;padding:0.75rem 1rem;font-size:0.875rem;color:#18181b;outline:none;box-sizing:border-box;">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="hub-message" class="block text-sm font-medium text-zinc-300 mb-1.5">
|
||||
What will you use Hub for? What features would you like to see?
|
||||
<span class="text-zinc-500 font-normal">(optional)</span>
|
||||
</label>
|
||||
<textarea name="message" id="hub-message" rows="3"
|
||||
placeholder="e.g. searchable logs across all my services, or alerts when something goes down..."
|
||||
style="display:block;width:100%;background:#fff;border:1px solid #3f3f46;border-radius:0.5rem;padding:0.75rem 1rem;font-size:0.875rem;color:#18181b;outline:none;resize:none;box-sizing:border-box;"></textarea>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="btn text-zinc-900 bg-white hover:bg-zinc-100 w-full shadow font-semibold">
|
||||
Register interest
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-center text-sm text-zinc-500 mt-6">
|
||||
Or email <a href="mailto:pasha@uncloud.run"
|
||||
class="underline text-zinc-400 hover:text-white transition">pasha@uncloud.run</a> directly.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
+112
-183
@@ -1159,36 +1159,8 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
bottom: -0.25rem;
|
||||
}
|
||||
|
||||
.-left-\[33px\]{
|
||||
left: -33px;
|
||||
}
|
||||
|
||||
.-left-\[35px\]{
|
||||
left: -35px;
|
||||
}
|
||||
|
||||
.bottom-0{
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.left-3{
|
||||
left: 0.75rem;
|
||||
}
|
||||
|
||||
.top-0{
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.top-0\.5{
|
||||
top: 0.125rem;
|
||||
}
|
||||
|
||||
.top-1{
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
.top-1\.5{
|
||||
top: 0.375rem;
|
||||
.left-1\/2{
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.top-2{
|
||||
@@ -1208,19 +1180,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-6{
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.mb-1{
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-10{
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.mb-2{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1257,6 +1220,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-2\.5{
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
|
||||
.mr-3{
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
@@ -1301,6 +1268,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.mb-1\.5{
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.block{
|
||||
display: block;
|
||||
}
|
||||
@@ -1349,14 +1320,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-3{
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.h-3\.5{
|
||||
height: 0.875rem;
|
||||
}
|
||||
|
||||
.h-4{
|
||||
height: 1rem;
|
||||
}
|
||||
@@ -1373,18 +1336,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-auto{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.h-full{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-px{
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.min-h-screen{
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -1405,14 +1360,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
width: 0.625rem;
|
||||
}
|
||||
|
||||
.w-3{
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-3\.5{
|
||||
width: 0.875rem;
|
||||
}
|
||||
|
||||
.w-4{
|
||||
width: 1rem;
|
||||
}
|
||||
@@ -1437,14 +1384,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-px{
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.max-w-2xl{
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.max-w-3xl{
|
||||
max-width: 48rem;
|
||||
}
|
||||
@@ -1453,10 +1392,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
max-width: 56rem;
|
||||
}
|
||||
|
||||
.max-w-5xl{
|
||||
max-width: 64rem;
|
||||
}
|
||||
|
||||
.max-w-6xl{
|
||||
max-width: 72rem;
|
||||
}
|
||||
@@ -1477,6 +1412,18 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
max-width: 20rem;
|
||||
}
|
||||
|
||||
.max-w-lg{
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-2xl{
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.flex-shrink{
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.shrink-0{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1531,18 +1478,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-\[20\%_20\%_1fr\]{
|
||||
grid-template-columns: 20% 20% 1fr;
|
||||
}
|
||||
|
||||
.flex-col{
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-wrap{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-start{
|
||||
align-items: flex-start;
|
||||
}
|
||||
@@ -1683,6 +1622,15 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.border-dashed{
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.border-emerald-300{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(110 231 183 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-200{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(229 231 235 / var(--tw-border-opacity));
|
||||
@@ -1702,20 +1650,25 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
border-color: rgb(228 228 231 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-zinc-300{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(212 212 216 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-zinc-700\/50{
|
||||
border-color: rgb(63 63 70 / 0.5);
|
||||
}
|
||||
|
||||
.border-zinc-400{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(161 161 170 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-emerald-100{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(209 250 229 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-emerald-500{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(16 185 129 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-100{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
|
||||
@@ -1751,16 +1704,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-zinc-200{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(228 228 231 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-zinc-300{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(212 212 216 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-zinc-50{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
|
||||
@@ -1789,31 +1732,17 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.from-zinc-300{
|
||||
--tw-gradient-from: #d4d4d8 var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(212 212 216 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-zinc-500{
|
||||
--tw-gradient-from: #71717a var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(113 113 122 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.from-\[40\%\]{
|
||||
--tw-gradient-from-position: 40%;
|
||||
}
|
||||
|
||||
.via-zinc-900{
|
||||
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to);
|
||||
}
|
||||
|
||||
.to-transparent{
|
||||
--tw-gradient-to: transparent var(--tw-gradient-to-position);
|
||||
}
|
||||
|
||||
.to-zinc-900{
|
||||
--tw-gradient-to: #18181b var(--tw-gradient-to-position);
|
||||
}
|
||||
@@ -1880,16 +1809,16 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-3{
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.px-4{
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.px-5{
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
}
|
||||
|
||||
.px-6{
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
@@ -1910,6 +1839,11 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.py-1\.5{
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.py-12{
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
@@ -1920,11 +1854,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.py-3{
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.py-4{
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
@@ -1935,6 +1864,15 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.py-16{
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.pb-1{
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-10{
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
@@ -1947,20 +1885,12 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb-8{
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pl-10{
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.pl-4{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.pr-2{
|
||||
padding-right: 0.5rem;
|
||||
.pt-2{
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-32{
|
||||
@@ -2034,12 +1964,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
line-height: 1.5715;
|
||||
}
|
||||
|
||||
.text-xl{
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.017em;
|
||||
}
|
||||
|
||||
.text-xs{
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
@@ -2057,6 +1981,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-normal{
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.uppercase{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -2070,12 +1998,12 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
|
||||
}
|
||||
|
||||
.leading-relaxed{
|
||||
line-height: 1.625;
|
||||
.leading-none{
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.leading-snug{
|
||||
line-height: 1.375;
|
||||
.leading-relaxed{
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.tracking-tight{
|
||||
@@ -2086,10 +2014,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.tracking-wider{
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.text-black{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(0 0 0 / var(--tw-text-opacity));
|
||||
@@ -2100,6 +2024,11 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
color: rgb(16 185 129 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-emerald-600{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(5 150 105 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-emerald-700{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(4 120 87 / var(--tw-text-opacity));
|
||||
@@ -2134,6 +2063,16 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.text-violet-600{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(124 58 237 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-violet-700{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(109 40 217 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-white{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
@@ -2226,17 +2165,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.ring-4{
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.ring-zinc-50{
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
|
||||
}
|
||||
|
||||
.blur{
|
||||
--tw-blur: blur(8px);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
@@ -2266,6 +2194,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.white\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.violet\.400\)\2c theme\(colors\.purple\.300\)\2c theme\(colors\.violet\.400\)\)_border-box\]{
|
||||
background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#a78bfa,#d8b4fe,#a78bfa) border-box;
|
||||
}
|
||||
|
||||
.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.white\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{
|
||||
background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box;
|
||||
}
|
||||
@@ -2278,6 +2210,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
background: linear-gradient(#27272a,#27272a) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box;
|
||||
}
|
||||
|
||||
.\[background\:linear-gradient\(theme\(colors\.violet\.50\)\2c theme\(colors\.violet\.50\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.violet\.400\)\2c theme\(colors\.purple\.300\)\2c theme\(colors\.violet\.400\)\)_border-box\]{
|
||||
background: linear-gradient(#f5f3ff,#f5f3ff) padding-box,linear-gradient(120deg,#a78bfa,#d8b4fe,#a78bfa) border-box;
|
||||
}
|
||||
|
||||
/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
|
||||
|
||||
[x-cloak=""] {
|
||||
@@ -2452,11 +2388,21 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-zinc-100:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-zinc-900:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(24 24 27 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-white:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:underline:hover{
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
@@ -2565,18 +2511,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
}
|
||||
|
||||
@media (min-width: 640px){
|
||||
.sm\:-left-\[37px\]{
|
||||
left: -37px;
|
||||
}
|
||||
|
||||
.sm\:-left-\[39px\]{
|
||||
left: -39px;
|
||||
}
|
||||
|
||||
.sm\:left-4{
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.sm\:col-span-6{
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
@@ -2639,16 +2573,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:pl-12{
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.sm\:text-2xl{
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.415;
|
||||
letter-spacing: -0.017em;
|
||||
}
|
||||
|
||||
.sm\:text-\[0\.9375rem\]{
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
@@ -2696,10 +2620,6 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:grid-cols-\[15\%_15\%_1fr\]{
|
||||
grid-template-columns: 15% 15% 1fr;
|
||||
}
|
||||
|
||||
.md\:gap-0{
|
||||
gap: 0px;
|
||||
}
|
||||
@@ -2724,6 +2644,11 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.md\:py-24{
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
.md\:pb-16{
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
@@ -2736,6 +2661,10 @@ input[type="search"]::-webkit-search-results-decoration {
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.md\:pb-14{
|
||||
padding-bottom: 3.5rem;
|
||||
}
|
||||
|
||||
.md\:text-3xl{
|
||||
font-size: 2rem;
|
||||
line-height: 1.3125;
|
||||
|
||||
Reference in New Issue
Block a user