feat: implement new dacade challenge

assets/css/tailwind.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html{
+  scroll-behavior: smooth;
+}
+
 .nav-item,
 .nav-logo,
 .nav-brand {

components/cards/Scoreboard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative w-full md:flex sm:space-x-5 space-y-0 sm:flex-row-reverse sm:space-x-reverse sm:justify-between overflow-hidden bg-gray-50 sm:p-7 py-5 px-6 sm:items-center"
+    class="relative w-full md:flex sm:space-x-5 space-y-0 sm:flex-row-reverse sm:space-x-reverse sm:justify-between overflow-hidden sm:p-7 py-5 px-6 sm:items-center"
   >
     <div class="md:flex-none absolute bottom-5 left-6 md:relative md:inset-0">
       <div

components/cards/challenge/Challenge.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    class="border-solid border border-gray-200 bg-gray-50 rounded-3xl mb-5 group text-gray-700"
+  >
+    <div
+      class="border-solid border-b border-gray-300 bg-white rounded-3xl sm:p-8 sm:pb-6 w-full p-6"
+    >
+      <div class="w-full">
+        <div class="lg:flex mb-1">
+          <div class="lg:pr-20 w-full lg:w-3/5">
+            <div class="text-lg text-gray-900 font-medium leading-normal">
+              Build a Celo dApp
+            </div>
+            <div class="text-sm mt-3 pb-2 max-w-xxs text-gray-700">
+              In this course, you will learn the most important blockchain
+              concepts that you will need to navigate the Celo ecosystem.
+            </div>
+            <div
+          class="md:hidden text-xxs px-2.5 py-0.5 bg-gray-200 text-gray-500 rounded-3xl max-w-max tracking-wider mb-6.5 uppercase font-medium"
+        >
+          Beginner
+        </div>
+          </div>
+
+          <div
+            class="flex flex-col mb-6 lg:mb-0 mt-6 md:mt-0 rounded-full max-w-max text-sm"
+          >
+            <div class="flex items-center mb-8">
+              <Coin size="medium-mini" token="NFT" />
+              <div class="md:pl-2 max-w-max">
+                <div class="flex text-sm text-gray-700">
+                  <span class="block font-medium pr-1">150</span>
+                  <span class="block font-medium">cUSD Rewards</span>
+                </div>
+                <div class="text-gray-400 text-xs font-normal">
+                  Upon successful completion
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <Coin size="medium" token="cUSD" />
+              <div class="md:pl-2 max-w-max">
+                <div class="flex text-sm text-gray-700">
+                  <span class="block font-medium  pr-1">150</span>
+                  <span class="block font-medium">cUSD Rewards</span>
+                </div>
+                <div class="text-gray-400 text-xs font-normal">
+                  Upon successful completion
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="divide-y-2 divide-solid divide-gray-200 divide-dotted flex flex-col"
+      >
+        <div
+          class="hidden lg:block text-xxs px-2.5 py-0.5 bg-gray-200 text-gray-500 rounded-3xl max-w-max tracking-wider mb-6.5 uppercase font-medium"
+        >
+          Beginner
+        </div>
+        <div class="lg:flex lg:flex-row flex-col justify-between pt-6 items-center">
+          <div class="text-gray-400 lg:w-2/3 text-sm font-normal mb-6 lg:mb-0">
+            <span>Deadline</span>
+            <span class="font-medium">March 12th, 2022</span>
+          </div>
+
+          <nuxt-link :to="link">
+            <ArrowButton :community-styles="true" type="outline-primary">
+              See the challenge
+            </ArrowButton>
+          </nuxt-link>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm:px-8 sm:pt-6 sm:pb-9 w-full p-6 rounded-3xl text-sm">
+      <div class="mb-3 text-gray-400 font-semibold uppercase text-xxs">
+        related content
+      </div>
+      <div class="lg:w-10/12 pb-6.5 text-gray-500 font-normal text-sm">
+        <div class="mb-1.5 font-medium leading-normal">
+          Celo Development 101
+        </div>
+        <div>
+          In this course, you will learn the most important blockchain concepts
+          that you will need to navigate the Celo ecosystem.
+        </div>
+      </div>
+      <div class="lg:w-10/12 text-gray-500 font-normal text-sm">
+        <div class="mb-1.5 font-medium leading-normal">
+          Celo Development 101
+        </div>
+        <div>
+          In this course, you will learn the most important blockchain concepts
+          that you will need to navigate the Celo ecosystem.
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Coin from '@/components/ui/Coin'
+import ArrowButton from '@/components/ui/button/Arrow'
+export default {
+  name: 'ChallengeCard',
+  components: {
+    Coin,
+    ArrowButton,
+  },
+  props: {
+    course: {
+      default: () => {
+        return {}
+      },
+      type: Object,
+    },
+  },
+  computed : {
+    link() {
+      return `/communities/`
+    }
+  }
+
+}
+</script>

components/sections/communities/overview/Sidebar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="flex flex-col divide-y divide-solid divide-gray-100 w-full text-gray-700 space-y-6"
+  >
+    <nuxt-link
+      :to="localePath(mainLink)"
+      :class="{
+        'opacity-80': !isActive(mainLink),
+      }"
+    >
+      <div class="font-medium text-.5xl leading-snug">Challenges</div>
+      <div class="text-sm font-light lg:w-full lg:pr-7 pt-2 mb-6 md:mb-0">
+        In the courses of this community, you will be able to learn about new
+        technologies, solve challenges, get feedback and earn bounties.
+      </div>
+    </nuxt-link>
+    <nuxt-link
+      :to="localePath(scoreboardLink)"
+      class="active md:block hidden scroll-smooth pt-5"
+      :class="{
+        'opacity-80': !isActive(scoreboardLink),
+      }"
+    >
+      <div class="font-medium text-.5xl leading-snug">Scoreboard</div>
+      <div class="text-sm font-light lg:w-full lg:pr-7 pt-2">
+        On the scoreboard, you can see which users have accumulated the most
+        reputation by giving valuable feedback to their peers.
+      </div>
+    </nuxt-link>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'CommunitySidebar',
+  computed: {
+    ...mapGetters({
+      community: 'communities/current',
+    }),
+    scoreboardLink() {
+      return `/communities/${this.community.slug}/scoreboard`
+    },
+    mainLink() {
+      return `/communities/${this.community.slug}`
+    },
+  },
+
+  methods: {
+    isActive(link) {
+      return this.$route.path === link
+    },
+  },
+}
+</script>

components/sections/communities/overview/Wrapper.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="relative">
+    <MainHeaderSection />
+    <Section>
+      <div class="w-full md:flex gap-36 mx-auto mt-14">
+        <div class="md:w-4/12">
+          <CommunitySidebar />
+          <slot name="sidebar" />
+        </div>
+        <div class="md:w-2/3">
+          <slot />
+        </div>
+      </div>
+    </Section>
+  </div>
+</template>
+<script>
+import MainHeaderSection from '@/components/sections/communities/overview/MainHeader'
+import CommunitySidebar from '@/components/sections/communities/overview/Sidebar'
+import Section from '@/components/ui/Section'
+
+export default {
+  name: 'CommunityWrapper',
+  components: {
+    MainHeaderSection,
+    Section,
+    CommunitySidebar,
+  },
+}
+</script>

components/sections/communities/overview/scoreboard/Filter.vue

@@ -1,20 +1,16 @@
 <template>
-  <div
-    class="lg:flex flex-col w-2/4 mr-8 divide-y divide-solid divide-gray-200 hidden"
-  >
-    <div class="divide-y divide-gray-200">
-      <div class="block mt-6 mb-6">
-        <span class="text-gray-700 mb-4">Filter by</span>
-        <div class="mt-6 mb-6">
-          <FilterOption
-            v-for="(option, i) in options"
-            :key="i"
-            v-model="filterBy"
-            :label="option.label"
-            :data="option.value"
-            name="filter-by-option"
-          />
-        </div>
+  <div class="lg:flex flex-col w-2/4 mr-8 hidden">
+    <div class="block mt-7">
+      <span class="text-gray-700 mb-4">Filter by</span>
+      <div class="mt-6">
+        <FilterOption
+          v-for="(option, i) in options"
+          :key="i"
+          v-model="filterBy"
+          :label="option.label"
+          :data="option.value"
+          name="filter-by-option"
+        />
       </div>
     </div>