From dcc4ebed2f1d1dff22f246ece39238cc88ece009 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Tue, 1 Dec 2020 15:18:50 +0200
Subject: [PATCH] update home card

---
 src/assets/scss/main.scss  |  10 +++
 src/components/NewCard.vue |  26 ++++++
 src/pages/Index.vue        | 179 ++++++++++++++++++++-----------------
 3 files changed, 131 insertions(+), 84 deletions(-)
 create mode 100644 src/components/NewCard.vue

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 56a67776c..b1dfa70f4 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -148,6 +148,16 @@ body[data-theme="dark"] {
     .post-content-text {
         @apply text-gray-300;
     }
+    .lg\:shadow-lg{
+        box-shadow :0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04)
+    }
+    .learn-button{
+        background-color: #c4c4c4;
+        @apply text-gray-900;
+        &:hover {
+            @apply bg-gray-300;
+        }
+    }
     .text-gray-700{
         @apply text-white;
     }
diff --git a/src/components/NewCard.vue b/src/components/NewCard.vue
new file mode 100644
index 000000000..29a83cb1a
--- /dev/null
+++ b/src/components/NewCard.vue
@@ -0,0 +1,26 @@
+<template>
+        <div>
+    <div class="lg:py-12 lg:flex lg:justify-center flex flex-col">
+        <div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
+            <div class="lg:w-1/2">
+                <div class="h-64 bg-cover lg:rounded-lg lg:h-full" :style="card.img"></div>
+            </div>
+            <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+                <h2 class="text-3xl text-gray-700 font-bold">{{ card.title }}</h2>
+                <p class="mt-4 text-gray-700">{{ card.content }}</p>
+                <div class="mt-8">
+                    <a  :href="card.link" class="bg-gray-900 learn-button hover:bg-gray-700 text-gray-100 px-5 py-3 font-semibold rounded">{{ card.button }}</a>
+                </div>
+            </div>
+        </div>
+    </div> 
+</div>
+
+
+</template>
+
+<script>
+export default {
+  props: ["card"],
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 638c4ad98..0fa11e6df 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -2,106 +2,116 @@
   <Layout :hideHeader="true" :disableScroll="true">
     <div class="container sm:pxi-0 mx-auto overflow-hidden">
       <!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
-      
-      <div class="py-10 flex flex-col">
 
-        <!-- <section class="my-5 pt-10">
-            <div class="flex mx-32">
-                <div class="flex-1 mx-auto mr-24 py-10 my-auto justify-items-end max-w-2xl text-right">
-                    <h2 class="uppercase font-semibold text-gray-700">Be The Internet</h2>
-                    <p class="mt-6 mb-8 text-gray-400 leading-relaxed font-tf-primary text-lg">Centralized storage and Compute <br> owned by everyone, everywhere.</p>
-                </div>
-                <div class="flex-1">
-                    <img src="img/valuesheader2.png" alt="globe" class="max-w-2xl">
-                </div>
+      <div class="py-10 flex flex-col">
+        <section class="py-10">
+          <div class="flex flex-wrap items-center -mx-8">
+            <div class="md:ml-auto md:w-1/2 md:pl-20 px-10">
+              <h2 class="text-4xl font-bold font-tf-secondary">
+                Welcome to the growing ecosystem of ThreeFold
+              </h2>
+              <!-- <p class="text-gray-600 leading-relaxed">Welcome to the growing ecosystem of ThreeFold</p> -->
             </div>
+            <div class="md:ml-auto md:w-1/2 pl-8">
+              <img class="object-cover" src="img/equality.png" alt="imgAlt" />
+            </div>
+          </div>
+        </section>
+      </div>
+
+              <!-- <section class="py-5 m-5 px-0 shadow-xl border border-gray-300">
+          <div class="flex flex-wrap items-center -mx-8">
+            <div class="md:ml-auto md:w-1/3 pl-8">
+              <img
+                src="img/projects_card.png"
+                alt="imgAlt"
+                class="object-cover"
+              />
+            </div>
+            <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
+              <h2 class="text-4xl font-semibold font-tf-secondary uppercase">
+                Projects
+              </h2>
+              <p class="mt-6 mb-8 leading-relaxed">
+                Organisations that take action now to shape a conscious digital
+                world.
+              </p>
+              <div
+                class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"
+              >
+                <a href="/projects"
+                  ><svg
+                    data-name="Layer 1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 430.04 315.72"
+                    class="inline-block fill-current text-green-600 h-5 w-5 mt-3"
+                  >
+                    <title>Arrows</title>
+                    <path
+                      d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z"
+                      transform="translate(-35 -96.28)"
+                      class="cls-1"
+                    ></path>
+                    <path
+                      d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z"
+                      transform="translate(-35 -96.28)"
+                      class="cls-1"
+                    ></path></svg
+                ></a>
+                <a
+                  href="/projects"
+                  class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold"
+                  >LEARN MORE</a
+                >
+              </div>
+            </div>
+          </div>
         </section> -->
 
-     <section class="py-10">
-            <div class="flex flex-wrap items-center -mx-8">
-              
-              <div class="md:ml-auto md:w-1/2 md:pl-20 px-10">
-                <h2 class="text-4xl font-bold font-tf-secondary">Welcome to the growing ecosystem of ThreeFold</h2>
-                <!-- <p class="text-gray-600 leading-relaxed">Welcome to the growing ecosystem of ThreeFold</p> -->
-              </div>
-              <div class="md:ml-auto md:w-1/2 pl-8">
-                <img class="object-cover" src="img/equality.png" alt="imgAlt"/>
-              </div>
-            </div>
-          </section>   
-
-
-
-          <section class="py-5  m-5 px-0 shadow-xl border border-gray-300 ">
-            <div class="flex flex-wrap items-center -mx-8">
-              <div class="md:ml-auto md:w-1/3 pl-8">
-                <img class="object-cover" src="img/projects_card.png" alt="imgAlt"/>
-              </div>
-              <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
-                <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Projects</h2>
-                <p class="mt-6 mb-8 leading-relaxed">Organisations that take action now to shape a conscious digital world.</p>
-                <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
-                    <a  href="/projects">
-                        <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
-                    </a>
-                    <a class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold" href="/projects">LEARN MORE</a>
-                </div>
-
-              </div>
-            </div>
-          </section>
-          <section class="py-5  m-5 px-0 shadow-xl border border-gray-300 ">
-            <div class="flex flex-wrap items-center -mx-8">
-              <div class="md:ml-auto md:w-1/3 pl-8">
-                <img class="object-cover" src="img/people.png" alt="imgAlt"/>
-              </div>
-              <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
-                <h2 class="text-4xl font-semibold font-tf-secondary uppercase">People</h2>
-                <p class="mt-6 mb-8 leading-relaxed">Independent of location, race, gender, religion we leave no one behind.</p>
-                <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
-                    <a  href="/people">
-                        <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
-                    </a>
-                    <a class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold" href="/people">LEARN MORE</a>
-                </div>
-
-              </div>
-            </div>
-          </section>
-          <section class="py-5  m-5 px-0 shadow-xl border border-gray-300 ">
-            <div class="flex flex-wrap items-center -mx-8">
-              <div class="md:ml-auto md:w-1/3 pl-8">
-                <img class="object-cover" src="img/blog.png" alt="imgAlt"/>
-              </div>
-              <div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
-                <h2 class="text-4xl font-semibold font-tf-secondary uppercase">Blog</h2>
-                <p class="mt-6 mb-8 leading-relaxed">We collaborate to improve our solutions, efficiency, reach, visibility and service.</p>
-                <div class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105">
-                    <a  href="/blog">
-                        <svg  class="inline-block fill-current text-green-600 h-5 w-5 mt-3 " data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.04 315.72"><title>Arrows</title><path class="cls-1" d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z" transform="translate(-35 -96.28)"/><path class="cls-1" d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z" transform="translate(-35 -96.28)"/></svg>
-                    </a>
-                    <a class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold" href="/blog">LEARN MORE</a>
-                </div>
-
-              </div>
-            </div>
-          </section>
- </div>
-
       <!-- <vue-markdown> </vue-markdown> -->
+      <NewCard v-for="card in cards" :key="card.title" :card="card" />
     </div>
-
- 
   </Layout>
 </template>
 
 <script>
 import VueMarkdown from "vue-markdown";
+import NewCard from "~/components/NewCard.vue";
 
 export default {
   metaInfo: {
     title: "Home",
   },
+  data() {
+    return {
+      cards: [
+        {
+          title: "PROJECTS",
+          content:
+            "Organisations that take action now to shape a conscious digital world.",
+          img: "background-image:url('https://fakeimg.pl/640x360')",
+          button: "Learn More",
+          link: "/projects",
+        },
+        {
+          title: "PEOPLE",
+          content:
+            "Independent of location, race, gender, religion we leave no one behind.",
+          img: "background-image:url('https://fakeimg.pl/640x360')",
+          button: "Learn More",
+          link: "/people",
+        },
+        {
+          title: "BLOG",
+          content:
+            "We collaborate to improve our solutions, efficiency, reach, visibility and service.",
+          img: "background-image:url('https://fakeimg.pl/640x360')",
+          button: "Learn More",
+          link: "/blog",
+        },
+      ],
+    };
+  },
   computed: {
     contentHeight() {
       if (process.isClient) {
@@ -111,6 +121,7 @@ export default {
   },
   components: {
     VueMarkdown,
+    NewCard,
   },
 };
 </script>