279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
/**
|
|
* InputHalo landing page — net-new marketing page for inputhalo.freno.me.
|
|
*
|
|
* InputHalo is a polished macOS menu bar app that visualizes mouse and
|
|
* keyboard input on screen: keyboard indicators, cursor halos, click ripples,
|
|
* scroll indicators, and sensitive-input detection. It is built with SwiftUI
|
|
* and distributed via direct DMG (Sparkle auto-updates) with a paid App Store
|
|
* variant planned.
|
|
*
|
|
* The download orchestration stays in the testable pure `./download.ts` module;
|
|
* this component is a thin wrapper around it plus the landing-page UX.
|
|
*/
|
|
import { For, createSignal } from "solid-js";
|
|
import { A } from "@solidjs/router";
|
|
import { PageHead } from "~/components/PageHead";
|
|
import { EdgeCacheHeaders } from "~/components/EdgeCacheHeaders";
|
|
import SubdomainHeader from "~/components/SubdomainHeader";
|
|
import Button from "~/components/ui/Button";
|
|
import DownloadOnAppStoreDark from "~/components/icons/DownloadOnAppStoreDark";
|
|
import { useDarkMode } from "~/context/darkMode";
|
|
import { useSite } from "~/context/SiteContext";
|
|
import { api } from "~/lib/api";
|
|
import {
|
|
INPUTHALO_APP_STORE_URL,
|
|
INPUTHALO_ICON_DARK,
|
|
INPUTHALO_ICON_DEFAULT,
|
|
INPUTHALO_MIN_SYSTEM_VERSION,
|
|
performInputHaloDownload
|
|
} from "./download";
|
|
|
|
const FEATURES = [
|
|
{
|
|
title: "Keyboard indicator overlay",
|
|
body: "Display the keys you press in a clean, configurable on-screen overlay — perfect for demos and tutorials."
|
|
},
|
|
{
|
|
title: "Mouse halo & click ripples",
|
|
body: "Add a subtle halo around your cursor and visual click feedback so viewers never lose track of your pointer."
|
|
},
|
|
{
|
|
title: "Scroll indicators",
|
|
body: "Show scroll direction and intensity in real time, useful for screencasts and accessibility demos."
|
|
},
|
|
{
|
|
title: "Sensitive input detection",
|
|
body: "InputHalo automatically hides visual feedback when you type into password or secure fields."
|
|
},
|
|
{
|
|
title: "Fully customizable",
|
|
body: "Choose colors, sizes, animations, position, and behavior to match your setup and brand."
|
|
},
|
|
{
|
|
title: "Native macOS menu bar app",
|
|
body: "Built with SwiftUI, runs quietly in the menu bar, and uses system accessibility APIs responsibly."
|
|
}
|
|
] as const;
|
|
|
|
const USE_CASES = [
|
|
{
|
|
title: "Streamers & creators",
|
|
body: "Let your audience see exactly what you're clicking and typing without cluttering your scene."
|
|
},
|
|
{
|
|
title: "Presenters & educators",
|
|
body: "Make keyboard shortcuts and cursor movement crystal clear during demos and recordings."
|
|
},
|
|
{
|
|
title: "Developers",
|
|
body: "Show input interactions in bug reports, design reviews, and pair-programming sessions."
|
|
},
|
|
{
|
|
title: "Accessibility",
|
|
body: "Visualize inputs to make workflows easier to follow for users who benefit from clear feedback."
|
|
}
|
|
] as const;
|
|
|
|
export default function InputHaloLanding() {
|
|
const site = useSite();
|
|
const { isDark } = useDarkMode();
|
|
const [loading, setLoading] = createSignal(false);
|
|
|
|
const download = () => {
|
|
if (loading()) return;
|
|
setLoading(true);
|
|
performInputHaloDownload(
|
|
(input) => api.downloads.getDownloadUrl.query(input),
|
|
(url) => {
|
|
window.location.href = url;
|
|
},
|
|
() => {
|
|
alert("Failed to initiate download. Please try again.");
|
|
}
|
|
).finally(() => setLoading(false));
|
|
};
|
|
|
|
const iconSrc = () =>
|
|
isDark() ? INPUTHALO_ICON_DARK : INPUTHALO_ICON_DEFAULT;
|
|
const brandColor = () => site().brandColor;
|
|
|
|
return (
|
|
<>
|
|
<EdgeCacheHeaders maxAge={300} />
|
|
<PageHead
|
|
title="Home"
|
|
description="A polished macOS menu bar app that visualizes keyboard presses, mouse clicks, cursor halos, and scroll events on screen — for streamers, presenters, and developers."
|
|
/>
|
|
|
|
<SubdomainHeader />
|
|
|
|
<main
|
|
class="relative min-h-screen w-full overflow-x-hidden"
|
|
style={{ "--brand-color": brandColor() }}
|
|
>
|
|
{/* Soft pink halos in the background */}
|
|
<div
|
|
class="pointer-events-none fixed inset-0 z-0"
|
|
aria-hidden="true"
|
|
style={{
|
|
background: isDark()
|
|
? `radial-gradient(60% 50% at 80% 0%, ${brandColor()}20 0%, transparent 70%), radial-gradient(50% 40% at 20% 100%, ${brandColor()}16 0%, transparent 70%)`
|
|
: `radial-gradient(60% 50% at 80% 0%, ${brandColor()}16 0%, transparent 70%), radial-gradient(50% 40% at 20% 100%, ${brandColor()}12 0%, transparent 70%)`
|
|
}}
|
|
/>
|
|
|
|
{/* ─── Hero ───────────────────────────────────────────────── */}
|
|
<section class="relative z-10 flex flex-col items-center px-4 pt-24 pb-16 text-center md:pt-32">
|
|
<div
|
|
class="mb-8 flex h-28 w-28 items-center justify-center rounded-[1.75rem] shadow-2xl md:h-32 md:w-32"
|
|
style={{ color: brandColor() }}
|
|
>
|
|
<img
|
|
src={iconSrc()}
|
|
alt="InputHalo app icon"
|
|
width={128}
|
|
height={128}
|
|
class="h-full w-full rounded-[1.75rem] object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<h1 class="text-5xl font-bold tracking-tight md:text-7xl">
|
|
InputHalo
|
|
</h1>
|
|
<p class="text-text/85 mt-4 max-w-2xl text-lg md:text-2xl">
|
|
Show every keystroke, click, and scroll.
|
|
</p>
|
|
<p class="text-text/70 mt-3 max-w-xl text-base md:text-lg">
|
|
A polished macOS menu bar app for input visualization — built for
|
|
streamers, presenters, developers, and anyone who wants their inputs
|
|
seen.
|
|
</p>
|
|
|
|
<div class="mt-10 flex flex-col items-center gap-4 sm:flex-row">
|
|
<Button
|
|
variant="download"
|
|
size="lg"
|
|
color={brandColor()}
|
|
loading={loading()}
|
|
onClick={download}
|
|
>
|
|
download.dmg
|
|
</Button>
|
|
<A
|
|
class="my-auto transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
|
href={INPUTHALO_APP_STORE_URL}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<DownloadOnAppStoreDark size={50} />
|
|
</A>
|
|
</div>
|
|
<p class="text-text/50 mt-3 text-sm">
|
|
macOS {INPUTHALO_MIN_SYSTEM_VERSION}+ · auto-updates via Sparkle
|
|
</p>
|
|
</section>
|
|
|
|
{/* ─── Feature highlights ─────────────────────────────────── */}
|
|
<section class="bg-surface0/30 relative z-10 px-4 py-20">
|
|
<div class="mx-auto max-w-6xl">
|
|
<h2 class="text-text mb-12 text-center text-3xl font-bold md:text-4xl">
|
|
Made for showing your inputs
|
|
</h2>
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
<For each={FEATURES}>
|
|
{(feature) => (
|
|
<div class="border-surface0 bg-base/80 flex flex-col gap-3 rounded-2xl border-2 p-6 backdrop-blur-sm">
|
|
<div
|
|
class="mb-1 flex h-8 w-8 items-center justify-center rounded-full text-white"
|
|
style={{ background: brandColor() }}
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold">{feature.title}</h3>
|
|
<p class="text-text/80 text-sm leading-relaxed">
|
|
{feature.body}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Use cases ──────────────────────────────────────────── */}
|
|
<section class="relative z-10 px-4 py-20">
|
|
<div class="mx-auto max-w-6xl">
|
|
<h2 class="text-text mb-12 text-center text-3xl font-bold md:text-4xl">
|
|
Who it's for
|
|
</h2>
|
|
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<For each={USE_CASES}>
|
|
{(use) => (
|
|
<div class="border-surface0 hover:bg-surface0/30 flex flex-col gap-2 rounded-2xl border-2 p-6 transition-colors">
|
|
<h3
|
|
class="text-lg font-semibold"
|
|
style={{ color: brandColor() }}
|
|
>
|
|
{use.title}
|
|
</h3>
|
|
<p class="text-text/80 text-sm leading-relaxed">
|
|
{use.body}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ─── Download CTA ───────────────────────────────────────── */}
|
|
<section class="bg-surface0/30 relative z-10 px-4 py-20">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<h2 class="text-text mb-4 text-3xl font-bold">
|
|
Ready to visualize your inputs?
|
|
</h2>
|
|
<p class="text-subtext0 mx-auto mb-10 max-w-2xl leading-relaxed">
|
|
Download the latest signed macOS build directly, or grab the App
|
|
Store version once it launches.
|
|
</p>
|
|
<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
|
|
<Button
|
|
variant="download"
|
|
size="lg"
|
|
color={brandColor()}
|
|
loading={loading()}
|
|
onClick={download}
|
|
>
|
|
download.dmg
|
|
</Button>
|
|
<A
|
|
class="my-auto transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
|
href={INPUTHALO_APP_STORE_URL}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<DownloadOnAppStoreDark size={50} />
|
|
</A>
|
|
</div>
|
|
<p class="text-subtext1 mt-6 text-xs">
|
|
Requires macOS {INPUTHALO_MIN_SYSTEM_VERSION} or later.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|