aboutsummaryrefslogtreecommitdiff
path: root/apps/website/src/components/base/Footer.astro
blob: d6f4ea805c50401c69f7f79dfea6aa87aab68d2c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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 {...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 (US)</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. <Link href="https://github.com/Polyfrost/Nexus" class="text-blue-gray text-sm">Licensed under AGPL-3.0.</Link></p>
			<p class="text-blue-gray text-sm">Not affiliated with Mojang or Microsoft.</p>
		</div>
	</div>
</footer>