| 
						
						
							
								
							
						
						
					 | 
				
				 | 
				
					@ -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 | 
				
			
			
		
	
	
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
				
				 | 
				
					
  |