Update landing page

frontend/src/layouts/AppLayout.vue

@@ -39,7 +39,7 @@ const progress = computed(() => {
   >
     <div class="flex justify-between items-center flex-1">
       <div class="flex gap-2 items-center">
-        <span class="font-semibold text-xl text-zinc-100">AltLoc</span>
+        <span class="font-semibold text-xl text-zinc-100">ALTLOC</span>
         <AstronautIcon class="size-10 stroke-[4] text-zinc-100" />
       </div>
 
@@ -90,7 +90,7 @@ const progress = computed(() => {
       <Progress v-model="progress" class="flex" />
     </div>
   </div>
-  <div class="relative flex flex-1 flex-col bg-blue-50 h-full">
+  <div class="relative flex flex-1 flex-col bg-blue-50 h-screen">
     <slot />
   </div>
 </template>

frontend/src/layouts/AuthLayout.vue

@@ -17,7 +17,7 @@
             class="mx-auto mb-5 w-full max-w-lg xl:mb-0 xl:max-w-none xl:flex-1"
           >
             <a href="/" class="text-lg font-bold tracking-tight text-zinc-300">
-              AltLoc
+              ALTLOC
             </a>
           </div>
           <div

frontend/src/layouts/MainLayout.vue

@@ -32,8 +32,8 @@ onUnmounted(() => {
     ]"
   >
     <div class="container flex items-center justify-between gap-6">
-      <div class="flex gap-1 items-center">
-        <span class="font-semibold text-xl text-zinc-100">AltLoc</span>
+      <div class="flex gap-2 items-center">
+        <span class="font-semibold text-xl text-zinc-100">ALTLOC</span>
         <AstronautIcon class="size-10 stroke-[4] text-zinc-100" />
       </div>
 

frontend/src/pages/index.vue

@@ -1,93 +1,198 @@
 <script setup lang="ts">
 import MainLayout from "@/layouts/MainLayout.vue";
-// import { buttonVariant } from "@/components/ui/button/";
 import GameControllerIcon from "@/assets/icons/game-controller.svg?component";
 import CommentIcon from "@/assets/icons/comment.svg?component";
-// import ScalesIcon from "@/assets/icons/scales.svg?component";
-// import SpaceShipIcon from "@/assets/icons/space-ship.svg?component";
+import AstronautIcon from "@/assets/icons/astronaut.svg?component";
 </script>
 
 <template>
   <MainLayout>
-    <section class="relative mt-3 p-6 md:px-10">
-      <div class="container flex flex-col gap-12 items-center">
-        <div class="group relative overflow-hidden rounded-3xl max-w-screen-md">
-          <img
-            src="/images/gamification.png"
-            alt="Conference poster"
-            class="aspect-video object-cover w-full h-auto"
-          />
+    <section class="relative mt-12 mb-12 p-3 px-6 md:px-10">
+      <div class="container flex w-auto flex-col gap-1">
+        <div
+          class="flex items-center gap-14 md:gap-10 flex-col md:flex-row justify-around"
+        >
+          <div class="flex-col gap-3">
+            <h1 class="relative text-3xl font-bold text-zinc-700 bottom-8">
+              Switch to gamification mode.
+            </h1>
+            <span class="text-zinc-500">
+              Gamification can help you reach your goals by turning daily tasks
+              <br />into fun, engaging quests. Adding game elements to your
+              routine<br />
+              boosts motivation, productivity, and well-being. <br />Start
+              gamifying today and level up your life!
+            </span>
+
+            <div class="mt-6 flex items-center">
+              <a
+                class="inline-flex items-center rounded-full border transition-colors bg-blue-500 text-white px-6 py-2 hover:bg-blue-600"
+                href="/auth/register"
+              >
+                Get started
+              </a>
+            </div>
+          </div>
           <div
-            class="absolute inset-0 z-[1] flex items-center justify-center bg-gradient-to-b from-blue-200/20 to-blue-400/90 p-6"
+            class="rounded-2xl bg-blue-500 w-[256px] h-[256px] p-3 flex flex-col items-center justify-center gpa-6"
           >
-            <div
-              class="absolute flex w-full flex-col items-start gap-4 bg-gradient-to-t from-black/90 via-black/50 via-70% p-4 md:p-6"
-            >
-              <h1 class="relative text-2xl font-bold text-zinc-700 bottom-8">
-                Switch to gamification: <br />turn habits into exciting quests!
-              </h1>
-            </div>
+            <AstronautIcon class="size-40 stroke-[4] text-white z-10" />
+            <span class="text-zinc-50 font-semibold">Alteranive Locus</span>
           </div>
         </div>
       </div>
     </section>
 
-    <section class="relative mt-3 p-6 md:px-10">
+    <section class="relative group mt-6 p-12 px-6 md:px-10">
       <div class="container flex flex-col gap-12 items-center">
-        <div class="flex flex-col md:flex-row gap-12 items-center">
+        <img
+          src="/images/abstract-space2.jpg"
+          alt="Gamification poster"
+          class="absolute inset-0 size-full object-cover opacity-65 blur-sm bg-blue-200"
+        />
+        <div
+          class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 md:grid-rows-2 z-10"
+        >
+          <div
+            class="bg-white rounded-lg p-4 gap-3 flex-col flex transition transform hover:scale-105"
+          >
+            <h2 class="text-zinc-900 font-semibold">
+              Step 1: Define Your Goal
+            </h2>
+            <span class="text-zinc-600 text-sm">
+              Start by setting a clear, motivating goal that you want to
+              achieve. This could be anything, like improving physical fitness,
+              learning a new skill, or increasing productivity.
+            </span>
+          </div>
+          <div
+            class="bg-white rounded-lg p-4 gap-3 flex-col flex transition transform hover:scale-105"
+          >
+            <h2 class="text-zinc-900 font-semibold">
+              Step 2: Break Down Your Goal into Categories
+            </h2>
+            <span class="text-zinc-600 text-sm">
+              Divide your main goal into smaller, manageable categories that
+              will help you stay organized. For example, if your goal is
+              "getting fit," create categories like "Cardio Workouts," "Strength
+              Training," and "Stretching."
+            </span>
+          </div>
+          <div
+            class="bg-white rounded-lg p-4 gap-3 flex-col flex transition transform hover:scale-105"
+          >
+            <h2 class="text-zinc-900 font-semibold">
+              Step 3: Add Tasks to Each Category
+            </h2>
+            <span class="text-zinc-600 text-sm">
+              Now, add specific tasks to each category, assigning each a
+              priority and difficulty level. This will give structure to your
+              actions and help you track progress. For instance, in "Cardio
+              Workouts," you might add "Run 5 km" (Difficulty: Medium, Priority:
+              High).
+            </span>
+          </div>
+          <div
+            class="bg-white rounded-lg p-4 gap-3 flex-col flex transition transform hover:scale-105"
+          >
+            <h2 class="text-zinc-900 font-semibold">
+              Step 4: Complete Tasks and Track Progress
+            </h2>
+            <span class="text-zinc-600 text-sm">
+              As you complete tasks, mark them as done. You’ll earn virtual
+              currency, level up, and see your progress bar advance, making your
+              journey more rewarding and visible.
+            </span>
+          </div>
+          <div
+            class="bg-white rounded-lg p-4 gap-3 flex-col flex transition transform hover:scale-105"
+          >
+            <h2 class="text-zinc-900 font-semibold">
+              Step 5: Leave Daily Reflections and Track Your Emotions
+            </h2>
+            <span class="text-zinc-600 text-sm">
+              Add a daily comment about your experience and choose an emotional
+              state (e.g., "very bad" to "very good") to see how your actions
+              impact your mood and motivation over time.
+            </span>
+          </div>
+          <div
+            class="bg-white rounded-lg p-4 gap-3 flex-col flex transition transform hover:scale-105"
+          >
+            <h2 class="text-zinc-900 font-semibold">
+              Step 6: Adjust and Celebrate Achievements
+            </h2>
+            <span class="text-zinc-600 text-sm">
+              Regularly revisit and adjust your goals, milestones, or task
+              difficulty as you progress. Celebrate your achievements as you
+              reach new levels and milestones to stay inspired on your journey!
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="relative mt-6 p-3 px-6 md:px-10">
+      <div class="container flex w-auto flex-col gap-1">
+        <div
+          class="flex flex-col md:flex-row gap-12 items-center mb-6 justify-around"
+        >
           <div
-            class="flex flex-col gap-3 bg-blue-200 p-6 bg-opacity-80 rounded-xl h-auto max-w-96"
+            class="flex flex-col gap-3 bg-blue-400/75 p-3 bg-opacity-80 rounded-xl h-auto max-w-96"
           >
-            <div class="flex gap-3 items-center">
-              <h3 class="font-semibold text-lg text-zinc-900">
+            <div class="flex gap-3 items-center bg-blue-50 rounded-xl p-3">
+              <h3 class="font-semibold text-zinc-900">
                 DayQuest: Develop Your Skills
               </h3>
-              <div
-                class="bg-blue-50/[.12] p-2.5 rounded-full flex ring-8 ring-blue-500/5 mb-5 items-center justify-center"
-              >
-                <GameControllerIcon
-                  class="mr-2 size-7 stroke-[1.7] text-zinc-800"
-                />
-              </div>
+
+              <GameControllerIcon
+                class="mr-2 size-7 stroke-[1.7] text-zinc-800"
+              />
             </div>
-            <p class="text-zinc-600">
+            <span class="text-zinc-600 bg-blue-50 rounded-xl p-3 text-sm">
               Create categories for the skills you want to develop and work on
               them every day! Fill them with tasks that will help you enhance
               these skills. Each step brings you closer to your desired outcome,
               and you'll see progress with every completed task. Start your
               self-improvement journey today!
-            </p>
+            </span>
+          </div>
+          <div class="flex items-center">
+            <img
+              src="/images/dayQuest-example.png"
+              alt="DayQuest"
+              class="max-w-[300px] h-auto rounded-xl drop-shadow-lg"
+            />
           </div>
-          <img
-            src="/images/dayQuest-example.png"
-            alt="DayQuest"
-            class="max-w-[300px] h-auto rounded-xl drop-shadow-lg"
-          />
         </div>
 
-        <div class="flex flex-col-reverse md:flex-row gap-12 items-center">
-          <img
-            src="/images/dayComment-example.png"
-            alt="DayQuest"
-            class="max-w-[300px] h-auto rounded-xl drop-shadow-lg"
-          />
+        <div
+          class="flex flex-col-reverse md:flex-row gap-12 items-center mb-6 justify-around"
+        >
+          <div class="flex">
+            <img
+              src="/images/dayComment-example.png"
+              alt="DayQuest"
+              class="max-w-[300px] h-auto rounded-xl drop-shadow-lg"
+            />
+          </div>
           <div
-            class="flex flex-col gap-3 bg-blue-200 p-6 bg-opacity-80 rounded-xl h-auto max-w-96"
+            class="flex flex-col gap-3 bg-blue-400/75 p-3 bg-opacity-80 rounded-xl h-auto max-w-96"
           >
-            <div class="flex gap-3 items-center">
-              <h3 class="font-semibold text-lg text-zinc-900">
+            <div class="flex gap-3 items-center bg-blue-50 rounded-xl p-3">
+              <h3 class="font-semibold text-zinc-900">
                 DayComment: Record Your Thoughts
               </h3>
               <CommentIcon class="mr-2 size-7 stroke-[1.7] text-zinc-800" />
             </div>
-            <p class="text-zinc-600">
+            <span class="text-zinc-600 bg-blue-50 rounded-xl p-3 text-sm">
               Record how your day went and assess your emotional state. All
               entries will be private and visible only to you. This will help
               you become aware of your feelings, capture important moments, and
               better understand yourself. Every day is a new opportunity for
               growth and self-reflection. Start documenting your thoughts and
               feelings today!
-            </p>
+            </span>
           </div>
         </div>
       </div>

frontend/src/pages/user/dayComment.vue

@@ -11,6 +11,7 @@ import {
 import { commentsQuery } from "@/services/dayquest/comment.service";
 import PlusIcon from "@/assets/icons/plus.svg?component";
 import CalendarIcon from "@/assets/icons/calendar.svg?component";
+import EmotionIcon from "@/assets/icons/emotion.svg?component";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,15 +46,15 @@ function handleOpenModal(
 function getEmotionalStateIcon(emotionalState: string) {
   switch (emotionalState) {
     case "VERY_BAD":
-      return "😭";
+      return "Very bad 😭";
     case "BAD":
-      return "😞";
+      return "Bad 😞";
     case "NEUTRAL":
-      return "😐";
+      return "Neutral 😐";
     case "GOOD":
-      return "😊";
+      return "Good 😊";
     case "VERY_GOOD":
-      return "😍";
+      return "Very good 😍";
     default:
       return "😐";
   }
@@ -62,8 +63,8 @@ function getEmotionalStateIcon(emotionalState: string) {
 
 <template>
   <AppLayout>
-    <section class="relative mt-6 px-3 md:px-10">
-      <div class="container flex w-auto flex-col gap-6">
+    <section class="relative p-3 px-6 md:px-10">
+      <div class="container flex w-auto flex-col gap-1">
         <div class="flex flex-col gap-6">
           <div
             class="flex justify-between items-center border-b border-blue-600 py-3"
@@ -111,18 +112,20 @@ function getEmotionalStateIcon(emotionalState: string) {
                 v-if="comment.id"
               >
                 <div
-                  class="flex gap-10 items-center bg-blue-50 p-1.5 rounded-xl px-3 justify-between w-full"
+                  class="flex gap-10 items-center bg-blue-50 p-1.5 rounded-xl px-3 w-full"
                 >
                   <div class="flex gap-2 items-center">
                     <CalendarIcon class="size-5 stroke-[1.7] text-zinc-700" />
-                    <span class="text-zinc-700 text-sm font-semibold">
+                    <span class="text-zinc-500 text-sm font-semibold">
                       {{ formatDateToMonthDay(comment.createdAt) }}
                     </span>
                   </div>
-                  <span class="text-zinc-700 text-sm font-semibold">
-                    Your state:
-                    {{ getEmotionalStateIcon(comment.emotionalState) }}
-                  </span>
+                  <div class="flex gap-2 items-center">
+                    <EmotionIcon class="size-5 stroke-[1.7] text-zinc-700" />
+                    <span class="text-zinc-500 text-sm font-semibold">
+                      {{ getEmotionalStateIcon(comment.emotionalState) }}
+                    </span>
+                  </div>
                 </div>
                 <DropdownMenu :modal="false">
                   <DropdownMenuTrigger

frontend/src/pages/user/dayQuest.vue

@@ -64,26 +64,11 @@ function handleOpenModal(
     isOpenEditTaskDialog.value = true;
   }
 }
-
-// write function to detect the priority of the task and return the color of the badge based on the priority TASK_PRIORITY enum
-
-// function getTaskPriorityColor(priority: string) {
-//   switch (priority) {
-//     case TASK_PRIORITY.HIGH:
-//       return "red";
-//     case TASK_PRIORITY.MEDIUM:
-//       return "yellow";
-//     case TASK_PRIORITY.LOW:
-//       return "green";
-//     default:
-//       return "black";
-//   }
-// }
 </script>
 
 <template>
   <AppLayout>
-    <section class="relative mt-3 p-3 px-6 md:px-10">
+    <section class="relative p-3 px-6 md:px-10">
       <div class="container flex w-auto flex-col gap-1">
         <div class="flex flex-col gap-6">
           <div
@@ -210,7 +195,10 @@ function handleOpenModal(
                         :class="
                           cn([
                             'text-zinc-700 rounded-md p-2 w-full',
-                            { 'line-through bg-blue-100': task.isCompleted },
+                            {
+                              'line-through bg-blue-100 text-zinc-400':
+                                task.isCompleted,
+                            },
                             { 'bg-blue-200': !task.isCompleted },
                           ])
                         "