Merge pull request #25 from djhonantanparreira/master

draft PR
SouJunior · Mar 6, 2024 · be3cce8 · be3cce8
2 parents c2c1aca + 9d74bcb
commit be3cce8
Show file tree

Hide file tree

Showing 40 changed files with 1,053 additions and 287 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/App.vue b/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>
diff --git a/src/assets/home/Discord.png b/src/assets/home/Discord.png
diff --git a/src/assets/home/Facebook.png b/src/assets/home/Facebook.png
diff --git a/src/assets/home/Github.png b/src/assets/home/Github.png
diff --git a/src/assets/home/Instagram.png b/src/assets/home/Instagram.png
diff --git a/src/assets/home/Linkedin.png b/src/assets/home/Linkedin.png
diff --git a/src/assets/home/Twitter.png b/src/assets/home/Twitter.png
diff --git a/src/assets/home/YouTube.png b/src/assets/home/YouTube.png
diff --git a/src/assets/home/areaIcon1.png b/src/assets/home/areaIcon1.png
diff --git a/src/assets/home/areaIcon10.png b/src/assets/home/areaIcon10.png
diff --git a/src/assets/home/areaIcon11.png b/src/assets/home/areaIcon11.png
diff --git a/src/assets/home/areaIcon12.png b/src/assets/home/areaIcon12.png
diff --git a/src/assets/home/areaIcon2.png b/src/assets/home/areaIcon2.png
diff --git a/src/assets/home/areaIcon3.png b/src/assets/home/areaIcon3.png
diff --git a/src/assets/home/areaIcon4.png b/src/assets/home/areaIcon4.png
diff --git a/src/assets/home/areaIcon5.png b/src/assets/home/areaIcon5.png
diff --git a/src/assets/home/areaIcon6.png b/src/assets/home/areaIcon6.png
diff --git a/src/assets/home/areaIcon7.png b/src/assets/home/areaIcon7.png
diff --git a/src/assets/home/areaIcon8.png b/src/assets/home/areaIcon8.png
diff --git a/src/assets/home/areaIcon9.png b/src/assets/home/areaIcon9.png
diff --git a/src/assets/home/djhonantan.png b/src/assets/home/djhonantan.png
diff --git a/src/assets/home/home-abouticon.png b/src/assets/home/home-abouticon.png
diff --git a/src/assets/home/homeBackground.png b/src/assets/home/homeBackground.png
diff --git a/src/assets/home/howToUse.png b/src/assets/home/howToUse.png
diff --git a/src/assets/home/icon1.png b/src/assets/home/icon1.png
diff --git a/src/assets/home/icon2.png b/src/assets/home/icon2.png
diff --git a/src/assets/home/icon3.png b/src/assets/home/icon3.png
diff --git a/src/assets/home/icon4.png b/src/assets/home/icon4.png
diff --git a/src/assets/home/inahye.png b/src/assets/home/inahye.png
diff --git a/src/assets/home/squadIcon1.png b/src/assets/home/squadIcon1.png
diff --git a/src/assets/home/squadIcon2.png b/src/assets/home/squadIcon2.png
diff --git a/src/assets/home/thais.png b/src/assets/home/thais.png
diff --git a/src/assets/home/thaynna.png b/src/assets/home/thaynna.png
diff --git a/src/assets/home/wouerner.png b/src/assets/home/wouerner.png