Merge pull request #153 from teaxyz/new-footer

#151 new footer layout
This commit is contained in:
Neil 2023-01-18 10:18:58 +08:00 committed by GitHub
commit d4fb5c37ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 101 deletions

View file

@ -1,104 +1,62 @@
<footer class="h-autofont-machina relative w-full bg-black">
<section class="p-4 px-16 py-16">
<div class="flex">
<div class="footer-text w-3/4 pr-16">
<h3 class="mb-5 text-4xl text-primary">
Changing the way you build. And what happens after you build it.
</h3>
<p class="mb-5">
tea.cli is a delightful package manager that gets out of your way and sets you up for a
joyful development process. You can install it today. Our web3 protocol will create an OSS
ecosystem that is safer for all users, and fair for all maintainers. Read our white paper
here.
</p>
<div class="w-3/4">
<img src="/images/footer-grid-element.svg" alt="grid" />
</div>
</div>
<script lang="ts">
import Button from '@tea/ui/Button/Button.svelte';
</script>
<div class="card social-box h-full w-1/4 border-2 border-gray">
<ul class="list-group list-group-flush">
<div class="border-b border-gray p-3">
<a
class="list-group-item"
role="button"
href="https://twitter.com/teaxyz"
target="_blank"
rel="noreferrer"><i class="icon-twitter social-icon mr-3" />Twitter</a
>
</div>
<div class="border-b border-gray p-3">
<a
class="list-group-item"
role="button"
href="https://discord.gg/KCZsXfJphn"
target="_blank"
rel="noreferrer"><i class="icon-discord social-icon mr-3" />Discord</a
>
</div>
<div class="border-b border-gray p-3">
<a
class="list-group-item"
role="button"
href="https://github.com/teaxyz"
target="_blank"
rel="noreferrer"><i class="icon-github social-icon mr-3" />GitHub</a
>
</div>
<div class="border-b border-gray p-3">
<a
class="list-group-item"
role="button"
href="https://reddit.com/r/teaxyz"
target="_blank"
rel="noreferrer"><i class="icon-reddit social-icon mr-3" />Reddit</a
>
</div>
<div class="p-3">
<a
class="list-group-item"
role="button"
href="https://t.me/tea_xyz"
target="_blank"
rel="noreferrer"><i class="icon-telegram social-icon mr-3" />Telegram</a
>
</div>
</ul>
<footer class="relative h-auto w-full bg-black font-machina">
<section class="p-4 px-16 py-16">
<h3 class="mb-5 text-2xl text-primary">QUICK LINKS</h3>
<menu class="flex gap-4">
<div class="flex-grow border border-l-0 border-r-0 border-gray">
<a href="/">
<Button>
<div class="flex justify-between text-primary hover:text-black">
<div class="uppercase">About the tea store</div>
<div>&#8594</div>
</div>
</Button>
</a>
</div>
</div>
<div class="flex-grow border border-l-0 border-r-0 border-gray">
<a href="/">
<Button>
<div class="flex justify-between text-primary hover:text-black">
<div class="uppercase">REPORT A PROBLEM</div>
<div>&#8594</div>
</div>
</Button>
</a>
</div>
<div class="flex-grow border border-l-0 border-r-0 border-gray">
<a href="https://tea.xyz" target="_blank" rel="noreferrer">
<Button>
<div class="flex justify-between text-primary hover:text-black">
<div class="uppercase">VISIT TEA.XYZ</div>
<div>&#8594</div>
</div>
</Button>
</a>
</div>
</menu>
</section>
<section class="h-16 border border-r-0 border-gray p-4 px-16">
<div class="flex">
<div class="w-1/2 pt-2">
<p class="text-xs">
©2022 tea inc. You can also share our <a
href="https://linktr.ee/teaxyz"
target="_blank"
rel="noreferrer">Linktree</a
>.
</p>
</div>
<div class="flex w-1/2 pt-2">
<ul class="nav ml-auto flex text-xs">
<li class="nav-item mr-3 ">
<a
class="nav-link footer-link small"
href="https://tea.xyz/privacy-policy/"
target="_blank"
rel="noreferrer">Privacy Policy</a
>
</li>
<li class="nav-item">
<a
class="nav-link footer-link small"
href="https://tea.xyz/terms-of-use/"
target="_blank"
rel="noreferrer">Terms of Use</a
>
</li>
</ul>
</div>
<div class="flex gap-4 text-xs text-gray">
<a
href="https://tea.xyz/terms-of-use/"
target="_blank"
rel="noreferrer"
class="hover:text-white"
>
TERMS & SERVICES
</a>
<a
href="https://tea.xyz/privacy-policy/"
target="_blank"
rel="noreferrer"
class="hover:text-white"
>
PRIVACY POLICY
</a>
</div>
</section>
</footer>

View file

@ -23,7 +23,7 @@
<div id="main-layout" class="w-full">
<TopBar />
<section class="pt-24" bind:this={view}>
<section class="relative pt-24" bind:this={view}>
<figure />
<div class="content">
@ -42,11 +42,9 @@
height: 100vh;
}
section {
position: fixed;
left: 0px;
right: 0px;
height: 100vh;
height: calc(100vh - 82px);
overflow-y: scroll;
box-sizing: border-box;
}
figure {