LyAhn
00bf7da344
Replace the stacked desktop layout with a phone-first product flow featuring an image-led hero, inline privacy proof, compact semantic search, swipeable feature cards with live pagination, expandable technical details, and touch-friendly navigation and calls to action. Add the standalone Phokus aperture SVG asset.
753 lines
33 KiB
TypeScript
753 lines
33 KiB
TypeScript
import { useRef, useState } from "react";
|
||
import { PhokusMark } from "./components/PhokusMark";
|
||
// Screenshots are 2560×1600 masters; imagetools downscales + transcodes to
|
||
// AVIF/WebP at build (see the Shot helper). `as=picture` must be the last query
|
||
// param so the `*as=picture` module declaration matches.
|
||
import heroShot from "../assets/screenshots/phokus_galleryHero.jpg?w=1600&format=avif;webp&quality=50&as=picture";
|
||
import semanticShot from "../assets/screenshots/phokus_semanticSearch.jpg?w=1600&format=avif;webp&quality=50&as=picture";
|
||
import exploreShot from "../assets/screenshots/phokus_exploreClusters.png?w=1600&format=avif;webp&quality=50&as=picture";
|
||
import timelineShot from "../assets/screenshots/phokus_timeline.jpg?w=1600&format=avif;webp&quality=50&as=picture";
|
||
import lightboxShot from "../assets/screenshots/phokus_lightboxWithTags.jpg?w=1600&format=avif;webp&quality=50&as=picture";
|
||
import videoShot from "../assets/screenshots/phokus_videoPlayer.jpg?w=1600&format=avif;webp&quality=50&as=picture";
|
||
import duplicatesShot from "../assets/screenshots/phokus_duplicates.png?w=1600&format=avif;webp&quality=50&as=picture";
|
||
|
||
const REPO_URL = "https://github.com/JezzWTF/phokus";
|
||
const DOWNLOAD_URL = "https://github.com/JezzWTF/phokus/releases/latest";
|
||
|
||
function GitHubIcon({ className }: { className?: string }) {
|
||
return (
|
||
<svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
|
||
<path d="M12 .5C5.73.5.5 5.73.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.88-1.54-3.88-1.54-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.2 1.77 1.2 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.56-.29-5.25-1.28-5.25-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.41-5.26 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56A11.51 11.51 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
// Renders an imagetools `?as=picture` import: AVIF + WebP sources with the WebP
|
||
// fallback on the <img>. `display:contents` so the layout/rounding lives on the
|
||
// <img>, exactly as a bare <img> would. width/height come from the transcode to
|
||
// reserve space and avoid layout shift.
|
||
type PictureImport = { sources: Record<string, string>; img: { src: string; w: number; h: number } };
|
||
|
||
function Shot({
|
||
pic,
|
||
alt,
|
||
className,
|
||
ariaHidden,
|
||
}: {
|
||
pic: PictureImport;
|
||
alt: string;
|
||
className?: string;
|
||
ariaHidden?: boolean;
|
||
}) {
|
||
return (
|
||
<picture className="contents">
|
||
{Object.entries(pic.sources).map(([type, srcSet]) => (
|
||
<source key={type} type={type} srcSet={srcSet} />
|
||
))}
|
||
<img
|
||
src={pic.img.src}
|
||
width={pic.img.w}
|
||
height={pic.img.h}
|
||
alt={alt}
|
||
aria-hidden={ariaHidden}
|
||
className={className}
|
||
/>
|
||
</picture>
|
||
);
|
||
}
|
||
|
||
function Header() {
|
||
return (
|
||
<header className="sticky top-0 z-50 border-b border-edge bg-canvas/70 backdrop-blur-md">
|
||
<div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-5 lg:h-16 lg:px-6">
|
||
<a href="#top" className="flex items-center gap-2.5 text-ink">
|
||
<PhokusMark className="h-5 w-5 text-amber lg:h-6 lg:w-6" />
|
||
<span className="font-display font-semibold tracking-tight lg:text-lg">Phokus</span>
|
||
</a>
|
||
<nav className="hidden items-center gap-8 text-sm text-muted md:flex">
|
||
<a href="#search" className="transition-colors hover:text-ink">Search</a>
|
||
<a href="#explore" className="transition-colors hover:text-ink">Explore</a>
|
||
<a href="#privacy" className="transition-colors hover:text-ink">Privacy</a>
|
||
<a href={REPO_URL} className="transition-colors hover:text-ink">Source</a>
|
||
</nav>
|
||
<a
|
||
href={DOWNLOAD_URL}
|
||
className="hidden rounded-lg border border-edge-strong px-4 py-2 text-sm font-medium text-ink transition-colors hover:bg-surface md:block"
|
||
>
|
||
Download
|
||
</a>
|
||
<a
|
||
href={REPO_URL}
|
||
aria-label="View Phokus source on GitHub"
|
||
className="grid h-9 w-9 place-items-center rounded-full border border-edge-strong text-muted transition-colors hover:bg-surface hover:text-ink md:hidden"
|
||
>
|
||
<GitHubIcon className="h-4 w-4" />
|
||
</a>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|
||
|
||
function MobileChapterNav() {
|
||
return (
|
||
<nav
|
||
aria-label="Page sections"
|
||
className="sticky top-14 z-40 flex gap-1 overflow-x-auto border-b border-edge bg-canvas/90 px-4 py-2 backdrop-blur-md lg:hidden"
|
||
>
|
||
{[
|
||
["Search", "#search"],
|
||
["Features", "#features"],
|
||
["Details", "#tech"],
|
||
["Download", "#download"],
|
||
].map(([label, href]) => (
|
||
<a
|
||
key={href}
|
||
href={href}
|
||
className="shrink-0 rounded-full px-3 py-1.5 text-xs font-medium text-muted transition-colors hover:bg-surface-2 hover:text-ink"
|
||
>
|
||
{label}
|
||
</a>
|
||
))}
|
||
</nav>
|
||
);
|
||
}
|
||
|
||
function MobileChapter({
|
||
number,
|
||
label,
|
||
title,
|
||
children,
|
||
}: {
|
||
number: string;
|
||
label: string;
|
||
title: string;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div className="lg:hidden">
|
||
<div className="flex items-center gap-3 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-faint">
|
||
<span className="font-mono text-amber">{number}</span>
|
||
<span className="h-px w-8 bg-edge-strong" />
|
||
{label}
|
||
</div>
|
||
<h2 className="mt-3 max-w-[20rem] font-display text-[1.75rem] font-semibold leading-[1.08] tracking-tight text-ink">
|
||
{title}
|
||
</h2>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Hero() {
|
||
return (
|
||
<section id="top" className="relative overflow-hidden">
|
||
<div className="lg:hidden">
|
||
<div className="relative h-[34svh] min-h-64 overflow-hidden border-b border-edge">
|
||
<Shot
|
||
pic={heroShot}
|
||
alt="The Phokus gallery showing a dense library of landscape photos."
|
||
className="absolute inset-0 h-full w-full object-cover object-[67%_top]"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-canvas/20 via-transparent to-canvas" />
|
||
<div className="absolute inset-x-5 top-5 flex items-center justify-between">
|
||
<span className="rounded-full border border-white/10 bg-black/45 px-3 py-1.5 text-[0.68rem] font-medium text-white/80 backdrop-blur">
|
||
Your folders. Your machine.
|
||
</span>
|
||
<span className="flex items-center gap-1.5 text-[0.68rem] text-white/60">
|
||
<span className="h-1.5 w-1.5 rounded-full bg-amber" />
|
||
Windows
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative -mt-7 px-5 pb-12">
|
||
<h1 className="max-w-[21rem] font-display text-[2.45rem] font-semibold leading-[0.98] tracking-[-0.035em] text-ink">
|
||
See everything.
|
||
<br />
|
||
Find anything.
|
||
</h1>
|
||
<p className="mt-4 max-w-[22rem] text-[0.95rem] leading-6 text-muted">
|
||
Search and curate the images and videos already on your computer. Everything stays local.
|
||
</p>
|
||
<div className="mt-6">
|
||
<a
|
||
href={DOWNLOAD_URL}
|
||
className="flex min-h-12 items-center justify-between rounded-xl bg-amber px-5 text-sm font-semibold text-canvas transition-colors hover:bg-amber-soft"
|
||
>
|
||
Download for Windows
|
||
<span aria-hidden="true">↓</span>
|
||
</a>
|
||
</div>
|
||
<div className="mt-5 grid grid-cols-3 divide-x divide-edge border-y border-edge py-4 text-center">
|
||
<span className="px-2 text-[0.68rem] leading-4 text-faint">
|
||
<strong className="block font-medium text-ink">Local</strong>
|
||
no uploads
|
||
</span>
|
||
<span className="px-2 text-[0.68rem] leading-4 text-faint">
|
||
<strong className="block font-medium text-ink">Private</strong>
|
||
no account
|
||
</span>
|
||
<span className="px-2 text-[0.68rem] leading-4 text-faint">
|
||
<strong className="block font-medium text-ink">Offline</strong>
|
||
after setup
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative hidden min-h-[86vh] items-center lg:flex">
|
||
{/* Product leads: the gallery dominates the right and bleeds off the frame,
|
||
cropped so the workspace appears to continue beyond the viewport. */}
|
||
<div className="pointer-events-none absolute inset-y-0 right-0 w-[62%]">
|
||
<Shot
|
||
pic={heroShot}
|
||
alt=""
|
||
ariaHidden
|
||
className="h-full w-full object-cover object-left-top"
|
||
/>
|
||
<div className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-canvas)_0%,transparent_46%)]" />
|
||
<div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-canvas to-transparent" />
|
||
</div>
|
||
<div className="pointer-events-none absolute -left-24 top-8 -z-10 h-96 w-96 rounded-full bg-amber/[0.06] blur-3xl" />
|
||
|
||
<div className="relative mx-auto w-full max-w-7xl px-6 py-24">
|
||
<div className="max-w-2xl">
|
||
<p className="mb-6 inline-flex items-center gap-2 rounded-full border border-edge bg-surface/80 px-3 py-1 text-xs font-medium text-muted backdrop-blur">
|
||
<span className="h-1.5 w-1.5 rounded-full bg-amber" />
|
||
Local-first · Windows desktop
|
||
</p>
|
||
<h1 className="font-display text-6xl font-semibold leading-[1.04] tracking-tight text-ink">
|
||
Your local media library,
|
||
<br />
|
||
made searchable.
|
||
</h1>
|
||
<p className="mt-6 max-w-lg text-lg leading-relaxed text-muted">
|
||
Browse, understand, and curate large image and video folders — semantic search, visual
|
||
discovery, and duplicate cleanup over the files already on your computer.
|
||
</p>
|
||
<div className="mt-8 flex flex-wrap items-center gap-3">
|
||
<a
|
||
href={DOWNLOAD_URL}
|
||
className="rounded-lg bg-amber px-5 py-2.5 text-sm font-medium text-canvas transition-colors hover:bg-amber-soft"
|
||
>
|
||
Download for Windows
|
||
</a>
|
||
<a
|
||
href={REPO_URL}
|
||
className="inline-flex items-center gap-2 rounded-lg border border-edge-strong bg-canvas/60 px-5 py-2.5 text-sm font-medium text-ink backdrop-blur transition-colors hover:bg-surface"
|
||
>
|
||
<GitHubIcon className="h-4 w-4" />
|
||
View source
|
||
</a>
|
||
</div>
|
||
<p className="mt-5 text-sm text-faint">
|
||
Windows 10/11 · Open source · On-device processing · No account
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function LocalFirst() {
|
||
const points = [
|
||
{
|
||
title: "Your files stay put",
|
||
body: "Phokus reads the folders you point it at. Media and everything it derives — thumbnails, embeddings, tags, ratings — never leave your machine.",
|
||
},
|
||
{
|
||
title: "On-device intelligence",
|
||
body: "Semantic search and AI tagging run locally. The models download once on first use; after that, search works offline.",
|
||
},
|
||
{
|
||
title: "No account, no cloud",
|
||
body: "No sign-up, no telemetry, no server. The only network traffic is the one-time model downloads and checking for updates.",
|
||
},
|
||
];
|
||
return (
|
||
<section id="privacy" className="relative hidden overflow-hidden border-y border-edge bg-surface lg:block">
|
||
<EdgeMark side="left" />
|
||
<div className="relative mx-auto max-w-7xl px-6 py-28">
|
||
<div className="max-w-2xl">
|
||
<SectionEyebrow label="Local-first" />
|
||
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
|
||
A library that stays on your machine.
|
||
</h2>
|
||
<p className="mt-5 text-lg leading-relaxed text-muted">
|
||
Phokus runs entirely on your computer. Nothing is uploaded, and there's nothing to sign
|
||
into — your photos and everything Phokus learns about them stay with you.
|
||
</p>
|
||
</div>
|
||
<div className="mt-12 grid gap-px overflow-hidden rounded-xl border border-edge bg-edge sm:grid-cols-3">
|
||
{points.map((p) => (
|
||
<div key={p.title} className="bg-surface p-6">
|
||
<h3 className="text-base font-medium text-ink">{p.title}</h3>
|
||
<p className="mt-2 text-sm leading-relaxed text-muted">{p.body}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function SectionEyebrow({ label }: { label: string }) {
|
||
return (
|
||
<span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-faint">
|
||
<PhokusMark className="h-4 w-4 text-muted" dotClassName="fill-amber" />
|
||
{label}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function SearchSection() {
|
||
return (
|
||
<section id="search" className="relative overflow-hidden">
|
||
<EdgeMark side="right" />
|
||
<div className="relative mx-auto max-w-7xl px-5 py-12 lg:px-6 lg:py-28">
|
||
<MobileChapter number="02" label="Semantic search" title="Describe the image. Skip the filename.">
|
||
<div className="mt-6 flex min-h-11 items-center gap-3 rounded-xl border border-edge-strong bg-surface px-4 shadow-lg shadow-black/20">
|
||
<span className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-xs text-amber">/s</span>
|
||
<span className="text-sm text-ink">seaside</span>
|
||
<span className="ml-auto text-xs text-faint">200 matches</span>
|
||
</div>
|
||
<div className="relative mt-3 h-80 overflow-hidden rounded-2xl border border-edge bg-surface shadow-2xl shadow-black/40">
|
||
<Shot
|
||
pic={semanticShot}
|
||
alt="Coastal photos returned for a semantic search for seaside."
|
||
className="h-full w-full object-cover object-[65%_center]"
|
||
/>
|
||
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/80 to-transparent" />
|
||
<p className="absolute bottom-4 left-4 right-4 text-xs leading-5 text-white/70">
|
||
Coastlines, waves, shells and dunes, matched by visual meaning.
|
||
</p>
|
||
</div>
|
||
<p className="mt-5 text-sm leading-6 text-muted">
|
||
Search by mood, place, subject, or visual idea. CLIP runs on-device, so it still works
|
||
offline and needs no manual tags.
|
||
</p>
|
||
</MobileChapter>
|
||
|
||
<div className="hidden lg:block">
|
||
<div className="max-w-2xl">
|
||
<SectionEyebrow label="Search by meaning" />
|
||
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
|
||
Find it by what it looks like, not what it's named.
|
||
</h2>
|
||
<p className="mt-5 text-lg leading-relaxed text-muted">
|
||
Type{" "}
|
||
<code className="rounded-md border border-edge bg-surface-2 px-1.5 py-0.5 font-mono text-[0.85em] text-ink">
|
||
/s seaside
|
||
</code>{" "}
|
||
and Phokus returns coastlines, breaking waves, and shells — ranked by visual meaning with an
|
||
on-device CLIP model. No tags required, and it keeps working offline.
|
||
</p>
|
||
</div>
|
||
|
||
<figure className="relative mt-12 overflow-hidden rounded-xl border border-edge bg-surface shadow-2xl shadow-black/50">
|
||
<Shot
|
||
pic={semanticShot}
|
||
alt="Phokus showing a semantic search for 'seaside': a grid of coastal photos — beaches, breaking waves, shells, and a jellyfish — matched by visual meaning rather than filename."
|
||
className="block w-full"
|
||
/>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function MobileFeatureDeck() {
|
||
const [activeCard, setActiveCard] = useState(0);
|
||
const cardRefs = useRef<Array<HTMLElement | null>>([]);
|
||
|
||
function updateActiveCard(event: React.UIEvent<HTMLDivElement>) {
|
||
const deckCenter = event.currentTarget.scrollLeft + event.currentTarget.clientWidth / 2;
|
||
let nearestIndex = 0;
|
||
let nearestDistance = Number.POSITIVE_INFINITY;
|
||
|
||
cardRefs.current.forEach((card, index) => {
|
||
if (!card) return;
|
||
const cardCenter = card.offsetLeft + card.offsetWidth / 2;
|
||
const distance = Math.abs(cardCenter - deckCenter);
|
||
if (distance < nearestDistance) {
|
||
nearestDistance = distance;
|
||
nearestIndex = index;
|
||
}
|
||
});
|
||
|
||
setActiveCard(nearestIndex);
|
||
}
|
||
|
||
function showCard(index: number) {
|
||
cardRefs.current[index]?.scrollIntoView({
|
||
behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth",
|
||
block: "nearest",
|
||
inline: "center",
|
||
});
|
||
}
|
||
|
||
return (
|
||
<section id="features" className="overflow-hidden border-y border-edge bg-surface py-12 lg:hidden">
|
||
<div className="px-5">
|
||
<MobileChapter number="03" label="More than search" title="Three ways to move through a library.">
|
||
<p className="mt-4 text-sm leading-6 text-muted">
|
||
Swipe through the core workflows. Each one stays focused on the media, not app chrome.
|
||
</p>
|
||
</MobileChapter>
|
||
</div>
|
||
|
||
<div
|
||
onScroll={updateActiveCard}
|
||
className="mt-7 flex snap-x snap-mandatory gap-3 overflow-x-auto px-5 pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||
>
|
||
<article
|
||
ref={(node) => { cardRefs.current[0] = node; }}
|
||
className="w-[78vw] max-w-[19rem] shrink-0 snap-center overflow-hidden rounded-2xl border border-edge bg-canvas"
|
||
>
|
||
<div className="h-64 overflow-hidden">
|
||
<Shot
|
||
pic={exploreShot}
|
||
alt="Visual clusters arranged across the Explore canvas."
|
||
className="h-full w-full object-cover object-[54%_center]"
|
||
/>
|
||
</div>
|
||
<div className="p-4">
|
||
<span className="font-mono text-[0.65rem] text-amber">EXPLORE</span>
|
||
<h3 className="mt-2 font-display text-xl font-semibold text-ink">See visual clusters.</h3>
|
||
<p className="mt-2 text-sm leading-6 text-muted">
|
||
Wander through related shots, then switch to a chronological timeline.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
ref={(node) => { cardRefs.current[1] = node; }}
|
||
className="w-[78vw] max-w-[19rem] shrink-0 snap-center overflow-hidden rounded-2xl border border-edge bg-canvas"
|
||
>
|
||
<div className="h-64 overflow-hidden">
|
||
<Shot
|
||
pic={lightboxShot}
|
||
alt="A waterfall open in the Phokus lightbox."
|
||
className="h-full w-full object-cover object-[37%_center]"
|
||
/>
|
||
</div>
|
||
<div className="p-4">
|
||
<span className="font-mono text-[0.65rem] text-amber">CURATE</span>
|
||
<h3 className="mt-2 font-display text-xl font-semibold text-ink">Review without leaving.</h3>
|
||
<p className="mt-2 text-sm leading-6 text-muted">
|
||
Rate, favourite, tag, zoom, play video, and find similar images in place.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article
|
||
ref={(node) => { cardRefs.current[2] = node; }}
|
||
className="w-[78vw] max-w-[19rem] shrink-0 snap-center overflow-hidden rounded-2xl border border-edge bg-canvas"
|
||
>
|
||
<div className="h-64 overflow-hidden">
|
||
<Shot
|
||
pic={duplicatesShot}
|
||
alt="Duplicate image pairs selected for safe cleanup."
|
||
className="h-full w-full object-cover object-[24%_top]"
|
||
/>
|
||
</div>
|
||
<div className="p-4">
|
||
<span className="font-mono text-[0.65rem] text-amber">CLEANUP</span>
|
||
<h3 className="mt-2 font-display text-xl font-semibold text-ink">Compare exact pairs.</h3>
|
||
<p className="mt-2 text-sm leading-6 text-muted">
|
||
Confirm byte-identical files and choose what to remove. Nothing is automatic.
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 px-5 text-[0.68rem] text-faint">
|
||
{[0, 1, 2].map((index) => (
|
||
<button
|
||
key={index}
|
||
type="button"
|
||
aria-label={`Show feature ${index + 1}`}
|
||
aria-current={activeCard === index ? "true" : undefined}
|
||
onClick={() => showCard(index)}
|
||
className={`h-1.5 rounded-full transition-[width,background-color] ${
|
||
activeCard === index ? "w-8 bg-amber" : "w-1.5 bg-edge-strong"
|
||
}`}
|
||
/>
|
||
))}
|
||
<span className="ml-1">Swipe</span>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
// Recurring aperture motif. One mark per section, vertically centered and bleeding
|
||
// off the LEFT or RIGHT edge, sides alternating down the page — a clean zigzag that
|
||
// never lets two marks collide at a section boundary (corner placement did).
|
||
//
|
||
// The iris is the full mark, but with blades reconstructed to meet the rim
|
||
// *tangentially* — each blade is an arc internally tangent to the rim (radius 3.93,
|
||
// center on the line out to the tip), so it kisses the circle and peels inward to
|
||
// the opening instead of crossing it. The shipped logo's blades use radius 10
|
||
// (== rim), which reads fine at icon size but looks "broken" blown up huge; this is
|
||
// the same mark, geometrically clean at any scale.
|
||
const WM_BLADE = "M0,-4.18 A3.93,3.93 0 0 1 6.43,-7.66";
|
||
|
||
function EdgeMark({ side }: { side: "left" | "right" }) {
|
||
const place = side === "left" ? "-left-[19rem]" : "-right-[19rem]";
|
||
return (
|
||
<svg
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
aria-hidden="true"
|
||
className={`pointer-events-none absolute top-1/2 hidden h-[34rem] w-[34rem] -translate-y-1/2 text-ink opacity-[0.05] sm:block ${place}`}
|
||
>
|
||
<g
|
||
transform="translate(12 12)"
|
||
stroke="currentColor"
|
||
strokeWidth="1.1"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
>
|
||
<circle r="10" />
|
||
<path d="M0,-4.18 A4.73,4.73 0 0 0 3.62,-2.09 A4.73,4.73 0 0 0 3.62,2.09 A4.73,4.73 0 0 0 0,4.18 A4.73,4.73 0 0 0 -3.62,2.09 A4.73,4.73 0 0 0 -3.62,-2.09 A4.73,4.73 0 0 0 0,-4.18 Z" />
|
||
<path d={WM_BLADE} />
|
||
<path d={WM_BLADE} transform="rotate(60)" />
|
||
<path d={WM_BLADE} transform="rotate(120)" />
|
||
<path d={WM_BLADE} transform="rotate(180)" />
|
||
<path d={WM_BLADE} transform="rotate(240)" />
|
||
<path d={WM_BLADE} transform="rotate(300)" />
|
||
</g>
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
function ExploreSection() {
|
||
return (
|
||
<section id="explore" className="relative hidden overflow-hidden border-t border-edge bg-surface lg:block">
|
||
<EdgeMark side="left" />
|
||
<div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-6 lg:py-28">
|
||
<div className="grid items-center gap-10 lg:grid-cols-12">
|
||
<div className="lg:col-span-5">
|
||
<SectionEyebrow label="Explore & timeline" />
|
||
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
|
||
See the shape of everything you've shot.
|
||
</h2>
|
||
<p className="mt-5 text-lg leading-relaxed text-muted">
|
||
Explore groups your library into visual clusters — sets of similar shots you can open and
|
||
wander, gathered by what they look like rather than where they're filed. A tag cloud
|
||
surfaces recurring themes, and the Timeline walks everything by the date it was taken.
|
||
</p>
|
||
</div>
|
||
<figure className="overflow-hidden rounded-xl border border-edge bg-canvas shadow-2xl shadow-black/50 lg:col-span-7">
|
||
<Shot
|
||
pic={exploreShot}
|
||
alt="The Explore view: clusters of related photos scattered across a dark canvas, each labelled with a count."
|
||
className="block w-full"
|
||
/>
|
||
</figure>
|
||
</div>
|
||
<figure className="mt-6 overflow-hidden rounded-xl border border-edge bg-canvas shadow-xl shadow-black/40">
|
||
<Shot
|
||
pic={timelineShot}
|
||
alt="The Timeline view: media grouped into month sections such as May 2024, June 2024, and July 2024."
|
||
className="block max-h-80 w-full object-cover object-top"
|
||
/>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CurateSection() {
|
||
return (
|
||
<section id="curate" className="relative hidden overflow-hidden lg:block">
|
||
<EdgeMark side="right" />
|
||
<div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-6 lg:py-28">
|
||
<div className="grid items-center gap-10 lg:grid-cols-12">
|
||
<figure className="order-2 overflow-hidden rounded-xl border border-edge bg-surface shadow-2xl shadow-black/50 lg:order-1 lg:col-span-7">
|
||
<Shot
|
||
pic={lightboxShot}
|
||
alt="The Phokus lightbox: a waterfall photo with a details panel showing rating stars, dimensions, file size, embedding status, and AI tags."
|
||
className="block w-full"
|
||
/>
|
||
</figure>
|
||
<div className="order-1 lg:order-2 lg:col-span-5">
|
||
<SectionEyebrow label="Review & curate" />
|
||
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
|
||
Rate, tag, and dig in — without losing your place.
|
||
</h2>
|
||
<p className="mt-5 text-lg leading-relaxed text-muted">
|
||
Open anything full-screen with zoom and pan, set ratings and favourites, edit tags, or
|
||
search within an image for look-alikes. Video gets a proper player too — scrubbing,
|
||
volume, speed, and fullscreen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<figure className="mt-6 overflow-hidden rounded-xl border border-edge bg-surface shadow-xl shadow-black/40">
|
||
<Shot
|
||
pic={videoShot}
|
||
alt="The Phokus video player: a video open full-screen with playback controls and a details panel."
|
||
className="block max-h-[26rem] w-full object-cover object-center"
|
||
/>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function CleanupSection() {
|
||
return (
|
||
<section id="cleanup" className="relative hidden overflow-hidden border-t border-edge bg-surface lg:block">
|
||
<EdgeMark side="left" />
|
||
<div className="relative mx-auto max-w-7xl px-5 py-16 lg:px-6 lg:py-28">
|
||
<div className="max-w-2xl">
|
||
<SectionEyebrow label="Clean up safely" />
|
||
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
|
||
Find exact duplicates and reclaim the space.
|
||
</h2>
|
||
<p className="mt-5 text-lg leading-relaxed text-muted">
|
||
A three-pass scan — size, then a sample hash, then a full hash — groups byte-identical files
|
||
so you can review each set and bulk-delete with confidence. Nothing is removed without your
|
||
say-so.
|
||
</p>
|
||
</div>
|
||
<figure className="mt-12 overflow-hidden rounded-xl border border-edge bg-canvas shadow-2xl shadow-black/50">
|
||
<Shot
|
||
pic={duplicatesShot}
|
||
alt="The Duplicate Finder: groups of duplicate photos with per-group sizes, reclaimable space, and bulk-delete controls."
|
||
className="block w-full"
|
||
/>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function TechFactsSection() {
|
||
const facts = [
|
||
{ k: "Platform", v: "Windows 10 / 11 (x64). The installer fetches the WebView2 runtime if it's missing." },
|
||
{ k: "Media", v: "Common image formats plus video — thumbnails and metadata come from a bundled FFmpeg." },
|
||
{ k: "On-device AI", v: "CLIP embeddings power semantic search (~580 MB); an optional WD tagger (~1.3 GB) adds tags." },
|
||
{ k: "Inference", v: "CPU / DirectML in the standard build; an optional CUDA build accelerates NVIDIA GPUs." },
|
||
{ k: "Storage", v: "A local SQLite database and thumbnail cache in your app-data folder. Nothing in the cloud." },
|
||
{ k: "License & build", v: "MIT, open source. The installer is currently unsigned — see the note below." },
|
||
];
|
||
return (
|
||
<section id="tech" className="relative mx-auto max-w-7xl px-5 py-12 lg:px-6 lg:py-28">
|
||
<MobileChapter number="04" label="Technical details" title="The practical bits.">
|
||
<div className="mt-6 divide-y divide-edge border-y border-edge">
|
||
{facts.map((fact, index) => (
|
||
<details key={fact.k} className="group py-1">
|
||
<summary className="flex min-h-12 cursor-pointer list-none items-center gap-3 py-2 text-sm font-medium text-ink">
|
||
<span className="font-mono text-[0.68rem] text-faint">0{index + 1}</span>
|
||
{fact.k}
|
||
<span className="ml-auto text-lg font-light text-amber transition-transform group-open:rotate-45">+</span>
|
||
</summary>
|
||
<p className="pb-5 pl-8 text-sm leading-6 text-muted">{fact.v}</p>
|
||
</details>
|
||
))}
|
||
</div>
|
||
</MobileChapter>
|
||
|
||
<div className="hidden lg:block">
|
||
<div className="max-w-2xl">
|
||
<SectionEyebrow label="The technical facts" />
|
||
<h2 className="mt-4 font-display text-3xl font-semibold tracking-tight text-ink sm:text-4xl">
|
||
What you're actually running.
|
||
</h2>
|
||
</div>
|
||
<dl className="mt-12 grid gap-px overflow-hidden rounded-xl border border-edge bg-edge sm:grid-cols-2">
|
||
{facts.map((f) => (
|
||
<div key={f.k} className="bg-canvas p-6">
|
||
<dt className="text-sm font-medium text-ink">{f.k}</dt>
|
||
<dd className="mt-1.5 text-sm leading-relaxed text-muted">{f.v}</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function DownloadSection() {
|
||
return (
|
||
<section id="download" className="relative overflow-hidden border-t border-edge bg-surface">
|
||
<EdgeMark side="right" />
|
||
<div className="relative mx-auto max-w-3xl px-5 py-12 text-left lg:px-6 lg:py-28 lg:text-center">
|
||
<PhokusMark className="h-10 w-10 text-ink lg:mx-auto lg:h-12 lg:w-12" dotClassName="fill-amber" />
|
||
<h2 className="mt-6 max-w-xs font-display text-[2rem] font-semibold leading-tight tracking-tight text-ink lg:mx-auto lg:max-w-none lg:text-4xl">
|
||
Point Phokus at a folder.
|
||
</h2>
|
||
<p className="mt-4 max-w-md text-base leading-7 text-muted lg:mx-auto lg:text-lg lg:leading-relaxed">
|
||
Turn a folder full of files into a library you can actually explore.
|
||
</p>
|
||
<div className="mt-8 grid gap-3 lg:flex lg:flex-wrap lg:justify-center">
|
||
<a
|
||
href={DOWNLOAD_URL}
|
||
className="flex min-h-12 items-center justify-between rounded-xl bg-amber px-5 text-sm font-semibold text-canvas transition-colors hover:bg-amber-soft lg:min-h-0 lg:justify-center lg:rounded-lg lg:px-6 lg:py-3 lg:font-medium"
|
||
>
|
||
Download for Windows
|
||
<span className="lg:hidden" aria-hidden="true">↓</span>
|
||
</a>
|
||
<a
|
||
href={REPO_URL}
|
||
className="flex min-h-12 items-center justify-between rounded-xl border border-edge-strong px-5 text-sm font-medium text-ink transition-colors hover:bg-surface-2 lg:min-h-0 lg:justify-center lg:gap-2 lg:rounded-lg lg:px-6 lg:py-3"
|
||
>
|
||
View source
|
||
<GitHubIcon className="h-4 w-4" />
|
||
</a>
|
||
</div>
|
||
<p className="mt-8 max-w-xl border-l border-amber/50 pl-4 text-left text-xs leading-5 text-muted lg:mx-auto lg:mt-10 lg:rounded-lg lg:border lg:border-edge lg:bg-canvas/60 lg:p-4 lg:text-sm lg:leading-relaxed">
|
||
<span className="font-medium text-ink">Heads up:</span> this build isn't code-signed yet, so
|
||
Windows SmartScreen will warn that the publisher is unrecognised — choose{" "}
|
||
<span className="text-ink">More info → Run anyway</span>. An NVIDIA CUDA build is on the
|
||
releases page too.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function Footer() {
|
||
return (
|
||
<footer>
|
||
<div className="mx-auto flex max-w-7xl flex-col gap-5 px-5 py-8 text-xs text-faint lg:flex-row lg:items-center lg:justify-between lg:px-6 lg:py-10 lg:text-sm">
|
||
<div className="flex items-center gap-2 text-muted">
|
||
<PhokusMark className="h-5 w-5 text-amber" />
|
||
<span className="font-display font-medium text-ink">Phokus</span>
|
||
<span className="text-faint">· local-first media library</span>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-x-6 gap-y-2">
|
||
<a href={REPO_URL} className="transition-colors hover:text-ink">GitHub</a>
|
||
<a href="https://git.jezz.wtf/JezzWTF/phokus" className="transition-colors hover:text-ink">Gitea</a>
|
||
<a href={`${REPO_URL}/blob/main/LICENSE`} className="transition-colors hover:text-ink">MIT</a>
|
||
<span>JezzWTF</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
|
||
export function App() {
|
||
return (
|
||
<div className="min-h-screen">
|
||
<Header />
|
||
<MobileChapterNav />
|
||
<main>
|
||
<Hero />
|
||
<LocalFirst />
|
||
<SearchSection />
|
||
<MobileFeatureDeck />
|
||
<ExploreSection />
|
||
<CurateSection />
|
||
<CleanupSection />
|
||
<TechFactsSection />
|
||
<DownloadSection />
|
||
</main>
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|