draft PR

package.json

@@ -18,6 +18,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "postcss": "^8.4.33",
+    "swiper": "^11.0.7",
     "vue": "^3.3.4",
     "vue-gtag": "^2.0.1",
     "vue-router": "^4.2.5",

src/App.vue

@@ -1,25 +1,15 @@
 <template>
-	<v-app>
-		<v-app-bar
-			color="transparent"
-			app
-			elevation="4"
-		>
-			<div class="w-100 d-flex align-center justify-space-between main-container">
-				<a
-					class="d-flex align-center logo"
-					@click="navigateToHome"
-				>
-					<v-img
-						height="36"
-						width="36"
-						:src="imgUrl"
-						alt="Logo SouJunior"
-					/>
-					<h1 class="text-h5 font-weight-bold font-semibold primary-color ml-3 logo-text">SouJunior Labs</h1>
-				</a>
-				<div class="d-flex align-center ga-2">
-					<!--v-icon
+  <v-app :class="ef">
+    <v-app-bar class="header" color="transparent" app elevation="4">
+      <div class="w-100 d-flex align-center justify-space-between main-container">
+        <a class="d-flex align-center logo" @click="navigateToHome">
+          <v-img height="36" width="36" :src="imgUrl" alt="Logo SouJunior" />
+          <h1 class="text-h5 font-weight-bold font-semibold primary-color ml-3 logo-text">
+            SouJunior Labs
+          </h1>
+        </a>
+        <div class="d-flex align-center ga-2">
+          <!--v-icon
 						v-if="currentTheme.dark"
 						variant="text"
 						icon="mdi-weather-night"
@@ -28,7 +18,7 @@
 						class="mr-8 cursor-pointer"
 						@click="toggleTheme"
 					/-->
-					<!--v-icon
+          <!--v-icon
 						v-if="!currentTheme.dark"
 						variant="text"
 						icon="mdi-white-balance-sunny"
@@ -37,158 +27,144 @@
 						class="mr-8 cursor-pointer"
 						@click="toggleTheme"
 					/-->
-					<v-btn
-						variant="text"
-						class="font-weight-semibold"
-						:to="{ name: 'home' }"
-					>
-                        Home 
-					</v-btn>
-					<v-btn
-						v-if="logged === true"
-						variant="text"
-						class="font-weight-semibold"
-						:to="{ name: 'onboarding' }"
-					>
-                        Onboarding	
-					</v-btn>
-					<v-btn
-						v-if="logged === false"
-						variant="text"
-						class="font-weight-semibold"
-						:to="{ name: 'registry' }"
-					>
-						Registro
-					</v-btn>
-					<v-btn
-						v-if="logged === false"
-						variant="text"
-						class="font-weight-semibold"
-						:to="{ name: 'login' }"
-					>
-						Login
-					</v-btn>
-					<v-btn
-						v-if="logged === true"
-						variant="text"
-						class="font-weight-semibold"
-                        :to="{ name: 'products' }"
-					>
-						Produtos
-					</v-btn>
-					<v-menu
-						v-if="logged === true"
-						open-on-hover
-					>
-						<template v-slot:activator="{ props }">
-							<v-btn
-								variant="text"
-								class="font-weight-semibold"
-								v-bind="props"
-							>
-								{{ auth.getName() }}
-								<v-icon right>mdi-chevron-down</v-icon>
-							</v-btn>
-						</template>
-
-						<v-list>
-							<v-list-item
-								link
-								:to="{ name: 'profile' }"
-							>
-								<v-list-item-title>Profile</v-list-item-title>
-							</v-list-item>
-							<v-list-item
-								link
-                                @click="auth.logout()"
-							>
-								<v-list-item-title>Logout</v-list-item-title>
-							</v-list-item>
-						</v-list>
-					</v-menu>
-				</div>
-			</div>
-		</v-app-bar>
-
-		<transition
-			name="fade"
-			mode="out-in"
-		>
-			<v-main
-				class="d-flex flex-grow-1 main-container"
-				style="margin-top: 64px"
-			>
-				<RouterView />
-			</v-main>
-		</transition>
-	</v-app>
+          <v-btn variant="text" class="font-weight-semibold" :to="{ name: 'home' }"> Home </v-btn>
+          <v-btn
+            v-if="logged === true"
+            variant="text"
+            class="font-weight-semibold"
+            :to="{ name: 'onboarding' }"
+          >
+            Onboarding
+          </v-btn>
+          <!-- <v-btn
+            v-if="logged === false"
+            variant="text"
+            class="font-weight-semibold"
+            :to="{ name: 'registry' }"
+          >
+            Registro
+          </v-btn> -->
+          <v-btn
+            v-if="logged === false"
+            variant="text"
+            class="font-weight-semibold"
+            :to="{ name: 'login' }"
+          >
+            Login
+          </v-btn>
+          <v-btn
+            v-if="logged === true"
+            variant="text"
+            class="font-weight-semibold"
+            :to="{ name: 'products' }"
+          >
+            Produtos
+          </v-btn>
+          <v-menu v-if="logged === true" open-on-hover>
+            <template v-slot:activator="{ props }">
+              <v-btn variant="text" class="font-weight-semibold" v-bind="props">
+                {{ auth.getName() }}
+                <v-icon right>mdi-chevron-down</v-icon>
+              </v-btn>
+            </template>
+
+            <v-list>
+              <v-list-item link :to="{ name: 'profile' }">
+                <v-list-item-title>Profile</v-list-item-title>
+              </v-list-item>
+              <v-list-item link @click="auth.logout()">
+                <v-list-item-title>Logout</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </div>
+      </div>
+    </v-app-bar>
+
+    <transition name="fade" mode="out-in">
+      <v-main class="d-flex flex-grow-1 main-container" style="margin-top: 64px">
+        <RouterView />
+      </v-main>
+    </transition>
+  </v-app>
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useRouter, RouterView } from 'vue-router';
-import { useAuthStore } from '@/stores/auth';
-import { useTheme } from 'vuetify';
-import imgUrl from '@/assets/logo-green-transparent.png';
+import { computed } from 'vue'
+import { useRouter, RouterView, useRoute } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+import { useTheme } from 'vuetify'
+import imgUrl from '@/assets/logo-green-transparent.png'
 
-const router = useRouter();
-const theme = useTheme();
+const router = useRouter()
+const theme = useTheme()
 
-const currentTheme = computed(() => theme.current.value);
+const currentTheme = computed(() => theme.current.value)
 
-const auth = useAuthStore();
+const auth = useAuthStore()
 
+const route = useRoute()
 
-const logged = computed(() => auth.getName() != '');
+const logged = computed(() => auth.getName() != '')
 
-const productUuid = computed(() => auth.getName() != '' ?  auth.products[0] : false);
+const productUuid = computed(() => (auth.getName() != '' ? auth.products[0] : false))
 
-console.log('logged', logged);
+console.log('logged', route.path)
+const ef = computed(() => (route.path === '/' ? 'homeBackgroundEffect' : ''))
 
 const navigateToHome = () => {
-	router.push({ name: 'home' })
-};
+  router.push({ name: 'home' })
+}
 
 function toggleTheme() {
-	theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark';
-	localStorage.setItem('theme', theme.global.name.value);
+  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
+  localStorage.setItem('theme', theme.global.name.value)
 }
-
 </script>
 
 <style lang="scss">
+.homeBackgroundEffect {
+  background-image: url('/src/assets/home/homeBackground.png');
+  background-size: cover;
+}
+
+.header {
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
 .main-container {
-	margin-left: 240px;
-	margin-right: 240px;
-	padding: 0;
-
-	@media (max-width: 1600px) {
-		margin-left: 120px;
-		margin-right: 120px;
-	}
+  margin-left: 240px;
+  margin-right: 240px;
+  padding: 0;
+
+  @media (max-width: 1600px) {
+    margin-left: 120px;
+    margin-right: 120px;
+  }
 }
 
 .primary-color {
-	color: #06d7a0;
+  color: #06d7a0;
 }
 
 .logo {
-	cursor: pointer;
-	transition: ease-in-out 0.2s;
+  cursor: pointer;
+  transition: ease-in-out 0.2s;
 
-	&:hover {
-		filter: brightness(1.25);
-		transition: ease-in-out 0.2s;
-	}
+  &:hover {
+    filter: brightness(1.25);
+    transition: ease-in-out 0.2s;
+  }
 }
 
 .drag-none {
-	user-select: none;
-	-moz-drag-over: none;
-	-webkit-user-drag: none;
+  user-select: none;
+  -moz-drag-over: none;
+  -webkit-user-drag: none;
 }
 
 .logo-text {
-	font-family: "Radio Canada", serif !important;
+  font-family: 'Radio Canada', serif !important;
 }
 </style>