Krystie
7b910aa913
- Added vintage-radio (93rd app template) to AppShowcase - Updated '92+' to '93+' across homepage, about, features, pricing, docs - Deployed to live site via FTPS
205 lines
9.0 KiB
TypeScript
205 lines
9.0 KiB
TypeScript
import Navbar from "@/components/Navbar";
|
|
import Footer from "@/components/Footer";
|
|
import Link from "next/link";
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
<main className="flex-1">
|
|
{/* Hero */}
|
|
<section className="relative pt-32 pb-20 px-4">
|
|
<div className="absolute inset-0 hero-glow pointer-events-none" />
|
|
<div className="max-w-4xl mx-auto text-center relative z-10">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
|
|
Built for the{" "}
|
|
<span className="gradient-text">Self-Hosting Community</span>
|
|
</h1>
|
|
<p className="text-xl text-surface-300 max-w-2xl mx-auto">
|
|
DashCaddy was born from the frustration of managing dozens of
|
|
Docker containers, SSL certificates, and DNS records by hand. We
|
|
built the tool we wished existed — and then made it AI-powered.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Story */}
|
|
<section className="py-20 px-4">
|
|
<div className="max-w-3xl mx-auto">
|
|
<h2 className="text-2xl font-bold text-white mb-6">Our Story</h2>
|
|
<div className="space-y-4 text-surface-300 leading-relaxed">
|
|
<p>
|
|
Self-hosting is powerful. You own your data, you control your
|
|
infrastructure, and you're not at the mercy of SaaS
|
|
providers who can change their terms, raise prices, or shut down
|
|
overnight. But let's be honest — it can also be a
|
|
pain.
|
|
</p>
|
|
<p>
|
|
Every new service means editing Caddyfiles, creating DNS
|
|
records, configuring SSL certificates, writing Docker Compose
|
|
files, and hoping everything plays nicely together. Multiply that
|
|
by 20, 30, or 50 services, and you've got a full-time
|
|
operations job on your hands.
|
|
</p>
|
|
<p>
|
|
DashCaddy was built to solve this. One click to deploy an app.
|
|
SSL, DNS, and reverse proxy configuration happen automatically.
|
|
A beautiful dashboard with real-time WebSocket updates to monitor
|
|
everything. Natural language AI commands so you can just say
|
|
“deploy Plex” and it happens. And when something
|
|
goes wrong, you know about it immediately — not when a
|
|
family member texts you that Plex is down.
|
|
</p>
|
|
<p>
|
|
We believe self-hosting should be accessible to everyone, not
|
|
just people who enjoy writing YAML at 2 AM. DashCaddy makes it
|
|
beautiful, effortless, and intelligent.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Values */}
|
|
<section className="py-20 px-4 border-t border-surface-800">
|
|
<div className="max-w-5xl mx-auto">
|
|
<h2 className="text-2xl font-bold text-white mb-12 text-center">
|
|
What We Believe In
|
|
</h2>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
icon: "🔒",
|
|
title: "Proprietary & Polished",
|
|
description:
|
|
"DashCaddy is proprietary software built with care. The core platform is free to use, with Premium features for advanced orchestration.",
|
|
},
|
|
{
|
|
icon: "🏠",
|
|
title: "Your Data, Your Server",
|
|
description:
|
|
"DashCaddy runs entirely on your hardware. No cloud dependency, no telemetry, no phoning home. Your data never leaves your network.",
|
|
},
|
|
{
|
|
icon: "🤖",
|
|
title: "AI-Native",
|
|
description:
|
|
"From the AI Intent Router to MCP server integration, DashCaddy is built for the AI era. Control your homelab with natural language or let AI assistants manage it for you.",
|
|
},
|
|
].map((value) => (
|
|
<div
|
|
key={value.title}
|
|
className="glass-card rounded-xl p-8 text-center"
|
|
>
|
|
<div className="text-4xl mb-4">{value.icon}</div>
|
|
<h3 className="text-lg font-semibold text-white mb-3">
|
|
{value.title}
|
|
</h3>
|
|
<p className="text-surface-400">{value.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Tech Stack */}
|
|
<section className="py-20 px-4 border-t border-surface-800">
|
|
<div className="max-w-5xl mx-auto">
|
|
<h2 className="text-2xl font-bold text-white mb-12 text-center">
|
|
Built With
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
{[
|
|
{ name: "Caddy", role: "Reverse Proxy & SSL", icon: "🔒" },
|
|
{ name: "Docker", role: "Container Runtime", icon: "🐳" },
|
|
{ name: "Node.js", role: "API Backend", icon: "🟢" },
|
|
{ name: "Technitium", role: "DNS Server", icon: "🌐" },
|
|
{ name: "Express", role: "REST API + WebSocket", icon: "⚡" },
|
|
{ name: "MCP", role: "AI Protocol Layer", icon: "🤖" },
|
|
{ name: "Stripe", role: "Payment Processing", icon: "💳" },
|
|
{ name: "Jest", role: "Testing (1770+ tests)", icon: "✅" },
|
|
].map((tech) => (
|
|
<div
|
|
key={tech.name}
|
|
className="glass-card rounded-xl p-6 text-center hover:border-brand-500/30 transition-colors"
|
|
>
|
|
<div className="text-3xl mb-3">{tech.icon}</div>
|
|
<div className="font-semibold text-white">{tech.name}</div>
|
|
<div className="text-sm text-surface-400">{tech.role}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats */}
|
|
<section className="py-20 px-4 border-t border-surface-800">
|
|
<div className="max-w-4xl mx-auto">
|
|
<h2 className="text-2xl font-bold text-white mb-12 text-center">
|
|
By the Numbers
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
{[
|
|
{ value: "93+", label: "App Templates" },
|
|
{ value: "1770+", label: "Test Cases" },
|
|
{ value: "260+", label: "API Endpoints" },
|
|
{ value: "5", label: "Languages" },
|
|
].map((stat) => (
|
|
<div key={stat.label} className="text-center">
|
|
<div className="text-4xl font-bold text-brand-400 mb-2">
|
|
{stat.value}
|
|
</div>
|
|
<p className="text-sm text-surface-400">{stat.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Contact / Support */}
|
|
<section className="py-20 px-4 border-t border-surface-800">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<h2 className="text-2xl font-bold text-white mb-6">Get In Touch</h2>
|
|
<p className="text-surface-300 mb-8">
|
|
Have questions or feedback? We'd love to hear from you.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a
|
|
href="mailto:support@dashcaddy.net"
|
|
className="px-6 py-3 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-medium transition-colors"
|
|
>
|
|
Email Us
|
|
</a>
|
|
<Link
|
|
href="/docs"
|
|
className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
|
|
>
|
|
Read the Docs
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="py-20 px-4 border-t border-surface-800">
|
|
<div className="max-w-3xl mx-auto text-center">
|
|
<h2 className="text-3xl font-bold text-white mb-4">
|
|
Ready to simplify your homelab?
|
|
</h2>
|
|
<p className="text-surface-300 mb-8">
|
|
Install DashCaddy and start deploying services today. Free forever.
|
|
</p>
|
|
<Link
|
|
href="/pricing"
|
|
className="inline-block px-8 py-4 rounded-lg bg-brand-600 hover:bg-brand-500 text-white font-semibold text-lg transition-colors"
|
|
>
|
|
View Pricing
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|