198 lines
8.0 KiB
TypeScript
198 lines
8.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.
|
|
</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 to monitor everything. 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 and effortless.
|
|
</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: "Open Core",
|
|
description:
|
|
"The core of DashCaddy is free and always will be. Premium features fund development, but the essentials are open to everyone.",
|
|
},
|
|
{
|
|
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: "Built to Last",
|
|
description:
|
|
"We use proven technologies — Caddy, Docker, Node.js. No bleeding-edge frameworks that break every six months. Stable, reliable, boring (in the best way).",
|
|
},
|
|
].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: "🌐",
|
|
},
|
|
].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>
|
|
|
|
{/* 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, feedback, or want to contribute? 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>
|
|
<a
|
|
href="#"
|
|
className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
|
|
>
|
|
Join Discord
|
|
</a>
|
|
<a
|
|
href="#"
|
|
className="px-6 py-3 rounded-lg border border-surface-700 hover:border-surface-500 text-surface-300 font-medium transition-colors"
|
|
>
|
|
GitHub
|
|
</a>
|
|
</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">
|
|
Start with the free tier. Upgrade when you're ready.
|
|
</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 />
|
|
</>
|
|
);
|
|
}
|