remodels start page

This commit is contained in:
Christian Beutel
2024-02-22 18:05:01 +01:00
parent b2482233ac
commit 2543390c3a

View File

@@ -50,10 +50,10 @@
} }
function handleSearchClick(item: SearchItem) { function handleSearchClick(item: SearchItem) {
if (item.icon == "city") {
if(item.icon == "city") {
goto(`/map/?lat=${item.value._geo.lat}&lon=${item.value._geo.lng}`); goto(`/map/?lat=${item.value._geo.lat}&lon=${item.value._geo.lng}`);
} if (item.icon == "route") { }
if (item.icon == "route") {
goto(`/trail/view/${item.value}`); goto(`/trail/view/${item.value}`);
} }
} }
@@ -63,7 +63,9 @@
class="hero grid grid-cols-1 md:grid-cols-2" class="hero grid grid-cols-1 md:grid-cols-2"
style="height: calc(100vh - 112px)" style="height: calc(100vh - 112px)"
> >
<div class="flex flex-col justify-center gap-8 max-w-md mx-8 md:mx-auto -mt-24"> <div
class="flex flex-col justify-center gap-8 max-w-md mx-8 md:mx-auto -mt-24"
>
<h2 class="text-7xl font-bold"> <h2 class="text-7xl font-bold">
Welcome to <span class="-tracking-[0.075em]">wanderer</span> Welcome to <span class="-tracking-[0.075em]">wanderer</span>
</h2> </h2>
@@ -85,27 +87,41 @@
</Canvas> </Canvas>
</div> </div>
</section> </section>
<section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0"> <section
<h2 class="text-4xl md:text-5xl font-bold"> class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
{$currentUser ? "Your" : "Explore"} trails >
</h2> <div id="trails" class="flex flex-wrap justify-items-center gap-8 py-8">
<div
id="trails"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
>
{#each $trails as trail} {#each $trails as trail}
<a href="/trail/view/{trail.id}"> <a href="/trail/view/{trail.id}">
<TrailCard {trail} mode="edit"></TrailCard></a <TrailCard {trail} mode="edit"></TrailCard></a
> >
{/each} {/each}
</div> </div>
</section> <div class="max-w-md md:mx-auto space-y-8">
<section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0"> <h2 class="text-4xl md:text-5xl font-bold">
<h2 class="text-4xl md:text-5xl font-bold">By category</h2> {$currentUser ? "Trails for you" : "Explore some trails"}
<div </h2>
id="categories" <h5>
class="grid grid-cols- sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8" Here are some trails you might like. Or you can just go to the full
list right now.
</h5>
<a
class="inline-block btn-primary btn-large"
href="/trails"
role="button">All Trails</a
> >
</div>
</section>
<section
class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
>
<div class="max-w-md md:mx-auto space-y-8">
<h2 class="text-4xl md:text-5xl font-bold">Categories</h2>
<h5>
Did you know? You cannot only save you hiking trails. There are many categories for all your adventures.
</h5>
</div>
<div id="categories" class="flex flex-wrap justify-items-center gap-8 py-8">
{#each $categories as category} {#each $categories as category}
<CategoryCard {category}></CategoryCard> <CategoryCard {category}></CategoryCard>
{/each} {/each}