#86 - Update home with latest changes (#88)

* some copy updates to the home page

* work on updating the Footer.vue

* Conditionally show the 'home' menu in the navigation

* Sponsors -> Donate everywhere

* update images

* work on updating the chat-section

* some adjustment to the max-width of the header test

src/components/Footer.vue

@@ -5,7 +5,12 @@
             <form class="c-form">
                 <h4 class="is-title-6">STAY UP TO DATE</h4>
                 <p>Subscribe to our newsletter to be the first to know when the prototype is ready.</p>
-                <div class="c-input"><input class="input" type="email" placeholder="Your email address" /></div>
+                <div class="c-input">
+                  <input class="input" type="email" placeholder="Your email address" />
+                  <button class="is-unstyled c-send-btn" type="button" @click="onSendClick">
+                    <i class="icon-paper-plane"></i>
+                  </button>
+                </div>
             </form>
         </div>
         <div class="c-links">
@@ -20,13 +25,14 @@
                 <h4 class="is-title-6">CONTRIBUTE</h4>
                 <a v-href="'/volunteer'">Volunteer</a>
                 <a v-href="'/join-our-team'">Join our team</a>
-                <a v-href="'/sponsor'">Sponsor</a>
+                <a v-href="'/donate'">Donate</a>
+                <a href="https://github.com/okTurtles/group-income" target="_blank" alt="Github">Github</a>
             </div>
             <div class="c-links-group">
                 <h4 class="is-title-6">SOCIAL</h4><a href="https://twitter.com/Group_Income" target="_blank" alt="Twitter">Twitter</a>
                 <a href="https://mstdn.io/@okturtles" target="_blank" alt="Mastodon">Mastodon</a>
                 <a href="https://www.youtube.com/@GroupIncome" target="_blank" alt="Youtube">YouTube</a>
-                <a href="https://www.reddit.com/r/groupincome/" target="_blank" alt="Reddit">Reddit</a>
+                <a href="https://forums.okturtles.com/index.php?board=9.0" target="_blank" alt="Forums">Forums</a>
             </div>
         </div>
     </div>
@@ -35,15 +41,26 @@
             <a v-href="'/terms-and-conditions'">Term & Conditons</a>
             <a v-href="'/privacy-policy'">Privacy Policy</a>
         </div>
-        <p class="copyright">Copyright © 2015-2021 okTurtles Foundation</p>
+        <p class="copyright">{{ copyRightText }}</p>
     </div>
 </footer>
 
 </template>
 
 <script>
 export default {
-  name: 'Footer'
+  name: 'Footer',
+  computed: {
+    copyRightText () {
+      const thisYear = new Date().getFullYear()
+      return `Copyright © 2015-${thisYear} okTurtles Foundation`
+    }
+  },
+  methods: {
+    onSendClick () {
+      alert('Coming soon!')
+    }
+  }
 }
 </script>
 
@@ -96,7 +113,32 @@ export default {
 }
 
 .c-input {
+  position: relative;
   margin: 1.375rem 0;
+
+  input {
+    padding-right: 2.75rem;
+    border-radius: 0.5rem;
+  }
+}
+
+.c-send-btn {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.5rem;
+  color: $text_0;
+
+  &:focus {
+    border: 1px solid $primary_0;
+    box-shadow: 0 0 0 2px $primary_1;
+  }
 }
 
 .c-logo-img {

src/components/Fundraiser.vue

@@ -10,7 +10,7 @@
         <p class="progress-label">${{ current }} ({{ pourcent }})</p>
       </div>
     </div>
-    <a :href="resolvePath('/sponsor')" class="button">Donate now</a>
+    <a :href="resolvePath('/donate')" class="button">Donate now</a>
   </div>
 </div>
 </template>

src/components/HomeAnimation.vue

@@ -31,14 +31,14 @@
       <section class="container span-container c-container" id="container2">
         <div class="span-2" id="header2">
           <div class="is-title-3 c-container-posttitle">What is Group Income?</div>
-          <p class="is-title-2 c-container-title">A simple way to encourage basic financial security.</p>
-          <p class="c-container-para">The goal of Basic Income is to guarantee that everyone gets access to enough money
-            to meet their fundamental needs, independent of their life circumstances.</p>
-          <a class="c-container-link is-link" v-href="'/faq'">Learn more about Basic Income</a>
+          <p class="is-title-2 c-container-title">A safe space to financially support each other.</p>
+          <p class="c-container-para">Help guarantee access to fundamental needs, independent of life circumstances in a safe and private environment thanks to end-to-end encryption.</p>
+          <a class="c-container-link is-link" v-href="'/faq'">Learn more about Basic Income.</a>
+          <a class="is-link" v-href="'/privacy-policy'">Read more about our privacy and security.</a>
         </div>
 
         <div class="span-2" id="circle-graph">
-          <img class="c-container-image" v-src="'/images/temp/homepage-panel2_2x.jpg'" ref="panel1Circle" />
+          <img class="c-container-image" v-src="'/images/temp/homepage-panel2.jpg'" ref="panel1Circle" />
         </div>
       </section>
 
@@ -47,55 +47,50 @@
           <div class="span-2 c-container-header" id="header3">
             <div class="is-title-3 c-container-posttitle">Why it matters</div>
             <p class="is-title-2 c-container-title">Every individual is valuable.</p>
-            <p class="c-container-para">Many people contribute to our lives and our society, but are often not
-              financially rewarded. From students to unpaid careers, from volunteers to care givers, from unemployed
-              people to unwell.<br />Basic Income can improve the quality of life for millions of people, simply through
-              providing them with basic financial security and the peace of mind that goes with it.</p>
+            <p class="c-container-para">Many people contribute to our lives and our society, but are often not financially rewarded. From students to unpaid careers, from volunteers to care givers, from unemployed people to unwell.</p>
+            <p class="c-container-para c-mt-16">Basic Income can improve the quality of life for millions of people, simply through providing them with basic financial security and the peace of mind that goes with it.</p>
+            <a class="c-container-link is-link" v-href="'/faq'">Learn more about Basic Income.</a>
           </div>
 
           <div class="span-2">
-            <img class="c-container-image" v-src="'/images/temp/homepage-panel3_2x.jpg'" ref="graph1" />
+            <img class="c-container-image" v-src="'/images/temp/homepage-panel3.png'" ref="graph1" />
           </div>
         </section>
 
         <section class="container span-container" id="container4">
           <div class="span-2 c-container-header" id="header4">
-            <div class="is-title-3 c-container-posttitle">Mincome</div>
-            <p class="is-title-2 c-container-title">The minimum amount each one should receive.</p>
-            <p class="c-container-para">The mincome is the agreed value that a group sets as the amount each member
-              needs to live a productive and healthy life. Each month, group members contribute to help those who
-              haven't crossed the mincome threshold.</p>
+            <div class="is-title-3 c-container-posttitle">Set a "mincome" floor</div>
+            <p class="is-title-2 c-container-title">Create your own financial safety net.</p>
+            <p class="c-container-para">Create stronger communities and ensure basic financial security for the people you care about — set a minimum income floor (“mincome”). Each month, group members help those who haven't crossed the mincome threshold.</p>
           </div>
 
           <div class="span-2">
-            <img class="c-container-image" v-src="'/images/temp/homepage-panel4_2x.jpg'" />
+            <img class="c-container-image" v-src="'/images/temp/homepage-panel4.png'" />
             <div class="c-line"></div>
           </div>
         </section>
 
         <section class="container span-container span-reverse" id="contribute">
           <div class="span-2">
-            <div class="is-title-3 c-container-posttitle">Contribute</div>
-            <p class="is-title-2 c-container-title">Each member can contribute to the group.</p>
-            <p class="c-container-para">Members of the group can contribute with monetary or non-monetary donations,
-              securing everyone in your group with an basic income, independent of employment.</p>
+            <div class="is-title-3 c-container-posttitle">Non-monetary Contributions</div>
+            <p class="is-title-2 c-container-title">Everyone has something to offer.</p>
+            <p class="c-container-para">Members of the group can contribute with monetary or non-monetary donations, securing everyone in your group with a basic income, independet of employment.</p>
           </div>
 
           <div class="span-2">
             <img class="c-container-image" v-src="'/images/temp/homepage-panel5_2x.jpg'" />
           </div>
         </section>
 
-        <section class="container span-container" id="container5">
+        <section class="container span-container c-chat-section" id="container5">
           <div class="span-2 c-container-header" id="header5">
-            <div class="is-title-3 c-container-posttitle">With Group Income</div>
-            <p class="is-title-2 c-container-title">Share your income with your friends and family.</p>
-            <p class="c-container-para">Create stronger communities and ensure basic financial security for the people
-              you care about.</p>
+            <div class="is-title-3 c-container-posttitle">Empower Your Community</div>
+            <p class="is-title-2 c-container-title">The best private chat for your community.</p>
+            <p class="c-container-para">A powerful community chat with emoji reactions, polls, file attachments, and more — all completely private and end-to-end encrypted.</p>
           </div>
 
-          <div class="span-2">
-            <img class="c-container-image" v-src="'/images/temp/homepage-panel6_2x.jpg'" ref="gif2"/>
+          <div class="c-chat-img-container">
+            <img class="c-chat-image" v-src="'/images/temp/homepage-panel6.png'" />
           </div>
         </section>
       </div>
@@ -131,12 +126,12 @@
     <div class="graphic-wrapper swoosh-dark-blue">
       <section class="container span-container">
         <div class="span-2">
-          <div class="is-title-3 c-container-posttitle">Contribute</div>
+          <div class="is-title-3 c-container-posttitle">GROUP INCOME</div>
           <p class="is-title-2 c-container-title">Basic Income for your friends and family.</p>
 
           <div class="c-buttons">
             <a class="c-navbar-item button is-big is-primary" v-href="'/get-started'">Get started</a>
-            <a class="c-navbar-item button is-big is-outlined" v-href="'/sponsor'">Sponsor</a>
+            <a class="c-navbar-item button is-big is-outlined" v-href="'/donate'">Donate</a>
           </div>
         </div>
 
@@ -154,8 +149,6 @@ import Sides from './graphics/Sides.vue'
 import Browser from './graphics/Browser.vue'
 import GetStarted from './GetStarted.vue'
 import GSAP from '../mixins/gsap.js'
-import ScrollTrigger from 'gsap/dist/ScrollTrigger'
-import { resolvePath } from '@/utils/helpers.js'
 
 export default {
   mixins: [GSAP],
@@ -220,6 +213,52 @@ export default {
   }
 }
 
+.span-container.c-chat-section {
+  .c-chat-img-container {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 2.75rem;
+    transform: translateX(1rem);
+
+    .c-chat-image {
+      position: relative;
+      width: 90vw;
+      height: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  @include desktop {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: max-content;
+    max-width: unset;
+    padding: 6rem 0;
+
+    .c-container-header {
+      width: max-content;
+      max-width: 36vw;
+      flex-shrink: 0;
+      margin-right: 1.25rem;
+    }
+
+    .c-chat-img-container {
+      display: block;
+      transform: translateX(3rem);
+      width: max-content;
+      margin-top: 0;
+
+      .c-chat-image {
+        width: 50vw;
+      }
+    }
+  }
+}
+
 .graphic-wrapper {
   position: relative;
   padding-bottom: 4rem;
@@ -659,4 +698,8 @@ export default {
     margin-bottom: 2rem;
   }
 }
+
+.c-mt-16 {
+  margin-top: 1.6rem;
+}
 </style>

src/components/Navigation.vue

@@ -26,19 +26,25 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
 import { isNavigationOpen, closeNavigation } from '../store.js';
 import { useStore } from '@nanostores/vue';
 import { resolvePath } from '@/utils/helpers.js'
-
 const $isNavigationOpen = useStore(isNavigationOpen);
-const menuList = [
-  { name: 'Home', id: 'homeLink', path: '/' },
-  { name: 'About us', id: 'aboutUsLink', path: '/about-us' },
-  { name: 'Blog', id: 'blogLink', path: '/blog' },
-  { name: 'FAQS', id: 'blogLink', path: '/faq' },
-  { name: 'Hiring', id: 'hiringLink', path: '/hiring', badge: 3 },
-  { name: 'Sponsor', id: 'donateLink', path: '/sponsor' }
-]
+
+const isCurrentPathEqualTo = val => resolvePath(val) === window.location.pathname
+let menuList = ref([])
+
+onMounted(() => {
+  menuList.value = [
+    !isCurrentPathEqualTo('/') && {  name: 'Home', id: 'homeLink', path: '/' },
+    { name: 'About us', id: 'aboutUsLink', path: '/about-us' },
+    { name: 'Blog', id: 'blogLink', path: '/blog' },
+    { name: 'FAQS', id: 'blogLink', path: '/faq' },
+    { name: 'Hiring', id: 'hiringLink', path: '/hiring', badge: 3 },
+    { name: 'Donate', id: 'donateLink', path: '/donate' }
+  ].filter(Boolean)
+})
 </script>
 
 <style lang="scss" scoped>

src/layouts/DefaultLayout.astro

@@ -5,10 +5,6 @@ import AppStyles from '../components/AppStyles.vue';
 import Footer from '../components/Footer.vue';
 import PageWrapper from '../components/pageWrapper.vue';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../config';
-import { isNavigationOpen } from '../store';
-import { useStore } from '@nanostores/vue';
-
-const $isNavigationOpen = useStore(isNavigationOpen);
 ---
 
 <!DOCTYPE html>
@@ -19,7 +15,7 @@ const $isNavigationOpen = useStore(isNavigationOpen);
 	<body>
 		<PageWrapper>
 			<AppStyles/>
-			<Header client:load />
+			<Header client:load :randomStr="currentPath" />
 			<main>
 				<slot />
 			</main>

src/styles/components/_buttons.scss

@@ -221,6 +221,10 @@ button,
       }
     }
   }
+
+  &.is-unstyled {
+    @extend %reset-button;
+  }
 }
 
 @keyframes loadSpin {
@@ -279,4 +283,4 @@ button.link {
       box-shadow: none;
     }
   }
-}
+}