Spaces:
Running
Running
File size: 3,351 Bytes
518343a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import { Crown, ExternalLink, Globe, Workflow, Zap } from 'lucide-react';
export const ECOSYSTEM_APPS = [
{
href: '/conduit/',
label: 'Conduit — Reverse ETL',
description:
'Visual no-code Reverse ETL — map SZL data to Salesforce, HubSpot, Slack, Sheets, Notion, and more',
icon: Workflow,
color: '#22c55e',
},
{
href: '/imperium/',
label: 'IMPERIUM',
description:
'Infrastructure command center — resource orchestration, governance, and security perimeter',
icon: Crown,
color: '#d4a054',
},
{
href: '/governance/lexicon',
label: 'LEXICON — License Intelligence',
description:
'Operator-curated license catalog backing the inference governance gate',
icon: Zap,
color: '#c9b787',
},
{
href: '/stephen-site/',
label: 'Stephen Site',
description: 'Personal portfolio and thought-leadership platform for executive communications',
icon: Globe,
color: 'var(--gi-accent-blue)',
},
];
export function EcosystemAppsGrid() {
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<h2
className="text-xs font-bold tracking-widest uppercase"
style={{ color: 'var(--color-fg-muted)' }}
>
Ecosystem Apps
</h2>
<span className="text-[10px] font-mono" style={{ color: 'var(--color-fg-muted)' }}>
{ECOSYSTEM_APPS.length} apps
</span>
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
{ECOSYSTEM_APPS.map((app) => {
const Icon = app.icon;
return (
<a
key={app.href}
href={app.href}
target="_blank"
rel="noopener noreferrer"
className="relative flex flex-col gap-3 p-4 rounded-xl text-left transition-all hover:scale-[1.02] no-underline"
style={{
backgroundColor: 'var(--color-surface-base)',
border: '1px solid var(--color-surface-border)',
}}
>
<div className="flex items-center justify-between">
<div
className="w-9 h-9 rounded-lg flex items-center justify-center"
style={{
backgroundColor: `color-mix(in srgb, ${app.color} 12%, transparent)`,
border: `1px solid color-mix(in srgb, ${app.color} 25%, transparent)`,
}}
>
<Icon className="w-4 h-4" style={{ color: app.color }} />
</div>
<ExternalLink
className="w-3 h-3"
style={{ color: 'var(--color-fg-muted)', opacity: 0.5 }}
/>
</div>
<div>
<div
className="text-sm font-bold mb-0.5"
style={{ color: 'var(--color-fg-primary)' }}
>
{app.label}
</div>
<div
className="text-[10px] leading-relaxed"
style={{ color: 'var(--color-fg-muted)' }}
>
{app.description}
</div>
</div>
</a>
);
})}
</div>
</div>
);
}
|