onvlt/reset-sender-v2
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve footer

Browse source
This commit is contained in:
Ondřej 2024-02-20 13:04:24 +01:00
parent 79c73f7918
commit 97e64ea679
1 changed files with 76 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

135
src/views/Footer.tsx
View file

@ -6,7 +6,7 @@ function Illustration() {
return (
<div class="grid md:grid-cols-3 pb-6">
<img
src="/images/spekacky.webp"
src={asset("/images/spekacky.webp")}
width="6072"
height="2242"
alt=""
@ -14,7 +14,7 @@ function Illustration() {
/>
<div class="grid place-content-center">
<img
src="/images/logo-white.webp"
src={asset("/images/logo-white.webp")}
width="1024"
height="493"
class="max-w-[240px] lg:max-w-[300px]"
@ -25,72 +25,77 @@ function Illustration() {
);
}
function Logos() {
return (
<div class="flex md:flex-col md:items-start gap-6 opacity-75 md:border-r border-gray-700 md:mr-8">
<ResetLogo class="h-8" />
<InsureOurFutureLogo class="max-w-[80px] mb-6" />
</div>
);
}
function ColophonReset() {
return (
<nav class="opacity-75">
<p class="mb-4">
<ResetLogo class="h-8" />
</p>
<p class="flex flex-wrap gap-3 items-baseline">
<a
class="link"
href="https://re-set.cz/about-us"
target="_blank"
>
About <strong>Re-set</strong>
</a>
<a
class="link"
href="https://www.facebook.com/PlatformaReset"
target="_blank"
>
Facebook
</a>
<a
class="link"
href="https://twitter.com/reset_platforma"
target="_blank"
>
X
</a>
</p>
<nav class="opacity-75 md:border-r border-gray-700 md:mr-8">
<h2 class="font-bold mb-2">Re-set</h2>
<ul class="flex flex-col gap-1">
<li>
<a
class="link"
href="https://re-set.cz/about-us"
target="_blank"
>
About
</a>
</li>
<li>
<a
class="link"
href="https://www.facebook.com/PlatformaReset"
target="_blank"
>
Facebook
</a>
</li>
<li>
<a
class="link"
href="https://twitter.com/reset_platforma"
target="_blank"
>
X
</a>
</li>
</ul>
</nav>
);
}
function ColophonGwa() {
return (
<nav class="flex gap-8 items-center flex-1">
<InsureOurFutureLogo class="opacity-75 max-w-[80px]" />
<div class="opacity-75">
<p class="mb-2">
Part of{" "}
<strong>
<nav class="opacity-75">
<h2 class="font-bold mb-2">Insure our Future</h2>
<div>
<ul class="flex flex-col gap-1">
<li>
<a
class="link"
href="https://global.insure-our-future.com/global-week-of-action-2024/"
href="https://global.insure-our-future.com/"
target="_blank"
>
Global Week of Action 2024
About
</a>
</strong>
</p>
<p class="mb-2 flex flex-wrap gap-4">
<a
class="link"
href="https://global.insure-our-future.com/"
target="_blank"
>
About <strong>Insure our Future</strong>
</a>
<a
class="link"
href="https://www.instagram.com/insure.our.future/"
target="_blank"
>
Instagram
</a>
</p>
</li>
<li>
<a
class="link"
href="https://www.instagram.com/insure.our.future/"
target="_blank"
>
Instagram
</a>
</li>
</ul>
</div>
</nav>
);
@ -101,13 +106,25 @@ export function Footer() {
<footer class="sticky top-[100vh]">
<Illustration />
<div class="bg-black">
<div class="max-w-screen-xl px-6 mx-auto pt-12">
<div class="flex flex-col md:flex-row flex-wrap gap-y-16 pb-12">
<div class="max-w-screen-xl px-6 mx-auto pt-8">
<p class="pb-8 mb-8 opacity-75 border-b border-gray-700">
Part of{" "}
<strong>
<a
class="link"
href="https://global.insure-our-future.com/global-week-of-action-2024/"
target="_blank"
>
Global Week of Action 2024
</a>
</strong>
</p>
<div class="grid md:grid-cols-3 gap-y-12 mb-12">
<Logos />
<ColophonReset />
<div class="border-r opacity-25 hidden md:block pr-24 mr-12" />
<ColophonGwa />
</div>
<p class="opacity-50 pb-4">
<p class="opacity-50 text-sm pb-4">
created by{" "}
<a class="link" href="https://druit.org/" target="_blank">
druit.org