337 lines
15 KiB
TypeScript
337 lines
15 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;
|
|
features: FeatureItem[];
|
|
}
|
|
|
|
export default function FeaturesPage() {
|
|
const features: FeatureSection[] = [
|
|
{
|
|
id: '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.',
|
|
icon: '🚀',
|
|
features: [
|
|
{ icon: '⚡', label: 'One-click deployment' },
|
|
{ icon: '📦', label: '50+ app templates' },
|
|
{ icon: '⚙️', label: 'Auto-configuration' },
|
|
],
|
|
},
|
|
{
|
|
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.',
|
|
icon: '🔒',
|
|
features: [
|
|
{ icon: '🔐', label: 'Automatic SSL certificates' },
|
|
{ icon: '📱', label: 'TOTP 2FA authentication' },
|
|
{ icon: '🔑', label: 'Encrypted credentials' },
|
|
{ icon: '📝', label: 'Audit logs' },
|
|
],
|
|
},
|
|
{
|
|
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.',
|
|
icon: '🌐',
|
|
features: [
|
|
{ icon: '✨', label: 'Automatic DNS records' },
|
|
{ icon: '🔗', label: 'Technitium integration' },
|
|
{ icon: '📋', label: 'Subdomain management' },
|
|
{ icon: '🎯', label: 'Zero DNS config' },
|
|
],
|
|
},
|
|
{
|
|
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.',
|
|
icon: '📊',
|
|
features: [
|
|
{ icon: '🟢', label: 'Real-time status' },
|
|
{ icon: '⏱️', label: 'Response time tracking' },
|
|
{ icon: '💾', label: 'Resource monitoring' },
|
|
{ icon: '📈', label: 'Performance metrics' },
|
|
],
|
|
},
|
|
{
|
|
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: '🐳',
|
|
features: [
|
|
{ icon: '🎮', label: 'Container control' },
|
|
{ icon: '📜', label: 'Live logs access' },
|
|
{ icon: '🔄', label: 'Auto-updates' },
|
|
{ icon: '📊', label: 'Resource monitoring' },
|
|
],
|
|
},
|
|
{
|
|
id: 'premium',
|
|
title: 'Premium Features',
|
|
description: 'Advanced features for power users and production deployments. SSO integration, multi-container recipes, and Docker Swarm orchestration.',
|
|
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: '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">
|
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
|
|
Powerful <span className="text-brand-400">Features</span> Built In
|
|
</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.
|
|
</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>
|
|
<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>
|
|
|
|
{/* Feature Comparison Grid */}
|
|
<section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-900 to-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">
|
|
What's Included in <span className="text-brand-400">Free</span>
|
|
</h2>
|
|
<p className="text-lg text-surface-400">
|
|
Start with the free tier and upgrade anytime when you need advanced features.
|
|
</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>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Premium Section */}
|
|
<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
|
|
</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>
|
|
|
|
<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"
|
|
>
|
|
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 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>
|
|
);
|
|
}
|