Oliver
2626 lines
115 KiB
HTML
2626 lines
115 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
||
<!-- ── SEO: Primary ────────────────────────────────────────────── -->
|
||
<title>Derez.ai — Create Your AI Agent in 5 Minutes | Agent Hosting</title>
|
||
<meta name="description" content="Deploy your own AI agent in under 5 minutes. From signup to a working agent — $9.50/mo ($2 startup discount). Choose Hermes or OpenClaw. Full SSH access, automatic backups, and a powerful dashboard included." />
|
||
<meta name="keywords" content="create AI agent, AI agent hosting, deploy AI agent, hermes agent, openclaw agent, managed agent hosting, AI agent dashboard" />
|
||
<meta name="robots" content="index, follow" />
|
||
<link rel="canonical" href="https://derez.ai" />
|
||
|
||
<!-- ── SEO: Open Graph ─────────────────────────────────────────── -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:url" content="https://derez.ai" />
|
||
<meta property="og:title" content="Derez.ai — Create Your AI Agent in 5 Minutes" />
|
||
<meta property="og:description" content="Deploy your own AI agent in under 5 minutes. $9.50/mo ($2 startup discount). Full SSH access, backups, dashboard. Choose Hermes or OpenClaw." />
|
||
<meta property="og:image" content="https://derez.ai/og-image.png" />
|
||
<meta property="og:site_name" content="Derez.ai" />
|
||
|
||
<!-- ── SEO: Twitter ────────────────────────────────────────────── -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Derez.ai — Create Your AI Agent in 5 Minutes" />
|
||
<meta name="twitter:description" content="Deploy your own AI agent in under 5 minutes. $9.50/mo ($2 startup discount). Full SSH access, backups, dashboard." />
|
||
|
||
<!-- ── Structured Data (JSON-LD) ────────────────────────────────── -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "Derez.ai",
|
||
"applicationCategory": "BusinessApplication",
|
||
"operatingSystem": "Linux",
|
||
"description": "Managed AI agent hosting platform. Deploy Hermes or OpenClaw agents in under 5 minutes with full SSH access, automatic backups, and a management dashboard.",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "9.50",
|
||
"priceCurrency": "USD",
|
||
"priceValidUntil": "2027-12-31"
|
||
},
|
||
"aggregateRating": {
|
||
"@type": "AggregateRating",
|
||
"ratingValue": "4.8",
|
||
"ratingCount": "127"
|
||
},
|
||
"featureList": [
|
||
"Deploy AI agent in under 5 minutes",
|
||
"Hermes or OpenClaw agent options",
|
||
"Full SSH access to dedicated instance",
|
||
"One-click backups",
|
||
"Management dashboard",
|
||
"API key management",
|
||
"Support chat"
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<!-- ── Breadcrumb structured data ─────────────────────────────── -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [
|
||
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://derez.ai" }
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<!-- ── FAQ structured data ─────────────────────────────────────── -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "FAQPage",
|
||
"mainEntity": [
|
||
{
|
||
"@type": "Question",
|
||
"name": "How fast can I create an AI agent?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "From signup to a working agent in under 5 minutes. Select your agent type, complete the Stripe payment, configure your prompt, and your agent is live."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "What AI agents are available?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "You can choose between Hermes Agent (by Nous Research) or OpenClaw. Both run on dedicated Linux instances with full SSH access."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "How much does it cost?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Each agent instance is $9.50 USD per month with a $2.00 startup discount (you pay $7.50/mo). Monthly termination. Coupon codes are available for $5 OpenRouter credits."
|
||
}
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* ═══════════════════════════════════════════════════════════════
|
||
DESIGN TOKENS (matches app.derez.ai design system)
|
||
═══════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
--bg: #0f1117;
|
||
--bg-card: #1a1d27;
|
||
--bg-inner: #141720;
|
||
--bg-hover: #22263a;
|
||
--bg-input: #12151f;
|
||
--border: #2a2f45;
|
||
--border-hi: rgba(79, 142, 247, 0.28);
|
||
--accent: #4f8ef7;
|
||
--accent-dim: #1a2d5e;
|
||
--danger: #e05252;
|
||
--danger-dim: #5a1f1f;
|
||
--success: #3fc97e;
|
||
--warning: #f0a04b;
|
||
--text: #e4e8f5;
|
||
--text-muted: #7a82a0;
|
||
--radius: 8px;
|
||
--radius-card: 18px;
|
||
--shadow: 0 28px 72px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(79, 142, 247, 0.06);
|
||
--max-width: 1120px;
|
||
}
|
||
|
||
/* ── Reset ───────────────────────────────────────────────── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
body {
|
||
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Ambient glow */
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(ellipse 60% 50% at 25% 30%, rgba(79, 142, 247, 0.07) 0%, transparent 70%),
|
||
radial-gradient(ellipse 50% 60% at 75% 70%, rgba(100, 50, 200, 0.05) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* ── Typography ──────────────────────────────────────────── */
|
||
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
|
||
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
|
||
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 0.6em; }
|
||
h3 { font-size: 1.2rem; }
|
||
p { color: var(--text-muted); }
|
||
a { color: var(--accent); text-decoration: none; }
|
||
a:hover { text-decoration: underline; }
|
||
|
||
.container {
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* ── Buttons ─────────────────────────────────────────────── */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 10px 22px;
|
||
border-radius: var(--radius);
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
text-decoration: none;
|
||
transition: opacity 0.15s, background 0.15s, transform 0.1s;
|
||
}
|
||
.btn:hover { opacity: 0.85; text-decoration: none; }
|
||
.btn:active { transform: scale(0.97); }
|
||
|
||
.btn-primary {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
}
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.btn-ghost:hover {
|
||
background: var(--bg-hover);
|
||
border-color: var(--accent);
|
||
}
|
||
.btn-lg {
|
||
padding: 14px 32px;
|
||
font-size: 16px;
|
||
border-radius: 10px;
|
||
}
|
||
.btn-block {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
HEADER / NAV
|
||
══════════════════════════════════════════════════════════ */
|
||
.site-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: rgba(15, 17, 23, 0.85);
|
||
backdrop-filter: blur(14px);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: background 0.3s;
|
||
}
|
||
|
||
.site-header .container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 60px;
|
||
}
|
||
|
||
.site-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-weight: 700;
|
||
font-size: 17px;
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
flex-shrink: 0;
|
||
}
|
||
.site-logo:hover { text-decoration: none; }
|
||
|
||
.site-logo-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 10px;
|
||
background: var(--accent-dim);
|
||
border: 1px solid rgba(79, 142, 247, 0.3);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
list-style: none;
|
||
}
|
||
.nav-links a {
|
||
padding: 6px 14px;
|
||
border-radius: var(--radius);
|
||
color: var(--text-muted);
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: color 0.15s, background 0.15s;
|
||
}
|
||
.nav-links a:hover {
|
||
color: var(--text);
|
||
background: var(--bg-hover);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.btn-login {
|
||
background: transparent;
|
||
color: var(--text);
|
||
border: 1px solid var(--border);
|
||
padding: 7px 18px;
|
||
border-radius: var(--radius);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.btn-login:hover {
|
||
border-color: var(--accent);
|
||
color: var(--accent);
|
||
background: var(--accent-dim);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.btn-signup-header {
|
||
padding: 7px 18px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* Mobile hamburger */
|
||
.hamburger {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
background: none;
|
||
border: none;
|
||
cursor: pointer;
|
||
padding: 6px;
|
||
}
|
||
.hamburger span {
|
||
display: block;
|
||
width: 22px;
|
||
height: 2px;
|
||
background: var(--text);
|
||
border-radius: 2px;
|
||
transition: transform 0.2s, opacity 0.2s;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
HERO
|
||
══════════════════════════════════════════════════════════ */
|
||
.hero {
|
||
padding: 140px 0 80px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: -30%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 90%;
|
||
height: 140%;
|
||
background: radial-gradient(ellipse at center, rgba(79, 142, 247, 0.06) 0%, transparent 65%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 6px 16px;
|
||
background: var(--accent-dim);
|
||
border: 1px solid rgba(79, 142, 247, 0.3);
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--accent);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero h1 {
|
||
max-width: 820px;
|
||
margin: 0 auto 20px;
|
||
}
|
||
.hero h1 .highlight {
|
||
background: linear-gradient(135deg, var(--accent), #7bb0ff);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero-sub {
|
||
font-size: clamp(1rem, 2vw, 1.2rem);
|
||
max-width: 620px;
|
||
margin: 0 auto 36px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero-stat {
|
||
text-align: center;
|
||
}
|
||
.hero-stat-num {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
color: var(--text);
|
||
}
|
||
.hero-stat-label {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
SECTION COMMON
|
||
══════════════════════════════════════════════════════════ */
|
||
section {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
max-width: 640px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.section-sub {
|
||
text-align: center;
|
||
max-width: 560px;
|
||
margin: 0 auto 50px;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
VIDEO SLIDER (Speed Run)
|
||
══════════════════════════════════════════════════════════ */
|
||
.video-slider-wrapper {
|
||
position: relative;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.video-slider {
|
||
display: flex;
|
||
gap: 20px;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
padding: 8px 4px;
|
||
}
|
||
.video-slider::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.video-slide {
|
||
flex: 0 0 calc((100% - 40px) / 3);
|
||
min-width: 260px;
|
||
scroll-snap-align: start;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
overflow: hidden;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.video-slide:hover {
|
||
border-color: var(--border-hi);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.video-slide a {
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: block;
|
||
}
|
||
.video-slide a:hover {
|
||
text-decoration: none;
|
||
}
|
||
|
||
.video-thumb {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 16 / 9;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-color: var(--bg-inner);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.video-thumb .play-btn {
|
||
width: 54px;
|
||
height: 54px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s, transform 0.2s;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
.video-slide:hover .play-btn {
|
||
background: var(--accent);
|
||
border-color: var(--accent);
|
||
transform: scale(1.08);
|
||
}
|
||
.video-thumb .play-btn svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
fill: #fff;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.video-info {
|
||
padding: 14px 16px 18px;
|
||
}
|
||
.video-info h4 {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
margin-bottom: 4px;
|
||
line-height: 1.4;
|
||
}
|
||
.video-info .video-desc {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.slider-arrow {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
z-index: 10;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-card);
|
||
color: var(--text);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
transition: background 0.15s, border-color 0.15s;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
}
|
||
.video-slider-wrapper:hover .slider-arrow {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
.slider-arrow:hover {
|
||
background: var(--bg-hover);
|
||
border-color: var(--accent);
|
||
}
|
||
.slider-arrow-prev {
|
||
left: -20px;
|
||
}
|
||
.slider-arrow-next {
|
||
right: -20px;
|
||
}
|
||
|
||
.slider-dots {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
margin-top: 24px;
|
||
}
|
||
.slider-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: var(--border);
|
||
cursor: pointer;
|
||
transition: background 0.2s, transform 0.2s;
|
||
padding: 0;
|
||
}
|
||
.slider-dot.active {
|
||
background: var(--accent);
|
||
transform: scale(1.3);
|
||
}
|
||
.slider-dot:hover {
|
||
background: var(--text-muted);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.video-slide {
|
||
flex: 0 0 calc((100% - 20px) / 2);
|
||
min-width: 0;
|
||
}
|
||
.slider-arrow {
|
||
display: none;
|
||
}
|
||
}
|
||
@media (max-width: 480px) {
|
||
.video-slide {
|
||
flex: 0 0 85%;
|
||
}
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
SPEEDRUN (How It Works) — kept for reference
|
||
══════════════════════════════════════════════════════════ */
|
||
.steps {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
counter-reset: step;
|
||
}
|
||
|
||
.step-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
padding: 32px 28px;
|
||
position: relative;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.step-card:hover {
|
||
border-color: var(--border-hi);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.step-number {
|
||
font-size: 2.4rem;
|
||
font-weight: 800;
|
||
color: rgba(79, 142, 247, 0.15);
|
||
line-height: 1;
|
||
margin-bottom: 12px;
|
||
}
|
||
.step-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 12px;
|
||
background: var(--accent-dim);
|
||
border: 1px solid rgba(79, 142, 247, 0.25);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent);
|
||
margin-bottom: 16px;
|
||
}
|
||
.step-card h3 {
|
||
margin-bottom: 8px;
|
||
font-size: 1.1rem;
|
||
}
|
||
.step-card p {
|
||
font-size: 13px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
FEATURES
|
||
══════════════════════════════════════════════════════════ */
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-inner);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
padding: 28px 24px;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
position: relative;
|
||
}
|
||
.feature-card.unique {
|
||
border-color: var(--accent);
|
||
background: linear-gradient(180deg, rgba(79, 142, 247, 0.04) 0%, var(--bg-inner) 100%);
|
||
}
|
||
.feature-badge {
|
||
position: absolute;
|
||
top: -8px;
|
||
right: 16px;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
padding: 3px 12px;
|
||
border-radius: 20px;
|
||
}
|
||
.feature-card:hover {
|
||
border-color: var(--border-hi);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: var(--accent-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--accent);
|
||
margin-bottom: 14px;
|
||
}
|
||
.feature-card h3 {
|
||
font-size: 15px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.feature-card p {
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
AGENT OPTIONS
|
||
══════════════════════════════════════════════════════════ */
|
||
.agent-options {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.agent-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
padding: 36px 32px;
|
||
text-align: center;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
position: relative;
|
||
}
|
||
.agent-card:hover {
|
||
border-color: var(--border-hi);
|
||
transform: translateY(-3px);
|
||
}
|
||
.agent-card.featured {
|
||
border-color: var(--accent);
|
||
background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, var(--bg-card) 100%);
|
||
}
|
||
.agent-card.featured::before {
|
||
content: "Most Popular";
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
padding: 3px 16px;
|
||
border-radius: 20px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.agent-card h3 {
|
||
font-size: 1.2rem;
|
||
margin-bottom: 4px;
|
||
}
|
||
.agent-tagline {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 14px;
|
||
}
|
||
.agent-desc {
|
||
font-size: 13px;
|
||
line-height: 1.65;
|
||
margin-bottom: 12px;
|
||
}
|
||
.agent-features {
|
||
list-style: none;
|
||
text-align: left;
|
||
margin: 16px 0;
|
||
}
|
||
.agent-features li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
padding: 5px 0;
|
||
color: var(--text-muted);
|
||
}
|
||
.agent-features li svg {
|
||
flex-shrink: 0;
|
||
margin-top: 2px;
|
||
color: var(--success);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
PRICING
|
||
══════════════════════════════════════════════════════════ */
|
||
.pricing-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
align-items: start;
|
||
}
|
||
.pricing-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
padding: 36px 28px;
|
||
text-align: center;
|
||
box-shadow: var(--shadow);
|
||
position: relative;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
.pricing-card.featured {
|
||
border-color: var(--accent);
|
||
background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, var(--bg-card) 100%);
|
||
transform: scale(1.04);
|
||
}
|
||
.pricing-badge {
|
||
position: absolute;
|
||
top: -11px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--accent);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
padding: 3px 18px;
|
||
border-radius: 20px;
|
||
}
|
||
.pricing-plan-name {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--accent);
|
||
margin-bottom: 6px;
|
||
}
|
||
.pricing-amount {
|
||
font-size: 3rem;
|
||
font-weight: 800;
|
||
color: var(--text);
|
||
line-height: 1;
|
||
}
|
||
.pricing-amount .pricing-currency { font-size: 1.4rem; vertical-align: super; }
|
||
.pricing-period {
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
}
|
||
.pricing-yearly-bonus {
|
||
display: none;
|
||
font-size: 12px;
|
||
color: var(--success);
|
||
font-weight: 600;
|
||
margin-top: 4px;
|
||
}
|
||
.pricing-yearly-bonus.show { display: block; }
|
||
.pricing-plan-desc {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
margin: 10px 0 14px;
|
||
line-height: 1.5;
|
||
}
|
||
.pricing-plan-quota {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
padding: 8px 0;
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
margin-bottom: 14px;
|
||
}
|
||
.pricing-perks {
|
||
list-style: none;
|
||
text-align: left;
|
||
margin: 14px 0 24px;
|
||
}
|
||
.pricing-perks li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 4px 0;
|
||
font-size: 13px;
|
||
color: var(--text);
|
||
}
|
||
.pricing-perks li svg {
|
||
flex-shrink: 0;
|
||
margin-top: 3px;
|
||
color: var(--success);
|
||
}
|
||
.pricing-perks li .plus-icon {
|
||
color: var(--success);
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
line-height: 1;
|
||
margin-top: 3px;
|
||
flex-shrink: 0;
|
||
}
|
||
.pricing-perks li.new-feature { color: var(--text); }
|
||
.pricing-perks li.muted {
|
||
color: var(--text-muted);
|
||
}
|
||
.pricing-perks li.muted svg {
|
||
color: var(--text-muted);
|
||
opacity: 0.4;
|
||
}
|
||
|
||
/* ── Billing toggle ─────────────────────────────── */
|
||
.pricing-billing-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
margin-bottom: 36px;
|
||
}
|
||
.billing-label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
transition: color 0.2s;
|
||
}
|
||
.billing-label.active { color: var(--text); }
|
||
.toggle-switch {
|
||
position: relative;
|
||
width: 48px;
|
||
height: 26px;
|
||
cursor: pointer;
|
||
}
|
||
.toggle-switch input {
|
||
opacity: 0;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
.toggle-slider {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--border);
|
||
border-radius: 26px;
|
||
transition: background 0.2s;
|
||
}
|
||
.toggle-slider::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 3px;
|
||
top: 3px;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: var(--text);
|
||
transition: transform 0.2s;
|
||
}
|
||
.toggle-switch input:checked + .toggle-slider {
|
||
background: var(--accent);
|
||
}
|
||
.toggle-switch input:checked + .toggle-slider::before {
|
||
transform: translateX(22px);
|
||
background: #fff;
|
||
}
|
||
.billing-save-badge {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
color: var(--success);
|
||
background: rgba(63, 201, 126, 0.12);
|
||
padding: 2px 10px;
|
||
border-radius: 20px;
|
||
display: none;
|
||
}
|
||
.billing-save-badge.show { display: inline; }
|
||
|
||
@media (max-width: 900px) {
|
||
.pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
|
||
.pricing-card.featured { transform: none; }
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
FAQ
|
||
══════════════════════════════════════════════════════════ */
|
||
.faq-list {
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.faq-question {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 18px 0;
|
||
background: none;
|
||
border: none;
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
gap: 16px;
|
||
transition: color 0.15s;
|
||
}
|
||
.faq-question:hover { color: var(--accent); }
|
||
.faq-question svg {
|
||
flex-shrink: 0;
|
||
transition: transform 0.2s;
|
||
color: var(--text-muted);
|
||
}
|
||
.faq-question.open svg {
|
||
transform: rotate(180deg);
|
||
}
|
||
.faq-answer {
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: max-height 0.25s ease, padding 0.25s ease;
|
||
font-size: 14px;
|
||
color: var(--text-muted);
|
||
line-height: 1.7;
|
||
}
|
||
.faq-answer.open {
|
||
max-height: 300px;
|
||
padding: 0 0 18px;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
CTA
|
||
══════════════════════════════════════════════════════════ */
|
||
.cta-section {
|
||
text-align: center;
|
||
padding: 80px 0 100px;
|
||
}
|
||
.cta-section h2 {
|
||
max-width: 560px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
.cta-section p {
|
||
max-width: 480px;
|
||
margin: 0 auto 30px;
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
FOOTER
|
||
══════════════════════════════════════════════════════════ */
|
||
.site-footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 40px 0;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
.site-footer .container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
}
|
||
.site-footer a {
|
||
color: var(--text-muted);
|
||
}
|
||
.site-footer a:hover {
|
||
color: var(--text);
|
||
}
|
||
.footer-links {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* ── Signup plan badges ──────────────────────────── */
|
||
.signup-pricing-plans {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 8px;
|
||
}
|
||
.signup-plan {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: var(--bg-inner);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 10px 18px;
|
||
min-width: 90px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.signup-plan.featured {
|
||
border-color: var(--accent);
|
||
background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, var(--bg-inner) 100%);
|
||
}
|
||
.signup-plan-name {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--accent);
|
||
}
|
||
.signup-plan-price {
|
||
font-size: 20px;
|
||
font-weight: 800;
|
||
color: var(--text);
|
||
}
|
||
.signup-pricing-badge .signup-pricing-term {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
SIGNUP SECTION (inline form)
|
||
══════════════════════════════════════════════════════════ */
|
||
.signup-section {
|
||
padding: 80px 0 100px;
|
||
}
|
||
|
||
.signup-card {
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-hi);
|
||
border-radius: var(--radius-card);
|
||
padding: 36px 32px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
|
||
.signup-pricing-badge {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 6px;
|
||
margin-bottom: 20px;
|
||
padding: 16px 20px;
|
||
background: var(--accent-dim);
|
||
border: 1px solid rgba(79, 142, 247, 0.35);
|
||
border-radius: 12px;
|
||
}
|
||
.signup-pricing-amount {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
color: var(--text);
|
||
letter-spacing: -0.3px;
|
||
line-height: 1;
|
||
}
|
||
.signup-pricing-amount span {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--text-muted);
|
||
}
|
||
.signup-pricing-term {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.signup-coupon-box { margin-bottom: 18px; }
|
||
.signup-coupon-input-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.signup-coupon-input {
|
||
width: 100%;
|
||
padding: 8px 36px 8px 12px;
|
||
background: var(--bg-input);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
outline: none;
|
||
transition: border-color 0.15s;
|
||
box-sizing: border-box;
|
||
}
|
||
.signup-coupon-input::placeholder { color: var(--text-muted); }
|
||
.signup-coupon-input:focus { border-color: var(--accent); }
|
||
.signup-coupon-input.signup-coupon-input-error { border-color: var(--danger); }
|
||
.signup-coupon-spinner {
|
||
position: absolute;
|
||
right: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.signup-coupon-error {
|
||
margin-top: 5px;
|
||
font-size: 11px;
|
||
color: var(--danger);
|
||
}
|
||
.signup-coupon-success {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 8px;
|
||
padding: 8px 12px;
|
||
background: rgba(63, 201, 126, 0.1);
|
||
border: 1px solid rgba(63, 201, 126, 0.3);
|
||
border-radius: var(--radius);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--success);
|
||
}
|
||
|
||
.signup-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.signup-form-row {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.signup-form-row .form-group {
|
||
flex: 1;
|
||
min-width: 130px;
|
||
}
|
||
.signup-form .auth-error,
|
||
.signup-form .auth-success {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.signup-card { padding: 24px 18px; }
|
||
.signup-form-row { flex-direction: column; }
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
RESPONSIVE
|
||
══════════════════════════════════════════════════════════ */
|
||
@media (max-width: 900px) {
|
||
.steps { grid-template-columns: 1fr; }
|
||
.features-grid { grid-template-columns: 1fr 1fr; }
|
||
.agent-options { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
.nav-links { display: none; }
|
||
.hamburger { display: flex; }
|
||
|
||
.nav-links.mobile-open {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: fixed;
|
||
top: 60px;
|
||
left: 0;
|
||
right: 0;
|
||
background: var(--bg);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 12px 24px 20px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.features-grid { grid-template-columns: 1fr; }
|
||
.hero-stats { gap: 24px; }
|
||
.hero { padding: 110px 0 60px; }
|
||
section { padding: 60px 0; }
|
||
.pricing-card { padding: 32px 24px; }
|
||
|
||
.site-footer .container {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* ── Chat Widget (floating bottom-right) ────────────── */
|
||
.chat-fab {
|
||
position: fixed;
|
||
bottom: 24px;
|
||
right: 24px;
|
||
z-index: 9999;
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 28px;
|
||
background: var(--accent);
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 24px rgba(79, 142, 247, 0.35);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: #fff;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.chat-fab:hover {
|
||
transform: scale(1.08);
|
||
box-shadow: 0 6px 32px rgba(79, 142, 247, 0.5);
|
||
}
|
||
.chat-fab.open {
|
||
transform: scale(0.9);
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
box-shadow: none;
|
||
}
|
||
.chat-widget {
|
||
position: fixed;
|
||
bottom: 92px;
|
||
right: 24px;
|
||
z-index: 9998;
|
||
width: 360px;
|
||
max-width: calc(100vw - 48px);
|
||
height: 460px;
|
||
max-height: calc(100vh - 140px);
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: 18px;
|
||
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(12px) scale(0.96);
|
||
transform-origin: bottom right;
|
||
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
|
||
}
|
||
.chat-widget.open {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
.chat-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 16px 18px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.chat-header-avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--accent-dim);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
.chat-header-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.chat-header-name {
|
||
font-weight: 600;
|
||
font-size: 13.5px;
|
||
color: var(--text);
|
||
}
|
||
.chat-header-status {
|
||
font-size: 11px;
|
||
color: var(--success);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.chat-header-status::before {
|
||
content: "";
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--success);
|
||
display: inline-block;
|
||
}
|
||
.chat-header-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
padding: 4px;
|
||
line-height: 1;
|
||
border-radius: 6px;
|
||
transition: color 0.15s, background 0.15s;
|
||
}
|
||
.chat-header-close:hover {
|
||
color: var(--text);
|
||
background: var(--bg-hover);
|
||
}
|
||
.chat-msgs {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 16px 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.chat-msg {
|
||
max-width: 85%;
|
||
padding: 9px 14px;
|
||
border-radius: 14px;
|
||
line-height: 1.45;
|
||
word-wrap: break-word;
|
||
font-size: 13px;
|
||
animation: msgIn 0.2s ease;
|
||
}
|
||
@keyframes msgIn {
|
||
from { opacity: 0; transform: translateY(4px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.chat-msg-bot {
|
||
align-self: flex-start;
|
||
background: var(--bg-inner);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
.chat-msg-user {
|
||
align-self: flex-end;
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
.chat-msg-thinking {
|
||
align-self: flex-start;
|
||
background: var(--bg-inner);
|
||
border-bottom-left-radius: 4px;
|
||
opacity: 0.6;
|
||
}
|
||
.chat-input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 18px 16px;
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
.chat-input-box {
|
||
flex: 1;
|
||
min-width: 0;
|
||
height: 40px;
|
||
padding: 0 14px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 20px;
|
||
outline: none;
|
||
background: var(--bg-inner);
|
||
font: inherit;
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.chat-input-box:focus {
|
||
border-color: var(--accent);
|
||
}
|
||
.chat-input-box::placeholder {
|
||
color: var(--text-muted);
|
||
}
|
||
.chat-send-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
border: none;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
transition: opacity 0.15s, transform 0.1s;
|
||
}
|
||
.chat-send-btn:hover { opacity: 0.85; }
|
||
.chat-send-btn:active { transform: scale(0.92); }
|
||
.chat-send-btn:disabled {
|
||
opacity: 0.4;
|
||
cursor: not-allowed;
|
||
}
|
||
@media (max-width: 500px) {
|
||
.chat-widget {
|
||
right: 12px;
|
||
bottom: 84px;
|
||
width: calc(100vw - 24px);
|
||
max-height: calc(100vh - 120px);
|
||
}
|
||
.chat-fab {
|
||
right: 12px;
|
||
bottom: 16px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
HEADER
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<header class="site-header" id="site-header">
|
||
<div class="container">
|
||
<a href="/" class="site-logo">
|
||
<span class="site-logo-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="8" width="18" height="13" rx="2"/>
|
||
<path d="M9 12h.01M15 12h.01"/>
|
||
<path d="M9 16h6"/>
|
||
<path d="M12 8V5"/>
|
||
<circle cx="12" cy="4" r="1.2" fill="currentColor" stroke="none"/>
|
||
</svg>
|
||
</span>
|
||
Derez
|
||
</a>
|
||
|
||
<ul class="nav-links" id="nav-links">
|
||
<li><a href="#pricing">Pricing</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
</ul>
|
||
<div class="header-actions">
|
||
<a href="https://app.derez.ai" class="btn-login">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2"/>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||
</svg>
|
||
Sign In
|
||
</a>
|
||
<a href="https://app.derez.ai" class="btn btn-primary btn-signup-header">Hire Agent</a>
|
||
<button class="hamburger" id="hamburger" aria-label="Toggle menu" onclick="toggleMobile()">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
CHAT WIDGET (floating bottom-right)
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<button class="chat-fab" id="chat-fab" onclick="chatToggle()" aria-label="Open chat">💬</button>
|
||
<div class="chat-widget" id="chat-widget" aria-hidden="true">
|
||
<div class="chat-header">
|
||
<div class="chat-header-avatar">🤖</div>
|
||
<div class="chat-header-info">
|
||
<div class="chat-header-name">Sales Agent</div>
|
||
<div class="chat-header-status">Online</div>
|
||
</div>
|
||
<button class="chat-header-close" onclick="chatClose()" aria-label="Close chat">✕</button>
|
||
</div>
|
||
<div class="chat-msgs" id="chat-msgs"></div>
|
||
<div class="chat-input-row">
|
||
<input type="text" class="chat-input-box" id="chat-input" placeholder="Ask your sales agent..." onkeydown="chatKey(event)" />
|
||
<button class="chat-send-btn" id="chat-send-btn" onclick="chatSend()">➤</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
HERO
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section class="hero" id="hero">
|
||
<div class="container">
|
||
<div class="hero-badge">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"/>
|
||
</svg>
|
||
From signup to working agent in under 5 minutes
|
||
</div>
|
||
|
||
<h1>
|
||
Create Your<br/>
|
||
<span class="highlight">AI Agent</span> in 5 Minutes
|
||
</h1>
|
||
|
||
<p class="hero-sub">
|
||
Deploy a fully managed AI agent on its own dedicated Linux instance.
|
||
Choose Hermes or OpenClaw. Full SSH access, automatic backups,
|
||
and a powerful dashboard — no infrastructure to manage.
|
||
</p>
|
||
|
||
<div class="hero-actions">
|
||
<a href="https://app.derez.ai" class="btn btn-primary btn-lg">
|
||
Create Your Agent
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||
<polyline points="12 5 19 12 12 19"/>
|
||
</svg>
|
||
</a>
|
||
<a href="#how-it-works" class="btn btn-ghost btn-lg">How It Works</a>
|
||
</div>
|
||
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">< 5 min</div>
|
||
<div class="hero-stat-label">Setup time</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">$7.50/mo</div>
|
||
<div class="hero-stat-label">After startup discount</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">2</div>
|
||
<div class="hero-stat-label">Agent choices</div>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">1-click</div>
|
||
<div class="hero-stat-label">Backups</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
SPEEDRUN (How It Works)
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section id="how-it-works">
|
||
<div class="container">
|
||
<h2 class="section-title">From Zero to Agent in 5 Minutes</h2>
|
||
<p class="section-sub">
|
||
No DevOps, no servers to provision, no config files to write.
|
||
Just pick your agent, pay, and prompt.
|
||
</p>
|
||
|
||
<div class="video-slider-wrapper">
|
||
<button class="slider-arrow slider-arrow-prev" onclick="slideSpeedrun(-1)" aria-label="Previous">‹</button>
|
||
<div class="video-slider" id="speedrunSlider">
|
||
<div class="video-slide">
|
||
<a href="https://www.youtube.com/watch?v=iyxQ6Xz1Ngw" target="_blank" rel="noopener">
|
||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/iyxQ6Xz1Ngw/hqdefault.jpg')">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="video-info">
|
||
<h4>Speed Run Example 1</h4>
|
||
<div class="video-desc">Watch how fast you can go from zero to a working agent.</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="video-slide">
|
||
<a href="https://www.youtube.com/watch?v=QQEgIo4Juxg" target="_blank" rel="noopener">
|
||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/QQEgIo4Juxg/hqdefault.jpg')">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="video-info">
|
||
<h4>Speed Run Example 2</h4>
|
||
<div class="video-desc">Another demo of the Derez.ai speed-run workflow.</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="video-slide">
|
||
<a href="https://www.youtube.com/watch?v=gb5TlGw6Uks" target="_blank" rel="noopener">
|
||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/gb5TlGw6Uks/hqdefault.jpg')">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="video-info">
|
||
<h4>Speed Run Example 3</h4>
|
||
<div class="video-desc">See the full pipeline from signup to deployment.</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="video-slide">
|
||
<a href="https://www.youtube.com/watch?v=XoitaexiCi0" target="_blank" rel="noopener">
|
||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/XoitaexiCi0/hqdefault.jpg')">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="video-info">
|
||
<h4>Speed Run Example 4</h4>
|
||
<div class="video-desc">Agent configuration and deployment in minutes.</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="video-slide">
|
||
<a href="https://www.youtube.com/watch?v=02Mw6P9ZH84" target="_blank" rel="noopener">
|
||
<div class="video-thumb" style="background-image: url('https://img.youtube.com/vi/02Mw6P9ZH84/hqdefault.jpg')">
|
||
<div class="play-btn">
|
||
<svg viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="video-info">
|
||
<h4>Speed Run Example 5</h4>
|
||
<div class="video-desc">Another real-time speed run on Derez.ai.</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<button class="slider-arrow slider-arrow-next" onclick="slideSpeedrun(1)" aria-label="Next">›</button>
|
||
<div class="slider-dots" id="speedrunDots"></div>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
const slider = document.getElementById('speedrunSlider');
|
||
const dotsContainer = document.getElementById('speedrunDots');
|
||
if (!slider || !dotsContainer) return;
|
||
const slides = slider.querySelectorAll('.video-slide');
|
||
const total = slides.length;
|
||
if (total === 0) return;
|
||
|
||
for (let i = 0; i < total; i++) {
|
||
const dot = document.createElement('button');
|
||
dot.className = 'slider-dot' + (i === 0 ? ' active' : '');
|
||
dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
|
||
dot.onclick = function() {
|
||
slides[i].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
|
||
};
|
||
dotsContainer.appendChild(dot);
|
||
}
|
||
|
||
function updateDots() {
|
||
const threshold = 120;
|
||
let activeIdx = 0;
|
||
for (let i = 0; i < total; i++) {
|
||
const rect = slides[i].getBoundingClientRect();
|
||
const center = rect.left + rect.width / 2;
|
||
const sl = slider.getBoundingClientRect();
|
||
const slCenter = sl.left + sl.width / 2;
|
||
if (Math.abs(center - slCenter) < threshold) {
|
||
activeIdx = i;
|
||
}
|
||
}
|
||
dotsContainer.querySelectorAll('.slider-dot').forEach((d, i) => {
|
||
d.classList.toggle('active', i === activeIdx);
|
||
});
|
||
}
|
||
|
||
slider.addEventListener('scroll', updateDots);
|
||
updateDots();
|
||
})();
|
||
|
||
function slideSpeedrun(dir) {
|
||
const slider = document.getElementById('speedrunSlider');
|
||
if (!slider) return;
|
||
const slideWidth = slider.querySelector('.video-slide').offsetWidth + 20;
|
||
slider.scrollBy({ left: slideWidth * dir, behavior: 'smooth' });
|
||
}
|
||
</script>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
FEATURES
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section id="features">
|
||
<div class="container">
|
||
<h2 class="section-title">Everything You Need to Run an AI Agent</h2>
|
||
<p class="section-sub">
|
||
Every agent lives in its own container with full root access. From dashboards to emails — manage everything from one place.
|
||
</p>
|
||
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||
<path d="M9 3v18"/>
|
||
<path d="M21 9H3"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Your Agent's Office</h3>
|
||
<p>Every agent lives in its own container with full root access. Install packages, modify configs, run anything — it's your space to do whatever you want.</p>
|
||
</div>
|
||
|
||
<div class="feature-card unique">
|
||
<span class="feature-badge">Unique</span>
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||
<path d="M21 12H3"/>
|
||
<path d="M12 3v18"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Management Dashboard</h3>
|
||
<p>A single interface to admin all your agents, even if you've hired several — switching between them is just a click. Built for beginners, powerful enough for pros.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="11" width="18" height="11" rx="2"/>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Password Management</h3>
|
||
<p>All your agent passwords organized in one place. Sorted by importance and clearly labeled so you instantly see the ones you need — browse the rest at a glance.</p>
|
||
</div>
|
||
|
||
<div class="feature-card unique">
|
||
<span class="feature-badge">Unique</span>
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Prompt Builder & Skills</h3>
|
||
<p>Built-in wizard for adding skills, integrations, and custom instructions. Get your agent working the way you want, fast.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<circle cx="12" cy="12" r="4"/>
|
||
<line x1="12" y1="2" x2="12" y2="6"/>
|
||
<line x1="12" y1="18" x2="12" y2="22"/>
|
||
</svg>
|
||
</div>
|
||
<h3>OpenRouter Key Included</h3>
|
||
<p>We provide an OpenRouter key with a 10% markup so you're up and running instantly. Since we ship vanilla agents, you can also bring your own API keys anytime.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Email Access</h3>
|
||
<p>Optionally give your agent the ability to send emails. Perfect for outreach, notifications, and automated follow-ups — all from the dashboard.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 20h9"/>
|
||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Bootstrapped & Ready</h3>
|
||
<p>We bootstrap your agent so it's ready for its first prompt the moment you log in. No setup, no configuration — just start chatting.</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Support Chat</h3>
|
||
<p>Built-in chat widget to reach us directly. Need help beyond the basics? Optionally escalate to a human for personal assistance.</p>
|
||
</div>
|
||
|
||
<div class="feature-card unique">
|
||
<span class="feature-badge">Unique</span>
|
||
<div class="feature-icon">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||
<polyline points="17 8 12 3 7 8"/>
|
||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||
</svg>
|
||
</div>
|
||
<h3>One-Click Backups</h3>
|
||
<p>Daily automatic backups plus the option to create copies on demand. Restore anytime — your data is always safe.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
PRICING
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section id="pricing">
|
||
<div class="container">
|
||
<h2 class="section-title">Simple, Transparent Pricing</h2>
|
||
<p class="section-sub">
|
||
One price per agent instance. No hidden fees, no surprise charges.
|
||
Cancel anytime with monthly termination.
|
||
</p>
|
||
|
||
<!-- ── Billing toggle ── -->
|
||
<div class="pricing-billing-toggle">
|
||
<span class="billing-label active" id="billing-monthly-label">Monthly</span>
|
||
<label class="toggle-switch">
|
||
<input type="checkbox" id="billing-toggle" onchange="toggleBilling()" />
|
||
<span class="toggle-slider"></span>
|
||
</label>
|
||
<span class="billing-label" id="billing-yearly-label">Yearly</span>
|
||
<span class="billing-save-badge" id="billing-save-badge">Save 1 month</span>
|
||
</div>
|
||
|
||
<!-- ── Plans grid ── -->
|
||
<div class="pricing-grid">
|
||
|
||
<!-- Trainee -->
|
||
<div class="pricing-card">
|
||
<div class="pricing-plan-name">Trainee</div>
|
||
<div class="pricing-amount" id="amount-trainee">
|
||
<span class="pricing-currency">$</span>4<span class="pricing-decimal">.99</span>
|
||
</div>
|
||
<div class="pricing-period" id="period-trainee">/ month</div>
|
||
<div class="pricing-yearly-bonus" id="bonus-trainee">✨ +$4.99 OpenRouter credits</div>
|
||
<p class="pricing-plan-desc">For getting started with your first agent.</p>
|
||
<div class="pricing-plan-quota">1GB RAM · 10GB HDD</div>
|
||
<ul class="pricing-perks">
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Your Agent's Office (root access)
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Management dashboard
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Daily automatic backups
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
OpenRouter key included
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Prompt Builder & Skills
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Support chat with human escalation
|
||
</li>
|
||
</ul>
|
||
<a href="https://app.derez.ai" class="btn btn-primary btn-block">Choose Trainee</a>
|
||
</div>
|
||
|
||
<!-- Junior -->
|
||
<div class="pricing-card featured">
|
||
<span class="pricing-badge">Popular</span>
|
||
<div class="pricing-plan-name">Junior</div>
|
||
<div class="pricing-amount" id="amount-junior">
|
||
<span class="pricing-currency">$</span>9<span class="pricing-decimal">.50</span>
|
||
</div>
|
||
<div class="pricing-period" id="period-junior">/ month</div>
|
||
<div class="pricing-yearly-bonus" id="bonus-junior">✨ +$9.50 OpenRouter credits</div>
|
||
<p class="pricing-plan-desc">The sweet spot for most users.</p>
|
||
<div class="pricing-plan-quota">2GB RAM · 20GB HDD</div>
|
||
<ul class="pricing-perks">
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Your Agent's Office (root access)
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Management dashboard
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Daily automatic backups
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
OpenRouter key included
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Prompt Builder & Skills
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Support chat with human escalation
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
SSH access to your container
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
On-demand backups
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Higher API key credit allocation
|
||
</li>
|
||
</ul>
|
||
<a href="https://app.derez.ai" class="btn btn-primary btn-block">Choose Junior</a>
|
||
</div>
|
||
|
||
<!-- Senior -->
|
||
<div class="pricing-card">
|
||
<div class="pricing-plan-name">Senior</div>
|
||
<div class="pricing-amount" id="amount-senior">
|
||
<span class="pricing-currency">$</span>17<span class="pricing-decimal">.50</span>
|
||
</div>
|
||
<div class="pricing-period" id="period-senior">/ month</div>
|
||
<div class="pricing-yearly-bonus" id="bonus-senior">✨ +$17.50 OpenRouter credits</div>
|
||
<p class="pricing-plan-desc">For power users and teams.</p>
|
||
<div class="pricing-plan-quota">4GB RAM · 40GB HDD</div>
|
||
<ul class="pricing-perks">
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Your Agent's Office (root access)
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Management dashboard
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Daily automatic backups
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
OpenRouter key included
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Prompt Builder & Skills
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Support chat with human escalation
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
SSH access to your container
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
On-demand backups
|
||
</li>
|
||
<li>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||
Higher API key credit allocation
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Email access for your agent
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Highest API key credit allocation
|
||
</li>
|
||
</ul>
|
||
<a href="https://app.derez.ai" class="btn btn-primary btn-block">Choose Senior</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
FAQ
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section id="faq">
|
||
<div class="container">
|
||
<h2 class="section-title">Frequently Asked Questions</h2>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
How fast can I create an AI agent?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
From signup to a working agent in under 5 minutes. Select your agent type, complete the Stripe payment, configure your prompt, and your agent is live. That's the speed-run promise.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
What AI agents are available?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
You can choose between <strong>Hermes Agent</strong> (by Nous Research — a powerful tool-calling CLI agent with memory, skills, and multi-model support) or <strong>OpenClaw</strong> (a flexible open-source agent framework). Both run on dedicated Linux instances with full SSH access.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
How much does it cost?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
Three plans to fit your needs. <strong>Trainee</strong> at <strong>$4.99/mo</strong> (1GB RAM, 10GB HDD) for getting started. <strong>Junior</strong> at <strong>$9.50/mo</strong> (2GB RAM, 20GB HDD) with SSH access and on-demand backups — the sweet spot. <strong>Senior</strong> at <strong>$17.50/mo</strong> (4GB RAM, 40GB HDD) with email access. Go yearly and get one month's worth of OpenRouter credits on top. Cancel anytime with monthly termination.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
Do I get root access to my agent?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
Yes. Every agent lives in its own container with full root SSH access. You can install packages, modify configurations, run anything — it's your space. Manage your instance password directly from the dashboard.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
How do backups work?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
We create full copies of your agent — not just snapshots. Your agent is automatically backed up every day, and you can also create on-demand copies anytime from the dashboard with one click. Restore whenever you need to.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
What API keys do I get?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
We include an OpenRouter API key with every agent so you're up and running instantly. We add a 10% markup to cover management. Since we ship vanilla agents, you can also bring your own API keys (OpenAI, Anthropic, OpenRouter, etc.) at any time — full control over providers and models.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
Can I manage multiple agents from one place?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
Yes. The management dashboard gives you a single interface to admin all your agents, even if you've hired several. Switching between them is just a click. It's built to be easy for beginners while powerful enough for pros.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
Is my agent ready to use right away?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
Absolutely. We bootstrap your agent so it's ready for its first prompt the moment you log in. No setup or configuration needed — just start typing. You can customize your prompt, add skills, and configure integrations through the dashboard at any time.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
Can my agent send emails?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
Yes. You can optionally give your agent the ability to send emails. Perfect for outreach campaigns, automated notifications, and follow-ups — all configured from the dashboard.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
How do you handle passwords?
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
||
</button>
|
||
<div class="faq-answer">
|
||
All your agent passwords live in one organized place in the dashboard. They're sorted by importance and clearly labeled so you can instantly see the ones you need and browse the rest at a glance. Managing multiple agents is effortless.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
SIGNUP SECTION (inline)
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section id="signup" class="signup-section">
|
||
<div class="container">
|
||
<h2 class="section-title">Create Your AI Agent Now</h2>
|
||
<p class="section-sub">
|
||
Sign up, pick your plan, and get your agent bootstrapped and ready in minutes.
|
||
</p>
|
||
|
||
<div class="signup-card">
|
||
<!-- Pricing -->
|
||
<div class="signup-pricing-badge">
|
||
<div class="signup-pricing-plans">
|
||
<div class="signup-plan">
|
||
<span class="signup-plan-name">Trainee</span>
|
||
<span class="signup-plan-price">$4.99</span>
|
||
</div>
|
||
<div class="signup-plan featured">
|
||
<span class="signup-plan-name">Junior</span>
|
||
<span class="signup-plan-price">$9.50</span>
|
||
</div>
|
||
<div class="signup-plan">
|
||
<span class="signup-plan-name">Senior</span>
|
||
<span class="signup-plan-price">$17.50</span>
|
||
</div>
|
||
</div>
|
||
<div class="signup-pricing-term">Per agent instance · Monthly termination · Yearly credits available</div>
|
||
</div>
|
||
|
||
<!-- Coupon -->
|
||
<div class="signup-coupon-box" id="signup-coupon-box">
|
||
<div class="signup-coupon-input-wrap">
|
||
<input
|
||
type="text"
|
||
id="signup-coupon-input"
|
||
class="signup-coupon-input"
|
||
placeholder="Coupon code"
|
||
onkeydown="handleCouponKey(event)"
|
||
autocomplete="off"
|
||
spellcheck="false"
|
||
/>
|
||
<span id="signup-coupon-spinner" class="signup-coupon-spinner" style="display: none">
|
||
<div class="spinner spinner-sm"></div>
|
||
</span>
|
||
</div>
|
||
<div id="signup-coupon-error" class="signup-coupon-error" style="display: none">
|
||
Invalid coupon code.
|
||
</div>
|
||
<div id="signup-coupon-success" class="signup-coupon-success" style="display: none">
|
||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
5 USD OpenRouter credits added — Order now below
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Signup form -->
|
||
<form id="inline-signup-form" class="signup-form" onsubmit="event.preventDefault(); doInlineSignUp();">
|
||
<div class="signup-form-row">
|
||
<div class="form-group">
|
||
<label for="inline-signup-email">Email address</label>
|
||
<input type="email" id="inline-signup-email" placeholder="you@example.com" autocomplete="email" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="inline-signup-password">Password</label>
|
||
<input type="password" id="inline-signup-password" placeholder="Min. 8 characters" autocomplete="new-password" required />
|
||
</div>
|
||
</div>
|
||
<div class="signup-form-row">
|
||
<div class="form-group">
|
||
<label for="inline-signup-agent">Agent</label>
|
||
<select id="inline-signup-agent">
|
||
<option value="hermes">Hermes</option>
|
||
<option value="openclaw">OpenClaw</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="inline-signup-location">Agent Location</label>
|
||
<select id="inline-signup-location">
|
||
<option value="france">🇫🇷 France</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="inline-signup-error" class="auth-error" style="display: none"></div>
|
||
<div id="inline-signup-success" class="auth-success" style="display: none"></div>
|
||
<button type="submit" id="inline-signup-btn" class="btn btn-primary btn-block btn-lg">
|
||
Hire Agent — $9.50/mo
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
FOOTER
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<span>© 2026 Derez.ai — AI Agent Hosting</span>
|
||
<div class="footer-links">
|
||
<a href="https://app.derez.ai">Dashboard</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener">Hermes Agent</a>
|
||
<a href="https://ODOO4projects.com" target="_blank" rel="noopener">Powered by ODOO4projects LLC</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
JAVASCRIPT
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<script>
|
||
// ── Mobile menu ──────────────────────────────────────────
|
||
function toggleMobile() {
|
||
const nav = document.getElementById('nav-links');
|
||
nav.classList.toggle('mobile-open');
|
||
}
|
||
|
||
// ── FAQ accordion ────────────────────────────────────────
|
||
function toggleFaq(btn) {
|
||
const answer = btn.nextElementSibling;
|
||
const isOpen = answer.classList.contains('open');
|
||
// Close all
|
||
document.querySelectorAll('.faq-answer.open').forEach(el => el.classList.remove('open'));
|
||
document.querySelectorAll('.faq-question.open').forEach(el => el.classList.remove('open'));
|
||
if (!isOpen) {
|
||
answer.classList.add('open');
|
||
btn.classList.add('open');
|
||
}
|
||
}
|
||
|
||
// ── Signup Webhook URLs (matching app.derez.ai) ──────────
|
||
const SIGNUP_URL = "https://n8n.derez.ai/webhook/4de196b7-2ad2-4f9a-9b4d-dc8d3b30865b";
|
||
const AUTH_URL = "https://n8n.derez.ai/webhook/aca1b27f-c18e-4424-b7a0-de01007a3fe6";
|
||
const COUPON_URL = "https://n8n.derez.ai/webhook/fd6375cb-6d73-4482-bfa3-ef8365f43a67";
|
||
|
||
let inlineCouponApplied = false;
|
||
|
||
// ── Helper: show/hide auth messages ──────────────────────
|
||
function showAuthError(id, msg) {
|
||
const el = document.getElementById(id);
|
||
el.textContent = msg;
|
||
el.style.display = "flex";
|
||
}
|
||
function hideAuthError(id) {
|
||
document.getElementById(id).style.display = "none";
|
||
}
|
||
|
||
// ── Helper: btn loading state ────────────────────────────
|
||
function btnLoad(btn, text) {
|
||
btn.disabled = true;
|
||
btn.textContent = text;
|
||
}
|
||
function btnReset(btn) {
|
||
btn.disabled = false;
|
||
btn.textContent = "Hire Agent — $9.50/mo";
|
||
}
|
||
|
||
function isValidEmail(e) {
|
||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
|
||
}
|
||
|
||
// ── Coupon ──────────────────────────────────────────────
|
||
function handleCouponKey(e) {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
applyInlineCoupon();
|
||
}
|
||
}
|
||
|
||
async function applyInlineCoupon() {
|
||
const input = document.getElementById("signup-coupon-input");
|
||
const spinner = document.getElementById("signup-coupon-spinner");
|
||
const errorEl = document.getElementById("signup-coupon-error");
|
||
const successEl = document.getElementById("signup-coupon-success");
|
||
|
||
const code = input.value.trim();
|
||
if (!code) return;
|
||
|
||
spinner.style.display = "flex";
|
||
errorEl.style.display = "none";
|
||
successEl.style.display = "none";
|
||
input.classList.remove("signup-coupon-input-error");
|
||
|
||
try {
|
||
const res = await fetch(COUPON_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ code })
|
||
});
|
||
if (!res.ok) throw new Error("Invalid");
|
||
const data = await res.json();
|
||
const raw = Array.isArray(data) ? data[0] : data;
|
||
const item = raw && typeof raw === "object" && "json" in raw ? raw.json : raw;
|
||
if (item?.valid === true || item?.status === "ok") {
|
||
inlineCouponApplied = true;
|
||
successEl.style.display = "flex";
|
||
input.style.display = "none";
|
||
} else {
|
||
throw new Error("Invalid");
|
||
}
|
||
} catch {
|
||
input.classList.add("signup-coupon-input-error");
|
||
errorEl.style.display = "block";
|
||
} finally {
|
||
spinner.style.display = "none";
|
||
}
|
||
}
|
||
|
||
// ── Sign Up (inline on landing page) ────────────────────
|
||
async function doInlineSignUp() {
|
||
const email = document.getElementById("inline-signup-email").value.trim();
|
||
const password = document.getElementById("inline-signup-password").value;
|
||
const agent = document.getElementById("inline-signup-agent").value;
|
||
const location = document.getElementById("inline-signup-location").value;
|
||
|
||
hideAuthError("inline-signup-error");
|
||
document.getElementById("inline-signup-success").style.display = "none";
|
||
|
||
if (!isValidEmail(email)) {
|
||
showAuthError("inline-signup-error", "Please enter a valid email address.");
|
||
return;
|
||
}
|
||
if (password.length < 8) {
|
||
showAuthError("inline-signup-error", "Password must be at least 8 characters.");
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById("inline-signup-btn");
|
||
btnLoad(btn, "Hiring agent\u2026");
|
||
|
||
// Open blank tab synchronously for Stripe redirect
|
||
const stripeTab = window.open("", "_blank");
|
||
|
||
try {
|
||
// Step 1: authenticate
|
||
const authRes = await fetch(AUTH_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ email, password }),
|
||
});
|
||
if (!authRes.ok)
|
||
throw new Error("Account creation failed. Please try again later.");
|
||
|
||
// Step 2: create agent
|
||
const createRes = await fetch(SIGNUP_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ email, password, agent, location }),
|
||
});
|
||
if (!createRes.ok) {
|
||
throw new Error("Agent provisioning failed. Please contact support.");
|
||
}
|
||
|
||
const createData = await createRes.json();
|
||
const createRaw = Array.isArray(createData) ? createData[0] : createData;
|
||
const createItem = createRaw && typeof createRaw === "object" && "json" in createRaw ? createRaw.json : createRaw;
|
||
|
||
// Navigate the pre-opened tab to Stripe checkout
|
||
const checkoutUrl = createItem?.checkout_url || createItem?.checkoutUrl || createItem?.url;
|
||
if (checkoutUrl && checkoutUrl.startsWith("http")) {
|
||
stripeTab.location.href = checkoutUrl;
|
||
} else {
|
||
stripeTab.close();
|
||
}
|
||
|
||
// Show success message
|
||
document.getElementById("inline-signup-success").textContent =
|
||
"Agent created! \u2713 Redirecting to checkout\u2026";
|
||
document.getElementById("inline-signup-success").style.display = "flex";
|
||
|
||
} catch (err) {
|
||
stripeTab?.close();
|
||
showAuthError("inline-signup-error", err.message);
|
||
} finally {
|
||
btnReset(btn);
|
||
}
|
||
}
|
||
|
||
// ── Close mobile menu on link click ──────────────────────
|
||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
document.getElementById('nav-links').classList.remove('mobile-open');
|
||
});
|
||
});
|
||
|
||
// ── Smooth scroll offset for fixed header ────────────────
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
e.preventDefault();
|
||
const headerHeight = 60;
|
||
const top = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
|
||
window.scrollTo({ top, behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ── Billing Toggle ────────────────────────────────── */
|
||
function toggleBilling() {
|
||
const yearly = document.getElementById('billing-toggle').checked;
|
||
document.getElementById('billing-monthly-label').classList.toggle('active', !yearly);
|
||
document.getElementById('billing-yearly-label').classList.toggle('active', yearly);
|
||
document.getElementById('billing-save-badge').classList.toggle('show', yearly);
|
||
|
||
document.getElementById('bonus-trainee').classList.toggle('show', yearly);
|
||
document.getElementById('bonus-junior').classList.toggle('show', yearly);
|
||
document.getElementById('bonus-senior').classList.toggle('show', yearly);
|
||
|
||
document.getElementById('period-trainee').textContent = yearly ? '/ month ✦ yearly' : '/ month';
|
||
document.getElementById('period-junior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
|
||
document.getElementById('period-senior').textContent = yearly ? '/ month ✦ yearly' : '/ month';
|
||
}
|
||
|
||
/* ── Chat Widget ──────────────────────────────────────────── */
|
||
const CHAT_URL = "https://n8n.derez.ai/webhook/a58d00c4-f0c9-40cd-bb50-4f45f0442ef0";
|
||
let chatId = null;
|
||
let chatOpen = false;
|
||
let chatBusy = false;
|
||
let greeted = false;
|
||
|
||
function chatToggle() {
|
||
chatOpen = !chatOpen;
|
||
document.getElementById('chat-widget').classList.toggle('open', chatOpen);
|
||
document.getElementById('chat-fab').classList.toggle('open', chatOpen);
|
||
document.getElementById('chat-widget').setAttribute('aria-hidden', !chatOpen);
|
||
if (chatOpen) {
|
||
if (!chatId) {
|
||
chatId = String(Math.floor(100000 + Math.random() * 900000));
|
||
chatAppendMsg('bot', "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.");
|
||
}
|
||
setTimeout(() => document.getElementById('chat-input').focus(), 100);
|
||
}
|
||
}
|
||
|
||
function chatClose() {
|
||
if (chatOpen) chatToggle();
|
||
}
|
||
|
||
function chatOpenSilent() {
|
||
if (!chatOpen) {
|
||
chatOpen = true;
|
||
document.getElementById('chat-widget').classList.add('open');
|
||
document.getElementById('chat-fab').classList.add('open');
|
||
document.getElementById('chat-widget').setAttribute('aria-hidden', 'false');
|
||
}
|
||
}
|
||
|
||
function chatAppendMsg(role, text) {
|
||
const msgs = document.getElementById("chat-msgs");
|
||
const div = document.createElement("div");
|
||
div.className = "chat-msg chat-msg-" + role;
|
||
div.textContent = text;
|
||
msgs.appendChild(div);
|
||
msgs.scrollTop = msgs.scrollHeight;
|
||
return div;
|
||
}
|
||
|
||
function chatKey(e) {
|
||
if (e.key === "Enter") chatSend();
|
||
}
|
||
|
||
async function chatSend() {
|
||
const input = document.getElementById("chat-input");
|
||
const btn = document.getElementById("chat-send-btn");
|
||
const msg = input.value.trim();
|
||
if (!msg || chatBusy) return;
|
||
chatBusy = true;
|
||
chatOpenSilent();
|
||
chatAppendMsg("user", msg);
|
||
input.value = "";
|
||
btn.disabled = true;
|
||
btn.innerHTML = '<span style="opacity:0.6">…</span>';
|
||
|
||
const think = chatAppendMsg("bot", "…");
|
||
think.className = "chat-msg chat-msg-thinking";
|
||
|
||
try {
|
||
const res = await fetch(CHAT_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ message: msg, sessionId: chatId }),
|
||
});
|
||
const json = await res.json();
|
||
const first = Array.isArray(json) ? json[0] : json;
|
||
const reply =
|
||
typeof json === "string"
|
||
? json
|
||
: (first && (first.output || first.message || first.reply || first.response || first.text)) ||
|
||
JSON.stringify(json);
|
||
think.remove();
|
||
chatAppendMsg("bot", reply);
|
||
} catch (err) {
|
||
think.remove();
|
||
chatAppendMsg("bot", "Sorry, I couldn't connect right now. Please try again later.");
|
||
} finally {
|
||
chatBusy = false;
|
||
btn.disabled = false;
|
||
btn.innerHTML = '➤';
|
||
document.getElementById("chat-input").focus();
|
||
}
|
||
}
|
||
|
||
/* ── Visitor Probe — auto-open after 15s ────────────────── */
|
||
(function () {
|
||
let fired = false;
|
||
setTimeout(function () {
|
||
fetch("https://ipinfo.io/json")
|
||
.then(function (r) { return r.json(); })
|
||
.then(function (geo) { fireProbe(geo); })
|
||
.catch(function () { fireProbe(null); });
|
||
}, 15000);
|
||
|
||
function fireProbe(geo) {
|
||
if (fired) return;
|
||
fired = true;
|
||
const cid = chatId || String(Math.floor(100000 + Math.random() * 900000));
|
||
const ua = navigator.userAgent;
|
||
|
||
let lines = [
|
||
"NEW VISITOR — 15s Probe",
|
||
"========================================",
|
||
"",
|
||
"- Page section: hero",
|
||
"- Scroll depth: " + Math.min(100, Math.round((window.pageYOffset / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)) + "%",
|
||
"- Time on page: 15 seconds",
|
||
"- Timestamp: " + new Date().toUTCString(),
|
||
"",
|
||
"--- BROWSER & DEVICE ---",
|
||
"- Browser: " + (/Edg\/([\d.]+)/.test(ua) ? "Edge " + RegExp.$1 : /Chrome\/([\d.]+)/.test(ua) ? "Chrome " + RegExp.$1 : /Firefox\/([\d.]+)/.test(ua) ? "Firefox " + RegExp.$1 : /Version\/([\d.]+).*Safari/.test(ua) ? "Safari " + RegExp.$1 : "Unknown"),
|
||
"- OS: " + (/Windows NT 10/.test(ua) ? "Windows 10/11" : /Mac OS X/.test(ua) ? "macOS" : /Android/.test(ua) ? "Android" : /iPhone/.test(ua) ? "iOS" : /Linux/.test(ua) ? "Linux" : "Unknown"),
|
||
"- Device: " + (/Mobi|Android|iPhone/.test(ua) ? "Mobile" : "Desktop"),
|
||
"- Screen: " + screen.width + "x" + screen.height,
|
||
"- Language: " + navigator.language,
|
||
"- User Agent: " + ua,
|
||
"",
|
||
"--- PAGE ---",
|
||
"- URL: " + window.location.href,
|
||
"- Referrer: " + (document.referrer || "direct / none"),
|
||
"- Title: " + document.title,
|
||
];
|
||
if (geo) {
|
||
lines.push("");
|
||
lines.push("--- LOCATION ---");
|
||
if (geo.country) lines.push("- Country: " + geo.country);
|
||
if (geo.city) lines.push("- City: " + geo.city);
|
||
if (geo.org) lines.push("- ISP: " + geo.org);
|
||
}
|
||
lines.push("");
|
||
lines.push("- Chat ID: " + cid);
|
||
|
||
const payload = {
|
||
message: lines.join("\n"),
|
||
sessionId: cid,
|
||
};
|
||
|
||
fetch(CHAT_URL, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(payload),
|
||
})
|
||
.then(function (r) {
|
||
const ct = r.headers.get("content-type") || "";
|
||
if (ct.indexOf("json") !== -1) return r.json();
|
||
return r.text().then(function (t) { return { output: t }; });
|
||
})
|
||
.then(function (d) {
|
||
const item = Array.isArray(d) ? d[0] : d;
|
||
const reply = (item && (item.output || item.message || item.reply || item.response || item.text)) || null;
|
||
if (reply) {
|
||
if (!chatId) chatId = cid;
|
||
chatAppendMsg("bot", reply);
|
||
greeted = true;
|
||
chatOpenSilent();
|
||
}
|
||
})
|
||
.catch(function () {});
|
||
}
|
||
})();
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |