[Implementation and Bugfix] Links added and some bugs refined

src/components/Footer.vue

@@ -29,11 +29,12 @@
 <template>
   <div
       class="mx:px-[112px] md:px-[64px] py-64px xs:px-16px flex flex-col gap-[64px] bg-dark-50 dark:bg-dark-100 ">
-    <div class="flex xl:flex-row xs:flex-col    lg:gap-32px xs:gap-8px">
-    <div class="text-dark-60 w-fit justify-end flex">
-      <SvgISKLogo width="20vw"/>
+    <div class="flex lg:flex-row lg:gap-32px xs:gap-8px  ">
+    <div class="text-dark-60 w-fixed justify-end flex">
+      <SvgISKLogo width="256px"/>
     </div>
-      <div class="flex lg:flex-col xs:flex-wrap gap-8px ">
+
+      <div class="flex flex-col  gap-8px">
         <div class="nuke-text-body-01 text-light-10 dark:text-light-100 px-16px">About</div>
         <a href="https://init.iskportal.com/overview"><FooterButton>Overview</FooterButton></a>
         <a href="https://init.iskportal.com/foundations"><FooterButton>Foundations</FooterButton></a>
@@ -42,29 +43,29 @@
         <a href="https://init.iskportal.com/membership-policies"><FooterButton>Membership Policy</FooterButton></a>
         <a href="https://init.iskportal.com/"><FooterButton>Initiative Document</FooterButton></a>
       </div>
-      <div class="flex lg:flex-col xs:flex-wrap gap-8px">
+      <div class="flex flex-col  gap-8px">
         <div class="nuke-text-body-01 text-light-10 dark:text-light-100 px-16px">Contact</div>
         <FooterButton>For Organizations</FooterButton>
         <FooterButton>For Teams and Research Groups</FooterButton>
         <FooterButton>Individuals</FooterButton>
         <FooterButton>Propose</FooterButton>
         <FooterButton>Funders and Sponsors</FooterButton>
       </div>
-      <div class="flex lg:flex-col xs:flex-wrap gap-8px ">
+      <div class="flex flex-col  gap-8px ">
         <div class="nuke-text-body-01 text-light-10 dark:text-light-100 px-16px">Partners</div>
         <FooterButton>Official Members</FooterButton>
         <FooterButton>Partners</FooterButton>
         <FooterButton>Organizations</FooterButton>
         <FooterButton>Sponsors</FooterButton>
       </div>
-      <div class="flex lg:flex-col xs:flex-wrap gap-8px ">
+      <div class="flex flex-col  gap-8px ">
         <div class="nuke-text-body-01 text-light-10 dark:text-light-100 px-16px">Funds</div>
         <FooterButton>Funding</FooterButton>
         <FooterButton>Sponsorship</FooterButton>
         <FooterButton>Donations</FooterButton>
         <FooterButton>Financial Reports</FooterButton>
       </div>
-      <div class="flex lg:flex-col xs:flex-wrap gap-8px ">
+      <div class="flex flex-col  gap-8px ">
         <div class="nuke-text-body-01 text-light-10 dark:text-light-100 px-16px">Terms</div>
         <FooterButton>Terms of Use</FooterButton>
         <FooterButton>License</FooterButton>
@@ -73,6 +74,7 @@
         <FooterButton>Cookie Preferences</FooterButton>
       </div>
     </div>
+
     <div class="nuke-text-legal-01 flex items-center justify-center text-dark-10">
       All rights reserved for the Independent Society of Knowledge
     </div>

src/components/GeneralMarkDownTemplate.vue

@@ -26,18 +26,18 @@
   -->
 <template>
   <div
-      class=" w-full h-[calc(75vh-64px)] flex flex-col  items-start  bg-cover"
+      class=" w-full h-[calc(75vh-64px)] flex flex-col  items-start  bg-cover print:h-fit  "
       :style="{
       backgroundImage: `url(${imageURL})`
     }"
   >
-    <div class="xs:mx-0 mx:px-[112px] xl:mx-[112px] xs:px-16px  py-32px md:px-[64px] md:h-full xs:h-fit xs:w-full xs:w-fit nuke-transition-productive-standard-slow-01 w-full
-      bg-black dark:bg-light-10  nuke-text-fluid-display-01 text-light-10 dark:text-dark-100 lg:max-w-[50%]
+    <div class="xs:mx-0 mx:px-[112px] xl:mx-[112px] xs:px-16px  py-32px md:px-[64px] lg:h-full md:h-fit xs:h-fit  xs:w-fit nuke-transition-productive-standard-slow-01 w-full
+      bg-black dark:bg-light-10  nuke-text-fluid-display-01 text-light-10 dark:text-dark-100 lg:max-w-[50%] print:h-fit print:w-fit print:text-black
       ">
       {{ title }}
     </div>
   </div>
-  <div v-html="renderedMarkdown" class="xs:py-32px md:px-16px h-fit lg:px-[256px] w-full dark:text-light-10 text-dark-100  flex flex-col gap-32px press" />
+  <div v-html="renderedMarkdown" class="xs:py-32px md:px-16px h-fit lg:px-[256px] w-full dark:text-light-10 text-dark-100  flex flex-col gap-32px press print:px-[112px]" />
 </template>
 <script lang="ts" setup>
 import {computed, onMounted, ref} from "vue";
@@ -51,11 +51,11 @@ const props = defineProps<{
 }>()
 
 const imageURL = computed(() => {
-  return `../../blogs/images/${props.imageName}`
+  return `../../iskportal/blogs/images/${props.imageName}`
 })
 
 const contentURL = computed(()=> {
-  return `/blogs/${props.contentName}.md`
+  return `../../iskportal/blogs/${props.contentName}.md`
 })
 const markdownContent = ref<string>('');
 const renderedMarkdown = ref<any>(''); // I assume marked returns string HTML

src/components/GlassReferal.vue

@@ -33,7 +33,6 @@
   xl:py-64px flex flex-col
   text-light-10 hover:text-dark-100 dark:hover:text-light-10
   xl:border-l-light-100 xl:border-l-[1px]
-  xl:border-b-light-100 xl:border-b-[1px]
   hover:bg-light-10">
     <div class="xs:h-fit xl:h-full w-full nuke-text-heading-03" >
       {{title}}

src/components/Link.vue

@@ -0,0 +1,58 @@
+<!--
+  - Copyright © 2024 Independent Society of Knowledge
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU General Public License as published by
+  - the Free Software Foundation, either version 2 of the License, or
+  - (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU General Public License for more details.
+  -
+  - You should have received a copy of the GNU General Public License
+  - along with this program. If not, see <https://www.gnu.org/licenses/>.
+  -
+  - Contact Information:
+  - Independent Society of Knowledge
+  - Email: [email protected]
+  -
+  - SPDX-License-Identifier: GPL-2.0-or-later
+  -
+  - Developed by: Amir H. Ebrahimnezhad (if you helped or your commits are going to be pulled please add your name and email with a comma.)
+  - Email:        [email protected]
+  - version 1.0.0
+  -
+  -->
+
+  <template>
+    <div class="flex flex-col gap-4px">
+
+    <a :href="link">
+        <div class="nuke-text-body-02 flex flex-row gap-8px nuke-transition-productive-standard-fast-01 w-fit h-fit items-center 
+        text-primary-50 dark:text-primary-40 
+        hover:text-primary-60 hover:dark:text-primary-30">
+      <div>
+        {{text}}
+      </div>
+      <div class="w-fit h-16px flex justify-end">
+        <SvgArrowLeft height="100%"/>
+      </div>
+    </div>
+    </a>
+    <div class="nuke-text-helper-text-01 text-dark-100 dark:text-light-10" v-if="helper" >{{ helper }}</div>
+</div>
+  </template>
+
+  <script setup lang="ts">
+  import SvgArrowLeft from "@/assets/icons/arrow--right.svg?component"
+  const props = defineProps<{
+    helper?: String,
+    text: String,
+    link: string
+  }>()
+  </script>
+
+  <style scoped>
+
+  </style>

src/pages/Solutions.vue → src/components/TextSubsection.vue

@@ -26,13 +26,35 @@
   -->
 
 <template>
-
+  <div class="
+  text-dark-100 dark:text-light-10 flex
+  data-[mode='fluid']:xl:flex-row data-[mode='fluid']:xs:flex-col h-fit gap-[32px] nuke-transition-productive-standard-fast-01
+  data-[mode='vertical']:flex-col data-[mode='horizontal']:flex-row
+  " :data-mode="mode">
+    <div class="nuke-text-fluid-heading-05 w-full" >
+      {{
+        title
+      }}
+    </div>
+    <div class="nuke-text-fluid-paragraph-01 w-full">
+      <slot/>
+    </div>
+  </div>
 </template>
-
-<script setup>
-
+<script setup lang="ts">
+const props = withDefaults(
+    defineProps<{
+      title: String
+      mode: "fluid" | "vertical" | "horizontal"
+    }>(),
+    {
+      title: "Default Title",
+      mode: "fluid"
+    }
+)
 </script>
 
+
 <style scoped>
 
 </style>

src/components/nav/Navbar.vue

@@ -67,9 +67,11 @@
         <nav-bar-button class="xs:hidden lg:flex" value="about" v-model="nonSubmenus">About ISK
         </nav-bar-button>
       </RouterLink>
-      <nav-bar-button class="xs:hidden lg:flex" value="contact" v-model="nonSubmenus">
-        Contact
-      </nav-bar-button>
+      <router-link to="/contact">
+        <nav-bar-button class="xs:hidden lg:flex" value="contact" v-model="nonSubmenus">
+          Contact
+        </nav-bar-button>
+      </router-link>
     </div>
     <div v-if="selected!== 'none'"
          class="absolute z-50 top-64px w-full border-b-[1px] border-b-light-40 dark:border-b-dark-50 dark:bg-dark-90 bg-light-10 transition-all ">