Superminaren/hackerspace.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restore mini previews on the landing hero

Browse Source 
The animated product mini-previews are back, recovered from before
the redesign into components/landing/mini-previews.tsx ('use client',
own module for separation). They render framed as product screenshots
(window chrome + bordered surface in the landing palette) in a
two-column hero, so they read as the real app sitting inside the
editorial marketing page. Hidden below 900px.

266/266 tests pass. Build clean. No migration.
This commit is contained in:
Moheeb Zara
2026-05-15 16:41:03 -07:00
parent 43f9c09d70
commit b769414f6d
3 changed files with 306 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(landing)/landing.css
+20
View File
@@ -77,6 +77,26 @@
/* Hero */
.landing-root .landing-hero { padding: 88px 0 72px; border-bottom: 1px solid var(--ln-border); }
.landing-root .landing-hero-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.landing-root .landing-preview-frame {
border: 1px solid var(--ln-border);
background: var(--ln-surface);
border-radius: 8px;
padding: 14px;
}
.landing-root .landing-preview-chrome {
display: flex; gap: 6px; padding: 2px 4px 12px;
}
.landing-root .landing-preview-chrome span {
width: 9px; height: 9px; border-radius: 50%;
background: var(--ln-border);
}
@media (max-width: 900px) {
.landing-root .landing-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.landing-root .landing-hero-visual { display: none; }
}
.landing-root .landing-eyebrow {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ln-text-dim); margin-bottom: 24px;
app/(landing)/page.tsx
+26 -15
View File
@@ -2,6 +2,7 @@ import Link from 'next/link'
import { BrandMark } from '@/components/brand-mark'
import { GithubIcon, ArrowIcon } from '@/components/landing/icons'
import { ResourceShowcase } from '@/components/landing/resource-showcase'
import { HeroPreviewCluster } from '@/components/landing/mini-previews'
const MODULES = [
{ num: '01', title: 'Members', desc: 'Tiers, dues status, contact info, custom roles. Know who is current and who is not, at a glance.' },
@@ -45,21 +46,31 @@ export default function LandingPage() {
</nav>
<header className="landing-hero">
<div className="landing-container">
<p className="landing-eyebrow">Operating system for hackerspaces</p>
<h1 className="landing-display">
Run your <em>space</em>, not a spreadsheet
</h1>
<p className="landing-lede">
Members, dues, tasks, projects, ops docs, and governance in one
place. Built by people who have actually run these spaces, for the
people who keep them running.
</p>
<div className="landing-cta-row">
<Link href="/signup" className="landing-btn-accent">
Get started <ArrowIcon className="w-3.5 h-3.5" />
</Link>
<Link href="/login" className="landing-btn">Log in</Link>
<div className="landing-container landing-hero-grid">
<div>
<p className="landing-eyebrow">Operating system for hackerspaces</p>
<h1 className="landing-display">
Run your <em>space</em>, not a spreadsheet
</h1>
<p className="landing-lede">
Members, dues, tasks, projects, ops docs, and governance in one
place. Built by people who have actually run these spaces, for the
people who keep them running.
</p>
<div className="landing-cta-row">
<Link href="/signup" className="landing-btn-accent">
Get started <ArrowIcon className="w-3.5 h-3.5" />
</Link>
<Link href="/login" className="landing-btn">Log in</Link>
</div>
</div>
<div className="landing-hero-visual">
<div className="landing-preview-frame">
<div className="landing-preview-chrome" aria-hidden="true">
<span /><span /><span />
</div>
<HeroPreviewCluster />
</div>
</div>
</div>
</header>