refactor: simplify landing page with ops features
Remove marketing elements and add animated ops preview. Co-authored-by: Moheeb Zara <[email protected]>
This commit is contained in:
v0
Moheeb Zara
+178
-167
@@ -16,11 +16,11 @@ function IcoFolder({ className }: { className?: string }) {
|
||||
function IcoCreditCard({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /></svg>
|
||||
}
|
||||
function IcoKey({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>
|
||||
function IcoLock({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
||||
}
|
||||
function IcoChart({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
|
||||
function IcoDoc({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
||||
}
|
||||
function IcoArrow({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
@@ -28,8 +28,15 @@ function IcoArrow({ className }: { className?: string }) {
|
||||
function IcoTerminal({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
|
||||
}
|
||||
function IcoEye({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
|
||||
}
|
||||
function IcoPin({ className }: { className?: string }) {
|
||||
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" /></svg>
|
||||
}
|
||||
|
||||
// ─── Mini UI Previews ──────────────────────────────────────────────────────────
|
||||
|
||||
// Mini UI Components with animations
|
||||
function MiniMemberTable() {
|
||||
const [activeRow, setActiveRow] = useState(0)
|
||||
const members = [
|
||||
@@ -38,14 +45,10 @@ function MiniMemberTable() {
|
||||
{ name: 'Sam Rivera', tier: 'PLUS', status: 'late' },
|
||||
{ name: 'Casey Wong', tier: 'BASIC', status: 'current' },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveRow((prev) => (prev + 1) % members.length)
|
||||
}, 2000)
|
||||
return () => clearInterval(interval)
|
||||
const t = setInterval(() => setActiveRow(p => (p + 1) % members.length), 2000)
|
||||
return () => clearInterval(t)
|
||||
}, [members.length])
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded overflow-hidden text-[10px]">
|
||||
<div className="bg-sidebar px-2 py-1.5 flex items-center justify-between">
|
||||
@@ -54,17 +57,12 @@ function MiniMemberTable() {
|
||||
</div>
|
||||
<div className="divide-y divide-border">
|
||||
{members.map((m, i) => (
|
||||
<div
|
||||
key={m.name}
|
||||
className={`flex items-center gap-2 px-2 py-1.5 transition-all duration-500 ${i === activeRow ? 'bg-primary/5' : ''}`}
|
||||
>
|
||||
<div className={`w-5 h-5 rounded flex items-center justify-center font-mono text-[8px] font-bold ${i === activeRow ? 'bg-primary text-white' : 'bg-muted text-muted-foreground'}`}>
|
||||
<div key={m.name} className={`flex items-center gap-2 px-2 py-1.5 transition-all duration-500 ${i === activeRow ? 'bg-primary/5' : ''}`}>
|
||||
<div className={`w-5 h-5 rounded flex items-center justify-center font-mono text-[8px] font-bold transition-all duration-500 ${i === activeRow ? 'bg-primary text-white' : 'bg-muted text-muted-foreground'}`}>
|
||||
{m.name.split(' ').map(n => n[0]).join('')}
|
||||
</div>
|
||||
<span className="flex-1 text-foreground truncate">{m.name}</span>
|
||||
<span className={`font-mono text-[8px] px-1 py-0.5 rounded ${
|
||||
m.tier === 'PLUS' ? 'text-blue-500 bg-blue-500/10' : 'text-muted-foreground bg-muted'
|
||||
}`}>{m.tier}</span>
|
||||
<span className={`font-mono text-[8px] px-1 py-0.5 rounded ${m.tier === 'PLUS' ? 'text-blue-500 bg-blue-500/10' : 'text-muted-foreground bg-muted'}`}>{m.tier}</span>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${m.status === 'current' ? 'bg-primary' : 'bg-orange-400'}`} />
|
||||
</div>
|
||||
))}
|
||||
@@ -77,20 +75,15 @@ function MiniTaskList() {
|
||||
const [checkedIndex, setCheckedIndex] = useState(-1)
|
||||
const tasks = [
|
||||
{ title: 'Clean laser cutter lens', area: 'Laser' },
|
||||
{ title: 'Restock filament', area: '3D Printing' },
|
||||
{ title: 'Restock filament', area: '3D Print' },
|
||||
{ title: 'Update wiki docs', area: 'Admin' },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCheckedIndex((prev) => {
|
||||
if (prev >= tasks.length - 1) return -1
|
||||
return prev + 1
|
||||
})
|
||||
const t = setInterval(() => {
|
||||
setCheckedIndex(p => (p >= tasks.length - 1 ? -1 : p + 1))
|
||||
}, 1500)
|
||||
return () => clearInterval(interval)
|
||||
return () => clearInterval(t)
|
||||
}, [tasks.length])
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded overflow-hidden text-[10px]">
|
||||
<div className="bg-sidebar px-2 py-1.5 flex items-center justify-between">
|
||||
@@ -100,18 +93,14 @@ function MiniTaskList() {
|
||||
<div className="divide-y divide-border">
|
||||
{tasks.map((t, i) => (
|
||||
<div key={t.title} className="flex items-center gap-2 px-2 py-1.5">
|
||||
<div className={`w-3 h-3 rounded flex items-center justify-center transition-all duration-300 ${
|
||||
i <= checkedIndex ? 'bg-primary' : 'border border-border'
|
||||
}`}>
|
||||
<div className={`w-3 h-3 rounded flex items-center justify-center transition-all duration-300 ${i <= checkedIndex ? 'bg-primary' : 'border border-border'}`}>
|
||||
{i <= checkedIndex && (
|
||||
<svg className="w-2 h-2 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<span className={`flex-1 truncate transition-all duration-300 ${i <= checkedIndex ? 'text-muted-foreground line-through' : 'text-foreground'}`}>
|
||||
{t.title}
|
||||
</span>
|
||||
<span className={`flex-1 truncate transition-all duration-300 ${i <= checkedIndex ? 'text-muted-foreground line-through' : 'text-foreground'}`}>{t.title}</span>
|
||||
<span className="text-[8px] text-muted-foreground font-mono">{t.area}</span>
|
||||
</div>
|
||||
))}
|
||||
@@ -122,16 +111,11 @@ function MiniTaskList() {
|
||||
|
||||
function MiniProjectBoard() {
|
||||
const [movingCard, setMovingCard] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setMovingCard((prev) => (prev + 1) % 3)
|
||||
}, 2500)
|
||||
return () => clearInterval(interval)
|
||||
const t = setInterval(() => setMovingCard(p => (p + 1) % 3), 2500)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
|
||||
const columns = ['BACKLOG', 'IN PROGRESS', 'DONE']
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded overflow-hidden text-[10px]">
|
||||
<div className="bg-sidebar px-2 py-1.5">
|
||||
@@ -141,10 +125,8 @@ function MiniProjectBoard() {
|
||||
{columns.map((col, colIndex) => (
|
||||
<div key={col} className="space-y-1">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<span className={`w-1 h-1 rounded-full ${
|
||||
colIndex === 0 ? 'bg-muted-foreground' : colIndex === 1 ? 'bg-primary' : 'bg-muted-foreground'
|
||||
}`} />
|
||||
<span className="text-[8px] font-mono text-muted-foreground">{col}</span>
|
||||
<span className={`w-1 h-1 rounded-full ${colIndex === 1 ? 'bg-primary' : 'bg-muted-foreground/40'}`} />
|
||||
<span className="text-[7px] font-mono text-muted-foreground">{col}</span>
|
||||
</div>
|
||||
{colIndex === movingCard && (
|
||||
<div className="bg-muted border border-primary/30 rounded p-1 transition-all duration-500">
|
||||
@@ -154,9 +136,9 @@ function MiniProjectBoard() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{colIndex !== movingCard && colIndex === 1 && (
|
||||
<div className="bg-muted border border-border rounded p-1 opacity-50">
|
||||
<p className="text-[8px] text-muted-foreground truncate">Placeholder</p>
|
||||
{colIndex === 1 && colIndex !== movingCard && (
|
||||
<div className="bg-muted border border-border rounded p-1 opacity-40">
|
||||
<p className="text-[8px] text-muted-foreground truncate">Network rack</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -168,14 +150,10 @@ function MiniProjectBoard() {
|
||||
|
||||
function MiniPayments() {
|
||||
const [linking, setLinking] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setLinking((prev) => !prev)
|
||||
}, 2000)
|
||||
return () => clearInterval(interval)
|
||||
const t = setInterval(() => setLinking(p => !p), 2000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded overflow-hidden text-[10px]">
|
||||
<div className="bg-sidebar px-2 py-1.5 flex items-center justify-between">
|
||||
@@ -186,9 +164,7 @@ function MiniPayments() {
|
||||
<div className="flex items-center gap-2 px-2 py-1.5">
|
||||
<span className="text-blue-500 font-mono text-[8px] font-bold">PAYPAL</span>
|
||||
<span className="flex-1 text-foreground">$50.00</span>
|
||||
<span className={`font-mono text-[8px] px-1 py-0.5 rounded transition-all duration-500 ${
|
||||
linking ? 'text-primary bg-primary/10 border border-primary/20' : 'text-muted-foreground border border-dashed border-border'
|
||||
}`}>
|
||||
<span className={`font-mono text-[8px] px-1 py-0.5 rounded transition-all duration-500 ${linking ? 'text-primary bg-primary/10 border border-primary/20' : 'text-muted-foreground border border-dashed border-border'}`}>
|
||||
{linking ? 'LINKED' : '+ LINK'}
|
||||
</span>
|
||||
</div>
|
||||
@@ -202,36 +178,132 @@ function MiniPayments() {
|
||||
)
|
||||
}
|
||||
|
||||
function MiniStats() {
|
||||
const [count, setCount] = useState(47)
|
||||
|
||||
function MiniOps() {
|
||||
const [revealedIndex, setRevealedIndex] = useState(-1)
|
||||
const [tab, setTab] = useState<'secrets' | 'kb'>('secrets')
|
||||
|
||||
const secrets = [
|
||||
{ label: 'WiFi Password', area: 'Network' },
|
||||
{ label: 'Alarm Code', area: 'Security' },
|
||||
{ label: 'PayPal API Key', area: 'Finance' },
|
||||
]
|
||||
const kb = [
|
||||
{ title: 'Open / Close Procedure', area: 'Ops', pinned: true },
|
||||
{ title: 'Laser Cutter Safety', area: 'Laser', pinned: false },
|
||||
{ title: 'Board Meeting Runbook', area: 'Admin', pinned: true },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCount((prev) => prev + Math.floor(Math.random() * 3) - 1)
|
||||
}, 3000)
|
||||
return () => clearInterval(interval)
|
||||
if (tab !== 'secrets') return
|
||||
const t = setInterval(() => {
|
||||
setRevealedIndex(p => (p >= secrets.length - 1 ? -1 : p + 1))
|
||||
}, 1800)
|
||||
return () => clearInterval(t)
|
||||
}, [tab, secrets.length])
|
||||
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => {
|
||||
setTab(p => (p === 'secrets' ? 'kb' : 'secrets'))
|
||||
setRevealedIndex(-1)
|
||||
}, 5000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<div className="bg-card border border-border rounded overflow-hidden text-[10px]">
|
||||
<div className="bg-sidebar px-2 py-1.5">
|
||||
<span className="text-white/90 font-medium">Ops</span>
|
||||
</div>
|
||||
<div className="flex border-b border-border">
|
||||
{(['secrets', 'kb'] as const).map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTab(t)}
|
||||
className={`flex-1 py-1 font-mono text-[8px] transition-all duration-300 ${tab === t ? 'text-primary border-b border-primary' : 'text-muted-foreground'}`}
|
||||
>
|
||||
{t === 'secrets' ? 'SECRETS' : 'KNOWLEDGE BASE'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="divide-y divide-border">
|
||||
{tab === 'secrets' && secrets.map((s, i) => (
|
||||
<div key={s.label} className="flex items-center gap-2 px-2 py-1.5">
|
||||
<div className="w-4 h-4 rounded bg-amber-500/10 flex items-center justify-center flex-shrink-0">
|
||||
<IcoLock className="w-2.5 h-2.5 text-amber-500" />
|
||||
</div>
|
||||
<span className="flex-1 text-foreground truncate">{s.label}</span>
|
||||
<span className="text-muted-foreground font-mono text-[8px]">{s.area}</span>
|
||||
<div className={`flex items-center gap-0.5 font-mono text-[8px] px-1 py-0.5 rounded border transition-all duration-400 ${
|
||||
i === revealedIndex
|
||||
? 'text-primary border-primary/30 bg-primary/5'
|
||||
: 'text-muted-foreground border-border'
|
||||
}`}>
|
||||
<IcoEye className="w-2 h-2" />
|
||||
{i === revealedIndex ? (
|
||||
<span className="font-mono text-[7px] text-primary">••••1234</span>
|
||||
) : (
|
||||
<span>reveal</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{tab === 'kb' && kb.map((k) => (
|
||||
<div key={k.title} className={`flex items-center gap-2 px-2 py-1.5 border-l-2 ${k.pinned ? 'border-l-primary' : 'border-l-transparent'}`}>
|
||||
<div className="w-4 h-4 rounded bg-muted flex items-center justify-center flex-shrink-0">
|
||||
<IcoDoc className="w-2.5 h-2.5 text-muted-foreground" />
|
||||
</div>
|
||||
<span className="flex-1 text-foreground truncate text-[9px]">{k.title}</span>
|
||||
{k.pinned && <IcoPin className="w-2.5 h-2.5 text-primary flex-shrink-0" />}
|
||||
<span className="text-muted-foreground font-mono text-[8px]">{k.area}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function MiniDashboard() {
|
||||
const [tick, setTick] = useState(0)
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setTick(p => p + 1), 3000)
|
||||
return () => clearInterval(t)
|
||||
}, [])
|
||||
const members = 47 + (tick % 3)
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-1.5">
|
||||
<div className="bg-card border border-border rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<IcoUsers className="w-2.5 h-2.5 text-muted-foreground" />
|
||||
<span className="text-[8px] font-mono text-muted-foreground uppercase">MEMBERS</span>
|
||||
<span className="text-[8px] font-mono text-muted-foreground uppercase">Members</span>
|
||||
</div>
|
||||
<p className="text-base font-bold text-primary transition-all duration-300">{count}</p>
|
||||
<p className="text-base font-bold text-primary transition-all duration-300">{members}</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded p-2">
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<IcoTask className="w-2.5 h-2.5 text-muted-foreground" />
|
||||
<span className="text-[8px] font-mono text-muted-foreground uppercase">TASKS</span>
|
||||
<span className="text-[8px] font-mono text-muted-foreground uppercase">Tasks</span>
|
||||
</div>
|
||||
<p className="text-base font-bold text-orange-500">12</p>
|
||||
</div>
|
||||
<div className="bg-card border border-border rounded p-2 col-span-2">
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<span className="text-[8px] font-mono text-muted-foreground uppercase">Due this week</span>
|
||||
<span className="text-[8px] font-mono text-orange-400">3 late</span>
|
||||
</div>
|
||||
<div className="flex gap-0.5">
|
||||
{Array.from({ length: 12 }).map((_, i) => (
|
||||
<div key={i} className={`flex-1 h-3 rounded-sm transition-all duration-700 ${
|
||||
i < 3 ? 'bg-orange-400' : i < 9 ? 'bg-primary' : 'bg-muted'
|
||||
}`} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Landing Page ─────────────────────────────────────────────────────────
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
@@ -259,21 +331,21 @@ export default function LandingPage() {
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<p className="font-mono text-[10px] tracking-widest text-primary uppercase mb-4">
|
||||
Operational Software for Makerspaces
|
||||
Operational software for makerspaces
|
||||
</p>
|
||||
<h1 className="font-sans text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight mb-6 text-balance">
|
||||
Run your hackerspace like the infrastructure it is
|
||||
</h1>
|
||||
<p className="font-sans text-base md:text-lg text-sidebar-foreground leading-relaxed mb-8 max-w-lg">
|
||||
Member management, dues tracking, task coordination, and project visibility. Built by people who have actually run these spaces.
|
||||
Member management, dues tracking, task coordination, project visibility, and a shared ops brain for the things that keep the space running.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center gap-2 bg-primary text-white font-sans text-sm px-6 py-3 rounded hover:bg-primary/90 transition">
|
||||
Start Free
|
||||
Get Started
|
||||
<IcoArrow className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link href="#features" className="inline-flex items-center justify-center gap-2 border border-sidebar-border text-sidebar-foreground font-sans text-sm px-6 py-3 rounded hover:border-primary/50 hover:text-white transition">
|
||||
See Features
|
||||
<Link href="/login" className="inline-flex items-center justify-center gap-2 border border-sidebar-border text-sidebar-foreground font-sans text-sm px-6 py-3 rounded hover:border-primary/50 hover:text-white transition">
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
@@ -281,7 +353,7 @@ export default function LandingPage() {
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="space-y-3">
|
||||
<MiniMemberTable />
|
||||
<MiniStats />
|
||||
<MiniDashboard />
|
||||
</div>
|
||||
<div className="space-y-3 pt-6">
|
||||
<MiniTaskList />
|
||||
@@ -293,35 +365,16 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats bar */}
|
||||
<section className="border-b border-border bg-card">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6 py-8">
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
|
||||
{[
|
||||
{ label: 'Spaces running', value: '40+' },
|
||||
{ label: 'Members managed', value: '2,800+' },
|
||||
{ label: 'Tasks completed', value: '15k+' },
|
||||
{ label: 'Payments tracked', value: '$380k+' },
|
||||
].map((stat) => (
|
||||
<div key={stat.label} className="text-center md:text-left">
|
||||
<p className="font-sans text-2xl md:text-3xl font-bold text-foreground">{stat.value}</p>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mt-1">{stat.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features */}
|
||||
<section id="features" className="py-16 md:py-24">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6">
|
||||
<div className="text-center mb-12 md:mb-16">
|
||||
<div className="mb-12 md:mb-16">
|
||||
<p className="font-mono text-[10px] tracking-widest text-primary uppercase mb-3">Features</p>
|
||||
<h2 className="font-sans text-2xl md:text-3xl font-bold text-foreground mb-4 text-balance">
|
||||
Everything your space needs, nothing it does not
|
||||
</h2>
|
||||
<p className="font-sans text-base text-muted-foreground max-w-2xl mx-auto">
|
||||
No bloated enterprise features. No learning curve. Just tools that match how hackerspaces actually operate.
|
||||
<p className="font-sans text-base text-muted-foreground max-w-2xl">
|
||||
No bloated enterprise features. No learning curve. Tools that match how hackerspaces actually operate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -330,7 +383,7 @@ export default function LandingPage() {
|
||||
{
|
||||
Icon: IcoUsers,
|
||||
title: 'Member Directory',
|
||||
description: 'Track membership tiers, payment status, access credentials, and contact info. Bulk actions for common operations.',
|
||||
description: 'Track membership tiers, payment status, and contact info. Bulk actions for common operations. Know who is current and who is not.',
|
||||
preview: <MiniMemberTable />,
|
||||
},
|
||||
{
|
||||
@@ -342,46 +395,26 @@ export default function LandingPage() {
|
||||
{
|
||||
Icon: IcoFolder,
|
||||
title: 'Project Tracking',
|
||||
description: 'Kanban board for space projects. Track progress, assign areas, and keep the community informed about ongoing work.',
|
||||
description: 'Kanban board for space projects. Track progress, assign areas, and keep the community informed about what is in motion.',
|
||||
preview: <MiniProjectBoard />,
|
||||
},
|
||||
{
|
||||
Icon: IcoCreditCard,
|
||||
title: 'Payment Reconciliation',
|
||||
description: 'Import from PayPal, Venmo, and Zeffy. Link transactions to members. Know exactly who owes what without spreadsheet hell.',
|
||||
description: 'Import from PayPal, Venmo, and Zeffy. Link transactions to members. Know exactly who owes what without the spreadsheet.',
|
||||
preview: <MiniPayments />,
|
||||
},
|
||||
{
|
||||
Icon: IcoKey,
|
||||
title: 'Access Control',
|
||||
description: 'Track key cards, door codes, and 24/7 access privileges. Integrated with member status so access stays current.',
|
||||
preview: (
|
||||
<div className="bg-card border border-border rounded overflow-hidden text-[10px]">
|
||||
<div className="bg-sidebar px-2 py-1.5">
|
||||
<span className="text-white/90 font-medium">Access Logs</span>
|
||||
</div>
|
||||
<div className="p-2 space-y-1.5">
|
||||
{[
|
||||
{ name: 'A. Chen', time: '2:34 PM', door: 'Main' },
|
||||
{ name: 'J. Mills', time: '1:12 PM', door: 'Shop' },
|
||||
{ name: 'S. Rivera', time: '11:45 AM', door: 'Main' },
|
||||
].map((log) => (
|
||||
<div key={log.name + log.time} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-primary" />
|
||||
<span className="flex-1 text-foreground">{log.name}</span>
|
||||
<span className="text-muted-foreground font-mono text-[8px]">{log.door}</span>
|
||||
<span className="text-muted-foreground font-mono text-[8px]">{log.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
Icon: IcoLock,
|
||||
title: 'Ops: Secrets and KB',
|
||||
description: 'Store WiFi passwords, alarm codes, API keys, and procedures in one place. Role-based visibility. Reveal on demand.',
|
||||
preview: <MiniOps />,
|
||||
},
|
||||
{
|
||||
Icon: IcoChart,
|
||||
Icon: IcoDoc,
|
||||
title: 'Dashboard',
|
||||
description: 'At a glance status on membership, open tasks, payment issues, and recent activity. Know what needs attention.',
|
||||
preview: <MiniStats />,
|
||||
description: 'At a glance status on membership, open tasks, payment issues, and recent activity. Know what needs attention when you log in.',
|
||||
preview: <MiniDashboard />,
|
||||
},
|
||||
].map((feature) => (
|
||||
<div key={feature.title} className="bg-card border border-border rounded-lg p-5 hover:border-primary/30 transition group">
|
||||
@@ -406,32 +439,31 @@ export default function LandingPage() {
|
||||
{/* How it works */}
|
||||
<section className="py-16 md:py-24 bg-muted/30 border-y border-border">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6">
|
||||
<div className="text-center mb-12">
|
||||
<p className="font-mono text-[10px] tracking-widest text-primary uppercase mb-3">How it works</p>
|
||||
<div className="mb-12">
|
||||
<p className="font-mono text-[10px] tracking-widest text-primary uppercase mb-3">Setup</p>
|
||||
<h2 className="font-sans text-2xl md:text-3xl font-bold text-foreground mb-4">
|
||||
From chaos to clarity in under an hour
|
||||
From nothing to running in under an hour
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{
|
||||
step: '01',
|
||||
title: 'Import your members',
|
||||
description: 'Paste from a spreadsheet or add them one by one. We handle the messy data.',
|
||||
description: 'Paste from a spreadsheet or add them one by one. Set tiers, statuses, and contact info.',
|
||||
},
|
||||
{
|
||||
step: '02',
|
||||
title: 'Connect payments',
|
||||
description: 'Link your PayPal or Zeffy account. Transactions import automatically.',
|
||||
description: 'Link your PayPal or Zeffy account. Transactions import and sit waiting to be matched to members.',
|
||||
},
|
||||
{
|
||||
step: '03',
|
||||
title: 'Invite your board',
|
||||
description: 'Add admins and treasurers. Everyone sees what they need to see.',
|
||||
title: 'Seed your ops docs',
|
||||
description: 'Drop in your SOPs, credentials, and area leads. The whole board has one place to look things up.',
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.step} className="text-center md:text-left">
|
||||
<div key={item.step}>
|
||||
<p className="font-mono text-3xl font-bold text-primary/30 mb-3">{item.step}</p>
|
||||
<h3 className="font-sans text-lg font-semibold text-foreground mb-2">{item.title}</h3>
|
||||
<p className="font-sans text-sm text-muted-foreground leading-relaxed">{item.description}</p>
|
||||
@@ -441,36 +473,23 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonial */}
|
||||
<section className="py-16 md:py-24">
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 text-center">
|
||||
<blockquote className="font-sans text-xl md:text-2xl text-foreground leading-relaxed mb-6">
|
||||
"We went from a shared Google Sheet that nobody updated to actually knowing who was current on dues. Game changer for our monthly board meetings."
|
||||
</blockquote>
|
||||
<div>
|
||||
<p className="font-sans text-sm font-medium text-foreground">Marcus Webb</p>
|
||||
<p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase">Treasurer, FreeGeek Chicago</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-16 md:py-24 bg-sidebar border-t border-sidebar-border">
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 text-center">
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6">
|
||||
<h2 className="font-sans text-2xl md:text-3xl font-bold text-white mb-4 text-balance">
|
||||
Your space deserves better than spreadsheets
|
||||
</h2>
|
||||
<p className="font-sans text-base text-sidebar-foreground mb-8 max-w-xl mx-auto">
|
||||
Free for spaces under 25 members. No credit card required. Set up in minutes.
|
||||
<p className="font-sans text-base text-sidebar-foreground mb-8 max-w-xl">
|
||||
A tool built specifically for volunteer-run makerspaces and hackerspaces. Not adapted from something else.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||
<Link href="/signup" className="inline-flex items-center justify-center gap-2 bg-primary text-white font-sans text-sm px-8 py-3 rounded hover:bg-primary/90 transition">
|
||||
Start Free
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<Link href="/signup" className="inline-flex items-center gap-2 bg-primary text-white font-sans text-sm px-8 py-3 rounded hover:bg-primary/90 transition">
|
||||
Get Started
|
||||
<IcoArrow className="w-4 h-4" />
|
||||
</Link>
|
||||
<a href="mailto:[email protected]" className="inline-flex items-center justify-center gap-2 border border-sidebar-border text-sidebar-foreground font-sans text-sm px-8 py-3 rounded hover:border-primary/50 hover:text-white transition">
|
||||
Contact Us
|
||||
</a>
|
||||
<Link href="/login" className="inline-flex items-center gap-2 border border-sidebar-border text-sidebar-foreground font-sans text-sm px-8 py-3 rounded hover:border-primary/50 hover:text-white transition">
|
||||
Log in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -478,22 +497,14 @@ export default function LandingPage() {
|
||||
{/* Footer */}
|
||||
<footer className="bg-sidebar border-t border-sidebar-border">
|
||||
<div className="max-w-6xl mx-auto px-4 md:px-6 py-8">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<IcoTerminal className="w-4 h-4 text-primary" />
|
||||
<span className="font-mono text-xs text-sidebar-foreground">hackerspace.sh</span>
|
||||
</div>
|
||||
<p className="font-mono text-[10px] text-sidebar-foreground/50">
|
||||
Built for makerspaces, hackerspaces, and community workshops.
|
||||
Management software for makerspaces and community workshops.
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="mailto:[email protected]" className="font-mono text-[10px] text-sidebar-foreground hover:text-white transition">
|
||||
Contact
|
||||
</a>
|
||||
<a href="https://github.com/hackerspace-sh" className="font-mono text-[10px] text-sidebar-foreground hover:text-white transition">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user