LukeParke/Sveltey
1
0
Fork 0
mirror of https://github.com/LukeHagar/Sveltey.git synced 2025-12-07 12:47:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling updates, svelte 5 syntax, adjusting content and notices

Browse Source
This commit is contained in:
Luke Hagar
2025-05-28 09:48:39 -05:00
parent a1033c6a47
commit 29bc4548f3
6 changed files with 627 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/lib/components/Navigation.svelte
View File

8
src/lib/components/ThemeSwitch.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { Palette } from 'lucide-svelte'; import { Palette } from '@lucide/svelte';
// Available color themes // Available color themes
const colorThemes = [ const colorThemes = [
@@ -37,7 +37,7 @@
// Load theme from localStorage on mount // Load theme from localStorage on mount
onMount(() => { onMount(() => {
if (browser) { if (browser) {
const savedColorTheme = localStorage.getItem('colorTheme') || 'skeleton'; const savedColorTheme = localStorage.getItem('colorTheme') || 'legacy';
const savedDarkMode = localStorage.getItem('darkMode') !== 'false'; // default to true const savedDarkMode = localStorage.getItem('darkMode') !== 'false'; // default to true
currentColorTheme = savedColorTheme; currentColorTheme = savedColorTheme;
@@ -87,14 +87,14 @@
const savedDarkMode = localStorage.getItem('darkMode'); const savedDarkMode = localStorage.getItem('darkMode');
if (!savedColorTheme) { if (!savedColorTheme) {
localStorage.setItem('colorTheme', 'skeleton'); localStorage.setItem('colorTheme', 'legacy');
} }
if (!savedDarkMode) { if (!savedDarkMode) {
localStorage.setItem('darkMode', 'true'); localStorage.setItem('darkMode', 'true');
} }
if (!savedColorTheme || !savedDarkMode) { if (!savedColorTheme || !savedDarkMode) {
applyTheme(savedColorTheme || 'skeleton', savedDarkMode !== 'false'); applyTheme(savedColorTheme || 'legacy', savedDarkMode !== 'false');
} }
} }
}); });

8
src/routes/+error.svelte
View File

@@ -2,8 +2,8 @@
import { page } from '$app/state'; import { page } from '$app/state';
import { AlertTriangle, Home, RefreshCw, ArrowLeft } from 'lucide-svelte'; import { AlertTriangle, Home, RefreshCw, ArrowLeft } from 'lucide-svelte';
$: status = $page.status; let status = $derived(page.status);
$: message = $page.error?.message; let message = $derived(page.error?.message);
const getErrorInfo = (status: number) => { const getErrorInfo = (status: number) => {
switch (status) { switch (status) {
@@ -38,7 +38,7 @@
} }
}; };
$: errorInfo = getErrorInfo(status); let errorInfo = $derived(getErrorInfo(status));
</script> </script>
<svelte:head> <svelte:head>
@@ -50,7 +50,7 @@
<div class="max-w-2xl mx-auto text-center space-y-8"> <div class="max-w-2xl mx-auto text-center space-y-8">
<!-- Error Icon and Status --> <!-- Error Icon and Status -->
<div class="space-y-4"> <div class="space-y-4">
<svelte:component this={errorInfo.icon} class="size-20 mx-auto {errorInfo.color}" /> <errorInfo.icon class="size-20 mx-auto {errorInfo.color}" />
<div class="space-y-2"> <div class="space-y-2">
<h1 class="h1"> <h1 class="h1">
<span class="text-7xl font-bold {errorInfo.color}">{status}</span> <span class="text-7xl font-bold {errorInfo.color}">{status}</span>

2
src/routes/auth/+page.svelte
View File

@@ -317,7 +317,7 @@
<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div> <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-current"></div>
Connecting... Connecting...
{:else} {:else}
<svelte:component this={provider.icon} class="size-4" /> <provider.icon class="size-4" />
{provider.description} {provider.description}
{/if} {/if}
</button> </button>

348
src/routes/privacy/+page.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { Shield, Calendar, Mail, FileText } from 'lucide-svelte'; import { Shield, Calendar, Mail, FileText, Eye, Lock, Share, Cookie, Globe, UserCheck, AlertTriangle, Database } from '@lucide/svelte';
const lastUpdated = 'May 27, 2025'; const lastUpdated = 'May 27, 2025';
</script> </script>
@@ -9,176 +9,322 @@
<meta name="description" content="Learn how we collect, use, and protect your personal information in our comprehensive privacy policy." /> <meta name="description" content="Learn how we collect, use, and protect your personal information in our comprehensive privacy policy." />
</svelte:head> </svelte:head>
<aside class="bg-primary-50-950 p-8 text-center"> <!-- Notice Banner -->
This privacy policy is a placeholder, and only an example of styling one for the template. <div class="bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800 border-b">
</aside> <div class="container mx-auto px-6 py-4">
<div class="text-warning-800 dark:text-warning-200 flex items-center gap-3">
<AlertTriangle class="size-5 flex-shrink-0" />
<p class="text-sm">
<strong>Template Notice:</strong> This privacy policy is a placeholder example for styling
purposes only.
</p>
</div>
</div>
</div>
<div class="container mx-auto py-20"> <div class="container mx-auto py-20">
<div class="max-w-4xl mx-auto space-y-12"> <div class="max-w-4xl mx-auto space-y-12">
<!-- Header --> <!-- Header Section -->
<header class="text-center space-y-4"> <header class="text-center space-y-6">
<div class="flex items-center justify-center gap-2 mb-4"> <div class="inline-flex items-center justify-center p-3 bg-primary-500/10 rounded-full mb-4">
<Shield class="size-8 text-primary-500" /> <Shield class="size-8 text-primary-500" />
<h1 class="h1">Privacy <span class="text-primary-500">Policy</span></h1>
</div> </div>
<div class="space-y-4">
<h1 class="h1">Privacy <span class="text-primary-500">Policy</span></h1>
<p class="text-xl opacity-75 max-w-2xl mx-auto"> <p class="text-xl opacity-75 max-w-2xl mx-auto">
We take your privacy seriously. This policy explains how we collect, use, and protect your personal information. We take your privacy seriously. This policy explains how we collect, use, and protect your personal information.
</p> </p>
</div>
<div class="flex items-center justify-center gap-2 text-sm opacity-50"> <div class="flex items-center justify-center gap-2 text-sm opacity-50">
<Calendar class="size-4" /> <Calendar class="size-4" />
<span>Last updated: {lastUpdated}</span> <span>Last updated: {lastUpdated}</span>
</div> </div>
</header> </header>
<!-- Content --> <!-- Quick Navigation -->
<div class="prose prose-lg max-w-none"> <div class="card preset-outlined-surface-200-800 p-6">
<div class="card text-surface-950-50 p-8 space-y-8"> <h2 class="h4 mb-4 flex items-center gap-2">
<section class="space-y-4">
<h2 class="h3 flex items-center gap-2">
<FileText class="size-5 text-primary-500" /> <FileText class="size-5 text-primary-500" />
Information We Collect Quick Navigation
</h2> </h2>
<p class="opacity-75"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-sm">
<a href="#collection" class="btn preset-ghost-surface-200-800 justify-start">Information Collection</a>
<a href="#usage" class="btn preset-ghost-surface-200-800 justify-start">How We Use Data</a>
<a href="#sharing" class="btn preset-ghost-surface-200-800 justify-start">Information Sharing</a>
<a href="#security" class="btn preset-ghost-surface-200-800 justify-start">Data Security</a>
<a href="#rights" class="btn preset-ghost-surface-200-800 justify-start">Your Rights</a>
<a href="#cookies" class="btn preset-ghost-surface-200-800 justify-start">Cookies & Tracking</a>
</div>
</div>
<!-- Privacy Highlights -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="card preset-filled-success-500 p-6 text-center text-white">
<Lock class="size-8 mx-auto mb-3" />
<h3 class="font-semibold mb-2">Secure</h3>
<p class="text-sm opacity-90">Data encrypted in transit and at rest</p>
</div>
<div class="card preset-filled-primary-500 p-6 text-center text-white">
<UserCheck class="size-8 mx-auto mb-3" />
<h3 class="font-semibold mb-2">Transparent</h3>
<p class="text-sm opacity-90">Clear policies on data usage</p>
</div>
<div class="card preset-filled-secondary-500 p-6 text-center text-white">
<Shield class="size-8 mx-auto mb-3" />
<h3 class="font-semibold mb-2">Compliant</h3>
<p class="text-sm opacity-90">GDPR and privacy law compliant</p>
</div>
</div>
<!-- Main Content -->
<div class="space-y-8">
<!-- Information We Collect -->
<section id="collection" class="card preset-outlined-surface-200-800 p-8 space-y-6">
<header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
<div class="p-2 bg-primary-500/10 rounded-lg">
<Database class="size-5 text-primary-500" />
</div>
<h2 class="h3">Information We Collect</h2>
</header>
<div class="space-y-6">
<p class="opacity-75 leading-relaxed">
We collect information you provide directly to us, such as when you create an account, We collect information you provide directly to us, such as when you create an account,
update your profile, or contact us for support. update your profile, or contact us for support.
</p> </p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="space-y-4">
<h4 class="font-semibold text-primary-500 flex items-center gap-2">
<UserCheck class="size-4" />
Personal Information
</h4>
<div class="space-y-3"> <div class="space-y-3">
<h4 class="font-semibold h4">Personal Information:</h4> {#each [
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> 'Name and email address',
<li>Name and email address</li> 'Profile information and preferences',
<li>Profile information and preferences</li> 'Payment and billing information',
<li>Payment and billing information</li> 'Communication history with our support team'
<li>Communication history with our support team</li> ] as item}
</ul> <div class="flex items-start gap-3 p-3 bg-surface-50-900 rounded-lg">
<Eye class="size-4 text-primary-500 flex-shrink-0 mt-0.5" />
<span class="text-sm opacity-75">{item}</span>
</div> </div>
{/each}
</div>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-secondary-500 flex items-center gap-2">
<Globe class="size-4" />
Usage Information
</h4>
<div class="space-y-3"> <div class="space-y-3">
<h4 class="font-semibold h4">Usage Information:</h4> {#each [
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> 'Log data and device information',
<li>Log data and device information</li> 'Usage patterns and feature interactions',
<li>Usage patterns and feature interactions</li> 'Performance and error data'
<li>Performance and error data</li> ] as item}
</ul> <div class="flex items-start gap-3 p-3 bg-surface-50-900 rounded-lg">
<Eye class="size-4 text-secondary-500 flex-shrink-0 mt-0.5" />
<span class="text-sm opacity-75">{item}</span>
</div>
{/each}
</div>
</div>
</div>
</div> </div>
</section> </section>
<section class="space-y-4"> <!-- How We Use Your Information -->
<h2 class="h3 flex items-center gap-2"> <section id="usage" class="card preset-outlined-surface-200-800 p-8 space-y-6">
<Shield class="size-5 text-primary-500" /> <header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
How We Use Your Information <div class="p-2 bg-secondary-500/10 rounded-lg">
</h2> <FileText class="size-5 text-secondary-500" />
<p class="opacity-75"> </div>
<h2 class="h3">How We Use Your Information</h2>
</header>
<div class="space-y-6">
<p class="opacity-75 leading-relaxed">
We use the information we collect to provide, maintain, and improve our services. We use the information we collect to provide, maintain, and improve our services.
</p> </p>
<ul class="list-disc list-inside space-y-2 opacity-75 ml-4">
<li>Provide and operate our SaaS platform</li> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<li>Process transactions and send related information</li> {#each [
<li>Send technical notices and support messages</li> 'Provide and operate our SaaS platform',
<li>Respond to customer service requests</li> 'Process transactions and send related information',
<li>Improve our services and develop new features</li> 'Send technical notices and support messages',
<li>Monitor usage and prevent fraud or abuse</li> 'Respond to customer service requests',
</ul> 'Improve our services and develop new features',
'Monitor usage and prevent fraud or abuse'
] as usage}
<div class="flex items-start gap-3 p-4 bg-primary-50 dark:bg-primary-950 rounded-lg border border-primary-200 dark:border-primary-800">
<Shield class="size-4 text-primary-500 flex-shrink-0 mt-1" />
<span class="text-sm text-primary-700 dark:text-primary-300">{usage}</span>
</div>
{/each}
</div>
</div>
</section> </section>
<section class="space-y-4"> <!-- Information Sharing -->
<section id="sharing" class="card preset-outlined-surface-200-800 p-8 space-y-6">
<header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
<div class="p-2 bg-warning-500/10 rounded-lg">
<Share class="size-5 text-warning-500" />
</div>
<h2 class="h3">Information Sharing</h2> <h2 class="h3">Information Sharing</h2>
<p class="opacity-75"> </header>
<div class="space-y-6">
<div class="bg-warning-50 dark:bg-warning-950 p-6 rounded-lg border border-warning-200 dark:border-warning-800">
<p class="text-warning-700 dark:text-warning-300 font-medium mb-3">
We do not sell, trade, or otherwise transfer your personal information to third parties We do not sell, trade, or otherwise transfer your personal information to third parties
except as described in this policy. except as described in this policy.
</p> </p>
</div>
<div class="space-y-4">
<h4 class="font-semibold text-warning-500 flex items-center gap-2">
<Share class="size-4" />
We may share your information:
</h4>
<div class="space-y-3"> <div class="space-y-3">
<h4 class="font-semibold h4">We may share your information:</h4> {#each [
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> 'With service providers who assist our operations',
<li>With service providers who assist our operations</li> 'To comply with legal obligations',
<li>To comply with legal obligations</li> 'To protect our rights and prevent fraud',
<li>To protect our rights and prevent fraud</li> 'In connection with a business transfer'
<li>In connection with a business transfer</li> ] as sharing}
</ul> <div class="flex items-start gap-2">
<div class="w-2 h-2 bg-warning-500 rounded-full flex-shrink-0 mt-2"></div>
<span class="text-sm opacity-75">{sharing}</span>
</div>
{/each}
</div>
</div>
</div> </div>
</section> </section>
<section class="space-y-4"> <!-- Additional Sections in Grid -->
<h2 class="h3">Data Security</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<p class="opacity-75"> <!-- Data Security -->
We implement appropriate security measures to protect your personal information against <div id="security" class="card preset-outlined-surface-200-800 p-6 space-y-4">
unauthorized access, alteration, disclosure, or destruction. <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
<Lock class="size-5 text-success-500" />
<h3 class="h4">Data Security</h3>
</header>
<p class="opacity-75 text-sm leading-relaxed mb-4">
We implement appropriate security measures to protect your personal information.
</p> </p>
<ul class="list-disc list-inside space-y-2 opacity-75 ml-4"> <div class="space-y-2">
<li>Encryption of data in transit and at rest</li> {#each [
<li>Regular security assessments and monitoring</li> 'Encryption of data in transit and at rest',
<li>Access controls and authentication measures</li> 'Regular security assessments',
<li>Employee training on data protection</li> 'Access controls and authentication',
</ul> 'Employee training on data protection'
</section> ] as security}
<div class="flex items-start gap-2">
<Lock class="size-3 text-success-500 flex-shrink-0 mt-1" />
<span class="text-xs opacity-75">{security}</span>
</div>
{/each}
</div>
</div>
<section class="space-y-4"> <!-- Your Rights -->
<h2 class="h3">Your Rights and Choices</h2> <div id="rights" class="card preset-outlined-surface-200-800 p-6 space-y-4">
<p class="opacity-75"> <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
<UserCheck class="size-5 text-primary-500" />
<h3 class="h4">Your Rights</h3>
</header>
<p class="opacity-75 text-sm leading-relaxed mb-4">
You have certain rights regarding your personal information: You have certain rights regarding your personal information:
</p> </p>
<ul class="list-disc list-inside space-y-2 opacity-75 ml-4"> <div class="space-y-2">
<li><strong class="font-semibold text-primary-500">Access:</strong> Request a copy of your personal information</li> {#each [
<li><strong class="font-semibold text-primary-500">Update:</strong> Correct inaccurate or incomplete information</li> { right: 'Access', description: 'Request a copy of your data' },
<li><strong class="font-semibold text-primary-500">Delete:</strong> Request deletion of your personal information</li> { right: 'Update', description: 'Correct inaccurate information' },
<li><strong class="font-semibold text-primary-500">Portability:</strong> Receive your data in a portable format</li> { right: 'Delete', description: 'Request data deletion' },
<li><strong class="font-semibold text-primary-500">Opt-out:</strong> Unsubscribe from marketing communications</li> { right: 'Portability', description: 'Receive data in portable format' }
</ul> ] as { right, description }}
</section> <div class="flex items-start gap-2">
<UserCheck class="size-3 text-primary-500 flex-shrink-0 mt-1" />
<div>
<span class="text-xs font-semibold text-primary-500">{right}:</span>
<span class="text-xs opacity-75"> {description}</span>
</div>
</div>
{/each}
</div>
</div>
<section class="space-y-4"> <!-- Data Retention -->
<h2 class="h3">Data Retention</h2> <div class="card preset-outlined-surface-200-800 p-6 space-y-4">
<p class="opacity-75"> <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
<Database class="size-5 text-tertiary-500" />
<h3 class="h4">Data Retention</h3>
</header>
<p class="opacity-75 text-sm leading-relaxed">
We retain your personal information for as long as necessary to provide our services We retain your personal information for as long as necessary to provide our services
and fulfill the purposes outlined in this policy, unless a longer retention period and fulfill the purposes outlined in this policy, unless a longer retention period
is required by law. is required by law.
</p> </p>
</section> </div>
<section class="space-y-4"> <!-- Cookies and Tracking -->
<h2 class="h3">Cookies and Tracking</h2> <div id="cookies" class="card preset-outlined-surface-200-800 p-6 space-y-4">
<p class="opacity-75"> <header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
<Cookie class="size-5 text-warning-500" />
<h3 class="h4">Cookies & Tracking</h3>
</header>
<p class="opacity-75 text-sm leading-relaxed">
We use cookies and similar technologies to enhance your experience, analyze usage, We use cookies and similar technologies to enhance your experience, analyze usage,
and provide personalized content. and provide personalized content. You can control cookie settings through your browser.
</p> </p>
<p class="opacity-75"> </div>
You can control cookie settings through your browser preferences. However, </div>
disabling cookies may affect the functionality of our service.
</p>
</section>
<section class="space-y-4"> <!-- International Transfers & Changes -->
<h2 class="h3">International Data Transfers</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<p class="opacity-75"> <div class="card preset-outlined-surface-200-800 p-6 space-y-4">
<header class="flex items-center gap-2 pb-3 border-b border-surface-300-600">
<Globe class="size-5 text-secondary-500" />
<h3 class="h4">International Data Transfers</h3>
</header>
<p class="opacity-75 text-sm leading-relaxed">
Your information may be transferred to and processed in countries other than your own. Your information may be transferred to and processed in countries other than your own.
We ensure appropriate safeguards are in place to protect your data. We ensure appropriate safeguards are in place to protect your data.
</p> </p>
</section> </div>
<section class="space-y-4"> <div class="card preset-outlined-primary-500 p-6 space-y-4">
<h2 class="h3">Changes to This Policy</h2> <header class="flex items-center gap-2 pb-3 border-b border-primary-300">
<p class="opacity-75"> <Calendar class="size-5 text-primary-500" />
<h3 class="h4 text-primary-500">Changes to This Policy</h3>
</header>
<p class="text-sm opacity-75">
We may update this privacy policy from time to time. We will notify you of any We may update this privacy policy from time to time. We will notify you of any
material changes by posting the new policy on this page and updating the material changes by posting the new policy on this page and updating the
"last updated" date. "last updated" date.
</p> </p>
</section> </div>
</div> </div>
</div> </div>
<!-- Contact Information --> <!-- Contact CTA -->
<div class="card preset-filled-primary-500 p-8 text-center"> <div class="card preset-filled-primary-500 p-8 text-center text-white">
<div class="flex items-center justify-center gap-2 mb-4"> <div class="flex items-center justify-center gap-2 mb-4">
<Mail class="size-6" /> <Mail class="size-6" />
<h2 class="h3">Questions About Privacy?</h2> <h2 class="h3">Questions About Privacy?</h2>
</div> </div>
<p class="opacity-90 mb-6"> <p class="opacity-90 mb-6 max-w-2xl mx-auto">
If you have any questions about this privacy policy or our data practices, If you have any questions about this privacy policy or our data practices,
please don't hesitate to contact us. please don't hesitate to contact us. We're committed to protecting your privacy.
</p> </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center"> <div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="/contact" class="btn preset-filled-surface-200-800"> <a href="/contact" class="btn preset-filled-surface-50 text-primary-500 hover:bg-surface-100">
Contact Us Contact Us
</a> </a>
<a href="mailto:privacy@sassy.dev" class="btn preset-ghost-surface-200-800"> <a href="mailto:privacy@sassy.dev" class="btn preset-outlined-surface-50 text-white border-white/30 hover:bg-white/10">
privacy@sassy.dev privacy@sassy.dev
</a> </a>
</div> </div>

473
src/routes/terms/+page.svelte
View File

@@ -1,229 +1,372 @@
<script lang="ts"> <script lang="ts">
import { FileText, Calendar, Mail, Scale } from 'lucide-svelte'; import {
FileText,
Calendar,
Mail,
Scale,
Check,
AlertTriangle,
CreditCard,
Shield,
Users,
Globe,
Gavel,
FileX
} from '@lucide/svelte';
const lastUpdated = 'December 15, 2024'; const lastUpdated = 'May 28, 2025';
</script> </script>
<svelte:head> <svelte:head>
<title>Terms of Service - User Agreement</title> <title>Terms of Service - User Agreement</title>
<meta name="description" content="Read our terms of service to understand your rights and obligations when using our SaaS platform." /> <meta
name="description"
content="Read our terms of service to understand your rights and obligations when using our SaaS platform."
/>
</svelte:head> </svelte:head>
<aside class="bg-primary-50-950 p-8 text-center"> <!-- Notice Banner -->
These terms of service are a placeholder, and only an example of styling one for the template. <div class="bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800 border-b">
</aside> <div class="container mx-auto px-6 py-4">
<div class="text-warning-800 dark:text-warning-200 flex items-center gap-3">
<AlertTriangle class="size-5 flex-shrink-0" />
<p class="text-sm">
<strong>Template Notice:</strong> These terms of service are a placeholder example for styling
purposes only.
</p>
</div>
</div>
</div>
<div class="container mx-auto py-20"> <div class="container mx-auto py-20">
<div class="max-w-4xl mx-auto space-y-12"> <div class="mx-auto max-w-4xl space-y-12">
<!-- Header --> <!-- Header Section -->
<header class="text-center space-y-4"> <header class="space-y-6 text-center">
<div class="flex items-center justify-center gap-2 mb-4"> <div class="bg-primary-500/10 mb-4 inline-flex items-center justify-center rounded-full p-3">
<Scale class="size-8 text-primary-500" /> <Scale class="text-primary-500 size-8" />
<h1 class="h1">Terms of <span class="text-primary-500">Service</span></h1>
</div> </div>
<p class="text-xl opacity-75 max-w-2xl mx-auto"> <div class="space-y-4">
These terms govern your use of our platform. Please read them carefully before using our services. <h1 class="h1">Terms of <span class="text-primary-500">Service</span></h1>
<p class="mx-auto max-w-2xl text-xl opacity-75">
These terms govern your use of our platform. Please read them carefully before using our
services.
</p> </p>
</div>
<div class="flex items-center justify-center gap-2 text-sm opacity-50"> <div class="flex items-center justify-center gap-2 text-sm opacity-50">
<Calendar class="size-4" /> <Calendar class="size-4" />
<span>Last updated: {lastUpdated}</span> <span>Last updated: {lastUpdated}</span>
</div> </div>
</header> </header>
<!-- Content --> <!-- Quick Navigation -->
<div class="prose prose-lg max-w-none"> <div class="card preset-outlined-surface-200-800 p-6">
<div class="card preset-outlined-surface-200-800 p-8 space-y-8"> <h2 class="h4 mb-4 flex items-center gap-2">
<section class="space-y-4"> <FileText class="text-primary-500 size-5" />
<h2 class="h3 flex items-center gap-2"> Quick Navigation
<FileText class="size-5 text-primary-500" />
Acceptance of Terms
</h2> </h2>
<p class="opacity-75"> <div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2 lg:grid-cols-3">
<a href="#acceptance" class="btn preset-ghost-surface-200-800 justify-start"
>Acceptance of Terms</a
>
<a href="#service" class="btn preset-ghost-surface-200-800 justify-start"
>Service Description</a
>
<a href="#accounts" class="btn preset-ghost-surface-200-800 justify-start">User Accounts</a>
<a href="#usage" class="btn preset-ghost-surface-200-800 justify-start">Acceptable Use</a>
<a href="#payment" class="btn preset-ghost-surface-200-800 justify-start">Payment Terms</a>
<a href="#privacy" class="btn preset-ghost-surface-200-800 justify-start">Data & Privacy</a>
</div>
</div>
<!-- Main Content -->
<div class="space-y-8">
<!-- Acceptance of Terms -->
<section id="acceptance" class="card preset-outlined-surface-200-800 space-y-6 p-8">
<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
<div class="bg-primary-500/10 rounded-lg p-2">
<FileText class="text-primary-500 size-5" />
</div>
<h2 class="h3">Acceptance of Terms</h2>
</header>
<div class="space-y-4">
<p class="leading-relaxed opacity-75">
By accessing or using our SaaS platform ("Service"), you agree to be bound by these By accessing or using our SaaS platform ("Service"), you agree to be bound by these
Terms of Service ("Terms"). If you disagree with any part of these terms, you may not access the Service. Terms of Service ("Terms"). If you disagree with any part of these terms, you may not
access the Service.
</p> </p>
<div
class="bg-primary-50 dark:bg-primary-950 border-primary-200 dark:border-primary-800 rounded-lg border p-4"
>
<p class="text-primary-700 dark:text-primary-300 flex items-start gap-2 text-sm">
<Check class="mt-0.5 size-4 flex-shrink-0" />
By creating an account, you confirm that you have read, understood, and agree to these
terms.
</p>
</div>
</div>
</section> </section>
<section class="space-y-4"> <!-- Description of Service -->
<section id="service" class="card preset-outlined-surface-200-800 space-y-6 p-8">
<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
<div class="bg-secondary-500/10 rounded-lg p-2">
<Globe class="text-secondary-500 size-5" />
</div>
<h2 class="h3">Description of Service</h2> <h2 class="h3">Description of Service</h2>
<p class="opacity-75"> </header>
<div class="space-y-4">
<p class="leading-relaxed opacity-75">
Our platform provides software-as-a-service solutions including but not limited to: Our platform provides software-as-a-service solutions including but not limited to:
</p> </p>
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<li>User authentication and account management</li> <div class="space-y-3">
<li>Data storage and processing capabilities</li> {#each ['User authentication and account management', 'Data storage and processing capabilities'] as feature}
<li>API access and integrations</li> <div class="bg-surface-50-900 flex items-start gap-3 rounded-lg p-3">
<li>Customer support and documentation</li> <Check class="text-success-500 mt-0.5 size-4 flex-shrink-0" />
</ul> <span class="text-sm opacity-75">{feature}</span>
</div>
{/each}
</div>
<div class="space-y-3">
{#each ['API access and integrations', 'Customer support and documentation'] as feature}
<div class="bg-surface-50-900 flex items-start gap-3 rounded-lg p-3">
<Check class="text-success-500 mt-0.5 size-4 flex-shrink-0" />
<span class="text-sm opacity-75">{feature}</span>
</div>
{/each}
</div>
</div>
</div>
</section> </section>
<section class="space-y-4"> <!-- User Accounts -->
<section id="accounts" class="card preset-outlined-surface-200-800 space-y-6 p-8">
<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
<div class="bg-tertiary-500/10 rounded-lg p-2">
<Users class="text-tertiary-500 size-5" />
</div>
<h2 class="h3">User Accounts</h2> <h2 class="h3">User Accounts</h2>
<div class="space-y-3"> </header>
<h4 class="font-semibold">Account Creation</h4> <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<p class="opacity-75"> <div class="space-y-4">
You must provide accurate and complete information when creating an account. <h4 class="text-primary-500 flex items-center gap-2 font-semibold">
You are responsible for maintaining the confidentiality of your account credentials. <Check class="size-4" />
Account Creation
</h4>
<p class="text-sm leading-relaxed opacity-75">
You must provide accurate and complete information when creating an account. You are
responsible for maintaining the confidentiality of your account credentials.
</p> </p>
</div>
<h4 class="font-semibold">Account Responsibility</h4> <div class="space-y-4">
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> <h4 class="text-primary-500 flex items-center gap-2 font-semibold">
<li>You are responsible for all activities under your account</li> <Shield class="size-4" />
<li>Notify us immediately of any unauthorized use</li> Account Responsibility
<li>Maintain accurate and up-to-date account information</li> </h4>
<li>Comply with all applicable laws and regulations</li> <div class="space-y-2">
</ul> {#each ['You are responsible for all activities under your account', 'Notify us immediately of any unauthorized use', 'Maintain accurate and up-to-date account information', 'Comply with all applicable laws and regulations'] as responsibility}
<div class="flex items-start gap-2">
<div class="bg-primary-500 mt-2 h-2 w-2 flex-shrink-0 rounded-full"></div>
<span class="text-sm opacity-75">{responsibility}</span>
</div>
{/each}
</div>
</div>
</div> </div>
</section> </section>
<section class="space-y-4"> <!-- Acceptable Use -->
<section id="usage" class="card preset-outlined-surface-200-800 space-y-6 p-8">
<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
<div class="bg-warning-500/10 rounded-lg p-2">
<AlertTriangle class="text-warning-500 size-5" />
</div>
<h2 class="h3">Acceptable Use</h2> <h2 class="h3">Acceptable Use</h2>
<p class="opacity-75"> </header>
You agree not to use the Service for any unlawful purpose or in any way that could damage, <div class="space-y-6">
disable, overburden, or impair the Service. <p class="leading-relaxed opacity-75">
You agree not to use the Service for any unlawful purpose or in any way that could
damage, disable, overburden, or impair the Service.
</p> </p>
<div class="space-y-3"> <div
<h4 class="font-semibold">Prohibited Activities:</h4> class="bg-error-50 dark:bg-error-950 border-error-200 dark:border-error-800 rounded-lg border p-6"
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> >
<li>Violating any applicable laws or regulations</li> <h4
<li>Infringing on intellectual property rights</li> class="text-error-700 dark:text-error-300 mb-4 flex items-center gap-2 font-semibold"
<li>Transmitting harmful or malicious code</li> >
<li>Attempting to gain unauthorized access</li> <FileX class="size-4" />
<li>Interfering with other users' use of the Service</li> Prohibited Activities
<li>Using the Service for spam or unsolicited communications</li> </h4>
</ul> <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
{#each ['Violating any applicable laws or regulations', 'Infringing on intellectual property rights', 'Transmitting harmful or malicious code', 'Attempting to gain unauthorized access', "Interfering with other users' use of the Service", 'Using the Service for spam or unsolicited communications'] as prohibition}
<div class="flex items-start gap-2">
<FileX class="text-error-500 mt-1 size-3 flex-shrink-0" />
<span class="text-error-700 dark:text-error-300 text-sm">{prohibition}</span>
</div>
{/each}
</div>
</div>
</div> </div>
</section> </section>
<section class="space-y-4"> <!-- Payment Terms -->
<section id="payment" class="card preset-outlined-surface-200-800 space-y-6 p-8">
<header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
<div class="bg-success-500/10 rounded-lg p-2">
<CreditCard class="text-success-500 size-5" />
</div>
<h2 class="h3">Payment Terms</h2> <h2 class="h3">Payment Terms</h2>
<div class="space-y-3"> </header>
<h4 class="font-semibold">Subscription Fees</h4> <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<p class="opacity-75"> <div class="space-y-4">
Subscription fees are billed in advance on a monthly or annual basis. <h4 class="text-success-500 flex items-center gap-2 font-semibold">
All fees are non-refundable except as expressly stated in these Terms. <CreditCard class="size-4" />
Subscription Fees
</h4>
<p class="text-sm leading-relaxed opacity-75">
Subscription fees are billed in advance on a monthly or annual basis. All fees are
non-refundable except as expressly stated in these Terms.
</p> </p>
</div>
<h4 class="font-semibold">Payment Processing</h4> <div class="space-y-4">
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> <h4 class="text-success-500 flex items-center gap-2 font-semibold">
<li>Payment is due upon subscription or renewal</li> <Check class="size-4" />
<li>We may suspend access for overdue payments</li> Payment Processing
<li>Price changes require 30 days advance notice</li> </h4>
<li>Taxes are your responsibility unless otherwise stated</li> <div class="space-y-2">
</ul> {#each ['Payment is due upon subscription or renewal', 'We may suspend access for overdue payments', 'Price changes require 30 days advance notice', 'Taxes are your responsibility unless otherwise stated'] as term}
<div class="flex items-start gap-2">
<div class="bg-success-500 mt-2 h-2 w-2 flex-shrink-0 rounded-full"></div>
<span class="text-sm opacity-75">{term}</span>
</div>
{/each}
</div>
</div>
</div> </div>
</section> </section>
<section class="space-y-4"> <!-- Additional Sections in Compact Cards -->
<h2 class="h3">Data and Privacy</h2> <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
<p class="opacity-75"> <!-- Data and Privacy -->
We respect your privacy and handle your data in accordance with our Privacy Policy. <div id="privacy" class="card preset-outlined-surface-200-800 space-y-4 p-6">
By using the Service, you consent to our collection and use of information as described. <header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
</p> <Shield class="text-primary-500 size-5" />
<div class="space-y-3"> <h3 class="h4">Data and Privacy</h3>
<h4 class="font-semibold">Your Data:</h4> </header>
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> <p class="text-sm leading-relaxed opacity-75">
<li>You retain ownership of your data</li> We respect your privacy and handle your data in accordance with our
<li>We may access data to provide technical support</li> <a href="/privacy" class="text-primary-500 hover:text-primary-400 transition-colors"
<li>We implement security measures to protect your data</li> >Privacy Policy</a
<li>You can export your data at any time</li> >. You retain ownership of your data and can export it at any time.
</ul>
</div>
</section>
<section class="space-y-4">
<h2 class="h3">Intellectual Property</h2>
<p class="opacity-75">
The Service and its original content, features, and functionality are owned by us and
are protected by international copyright, trademark, patent, and other intellectual property laws.
</p>
<div class="space-y-3">
<h4 class="font-semibold">License Grant:</h4>
<p class="opacity-75">
We grant you a limited, non-exclusive, non-transferable license to use the Service
for your internal business purposes in accordance with these Terms.
</p> </p>
</div> </div>
</section>
<section class="space-y-4"> <!-- Intellectual Property -->
<h2 class="h3">Service Availability</h2> <div class="card preset-outlined-surface-200-800 space-y-4 p-6">
<p class="opacity-75"> <header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
We strive to maintain high availability but do not guarantee uninterrupted access to the Service. <FileText class="text-secondary-500 size-5" />
We may perform maintenance, updates, or modifications that temporarily affect availability. <h3 class="h4">Intellectual Property</h3>
</p> </header>
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> <p class="text-sm leading-relaxed opacity-75">
<li>We aim for 99.9% uptime on our paid plans</li> The Service and its content are protected by intellectual property laws. We grant you a
<li>Scheduled maintenance will be announced in advance</li> limited license to use the Service for your business purposes.
<li>We provide status updates during outages</li>
</ul>
</section>
<section class="space-y-4">
<h2 class="h3">Termination</h2>
<div class="space-y-3">
<h4 class="font-semibold">By You:</h4>
<p class="opacity-75">
You may terminate your account at any time through your account settings.
Your access will continue until the end of your current billing period.
</p>
<h4 class="font-semibold">By Us:</h4>
<p class="opacity-75">
We may terminate or suspend your account immediately for violations of these Terms,
illegal activities, or non-payment of fees.
</p> </p>
</div> </div>
</section>
<section class="space-y-4"> <!-- Service Availability -->
<h2 class="h3">Limitation of Liability</h2> <div class="card preset-outlined-surface-200-800 space-y-4 p-6">
<p class="opacity-75"> <header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
To the maximum extent permitted by law, we shall not be liable for any indirect, <Globe class="text-tertiary-500 size-5" />
incidental, special, consequential, or punitive damages arising from your use of the Service. <h3 class="h4">Service Availability</h3>
</header>
<p class="text-sm leading-relaxed opacity-75">
We aim for 99.9% uptime and will announce scheduled maintenance in advance. Status
updates are provided during any service outages.
</p> </p>
</section> </div>
<section class="space-y-4"> <!-- Termination -->
<h2 class="h3">Indemnification</h2> <div class="card preset-outlined-surface-200-800 space-y-4 p-6">
<p class="opacity-75"> <header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
You agree to indemnify and hold us harmless from any claims, damages, or expenses <FileX class="text-warning-500 size-5" />
arising from your use of the Service or violation of these Terms. <h3 class="h4">Termination</h3>
</header>
<p class="text-sm leading-relaxed opacity-75">
You may terminate your account anytime. We may suspend accounts for violations. Access
continues until the end of your billing period.
</p> </p>
</section>
<section class="space-y-4">
<h2 class="h3">Governing Law</h2>
<p class="opacity-75">
These Terms shall be governed by and construed in accordance with the laws of
[Your Jurisdiction], without regard to its conflict of law provisions.
</p>
</section>
<section class="space-y-4">
<h2 class="h3">Changes to Terms</h2>
<p class="opacity-75">
We reserve the right to modify these Terms at any time. We will notify users of
material changes via email or through the Service. Continued use constitutes acceptance of updated Terms.
</p>
</section>
</div> </div>
</div> </div>
<!-- Contact Information --> <!-- Legal Notices -->
<div class="card preset-filled-primary-500 p-8 text-center"> <div class="card preset-outlined-surface-200-800 space-y-6 p-8">
<div class="flex items-center justify-center gap-2 mb-4"> <header class="border-surface-300-600 flex items-center gap-3 border-b pb-4">
<div class="bg-warning-500/10 rounded-lg p-2">
<Gavel class="text-warning-500 size-5" />
</div>
<h2 class="h3">Legal Notices</h2>
</header>
<div class="grid grid-cols-1 gap-6 text-sm md:grid-cols-3">
<div class="space-y-2">
<h4 class="font-semibold">Limitation of Liability</h4>
<p class="opacity-75">
We shall not be liable for indirect, incidental, or consequential damages arising from
your use of the Service.
</p>
</div>
<div class="space-y-2">
<h4 class="font-semibold">Indemnification</h4>
<p class="opacity-75">
You agree to indemnify us from claims arising from your use of the Service or
violation of these Terms.
</p>
</div>
<div class="space-y-2">
<h4 class="font-semibold">Governing Law</h4>
<p class="opacity-75">
These Terms are governed by [Your Jurisdiction] law, without regard to conflict of law
provisions.
</p>
</div>
</div>
</div>
<!-- Changes Notice -->
<div class="card preset-outlined-primary-500 p-6">
<div class="flex items-start gap-3">
<Calendar class="text-primary-500 mt-1 size-5 flex-shrink-0" />
<div class="space-y-2">
<h3 class="text-primary-500 font-semibold">Changes to Terms</h3>
<p class="text-sm opacity-75">
We may update these Terms at any time. Material changes will be communicated via email
or through the Service. Continued use constitutes acceptance of updated Terms.
</p>
</div>
</div>
</div>
</div>
<!-- Contact CTA -->
<div class="card preset-filled-primary-500 p-8 text-center text-white">
<div class="mb-4 flex items-center justify-center gap-2">
<Mail class="size-6" /> <Mail class="size-6" />
<h2 class="h3">Questions About These Terms?</h2> <h2 class="h3">Questions About These Terms?</h2>
</div> </div>
<p class="opacity-90 mb-6"> <p class="mx-auto mb-6 max-w-2xl opacity-90">
If you have any questions about these Terms of Service, please contact our legal team. If you have any questions about these Terms of Service, please contact our legal team. We're
here to help clarify any concerns you may have.
</p> </p>
<div class="flex flex-col sm:flex-row gap-4 justify-center"> <div class="flex flex-col justify-center gap-4 sm:flex-row">
<a href="/contact" class="btn preset-outlined-surface-200-800"> <a
href="/contact"
class="btn preset-filled-surface-50 text-primary-500 hover:bg-surface-100"
>
Contact Us Contact Us
</a> </a>
<a href="mailto:legal@sassy.dev" class="btn preset-ghost-surface-200-800"> <a
href="mailto:legal@sassy.dev"
class="btn preset-outlined-surface-50 border-white/30 text-white hover:bg-white/10"
>
legal@sassy.dev legal@sassy.dev
</a> </a>
</div> </div>