Better zxdb landing page
This commit is contained in:
@@ -8,85 +8,153 @@ export const revalidate = 3600;
|
|||||||
|
|
||||||
export default async function Page() {
|
export default async function Page() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="d-flex flex-column gap-4">
|
||||||
<h1 className="mb-3">ZXDB Explorer</h1>
|
<section
|
||||||
<p className="text-secondary">Choose what you want to explore.</p>
|
className="rounded-4 p-4 p-lg-5 shadow-sm"
|
||||||
|
style={{
|
||||||
<form className="row gy-2 gx-2 align-items-center mb-4" method="get" action="/zxdb/entries">
|
background: "linear-gradient(135deg, rgba(13,110,253,0.08), rgba(25,135,84,0.08))",
|
||||||
<div className="col-sm-8 col-md-6 col-lg-4">
|
}}
|
||||||
<input className="form-control" name="q" placeholder="Search entries..." />
|
>
|
||||||
</div>
|
<div className="row align-items-center g-4">
|
||||||
<div className="col-auto">
|
<div className="col-lg-7">
|
||||||
<select className="form-select" name="scope" defaultValue="title">
|
<div className="d-flex align-items-center gap-2 mb-3">
|
||||||
<option value="title">Titles</option>
|
<span className="badge text-bg-dark">ZXDB</span>
|
||||||
<option value="title_aliases">Titles + Aliases</option>
|
<span className="badge text-bg-secondary">Explorer</span>
|
||||||
<option value="title_aliases_origins">Titles + Aliases + Origins</option>
|
</div>
|
||||||
</select>
|
<h1 className="display-6 mb-3">ZXDB Explorer</h1>
|
||||||
</div>
|
<p className="lead text-secondary mb-4">
|
||||||
<div className="col-auto">
|
Trace Spectrum-era software across entries, releases, magazines, and labels with deep links and fast filters.
|
||||||
<button className="btn btn-primary">Search</button>
|
</p>
|
||||||
</div>
|
<div className="d-flex flex-wrap gap-2">
|
||||||
</form>
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/entries">Browse entries</Link>
|
||||||
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/releases">Latest releases</Link>
|
||||||
<div className="row g-3">
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/magazines">Magazine issues</Link>
|
||||||
<div className="col-sm-6 col-lg-4">
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">People & labels</Link>
|
||||||
<Link href="/zxdb/entries" className="text-decoration-none">
|
</div>
|
||||||
<div className="card h-100 shadow-sm">
|
</div>
|
||||||
<div className="card-body d-flex align-items-center">
|
<div className="col-lg-5">
|
||||||
<div className="me-3" aria-hidden>
|
<div className="card border-0 shadow-sm">
|
||||||
<span className="bi bi-collection" style={{ fontSize: 28 }} />
|
<div className="card-body">
|
||||||
</div>
|
<h5 className="card-title mb-3">Jump straight in</h5>
|
||||||
<div>
|
<form className="d-flex flex-column gap-2" method="get" action="/zxdb/entries">
|
||||||
<h5 className="card-title mb-1">Entries</h5>
|
<div>
|
||||||
<div className="card-text text-secondary">Browse software entries with filters</div>
|
<label className="form-label small text-secondary">Search entries</label>
|
||||||
|
<input className="form-control" name="q" placeholder="Try: manic, doom, renegade..." />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="form-label small text-secondary">Scope</label>
|
||||||
|
<select className="form-select" name="scope" defaultValue="title">
|
||||||
|
<option value="title">Titles</option>
|
||||||
|
<option value="title_aliases">Titles + Aliases</option>
|
||||||
|
<option value="title_aliases_origins">Titles + Aliases + Origins</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button className="btn btn-primary">Search</button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div className="col-sm-6 col-lg-4">
|
<section>
|
||||||
<Link href="/zxdb/releases" className="text-decoration-none">
|
<div className="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
|
||||||
<div className="card h-100 shadow-sm">
|
<h2 className="h4 mb-0">Start exploring</h2>
|
||||||
<div className="card-body d-flex align-items-center">
|
<span className="text-secondary small">Pick a path to dive deeper</span>
|
||||||
<div className="me-3" aria-hidden>
|
</div>
|
||||||
<span className="bi bi-box-arrow-down" style={{ fontSize: 28 }} />
|
<div className="row g-3">
|
||||||
|
<div className="col-sm-6 col-lg-3">
|
||||||
|
<Link href="/zxdb/entries" className="text-decoration-none">
|
||||||
|
<div className="card h-100 shadow-sm">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="d-flex align-items-center gap-3">
|
||||||
|
<span className="bi bi-collection" style={{ fontSize: 28 }} aria-hidden />
|
||||||
|
<div>
|
||||||
|
<h5 className="card-title mb-1">Entries</h5>
|
||||||
|
<div className="card-text text-secondary">Search + filter titles</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</Link>
|
||||||
<h5 className="card-title mb-1">Releases</h5>
|
</div>
|
||||||
<div className="card-text text-secondary">Drill into releases and downloads</div>
|
<div className="col-sm-6 col-lg-3">
|
||||||
|
<Link href="/zxdb/releases" className="text-decoration-none">
|
||||||
|
<div className="card h-100 shadow-sm">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="d-flex align-items-center gap-3">
|
||||||
|
<span className="bi bi-box-arrow-down" style={{ fontSize: 28 }} aria-hidden />
|
||||||
|
<div>
|
||||||
|
<h5 className="card-title mb-1">Releases</h5>
|
||||||
|
<div className="card-text text-secondary">Downloads + media</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6 col-lg-3">
|
||||||
|
<Link href="/zxdb/magazines" className="text-decoration-none">
|
||||||
|
<div className="card h-100 shadow-sm">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="d-flex align-items-center gap-3">
|
||||||
|
<span className="bi bi-journal-text" style={{ fontSize: 28 }} aria-hidden />
|
||||||
|
<div>
|
||||||
|
<h5 className="card-title mb-1">Magazines</h5>
|
||||||
|
<div className="card-text text-secondary">Issues + references</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6 col-lg-3">
|
||||||
|
<Link href="/zxdb/labels" className="text-decoration-none">
|
||||||
|
<div className="card h-100 shadow-sm">
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="d-flex align-items-center gap-3">
|
||||||
|
<span className="bi bi-people" style={{ fontSize: 28 }} aria-hidden />
|
||||||
|
<div>
|
||||||
|
<h5 className="card-title mb-1">Labels</h5>
|
||||||
|
<div className="card-text text-secondary">People + publishers</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="row g-3">
|
||||||
|
<div className="col-lg-7">
|
||||||
|
<div className="card h-100 shadow-sm">
|
||||||
|
<div className="card-body">
|
||||||
|
<h3 className="h5">Explore by category</h3>
|
||||||
|
<p className="text-secondary mb-3">Jump to curated lists and filter results from there.</p>
|
||||||
|
<div className="d-flex flex-wrap gap-2">
|
||||||
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/genres">Genres</Link>
|
||||||
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/languages">Languages</Link>
|
||||||
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/machinetypes">Machine Types</Link>
|
||||||
|
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">Labels</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
<div className="col-lg-5">
|
||||||
|
|
||||||
<div className="col-sm-6 col-lg-4">
|
|
||||||
<Link href="/zxdb/magazines" className="text-decoration-none">
|
|
||||||
<div className="card h-100 shadow-sm">
|
<div className="card h-100 shadow-sm">
|
||||||
<div className="card-body d-flex align-items-center">
|
<div className="card-body">
|
||||||
<div className="me-3" aria-hidden>
|
<h3 className="h5">How to use this</h3>
|
||||||
<span className="bi bi-journal-text" style={{ fontSize: 28 }} />
|
<ol className="mb-0 text-secondary small">
|
||||||
</div>
|
<li>Search by title or aliases in Entries.</li>
|
||||||
<div>
|
<li>Open a release to see downloads, scraps, and places.</li>
|
||||||
<h5 className="card-title mb-1">Magazines</h5>
|
<li>Use magazines to find original reviews and references.</li>
|
||||||
<div className="card-text text-secondary">Browse magazines and their issues</div>
|
<li>Follow labels to discover related work.</li>
|
||||||
</div>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-4">
|
|
||||||
<h2 className="h5 mb-2">Categories</h2>
|
|
||||||
<div className="d-flex flex-wrap gap-2">
|
|
||||||
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/genres">Genres</Link>
|
|
||||||
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/languages">Languages</Link>
|
|
||||||
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/machinetypes">Machine Types</Link>
|
|
||||||
<Link className="btn btn-outline-secondary btn-sm" href="/zxdb/labels">Labels</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user