Redesigned homepage

vue/src/assets/main.css

@@ -42,7 +42,7 @@ a,
   @apply text-blue-500 dark:text-blue-300 underline cursor-pointer;
 }
 
-a.no-decoration {
+.no-decoration {
   @apply no-underline text-inherit;
 }
 

vue/src/components/HomeCTA.vue

@@ -6,13 +6,11 @@
       <div class="flex-shrink md:flex-grow">
       </div>
 
-      <div class="card flex-grow md:flex-shrink text-slate-600 dark:text-slate-200">
+      <div class="max-w-md flex-grow md:flex-shrink text-slate-600 dark:text-slate-200">
         <ul class="signup-pitch">
           <li><h3><i class="pi pi-list-check"></i>high quality multi-choice questions</h3></li>
-          <li><h3><i class="pi pi-envelope"></i>delivered to your inbox</h3></li>
           <li><h3><i class="pi pi-info-circle"></i>with <em>bite-sized</em> explanations</h3></li>
           <li><h3><i class="pi pi-sparkles"></i>to help you become a better dev</h3></li>
-          <li><h3><i class="pi pi-stopwatch"></i>without the massive effort of doing a course</h3></li>
         </ul>
       </div>
 

vue/src/components/HomeForm.vue

@@ -1,24 +1,23 @@
 <template>
-  <div class="card mt-4">
-    <h3>Select your topics of interest</h3>
-    <TopicsList />
-
-    <div class="flex flex-wrap mt-12 mb-4">
-      <div class="flex-shrink text-start mx-auto">
-        <Button :label="question ? 'Browse more questions or subscribe' : 'Browse questions or subscribe'" icon="pi pi-envelope" raised rounded class="font-bold px-8 py-4 md:me-4 mb-2 whitespace-nowrap" @click="navigateToSubscription" />
-        <p class="text-xs text-center md:mb-auto text-slate-500 dark:text-slate-200">You will be asked to
-          <router-link :to="{ name: PageIDs.SUBSCRIPTION }">sign in</router-link>
-          with <i class="pi pi-github ms-1 me-2"></i><i class="pi pi-google me-2"></i>
-        </p>
-      </div>
-      <p class="w-full text-center my-4">or</p>
-      <div class="flex-grow text-center mb-4">
-        <RandomQuestionButton />
-      </div>
+  <div class="mt-8">
+    <div class="mb-12 inline-flex gap-6 flex-wrap items-center">
+      <LinkButton :href="`/${PageIDs.QUESTIONS}`" label="View all questions" icon="pi pi-list-check" class="mx-auto" />
+      <RandomQuestionButton class="mx-auto" />
     </div>
     <TransitionSlot>
       <RandomQuestion v-if="showingRandomQuestion" />
     </TransitionSlot>
+
+    <div class="mx-auto">
+      <h3>Our subscribers get their questions by email to learn in <em>bite-sized portions</em>.</h3>
+      <p class="mb-4">It is a free service. The questions are contributed by other community members.</p>
+      <Button label="Subscribe" icon="pi pi-envelope" raised rounded class="mb-2" @click="navigateToSubscription" />
+      <p class="text-xs text-center md:mb-auto text-slate-500 dark:text-slate-200">
+        You will be asked to
+        <router-link :to="{ name: PageIDs.SUBSCRIPTION }">sign in</router-link>
+        with <i class="pi pi-github ms-1 me-2"></i><i class="pi pi-google me-2"></i>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -28,11 +27,11 @@ import { ref } from 'vue';
 import router from '@/router';
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store';
-import { TOPICS, URL_PARAM_LIST_SEPARATOR } from "@/constants";
+import { URL_PARAM_LIST_SEPARATOR } from "@/constants";
 import { PageIDs } from '@/router';
 
 import Button from 'primevue/button';
-import TopicsList from './TopicsList.vue';
+import LinkButton from './LinkButton.vue';
 import TransitionSlot from "./TransitionSlot.vue";
 import RandomQuestion from "./RandomQuestion.vue";
 import RandomQuestionButton from './RandomQuestionButton.vue';
@@ -52,6 +51,6 @@ async function navigateToSubscription() {
 
 // do not show the sample question when the page is first displayed
 // it will be shown when the user clicks on the button requesting it
-showingRandomQuestion.value= false;
+showingRandomQuestion.value = false;
 
 </script>

vue/src/components/QuestionListCTASignin.vue

@@ -1,39 +1,39 @@
 <template>
   <div>
     <h3 class="mb-4 text-slate-700 dark:text-slate-300 w-full">For registered users only</h3>
-
-    <div class="flex w-full">
-      <div class="flex-shrink md:flex-grow">
-      </div>
-
-      <div class="card flex-grow md:flex-shrink mb-8 text-slate-700 dark:text-slate-200">
-        <p class="mb-8">Signed-in users can track their progress and avoid getting the same question more than once.</p>
-
-        <ul class="signup-pitch mx-auto mb-8">
-          <li><i class="pi pi-lock"></i>your data is not shared with anyone</li>
-          <li><i class="pi pi-chart-scatter"></i>only you can see your progress</li>
-          <li><i class="pi pi-face-smile"></i>it's free</li>
-        </ul>
-
+    <div class="max-w-md">
+      <div class="mb-8 text-slate-700 dark:text-slate-200">
+        <p class="mb-4 text-start">Signed-in users can track their progress and avoid getting the same question more than once. </p>
         <div class="text-center mx-auto">
-          <Button label="Sign in" aria-label="Sign in with Google or Github" icon="pi pi-sign-in" raised rounded class="font-bold px-8 py-4 md:me-4 mb-2 whitespace-nowrap" @click="signin()" />
-          <p class="text-xs text-center md:mb-auto text-slate-500 dark:text-slate-200" aria-hidden="true">No registration is required - sign in with <i class="pi pi-github ms-1 me-2  dark:opacity-85"></i><i class="pi pi-google me-2  dark:opacity-85"></i>
+          <Button label="Sign in" size="small" aria-label="Sign in with Google or Github" icon="pi pi-sign-in" severity="secondary" class="font-bold px-8 py-4 md:me-4 mb-2 whitespace-nowrap" @click="signin()" />
+          <p class="mb-8 text-xs text-center md:mb-auto text-slate-500 dark:text-slate-200" aria-hidden="true">
+            No registration is required - sign in with <i class="pi pi-github ms-1 me-2  dark:opacity-85"></i><i class="pi pi-google me-2  dark:opacity-85"></i>
           </p>
         </div>
-
-      </div>
-      <div class="flex-shrink md:flex-grow">
       </div>
     </div>
 
+    <h3 class="mb-4 text-slate-700 dark:text-slate-300 w-full">Get questions by email</h3>
+    <div class="max-w-md">
+      <div class="mb-8 text-slate-700 dark:text-slate-200">
+        <p class="mb-4 text-start max-w-md">You will learn more and remember it better if you answer only one or two questions per day delivered to your inbox for free.</p>
+        <div class="text-center mx-auto">
+          <LinkButton :href="`/${PageIDs.SUBSCRIPTION}`" label="Subscribe" :primary="true" icon="pi pi-envelope" class="mx-auto" />
+        </div>
+      </div>
+    </div>
+    <Button style="display:none" /><!--Needed to load LinkButton styles-->
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import Button from 'primevue/button';
 import { useAuth0 } from '@auth0/auth0-vue';
 import router from "@/router";
+import { PageIDs } from '@/router';
+
+import Button from 'primevue/button';
+import LinkButton from './LinkButton.vue';
 
 // Auth0 login - this is a duplication
 // TODO: move this to a shared file, but that requires making Auth0 working outside the component 

vue/src/components/RandomQuestion.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class=" border-t-2 border-slate-300">
-    <h3 class="mt-8 mb-8 text-center">Showing a random question about <em class="italic">{{ findTopicById(currentTopic) }}</em></h3>
+  <div class="mb-12 border-t-2 border-b-2 border-slate-300">
+    <h3 class="mt-8 mb-8 text-center">Random question about <em class="italic">{{ findTopicById(currentTopic) }}</em></h3>
     <QuestionCard />
     <ContributorCard class="mb-12 mt-8 md:mt-16" />
   </div>

vue/src/components/RandomQuestionButton.vue

@@ -1,7 +1,5 @@
 <template>
-  <Button v-if="selectedTopics.length == 1" :label="`${partOfButtonLabel} question about ${findTopicById(selectedTopics[0])}`" icon="pi pi-sparkles" severity="secondary" class="whitespace-nowrap" @click.prevent="loadNextQuestion" />
-  <Button v-else-if="selectedTopics.length > 1" :label="`${partOfButtonLabel} question on selected topics`" icon="pi pi-sparkles" severity="secondary" class="whitespace-nowrap" @click.prevent="loadNextQuestion" />
-  <Button v-else :label="`${partOfButtonLabel} random question`" icon="pi pi-sparkles" severity="secondary" class="" @click.prevent="loadNextQuestion" />
+  <LinkButton href="/" :label="buttonLabel" icon="pi pi-sparkles" class="whitespace-nowrap" @click.prevent="loadNextQuestion" />
 </template>
 
 
@@ -11,12 +9,28 @@ import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store';
 import { findTopicById, URL_PARAM_LIST_SEPARATOR, ANY_TOPIC } from "@/constants";
 
-import Button from 'primevue/button';
+import LinkButton from './LinkButton.vue';
 
 const store = useMainStore();
 const { selectedTopics, currentTopic, questionStatus, showingRandomQuestion } = storeToRefs(store);
 
-const partOfButtonLabel = computed(() => showingRandomQuestion.value ? `Try another` : 'View a');
+
+const buttonLabel = computed(() => {
+  const partOfButtonLabel = showingRandomQuestion.value ? `Try another` : 'View';
+  return `${partOfButtonLabel} random question`;
+
+  if (selectedTopics.value.length == 1 && selectedTopics.value[0]) {
+    return `${partOfButtonLabel} question about ${findTopicById(selectedTopics.value[0])}`
+  }
+  else if (selectedTopics.value.length > 1) {
+    return `${partOfButtonLabel} question on selected topics`;
+
+  }
+  else {
+    return `${partOfButtonLabel} random question`;
+  }
+
+});
 
 // pull together currently selected topics and reload the question to show a new random one
 const loadNextQuestion = () => {

vue/src/components/SubscriptionForm.vue

@@ -3,7 +3,7 @@
     <h3 v-if="loading == LoadingStatus.Loading || !loading">Loading topics ...</h3>
     <h3 v-else-if="loading == LoadingStatus.Loaded">Your topics of interest</h3>
     <h3 v-else-if="loading == LoadingStatus.NoData">Select your topics of interest</h3>
-    <TopicsList v-if="loading == LoadingStatus.Loaded || loading == LoadingStatus.NoData" :key="user?.updated" />
+    <TopicList v-if="loading == LoadingStatus.Loaded || loading == LoadingStatus.NoData" :key="user?.updated" />
 
     <div class="mt-4 md:mt-12 mb-12">
       <div v-if="subscriptionStatus == SubscriptionStatus.LoadedWithSubs" class="text-center">
@@ -62,7 +62,7 @@ import { USER_HANDLER_URL, TOKEN_HEADER_NAME, URL_PARAM_TOPICS, URL_PARAM_LIST_S
 import { type User, LoadingStatus } from "@/interfaces";
 
 import Button from 'primevue/button';
-import TopicsList from './TopicsList.vue';
+import TopicList from './TopicList.vue';
 import RandomQuestionButton from "./RandomQuestionButton.vue";
 
 const emit = defineEmits([VUE_EVENT_HYDRATED]);

vue/src/components/TopHeader.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="bg-surface-0 px-6 mt-2 mb-8 md:mb-12 md:px-12 lg:px-20">
     <div>
-      <div class="text-primary mb-4"> 
-        <h2 class=" text-slate-400 font-bold text-2xl" style="font-family: Title;"><router-link to="/"><img alt="Bite-sized Learning Logo" class="h-8 w-8" src="@/assets/logo.svg" /></router-link> Bite-sized learning for software engineers</h2>
+      <div class="text-primary mb-4">
+        <h2 class=" text-slate-400 font-bold text-2xl" style="font-family: Title;">
+          <router-link to="/">
+            <img alt="Bite-sized Learning Logo" class="h-8 w-8" src="@/assets/logo.svg" />
+          </router-link>
+          Bite-sized learning for software engineers
+        </h2>
       </div>
     </div>
   </div>

vue/src/views/HomeView.vue

@@ -1,7 +1,9 @@
 <template>
-  <TransitionSlot>
-    <HomeCTA v-if="displayCTA"/>
-  </TransitionSlot>
+  <HomeCTA />
+  <div class="mt-4">
+    <h3 class="">Select your topics of interest</h3>
+    <TopicList :as-links="true" />
+  </div>
   <HomeForm />
 </template>
 
@@ -16,6 +18,7 @@ import { PageIDs } from '@/router';
 import TransitionSlot from "@/components/TransitionSlot.vue";
 import HomeForm from '@/components/HomeForm.vue';
 import HomeCTA from '@/components/HomeCTA.vue';
+import TopicList from '@/components/TopicList.vue';
 
 const store = useMainStore();
 const { token, question } = storeToRefs(store);

vue/src/views/QuestionListView.vue

@@ -1,5 +1,6 @@
 <template>
-  <TopicsList :as-links="true" />
+  <h3 class="">Select your topic of interest</h3>
+  <TopicList :as-links="true" />
   <div v-if="topic">
     <QuestionList :topic="topic" :key="topic" class="mt-12" />
     <div v-if="!email" class="mb-12 mt-12 cta-box">
@@ -25,7 +26,7 @@ import { useMainStore } from '@/store';
 import QuestionListCTASignin from '@/components/QuestionListCTASignin.vue';
 import QuestionList from '@/components/QuestionList.vue';
 import QuestionListCTASubscribe from '@/components/QuestionListCTASubscribe.vue';
-import TopicsList from '@/components/TopicsList.vue';
+import TopicList from '@/components/TopicList.vue';
 import LoadingMessage from '@/components/LoadingMessage.vue';
 
 const route = useRoute();