fix: launch

app/app.vue

@@ -19,9 +19,9 @@ const emptyHabits = computed(() => habits.value?.length === 0);
         <HabitCard v-for="habit in habits" :key="habit.id" :habit="habit" />
         <EmptyHabits v-if="emptyHabits" />
       </div>
-      <div v-else class="flex flex-col items-start justify-center gap-7 rounded-3xl border border-neutral-800 bg-neutral-900 p-6">
-        <div class="flex w-5/6 flex-col gap-4">
-          <div class="h-12 w-12 rounded-2xl border-4 border-black/35 bg-green-400 shadow-lg"></div>
+      <Card v-else class="flex flex-col items-start justify-center gap-7">
+        <div class="flex w-5/6 flex-col gap-5">
+          <div class="h-12 w-12 rounded-2xl border-4 border-green-400/30 bg-green-400/50 shadow-lg"></div>
           <div class="text-lg font-medium">Habit Tracker</div>
           <div class="text-3xl font-medium">
             An efficient tool to
@@ -30,14 +30,17 @@ const emptyHabits = computed(() => habits.value?.length === 0);
             <span class="text-green-400">daily habits</span>
           </div>
         </div>
-        <UButton to="/api/auth/github" icon="i-simple-icons-github" label="Login with GitHub" color="black" />
-      </div>
+        <a href="/api/auth/github" class="button">
+          <UIcon name="i-simple-icons-github" class="h-5 w-5" />
+          Continue with GitHub
+        </a>
+      </Card>
     </Transition>
     <AppFooter />
   </Container>
 </template>
 
-<style>
+<style lang="postcss" scoped>
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 250ms;
@@ -47,4 +50,18 @@ const emptyHabits = computed(() => habits.value?.length === 0);
 .fade-leave-to {
   opacity: 0;
 }
+
+.button {
+  box-shadow:
+    inset 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.1),
+    inset -0.5px -0.5px 1px 0px rgba(0, 0, 0, 0.1),
+    rgba(0, 0, 0, 0.2) 0px 3px 10px -5px;
+  @apply flex items-center justify-center gap-2 rounded-full bg-white/10 px-2.5 py-2 text-sm text-white backdrop-blur-sm transition-all;
+  &:active {
+    @apply scale-95;
+  }
+  &:hover {
+    @apply bg-white/20;
+  }
+}
 </style>

app/components/AppFooter.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { format } from 'date-fns';
 const config = useRuntimeConfig();
+const currentYear = format(new Date(), 'yyyy');
 </script>
 
 <template>
-  <div class="flex flex-col items-center text-xs text-neutral-600">
-    <div>Habit v{{ config.public.version }}</div>
-    <a href="https://github.com/zackha/habit" target="_blank">Github</a>
+  <div class="mt-2 flex flex-col items-center justify-between gap-1 text-xs text-neutral-600">
+    <div>
+      <a class="font-semibold" href="https://github.com/zackha/habit" target="_blank">Habit v{{ config.public.version }}</a>
+      - by
+      <a class="font-semibold" href="https://github.com/zackha" target="_blank">Sefa Bulak</a>
+      {{ currentYear }}
+    </div>
   </div>
 </template>

app/components/Card.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="card">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.card {
+  box-shadow:
+    inset 0px 0px 2.5px 0px rgba(255, 255, 255, 0.1),
+    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2),
+    rgba(0, 0, 0, 0.4) 0px 15px 40px -10px;
+  @apply rounded-[2.375rem] p-6 backdrop-blur-xl;
+}
+</style>

app/components/Container.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rmterp">
+  <div class="rmterp" style="background-image: url('/bg/bg1.jpg')">
     <div class="fzypcq">
       <slot />
     </div>
@@ -8,7 +8,7 @@
 
 <style lang="postcss" scoped>
 .rmterp {
-  @apply relative z-10 box-border flex min-h-screen flex-col justify-center;
+  @apply relative z-10 box-border flex min-h-screen flex-col justify-center bg-cover bg-center;
 }
 
 .fzypcq {