├── env.example
├── .npmrc
├── public
    ├── favicon.ico
    └── img
    │   └── guilloche.svg
├── .gitignore
├── tsconfig.json
├── app
    ├── assets
    │   ├── fonts
    │   │   ├── SuisseIntl-Medium.woff2
    │   │   ├── SuisseIntl-Regular.woff2
    │   │   └── SuisseIntl-SemiBold.woff2
    │   └── css
    │   │   └── tailwind.postcss
    ├── layouts
    │   ├── default.vue
    │   └── auth.vue
    ├── components
    │   ├── AppBackToLogin.vue
    │   ├── ErrorAlert.vue
    │   └── SuccessAlert.vue
    ├── app.vue
    └── pages
    │   ├── forgot-password.vue
    │   ├── index.vue
    │   ├── login.vue
    │   ├── new-password.vue
    │   └── register.vue
├── .github
    └── workflows
    │   └── release.yml
├── tailwind.config.js
├── package.json
├── SECURITY.md
├── nuxt.config.ts
├── LICENSE
└── README.md


/env.example:
--------------------------------------------------------------------------------
1 | SUPABASE_URL=
2 | SUPABASE_KEY=


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zackha/supaAuth/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | dist
8 | .env
9 | .data


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/app/assets/fonts/SuisseIntl-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zackha/supaAuth/HEAD/app/assets/fonts/SuisseIntl-Medium.woff2


--------------------------------------------------------------------------------
/app/assets/fonts/SuisseIntl-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zackha/supaAuth/HEAD/app/assets/fonts/SuisseIntl-Regular.woff2


--------------------------------------------------------------------------------
/app/assets/fonts/SuisseIntl-SemiBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zackha/supaAuth/HEAD/app/assets/fonts/SuisseIntl-SemiBold.woff2


--------------------------------------------------------------------------------
/app/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main>
 3 |     <section class="pt-20 pb-28 min-h-screen flex flex-col justify-center">
 4 |       <div class="px-6 w-full mx-auto max-w-6xl">
 5 |         <slot />
 6 |         <div class="absolute inset-0">
 7 |           <div class="background-gradient">
 8 |             <div class="background-gradient-pattern"></div>
 9 |           </div>
10 |         </div>
11 |       </div>
12 |     </section>
13 |   </main>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | permissions:
 4 |   contents: write
 5 | 
 6 | on:
 7 |   push:
 8 |     tags:
 9 |       - 'v*'
10 | 
11 | jobs:
12 |   release:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v4
16 |         with:
17 |           fetch-depth: 0
18 | 
19 |       - name: Set node
20 |         uses: actions/setup-node@v4
21 |         with:
22 |           registry-url: https://registry.npmjs.org/
23 |           node-version: lts/*
24 | 
25 |       - run: npx changelogithub
26 |         env:
27 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
28 | 


--------------------------------------------------------------------------------
/app/components/AppBackToLogin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="gxYQch">
 3 |     <NuxtLink class="jjabJD" to="/login">
 4 |       <div class="fvEvSO">
 5 |         <svg viewBox="0 0 20 20" fill="none" class="jXTFjD">
 6 |           <path
 7 |             d="M11.6667 6.66663L8.33334 9.99996L11.6667 13.3333"
 8 |             fill="none"
 9 |             stroke-width="1.5"
10 |             stroke-linecap="round"
11 |             stroke-linejoin="round"
12 |             style="stroke: var(--icon-color)"></path>
13 |         </svg>
14 |         Login
15 |       </div>
16 |     </NuxtLink>
17 |   </div>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | import defaultTheme from 'tailwindcss/defaultTheme'
 2 | 
 3 | export default {
 4 |   theme: {
 5 |     extend: {
 6 |       colors: {
 7 |         'fcfcfc': '#fcfcfc',
 8 |         '12161e': '#12161e',
 9 |         '656976': '#656976',
10 |         'c2c3c7': '#c2c3c7',
11 |         '91949b': '#91949b',
12 |         '232730': '#232730',
13 |         '575a64': '#575a64',
14 |       },
15 |       padding: {
16 |         '2.25': '0.563rem',
17 |       },
18 |       maxWidth: {
19 |         '75': '18.75rem',
20 |       },
21 |       fontFamily: {
22 |         sans: ['SuisseIntl', ...defaultTheme.fontFamily.sans]
23 |       }
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "supaauth",
 3 |   "description": "Supabase Auth with Nuxt",
 4 |   "version": "2.0.4",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "build": "nuxt build",
 8 |     "dev": "nuxt dev",
 9 |     "generate": "nuxt generate",
10 |     "preview": "nuxt preview"
11 |   },
12 |   "devDependencies": {
13 |     "@nuxthub/core": "0.9.0",
14 |     "@nuxtjs/supabase": "^1.6.1",
15 |     "@nuxtjs/tailwindcss": "^6.14.0",
16 |     "nuxt": "^4.1.1",
17 |     "wrangler": "^4.34.0"
18 |   },
19 |   "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
20 | }
21 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | # Security Policy
 2 | 
 3 | ## Supported Versions
 4 | 
 5 | Use this section to tell people about which versions of your project are
 6 | currently being supported with security updates.
 7 | 
 8 | | Version | Supported          |
 9 | | ------- | ------------------ |
10 | | 5.1.x   | :white_check_mark: |
11 | | 5.0.x   | :x:                |
12 | | 4.0.x   | :white_check_mark: |
13 | | < 4.0   | :x:                |
14 | 
15 | ## Reporting a Vulnerability
16 | 
17 | Use this section to tell people how to report a vulnerability.
18 | 
19 | Tell them where to go, how often they can expect to get an update on a
20 | reported vulnerability, what to expect if the vulnerability is accepted or
21 | declined, etc.
22 | 


--------------------------------------------------------------------------------
/app/layouts/auth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="buJnuC">
 3 |     <div class="fvfNpo">
 4 |       <div class="uXyMu">
 5 |         <AppBackToLogin />
 6 |         <div class="fNAZQD">
 7 |           <div class="dgrFox">
 8 |             <slot />
 9 |           </div>
10 |         </div>
11 |         <p class="cyDNyc">
12 |           This site is authenticate by supabase.com and the Supabase
13 |           <a target="_blank" href="https://supabase.com/privacy" rel="noreferrer">Privacy Policy</a>
14 |           and
15 |           <a target="_blank" href="https://supabase.com/terms" rel="noreferrer">Terms of Service</a>
16 |           apply.
17 |         </p>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | export default defineNuxtConfig({
 2 |   modules: ['@nuxtjs/supabase', '@nuxtjs/tailwindcss', '@nuxthub/core'],
 3 | 
 4 |   tailwindcss: {
 5 |     cssPath: '~/assets/css/tailwind.postcss',
 6 |   },
 7 | 
 8 |   supabase: {
 9 |     redirectOptions: {
10 |       login: '*',
11 |       callback: '*',
12 |     },
13 |   },
14 | 
15 |   future: {
16 |     compatibilityVersion: 4,
17 |   },
18 | 
19 |   app: {
20 |     layoutTransition: { name: 'layout', mode: 'out-in' },
21 |     pageTransition: { name: 'page', mode: 'out-in' },
22 |     head: {
23 |       charset: 'utf-16',
24 |       viewport: 'width=500, initial-scale=1',
25 |       link: [
26 |         { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
27 |         { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
28 |         { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
29 |         { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono&display=swap' },
30 |       ],
31 |     },
32 |   },
33 | 
34 |   compatibilityDate: '2025-02-19',
35 | });


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Zack Hatlen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <NuxtLayout>
 3 |     <NuxtPage />
 4 |   </NuxtLayout>
 5 | </template>
 6 | 
 7 | <style lang="postcss">
 8 | @keyframes fadeIn {
 9 |   0% {
10 |     opacity: 0.001;
11 |   }
12 |   100% {
13 |     opacity: 1;
14 |   }
15 | }
16 | @keyframes fadeOut {
17 |   0% {
18 |     opacity: 1;
19 |   }
20 |   100% {
21 |     opacity: 0.001;
22 |   }
23 | }
24 | .page-enter-active,
25 | .page-leave-active,
26 | .layout-enter-active,
27 | .layout-leave-active {
28 |   transition: opacity 250ms;
29 | }
30 | .page-enter,
31 | .page-leave-to,
32 | .layout-enter,
33 | .layout-leave-to {
34 |   opacity: 0;
35 | }
36 | .page-enter-active,
37 | .layout-enter-active {
38 |   animation-duration: 250ms;
39 |   animation-name: fadeIn;
40 |   animation-timing-function: linear;
41 |   backface-visibility: hidden;
42 | }
43 | .page-leave-active,
44 | .layout-leave-active {
45 |   animation-name: fadeOut;
46 |   animation-duration: 0.25s;
47 | }
48 | /* Scale Y */
49 | .scale-y-enter-active,
50 | .scale-y-leave-active {
51 |   transition: all 300ms linear;
52 |   will-change: max-height, opacity;
53 |   max-height: 160px;
54 |   overflow: hidden;
55 |   opacity: 1;
56 | }
57 | .scale-y-enter-from,
58 | .scale-y-leave-to {
59 |   max-height: 0;
60 |   opacity: 0;
61 | }
62 | </style>
63 | 


--------------------------------------------------------------------------------
/app/pages/forgot-password.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="DaoRb">
 3 |     <h1 class="eSHwvX">Forgot password</h1>
 4 |     <form @submit.prevent="resetPassword">
 5 |       <ErrorAlert :error-msg="authError" @clearError="clearError" />
 6 |       <SuccessAlert :success-msg="authSuccess" @clearSuccess="clearSuccess" />
 7 |       <div class="jGQTZC">
 8 |         <label class="iJLvzO">
 9 |           <div class="fdCSlG">
10 |             <input class="cmCuLh" type="text" placeholder="Email address" v-model="email" />
11 |           </div>
12 |         </label>
13 |       </div>
14 |       <button class="gZMQdu" type="submit" :disabled="loading">
15 |         <div class="bjhGPG" :class="{ loading: loading }">Request</div>
16 |         <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="jjoFVh" :class="{ loading: loading }">
17 |           <g fill="none" stroke-width="1.5" stroke-linecap="round" class="faEWLr" style="stroke: var(--icon-color)">
18 |             <circle stroke-opacity=".2" cx="8" cy="8" r="6"></circle>
19 |             <circle cx="8" cy="8" r="6" class="VFMrX"></circle>
20 |           </g>
21 |         </svg>
22 |       </button>
23 |     </form>
24 |   </div>
25 | </template>
26 | 
27 | <script setup lang="ts">
28 | definePageMeta({
29 |   layout: 'auth',
30 | });
31 | useHead({
32 |   title: 'Forgot Password | supaAuth',
33 | });
34 | const email = ref('');
35 | const client = useSupabaseClient();
36 | const loading = ref(false);
37 | const authSuccess = ref('');
38 | const authError = ref('');
39 | 
40 | const resetPassword = async () => {
41 |   loading.value = true;
42 |   const { error } = await client.auth.resetPasswordForEmail(email.value, {
43 |     redirectTo: `${window.location.origin}/new-password`,
44 |   });
45 |   if (error) {
46 |     loading.value = false;
47 |     authError.value = error.message;
48 |     setTimeout(() => {
49 |       authError.value = '';
50 |     }, 5000);
51 |   } else {
52 |     loading.value = false;
53 |     authSuccess.value = `We've sent your an email.`;
54 |     setTimeout(() => {
55 |       authSuccess.value = '';
56 |     }, 5000);
57 |   }
58 | };
59 | 
60 | const clearError = () => {
61 |   authError.value = '';
62 | };
63 | 
64 | const clearSuccess = () => {
65 |   authSuccess.value = '';
66 | };
67 | </script>
68 | 


--------------------------------------------------------------------------------
/app/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="relative z-10 max-w-screen-sm">
 3 |     <p v-if="user" class="fVeafc in">Hi {{ user.user_metadata.first_name }}</p>
 4 |     <p v-else class="fVeafc">unauthenticated</p>
 5 |     <h1 class="kKxhrq">
 6 |       Nuxt3 + Supabase
 7 |       <br />
 8 |       Starter Template
 9 |     </h1>
10 |     <p class="kRTmDC">
11 |       Authentication template with email and password, using Supabase. If you want to a quick start to your next Nuxt3 app, please feel free to use this template.
12 |     </p>
13 |     <div class="uQxNj" v-if="user">
14 |       <button @click="logout" class="ieMfVH" :disabled="loading">
15 |         <span class="fKlELC" :class="{ loading: loading }">Log out</span>
16 |         <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="jjoFVh" :class="{ loading: loading }">
17 |           <g fill="none" stroke-width="1.5" stroke-linecap="round" class="faEWLr" style="stroke: var(--icon-color)">
18 |             <circle stroke-opacity=".2" cx="8" cy="8" r="6"></circle>
19 |             <circle cx="8" cy="8" r="6" class="VFMrX"></circle>
20 |           </g>
21 |         </svg>
22 |       </button>
23 |     </div>
24 |     <div class="uQxNj" v-else>
25 |       <NuxtLink class="bQRHNT" to="/login">
26 |         <span class="fKlELC">
27 |           Login
28 |           <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="taKtSf">
29 |             <path class="chevron" d="M8 13L13 8L8 3" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"></path>
30 |             <path class="stem" d="M12 8L2 8" stroke-width="1.5"></path>
31 |           </svg>
32 |         </span>
33 |       </NuxtLink>
34 |       <NuxtLink to="/register">
35 |         <button class="ieMfVH">
36 |           <span class="fKlELC">Sign up</span>
37 |         </button>
38 |       </NuxtLink>
39 |     </div>
40 |   </div>
41 | </template>
42 | 
43 | <script setup lang="ts">
44 | const client = useSupabaseClient();
45 | const user = useSupabaseUser();
46 | const loading = ref(false);
47 | 
48 | const logout = async () => {
49 |   loading.value = true;
50 |   const { error } = await client.auth.signOut();
51 |   if (error) {
52 |     loading.value = false;
53 |     return alert('Something went wrong !');
54 |   }
55 | };
56 | 
57 | useHead({
58 |   title: 'supaAuth',
59 |   meta: [
60 |     {
61 |       name: 'description',
62 |       content: 'Authentication template with email and password, using Supabase. If you want to a quick start to your next Nuxt3 app, please feel free to use this template.',
63 |     },
64 |   ],
65 | });
66 | </script>
67 | 


--------------------------------------------------------------------------------
/app/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="DaoRb">
 3 |     <h1 class="eSHwvX">Sign in</h1>
 4 |     <form @submit.prevent="login">
 5 |       <ErrorAlert :error-msg="authError" @clearError="clearError" />
 6 |       <div class="jGQTZC">
 7 |         <label class="iJLvzO">
 8 |           <div class="fdCSlG">
 9 |             <input class="cmCuLh" type="text" placeholder="Email address" v-model="email" />
10 |           </div>
11 |         </label>
12 |         <label class="iJLvzO">
13 |           <div class="fdCSlG">
14 |             <input class="cmCuLh" type="password" placeholder="Password" v-model="password" />
15 |           </div>
16 |         </label>
17 |       </div>
18 |       <div class="jGQTZC">
19 |         <button class="gZMQdu" type="submit" :disabled="loading">
20 |           <div class="bjhGPG" :class="{ loading: loading }">Sign in</div>
21 |           <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="jjoFVh" :class="{ loading: loading }">
22 |             <g fill="none" stroke-width="1.5" stroke-linecap="round" class="faEWLr" style="stroke: var(--icon-color)">
23 |               <circle stroke-opacity=".2" cx="8" cy="8" r="6"></circle>
24 |               <circle cx="8" cy="8" r="6" class="VFMrX"></circle>
25 |             </g>
26 |           </svg>
27 |         </button>
28 |         <NuxtLink to="/forgot-password" class="fTZPOV">Forgot your password?</NuxtLink>
29 |       </div>
30 |     </form>
31 |     <div class="jGQTZC">
32 |       <p class="dEDhcH">Don’t have a SupaAuth account?</p>
33 |       <NuxtLink to="/register">
34 |         <button class="lcqpaS">
35 |           <div class="bjhGPG">Create new account</div>
36 |         </button>
37 |       </NuxtLink>
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <script setup lang="ts">
43 | definePageMeta({
44 |   layout: 'auth',
45 | });
46 | useHead({
47 |   title: 'Login | supaAuth',
48 | });
49 | const user = useSupabaseUser();
50 | const loading = ref(false);
51 | const authError = ref('');
52 | const email = ref('');
53 | const password = ref('');
54 | const client = useSupabaseClient();
55 | 
56 | watchEffect(async () => {
57 |   if (user.value) {
58 |     await navigateTo('/');
59 |   }
60 | });
61 | 
62 | const login = async () => {
63 |   loading.value = true;
64 |   const { error } = await client.auth.signInWithPassword({
65 |     email: email.value,
66 |     password: password.value,
67 |   });
68 |   if (error) {
69 |     loading.value = false;
70 |     authError.value = error.message;
71 |     setTimeout(() => {
72 |       authError.value = '';
73 |     }, 5000);
74 |   }
75 | };
76 | 
77 | const clearError = () => {
78 |   authError.value = '';
79 | };
80 | </script>
81 | 


--------------------------------------------------------------------------------
/app/pages/new-password.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="DaoRb">
 3 |     <h1 class="eSHwvX">New password</h1>
 4 |     <form @submit.prevent="updatepassword">
 5 |       <ErrorAlert :error-msg="authError" @clearError="clearError" />
 6 |       <SuccessAlert :success-msg="authSuccess" @clearSuccess="clearSuccess" />
 7 |       <div class="jGQTZC">
 8 |         <label class="iJLvzO">
 9 |           <div class="fdCSlG">
10 |             <input class="cmCuLh" type="password" placeholder="Password" v-model="password" />
11 |           </div>
12 |         </label>
13 |         <label class="iJLvzO">
14 |           <div class="fdCSlG">
15 |             <input class="cmCuLh" type="password" placeholder="Repeat" v-model="passwordConfirm" />
16 |           </div>
17 |         </label>
18 |       </div>
19 |       <div class="jGQTZC">
20 |         <button class="gZMQdu" type="submit" :disabled="loading">
21 |           <div class="bjhGPG" :class="{ loading: loading }">Save</div>
22 |           <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="jjoFVh" :class="{ loading: loading }">
23 |             <g fill="none" stroke-width="1.5" stroke-linecap="round" class="faEWLr" style="stroke: var(--icon-color)">
24 |               <circle stroke-opacity=".2" cx="8" cy="8" r="6"></circle>
25 |               <circle cx="8" cy="8" r="6" class="VFMrX"></circle>
26 |             </g>
27 |           </svg>
28 |         </button>
29 |       </div>
30 |     </form>
31 |   </div>
32 | </template>
33 | 
34 | <script setup lang="ts">
35 | definePageMeta({
36 |   layout: 'auth',
37 | });
38 | useHead({
39 |   title: 'New Password | supaAuth',
40 | });
41 | const password = ref('');
42 | const passwordConfirm = ref('');
43 | const client = useSupabaseClient();
44 | const loading = ref(false);
45 | const authSuccess = ref('');
46 | const authError = ref('');
47 | 
48 | const updatepassword = async () => {
49 |   if (password.value !== passwordConfirm.value) return (authError.value = 'Password mismatch!');
50 |   loading.value = true;
51 |   const { error } = await client.auth.updateUser({
52 |     password: password.value,
53 |   });
54 |   await client.auth.signOut();
55 |   if (error) {
56 |     loading.value = false;
57 |     authError.value = error.message;
58 |     setTimeout(() => {
59 |       authError.value = '';
60 |     }, 5000);
61 |   } else {
62 |     loading.value = false;
63 |     authSuccess.value = `Password changed`;
64 |     setTimeout(() => {
65 |       authSuccess.value = '';
66 |       navigateTo('/login');
67 |     }, 5000);
68 |   }
69 | };
70 | 
71 | const clearError = () => {
72 |   authError.value = '';
73 | };
74 | 
75 | const clearSuccess = () => {
76 |   authSuccess.value = '';
77 |   navigateTo('/login');
78 | };
79 | </script>
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ⚡ Supabase + Nuxt 4 Authentication Starter
 2 | 
 3 | > A modern and secure authentication boilerplate built with the latest versions of **Nuxt 4** and **Supabase**. Provides out-of-the-box support for user registration and login functionality, ideal for rapidly initializing new full-stack projects.
 4 | 
 5 | ## 🆕 Changelog
 6 | 
 7 | - Migrated to **Nuxt 4** using the new `nuxt` package
 8 | - Integrated **latest Supabase JavaScript client** (`@supabase/supabase-js`)
 9 | - Switched to **pnpm** as the preferred package manager for faster, disk-efficient installs
10 | 
11 | ## 🚀 Live Demonstrations
12 | 
13 | | Deployment Platform | Live URL                                                                 |
14 | | ------------------- | ------------------------------------------------------------------------ |
15 | | Vercel              | [https://supaauth-nuxt4.vercel.app/](https://supaauth-nuxt4.vercel.app/) |
16 | | NuxtHub             | [https://supaauth.nuxt.dev/](https://supaauth.nuxt.dev/)                 |
17 | 
18 | ## 🖼️ UI Preview
19 | 
20 | <div align="center">
21 |   <img src="https://user-images.githubusercontent.com/79358543/229441570-3ba48ca8-8cf3-4fd4-aac7-2cc5eac67a03.png" width="80%" />
22 |   <br/><br/>
23 |   <img src="https://user-images.githubusercontent.com/79358543/229441594-e7cbec31-726d-4029-96ba-d7631fd3aef5.gif" width="60%" />
24 | </div>
25 | 
26 | ## ✅ Key Features
27 | 
28 | - 🔐 Email/password-based authentication powered by **Supabase Auth**
29 | - 💡 Seamless integration with **Nuxt 4 Composition API**
30 | - 🧱 Minimal and modular architecture, ideal for customization and scaling
31 | - 📱 Fully responsive design for both mobile and desktop
32 | - 🧼 Clean, maintainable codebase with best practices in mind
33 | 
34 | ## ⚙️ Project Setup
35 | 
36 | Ensure you have [Node.js](https://nodejs.org/) and [pnpm](https://pnpm.io) installed.
37 | 
38 | ```bash
39 | # Install dependencies
40 | pnpm install
41 | 
42 | # Start the development server
43 | pnpm dev
44 | ```
45 | 
46 | ## 🔧 Supabase Configuration
47 | 
48 | 1. Create a project via [supabase.com](https://supabase.com).
49 | 2. Go to **Project Settings → API** and retrieve your `SUPABASE_URL` and `SUPABASE_ANON_KEY`.
50 | 3. Create a `.env` file in your project root:
51 | 
52 | ```env
53 | SUPABASE_URL=https://your-project-id.supabase.co
54 | SUPABASE_ANON_KEY=your-anon-key
55 | ```
56 | 
57 | ## 📚 Documentation
58 | 
59 | - [Nuxt 4 Documentation](https://nuxt.com/docs)
60 | - [Supabase Auth Documentation](https://supabase.com/docs/guides/auth)
61 | - [Supabase Client Reference](https://supabase.com/docs/reference/javascript/introduction)
62 | 
63 | ---
64 | 
65 | ## 🧑‍💻 Author
66 | 
67 | **Sefa Bulak**
68 | 📫 Contact: [zckhtln@icloud.com](mailto:zckhtln@icloud.com)
69 | 🐙 GitHub: [github.com/zackhatlen](https://github.com/zackhatlen)
70 | 🐦 Twitter: [@ZHatlen](https://twitter.com/ZHatlen)
71 | 
72 | ---
73 | 
74 | ## 📝 License
75 | 
76 | This project is released under the [MIT License](LICENSE).
77 | 


--------------------------------------------------------------------------------
/app/pages/register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="DaoRb">
  3 |     <h1 class="eSHwvX">Create an account</h1>
  4 |     <form @submit.prevent="signUp">
  5 |       <ErrorAlert :error-msg="authError" @clearError="clearError" />
  6 |       <div class="jGQTZC">
  7 |         <label class="iJLvzO">
  8 |           <div class="fdCSlG">
  9 |             <input class="cmCuLh" type="text" placeholder="First name" v-model="name" />
 10 |           </div>
 11 |         </label>
 12 |         <label class="iJLvzO">
 13 |           <div class="fdCSlG">
 14 |             <input class="cmCuLh" type="text" placeholder="Last name" v-model="lastname" />
 15 |           </div>
 16 |         </label>
 17 |         <label class="iJLvzO">
 18 |           <div class="fdCSlG">
 19 |             <input class="cmCuLh" type="text" placeholder="Company (Optional)" v-model="company" />
 20 |           </div>
 21 |         </label>
 22 |         <label class="iJLvzO">
 23 |           <div class="fdCSlG">
 24 |             <input class="cmCuLh" type="text" placeholder="Email address" v-model="email" />
 25 |           </div>
 26 |         </label>
 27 |         <label class="iJLvzO">
 28 |           <div class="fdCSlG">
 29 |             <input class="cmCuLh" type="password" placeholder="Password" v-model="password" />
 30 |           </div>
 31 |         </label>
 32 |       </div>
 33 |       <div class="jGQTZC">
 34 |         <button class="gZMQdu" type="submit" :disabled="loading">
 35 |           <div class="bjhGPG" :class="{ loading: loading }">Sign up</div>
 36 |           <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="jjoFVh" :class="{ loading: loading }">
 37 |             <g fill="none" stroke-width="1.5" stroke-linecap="round" class="faEWLr" style="stroke: var(--icon-color)">
 38 |               <circle stroke-opacity=".2" cx="8" cy="8" r="6"></circle>
 39 |               <circle cx="8" cy="8" r="6" class="VFMrX"></circle>
 40 |             </g>
 41 |           </svg>
 42 |         </button>
 43 |         <div class="xxEKN">
 44 |           By signing up you agree to our
 45 |           <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer" class="bkFclS">
 46 |             <span>API Terms of Service</span>
 47 |           </a>
 48 |           and
 49 |           <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer" class="bkFclS">
 50 |             <span>Privacy Policy</span>
 51 |           </a>
 52 |           .
 53 |         </div>
 54 |       </div>
 55 |     </form>
 56 |   </div>
 57 | </template>
 58 | 
 59 | <script setup lang="ts">
 60 | definePageMeta({
 61 |   layout: 'auth',
 62 | });
 63 | useHead({
 64 |   title: 'Register | supaAuth',
 65 | });
 66 | const email = ref('');
 67 | const password = ref('');
 68 | const name = ref('');
 69 | const lastname = ref('');
 70 | const company = ref('');
 71 | const client = useSupabaseClient();
 72 | const user = useSupabaseUser();
 73 | const loading = ref(false);
 74 | const authError = ref('');
 75 | 
 76 | watchEffect(async () => {
 77 |   if (user.value) {
 78 |     await navigateTo('/');
 79 |   }
 80 | });
 81 | 
 82 | const signUp = async () => {
 83 |   if (!name.value) return (authError.value = 'First name required');
 84 |   if (!lastname.value) return (authError.value = 'Last name required');
 85 |   loading.value = true;
 86 |   const { error } = await client.auth.signUp({
 87 |     email: email.value,
 88 |     password: password.value,
 89 |     options: {
 90 |       data: {
 91 |         first_name: name.value,
 92 |         last_name: lastname.value,
 93 |         company: company.value,
 94 |       },
 95 |     },
 96 |   });
 97 |   if (error) {
 98 |     loading.value = false;
 99 |     authError.value = 'Failed to fetch';
100 |   }
101 | };
102 | 
103 | const clearError = () => {
104 |   authError.value = '';
105 | };
106 | </script>
107 | 


--------------------------------------------------------------------------------
/app/components/ErrorAlert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Transition name="scale-y">
 3 |     <div v-if="errorMsg">
 4 |       <div class="cOKwvV">
 5 |         <div class="ckmpXq">
 6 |           <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="jXTFjD">
 7 |             <path
 8 |               d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
 9 |               fill="none"
10 |               stroke-width="1.5"
11 |               stroke-linecap="round"
12 |               stroke-linejoin="round"
13 |               style="stroke: var(--icon-color)"></path>
14 |             <path
15 |               fill-rule="evenodd"
16 |               clip-rule="evenodd"
17 |               d="M11.5321 12.5927C11.825 12.8856 12.2998 12.8856 12.5927 12.5927C12.8856 12.2998 12.8856 11.825 12.5927 11.5321L11.0607 10L12.5927 8.46799C12.8856 8.17509 12.8856 7.70022 12.5927 7.40733C12.2998 7.11443 11.825 7.11443 11.5321 7.40733L10 8.93937L8.46795 7.40729C8.17506 7.1144 7.70019 7.1144 7.40729 7.40729C7.1144 7.70019 7.1144 8.17506 7.40729 8.46795L8.93937 10L7.40729 11.5321C7.1144 11.825 7.1144 12.2999 7.40729 12.5928C7.70019 12.8857 8.17506 12.8857 8.46795 12.5928L10 11.0607L11.5321 12.5927Z"
18 |               style="fill: var(--icon-color)"></path>
19 |           </svg>
20 |         </div>
21 |         <p class="cAmQly">{{ errorMsg }}</p>
22 |         <div class="dgcJHV">
23 |           <div class="dVKHAC" @click="clearError">
24 |             <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="jXTFjD">
25 |               <path d="M13.5355 6.46448L6.46445 13.5355" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--icon-color)"></path>
26 |               <path d="M13.5355 13.5355L6.46442 6.46445" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--icon-color)"></path>
27 |             </svg>
28 |           </div>
29 |         </div>
30 |       </div>
31 |     </div>
32 |   </Transition>
33 | </template>
34 | 
35 | <script setup lang="ts">
36 | defineProps<{ errorMsg: String }>();
37 | const emit = defineEmits(['clearError']);
38 | const clearError = () => {
39 |   emit('clearError');
40 | };
41 | </script>
42 | 
43 | <style lang="postcss">
44 | .cOKwvV {
45 |   @apply mb-4 gap-2 text-left flex relative;
46 |   padding: 8px 20px 8px 8px;
47 |   border-radius: 5px;
48 |   background: rgb(255, 255, 255);
49 |   box-shadow: inset 0 0 0 9999px var(--notification-pale), inset 0 0 0 1px var(--notification-light), 0 2px 6px var(--notification-shadow);
50 |   color: var(--notification-dark);
51 |   transition: opacity 0.2s ease 0s;
52 |   --notification-color: #d62b20;
53 |   --notification-dark: #d10000;
54 |   --notification-light: #d62b2066;
55 |   --notification-shadow: #d62b2026;
56 |   --notification-shadow-light: #d62b2014;
57 |   --notification-pale: #d62b201a;
58 |   --notification-transparent: #d62b2000;
59 |   &::before {
60 |     @apply w-40 absolute left-0 top-0 bottom-0 pointer-events-none;
61 |     content: '';
62 |     border-radius: 5px 0px 0px 5px;
63 |     background-image: linear-gradient(120deg, var(--notification-color) 0%, var(--notification-transparent) 55%);
64 |     opacity: 0.15;
65 |   }
66 | }
67 | .ckmpXq {
68 |   @apply w-6 h-6 flex justify-center items-center;
69 |   & svg {
70 |     --icon-color: var(--notification-dark);
71 |     --icon-size: 18px;
72 |   }
73 | }
74 | .cAmQly {
75 |   @apply m-0 leading-6 text-sm font-medium;
76 | }
77 | .dgcJHV {
78 |   @apply ml-auto flex;
79 |   gap: 5px;
80 | }
81 | .dVKHAC {
82 |   @apply cursor-pointer w-6 h-6 p-1 box-border ml-auto -mr-3;
83 |   border-radius: 3px;
84 |   transition: background-color 0.2s ease 0s, transform 0.2s ease 0s;
85 |   & svg {
86 |     --icon-size: 16px;
87 |     --icon-color: var(--notification-dark);
88 |   }
89 |   &:hover {
90 |     background-color: var(--notification-pale);
91 |   }
92 |   &:active {
93 |     transform: scale(0.975);
94 |   }
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/app/components/SuccessAlert.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Transition name="scale-y">
 3 |     <div v-if="successMsg">
 4 |       <div class="cOKwvVs">
 5 |         <div class="ckmpXq">
 6 |           <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="jXTFjD">
 7 |             <path
 8 |               d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
 9 |               fill="none"
10 |               stroke-width="1.5"
11 |               stroke-linecap="round"
12 |               stroke-linejoin="round"
13 |               style="stroke: var(--icon-color)"></path>
14 |             <path
15 |               fill-rule="evenodd"
16 |               clip-rule="evenodd"
17 |               d="M11.5321 12.5927C11.825 12.8856 12.2998 12.8856 12.5927 12.5927C12.8856 12.2998 12.8856 11.825 12.5927 11.5321L11.0607 10L12.5927 8.46799C12.8856 8.17509 12.8856 7.70022 12.5927 7.40733C12.2998 7.11443 11.825 7.11443 11.5321 7.40733L10 8.93937L8.46795 7.40729C8.17506 7.1144 7.70019 7.1144 7.40729 7.40729C7.1144 7.70019 7.1144 8.17506 7.40729 8.46795L8.93937 10L7.40729 11.5321C7.1144 11.825 7.1144 12.2999 7.40729 12.5928C7.70019 12.8857 8.17506 12.8857 8.46795 12.5928L10 11.0607L11.5321 12.5927Z"
18 |               style="fill: var(--icon-color)"></path>
19 |           </svg>
20 |         </div>
21 |         <p class="cAmQly">{{ successMsg }}</p>
22 |         <div class="dgcJHV">
23 |           <div class="dVKHAC" @click="clearSuccess">
24 |             <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="jXTFjD">
25 |               <path d="M13.5355 6.46448L6.46445 13.5355" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--icon-color)"></path>
26 |               <path d="M13.5355 13.5355L6.46442 6.46445" fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="stroke: var(--icon-color)"></path>
27 |             </svg>
28 |           </div>
29 |         </div>
30 |       </div>
31 |     </div>
32 |   </Transition>
33 | </template>
34 | 
35 | <script setup lang="ts">
36 | defineProps<{ successMsg: String }>();
37 | const emit = defineEmits(['clearSuccess']);
38 | const clearSuccess = () => {
39 |   emit('clearSuccess');
40 | };
41 | </script>
42 | 
43 | <style lang="postcss">
44 | .cOKwvVs {
45 |   @apply mb-4 gap-2 text-left flex relative;
46 |   padding: 8px 20px 8px 8px;
47 |   border-radius: 5px;
48 |   background: rgb(255, 255, 255);
49 |   box-shadow: inset 0 0 0 9999px var(--notification-pale), inset 0 0 0 1px var(--notification-light), 0 2px 6px var(--notification-shadow);
50 |   color: var(--notification-dark);
51 |   transition: opacity 0.2s ease 0s;
52 |   --notification-color: #44b48b;
53 |   --notification-dark: #00a165;
54 |   --notification-light: #44b48b66;
55 |   --notification-shadow: #44b48b26;
56 |   --notification-shadow-light: #44b48b14;
57 |   --notification-pale: #44b48b1a;
58 |   --notification-transparent: #44b48b00;
59 |   &::before {
60 |     @apply w-40 absolute left-0 top-0 bottom-0 pointer-events-none;
61 |     content: '';
62 |     border-radius: 5px 0px 0px 5px;
63 |     background-image: linear-gradient(120deg, var(--notification-color) 0%, var(--notification-transparent) 55%);
64 |     opacity: 0.15;
65 |   }
66 | }
67 | .ckmpXq {
68 |   @apply w-6 h-6 flex justify-center items-center;
69 |   & svg {
70 |     --icon-color: var(--notification-dark);
71 |     --icon-size: 18px;
72 |   }
73 | }
74 | .cAmQly {
75 |   @apply m-0 leading-6 text-sm font-medium;
76 | }
77 | .dgcJHV {
78 |   @apply ml-auto flex;
79 |   gap: 5px;
80 | }
81 | .dVKHAC {
82 |   @apply cursor-pointer w-6 h-6 p-1 box-border ml-auto -mr-3;
83 |   border-radius: 3px;
84 |   transition: background-color 0.2s ease 0s, transform 0.2s ease 0s;
85 |   & svg {
86 |     --icon-size: 16px;
87 |     --icon-color: var(--notification-dark);
88 |   }
89 |   &:hover {
90 |     background-color: var(--notification-pale);
91 |   }
92 |   &:active {
93 |     transform: scale(0.975);
94 |   }
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/app/assets/css/tailwind.postcss:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | /** SuisseIntl **/
  6 | @font-face {
  7 |   font-family: 'SuisseIntl';
  8 |   font-weight: 400;
  9 |   font-display: swap;
 10 |   src: url('../fonts/SuisseIntl-Regular.woff2') format('woff2');
 11 | } 
 12 | @font-face {
 13 |   font-family: 'SuisseIntl';
 14 |   font-weight: 500;
 15 |   font-display: swap;
 16 |   src: url('../fonts/SuisseIntl-Medium.woff2') format('woff2');
 17 | } 
 18 | @font-face {
 19 |   font-family: 'SuisseIntl';
 20 |   font-weight: 600;
 21 |   font-display: swap;
 22 |   src: url('../fonts/SuisseIntl-SemiBold.woff2') format('woff2');
 23 | }
 24 | 
 25 | body, html {
 26 |   @apply h-full overflow-hidden
 27 | }
 28 | body {
 29 |   @apply text-base m-0 leading-[1.6]
 30 | }
 31 | .buJnuC {
 32 |   @apply bg-fcfcfc text-12161e h-full;
 33 |   font-family: 'Inter', sans-serif;
 34 |   line-height: 1.6;
 35 | }
 36 | .fvfNpo {
 37 |   @apply bg-fcfcfc text-12161e h-screen overflow-y-auto relative
 38 | }
 39 | .uXyMu {
 40 |   @apply relative min-h-screen flex justify-center items-center box-border;
 41 |   padding: clamp(80px, 9vh, 200px) 0px
 42 | }
 43 | .fNAZQD {
 44 |   @apply relative flex-grow
 45 | }
 46 | .dgrFox {
 47 |   @apply max-w-75 w-full my-0 mx-auto py-0 px-5 box-border
 48 | }
 49 | .DaoRb {
 50 |   @apply grid gap-8 text-center
 51 | }
 52 | .jGQTZC {
 53 |   @apply grid gap-4 [&:not(:last-child)]:mb-6
 54 | }
 55 | .iJLvzO {
 56 |   @apply text-656976 bg-[var(--input-background,#f7f7f7)] block relative py-2.25 px-3 text-base cursor-text transition-all duration-200;
 57 |   box-shadow: inset 0 0 0 var(--input-border,1px) var(--input-border-color,#f1f1f2), 0 0 0 var(--input-outline,0px) var(--input-outline-color,transparent);
 58 |   border-radius: 5px;
 59 |   &:hover {
 60 |     --input-background: #f1f1f2;
 61 |     --input-border-color: #e3e3e5
 62 |   }
 63 |   &:focus-within {
 64 |     --input-background: #fff;
 65 |     --input-border-color: #5c89de;
 66 |     --input-outline: 2px;
 67 |     --input-outline-color: #5c89de26
 68 |   }
 69 | }
 70 | .iJLvzO input {
 71 |   @apply placeholder:transition-all placeholder:duration-200 placeholder:text-c2c3c7 hover:placeholder-91949b placeholder:focus-within:text-91949b
 72 | }
 73 | .fdCSlG {
 74 |   @apply relative flex items-center
 75 | }
 76 | .cmCuLh {
 77 |   @apply w-full block h-[22px] leading-[22px] m-0 p-0 text-inherit tracking-[-0.125px] appearance-none bg-[initial] border-none outline-none
 78 | }
 79 | .gZMQdu {
 80 |   box-shadow: 0 0 0 var(--button-outline,0px) var(--button-outline-color,#5c89de4d), inset 0 -1px 1px 0px var(--button-inner-shadow,rgba(38 38 44 / 15%)), inset 0 var(--button-shine-y,1px) 0 0 var(--button-shine,rgba(255 255 255 / 25%)), 0 1px 2px 0 var(--button-shadow,rgba(38 38 44 / 25%));
 81 |   @apply text-white bg-[var(--button-background,#5c89de)] table border-none relative font-semibold text-sm m-0 outline-none select-none whitespace-nowrap text-center appearance-none rounded-[5px] leading-5 tracking-[-0.125px] py-[10px] px-6 cursor-pointer transition scale-[var(--button-scale,1)] w-full duration-200;
 82 |   &:hover {
 83 |     --button-shadow: rgba(38 38 44 / 50%);
 84 |     --button-background: #3577da
 85 |   }
 86 |   &:active {
 87 |     --button-outline: 3px;
 88 |     --button-scale: 0.975
 89 |   }
 90 | }
 91 | .bjhGPG {
 92 |   @apply relative z-10 flex justify-center items-center gap-2 min-h-[1.25rem];
 93 |   transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
 94 |   &.loading {
 95 |     opacity: 0;
 96 |     transform: translateY(12px) scale(0.75);
 97 |   }
 98 | }
 99 | .fTZPOV {
100 |   @apply no-underline transition-colors duration-200 text-xs font-medium m-0 leading-normal text-[#b3b5b9] hover:text-[#91949b]
101 | }
102 | .eSHwvX {
103 |   @apply font-[inherit] m-0 leading-[1.4] tracking-[-0.125px] text-[#12161e] font-semibold text-xl
104 | }
105 | .dEDhcH {
106 |   @apply m-0 leading-normal text-[#656976] text-sm font-medium
107 | }
108 | .lcqpaS {
109 |   --button-border-radius: 5px;
110 |   @apply text-[#656976] bg-[var(--button-background,#eeefef)] table border-none relative font-semibold text-sm m-0 outline-none select-none whitespace-nowrap text-center appearance-none rounded-[var(--button-border-radius)] leading-5 tracking-[-0.125px] py-[10px] px-6 cursor-pointer transition scale-[var(--button-scale,1)] w-full duration-300;
111 |   &:before {
112 |     @apply bg-white absolute inset-[1.34px] rounded-[calc(var(--button-border-radius)-1px)] shadow-[rgba(38,38,44,10%)_0_2px_4px];
113 |     content: '';
114 |   }
115 |   &:hover {
116 |     --button-background: #e3e3e5
117 |   }
118 |   &:active {
119 |   --button-scale: 0.975
120 |   }
121 | }
122 | .cyDNyc {
123 |   @apply transition duration-200 m-0 absolute z-10 left-2/4 text-center translate-x-[-50%] bottom-6 text-[10px] max-w-[260px] text-[#c2c3c7]
124 | }
125 | .cyDNyc a {
126 |   @apply no-underline	transition duration-200 text-[#a3a5ab] hover:text-[#656976]
127 | }
128 | .gxYQch {
129 |   @apply z-10 fixed left-0 top-0 right-0 p-6 box-border flex items-center justify-between transition-all duration-200
130 | }
131 | .jjabJD svg {
132 |   --icon-color: currentColor;
133 |   --icon-size: 20px;
134 |   @apply flex-[0_0_20px]
135 | }
136 | .jXTFjD {
137 |   @apply w-[var(--icon-size)] h-[var(--icon-size)]
138 | }
139 | .fvEvSO {
140 |   @apply relative z-10 flex items-center gap-2 min-h-[20px] transition duration-200
141 | }
142 | .jjabJD {
143 |   @apply text-[var(--button-color,#91949b)] relative text-sm font-[inherit] tracking-[-0.125px] py-[10px] pr-4 pl-3 font-semibold scale-[var(--button-scale,1)] transition duration-200 opacity-100;
144 |   &:hover {
145 |     --button-color: #656976
146 |   }
147 |   &:active {
148 |     --button-scale: 0.975
149 |   }
150 |   &.router-link-exact-active {
151 |     @apply pointer-events-none opacity-0
152 |   }
153 | }
154 | .xxEKN {
155 |   @apply text-left text-xs font-medium text-91949b
156 | }
157 | .bkFclS {
158 |   @apply font-medium bg-none border-none inline 
159 |   cursor-pointer p-0 m-0 relative leading-5 
160 |   no-underline text-current;
161 |   --line-background-size: 100%;
162 |   --line-background-delay: 0.15s;
163 |   --line-stroke-dashoffset: 46;
164 |   --line-stroke-duration: 0.15s;
165 |   --line-stroke-easing: linear;
166 |   --line-stroke-delay: 0s;
167 |   font-style: inherit;
168 |   font-variant: inherit;
169 |   font-stretch: inherit;
170 |   font-size: inherit;
171 |   font-family: inherit;
172 |   font-optical-sizing: inherit;
173 |   font-kerning: inherit;
174 |   font-feature-settings: inherit;
175 |   font-variation-settings: inherit;
176 |   &:hover {
177 |     --line-background-size: 0%;
178 |     --line-background-delay: 0s;
179 |     --line-stroke-dashoffset: 26;
180 |     --line-stroke-duration: 0.3s;
181 |     --line-stroke-easing: cubic-bezier(0.3,1.5,0.5,1);
182 |     --line-stroke-delay: 0.195s;
183 |   }
184 |   & span {
185 |     background-image: linear-gradient(0deg, currentcolor 0%, currentcolor 100%);
186 |     background-position: 100% 100%;
187 |     background-repeat: no-repeat;
188 |     background-size: var(--line-background-size) 1px;
189 |     transition: background-size 0.2s linear var(--line-background-delay);
190 |     transform: translateZ(0px);
191 |     line-height: 20px;
192 |   }
193 | }
194 | .fVeafc {
195 |   @apply text-base leading-5 font-semibold mb-3 text-232730;
196 |   letter-spacing: -.01em;
197 |   &:before {
198 |     @apply w-2 h-4 mr-2 inline-block relative top-0.5;
199 |     border-radius: 1px;
200 |     background: linear-gradient(165deg,#cd4545 0%,#e97e7e 92%);
201 |     content: '';
202 |   }
203 |   &.in::before {
204 |     background: linear-gradient(165deg,#50cd45 0%,#82e97e 92%);
205 |   }
206 | }
207 | .kKxhrq {
208 |   @apply text-7xl text-12161e font-semibold mt-8;
209 |   line-height: 4.5rem;
210 |   letter-spacing: -.03em;
211 | }
212 | .kRTmDC {
213 |   @apply text-2xl leading-8 text-575a64 mt-2;
214 |   letter-spacing: -.01em;
215 |   font-weight: inherit;
216 | }
217 | .uQxNj {
218 |   @apply flex gap-3 mt-4;
219 | }
220 | .bQRHNT {
221 |   @apply relative text-white rounded-lg px-4 h-9 m-px font-medium outline-none whitespace-nowrap 
222 |   cursor-pointer text-center leading-4 items-center justify-center inline-flex;
223 |   background-color: rgba(17,26,74,1);
224 |   box-shadow: 0 0 0 1px rgba(17,26,74,1),0 2px 4px rgba(0,0,0,0.25),0 1px 2px rgba(0,0,0,0.25);
225 |   transition: box-shadow 0.2s ease 0s, background-color 0.2s ease 0s, border-color 0.2s ease 0s;
226 |   min-height: 36px;
227 |   &::after {
228 |     @apply inset-0 absolute opacity-10 rounded-lg block;
229 |     content: '';
230 |     background-image: linear-gradient(180deg,rgba(255,255,255,1),rgba(255,255,255,0) 100%);
231 |     transition: opacity 0.5s ease 0s;
232 |   }
233 |   &:hover {
234 |     @apply cursor-pointer;
235 |     .chevron, .stem {
236 |       transform: translateX(0px);
237 |     }
238 |     .stem {
239 |       stroke-dashoffset: 0;
240 |     }
241 |     &::after {
242 |       opacity: 0.15;
243 |     }
244 |   }
245 |   &:active {
246 |     box-shadow: 0 0 0 1px rgba(17,26,74,1),0 1px 3px rgba(0,0,0,0.15),0 0 0 0 rgba(212,227,247,1);
247 |     .chevron, .stem {
248 |       transform: translateX(2px);
249 |     }
250 |     &::after {
251 |       opacity: 0.05;
252 |     }
253 |   }
254 | }
255 | .fKlELC {
256 |   @apply text-sm gap-1 items-center flex z-10 relative mt-0.5;
257 |   transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
258 |   &.loading {
259 |     opacity: 0;
260 |     transform: translateY(12px) scale(0.75);
261 |   }
262 | }
263 | .taKtSf {
264 |   @apply h-4 stroke-current inline-block -mr-1 mb-0.5;
265 |   .chevron {
266 |     transform: translateX(-3px);
267 |     transition: transform 0.15s ease 0s;
268 |   }
269 |   .stem {
270 |     stroke-dasharray: 10;
271 |     stroke-dashoffset: 10;
272 |     transform: translateX(-3px);
273 |     transition: stroke-dashoffset 0.15s ease 0s, transform 0.15s ease 0s;
274 |   }
275 | }
276 | .ieMfVH {
277 |   @apply relative text-232730 rounded-lg px-4 h-9 m-px font-medium outline-none whitespace-nowrap 
278 |   cursor-pointer text-center leading-4 items-center justify-center inline-flex;
279 |   background-color: rgba(255,255,255,0.5);
280 |   backdrop-filter: blur(2px);
281 |   box-shadow: 0 1px 1px rgba(255,255,255,0),0 0 0 1px rgba(87,90,100,0.12);
282 |   transition: box-shadow 0.2s ease 0s, background-color 0.2s ease 0s, border-color 0.2s ease 0s;
283 |   &:hover {
284 |     background-color: rgba(255,255,255,1);
285 |     box-shadow: 0 1px 1px rgba(0,0,0,0.15),0 0 0 1px rgba(87,90,100,0.2);
286 |   }
287 | }
288 | .background-gradient {
289 |   @apply absolute top-1/2 hue-rotate-0;
290 |   width: 150vw;
291 |   left: 80%;
292 |   height: 1024px;
293 |   transform: translate3d(-50%, -50%, 0px);
294 |   -webkit-mask-image: radial-gradient(farthest-side at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
295 |   mask-image: radial-gradient(farthest-side at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
296 |   background-image: linear-gradient(90deg,rgba(126,167,233,1),rgba(148,239,183,1));
297 |   animation-name: background-gradient-animation;
298 |   animation-duration: 8s;
299 |   animation-iteration-count: infinite;
300 |   @keyframes background-gradient-animation {
301 | 	  0% {filter: hue-rotate(15deg)}
302 | 	  50% {filter: hue-rotate(-80deg)}
303 | 	  100% {filter: hue-rotate(15deg)}
304 |   }
305 | }
306 | .background-gradient-pattern {
307 |   @apply absolute inset-0 mix-blend-overlay;
308 |   background-image: url('/img/guilloche.svg');
309 |   background-size: 20px;
310 | }
311 | 
312 | 
313 | .gZMQdu svg,
314 | .ieMfVH svg {
315 |   --icon-color: currentColor;
316 |   --icon-size: 20px;
317 |   flex: 0 0 20px;
318 | }
319 | .jjoFVh {
320 |   @apply absolute left-1/2 top-1/2 opacity-0 block;
321 |   margin: -10px 0px 0px -10px;
322 |   transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
323 |   transform: translateY(-12px) scale(0.75);
324 |   width: var(--icon-size);
325 |   height: var(--icon-size);
326 |   opacity: 0;
327 |   &.loading {
328 |     transform: none;
329 |     opacity: 1;
330 |   }
331 | }
332 | .faEWLr {
333 |   animation: 1s linear 0s infinite normal none running rotate;
334 |   transform-origin: 50% 50%;
335 |   @keyframes rotate {
336 | 	  0% {transform: rotate(0deg)}
337 | 	  100% {transform: rotate(360deg)}
338 |   }
339 | }
340 | .VFMrX {
341 |   stroke-dasharray: 38px;
342 |   stroke-dashoffset: 114px;
343 |   animation: 2s linear 0s infinite normal none running offset;
344 |   @keyframes offset {
345 |     50% {stroke-dashoffset: 96px}
346 |   }
347 | }
348 | 


--------------------------------------------------------------------------------
/public/img/guilloche.svg:
--------------------------------------------------------------------------------
 1 | <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |   <g clip-path="url(#repeat-pattern__clip0_1775:55502)" stroke="#000" stroke-miterlimit="10">
 3 |     <path d="M13.5 0a5.988 5.988 0 01-1.753 4.243L8 8l-3.747 3.757A5.988 5.988 0 002.5 16v0a5.988 5.988 0 001.753 4.243L8 24l3.747 3.757A5.989 5.989 0 0113.5 32m5-32a5.988 5.988 0 001.753 4.243L24 8l3.747 3.757A5.989 5.989 0 0129.5 16v0a5.988 5.988 0 01-1.753 4.243L24 24l-3.747 3.757A5.989 5.989 0 0018.5 32"/>
 4 |     <path d="M32 2.5a5.988 5.988 0 00-4.243 1.753L24 8l-3.757 3.747A5.989 5.989 0 0116 13.5v0a5.988 5.988 0 01-4.243-1.753L8 8 4.243 4.253A5.988 5.988 0 000 2.5m32 27a5.988 5.988 0 01-4.243-1.753L24 24l-3.757-3.747A5.989 5.989 0 0016 18.5v0a5.988 5.988 0 00-4.243 1.753L8 24l-3.757 3.747A5.989 5.989 0 010 29.5"/>
 5 |   </g>
 6 |   <defs>
 7 |     <clipPath id="repeat-pattern__clip0_1775:55502">
 8 |       <path fill="#fff" d="M0 0h32v32H0z"/>
 9 |     </clipPath>
10 |   </defs>
11 | </svg>
12 | 
13 | 
14 | <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
15 |   <defs/>
16 |   <g clip-path="url(#Frame__clip0)">
17 |     <path d="M0 5.456v.548a3.238 3.238 0 001.453-.84l1.63-1.628 1.63 1.628a2.714 2.714 0 01.802 1.933 2.713 2.713 0 01-.802 1.933l-1.63 1.628-1.63-1.628A3.239 3.239 0 000 8.19v.552a2.72 2.72 0 011.083.661l1.63 1.628-1.755 1.753a3.234 3.234 0 00-.956 2.304 3.233 3.233 0 00.956 2.305l1.755 1.753-1.63 1.624a2.715 2.715 0 01-1.082.664v.548a3.24 3.24 0 001.453-.84l1.63-1.628 1.63 1.628a2.713 2.713 0 01.803 1.933 2.713 2.713 0 01-.802 1.933l-1.63 1.628-1.631-1.628A3.238 3.238 0 000 24.168v.549c.408.133.779.361 1.082.666l1.63 1.627-1.755 1.753a3.232 3.232 0 00-.956 2.305 3.236 3.236 0 00.956 2.304l1.755 1.752-1.63 1.629A2.73 2.73 0 010 37.416v.548a3.246 3.246 0 001.453-.84l1.63-1.628 1.63 1.629a2.712 2.712 0 01.803 1.932 2.71 2.71 0 01-.802 1.932l-1.63 1.63-1.631-1.63A3.237 3.237 0 000 40.151v.548c.408.132.779.36 1.082.663l1.63 1.628-1.755 1.752a3.235 3.235 0 00-.956 2.304 3.236 3.236 0 00.956 2.306l1.755 1.752-1.63 1.628c-.303.303-.674.53-1.082.663v.548a3.237 3.237 0 001.453-.839l1.63-1.629 1.63 1.629a2.711 2.711 0 01.803 1.932 2.712 2.712 0 01-.802 1.933l-1.63 1.628-1.631-1.628A3.238 3.238 0 000 56.129v.549c.408.133.778.36 1.082.663l1.63 1.628-1.755 1.752a3.234 3.234 0 00-.956 2.305c0 .33.05.659.148.974h.557a2.73 2.73 0 01.028-2.02c.137-.332.34-.633.594-.887l1.756-1.753 1.755 1.753a3.27 3.27 0 004.615 0l1.63-1.628 1.63 1.628a2.715 2.715 0 01.802 1.933c0 .333-.06.663-.18.974h.558a3.263 3.263 0 00-.808-3.279l-1.63-1.628 1.755-1.752a2.742 2.742 0 013.87 0l1.63 1.628-1.755 1.752a3.235 3.235 0 00-.954 2.305c0 .33.05.659.148.974h.557a2.73 2.73 0 01.028-2.02 2.72 2.72 0 01.595-.887l1.755-1.753 1.756 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.717 2.717 0 01.802 1.933c0 .333-.06.663-.18.974h.558a3.266 3.266 0 00-.101-2.223 3.237 3.237 0 00-.712-1.056l-1.63-1.628 1.755-1.752a2.743 2.743 0 013.872 0l1.629 1.628-1.754 1.752a3.236 3.236 0 00-.957 2.305c0 .33.05.659.149.974h.557a2.73 2.73 0 01.622-2.907l1.755-1.753 1.758 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.717 2.717 0 01.803 1.933c0 .333-.061.663-.18.974h.557a3.264 3.264 0 00-.808-3.279l-1.63-1.63 1.756-1.753a2.742 2.742 0 013.87 0l1.63 1.628-1.755 1.753A3.234 3.234 0 0048 63.023c0 .33.05.659.148.974h.556a2.73 2.73 0 01.623-2.904l1.755-1.753 1.756 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.711 2.711 0 01.802 1.933c0 .333-.06.663-.178.974h.556a3.266 3.266 0 00-.807-3.279l-1.63-1.63 1.754-1.753a2.743 2.743 0 012.79-.663v-.542a3.266 3.266 0 00-3.16.84l-1.757 1.752-1.755-1.753a2.716 2.716 0 01-.801-1.932 2.712 2.712 0 01.8-1.933l1.756-1.753 1.756 1.753a3.265 3.265 0 003.161.839v-.548a2.743 2.743 0 01-2.79-.663l-1.755-1.753 1.63-1.627a3.237 3.237 0 00.956-2.305 3.238 3.238 0 00-.955-2.305l-1.63-1.627 1.754-1.753a2.743 2.743 0 012.79-.663v-.548a3.265 3.265 0 00-3.16.839l-1.757 1.753-1.755-1.753a2.713 2.713 0 01-.801-1.933 2.713 2.713 0 01.8-1.932l1.756-1.753 1.756 1.753a3.267 3.267 0 003.161.84v-.549a2.743 2.743 0 01-2.79-.663l-1.755-1.753 1.63-1.628a3.237 3.237 0 00.956-2.304 3.235 3.235 0 00-.955-2.305l-1.63-1.628 1.754-1.752a2.742 2.742 0 012.79-.663v-.548a3.267 3.267 0 00-3.16.839l-1.757 1.753-1.755-1.753a2.719 2.719 0 01-.801-1.933 2.715 2.715 0 01.8-1.933l1.756-1.758 1.756 1.753a3.267 3.267 0 003.161.84v-.549a2.742 2.742 0 01-2.79-.664l-1.755-1.752 1.63-1.628a3.236 3.236 0 00.956-2.305 3.235 3.235 0 00-.955-2.304l-1.63-1.628 1.754-1.752A2.742 2.742 0 0164 8.742v-.548a3.266 3.266 0 00-3.16.84l-1.757 1.752-1.755-1.753a2.717 2.717 0 01-.801-1.934 2.717 2.717 0 01.8-1.933l1.756-1.753 1.756 1.753A3.266 3.266 0 0064 6.005v-.55a2.741 2.741 0 01-2.79-.663L59.455 3.04l1.63-1.628A3.24 3.24 0 0061.919 0h-.551a2.717 2.717 0 01-.653 1.041l-1.63 1.629-1.63-1.629a3.27 3.27 0 00-4.615 0l-1.755 1.754-1.756-1.754A2.722 2.722 0 0148.675 0h-.55a3.22 3.22 0 00.831 1.413l1.755 1.753-1.63 1.628a2.742 2.742 0 01-3.87 0L43.456 3.04l1.63-1.628c.394-.391.68-.878.831-1.413h-.55a2.714 2.714 0 01-.653 1.041l-1.63 1.629-1.631-1.629a3.27 3.27 0 00-4.614 0l-1.756 1.754-1.755-1.754A2.714 2.714 0 0132.675 0h-.55c.15.535.437 1.022.832 1.413l1.754 1.753-1.63 1.628a2.743 2.743 0 01-3.87 0L27.454 3.04l1.628-1.628a3.22 3.22 0 00.834-1.413h-.55a2.724 2.724 0 01-.653 1.041l-1.63 1.629-1.631-1.629a3.27 3.27 0 00-4.614 0l-1.756 1.754-1.755-1.754A2.716 2.716 0 0116.675 0h-.55a3.22 3.22 0 00.831 1.413l1.755 1.753-1.63 1.628a2.742 2.742 0 01-3.87 0L11.454 3.04l1.63-1.628A3.24 3.24 0 0013.917 0h-.55a2.717 2.717 0 01-.65 1.041l-1.63 1.629-1.63-1.629a3.27 3.27 0 00-4.615 0L3.087 2.795 1.33 1.04A2.722 2.722 0 01.675 0h-.55a3.22 3.22 0 00.831 1.413l1.755 1.753-1.628 1.628A2.72 2.72 0 010 5.456zm1.328 11.563a2.714 2.714 0 01-.802-1.932 2.713 2.713 0 01.802-1.933l1.755-1.753 1.755 1.753a3.27 3.27 0 004.615 0l1.63-1.628 1.63 1.628a2.711 2.711 0 01.802 1.933 2.712 2.712 0 01-.798 1.937l-1.63 1.628-1.63-1.628a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.76-1.758zm27.386 12.115a2.714 2.714 0 01.801 1.932A2.715 2.715 0 0128.714 33l-1.63 1.628L25.453 33a3.27 3.27 0 00-4.614 0l-1.756 1.753L17.328 33a2.715 2.715 0 01-.802-1.933 2.712 2.712 0 01.802-1.932l1.755-1.754 1.756 1.754a3.27 3.27 0 004.614 0l1.63-1.629 1.63 1.629zm-1.259-2l1.755-1.753a2.743 2.743 0 013.872 0l1.629 1.628-1.754 1.753A3.235 3.235 0 0032 31.066a3.236 3.236 0 00.957 2.305l1.754 1.752-1.63 1.628a2.743 2.743 0 01-3.87 0l-1.756-1.753 1.63-1.627a3.237 3.237 0 00.956-2.305 3.231 3.231 0 00-.958-2.303l-1.628-1.63zm-6.244 6.237a2.743 2.743 0 013.871 0l1.63 1.627-1.755 1.753A3.239 3.239 0 0024 39.056a3.235 3.235 0 00.956 2.304l1.755 1.753-1.63 1.628a2.743 2.743 0 01-3.871 0l-1.755-1.753 1.63-1.628a3.232 3.232 0 00.956-2.304 3.234 3.234 0 00-.956-2.305l-1.63-1.628 1.755-1.752zm4.118 7.617a2.712 2.712 0 01-.802-1.932 2.71 2.71 0 01.802-1.933l1.755-1.753 1.755 1.753a3.27 3.27 0 004.615 0l1.63-1.628 1.63 1.628a2.713 2.713 0 01.802 1.933 2.716 2.716 0 01-.802 1.932l-1.63 1.629-1.63-1.629a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.755-1.753zm11.757.372a3.234 3.234 0 00.956-2.304 3.236 3.236 0 00-.956-2.305l-1.627-1.627 1.754-1.752a2.743 2.743 0 013.872 0L42.715 35l-1.755 1.753a3.236 3.236 0 00-.956 2.304 3.234 3.234 0 00.956 2.304l1.755 1.754-1.63 1.627a2.743 2.743 0 01-3.872 0l-1.754-1.755 1.627-1.627zM41.453 33a3.27 3.27 0 00-4.614 0l-1.755 1.753L33.329 33a2.715 2.715 0 01-.802-1.933 2.71 2.71 0 01.802-1.932l1.755-1.754 1.755 1.755a3.27 3.27 0 004.614 0l1.63-1.629 1.63 1.63a2.712 2.712 0 01.803 1.932A2.716 2.716 0 0144.714 33l-1.63 1.628-1.63-1.63zm-.37-4.237a2.744 2.744 0 01-3.872 0l-1.752-1.752 1.63-1.627a3.234 3.234 0 00.955-2.305 3.236 3.236 0 00-.959-2.308l-1.626-1.624 1.754-1.753a2.744 2.744 0 013.872 0l1.63 1.628-1.758 1.75A3.236 3.236 0 0040 23.077a3.237 3.237 0 00.956 2.305l1.755 1.752-1.63 1.627zm-4.369-7.618a2.715 2.715 0 01.802 1.932 2.717 2.717 0 01-.802 1.933l-1.63 1.628-1.63-1.628a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.755-1.753a2.712 2.712 0 01-.802-1.933 2.713 2.713 0 01.802-1.932l1.755-1.753 1.755 1.753a3.27 3.27 0 004.615 0l1.63-1.628 1.63 1.628zm-11.758-.373A3.24 3.24 0 0024 23.074a3.24 3.24 0 00.956 2.305l1.755 1.752-1.63 1.628a2.744 2.744 0 01-3.87 0l-1.756-1.753 1.63-1.627a3.237 3.237 0 00.956-2.305 3.237 3.237 0 00-.956-2.305l-1.63-1.627 1.755-1.753a2.744 2.744 0 013.872 0l1.63 1.628-1.756 1.752zm-4.242.371a2.715 2.715 0 01.801 1.933 2.717 2.717 0 01-.801 1.933l-1.63 1.628-1.63-1.628a3.27 3.27 0 00-4.615 0l-1.756 1.753-1.755-1.753a2.716 2.716 0 01-.802-1.933 2.715 2.715 0 01.802-1.933l1.755-1.752 1.756 1.752a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628zM13.21 25.38a2.742 2.742 0 013.871 0l1.63 1.628-1.755 1.753a3.233 3.233 0 00-.953 2.307 3.236 3.236 0 00.956 2.304l1.755 1.752-1.63 1.629a2.743 2.743 0 01-3.871 0L11.458 35l1.63-1.628a3.236 3.236 0 00.956-2.304 3.237 3.237 0 00-.956-2.305l-1.63-1.628 1.752-1.755zm-.371 11.742a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.712 2.712 0 01.802 1.932 2.715 2.715 0 01-.801 1.933l-1.63 1.629-1.63-1.63a3.27 3.27 0 00-4.615 0l-1.756 1.754-1.755-1.753a2.712 2.712 0 01-.802-1.933 2.714 2.714 0 01.802-1.932l1.755-1.753 1.756 1.753zm.371 4.237a2.744 2.744 0 013.871 0l1.63 1.628-1.755 1.752a3.236 3.236 0 00-.953 2.307 3.237 3.237 0 00.956 2.306l1.755 1.752-1.63 1.628a2.744 2.744 0 01-3.871 0l-1.755-1.753 1.63-1.627a3.237 3.237 0 00.956-2.306 3.238 3.238 0 00-.956-2.304l-1.63-1.627 1.752-1.756zm4.118 7.618a2.714 2.714 0 01-.802-1.933 2.714 2.714 0 01.802-1.933l1.755-1.753 1.756 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.716 2.716 0 01.802 1.933 2.715 2.715 0 01-.801 1.933l-1.63 1.628-1.631-1.628a3.27 3.27 0 00-4.614 0l-1.756 1.753-1.755-1.753zm11.757.372a3.234 3.234 0 00.956-2.305 3.236 3.236 0 00-.958-2.302l-1.63-1.627 1.755-1.754a2.744 2.744 0 013.872 0l1.631 1.626-1.754 1.752A3.237 3.237 0 0032 47.044a3.236 3.236 0 00.957 2.305L34.71 51.1l-1.63 1.628a2.744 2.744 0 01-3.87 0l-1.756-1.753 1.63-1.627zm4.243-.372a2.714 2.714 0 01-.802-1.933 2.712 2.712 0 01.802-1.933l1.755-1.753 1.756 1.756a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.717 2.717 0 01.803 1.932 2.717 2.717 0 01-.802 1.934l-1.63 1.628-1.631-1.628a3.27 3.27 0 00-4.614 0l-1.756 1.753-1.755-1.756zm11.757.372a3.237 3.237 0 00.956-2.303 3.236 3.236 0 00-.956-2.304l-1.63-1.627 1.756-1.754a2.744 2.744 0 013.87 0l1.63 1.629-1.755 1.752a3.235 3.235 0 00-.955 2.304 3.237 3.237 0 00.956 2.306l1.755 1.752-1.63 1.628a2.744 2.744 0 01-3.871 0l-1.755-1.753 1.63-1.63zm4.368-8.362a3.27 3.27 0 00-4.614 0l-1.755 1.755-1.756-1.752a2.715 2.715 0 01-.801-1.933 2.713 2.713 0 01.801-1.932l1.756-1.753 1.755 1.753a3.27 3.27 0 004.614 0l1.63-1.631 1.63 1.628a2.71 2.71 0 01.803 1.932 2.71 2.71 0 01-.802 1.933l-1.63 1.629-1.631-1.63zm-.372-4.237a2.743 2.743 0 01-3.87 0l-1.755-1.753 1.63-1.627a3.237 3.237 0 00.955-2.302 3.232 3.232 0 00-.956-2.305l-1.63-1.628 1.756-1.752a2.742 2.742 0 013.87 0l1.63 1.627-1.755 1.753a3.23 3.23 0 00-.955 2.305 3.236 3.236 0 00.956 2.304l1.755 1.752-1.63 1.626zm.372-11.742a3.27 3.27 0 00-4.614 0l-1.755 1.756-1.756-1.753a2.716 2.716 0 01-.801-1.933 2.715 2.715 0 01.801-1.933l1.756-1.755 1.755 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.713 2.713 0 01.803 1.933 2.712 2.712 0 01-.802 1.933l-1.63 1.628-1.631-1.629zm-.372-4.238a2.742 2.742 0 01-3.87 0l-1.755-1.752 1.63-1.628a3.233 3.233 0 00.955-2.302 3.234 3.234 0 00-.956-2.304l-1.63-1.628 1.756-1.753a2.742 2.742 0 013.87 0l1.63 1.628-1.755 1.753a3.234 3.234 0 00-.955 2.304 3.234 3.234 0 00.956 2.305l1.755 1.753-1.63 1.624zm-4.367-7.614a2.714 2.714 0 01.802 1.932 2.714 2.714 0 01-.802 1.936l-1.63 1.625-1.631-1.625a3.27 3.27 0 00-4.614 0l-1.756 1.753-1.755-1.753a2.709 2.709 0 01-.802-1.933 2.708 2.708 0 01.802-1.932l1.755-1.753 1.756 1.75a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628zm-11.757-.372A3.236 3.236 0 0032 15.088a3.234 3.234 0 00.957 2.305l1.754 1.753-1.63 1.624a2.743 2.743 0 01-3.87 0l-1.756-1.752 1.63-1.628a3.234 3.234 0 00.956-2.305 3.235 3.235 0 00-.958-2.301l-1.63-1.628 1.755-1.753a2.743 2.743 0 013.872 0l1.629 1.628-1.752 1.753zm-4.243.372a2.715 2.715 0 01.801 1.932 2.713 2.713 0 01-.801 1.933l-1.63 1.628-1.631-1.628a3.27 3.27 0 00-4.614 0l-1.756 1.753-1.755-1.753a2.712 2.712 0 01-.802-1.933 2.712 2.712 0 01.802-1.932l1.755-1.753 1.756 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628zm-11.758-.372a3.233 3.233 0 00-.953 2.304 3.236 3.236 0 00.956 2.305l1.755 1.753-1.633 1.624a2.742 2.742 0 01-3.87 0l-1.756-1.752 1.63-1.628a3.236 3.236 0 00.956-2.305 3.235 3.235 0 00-.956-2.304l-1.63-1.628 1.755-1.752a2.742 2.742 0 013.871 0l1.63 1.627-1.755 1.756zM5.086 25.383a3.238 3.238 0 00.955-2.305 3.238 3.238 0 00-.956-2.308l-1.63-1.627L5.21 17.39a2.744 2.744 0 013.871 0l1.63 1.628-1.755 1.752a3.235 3.235 0 00-.955 2.305 3.236 3.236 0 00.955 2.305l1.755 1.752-1.63 1.628a2.743 2.743 0 01-3.87 0l-1.756-1.753 1.63-1.624zM1.327 33a2.714 2.714 0 01-.802-1.932 2.713 2.713 0 01.802-1.933l1.755-1.754 1.755 1.754a3.27 3.27 0 004.615 0l1.63-1.629 1.63 1.63a2.712 2.712 0 01.802 1.932A2.714 2.714 0 0112.713 33l-1.63 1.628L9.453 33a3.27 3.27 0 00-4.615 0l-1.755 1.753L1.328 33zm3.757 8.361a3.236 3.236 0 00.956-2.304 3.238 3.238 0 00-.956-2.304l-1.63-1.629 1.755-1.752a2.742 2.742 0 013.871 0L10.711 35l-1.755 1.753a3.235 3.235 0 00-.955 2.304 3.234 3.234 0 00.955 2.304l1.755 1.754-1.63 1.627a2.742 2.742 0 01-3.87 0l-1.756-1.755 1.63-1.626zM1.328 48.98a2.715 2.715 0 01-.802-1.934 2.715 2.715 0 01.802-1.932l1.755-1.753 1.755 1.753a3.27 3.27 0 004.615 0l1.63-1.628 1.63 1.628a2.714 2.714 0 01.802 1.932 2.715 2.715 0 01-.802 1.934l-1.63 1.628-1.63-1.628a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.755-1.753zm7.756 11.74a2.744 2.744 0 01-3.871 0l-1.755-1.75 1.63-1.628a3.237 3.237 0 00.956-2.305 3.235 3.235 0 00-.956-2.304l-1.63-1.628 1.755-1.752a2.742 2.742 0 013.87 0l1.63 1.627-1.754 1.753a3.234 3.234 0 00-.956 2.304 3.234 3.234 0 00.956 2.305l1.755 1.752-1.63 1.628zm8.372-3.752a3.27 3.27 0 00-4.614 0l-1.756 1.753-1.756-1.753a2.713 2.713 0 01-.801-1.933 2.714 2.714 0 01.801-1.932l1.756-1.754 1.755 1.754a3.27 3.27 0 004.615 0l1.63-1.629 1.63 1.629a2.713 2.713 0 01.802 1.932 2.715 2.715 0 01-.801 1.933l-1.631 1.628-1.63-1.628zm7.628 3.752a2.744 2.744 0 01-3.871 0l-1.755-1.752 1.63-1.628a3.233 3.233 0 00.956-2.305 3.232 3.232 0 00-.956-2.304l-1.63-1.628 1.755-1.752a2.743 2.743 0 013.871 0l1.63 1.627-1.755 1.753a3.236 3.236 0 00-.956 2.304 3.237 3.237 0 00.956 2.305l1.755 1.752-1.63 1.628zm8.372-3.752a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.755-1.753a2.71 2.71 0 01-.802-1.933 2.708 2.708 0 01.802-1.932l1.755-1.754 1.755 1.754a3.27 3.27 0 004.615 0l1.63-1.629 1.63 1.629a2.715 2.715 0 01.802 1.932 2.713 2.713 0 01-.802 1.933l-1.63 1.628-1.63-1.628zm7.628 3.752a2.744 2.744 0 01-3.871 0l-1.754-1.752 1.63-1.628a3.235 3.235 0 00.955-2.305 3.232 3.232 0 00-.956-2.304l-1.629-1.628 1.754-1.752a2.743 2.743 0 013.872 0l1.63 1.627-1.755 1.753a3.234 3.234 0 00-.956 2.304 3.235 3.235 0 00.956 2.305l1.755 1.752-1.63 1.628zm8.371-3.752a3.27 3.27 0 00-4.614 0l-1.757 1.753-1.756-1.753a2.712 2.712 0 01-.801-1.933 2.716 2.716 0 01.801-1.932l1.756-1.753 1.755 1.753a3.27 3.27 0 004.614 0l1.63-1.629 1.63 1.629a2.71 2.71 0 01.803 1.932 2.71 2.71 0 01-.802 1.933l-1.63 1.628-1.629-1.628zm7.504-4.237a3.234 3.234 0 00-.956 2.304 3.234 3.234 0 00.956 2.305l1.755 1.752-1.63 1.628a2.743 2.743 0 01-3.87 0l-1.756-1.752 1.63-1.628a3.236 3.236 0 00.956-2.305 3.235 3.235 0 00-.956-2.304l-1.63-1.628 1.755-1.752a2.742 2.742 0 013.871 0l1.63 1.627-1.755 1.753zm3.757-7.618a2.714 2.714 0 01.802 1.932 2.715 2.715 0 01-.802 1.934l-1.63 1.628-1.63-1.628a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.758-1.753a2.715 2.715 0 01-.801-1.934 2.715 2.715 0 01.8-1.932l1.757-1.753 1.755 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.633 1.628zm-3.757-8.361a3.234 3.234 0 00-.956 2.304 3.232 3.232 0 00.956 2.304l1.755 1.754-1.63 1.627a2.742 2.742 0 01-3.87 0l-1.758-1.755 1.63-1.628a3.235 3.235 0 00.955-2.305 3.235 3.235 0 00-.955-2.304l-1.63-1.628 1.755-1.752a2.742 2.742 0 013.87 0l1.63 1.627-1.752 1.756zm3.757-7.618a2.712 2.712 0 01.802 1.933A2.714 2.714 0 0160.716 33l-1.63 1.628L57.456 33a3.27 3.27 0 00-4.615 0l-1.755 1.753L49.328 33a2.713 2.713 0 01-.801-1.932 2.713 2.713 0 01.8-1.933l1.757-1.754 1.755 1.754a3.27 3.27 0 004.614 0l1.63-1.629 1.633 1.63zm-3.76-8.365a3.235 3.235 0 00-.955 2.305 3.237 3.237 0 00.955 2.305l1.755 1.752-1.627 1.631a2.744 2.744 0 01-3.87 0l-1.756-1.753 1.63-1.627a3.24 3.24 0 00.956-2.305 3.24 3.24 0 00-.958-2.308l-1.63-1.627 1.755-1.753a2.744 2.744 0 013.87 0l1.63 1.628-1.755 1.752zm3.758-7.617a2.71 2.71 0 01.801 1.932 2.708 2.708 0 01-.801 1.933l-1.63 1.628-1.63-1.622a3.27 3.27 0 00-4.615 0l-1.755 1.753-1.756-1.753a2.715 2.715 0 01-.801-1.933 2.713 2.713 0 01.8-1.935l1.757-1.753 1.755 1.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.625zM53.21 1.413a2.744 2.744 0 013.87 0l1.63 1.628-1.755 1.753A3.237 3.237 0 0056 7.099a3.235 3.235 0 00.955 2.304l1.755 1.753-1.627 1.628a2.743 2.743 0 01-3.87 0l-1.756-1.753 1.63-1.628a3.24 3.24 0 00.953-2.304 3.237 3.237 0 00-.955-2.305l-1.63-1.628 1.755-1.753zm-8.372 3.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.712 2.712 0 01.803 1.933 2.712 2.712 0 01-.802 1.932l-1.63 1.628-1.631-1.628a3.27 3.27 0 00-4.614 0l-1.755 1.753-1.756-1.753a2.715 2.715 0 01-.801-1.932 2.717 2.717 0 01.801-1.933l1.756-1.753 1.755 1.753zM37.21 1.413a2.744 2.744 0 013.871 0l1.63 1.628-1.754 1.753A3.237 3.237 0 0040 7.099a3.237 3.237 0 00.956 2.304l1.755 1.753-1.63 1.628a2.744 2.744 0 01-3.872 0l-1.751-1.753 1.63-1.628A3.236 3.236 0 0038.04 7.1a3.235 3.235 0 00-.956-2.305L35.46 3.166l1.751-1.753zm-8.371 3.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.716 2.716 0 01.802 1.933 2.715 2.715 0 01-.801 1.932l-1.631 1.628-1.63-1.628a3.27 3.27 0 00-4.614 0l-1.756 1.753-1.755-1.753a2.714 2.714 0 01-.802-1.932 2.716 2.716 0 01.802-1.933l1.755-1.753 1.756 1.753zM21.21 1.413a2.744 2.744 0 013.872 0l1.63 1.628-1.756 1.753A3.24 3.24 0 0024 7.099a3.239 3.239 0 00.956 2.304l1.755 1.753-1.63 1.628a2.744 2.744 0 01-3.87 0l-1.756-1.753 1.63-1.628a3.236 3.236 0 00.956-2.304 3.235 3.235 0 00-.956-2.305l-1.63-1.628 1.755-1.753zm-8.37 3.753a3.27 3.27 0 004.614 0l1.63-1.628 1.63 1.628a2.715 2.715 0 01.802 1.933 2.715 2.715 0 01-.801 1.932l-1.63 1.628-1.63-1.628a3.27 3.27 0 00-4.615 0l-1.756 1.753-1.755-1.753A2.715 2.715 0 018.526 7.1a2.716 2.716 0 01.802-1.933l1.755-1.753 1.756 1.753zM5.21 1.413a2.744 2.744 0 013.871 0l1.63 1.628-1.755 1.753a3.236 3.236 0 00-.955 2.305 3.236 3.236 0 00.955 2.304l1.755 1.753-1.63 1.628a2.744 2.744 0 01-3.87 0L3.454 11.03l1.63-1.628A3.238 3.238 0 006.041 7.1a3.238 3.238 0 00-.956-2.305l-1.63-1.628L5.21 1.413z"/>
18 |   </g>
19 |   <defs>
20 |     <clipPath id="Frame__clip0">
21 |       <path fill="#fff" d="M0 0h64v64H0z"/>
22 |     </clipPath>
23 |   </defs>
24 | </svg> -->
25 | 


--------------------------------------------------------------------------------