Updates.

2026-01-26 23:27:16 -08:00
parent e559603c49
commit 2299066caf
13 changed files with 771 additions and 171 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -39,6 +39,7 @@ The deploy script performs:
 - **Color Scheme:** "blowfish" with light default appearance
 - **Layout:** Custom homepage layout with basic header
 - **Custom Assets:** Wild Cloud logo and custom CSS in `/assets/`
+- Uses tailwindcss for styling

 ### Content Structure
 - **Main Pages:** Homepage, About, Get Started, Contribute
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
 /*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */
@layer properties;
 #zen-mode-button {
@@ -421,6 +421,9 @@ body.zen-mode-enable {
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
@@ -460,7 +463,7 @@ body.zen-mode-enable {
    padding: 0;
    margin: -1px;
    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
@@ -491,9 +494,6 @@ body.zen-mode-enable {
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
@@ -515,9 +515,6 @@ body.zen-mode-enable {
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
@@ -720,7 +717,7 @@ body.zen-mode-enable {
    }
    :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
-      border-top-width: 1;
+      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
@@ -805,7 +802,7 @@ body.zen-mode-enable {
      font-weight: 600;
      font-family: inherit;
      color: var(--tw-prose-kbd);
-      box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
+      box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
      font-size: 0.9rem;
      border-radius: 0.25rem;
      padding-top: 0.1875em;
@@ -951,7 +948,7 @@ body.zen-mode-enable {
    --tw-prose-quote-borders: rgba(var(--color-primary-200), 1);
    --tw-prose-captions: rgba(var(--color-neutral-500), 1);
    --tw-prose-kbd: oklch(21% 0.034 264.665);
-    --tw-prose-kbd-shadows: NaN NaN NaN;
+    --tw-prose-kbd-shadows: color-mix(in oklab, oklch(21% 0.034 264.665) 10%, transparent);
    --tw-prose-code: rgba(var(--color-secondary-700), 1);
    --tw-prose-pre-code: rgba(var(--color-neutral-700), 1);
    --tw-prose-pre-bg: rgba(var(--color-neutral-50), 1);
@@ -969,7 +966,7 @@ body.zen-mode-enable {
    --tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1);
    --tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
    --tw-prose-invert-kbd: #fff;
-    --tw-prose-invert-kbd-shadows: 255 255 255;
+    --tw-prose-invert-kbd-shadows: rgb(255 255 255 / 10%);
    --tw-prose-invert-code: rgba(var(--color-secondary-400), 1);
    --tw-prose-invert-pre-code: rgba(var(--color-neutral-200), 1);
    --tw-prose-invert-pre-bg: rgba(var(--color-neutral-700), 1);
@@ -1317,9 +1314,6 @@ body.zen-mode-enable {
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
-  .h-1 {
-    height: calc(var(--spacing) * 1);
-  }
  .h-1\/2 {
    height: calc(1/2 * 100%);
  }
@@ -1512,9 +1506,6 @@ body.zen-mode-enable {
  .shrink-0 {
    flex-shrink: 0;
  }
-  .flex-grow {
-    flex-grow: 1;
-  }
  .grow {
    flex-grow: 1;
  }
@@ -1527,10 +1518,6 @@ body.zen-mode-enable {
  .border-collapse {
    border-collapse: collapse;
  }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1543,10 +1530,6 @@ body.zen-mode-enable {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1604,6 +1587,9 @@ body.zen-mode-enable {
  .appearance-none {
    appearance: none;
  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
  .flex-col {
    flex-direction: column;
  }
@@ -1874,9 +1860,6 @@ body.zen-mode-enable {
  .bg-black {
    background-color: #000;
  }
-  .bg-cyan-100 {
-    background-color: oklch(95.6% 0.045 203.388);
-  }
  .bg-gray-100 {
    background-color: oklch(96.7% 0.003 264.542);
  }
@@ -1901,9 +1884,6 @@ body.zen-mode-enable {
  .bg-neutral-300 {
    background-color: rgba(var(--color-neutral-300), 1);
  }
-  .bg-neutral-500 {
-    background-color: rgba(var(--color-neutral-500), 1);
-  }
  .bg-neutral-500\/50 {
    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-500), 1), 1) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
@@ -1934,15 +1914,9 @@ body.zen-mode-enable {
  .bg-transparent {
    background-color: transparent;
  }
-  .bg-violet-100 {
-    background-color: oklch(94.3% 0.029 294.588);
-  }
  .bg-violet-200 {
    background-color: oklch(89.4% 0.057 293.283);
  }
-  .bg-violet-300 {
-    background-color: oklch(81.1% 0.111 293.571);
-  }
  .bg-white {
    background-color: #fff;
  }
@@ -2010,15 +1984,9 @@ body.zen-mode-enable {
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
@@ -2118,12 +2086,6 @@ body.zen-mode-enable {
  .pt-\[6px\] {
    padding-top: 6px;
  }
-  .pt-\[7px\] {
-    padding-top: 7px;
-  }
-  .pt-\[8px\] {
-    padding-top: 8px;
-  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
@@ -2291,15 +2253,9 @@ body.zen-mode-enable {
  .text-gray-500 {
    color: oklch(55.1% 0.027 264.364);
  }
-  .text-gray-900 {
-    color: oklch(21% 0.034 264.665);
-  }
  .text-green-400 {
    color: oklch(79.2% 0.209 151.711);
  }
-  .text-green-900 {
-    color: oklch(39.3% 0.095 152.535);
-  }
  .text-green-950 {
    color: oklch(26.6% 0.065 152.934);
  }
@@ -2348,54 +2304,24 @@ body.zen-mode-enable {
  .text-primary-800 {
    color: rgba(var(--color-primary-800), 1);
  }
-  .text-sky-700 {
-    color: oklch(50% 0.134 242.749);
-  }
-  .text-sky-800 {
-    color: oklch(44.3% 0.11 240.79);
-  }
  .text-sky-900 {
    color: oklch(39.1% 0.09 240.876);
  }
  .text-transparent {
    color: transparent;
  }
-  .text-violet-50 {
-    color: oklch(96.9% 0.016 293.756);
-  }
-  .text-violet-100 {
-    color: oklch(94.3% 0.029 294.588);
-  }
  .text-violet-800 {
    color: oklch(43.2% 0.232 292.759);
  }
  .text-violet-900 {
    color: oklch(38% 0.189 293.745);
  }
-  .text-violet-950 {
-    color: oklch(28.3% 0.141 291.089);
-  }
  .text-white {
    color: #fff;
  }
-  .text-yellow-50 {
-    color: oklch(98.7% 0.026 102.212);
-  }
-  .text-yellow-100 {
-    color: oklch(97.3% 0.071 103.193);
-  }
  .text-yellow-200 {
    color: oklch(94.5% 0.129 101.54);
  }
-  .text-yellow-300 {
-    color: oklch(90.5% 0.182 98.111);
-  }
-  .text-yellow-400 {
-    color: oklch(85.2% 0.199 91.936);
-  }
-  .text-yellow-800 {
-    color: oklch(47.6% 0.114 61.907);
-  }
  .capitalize {
    text-transform: capitalize;
  }
@@ -2529,12 +2455,8 @@ body.zen-mode-enable {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
@@ -2764,7 +2686,6 @@ body.zen-mode-enable {
  }
  .after\:content-\[\'\'\] {
    &::after {
-      content: var(--tw-content);
      --tw-content: '';
      content: var(--tw-content);
    }
@@ -3622,26 +3543,11 @@ body.zen-mode-enable {
      }
    }
  }
-  .dark\:bg-cyan-900 {
-    &:is(.dark *) {
-      background-color: oklch(39.8% 0.07 227.392);
-    }
-  }
  .dark\:bg-green-700 {
    &:is(.dark *) {
      background-color: oklch(52.7% 0.154 150.069);
    }
  }
-  .dark\:bg-green-800 {
-    &:is(.dark *) {
-      background-color: oklch(44.8% 0.119 151.328);
-    }
-  }
-  .dark\:bg-green-900 {
-    &:is(.dark *) {
-      background-color: oklch(39.3% 0.095 152.535);
-    }
-  }
  .dark\:bg-neutral-400 {
    &:is(.dark *) {
      background-color: rgba(var(--color-neutral-400), 1);
@@ -3703,16 +3609,6 @@ body.zen-mode-enable {
      background-color: oklch(68.5% 0.169 237.323);
    }
  }
-  .dark\:bg-sky-600 {
-    &:is(.dark *) {
-      background-color: oklch(58.8% 0.158 241.966);
-    }
-  }
-  .dark\:bg-sky-700 {
-    &:is(.dark *) {
-      background-color: oklch(50% 0.134 242.749);
-    }
-  }
  .dark\:bg-violet-700 {
    &:is(.dark *) {
      background-color: oklch(49.1% 0.27 292.581);
@@ -3747,11 +3643,6 @@ body.zen-mode-enable {
      color: oklch(96.2% 0.044 156.743);
    }
  }
-  .dark\:text-green-300 {
-    &:is(.dark *) {
-      color: oklch(87.1% 0.15 154.449);
-    }
-  }
  .dark\:text-neutral {
    &:is(.dark *) {
      color: rgba(var(--color-neutral), 1);
@@ -3807,16 +3698,6 @@ body.zen-mode-enable {
      color: oklch(97.7% 0.013 236.62);
    }
  }
-  .dark\:text-sky-100 {
-    &:is(.dark *) {
-      color: oklch(95.1% 0.026 236.824);
-    }
-  }
-  .dark\:text-sky-200 {
-    &:is(.dark *) {
-      color: oklch(90.1% 0.058 230.902);
-    }
-  }
  .dark\:text-violet-100 {
    &:is(.dark *) {
      color: oklch(94.3% 0.029 294.588);
@@ -3827,11 +3708,6 @@ body.zen-mode-enable {
      color: oklch(89.4% 0.057 293.283);
    }
  }
-  .dark\:text-violet-300 {
-    &:is(.dark *) {
-      color: oklch(81.1% 0.111 293.571);
-    }
-  }
  .dark\:text-white {
    &:is(.dark *) {
      color: #fff;
@@ -4056,9 +3932,7 @@ button, [role="button"] {
  z-index: 10;
  width: calc(var(--spacing) * 20);
  cursor: pointer;
-  overflow: hidden;
  text-overflow: ellipsis;
-  white-space: nowrap;
  overflow: hidden;
  border-top-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
@@ -4203,7 +4077,7 @@ pre {
  text-decoration: none !important;
 }
@layer base {
-  [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+  input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
    appearance: none;
    background-color: #fff;
    border-color: oklch(55.1% 0.027 264.364);
@@ -4257,7 +4131,7 @@ pre {
    padding-right: 2.5rem;
    print-color-adjust: exact;
  }
-  [multiple],[size]:where(select:not([size="1"])) {
+  select:where([multiple]),select:where([size]:not([size="1"])) {
    background-image: initial;
    background-position: initial;
    background-repeat: unset;
@@ -4265,7 +4139,7 @@ pre {
    padding-right: 0.75rem;
    print-color-adjust: unset;
  }
-  [type='checkbox'],[type='radio'] {
+  input:where([type='checkbox']),input:where([type='radio']) {
    appearance: none;
    padding: 0;
    print-color-adjust: exact;
@@ -4282,13 +4156,13 @@ pre {
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
  }
-  [type='checkbox'] {
+  input:where([type='checkbox']) {
    border-radius: 0px;
  }
-  [type='radio'] {
+  input:where([type='radio']) {
    border-radius: 100%;
  }
-  [type='checkbox']:focus,[type='radio']:focus {
+  input:where([type='checkbox']):focus,input:where([type='radio']):focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -4299,30 +4173,30 @@ pre {
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
-  [type='checkbox']:checked,[type='radio']:checked {
+  input:where([type='checkbox']):checked,input:where([type='radio']):checked {
    border-color: transparent;
    background-color: currentColor;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
-  [type='checkbox']:checked {
+  input:where([type='checkbox']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
-  [type='radio']:checked {
+  input:where([type='radio']):checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    @media (forced-colors: active) {
      appearance: auto;
    }
  }
-  [type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+  input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
    border-color: transparent;
    background-color: currentColor;
  }
-  [type='checkbox']:indeterminate {
+  input:where([type='checkbox']):indeterminate {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
    border-color: transparent;
    background-color: currentColor;
@@ -4333,11 +4207,11 @@ pre {
      appearance: auto;
    }
  }
-  [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+  input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
    border-color: transparent;
    background-color: currentColor;
  }
-  [type='file'] {
+  input:where([type='file']) {
    background: unset;
    border-color: inherit;
    border-width: 0;
@@ -4346,7 +4220,7 @@ pre {
    font-size: unset;
    line-height: inherit;
  }
-  [type='file']:focus {
+  input:where([type='file']):focus {
    outline: 1px solid ButtonText;
    outline: 1px auto -webkit-focus-ring-color;
  }
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -6,3 +6,268 @@
 html {
    font-family: font;
 } */
+
+/* Grid layout for get-started hardware section */
+.grid {
+    display: grid;
+}
+
+.grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gap-4 {
+    gap: 1rem;
+}
+
+/* Responsive: stack on mobile */
+@media (max-width: 768px) {
+    .grid-cols-3 {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* App directory - filter buttons */
+.app-filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: center;
+    margin: 1.5rem 0;
+    padding: 1rem;
+    background: var(--color-neutral-100);
+    border-radius: 0.75rem;
+}
+
+.dark .app-filters {
+    background: var(--color-neutral-800);
+}
+
+.filter-btn {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border: 1px solid var(--color-neutral-300);
+    border-radius: 1rem;
+    background: white;
+    color: var(--color-neutral-700);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.dark .filter-btn {
+    border-color: var(--color-neutral-600);
+    background: var(--color-neutral-700);
+    color: var(--color-neutral-300);
+}
+
+.filter-btn:hover {
+    background: var(--color-neutral-100);
+    border-color: var(--color-neutral-400);
+}
+
+.dark .filter-btn:hover {
+    background: var(--color-neutral-600);
+    border-color: var(--color-neutral-500);
+}
+
+.filter-btn.active {
+    background: #2563eb !important;
+    border-color: #2563eb !important;
+    color: #ffffff !important;
+    text-decoration: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important;
+}
+
+.dark .filter-btn.active {
+    background: #3b82f6 !important;
+    border-color: #3b82f6 !important;
+    color: #ffffff !important;
+    text-decoration: none !important;
+    border-bottom: none !important;
+    box-shadow: none !important;
+}
+
+.filter-divider {
+    width: 1px;
+    height: 1.5rem;
+    background: var(--color-neutral-300);
+    margin: 0 0.25rem;
+    align-self: center;
+}
+
+.dark .filter-divider {
+    background: var(--color-neutral-600);
+}
+
+.app-count {
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--color-neutral-500);
+    margin-top: 1rem;
+}
+
+/* App directory - icon grid */
+.app-showcase {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    padding: 1.5rem;
+    background: var(--color-neutral-50);
+    border-radius: 0.75rem;
+    margin: 1rem 0;
+    /* Scrollable container - shows ~3 rows */
+    max-height: 420px;
+    overflow-y: auto;
+    align-content: flex-start;
+}
+
+/* Custom scrollbar styling */
+.app-showcase::-webkit-scrollbar {
+    width: 8px;
+}
+
+.app-showcase::-webkit-scrollbar-track {
+    background: var(--color-neutral-200);
+    border-radius: 4px;
+}
+
+.app-showcase::-webkit-scrollbar-thumb {
+    background: var(--color-neutral-400);
+    border-radius: 4px;
+}
+
+.app-showcase::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-500);
+}
+
+.dark .app-showcase::-webkit-scrollbar-track {
+    background: var(--color-neutral-700);
+}
+
+.dark .app-showcase::-webkit-scrollbar-thumb {
+    background: var(--color-neutral-500);
+}
+
+.dark .app-showcase::-webkit-scrollbar-thumb:hover {
+    background: var(--color-neutral-400);
+}
+
+.dark .app-showcase {
+    background: var(--color-neutral-800);
+}
+
+.app-icon {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 110px;
+    padding: 1rem 0.75rem;
+    border-radius: 0.75rem;
+    text-decoration: none;
+    transition: all 0.15s ease;
+    background: white;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.dark .app-icon {
+    background: #374151;
+    border-color: #4b5563;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+}
+
+.app-icon:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
+    border-color: #93c5fd;
+}
+
+.dark .app-icon:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
+    border-color: #3b82f6;
+}
+
+.app-icon img {
+    width: 56px;
+    height: 56px;
+    object-fit: contain;
+    margin-bottom: 0.5rem;
+}
+
+.app-icon span {
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-align: center;
+    color: #374151;
+    line-height: 1.2;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dark .app-icon span {
+    color: #d1d5db;
+}
+
+/* Infrastructure icons - slightly smaller */
+.app-showcase-infra {
+    gap: 0.75rem;
+    padding: 1rem;
+}
+
+.app-showcase-infra .app-icon {
+    width: 75px;
+    padding: 0.5rem;
+}
+
+.app-showcase-infra .app-icon img {
+    width: 32px;
+    height: 32px;
+}
+
+.app-showcase-infra .app-icon span {
+    font-size: 0.6rem;
+}
+
+/* Coming Soon diagonal corner ribbon */
+.app-icon.coming-soon {
+    position: relative;
+    overflow: hidden;
+}
+
+.app-icon.coming-soon::before {
+    content: 'SOON';
+    position: absolute;
+    top: 8px;
+    right: -32px;
+    width: 100px;
+    padding: 4px 0;
+    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+    color: white;
+    font-size: 0.5rem;
+    font-weight: 800;
+    text-align: center;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    transform: rotate(45deg);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    z-index: 10;
+}
+
+.dark .app-icon.coming-soon::before {
+    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
+}
+
+.app-icon.coming-soon img {
+    opacity: 0.6;
+    filter: grayscale(20%);
+}
+
+.app-icon.coming-soon:hover img {
+    opacity: 1;
+    filter: grayscale(0%);
+}
--- a/content/_index.md
+++ b/content/_index.md
@@ -6,11 +6,11 @@ description: Wild Cloud is an Open Source, self-hosted, sovereign cloud platform
 ![Your Wild Cloud Logo](wild-cloud.svg)


-Wild clouds are Open Source, self-hosted, independent platforms for hosting your applications and services. Your wild cloud is your own private data center where you can host your own applications.
+Wild clouds are open source community-managed infrastructure for hosting applications and services. A wild cloud is a private data center run by communities for communities.

-You can have your own wild cloud for the price of a smart phone and an Internet connection. You can scale your wild cloud as large as you like.
+Wild clouds are made of multiple computers connected in a cluster running on your own network. Once set up, applications for your community can be deployed to it with a few clicks. We make the most popular and high-quality apps available in our app store, but communities can host any software they'd like for their members. A simple wild cloud can be had for the price of a smart phone and can scale to support communities of all sizes.

-While not a consumer product (yet), Wild Cloud aims to make self-hosting accessible to every individual and organization. Wild Cloud is a non-profit, community-driven project, educational in nature, designed to empower society to directly control its own data and services.
+Wild Cloud is an open source, forever free, non-profit, community-driven project, educational in nature, designed to empower society to directly control its own data and services.

 This is a wild cloud:

@@ -22,12 +22,394 @@ This is also a wild cloud:

 ## Apps

-In addition to helping you set up and manager your cloud, Wild Cloud gives you a set of Open Source applications you can run on your cloud.
+Deploy applications to your Wild Cloud with just a few clicks. We curate an ever-growing collection of open-source, high-quality applications most used by communities.
+
+<div class="app-filters">
+  <button class="filter-btn active" data-filter="all">All</button>
+  <button class="filter-btn" data-filter="available">Available Now</button>
+  <button class="filter-btn" data-filter="coming-soon">Coming Soon</button>
+  <span class="filter-divider"></span>
+  <button class="filter-btn" data-filter="ai">AI</button>
+  <button class="filter-btn" data-filter="civic">Civic</button>
+  <button class="filter-btn" data-filter="collaboration">Collaboration</button>
+  <button class="filter-btn" data-filter="coop">Coop</button>
+  <button class="filter-btn" data-filter="crm">CRM</button>
+  <button class="filter-btn" data-filter="democracy">Democracy</button>
+  <button class="filter-btn" data-filter="dev">Dev</button>
+  <button class="filter-btn" data-filter="events">Events</button>
+  <button class="filter-btn" data-filter="finance">Finance</button>
+  <button class="filter-btn" data-filter="forms">Forms</button>
+  <button class="filter-btn" data-filter="infra">Infrastructure</button>
+  <button class="filter-btn" data-filter="knowledge">Knowledge</button>
+  <button class="filter-btn" data-filter="learning">Learning</button>
+  <button class="filter-btn" data-filter="maps">Maps</button>
+  <button class="filter-btn" data-filter="media">Media</button>
+  <button class="filter-btn" data-filter="nocode">No-Code</button>
+  <button class="filter-btn" data-filter="projects">Projects</button>
+  <button class="filter-btn" data-filter="publishing">Publishing</button>
+  <button class="filter-btn" data-filter="sharing">Sharing</button>
+  <button class="filter-btn" data-filter="social">Social</button>
+</div>
+
+<div class="app-showcase" id="app-grid">
+  <a href="https://akaunting.com/" class="app-icon coming-soon" data-category="finance" data-status="coming-soon" title="Accounting software">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/akaunting.svg" alt="Akaunting">
+    <span>Akaunting</span>
+  </a>
+  <a href="https://alaveteli.org/" class="app-icon coming-soon" data-category="civic" data-status="coming-soon" title="FOI request platform">
+    <img src="https://avatars.githubusercontent.com/u/79887" alt="Alaveteli">
+    <span>Alaveteli</span>
+  </a>
+  <a href="https://baserow.io/" class="app-icon coming-soon" data-category="nocode" data-status="coming-soon" title="No-code database platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/baserow.svg" alt="Baserow">
+    <span>Baserow</span>
+  </a>
+  <a href="https://www.belenios.org/" class="app-icon coming-soon" data-category="democracy" data-status="coming-soon" title="Verifiable voting system">
+    <img src="https://avatars.githubusercontent.com/u/56809296" alt="Belenios">
+    <span>Belenios</span>
+  </a>
+  <a href="https://bigbluebutton.org/" class="app-icon coming-soon" data-category="collaboration learning" data-status="coming-soon" title="Web conferencing for learning">
+    <img src="https://avatars.githubusercontent.com/u/1908859" alt="BigBlueButton">
+    <span>BigBlueButton</span>
+  </a>
+  <a href="https://www.bookstackapp.com/" class="app-icon coming-soon" data-category="knowledge" data-status="coming-soon" title="Self-hosted documentation">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/bookstack.svg" alt="BookStack">
+    <span>BookStack</span>
+  </a>
+  <a href="https://bookwyrm.social/" class="app-icon coming-soon" data-category="social" data-status="coming-soon" title="Federated book social network">
+    <img src="https://raw.githubusercontent.com/bookwyrm-social/bookwyrm/main/bookwyrm/static/images/logo.png" alt="BookWyrm">
+    <span>BookWyrm</span>
+  </a>
+  <a href="https://chamilo.org/" class="app-icon coming-soon" data-category="learning" data-status="coming-soon" title="E-learning platform">
+    <img src="https://avatars.githubusercontent.com/u/5037740" alt="Chamilo">
+    <span>Chamilo</span>
+  </a>
+  <a href="https://civicrm.org/" class="app-icon coming-soon" data-category="crm" data-status="coming-soon" title="Nonprofit CRM">
+    <img src="https://avatars.githubusercontent.com/u/112711" alt="CiviCRM">
+    <span>CiviCRM</span>
+  </a>
+  <a href="https://consulproject.org/" class="app-icon coming-soon" data-category="democracy" data-status="coming-soon" title="Citizen participation platform">
+    <img src="https://avatars.githubusercontent.com/u/7923311" alt="Consul">
+    <span>Consul</span>
+  </a>
+  <a href="https://cryptpad.org/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Encrypted collaborative docs">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/cryptpad.svg" alt="CryptPad">
+    <span>CryptPad</span>
+  </a>
+  <a href="https://decidim.org/" class="app-icon" data-category="democracy" data-status="available" title="Participatory democracy platform">
+    <img src="https://raw.githubusercontent.com/decidim/decidim/develop/logo.svg" alt="Decidim">
+    <span>Decidim</span>
+  </a>
+  <a href="https://www.discourse.org/" class="app-icon" data-category="collaboration" data-status="available" title="Community discussion platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/discourse.svg" alt="Discourse">
+    <span>Discourse</span>
+  </a>
+  <a href="https://etherpad.org/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Real-time collaborative editor">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/etherpad.svg" alt="Etherpad">
+    <span>Etherpad</span>
+  </a>
+  <a href="https://eventyay.com/" class="app-icon coming-soon" data-category="events" data-status="coming-soon" title="Event management platform">
+    <img src="https://avatars.githubusercontent.com/u/7248242" alt="Eventyay">
+    <span>Eventyay</span>
+  </a>
+  <a href="https://www.firefly-iii.org/" class="app-icon coming-soon" data-category="finance" data-status="coming-soon" title="Personal finance manager">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/firefly-iii.svg" alt="Firefly III">
+    <span>Firefly III</span>
+  </a>
+  <a href="https://fixmystreet.org/" class="app-icon coming-soon" data-category="civic" data-status="coming-soon" title="Report local problems">
+    <img src="https://avatars.githubusercontent.com/u/79887" alt="FixMyStreet">
+    <span>FixMyStreet</span>
+  </a>
+  <a href="https://formbricks.com/" class="app-icon coming-soon" data-category="forms" data-status="coming-soon" title="Open source survey platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/formbricks.svg" alt="Formbricks">
+    <span>Formbricks</span>
+  </a>
+  <a href="https://gancio.org/" class="app-icon coming-soon" data-category="social events" data-status="coming-soon" title="Shared agenda for communities">
+    <img src="https://gancio.org/logo.svg" alt="Gancio">
+    <span>Gancio</span>
+  </a>
+  <a href="https://ghost.org/" class="app-icon" data-category="publishing" data-status="available" title="Publishing platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/ghost.png" alt="Ghost">
+    <span>Ghost</span>
+  </a>
+  <a href="https://about.gitea.com/" class="app-icon" data-category="dev" data-status="available" title="Self-hosted Git service">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/gitea.svg" alt="Gitea">
+    <span>Gitea</span>
+  </a>
+  <a href="https://www.gnucash.org/" class="app-icon coming-soon" data-category="finance" data-status="coming-soon" title="Double-entry accounting">
+    <img src="https://avatars.githubusercontent.com/u/8027736" alt="GnuCash">
+    <span>GnuCash</span>
+  </a>
+  <a href="https://heliosvoting.org/" class="app-icon coming-soon" data-category="democracy" data-status="coming-soon" title="Verifiable online voting">
+    <img src="https://avatars.githubusercontent.com/u/303693" alt="Helios">
+    <span>Helios Voting</span>
+  </a>
+  <a href="https://immich.app/" class="app-icon" data-category="media" data-status="available" title="Photo & video backup">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/immich.svg" alt="Immich">
+    <span>Immich</span>
+  </a>
+  <a href="https://getindico.io/" class="app-icon coming-soon" data-category="events" data-status="coming-soon" title="Event management from CERN">
+    <img src="https://avatars.githubusercontent.com/u/3920772" alt="Indico">
+    <span>Indico</span>
+  </a>
+  <a href="https://jitsi.org/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Video conferencing">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/jitsi.svg" alt="Jitsi">
+    <span>Jitsi</span>
+  </a>
+  <a href="https://karrot.world/" class="app-icon coming-soon" data-category="sharing coop" data-status="coming-soon" title="Grassroots coordination">
+    <img src="https://avatars.githubusercontent.com/u/18049498" alt="Karrot">
+    <span>Karrot</span>
+  </a>
+  <a href="https://www.keila.io/" class="app-icon" data-category="crm" data-status="available" title="Email marketing">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/keila.svg" alt="Keila">
+    <span>Keila</span>
+  </a>
+  <a href="https://leihs.app/" class="app-icon coming-soon" data-category="sharing" data-status="coming-soon" title="Equipment lending system">
+    <img src="https://avatars.githubusercontent.com/u/1154614" alt="Leihs">
+    <span>Leihs</span>
+  </a>
+  <a href="https://join-lemmy.org/" class="app-icon" data-category="social" data-status="available" title="Link aggregator for the fediverse">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/lemmy.svg" alt="Lemmy">
+    <span>Lemmy</span>
+  </a>
+  <a href="https://librebooking.org/" class="app-icon coming-soon" data-category="sharing" data-status="coming-soon" title="Resource scheduling">
+    <img src="https://avatars.githubusercontent.com/u/89961553" alt="LibreBooking">
+    <span>LibreBooking</span>
+  </a>
+  <a href="https://www.limesurvey.org/" class="app-icon coming-soon" data-category="forms" data-status="coming-soon" title="Professional survey platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/limesurvey.svg" alt="LimeSurvey">
+    <span>LimeSurvey</span>
+  </a>
+  <a href="https://liquidfeedback.com/" class="app-icon coming-soon" data-category="democracy" data-status="coming-soon" title="Liquid democracy platform">
+    <img src="https://avatars.githubusercontent.com/u/3580174" alt="LiquidFeedback">
+    <span>LiquidFeedback</span>
+  </a>
+  <a href="https://listmonk.app/" class="app-icon" data-category="crm" data-status="available" title="Newsletter manager">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/listmonk.svg" alt="Listmonk">
+    <span>Listmonk</span>
+  </a>
+  <a href="https://www.loomio.com/" class="app-icon" data-category="democracy" data-status="available" title="Group decision-making">
+    <img src="https://www.loomio.com/brand/logo_gold.svg" alt="Loomio">
+    <span>Loomio</span>
+  </a>
+  <a href="https://mapcomplete.org/" class="app-icon coming-soon" data-category="maps" data-status="coming-soon" title="OSM themed maps">
+    <img src="https://avatars.githubusercontent.com/u/66927796" alt="MapComplete">
+    <span>MapComplete</span>
+  </a>
+  <a href="https://joinmastodon.org/" class="app-icon" data-category="social" data-status="available" title="Decentralized social network">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/mastodon.svg" alt="Mastodon">
+    <span>Mastodon</span>
+  </a>
+  <a href="https://matrix.org/" class="app-icon" data-category="social collaboration" data-status="available" title="Secure real-time messaging">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/matrix.svg" alt="Matrix">
+    <span>Matrix</span>
+  </a>
+  <a href="https://mattermost.com/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Self-hosted Slack alternative">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/mattermost.svg" alt="Mattermost">
+    <span>Mattermost</span>
+  </a>
+  <a href="https://www.mautic.org/" class="app-icon coming-soon" data-category="crm" data-status="coming-soon" title="Marketing automation">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/mautic.svg" alt="Mautic">
+    <span>Mautic</span>
+  </a>
+  <a href="https://www.mediawiki.org/" class="app-icon coming-soon" data-category="knowledge" data-status="coming-soon" title="Wikipedia's software">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/mediawiki.svg" alt="MediaWiki">
+    <span>MediaWiki</span>
+  </a>
+  <a href="https://www.memcached.org/" class="app-icon" data-category="infra" data-status="available" title="Distributed memory caching">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/memcached.svg" alt="Memcached">
+    <span>Memcached</span>
+  </a>
+  <a href="https://joinmobilizon.org/" class="app-icon coming-soon" data-category="social events" data-status="coming-soon" title="Federated event organizing">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/mobilizon.svg" alt="Mobilizon">
+    <span>Mobilizon</span>
+  </a>
+  <a href="https://moodle.org/" class="app-icon coming-soon" data-category="learning" data-status="coming-soon" title="Learning management system">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/moodle.svg" alt="Moodle">
+    <span>Moodle</span>
+  </a>
+  <a href="https://www.mysql.com/" class="app-icon" data-category="infra" data-status="available" title="Relational database">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/mysql.svg" alt="MySQL">
+    <span>MySQL</span>
+  </a>
+  <a href="https://nextcloud.com/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Complete collaboration platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nextcloud.svg" alt="Nextcloud">
+    <span>Nextcloud</span>
+  </a>
+  <a href="https://nocodb.com/" class="app-icon coming-soon" data-category="nocode" data-status="coming-soon" title="Airtable alternative">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nocodb.svg" alt="NocoDB">
+    <span>NocoDB</span>
+  </a>
+  <a href="https://www.odoo.com/" class="app-icon coming-soon" data-category="crm" data-status="coming-soon" title="Business suite">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/odoo.svg" alt="Odoo">
+    <span>Odoo</span>
+  </a>
+  <a href="https://ohmyform.com/" class="app-icon coming-soon" data-category="forms" data-status="coming-soon" title="Self-hosted form builder">
+    <img src="https://avatars.githubusercontent.com/u/51406676" alt="OhMyForm">
+    <span>OhMyForm</span>
+  </a>
+  <a href="https://opencollective.com/" class="app-icon coming-soon" data-category="finance coop" data-status="coming-soon" title="Transparent fundraising">
+    <img src="https://avatars.githubusercontent.com/u/17980918" alt="Open Collective">
+    <span>Open Collective</span>
+  </a>
+  <a href="https://openedx.org/" class="app-icon coming-soon" data-category="learning" data-status="coming-soon" title="Online learning at scale">
+    <img src="https://avatars.githubusercontent.com/u/3170503" alt="Open edX">
+    <span>Open edX</span>
+  </a>
+  <a href="https://openfoodnetwork.org/" class="app-icon coming-soon" data-category="coop" data-status="coming-soon" title="Local food network">
+    <img src="https://avatars.githubusercontent.com/u/2291587" alt="Open Food Network">
+    <span>Open Food</span>
+  </a>
+  <a href="https://openwebui.com/" class="app-icon" data-category="ai" data-status="available" title="ChatGPT-like interface for local LLMs">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/open-webui.svg" alt="Open WebUI">
+    <span>Open WebUI</span>
+  </a>
+  <a href="https://www.openproject.org/" class="app-icon" data-category="projects" data-status="available" title="Project management">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/openproject.svg" alt="OpenProject">
+    <span>OpenProject</span>
+  </a>
+  <a href="https://getoutline.com/" class="app-icon coming-soon" data-category="knowledge" data-status="coming-soon" title="Team knowledge base">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/outline.svg" alt="Outline">
+    <span>Outline</span>
+  </a>
+  <a href="https://joinpeertube.org/" class="app-icon coming-soon" data-category="social media" data-status="coming-soon" title="Decentralized video hosting">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/peertube.svg" alt="PeerTube">
+    <span>PeerTube</span>
+  </a>
+  <a href="https://pixelfed.org/" class="app-icon coming-soon" data-category="social media" data-status="coming-soon" title="Federated image sharing">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pixelfed.svg" alt="Pixelfed">
+    <span>Pixelfed</span>
+  </a>
+  <a href="https://pol.is/" class="app-icon coming-soon" data-category="democracy" data-status="coming-soon" title="AI-powered opinion gathering">
+    <img src="https://avatars.githubusercontent.com/u/4134512" alt="Pol.is">
+    <span>Pol.is</span>
+  </a>
+  <a href="https://www.postgresql.org/" class="app-icon" data-category="infra" data-status="available" title="Advanced relational database">
+    <img src="https://www.postgresql.org/media/img/about/press/elephant.png" alt="PostgreSQL">
+    <span>PostgreSQL</span>
+  </a>
+  <a href="https://pretix.eu/" class="app-icon coming-soon" data-category="events" data-status="coming-soon" title="Ticket sales & registration">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/pretix.svg" alt="Pretix">
+    <span>Pretix</span>
+  </a>
+  <a href="https://redis.io/" class="app-icon" data-category="infra" data-status="available" title="In-memory data store">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/redis.svg" alt="Redis">
+    <span>Redis</span>
+  </a>
+  <a href="https://resonate.coop/" class="app-icon coming-soon" data-category="coop media" data-status="coming-soon" title="Music streaming coop">
+    <img src="https://avatars.githubusercontent.com/u/14469932" alt="Resonate">
+    <span>Resonate</span>
+  </a>
+  <a href="https://rocket.chat/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Team collaboration platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/rocket-chat.svg" alt="Rocket.Chat">
+    <span>Rocket.Chat</span>
+  </a>
+  <a href="https://taiga.io/" class="app-icon coming-soon" data-category="projects" data-status="coming-soon" title="Agile project management">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/taiga.svg" alt="Taiga">
+    <span>Taiga</span>
+  </a>
+  <a href="https://terrastories.app/" class="app-icon coming-soon" data-category="maps" data-status="coming-soon" title="Geostorytelling">
+    <img src="https://avatars.githubusercontent.com/u/42573682" alt="Terrastories">
+    <span>Terrastories</span>
+  </a>
+  <a href="https://typebot.io/" class="app-icon coming-soon" data-category="forms" data-status="coming-soon" title="Conversational form builder">
+    <img src="https://avatars.githubusercontent.com/u/76883539" alt="Typebot">
+    <span>Typebot</span>
+  </a>
+  <a href="https://umap.openstreetmap.fr/" class="app-icon coming-soon" data-category="maps" data-status="coming-soon" title="Custom maps with OSM">
+    <img src="https://avatars.githubusercontent.com/u/14034779" alt="uMap">
+    <span>uMap</span>
+  </a>
+  <a href="https://www.ushahidi.com/" class="app-icon coming-soon" data-category="maps civic" data-status="coming-soon" title="Crowdsourced mapping">
+    <img src="https://avatars.githubusercontent.com/u/49912" alt="Ushahidi">
+    <span>Ushahidi</span>
+  </a>
+  <a href="https://docs.vllm.ai/" class="app-icon" data-category="ai" data-status="available" title="High-performance LLM inference server">
+    <img src="https://unpkg.com/@lobehub/icons-static-png@latest/dark/vllm.png" alt="vLLM">
+    <span>vLLM</span>
+  </a>
+  <a href="https://wekan.github.io/" class="app-icon coming-soon" data-category="projects" data-status="coming-soon" title="Open source Kanban board">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/wekan.svg" alt="Wekan">
+    <span>Wekan</span>
+  </a>
+  <a href="https://js.wiki/" class="app-icon coming-soon" data-category="knowledge" data-status="coming-soon" title="Modern wiki platform">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/wikijs.svg" alt="Wiki.js">
+    <span>Wiki.js</span>
+  </a>
+  <a href="https://writefreely.org/" class="app-icon coming-soon" data-category="social publishing" data-status="coming-soon" title="Minimalist federated blogging">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/writefreely.svg" alt="WriteFreely">
+    <span>WriteFreely</span>
+  </a>
+  <a href="https://citizens.is/" class="app-icon coming-soon" data-category="democracy" data-status="coming-soon" title="Citizen engagement platform">
+    <img src="https://avatars.githubusercontent.com/u/6688058" alt="Your Priorities">
+    <span>Your Priorities</span>
+  </a>
+  <a href="https://zulip.com/" class="app-icon coming-soon" data-category="collaboration" data-status="coming-soon" title="Threaded team chat">
+    <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/zulip.svg" alt="Zulip">
+    <span>Zulip</span>
+  </a>
+</div>
+
+<p class="app-count"><span id="visible-count">0</span> apps shown</p>
+
+<div style="text-align: center; margin-top: 1rem;">
+  <a href="https://git.civilsociety.dev/wild-cloud/wild-directory" target="_blank" class="filter-btn" style="display: inline-block; text-decoration: none;">View App Directory on Gitea</a>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const filterBtns = document.querySelectorAll('.filter-btn');
+  const appGrid = document.getElementById('app-grid');
+  if (!appGrid) return;
+  const apps = appGrid.querySelectorAll('.app-icon');
+  const countEl = document.getElementById('visible-count');
+
+  function updateCount() {
+    const visible = appGrid.querySelectorAll('.app-icon:not([style*="display: none"])').length;
+    countEl.textContent = visible;
+  }
+
+  filterBtns.forEach(btn => {
+    if (!btn.dataset.filter) return;
+    btn.addEventListener('click', function() {
+      const filter = this.dataset.filter;
+      
+      // Update active state
+      filterBtns.forEach(b => {
+        if (b.dataset.filter) b.classList.remove('active');
+      });
+      this.classList.add('active');
+      
+      // Filter apps
+      apps.forEach(app => {
+        const category = app.dataset.category || '';
+        const status = app.dataset.status || '';
+        
+        let show = false;
+        if (filter === 'all') {
+          show = true;
+        } else if (filter === 'available') {
+          show = status === 'available';
+        } else if (filter === 'coming-soon') {
+          show = status === 'coming-soon';
+        } else {
+          show = category.includes(filter);
+        }
+        
+        app.style.display = show ? '' : 'none';
+      });
+      
+      updateCount();
+    });
+  });
+  
+  // Initial count
+  updateCount();
+});
+</script>

 ## Get started

-We're in the early days of the Wild Cloud project, yet we already have two functional "Proof of concept" clouds. In fact, all Wild Cloud and CSTF sites and services are running on our PoC wild cloud. The concept works. If you are an experienced developer, you can check out the software and start building your own wild cloud. Our next milestone is to continue ironing out the software and educational materials so that we can invite early adopters to start building their own wild clouds.
+We're in the early days of the Wild Cloud project, yet we already have two functional "Proof of concept" clouds. In fact, all Wild Cloud and [CSTF](https://civilsociety.dev) sites and services are running on our PoC wild cloud. The concept works. If you are an experienced developer, you can check out the software and start building your own wild cloud. We are actively seeking active communites to pilot new wild cloud installations.

-If you would like to get us to this next milestone, join our [developer community](https://git.civilsociety.dev/CSTF/wild-cloud).
-
-If you would like to help the project move forward in other ways, check out our parent org at [Civil Society Tech Foundation](https://civilsociety.dev) and consider supporting us with a donation or connecting us with interested partners.
+If you would like to get us to this next milestone, join our [developer community](https://git.civilsociety.dev/wild-cloud/wild-cloud).
--- a/content/contribute/index.md
+++ b/content/contribute/index.md
@@ -16,11 +16,11 @@ The [Civil Society Technology Foundation (CSTF)](https://civilsociety.dev) provi

 ## Hack

-If you're ready to jump into development, join our project at https://git.civilsociety.dev/wild-cloud. In addition to source code, you'll find a list of our current [issues](https://git.civilsociety.dev/wild-cloud/issues). We accept community pull requests related to any of these issues. 
+If you're ready to jump into development, join our project at https://git.civilsociety.dev/wild-cloud. In addition to source code, you'll find a list of our current [issues](https://git.civilsociety.dev/wild-cloud/wild-cloud/issues). We accept community pull requests related to any of these issues. 

 ## Propose

-You can propose new issues in the forum.
+You can propose new features in the [forum](https://forum.civilsociety.dev/c/wild-cloud/).

 ## Broader engagement

--- a/content/get-started/flint2.jpg
+++ b/content/get-started/flint2.jpg
--- a/content/get-started/index.md
+++ b/content/get-started/index.md
@@ -3,18 +3,96 @@ title: 🌩️ Get started
 date: 2026-01-04
 ---

+## Prepare a domain name
+
+Your wild cloud applications will be accessible on the internet through a domain name (like `mydomain.org`). When you install public applications on your wild cloud they will, by default, be made available on a subdomain of your domain (like `discourse.mydomain.org`).
+
+If you don't already have a domain name, we recommend registering one with [Cloudflare](https://www.cloudflare.com/). Currently, Wild Cloud requires Cloudflare features for automatic management of domain configuration and security certificates. You __can__ have your domain registered with any registrar, but you will need to use Cloudflare's DNS services for your domain. This is free and easy to set up.
+
+For now, just make sure you have a domain name ready and that your DNS is managed by Cloudflare. You will configure it in Wild Central later.
+
+## Gather your hardware
+
+To set up your wild cloud, you will need some basic hardware. Here are the minimum requirements:
+
+<div class="grid grid-cols-3 gap-4">
+  <div>
+    {{< figure
+        src="./flint2.jpg"
+        title="LAN Router"
+        caption="Your LAN router connects your local network to the internet."
+    >}}
+  </div>
+  <div>
+    {{< figure
+        src="./switch.jpg"
+        class=""
+        title="A network switch"
+        caption="A network switch is used to connect multiple devices on your local network."
+    >}}
+  </div>
+  <div>
+    {{< figure
+        src="./wild-central.jpg"
+        title="Wild Central"
+        caption="Wild Central is the heart of your wild cloud, running on an inexpensive computer like a Raspberry Pi."
+    >}}
+  </div>
+  <div>
+    {{< figure
+        src="./micro-pc.jpg"
+        title="Inexpensive computer"
+        caption="You'll need at least six additional computers (three control nodes and three worker nodes)."
+    >}}
+  </div>
+  <div>
+    {{< figure
+        src="./ups.jpg"
+        title="An uninterruptible power supply (UPS)"
+        caption="A UPS helps keep your wild cloud running during short power outages."
+    >}}
+  </div>
+</div>
+
 ## Set up Wild Central

- Set up your Wild Central
-  - Machine
-  - Wild Central softare install
+The heart of your wild cloud is _Wild Central_, an inexpensive computer that runs on your local network that helps you set up and manage your wild cloud. Wild Central can be set up on an inexpensive computer (around $100USD), like a Raspberry Pi. My Wild Central looks like this:
+
+![Wild Central](./wild-central.jpg)
+
+Wild Central does several things for you:
+
+- Helps you set up one or more wild clouds on your network.
+- Handles internal networking for your cloud. Wild Central allows computers on your network to find the internal apps deployed on your cloud.
+- Handles external networking for your cloud. Traffic will be routed from the internet, through your LAN router, to Wild Central, and then to the appropriate app on your cloud.
+- Allows you to install apps from the Wild Directory to your cloud with a few clicks.
+- Monitors the health of your cloud and notifies you if something goes wrong.
+
+After you set up Wild Central, it runs on your network without a display or keyboard. You access it on your network through any web browser. Although you can install Wild Cloud on any computer, it is best to have a standalone device as Wild Central needs to be always on.
+
+Setting up Wild Central:
+
+- Prepare a machine for Wild Central. This can be a Raspberry Pi or any other inexpensive computer running Ubuntu Linux.
+- Download and install the Wild Central software on your machine.
+- Access Wild Central through your web browser.
+
+## Set up your networking
+
+Once Wild Central is set up, you need to instruct your LAN router (the device that connects your local network to the internet) to use Wild Central in two ways:
+
+- Forward incoming web traffic (HTTP and HTTPS) to Wild Central. This allows external users to access the public apps deployed on your wild cloud.
+- Use Wild Central as the DNS server for your network. This allows devices on your network to find the internal apps deployed on your wild cloud.
+
+![LAN router-Flint 2](./flint2.jpg)
+
+![Network switch](./switch.jpg)

 ## Set up your cloud

+![Nodes](./micro-pc.jpg)
+
+
 - Create your Wild Cloud instance
-  - Domain setup
-    - Get your domain name
-    - Wild Central DNS
  - Set up your control nodes
  - Set up your worker nodes
  - Install services
--- a/content/get-started/micro-pc.jpg
+++ b/content/get-started/micro-pc.jpg
--- a/content/get-started/switch.jpg
+++ b/content/get-started/switch.jpg
--- a/content/get-started/ups.jpg
+++ b/content/get-started/ups.jpg
--- a/content/get-started/wild-central.jpg
+++ b/content/get-started/wild-central.jpg
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <article class="h-full max-w-full flex flex-col items-center justify-center text-center">
+  <article class="h-full max-w-full flex flex-col">
    <header>
      {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
        {{ partial "breadcrumbs.html" . }}
--- a/layouts/partials/home/custom.html
+++ b/layouts/partials/home/custom.html
@@ -1,4 +1,4 @@
-<article class="h-full max-w-full flex flex-col items-center justify-center text-center prose dark:prose-invert">
+<article class="h-full max-w-full flex flex-col items-center justify-center prose dark:prose-invert">
  <section class="mt-6 prose dark:prose-invert">{{ .Content }}</section>
 </article>
 <section>