mirror of
https://github.com/LukeHagar/Sveltey.git
synced 2025-12-06 12:47:44 +00:00
better mobile styling
This commit is contained in:
Luke Hagar
@@ -7,7 +7,6 @@
|
|||||||
|
|
||||||
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
|
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
|
||||||
|
|
||||||
|
|
||||||
/* Skeleton UI Themes */
|
/* Skeleton UI Themes */
|
||||||
@import '@skeletonlabs/skeleton/themes/catppuccin';
|
@import '@skeletonlabs/skeleton/themes/catppuccin';
|
||||||
@import '@skeletonlabs/skeleton/themes/cerberus';
|
@import '@skeletonlabs/skeleton/themes/cerberus';
|
||||||
@@ -35,10 +34,10 @@
|
|||||||
@custom-variant dark (&:where(.dark, .dark *));
|
@custom-variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
div.prose a {
|
div.prose a {
|
||||||
@apply anchor
|
@apply anchor;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.disabled {
|
a.disabled {
|
||||||
@apply pointer-events-none opacity-50;
|
@apply pointer-events-none opacity-50;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
|
||||||
@@ -60,7 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right side - User actions and theme switcher -->
|
<!-- Right side - User actions and theme switcher -->
|
||||||
<div class="flex gap-3">
|
<div class="flex gap-1 sm:gap-3">
|
||||||
<ThemeSwitch />
|
<ThemeSwitch />
|
||||||
|
|
||||||
{#if session}
|
{#if session}
|
||||||
@@ -91,10 +91,10 @@
|
|||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<!-- Authentication Buttons -->
|
<!-- 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">
|
<a href="/auth" class={getNavClasses('/auth')} aria-label="Sign in or register">
|
||||||
<User class="size-4" aria-hidden="true" />
|
<User class="size-4" aria-hidden="true" />
|
||||||
<span>Sign In / Register</span>
|
<span class="hidden sm:inline">Sign In / Register</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -124,13 +124,13 @@
|
|||||||
aria-expanded={showDropdown}
|
aria-expanded={showDropdown}
|
||||||
>
|
>
|
||||||
<Palette class="size-4" aria-hidden="true" />
|
<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" />
|
<ChevronDown class={`size-4 transition-transform ${showDropdown === true ? 'rotate-180' : ''}`} aria-hidden="true" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{#if showDropdown}
|
{#if showDropdown}
|
||||||
<div
|
<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}
|
{#each colorThemes as theme}
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -67,7 +67,7 @@
|
|||||||
<Header {data} />
|
<Header {data} />
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main class="min-h-screen">
|
<main class="min-h-screen p-4">
|
||||||
{@render children()}
|
{@render children()}
|
||||||
<!-- Pass session to child pages -->
|
<!-- Pass session to child pages -->
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -1,171 +1,177 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
// Icons
|
// Icons
|
||||||
import { Rocket, Database, Zap, Star, Users, GitBranch } from '@lucide/svelte';
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="container mx-auto py-20 space-y-20">
|
<div class="container mx-auto space-y-20 py-20 p-4">
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
<header class="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 items-center">
|
<header class="grid grid-cols-1 items-center gap-8 lg:grid-cols-[1fr_auto]">
|
||||||
<div class="order-2 lg:order-1 max-w-3xl space-y-8">
|
<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>
|
<h1 class="h1">Launch Your SaaS in <span class="text-primary-500">Minutes</span></h1>
|
||||||
<p class="text-2xl opacity-75">
|
<p class="text-2xl opacity-75">
|
||||||
The complete SvelteKit & Supabase template with authentication, payments, and beautiful UI components.
|
The complete SvelteKit & Supabase template with authentication, payments, and beautiful UI
|
||||||
Skip the boilerplate and focus on what matters most.
|
components. Skip the boilerplate and focus on what matters most.
|
||||||
</p>
|
</p>
|
||||||
<div class="flex flex-col sm:flex-row gap-4">
|
<div class="flex flex-col gap-4 sm:flex-row">
|
||||||
{#if data.session}
|
{#if data.session}
|
||||||
<a
|
<a
|
||||||
href="/app/dashboard"
|
href="/app/dashboard"
|
||||||
class="btn btn-lg preset-filled-primary-500"
|
class="btn btn-lg preset-filled-primary-500"
|
||||||
aria-label="Go to your dashboard"
|
aria-label="Go to your dashboard"
|
||||||
>
|
>
|
||||||
<Rocket class="size-5" aria-hidden="true" />
|
<Rocket class="size-5" aria-hidden="true" />
|
||||||
<span>Go to Dashboard</span>
|
<span>Go to Dashboard</span>
|
||||||
</a>
|
</a>
|
||||||
{:else}
|
{:else}
|
||||||
<a
|
<a
|
||||||
href="/auth/signup"
|
href="/auth/signup"
|
||||||
class="btn btn-lg preset-filled-primary-500"
|
class="btn btn-lg preset-filled-primary-500"
|
||||||
aria-label="Sign up for free account"
|
aria-label="Sign up for free account"
|
||||||
>
|
>
|
||||||
<Star class="size-5" aria-hidden="true" />
|
<Star class="size-5" aria-hidden="true" />
|
||||||
<span>Get Started Free</span>
|
<span>Get Started Free</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="/auth/login"
|
href="/auth/login"
|
||||||
class="btn btn-lg preset-outlined-primary-500"
|
class="btn btn-lg preset-outlined-primary-500"
|
||||||
aria-label="Sign in to existing account"
|
aria-label="Sign in to existing account"
|
||||||
>
|
>
|
||||||
<span>Sign In</span>
|
<span>Sign In</span>
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Hero Image/Graphic -->
|
<!-- Hero Image/Graphic -->
|
||||||
<div class="order-1 lg:order-2 flex justify-center">
|
<div class="order-1 flex justify-center lg:order-2">
|
||||||
<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">
|
<div
|
||||||
<Rocket class="size-32 lg:size-64 text-primary-500" aria-hidden="true" />
|
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"
|
||||||
</div>
|
role="img"
|
||||||
</div>
|
aria-label="SaaS launch illustration"
|
||||||
</header>
|
>
|
||||||
|
<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 -->
|
<!-- Stats Section -->
|
||||||
<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="flex gap-20 text-center flex-wrap font-bold justify-between justify-center">
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<span class="font-bold text-7xl">99%</span>
|
<span class="text-7xl">99%</span>
|
||||||
<p class="text-primary-500">Faster Development</p>
|
<p class="text-primary-500">Faster Development</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<span class="font-bold text-7xl">50+</span>
|
<span class="text-7xl">50+</span>
|
||||||
<p class="text-primary-500">Components Ready</p>
|
<p class="text-primary-500">Components Ready</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<span class="font-bold text-7xl">100%</span>
|
<span class="text-7xl">100%</span>
|
||||||
<p class="text-primary-500">Type Safe</p>
|
<p class="text-primary-500 ">Type Safe</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-1">
|
<div class="space-y-1">
|
||||||
<span class="font-bold text-7xl">∞</span>
|
<span class="text-7xl">∞</span>
|
||||||
<p class="text-primary-500">Possibilities</p>
|
<p class="text-primary-500">Possibilities</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr class="hr max-w-48" />
|
<hr class="hr max-w-48" />
|
||||||
|
|
||||||
<!-- Features Section -->
|
<!-- Features Section -->
|
||||||
<section class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-8">
|
<section class="flex flex-wrap gap-4">
|
||||||
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-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" />
|
<Database class="stroke-primary-500 size-10" aria-hidden="true" />
|
||||||
<h3 class="h3">Supabase Ready</h3>
|
<h3 class="h3">Supabase Ready</h3>
|
||||||
<p class="opacity-75">
|
<p class="opacity-75">
|
||||||
Authentication, real-time database, and file storage configured out of the box.
|
Authentication, real-time database, and file storage configured out of the box. Just add
|
||||||
Just add your Supabase credentials and you're ready to go.
|
your Supabase credentials and you're ready to go.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
|
<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" />
|
<Zap class="stroke-primary-500 size-10" aria-hidden="true" />
|
||||||
<h3 class="h3">Lightning Fast</h3>
|
<h3 class="h3">Lightning Fast</h3>
|
||||||
<p class="opacity-75">
|
<p class="opacity-75">
|
||||||
Built with SvelteKit for maximum performance. Server-side rendering,
|
Built with SvelteKit for maximum performance. Server-side rendering, optimistic updates, and
|
||||||
optimistic updates, and blazing fast navigation included.
|
blazing fast navigation included.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card preset-outlined-surface-200-800 p-4 md:p-8 space-y-4">
|
<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" />
|
<GitBranch class="stroke-primary-500 size-10" aria-hidden="true" />
|
||||||
<h3 class="h3">Developer Experience</h3>
|
<h3 class="h3">Developer Experience</h3>
|
||||||
<p class="opacity-75">
|
<p class="opacity-75">
|
||||||
TypeScript, ESLint, Prettier, and comprehensive documentation.
|
TypeScript, ESLint, Prettier, and comprehensive documentation. Built by developers, for
|
||||||
Built by developers, for developers with love and attention to detail.
|
developers with love and attention to detail.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr class="hr max-w-48" />
|
<hr class="hr max-w-48" />
|
||||||
|
|
||||||
<!-- Technologies Section -->
|
<!-- Technologies Section -->
|
||||||
<section class="text-center space-y-8">
|
<section class="space-y-8 text-center">
|
||||||
<h2 class="h2">Built With <span class="text-primary-500">Modern Tools</span></h2>
|
<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="grid grid-cols-2 items-center gap-8 md:grid-cols-4">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div class="mx-auto flex items-center justify-center">
|
<div class="mx-auto flex items-center justify-center">
|
||||||
<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16">
|
<img src="/svelte-logo-square.svg" alt="SvelteKit" class="size-16" />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-lg font-extrabold">SvelteKit</p>
|
<p class="text-lg font-extrabold">SvelteKit</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div class="mx-auto flex items-center justify-center">
|
<div class="mx-auto flex items-center justify-center">
|
||||||
<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16">
|
<img src="/supabase-logo-icon.svg" alt="Supabase" class="size-16" />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-lg font-extrabold">Supabase</p>
|
<p class="text-lg font-extrabold">Supabase</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div class="mx-auto flex items-center justify-center">
|
<div class="mx-auto flex items-center justify-center">
|
||||||
<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16">
|
<img src="/ts-logo-512.svg" alt="TypeScript" class="size-16" />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-lg font-extrabold">TypeScript</p>
|
<p class="text-lg font-extrabold">TypeScript</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div class="mx-auto flex items-center justify-center">
|
<div class="mx-auto flex items-center justify-center">
|
||||||
<Skeleton alt="Skeleton UI" class="size-16 fill-black dark:fill-white" />
|
<Skeleton alt="Skeleton UI" class="size-16 fill-black dark:fill-white" />
|
||||||
</div>
|
</div>
|
||||||
<p class="text-lg font-extrabold">Skeleton UI</p>
|
<p class="text-lg font-extrabold">Skeleton UI</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr class="hr max-w-48" />
|
<hr class="hr max-w-48" />
|
||||||
|
|
||||||
<!-- Call to Action Section -->
|
<!-- Call to Action Section -->
|
||||||
<section class="grid grid-cols-1 md:grid-cols-[1fr_auto] items-center gap-4">
|
<section class="grid grid-cols-1 items-center gap-4 md:grid-cols-[1fr_auto]">
|
||||||
<div class="text-center md:text-left space-y-2">
|
<div class="space-y-2 text-center md:text-left">
|
||||||
<h3 class="h3">Ready to build your next big idea?</h3>
|
<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>
|
<p class="opacity-75">
|
||||||
</div>
|
Join thousands of developers who trust our template to kickstart their SaaS projects.
|
||||||
{#if !data.session}
|
</p>
|
||||||
<a
|
</div>
|
||||||
href="/auth/signup"
|
{#if !data.session}
|
||||||
class="btn md:btn-lg preset-filled-primary-500"
|
<a
|
||||||
aria-label="Start building your SaaS today"
|
href="/auth/signup"
|
||||||
>
|
class="btn md:btn-lg preset-filled-primary-500"
|
||||||
<Users class="size-5" aria-hidden="true" />
|
aria-label="Start building your SaaS today"
|
||||||
<span>Start Building Today</span>
|
>
|
||||||
</a>
|
<Users class="size-5" aria-hidden="true" />
|
||||||
{:else}
|
<span>Start Building Today</span>
|
||||||
<a
|
</a>
|
||||||
href="/pricing"
|
{:else}
|
||||||
class="btn md:btn-lg preset-filled-secondary-500"
|
<a
|
||||||
aria-label="View pricing plans"
|
href="/pricing"
|
||||||
>
|
class="btn md:btn-lg preset-filled-secondary-500"
|
||||||
<Star class="size-5" aria-hidden="true" />
|
aria-label="View pricing plans"
|
||||||
<span>View Pricing</span>
|
>
|
||||||
</a>
|
<Star class="size-5" aria-hidden="true" />
|
||||||
{/if}
|
<span>View Pricing</span>
|
||||||
</section>
|
</a>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user