Footer + small tweaks

11 files changed, 84 insertions, 20 deletions

diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
index 0eaa4ba..bf019ac 100644
--- a/apps/website/src/components/base/Footer.astro
+++ b/apps/website/src/components/base/Footer.astro
@@ -1,15 +1,42 @@
 ---
-
+import Icon from "@components/icons/Icon.astro";
+import Logo from "@components/logos/Logo.astro";
+import configConst from "@config";
+import Link from "./Link.astro";
 ---
 
-<footer class="flex flex-row justify-between items-start min-h-[400px] bg-blue-100 mt-4">
-	<div class="p-20 max-w-[1024px]">
-		<div class="flex-1">
+<footer class="flex justify-center items-center bg-blue-100 mt-4 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 */}
+				<div class="flex flex-row gap-3">
+					<a href="" class="hover:text-[#5865F2]"><Icon icon="discord" /></a>
+					<a href="" class="hover:text-[#ff0000]"><Icon icon="youtube" /></a>
+					<a href="" 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-1 ">
-			
+		<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 affiliated with Mojang Studios.</p>
 		</div>
 	</div>
 </footer>
diff --git a/apps/website/src/components/base/Link.astro b/apps/website/src/components/base/Link.astro
new file mode 100644
index 0000000..5fa6d75
--- /dev/null
+++ b/apps/website/src/components/base/Link.astro
@@ -0,0 +1,17 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"a"> {
+
+}
+
+const props = Astro.props;
+const className = [
+	"hover:text-blue-500 hover:underline transition-colors",
+	props.class,
+].join(' ');
+---
+
+<a class={className} {...props}>
+	<slot />
+</a>
diff --git a/apps/website/src/components/base/Paragraph.astro b/apps/website/src/components/base/Paragraph.astro
index ffb1030..5ceaf6e 100644
--- a/apps/website/src/components/base/Paragraph.astro
+++ b/apps/website/src/components/base/Paragraph.astro
@@ -26,6 +26,6 @@ const className = [
 ].join(' ');
 ---
 
-	<p class={className} {...props}>
-		{text || <slot/>}
-	</p>
+<p class={className} {...props}>
+	{text || <slot/>}
+</p>
diff --git a/apps/website/src/components/base/Slider.astro b/apps/website/src/components/base/Slider.astro
index 3fbca91..625d7ff 100644
--- a/apps/website/src/components/base/Slider.astro
+++ b/apps/website/src/components/base/Slider.astro
@@ -14,7 +14,7 @@ const {
 	wrapperClass = '',
 	childrenNum,
 	childrenSize = '256px',
-	speed = '20s',
+	speed = '25s',
 } = Astro.props;
 
 ---
diff --git a/apps/website/src/components/base/Navbar.astro b/apps/website/src/components/base/navbar/Navbar.astro
index 15f7638..ca39f2b 100644
--- a/apps/website/src/components/base/Navbar.astro
+++ b/apps/website/src/components/base/navbar/Navbar.astro
@@ -1,7 +1,7 @@
 ---
 import type { Config } from '@webtypes/Config';
 import config from 'config';
-import NavbarElement from './NavbarElement.astro';
+import NavbarElement from '../navbar/NavbarElement.astro';
 
 ---
 
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/navbar/NavbarElement.astro
index 8a254d6..8a455de 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/navbar/NavbarElement.astro
@@ -2,10 +2,10 @@
 import Icon from '@components/icons/Icon.astro';
 import Logo from '@components/logos/Logo.astro';
 import type { LogoType, NavbarElement } from '@webtypes/Config';
-import Header from './Header.astro';
-import ScreenOverlay from './ScreenOverlay.astro';
-import ScrollbarOverlayContainer from './ScrollbarOverlayContainer.astro';
-import Tag from './Tag.astro';
+import Header from '../Header.astro';
+import ScreenOverlay from '../ScreenOverlay.astro';
+import ScrollbarOverlayContainer from '../ScrollbarOverlayContainer.astro';
+import Tag from '../Tag.astro';
 
 interface Props {
 	element: NavbarElement
diff --git a/apps/website/src/components/icons/Icon.astro b/apps/website/src/components/icons/Icon.astro
index b9a9b34..858b605 100644
--- a/apps/website/src/components/icons/Icon.astro
+++ b/apps/website/src/components/icons/Icon.astro
@@ -1,6 +1,7 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 import { parse } from 'node-html-parser';
+import Test from "./impl/book-open.svg";
 
 type _ModIcons =
 	| 'chatting'
@@ -12,21 +13,32 @@ type _ModIcons =
 	| 'polyweather'
 	| 'keystrokes';
 export type ModIcons = _ModIcons; // bypass for Astro compiler issue https://github.com/withastro/compiler/issues/554#issuecomment-1741702411
+
+type _External =
+	| 'discord'
+	| 'github'
+	| 'youtube'
+	| 'twitter';
+
+export type External = _External;
+
 type _Icons =
 	| 'chevron-down'
 	| 'download'
 	| 'book-open'
 	| 'link-external'
+	| External
 	| ModIcons;
 export type Icons = _Icons;  // bypass for Astro compiler issue https://github.com/withastro/compiler/issues/554#issuecomment-1741702411
 
 interface Props extends HTMLAttributes<'svg'> {
-	icon: Icons
+	icon: Icons,
+	path?: string,
 	size?: number | [number, number]
 }
 
-async function getSVG(name: string) {
-	const file = await import(/* @vite-ignore */ `./impl/${name}.svg?raw`);
+async function getSVG(name: string, path = 'impl') {
+	const file = await import(`./${path}/${name}.svg?raw`);
 
 	if (!file)
 		throw new Error(`${name} not found`);
@@ -49,6 +61,7 @@ async function getSVG(name: string) {
 const {
 	icon,
 	size,
+	path = 'impl',
 	...attributes
 } = Astro.props as Props;
 
@@ -73,7 +86,7 @@ try {
 		};
 	};
 
-	const { attributes: baseAttributes, innerHTML } = await getSVG(icon);
+	const { attributes: baseAttributes, innerHTML } = await getSVG(icon, path);
 	svgAttributes = {
 		...baseAttributes,
 		...attributes,
diff --git a/apps/website/src/components/icons/impl/discord.svg b/apps/website/src/components/icons/impl/discord.svg
new file mode 100644
index 0000000..7fcddad
--- /dev/null
+++ b/apps/website/src/components/icons/impl/discord.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 127.14 96.36"><path fill="currentColor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>
diff --git a/apps/website/src/components/icons/impl/github.svg b/apps/website/src/components/icons/impl/github.svg
new file mode 100644
index 0000000..cb3681d
--- /dev/null
+++ b/apps/website/src/components/icons/impl/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+	<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+  </svg>
diff --git a/apps/website/src/components/icons/impl/youtube.svg b/apps/website/src/components/icons/impl/youtube.svg
new file mode 100644
index 0000000..827dc58
--- /dev/null
+++ b/apps/website/src/components/icons/impl/youtube.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+	<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408z"/>
+  </svg>
diff --git a/apps/website/src/components/logos/Logo.astro b/apps/website/src/components/logos/Logo.astro
index c2333e1..7988092 100644
--- a/apps/website/src/components/logos/Logo.astro
+++ b/apps/website/src/components/logos/Logo.astro
@@ -51,4 +51,4 @@ catch (err) {
 
 ---
 
-	<Fragment set:html={svg}/>
+<Fragment set:html={svg}/>