Archived
200 lines
11 KiB
TypeScript
200 lines
11 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowLeft, Server } from "lucide-react";
|
|
|
|
const PORTAL = "https://project.webklar.com";
|
|
const STEUER = "Endpreis, gemäß § 19 UStG ohne Umsatzsteuer";
|
|
|
|
const divider = <div className="my-8 border-t border-border" aria-hidden />;
|
|
const linkClass = "text-foreground underline hover:no-underline";
|
|
|
|
const leistungen = [
|
|
{
|
|
titel: "Bereitstellung Ihrer Website",
|
|
text: "Hosting auf unserem Server in Deutschland, SSL-Zertifikat, tägliche Datensicherung, Überwachung der Erreichbarkeit sowie Updates von Betriebssystem und Server-Software.",
|
|
},
|
|
{
|
|
titel: "1 Domain inklusive",
|
|
text: "Registrierung auf Ihren Namen, Verlängerung und DNS-Verwaltung (.de, .com, .eu, .net oder .org).",
|
|
},
|
|
{
|
|
titel: "1 E-Mail-Postfach",
|
|
text: `Mit Ihrer eigenen Domain, 5 GB Speicher, Webmail und Zugriff per Outlook oder Smartphone. Mehr Platz gibt es über den E-Mail-Zusatzspeicher: je 5 GB für 1,00 € pro Monat (${STEUER}).`,
|
|
},
|
|
{
|
|
titel: "Störungen inklusive",
|
|
text: "Störungen an Server, Domain und Postfach in unserem Verantwortungsbereich beheben wir ohne Berechnung. Servicezeiten Montag bis Freitag 9 bis 17 Uhr (außer an gesetzlichen Feiertagen in Rheinland-Pfalz), Antwort spätestens bis zum Ende des nächsten Werktags.",
|
|
},
|
|
];
|
|
|
|
const HostingAbo = () => {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex items-center justify-between">
|
|
<Link to="/" className="flex items-center gap-2 group">
|
|
<span className="text-xl font-display font-medium text-foreground tracking-tight">Webklar</span>
|
|
</Link>
|
|
<Link to="/">
|
|
<Button variant="ghost" className="text-muted-foreground hover:text-foreground">
|
|
<ArrowLeft className="w-4 h-4 mr-2" />
|
|
Zurück
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="pt-32 pb-24">
|
|
<div className="container mx-auto px-6">
|
|
<div className="max-w-3xl mx-auto">
|
|
<div className="mb-12">
|
|
<div className="label-tag mb-4 flex items-center gap-2">
|
|
<Server className="w-4 h-4" />
|
|
Leistungen
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
|
|
Hosting-Abo
|
|
</h1>
|
|
<p className="text-muted-foreground text-lg">
|
|
Ihre statische Website auf unserem Server in Deutschland: 15,00 € pro Monat, 12 Monate Mindestlaufzeit.
|
|
</p>
|
|
<p className="text-muted-foreground text-sm mt-1">Alle Preise sind Endpreise, gemäß § 19 UStG ohne Umsatzsteuer.</p>
|
|
</div>
|
|
|
|
<article className="space-y-8 text-foreground">
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-4">Das ist enthalten</h2>
|
|
<ul className="grid gap-5 sm:grid-cols-2">
|
|
{leistungen.map((l) => (
|
|
<li key={l.titel} className="rounded-2xl border border-border p-5">
|
|
<p className="font-medium mb-1">{l.titel}</p>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">{l.text}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Nur für statische Websites</h2>
|
|
<div className="text-muted-foreground leading-relaxed space-y-3">
|
|
<p>
|
|
Das Hosting-Abo ist für statische Websites bestimmt, die wir erstellt oder zur Betreuung übernommen haben.
|
|
Statisch heißt: Der Webserver liefert die Dateien Ihrer Website (HTML, CSS, JavaScript, Bilder) unverändert
|
|
aus. Dazu gehören auch die React- und Vite-Websites, die wir erstellen.
|
|
</p>
|
|
<p>
|
|
Nicht möglich sind ein Content-Management-System, ein Login, eine Datenbank und eigener serverseitiger Code
|
|
(etwa PHP). Kontakt über E-Mail-Links auf der Website ist möglich. Formulare, die Eingaben an einen Server
|
|
übermitteln, sind nicht enthalten; eine Lösung dafür bieten wir auf Anfrage gesondert an.
|
|
</p>
|
|
<p>
|
|
Updates und Pflege der Website selbst sind nicht enthalten; bei statischen Websites sind sie für den sicheren
|
|
Betrieb nicht nötig. Braucht Ihre Website dynamische Teile oder wünschen Sie laufende Pflege und eine Stunde
|
|
Arbeitszeit pro Monat, ist unser{" "}
|
|
<Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link> das Richtige.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Preis und Laufzeit</h2>
|
|
<ul className="text-muted-foreground leading-relaxed space-y-1 list-disc pl-5">
|
|
<li>15,00 € pro Monat, monatlich im Voraus. {STEUER}.</li>
|
|
<li>Mindestlaufzeit 12 Monate, kündbar zum Ende der Mindestlaufzeit bis einen Monat vorher; danach jederzeit zum Ende des Abrechnungsmonats. Bei Geschäftsaufgabe Sonderkündigung mit einem Monat Frist.</li>
|
|
<li>Zahlung per Kreditkarte oder SEPA-Lastschrift über unseren Zahlungsdienstleister Stripe.</li>
|
|
<li>Ein Stundenkontingent ist nicht enthalten. Änderungen an Ihrer Website und andere Aufträge führen wir nur nach Ihrer Freigabe aus: 100 € pro Stunde ({STEUER}), abgerechnet in 15-Minuten-Schritten. Vorher nennen wir Ihnen den geschätzten Aufwand.</li>
|
|
</ul>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">E-Mail-Zusatzspeicher</h2>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Brauchen Sie mehr Platz für E-Mails, buchen Sie im Kundenportal unter „Verträge“ Zusatzspeicher: Pakete von je
|
|
5 GB für 1,00 € pro Monat ({STEUER}), bis zu 10 Pakete. Die Zahl der Pakete können Sie dort jederzeit erhöhen
|
|
oder verringern, solange Ihr Abo nicht gekündigt ist. Eine Verringerung wirkt zum Ende des Abrechnungsmonats.
|
|
Einzelheiten:{" "}
|
|
<a href={`${PORTAL}/abo-bedingungen.html#zusatzspeicher`} className={linkClass}>§ 10 der Vertragsbedingungen</a>.
|
|
</p>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Wechsel ins Wartungs-Abo</h2>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Braucht Ihre Website später dynamische Teile oder möchten Sie Pflege und Arbeitszeit dazubuchen, wechseln Sie
|
|
im Kundenportal unter „Verträge“ jederzeit ins{" "}
|
|
<Link to="/wartungs-abo" className={linkClass}>Wartungs-Abo</Link>, auch während der Mindestlaufzeit, solange
|
|
Ihr Hosting-Abo nicht gekündigt ist. Mit dem Wechsel beginnt eine neue Mindestlaufzeit von 12 Monaten.
|
|
Einzelheiten:{" "}
|
|
<a href={`${PORTAL}/abo-bedingungen.html#wechsel`} className={linkClass}>§ 9 der Vertragsbedingungen</a>.
|
|
</p>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">So schließen Sie das Abo ab</h2>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Das Hosting-Abo schließen Sie in unserem Kundenportal ab. Den Zugang richten wir Ihnen ein, sprechen Sie uns
|
|
einfach an. Nach der Anmeldung finden Sie das Angebot im Bereich „Verträge“. Dort sehen Sie danach jederzeit
|
|
Ihre Verträge und Rechnungen, buchen Zusatzspeicher und können uns Aufträge schicken.
|
|
</p>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Widerruf und Kündigung</h2>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Verbraucher können den Vertrag innerhalb von 14 Tagen widerrufen; das gilt für jede Bestellung, also für das
|
|
Abo, den Wechsel ins Wartungs-Abo und den Zusatzspeicher. Bereits gezahlte Beträge erstatten wir dann nach der{" "}
|
|
<a href={`${PORTAL}/abo-bedingungen.html#widerruf`} className={linkClass}>Widerrufsbelehrung</a>.
|
|
Kündigen können Sie online ohne Anmeldung oder per E-Mail.
|
|
</p>
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<a href={`${PORTAL}/kuendigen.html`}>
|
|
<Button variant="outline" className="rounded-full">Verträge hier kündigen</Button>
|
|
</a>
|
|
<a href={`${PORTAL}/widerrufen.html`}>
|
|
<Button variant="outline" className="rounded-full">Vertrag widerrufen</Button>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
{divider}
|
|
|
|
<section>
|
|
<h2 className="text-lg font-display font-medium uppercase tracking-tight mb-3">Unterlagen und Kontakt</h2>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
<a href={`${PORTAL}/abo-bedingungen.html`} className={linkClass}>Vertragsbedingungen der WEBklar-Abos</a>
|
|
{" · "}
|
|
<a href={`${PORTAL}/abo-bedingungen.html#hosting`} className={linkClass}>Leistungsbeschreibung A (Hosting-Abo)</a>
|
|
{" · "}
|
|
<a href={`${PORTAL}/WEBklar-Abo-Vertragsunterlagen.pdf`} className={linkClass}>Vertragsunterlagen als PDF</a>
|
|
{" · "}
|
|
<a href={`${PORTAL}/datenschutz.html`} className={linkClass}>Datenschutz</a>
|
|
<br />
|
|
WEBklar GbR, Am Schwimmbad 10, 67722 Winnweiler · Telefon 0176 23726355 · E-Mail support@webklar.com
|
|
</p>
|
|
</section>
|
|
</article>
|
|
|
|
<div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
|
|
<a href={`${PORTAL}/login.html`}>
|
|
<Button className="btn-minimal rounded-full">Zum Kundenportal</Button>
|
|
</a>
|
|
<Link to="/kontakt">
|
|
<Button variant="outline" className="rounded-full">Kontakt aufnehmen</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HostingAbo;
|