Skip to content

Commit 25d10e9

Browse files
mvkaranmvkaran
committed
feat: add "Get Started" navigation link and create corresponding page with core badge workflows
1 parent bd9d574 commit 25d10e9

File tree

2 files changed

+119
-1
lines changed

2 files changed

+119
-1
lines changed

‎src/components/navigation.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Github, Home, BookOpen, Plus, Settings, Grid3x3, Terminal } from 'lucide-react'
1+
import { Home, BookOpen, Plus, Settings, Grid3x3, Terminal, Power } from 'lucide-react'
22
import { Button } from '@/components/ui/button'
33
import { ThemeToggle } from '@/components/theme-toggle'
44
import { GitHubRepoBadge } from '@/components/github-repo-badge'
@@ -30,6 +30,13 @@ export function Navigation() {
3030
<Home className="h-5 w-5" />
3131
<span>Home</span>
3232
</a>
33+
<a
34+
href="/get-started"
35+
className="flex items-center space-x-2.5 px-5 py-3 rounded font-mono text-base uppercase tracking-[0.12em] text-foreground hover:text-primary hover:bg-primary/10 transition-all duration-150 border border-transparent hover:border-primary/50 hover:shadow-[0_0_15px_rgba(95,237,131,0.3)]"
36+
>
37+
<Power className="h-5 w-5" />
38+
<span>Get Started</span>
39+
</a>
3340
<a
3441
href="/about-badge"
3542
className="flex items-center space-x-2.5 px-5 py-3 rounded font-mono text-base uppercase tracking-[0.12em] text-foreground hover:text-primary hover:bg-primary/10 transition-all duration-150 border border-transparent hover:border-primary/50 hover:shadow-[0_0_15px_rgba(95,237,131,0.3)]"

‎src/pages/get-started.astro‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
import Layout from '@/layouts/Layout.astro'
3+
import ListingHero from '@/components/listing-hero.astro'
4+
5+
interface Task {
6+
id: string
7+
label: string
8+
summary: string
9+
steps: string[]
10+
}
11+
12+
const tasks: Task[] = [
13+
{
14+
id: 'power-on',
15+
label: 'Power On',
16+
summary: 'Boot MonaOS and reach the launcher.',
17+
steps: [
18+
'Press RESET on the back of your badger ONLY once. MonaOS runs the Universe 25 intro animation.',
19+
'Press the HOME button on the back of your badger ONLY once. This starts the app launcher.'
20+
],
21+
},
22+
{
23+
id: 'sleep',
24+
label: 'Sleep Mode',
25+
summary: 'Drop the badge into low-power standby.',
26+
steps: [
27+
'Press and hold the RESET button on the back for roughly three seconds.',
28+
'Wake up by pressing RESET again only once or pressing any front button.',
29+
],
30+
},
31+
{
32+
id: 'power-off',
33+
label: 'Power Off',
34+
summary: 'Shutdown the badge completely.',
35+
steps: [
36+
'Simultaneously press and hold UP, DOWN, and RESET button for about three seconds until the display and LEDs turn off.',
37+
'Verify by pressing any front button to ensure the badge does not power on.',
38+
],
39+
},
40+
{
41+
id: 'charging',
42+
label: 'Charge Battery',
43+
summary: 'Top up a Li-Po using the onboard charger.',
44+
steps: [
45+
'Connect USB-C power (5 V). The onboard charger auto-detects the pack.',
46+
'Watch the rear CHG LED which lights up when charging.',
47+
],
48+
},
49+
{
50+
id: 'usb-disk',
51+
label: 'USB Disk Mode',
52+
summary: 'Expose `BADGER` mass storage for quick file copies.',
53+
steps: [
54+
'Double-press RESET quickly. The RP2350 bootloader mounts as `BADGER`.',
55+
'Copy apps or assets onto the drive. Keep filenames ≤31 characters for FAT.',
56+
'Eject the drive from your OS, then tap RESET once to reboot into MonaOS.',
57+
],
58+
},
59+
{
60+
id: 'flash',
61+
label: 'Flash Firmware',
62+
summary: 'Load the latest MonaOS UF2 build.',
63+
steps: [
64+
'Download the newest `.uf2` release to your computer from here: https://github.com/badger/home/releases',
65+
'Hold HOME, tap RESET once, then release HOME when the `RP2350` drive appears.',
66+
'Drag the UF2 onto the `RP2350` volume. The badge reboots automatically after flashing.',
67+
],
68+
},
69+
]
70+
71+
---
72+
73+
<Layout title="Get Started" description="Core badge workflows, distilled.">
74+
<ListingHero
75+
eyebrow="// BADGE OPS"
76+
title="Get"
77+
titleHighlight="Started"
78+
description="Follow the core badge procedures without flipping through the README. Each flow is tuned for bench-side execution."
79+
/>
80+
81+
<section class="container pb-20 space-y-12">
82+
<div class="grid gap-8 md:grid-cols-2">
83+
{tasks.map((task: Task) => (
84+
<article id={task.id} class="rounded-lg border border-border/40 bg-layer-mid/60 p-8 shadow-sm transition-colors hover:border-primary/60 scroll-mt-32 md:scroll-mt-40">
85+
<div class="space-y-3 pb-4">
86+
<a
87+
href={`#${task.id}`}
88+
class="font-mono text-base md:text-lg uppercase tracking-[0.18em] text-primary inline-flex items-center gap-2 transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60"
89+
aria-label={`Permalink to ${task.label}`}
90+
>
91+
<span>{task.label}</span>
92+
</a>
93+
<p class="font-sans text-lg md:text-xl text-muted-foreground/90 leading-relaxed">{task.summary}</p>
94+
</div>
95+
<div class="space-y-5">
96+
<ol class="space-y-4 font-sans text-lg md:text-xl leading-8 text-foreground/90">
97+
{task.steps.map((step: string, index: number) => (
98+
<li class="flex gap-3">
99+
<span class="font-mono text-sm md:text-base uppercase tracking-[0.14em] text-primary/70 pt-1">
100+
{String(index + 1).padStart(2, '0')}
101+
</span>
102+
<span class="text-base md:text-lg leading-8">{step}</span>
103+
</li>
104+
))}
105+
</ol>
106+
</div>
107+
</article>
108+
))}
109+
</div>
110+
</section>
111+
</Layout>

0 commit comments

Comments
 (0)