Oliver
2529 lines
112 KiB
HTML
2529 lines
112 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(--text-muted);
|
||
}
|
||
.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;
|
||
}
|
||
|
||
/* ── Config box ─────────────────────────────── */
|
||
.pricing-config-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin-bottom: 36px;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-card);
|
||
padding: 14px 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.pricing-config-label {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-muted);
|
||
white-space: nowrap;
|
||
}
|
||
.pricing-config-select {
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
padding: 6px 30px 6px 12px;
|
||
cursor: pointer;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 8px center;
|
||
min-width: 110px;
|
||
}
|
||
.pricing-config-select:hover { border-color: var(--accent); }
|
||
.pricing-config-select:focus { border-color: var(--accent); }
|
||
|
||
@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;
|
||
}
|
||
|
||
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
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 (glowing floating button + glass panel) ── */
|
||
.chat-fab {
|
||
position: fixed;
|
||
bottom: 28px;
|
||
right: 28px;
|
||
z-index: 9999;
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #4f8ef7, #6c5ce7);
|
||
border: none;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 24px rgba(79, 142, 247, 0.45), 0 0 0 0 rgba(79, 142, 247, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26px;
|
||
color: #fff;
|
||
transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
|
||
animation: fabPulse 2.5s ease-in-out infinite;
|
||
}
|
||
@keyframes fabPulse {
|
||
0%, 100% { box-shadow: 0 4px 24px rgba(79, 142, 247, 0.45), 0 0 0 0 rgba(79, 142, 247, 0.4); }
|
||
50% { box-shadow: 0 4px 32px rgba(79, 142, 247, 0.6), 0 0 0 12px rgba(79, 142, 247, 0); }
|
||
}
|
||
.chat-fab:hover {
|
||
transform: scale(1.12) rotate(-8deg);
|
||
box-shadow: 0 6px 36px rgba(79, 142, 247, 0.55);
|
||
animation: none;
|
||
}
|
||
.chat-fab:active { transform: scale(0.92); }
|
||
.chat-fab.open {
|
||
transform: scale(0.88);
|
||
opacity: 0.6;
|
||
animation: none;
|
||
}
|
||
.chat-widget {
|
||
position: fixed;
|
||
bottom: 100px;
|
||
right: 28px;
|
||
z-index: 9998;
|
||
width: 380px;
|
||
max-width: calc(100vw - 56px);
|
||
height: 520px;
|
||
max-height: calc(100vh - 160px);
|
||
background: rgba(26, 29, 39, 0.92);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(79, 142, 247, 0.25);
|
||
border-radius: 22px;
|
||
box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 40px rgba(79, 142, 247, 0.08);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(16px) scale(0.94);
|
||
transform-origin: bottom right;
|
||
transition: opacity 0.3s cubic-bezier(.22,1,.36,1), transform 0.35s cubic-bezier(.22,1,.36,1), visibility 0.3s;
|
||
}
|
||
.chat-widget.open {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
.chat-widget::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 22px;
|
||
padding: 1px;
|
||
background: linear-gradient(135deg, rgba(79, 142, 247, 0.35), rgba(108, 92, 231, 0.15), rgba(79, 142, 247, 0.35));
|
||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
pointer-events: none;
|
||
}
|
||
.chat-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 18px 20px 14px;
|
||
background: linear-gradient(135deg, rgba(79, 142, 247, 0.08), rgba(108, 92, 231, 0.04));
|
||
border-bottom: 1px solid rgba(79, 142, 247, 0.12);
|
||
}
|
||
.chat-header-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--accent-dim), #2a1f5e);
|
||
border: 2px solid var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
.chat-header-avatar::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
right: -1px;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--success);
|
||
border: 2px solid var(--bg-card);
|
||
}
|
||
.chat-header-info { flex: 1; min-width: 0; }
|
||
.chat-header-name {
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
color: var(--text);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.chat-header-status {
|
||
font-size: 11px;
|
||
color: var(--success);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.chat-header-status::before {
|
||
content: '';
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: var(--success);
|
||
display: inline-block;
|
||
animation: statusPulse 2s ease-in-out infinite;
|
||
}
|
||
@keyframes statusPulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.4; }
|
||
}
|
||
.chat-header-close {
|
||
background: none;
|
||
border: none;
|
||
color: var(--text-muted);
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
padding: 6px;
|
||
line-height: 1;
|
||
border-radius: 8px;
|
||
transition: color 0.15s, background 0.15s;
|
||
}
|
||
.chat-header-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
|
||
.chat-msgs {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 16px 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
scroll-behavior: smooth;
|
||
}
|
||
.chat-msgs::-webkit-scrollbar { width: 4px; }
|
||
.chat-msgs::-webkit-scrollbar-track { background: transparent; }
|
||
.chat-msgs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||
.chat-input-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 12px 16px 16px;
|
||
border-top: 1px solid rgba(79, 142, 247, 0.08);
|
||
background: rgba(15, 17, 23, 0.5);
|
||
}
|
||
.chat-input-box {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 10px 16px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 22px;
|
||
outline: none;
|
||
background: rgba(18, 21, 31, 0.8);
|
||
color: var(--text);
|
||
font-size: 13px;
|
||
transition: border-color 0.2s, box-shadow 0.2s;
|
||
}
|
||
.chat-input-box:focus {
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.1);
|
||
}
|
||
.chat-input-box::placeholder { color: var(--text-muted); }
|
||
.chat-send-btn {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--accent), #6c5ce7);
|
||
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.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s;
|
||
box-shadow: 0 2px 12px rgba(79, 142, 247, 0.3);
|
||
}
|
||
.chat-send-btn:hover { opacity: 0.9; transform: scale(1.08); box-shadow: 0 4px 16px rgba(79, 142, 247, 0.4); }
|
||
.chat-send-btn:active { transform: scale(0.88); }
|
||
.chat-send-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
|
||
.chat-msg {
|
||
max-width: 80%;
|
||
padding: 10px 14px;
|
||
border-radius: 16px;
|
||
line-height: 1.5;
|
||
word-wrap: break-word;
|
||
font-size: 13px;
|
||
animation: msgSlide 0.25s cubic-bezier(.22,1,.36,1);
|
||
}
|
||
@keyframes msgSlide {
|
||
from { opacity: 0; transform: translateY(8px) scale(0.97); }
|
||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||
}
|
||
.chat-msg-bot {
|
||
align-self: flex-start;
|
||
background: rgba(26, 29, 39, 0.8);
|
||
border: 1px solid rgba(79, 142, 247, 0.1);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
.chat-msg-user {
|
||
align-self: flex-end;
|
||
background: linear-gradient(135deg, var(--accent), #5a7de0);
|
||
color: #fff;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
.chat-msg-thinking {
|
||
align-self: flex-start;
|
||
background: rgba(26, 29, 39, 0.6);
|
||
border: 1px solid rgba(79, 142, 247, 0.08);
|
||
border-bottom-left-radius: 4px;
|
||
opacity: 0.5;
|
||
}
|
||
@media (max-width: 500px) {
|
||
.chat-widget {
|
||
right: 12px;
|
||
bottom: 84px;
|
||
width: calc(100vw - 24px);
|
||
max-height: calc(100vh - 120px);
|
||
}
|
||
.chat-fab {
|
||
right: 16px;
|
||
bottom: 20px;
|
||
width: 52px;
|
||
height: 52px;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
@media (max-width: 350px) {
|
||
.chat-widget { display: none; }
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════════
|
||
FOUNDER STORY
|
||
══════════════════════════════════════════════════════════ */
|
||
.story-card {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 40px;
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-hi);
|
||
border-radius: var(--radius-card);
|
||
padding: 40px 36px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.story-avatar {
|
||
flex-shrink: 0;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background: var(--accent-dim);
|
||
border: 2px solid var(--accent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
color: var(--accent);
|
||
overflow: hidden;
|
||
}
|
||
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
.story-body { flex: 1; }
|
||
.story-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--accent);
|
||
margin-bottom: 6px;
|
||
}
|
||
.story-body h2 {
|
||
margin-bottom: 16px;
|
||
font-size: 1.5rem;
|
||
}
|
||
.story-body p {
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
color: var(--text-muted);
|
||
margin-bottom: 14px;
|
||
}
|
||
.story-body p strong { color: var(--text); }
|
||
.story-signoff {
|
||
font-style: italic;
|
||
color: var(--accent) !important;
|
||
margin-top: 8px;
|
||
font-weight: 500;
|
||
}
|
||
@media (max-width: 600px) {
|
||
.story-card {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 24px;
|
||
padding: 28px 20px;
|
||
}
|
||
.story-avatar { width: 72px; height: 72px; font-size: 28px; }
|
||
}
|
||
</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="#pricing" 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="Chat with Sales Agent">
|
||
<svg width="28" height="28" 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>
|
||
</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">$4.99/mo</div>
|
||
<div class="hero-stat-label">Starting at</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>
|
||
|
||
<!-- ── Config: agent, billing, location ── -->
|
||
<div class="pricing-config-box">
|
||
<span class="pricing-config-label">Configure your agent</span>
|
||
<select class="pricing-config-select" id="pricing-agent">
|
||
<option value="hermes" selected>Hermes</option>
|
||
<option value="openclaw">OpenClaw</option>
|
||
</select>
|
||
<select class="pricing-config-select" id="pricing-period">
|
||
<option value="monthly" selected>Monthly</option>
|
||
<option value="yearly">Yearly</option>
|
||
</select>
|
||
<select class="pricing-config-select" id="pricing-location">
|
||
<option value="france">France</option>
|
||
</select>
|
||
</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 class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Your Agent's Office (root access)
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Management dashboard
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Daily automatic backups
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
OpenRouter key included
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Prompt Builder & Skills
|
||
</li>
|
||
<li class="new-feature">
|
||
<span class="plus-icon">+</span>
|
||
Support chat with human escalation
|
||
</li>
|
||
</ul>
|
||
<button class="btn btn-primary btn-block" onclick="hireAgent('trainee')">Hire Trainee</button>
|
||
</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>
|
||
<button class="btn btn-primary btn-block" onclick="hireAgent('junior')">Hire Junior</button>
|
||
</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>
|
||
<button class="btn btn-primary btn-block" onclick="hireAgent('senior')">Hire Senior</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════
|
||
FOUNDER STORY
|
||
═══════════════════════════════════════════════════════════════ -->
|
||
<section id="story">
|
||
<div class="container">
|
||
<div class="story-card">
|
||
<div class="story-avatar">
|
||
<img src="assets/images/oliver-arnold.jpg" alt="Oliver Arnold">
|
||
</div>
|
||
<div class="story-body">
|
||
<div class="story-label">From the Founder</div>
|
||
<h2>Why I Built Derez.ai</h2>
|
||
<p>
|
||
I set up Hermes Agent for my company, ODOO4projects LLC. After days of solid work,
|
||
two things hit me: <strong>I couldn't reuse my workflow for a new project without
|
||
trashing my current agent's context</strong>, and then — by accident — <strong>I deleted
|
||
my entire setup</strong>. No backup. No recovery. Just gone.
|
||
</p>
|
||
<p>
|
||
That's when it clicked: agents need to be <strong>scalable, portable, and backed up</strong>.
|
||
A month later, Derez.ai was live — dedicated instances, one-click backups, and a fresh
|
||
agent for every project. No more context collisions. No more accidental nukes.
|
||
</p>
|
||
<p class="story-signoff">— Oliver Arnold, Founder</p>
|
||
</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)">
|
||
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 class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
What integrations 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">
|
||
Predefined prompts you copy-paste to connect external services — the agent is happy to install and configure all integrations for you, the prompts are just to get you up and running faster. Available integrations:
|
||
<ul>
|
||
<li><strong>ODOO Community</strong> — automate ERP tasks via REST API</li>
|
||
<li><strong>IMAP / SMTP Email</strong> — read, send, and manage email</li>
|
||
<li><strong>N8N CRM</strong> — manage contacts and deal stages via webhook</li>
|
||
<li><strong>Nextcloud Sync</strong> — connect and sync folders via WebDAV</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-question" onclick="toggleFaq(this)">
|
||
What skills 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">
|
||
Predefined prompt templates that give your agent domain expertise — the agent is happy to install all skills for you, the prompts are just to get you up and running faster. Available skills:
|
||
<ul>
|
||
<li><strong>Competitor Profiling</strong> — profile competitors via live scraping & SEO data</li>
|
||
<li><strong>Copywriting</strong> — conversion copy for landing pages, ads, and emails</li>
|
||
<li><strong>Cold Email</strong> — B2B outreach sequences that get replies</li>
|
||
<li><strong>Social Media</strong> — content for LinkedIn, X, Instagram, TikTok</li>
|
||
<li><strong>Video Production</strong> — marketing videos with AI generation & avatars</li>
|
||
<li><strong>Conversion Optimization</strong> — audit pages to lift conversion rates</li>
|
||
<li><strong>Customer Research</strong> — mine transcripts, reviews & communities for insights</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</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://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' });
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ── Period / billing update ──────────────────────────── */
|
||
function updatePeriodDisplay() {
|
||
const sel = document.getElementById('pricing-period');
|
||
const yearly = sel.value === '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';
|
||
}
|
||
document.getElementById('pricing-period').addEventListener('change', updatePeriodDisplay);
|
||
|
||
/* ── Hire Agent Webhook ───────────────────────────── */
|
||
const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9";
|
||
|
||
async function hireAgent(product) {
|
||
const agent = document.getElementById('pricing-agent').value;
|
||
const period = document.getElementById('pricing-period').value;
|
||
const location = document.getElementById('pricing-location').value;
|
||
|
||
try {
|
||
await fetch(ORDER_WEBHOOK, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
product: product,
|
||
agent: agent,
|
||
period: period,
|
||
location: location,
|
||
}),
|
||
});
|
||
} catch (err) {
|
||
console.error('Order webhook failed:', err);
|
||
}
|
||
}
|
||
|
||
/* ── 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;
|
||
let probeTimer = null;
|
||
|
||
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) {
|
||
// User opened chat manually — cancel the auto-open probe
|
||
if (probeTimer) { clearTimeout(probeTimer); probeTimer = null; }
|
||
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(), 300);
|
||
}
|
||
}
|
||
|
||
function chatClose() {
|
||
if (chatOpen) chatToggle();
|
||
}
|
||
|
||
function chatOpenSilent() {
|
||
if (!chatOpen) {
|
||
chatOpen = true;
|
||
document.getElementById('chat-widget').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;
|
||
// strip <script> and on* handlers to prevent XSS, but render safe HTML
|
||
div.innerHTML = text.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
|
||
.replace(/\son\w+\s*=\s*"[^"]*"/gi, '')
|
||
.replace(/\son\w+\s*=\s*'[^']*'/gi, '');
|
||
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;
|
||
probeTimer = 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;
|
||
if (!chatOpen) chatOpenSilent();
|
||
}
|
||
})
|
||
.catch(function () {});
|
||
}
|
||
})();
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |