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

better mobile styling

Browse Source
This commit is contained in:
Luke Hagar
2025-06-02 21:22:35 -05:00
parent e07e26bedd
commit d3678aa41a
5 changed files with 172 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.css
View File

@@ -7,7 +7,6 @@
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
/* Skeleton UI Themes */
@import '@skeletonlabs/skeleton/themes/catppuccin';
@import '@skeletonlabs/skeleton/themes/cerberus';
@@ -35,10 +34,10 @@
@custom-variant dark (&:where(.dark, .dark *));
div.prose a {
@apply anchor
@apply anchor;
}
a.disabled {
@apply pointer-events-none opacity-50;
@apply pointer-events-none opacity-50;
}
}

6
src/lib/components/Header.svelte
View File

@@ -60,7 +60,7 @@
</div>
<!-- Right side - User actions and theme switcher -->
<div class="flex gap-3">
<div class="flex gap-1 sm:gap-3">
<ThemeSwitch />
{#if session}
@@ -91,10 +91,10 @@
</div>
{:else}
<!-- Authentication Buttons -->
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 sm:gap-3">
<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
<User class="size-4" aria-hidden="true" />
<span>Sign In / Register</span>
<span class="hidden sm:inline">Sign In / Register</span>
</a>
</div>
{/if}

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

@@ -124,13 +124,13 @@
aria-expanded={showDropdown}
>
<Palette class="size-4" aria-hidden="true" />
<span class="capitalize">{currentColorTheme}</span>
<span class="capitalize hidden sm:block">{currentColorTheme}</span>
<ChevronDown class={`size-4 transition-transform ${showDropdown === true ? 'rotate-180' : ''}`} aria-hidden="true" />
</button>
{#if showDropdown}
<div
class="card preset-outlined-primary-500 bg-surface-50-950 absolute left-0 z-50 mt-2 w-48 overflow-hidden rounded-lg shadow-lg"
class="card preset-outlined-primary-500 bg-surface-50-950 absolute right-0 sm:left-0 z-50 mt-2 w-24 sm:w-48 overflow-hidden rounded-lg shadow-lg"
>
{#each colorThemes as theme}
<button

2
src/routes/+layout.svelte
View File

@@ -67,7 +67,7 @@
<Header {data} />
<!-- Main Content -->
<main class="min-h-screen">
<main class="min-h-screen p-4">
{@render children()}
<!-- Pass session to child pages -->
</main>

320
src/routes/+page.svelte
View File

@@ -1,171 +1,177 @@
<script lang="ts">
// Icons
import { Rocket, Database, Zap, Star, Users, GitBranch } from '@lucide/svelte';
// Icons
import { Rocket, Database, Zap, Star, Users, GitBranch } from '@lucide/svelte';
import Skeleton from '$lib/assets/skeleton.svelte'
import Skeleton from '$lib/assets/skeleton.svelte';
let { data } = $props();
let { data } = $props();
</script>
<div class="container mx-auto py-20 space-y-20">
<!-- Hero Section -->
<header class="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 items-center">
<div class="order-2 lg:order-1 max-w-3xl space-y-8">
<h1 class="h1">Launch Your SaaS in <span class="text-primary-500">Minutes</span></h1>
<p class="text-2xl opacity-75">
The complete SvelteKit & Supabase template with authentication, payments, and beautiful UI components.
Skip the boilerplate and focus on what matters most.
</p>
<div class="flex flex-col sm:flex-row gap-4">
{#if data.session}
<a
href="/app/dashboard"
class="btn btn-lg preset-filled-primary-500"
aria-label="Go to your dashboard"
>
<Rocket class="size-5" aria-hidden="true" />
<span>Go to Dashboard</span>
</a>
{:else}
<a
href="/auth/signup"
class="btn btn-lg preset-filled-primary-500"
aria-label="Sign up for free account"
>
<Star class="size-5" aria-hidden="true" />
<span>Get Started Free</span>
</a>
<a
href="/auth/login"
class="btn btn-lg preset-outlined-primary-500"
aria-label="Sign in to existing account"
>
<span>Sign In</span>
</a>
{/if}
</div>
</div>
<!-- Hero Image/Graphic -->
<div class="order-1 lg:order-2 flex justify-center">
<div class="size-64 lg:size-96 bg-gradient-to-br from-primary-500/20 to-secondary-500/20 rounded-full flex items-center justify-center shadow-2xl animate-tilt" role="img" aria-label="SaaS launch illustration">
<Rocket class="size-32 lg:size-64 text-primary-500" aria-hidden="true" />
</div>
</div>
</header>
<div class="container mx-auto space-y-20 py-20 p-4">
<!-- Hero Section -->
<header class="grid grid-cols-1 items-center gap-8 lg:grid-cols-[1fr_auto]">
<div class="order-2 max-w-3xl space-y-8 lg:order-1">
<h1 class="h1">Launch Your SaaS in <span class="text-primary-500">Minutes</span></h1>
<p class="text-2xl opacity-75">
The complete SvelteKit & Supabase template with authentication, payments, and beautiful UI
components. Skip the boilerplate and focus on what matters most.
</p>
<div class="flex flex-col gap-4 sm:flex-row">
{#if data.session}
<a
href="/app/dashboard"
class="btn btn-lg preset-filled-primary-500"
aria-label="Go to your dashboard"
>
<Rocket class="size-5" aria-hidden="true" />
<span>Go to Dashboard</span>
</a>
{:else}
<a
href="/auth/signup"
class="btn btn-lg preset-filled-primary-500"
aria-label="Sign up for free account"
>
<Star class="size-5" aria-hidden="true" />
<span>Get Started Free</span>
</a>
<a
href="/auth/login"
class="btn btn-lg preset-outlined-primary-500"
aria-label="Sign in to existing account"
>
<span>Sign In</span>
</a>
{/if}
</div>
</div>
<!-- Hero Image/Graphic -->
<div class="order-1 flex justify-center lg:order-2">
<div
class="from-primary-500/20 to-secondary-500/20 animate-tilt flex size-64 items-center justify-center rounded-full bg-gradient-to-br shadow-2xl lg:size-96"
role="img"
aria-label="SaaS launch illustration"
>
<Rocket class="text-primary-500 size-32 lg:size-64" aria-hidden="true" />
</div>
</div>
</header>
<hr class="hr max-w-48" />
<hr class="hr max-w-48" />
<!-- Stats Section -->
<section>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 text-center md:text-left">
<div class="space-y-1">
<span class="font-bold text-7xl">99%</span>
<p class="text-primary-500">Faster Development</p>
</div>
<div class="space-y-1">
<span class="font-bold text-7xl">50+</span>
<p class="text-primary-500">Components Ready</p>
</div>
<div class="space-y-1">
<span class="font-bold text-7xl">100%</span>
<p class="text-primary-500">Type Safe</p>
</div>
<div class="space-y-1">
<span class="font-bold text-7xl">∞</span>
<p class="text-primary-500">Possibilities</p>
</div>
</div>
</section>
<!-- Stats Section -->
<section>
<div class="flex gap-20 text-center flex-wrap font-bold justify-between justify-center">
<div class="space-y-1">
<span class="text-7xl">99%</span>
<p class="text-primary-500">Faster Development</p>
</div>
<div class="space-y-1">
<span class="text-7xl">50+</span>
<p class="text-primary-500">Components Ready</p>
</div>
<div class="space-y-1">
<span class="text-7xl">100%</span>
<p class="text-primary-500 ">Type Safe</p>
</div>
<div class="space-y-1">
<span class="text-7xl">∞</span>
<p class="text-primary-500">Possibilities</p>
</div>
</div>
</section>
<hr class="hr max-w-48" />
<hr class="hr max-w-48" />
<!-- Features Section -->
<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8">
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
<Database class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Supabase Ready</h3>
<p class="opacity-75">
Authentication, real-time database, and file storage configured out of the box.
Just add your Supabase credentials and you're ready to go.
</p>
</div>
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
<Zap class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Lightning Fast</h3>
<p class="opacity-75">
Built with SvelteKit for maximum performance. Server-side rendering,
optimistic updates, and blazing fast navigation included.
</p>
</div>
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
<GitBranch class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Developer Experience</h3>
<p class="opacity-75">
TypeScript, ESLint, Prettier, and comprehensive documentation.
Built by developers, for developers with love and attention to detail.
</p>
</div>
</section>
<!-- Features Section -->
<section class="flex flex-wrap gap-4">
<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
<Database class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Supabase Ready</h3>
<p class="opacity-75">
Authentication, real-time database, and file storage configured out of the box. Just add
your Supabase credentials and you're ready to go.
</p>
</div>
<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
<Zap class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Lightning Fast</h3>
<p class="opacity-75">
Built with SvelteKit for maximum performance. Server-side rendering, optimistic updates, and
blazing fast navigation included.
</p>
</div>
<div class="card preset-outlined-surface-500 space-y-4 p-4 md:p-8 flex-1 min-w-[250px]">
<GitBranch class="stroke-primary-500 size-10" aria-hidden="true" />
<h3 class="h3">Developer Experience</h3>
<p class="opacity-75">
TypeScript, ESLint, Prettier, and comprehensive documentation. Built by developers, for
developers with love and attention to detail.
</p>
</div>
</section>
<hr class="hr max-w-48" />
<hr class="hr max-w-48" />
<!-- Technologies Section -->
<section class="text-center space-y-8">
<h2 class="h2">Built With <span class="text-primary-500">Modern Tools</span></h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16">
</div>
<p class="text-lg font-extrabold">SvelteKit</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16">
</div>
<p class="text-lg font-extrabold">Supabase</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16">
</div>
<p class="text-lg font-extrabold">TypeScript</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<Skeleton alt="Skeleton UI" class="size-16 fill-black dark:fill-white" />
</div>
<p class="text-lg font-extrabold">Skeleton UI</p>
</div>
</div>
</section>
<!-- Technologies Section -->
<section class="space-y-8 text-center">
<h2 class="h2">Built With <span class="text-primary-500">Modern Tools</span></h2>
<div class="grid grid-cols-2 items-center gap-8 md:grid-cols-4">
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16" />
</div>
<p class="text-lg font-extrabold">SvelteKit</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16" />
</div>
<p class="text-lg font-extrabold">Supabase</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16" />
</div>
<p class="text-lg font-extrabold">TypeScript</p>
</div>
<div class="space-y-2">
<div class="mx-auto flex items-center justify-center">
<Skeleton alt="Skeleton UI" class="size-16 fill-black dark:fill-white" />
</div>
<p class="text-lg font-extrabold">Skeleton UI</p>
</div>
</div>
</section>
<hr class="hr max-w-48" />
<hr class="hr max-w-48" />
<!-- Call to Action Section -->
<section class="grid grid-cols-1 md:grid-cols-[1fr_auto] items-center gap-4">
<div class="text-center md:text-left space-y-2">
<h3 class="h3">Ready to build your next big idea?</h3>
<p class="opacity-75">Join thousands of developers who trust our template to kickstart their SaaS projects.</p>
</div>
{#if !data.session}
<a
href="/auth/signup"
class="btn md:btn-lg preset-filled-primary-500"
aria-label="Start building your SaaS today"
>
<Users class="size-5" aria-hidden="true" />
<span>Start Building Today</span>
</a>
{:else}
<a
href="/pricing"
class="btn md:btn-lg preset-filled-secondary-500"
aria-label="View pricing plans"
>
<Star class="size-5" aria-hidden="true" />
<span>View Pricing</span>
</a>
{/if}
</section>
<!-- Call to Action Section -->
<section class="grid grid-cols-1 items-center gap-4 md:grid-cols-[1fr_auto]">
<div class="space-y-2 text-center md:text-left">
<h3 class="h3">Ready to build your next big idea?</h3>
<p class="opacity-75">
Join thousands of developers who trust our template to kickstart their SaaS projects.
</p>
</div>
{#if !data.session}
<a
href="/auth/signup"
class="btn md:btn-lg preset-filled-primary-500"
aria-label="Start building your SaaS today"
>
<Users class="size-5" aria-hidden="true" />
<span>Start Building Today</span>
</a>
{:else}
<a
href="/pricing"
class="btn md:btn-lg preset-filled-secondary-500"
aria-label="View pricing plans"
>
<Star class="size-5" aria-hidden="true" />
<span>View Pricing</span>
</a>
{/if}
</section>
</div>