6 files changed, 73 insertions, 13 deletions
diff --git a/apps/website/src/components/base/Button.astro b/apps/website/src/components/base/Button.astro
index e0787c2..75dcfa0 100644
--- a/apps/website/src/components/base/Button.astro
+++ b/apps/website/src/components/base/Button.astro
@@ -10,13 +10,13 @@ const styles = {
 
 const sizes = {
 	sm: "px-4 py-2 text-sm",
-	md: "px-5 py-2 text-md",
+	md: "px-5 py-3 text-md",
 	lg: "px-6 py-3 text-lg rounded-2xl"
 }
 
 const iconSize = {
 	sm: 15,
-	md: 16,
+	md: 18,
 	lg: 24
 }
 
diff --git a/apps/website/src/components/base/Footer.astro b/apps/website/src/components/base/Footer.astro
new file mode 100644
index 0000000..b24db5f
--- /dev/null
+++ b/apps/website/src/components/base/Footer.astro
@@ -0,0 +1,7 @@
+---
+
+---
+
+<footer class="flex min-h-[400px] bg-blue-100 mt-4">
+
+</footer>
diff --git a/apps/website/src/components/base/Header.astro b/apps/website/src/components/base/Header.astro
index aea04af..23f5429 100644
--- a/apps/website/src/components/base/Header.astro
+++ b/apps/website/src/components/base/Header.astro
@@ -14,17 +14,17 @@ type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
 interface Props extends HTMLAttributes<Headers> {
     size?: keyof typeof sizes;
-	align?: "left" | "center" | "right";
+	align?: "left" | "center" | "right" | "inherit";
 }
 
 const {
 	size = "lg",
-	align = "left",
+	align = "inherit",
 	...attr
 } = Astro.props;
 const Element = sizes[size] as any; // Unfortunately gotta do this
 
-const className = `text-${align}` + (attr.class ? ` ${attr.class}` : "");
+const className = (align == "inherit" ? "" : `text-${align} `) + (attr.class ? ` ${attr.class}` : "");
 ---
 
 <Element {...attr} class={className}>
@@ -34,12 +34,12 @@ const className = `text-${align}` + (attr.class ? ` ${attr.class}` : "");
 <style>
     h1 {
         font-size: theme("fontSize.header-lg");
-        font-weight: 700;
+        font-weight: 600;
     }
 
     h2 {
         font-size: theme("fontSize.header");
-        font-weight: 700;
+        font-weight: 600;
     }
 
     h3 {
diff --git a/apps/website/src/components/base/NavbarElement.astro b/apps/website/src/components/base/NavbarElement.astro
index a7a0768..b0f1282 100644
--- a/apps/website/src/components/base/NavbarElement.astro
+++ b/apps/website/src/components/base/NavbarElement.astro
@@ -59,6 +59,7 @@ const {
                     max-sm:translate-y-1/3 max-sm:left-0
                     group-focus-within:translate-y-0
                     max-h-full md:max-h-96 overflow-y-auto
+					md:shadow-lg
                 `}>
                     <ul class="p-4">
                         {element.dropdown.map((item) => (
diff --git a/apps/website/src/components/base/Paragraph.astro b/apps/website/src/components/base/Paragraph.astro
new file mode 100644
index 0000000..08fbbdd
--- /dev/null
+++ b/apps/website/src/components/base/Paragraph.astro
@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from "astro/types";
+
+const sizes = {
+	xs: "text-xs",
+	sm: "text-sm",
+	md: "text-md",
+	lg: "text-lg",
+	xl: "text-xl"
+}
+
+interface Props extends HTMLAttributes<"p"> {
+	text?: string,
+	size?: keyof typeof sizes
+}
+
+const {
+	text = "",
+	size = "md",
+	...props
+} = Astro.props;
+
+const className = [
+	sizes[size],
+	props.class
+].join(" ");
+---
+
+<p class={className} {...props}>
+	{text ? text : <slot />}
+</p>
diff --git a/apps/website/src/components/base/Section.astro b/apps/website/src/components/base/Section.astro
index 318056b..66ad00f 100644
--- a/apps/website/src/components/base/Section.astro
+++ b/apps/website/src/components/base/Section.astro
@@ -2,16 +2,37 @@
 import type { HTMLAttributes } from "astro/types";
 
 interface Props extends HTMLAttributes<"section"> {
-	maxWidth?: number;
+	maxWidth?: "none" | String;
+	colReverse?: boolean;
+	wrapperClass?: string;
 }
 
 const {
-	maxWidth = 800,
-	...rest
+	maxWidth = "1080px",
+	colReverse = true,
+	wrapperClass = "",
+	...props
 } = Astro.props;
-const className = `max-w-[${maxWidth}px] px-3 md:p-0 flex flex-col justify-center items-center h-screen md:h-4/5 md:min-h-[600px] gap-4` + (rest.class ? ` ${rest.class}` : "");
+
+const twoColumn = Astro.slots.has("left") || Astro.slots.has("right");
+
+const className = `max-w-[${maxWidth}] flex-grow px-5 md:p-0 flex gap-4`
+	+ (twoColumn ? ` justify-between md:justify-evenly lg:justify-between ${colReverse ? "flex-col-reverse" : "flex-col"} md:flex-row md:items-center md:flex-row` : "")
+	+ (props.class ? ` ${props.class}` : "");
 ---
 
-<section {...rest} class={className}>
-	<slot></slot>
+<section class={`w-full flex justify-center${wrapperClass ? ` ${wrapperClass}` : ""}`}>
+	<div class={className} {...props}>
+		{twoColumn ? (
+			<div class="flex flex-col items-start text-left relative">
+				<slot name="left"></slot>
+			</div>
+
+			<div class="flex flex-col items-start text-start relative">
+				<slot name="right"></slot>
+			</div>
+		) : (
+			<slot></slot>
+		)}
+	</div>
 </section>