mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-08-04 12:45:17 +02:00
New homepage
This commit is contained in:
Sean Morley
parent
ca7592989a
commit
76c65014b7
1 changed files with 272 additions and 17 deletions
|
|
@ -12,26 +12,281 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
{#if data.user && data.user.username != ""}
|
||||
<h1 class="mb-6 text-4xl font-extrabold">
|
||||
Welcome {data.user.first_name}. Let's get Exploring!
|
||||
</h1>
|
||||
{:else}
|
||||
<h1 class="mb-6 text-4xl font-extrabold">Welcome. Let's get Exploring!</h1>
|
||||
{/if}
|
||||
<!--
|
||||
// v0 by Vercel.
|
||||
// https://v0.dev/t/PyTNahbwxVP
|
||||
-->
|
||||
|
||||
<img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
|
||||
<button on:click={navToLog} class="btn btn-primary mb-4">Open Log</button>
|
||||
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Logged Adventures</div>
|
||||
<div class="stat-value text-center">{$visitCount}</div>
|
||||
<!-- <div class="stat-desc">21% more than last month</div> -->
|
||||
<section class="w-full py-12 md:py-24 lg:py-32">
|
||||
<div class="container px-4 md:px-6">
|
||||
<div
|
||||
class="grid gap-6 lg:grid-cols-[1fr_550px] lg:gap-12 xl:grid-cols-[1fr_650px]"
|
||||
>
|
||||
<div class="flex flex-col justify-center space-y-4">
|
||||
<div class="space-y-2">
|
||||
<h1
|
||||
class="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none"
|
||||
>
|
||||
Discover the World's Most Thrilling Adventures
|
||||
</h1>
|
||||
<p class="max-w-[600px] text-gray-500 md:text-xl dark:text-gray-400">
|
||||
Discover and plan your next epic adventure with our cutting-edge
|
||||
travel app. Explore breathtaking destinations, create custom
|
||||
itineraries, and stay connected on the go.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 min-[400px]:flex-row">
|
||||
<button
|
||||
on:click={() => goto("/log")}
|
||||
class="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-8 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
|
||||
>
|
||||
Go To AdventureLog
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1463693396721-8ca0cfa2b3b5?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
width="550"
|
||||
height="550"
|
||||
alt="Hero"
|
||||
class="mx-auto aspect-video overflow-hidden rounded-xl object-cover sm:w-full lg:order-last"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-gray-800">
|
||||
<div class="container px-4 md:px-6">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center space-y-4 text-center"
|
||||
>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
class="inline-block rounded-lg bg-gray-100 px-3 py-1 text-sm dark:bg-gray-800"
|
||||
>
|
||||
Key Features
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold tracking-tighter sm:text-5xl">
|
||||
Discover, Plan, and Explore with Ease
|
||||
</h2>
|
||||
<p
|
||||
class="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400"
|
||||
>
|
||||
Our adventure travel app is designed to simplify your journey,
|
||||
providing you with the tools and resources to plan, pack, and navigate
|
||||
your next epic adventure.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx-auto grid max-w-5xl items-center gap-6 py-12 lg:grid-cols-2 lg:gap-12"
|
||||
>
|
||||
<!-- svelte-ignore a11y-img-redundant-alt -->
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1516738901171-8eb4fc13bd20?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
width="550"
|
||||
height="310"
|
||||
alt="Image"
|
||||
class="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
|
||||
/>
|
||||
<div class="flex flex-col justify-center space-y-4">
|
||||
<ul class="grid gap-6">
|
||||
<li>
|
||||
<div class="grid gap-1">
|
||||
<h3 class="text-xl font-bold">Trip Planning</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Easily create custom itineraries and get real-time updates on
|
||||
your trip.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="grid gap-1">
|
||||
<h3 class="text-xl font-bold">Packing Lists</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Never forget a thing with our comprehensive packing lists.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="grid gap-1">
|
||||
<h3 class="text-xl font-bold">Destination Guides</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Discover the best attractions, activities, and hidden gems in
|
||||
your destination.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="w-full py-12 md:py-24 lg:py-32 border-t">
|
||||
<div
|
||||
class="container grid items-center justify-center gap-4 px-4 text-center md:px-6"
|
||||
>
|
||||
<div class="space-y-3">
|
||||
<h2 class="text-3xl font-bold tracking-tighter md:text-4xl/tight">
|
||||
Explore the World's Most Breathtaking Destinations
|
||||
</h2>
|
||||
<p
|
||||
class="mx-auto max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400"
|
||||
>
|
||||
F
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="carousel"
|
||||
class="relative w-full max-w-5xl"
|
||||
role="region"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex -ml-4" style="transform: translate3d(0px, 0px, 0px);">
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Machu Pic</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Patagonia, Argentina</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Bali, Indonesia</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Discover lush jungles, stunning beaches, and ancient
|
||||
temples.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-roledescription="slide"
|
||||
class="min-w-0 shrink-0 grow-0 basis-full pl-4 md:basis-1/2 lg:basis-1/3"
|
||||
role="group"
|
||||
>
|
||||
<div class="p-1">
|
||||
<div
|
||||
class="rounded-lg border bg-card text-card-foreground shadow-sm"
|
||||
data-v0-t="card"
|
||||
>
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
width="400"
|
||||
height="300"
|
||||
alt="Destination"
|
||||
class="aspect-[4/3] overflow-hidden rounded-t-xl object-cover"
|
||||
/>
|
||||
<div class="space-y-2 p-4">
|
||||
<h3 class="text-xl font-bold">Banff, Canada</h3>
|
||||
<p class="text-gray-500 dark:text-gray-400"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full -left-12 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="h-4 w-4"
|
||||
>
|
||||
<path d="m12 19-7-7 7-7"></path>
|
||||
<path d="M19 12H5"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Previous slide</span>
|
||||
</button>
|
||||
<button
|
||||
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground absolute h-8 w-8 rounded-full -right-12 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="h-4 w-4"
|
||||
>
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="m12 5 7 7-7 7"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Next slide</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<svelte:head>
|
||||
<title>Home | AdventureLog</title>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue