Major site overhaul: reflect all current product features + logo + Stripe Payment Links
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
+59
-25
@@ -5,28 +5,50 @@ import Link from 'next/link';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import Footer from '@/components/Footer';
|
||||
|
||||
// ─── Stripe Payment Links ───────────────────────────────────────────
|
||||
// These are pre-generated checkout URLs from the Stripe Dashboard.
|
||||
// Replace these placeholders with real Payment Link URLs from:
|
||||
// https://dashboard.stripe.com/payment-links
|
||||
// Each link should point to the corresponding Stripe Product/Price.
|
||||
// ─────────────────────────────────────────────────────────────────────
|
||||
const STRIPE_LINKS: Record<string, string> = {
|
||||
monthly: 'https://buy.stripe.com/REPLACE_MONTHLY_LINK',
|
||||
quarterly: 'https://buy.stripe.com/REPLACE_QUARTERLY_LINK',
|
||||
semiannual: 'https://buy.stripe.com/REPLACE_SEMIANNUAL_LINK',
|
||||
annual: 'https://buy.stripe.com/REPLACE_ANNUAL_LINK',
|
||||
};
|
||||
|
||||
export default function PricingPage() {
|
||||
const [selectedPlan, setSelectedPlan] = useState<'monthly' | 'quarterly' | 'semiannual' | 'annual'>('annual');
|
||||
|
||||
const planOptions = [
|
||||
{ key: 'monthly', label: '1 Month', price: 25, period: '/mo', perMonth: undefined },
|
||||
{ key: 'quarterly', label: '3 Months', price: 50, period: '/3mo', perMonth: '$16.67/mo' },
|
||||
{ key: 'semiannual', label: '6 Months', price: 65, period: '/6mo', perMonth: '$10.83/mo' },
|
||||
{ key: 'annual', label: '12 Months', price: 99, period: '/yr', perMonth: '$8.25/mo' },
|
||||
{ key: 'monthly', label: '1 Month', price: 25, period: '/mo', perMonth: undefined },
|
||||
{ key: 'quarterly', label: '3 Months', price: 50, period: '/3mo', perMonth: '$16.67/mo' },
|
||||
{ key: 'semiannual', label: '6 Months', price: 65, period: '/6mo', perMonth: '$10.83/mo' },
|
||||
{ key: 'annual', label: '12 Months', price: 99, period: '/yr', perMonth: '$8.25/mo' },
|
||||
] as const;
|
||||
|
||||
const selected = planOptions.find(p => p.key === selectedPlan)!;
|
||||
|
||||
const coreFeatures = [
|
||||
'Dashboard & service monitoring',
|
||||
'50+ pre-configured app templates',
|
||||
'Dashboard & real-time service monitoring',
|
||||
'76+ pre-configured app templates',
|
||||
'Automatic SSL via Caddy internal CA',
|
||||
'DNS automation via Technitium DNS',
|
||||
'Reverse proxy management',
|
||||
'DashCA internal HTTPS trust distribution',
|
||||
'Container lifecycle management',
|
||||
'TOTP 2FA authentication',
|
||||
'Audit logging',
|
||||
'Reverse proxy management + Caddyfile-as-Code',
|
||||
'AI Intent Router — natural language commands',
|
||||
'MCP Server — AI assistant integration',
|
||||
'Security Center — unified event pipeline',
|
||||
'Service Discovery — auto-detect containers',
|
||||
'Smart Defaults Wizard — guided setup',
|
||||
'WebSocket real-time dashboard updates',
|
||||
'TOTP 2FA + multi-user admin & invites',
|
||||
'Audit logging & encrypted credential vault',
|
||||
'One-click backup & disaster recovery',
|
||||
'Plugin/extension system',
|
||||
'JavaScript SDK + TypeScript types (39 methods)',
|
||||
'Prometheus metrics export',
|
||||
'i18n — 5 languages (EN/ES/FR/DE/AR)',
|
||||
];
|
||||
|
||||
const premiumFeatures = [
|
||||
@@ -34,6 +56,8 @@ export default function PricingPage() {
|
||||
'Auto-Login SSO for deployed apps',
|
||||
'Recipes — multi-container stack deployment',
|
||||
'Swarm — Docker Swarm multi-node orchestration',
|
||||
'Multi-Host Fleet Management — remote instance control',
|
||||
'Priority support',
|
||||
'One active machine per license',
|
||||
'7-day grace period on expiry',
|
||||
'Cancel at period end, no lock-in',
|
||||
@@ -42,11 +66,11 @@ export default function PricingPage() {
|
||||
const faqs = [
|
||||
{
|
||||
question: 'What happens when my subscription ends?',
|
||||
answer: 'Premium features gracefully deactivate after a 7-day grace period. Your services keep running — only the premium-gated features (SSO, Recipes, Swarm) become unavailable. Resubscribe at any time to re-enable them.',
|
||||
answer: 'Premium features gracefully deactivate after a 7-day grace period. Your services keep running — only the premium-gated features (SSO, Recipes, Swarm, Fleet Management) become unavailable. Resubscribe at any time to re-enable them.',
|
||||
},
|
||||
{
|
||||
question: 'Can I use DashCaddy without Premium?',
|
||||
answer: 'Yes. The core platform is fully functional without a license. Premium unlocks SSO, Recipes, and Swarm — advanced orchestration features that most individual self-hosters may not need initially.',
|
||||
answer: 'Absolutely. The core platform is fully functional without a license — including AI commands, the Security Center, service discovery, monitoring, backup, and all 76+ app templates. Premium unlocks SSO, Recipes, Swarm orchestration, and Fleet Management for advanced multi-node setups.',
|
||||
},
|
||||
{
|
||||
question: 'How many machines can I activate?',
|
||||
@@ -54,7 +78,7 @@ export default function PricingPage() {
|
||||
},
|
||||
{
|
||||
question: 'Is there a free trial?',
|
||||
answer: 'Not currently. The core platform is available without a license, so you can evaluate DashCaddy before purchasing Premium.',
|
||||
answer: 'Not currently. The core platform is available without a license, so you can fully evaluate DashCaddy before purchasing Premium.',
|
||||
},
|
||||
{
|
||||
question: 'Is my data safe?',
|
||||
@@ -64,6 +88,10 @@ export default function PricingPage() {
|
||||
question: 'How does license validation work?',
|
||||
answer: 'DashCaddy validates licenses through an external license server. The app checks your subscription status and activates or deactivates premium features accordingly.',
|
||||
},
|
||||
{
|
||||
question: 'What payment methods do you accept?',
|
||||
answer: 'We use Stripe for secure payment processing. All major credit cards are accepted. Payments are processed through Stripe\'s encrypted checkout — we never see or store your card details.',
|
||||
},
|
||||
];
|
||||
|
||||
const [expandedFaq, setExpandedFaq] = useState<number | null>(0);
|
||||
@@ -82,7 +110,7 @@ export default function PricingPage() {
|
||||
Simple, Transparent <span className="text-brand-400">Pricing</span>
|
||||
</h1>
|
||||
<p className="text-xl text-surface-300 mb-8 max-w-2xl mx-auto">
|
||||
The core platform works without a license. Premium unlocks advanced orchestration when you need it.
|
||||
The core platform is completely free — including AI commands, Security Center, and all 76+ app templates. Premium unlocks advanced orchestration when you need it.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -97,11 +125,11 @@ export default function PricingPage() {
|
||||
<div className="p-8 sm:p-10">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-2xl font-bold text-surface-50 mb-2">Core</h3>
|
||||
<p className="text-surface-400 text-sm mb-6">Everything you need to deploy and manage self-hosted services.</p>
|
||||
<p className="text-surface-400 text-sm mb-6">Everything you need to deploy, manage, and secure self-hosted services — with AI built in.</p>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-5xl font-bold text-surface-50">Free</span>
|
||||
</div>
|
||||
<p className="text-surface-500 text-sm mt-2">No license required</p>
|
||||
<p className="text-surface-500 text-sm mt-2">No license required, no credit card</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
@@ -112,8 +140,8 @@ export default function PricingPage() {
|
||||
</Link>
|
||||
|
||||
<div className="border-t border-surface-700/50 pt-8 mt-8">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-surface-500 mb-4">Includes</p>
|
||||
<ul className="space-y-4">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-surface-500 mb-4">Everything included — no limits</p>
|
||||
<ul className="space-y-3">
|
||||
{coreFeatures.map((feature, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
<svg className="h-5 w-5 flex-shrink-0 text-green-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
@@ -138,7 +166,7 @@ export default function PricingPage() {
|
||||
<div className="p-8 sm:p-10">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-2xl font-bold text-surface-50 mb-2">Premium</h3>
|
||||
<p className="text-surface-400 text-sm mb-6">Advanced orchestration for power users and production setups.</p>
|
||||
<p className="text-surface-400 text-sm mb-6">Advanced orchestration, SSO, and fleet management for power users and production.</p>
|
||||
|
||||
{/* Plan selector */}
|
||||
<div className="mb-4">
|
||||
@@ -168,16 +196,22 @@ export default function PricingPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/api/checkout?plan=premium&duration=${selectedPlan}`}
|
||||
{/* Subscribe button — Stripe Payment Link */}
|
||||
<a
|
||||
href={STRIPE_LINKS[selectedPlan]}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full rounded-lg bg-brand-500 px-6 py-3 text-center font-semibold text-white hover:bg-brand-600 hover:shadow-lg hover:shadow-brand-500/30 transition-all"
|
||||
>
|
||||
Subscribe to Premium
|
||||
</Link>
|
||||
</a>
|
||||
<p className="text-center text-xs text-surface-500 mt-2">
|
||||
🔒 Secure checkout via Stripe
|
||||
</p>
|
||||
|
||||
<div className="border-t border-surface-700/50 pt-8 mt-8">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-surface-500 mb-4">Everything in Core, plus</p>
|
||||
<ul className="space-y-4">
|
||||
<ul className="space-y-3">
|
||||
{premiumFeatures.map((feature, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
{feature.startsWith('Everything') ? (
|
||||
@@ -243,7 +277,7 @@ export default function PricingPage() {
|
||||
<div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold mb-6">Ready to Get Started?</h2>
|
||||
<p className="text-xl text-surface-300 mb-8 max-w-2xl mx-auto">
|
||||
Install DashCaddy and start deploying services in minutes.
|
||||
Install DashCaddy and start deploying services in minutes. The core platform is free forever.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
|
||||
Reference in New Issue
Block a user