feat: add footer, fix: welcome layout and styles, remove: scrollbar e…

…xception

src/app/providers/router/index.ts

@@ -104,9 +104,9 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  // if (to.meta.requiresAuth === true) {
-  //   return router.push({ name: RouteNames.login });
-  // }
+  if (to.meta.requiresAuth === true) {
+    return router.push({ name: RouteNames.login });
+  }
 });
 
 router.beforeEach(layoutResolverMiddleware);

src/app/styles/primary/index.scss

@@ -3,5 +3,4 @@
 @import './base';
 @import './typography';
 @import './exceptions';
-@import './families';
-@import './scrollbar';
+@import './families';

src/layouts/ui/WelcomeLayout.vue

@@ -1,12 +1,27 @@
+<script setup lang="ts">
+import { HeaderWelcome, FooterWelcome } from '@/widgets/layout';
+</script>
+
 <template>
   <div :class="$style.welcome_layout">
-    <slot />
+    <HeaderWelcome />
+    <div :class="$style.slot">
+      <slot />
+    </div>
+    <FooterWelcome />
   </div>
 </template>
 
 <style module lang="scss">
 .welcome_layout {
-  height: 100dvh;
+  position: relative;
+  min-height: 100dvh;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .slot {
+    flex: 1 1 0%;
+  }
 }
 </style>

src/pages/Home.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { HeaderWelcome } from '@/widgets/layout';
 import { AboutSection, MarketingCards } from '@/widgets/welcome';
 </script>
 
 <template>
-  <HeaderWelcome />
-  <div class="container" style="padding-top: 152px;">
+  <div class="container" style="padding-top: 152px">
     <AboutSection />
     <MarketingCards />
   </div>

src/widgets/layout/ui/footer/index.ts

@@ -0,0 +1 @@
+export * from './ui';

src/widgets/layout/ui/footer/ui/FooterWelcome.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { redirect } from '@/shared/lib/helpers';
+</script>
+
+<template>
+  <footer :class="$style.footer">
+    <div :class="$style.container">
+      <p class="text-base">
+        <span :class="$style.brand">Jenda</span> - cloud-based program for task management. The source code is
+        available on
+        <a :class="$style.link" @click.prevent="redirect('https://github.com/mnenie/jenda')"> Github </a>
+      </p>
+    </div>
+  </footer>
+</template>
+
+<style module lang="scss">
+.footer {
+  border-top: 1px solid rgba(228, 228, 231, 0.4);
+  padding: 16px 40px;
+  background-color: transparent;
+}
+
+.container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+
+  & > p {
+    color: var(--zinc-600);
+  }
+
+  .brand {
+    font-weight: 500;
+  }
+
+  .link {
+    cursor: pointer;
+    font-weight: 500;
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+}
+
+:global(html.dark) {
+  .footer{
+    border-color: rgba(var(--zinc-rgb-600), 0.5);
+  }
+  .container {
+    & > p {
+      color: var(--zinc-200);
+    }
+  }
+}
+</style>

src/widgets/layout/ui/footer/ui/index.ts

@@ -0,0 +1,3 @@
+import FooterWelcome from './FooterWelcome.vue';
+
+export { FooterWelcome };

src/widgets/layout/ui/header/HeaderMain.vue

@@ -8,7 +8,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div :class="$style.header">
+  <header :class="$style.header">
     <div :class="$style.about">
       <div :class="$style.workspace_part">
         <div :class="$style.box">
@@ -29,7 +29,7 @@ const { t } = useI18n();
       </UiButton>
       <UserMenu />
     </div>
-  </div>
+  </header>
 </template>
 
 <style module lang="scss">

src/widgets/layout/ui/header/HeaderWelcome.vue

@@ -39,7 +39,7 @@ const links = computed(() => {
 </script>
 
 <template>
-  <div :class="$style.header_welcome">
+  <header :class="$style.header_welcome">
     <div :class="$style.left_container">
       <div :class="$style.box">
         <div :class="$style.inside">
@@ -77,7 +77,7 @@ const links = computed(() => {
         {{ t('welcome.header.reg') }}
       </UiButton>
     </div>
-  </div>
+  </header>
 </template>
 
 <style module lang="scss">

src/widgets/layout/ui/index.ts

@@ -1,2 +1,3 @@
 export * from './sidebar';
 export * from './header';
+export * from './footer';

src/widgets/welcome/ui/MarketingCards.vue

@@ -99,7 +99,7 @@ const currentHeight = computed(() => {
 <style module lang="scss">
 .wrapper {
   display: flex;
-  margin-top: 70px;
+  margin: 70px 0 80px 0;
   width: 100%;
 }
 

src/widgets/welcome/ui/index.ts

@@ -1,4 +1,4 @@
-import AboutSection from './AboutSection.vue';
 import MarketingCards from './MarketingCards.vue';
+import AboutSection from './AboutSection.vue';
 
 export { AboutSection, MarketingCards };