Archived
300 lines
17 KiB
TypeScript
300 lines
17 KiB
TypeScript
import { Link } from "react-router-dom";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ArrowLeft, FileText } from "lucide-react";
|
||
import { usePageMeta } from "@/hooks/use-page-meta";
|
||
|
||
const contractDivider = (
|
||
<div className="my-8 border-t border-border" aria-hidden />
|
||
);
|
||
|
||
const AGB = () => {
|
||
usePageMeta("AGB", "Allgemeine Geschäftsbedingungen der WEBklar GbR.");
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
{/* Header */}
|
||
<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-normal">
|
||
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 Content */}
|
||
<main className="pt-32 pb-24">
|
||
<div className="container mx-auto px-6">
|
||
<div className="max-w-3xl mx-auto">
|
||
{/* Page Header */}
|
||
<div className="mb-12">
|
||
<div className="label-tag mb-4 flex items-center gap-2">
|
||
<FileText className="w-4 h-4" />
|
||
Vertrag
|
||
</div>
|
||
<h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
|
||
Kaufvertrag – WEBklar
|
||
</h1>
|
||
<p className="text-muted-foreground text-lg mb-8">
|
||
(Modularer Projektvertrag)
|
||
</p>
|
||
<div className="text-muted-foreground space-y-1">
|
||
<p><strong className="text-foreground">zwischen</strong></p>
|
||
<p>WEBklar<br /><span className="text-sm">(im Folgenden „Anbieter“)</span></p>
|
||
<p className="pt-2"><strong className="text-foreground">und</strong></p>
|
||
<p>Kunde laut Angebot<br /><span className="text-sm">(im Folgenden „Kunde“)</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contract Content */}
|
||
<article className="space-y-8 text-foreground">
|
||
{/* 1. Vertragsgegenstand */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
1. Vertragsgegenstand
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Gegenstand dieses Vertrages ist die Erbringung der im Angebot definierten Leistungen.</li>
|
||
<li>Der Vertrag besteht aus diesem Grundvertrag sowie den ausgewählten Leistungsmodulen.</li>
|
||
<li>Maßgeblich ist das jeweils angenommene Angebot von WEBklar.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 2. Leistungsart */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
2. Leistungsart
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Sämtliche Leistungen von WEBklar stellen Dienst- und Entwicklungsleistungen dar.</li>
|
||
<li>Ein bestimmter wirtschaftlicher, technischer oder rechtlicher Erfolg wird nicht geschuldet.</li>
|
||
<li>WEBklar erbringt keinen laufenden Betrieb, sofern dieser nicht explizit vereinbart wurde.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 3. Leistungsmodul A – Webseite */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
|
||
3. Leistungsmodul A – Webseite (einmalig)
|
||
</h2>
|
||
<p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>WEBklar erstellt eine individuelle Webseite gemäß Angebot.</li>
|
||
<li>Die Umsetzung erfolgt nach den vom Kunden gelieferten Inhalten und Vorgaben.</li>
|
||
<li>Zusätzliche Leistungen wie Domain, Hosting, Wartung oder SEO sind nicht Bestandteil, sofern sie nicht gesondert beauftragt wurden.</li>
|
||
<li>Der Kunde ist nicht berechtigt, Änderungen am Quellcode selbst vorzunehmen.</li>
|
||
<li>Änderungen erfolgen ausschließlich durch WEBklar gegen gesonderte Vergütung.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 4. Leistungsmodul B – Automatisierung / Virtualisierung */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
|
||
4. Leistungsmodul B – Automatisierung / Virtualisierung (einmalig)
|
||
</h2>
|
||
<p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>WEBklar entwickelt individuelle Automatisierungen, Apps oder Virtualisierungssysteme.</li>
|
||
<li>Die Leistung stellt eine reine Entwicklungsleistung dar.</li>
|
||
<li>Optional kann eine Beratungsleistung Bestandteil des Projektes sein.</li>
|
||
<li>Ein laufender Betrieb, Monitoring oder Wartung ist nicht geschuldet, außer dies wurde explizit vereinbart.</li>
|
||
<li>Der Kunde entscheidet über Inhalte, Daten und Prozesse und trägt dafür die rechtliche Verantwortung.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 5. Leistungsmodul C – Hosting */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
|
||
5. Leistungsmodul C – Hosting
|
||
</h2>
|
||
<p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>
|
||
Hosting bietet WEBklar als Hosting-Abo an. Für das Hosting-Abo und das Wartungs-Abo gelten die{" "}
|
||
<a href="https://project.webklar.com/abo-bedingungen.html" className="text-foreground underline hover:no-underline">Vertragsbedingungen für die WEBklar-Abos</a>
|
||
{" "}mit Leistungsbeschreibungen; sie gehen diesen AGB vor.
|
||
</li>
|
||
<li>Bestehende Hosting-Verträge mit jährlicher Laufzeit behalten die bei ihrem Abschluss vereinbarten Bedingungen. Abweichend davon können Verbraucher solche Verträge nach einer automatischen Verlängerung jederzeit mit einer Frist von einem Monat kündigen.</li>
|
||
<li>WEBklar ist berechtigt, externe Anbieter (z. B. Rechenzentren) einzusetzen.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 6. Quellcode und Eigentum */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
6. Quellcode und Eigentum
|
||
</h2>
|
||
<div className="space-y-4 text-muted-foreground">
|
||
<div>
|
||
<h3 className="text-foreground font-medium mb-2">6.1 Webseite</h3>
|
||
<ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
|
||
<li>Der Kunde erhält ein einfaches, zeitlich unbegrenztes Nutzungsrecht an der fertigen Webseite.</li>
|
||
<li>Der Quellcode der Webseite wird nur auf ausdrückliche Anfrage und nach Vereinbarung herausgegeben.</li>
|
||
<li>Ohne Vereinbarung verbleibt der Quellcode bei WEBklar und wird archiviert.</li>
|
||
</ol>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-foreground font-medium mb-2">6.2 Apps, Automatisierungen und Backend</h3>
|
||
<ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
|
||
<li>Der Quellcode von Apps, Automatisierungen und Backend-Systemen verbleibt vollständig bei WEBklar.</li>
|
||
<li>Eine Herausgabe erfolgt ausschließlich nach gesonderter schriftlicher Vereinbarung.</li>
|
||
<li>Der Kunde erhält lediglich Zugriff auf die Bedienoberfläche bzw. das Frontend.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 7. Mitwirkungspflichten */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
7. Mitwirkungspflichten des Kunden
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Der Kunde stellt alle benötigten Inhalte, Daten und Freigaben rechtzeitig bereit.</li>
|
||
<li>Verzögerungen durch fehlende Mitwirkung gehen nicht zu Lasten von WEBklar.</li>
|
||
<li>WEBklar ist nicht verpflichtet, rechtliche Prüfungen der Inhalte vorzunehmen.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 8. Abnahme */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
8. Abnahme
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Nach Fertigstellung wird dem Kunden die Leistung zur Abnahme bereitgestellt.</li>
|
||
<li>Erfolgt innerhalb von 14 Tagen keine Rückmeldung, gilt die Leistung als abgenommen.</li>
|
||
<li>Nach Abnahme sind nur noch kostenpflichtige Änderungen möglich.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 9. Vergütung und Zahlung */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
9. Vergütung und Zahlung
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Die Vergütung ergibt sich aus dem Angebot.</li>
|
||
<li>
|
||
Wird nach Aufwand abgerechnet, erfasst WEBklar die Arbeitszeit je Arbeitsschritt in Schritten von
|
||
15 Minuten; angefangene 15 Minuten werden aufgerundet. Wirkt eine weitere Person unterstützend mit,
|
||
rechnet WEBklar für sie die Hälfte der Arbeitszeit des Arbeitsschritts an, aufgerundet auf volle
|
||
15 Minuten; bei mehreren unterstützenden Personen gilt das für jede. Jeder Arbeitsschritt und jede
|
||
Unterstützung ist im Kundenportal einsehbar.
|
||
</li>
|
||
<li>Projektleistungen sind nach Vereinbarung fällig.</li>
|
||
<li>Für die Abos gelten die Vertragsbedingungen für die WEBklar-Abos.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 10. Zahlungsverzug */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
10. Zahlungsverzug
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Bei Zahlungsverzug erfolgen bis zu zwei Mahnungen.</li>
|
||
<li>Danach ist WEBklar berechtigt:
|
||
<ul className="list-disc list-inside mt-2 space-y-1 pl-2">
|
||
<li>Leistungen zu sperren</li>
|
||
<li>Verzugszinsen zu berechnen</li>
|
||
<li>den Vertrag außerordentlich zu kündigen</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 11. Haftung */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
11. Haftung
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>WEBklar haftet unbeschränkt bei Vorsatz und grober Fahrlässigkeit, bei Verletzung von Leben, Körper oder Gesundheit, nach dem Produkthaftungsgesetz und soweit WEBklar eine Garantie übernommen hat.</li>
|
||
<li>Bei leicht fahrlässiger Verletzung einer wesentlichen Vertragspflicht haftet WEBklar nur für den vertragstypischen, vorhersehbaren Schaden. Wesentlich sind Pflichten, deren Erfüllung die ordnungsgemäße Durchführung des Vertrags überhaupt erst ermöglicht und auf deren Einhaltung der Kunde regelmäßig vertrauen darf. Im Übrigen ist die Haftung für leichte Fahrlässigkeit ausgeschlossen.</li>
|
||
<li>Der Kunde bewahrt Kopien der Inhalte und Daten auf, die er WEBklar übergibt oder selbst einpflegt. Für den Verlust solcher Inhalte und Daten haftet WEBklar außer in den Fällen von Absatz 1 nur in Höhe des Aufwands, der für ihre Wiederherstellung nötig gewesen wäre, wenn der Kunde diese Kopien aufbewahrt hätte.</li>
|
||
<li>Diese Regeln gelten auch zugunsten der Mitarbeiter und Beauftragten von WEBklar.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 12. Kündigung */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
12. Kündigung
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Laufzeitverträge können zum Ende der jeweiligen Laufzeit gekündigt werden. Laufzeit und Kündigung der Abos richten sich nach den Vertragsbedingungen für die WEBklar-Abos.</li>
|
||
<li>Das Recht zur außerordentlichen Kündigung bleibt unberührt.</li>
|
||
</ol>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 13. Referenzen */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
13. Referenzen
|
||
</h2>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
WEBklar darf das Projekt nur nach ausdrücklicher Zustimmung des Kunden als Referenz verwenden.
|
||
</p>
|
||
</section>
|
||
{contractDivider}
|
||
|
||
{/* 14. Schlussbestimmungen */}
|
||
<section>
|
||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||
14. Schlussbestimmungen
|
||
</h2>
|
||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||
<li>Es gilt deutsches Recht.</li>
|
||
<li>Gerichtsstand ist der Sitz von WEBklar, soweit zulässig.</li>
|
||
<li>Sollten einzelne Bestimmungen unwirksam sein, bleibt der Vertrag im Übrigen wirksam.</li>
|
||
</ol>
|
||
</section>
|
||
</article>
|
||
|
||
{/* Back / Contact */}
|
||
<div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
|
||
<Link to="/">
|
||
<Button variant="outline" className="rounded-full">
|
||
Zur Startseite
|
||
</Button>
|
||
</Link>
|
||
<Link to="/kontakt">
|
||
<Button className="btn-minimal rounded-full">
|
||
Kontakt
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AGB;
|