Update the header and footer

Signed-off-by: Jakub Sokołowski <jakub@status.im>
This commit is contained in:
jinhojang6 2020-10-08 01:01:06 +09:00 committed by Jakub
parent 7f1621f669
commit db2fd48a5f
2 changed files with 45 additions and 25 deletions

View File

@ -27,10 +27,10 @@
</h5>
<div class="js-collapse custom-accordion" id="footer-nav-1">
<ul class="text-lg font-body text-gray-200">
<li class="mt-4"><a class="hover:text-white" href="/features/">Features</a></li>
<li class="mt-4"><a class="hover:text-white" href="/security/">Security</a></li>
<li class="mt-4"><a class="hover:text-white" href="/get/">Get App</a></li>
<li class="mt-4"><a class="hover:text-white" href="/nightly/">Nightly</a></li>
<li class="mt-4"><a class="hover:text-white" href="https://status.im/features/">Features</a></li>
<li class="mt-4"><a class="hover:text-white" href="https://status.im/security/">Security</a></li>
<li class="mt-4"><a class="hover:text-white" href="https://status.im/get/">Get App</a></li>
<li class="mt-4"><a class="hover:text-white" href="https://status.im/nightly/">Nightly</a></li>
</ul>
</div>
</div>

View File

@ -4,7 +4,7 @@
<nav class="js-nav overflow-auto xl:overflow-visible font-display">
<ul class="flex flex-col xl:flex-row xl:items-center text-xl xl:text-xl font-display">
<li class="xl:px-8 py-4 xl:py-16 md:text-lg 2xl:text-xl js-has-submenu hover:text-primary-base">
<a href="/features/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
<a href="https://status.im/features/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
Features
<span class="hidden xl:block ml-4"><img src="/img/icon-arrow-down.svg"></span>
</a>
@ -14,19 +14,39 @@
<div class="text-right">
<h4 class="text-4xl font-display font-normal">Features</h4>
<p class="text-2xl mt-4 font-display font-normal">Private Messenger, Crypto Wallet, Web3 Browser, and more</p>
<a href="/features/" class="group text-primary-base font-special font-semibold hover:text-primary-900 inline-flex items-center mt-8">
See All Features
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</div>
<div class="mt-4">
<ul>
<ul class="grid grid-cols-2 gap-8">
<li>
<a href="/keycard-integration/" class="flex items-center group">
<a href="https://status.im/private-messenger/" class="inline-flex items-center text-gray-900 group">
Private Messenger
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="https://status.im/account-creation/" class="inline-flex items-center text-gray-900 group">
Account Creation
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="https://status.im/secure-wallet/" class="inline-flex items-center text-gray-900 group">
Secure Crypto Wallet
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="https://status.im/keycard-integration/" class="inline-flex items-center text-gray-900 group">
Keycard
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="https://status.im/web-three-browser/" class="inline-flex items-center text-gray-900 group">
Web3 Browser
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
</ul>
</div>
</div>
@ -34,7 +54,7 @@
</div>
</li>
<li class="js-has-submenu hover:text-primary-base py-4 border-t md:text-lg 2xl:text-xl border-gray-100 xl:border-t-0 xl:px-8 xl:py-16">
<a href="/get-involved/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
<a href="https://status.im/get-involved/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
Get Involved
<span class="hidden xl:block ml-4"><img src="/img/icon-arrow-down.svg"></span>
</a>
@ -44,7 +64,7 @@
<div class="text-right">
<h4 class="text-2xl xl:text-4xl font-display text-gray-900">Get Involved</h4>
<p class="text-2xl text-gray-900 mt-4">Status is an open source project made by people all over the world.</p>
<a href="/get-involved/" class="group text-primary-base font-special font-semibold inline-flex items-center hover:text-primary-900 mt-12">
<a href="https://status.im/get-involved/" class="group text-primary-base font-special font-semibold inline-flex items-center hover:text-primary-900 mt-12">
Learn More
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
@ -52,7 +72,7 @@
<div class="mt-4 pl-12">
<ul class="flex items-center flex-wrap">
<li class="w-1/2">
<a href="/docs/" class="flex items-center text-gray-900 group">
<a href="https://status.im/docs/" class="flex items-center text-gray-900 group">
Developers
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
@ -99,14 +119,14 @@
</ul>
</li>
<li class="mt-8 w-1/2">
<a href="/get-involved/educators/" class="flex items-center text-gray-900 group">
<a href="https://status.im/get-involved/educators/" class="flex items-center text-gray-900 group">
Educators
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li class="w-1/2"></li>
<li class="mt-8 w-1/2">
<a href="/get-involved/community-groups/" class="flex items-center text-gray-900 group">
<a href="https://status.im/get-involved/community-groups/" class="flex items-center text-gray-900 group">
Community Groups
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
@ -117,10 +137,10 @@
</div>
</div>
</li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="/security/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">Security</a></li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="/snt-utility/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">SNT Utility</a></li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="https://status.im/security/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">Security</a></li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="https://status.im/snt-utility/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">SNT Utility</a></li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16 js-has-submenu" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
<a href="/docs/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
<a href="https://status.im/docs/" class="hover:text-primary-base text-gray-800 font-medium inline-flex items-center">
Developers
<span class="hidden xl:block ml-4"><img src="/img/icon-arrow-down.svg"></span>
</a>
@ -130,7 +150,7 @@
<div class="text-right">
<h4 class="text-2xl xl:text-4xl font-display text-gray-900">Developers</h4>
<p class="text-2xl mt-4 text-gray-900">Everything you need to start developing with Status</p>
<a href="/docs/" class="group font-special font-semibold text-primary-base hover:text-primary-900 inline-flex items-center mt-8">
<a href="https://status.im/docs/" class="group font-special font-semibold text-primary-base hover:text-primary-900 inline-flex items-center mt-8">
Read All
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
@ -138,25 +158,25 @@
<div class="mt-4">
<ul class="grid grid-cols-2 gap-8">
<li>
<a href="/technical/" class="inline-flex items-center text-gray-900 group">
<a href="https://status.im/technical/" class="inline-flex items-center text-gray-900 group">
Contributor Guide
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="/developer_tools/" class="inline-flex items-center text-gray-900 group">
<a href="https://status.im/developer_tools/" class="inline-flex items-center text-gray-900 group">
DApp Integration
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="/user_guides/" class="inline-flex items-center text-gray-900 group">
<a href="https://status.im/user_guides/" class="inline-flex items-center text-gray-900 group">
User Guides
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
</li>
<li>
<a href="/our_team/" class="inline-flex items-center text-gray-900 group">
<a href="https://status.im/our_team/" class="inline-flex items-center text-gray-900 group">
Our Team
<span class="ml-4 group-hover:translate-x-1 transform transition-all duration-200 linear"><img src="/img/icon-arrow-right.svg"></span>
</a>
@ -173,7 +193,7 @@
</div>
</div>
</li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="/about/" class="text-gray-800 hover:text-primary-base font-medium inline-flex items-center">About</a></li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="https://status.im/about/" class="text-gray-800 hover:text-primary-base font-medium inline-flex items-center">About</a></li>
<li class="hover:text-primary-base py-4 border-t border-gray-100 md:text-lg 2xl:text-xl xl:border-t-0 xl:px-8 xl:py-16"><a href="https://our.status.im" class="text-gray-800 hover:text-primary-base font-medium inline-flex items-center">Blog</a></li>
</ul>
</nav>