Krystie
dd6f174a69
- NEW FAQ entry: 'Can I deploy my own app from GitHub?' showcasing Shipdeck (clone -> detect stack -> build -> hardened systemd service -> Caddy/DNS/TLS -> live verify -> journal -> one-command rollback; optional commit pinning) - hero/features/pricing/comparison/footer/about: Docker-as-mechanism copy replaced with Shipdeck-forward language; 'Built With' shows Shipdeck Deploy Engine; about stat 77 -> 78 (docs catalog pages = 78, consistent) - truth-guarded: 78 templates no longer implied Shipdeck-backed; no push-to-deploy implication; installer line says 'runtime'; SEO keyword 'docker' + app name 'Docker Mailserver' kept (factual) - meta description updated with GitHub-deploy hook (3 sites: 77 -> 78) Judge rounds C -> C -> B (0 blockers).
670 lines
37 KiB
TypeScript
670 lines
37 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import Navbar from '@/components/Navbar';
|
|
import Footer from '@/components/Footer';
|
|
import FeatureCard from '@/components/FeatureCard';
|
|
import AppShowcase from '@/components/AppShowcase';
|
|
import InstallCommand from '@/components/InstallCommand';
|
|
import CompetitorComparison from '@/components/CompetitorComparison';
|
|
import FaqSection from '@/components/FaqSection';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-surface-950 text-surface-50">
|
|
{/* Navigation */}
|
|
<Navbar />
|
|
|
|
{/* Hero Section */}
|
|
<section id="hero" className="relative w-full overflow-hidden py-20 sm:py-32 lg:py-40">
|
|
{/* Background gradient effects */}
|
|
<div className="absolute inset-0 -z-10">
|
|
{/* Radial gradient glow */}
|
|
<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-slow" />
|
|
<div className="absolute top-1/3 right-0 w-72 h-72 bg-brand-600/10 rounded-full blur-3xl opacity-20" />
|
|
<div className="absolute bottom-0 left-1/4 w-80 h-80 bg-brand-400/10 rounded-full blur-3xl opacity-20" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
{/* Left Content */}
|
|
<div className="flex flex-col justify-center space-y-8">
|
|
<div className="space-y-4">
|
|
{/* AI badge */}
|
|
<div className="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-400 backdrop-blur-sm">
|
|
<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-Powered Self-Hosting
|
|
</div>
|
|
|
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
|
|
<span className="text-brand-400">Self-Hosting</span>
|
|
<br />
|
|
<span>Made Intelligent</span>
|
|
</h1>
|
|
<p className="text-xl text-surface-300 max-w-lg leading-relaxed">
|
|
Just say “deploy Plex” — DashCaddy’s AI Intent Router handles the rest.
|
|
Deploy apps with one click, automatic SSL, DNS, and reverse proxy — or ship your own code straight from GitHub with built-in Shipdeck deploys.
|
|
78 templates, fleet management, and an MCP control plane for AI assistants.
|
|
Everything you need for self-hosted perfection.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<Link
|
|
href="/pricing"
|
|
className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-8 py-3 text-base font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
|
|
>
|
|
<span>View Plans</span>
|
|
<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>
|
|
<Link
|
|
href="/docs"
|
|
className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-8 py-3 text-base font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
|
|
>
|
|
<span>Read the Docs</span>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Trust indicators */}
|
|
<div className="flex flex-col sm:flex-row gap-6 pt-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex -space-x-2">
|
|
<div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
|
|
<div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
|
|
<div className="w-8 h-8 rounded-full bg-brand-400/20 border border-brand-400 flex items-center justify-center text-xs font-semibold">👤</div>
|
|
</div>
|
|
<p className="text-sm text-surface-400">Trusted by self-hosting enthusiasts</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<div className="text-2xl">🌍</div>
|
|
<p className="text-sm text-surface-400">31 languages incl. Arabic (RTL)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right - Dashboard Mockup */}
|
|
<div className="relative hidden lg:block">
|
|
<div className="relative mx-auto aspect-square max-w-md">
|
|
{/* Outer glow */}
|
|
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-brand-400/20 to-brand-600/20 blur-2xl" />
|
|
|
|
{/* Dashboard mockup container */}
|
|
<div className="relative rounded-2xl border border-surface-700/50 bg-gradient-to-br from-surface-800 to-surface-900 p-6 overflow-hidden">
|
|
{/* Terminal-like dashboard header */}
|
|
<div className="space-y-4">
|
|
{/* Top bar */}
|
|
<div className="flex items-center justify-between bg-surface-900/50 rounded-lg p-3 border border-surface-700/30">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/60" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/60" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/60" />
|
|
</div>
|
|
<span className="text-xs font-mono text-surface-500">dashcaddy.local</span>
|
|
</div>
|
|
|
|
{/* AI command bar */}
|
|
<div className="bg-brand-500/10 border border-brand-500/30 rounded-lg p-3 animate-fade-in">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm">🤖</span>
|
|
<span className="text-sm font-mono text-brand-300">“deploy Plex”</span>
|
|
</div>
|
|
<div className="mt-2 flex items-center gap-2 text-xs text-surface-400">
|
|
<span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded">✓ deployed</span>
|
|
<span>SSL + DNS + route configured</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content area with animated elements */}
|
|
<div className="space-y-3">
|
|
{/* Container item 1 */}
|
|
<div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-mono text-brand-400">🐳 plex</span>
|
|
<span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
|
|
</div>
|
|
<div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
|
|
<div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-2/3 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Container item 2 */}
|
|
<div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.1s' }}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-mono text-brand-400">☁️ nextcloud</span>
|
|
<span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
|
|
</div>
|
|
<div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
|
|
<div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-3/4 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Container item 3 */}
|
|
<div className="bg-surface-900/70 border border-surface-700/30 rounded p-3 animate-fade-in" style={{ animationDelay: '0.2s' }}>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-mono text-brand-400">📊 prometheus</span>
|
|
<span className="text-xs bg-green-500/20 text-green-400 px-2 py-1 rounded">running</span>
|
|
</div>
|
|
<div className="w-full bg-surface-700/30 rounded-full h-1.5 overflow-hidden">
|
|
<div className="bg-gradient-to-r from-brand-400 to-brand-500 h-full w-1/2 rounded-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats row */}
|
|
<div className="grid grid-cols-3 gap-2 pt-2 border-t border-surface-700/30">
|
|
<div className="text-center py-2">
|
|
<div className="text-lg font-bold text-brand-400">3</div>
|
|
<div className="text-xs text-surface-500">Containers</div>
|
|
</div>
|
|
<div className="text-center py-2 border-l border-r border-surface-700/30">
|
|
<div className="text-lg font-bold text-brand-400">100%</div>
|
|
<div className="text-xs text-surface-500">Uptime</div>
|
|
</div>
|
|
<div className="text-center py-2">
|
|
<div className="text-lg font-bold text-brand-400">42GB</div>
|
|
<div className="text-xs text-surface-500">Storage</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Install Command */}
|
|
<InstallCommand />
|
|
|
|
{/* Key Features Grid */}
|
|
<section id="features" 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-7xl px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<div className="mb-16 text-center">
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
|
|
Powerful Features
|
|
</h2>
|
|
<p className="text-lg text-surface-400 max-w-2xl mx-auto">
|
|
AI-native self-hosting — from one-click deploys to fleet management and a full MCP control plane.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Feature Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<FeatureCard
|
|
icon="🤖"
|
|
title="AI Intent Router"
|
|
description="Natural language to structured actions. Just type “deploy Plex” and DashCaddy provisions the container, SSL, DNS, and reverse proxy automatically."
|
|
/>
|
|
<FeatureCard
|
|
icon="🧩"
|
|
title="MCP Server"
|
|
description="Model Context Protocol integration turns DashCaddy into an AI-native control plane. Your AI assistant deploys apps, checks health, manages containers, backups, and DNS through one MCP endpoint — and the public /api/v1/capabilities manifest tells it exactly what the running build supports."
|
|
/>
|
|
<FeatureCard
|
|
icon="🚀"
|
|
title="78 App Templates"
|
|
description="Choose from 78 pre-configured app templates with smart defaults — deploy your favorite applications in one click, no manual configuration, no compose files to write."
|
|
/>
|
|
<FeatureCard
|
|
icon="🛡️"
|
|
title="Security Center"
|
|
description="Unified event pipeline aggregates deploys, Caddy, DNS, Tailscale, audit log, and health checker events into one real-time security dashboard — with per-IP perimeter analytics and automatic PII masking on every log."
|
|
/>
|
|
<FeatureCard
|
|
icon="🖥️"
|
|
title="Multi-Host Fleet"
|
|
description="Register remote DashCaddy instances, run parallel health probes across your fleet, and execute multi-host deployment plans from one console."
|
|
/>
|
|
<FeatureCard
|
|
icon="🔍"
|
|
title="Service Discovery"
|
|
description="Auto-detect running containers and adopt them with one click — Caddy route and DNS record created automatically, zero manual config."
|
|
/>
|
|
<FeatureCard
|
|
icon="🔒"
|
|
title="Security & Auth"
|
|
description="TOTP 2FA, email magic links, multi-user with admin invites, audit logging, and encrypted credential management built in."
|
|
/>
|
|
<FeatureCard
|
|
icon="♻️"
|
|
title="Disaster Recovery"
|
|
description="Full-system backups with SHA-256 checksum verification and one-click restore. Your infrastructure is always recoverable."
|
|
/>
|
|
<FeatureCard
|
|
icon="🔌"
|
|
title="Plugin System"
|
|
description="Extend DashCaddy with custom service types, notification providers, workflow actions, and dashboard widgets. A fully extensible platform."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* How It Works Section */}
|
|
<section id="how-it-works" 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">
|
|
{/* Section Header */}
|
|
<div className="mb-16 text-center">
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
|
|
How It Works
|
|
</h2>
|
|
<p className="text-lg text-surface-400 max-w-2xl mx-auto">
|
|
Get up and running in minutes, not hours.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Steps */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{/* Step 1 */}
|
|
<div className="relative">
|
|
<div className="flex flex-col items-center space-y-4">
|
|
{/* Number Circle */}
|
|
<div className="relative">
|
|
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-brand-400">1</span>
|
|
</div>
|
|
{/* Connector line (hidden on mobile, visible on larger screens) */}
|
|
<div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="text-center pt-4">
|
|
<h3 className="text-xl font-semibold text-surface-50 mb-2">
|
|
Install & Setup Wizard
|
|
</h3>
|
|
<p className="text-surface-400">
|
|
Install DashCaddy, then answer one question — “What do you want to self-host?” The Smart Defaults Wizard matches your hardware profile and configures everything automatically.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 2 */}
|
|
<div className="relative">
|
|
<div className="flex flex-col items-center space-y-4">
|
|
{/* Number Circle */}
|
|
<div className="relative">
|
|
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-brand-400">2</span>
|
|
</div>
|
|
{/* Connector line */}
|
|
<div className="hidden md:block absolute top-8 left-16 w-full h-0.5 bg-gradient-to-r from-brand-500/50 to-transparent" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="text-center pt-4">
|
|
<h3 className="text-xl font-semibold text-surface-50 mb-2">
|
|
Deploy
|
|
</h3>
|
|
<p className="text-surface-400">
|
|
Click “Deploy” on any template, or just ask the AI Intent Router in plain English. SSL certificates and DNS records are automatically configured.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 3 */}
|
|
<div className="relative">
|
|
<div className="flex flex-col items-center space-y-4">
|
|
{/* Number Circle */}
|
|
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-brand-400/20 to-brand-600/20 border border-brand-500/30 flex items-center justify-center">
|
|
<span className="text-2xl font-bold text-brand-400">3</span>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="text-center pt-4">
|
|
<h3 className="text-xl font-semibold text-surface-50 mb-2">
|
|
Done
|
|
</h3>
|
|
<p className="text-surface-400">
|
|
Your app is live with SSL and DNS configured. Monitor health in real time, manage containers, and run one-click backups from the dashboard.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* App Showcase */}
|
|
<AppShowcase />
|
|
|
|
{/* Competitor Comparison */}
|
|
<CompetitorComparison />
|
|
|
|
{/* Why DashCaddy Section */}
|
|
<section id="why-dashcaddy" 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-7xl px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<div className="mb-16 text-center">
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
|
|
Why DashCaddy?
|
|
</h2>
|
|
<p className="text-lg text-surface-400 max-w-2xl mx-auto">
|
|
Compare the pain of manual setup versus the power of an AI-native self-hosting platform.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Comparison Table */}
|
|
<div className="overflow-hidden rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b border-surface-700/50">
|
|
<th className="px-6 py-4 text-left text-sm font-semibold text-surface-300 bg-surface-900/50">
|
|
Feature
|
|
</th>
|
|
<th className="px-6 py-4 text-center text-sm font-semibold text-surface-300 bg-surface-900/50">
|
|
Manual Setup
|
|
</th>
|
|
<th className="px-6 py-4 text-center text-sm font-semibold text-brand-400 bg-surface-900/70">
|
|
DashCaddy
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-surface-700/30">
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">SSL Certificates</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Manual configuration via Let’s Encrypt</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Automatic</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">DNS Management</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Manual DNS records</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Automatic (Technitium)</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Reverse Proxy Setup</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Complex Nginx/Caddy config</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Caddyfile-as-Code builder</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">App Templates</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Write your own compose files</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ 78 pre-configured</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">AI Commands</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Not available</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ AI Intent Router + MCP</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Fleet Management</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">SSH into each host manually</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Multi-host, parallel probes</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Security Center</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Scattered logs & tools</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Unified event pipeline</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Disaster Recovery</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Manual scripts, no verification</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ SHA-256 verified backups</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Real-Time Updates</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Manual refresh, CLI only</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ WebSocket live dashboard</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Plugin System</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Not extensible</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Custom widgets, providers</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Health Monitoring</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Third-party tools required</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Built-in + Prometheus export</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Backup & Restore</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Manual scripts and planning</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ One-click backup</span>
|
|
</td>
|
|
</tr>
|
|
<tr className="hover:bg-surface-800/30 transition-colors">
|
|
<td className="px-6 py-4 text-sm text-surface-300">Audit Logs</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-surface-500">Not included</span>
|
|
</td>
|
|
<td className="px-6 py-4 text-center text-sm">
|
|
<span className="text-green-400 font-semibold">✓ Built-in</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Additional Benefits */}
|
|
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="text-2xl">⏱️</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-surface-50 mb-2">
|
|
Save Countless Hours
|
|
</h3>
|
|
<p className="text-surface-400 text-sm">
|
|
What takes days of manual configuration takes minutes with DashCaddy’s Smart Defaults Wizard and automated setup.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="text-2xl">🔐</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-surface-50 mb-2">
|
|
Enterprise Security
|
|
</h3>
|
|
<p className="text-surface-400 text-sm">
|
|
TOTP 2FA, magic links, encrypted credentials, audit logging, and a unified Security Center — built in.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="text-2xl">📈</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-surface-50 mb-2">
|
|
Scale Confidently
|
|
</h3>
|
|
<p className="text-surface-400 text-sm">
|
|
Real-time WebSocket monitoring, Prometheus metrics export, and multi-host fleet management give you visibility across your infrastructure 24/7.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 backdrop-blur-sm p-6 space-y-4">
|
|
<div className="flex items-start gap-4">
|
|
<div className="text-2xl">🛠️</div>
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-surface-50 mb-2">
|
|
Never Lose Data
|
|
</h3>
|
|
<p className="text-surface-400 text-sm">
|
|
Disaster recovery with full-system backups, SHA-256 checksum verification, and one-click restore keeps your data protected.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Developer & Integrations Section */}
|
|
<section id="integrations" 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">
|
|
{/* Section Header */}
|
|
<div className="mb-16 text-center">
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
|
|
Built for Developers
|
|
</h2>
|
|
<p className="text-lg text-surface-400 max-w-2xl mx-auto">
|
|
Everything you need to automate, integrate, and extend DashCaddy.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Integration Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
|
|
<div className="text-3xl mb-2">📦</div>
|
|
<h3 className="text-sm font-semibold text-surface-50">REST API</h3>
|
|
<p className="text-xs text-surface-400 mt-1">Full JSON API</p>
|
|
</div>
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
|
|
<div className="text-3xl mb-2">📊</div>
|
|
<h3 className="text-sm font-semibold text-surface-50">Prometheus</h3>
|
|
<p className="text-xs text-surface-400 mt-1">Metrics export</p>
|
|
</div>
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
|
|
<div className="text-3xl mb-2">🗂️</div>
|
|
<h3 className="text-sm font-semibold text-surface-50">Caddyfile-as-Code</h3>
|
|
<p className="text-xs text-surface-400 mt-1">Visual proxy builder</p>
|
|
</div>
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
|
|
<div className="text-3xl mb-2">🌍</div>
|
|
<h3 className="text-sm font-semibold text-surface-50">i18n</h3>
|
|
<p className="text-xs text-surface-400 mt-1">31 languages, RTL</p>
|
|
</div>
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
|
|
<div className="text-3xl mb-2">🔌</div>
|
|
<h3 className="text-sm font-semibold text-surface-50">Plugin API</h3>
|
|
<p className="text-xs text-surface-400 mt-1">Extend everything</p>
|
|
</div>
|
|
<div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
|
|
<div className="text-3xl mb-2">🔐</div>
|
|
<h3 className="text-sm font-semibold text-surface-50">TypeScript</h3>
|
|
<p className="text-xs text-surface-400 mt-1">Full type definitions</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<FaqSection />
|
|
|
|
{/* Final CTA Section */}
|
|
<section id="get-started" className="relative py-20 sm:py-24 lg:py-32 bg-gradient-to-b from-surface-900 to-surface-950 overflow-hidden">
|
|
{/* Background effects */}
|
|
<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/10 rounded-full blur-3xl opacity-20" />
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6 text-surface-50">
|
|
Ready to Transform Your
|
|
<br />
|
|
<span className="text-brand-400">Self-Hosting Setup?</span>
|
|
</h2>
|
|
<p className="text-xl text-surface-300 mb-12 max-w-2xl mx-auto leading-relaxed">
|
|
Join developers and self-hosting enthusiasts who’ve simplified their infrastructure management with DashCaddy’s AI-native platform.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Link
|
|
href="/pricing"
|
|
className="inline-flex items-center justify-center gap-2 rounded-lg bg-brand-500 px-10 py-4 text-lg font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30 hover:scale-105"
|
|
>
|
|
Get Started
|
|
<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>
|
|
<Link
|
|
href="/docs"
|
|
className="inline-flex items-center justify-center gap-2 rounded-lg border border-surface-700 bg-surface-800/50 px-10 py-4 text-lg font-semibold text-surface-50 hover:border-brand-400 hover:bg-surface-800 transition-all duration-200 hover:text-brand-400"
|
|
>
|
|
View Documentation
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Trust badges */}
|
|
<div className="mt-12 flex flex-wrap justify-center gap-8 text-center">
|
|
<div>
|
|
<div className="text-2xl font-bold text-brand-400">Self-Hosted</div>
|
|
<p className="text-sm text-surface-400">Your Data, Your Rules</p>
|
|
</div>
|
|
<div className="border-l border-surface-700/50" />
|
|
<div>
|
|
<div className="text-2xl font-bold text-brand-400">AI-Native</div>
|
|
<p className="text-sm text-surface-400">Intent Router + MCP</p>
|
|
</div>
|
|
<div className="border-l border-surface-700/50" />
|
|
<div>
|
|
<div className="text-2xl font-bold text-brand-400">24/7</div>
|
|
<p className="text-sm text-surface-400">Real-Time Monitoring</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|