Oliver
4470 lines
184 KiB
HTML
4470 lines
184 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). 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, 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."
|
|
/>
|
|
<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 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 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 other AI agent frameworks. 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: #000810;
|
|
--bg-card: #010f20;
|
|
--bg-inner: #000d1a;
|
|
--bg-hover: #001a30;
|
|
--bg-input: #000813;
|
|
--border: #0a3060;
|
|
--border-hi: rgba(0, 245, 255, 0.45);
|
|
--accent: #00f5ff;
|
|
--accent-dim: #002535;
|
|
--danger: #ff3b3b;
|
|
--danger-dim: #3b0000;
|
|
--success: #00ff88;
|
|
--warning: #ffaa00;
|
|
--text: #c8f0ff;
|
|
--text-muted: #2e6a80;
|
|
--radius: 8px;
|
|
--radius-card: 18px;
|
|
--shadow:
|
|
0 0 0 1px rgba(0, 245, 255, 0.25),
|
|
0 0 60px rgba(0, 245, 255, 0.12),
|
|
0 28px 72px rgba(0, 0, 0, 0.9);
|
|
--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: "Courier New", Courier, monospace;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 14px;
|
|
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(0, 245, 255, 0.06) 0%,
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
ellipse 50% 60% at 75% 70%,
|
|
rgba(0, 200, 255, 0.04) 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.1rem;
|
|
}
|
|
p {
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
}
|
|
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: transparent;
|
|
color: #fff;
|
|
border: 1px solid var(--accent);
|
|
box-shadow:
|
|
0 0 8px rgba(0, 245, 255, 0.35),
|
|
inset 0 0 8px rgba(0, 245, 255, 0.04);
|
|
}
|
|
.btn-primary:hover {
|
|
background: rgba(0, 245, 255, 0.08);
|
|
box-shadow:
|
|
0 0 14px rgba(0, 245, 255, 0.5),
|
|
inset 0 0 10px rgba(0, 245, 255, 0.06);
|
|
}
|
|
.btn-ghost {
|
|
background: var(--bg-hover);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-ghost:hover {
|
|
opacity: 0.85;
|
|
background: var(--bg-hover);
|
|
border-color: var(--border);
|
|
}
|
|
.btn-lg {
|
|
padding: 12px 28px;
|
|
font-size: 13px;
|
|
border-radius: 8px;
|
|
}
|
|
.btn-block {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
HEADER / NAV
|
|
══════════════════════════════════════════════════════════ */
|
|
.site-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 8, 16, 0.85);
|
|
backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--border-hi);
|
|
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;
|
|
flex-shrink: 0;
|
|
}
|
|
.site-logo:hover {
|
|
text-decoration: none;
|
|
}
|
|
.site-logo-img {
|
|
display: block;
|
|
height: 34px;
|
|
width: auto;
|
|
}
|
|
|
|
.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(0, 245, 255, 0.05) 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(0, 245, 255, 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), #66e5ff);
|
|
-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(0, 245, 255, 0.12);
|
|
line-height: 1;
|
|
margin-bottom: 12px;
|
|
}
|
|
.step-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(0, 245, 255, 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(0, 245, 255, 0.04) 0%,
|
|
var(--bg-inner) 100%
|
|
);
|
|
}
|
|
.feature-badge {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 16px;
|
|
background: var(--accent);
|
|
color: #000;
|
|
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(0, 245, 255, 0.05) 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: #000;
|
|
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;
|
|
}
|
|
.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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.pricing-card.featured {
|
|
border-color: var(--accent);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 245, 255, 0.05) 0%,
|
|
var(--bg-card) 100%
|
|
);
|
|
transform: scale(1.04);
|
|
}
|
|
.pricing-perks {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin: 14px 0 24px;
|
|
flex: 1;
|
|
}
|
|
.pricing-card .btn-block {
|
|
margin-top: auto;
|
|
}
|
|
.pricing-badge {
|
|
position: absolute;
|
|
top: -11px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--accent);
|
|
color: #000;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 3px 18px;
|
|
border-radius: 20px;
|
|
}
|
|
.pricing-badge-coupon {
|
|
display: none;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #f59e0b;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border: 1px solid rgba(245, 158, 11, 0.25);
|
|
border-radius: 6px;
|
|
padding: 3px 10px;
|
|
margin-top: 8px;
|
|
margin-bottom: 4px;
|
|
line-height: 1.4;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.pricing-badge-coupon.visible {
|
|
display: inline-block;
|
|
}
|
|
.pricing-badge-coupon.free {
|
|
color: #22c55e;
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border-color: rgba(34, 197, 94, 0.25);
|
|
}
|
|
.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);
|
|
}
|
|
.pricing-config-input {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
padding: 6px 12px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
width: 120px;
|
|
}
|
|
.pricing-config-input:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
.pricing-config-input::placeholder {
|
|
color: var(--text-muted);
|
|
opacity: 0.6;
|
|
}
|
|
#pricing-email {
|
|
width: 234px;
|
|
}
|
|
#pricing-email.invalid {
|
|
border-color: var(--danger);
|
|
box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.2);
|
|
}
|
|
|
|
.pricing-toast {
|
|
position: fixed;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(20px);
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--danger);
|
|
border-radius: var(--radius-card);
|
|
padding: 16px 24px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition:
|
|
opacity 0.3s,
|
|
transform 0.3s,
|
|
visibility 0.3s;
|
|
z-index: 9999;
|
|
max-width: 420px;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
.pricing-toast.show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
@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;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
BLOG
|
|
══════════════════════════════════════════════════════════ */
|
|
.blog-search {
|
|
max-width: 480px;
|
|
margin: -20px auto 32px;
|
|
}
|
|
.blog-search input {
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
background: var(--bg-input);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.blog-search input:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
.blog-search input::placeholder {
|
|
color: var(--text-muted);
|
|
}
|
|
.blog-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.blog-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-card);
|
|
padding: 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition:
|
|
border-color 0.2s,
|
|
transform 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
.blog-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-2px);
|
|
}
|
|
.blog-card-area {
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
padding: 3px 12px;
|
|
border-radius: 20px;
|
|
margin-bottom: 12px;
|
|
align-self: flex-start;
|
|
color: #000;
|
|
}
|
|
.blog-card-area.area-howto {
|
|
background: #00f5ff;
|
|
}
|
|
.blog-card-area.area-news {
|
|
background: #ffaa00;
|
|
}
|
|
.blog-card-area.area-video-scripts {
|
|
background: #00ff88;
|
|
}
|
|
.blog-card-area.area-speed-run {
|
|
background: #f472b6;
|
|
}
|
|
.blog-card-area.area-default {
|
|
background: #a78bfa;
|
|
}
|
|
.blog-card-chip {
|
|
display: inline-block;
|
|
background: rgba(0, 245, 255, 0.08);
|
|
color: #00f5ff;
|
|
border: 1px solid rgba(0, 245, 255, 0.25);
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
padding: 2px 10px;
|
|
border-radius: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 12px;
|
|
align-self: flex-start;
|
|
}
|
|
.blog-card-date {
|
|
font-size: 0.8rem;
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.blog-card h3 {
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin-bottom: 10px;
|
|
color: var(--text);
|
|
}
|
|
.blog-card p {
|
|
font-size: 0.88rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
flex: 1;
|
|
}
|
|
.blog-card-link {
|
|
margin-top: 16px;
|
|
font-size: 0.85rem;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
.blog-card:hover .blog-card-link {
|
|
text-decoration: underline;
|
|
}
|
|
.blog-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
.blog-pagination button {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
padding: 10px 24px;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.88rem;
|
|
transition:
|
|
border-color 0.2s,
|
|
color 0.2s;
|
|
}
|
|
.blog-pagination button:hover:not(:disabled) {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.blog-pagination button:disabled {
|
|
opacity: 0.3;
|
|
cursor: default;
|
|
}
|
|
.blog-page-info {
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.blog-empty {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.blog-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 600px) {
|
|
.blog-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
TOPICS
|
|
══════════════════════════════════════════════════════════ */
|
|
.topics-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
margin-top: 20px;
|
|
}
|
|
.topic-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
padding: 28px;
|
|
text-decoration: none;
|
|
transition: border-color .2s, transform .2s;
|
|
}
|
|
.topic-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-3px);
|
|
text-decoration: none;
|
|
}
|
|
.topic-badge {
|
|
display: inline-block;
|
|
background: rgba(0,245,255,0.1);
|
|
color: var(--accent);
|
|
border: 1px solid rgba(0,245,255,0.25);
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
padding: 3px 10px;
|
|
border-radius: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
align-self: flex-start;
|
|
margin-bottom: 14px;
|
|
}
|
|
.topic-card h3 {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 8px;
|
|
line-height: 1.3;
|
|
}
|
|
.topic-card p {
|
|
font-size: 0.88rem;
|
|
color: var(--text-muted);
|
|
flex: 1;
|
|
margin-bottom: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
.topic-link {
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
font-size: 0.88rem;
|
|
align-self: flex-start;
|
|
}
|
|
.topic-card:hover .topic-link {
|
|
text-decoration: underline;
|
|
}
|
|
@media (max-width: 700px) {
|
|
.topics-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
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, #00f5ff, #0099cc);
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow:
|
|
0 4px 24px rgba(0, 245, 255, 0.4),
|
|
0 0 0 0 rgba(0, 245, 255, 0.35);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26px;
|
|
color: #000;
|
|
transition:
|
|
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
box-shadow 0.3s;
|
|
animation: fabPulse 2.5s ease-in-out infinite;
|
|
}
|
|
@keyframes fabPulse {
|
|
0%,
|
|
100% {
|
|
box-shadow:
|
|
0 4px 24px rgba(0, 245, 255, 0.4),
|
|
0 0 0 0 rgba(0, 245, 255, 0.35);
|
|
}
|
|
50% {
|
|
box-shadow:
|
|
0 4px 32px rgba(0, 245, 255, 0.55),
|
|
0 0 0 12px rgba(0, 245, 255, 0);
|
|
}
|
|
}
|
|
.chat-fab:hover {
|
|
transform: scale(1.12) rotate(-8deg);
|
|
box-shadow: 0 6px 36px rgba(0, 245, 255, 0.5);
|
|
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(1, 15, 32, 0.92);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(0, 245, 255, 0.25);
|
|
border-radius: 22px;
|
|
box-shadow:
|
|
0 24px 80px rgba(0, 0, 0, 0.6),
|
|
0 0 40px rgba(0, 245, 255, 0.06);
|
|
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(0.22, 1, 0.36, 1),
|
|
transform 0.35s cubic-bezier(0.22, 1, 0.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(0, 245, 255, 0.35),
|
|
rgba(0, 153, 204, 0.15),
|
|
rgba(0, 245, 255, 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(0, 245, 255, 0.08),
|
|
rgba(0, 153, 204, 0.04)
|
|
);
|
|
border-bottom: 1px solid rgba(0, 245, 255, 0.12);
|
|
}
|
|
.chat-header-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--accent-dim), #002535);
|
|
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(0, 245, 255, 0.08);
|
|
background: rgba(0, 8, 16, 0.5);
|
|
}
|
|
.chat-input-box {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 10px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 22px;
|
|
outline: none;
|
|
background: var(--bg-input);
|
|
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(0, 245, 255, 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), #0099cc);
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #000;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
transition:
|
|
opacity 0.15s,
|
|
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
|
box-shadow 0.2s;
|
|
box-shadow: 0 2px 12px rgba(0, 245, 255, 0.25);
|
|
}
|
|
.chat-send-btn:hover {
|
|
opacity: 0.9;
|
|
transform: scale(1.08);
|
|
box-shadow: 0 4px 16px rgba(0, 245, 255, 0.35);
|
|
}
|
|
.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(0.22, 1, 0.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(1, 15, 32, 0.8);
|
|
border: 1px solid rgba(0, 245, 255, 0.1);
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
.chat-msg-user {
|
|
align-self: flex-end;
|
|
background: linear-gradient(135deg, var(--accent), #0099cc);
|
|
color: #000;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
.chat-msg-thinking {
|
|
align-self: flex-start;
|
|
background: rgba(1, 15, 32, 0.6);
|
|
border: 1px solid rgba(0, 245, 255, 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>
|
|
<!-- ── Plausible Analytics ──────────────────────────────────────── -->
|
|
<script
|
|
defer
|
|
data-domain="derez.ai"
|
|
src="https://plausible.odoo4projects.com/js/script.file-downloads.outbound-links.tagged-events.js"
|
|
></script>
|
|
<script>
|
|
window.plausible =
|
|
window.plausible ||
|
|
function () {
|
|
(window.plausible.q = window.plausible.q || []).push(
|
|
arguments,
|
|
);
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
HEADER
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<header class="site-header" id="site-header">
|
|
<div class="container">
|
|
<a href="/" class="site-logo">
|
|
<img
|
|
src="assets/images/logo.svg"
|
|
alt="Derez.ai"
|
|
width="132"
|
|
height="34"
|
|
class="site-logo-img"
|
|
/>
|
|
</a>
|
|
|
|
<ul class="nav-links" id="nav-links">
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
<li><a href="#blog">Blog</a></li>
|
|
<li><a href="#topics">Topics</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"
|
|
>Buy 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. 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) {
|
|
plausible("Speedrun Nav", {
|
|
props: { direction: dir > 0 ? "next" : "prev" },
|
|
});
|
|
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 and buy your agent</span>
|
|
<select class="pricing-config-select" id="pricing-agent">
|
|
<option value="hermes" selected>Hermes</option>
|
|
</select>
|
|
<select class="pricing-config-select" id="pricing-period">
|
|
<option value="monthly" selected>Monthly</option>
|
|
<option value="yearly">Yearly</option>
|
|
</select>
|
|
<option value="france">France</option>
|
|
</select>
|
|
<input
|
|
type="email"
|
|
class="pricing-config-input"
|
|
id="pricing-email"
|
|
placeholder="Email"
|
|
autocomplete="email"
|
|
/>
|
|
<input
|
|
type="text"
|
|
class="pricing-config-input"
|
|
id="pricing-coupon"
|
|
placeholder="Coupon code"
|
|
/>
|
|
<input type="hidden" id="utm_source" />
|
|
<input type="hidden" id="utm_medium" />
|
|
<input type="hidden" id="utm_campaign" />
|
|
<input type="hidden" id="utm_term" />
|
|
<input type="hidden" id="utm_content" />
|
|
</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-badge-coupon" id="badge-trainee">
|
|
First Month <span class="badge-price">—</span>
|
|
</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
|
|
</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')"
|
|
>
|
|
Continue with Stripe
|
|
</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-badge-coupon" id="badge-junior">
|
|
First Month <span class="badge-price">—</span>
|
|
</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
|
|
</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')"
|
|
>
|
|
Continue with Stripe
|
|
</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-badge-coupon" id="badge-senior">
|
|
First Month <span class="badge-price">—</span>
|
|
</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">
|
|
3GB RAM · 30GB 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
|
|
</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')"
|
|
>
|
|
Continue with Stripe
|
|
</button>
|
|
</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. SSH XS is optional but available. 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 one backup each day of your agent's full
|
|
workspace — not just configs, the entire
|
|
environment. You can also create on-demand backups
|
|
anytime from the dashboard with one click, perfect
|
|
for when you have an agent status that works
|
|
perfectly. Backups are kept for 7 days (daily) and 8
|
|
weeks (weekly) using Borg's prune retention policy,
|
|
so older snapshots are automatically cleaned up.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Is my data encrypted in backups?
|
|
<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. All backups leave our server fully encrypted.
|
|
Your data is encrypted before it's transferred off
|
|
your agent's instance, and it stays encrypted at
|
|
rest. No third party — including us — has access to
|
|
your client's data. Only you hold the keys to your
|
|
backups.
|
|
</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 class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Troubleshooting
|
|
<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">
|
|
If you're getting a "Bad Gateway" or
|
|
"Not Found" error, first try restarting
|
|
your agent from the dashboard. If that doesn't
|
|
resolve it, restore your agent from a recent backup
|
|
using the dashboard's one-click restore — your data
|
|
will be safe.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
How do updates 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">
|
|
Each container is completely managed by the agent itself. We do not push any system or agent updates into the containers. Instead, we provide a prompt in the configuration menu that your agent can use to create its own cron job for updating the container and itself — giving you full control over when and how updates happen.
|
|
</div>
|
|
</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>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
BLOG
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="blog">
|
|
<div class="container">
|
|
<h2 class="section-title">Latest from the Blog</h2>
|
|
<p class="section-sub">
|
|
Tips, tutorials, and news about AI agents and automation.
|
|
</p>
|
|
|
|
<div class="blog-search">
|
|
<input
|
|
type="text"
|
|
id="blog-search-input"
|
|
placeholder="Search posts by keyword, area, or headline..."
|
|
/>
|
|
</div>
|
|
|
|
<div class="blog-grid" id="blog-grid"></div>
|
|
|
|
<div class="blog-pagination" id="blog-pagination">
|
|
<button id="blog-prev" onclick="blogPrev()" disabled>
|
|
← Previous
|
|
</button>
|
|
<span id="blog-page-info" class="blog-page-info"></span>
|
|
<button id="blog-next" onclick="blogNext()">
|
|
Next →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
FOCUS TOPICS
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="topics">
|
|
<div class="container">
|
|
<h2 class="section-title">📌 Focus Topics</h2>
|
|
<div class="topics-grid">
|
|
<a href="odoo-hermes-agent.html" class="topic-card">
|
|
<div class="topic-badge">Integration</div>
|
|
<h3>Odoo Hermes Agent</h3>
|
|
<p>Connect your Odoo ERP to Hermes Agent in 5 minutes. Read, write, and automate your business data through natural language prompts.</p>
|
|
<span class="topic-link">Explore →</span>
|
|
</a>
|
|
<a href="chatgpt-agent.html" class="topic-card">
|
|
<div class="topic-badge">Guide</div>
|
|
<h3>ChatGPT AI Agent</h3>
|
|
<p>Build and deploy your own ChatGPT-powered AI agent. Full SSH access, no coding, enterprise-grade hosting — deploy in under 5 minutes.</p>
|
|
<span class="topic-link">Explore →</span>
|
|
</a>
|
|
</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://www.youtube.com/@derez_ai"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>YouTube</a
|
|
>
|
|
<a
|
|
href="https://www.linkedin.com/company/derez-ai"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>LinkedIn</a
|
|
>
|
|
<a
|
|
href="https://ODOO4projects.com"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>Powered by ODOO4projects LLC</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
JAVASCRIPT
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<script>
|
|
// ── Mobile menu ──────────────────────────────────────────
|
|
function toggleMobile() {
|
|
plausible("Mobile Menu Toggle");
|
|
const nav = document.getElementById("nav-links");
|
|
nav.classList.toggle("mobile-open");
|
|
}
|
|
|
|
// ── FAQ accordion ────────────────────────────────────────
|
|
function toggleFaq(btn) {
|
|
const q = btn.innerText.replace(/[?✦]/g, "").trim();
|
|
plausible("FAQ Toggle", { props: { question: q } });
|
|
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 = "Buy 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);
|
|
updatePeriodDisplay(); // fire on load so yearly bonuses show by default
|
|
|
|
/* ── Capture UTM params from URL ──────────────────────────── */
|
|
(function () {
|
|
const params = new URLSearchParams(window.location.search);
|
|
["source", "medium", "campaign", "term", "content"].forEach(
|
|
function (key) {
|
|
const val = params.get("utm_" + key);
|
|
if (val)
|
|
document.getElementById("utm_" + key).value = val;
|
|
},
|
|
);
|
|
})();
|
|
|
|
/* ── Buy Agent Webhook ───────────────────────────── */
|
|
const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/payment";
|
|
|
|
function showPricingToast(msg) {
|
|
const el = document.getElementById("pricing-toast");
|
|
el.textContent = msg;
|
|
el.classList.add("show");
|
|
if (window._pricingToastTimer)
|
|
clearTimeout(window._pricingToastTimer);
|
|
window._pricingToastTimer = setTimeout(function () {
|
|
el.classList.remove("show");
|
|
}, 20000);
|
|
}
|
|
|
|
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;
|
|
const email = document
|
|
.getElementById("pricing-email")
|
|
.value.trim();
|
|
const coupon = document
|
|
.getElementById("pricing-coupon")
|
|
.value.trim();
|
|
|
|
// Validate email
|
|
const emailInput = document.getElementById("pricing-email");
|
|
emailInput.classList.remove("invalid");
|
|
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
|
emailInput.classList.add("invalid");
|
|
showPricingToast(
|
|
"Please configure your agent and provide a valid email address.",
|
|
);
|
|
emailInput.focus();
|
|
return;
|
|
}
|
|
|
|
plausible("Pricing Click", {
|
|
props: { product: product, agent: agent, period: period },
|
|
});
|
|
|
|
try {
|
|
// Use a hidden form POST so the 302 redirect opens naturally in the new tab
|
|
const form = document.createElement("form");
|
|
form.method = "POST";
|
|
form.action = ORDER_WEBHOOK;
|
|
form.target = "_self";
|
|
form.style.display = "none";
|
|
|
|
const fields = {
|
|
product: product,
|
|
agent: agent,
|
|
period: period,
|
|
location: location,
|
|
email: email || "",
|
|
coupon: coupon || "",
|
|
utm_source:
|
|
document.getElementById("utm_source").value || "",
|
|
utm_medium:
|
|
document.getElementById("utm_medium").value || "",
|
|
utm_campaign:
|
|
document.getElementById("utm_campaign").value || "",
|
|
utm_term:
|
|
document.getElementById("utm_term").value || "",
|
|
utm_content:
|
|
document.getElementById("utm_content").value || "",
|
|
};
|
|
|
|
Object.keys(fields).forEach(function (key) {
|
|
const inp = document.createElement("input");
|
|
inp.type = "hidden";
|
|
inp.name = key;
|
|
inp.value = fields[key];
|
|
form.appendChild(inp);
|
|
});
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
document.body.removeChild(form);
|
|
} 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() {
|
|
plausible("Chat Toggle", {
|
|
props: { action: chatOpen ? "close" : "open" },
|
|
});
|
|
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;
|
|
plausible("Chat Message Sent");
|
|
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 () {});
|
|
}
|
|
})();
|
|
|
|
/* ── Scroll Depth Tracking ────────────────────────── */
|
|
(function () {
|
|
const thresholds = [25, 50, 75, 100];
|
|
let sent = {};
|
|
let ticking = false;
|
|
window.addEventListener("scroll", function () {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(function () {
|
|
const scrolled =
|
|
window.pageYOffset + window.innerHeight;
|
|
const total = document.documentElement.scrollHeight;
|
|
const pct = Math.min(
|
|
100,
|
|
Math.round((scrolled / total) * 100),
|
|
);
|
|
thresholds.forEach(function (t) {
|
|
if (pct >= t && !sent[t]) {
|
|
sent[t] = true;
|
|
plausible("Scroll Depth", {
|
|
props: { percent: t + "%" },
|
|
});
|
|
}
|
|
});
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
})();
|
|
|
|
/* ── Coupon Badges ──────────────────────────────────── */
|
|
const COUPONS = {
|
|
// 499
|
|
blog499: 499,
|
|
creator499: 499,
|
|
friends499: 499,
|
|
|
|
// 950
|
|
blog950: 950,
|
|
creator950: 950,
|
|
friends950: 950,
|
|
|
|
// 1750
|
|
blog1750: 1750,
|
|
friends1750: 1750,
|
|
creator1750: 1750,
|
|
};
|
|
const PLAN_PRICES = { trainee: 499, junior: 950, senior: 1750 };
|
|
function centsToDollar(c) {
|
|
return "$" + (c / 100).toFixed(2);
|
|
}
|
|
function updateCouponBadges() {
|
|
var code = document
|
|
.getElementById("pricing-coupon")
|
|
.value.trim()
|
|
.toLowerCase();
|
|
var discount = COUPONS[code];
|
|
["trainee", "junior", "senior"].forEach(function (plan) {
|
|
var badge = document.getElementById("badge-" + plan);
|
|
if (discount !== undefined) {
|
|
var firstMonth = Math.max(
|
|
0,
|
|
PLAN_PRICES[plan] - discount,
|
|
);
|
|
badge.querySelector(".badge-price").textContent =
|
|
centsToDollar(firstMonth);
|
|
badge.classList.add("visible");
|
|
if (firstMonth === 0) badge.classList.add("free");
|
|
else badge.classList.remove("free");
|
|
} else {
|
|
badge.classList.remove("visible", "free");
|
|
badge.querySelector(".badge-price").textContent = "—";
|
|
}
|
|
});
|
|
}
|
|
document
|
|
.getElementById("pricing-coupon")
|
|
.addEventListener("input", updateCouponBadges);
|
|
|
|
/* ── Blog ──────────────────────────────────────────────── */
|
|
const BLOG_POSTS_PER_PAGE = 6;
|
|
let blogAllPosts = [];
|
|
let blogFilteredPosts = [];
|
|
let blogCurrentPage = 0;
|
|
|
|
function blogFormatDate(dateStr) {
|
|
const d = new Date(dateStr);
|
|
const months = [
|
|
"Jan",
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
];
|
|
return (
|
|
months[d.getMonth()] +
|
|
" " +
|
|
d.getDate() +
|
|
", " +
|
|
d.getFullYear()
|
|
);
|
|
}
|
|
|
|
function blogAreaClass(area) {
|
|
var map = {
|
|
howto: "area-howto",
|
|
news: "area-news",
|
|
"video-scripts": "area-video-scripts",
|
|
"speed-run": "area-speed-run",
|
|
};
|
|
return map[area] || "area-default";
|
|
}
|
|
|
|
function blogRender() {
|
|
const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
|
|
const pagePosts = blogFilteredPosts.slice(
|
|
start,
|
|
start + BLOG_POSTS_PER_PAGE,
|
|
);
|
|
const grid = document.getElementById("blog-grid");
|
|
const totalPages = Math.max(
|
|
1,
|
|
Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE),
|
|
);
|
|
|
|
if (pagePosts.length === 0) {
|
|
grid.innerHTML =
|
|
'<div class="blog-empty">No posts match your search.</div>';
|
|
document.getElementById("blog-page-info").textContent = "";
|
|
document.getElementById("blog-prev").disabled = true;
|
|
document.getElementById("blog-next").disabled = true;
|
|
return;
|
|
}
|
|
|
|
grid.innerHTML = pagePosts
|
|
.map(function (p) {
|
|
var chip = p.agent
|
|
? '<span class="blog-card-chip">' +
|
|
p.agent +
|
|
"</span>"
|
|
: "";
|
|
return (
|
|
'<a href="' +
|
|
p.link +
|
|
'" class="blog-card" style="text-decoration:none" onclick="plausible(\'Blog Card Click\',{props:{post:\'' +
|
|
p.id.replace(/'/g, "\\'") +
|
|
'\',area:\'' +
|
|
p.area.replace(/'/g, "\\'") +
|
|
"'}})'>" +
|
|
'<span style="display:flex;gap:6px;flex-wrap:wrap;align-self:flex-start">' +
|
|
'<span class="blog-card-area ' +
|
|
blogAreaClass(p.area) +
|
|
'">' +
|
|
p.area +
|
|
"</span>" +
|
|
chip +
|
|
"</span>" +
|
|
'<span class="blog-card-date">' +
|
|
blogFormatDate(p.date) +
|
|
"</span>" +
|
|
"<h3>" +
|
|
p.headline +
|
|
"</h3>" +
|
|
"<p>" +
|
|
p.teaser +
|
|
"</p>" +
|
|
'<span class="blog-card-link">Read more →</span>' +
|
|
"</a>"
|
|
);
|
|
})
|
|
.join("");
|
|
|
|
document.getElementById("blog-page-info").textContent =
|
|
"Page " + (blogCurrentPage + 1) + " of " + totalPages;
|
|
document.getElementById("blog-prev").disabled =
|
|
blogCurrentPage === 0;
|
|
document.getElementById("blog-next").disabled =
|
|
blogCurrentPage >= totalPages - 1;
|
|
}
|
|
|
|
function blogPrev() {
|
|
if (blogCurrentPage > 0) {
|
|
blogCurrentPage--;
|
|
blogRender();
|
|
}
|
|
}
|
|
|
|
function blogNext() {
|
|
const totalPages = Math.ceil(
|
|
blogFilteredPosts.length / BLOG_POSTS_PER_PAGE,
|
|
);
|
|
if (blogCurrentPage < totalPages - 1) {
|
|
blogCurrentPage++;
|
|
blogRender();
|
|
}
|
|
}
|
|
|
|
function blogFilter() {
|
|
const q = document
|
|
.getElementById("blog-search-input")
|
|
.value.trim()
|
|
.toLowerCase();
|
|
if (!q) {
|
|
blogFilteredPosts = blogAllPosts.slice();
|
|
} else {
|
|
blogFilteredPosts = blogAllPosts.filter(function (p) {
|
|
return (
|
|
p.headline.toLowerCase().indexOf(q) !== -1 ||
|
|
p.teaser.toLowerCase().indexOf(q) !== -1 ||
|
|
p.area.toLowerCase().indexOf(q) !== -1
|
|
);
|
|
});
|
|
}
|
|
blogCurrentPage = 0;
|
|
blogRender();
|
|
}
|
|
|
|
// Load blog index
|
|
fetch("blog/index.json?_=" + Date.now())
|
|
.then(function (r) {
|
|
return r.json();
|
|
})
|
|
.then(function (data) {
|
|
blogAllPosts = data.posts || [];
|
|
blogFilteredPosts = blogAllPosts.slice();
|
|
blogRender();
|
|
})
|
|
.catch(function () {
|
|
document.getElementById("blog-grid").innerHTML =
|
|
'<div class="blog-empty">Blog coming soon.</div>';
|
|
});
|
|
|
|
// Search on input
|
|
document
|
|
.getElementById("blog-search-input")
|
|
.addEventListener("input", blogFilter);
|
|
</script>
|
|
|
|
<div class="pricing-toast" id="pricing-toast"></div>
|
|
</body>
|
|
</html>
|