mirror of
https://gitlab.w-hs.de/an14051/backerup-website.git
synced 2026-07-27 17:35:29 +00:00
Anders Böttcher
579 lines
30 KiB
TypeScript
579 lines
30 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import TerminalTyper from "../components/TerminalTyper";
|
|
import AnimateIn from "../components/AnimateIn";
|
|
import CountUp from "../components/CountUp";
|
|
import SpotlightCard from "../components/SpotlightCard";
|
|
import { LINKS } from "@/lib/links";
|
|
import { getLinks } from "@/lib/links-db";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Daterup — Docker Container Updates",
|
|
description:
|
|
"Automated Docker container update manager. Check running containers for new image versions and update them in one click — or on a cron schedule.",
|
|
};
|
|
|
|
/* ── SVG Icons ─────────────────────────────────────────────── */
|
|
const RefreshIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
|
|
</svg>
|
|
);
|
|
const CubeIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
|
|
</svg>
|
|
);
|
|
const MagnifyIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
|
</svg>
|
|
);
|
|
const LayersIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
|
|
</svg>
|
|
);
|
|
const ClockIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
);
|
|
const BookIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
|
</svg>
|
|
);
|
|
const TerminalIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-6 h-6" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
);
|
|
const DownloadIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
</svg>
|
|
);
|
|
const EyeIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
);
|
|
const ArrowUpIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
|
|
</svg>
|
|
);
|
|
const LinkIcon = () => (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-5 h-5" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
</svg>
|
|
);
|
|
const GitHubIcon = () => (
|
|
<svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor" aria-hidden="true">
|
|
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
|
|
</svg>
|
|
);
|
|
|
|
/* ── Data ───────────────────────────────────────────────────── */
|
|
const features = [
|
|
{
|
|
icon: <CubeIcon />,
|
|
gradient: "from-violet-500/15 to-purple-600/15",
|
|
border: "border-violet-500/20",
|
|
iconBg: "bg-violet-500/10",
|
|
iconColor: "text-violet-400",
|
|
title: "Container inventory",
|
|
body: "Lists all running (and optionally stopped) containers with their current image, tag, and digest — your live fleet at a glance.",
|
|
},
|
|
{
|
|
icon: <MagnifyIcon />,
|
|
gradient: "from-purple-500/15 to-fuchsia-600/15",
|
|
border: "border-purple-500/20",
|
|
iconBg: "bg-purple-500/10",
|
|
iconColor: "text-purple-400",
|
|
title: "Digest-based detection",
|
|
body: "Pulls the latest image manifest and compares SHA digests — no false positives from re-tagged images. Knows exactly when a real update is available.",
|
|
},
|
|
{
|
|
icon: <RefreshIcon />,
|
|
gradient: "from-fuchsia-500/15 to-violet-600/15",
|
|
border: "border-fuchsia-500/20",
|
|
iconBg: "bg-fuchsia-500/10",
|
|
iconColor: "text-fuchsia-400",
|
|
title: "One-click update",
|
|
body: "Stops, removes, and recreates the container with the new image — preserving all original binds, ports, env vars, restart policy, and networks.",
|
|
},
|
|
{
|
|
icon: <LayersIcon />,
|
|
gradient: "from-indigo-500/15 to-violet-600/15",
|
|
border: "border-indigo-500/20",
|
|
iconBg: "bg-indigo-500/10",
|
|
iconColor: "text-indigo-400",
|
|
title: "Batch operations",
|
|
body: "Check or update all containers at once with a single click. Daterup handles each container sequentially to avoid Docker socket contention.",
|
|
},
|
|
{
|
|
icon: <ClockIcon />,
|
|
gradient: "from-violet-500/15 to-indigo-600/15",
|
|
border: "border-violet-500/20",
|
|
iconBg: "bg-violet-500/10",
|
|
iconColor: "text-violet-400",
|
|
title: "Cron schedules",
|
|
body: "Create named schedules with check-only or check & auto-update modes, targeting specific containers or your entire fleet.",
|
|
},
|
|
{
|
|
icon: <BookIcon />,
|
|
gradient: "from-purple-500/15 to-violet-600/15",
|
|
border: "border-purple-500/20",
|
|
iconBg: "bg-purple-500/10",
|
|
iconColor: "text-purple-400",
|
|
title: "Audit history & live logs",
|
|
body: "Full update audit trail with container, image, status, trigger, and digest. Plus a live ring-buffer log viewer with level and context filtering.",
|
|
},
|
|
];
|
|
|
|
const steps = [
|
|
{
|
|
n: "01",
|
|
icon: <LinkIcon />,
|
|
color: "bg-violet-500/20 text-violet-400",
|
|
title: "Connect",
|
|
body: "Mount the Docker socket. Daterup auto-discovers all running containers immediately on startup.",
|
|
},
|
|
{
|
|
n: "02",
|
|
icon: <MagnifyIcon />,
|
|
color: "bg-purple-500/20 text-purple-400",
|
|
title: "Check",
|
|
body: "Compare local image digests against the registry. Outdated containers are flagged instantly.",
|
|
},
|
|
{
|
|
n: "03",
|
|
icon: <EyeIcon />,
|
|
color: "bg-fuchsia-500/20 text-fuchsia-400",
|
|
title: "Review",
|
|
body: "The dashboard shows all pending updates with image info and last-check timestamps.",
|
|
},
|
|
{
|
|
n: "04",
|
|
icon: <ArrowUpIcon />,
|
|
color: "bg-indigo-500/20 text-indigo-400",
|
|
title: "Update",
|
|
body: "One click to update — Daterup stops, removes, and recreates the container with zero config drift.",
|
|
},
|
|
];
|
|
|
|
const pills = [
|
|
{ label: "Open source", color: "text-violet-400 bg-violet-500/10 border-violet-500/20" },
|
|
{ label: "Zero cloud deps", color: "text-purple-400 bg-purple-500/10 border-purple-500/20" },
|
|
{ label: "Self-hosted", color: "text-fuchsia-400 bg-fuchsia-500/10 border-fuchsia-500/20" },
|
|
{ label: "Docker native", color: "text-indigo-400 bg-indigo-500/10 border-indigo-500/20" },
|
|
];
|
|
|
|
const stats = [
|
|
{ num: 100, suffix: "%", label: "Open source", sub: "source available" },
|
|
{ num: 0, suffix: "", label: "Config drift", sub: "on container update" },
|
|
{ num: 7, suffix: "", label: "UI pages", sub: "full management" },
|
|
{ num: 0, suffix: "", label: "Cloud dependencies", sub: "runs on your infra" },
|
|
];
|
|
|
|
/* ── Page ───────────────────────────────────────────────────── */
|
|
export default async function DaterupPage() {
|
|
const links = await getLinks();
|
|
return (
|
|
<>
|
|
{/* ═══ Hero ═══════════════════════════════════════════════ */}
|
|
<section className="relative overflow-hidden px-6 pt-28 pb-20">
|
|
{/* ── Animated aurora blobs ── */}
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div
|
|
className="absolute -top-[35%] -left-[18%] w-[750px] h-[750px] rounded-full"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(139,92,246,0.13) 0%, transparent 60%)",
|
|
filter: "blur(55px)",
|
|
animation: "aurora1 18s ease-in-out infinite alternate",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute -top-[25%] right-[-5%] w-[650px] h-[650px] rounded-full"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(168,85,247,0.11) 0%, transparent 60%)",
|
|
filter: "blur(55px)",
|
|
animation: "aurora2 23s ease-in-out infinite alternate-reverse",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute top-[28%] left-[22%] w-[520px] h-[520px] rounded-full"
|
|
style={{
|
|
background: "radial-gradient(circle, rgba(99,102,241,0.09) 0%, transparent 60%)",
|
|
filter: "blur(55px)",
|
|
animation: "aurora3 15s ease-in-out infinite alternate",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-4xl text-center">
|
|
{/* Pills */}
|
|
<div
|
|
className="mb-8 flex flex-wrap items-center justify-center gap-2"
|
|
style={{ animation: "slideUp 0.7s cubic-bezier(0.22,1,0.36,1) 80ms both" }}
|
|
>
|
|
{pills.map((p) => (
|
|
<span
|
|
key={p.label}
|
|
className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold ${p.color}`}
|
|
>
|
|
<span className="w-1 h-1 rounded-full bg-current opacity-70" />
|
|
{p.label}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<h1
|
|
className="text-5xl font-extrabold leading-[1.1] tracking-tight text-white sm:text-7xl"
|
|
style={{ animation: "slideUp 0.75s cubic-bezier(0.22,1,0.36,1) 220ms both" }}
|
|
>
|
|
Container updates,
|
|
<br />
|
|
<span
|
|
className="bg-clip-text text-transparent"
|
|
style={{ backgroundImage: "linear-gradient(135deg, #a78bfa, #7c3aed, #c026d3)" }}
|
|
>
|
|
automated.
|
|
</span>
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p
|
|
className="mx-auto mt-7 max-w-2xl text-lg leading-relaxed text-slate-400"
|
|
style={{ animation: "slideUp 0.75s cubic-bezier(0.22,1,0.36,1) 380ms both" }}
|
|
>
|
|
Daterup watches your running containers for new image versions and lets you update
|
|
them with a single click — or automatically on a cron schedule. Zero config drift,
|
|
full audit history, all from a self-hosted UI.
|
|
</p>
|
|
|
|
{/* CTA buttons */}
|
|
<div
|
|
className="mt-10 flex flex-wrap justify-center gap-4"
|
|
style={{ animation: "slideUp 0.75s cubic-bezier(0.22,1,0.36,1) 520ms both" }}
|
|
>
|
|
<a
|
|
href={links.daterupGitea}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group flex items-center gap-2 rounded-xl px-7 py-3.5 text-sm font-bold text-white transition-all hover:brightness-110 hover:scale-105 active:scale-95 shadow-lg"
|
|
style={{ background: "linear-gradient(135deg, #a78bfa, #7c3aed)" }}
|
|
>
|
|
<DownloadIcon />
|
|
Get started
|
|
</a>
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-7 py-3.5 text-sm font-semibold text-slate-200 transition-all hover:bg-white/10 hover:border-white/20 hover:scale-105 active:scale-95"
|
|
>
|
|
Also see Backerup
|
|
<svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
|
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
|
</svg>
|
|
</Link>
|
|
<a
|
|
href={links.daterupGitea}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 rounded-xl border border-white/8 bg-white/3 px-7 py-3.5 text-sm font-semibold text-slate-300 transition-all hover:bg-white/8 hover:text-white hover:scale-105"
|
|
>
|
|
<GitHubIcon />
|
|
Gitea
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Terminal card ── */}
|
|
<div
|
|
className="relative mx-auto mt-20 max-w-2xl"
|
|
style={{ animation: "slideUp 0.8s cubic-bezier(0.22,1,0.36,1) 680ms both" }}
|
|
>
|
|
<div
|
|
className="absolute inset-0 rounded-2xl blur-xl opacity-40"
|
|
style={{ background: "radial-gradient(ellipse, rgba(139,92,246,0.2) 0%, transparent 70%)" }}
|
|
/>
|
|
<div className="relative rounded-2xl border border-white/8 glass overflow-hidden shadow-2xl terminal-scan">
|
|
<div className="flex items-center gap-2 border-b border-white/6 px-5 py-3.5 bg-white/2">
|
|
<span className="h-3 w-3 rounded-full bg-red-500/70" />
|
|
<span className="h-3 w-3 rounded-full bg-yellow-500/70" />
|
|
<span className="h-3 w-3 rounded-full bg-emerald-500/70" />
|
|
<span className="ml-3 text-xs text-slate-500 font-mono tracking-wide">daterup · quick start</span>
|
|
<div className="ml-auto flex items-center gap-1.5">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" />
|
|
<span className="text-xs text-slate-600 font-mono">live</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-6 min-h-[260px]">
|
|
<TerminalTyper mode="daterup" links={{ daterupDockerImage: links.daterupDockerImage }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ Stats bar ══════════════════════════════════════════ */}
|
|
<section className="px-6 py-12">
|
|
<div className="mx-auto max-w-4xl">
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
|
{stats.map((s, i) => (
|
|
<AnimateIn key={s.label} variant="scale-up" delay={i * 90}>
|
|
<div className="rounded-2xl border border-white/5 glass p-5 text-center">
|
|
<div className="text-2xl font-extrabold text-white tracking-tight">
|
|
<CountUp to={s.num} suffix={s.suffix} duration={1800} />
|
|
</div>
|
|
<div className="mt-1 text-sm font-medium text-slate-300">{s.label}</div>
|
|
<div className="mt-0.5 text-xs text-slate-600">{s.sub}</div>
|
|
</div>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ Features ═══════════════════════════════════════════ */}
|
|
<section className="px-6 py-24" id="features">
|
|
<div className="mx-auto max-w-6xl">
|
|
<AnimateIn variant="fade-up">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<span className="inline-block rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-violet-400">
|
|
Features
|
|
</span>
|
|
<h2 className="mt-5 text-4xl font-bold tracking-tight text-white">
|
|
Everything you need
|
|
</h2>
|
|
<p className="mt-4 text-slate-400 leading-relaxed">
|
|
A complete Docker update lifecycle — from continuous digest monitoring to
|
|
scheduled auto-updates and a full audit trail, all from one self-hosted UI.
|
|
</p>
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
<div className="mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
{features.map((f, i) => (
|
|
<AnimateIn key={f.title} variant="fade-up" delay={i * 65}>
|
|
<SpotlightCard
|
|
className={`rounded-2xl border ${f.border} bg-gradient-to-br ${f.gradient} p-6 h-full card-hover`}
|
|
>
|
|
<div className={`inline-flex items-center justify-center w-11 h-11 rounded-xl ${f.iconBg} ${f.iconColor} mb-4`}>
|
|
{f.icon}
|
|
</div>
|
|
<h3 className="font-semibold text-white text-lg leading-snug">{f.title}</h3>
|
|
<p className="mt-2.5 text-sm leading-relaxed text-slate-400">{f.body}</p>
|
|
</SpotlightCard>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ How it works ════════════════════════════════════════ */}
|
|
<section className="px-6 py-24">
|
|
<div className="mx-auto max-w-5xl">
|
|
<AnimateIn variant="fade-up">
|
|
<div className="mx-auto max-w-2xl text-center mb-16">
|
|
<span className="inline-block rounded-full border border-purple-500/30 bg-purple-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-purple-400">
|
|
How it works
|
|
</span>
|
|
<h2 className="mt-5 text-4xl font-bold tracking-tight text-white">
|
|
Up and running in minutes
|
|
</h2>
|
|
</div>
|
|
</AnimateIn>
|
|
|
|
<div className="relative grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
|
|
<div
|
|
className="hidden lg:block absolute top-8 left-[12.5%] right-[12.5%] h-px"
|
|
style={{ background: "linear-gradient(90deg, rgba(139,92,246,0.5), rgba(168,85,247,0.5))" }}
|
|
/>
|
|
{steps.map((s, i) => (
|
|
<AnimateIn key={s.n} variant="fade-up" delay={i * 110}>
|
|
<div className="relative flex flex-col items-center text-center gap-4">
|
|
<div className="relative z-10 flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 glass">
|
|
<div className={`flex items-center justify-center w-10 h-10 rounded-xl ${s.color}`}>
|
|
{s.icon}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-mono text-slate-600 mb-1">{s.n}</div>
|
|
<h3 className="font-bold text-white text-lg">{s.title}</h3>
|
|
<p className="mt-2 text-sm text-slate-400 leading-relaxed max-w-[200px] mx-auto">{s.body}</p>
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ Zero config drift callout ══════════════════════════ */}
|
|
<section className="px-6 py-24">
|
|
<div className="mx-auto max-w-5xl">
|
|
<AnimateIn variant="fade-up">
|
|
<div className="rounded-3xl border border-white/6 glass overflow-hidden">
|
|
<div className="grid lg:grid-cols-2">
|
|
{/* Left: text */}
|
|
<div className="p-10 lg:p-14 flex flex-col justify-center">
|
|
<span className="inline-block rounded-full border border-violet-500/30 bg-violet-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-violet-400 mb-6 self-start">
|
|
How updates work
|
|
</span>
|
|
<h2 className="text-3xl font-bold text-white leading-snug">
|
|
Zero config drift, guaranteed
|
|
</h2>
|
|
<p className="mt-4 text-slate-400 leading-relaxed">
|
|
When Daterup recreates a container, it reads the full{" "}
|
|
<code className="font-mono text-violet-300 text-xs">docker inspect</code> output
|
|
and rebuilds the container with the exact same configuration — nothing is lost
|
|
or changed except the image digest.
|
|
</p>
|
|
<ul className="mt-6 space-y-3 text-sm text-slate-400">
|
|
{[
|
|
{ name: "Binds & volumes", desc: "all mount points preserved" },
|
|
{ name: "Port mappings", desc: "identical host bindings" },
|
|
{ name: "Env vars & labels", desc: "full environment intact" },
|
|
{ name: "Restart policy & networks", desc: "same behaviour post-update" },
|
|
].map((item) => (
|
|
<li key={item.name} className="flex items-start gap-3">
|
|
<span className="mt-0.5 text-violet-500 shrink-0">
|
|
<svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
|
</svg>
|
|
</span>
|
|
<span>
|
|
<code className="font-mono text-slate-200 text-xs">{item.name}</code>
|
|
<span className="ml-2 text-slate-500">— {item.desc}</span>
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<a
|
|
href={links.daterupGitea}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-xl px-6 py-2.5 text-sm font-bold text-white transition-all hover:brightness-110"
|
|
style={{ background: "linear-gradient(135deg, #a78bfa, #7c3aed)" }}
|
|
>
|
|
View source →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: update flow diagram */}
|
|
<div className="border-t border-white/5 lg:border-t-0 lg:border-l border-white/5 p-10 lg:p-14 flex items-center">
|
|
<div className="font-mono text-sm w-full space-y-4">
|
|
{[
|
|
{ icon: "🔍", step: "inspect", desc: "docker inspect <container>", color: "text-violet-400" },
|
|
{ icon: "⬇️", step: "pull", desc: "docker pull <image>:latest", color: "text-purple-400" },
|
|
{ icon: "⏹", step: "stop", desc: "docker stop <container>", color: "text-amber-400" },
|
|
{ icon: "🗑", step: "remove", desc: "docker rm <container>", color: "text-rose-400" },
|
|
{ icon: "🚀", step: "create", desc: "docker run [original config]", color: "text-emerald-400" },
|
|
].map(({ icon, step, desc, color }, i) => (
|
|
<div key={step} className="flex items-center gap-3">
|
|
<span className="text-slate-700 text-xs font-mono shrink-0">{String(i + 1).padStart(2, "0")}</span>
|
|
<span>{icon}</span>
|
|
<span className={`${color} font-semibold`}>{step}</span>
|
|
<span className="text-slate-600 text-xs truncate">{desc}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ═══ Quick start ════════════════════════════════════════ */}
|
|
<section className="px-6 py-20" id="quick-start">
|
|
<AnimateIn variant="fade-up">
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<span className="inline-block rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-violet-400 mb-6">
|
|
Quick start
|
|
</span>
|
|
<h2 className="text-4xl font-bold tracking-tight text-white mb-4">
|
|
Setup with docker-compose
|
|
</h2>
|
|
<p className="text-slate-400 mb-10">
|
|
The easiest way to get Daterup running is with docker-compose for declarative, reproducible deployments.
|
|
</p>
|
|
|
|
<div className="rounded-2xl border border-white/6 glass overflow-hidden text-left">
|
|
<div className="flex items-center gap-2 border-b border-white/6 px-5 py-3 bg-white/2">
|
|
<span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
|
|
<span className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
|
|
<span className="h-2.5 w-2.5 rounded-full bg-emerald-500/70" />
|
|
<span className="ml-3 text-xs font-mono text-slate-500">docker-compose setup</span>
|
|
</div>
|
|
<div className="p-6">
|
|
<TerminalTyper mode="daterup-compose" links={{ daterupDockerImage: links.daterupDockerImage }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
</section>
|
|
|
|
{/* ═══ Final CTA ══════════════════════════════════════════ */}
|
|
<section className="px-6 py-24">
|
|
<div className="mx-auto max-w-4xl">
|
|
<AnimateIn variant="scale-up">
|
|
<div
|
|
className="relative overflow-hidden rounded-3xl p-px"
|
|
style={{ background: "linear-gradient(135deg, rgba(139,92,246,0.4), rgba(168,85,247,0.4), rgba(99,102,241,0.4))" }}
|
|
>
|
|
<div className="relative rounded-3xl px-10 py-16 text-center" style={{ background: "#060810" }}>
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-20"
|
|
style={{ background: "radial-gradient(ellipse at center top, rgba(139,92,246,0.4), transparent 60%)" }}
|
|
/>
|
|
<div className="relative">
|
|
<h2 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
|
|
Keep your containers current.
|
|
</h2>
|
|
<p className="mx-auto mt-5 max-w-xl text-lg text-slate-400">
|
|
Open source, self-hosted, and free forever. Stop manually checking for image updates
|
|
and let Daterup handle it automatically.
|
|
</p>
|
|
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
|
<a
|
|
href={links.daterupGitea}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg border border-white/10 bg-white/3 text-xs text-slate-400 hover:text-white hover:border-white/20 transition-all"
|
|
>
|
|
<GitHubIcon />
|
|
Star on Gitea
|
|
</a>
|
|
<a
|
|
href={links.daterupGitea}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="rounded-xl px-7 py-3.5 text-sm font-bold text-white transition-all hover:brightness-110 hover:scale-105 active:scale-95"
|
|
style={{ background: "linear-gradient(135deg, #a78bfa, #7c3aed)" }}
|
|
>
|
|
Get started →
|
|
</a>
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-7 py-3.5 text-sm font-semibold text-slate-200 transition-all hover:bg-white/10 hover:scale-105"
|
|
>
|
|
Also see Backerup
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AnimateIn>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|