package html
import (
. "maragu.dev/gomponents"
. "maragu.dev/gomponents/html"
)
func HomePage(props PageProps) Node {
props.Title = "Quine Hyper — The thoughtful terminal"
props.Description = "Quine Hyper is a beautiful, extensible terminal emulator forked from Vercel's Hyper. Built on web technology with a thriving plugin ecosystem."
return page(props,
Div(Class("py-20 text-center"),
Div(Class("mb-6 inline-flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900 px-4 py-1.5"),
Span(Class("h-2 w-2 rounded-full bg-primary-400")),
Span(Class("font-mono text-xs text-zinc-400"), Text("Forked from Vercel's Hyper")),
),
H1(Class("font-mono text-5xl font-bold tracking-tight text-white sm:text-6xl"),
Text("The thoughtful terminal."),
),
P(Class("mx-auto mt-6 max-w-2xl font-mono text-lg text-zinc-400"),
Text("A beautiful, extensible terminal built with care."),
),
Div(Class("mt-10 flex flex-wrap items-center justify-center gap-4"),
A(Href("/download"),
Class("inline-flex items-center gap-2 rounded-lg bg-primary-500 px-8 py-3 font-mono text-base font-semibold text-black hover:bg-primary-400 transition-colors"),
Text("Download for free"),
),
A(Href("https://github.com/quine-global/hyper"),
Class("inline-flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-8 py-3 font-mono text-base font-semibold text-white hover:border-zinc-500 transition-colors"),
Text("View on GitHub"),
),
),
),
Div(Class("mx-auto mb-20 max-w-3xl overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl"),
Div(Class("flex items-center gap-2 border-b border-zinc-800 bg-zinc-900 px-4 py-3"),
Div(Class("h-3 w-3 rounded-full bg-red-500 opacity-80")),
Div(Class("h-3 w-3 rounded-full bg-yellow-500 opacity-80")),
Div(Class("h-3 w-3 rounded-full bg-primary-500 opacity-80")),
Span(Class("ml-4 font-mono text-xs text-zinc-500"), Text("quine-hyper — bash — 80×24")),
),
Div(Class("p-6 font-mono text-sm leading-relaxed"),
termPrompt("deep-thought --answer"),
termOutput("42"),
termPrompt("hyper install infinite-improbability"),
termOutput("✔ Engaging drive..."),
termOutput("✔ Probability: 2:1 against."),
termOutput("✔ Don't Panic."),
termPrompt("ls ~/projects"),
termOutput("drwxr-xr-x earth/"),
termOutput("drwxr-xr-x magrathea/"),
termOutput("drwxr-xr-x slartibartfast/"),
Div(Class("flex items-center gap-0 text-primary-400"),
Span(Class("text-zinc-500"), Text("❯ ")),
Span(Class("animate-pulse"), Text("█")),
),
),
),
Div(Class("pb-20"),
H2(Class("text-center font-mono text-xs font-semibold uppercase tracking-widest text-zinc-500"),
Text("Why Quine Hyper"),
),
Div(Class("mt-12 grid grid-cols-1 gap-6 md:grid-cols-2"),
featureCard("Plugin Ecosystem",
Group{
Text("Install plugins and themes from npm. Browse "),
A(Href("https://hyper.is/plugins"),
Class("text-primary-400 hover:text-primary-300 underline"),
Text("featured plugins"),
),
Text(" and "),
A(Href("https://hyper.is/themes"),
Class("text-primary-400 hover:text-primary-300 underline"),
Text("featured themes"),
),
Text(". Build your own with HTML, CSS, and JavaScript."),
},
"npm install hyper-snazzy",
),
featureCard("Cross-Platform",
Text("Runs on macOS, Windows, and Linux. One consistent experience across every machine you use."),
"Works everywhere you do.",
),
featureCard("Web-Native",
Text("Built on Electron, React, and xterm.js. Hack on the terminal itself using the same tools you use every day."),
"HTML + CSS + JS = your terminal",
),
featureCard("Fully Customizable",
Text("Tweak every detail with CSS. Change fonts, colors, animations, and layouts — no config file limits."),
"hyper.json → your rules",
),
),
),
Div(Class("mb-20 rounded-xl border border-zinc-800 bg-zinc-900 p-10 text-center"),
Img(Src("/images/quineglobal-logo.png"), Alt("Quine Global"), Class("mx-auto mb-6 h-12 w-12 rounded-full")),
H2(Class("font-mono text-2xl font-bold text-white"), Text("Built on Hyper")),
P(Class("mx-auto mt-4 max-w-xl font-mono text-base text-zinc-400"),
Text("Quine Hyper is a fork of "),
A(Href("https://hyper.is"), Class("text-primary-400 hover:text-primary-300 underline"), Text("Hyper")),
Text(", the open-source terminal by Vercel. We're building on that foundation with new capabilities and active development."),
),
Div(Class("mt-8"),
A(Href("https://github.com/quine-global/hyper"),
Class("inline-block rounded-lg border border-zinc-700 bg-zinc-800 px-6 py-3 font-mono text-sm font-semibold text-white hover:border-zinc-500 transition-colors"),
Text("Star us on GitHub"),
),
),
),
)
}
func termPrompt(cmd string) Node {
return Div(Class("flex items-center gap-2"),
Span(Class("text-primary-400"), Text("❯")),
Span(Class("text-white"), Text(cmd)),
)
}
func termOutput(line string) Node {
return Div(Class("pl-5 text-zinc-400"), Text(line))
}
func featureCard(title string, body Node, code string) Node {
return Div(Class("rounded-xl border border-zinc-800 bg-zinc-900 p-8"),
H3(Class("font-mono text-base font-semibold text-white"), Text(title)),
P(Class("mt-3 font-mono text-sm text-zinc-400 leading-relaxed"), body),
Div(Class("mt-5 inline-block rounded-md bg-zinc-800 px-3 py-1.5"),
Span(Class("font-mono text-xs text-primary-400"), Text(code)),
),
)
}
