458 lines
23 KiB
TypeScript
458 lines
23 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import Navbar from '@/components/Navbar';
|
||
import Footer from '@/components/Footer';
|
||
import FeatureCard from '@/components/FeatureCard';
|
||
|
||
interface FeatureItem {
|
||
icon: string;
|
||
label: string;
|
||
premium?: boolean;
|
||
}
|
||
|
||
interface FeatureSection {
|
||
id: string;
|
||
title: string;
|
||
description: string;
|
||
icon: string;
|
||
badge?: string;
|
||
features: FeatureItem[];
|
||
}
|
||
|
||
export default function FeaturesPage() {
|
||
const features: FeatureSection[] = [
|
||
{
|
||
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 from a library of 93 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: '93 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, 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 + 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-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 DNS integration' },
|
||
{ icon: '🏗️', label: 'Caddyfile-as-code visual builder' },
|
||
{ icon: '🔁', label: 'Reverse proxy management' },
|
||
],
|
||
},
|
||
{
|
||
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 health monitoring' },
|
||
{ icon: '⚡', label: 'WebSocket live updates' },
|
||
{ icon: '📈', label: 'Prometheus metrics export' },
|
||
{ icon: '💓', label: 'Container health checks' },
|
||
{ icon: '⏱️', label: 'Response time & resource tracking' },
|
||
],
|
||
},
|
||
{
|
||
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: '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 full REST API with JSON endpoints, a plugin/extension system for custom workflows, and internationalization across 31 languages including full RTL support.',
|
||
icon: '🛠️',
|
||
features: [
|
||
{ icon: '🌐', label: 'REST API (JSON, MCP protocol)' },
|
||
{ icon: '🔌', label: 'Plugin / Extension system' },
|
||
{ icon: '🔄', label: 'Auto-update manager' },
|
||
{ icon: '🌍', label: 'i18n: EN/ES/FR/DE/AR (RTL)' },
|
||
],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
title: 'Premium Features',
|
||
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 (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 },
|
||
],
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
|
||
<Navbar />
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative py-16 sm:py-20 lg:py-24">
|
||
<div className="absolute inset-0 -z-10">
|
||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-brand-500/20 rounded-full blur-3xl opacity-30 animate-pulse" />
|
||
</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">
|
||
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">
|
||
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>
|
||
|
||
{/* Feature Sections */}
|
||
<section className="relative py-16 sm:py-20 lg:py-24">
|
||
<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' : ''}`}
|
||
>
|
||
{/* 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>
|
||
<p className="text-lg text-surface-300 mb-8 leading-relaxed">
|
||
{feature.description}
|
||
</p>
|
||
|
||
{/* Feature Grid */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{feature.features.map((item, itemIdx) => (
|
||
<div
|
||
key={itemIdx}
|
||
className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
|
||
item.premium
|
||
? 'border-brand-500/30 bg-brand-500/5 hover:bg-brand-500/10'
|
||
: 'border-surface-700/30 bg-surface-800/30 hover:border-surface-700/50'
|
||
}`}
|
||
>
|
||
<span className="text-xl flex-shrink-0">{item.icon}</span>
|
||
<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">
|
||
Premium
|
||
</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Visual Side */}
|
||
<div className={idx % 2 === 1 ? 'lg:order-1' : ''}>
|
||
<div className="relative">
|
||
<div className="absolute inset-0 bg-gradient-to-br from-brand-500/10 to-brand-600/5 rounded-2xl blur-xl" />
|
||
<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 className="w-2 h-2 rounded-full bg-brand-400" />
|
||
<span className="text-sm text-surface-300">{item.label}</span>
|
||
</div>
|
||
))}
|
||
</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
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 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">
|
||
<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 max-w-2xl mx-auto">
|
||
DashCaddy speaks AI natively. Type what you want, or let your favorite assistant do it.
|
||
</p>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
{/* Free vs Premium Comparison */}
|
||
<section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
|
||
<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">
|
||
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">
|
||
{[
|
||
'93 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',
|
||
'REST API (260+ endpoints)',
|
||
'Plugin / Extension system',
|
||
'i18n (31 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>
|
||
<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="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">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
|
||
</svg>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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">
|
||
<h2 className="text-3xl sm:text-4xl font-bold mb-4">
|
||
Questions About <span className="text-brand-400">Features?</span>
|
||
</h2>
|
||
<p className="text-lg text-surface-400">
|
||
Check our documentation or contact support.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Link
|
||
href="/docs"
|
||
className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 font-semibold text-white hover:bg-brand-600 transition-all"
|
||
>
|
||
Read Documentation
|
||
</Link>
|
||
<a
|
||
href="mailto:support@dashcaddy.net"
|
||
className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 font-semibold text-surface-50 hover:border-brand-400 transition-colors"
|
||
>
|
||
Contact Support
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|