LukeParke/Sveltey
1
0
Fork 0
mirror of https://github.com/LukeHagar/Sveltey.git synced 2025-12-06 12:47:44 +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>

384
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,179 +9,325 @@
<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>
<p class="text-xl opacity-75 max-w-2xl mx-auto"> <div class="space-y-4">
We take your privacy seriously. This policy explains how we collect, use, and protect your personal information. <h1 class="h1">Privacy <span class="text-primary-500">Policy</span></h1>
</p> <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.
</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"> <FileText class="size-5 text-primary-500" />
<h2 class="h3 flex items-center gap-2"> Quick Navigation
<FileText class="size-5 text-primary-500" /> </h2>
Information We Collect <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 text-sm">
</h2> <a href="#collection" class="btn preset-ghost-surface-200-800 justify-start">Information Collection</a>
<p class="opacity-75"> <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="space-y-3">
<h4 class="font-semibold h4">Personal Information:</h4> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4"> <div class="space-y-4">
<li>Name and email address</li> <h4 class="font-semibold text-primary-500 flex items-center gap-2">
<li>Profile information and preferences</li> <UserCheck class="size-4" />
<li>Payment and billing information</li> Personal Information
<li>Communication history with our support team</li> </h4>
</ul> <div class="space-y-3">
{#each [
'Name and email address',
'Profile information and preferences',
'Payment and billing information',
'Communication history with our support team'
] as item}
<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>
{/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">
{#each [
'Log data and device information',
'Usage patterns and feature interactions',
'Performance and error data'
] as item}
<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 class="space-y-3"> </div>
<h4 class="font-semibold h4">Usage Information:</h4> </section>
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
<li>Log data and device information</li>
<li>Usage patterns and feature interactions</li>
<li>Performance and error data</li>
</ul>
</div>
</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',
</section> 'Monitor usage and prevent fraud or abuse'
] as usage}
<section class="space-y-4"> <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">
<h2 class="h3">Information Sharing</h2> <Shield class="size-4 text-primary-500 flex-shrink-0 mt-1" />
<p class="opacity-75"> <span class="text-sm text-primary-700 dark:text-primary-300">{usage}</span>
We do not sell, trade, or otherwise transfer your personal information to third parties </div>
except as described in this policy. {/each}
</p>
<div class="space-y-3">
<h4 class="font-semibold h4">We may share your information:</h4>
<ul class="list-disc list-inside space-y-1 opacity-75 ml-4">
<li>With service providers who assist our operations</li>
<li>To comply with legal obligations</li>
<li>To protect our rights and prevent fraud</li>
<li>In connection with a business transfer</li>
</ul>
</div> </div>
</section> </div>
</section>
<section class="space-y-4"> <!-- Information Sharing -->
<h2 class="h3">Data Security</h2> <section id="sharing" class="card preset-outlined-surface-200-800 p-8 space-y-6">
<p class="opacity-75"> <header class="flex items-center gap-3 pb-4 border-b border-surface-300-600">
We implement appropriate security measures to protect your personal information against <div class="p-2 bg-warning-500/10 rounded-lg">
unauthorized access, alteration, disclosure, or destruction. <Share class="size-5 text-warning-500" />
</div>
<h2 class="h3">Information Sharing</h2>
</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
except as described in this policy.
</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">
{#each [
'With service providers who assist our operations',
'To comply with legal obligations',
'To protect our rights and prevent fraud',
'In connection with a business transfer'
] as sharing}
<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>
</section>
<!-- Additional Sections in Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Data Security -->
<div id="security" 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">
<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>
</div> </div>
</div> </div>
</div> </div>

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

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