diff --git a/website/src/pages/index.gleam b/website/src/pages/index.gleam index 9533e7c..736c67f 100644 --- a/website/src/pages/index.gleam +++ b/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("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("flex flex-col gap-4")], [ + 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.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.h2([attribute.class("text-2xl font-semibold")], [element.text("Featured Downloads")]), + html.div([attribute.class("flex flex-col items-center mt-4 gap-2")], [ + 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-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) { - html.div([attribute.class("flex flex-col justify-center items-center gap-2")], [ +fn feature_section(title: String, image: String, text: String, align: String) -> element.Element(a) { + 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.img([ - attribute.src(image), - attribute.class("h-32") - ]), + html.div([attribute.class("flex flex-row flex-wrap xl:flex-nowrap justify-center items-center gap-4 " <> reverse)], [ + case image { + "" -> element.none() + _ -> html.img([ + attribute.src(image), + attribute.class("h-32 rounded-md") + ]) + }, html.p([], [element.text(text)]) ]) ])