Oliver
2013 lines
88 KiB
HTML
2013 lines
88 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-label {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--accent);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
SPEEDRUN (How It Works)
|
|
══════════════════════════════════════════════════════════ */
|
|
.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;
|
|
}
|
|
.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-card {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-hi);
|
|
border-radius: var(--radius-card);
|
|
padding: 44px 40px;
|
|
text-align: center;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.pricing-amount {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
line-height: 1;
|
|
}
|
|
.pricing-amount span {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
.pricing-term {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin: 6px 0 20px;
|
|
}
|
|
.pricing-perks {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin: 20px 0 28px;
|
|
}
|
|
.pricing-perks li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 6px 0;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
}
|
|
.pricing-perks li svg {
|
|
flex-shrink: 0;
|
|
margin-top: 3px;
|
|
color: var(--success);
|
|
}
|
|
|
|
.pricing-extra {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
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;
|
|
}
|
|
|
|
/* ── Pricing discount (strikethrough + badge) ─────────── */
|
|
.pricing-original {
|
|
font-size: 1.2rem;
|
|
text-decoration: line-through;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
margin-right: 6px;
|
|
opacity: 0.6;
|
|
}
|
|
.pricing-discounted {
|
|
font-size: inherit;
|
|
color: var(--success);
|
|
}
|
|
.pricing-discount-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 12px;
|
|
background: rgba(63, 201, 126, 0.12);
|
|
border: 1px solid rgba(63, 201, 126, 0.3);
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--success);
|
|
margin: 6px 0 8px;
|
|
}
|
|
.pricing-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pricing-amount .pricing-original {
|
|
font-size: 1.5rem;
|
|
}
|
|
.pricing-amount .pricing-discounted {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
}
|
|
.signup-pricing-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.signup-pricing-amount .pricing-original {
|
|
font-size: 1.1rem;
|
|
}
|
|
.signup-pricing-amount .pricing-discounted {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
}
|
|
.signup-pricing-badge .pricing-discount-badge {
|
|
margin: 2px 0 6px;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
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 ──────────────────────────────────────────────── */
|
|
/* Slot sits in document flow — zero height when closed */
|
|
#chat-panel-slot {
|
|
display: none;
|
|
padding-top: 8px;
|
|
padding-bottom: 6px;
|
|
}
|
|
#chat-panel-slot.open {
|
|
display: block;
|
|
}
|
|
.nav-chat-panel {
|
|
width: 340px;
|
|
max-width: 100%;
|
|
height: 300px;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--accent);
|
|
border-radius: 18px;
|
|
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.nav-chat-main {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 340px;
|
|
max-width: 100%;
|
|
height: 36px;
|
|
background: var(--bg-inner);
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
transition: border-color 0.25s, box-shadow 0.25s;
|
|
}
|
|
.nav-chat-main:focus-within {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
|
|
}
|
|
.chat-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: var(--text);
|
|
}
|
|
.chat-panel-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
padding: 2px 6px;
|
|
line-height: 1;
|
|
}
|
|
.chat-panel-close:hover { color: var(--text); }
|
|
.chat-history {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.nav-chat-toggle,
|
|
.nav-chat-send {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
height: 100%;
|
|
color: var(--accent);
|
|
padding: 0 10px;
|
|
font-size: 0.85rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.nav-chat-toggle {
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.nav-chat-send {
|
|
border-left: 1px solid var(--border);
|
|
}
|
|
.nav-chat-input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0 10px;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
font: inherit;
|
|
color: var(--text);
|
|
font-size: 0.78rem;
|
|
}
|
|
.nav-chat-input::placeholder { color: var(--text-muted); }
|
|
.chat-msg {
|
|
max-width: 85%;
|
|
padding: 8px 12px;
|
|
border-radius: 12px;
|
|
line-height: 1.4;
|
|
word-wrap: break-word;
|
|
font-size: 12.5px;
|
|
}
|
|
.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-dim);
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.chat-msg-thinking {
|
|
align-self: flex-start;
|
|
background: var(--bg-inner);
|
|
border-bottom-left-radius: 4px;
|
|
opacity: 0.6;
|
|
}
|
|
@media (max-width: 700px) {
|
|
.nav-chat-main { display: none; }
|
|
}
|
|
</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="nav-chat-main">
|
|
<button class="nav-chat-toggle" id="nav-chat-toggle" onclick="chatToggle()" aria-label="Toggle chat history">💬</button>
|
|
<input type="text" class="nav-chat-input" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
|
|
<button class="nav-chat-send" id="chat-send-btn" onclick="chatSend()">➤</button>
|
|
</div>
|
|
<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 PANEL SLOT (in document flow — pushes hero down when open)
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<div id="chat-panel-slot" style="padding-left:24px; padding-right:24px; padding-top:66px;">
|
|
<div class="nav-chat-panel" id="chat-panel" aria-hidden="true">
|
|
<div class="chat-panel-header">
|
|
<span class="chat-panel-title">💬 Sales Agent</span>
|
|
<button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
|
|
</div>
|
|
<div class="chat-history" id="chat-msgs"></div>
|
|
</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">
|
|
<div class="section-label">Speed Run</div>
|
|
<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="steps">
|
|
<div class="step-card">
|
|
<div class="step-number">01</div>
|
|
<div class="step-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="8.5" cy="7" r="4"/>
|
|
<polyline points="17 11 19 13 23 9"/>
|
|
</svg>
|
|
</div>
|
|
<h3>1. Sign Up & Choose</h3>
|
|
<p>Enter your email, pick your agent (Hermes or OpenClaw), and choose your region. Complete the Stripe payment — takes under 2 minutes.</p>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="step-number">02</div>
|
|
<div class="step-icon">
|
|
<svg width="20" height="20" 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>2. Configure Your Prompt</h3>
|
|
<p>Tell your agent who it is and what it should do. Use our built-in skill library or write custom instructions. Name your agent something memorable.</p>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="step-number">03</div>
|
|
<div class="step-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
|
|
<polyline points="2 17 12 22 22 17"/>
|
|
</svg>
|
|
</div>
|
|
<h3>3. Deploy & Use</h3>
|
|
<p>Your agent is provisioned on a dedicated Linux instance in seconds. SSH in, open the dashboard, or talk to it directly. Speed-run complete.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
FEATURES
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="features">
|
|
<div class="container">
|
|
<div class="section-label">Features</div>
|
|
<h2 class="section-title">Everything You Need to Run an AI Agent</h2>
|
|
<p class="section-sub">
|
|
Each agent runs on its own dedicated instance. Full control, zero sharing, complete isolation.
|
|
</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>Dedicated Linux Instance</h3>
|
|
<p>Every agent gets its own VM. Full SSH access, root control, and total isolation from other customers.</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 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>Snapshot your entire agent instance with a single click. Restore anytime. Your data is always safe.</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">
|
|
<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">
|
|
<rect x="3" y="11" width="18" height="11" rx="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
</div>
|
|
<h3>API Key Management</h3>
|
|
<p>Add your own API keys directly in the dashboard. Full control over which provider and model your agent uses.</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 talk to us directly. Get help setting up, configuring, or troubleshooting your agent.</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>Customizable Persona</h3>
|
|
<p>Name your agent and define its personality. Every agent can be completely unique — your brand, your voice.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
AGENT OPTIONS
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="agents">
|
|
<div class="container">
|
|
<div class="section-label">Choose Your Agent</div>
|
|
<h2 class="section-title">Two Powerful Agents, One Platform</h2>
|
|
<p class="section-sub">
|
|
Pick the agent framework that fits your workflow. Both run on dedicated instances with full access.
|
|
</p>
|
|
|
|
<div class="agent-options">
|
|
<div class="agent-card featured">
|
|
<h3>Hermes Agent</h3>
|
|
<p class="agent-tagline">By Nous Research</p>
|
|
<p class="agent-desc">
|
|
A modern, tool-calling agent CLI with persistent memory, skills, cron jobs, and multi-model support.
|
|
Deploy Hermes and get a fully autonomous coding and research assistant.
|
|
</p>
|
|
<ul class="agent-features">
|
|
<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>
|
|
Tool-calling CLI with 40+ built-in tools
|
|
</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>
|
|
Persistent memory & skill system
|
|
</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>
|
|
Cron jobs, multi-agent delegation, browser control
|
|
</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>
|
|
Multi-provider & multi-model support
|
|
</li>
|
|
</ul>
|
|
<a href="https://app.derez.ai" class="btn btn-primary btn-block">Choose Hermes</a>
|
|
</div>
|
|
|
|
<div class="agent-card">
|
|
<h3>OpenClaw</h3>
|
|
<p class="agent-tagline">Open Source Agent Framework</p>
|
|
<p class="agent-desc">
|
|
A versatile, open-source agent framework designed for flexibility and extensibility.
|
|
Ideal for custom workflows and specialized automation tasks.
|
|
</p>
|
|
<ul class="agent-features">
|
|
<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>
|
|
Flexible open-source architecture
|
|
</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>
|
|
Custom workflow automation
|
|
</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>
|
|
Full SSH & 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>
|
|
Easy skill integration
|
|
</li>
|
|
</ul>
|
|
<a href="https://app.derez.ai" class="btn btn-ghost btn-block">Choose OpenClaw</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
PRICING
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="pricing">
|
|
<div class="container">
|
|
<div class="section-label">Pricing</div>
|
|
<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>
|
|
|
|
<div class="pricing-card">
|
|
<div class="pricing-amount">
|
|
<span class="pricing-original">$9.50</span>
|
|
<span class="pricing-discounted">$7.50</span> <span>USD / month</span>
|
|
</div>
|
|
<div class="pricing-discount-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>
|
|
Startup Discount −$2.00
|
|
</div>
|
|
<p class="pricing-term">Per agent instance · Monthly termination · Limited time</p>
|
|
|
|
<ul class="pricing-perks">
|
|
<li>
|
|
<svg width="16" height="16" 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>
|
|
Dedicated Linux instance with SSH access
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" 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>
|
|
Hermes or OpenClaw agent pre-installed
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" 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>
|
|
One-click backups & restore
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" 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="16" height="16" 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 included
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" 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>
|
|
Refer-a-friend: $5 credit per signup
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="https://app.derez.ai" class="btn btn-primary btn-block btn-lg">
|
|
Create Your Agent Now
|
|
</a>
|
|
|
|
<p class="pricing-extra">
|
|
Coupon codes available for $5 OpenRouter credits.<br/>
|
|
Hosted in 🇫🇷 France.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
FAQ
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="faq">
|
|
<div class="container">
|
|
<div class="section-label">FAQ</div>
|
|
<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">
|
|
Each agent instance is <strong>$9.50 USD per month</strong> with a <strong>$2.00 startup discount</strong> (you pay <strong>$7.50/mo</strong>). Monthly termination. Cancel anytime. Coupon codes are available for $5 OpenRouter credits to help you get started.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Do I get SSH 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 instance comes with full root SSH access. You can manage your instance password directly from the dashboard, and SSH in to install packages, modify configurations, or anything else you need.
|
|
</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">
|
|
One-click backups from your dashboard. Each backup captures the full state of your agent instance. You can restore anytime. Backups give you complete peace of mind.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Can I use my own API keys?
|
|
<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. You can add your own API keys (OpenAI, Anthropic, OpenRouter, etc.) directly in the dashboard or inside your agent. Full control over which provider and model your agent uses.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
SIGNUP SECTION (inline)
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="signup" class="signup-section">
|
|
<div class="container">
|
|
<div class="section-label">Hire Your Agent</div>
|
|
<h2 class="section-title">Create Your AI Agent Now</h2>
|
|
<p class="section-sub">
|
|
Sign up, pick your agent, and get a dedicated instance with full access. Billed monthly.
|
|
</p>
|
|
|
|
<div class="signup-card">
|
|
<!-- Pricing badge -->
|
|
<div class="signup-pricing-badge">
|
|
<div class="signup-pricing-amount">
|
|
<span class="pricing-original">$9.50</span>
|
|
<span class="pricing-discounted">$7.50</span> <span>USD / month</span>
|
|
</div>
|
|
<div class="pricing-discount-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>
|
|
Startup Discount −$2.00
|
|
</div>
|
|
<div class="signup-pricing-term">Per agent instance · Monthly termination · Limited time</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' });
|
|
}
|
|
});
|
|
});
|
|
|
|
/* ── 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-panel-slot").classList.toggle("open", chatOpen);
|
|
document.getElementById("chat-panel").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.");
|
|
}
|
|
document.getElementById("chat-input").focus();
|
|
}
|
|
}
|
|
|
|
function chatClose() {
|
|
if (chatOpen) chatToggle();
|
|
}
|
|
|
|
function chatOpenSilent() {
|
|
if (!chatOpen) {
|
|
chatOpen = true;
|
|
document.getElementById("chat-panel-slot").classList.add("open");
|
|
document.getElementById("chat-panel").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.textContent = "…";
|
|
|
|
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.textContent = "Send";
|
|
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> |