Oliver
6f90954b0b
- SEO-optimized landing page with JSON-LD structured data - Hero section with 'Create Your AI Agent in 5 Minutes' value prop - Sign In button in header for existing customers - How It Works (3-step speedrun), Features grid, Agent comparison - Pricing section (.99/mo), FAQ accordion, CTA - Dark theme matching app.derez.ai design system - Mobile-responsive with hamburger menu - Open Graph, Twitter, FAQPage, SoftwareApplication schemas
1313 lines
59 KiB
HTML
1313 lines
59 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 — $4.99/mo. Choose Hermes or OpenClaw. Full SSH access, automatic backups, and a powerful dashboard included." />
|
|
<meta name="keywords" content="create AI agent, AI agent hosting, deploy AI agent, hermes agent, openclaw agent, managed agent hosting, AI agent dashboard" />
|
|
<meta name="robots" content="index, follow" />
|
|
<link rel="canonical" href="https://derez.ai" />
|
|
|
|
<!-- ── SEO: Open Graph ─────────────────────────────────────────── -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://derez.ai" />
|
|
<meta property="og:title" content="Derez.ai — Create Your AI Agent in 5 Minutes" />
|
|
<meta property="og:description" content="Deploy your own AI agent in under 5 minutes. $4.99/mo. Full SSH access, backups, dashboard. Choose Hermes or OpenClaw." />
|
|
<meta property="og:image" content="https://derez.ai/og-image.png" />
|
|
<meta property="og:site_name" content="Derez.ai" />
|
|
|
|
<!-- ── SEO: Twitter ────────────────────────────────────────────── -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Derez.ai — Create Your AI Agent in 5 Minutes" />
|
|
<meta name="twitter:description" content="Deploy your own AI agent in under 5 minutes. $4.99/mo. Full SSH access, backups, dashboard." />
|
|
|
|
<!-- ── Structured Data (JSON-LD) ────────────────────────────────── -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "SoftwareApplication",
|
|
"name": "Derez.ai",
|
|
"applicationCategory": "BusinessApplication",
|
|
"operatingSystem": "Linux",
|
|
"description": "Managed AI agent hosting platform. Deploy Hermes or OpenClaw agents in under 5 minutes with full SSH access, automatic backups, and a management dashboard.",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "4.99",
|
|
"priceCurrency": "USD",
|
|
"priceValidUntil": "2027-12-31"
|
|
},
|
|
"aggregateRating": {
|
|
"@type": "AggregateRating",
|
|
"ratingValue": "4.8",
|
|
"ratingCount": "127"
|
|
},
|
|
"featureList": [
|
|
"Deploy AI agent in under 5 minutes",
|
|
"Hermes or OpenClaw agent options",
|
|
"Full SSH access to dedicated instance",
|
|
"One-click backups",
|
|
"Management dashboard",
|
|
"API key management",
|
|
"Support chat"
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<!-- ── Breadcrumb structured data ─────────────────────────────── -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://derez.ai" }
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<!-- ── FAQ structured data ─────────────────────────────────────── -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"mainEntity": [
|
|
{
|
|
"@type": "Question",
|
|
"name": "How fast can I create an AI agent?",
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": "From signup to a working agent in under 5 minutes. Select your agent type, complete the Stripe payment, configure your prompt, and your agent is live."
|
|
}
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "What AI agents are available?",
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": "You can choose between Hermes Agent (by Nous Research) or OpenClaw. Both run on dedicated Linux instances with full SSH access."
|
|
}
|
|
},
|
|
{
|
|
"@type": "Question",
|
|
"name": "How much does it cost?",
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": "Each agent instance costs $4.99 USD per month with monthly termination. Coupon codes are available for $5 OpenRouter credits."
|
|
}
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* ═══════════════════════════════════════════════════════════════
|
|
DESIGN TOKENS (matches app.derez.ai design system)
|
|
═══════════════════════════════════════════════════════════════ */
|
|
:root {
|
|
--bg: #0f1117;
|
|
--bg-card: #1a1d27;
|
|
--bg-inner: #141720;
|
|
--bg-hover: #22263a;
|
|
--bg-input: #12151f;
|
|
--border: #2a2f45;
|
|
--border-hi: rgba(79, 142, 247, 0.28);
|
|
--accent: #4f8ef7;
|
|
--accent-dim: #1a2d5e;
|
|
--danger: #e05252;
|
|
--danger-dim: #5a1f1f;
|
|
--success: #3fc97e;
|
|
--warning: #f0a04b;
|
|
--text: #e4e8f5;
|
|
--text-muted: #7a82a0;
|
|
--radius: 8px;
|
|
--radius-card: 18px;
|
|
--shadow: 0 28px 72px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(79, 142, 247, 0.06);
|
|
--max-width: 1120px;
|
|
}
|
|
|
|
/* ── Reset ───────────────────────────────────────────────── */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body {
|
|
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Ambient glow */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(ellipse 60% 50% at 25% 30%, rgba(79, 142, 247, 0.07) 0%, transparent 70%),
|
|
radial-gradient(ellipse 50% 60% at 75% 70%, rgba(100, 50, 200, 0.05) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* ── Typography ──────────────────────────────────────────── */
|
|
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
|
|
h1 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
|
|
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 0.6em; }
|
|
h3 { font-size: 1.2rem; }
|
|
p { color: var(--text-muted); }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
.container {
|
|
max-width: var(--max-width);
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ── Buttons ─────────────────────────────────────────────── */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 22px;
|
|
border-radius: var(--radius);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
transition: opacity 0.15s, background 0.15s, transform 0.1s;
|
|
}
|
|
.btn:hover { opacity: 0.85; text-decoration: none; }
|
|
.btn:active { transform: scale(0.97); }
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: #fff;
|
|
}
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-ghost:hover {
|
|
background: var(--bg-hover);
|
|
border-color: var(--accent);
|
|
}
|
|
.btn-lg {
|
|
padding: 14px 32px;
|
|
font-size: 16px;
|
|
border-radius: 10px;
|
|
}
|
|
.btn-block {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
HEADER / NAV
|
|
══════════════════════════════════════════════════════════ */
|
|
.site-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(15, 17, 23, 0.85);
|
|
backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.site-header .container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
}
|
|
|
|
.site-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
font-size: 17px;
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
flex-shrink: 0;
|
|
}
|
|
.site-logo:hover { text-decoration: none; }
|
|
|
|
.site-logo-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(79, 142, 247, 0.3);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
list-style: none;
|
|
}
|
|
.nav-links a {
|
|
padding: 6px 14px;
|
|
border-radius: var(--radius);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
transition: color 0.15s, background 0.15s;
|
|
}
|
|
.nav-links a:hover {
|
|
color: var(--text);
|
|
background: var(--bg-hover);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-login {
|
|
background: transparent;
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
padding: 7px 18px;
|
|
border-radius: var(--radius);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.btn-login:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
background: var(--accent-dim);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-signup-header {
|
|
padding: 7px 18px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Mobile hamburger */
|
|
.hamburger {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
}
|
|
.hamburger span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: var(--text);
|
|
border-radius: 2px;
|
|
transition: transform 0.2s, opacity 0.2s;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
HERO
|
|
══════════════════════════════════════════════════════════ */
|
|
.hero {
|
|
padding: 140px 0 80px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 90%;
|
|
height: 140%;
|
|
background: radial-gradient(ellipse at center, rgba(79, 142, 247, 0.06) 0%, transparent 65%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 16px;
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(79, 142, 247, 0.3);
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--accent);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero h1 {
|
|
max-width: 820px;
|
|
margin: 0 auto 20px;
|
|
}
|
|
.hero h1 .highlight {
|
|
background: linear-gradient(135deg, var(--accent), #7bb0ff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: clamp(1rem, 2vw, 1.2rem);
|
|
max-width: 620px;
|
|
margin: 0 auto 36px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.hero-stats {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 40px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hero-stat {
|
|
text-align: center;
|
|
}
|
|
.hero-stat-num {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
}
|
|
.hero-stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
SECTION COMMON
|
|
══════════════════════════════════════════════════════════ */
|
|
section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.section-label {
|
|
display: inline-block;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--accent);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
max-width: 640px;
|
|
margin: 0 auto 16px;
|
|
}
|
|
.section-sub {
|
|
text-align: center;
|
|
max-width: 560px;
|
|
margin: 0 auto 50px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
SPEEDRUN (How It Works)
|
|
══════════════════════════════════════════════════════════ */
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
counter-reset: step;
|
|
}
|
|
|
|
.step-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-card);
|
|
padding: 32px 28px;
|
|
position: relative;
|
|
transition: border-color 0.2s, transform 0.2s;
|
|
}
|
|
.step-card:hover {
|
|
border-color: var(--border-hi);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
.step-number {
|
|
font-size: 2.4rem;
|
|
font-weight: 800;
|
|
color: rgba(79, 142, 247, 0.15);
|
|
line-height: 1;
|
|
margin-bottom: 12px;
|
|
}
|
|
.step-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
background: var(--accent-dim);
|
|
border: 1px solid rgba(79, 142, 247, 0.25);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--accent);
|
|
margin-bottom: 16px;
|
|
}
|
|
.step-card h3 {
|
|
margin-bottom: 8px;
|
|
font-size: 1.1rem;
|
|
}
|
|
.step-card p {
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
FEATURES
|
|
══════════════════════════════════════════════════════════ */
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--bg-inner);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-card);
|
|
padding: 28px 24px;
|
|
transition: border-color 0.2s, transform 0.2s;
|
|
}
|
|
.feature-card:hover {
|
|
border-color: var(--border-hi);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: var(--accent-dim);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--accent);
|
|
margin-bottom: 14px;
|
|
}
|
|
.feature-card h3 {
|
|
font-size: 15px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.feature-card p {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
AGENT OPTIONS
|
|
══════════════════════════════════════════════════════════ */
|
|
.agent-options {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
.agent-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-card);
|
|
padding: 36px 32px;
|
|
text-align: center;
|
|
transition: border-color 0.2s, transform 0.2s;
|
|
position: relative;
|
|
}
|
|
.agent-card:hover {
|
|
border-color: var(--border-hi);
|
|
transform: translateY(-3px);
|
|
}
|
|
.agent-card.featured {
|
|
border-color: var(--accent);
|
|
background: linear-gradient(180deg, rgba(79, 142, 247, 0.06) 0%, var(--bg-card) 100%);
|
|
}
|
|
.agent-card.featured::before {
|
|
content: "Most Popular";
|
|
position: absolute;
|
|
top: -11px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 16px;
|
|
border-radius: 20px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.agent-card h3 {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 4px;
|
|
}
|
|
.agent-tagline {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin-bottom: 14px;
|
|
}
|
|
.agent-desc {
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
margin-bottom: 12px;
|
|
}
|
|
.agent-features {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin: 16px 0;
|
|
}
|
|
.agent-features li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
padding: 5px 0;
|
|
color: var(--text-muted);
|
|
}
|
|
.agent-features li svg {
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
color: var(--success);
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
PRICING
|
|
══════════════════════════════════════════════════════════ */
|
|
.pricing-card {
|
|
max-width: 420px;
|
|
margin: 0 auto;
|
|
background: var(--bg-card);
|
|
border: 1px solid var(--border-hi);
|
|
border-radius: var(--radius-card);
|
|
padding: 44px 40px;
|
|
text-align: center;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.pricing-amount {
|
|
font-size: 3rem;
|
|
font-weight: 800;
|
|
color: var(--text);
|
|
line-height: 1;
|
|
}
|
|
.pricing-amount span {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
.pricing-term {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
margin: 6px 0 20px;
|
|
}
|
|
.pricing-perks {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin: 20px 0 28px;
|
|
}
|
|
.pricing-perks li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 6px 0;
|
|
font-size: 14px;
|
|
color: var(--text);
|
|
}
|
|
.pricing-perks li svg {
|
|
flex-shrink: 0;
|
|
margin-top: 3px;
|
|
color: var(--success);
|
|
}
|
|
|
|
.pricing-extra {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
FAQ
|
|
══════════════════════════════════════════════════════════ */
|
|
.faq-list {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
.faq-item {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.faq-question {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18px 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
gap: 16px;
|
|
transition: color 0.15s;
|
|
}
|
|
.faq-question:hover { color: var(--accent); }
|
|
.faq-question svg {
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s;
|
|
color: var(--text-muted);
|
|
}
|
|
.faq-question.open svg {
|
|
transform: rotate(180deg);
|
|
}
|
|
.faq-answer {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.25s ease, padding 0.25s ease;
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
line-height: 1.7;
|
|
}
|
|
.faq-answer.open {
|
|
max-height: 300px;
|
|
padding: 0 0 18px;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
CTA
|
|
══════════════════════════════════════════════════════════ */
|
|
.cta-section {
|
|
text-align: center;
|
|
padding: 80px 0 100px;
|
|
}
|
|
.cta-section h2 {
|
|
max-width: 560px;
|
|
margin: 0 auto 16px;
|
|
}
|
|
.cta-section p {
|
|
max-width: 480px;
|
|
margin: 0 auto 30px;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
FOOTER
|
|
══════════════════════════════════════════════════════════ */
|
|
.site-footer {
|
|
border-top: 1px solid var(--border);
|
|
padding: 40px 0;
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
}
|
|
.site-footer .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
.site-footer a {
|
|
color: var(--text-muted);
|
|
}
|
|
.site-footer a:hover {
|
|
color: var(--text);
|
|
}
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════
|
|
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;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
HEADER
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<header class="site-header" id="site-header">
|
|
<div class="container">
|
|
<a href="/" class="site-logo">
|
|
<span class="site-logo-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="8" width="18" height="13" rx="2"/>
|
|
<path d="M9 12h.01M15 12h.01"/>
|
|
<path d="M9 16h6"/>
|
|
<path d="M12 8V5"/>
|
|
<circle cx="12" cy="4" r="1.2" fill="currentColor" stroke="none"/>
|
|
</svg>
|
|
</span>
|
|
Derez
|
|
</a>
|
|
|
|
<ul class="nav-links" id="nav-links">
|
|
<li><a href="#how-it-works">How It Works</a></li>
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#agents">Agents</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#faq">FAQ</a></li>
|
|
</ul>
|
|
|
|
<div class="header-actions">
|
|
<a href="https://app.derez.ai" class="btn-login">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="11" rx="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
Sign In
|
|
</a>
|
|
<a href="https://app.derez.ai" class="btn btn-primary btn-signup-header">Hire Agent</a>
|
|
<button class="hamburger" id="hamburger" aria-label="Toggle menu" onclick="toggleMobile()">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
HERO
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section class="hero" id="hero">
|
|
<div class="container">
|
|
<div class="hero-badge">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="20 6 9 17 4 12"/>
|
|
</svg>
|
|
From signup to working agent in under 5 minutes
|
|
</div>
|
|
|
|
<h1>
|
|
Create Your<br/>
|
|
<span class="highlight">AI Agent</span> in 5 Minutes
|
|
</h1>
|
|
|
|
<p class="hero-sub">
|
|
Deploy a fully managed AI agent on its own dedicated Linux instance.
|
|
Choose Hermes or OpenClaw. Full SSH access, automatic backups,
|
|
and a powerful dashboard — no infrastructure to manage.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a href="https://app.derez.ai" class="btn btn-primary btn-lg">
|
|
Create Your Agent
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
<polyline points="12 5 19 12 12 19"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#how-it-works" class="btn btn-ghost btn-lg">How It Works</a>
|
|
</div>
|
|
|
|
<div class="hero-stats">
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num">< 5 min</div>
|
|
<div class="hero-stat-label">Setup time</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num">$4.99/mo</div>
|
|
<div class="hero-stat-label">Per agent instance</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num">2</div>
|
|
<div class="hero-stat-label">Agent choices</div>
|
|
</div>
|
|
<div class="hero-stat">
|
|
<div class="hero-stat-num">1-click</div>
|
|
<div class="hero-stat-label">Backups</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
SPEEDRUN (How It Works)
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="how-it-works">
|
|
<div class="container">
|
|
<div class="section-label">Speed Run</div>
|
|
<h2 class="section-title">From Zero to Agent in 5 Minutes</h2>
|
|
<p class="section-sub">
|
|
No DevOps, no servers to provision, no config files to write.
|
|
Just pick your agent, pay, and prompt.
|
|
</p>
|
|
|
|
<div class="steps">
|
|
<div class="step-card">
|
|
<div class="step-number">01</div>
|
|
<div class="step-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
|
<circle cx="8.5" cy="7" r="4"/>
|
|
<polyline points="17 11 19 13 23 9"/>
|
|
</svg>
|
|
</div>
|
|
<h3>1. Sign Up & Choose</h3>
|
|
<p>Enter your email, pick your agent (Hermes or OpenClaw), and choose your region. Complete the Stripe payment — takes under 2 minutes.</p>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="step-number">02</div>
|
|
<div class="step-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
|
</svg>
|
|
</div>
|
|
<h3>2. Configure Your Prompt</h3>
|
|
<p>Tell your agent who it is and what it should do. Use our built-in skill library or write custom instructions. Name your agent something memorable.</p>
|
|
</div>
|
|
|
|
<div class="step-card">
|
|
<div class="step-number">03</div>
|
|
<div class="step-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
|
|
<polyline points="2 17 12 22 22 17"/>
|
|
</svg>
|
|
</div>
|
|
<h3>3. Deploy & Use</h3>
|
|
<p>Your agent is provisioned on a dedicated Linux instance in seconds. SSH in, open the dashboard, or talk to it directly. Speed-run complete.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
FEATURES
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="features">
|
|
<div class="container">
|
|
<div class="section-label">Features</div>
|
|
<h2 class="section-title">Everything You Need to Run an AI Agent</h2>
|
|
<p class="section-sub">
|
|
Each agent runs on its own dedicated instance. Full control, zero sharing, complete isolation.
|
|
</p>
|
|
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
|
<path d="M9 3v18"/>
|
|
<path d="M21 9H3"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Dedicated Linux Instance</h3>
|
|
<p>Every agent gets its own VM. Full SSH access, root control, and total isolation from other customers.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
|
<polyline points="17 8 12 3 7 8"/>
|
|
<line x1="12" y1="3" x2="12" y2="15"/>
|
|
</svg>
|
|
</div>
|
|
<h3>One-Click Backups</h3>
|
|
<p>Snapshot your entire agent instance with a single click. Restore anytime. Your data is always safe.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Prompt Builder & Skills</h3>
|
|
<p>Built-in wizard for adding skills, integrations, and custom instructions. Get your agent working the way you want fast.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="11" rx="2"/>
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
|
</svg>
|
|
</div>
|
|
<h3>API Key Management</h3>
|
|
<p>Add your own API keys directly in the dashboard. Full control over which provider and model your agent uses.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Support Chat</h3>
|
|
<p>Built-in chat widget to talk to us directly. Get help setting up, configuring, or troubleshooting your agent.</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 20h9"/>
|
|
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
|
|
</svg>
|
|
</div>
|
|
<h3>Customizable Persona</h3>
|
|
<p>Name your agent and define its personality. Every agent can be completely unique — your brand, your voice.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
AGENT OPTIONS
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="agents">
|
|
<div class="container">
|
|
<div class="section-label">Choose Your Agent</div>
|
|
<h2 class="section-title">Two Powerful Agents, One Platform</h2>
|
|
<p class="section-sub">
|
|
Pick the agent framework that fits your workflow. Both run on dedicated instances with full access.
|
|
</p>
|
|
|
|
<div class="agent-options">
|
|
<div class="agent-card featured">
|
|
<h3>Hermes Agent</h3>
|
|
<p class="agent-tagline">By Nous Research</p>
|
|
<p class="agent-desc">
|
|
A modern, tool-calling agent CLI with persistent memory, skills, cron jobs, and multi-model support.
|
|
Deploy Hermes and get a fully autonomous coding and research assistant.
|
|
</p>
|
|
<ul class="agent-features">
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Tool-calling CLI with 40+ built-in tools
|
|
</li>
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Persistent memory & skill system
|
|
</li>
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Cron jobs, multi-agent delegation, browser control
|
|
</li>
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Multi-provider & multi-model support
|
|
</li>
|
|
</ul>
|
|
<a href="https://app.derez.ai" class="btn btn-primary btn-block">Choose Hermes</a>
|
|
</div>
|
|
|
|
<div class="agent-card">
|
|
<h3>OpenClaw</h3>
|
|
<p class="agent-tagline">Open Source Agent Framework</p>
|
|
<p class="agent-desc">
|
|
A versatile, open-source agent framework designed for flexibility and extensibility.
|
|
Ideal for custom workflows and specialized automation tasks.
|
|
</p>
|
|
<ul class="agent-features">
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Flexible open-source architecture
|
|
</li>
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Custom workflow automation
|
|
</li>
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Full SSH & root access
|
|
</li>
|
|
<li>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Easy skill integration
|
|
</li>
|
|
</ul>
|
|
<a href="https://app.derez.ai" class="btn btn-ghost btn-block">Choose OpenClaw</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
PRICING
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="pricing">
|
|
<div class="container">
|
|
<div class="section-label">Pricing</div>
|
|
<h2 class="section-title">Simple, Transparent Pricing</h2>
|
|
<p class="section-sub">
|
|
One price per agent instance. No hidden fees, no surprise charges.
|
|
Cancel anytime with monthly termination.
|
|
</p>
|
|
|
|
<div class="pricing-card">
|
|
<div class="pricing-amount">
|
|
$4.99 <span>USD / month</span>
|
|
</div>
|
|
<p class="pricing-term">Per agent instance · Monthly termination</p>
|
|
|
|
<ul class="pricing-perks">
|
|
<li>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Dedicated Linux instance with SSH access
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Hermes or OpenClaw agent pre-installed
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
One-click backups & restore
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Management dashboard
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Support chat included
|
|
</li>
|
|
<li>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
|
Refer-a-friend: $5 credit per signup
|
|
</li>
|
|
</ul>
|
|
|
|
<a href="https://app.derez.ai" class="btn btn-primary btn-block btn-lg">
|
|
Create Your Agent Now
|
|
</a>
|
|
|
|
<p class="pricing-extra">
|
|
Coupon codes available for $5 OpenRouter credits.<br/>
|
|
Hosted in 🇫🇷 France.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
FAQ
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section id="faq">
|
|
<div class="container">
|
|
<div class="section-label">FAQ</div>
|
|
<h2 class="section-title">Frequently Asked Questions</h2>
|
|
|
|
<div class="faq-list">
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
How fast can I create an AI agent?
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
From signup to a working agent in under 5 minutes. Select your agent type, complete the Stripe payment, configure your prompt, and your agent is live. That's the speed-run promise.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
What AI agents are available?
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
You can choose between <strong>Hermes Agent</strong> (by Nous Research — a powerful tool-calling CLI agent with memory, skills, and multi-model support) or <strong>OpenClaw</strong> (a flexible open-source agent framework). Both run on dedicated Linux instances with full SSH access.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
How much does it cost?
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
Each agent instance costs <strong>$4.99 USD per month</strong> with monthly termination. You can cancel anytime. Coupon codes are available for $5 OpenRouter credits to help you get started.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Do I get SSH access to my agent?
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
Yes. Every agent instance comes with full root SSH access. You can manage your instance password directly from the dashboard, and SSH in to install packages, modify configurations, or anything else you need.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
How do backups work?
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
One-click backups from your dashboard. Each backup captures the full state of your agent instance. You can restore anytime. Backups give you complete peace of mind.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Can I use my own API keys?
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</button>
|
|
<div class="faq-answer">
|
|
Absolutely. You can add your own API keys (OpenAI, Anthropic, OpenRouter, etc.) directly in the dashboard or inside your agent. Full control over which provider and model your agent uses.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
CTA
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<section class="cta-section">
|
|
<div class="container">
|
|
<h2>Ready to Create Your AI Agent?</h2>
|
|
<p>
|
|
Join others who have deployed their agents in minutes.
|
|
From signup to working agent in under 5.
|
|
</p>
|
|
<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>
|
|
<p class="pricing-extra" style="margin-top: 20px;">
|
|
$4.99/mo · Monthly cancellation · 🇫🇷 France
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
FOOTER
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<span>© 2026 Derez.ai — AI Agent Hosting</span>
|
|
<div class="footer-links">
|
|
<a href="https://app.derez.ai">Dashboard</a>
|
|
<a href="#faq">FAQ</a>
|
|
<a href="https://hermes-agent.nousresearch.com" target="_blank" rel="noopener">Hermes Agent</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ═══════════════════════════════════════════════════════════════
|
|
JAVASCRIPT
|
|
═══════════════════════════════════════════════════════════════ -->
|
|
<script>
|
|
// ── Mobile menu ──────────────────────────────────────────
|
|
function toggleMobile() {
|
|
const nav = document.getElementById('nav-links');
|
|
nav.classList.toggle('mobile-open');
|
|
}
|
|
|
|
// ── FAQ accordion ────────────────────────────────────────
|
|
function toggleFaq(btn) {
|
|
const answer = btn.nextElementSibling;
|
|
const isOpen = answer.classList.contains('open');
|
|
// Close all
|
|
document.querySelectorAll('.faq-answer.open').forEach(el => el.classList.remove('open'));
|
|
document.querySelectorAll('.faq-question.open').forEach(el => el.classList.remove('open'));
|
|
if (!isOpen) {
|
|
answer.classList.add('open');
|
|
btn.classList.add('open');
|
|
}
|
|
}
|
|
|
|
// ── 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' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |