diff options
Diffstat (limited to 'apps/website/src/components/base/Footer.astro')
| -rw-r--r-- | apps/website/src/components/base/Footer.astro | 42 |
1 files changed, 41 insertions, 1 deletions
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro index b24db5f..7a9071a 100644 --- a/apps/website/src/components/base/Footer.astro +++ b/apps/website/src/components/base/Footer.astro @@ -1,7 +1,47 @@ --- +import Icon from '@components/icons/Icon.astro'; +import Logo from '@components/logos/Logo.astro'; +import configConst from '@config'; +import type { HTMLAttributes } from 'astro/types'; +import Link from './Link.astro'; +interface Props extends HTMLAttributes<'footer'> {} + +const props = Astro.props; --- -<footer class="flex min-h-[400px] bg-blue-100 mt-4"> +<footer {...props} class="section flex justify-center items-center bg-blue-100 -mt-40 pt-20 pb-8 px-20"> + <div class="max-w-[1024px] w-full flex flex-col gap-y-24"> + <div class="flex flex-col gap-y-20 justify-center items-start md:flex-row md:items-start md:justify-between"> + <div class="flex-1 flex flex-col gap-y-3 text-blue-gray"> + <Logo logo="polyfrost.full" /> + <p>English, USA</p> {/* hardcoded for now, todo i18n */} + <div class="flex flex-row gap-3"> + <a href={configConst.socials.discord} target="_blank" class="hover:text-[#5865F2]"><Icon icon="discord" /></a> + <a href={configConst.socials.youtube} target="_blank" class="hover:text-[#ff0000]"><Icon icon="youtube" /></a> + <a href={configConst.socials.github} target="_blank" class="hover:text-[#000000]"><Icon icon="github" /></a> + </div> + </div> + + <div class="flex-1 flex flex-col md:flex-row justify-end gap-8"> + {configConst.footer.map(column => ( + <div class="flex flex-col gap-y-3"> + <h3 class="text-gray-700 text-md">{column.header}</h3> + <ul class="flex flex-col gap-y-1"> + {column.links.map(link => ( + <li> + <Link href={link.url} class="text-blue-gray text-sm text-nowrap">{link.text}</Link> + </li> + ))} + </ul> + </div> + ))} + </div> + </div> + <div class="flex flex-col items-center md:flex-row md:items-start md:justify-between"> + <p class="text-blue-gray text-sm">© {new Date().getFullYear()} Polyfrost. All rights reserved.</p> + <p class="text-blue-gray text-sm">Not an official Minecraft product. Not approved by or affiliated with Mojang Studios.</p> + </div> + </div> </footer> |