A structured layout for rendering a terms-of-service or privacy-policy document with a summary, numbered sections with a table of contents, and a visible revision history.
import LegalDoc from "@/components/ui/legal-doc";
export default function LegalDocDemo() {
return (
<div className="w-full min-h-screen bg-background p-10">
<LegalDoc
title="Terms of Service"
entity="Acme Cloud, Inc."
updated="March 3, 2025"
effective="April 1, 2025"
summary="These terms describe what you can do with Acme Cloud, what we can do with it, and what happens if either of us gets it wrong. Reading them is the fastest way to find out before it matters."
sections={[
{
id: "acceptance",
title: "Acceptance of these terms",
body: (
<p>
By creating an account or using Acme Cloud you agree to these
terms. If you are using the service on behalf of an
organization, you are agreeing on its behalf and confirming you
have the authority to do so.
</p>
),
},
{
id: "accounts",
title: "Accounts and access",
body: (
<>
<p>
You are responsible for keeping your credentials secret and
for activity that happens under your account.
</p>
<ul>
<li>
Tell us immediately if you suspect unauthorized access.
</li>
<li>
Do not share login credentials across unrelated people.
</li>
</ul>
</>
),
},
{
id: "data",
title: "Your data",
body: (
<p>
You keep ownership of anything you upload. We process it only to
run the service and never sell it to third parties.
</p>
),
},
{
id: "termination",
title: "Termination",
body: (
<p>
Either of us may end this agreement at any time. We will give 30
days' notice before closing an account for inactivity, and
immediate notice if we close one for a violation of these terms.
</p>
),
},
]}
history={[
{
date: "Mar 3, 2025",
what: "Clarified how the 30-day inactivity notice works.",
},
{ date: "Nov 18, 2024", what: "Added the data retention section." },
{ date: "Jun 2, 2024", what: "Initial version." },
]}
contact="Questions about these terms? Write to legal@acmecloud.example."
/>
</div>
);
}