membership and theme layers

app.vue

@@ -40,8 +40,6 @@ NuxtLayout
 </template>
 
 <style lang="postcss">
-@import url(~/assets/index.postcss);
-
 main a {
   @apply underline
 }
@@ -58,4 +56,94 @@ body {
 .dark body {
   @apply bg-dark-300 transition duration-1000 text-light-200;
 }
+
+.page {
+  transition: all ease-in-out 0.12s;
+}
+
+.page-enter-active,
+.page-leave-active {
+  transition: all ease-in-out 0.12s;
+}
+
+.page-leave-to {
+  opacity: 0.4;
+  filter: blur(0.1rem);
+  transform: translate(-4px, 0px);
+}
+
+.page-enter-from {
+  opacity: 0.4;
+  filter: blur(0.1rem);
+  transform: translate(4px, 0);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+form input {
+  @apply p-2 text-lg rounded bg-light-200 dark-bg-dark-100;
+  flex: 1 1 200px;
+}
+
+form button,
+form button[type="submit"] {
+  @apply p-4 rounded-xl bg-purple-500 shadow-xl text-xl;
+}
+
+form label {
+  @apply p-2 text-lg flex-1 text-right;
+}
+
+pre {
+  @apply p-4 max-w-full;
+}
+
+html {
+  @apply overscroll-y-none;
+  font-family: var(--font-family-base);
+}
+
+.glass {
+  @apply transition bg-light-500/90 dark-bg-dark-500/90 rounded-lg shadow-lg hover-shadow-xl filter backdrop-blur hover-backdrop-blur-xl;
+}
+
+/* Fonts */
+
+:root {
+  --font-family-base: "Commissioner", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  --font-family-mono: "Fira Code", source-code-pro, Menlo, Monaco, Consolas,
+    "Courier New", monospace;
+}
+
+@font-face {
+  font-family: "Commissioner";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""),
+    url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-regular.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-regular.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@font-face {
+  font-family: "Commissioner";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""),
+    url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-700.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+    url("/fonts/commissioner-v3-latin_cyrillic-ext_cyrillic-700.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
 </style>

auth/components/AuthSignup.vue

@@ -26,14 +26,18 @@ const onSubmit = async () => {
 <template lang='pug'>
 .glass.p-4.flex.flex-col.gap-4
   slot  
-    .text-2xl.p-2 Sign Up
   form.p-4.flex.flex-col.gap-4(
     @submit.prevent.stop="onSubmit()")
     .flex.gap-4
       label(for="first_name") First name
       input#first_name(
         type="text"
         v-model="u.first_name")
+    .flex.gap-4
+      label(for="last_name") Last name
+      input#last_name(
+        type="text"
+        v-model="u.last_name")
     .flex.gap-4
       label(for="email") Email
       input#email(

auth/pages/auth/login.vue

@@ -1,5 +1,4 @@
 <script setup>
-import PricePanel from '~/components/PricePanel.vue';
 const email = ref('')
 </script>
 

components/PricePanel.vue → membership/components/PricePanel.vue

@@ -24,6 +24,7 @@ const sending = ref(false)
 const error = ref('')
 
 async function subscribe() {
+  if (!user?.value?.email) return
 
   sending.value = true
 
@@ -54,7 +55,10 @@ async function subscribe() {
 
   slot
 
-  .flex.flex-col.gap-6(style="flex: 2 1 400px")
+  .flex.flex-col.gap-6(
+    style="flex: 2 1 400px"
+
+    )
     .text-xl Choose your plan
     .flex.flex-wrap.gap-4
       .shadow.p-4.border-2.flex.flex-wrap.gap-2.rounded-xl.cursor-pointer.relative(

membership/nuxt.config.js

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

nuxt.config.js

@@ -1,5 +1,5 @@
 export default defineNuxtConfig({
-  extends: ['./auth'],
+  extends: ['./auth', './theme', './membership'],
   app: {
     pageTransition: { name: 'page', mode: 'out-in' }
   },

theme/nuxt.config.js

@@ -0,0 +1 @@
+export default defineNuxtConfig({})