sami7777/dashcaddy.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DashCaddy.net marketing website with Stripe integration

Browse Source
This commit is contained in:
Krystie
2026-04-15 19:56:21 -07:00
commit fff986ea06
34 changed files with 2946 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,197 @@
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&apos;re not at the mercy of SaaS
providers who can change their terms, raise prices, or shut down
overnight. But let&apos;s be honest &mdash; 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&apos;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 &mdash; 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&apos;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&apos;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 />
</>
);
}