mirror of
https://github.com/LukeHagar/Sveltey.git
synced 2025-12-06 04:21:38 +00:00
changing name, added readme, SEO, other changes
This commit is contained in:
Luke Hagar
173
README.md
173
README.md
@@ -1,41 +1,168 @@
|
||||
|
||||
# 🚀 Sveltey - SvelteKit SaaS Template
|
||||
|
||||
|
||||
|
||||
# sv
|
||||
A modern, production-ready SaaS template built with SvelteKit 2, Svelte 5, Supabase, and Skeleton UI. Get your SaaS project up and running in hours, not months.
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
|
||||
## ✨ Features
|
||||
|
||||
## Creating a project
|
||||
### 🔐 Authentication & User Management
|
||||
- **Supabase Auth Integration**: Complete authentication flow with email/password and OAuth providers
|
||||
- **Protected Routes**: Automatic route protection and session management
|
||||
- **User Profiles**: Customizable user profile management
|
||||
- **Password Reset**: Secure password reset functionality
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
### 🎨 Modern UI/UX
|
||||
- **Skeleton UI**: Beautiful, accessible components out of the box
|
||||
- **Dark/Light Mode**: Built-in mode switching
|
||||
- **Comprehensive Themes**: 22 beautiful handmade themes
|
||||
- **Responsive Design**: Mobile-first, responsive layouts
|
||||
- **Loading States**: Elegant loading indicators and transitions
|
||||
- **Toast Notifications**: User-friendly feedback system
|
||||
|
||||
### 📊 Dashboard & Analytics
|
||||
- **Admin Dashboard**: Clean, intuitive admin interface
|
||||
- **User Analytics**: Basic user metrics and insights
|
||||
- **Real-time Updates**: Live data updates using Supabase real-time
|
||||
- **Data Visualization**: Charts and graphs for key metrics
|
||||
|
||||
### 📝 Content Management
|
||||
- **Blog System**: Built-in blog with markdown support
|
||||
- **SEO Optimized**: Meta tags, Open Graph, and structured data
|
||||
|
||||
<!-- ### 💳 Payments & Subscriptions
|
||||
- **Stripe Integration**: Ready-to-use payment processing
|
||||
- **Subscription Plans**: Flexible pricing tiers
|
||||
- **Billing Management**: Customer billing portal
|
||||
- **Webhook Handling**: Secure webhook processing -->
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npx sv create
|
||||
# Clone the repository
|
||||
git clone https://github.com/yourusername/sveltey.git
|
||||
cd sveltey
|
||||
|
||||
# create a new project in my-app
|
||||
npx sv create my-app
|
||||
```
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
## Developing
|
||||
# Set up environment variables
|
||||
cp .env.example .env
|
||||
# Edit .env with your Supabase and Stripe keys
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
# Start the development server
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
Visit `http://localhost:5173` and start building your SaaS!
|
||||
|
||||
To create a production version of your app:
|
||||
## 📦 Tech Stack
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
- **Framework**: SvelteKit 2 with Svelte 5
|
||||
- **Database**: Supabase (PostgreSQL)
|
||||
- **Authentication**: Supabase Auth
|
||||
- **UI Components**: Skeleton UI
|
||||
- **Styling**: Tailwind CSS
|
||||
<!-- - **Payments**: Stripe -->
|
||||
- **Deployment**: Vercel/Netlify ready
|
||||
- **Language**: TypeScript
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── lib/
|
||||
│ ├── components/ # Reusable UI components
|
||||
│ ├── stores/ # Svelte stores for state management
|
||||
│ ├── utils/ # Utility functions
|
||||
│ └── types/ # TypeScript type definitions
|
||||
├── routes/
|
||||
│ ├── (app)/ # App routes
|
||||
| | ├── api # API routes, security is handled at the endpoint level
|
||||
| | ├── app # App routes, security is handeled globally, all sub-routes are protected
|
||||
| | └── auth # Auth routes, used for login, logout, and password reset functionality
|
||||
│ └── (marketing)/ # Public marketing pages
|
||||
| ├── blog # API routes, security is handled at the endpoint level
|
||||
| ├── contact # Contact page
|
||||
| ├── pricing # Pricing page
|
||||
| ├── privacy # Privacy policy page
|
||||
| └── terms # Terms of service page
|
||||
├── app.html # App shell
|
||||
├── app.css # Global styles
|
||||
└── hooks.server.ts # Server hooks
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
## 🔧 Configuration
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
||||
### Environment Variables
|
||||
|
||||
Create a `.env` file in the root directory:
|
||||
|
||||
```env
|
||||
# Supabase
|
||||
PUBLIC_SUPABASE_URL=your_supabase_url
|
||||
PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
|
||||
|
||||
# Stripe // coming soon
|
||||
PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
|
||||
STRIPE_SECRET_KEY=your_stripe_secret_key
|
||||
STRIPE_WEBHOOK_SECRET=your_webhook_secret
|
||||
|
||||
```
|
||||
|
||||
### Supabase Setup
|
||||
|
||||
1. Create a new Supabase project
|
||||
2. Copy the project URL and anon key
|
||||
3. Run the included SQL migrations
|
||||
4. Set up your authentication providers
|
||||
|
||||
### Stripe Setup
|
||||
|
||||
1. Create a Stripe account
|
||||
2. Copy your API keys
|
||||
3. Configure your products and pricing
|
||||
4. Set up webhooks for subscription events
|
||||
|
||||
## 🎯 Customization
|
||||
|
||||
### Branding
|
||||
- Update `app.html` for favicon and meta tags
|
||||
- Modify `src/lib/config.ts` for app configuration
|
||||
- Customize colors in with a [custom Skeleton UI theme](https://www.skeleton.dev/docs/design/themes#custom-themes)
|
||||
- Replace logo
|
||||
|
||||
### Components
|
||||
- All components are in `src/lib/components/`
|
||||
- Skeleton UI provides the base component library
|
||||
- Easy to theme and customize with CSS variables
|
||||
|
||||
## 🤝 Contributing
|
||||
|
||||
Contributions are welcome! Please feel free to submit a Pull Request.
|
||||
|
||||
1. Fork the repository
|
||||
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
|
||||
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. Push to the branch (`git push origin feature/AmazingFeature`)
|
||||
5. Open a Pull Request
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
||||
|
||||
## 🆘 Support
|
||||
|
||||
- **Issues**: Report bugs or request features via [GitHub Issues](../../issues)
|
||||
|
||||
## 🙏 Acknowledgments
|
||||
|
||||
- [SvelteKit](https://kit.svelte.dev/) - The amazing web framework
|
||||
- [Supabase](https://supabase.com/) - Backend as a Service
|
||||
- [Skeleton UI](https://skeleton.dev/) - UI component library
|
||||
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
|
||||
- [Stripe](https://stripe.com/) - Payment processing
|
||||
|
||||
---
|
||||
|
||||
*Ready to launch your SaaS? Get started with Sveltey today!*
|
||||
|
||||
21
package-lock.json
generated
21
package-lock.json
generated
@@ -41,6 +41,7 @@
|
||||
"shiki": "^3.4.2",
|
||||
"svelte": "^5.25.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"svelte-meta-tags": "^4.3.0",
|
||||
"svelte-preprocess": "^6.0.3",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.5.0",
|
||||
@@ -6663,6 +6664,13 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/schema-dts": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/schema-dts/-/schema-dts-1.1.5.tgz",
|
||||
"integrity": "sha512-RJr9EaCmsLzBX2NDiO5Z3ux2BVosNZN5jo0gWgsyKvxKIUL5R3swNvoorulAeL9kLB0iTSX7V6aokhla2m7xbg==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.7.2",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
|
||||
@@ -7055,6 +7063,19 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-meta-tags": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte-meta-tags/-/svelte-meta-tags-4.3.0.tgz",
|
||||
"integrity": "sha512-iwiepOc8p5MauzZpu0nxKsTCj6bLCOnhmR299w04W7vpdJ63sL3adjAj715hOG+TnHxxtlPlc/CeDX6tbc35Dw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"schema-dts": "^1.1.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-preprocess": {
|
||||
"version": "6.0.3",
|
||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
|
||||
|
||||
21
package.json
21
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "saasy",
|
||||
"description": "Saasy is a SaaS template for SvelteKit",
|
||||
"name": "sveltey",
|
||||
"description": "Sveltey is a SaaS template for SvelteKit",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
@@ -19,6 +19,7 @@
|
||||
"@lucide/svelte": "^0.511.0",
|
||||
"@skeletonlabs/skeleton": "^3.1.3",
|
||||
"@skeletonlabs/skeleton-svelte": "^1.2.3",
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"@supabase/supabase-js": "^2.49.8",
|
||||
"@sveltejs/adapter-auto": "^6.0.0",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
@@ -32,25 +33,25 @@
|
||||
"eslint-plugin-svelte": "^3.0.0",
|
||||
"globals": "^16.0.0",
|
||||
"lucide-svelte": "^0.511.0",
|
||||
"mdsvex": "^0.12.6",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"prism-themes": "^1.9.0",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark-abbr": "^1.4.2",
|
||||
"remark-toc": "^9.0.0",
|
||||
"remark-unwrap-images": "^4.0.1",
|
||||
"shiki": "^3.4.2",
|
||||
"svelte": "^5.25.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"svelte-meta-tags": "^4.3.0",
|
||||
"svelte-preprocess": "^6.0.3",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"typescript": "^5.5.0",
|
||||
"typescript-eslint": "^8.20.0",
|
||||
"vite": "^6.2.6",
|
||||
"vite-plugin-node-polyfills": "^0.23.0",
|
||||
"@supabase/ssr": "^0.6.1",
|
||||
"mdsvex": "^0.12.6",
|
||||
"rehype-slug": "^6.0.0",
|
||||
"remark-abbr": "^1.4.2",
|
||||
"remark-toc": "^9.0.0",
|
||||
"remark-unwrap-images": "^4.0.1",
|
||||
"shiki": "^3.4.2"
|
||||
"vite-plugin-node-polyfills": "^0.23.0"
|
||||
}
|
||||
}
|
||||
|
||||
6
src/app.d.ts
vendored
6
src/app.d.ts
vendored
@@ -11,11 +11,7 @@ declare global {
|
||||
session: Session | null;
|
||||
user: User | null;
|
||||
}
|
||||
interface PageData {
|
||||
session: Session | null;
|
||||
supabase: SupabaseClient;
|
||||
user: User | null;
|
||||
}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
|
||||
@@ -7,9 +7,12 @@
|
||||
%sveltekit.head%
|
||||
<script>
|
||||
// Set theme immediately to prevent flashing
|
||||
const defaultTheme = 'legacy';
|
||||
const defaultDarkMode = true;
|
||||
|
||||
(function() {
|
||||
const colorTheme = localStorage.getItem('colorTheme') || 'legacy';
|
||||
const darkMode = localStorage.getItem('darkMode') !== 'false'; // default to true
|
||||
const colorTheme = localStorage.getItem('colorTheme') || defaultTheme;
|
||||
const darkMode = localStorage.getItem('darkMode') !== 'false' || defaultDarkMode; // default to true
|
||||
|
||||
// Handle dark mode class on html element
|
||||
if (darkMode) {
|
||||
|
||||
@@ -32,12 +32,10 @@ const supabase: Handle = async ({ event, resolve }) => {
|
||||
* JWT before returning the session.
|
||||
*/
|
||||
event.locals.safeGetSession = async () => {
|
||||
console.log('running safeGetSession');
|
||||
const {
|
||||
data: { session }
|
||||
} = await event.locals.supabase.auth.getSession();
|
||||
if (!session) {
|
||||
console.log('no session, returning null');
|
||||
return { session: null, user: null };
|
||||
}
|
||||
|
||||
@@ -46,12 +44,10 @@ const supabase: Handle = async ({ event, resolve }) => {
|
||||
error
|
||||
} = await event.locals.supabase.auth.getUser();
|
||||
if (error) {
|
||||
console.log('error getting user, returning null');
|
||||
// JWT validation has failed
|
||||
return { session: null, user: null };
|
||||
}
|
||||
|
||||
console.log('returning session and user');
|
||||
return { session, user };
|
||||
};
|
||||
|
||||
@@ -72,7 +68,6 @@ const authGuard: Handle = async ({ event, resolve }) => {
|
||||
event.locals.session = session;
|
||||
event.locals.user = user;
|
||||
|
||||
console.log({session, user});
|
||||
|
||||
// Protect routes that require authentication
|
||||
if (!event.locals.session && event.url.pathname.startsWith('/app')) {
|
||||
|
||||
@@ -32,8 +32,8 @@ Getting started with our template is incredibly simple:
|
||||
|
||||
```bash
|
||||
# Clone the repository
|
||||
git clone https://github.com/your-org/sassy-template.git
|
||||
cd sassy-template
|
||||
git clone https://github.com/your-org/sveltey-template.git
|
||||
cd sveltey-template
|
||||
|
||||
# Install dependencies
|
||||
npm install
|
||||
@@ -321,8 +321,8 @@ Ready to accelerate your SaaS development? Our template eliminates months of boi
|
||||
|
||||
```bash
|
||||
# Get started in under 5 minutes
|
||||
git clone https://github.com/your-org/sassy-template.git
|
||||
cd sassy-template
|
||||
git clone https://github.com/your-org/sveltey-template.git
|
||||
cd sveltey-template
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
@@ -173,13 +173,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{activeTab === 'login' ? 'Sign In' : 'Create Account'} - Sassy</title>
|
||||
<meta name="description" content={activeTab === 'login'
|
||||
? 'Sign in to your account to access your dashboard and manage your projects.'
|
||||
: 'Create your account to start building with our comprehensive SaaS template.'} />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto py-20">
|
||||
<div class="max-w-md mx-auto space-y-8">
|
||||
<!-- Demo Notice -->
|
||||
17
src/routes/(app)/auth/+page.ts
Normal file
17
src/routes/(app)/auth/+page.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = () => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Sign In',
|
||||
description: 'Sign in to your account or create a new one to access your dashboard and start building with Sveltey.',
|
||||
robots: 'noindex,nofollow', // Don't index auth pages
|
||||
openGraph: {
|
||||
title: 'Sign In - Sveltey',
|
||||
description: 'Sign in to your account or create a new one to access your dashboard.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
@@ -49,7 +49,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Reset Password - Sassy</title>
|
||||
<title>Reset Password - Sveltey</title>
|
||||
<meta name="description" content="Reset your password to regain access to your account." />
|
||||
</svelte:head>
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Update Password - Sassy</title>
|
||||
<title>Update Password - Sveltey</title>
|
||||
<meta name="description" content="Set your new password to secure your account." />
|
||||
</svelte:head>
|
||||
|
||||
9
src/routes/(marketing)/blog/+page.server.ts
Normal file
9
src/routes/(marketing)/blog/+page.server.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
// src/routes/blog/+page.server.ts
|
||||
import { getAllPosts } from '$lib/server/blog';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
return {
|
||||
posts: await getAllPosts()
|
||||
};
|
||||
};
|
||||
@@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { Calendar, User, Tag, BookOpen, Star } from '@lucide/svelte';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data } = $props();
|
||||
let { data }: PageProps = $props();
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
@@ -12,11 +13,6 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog - Insights & Tutorials</title>
|
||||
<meta name="description" content="Discover insights, tutorials, and updates from our team. Learn about SaaS development, best practices, and product updates." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto py-20 space-y-20">
|
||||
<!-- Header -->
|
||||
<header class="text-center space-y-4 max-w-3xl mx-auto">
|
||||
@@ -29,11 +25,7 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{#if data.error}
|
||||
<div class="card preset-outlined-error-500 p-8 text-center max-w-2xl mx-auto">
|
||||
<p class="text-error-600 dark:text-error-400">{data.error}</p>
|
||||
</div>
|
||||
{:else if data.posts && data.posts.length > 0}
|
||||
{#if data.posts && data.posts.length > 0}
|
||||
<hr class="hr max-w-48 mx-auto" />
|
||||
|
||||
<!-- Featured Posts -->
|
||||
18
src/routes/(marketing)/blog/+page.ts
Normal file
18
src/routes/(marketing)/blog/+page.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load: PageLoad = ({data}) => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Blog',
|
||||
description: 'Learn about SaaS development, SvelteKit tutorials, and best practices for building modern web applications.',
|
||||
openGraph: {
|
||||
title: 'Blog - Sveltey SaaS Template',
|
||||
description: 'Learn about SaaS development, SvelteKit tutorials, and best practices for building modern web applications.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
...data,
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
55
src/routes/(marketing)/blog/[slug]/+page.server.ts
Normal file
55
src/routes/(marketing)/blog/[slug]/+page.server.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
// src/routes/blog/[slug]/+page.server.ts
|
||||
import { getPostBySlug } from '$lib/server/blog';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = async ({ params, url }) => {
|
||||
// Get only the metadata for the post
|
||||
const post = await getPostBySlug(params.slug);
|
||||
|
||||
if (!post) {
|
||||
throw error(404, 'Blog post not found');
|
||||
}
|
||||
|
||||
// Create page-specific meta tags for the blog post
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: post.title,
|
||||
description: post.excerpt,
|
||||
canonical: new URL(`/blog/${params.slug}`, url.origin).href,
|
||||
|
||||
openGraph: {
|
||||
type: 'article',
|
||||
url: new URL(`/blog/${params.slug}`, url.origin).href,
|
||||
title: post.title,
|
||||
description: post.excerpt,
|
||||
article: {
|
||||
publishedTime: post.publishedAt,
|
||||
authors: post.author ? [post.author] : undefined,
|
||||
section: 'Technology',
|
||||
tags: ['SvelteKit', 'SaaS', 'Web Development', 'Tutorial']
|
||||
}
|
||||
},
|
||||
|
||||
twitter: {
|
||||
title: post.title,
|
||||
description: post.excerpt
|
||||
},
|
||||
|
||||
additionalMetaTags: [
|
||||
{
|
||||
name: 'article:published_time',
|
||||
content: post.publishedAt
|
||||
},
|
||||
{
|
||||
name: 'article:author',
|
||||
content: post.author || 'Sveltey Team'
|
||||
}
|
||||
]
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
post,
|
||||
slug: params.slug, // Pass the slug so we can load the component client-side
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
@@ -32,19 +32,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{post.title} | Blog</title>
|
||||
<meta name="description" content={post.excerpt} />
|
||||
<meta property="og:title" content={post.title} />
|
||||
<meta property="og:description" content={post.excerpt} />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="article:published_time" content={post.publishedAt} />
|
||||
<meta property="article:author" content={post.author} />
|
||||
{#each post.tags as tag}
|
||||
<meta property="article:tag" content={tag} />
|
||||
{/each}
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto py-20 space-y-12 max-w-4xl">
|
||||
<!-- Breadcrumb Navigation -->
|
||||
<nav class="flex items-center gap-2 text-sm">
|
||||
@@ -43,11 +43,6 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact Us - Get in Touch</title>
|
||||
<meta name="description" content="Get in touch with our team. We're here to help with any questions about our SaaS platform." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto py-20">
|
||||
<div class="max-w-6xl mx-auto space-y-16">
|
||||
<!-- Header -->
|
||||
@@ -73,7 +68,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold">Email Us</h3>
|
||||
<p class="text-sm opacity-75">support@sassy.dev</p>
|
||||
<p class="text-sm opacity-75">support@sveltey.dev</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -206,37 +201,34 @@
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="space-y-8">
|
||||
<div class="text-center">
|
||||
<h2 class="h2 mb-4">Frequently Asked <span class="text-primary-500">Questions</span></h2>
|
||||
<p class="opacity-75">Quick answers to common questions.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-3">
|
||||
<h3 class="font-semibold">How can I get started?</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
Simply sign up for an account and you'll have immediate access to our platform. Check out our pricing page for plan details.
|
||||
<h2 class="h2 text-center">Frequently Asked Questions</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<div class="space-y-4">
|
||||
<h3 class="h4 text-primary-500">How quickly do you respond?</h3>
|
||||
<p class="opacity-75">
|
||||
We aim to respond to all inquiries within 24 hours during business days.
|
||||
For urgent matters, please call us directly.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-3">
|
||||
<h3 class="font-semibold">Do you offer technical support?</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
Yes! We provide comprehensive technical support via email and our help center. Premium plans include priority support.
|
||||
<div class="space-y-4">
|
||||
<h3 class="h4 text-primary-500">Do you offer technical support?</h3>
|
||||
<p class="opacity-75">
|
||||
Yes! We provide comprehensive technical support for all our customers.
|
||||
Premium plans include priority support with faster response times.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-3">
|
||||
<h3 class="font-semibold">Can I cancel my subscription anytime?</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
Absolutely. You can cancel your subscription at any time from your dashboard. Your access will continue until the end of your billing period.
|
||||
<div class="space-y-4">
|
||||
<h3 class="h4 text-primary-500">Can I schedule a demo?</h3>
|
||||
<p class="opacity-75">
|
||||
Absolutely! Contact us to schedule a personalized demo of our platform.
|
||||
We'll show you how our solution can meet your specific needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-3">
|
||||
<h3 class="font-semibold">Is there a free trial?</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
Yes! We offer a 14-day free trial for all new users. No credit card required to get started.
|
||||
<div class="space-y-4">
|
||||
<h3 class="h4 text-primary-500">What about custom solutions?</h3>
|
||||
<p class="opacity-75">
|
||||
We offer custom development and integration services for enterprise clients.
|
||||
Reach out to discuss your specific requirements.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
16
src/routes/(marketing)/contact/+page.ts
Normal file
16
src/routes/(marketing)/contact/+page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = () => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Contact Us',
|
||||
description: 'Get in touch with our team. We\'re here to help you succeed with your SaaS project and answer any questions you may have.',
|
||||
openGraph: {
|
||||
title: 'Contact Us - Sveltey',
|
||||
description: 'Get in touch with our team. We\'re here to help you succeed with your SaaS project.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
@@ -64,11 +64,6 @@
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Pricing - Choose Your Plan</title>
|
||||
<meta name="description" content="Simple, transparent pricing for every stage of your journey. Start free and scale as you grow." />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container mx-auto py-20 space-y-20">
|
||||
<!-- Header -->
|
||||
<header class="text-center space-y-4 max-w-3xl mx-auto">
|
||||
16
src/routes/(marketing)/pricing/+page.ts
Normal file
16
src/routes/(marketing)/pricing/+page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = () => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Pricing',
|
||||
description: 'Choose the perfect plan for your SaaS project. Flexible pricing options designed to grow with your business, from startups to enterprise.',
|
||||
openGraph: {
|
||||
title: 'Pricing Plans - Sveltey SaaS Template',
|
||||
description: 'Choose the perfect plan for your SaaS project. Flexible pricing options designed to grow with your business.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
252
src/routes/(marketing)/privacy/+page.svelte
Normal file
252
src/routes/(marketing)/privacy/+page.svelte
Normal file
@@ -0,0 +1,252 @@
|
||||
<script lang="ts">
|
||||
import { Shield, Eye, Lock, Users, FileText, Mail, AlertTriangle } from '@lucide/svelte';
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto py-20 max-w-4xl">
|
||||
<!-- Header -->
|
||||
<header class="text-center space-y-6 mb-16">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-primary-500 rounded-lg flex items-center justify-center">
|
||||
<Shield class="size-6 text-white" />
|
||||
</div>
|
||||
<h1 class="h1">Privacy <span class="text-primary-500">Policy</span></h1>
|
||||
</div>
|
||||
<p class="text-xl opacity-75 max-w-2xl mx-auto">
|
||||
Your privacy is important to us. This policy explains how we collect, use, and protect your information.
|
||||
</p>
|
||||
<div class="text-sm opacity-50">
|
||||
Last updated: May 27, 2025
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Warning Notice -->
|
||||
<div class="card preset-outlined-warning-500 p-6 mb-12">
|
||||
<div class="flex items-start gap-3">
|
||||
<AlertTriangle class="size-5 text-warning-500 flex-shrink-0 mt-0.5" />
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-semibold text-warning-700 dark:text-warning-300">Template Notice</h3>
|
||||
<p class="text-sm text-warning-600 dark:text-warning-400">
|
||||
This is a template privacy policy for demonstration purposes. Please consult with legal professionals
|
||||
to create a privacy policy that complies with applicable laws and regulations for your specific use case.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Navigation -->
|
||||
<nav class="card preset-outlined-surface-200-800 p-6 mb-12">
|
||||
<h2 class="h4 mb-4 flex items-center gap-2">
|
||||
<FileText class="size-5 text-primary-500" />
|
||||
Quick Navigation
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
|
||||
<a href="#information-collection" class="text-primary-500 hover:text-primary-600 transition-colors">Information We Collect</a>
|
||||
<a href="#information-use" class="text-primary-500 hover:text-primary-600 transition-colors">How We Use Information</a>
|
||||
<a href="#information-sharing" class="text-primary-500 hover:text-primary-600 transition-colors">Information Sharing</a>
|
||||
<a href="#data-security" class="text-primary-500 hover:text-primary-600 transition-colors">Data Security</a>
|
||||
<a href="#your-rights" class="text-primary-500 hover:text-primary-600 transition-colors">Your Rights</a>
|
||||
<a href="#contact" class="text-primary-500 hover:text-primary-600 transition-colors">Contact Us</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Privacy Highlights -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
|
||||
<div class="card preset-filled-success-500 p-6 text-center">
|
||||
<Lock class="size-8 mx-auto mb-3" />
|
||||
<h3 class="h5 mb-2">Secure by Design</h3>
|
||||
<p class="text-sm opacity-90">
|
||||
Your data is encrypted and protected with industry-standard security measures.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card preset-filled-primary-500 p-6 text-center">
|
||||
<Eye class="size-8 mx-auto mb-3" />
|
||||
<h3 class="h5 mb-2">Transparent</h3>
|
||||
<p class="text-sm opacity-90">
|
||||
We're clear about what data we collect and how we use it.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card preset-filled-secondary-500 p-6 text-center">
|
||||
<Users class="size-8 mx-auto mb-3" />
|
||||
<h3 class="h5 mb-2">Your Control</h3>
|
||||
<p class="text-sm opacity-90">
|
||||
You have full control over your data and can request deletion at any time.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="space-y-12">
|
||||
<!-- Information We Collect -->
|
||||
<section id="information-collection" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<FileText class="size-6" />
|
||||
Information We Collect
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Account Information</h3>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• Email address</li>
|
||||
<li>• Name and profile information</li>
|
||||
<li>• Authentication data</li>
|
||||
<li>• Account preferences</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Usage Information</h3>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• Application usage patterns</li>
|
||||
<li>• Feature interactions</li>
|
||||
<li>• Performance metrics</li>
|
||||
<li>• Error logs and diagnostics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How We Use Information -->
|
||||
<section id="information-use" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Shield class="size-6" />
|
||||
How We Use Your Information
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Service Provision</h3>
|
||||
<p class="opacity-75">
|
||||
We use your information to provide, maintain, and improve our services,
|
||||
including user authentication, data storage, and feature functionality.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Communication</h3>
|
||||
<p class="opacity-75">
|
||||
We may use your contact information to send important service updates,
|
||||
security notifications, and respond to your support requests.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Analytics and Improvement</h3>
|
||||
<p class="opacity-75">
|
||||
We analyze usage patterns to understand how our service is used and
|
||||
to identify areas for improvement and new features.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Information Sharing -->
|
||||
<section id="information-sharing" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Users class="size-6" />
|
||||
Information Sharing
|
||||
</h2>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<p class="opacity-75 mb-4">
|
||||
We do not sell, trade, or otherwise transfer your personal information to third parties,
|
||||
except in the following circumstances:
|
||||
</p>
|
||||
<ul class="space-y-2 opacity-75">
|
||||
<li>• <strong>Service Providers:</strong> Trusted third-party services that help us operate our platform</li>
|
||||
<li>• <strong>Legal Requirements:</strong> When required by law or to protect our rights</li>
|
||||
<li>• <strong>Business Transfers:</strong> In the event of a merger, acquisition, or sale of assets</li>
|
||||
<li>• <strong>Consent:</strong> When you explicitly consent to sharing your information</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Data Security -->
|
||||
<section id="data-security" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Lock class="size-6" />
|
||||
Data Security
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Technical Safeguards</h3>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• End-to-end encryption</li>
|
||||
<li>• Secure data transmission (HTTPS)</li>
|
||||
<li>• Regular security audits</li>
|
||||
<li>• Access controls and monitoring</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Operational Security</h3>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• Employee training and background checks</li>
|
||||
<li>• Incident response procedures</li>
|
||||
<li>• Regular backups and disaster recovery</li>
|
||||
<li>• Compliance with security standards</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Your Rights -->
|
||||
<section id="your-rights" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Eye class="size-6" />
|
||||
Your Rights and Choices
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Access and Portability</h3>
|
||||
<p class="opacity-75">
|
||||
You have the right to access your personal data and request a copy of your information
|
||||
in a portable format.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Correction and Updates</h3>
|
||||
<p class="opacity-75">
|
||||
You can update your account information at any time through your account settings
|
||||
or by contacting our support team.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Deletion</h3>
|
||||
<p class="opacity-75">
|
||||
You have the right to request deletion of your personal data. We will honor such requests
|
||||
except where retention is required by law.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<section id="contact" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Mail class="size-6" />
|
||||
Contact Us
|
||||
</h2>
|
||||
|
||||
<div class="card preset-outlined-primary-500 p-8 text-center space-y-4">
|
||||
<p class="opacity-75">
|
||||
If you have any questions about this Privacy Policy or our data practices,
|
||||
please don't hesitate to contact us.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/contact" class="btn preset-filled-primary-500">
|
||||
<Mail class="size-4" />
|
||||
Contact Support
|
||||
</a>
|
||||
<a href="mailto:privacy@sveltey.dev" class="btn preset-outlined-surface-200-800">
|
||||
privacy@sveltey.dev
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
16
src/routes/(marketing)/privacy/+page.ts
Normal file
16
src/routes/(marketing)/privacy/+page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = () => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Privacy Policy',
|
||||
description: 'Learn how we collect, use, and protect your personal information. Our commitment to your privacy and data security.',
|
||||
openGraph: {
|
||||
title: 'Privacy Policy - Sveltey',
|
||||
description: 'Learn how we collect, use, and protect your personal information.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
294
src/routes/(marketing)/terms/+page.svelte
Normal file
294
src/routes/(marketing)/terms/+page.svelte
Normal file
@@ -0,0 +1,294 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
FileText,
|
||||
Calendar,
|
||||
Mail,
|
||||
Scale,
|
||||
Check,
|
||||
AlertTriangle,
|
||||
CreditCard,
|
||||
Shield,
|
||||
Users,
|
||||
Globe,
|
||||
Gavel,
|
||||
FileX
|
||||
} from '@lucide/svelte';
|
||||
|
||||
const lastUpdated = 'May 28, 2025';
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto py-20 max-w-4xl">
|
||||
<!-- Header -->
|
||||
<header class="text-center space-y-6 mb-16">
|
||||
<div class="flex items-center justify-center gap-3 mb-4">
|
||||
<div class="w-12 h-12 bg-primary-500 rounded-lg flex items-center justify-center">
|
||||
<Scale class="size-6 text-white" />
|
||||
</div>
|
||||
<h1 class="h1">Terms of <span class="text-primary-500">Service</span></h1>
|
||||
</div>
|
||||
<p class="text-xl opacity-75 max-w-2xl mx-auto">
|
||||
Please read these terms carefully before using our service. By using Sveltey, you agree to these terms.
|
||||
</p>
|
||||
<div class="text-sm opacity-50">
|
||||
Last updated: May 28, 2025
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Warning Notice -->
|
||||
<div class="card preset-outlined-warning-500 p-6 mb-12">
|
||||
<div class="flex items-start gap-3">
|
||||
<AlertTriangle class="size-5 text-warning-500 flex-shrink-0 mt-0.5" />
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-semibold text-warning-700 dark:text-warning-300">Template Notice</h3>
|
||||
<p class="text-sm text-warning-600 dark:text-warning-400">
|
||||
These terms of service are a template for demonstration purposes. Please consult with legal professionals
|
||||
to create terms that comply with applicable laws and regulations for your specific business.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Navigation -->
|
||||
<nav class="card preset-outlined-surface-200-800 p-6 mb-12">
|
||||
<h2 class="h4 mb-4 flex items-center gap-2">
|
||||
<FileText class="size-5 text-primary-500" />
|
||||
Quick Navigation
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
|
||||
<a href="#acceptance" class="text-primary-500 hover:text-primary-600 transition-colors">Acceptance of Terms</a>
|
||||
<a href="#service-description" class="text-primary-500 hover:text-primary-600 transition-colors">Service Description</a>
|
||||
<a href="#user-accounts" class="text-primary-500 hover:text-primary-600 transition-colors">User Accounts</a>
|
||||
<a href="#acceptable-use" class="text-primary-500 hover:text-primary-600 transition-colors">Acceptable Use</a>
|
||||
<a href="#payment-terms" class="text-primary-500 hover:text-primary-600 transition-colors">Payment Terms</a>
|
||||
<a href="#termination" class="text-primary-500 hover:text-primary-600 transition-colors">Termination</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="space-y-12">
|
||||
<!-- Acceptance of Terms -->
|
||||
<section id="acceptance" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Scale class="size-6" />
|
||||
Acceptance of Terms
|
||||
</h2>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<p class="opacity-75 mb-4">
|
||||
By accessing and using the Sveltey SaaS template service ("Service"), you accept and agree to be bound by the terms and provision of this agreement.
|
||||
</p>
|
||||
<p class="opacity-75">
|
||||
If you do not agree to abide by the above, please do not use this service.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service Description -->
|
||||
<section id="service-description" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<FileText class="size-6" />
|
||||
Service Description
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">What We Provide</h3>
|
||||
<p class="opacity-75">
|
||||
Sveltey is a comprehensive SaaS template built with SvelteKit, Supabase, and Skeleton UI.
|
||||
We provide the codebase, documentation, and support to help you build your SaaS application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Service Availability</h3>
|
||||
<p class="opacity-75">
|
||||
We strive to maintain high availability of our service, but we do not guarantee uninterrupted access.
|
||||
Scheduled maintenance and updates may temporarily affect service availability.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- User Accounts -->
|
||||
<section id="user-accounts" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Users class="size-6" />
|
||||
User Accounts
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Account Creation</h3>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• You must provide accurate information</li>
|
||||
<li>• You are responsible for account security</li>
|
||||
<li>• One account per person or organization</li>
|
||||
<li>• Must be 18 years or older</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Account Responsibilities</h3>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• Keep login credentials secure</li>
|
||||
<li>• Notify us of unauthorized access</li>
|
||||
<li>• Update account information as needed</li>
|
||||
<li>• Comply with all applicable laws</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Acceptable Use -->
|
||||
<section id="acceptable-use" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Shield class="size-6" />
|
||||
Acceptable Use Policy
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card preset-filled-success-500 p-6">
|
||||
<h3 class="h4 mb-3">Permitted Uses</h3>
|
||||
<ul class="space-y-2 text-sm opacity-90">
|
||||
<li>• Building legitimate SaaS applications</li>
|
||||
<li>• Learning and educational purposes</li>
|
||||
<li>• Commercial use within license terms</li>
|
||||
<li>• Customization and modification</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card preset-filled-error-500 p-6">
|
||||
<h3 class="h4 mb-3">Prohibited Uses</h3>
|
||||
<ul class="space-y-2 text-sm opacity-90">
|
||||
<li>• Illegal or fraudulent activities</li>
|
||||
<li>• Harassment or abuse of others</li>
|
||||
<li>• Spam or unsolicited communications</li>
|
||||
<li>• Malware or security threats</li>
|
||||
<li>• Violation of intellectual property rights</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Payment Terms -->
|
||||
<section id="payment-terms" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<FileText class="size-6" />
|
||||
Payment Terms
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Billing</h3>
|
||||
<p class="opacity-75 mb-4">
|
||||
Subscription fees are billed in advance on a monthly or annual basis.
|
||||
All fees are non-refundable except as required by law.
|
||||
</p>
|
||||
<ul class="space-y-2 text-sm opacity-75">
|
||||
<li>• Automatic renewal unless cancelled</li>
|
||||
<li>• Price changes with 30 days notice</li>
|
||||
<li>• Taxes may apply based on location</li>
|
||||
<li>• Payment methods: Credit card, PayPal</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">Refunds</h3>
|
||||
<p class="opacity-75">
|
||||
We offer a 30-day money-back guarantee for new subscriptions.
|
||||
Refund requests must be submitted within 30 days of initial purchase.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Termination -->
|
||||
<section id="termination" class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<AlertTriangle class="size-6" />
|
||||
Termination
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">By You</h3>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h3 class="h4 mb-3">By Us</h3>
|
||||
<p class="opacity-75">
|
||||
We may terminate or suspend your account for violation of these terms,
|
||||
non-payment, or other reasons with appropriate notice when possible.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Additional Terms -->
|
||||
<section class="space-y-6">
|
||||
<h2 class="h2 text-primary-500">Additional Terms</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Intellectual Property</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
The Service and its original content remain our property.
|
||||
You retain rights to content you create using our template.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Limitation of Liability</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
Our liability is limited to the amount paid for the service.
|
||||
We are not liable for indirect or consequential damages.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Governing Law</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
These terms are governed by the laws of [Your Jurisdiction].
|
||||
Disputes will be resolved in [Your Jurisdiction] courts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-surface-200-800 p-6 space-y-4">
|
||||
<h3 class="h4">Changes to Terms</h3>
|
||||
<p class="text-sm opacity-75">
|
||||
We may update these terms with notice.
|
||||
Continued use constitutes acceptance of new terms.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<section class="space-y-6">
|
||||
<h2 class="h2 text-primary-500 flex items-center gap-2">
|
||||
<Mail class="size-6" />
|
||||
Contact Us
|
||||
</h2>
|
||||
|
||||
<div class="card preset-outlined-primary-500 p-8 text-center space-y-4">
|
||||
<p class="opacity-75">
|
||||
If you have any questions about these Terms of Service,
|
||||
please don't hesitate to contact us.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/contact" class="btn preset-filled-primary-500">
|
||||
<Mail class="size-4" />
|
||||
Contact Support
|
||||
</a>
|
||||
<a href="mailto:legal@sveltey.dev" class="btn preset-outlined-surface-200-800">
|
||||
legal@sveltey.dev
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
16
src/routes/(marketing)/terms/+page.ts
Normal file
16
src/routes/(marketing)/terms/+page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = () => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Terms of Service',
|
||||
description: 'Read our terms of service and understand the legal agreement between you and Sveltey for using our SaaS template.',
|
||||
openGraph: {
|
||||
title: 'Terms of Service - Sveltey',
|
||||
description: 'Read our terms of service and legal agreement for using Sveltey.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
@@ -1,16 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { invalidate } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { toaster } from '$lib';
|
||||
import ThemeSwitch from '$lib/components/ThemeSwitch.svelte';
|
||||
import { Avatar, Modal, Toaster } from '@skeletonlabs/skeleton-svelte';
|
||||
import { BookOpen, DollarSign, Home, LayoutDashboard, LogOut, User } from '@lucide/svelte';
|
||||
import 'prism-themes/themes/prism-vsc-dark-plus.css';
|
||||
import { onMount } from 'svelte';
|
||||
import { MetaTags, deepMerge } from 'svelte-meta-tags';
|
||||
import '../app.css';
|
||||
|
||||
let { data, children } = $props();
|
||||
let { session, supabase } = $derived(data);
|
||||
|
||||
// Merge base meta tags with page-specific meta tags
|
||||
let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags || {}));
|
||||
|
||||
onMount(() => {
|
||||
// Sync client-side session with server-side on mount
|
||||
const { data } = supabase.auth.onAuthStateChange((event, newSession) => {
|
||||
@@ -23,6 +28,9 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Meta Tags -->
|
||||
<MetaTags {...metaTags} />
|
||||
|
||||
<!-- Skeleton Toasts and Modals -->
|
||||
<Toaster {toaster}></Toaster>
|
||||
<Modal />
|
||||
@@ -38,7 +46,7 @@
|
||||
<div class="bg-primary-500 flex h-8 w-8 items-center justify-center rounded-lg">
|
||||
<span class="text-lg font-bold text-white">S</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">Sassy</span>
|
||||
<span class="text-xl font-bold">Sveltey</span>
|
||||
</a>
|
||||
|
||||
<!-- Main Navigation -->
|
||||
@@ -159,7 +167,7 @@
|
||||
<div class="bg-primary-500 flex h-8 w-8 items-center justify-center rounded-lg">
|
||||
<span class="text-lg font-bold text-white">S</span>
|
||||
</div>
|
||||
<span class="text-xl font-bold">Sassy</span>
|
||||
<span class="text-xl font-bold">Sveltey</span>
|
||||
</div>
|
||||
<p class="text-sm opacity-75">
|
||||
The complete SvelteKit & Supabase SaaS template. Launch your next project in minutes, not
|
||||
@@ -218,7 +226,7 @@
|
||||
<div
|
||||
class="border-surface-300-600-token mt-8 flex flex-col items-center justify-between border-t pt-8 md:flex-row"
|
||||
>
|
||||
<p class="text-sm opacity-50">© 2025 Sassy. All rights reserved.</p>
|
||||
<p class="text-sm opacity-50">© 2025 Sveltey. All rights reserved.</p>
|
||||
<div class="mt-4 flex items-center gap-4 md:mt-0">
|
||||
<span class="text-sm opacity-50">Built with</span>
|
||||
<div class="flex items-center gap-2 text-sm opacity-75">
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { createBrowserClient, createServerClient, isBrowser } from '@supabase/ssr'
|
||||
import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
|
||||
import type { LayoutLoad } from './$types'
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags'
|
||||
|
||||
export const load: LayoutLoad = async ({ data, depends, fetch }) => {
|
||||
export const load: LayoutLoad = async ({ data, depends, fetch, url }) => {
|
||||
/**
|
||||
* Declare a dependency so the layout can be invalidated, for example, on
|
||||
* session refresh.
|
||||
@@ -39,5 +40,85 @@ export const load: LayoutLoad = async ({ data, depends, fetch }) => {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser()
|
||||
|
||||
return { session, supabase, user }
|
||||
const baseMetaTags = Object.freeze({
|
||||
title: 'Sveltey - SvelteKit SaaS Template',
|
||||
titleTemplate: '%s | Sveltey',
|
||||
description: 'A comprehensive, production-ready SaaS template built with Svelte 5, SvelteKit 2, Supabase, and Skeleton UI. Launch your next SaaS project in minutes, not months.',
|
||||
canonical: new URL(url.pathname, url.origin).href,
|
||||
robots: 'index,follow',
|
||||
keywords: ['SvelteKit', 'SaaS', 'template', 'Svelte 5', 'Supabase', 'Skeleton UI', 'TypeScript', 'authentication', 'dashboard'],
|
||||
|
||||
openGraph: {
|
||||
type: 'website',
|
||||
url: new URL(url.pathname, url.origin).href,
|
||||
title: 'Sveltey - SvelteKit SaaS Template',
|
||||
description: 'A comprehensive, production-ready SaaS template built with Svelte 5, SvelteKit 2, Supabase, and Skeleton UI. Launch your next SaaS project in minutes, not months.',
|
||||
siteName: 'Sveltey',
|
||||
locale: 'en_US',
|
||||
images: [
|
||||
{
|
||||
url: `${url.origin}/og-image.jpg`,
|
||||
width: 1200,
|
||||
height: 630,
|
||||
alt: 'Sveltey - SvelteKit SaaS Template',
|
||||
type: 'image/jpeg'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
twitter: {
|
||||
cardType: 'summary_large_image' as const,
|
||||
site: '@sveltey_dev',
|
||||
creator: '@sveltey_dev',
|
||||
title: 'Sveltey - SvelteKit SaaS Template',
|
||||
description: 'A comprehensive, production-ready SaaS template built with Svelte 5, SvelteKit 2, Supabase, and Skeleton UI.',
|
||||
image: `${url.origin}/og-image.jpg`,
|
||||
imageAlt: 'Sveltey - SvelteKit SaaS Template'
|
||||
},
|
||||
|
||||
additionalMetaTags: [
|
||||
{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1'
|
||||
},
|
||||
{
|
||||
name: 'theme-color',
|
||||
content: '#0ea5e9'
|
||||
},
|
||||
{
|
||||
name: 'application-name',
|
||||
content: 'Sveltey'
|
||||
},
|
||||
{
|
||||
name: 'apple-mobile-web-app-capable',
|
||||
content: 'yes'
|
||||
},
|
||||
{
|
||||
name: 'apple-mobile-web-app-status-bar-style',
|
||||
content: 'default'
|
||||
},
|
||||
{
|
||||
name: 'apple-mobile-web-app-title',
|
||||
content: 'Sveltey'
|
||||
}
|
||||
],
|
||||
|
||||
additionalLinkTags: [
|
||||
{
|
||||
rel: 'icon',
|
||||
href: '/favicon.ico'
|
||||
},
|
||||
{
|
||||
rel: 'apple-touch-icon',
|
||||
href: '/apple-touch-icon.png',
|
||||
sizes: '180x180'
|
||||
},
|
||||
{
|
||||
rel: 'manifest',
|
||||
href: '/manifest.json'
|
||||
}
|
||||
]
|
||||
}) satisfies MetaTagsProps
|
||||
|
||||
return { session, supabase, user, baseMetaTags }
|
||||
}
|
||||
16
src/routes/+page.ts
Normal file
16
src/routes/+page.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { MetaTagsProps } from 'svelte-meta-tags';
|
||||
|
||||
export const load = () => {
|
||||
const pageMetaTags = Object.freeze({
|
||||
title: 'Home',
|
||||
description: 'Launch your SaaS project with our comprehensive SvelteKit template. Built with Svelte 5, Supabase authentication, modern UI components, and everything you need to get started.',
|
||||
openGraph: {
|
||||
title: 'Sveltey - Launch Your SaaS Project Fast',
|
||||
description: 'Launch your SaaS project with our comprehensive SvelteKit template. Built with Svelte 5, Supabase authentication, modern UI components, and everything you need to get started.'
|
||||
}
|
||||
}) satisfies MetaTagsProps;
|
||||
|
||||
return {
|
||||
pageMetaTags
|
||||
};
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
// src/routes/blog/+page.server.ts
|
||||
import { getAllPosts } from '$lib/blog';
|
||||
|
||||
export const load = async () => {
|
||||
try {
|
||||
const posts = await getAllPosts();
|
||||
return { posts };
|
||||
} catch (error) {
|
||||
console.error('Error loading blog posts:', error);
|
||||
return { posts: [], error: 'Failed to load blog posts.' };
|
||||
}
|
||||
};
|
||||
@@ -1,17 +0,0 @@
|
||||
// src/routes/blog/[slug]/+page.server.ts
|
||||
import { getPostBySlug } from '$lib/blog';
|
||||
import { error } from '@sveltejs/kit';
|
||||
|
||||
export const load = async ({ params }) => {
|
||||
// Get only the metadata for the post
|
||||
const post = await getPostBySlug(params.slug);
|
||||
|
||||
if (!post) {
|
||||
throw error(404, 'Blog post not found');
|
||||
}
|
||||
|
||||
return {
|
||||
post,
|
||||
slug: params.slug // Pass the slug so we can load the component client-side
|
||||
};
|
||||
};
|
||||
@@ -1,333 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Shield, Calendar, Mail, FileText, Eye, Lock, Share, Cookie, Globe, UserCheck, AlertTriangle, Database } from '@lucide/svelte';
|
||||
|
||||
const lastUpdated = 'May 27, 2025';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Privacy Policy - How We Protect Your Data</title>
|
||||
<meta name="description" content="Learn how we collect, use, and protect your personal information in our comprehensive privacy policy." />
|
||||
</svelte:head>
|
||||
|
||||
<!-- Notice Banner -->
|
||||
<div class="bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800 border-b">
|
||||
<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="max-w-4xl mx-auto space-y-12">
|
||||
<!-- Header Section -->
|
||||
<header class="text-center space-y-6">
|
||||
<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" />
|
||||
</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">
|
||||
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">
|
||||
<Calendar class="size-4" />
|
||||
<span>Last updated: {lastUpdated}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Quick Navigation -->
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h2 class="h4 mb-4 flex items-center gap-2">
|
||||
<FileText class="size-5 text-primary-500" />
|
||||
Quick Navigation
|
||||
</h2>
|
||||
<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,
|
||||
update your profile, or contact us for support.
|
||||
</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">
|
||||
{#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>
|
||||
</section>
|
||||
|
||||
<!-- How We Use Your Information -->
|
||||
<section id="usage" 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-secondary-500/10 rounded-lg">
|
||||
<FileText class="size-5 text-secondary-500" />
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{#each [
|
||||
'Provide and operate our SaaS platform',
|
||||
'Process transactions and send related information',
|
||||
'Send technical notices and support messages',
|
||||
'Respond to customer service requests',
|
||||
'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>
|
||||
|
||||
<!-- 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>
|
||||
</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>
|
||||
<div class="space-y-2">
|
||||
{#each [
|
||||
'Encryption of data in transit and at rest',
|
||||
'Regular security assessments',
|
||||
'Access controls and authentication',
|
||||
'Employee training on data protection'
|
||||
] 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>
|
||||
|
||||
<!-- Your Rights -->
|
||||
<div id="rights" 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">
|
||||
<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:
|
||||
</p>
|
||||
<div class="space-y-2">
|
||||
{#each [
|
||||
{ right: 'Access', description: 'Request a copy of your data' },
|
||||
{ right: 'Update', description: 'Correct inaccurate information' },
|
||||
{ right: 'Delete', description: 'Request data deletion' },
|
||||
{ right: 'Portability', description: 'Receive data in portable format' }
|
||||
] as { right, description }}
|
||||
<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>
|
||||
|
||||
<!-- Data Retention -->
|
||||
<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">
|
||||
<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
|
||||
and fulfill the purposes outlined in this policy, unless a longer retention period
|
||||
is required by law.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cookies and Tracking -->
|
||||
<div id="cookies" 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">
|
||||
<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,
|
||||
and provide personalized content. You can control cookie settings through your browser.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- International Transfers & Changes -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<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.
|
||||
We ensure appropriate safeguards are in place to protect your data.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card preset-outlined-primary-500 p-6 space-y-4">
|
||||
<header class="flex items-center gap-2 pb-3 border-b border-primary-300">
|
||||
<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
|
||||
material changes by posting the new policy on this page and updating the
|
||||
"last updated" date.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<div class="card preset-filled-primary-500 p-8 text-center text-white">
|
||||
<div class="flex items-center justify-center gap-2 mb-4">
|
||||
<Mail class="size-6" />
|
||||
<h2 class="h3">Questions About Privacy?</h2>
|
||||
</div>
|
||||
<p class="opacity-90 mb-6 max-w-2xl mx-auto">
|
||||
If you have any questions about this privacy policy or our data practices,
|
||||
please don't hesitate to contact us. We're committed to protecting your privacy.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a href="/contact" class="btn preset-filled-surface-50 text-primary-500 hover:bg-surface-100">
|
||||
Contact Us
|
||||
</a>
|
||||
<a href="mailto:privacy@sassy.dev" class="btn preset-outlined-surface-50 text-white border-white/30 hover:bg-white/10">
|
||||
privacy@sassy.dev
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,375 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
FileText,
|
||||
Calendar,
|
||||
Mail,
|
||||
Scale,
|
||||
Check,
|
||||
AlertTriangle,
|
||||
CreditCard,
|
||||
Shield,
|
||||
Users,
|
||||
Globe,
|
||||
Gavel,
|
||||
FileX
|
||||
} from '@lucide/svelte';
|
||||
|
||||
const lastUpdated = 'May 28, 2025';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<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."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<!-- Notice Banner -->
|
||||
<div class="bg-warning-50 dark:bg-warning-950 border-warning-200 dark:border-warning-800 border-b">
|
||||
<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="mx-auto max-w-4xl space-y-12">
|
||||
<!-- Header Section -->
|
||||
<header class="space-y-6 text-center">
|
||||
<div class="bg-primary-500/10 mb-4 inline-flex items-center justify-center rounded-full p-3">
|
||||
<Scale class="text-primary-500 size-8" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-2 text-sm opacity-50">
|
||||
<Calendar class="size-4" />
|
||||
<span>Last updated: {lastUpdated}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Quick Navigation -->
|
||||
<div class="card preset-outlined-surface-200-800 p-6">
|
||||
<h2 class="h4 mb-4 flex items-center gap-2">
|
||||
<FileText class="text-primary-500 size-5" />
|
||||
Quick Navigation
|
||||
</h2>
|
||||
<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
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
</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:
|
||||
</p>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div class="space-y-3">
|
||||
{#each ['User authentication and account management', 'Data storage and processing capabilities'] 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 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>
|
||||
|
||||
<!-- 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>
|
||||
</header>
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-primary-500 flex items-center gap-2 font-semibold">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
</header>
|
||||
<div class="space-y-6">
|
||||
<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>
|
||||
<div
|
||||
class="bg-error-50 dark:bg-error-950 border-error-200 dark:border-error-800 rounded-lg border p-6"
|
||||
>
|
||||
<h4
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
</header>
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-success-500 flex items-center gap-2 font-semibold">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- Additional Sections in Compact Cards -->
|
||||
<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<!-- Data and Privacy -->
|
||||
<div id="privacy" class="card preset-outlined-surface-200-800 space-y-4 p-6">
|
||||
<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
|
||||
<Shield class="text-primary-500 size-5" />
|
||||
<h3 class="h4">Data and Privacy</h3>
|
||||
</header>
|
||||
<p class="text-sm leading-relaxed opacity-75">
|
||||
We respect your privacy and handle your data in accordance with our
|
||||
<a href="/privacy" class="text-primary-500 hover:text-primary-400 transition-colors"
|
||||
>Privacy Policy</a
|
||||
>. You retain ownership of your data and can export it at any time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Intellectual Property -->
|
||||
<div class="card preset-outlined-surface-200-800 space-y-4 p-6">
|
||||
<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
|
||||
<FileText class="text-secondary-500 size-5" />
|
||||
<h3 class="h4">Intellectual Property</h3>
|
||||
</header>
|
||||
<p class="text-sm leading-relaxed opacity-75">
|
||||
The Service and its content are protected by intellectual property laws. We grant you a
|
||||
limited license to use the Service for your business purposes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Service Availability -->
|
||||
<div class="card preset-outlined-surface-200-800 space-y-4 p-6">
|
||||
<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
|
||||
<Globe class="text-tertiary-500 size-5" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Termination -->
|
||||
<div class="card preset-outlined-surface-200-800 space-y-4 p-6">
|
||||
<header class="border-surface-300-600 flex items-center gap-2 border-b pb-3">
|
||||
<FileX class="text-warning-500 size-5" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legal Notices -->
|
||||
<div 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">
|
||||
<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" />
|
||||
<h2 class="h3">Questions About These Terms?</h2>
|
||||
</div>
|
||||
<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. We're
|
||||
here to help clarify any concerns you may have.
|
||||
</p>
|
||||
<div class="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<a
|
||||
href="/contact"
|
||||
class="btn preset-filled-surface-50 text-primary-500 hover:bg-surface-100"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
<a
|
||||
href="mailto:legal@sassy.dev"
|
||||
class="btn preset-outlined-surface-50 border-white/30 text-white hover:bg-white/10"
|
||||
>
|
||||
legal@sassy.dev
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user