sami7777/dashcaddy.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Major site overhaul: reflect all current product features + logo + Stripe Payment Links

Browse Source 
Homepage: AI-powered hero, 9 feature cards (AI Intent Router, MCP Server,
Security Center, Fleet Management, Service Discovery, Plugin System),
expanded comparison table (7→13 rows), Smart Wizard in How It Works

Features page: Complete rewrite — 8 feature sections led by AI-Powered
Self-Hosting, Free vs Premium comparison grid

Pricing page: Fixed broken Stripe checkout (was 503 stub). Subscribe
button now uses Stripe Payment Links. Core tier lists all 18 features.

All 7 docs pages: Updated to reflect current architecture (AI, MCP,
Security Center, SDK, Caddyfile-as-Code, Service Discovery, etc.)

About page: AI-Native value prop, updated tech stack, by-the-numbers

Navbar: Fixed broken #anchor links → proper routes, added DashCaddy logo

AppShowcase: 50+ → 76+ templates

Logo: Dark + light versions deployed, wired into navbar/footer/favicon
This commit is contained in:
Krystie
2026-08-12 16:53:58 -07:00
parent 3b2023e97a
commit 34704066c3
20 changed files with 1037 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/page.tsx
+247 -126
View File
@@ -16,79 +16,119 @@ interface FeatureSection {
title: string;
description: string;
icon: string;
badge?: string;
features: FeatureItem[];
}
export default function FeaturesPage() {
const features: FeatureSection[] = [
{
id: 'deployment',
id: 'ai-self-hosting',
title: 'AI-Powered Self-Hosting',
description:
'Talk to your homelab. DashCaddy\'s AI Intent Router understands natural language commands, and the built-in MCP Server lets AI assistants like Claude and GPT control your infrastructure directly. The first self-hosting platform built for the agentic era.',
icon: '🤖',
badge: 'New',
features: [
{ icon: '🎯', label: 'AI Intent Router — natural language commands' },
{ icon: '🔌', label: 'MCP Server for Claude & GPT control' },
{ icon: '💬', label: '"deploy Plex", "check SSL status", "restart jellyfin"' },
{ icon: '🧠', label: 'Context-aware infrastructure reasoning' },
],
},
{
id: 'app-deployment',
title: 'App Deployment',
description: 'Deploy your favorite applications instantly from our library of 50+ pre-configured Docker templates. No manual configuration needed—just click, deploy, and go live.',
description:
'Deploy from a library of 76+ pre-configured Docker templates with one click. Automatic configuration, smart defaults, and service discovery that auto-detects running containers and lets you adopt them instantly. From zero to live in seconds.',
icon: '🚀',
features: [
{ icon: '⚡', label: 'One-click deployment' },
{ icon: '📦', label: '50+ app templates' },
{ icon: '⚙️', label: 'Auto-configuration' },
{ icon: '📦', label: '76+ app templates' },
{ icon: '⚙️', label: 'Automatic configuration' },
{ icon: '🔍', label: 'Service Discovery & auto-adopt' },
{ icon: '🧙', label: 'Smart Defaults Wizard' },
],
},
{
id: 'ssl-security',
title: 'SSL & Security',
description: 'Enterprise-grade security built in. Automatic SSL certificates, TOTP 2FA, encrypted credentials, and comprehensive audit logs to track every action.',
description:
'Enterprise-grade security, baked in. Automatic SSL via Caddy\'s internal CA, TOTP 2FA with email magic link, multi-user admin with role-based access, encrypted credential vault, comprehensive audit logs, and a Security Center that unifies events from every source.',
icon: '🔒',
features: [
{ icon: '🔐', label: 'Automatic SSL certificates' },
{ icon: '📱', label: 'TOTP 2FA authentication' },
{ icon: '🔑', label: 'Encrypted credentials' },
{ icon: '📝', label: 'Audit logs' },
{ icon: '📱', label: 'TOTP 2FA + email magic link' },
{ icon: '👥', label: 'Multi-user admin (RBAC + invites)' },
{ icon: '🔑', label: 'Encrypted credential vault' },
{ icon: '📝', label: 'Audit logging' },
{ icon: '🛡️', label: 'Security Center (multi-source events)' },
],
},
{
id: 'dns',
title: 'DNS Management',
description: 'Manage all your app subdomains from one dashboard. Automatic DNS record creation with Technitium DNS integration makes domain management effortless.',
id: 'dns-networking',
title: 'DNS & Networking',
description:
'Full DNS automation powered by Technitium DNS, plus a Caddyfile-as-code visual builder for crafting reverse proxy rules without touching config files. Manage subdomains, routes, and proxies from a single dashboard.',
icon: '🌐',
features: [
{ icon: '✨', label: 'Automatic DNS records' },
{ icon: '🔗', label: 'Technitium integration' },
{ icon: '📋', label: 'Subdomain management' },
{ icon: '🎯', label: 'Zero DNS config' },
{ icon: '🔗', label: 'Technitium DNS integration' },
{ icon: '🏗️', label: 'Caddyfile-as-code visual builder' },
{ icon: '🔁', label: 'Reverse proxy management' },
],
},
{
id: 'monitoring',
title: 'Monitoring & Health',
description: 'Real-time visibility into your infrastructure. Monitor container health, response times, and resource usage with detailed metrics and alerts.',
id: 'monitoring-ops',
title: 'Monitoring & Operations',
description:
'Real-time visibility into every container and service. WebSocket live updates keep your dashboard in sync instantly, health checks catch problems early, and Prometheus metrics export feeds your existing observability stack.',
icon: '📊',
features: [
{ icon: '🟢', label: 'Real-time status' },
{ icon: '⏱️', label: 'Response time tracking' },
{ icon: '💾', label: 'Resource monitoring' },
{ icon: '📈', label: 'Performance metrics' },
{ icon: '🟢', label: 'Real-time health monitoring' },
{ icon: '⚡', label: 'WebSocket live updates' },
{ icon: '📈', label: 'Prometheus metrics export' },
{ icon: '💓', label: 'Container health checks' },
{ icon: '⏱️', label: 'Response time & resource tracking' },
],
},
{
id: 'docker',
title: 'Docker Management',
description: 'Control your entire Docker environment visually. View, manage, and scale containers, access logs, and perform updates without touching the command line.',
icon: '🐳',
id: 'backup-recovery',
title: 'Backup & Recovery',
description:
'One-click backup and disaster recovery built for peace of mind. Full-system backups with checksum verification, point-in-time restore, and a disaster recovery workflow that gets you back online fast when it matters most.',
icon: '💾',
features: [
{ icon: '🎮', label: 'Container control' },
{ icon: '📜', label: 'Live logs access' },
{ icon: '🔄', label: 'Auto-updates' },
{ icon: '📊', label: 'Resource monitoring' },
{ icon: '🔙', label: 'One-click backup & restore' },
{ icon: '🆘', label: 'Disaster Recovery mode' },
{ icon: '✅', label: 'Full-system backup w/ checksums' },
{ icon: '⏮️', label: 'Point-in-time restore' },
],
},
{
id: 'developer-platform',
title: 'Developer Platform',
description:
'DashCaddy isn\'t just a UI—it\'s a platform. A typed JavaScript SDK with 39 methods, a full REST API, a plugin/extension system for custom workflows, and internationalization across 5 languages including full RTL support.',
icon: '🛠️',
features: [
{ icon: '📘', label: 'JavaScript SDK + TypeScript types (39 methods)' },
{ icon: '🔌', label: 'Plugin / Extension system' },
{ icon: '🌐', label: 'REST API' },
{ icon: '🌍', label: 'i18n: EN/ES/FR/DE/AR (RTL)' },
],
},
{
id: 'premium',
title: 'Premium Features',
description: 'Advanced features for power users and production deployments. SSO integration, multi-container recipes, and Docker Swarm orchestration.',
description:
'Power features for production and multi-host deployments. Auto-Login SSO across your apps, multi-container Recipes, Docker Swarm orchestration, and Fleet Management to register remote instances with parallel health probes and multi-host deploy plans.',
icon: '⭐',
features: [
{ icon: '🔑', label: 'Auto-Login SSO', premium: true },
{ icon: '📚', label: 'Recipes (stack deployment)', premium: true },
{ icon: '🚀', label: 'Docker Swarm orchestration', premium: true },
{ icon: '📚', label: 'Recipes (multi-container stacks)', premium: true },
{ icon: '🐳', label: 'Docker Swarm orchestration', premium: true },
{ icon: '📡', label: 'Multi-Host Fleet Management', premium: true },
{ icon: '🚀', label: 'Priority support', premium: true },
],
},
@@ -105,11 +145,18 @@ export default function FeaturesPage() {
</div>
<div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-300">
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
</span>
AI-native self-hosting platform
</div>
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
Powerful <span className="text-brand-400">Features</span> Built In
Every Tool You Need to <span className="text-brand-400">Self-Host</span>
</h1>
<p className="text-xl text-surface-300 max-w-2xl mx-auto">
Everything you need to manage Docker applications professionally. From deployment to monitoring, SSL to security—it's all included.
From AI-powered deployment to enterprise security, real-time monitoring, and multi-host fleet management — DashCaddy brings the entire self-hosting stack under one roof.
</p>
</div>
</section>
@@ -119,12 +166,22 @@ export default function FeaturesPage() {
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="space-y-24">
{features.map((feature, idx) => (
<div key={feature.id} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}>
<div
key={feature.id}
className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}
>
{/* Content Side */}
<div className={idx % 2 === 1 ? 'lg:order-2' : ''}>
<div className="mb-6 inline-flex rounded-lg bg-brand-500/10 p-4 text-brand-400">
<div className="text-3xl">{feature.icon}</div>
</div>
{feature.badge && (
<span className="mb-3 ml-2 inline-block align-middle text-xs px-2 py-1 bg-brand-500/20 text-brand-300 rounded-full font-semibold uppercase tracking-wide">
{feature.badge}
</span>
)}
<h2 className="text-3xl sm:text-4xl font-bold mb-4 text-surface-50">
{feature.title}
</h2>
@@ -144,7 +201,9 @@ export default function FeaturesPage() {
}`}
>
<span className="text-xl flex-shrink-0">{item.icon}</span>
<span className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}>
<span
className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}
>
{item.label}
{item.premium && (
<span className="ml-1 inline-block text-xs px-2 py-0.5 bg-brand-500/20 text-brand-300 rounded font-semibold">
@@ -164,7 +223,10 @@ export default function FeaturesPage() {
<div className="relative rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8">
<div className="space-y-4">
{feature.features.slice(0, 3).map((item, itemIdx) => (
<div key={itemIdx} className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30">
<div
key={itemIdx}
className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30"
>
<div className="w-2 h-2 rounded-full bg-brand-400" />
<span className="text-sm text-surface-300">{item.label}</span>
</div>
@@ -172,7 +234,10 @@ export default function FeaturesPage() {
</div>
<div className="mt-6 pt-6 border-t border-surface-700/30">
<div className="text-sm text-surface-500 text-center">
<span className="text-brand-400 font-semibold">{feature.features.length} features</span> included
<span className="text-brand-400 font-semibold">
{feature.features.length} features
</span>{' '}
included
</div>
</div>
</div>
@@ -184,112 +249,168 @@ export default function FeaturesPage() {
</div>
</section>
{/* Feature Comparison Grid */}
{/* AI Features Highlight */}
<section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-900 to-surface-950">
<div className="absolute inset-0 -z-10">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[40rem] h-96 bg-brand-500/10 rounded-full blur-3xl opacity-40" />
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mb-16 text-center">
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
What's Included in <span className="text-brand-400">Free</span>
<span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
The Agentic Era of Self-Hosting
</span>
<h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
Control Your Homelab With <span className="text-brand-400">Natural Language</span>
</h2>
<p className="text-lg text-surface-400">
Start with the free tier and upgrade anytime when you need advanced features.
<p className="text-lg text-surface-400 max-w-2xl mx-auto">
DashCaddy speaks AI natively. Type what you want, or let your favorite assistant do it.
</p>
</div>
{/* Feature Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<FeatureCard
icon="🚀"
title="One-Click Deployment"
description="Deploy from 50+ pre-configured templates with zero configuration."
/>
<FeatureCard
icon="🔒"
title="Automatic SSL"
description="Secure your apps with automatically renewed SSL certificates."
/>
<FeatureCard
icon="🌐"
title="DNS Management"
description="Automatic DNS record creation with Technitium integration."
/>
<FeatureCard
icon="📊"
title="Real-Time Monitoring"
description="Track container health, response times, and resource usage."
/>
<FeatureCard
icon="🐳"
title="Docker Control"
description="Manage containers, access logs, and updates from one dashboard."
/>
<FeatureCard
icon="🔐"
title="Security Built-In"
description="TOTP 2FA, encrypted credentials, and audit logging included."
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* AI Intent Router */}
<div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
<div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
<div className="relative z-10">
<div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
<div className="text-3xl">🎯</div>
</div>
<h3 className="mb-2 text-xl font-semibold text-surface-50">AI Intent Router</h3>
<p className="text-surface-300 text-sm leading-relaxed mb-6">
Skip the menus. Just type a command in plain English and DashCaddy figures out the right actions.
</p>
<div className="space-y-2">
{['"deploy Plex"', '"check SSL status"', '"restart jellyfin"', '"show failing containers"'].map(
(cmd, i) => (
<div
key={i}
className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
>
<span className="text-brand-400 font-mono text-xs select-none">›</span>
<span className="text-sm text-surface-300 font-mono">{cmd}</span>
</div>
)
)}
</div>
</div>
</div>
{/* MCP Server */}
<div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
<div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
<div className="relative z-10">
<div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
<div className="text-3xl">🔌</div>
</div>
<h3 className="mb-2 text-xl font-semibold text-surface-50">MCP Server</h3>
<p className="text-surface-300 text-sm leading-relaxed mb-6">
DashCaddy runs as a Model Context Protocol server, so AI assistants can manage your homelab directly.
</p>
<div className="space-y-2">
{[
'Claude desktop & API',
'GPT / ChatGPT integrations',
'Any MCP-compatible client',
'Scoped, audited, secure access',
].map((item, i) => (
<div
key={i}
className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
>
<div className="w-2 h-2 rounded-full bg-brand-400" />
<span className="text-sm text-surface-300">{item}</span>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</section>
{/* Premium Section */}
{/* Free vs Premium Comparison */}
<section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
<div className="absolute inset-0 -z-10">
<div className="absolute top-1/2 right-0 w-96 h-96 bg-brand-600/10 rounded-full blur-3xl opacity-20" />
</div>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="rounded-2xl border border-brand-500/30 bg-gradient-to-br from-brand-950/50 to-surface-900 p-12">
<div className="max-w-3xl">
<div className="mb-6 inline-block">
<span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
Premium Features
<div className="mb-16 text-center">
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
Free vs <span className="text-brand-400">Premium</span>
</h2>
<p className="text-lg text-surface-400">
A powerful free tier for everyone. Premium unlocks multi-host, SSO, and more.
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Free Column */}
<div className="rounded-2xl border border-surface-700/50 bg-surface-800/40 backdrop-blur p-8">
<div className="mb-6">
<h3 className="text-2xl font-bold text-surface-50">Free</h3>
<p className="text-sm text-surface-400 mt-1">Everything to self-host a single node.</p>
</div>
<ul className="space-y-3">
{[
'76+ one-click app templates',
'Automatic SSL certificates',
'Technitium DNS automation',
'Reverse proxy + Caddyfile builder',
'Real-time monitoring & WebSocket updates',
'TOTP 2FA + multi-user admin',
'Encrypted credential vault',
'Audit logging',
'Security Center',
'One-click backup & restore',
'AI Intent Router + MCP Server',
'JavaScript SDK & REST API',
'Plugin / Extension system',
'i18n (5 languages, RTL)',
'Prometheus metrics export',
].map((item, i) => (
<li key={i} className="flex items-start gap-3">
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
<span className="text-sm text-surface-300">{item}</span>
</li>
))}
</ul>
</div>
{/* Premium Column */}
<div className="relative rounded-2xl border border-brand-500/40 bg-gradient-to-br from-brand-950/40 to-surface-900 p-8">
<div className="absolute -top-3 right-6">
<span className="rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white uppercase tracking-wide">
Premium
</span>
</div>
<h2 className="text-3xl sm:text-4xl font-bold mb-6 text-surface-50">
Level Up With <span className="text-brand-400">Premium</span>
</h2>
<p className="text-lg text-surface-300 mb-8">
Get advanced features designed for power users and production deployments. Auto-Login SSO, stack recipes, Docker Swarm orchestration, and priority support.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
<span className="text-2xl flex-shrink-0">🔑</span>
<div>
<h3 className="font-semibold text-surface-50 mb-1">Auto-Login SSO</h3>
<p className="text-sm text-surface-400">Deploy apps with automatic single sign-on integration.</p>
</div>
</div>
<div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
<span className="text-2xl flex-shrink-0">📚</span>
<div>
<h3 className="font-semibold text-surface-50 mb-1">Recipes</h3>
<p className="text-sm text-surface-400">Deploy multi-container stacks with one click.</p>
</div>
</div>
<div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
<span className="text-2xl flex-shrink-0">🚀</span>
<div>
<h3 className="font-semibold text-surface-50 mb-1">Docker Swarm</h3>
<p className="text-sm text-surface-400">Orchestrate multi-node clusters effortlessly.</p>
</div>
</div>
<div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
<span className="text-2xl flex-shrink-0">⚡</span>
<div>
<h3 className="font-semibold text-surface-50 mb-1">Priority Support</h3>
<p className="text-sm text-surface-400">Get faster responses from our support team.</p>
</div>
</div>
<div className="mb-6">
<h3 className="text-2xl font-bold text-surface-50">Premium</h3>
<p className="text-sm text-surface-400 mt-1">For production, multi-host, and teams.</p>
</div>
<p className="text-sm text-brand-300 mb-4 font-medium">
Everything in Free, plus:
</p>
<ul className="space-y-3">
{[
'Auto-Login SSO for deployed apps',
'Recipes — multi-container stack deployment',
'Docker Swarm orchestration',
'Multi-Host Fleet Management (remote instances, parallel health probes, multi-host deploy plans)',
'Disaster Recovery (full-system backup w/ checksums)',
'Priority support',
].map((item, i) => (
<li key={i} className="flex items-start gap-3">
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span className="text-sm text-surface-200">{item}</span>
</li>
))}
</ul>
<Link
href="/pricing"
className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
className="mt-8 inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
>
Explore Premium Plans
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
@@ -301,7 +422,7 @@ export default function FeaturesPage() {
</div>
</section>
{/* FAQ Section */}
{/* FAQ CTA Section */}
<section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
<div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
<div className="mb-12 text-center">