update home

This commit is contained in:
2020-11-25 15:38:12 +02:00
parent f009792299
commit b886fe6dcb
4 changed files with 82 additions and 123 deletions

View File

@@ -2,137 +2,96 @@
<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" :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 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="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>
<div class="flex-1">
<img src="img/valuesheader2.png" alt="globe" class="max-w-2xl">
</div>
</div>
</section> -->
<section class="py-20">
<div class="flex flex-wrap items-center -mx-8">
<div class="md:ml-auto md:w-1/2 md:pl-10 px-20 text-center">
<h1 class="text-4xl font-semibold font-tf-secondary">THANK YOU PARTNERS</h1>
<p class="mt-6 mb-8 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/valuesheader2.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 text-gray-600 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>
</div>
</div>
</div>
</div>
<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 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>
</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 text-gray-600 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>
</div>
</div>
</div>
</div>
<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 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>
</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 text-gray-600 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>
</div>
</div>
</div>
</div>
<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 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>
</section>
</div>
<!-- <vue-markdown> </vue-markdown> -->
</div>
</Layout>
</template>

BIN
static/img/blog.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
static/img/people.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB