mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-09-16 10:32:10 +00:00
feat(#36): Style the landing page
This commit is contained in:
Josh Creek
+110
-81
@@ -15,10 +15,10 @@
|
||||
onDestroy(unsubscribe);
|
||||
</script>
|
||||
|
||||
<div class="hero min-h-screen bg-base-100">
|
||||
<div class="hero bg-base-100 my-36">
|
||||
<div class="hero-content flex-col lg:flex-row-reverse">
|
||||
<div class="text-center lg:text-left">
|
||||
<h1 class="text-5xl font-bold">Start Your Pokemon Journey!</h1>
|
||||
<h1 class="text-5xl font-bold">Start Your Pokédex Journey!</h1>
|
||||
</div>
|
||||
<div class="card shrink-0 w-full max-w-sm shadow-2xl bg-neutral">
|
||||
<SignUp {supabase} />
|
||||
@@ -26,87 +26,116 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome-banner">
|
||||
<div class="font-bold max-w-xl mx-auto">
|
||||
<h2>
|
||||
Welcome to the Pokedex website, where you can delve into the vast world of Pokémon with ease.
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="md:container md:mx-auto justify-self-center flex justify-center items-center h-full flex-col mb-10"
|
||||
>
|
||||
<div class="stats stats-vertical lg:stats-horizontal shadow bg-neutral text-center">
|
||||
<div class="stat">
|
||||
<div class="stat-title">Pokémon caught</div>
|
||||
<div class="stat-value">310K</div>
|
||||
<div class="stat-desc">Since January 2024</div>
|
||||
</div>
|
||||
|
||||
<div class="colOne"></div>
|
||||
<div class="one font-bold">
|
||||
<p>
|
||||
We're more than just a Pokédex - we're a vibrant community of passionate Pokémon enthusiasts
|
||||
like you! Explore our extensive database, discover the unique traits of each Pokémon species,
|
||||
where you can connect with friends and share your Pokémon journey like never before.. okéAtlas
|
||||
isn't just about information; it's about exploration and discovery. With an intuitive search
|
||||
function and user-friendly interface, navigating the Pokédex is a breeze. Whether you're
|
||||
searching by name, type, region, or even specific attributes like height or weight, PokéAtlas
|
||||
makes it easy to find exactly what you're looking for.
|
||||
</p>
|
||||
</div>
|
||||
<div class="colTwo"></div>
|
||||
<div class="two font-bold">
|
||||
<p>
|
||||
dynamic community features. In addition to browsing the Pokédex, users can create their own
|
||||
profiles, customize their collections, and connect with fellow trainers from around the world.
|
||||
Whether you're sharing your latest catches, discussing strategy, or organizing trades and
|
||||
battles, PokéAtlas provides a vibrant platform for connecting with other Pokémon fans.
|
||||
<i>Ready to catch 'em all?</i>
|
||||
</p>
|
||||
</div>
|
||||
<img src="/template-welcome-pokedex.png" alt="welcome background" height="100%" width="100%" />
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">New Users</div>
|
||||
<div class="stat-value">4,200</div>
|
||||
<div class="stat-desc">↗︎ 400 (22%)</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="text-4xl text-center font-mono p-8">
|
||||
<h3>Join Us!</h3>
|
||||
</div>
|
||||
|
||||
<div class="card w-96 bg-base-100 shadow-xl p-16">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">
|
||||
We invite you to share your thoughts, ideas, and experiences with fellow Trainers from
|
||||
around the globe
|
||||
</h4>
|
||||
<p></p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="discord.com">Discord </a>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-title">Living Dexes Completed</div>
|
||||
<div class="stat-value">1,200</div>
|
||||
<div class="stat-desc">↘︎ 90 (14%)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="features mt-8">
|
||||
<h1 class="flex justify-center text-4xl font-bold mb-5">Features</h1>
|
||||
|
||||
<ul class="space-y-6">
|
||||
<li class="p-6 rounded-lg shadow-md bg-neutral">
|
||||
<div class="flex items-start space-x-4">
|
||||
<svg
|
||||
class="w-8 h-8 text-green-500 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
|
||||
></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Social</h2>
|
||||
<p>
|
||||
Easily share your Pokédex journey with friends, or find theirs. If you'd rather go it
|
||||
alone, that's okay too!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-6 rounded-lg shadow-md bg-neutral">
|
||||
<div class="flex items-start space-x-4">
|
||||
<svg
|
||||
class="w-8 h-8 text-green-500 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
|
||||
></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Free & Open Source</h2>
|
||||
<p>
|
||||
Completely open source and free to use, enabling the community to contribute updates
|
||||
as soon as new Pokémon are released.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-6 rounded-lg shadow-md bg-neutral">
|
||||
<div class="flex items-start space-x-4">
|
||||
<svg
|
||||
class="w-8 h-8 text-green-500 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
|
||||
></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Easy to use with advanced filtering</h2>
|
||||
<p>
|
||||
If you just want to track your progress completing your Pokédex, you can do that. But
|
||||
if you are attempting a harder variant, like a Living Origin Forme Dex, you might find
|
||||
our advanced filtering options helpful for tracking target Pokémon for specific
|
||||
catching sessions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="p-6 rounded-lg shadow-md bg-neutral">
|
||||
<div class="flex items-start space-x-4">
|
||||
<svg
|
||||
class="w-8 h-8 text-green-500 flex-shrink-0"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
|
||||
></path>
|
||||
</svg>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">100% free</h2>
|
||||
<p>Did we mention it's completely free to use? Oh, we did? Good. Because it is.</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.welcome-banner {
|
||||
position: relative;
|
||||
}
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.one {
|
||||
position: absolute;
|
||||
font-size: 15px;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding-right: 20px;
|
||||
max-width: calc(50% - 210px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.two {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10%;
|
||||
transform: translate(50%, -50%);
|
||||
padding-left: 0px;
|
||||
max-width: calc(50% - 210px);
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user