426 lines
15 KiB
Svelte
426 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { _ } from "svelte-i18n";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
|
|
import { Separator } from "$lib/components/ui/separator";
|
|
import PeonyBackground from "$lib/components/background/peony-background.svelte";
|
|
import Meta from "$lib/components/meta/meta.svelte";
|
|
|
|
let activeTab = $state("privacy");
|
|
</script>
|
|
|
|
<Meta title={$_("legal.title")} description={$_("legal.description")} />
|
|
|
|
<div
|
|
class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
|
|
>
|
|
<PeonyBackground />
|
|
|
|
<div class="container mx-auto py-20 relative px-4">
|
|
<div class="max-w-4xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="text-center mb-12">
|
|
<h1
|
|
class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
|
|
>
|
|
{$_("legal.title")}
|
|
</h1>
|
|
<p class="text-lg text-muted-foreground">
|
|
{$_("legal.description")}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Legal Tabs -->
|
|
<Tabs bind:value={activeTab} class="w-full">
|
|
<TabsList class="h-auto grid w-full grid-cols-1 md:grid-cols-4 mb-8">
|
|
<TabsTrigger value="privacy" class="flex items-center gap-2">
|
|
<span class="icon-[ri--shield-line] w-4 h-4"></span>
|
|
{$_("legal.privacy.title")}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="terms" class="flex items-center gap-2">
|
|
<span class="icon-[ri--file-list-3-line] w-4 h-4"></span>
|
|
{$_("legal.terms.title")}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="community" class="flex items-center gap-2">
|
|
<span class="icon-[ri--eye-line] w-4 h-4"></span>
|
|
{$_("legal.community.title")}
|
|
</TabsTrigger>
|
|
<TabsTrigger value="cookies" class="flex items-center gap-2">
|
|
<span class="icon-[ri--cake-3-line] w-4 h-4"></span>
|
|
{$_("legal.cookie.title")}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<!-- Privacy Policy -->
|
|
<TabsContent value="privacy">
|
|
<Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<span class="icon-[ri--shield-line] w-5 h-5 text-primary"></span>
|
|
{$_("legal.privacy.title")}
|
|
</CardTitle>
|
|
<p class="text-muted-foreground">
|
|
{$_("legal.privacy.last_updated")}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.privacy.information.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>
|
|
{@html $_("legal.privacy.information.text.0")}
|
|
</p>
|
|
<p>
|
|
{@html $_("legal.privacy.information.text.1")}
|
|
</p>
|
|
<!-- <p>
|
|
<strong>Usage Information:</strong>
|
|
We automatically collect information about how you use our services,
|
|
including your IP address, browser type, and device information.
|
|
</p> -->
|
|
<!-- <p>
|
|
<strong>Payment Information:</strong>
|
|
When you make purchases, we collect payment information through
|
|
secure third-party processors.
|
|
</p> -->
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.privacy.information_use.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>{$_("legal.privacy.information_use.subtitle")}</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.privacy.information_use.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.privacy.information_sharing.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>
|
|
{$_("legal.privacy.information_sharing.subtitle")}
|
|
</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.privacy.information_sharing.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.privacy.security.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.privacy.security.text.0")}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.privacy.rights.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>{$_("legal.privacy.rights.subtitle")}</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.privacy.rights.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<!-- Terms of Service -->
|
|
<TabsContent value="terms">
|
|
<Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<span class="icon-[ri--file-list-3-line] w-5 h-5 text-primary"></span>
|
|
{$_("legal.terms.title")}
|
|
</CardTitle>
|
|
<p class="text-muted-foreground">
|
|
{$_("legal.terms.last_updated")}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.terms.acceptance.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.terms.acceptance.text.0")}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.terms.age.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.terms.age.text.0")}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.terms.accounts.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>{$_("legal.terms.accounts.subtitle")}</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.terms.accounts.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.terms.content.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>
|
|
{$_("legal.terms.content.subtitle")}
|
|
</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.terms.content.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.terms.payment.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>{$_("legal.terms.payment.subtitle")}</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.terms.payment.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.terms.termination.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.terms.termination.text.0")}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<!-- Community Guidelines -->
|
|
<TabsContent value="community">
|
|
<Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<span class="icon-[ri--eye-line] w-5 h-5 text-primary"></span>
|
|
{$_("legal.community.title")}
|
|
</CardTitle>
|
|
<p class="text-muted-foreground">
|
|
{$_("legal.community.description")}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.community.values.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.community.values.text.0")}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.community.respect.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.community.respect.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.community.standards.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.community.standards.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.community.interaction.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.community.interaction.text.0")}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.community.enforcement.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.community.enforcement.text.0")}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<!-- Cookie Policy -->
|
|
<TabsContent value="cookies">
|
|
<Card class="bg-gradient-to-br from-card to-card/50 border-primary/20">
|
|
<CardHeader>
|
|
<CardTitle class="flex items-center gap-2">
|
|
<span class="icon-[ri--cake-3-line] w-5 h-5 text-primary"></span>
|
|
{$_("legal.cookie.title")}
|
|
</CardTitle>
|
|
<p class="text-muted-foreground">
|
|
{$_("legal.cookie.description")}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent class="space-y-6">
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.cookie.what.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.cookie.what.text.0")}
|
|
</p>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.cookie.types.title")}
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<h4 class="font-medium mb-2">
|
|
{$_("legal.cookie.types.essential.title")}
|
|
</h4>
|
|
<p class="text-muted-foreground text-sm">
|
|
{@html $_("legal.cookie.types.essential.text.0")}
|
|
</p>
|
|
</div>
|
|
<!-- <div>
|
|
<h4 class="font-medium mb-2">Performance Cookies</h4>
|
|
<p class="text-muted-foreground text-sm">
|
|
These cookies collect information about how visitors use
|
|
our website, helping us improve performance and user
|
|
experience.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium mb-2">Functionality Cookies</h4>
|
|
<p class="text-muted-foreground text-sm">
|
|
These cookies remember your preferences and settings to
|
|
provide a more personalized experience.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium mb-2">Analytics Cookies</h4>
|
|
<p class="text-muted-foreground text-sm">
|
|
These cookies help us understand how our website is being
|
|
used and how we can improve it.
|
|
</p>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.cookie.managing.title")}
|
|
</h3>
|
|
<div class="space-y-3 text-muted-foreground">
|
|
<p>{$_("legal.cookie.managing.subtitle")}</p>
|
|
<ul class="list-disc pl-6 space-y-1">
|
|
{@html $_("legal.cookie.managing.text.0")}
|
|
</ul>
|
|
<p>
|
|
{@html $_("legal.cookie.managing.text.1")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-3">
|
|
{$_("legal.cookie.third_party.title")}
|
|
</h3>
|
|
<p class="text-muted-foreground">
|
|
{@html $_("legal.cookie.third_party.text.0")}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<!-- Contact Information -->
|
|
<Card class="mt-8 bg-gradient-to-br from-card to-card/50 border-primary/20">
|
|
<CardContent class="p-6 text-center">
|
|
<h3 class="font-semibold mb-2">
|
|
{$_("legal.questions")}
|
|
</h3>
|
|
<p class="text-muted-foreground mb-4">
|
|
{$_("legal.questions_description")}
|
|
</p>
|
|
<a href="mailto:{$_('legal.questions_email')}" class="text-primary hover:underline"
|
|
>{$_("legal.questions_email")}</a
|
|
>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|