Footer + small tweaks

6 files changed, 59 insertions, 15 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