update home

This commit is contained in:
2020-11-23 17:30:45 +02:00
parent 1f238899f0
commit ae5a024c76

View File

@@ -2,12 +2,133 @@
<Layout :hideHeader="true" :disableScroll="true"> <Layout :hideHeader="true" :disableScroll="true">
<div class="container sm:pxi-0 mx-auto overflow-hidden"> <div class="container sm:pxi-0 mx-auto overflow-hidden">
<!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> --> <!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
<div class="flex flex-col" :style="{ height: contentHeight + 'px' }"> <div class="py-10 flex flex-col" :style="{ height: contentHeight + 'px' }">
<img src="/img/new_home.png" alt="" /> <div class="relative my-5 shadow-md border-solid border-2 border-light-gray-100">
<!-- <div class="center py-10"> --> <div class="h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/4">
<!-- <h2 class="text-center">CO-CREATING BETTER FUTURES TOGETHER</h2> --> <img class="w-full h-full object-cover" src="https://via.placeholder.com/500" alt=""/>
<!-- <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> --> <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> </div>
<!-- <vue-markdown> </vue-markdown> --> <!-- <vue-markdown> </vue-markdown> -->
@@ -25,7 +146,7 @@ export default {
computed: { computed: {
contentHeight() { contentHeight() {
if (process.isClient) { if (process.isClient) {
return window.innerHeight - 128; return window.innerHeight - 50;
} }
}, },
}, },