[FEATURE] Desktop and mobile footer

LandingPage/.env

@@ -1,2 +1,3 @@
 VITE_APP_GH_LINK=https://github.com/WitchesOfThePlanes/CompassOfWomanhood
 VITE_APP_GH_API=https://api.github.com/repos/WitchesOfThePlanes/CompassOfWomanhood
+VITE_APP_EMAIL=Y29tcGFzc29md29tYW5ob29kQGdtYWlsLmNvbQ==

LandingPage/env.d.ts

@@ -2,6 +2,7 @@
 interface ImportMetaEnv {
   readonly VITE_APP_GH_LINK: string;
   readonly VITE_APP_GH_API: string;
+  readonly VITE_APP_EMAIL: string;
 }
 
 interface ImportMeta {

LandingPage/package.json

@@ -13,6 +13,7 @@
     "@mdi/font": "7.0.96",
     "aos": "^2.3.4",
     "axios": "^1.2.1",
+    "buffer": "^6.0.3",
     "dompurify": "^2.4.1",
     "marker": "^0.1.2",
     "roboto-fontface": "*",

LandingPage/src/App.vue

@@ -7,6 +7,7 @@
         <AboutPage v-intersect="intersect(MENU_ITEM.ABOUT)" />
         <CharactersPage v-intersect="intersect(MENU_ITEM.CHARACTERS)" />
         <TeamPage v-intersect="intersect(MENU_ITEM.TEAM)" />
+        <ContactPage v-intersect="intersect(MENU_ITEM.CONTACT)" />
       </div>
     </v-main>
     <NavMenu :active-section="intersectedSection" v-if="smAndUp" />
@@ -27,6 +28,7 @@ import CharactersPage from "@/features/CharactersPage.vue";
 import AppFooter from "@/components/AppFooter.vue";
 import IntroPage from "@/features/IntroPage.vue";
 import TeamPage from "@/features/TeamPage.vue";
+import ContactPage from "@/features/ContactPage.vue";
 import AppLoader from "@/components/AppLoader.vue";
 import { MENU_ITEM } from "@/components/menu/links.config";
 import { useIntersect } from "@/utils/intersect.composable";

LandingPage/src/assets/locale/en_US.json

@@ -3,7 +3,8 @@
     "HOME": "home",
     "ABOUT": "about",
     "CHARACTERS": "companions",
-    "TEAM": "team"
+    "TEAM": "team",
+    "CONTACT": "contact us"
   },
   "HERO": {
     "TITLE": "Compass of Womanhood",
@@ -63,6 +64,13 @@
   "TEAM": {
     "TITLE": "Meet our team"
   },
+  "CONTACT": {
+    "TITLE": "CONTACT US",
+    "HELLO": "Hello fellow traveler! If You enjoyed a taste of calimshan beer, then You are welcome to our tavern Copper Coronet for a chitchat and another round!",
+    "EMAIL": "Click on the email address below to copy it:",
+    "SNACKBAR": "Email was copied to clipboard!",
+    "CLOSE": "Close"
+  },
   "FOOTER": {
     "SOCIAL": "Drop by our social media",
     "COPY": "This project is not developed, supported or endorsed by BioWare, Black Isle nor Beamdog."

LandingPage/src/assets/locale/pl_PL.json

@@ -3,7 +3,8 @@
     "HOME": "strona główna",
     "ABOUT": "o projekcie",
     "CHARACTERS": "towarzyszki",
-    "TEAM": "zespół"
+    "TEAM": "zespół",
+    "CONTACT": "kontakt"
   },
   "HERO": {
     "TITLE": "Kompas Kobiecości",
@@ -63,6 +64,13 @@
   "TEAM": {
     "TITLE": "Poznaj nasz zespół"
   },
+  "CONTACT": {
+    "TITLE": "Kontakt",
+    "HELLO": "Hello fellow traveler! If You enjoyed a taste of calimshan beer, then You are welcome to our tavern Copper Coronet for a chitchat and another round!",
+    "EMAIL": "Kliknij poniższy adres email, aby go skopiować:",
+    "SNACKBAR": "Adres email został skopiowany do schowka!",
+    "CLOSE": "Zamknij"
+  },
   "FOOTER": {
     "SOCIAL": "Zajrzyj na nasze social media",
     "COPY": "Ten projekt nie jest rozwijany, wspierany czy zatwierdzony przez BioWare, Black Isle ani Beamdog."

LandingPage/src/components/AppFooter.vue

@@ -6,6 +6,6 @@
 
 <style scoped>
 .footer {
-  background: #14162a;
+  background: #4c455c;
 }
 </style>

LandingPage/src/components/menu/MobileNavMenu.vue

@@ -76,7 +76,11 @@
               target="_blank"
             />
           </div>
-          <img class="logo pa-4" :src="logoImagePath" alt="logo-small" />
+          <img
+            class="logo pa-4"
+            :src="$i18n.locale === plLocale ? logoPlImagePath : logoImagePath"
+            alt="logo-small"
+          />
         </div>
       </div>
     </div>
@@ -88,15 +92,18 @@ import { reactive } from "vue";
 
 import bgImagePath from "@/assets/home-bg.svg?url";
 import logoImagePath from "@/assets/logo-small.png";
-import { linksConfig, socialLinksConfig, MENU_ITEM } from "./links.config";
+import logoPlImagePath from "@/assets/logo-small-pl.png";
 import { useScrollTo } from "@/utils/scroll-to.composable";
 import { i18n } from "@/plugins/i18n";
 
+import { linksConfig, socialLinksConfig, MENU_ITEM } from "./links.config";
 import { useNavMenu } from "./nav-menu.composable";
-import type { INavMenuProps } from "./nav-menu.composable";
 
-const props = defineProps<INavMenuProps>();
+const props = defineProps<{
+  activeSection?: string;
+}>();
 const { activeSection, setActiveSection } = useNavMenu(props);
+const plLocale: typeof i18n.global.locale = "pl_PL";
 
 const state = reactive({ mobileMenuOpen: false, langMenu: false });
 const { scrollTo } = useScrollTo();
@@ -163,4 +170,7 @@ const changeLocale = (locale: string) => {
   font-size: 21px;
   line-height: 26px;
 }
+.logo {
+  max-height: 100px;
+}
 </style>

LandingPage/src/components/menu/NavMenu.vue

@@ -44,9 +44,10 @@ import { useScrollTo } from "@/utils/scroll-to.composable";
 
 import { linksConfig, socialLinksConfig } from "./links.config";
 import { useNavMenu } from "./nav-menu.composable";
-import type { INavMenuProps } from "./nav-menu.composable";
 
-const props = defineProps<INavMenuProps>();
+const props = defineProps<{
+  activeSection?: string;
+}>();
 const { activeSection, setActiveSection } = useNavMenu(props);
 const { scrollTo } = useScrollTo();
 

LandingPage/src/components/menu/links.config.ts

@@ -5,6 +5,7 @@ export enum MENU_ITEM {
   ABOUT = "about",
   CHARACTERS = "characters",
   TEAM = "team",
+  CONTACT = "contact",
 }
 
 export interface INavLink {
@@ -32,6 +33,10 @@ export const linksConfig: INavLink[] = [
     id: MENU_ITEM.TEAM,
     content: "MENU.TEAM",
   },
+  {
+    id: MENU_ITEM.CONTACT,
+    content: "MENU.CONTACT",
+  },
 ];
 
 export const socialLinksConfig: ISocialLink[] = [

LandingPage/src/components/menu/nav-menu.composable.ts

@@ -1,7 +1,7 @@
 import { Ref, ref, watch } from "vue";
 import { MENU_ITEM } from "@/components/menu/links.config";
 
-export type INavMenuProps = {
+export type TNavMenuProps = {
   activeSection?: string;
 };
 
@@ -10,7 +10,7 @@ export interface INavMenuReturns {
   setActiveSection: (section: string) => void;
 }
 
-export const useNavMenu = (props: INavMenuProps): INavMenuReturns => {
+export const useNavMenu = (props: TNavMenuProps): INavMenuReturns => {
   const activeSection = ref();
 
   const setActiveSection = (section: string) => (activeSection.value = section);

LandingPage/src/features/ContactPage.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    id="contact"
+    class="d-flex flex-column align-center justify-center py-10 px-6 contact"
+  >
+    <div :class="smAndUp && 'page'">
+      <div data-aos="fade-up">
+        <h2 class="mt-16 mb-10 d-flex">
+          <SectionTitle>
+            <img class="sword" :src="swordPng" />
+            {{ $t("CONTACT.TITLE") }}
+          </SectionTitle>
+        </h2>
+        <div class="mt-2 mb-6">
+          {{ $t("CONTACT.HELLO") }}
+        </div>
+        <div class="mt-2 mb-4">
+          {{ $t("CONTACT.EMAIL") }}
+        </div>
+        <div class="mb-10 email">
+          <a title="email" href="#contact" ref="linkEl" @click="handleClick"
+            ><img class="email-img" :src="emailImgPath"
+          /></a>
+        </div>
+      </div>
+    </div>
+    <div :class="smAndUp ? 'divider' : 'page'">
+      <v-divider />
+    </div>
+    <div v-if="smAndUp" class="page d-flex flex-row pt-6 align-center">
+      <img
+        class="logo pa-4"
+        :src="$i18n.locale === plLocale ? logoPlImagePath : logoImagePath"
+        alt="logo-small"
+      />
+      <div>
+        <v-btn-toggle class="d-flex align-end justify-center flex-row ma-6">
+          <v-btn
+            v-for="link in linksConfig"
+            :key="link.id"
+            class="button pa-2"
+            selected-class="active"
+            :value="link.id"
+            variant="text"
+            @click="goToMenu(link.id)"
+          >
+            {{ $t(link.content) }}
+          </v-btn>
+        </v-btn-toggle>
+        <v-btn-toggle class="d-flex align-end justify-center flex-row ma-6">
+          <v-btn
+            v-for="social in socialLinksConfig"
+            :key="social.id"
+            variant="text"
+            :icon="`fa:fab fa-${social.id}`"
+            class="mx-3 py-2"
+            :href="social.link"
+            target="_blank"
+          />
+        </v-btn-toggle>
+      </div>
+    </div>
+    <div v-else>
+      <v-btn-toggle class="d-flex align-end justify-center flex-row ma-6">
+        <v-btn
+          v-for="social in socialLinksConfig"
+          :key="social.id"
+          variant="text"
+          :icon="`fa:fab fa-${social.id}`"
+          class="pa-2"
+          :href="social.link"
+          target="_blank"
+        />
+      </v-btn-toggle>
+    </div>
+    <v-snackbar
+      color="surface"
+      content-class="email-snackbar"
+      v-model="snackbar"
+      rounded="pill"
+    >
+      {{ $t("CONTACT.SNACKBAR") }}
+
+      <template #actions>
+        <v-btn rounded="pill" variant="text" @click="snackbar = false">
+          {{ $t("CONTACT.CLOSE") }}
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useDisplay } from "vuetify";
+
+import swordPng from "@/assets/Sword.png";
+import SectionTitle from "@/components/SectionTitle.vue";
+import { linksConfig, socialLinksConfig } from "@/components/menu/links.config";
+import emailImgPath from "@/assets/email.svg?url";
+import logoImagePath from "@/assets/logo-small.png";
+import logoPlImagePath from "@/assets/logo-small-pl.png";
+import { i18n } from "@/plugins/i18n";
+import { useScrollTo } from "@/utils/scroll-to.composable";
+import { decode } from "@/utils/base64";
+
+const plLocale: typeof i18n.global.locale = "pl_PL";
+const email = import.meta.env.VITE_APP_EMAIL;
+const linkEl = ref<HTMLLinkElement | null>(null);
+const snackbar = ref<boolean>(false);
+
+const { smAndUp } = useDisplay();
+
+const handleClick = async () => {
+  if (linkEl.value) {
+    await navigator.clipboard.writeText(decode(email));
+    snackbar.value = true;
+  }
+};
+const { scrollTo } = useScrollTo();
+
+const goToMenu = (section: string) => {
+  scrollTo(section);
+};
+</script>
+
+<style scoped>
+.page {
+  width: 60vw;
+}
+.divider {
+  width: 70vw;
+}
+.contact {
+  background: #14162a;
+}
+.sword {
+  margin-right: 16px;
+  max-height: 2em;
+}
+.email {
+  color: #a2c3e8;
+}
+.email-img {
+  width: 28ch;
+}
+.email-snackbar {
+  color: #ffffff;
+}
+
+.logo {
+  max-height: 100px;
+}
+</style>

LandingPage/src/features/HeroPage.vue

@@ -11,7 +11,11 @@
           class="headers d-flex flex-column align-center justify-center"
         >
           <h1 class="align-self-center font-weight-medium text-center">
-            <img class="logo" :src="logoImagePath" alt="logo" />
+            <img
+              class="logo"
+              :src="$i18n.locale === plLocale ? logoPlImagePath : logoImagePath"
+              alt="logo"
+            />
           </h1>
         </header>
       </div>
@@ -43,11 +47,15 @@
 <script setup lang="ts">
 import bgImagePath from "@/assets/home-bg.svg?url";
 import logoImagePath from "@/assets/logo.png";
+import logoPlImagePath from "@/assets/logo-pl.png";
 
 import { useScrollTo } from "@/utils/scroll-to.composable";
 import SectionTitle from "@/components/SectionTitle.vue";
+import { i18n } from "@/plugins/i18n";
 
 const { scrollTo } = useScrollTo();
+
+const plLocale: typeof i18n.global.locale = "pl_PL";
 </script>
 
 <style scoped>

LandingPage/src/plugins/vuetify.ts

@@ -30,6 +30,7 @@ export default createVuetify({
           primary: "#ffffff",
           secondary: "#ffffff",
           background: "#00000b",
+          surface: "#8d97cc",
         },
         variables: {
           "border-opacity": 1,

LandingPage/src/utils/base64.ts

@@ -0,0 +1,8 @@
+import { Buffer } from "buffer";
+
+// NOTE: can be removed after JS Buffer is supported in vite
+window.Buffer = window.Buffer || Buffer;
+
+export const decode = (str: string): string => {
+  return window.Buffer.from(str, "base64").toString();
+};