update home and about
This commit is contained in:
parent
0be19f8c9b
commit
34641b9870
@ -83,7 +83,7 @@ extra:
|
||||
|
||||
<!-- section 6 -->
|
||||
|
||||
{{ header_center(
|
||||
{{ text_center(
|
||||
title="A Part of ThreeFold Ecosystem",
|
||||
subheader="BENEFITS",
|
||||
subtitle="An Integral Component of Sustainable Decentralization",
|
||||
|
||||
@ -10,7 +10,7 @@ extra:
|
||||
|
||||
<!-- Hero section 1 -->
|
||||
|
||||
{{ hero_right_img(
|
||||
{{ hero(
|
||||
image_src="/images/mycel_1.png",
|
||||
image_alt="Mycelium Network Graphic",
|
||||
title="MYCELIUM",
|
||||
|
||||
@ -1,80 +0,0 @@
|
||||
<div class="bg-white">
|
||||
<header class="absolute inset-x-0 top-0 z-50">
|
||||
<nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:gap-x-12">
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Product</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Marketplace</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Log in <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Mobile menu, show/hide based on menu open state. -->
|
||||
<div class="lg:hidden" role="dialog" aria-modal="true">
|
||||
<!-- Background backdrop, show/hide based on slide-over state. -->
|
||||
<div class="fixed inset-0 z-50"></div>
|
||||
<div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="#" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img class="h-8 w-auto" src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600" alt="">
|
||||
</a>
|
||||
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flow-root">
|
||||
<div class="-my-6 divide-y divide-gray-500/10">
|
||||
<div class="space-y-2 py-6">
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Product</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Features</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Marketplace</a>
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Company</a>
|
||||
</div>
|
||||
<div class="py-6">
|
||||
<a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Log in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
||||
Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
|
||||
<p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
|
||||
<a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
|
||||
<div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
<div class="text-gray-900 bg-cover bg-no-repeat mybg" style="background-image:url(expand/BG_wide.png)">
|
||||
<div class="h-full">
|
||||
<div class="flex flex-col items-center md:flex-row">
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="block">
|
||||
<img
|
||||
src="expand/togethericon.png" class="w-full h-full"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-start justify-center w-full py-24 md:w-1/2">
|
||||
<div class="flex flex-col items-start justify-center p-6">
|
||||
<h1>Be the <strong>Internet</strong></h1>
|
||||
<h3 class="my-0">Host a node, support a decentralized future</h3>
|
||||
<p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Take part in shaping a new Internet era governed by all of us.</p>
|
||||
<button class="mx-0"><a target="_blank" href="https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html">Get Started</a></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
35
templates/shortcodes/hero.html
Normal file
35
templates/shortcodes/hero.html
Normal file
@ -0,0 +1,35 @@
|
||||
{% set image_src = image_src | default(value="") %}
|
||||
{% set image_alt = image_alt | default(value="") %}
|
||||
{% set title = title | default(value="MYCELIUM") %}
|
||||
{% set subtitle = subtitle | default(value="") %}
|
||||
{% set description = description | default(value="") %}
|
||||
{% set highlight = highlight | default(value="") %}
|
||||
{% set button_text = button_text | default(value="") %}
|
||||
{% set button_link = button_link | default(value="") %}
|
||||
|
||||
|
||||
|
||||
<div class="relative fade-in pt-10 mt-4 lg:mt-24 lg:pt-24 lg:h-screen">
|
||||
<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
|
||||
<div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
|
||||
<h1 class="text-4xl font-semibold tracking-tight text-black lg:text-6xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<h2 class="fade-in text-balance lg:text-4xl text-3xl font-normal tracking-tight text-black">{{ subtitle }}
|
||||
</h2>
|
||||
<p class="mt-8 text-pretty lg:text-xl text-lg font-light text-black lgl:text-xl">
|
||||
{{ description }} <br><br> <b>{{ highlight }}</b>
|
||||
</p>
|
||||
<div class="mt-10 flex items-center gap-x-6">
|
||||
<a href="{{ button_link }}" class="rounded-2xl bg-black px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-gray-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
|
||||
{{ button_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0 ">
|
||||
<img class="lg:mt-10 aspect-1/1 mx-auto w-full sm:w-2/3 md:w-1/2 lg:w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto" src="{{ image_src }}" alt="{{ image_alt }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user