Some small Ui updates

src/lib/JWT.svelte

@@ -0,0 +1,12 @@
+<script>
+    import { createJwt } from '$lib/services/createJwt';
+  
+    let jwt = '';
+  
+    async function handleClick() {
+      jwt = await createJwt();
+    }
+  </script>
+  
+  <button on:click={handleClick}>Create JWT</button>
+  <p>{jwt}</p>

src/lib/Login.svelte

@@ -24,4 +24,4 @@
   }
 </script>
 
-<button on:click={login}>Login</button>
+<button on:click={login} class="btn variant-filled-primary">Login</button>

src/lib/Wallet.svelte

@@ -60,21 +60,22 @@
   }
 </script>
 
-<!-- ... existing markup ... -->
 {#if $state.matches("sessionAvailable") || $state.matches("creatingSession") || $state.matches("signIn")}
   {#if $state.matches("signIn")}
-    <div class="w-1/3">
+    <div class="flex items-center justify-center pb-4">
-      <button
+      <div class="flex flex-col items-center w-1/3">
-        on:click={startSignIn}
+        <button
-        class="flex items-center justify-center w-full py-2 text-white bg-blue-500 rounded hover:bg-blue-700"
+          on:click={startSignIn}
-      >
+          class="flex items-center justify-center w-full py-2 text-white bg-blue-500 rounded hover:bg-blue-700"
-        <span class="mr-2"><Icon icon="flat-color-icons:google" /></span>
+        >
-        <span>Sign in with Google</span>
+          <span class="mr-2"><Icon icon="flat-color-icons:google" /></span>
-      </button>
+          <span>Sign in with Google</span>
+        </button>
+      </div>
     </div>
   {:else if $state.context.pkps}
     <div
-      class="fixed bottom-0 left-0 right-0 flex flex-col items-center p-3 space-y-4 bg-white bg-opacity-75 rounded-t-lg shadow-md"
+      class="flex flex-col items-center p-3 space-y-4 bg-white bg-opacity-75 rounded-t-lg shadow-md"
     >
       <div class="flex items-center justify-between w-full space-x-4">
         <div class="flex items-center space-x-2">

src/lib/createLitSession.ts

@@ -11,7 +11,7 @@ export async function createLitSession(
         pkpPublicKey,
         authMethod,
         sessionSigsParams: {
-            chain: 'ethereum',
+            chain: 'xdai',
             resourceAbilityRequests: [
                 {
                     resource: litResource,

src/lib/services/createJWT.ts

@@ -0,0 +1,36 @@
+// src/lib/services/createJwt.ts
+import { createSession } from './createSession';
+import type { IProvider } from '$lib/IProvider';
+
+export const createJwt = async (provider: IProvider, authMethod: any, pkps: IRelayPKP[]) => {
+    const { sessionSigs } = await createSession(provider, authMethod, pkps);
+
+    const litNodeClient = new LitNodeClient({
+        provider,
+        chain: 'xdai',
+        authSig: sessionSigs,
+    });
+
+    const unifiedAccessControlConditions = [
+        {
+            conditionType: 'evmBasic',
+            contractAddress: '',
+            standardContractType: '',
+            chain: 'xdai',
+            method: 'eth_getBalance',
+            parameters: [':userAddress', 'latest'],
+            returnValueTest: {
+                comparator: '>=',
+                value: '10000000000000',
+            },
+        },
+    ];
+
+    const jwt = await litNodeClient.getSignedToken({
+        unifiedAccessControlConditions,
+        sessionSigs,
+        resourceId: 'wundergraph-auth', // replace with your resource id
+    });
+
+    return jwt;
+};

src/routes/+layout.svelte

@@ -44,15 +44,24 @@
 >
 
 <div
-  class="flex items-center justify-center h-screen bg-center bg-cover"
+  class="grid h-screen bg-center bg-cover grid-rows-layout"
   style="background-image: url('lake.jpeg');"
 >
   <QueryClientProvider client={data.queryClient}>
-    <Wallet />
+    <div class="w-full h-full p-6 overflow-hidden">
-    <!-- <GoogleSession />
+      <div class="w-full h-full overflow-hidden bg-white rounded-xl">
-    <div class="text-lg bg-white">{activeSession}</div> -->
+        <slot />
-    <slot />
+      </div>
-    <!-- {#if activeSession}active {:else} expired {/if}
+    </div>
-    <GooglePKP /> -->
   </QueryClientProvider>
+
+  <div class="row-start-2 row-end-3">
+    <Wallet />
+  </div>
 </div>
+
+<style>
+  .grid-rows-layout {
+    grid-template-rows: 1fr auto;
+  }
+</style>

src/routes/+page.svelte

@@ -9,6 +9,23 @@
   // export let data: PageData;
 </script>
 
+<section
+  class="flex flex-col items-center justify-center min-h-screen p-8 space-y-8 text-white bg-green-500"
+>
+  <h2 class="text-4xl font-bold text-center">
+    Unleash Your Full Potential and Transform Your Life <br />
+  </h2>
+  <h1 class="text-6xl font-bold text-center">Become a Vision Architect</h1>
+
+  <p class="text-xl text-center">
+    We are committed to creating an amazing life experience for every human on
+    the planet. Our mission is to foster a world where everyone can thrive in
+    abundance, excitement, and creativity. We envision a sustainable green
+    planet and future cities where innovation and nature coexist harmoniously.
+  </p>
+  <h3 class="text-2xl">Stand Up NOW, Break Free And Follow Your Passions</h3>
+</section>
+
 <!-- <div class="bg-white">myPKP {data.myPKP}</div> -->
 
 <!-- <button on:click={trigger}>Sign Request</button> -->