mirror of
https://github.com/LukeHagar/Sveltey.git
synced 2025-12-06 04:21:38 +00:00
Adding icons and adjusting styling
This commit is contained in:
Luke Hagar
@@ -7,7 +7,7 @@
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto space-y-20 py-20 p-4">
|
||||
<div class="container mx-auto space-y-20 p-4 py-20">
|
||||
<!-- 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">
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section>
|
||||
<div class="flex gap-20 text-center flex-wrap font-bold justify-center">
|
||||
<div class="flex flex-wrap justify-center gap-20 text-center font-bold">
|
||||
<div class="space-y-1">
|
||||
<span class="text-7xl">99%</span>
|
||||
<p class="text-primary-500">Faster Development</p>
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-7xl">100%</span>
|
||||
<p class="text-primary-500 ">Type Safe</p>
|
||||
<p class="text-primary-500">Type Safe</p>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<span class="text-7xl">∞</span>
|
||||
@@ -89,7 +89,7 @@
|
||||
|
||||
<!-- 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]">
|
||||
<div class="card preset-outlined-surface-500 min-w-[250px] flex-1 space-y-4 p-4 md:p-8">
|
||||
<Database class="stroke-primary-500 size-10" aria-hidden="true" />
|
||||
<h3 class="h3">Supabase Ready</h3>
|
||||
<p class="opacity-75">
|
||||
@@ -97,7 +97,7 @@
|
||||
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]">
|
||||
<div class="card preset-outlined-surface-500 min-w-[250px] flex-1 space-y-4 p-4 md:p-8">
|
||||
<Zap class="stroke-primary-500 size-10" aria-hidden="true" />
|
||||
<h3 class="h3">Lightning Fast</h3>
|
||||
<p class="opacity-75">
|
||||
@@ -105,7 +105,7 @@
|
||||
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]">
|
||||
<div class="card preset-outlined-surface-500 min-w-[250px] flex-1 space-y-4 p-4 md:p-8">
|
||||
<GitBranch class="stroke-primary-500 size-10" aria-hidden="true" />
|
||||
<h3 class="h3">Developer Experience</h3>
|
||||
<p class="opacity-75">
|
||||
@@ -127,25 +127,37 @@
|
||||
<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>
|
||||
<p class="text-lg font-bold">SvelteKit</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>
|
||||
<p class="text-lg font-bold">Skeleton UI</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="mx-auto flex items-center justify-center">
|
||||
<img src="/tailwind-logo-square.svg" alt="Tailwind CSS" class="size-16" />
|
||||
</div>
|
||||
<p class="text-lg font-bold">Tailwind CSS</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-bold">Supabase</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="rounded-base mx-auto flex size-16 items-center justify-center bg-black p-2">
|
||||
<img src="/resend-icon-white.svg" alt="Resend" class="size-16" />
|
||||
</div>
|
||||
<p class="text-lg font-bold">Resend</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-bold">TypeScript</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
3
static/resend-icon-black.svg
Normal file
3
static/resend-icon-black.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M186 447.471V154H318.062C336.788 154 353.697 158.053 368.79 166.158C384.163 174.263 396.181 185.443 404.845 199.698C413.51 213.672 417.842 229.604 417.842 247.491C417.842 265.938 413.51 282.568 404.845 297.381C396.181 311.915 384.302 323.375 369.209 331.759C354.117 340.144 337.067 344.337 318.062 344.337H253.917V447.471H186ZM348.667 447.471L274.041 314.99L346.99 304.509L430 447.471H348.667ZM253.917 289.835H311.773C319.04 289.835 325.329 288.298 330.639 285.223C336.229 281.869 340.421 277.258 343.216 271.388C346.291 265.519 347.828 258.811 347.828 251.265C347.828 243.718 346.151 237.15 342.797 231.56C339.443 225.691 334.552 221.219 328.124 218.144C321.975 215.07 314.428 213.533 305.484 213.533H253.917V289.835Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 851 B |
3
static/resend-icon-white.svg
Normal file
3
static/resend-icon-white.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M186 447.471V154H318.062C336.788 154 353.697 158.053 368.79 166.158C384.163 174.263 396.181 185.443 404.845 199.698C413.51 213.672 417.842 229.604 417.842 247.491C417.842 265.938 413.51 282.568 404.845 297.381C396.181 311.915 384.302 323.375 369.209 331.759C354.117 340.144 337.067 344.337 318.062 344.337H253.917V447.471H186ZM348.667 447.471L274.041 314.99L346.99 304.509L430 447.471H348.667ZM253.917 289.835H311.773C319.04 289.835 325.329 288.298 330.639 285.223C336.229 281.869 340.421 277.258 343.216 271.388C346.291 265.519 347.828 258.811 347.828 251.265C347.828 243.718 346.151 237.15 342.797 231.56C339.443 225.691 334.552 221.219 328.124 218.144C321.975 215.07 314.428 213.533 305.484 213.533H253.917V289.835Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 851 B |
1
static/tailwind-logo-square.svg
Normal file
1
static/tailwind-logo-square.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33"><g clip-path="url(#prefix__clip0)"><path fill="#38bdf8" fill-rule="evenodd" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z" clip-rule="evenodd"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h54v32.4H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 771 B |
Reference in New Issue
Block a user