refactor(website/index): changes

- make index/home mobile responsive
- fix layout of everything

website/src/pages/index.gleam

@@ -3,8 +3,8 @@ import lustre/element
 import lustre/element/html
 
 pub fn page() -> element.Element(a) {
-	html.div([attribute.class("flex flex-col gap-4 mb-4")], [
+	html.div([attribute.class("flex flex-col gap-4")], [
-		html.div([attribute.class("border-b border-b-zinc-300 gap-3 -mx-4 pt-2 h-screen bg-radial-[at_100%_100%] from-pink-500 to-stone-50 dark:to-neutral-950 to-35% flex flex-col items-center justify-center")], [
+		html.div([attribute.class("border-b border-b-zinc-300 gap-3 -mx-4 p-2 h-screen bg-radial-[at_100%_100%] from-pink-500 to-stone-50 dark:to-neutral-950 to-35% flex flex-col items-center justify-center")], [
 			html.div([attribute.class("gap-1 flex flex-col items-center")], [
 				html.span([attribute.class("flex flex-row items-center justify-center")], [
 					html.img([
@@ -29,42 +29,46 @@ pub fn page() -> element.Element(a) {
 		]),
 		html.div([attribute.class("text-center")], [
 			html.span([attribute.class("rounded-md backdrop-blur-md bg-pink-500/20 p-2 text-xs font-light")], [element.text("Feature Overview")]),
-			html.div([attribute.class("flex flex-col justify-center items-center gap-6")], [
+			html.div([attribute.class("flex flex-col justify-center items-center gap-6 mt-4")], [
 				feature_section(
 					"The Moon-powered shell",
 					"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Lua-Logo.svg/2048px-Lua-Logo.svg.png",
 					"Hilbish makes use of the Lua programming language for interactive and config scripting.
 					If you write Lua on a regular basis, Hilbish will be the perfect resident in your terminal.
 					
-					You can still use shell script, but Lua takes the spotlight (or the moonlight..)"
+					You can still use shell script, but Lua takes the spotlight (or the moonlight..)",
+					"start"
 				),
 				feature_section(
 					"Modern, Helpful Interactive Features",
 					"https://safe.saya.moe/osR0bplExBC0.png",
 					"Graphical TUI history, sensible tab completions, elegantly refreshing prompts, name it all and Hilbish either has it or it's 1 suggestion or 1 script away from being possible.
-					Everything present in Hilbish is meant to enhance your interactive shell experience."
+					Everything present in Hilbish is meant to enhance your interactive shell experience.",
+					"end"
 				),
 				feature_section(
 					"Sensible, Friendly Defaults",
 					"https://safe.saya.moe/7ze8NQVPD9vO.png",
-					"Hilbish's default config makes a simple but presentable showcase of its Lua API and a few of its features."
+					"Hilbish's default config makes a simple but presentable showcase of its Lua API and a few of its features.",
+					"start"
 				),
 				feature_section(
 					"Truly Make It Yours",
 					"",
 					"Many things about Hilbish are designed to be changed and swapped out.
 					If you want to make use of a Lua derivative in your interactive use (like Fennel) instead of
-					Lua, that can be done!"
+					Lua, that can be done!",
+					"end"
 				)
 			]),
 		]),
-		html.div([attribute.class("text-center")], [
+		html.div([attribute.class("text-center bg-neutral-100 dark:bg-neutral-900 -mx-4 p-4")], [
 			html.span([attribute.class("rounded-md backdrop-blur-md bg-blue-500/20 p-2 text-xs font-light")], [element.text("Download It Now!")]),
-			html.div([attribute.class("flex flex-col justify-center items-center mt-4")], [
+			html.div([attribute.class("flex flex-col items-center mt-4 gap-2")], [
-				html.p([], [element.text("To find out all that Hilbish can do, you should just try it out! It's officially available on Linux, MacOS, Windows, and probably builds on anything Go is available on!")]),
+				html.p([attribute.class("md:w-3/6")], [element.text("To find out all that Hilbish can do, you should just try it out! It's officially available on Linux, MacOS, Windows, and probably builds on anything Go is available on!")]),
-				html.h2([attribute.class("text-2xl font-semibold")], [element.text("Featured Downloads")]),
+				html.h2([attribute.class("text-3xl font-semibold")], [element.text("Featured Downloads")]),
 				html.p([], [element.text("These are binary releases of Hilbish from GitHub. Install instructions are located at an INSTALL.md file.")]),
-				html.div([attribute.class("flex flex-row gap-8")], [
+				html.div([attribute.class("mt-6 flex flex-row flex-wrap items-center justify-center gap-8")], [
 					html.div([attribute.class("flex flex-col gap-2")], [
 						html.img([
 							attribute.src("https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1200px-Tux.svg.png"),
@@ -99,14 +103,23 @@ pub fn page() -> element.Element(a) {
 	])
 }
 
-fn feature_section(title: String, image: String, text: String) -> element.Element(a) {
+fn feature_section(title: String, image: String, text: String, align: String) -> element.Element(a) {
-	html.div([attribute.class("flex flex-col justify-center items-center gap-2")], [
+	let reverse = case align {
+		"end" -> "flex-row-reverse"
+		_ -> ""
+	}
+	// for tailwind to generate these styles
+	// xl:items-end xl:items-start
+	html.div([attribute.class("flex flex-col gap-2 md:w-3/6 text-start xl:items-" <> align)], [
 		html.h1([attribute.class("text-4xl font-semibold")], [element.text(title)]),
-		html.div([attribute.class("flex flex-row w-2/3 items-center justify-center gap-4")], [
+		html.div([attribute.class("flex flex-row flex-wrap xl:flex-nowrap justify-center items-center gap-4 " <> reverse)], [
-			html.img([
+			case image {
-				attribute.src(image),
+				"" -> element.none()
-				attribute.class("h-32")
+				_ -> html.img([
-			]),
+					attribute.src(image),
+					attribute.class("h-32 rounded-md")
+				])
+			},
 			html.p([], [element.text(text)])
 		])
 	])