+
+
+ + Pick an issue +
++ Filter by skill and find something that excites you. +
+
+
+
+
+
+ )
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..1ae69f4
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,35 @@
+import SupporterSprite from '@/components/SupporterSprite'
+import { supporters } from '@/data/supporters'
+
+export default function Footer() {
+ return (
+
+ )
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..96b9b80
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,41 @@
+
+export default function Hero() {
+ return (
+
+
+
+
+ {ALL_SKILLS.map((skill) => {
+ const meta = SKILL_META[skill]
+ const on = filters.skill === skill
+ return (
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+ {active && (
+
+ )}
+
+
+ Start contributing
+
+
+
+ Start contributing
to{' '}
+
+ ₿itcoin.
+
+
+
+ + Find your first issue across the entire BTCPay ecosystem. + Developer, writer, designer, or marketer. There's a spot for you. +
+ + +
+
+ )
+ }
+
+ if (issues.length === 0) {
+ return (
+
+
+ )
+ }
+
+ return (
+ 🔍
+No issues found
++ Try adjusting your filters or search query. +
+
+
+ )
+}
diff --git a/src/components/IssueLabel.tsx b/src/components/IssueLabel.tsx
new file mode 100644
index 0000000..2eb6676
--- /dev/null
+++ b/src/components/IssueLabel.tsx
@@ -0,0 +1,19 @@
+import type { IssueLabel as IssueLabelType } from '@/types'
+
+/** Shared GitHub-style label chip used in IssueCard and IssueModal. */
+export default function IssueLabel({ label }: { label: IssueLabelType }) {
+ // Validate hex color from GitHub API before using in inline styles
+ const hex = /^[0-9a-f]{6}$/i.test(label.color) ? label.color : '888888'
+ return (
+
+ {label.name}
+
+ )
+}
diff --git a/src/components/IssueModal.tsx b/src/components/IssueModal.tsx
new file mode 100644
index 0000000..7717317
--- /dev/null
+++ b/src/components/IssueModal.tsx
@@ -0,0 +1,115 @@
+import { ExternalLink, MessageCircle, Clock, GitBranch } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import IssueLabel from '@/components/IssueLabel'
+import type { Issue } from '@/types'
+import { timeAgo } from '@/lib/utils'
+import { SKILL_META } from '@/lib/skill-map'
+
+interface IssueModalProps {
+ issue: Issue | null
+ onClose: () => void
+}
+
+export default function IssueModal({ issue, onClose }: IssueModalProps) {
+ return (
+
+ )
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..d9c1f2e
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,76 @@
+import ThemeToggle from '@/components/ThemeToggle'
+
+/** BTCPay logo mark — paths extracted from directory.btcpayserver.org logo SVG */
+function BTCPayMark({ className }: { className?: string }) {
+ return (
+
+ )
+}
+
+export default function Navbar() {
+ return (
+
+ {visible.map((issue, i) => (
+
+
+ {hasMore && (
+
+
+ ))}
+
+
+
+ )}
+
+ + Showing {visible.length} of {issues.length} issues +
+
+
+ {/* Logo — same mark as directory.btcpayserver.org, "Contribute" label */}
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+const DOC_VIDEO: VideoMeta = {
+ id: 'Z78ZbPcsc3g',
+ meta: 'Documentary · 42 min',
+ title: 'My Trust in You Is Broken',
+ ariaLabel: 'My Trust in You Is Broken — BTCPay Server documentary',
+}
+
+const DEV_VIDEO: VideoMeta = {
+ id: 'dW9eSgA_dUg',
+ meta: 'Dev setup walkthrough',
+ title: 'BTCPay Server Development Setup',
+ ariaLabel: 'BTCPay Server development environment setup tutorial',
+ start: 408,
+}
+
+function ToolRow({ href, icon, label, meta }: {
+ href?: string
+ icon: React.ReactNode
+ label: React.ReactNode
+ meta?: React.ReactNode
+}) {
+ const base = 'flex items-center gap-3 rounded-2xl border border-border/60 bg-card/50 p-3'
+ const inner = (
+ <>
+ {icon}
+ {label}
+ {meta ?? (href && )}
+
+ )
+ if (href) {
+ return (
+ {inner}
+ )
+ }
+ return {inner}
+}
+
+function InlineLinks({ links }: { links: { href: string; label: string }[] }) {
+ return (
+
+ {links.map((link, i) => (
+
+ {i > 0 && ·}
+ {link.label}
+
+ ))}
+
+ )
+}
+
+function DevToolRows() {
+ return (
+
+
+ )
+}
+
+const STEPS = [
+ {
+ label: 'Documentary',
+ title: 'Watch the documentary',
+ description: 'Understand the mission and meet the contributors who built BTCPay Server. A 42-minute film that shows why this project matters.',
+ },
+ {
+ label: 'Dev Setup',
+ title: 'Deploy a local dev environment',
+ description: '',
+ },
+ {
+ label: 'Community',
+ title: 'Join the community',
+ description: 'Introduce yourself, ask questions, and connect with contributors who have shipped real features. Everyone started exactly where you are.',
+ },
+ {
+ label: 'Find Issue',
+ title: 'Pick an issue and ship it',
+ description: 'Filter by your skill and grab a good-first-issue that fits your experience level.',
+ },
+]
+
+function StepVisual({ index }: { index: number }) {
+ if (index === 0) return
+
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+function StepRow({ step, index }: { step: typeof STEPS[number]; index: number }) {
+ const { ref, visible } = useScrollReveal()
+ const flip = index % 2 !== 0
+
+ if (index === 1) {
+ return (
+ + When submitting a PR +
+
+
+ )
+ }
+
+ return (
+
+
+
+
+
+
+ + {step.title} +
+
+
+
+
+ )
+}
+
+export default function ResourcesSection() {
+ return (
+
+
+
+
+
+
+ + {step.title} +
+ {step.description && ( +{step.description}
+ )} + {index === 3 && ( + + )} +
+
+
+
+
+ + How it works +
++ Your path to first contribution +
++ Four steps from curious to your first merged PR. +
+
+ {STEPS.map((step, i) => (
+
+
+