feat: bundle desktop skills

website/app/globals.css

@@ -220,6 +220,7 @@ a {
 .studio-section,
 .pipeline-section,
 .control-section,
+.opensource-section,
 .deploy-section,
 .final-section {
   position: relative;
@@ -972,6 +973,7 @@ a {
 .studio-section,
 .pipeline-section,
 .control-section,
+.opensource-section,
 .deploy-section,
 .final-section {
   padding-block: 72px;
@@ -994,6 +996,7 @@ a {
 .studio-copy span,
 .pipeline-copy span,
 .control-panel span,
+.opensource-copy span,
 .ops-copy span,
 .console-preview-copy > span,
 .factory-copy span,
@@ -1011,6 +1014,7 @@ a {
 .studio-copy h2,
 .pipeline-copy h2,
 .control-panel h2,
+.opensource-copy h2,
 .ops-copy h2,
 .console-preview-copy h2,
 .factory-copy h2,
@@ -1141,6 +1145,7 @@ a {
 .pipeline-steps article,
 .pipeline-output,
 .control-grid > div,
+.github-card,
 .ops-card,
 .console-preview-stats > div,
 .preview-window,
@@ -1156,6 +1161,7 @@ a {
 .pipeline-steps article:hover,
 .pipeline-output:hover,
 .control-grid > div:hover,
+.github-card:hover,
 .ops-card:hover,
 .console-preview-stats > div:hover,
 .preview-window:hover,
@@ -1818,6 +1824,71 @@ a {
   font-weight: 700;
 }
 
+.opensource-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: clamp(28px, 4vw, 56px);
+  align-items: stretch;
+  border: 1px solid var(--line);
+  border-radius: 32px;
+  background:
+    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--acid) 18%, transparent), transparent 34%),
+    linear-gradient(135deg, var(--panel-strong), color-mix(in srgb, var(--surface) 86%, transparent));
+  padding: clamp(36px, 5vw, 62px);
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
+}
+
+.opensource-copy {
+  display: grid;
+  align-content: center;
+  gap: 18px;
+}
+
+.opensource-copy p,
+.github-card p {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.72;
+}
+
+.opensource-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding-top: 6px;
+}
+
+.github-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.github-card {
+  min-height: 142px;
+  display: grid;
+  align-content: center;
+  gap: 10px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: var(--surface);
+  padding: 20px;
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
+}
+
+.github-card span {
+  color: var(--faint);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 11px;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.github-card strong {
+  color: var(--text);
+  font-size: 22px;
+  letter-spacing: -0.025em;
+}
+
 .deploy-section {
   display: grid;
   grid-template-columns: minmax(0, 0.92fr) minmax(min(280px, 100%), 0.72fr);
@@ -1923,6 +1994,7 @@ a {
   .studio-section,
   .control-section,
   .factory-section,
+  .opensource-section,
   .deploy-section {
     grid-template-columns: 1fr;
   }
@@ -1954,6 +2026,7 @@ a {
   .console-preview-section,
   .factory-section,
   .control-section,
+  .opensource-section,
   .deploy-section {
     gap: 28px;
     margin-block: 24px;
@@ -1973,6 +2046,7 @@ a {
   .studio-section,
   .control-section,
   .factory-section,
+  .opensource-section,
   .deploy-section,
   .final-section {
     width: min(100% - 28px, 1180px);
@@ -2060,6 +2134,7 @@ a {
   .pipeline-copy,
   .pipeline-board,
   .control-section,
+  .opensource-section,
   .ops-copy,
   .ops-grid,
   .console-preview-copy,
@@ -2108,6 +2183,7 @@ a {
   .control-section,
   .pipeline-section,
   .console-preview-section,
+  .opensource-section,
   .deploy-section {
     gap: 22px;
     margin-block: 18px;
@@ -2263,6 +2339,7 @@ a {
 .studio-section,
 .pipeline-section,
 .control-section,
+.opensource-section,
 .deploy-section,
 .final-section {
   padding-block: clamp(58px, 7vw, 84px);
@@ -2275,6 +2352,7 @@ a {
 .pipeline-steps article,
 .pipeline-output,
 .control-grid > div,
+.github-card,
 .ops-card,
 .console-preview-stats > div,
 .preview-window,
@@ -2289,6 +2367,7 @@ a {
 .pipeline-steps article:hover,
 .pipeline-output:hover,
 .control-grid > div:hover,
+.github-card:hover,
 .ops-card:hover,
 .console-preview-stats > div:hover,
 .preview-window:hover,
@@ -2304,6 +2383,7 @@ a {
 .console-preview-board,
 .factory-section,
 .control-section,
+.opensource-section,
 .deploy-section,
 .final-section {
   border-color: color-mix(in srgb, var(--line) 82%, transparent);
@@ -3073,4 +3153,3 @@ a {
     will-change: auto;
   }
 }
-