Daniel Legt
9b8ef16474
Initialize the repository with the core Go backend architecture and a frontend mockup for warpbox.dev, a self-hosted file-sharing application. - Set up Go backend modules for configuration, HTTP server, middleware, handlers, and templates. - Add local development scripts, environment templates, and basic project configuration. - Include a React-based frontend mockup under the docs directory.
43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { PublicHeader, Footer } from "@/components/layout/PublicHeader";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Shield, Zap, Server, Code2 } from "lucide-react";
|
|
|
|
export const Route = createFileRoute("/about")({
|
|
head: () => ({ meta: [{ title: "About — warpbox.dev" }] }),
|
|
component: About,
|
|
});
|
|
|
|
const features = [
|
|
{ icon: Zap, title: "Fast", body: "Anonymous drop-and-share, no accounts needed. Resumable for large files." },
|
|
{ icon: Shield, title: "Private", body: "Password-protected buckets, expiry, max-downloads, optional one-time links." },
|
|
{ icon: Server, title: "Self-hosted", body: "Single Go binary or Docker. Local disk or S3-compatible storage." },
|
|
{ icon: Code2, title: "Automatable", body: "First-class curl, CLI, REST API and ShareX support." },
|
|
];
|
|
|
|
function About() {
|
|
return (
|
|
<div className="flex min-h-screen flex-col bg-background">
|
|
<PublicHeader />
|
|
<main className="mx-auto w-full max-w-4xl flex-1 px-4 py-12">
|
|
<h1 className="text-3xl font-semibold tracking-tight">About warpbox.dev</h1>
|
|
<p className="mt-3 max-w-2xl text-muted-foreground">
|
|
An open-source, self-hosted file transfer platform that pairs frictionless anonymous uploads
|
|
with optional accounts, folders, and a proper admin console. Built in Go with a minimal vanilla frontend.
|
|
</p>
|
|
<div className="mt-8 grid gap-4 sm:grid-cols-2">
|
|
{features.map((f) => (
|
|
<Card key={f.title}>
|
|
<CardContent className="p-5">
|
|
<f.icon className="mb-3 h-5 w-5 text-primary" />
|
|
<h3 className="font-medium">{f.title}</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">{f.body}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |