docs/layouts/partials/footer.html

97 lines
4.1 KiB
HTML

<div class="flex justify-center py-20 px-4 bg-gray-light-100 dark:bg-gray-dark-200">
<div class="flex w-full max-w-[840px] flex-col gap-10">
<div class="flex flex-col md:flex-row gap-4 items-center justify-evenly">
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/">Product offerings</a>
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/pricing/">Pricing</a>
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/company/">About us</a>
<a class="underline-offset-2 hover:underline" href="https://www.docker.com/support/">Support</a>
{{- with .GetPage "/contribute" }}
<a class="underline-offset-2 hover:underline" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
{{- end }}
</div>
<hr class="text-divider-light dark:text-divider-dark" />
<div class="grid lg:grid-cols-3 place-items-center gap-8 grid-cols-1">
<p class="text-sm">
Copyright © 2013-{{ time.Now.Year}} Docker Inc. All rights reserved.
</p>
<div class="flex gap-4">
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="X (Twitter)"
href="http://twitter.com/docker/">
{{ (resources.Get "images/TwitterCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="LinkedIn"
href="https://www.linkedin.com/company/docker">
{{ (resources.Get "images/LinkedinCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="Instagram"
href="https://www.instagram.com/dockerinc/">
{{ (resources.Get "images/InstagramCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="YouTube"
href="http://www.youtube.com/user/dockerrun">
{{ (resources.Get "images/YoutubeCircle.svg").Content | safe.HTML }}
</a>
<a
class="h-8 w-8 rounded-full fill-blue-light dark:fill-blue-dark"
title="Facebook"
href="https://www.facebook.com/docker.run">
{{ (resources.Get "images/FacebookCircle.svg").Content | safe.HTML }}
</a>
</div>
<div class="flex items-center gap-4">
<a
class="underline-offset-2 hover:underline"
title="Docker Terms of Service"
href="https://www.docker.com/legal/docker-terms-service"
>Terms of Service</a>
<a
class="underline-offset-2 hover:underline"
title="Docker Systems Status Page"
href="https://www.dockerstatus.com/"
>Status</a>
<a
class="underline-offset-2 hover:underline"
title="Docker Legal Terms"
href="https://www.docker.com/legal"
>Legal</a>
</div>
</div>
<div class="flex justify-between items-center">
<button type="button" id="ot-sdk-btn" class="ot-sdk-show-settings">
Cookies Settings
</button>
<div class="flex items-center gap-2">
<span>Theme:</span>
<button
aria-label="Theme switch"
id="theme-switch"
class="rounded bg-blue-light px-4 py-1 text-white transition
hover:bg-blue-light-400 dark:bg-blue-dark-400
dark:hover:bg-blue-dark"
x-data="{ theme: localStorage.getItem('theme-preference') }"
x-init="$watch('theme', value => {
localStorage.setItem('theme-preference', value);
document.firstElementChild.className = value;
})"
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
>
<span class="icon-svg icon-sm dark:hidden"
>Light {{ partialCached "icon" "light_mode" "light_mode" }}</span
>
<span class="icon-svg icon-sm hidden dark:block"
>Dark {{ partialCached "icon" "dark_mode" "dark_mode" }}</span
>
</button>
</div>
</div>
</div>
</div>