From ae5a024c76de137efb6173d78b035ae8a3bdad0c Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Mon, 23 Nov 2020 17:30:45 +0200
Subject: [PATCH] update home

---
 src/pages/Index.vue | 135 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 128 insertions(+), 7 deletions(-)

diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index c79f5947e..f3a84e477 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -2,12 +2,133 @@
   <Layout :hideHeader="true" :disableScroll="true">
     <div class="container sm:pxi-0 mx-auto overflow-hidden">
       <!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
-      <div class="flex flex-col" :style="{ height: contentHeight + 'px' }">
-        <img src="/img/new_home.png" alt="" />
-        <!-- <div class="center py-10"> -->
-        <!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> -->
-        <!-- <p class="text-center py-1">The ThreeFold Foundation is not ThreeFold — rather, it is sparking a movement to bring the world <br> a truly peer-to-peer internet. We acknowledge and support the many people and organizations around the world <br>  who bring crucial support to the growth and adoption of the ThreeFold Grid.</p> -->
-        <!-- </div> -->
+      <div class="py-10 flex flex-col" :style="{ height: contentHeight + 'px' }">
+        <div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
+  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
+    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
+  </div>
+  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
+    <div class="md:ml-auto md:w-3/4 md:pl-10">
+      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
+        Award winning support
+      </div> -->
+      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
+        Projects
+      </h2>
+      <p class="mt-3 text-lg leading-7">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </p>
+      <div class="mt-4">
+        <div class="inline-flex rounded-md shadow">
+          <a href="/projects" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
+            LEARN MORE
+            <!-- Heroicon name: external-link -->
+            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
+  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
+    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
+  </div>
+  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
+    <div class="md:ml-auto md:w-3/4 md:pl-10">
+      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
+        Award winning support
+      </div> -->
+      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
+        Pepole
+      </h2>
+      <p class="mt-3 text-lg leading-7">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </p>
+      <div class="mt-4">
+        <div class="inline-flex rounded-md shadow">
+          <a href="/people" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
+            LEARN MORE
+            <!-- Heroicon name: external-link -->
+            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
+  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
+    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
+  </div>
+  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
+    <div class="md:ml-auto md:w-3/4 md:pl-10">
+      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
+        Award winning support
+      </div> -->
+      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
+        Overview
+      </h2>
+      <p class="mt-3 text-lg leading-7">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </p>
+      <div class="mt-4">
+        <div class="inline-flex rounded-md shadow">
+          <a href="/overview" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
+            LEARN MORE
+            <!-- Heroicon name: external-link -->
+            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
+  <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
+    <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
+  </div>
+  <div class="relative max-w-screen-xl mx-auto px-4 py-12 sm:px-6 lg:px-8 lg:py-3">
+    <div class="md:ml-auto md:w-3/4 md:pl-10">
+      <!-- <div class="text-base leading-6 font-semibold uppercase tracking-wider text-gray-300">
+        Award winning support
+      </div> -->
+      <h2 class="mt-1 text-3xl leading-9 font-extrabold tracking-tight uppercase">
+        News
+      </h2>
+      <p class="mt-3 text-lg leading-7">
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+      </p>
+      <div class="mt-4">
+        <div class="inline-flex rounded-md shadow">
+          <a href="/news" class="inline-flex items-center justify-center px-5 py-1 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
+            LEARN MORE
+            <!-- Heroicon name: external-link -->
+            <svg class="-mr-1 ml-3 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+              <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
       </div>
 
       <!-- <vue-markdown> </vue-markdown> -->
@@ -25,7 +146,7 @@ export default {
   computed: {
     contentHeight() {
       if (process.isClient) {
-        return window.innerHeight - 128;
+        return window.innerHeight - 50;
       }
     },
   },