|
|
@ -2,10 +2,16 @@ |
|
|
|
<template> |
|
|
|
<div v-if="visible" class="dialog-overlay"> |
|
|
|
<div v-if="page === OnboardPage.Home" class="dialog"> |
|
|
|
<h1 class="text-xl font-bold text-center mb-4"> |
|
|
|
<h1 class="text-xl font-bold text-center mb-4 relative"> |
|
|
|
Welcome to Time Safari |
|
|
|
<br /> |
|
|
|
- Showcasing Gratitude & Magnifing Time |
|
|
|
<div |
|
|
|
class="text-lg text-center leading-none absolute right-0 -top-1" |
|
|
|
@click="onClickClose(true)" |
|
|
|
> |
|
|
|
<fa icon="xmark" class="w-[1em]"></fa> |
|
|
|
</div> |
|
|
|
</h1> |
|
|
|
|
|
|
|
<p v-if="isRegistered" class="mt-4"> |
|
|
@ -23,7 +29,7 @@ |
|
|
|
appreciation, too. |
|
|
|
</p> |
|
|
|
|
|
|
|
<p class="mt-4 flex items-center"> |
|
|
|
<p class="mt-4"> |
|
|
|
The more you illuminate cool things people are doing, the more you |
|
|
|
attract people to work together with you. |
|
|
|
</p> |
|
|
@ -68,15 +74,30 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="page === OnboardPage.Discover" class="dialog"> |
|
|
|
<h1 class="text-xl font-bold text-center mb-4"> |
|
|
|
Find Interesting Events & Projects |
|
|
|
<h1 class="text-xl font-bold text-center mb-4 relative"> |
|
|
|
Offer to Interesting Events & People |
|
|
|
<div |
|
|
|
class="text-lg text-center leading-none absolute right-0 -top-1" |
|
|
|
@click="onClickClose(true)" |
|
|
|
> |
|
|
|
<fa icon="xmark" class="w-[1em]"></fa> |
|
|
|
</div> |
|
|
|
</h1> |
|
|
|
|
|
|
|
<p> |
|
|
|
It turns out that people in groups have more to be grateful for -- and |
|
|
|
they get more accomplished. So here you'll find others who are doing |
|
|
|
interesting things. Some may be in your neighborhood. Search for a |
|
|
|
topic, or search around your location under "Nearby". |
|
|
|
Once you've seen things that others have given or done, you may find |
|
|
|
ways you want to contribute, too. It turns out others have proposed |
|
|
|
activities together, and this page is where you find projects. |
|
|
|
</p> |
|
|
|
|
|
|
|
<p class="mt-4"> |
|
|
|
Search for a topic, or search around your neighborhod under "Nearby". |
|
|
|
</p> |
|
|
|
|
|
|
|
<p class="mt-4"> |
|
|
|
When you find some that seem interesting, you can offer your help. You |
|
|
|
are welcome to make your offer conditional, for example if they get 2 |
|
|
|
other people, too. |
|
|
|
</p> |
|
|
|
|
|
|
|
<p class="mt-4 flex items-center"> |
|
|
@ -110,14 +131,26 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="page === OnboardPage.Create" class="dialog"> |
|
|
|
<h1 class="text-xl font-bold text-center mb-4"> |
|
|
|
Fish for Others with Projects of Your Own |
|
|
|
<h1 class="text-xl font-bold text-center mb-4 relative"> |
|
|
|
Fish for Others with Your Projects |
|
|
|
<div |
|
|
|
class="text-lg text-center leading-none absolute right-0 -top-1" |
|
|
|
@click="onClickClose(true)" |
|
|
|
> |
|
|
|
<fa icon="xmark" class="w-[1em]"></fa> |
|
|
|
</div> |
|
|
|
</h1> |
|
|
|
|
|
|
|
<p> |
|
|
|
Now you can take a turn: throw out projects of your own... anything |
|
|
|
you'd like to see happen. If your first idea doesn't catch anyone, try, |
|
|
|
try again... and let others know that this is a good place to find help. |
|
|
|
<p class="relative"> |
|
|
|
Now you can take a turn: click on the |
|
|
|
<span |
|
|
|
class="bg-green-600 text-white rounded-full" |
|
|
|
> |
|
|
|
<fa icon="plus" class="fa-fw"></fa> |
|
|
|
</span> |
|
|
|
button to throw out projects of your own... anything you'd like to see |
|
|
|
happen. If your first idea doesn't catch anyone, try, try again... and let |
|
|
|
others know that this is a good place to find help. |
|
|
|
</p> |
|
|
|
|
|
|
|
<p class="mt-4 flex items-center"> |
|
|
@ -129,6 +162,14 @@ |
|
|
|
button below brings you here to see your ideas. |
|
|
|
</p> |
|
|
|
|
|
|
|
<p class="mt-4"> |
|
|
|
By the way, one good way to get to know your neighbors and their |
|
|
|
interests is to offer time directly to them. You can do this on the |
|
|
|
contacts screen |
|
|
|
<fa icon="users" class="text-slate-500" /> |
|
|
|
which is a great way to get to know a neighbor's interests. |
|
|
|
</p> |
|
|
|
|
|
|
|
<div class="mt-8"> |
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> |
|
|
|
<button |
|
|
|