From cbe7c563cd1e4490c43baddb3be8a72a8dfc1d17 Mon Sep 17 00:00:00 2001
From: Pavel Sviderski <me@psviderski.name>
Date: Mon, 20 Jan 2025 13:40:58 +1000
Subject: [PATCH] add value proposition section: Cloud-like experience you
 control

---
 site/index.html | 391 +++++++++++++++++++-----------------------------
 1 file changed, 153 insertions(+), 238 deletions(-)

diff --git a/site/index.html b/site/index.html
index 3e71cc09..53e82039 100644
--- a/site/index.html
+++ b/site/index.html
@@ -95,7 +95,7 @@
                     </div>
                 </div>
 
-                <div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 md:pb-20 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
+                <div class="max-w-3xl mx-auto px-4 sm:px-6 flex justify-center pb-12 relative before:absolute before:-top-12 before:w-96 before:h-96 before:bg-zinc-900 before:opacity-[.15] before:rounded-full before:blur-3xl before:-z-10">
                     <div class="coding w-full bg-zinc-800 rounded-lg border border-zinc-700/50 shadow-2xl">
                         <!-- Title bar -->
                         <div class="pl-4 pt-4 flex items-center">
@@ -126,270 +126,185 @@
             </div>
         </section>
 
-        <!-- Features -->
+        <!-- Value proposition -->
         <section class="relative bg-zinc-50">
             <div class="py-12 md:py-20">
                 <div class="max-w-6xl mx-auto px-4 sm:px-6">
-                    <div class="max-w-3xl mx-auto text-center pb-12">
-                        <h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">Go further than
-                            the speed of thought</h2>
-                        <p class="text-lg text-zinc-500">AI reads and understands your designs, and with nothing more
-                            than a single line of feedback, perform complex actions autonomously.</p>
+                    <div class="max-w-3xl mx-auto text-center pb-12 md:pb-20">
+                        <h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
+                            Cloud-like experience you control
+                        </h2>
+                        <p class="text-lg text-zinc-500">
+                            Keep the Docker workflows you love while optimizing infrastructure costs
+                        </p>
                     </div>
-                    <div x-data="{ tab: '1' }">
-                        <!-- Tabs buttons -->
-                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
-                            <button
-                                    :class="tab !== '1' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
-                                    class="text-left px-4 py-5 border border-transparent rounded"
-                                    @click.prevent="tab = '1'"
-                            >
-                                <div class="flex items-center justify-between mb-1">
-                                    <div class="font-inter-tight font-semibold text-zinc-900">AI Effects</div>
-                                    <svg :class="tab !== '1' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
-                                         xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-                                        <path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
-                                    </svg>
-                                </div>
-                                <div class="text-sm text-zinc-500">Visually structure your designs and structure them
-                                    easily.
-                                </div>
-                            </button>
-                            <button
-                                    :class="tab !== '2' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
-                                    class="text-left px-4 py-5 border border-transparent rounded"
-                                    @click.prevent="tab = '2'"
-                            >
-                                <div class="flex items-center justify-between mb-1">
-                                    <div class="font-inter-tight font-semibold text-zinc-900">Creative Mode</div>
-                                    <svg :class="tab !== '2' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
-                                         xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-                                        <path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
-                                    </svg>
-                                </div>
-                                <div class="text-sm text-zinc-500">Visually structure your designs and structure them
-                                    easily.
-                                </div>
-                            </button>
-                            <button
-                                    :class="tab !== '3' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
-                                    class="text-left px-4 py-5 border border-transparent rounded"
-                                    @click.prevent="tab = '3'"
-                            >
-                                <div class="flex items-center justify-between mb-1">
-                                    <div class="font-inter-tight font-semibold text-zinc-900">Realistic Images</div>
-                                    <svg :class="tab !== '3' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
-                                         xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-                                        <path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
-                                    </svg>
-                                </div>
-                                <div class="text-sm text-zinc-500">Visually structure your designs and structure them
-                                    easily.
-                                </div>
-                            </button>
-                            <button
-                                    :class="tab !== '4' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
-                                    class="text-left px-4 py-5 border border-transparent rounded"
-                                    @click.prevent="tab = '4'"
-                            >
-                                <div class="flex items-center justify-between mb-1">
-                                    <div class="font-inter-tight font-semibold text-zinc-900">Powerful Plugins</div>
-                                    <svg :class="tab !== '4' ? 'hidden' : ''" class="fill-zinc-400 shrink-0 ml-2"
-                                         xmlns="http://www.w3.org/2000/svg" width="10" height="10">
-                                        <path d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"/>
-                                    </svg>
-                                </div>
-                                <div class="text-sm text-zinc-500">Visually structure your designs and structure them
-                                    easily.
-                                </div>
-                            </button>
-                        </div>
-                        <!-- Tabs items -->
-                        <div class="relative lg:max-w-none [mask-image:linear-gradient(white_0%,white_calc(100%-40px),_transparent_calc(100%-1px))] -mx-6">
-                            <div class="relative flex flex-col pt-12 md:pt-20 mx-6">
-                                <!-- Item 1 -->
-                                <div
-                                        class="w-full text-center"
-                                        x-show="tab === '1'"
-                                        x-transition:enter="transition ease-in-out duration-700 transform order-first"
-                                        x-transition:enter-start="opacity-0 -translate-y-4"
-                                        x-transition:enter-end="opacity-100 translate-y-0"
-                                        x-transition:leave="transition ease-in-out duration-300 transform absolute"
-                                        x-transition:leave-start="opacity-100 translate-y-0"
-                                        x-transition:leave-end="opacity-0 translate-y-4"
-                                >
-                                    <div class="inline-flex relative align-top">
-                                        <img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
-                                             src="./images/feature-01.png" width="600" height="360" alt="Feature 01"/>
-                                        <img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
-                                             src="./images/feature-illustration.png" width="273" height="288"
-                                             alt="Illustration" aria-hidden="true">
-                                    </div>
-                                </div>
-                                <!-- Item 2 -->
-                                <div
-                                        class="w-full text-center"
-                                        x-show="tab === '2'"
-                                        x-transition:enter="transition ease-in-out duration-700 transform order-first"
-                                        x-transition:enter-start="opacity-0 -translate-y-4"
-                                        x-transition:enter-end="opacity-100 translate-y-0"
-                                        x-transition:leave="transition ease-in-out duration-300 transform absolute"
-                                        x-transition:leave-start="opacity-100 translate-y-0"
-                                        x-transition:leave-end="opacity-0 translate-y-4"
-                                >
-                                    <div class="inline-flex relative align-top">
-                                        <img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
-                                             src="./images/feature-01.png" width="600" height="360" alt="Feature 02"/>
-                                        <img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
-                                             src="./images/feature-illustration.png" width="273" height="288"
-                                             alt="Illustration" aria-hidden="true">
-                                    </div>
-                                </div>
-                                <!-- Item 3 -->
-                                <div
-                                        class="w-full text-center"
-                                        x-show="tab === '3'"
-                                        x-transition:enter="transition ease-in-out duration-700 transform order-first"
-                                        x-transition:enter-start="opacity-0 -translate-y-4"
-                                        x-transition:enter-end="opacity-100 translate-y-0"
-                                        x-transition:leave="transition ease-in-out duration-300 transform absolute"
-                                        x-transition:leave-start="opacity-100 translate-y-0"
-                                        x-transition:leave-end="opacity-0 translate-y-4"
-                                >
-                                    <div class="inline-flex relative align-top">
-                                        <img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
-                                             src="./images/feature-01.png" width="600" height="360" alt="Feature 03"/>
-                                        <img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
-                                             src="./images/feature-illustration.png" width="273" height="288"
-                                             alt="Illustration" aria-hidden="true">
-                                    </div>
-                                </div>
-                                <!-- Item 4 -->
-                                <div
-                                        class="w-full text-center"
-                                        x-show="tab === '4'"
-                                        x-transition:enter="transition ease-in-out duration-700 transform order-first"
-                                        x-transition:enter-start="opacity-0 -translate-y-4"
-                                        x-transition:enter-end="opacity-100 translate-y-0"
-                                        x-transition:leave="transition ease-in-out duration-300 transform absolute"
-                                        x-transition:leave-start="opacity-100 translate-y-0"
-                                        x-transition:leave-end="opacity-0 translate-y-4"
-                                >
-                                    <div class="inline-flex relative align-top">
-                                        <img class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
-                                             src="./images/feature-01.png" width="600" height="360" alt="Feature 04"/>
-                                        <img class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
-                                             src="./images/feature-illustration.png" width="273" height="288"
-                                             alt="Illustration" aria-hidden="true">
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
 
-        <!-- Features #2 -->
-        <section>
-            <div class="py-12 md:py-20">
-                <div class="max-w-6xl mx-auto px-4 sm:px-6">
-                    <div class="relative max-w-3xl mx-auto text-center pb-12 md:pb-20">
-                        <h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">AI-powered
-                            features and effects</h2>
-                        <p class="text-lg text-zinc-500">Whenever you are ready, just hit publish to turn your site
-                            sketches into an actual designs. No creating, no skills, no reshaping.</p>
-                    </div>
                     <div class="max-w-xs mx-auto sm:max-w-none grid sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-4 lg:gap-8">
-                        <article
-                                class="sm:col-span-2 flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
-                            <div class="grow flex flex-col p-5 pt-6">
-                                <div class="flex items-center space-x-3 mb-1">
-                                    <svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
-                                         height="20">
-                                        <path d="M17 9c.6 0 1 .4 1 1v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6c.6 0 1 .4 1 1s-.4 1-1 1H4v12h12v-6c0-.6.4-1 1-1Zm-.7-6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8Z"/>
-                                    </svg>
-                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Truly Collaborative</h3>
-                                </div>
-                                <p class="grow max-w-md text-sm text-zinc-500">Create teams and organize your designs
-                                    into folders using project specs and insights.</p>
-                            </div>
-                            <figure>
-                                <img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
-                                     src="./images/feature-post-01.png" width="721" height="280" alt="Feature Post 01">
-                            </figure>
-                        </article>
+                        <!-- Mix and Match Infrastructure -->
                         <article
                                 class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
                             <div class="grow flex flex-col p-5 pt-6">
-                                <div class="flex items-center space-x-3 mb-1">
-                                    <svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
-                                         height="20">
-                                        <path d="m6.035 17.335-4-14c-.2-.8.5-1.5 1.3-1.3l14 4c.9.3 1 1.5.1 1.9l-6.6 2.9-2.8 6.6c-.5.9-1.7.8-2-.1Zm-1.5-12.8 2.7 9.5 1.9-4.4c.1-.2.3-.4.5-.5l4.4-1.9-9.5-2.7Z"/>
+                                <div class="flex items-center space-x-3 mb-4">
+                                    <svg class="inline-flex stroke-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
+                                         width="20" height="20" fill="none"
+                                         stroke-width="2" viewBox="0 0 24 24">
+                                        <rect width="8" height="8" x="2" y="2" rx="1"/>
+                                        <rect width="9" height="8" x="13" y="2" rx="1"/>
+                                        <rect width="11" height="9" x="2" y="13" rx="1"/>
+                                        <rect width="6" height="9" x="16" y="13" rx="1"/>
                                     </svg>
-                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Advanced AI</h3>
+                                    <h3 class="font-inter-tight font-semibold text-zinc-900">
+                                        Mix and Match Infrastructure
+                                    </h3>
+                                </div>
+                                <div class="text-sm text-zinc-500">
+                                    <ul class="space-y-3">
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Mix and match cloud and on-premise across regions and providers
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Deploy customer-facing apps on reliable cloud VMs
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Run resource-hungry background jobs on budget-friendly bare metal servers
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Put that dusty Mac mini to work as your staging environment
+                                        </li>
+                                    </ul>
                                 </div>
-                                <p class="grow max-w-md text-sm text-zinc-500">Generate images and explore new ways of
-                                    presenting your designs with AI.</p>
                             </div>
-                            <figure>
-                                <img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
-                                     src="./images/feature-post-02.png" width="342" height="280" alt="Feature Post 02">
-                            </figure>
                         </article>
+
+                        <!-- Effortless Operation -->
                         <article
                                 class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
                             <div class="grow flex flex-col p-5 pt-6">
-                                <div class="flex items-center space-x-3 mb-1">
-                                    <svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
-                                         height="20">
-                                        <path d="M8.974 16c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z"/>
+                                <div class="flex items-center space-x-3 mb-4">
+                                    <svg class="inline-flex fill-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
+                                         width="20"
+                                         height="20" viewBox="0 0 24 24">
+                                        <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
                                     </svg>
-                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Simple Snippets</h3>
+                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Effortless Operation</h3>
+                                </div>
+                                <div class="text-sm text-zinc-500">
+                                    <ul class="space-y-3">
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Zero-config distributed Docker cluster
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            No control plane to manage
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Keep apps running even when machines go offline
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Battle-tested WireGuard private networking, ready out of the box
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Automatic HTTPS for your domains using Let's Encrypt
+                                        </li>
+                                    </ul>
                                 </div>
-                                <p class="grow max-w-md text-sm text-zinc-500">Get your scenes inside your projects
-                                    using simple embed code/snippets.</p>
                             </div>
-                            <figure>
-                                <img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
-                                     src="./images/feature-post-03.png" width="342" height="280" alt="Feature Post 03">
-                            </figure>
                         </article>
+
+                        <!-- Developer Experience -->
                         <article
                                 class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
                             <div class="grow flex flex-col p-5 pt-6">
-                                <div class="flex items-center space-x-3 mb-1">
-                                    <svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
-                                         height="20">
-                                        <path d="M9.3 11.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM9.3 17.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM2.3 12.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z"/>
+                                <div class="flex items-center space-x-3 mb-4">
+                                    <svg class="inline-flex fill-zinc-400 shrink-0" xmlns="http://www.w3.org/2000/svg"
+                                         width="20"
+                                         height="20" viewBox="0 0 24 24">
+                                        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
                                     </svg>
-                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Precise Activity</h3>
+                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Developer Experience You
+                                        Love</h3>
                                 </div>
-                                <p class="grow max-w-md text-sm text-zinc-500">Easily make drag and drop interactions
-                                    without coding.</p>
-                            </div>
-                            <figure>
-                                <img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
-                                     src="./images/feature-post-04.png" width="342" height="280" alt="Feature Post 04">
-                            </figure>
-                        </article>
-                        <article
-                                class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg">
-                            <div class="grow flex flex-col p-5 pt-6">
-                                <div class="flex items-center space-x-3 mb-1">
-                                    <svg class="inline-flex fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="20"
-                                         height="20">
-                                        <path d="M16 2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8.667l3.733 2.8A1 1 0 0 0 18 17V4a2 2 0 0 0-2-2Zm0 13-2.4-1.8a1 1 0 0 0-.6-.2H4V4h12v11Z"/>
-                                    </svg>
-                                    <h3 class="font-inter-tight font-semibold text-zinc-900">Real-time Feedback</h3>
+                                <div class="text-sm text-zinc-500">
+                                    <ul class="space-y-3">
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Deploy across machines with familiar Docker-like commands
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Use the same Docker Compose from local dev to production
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Find your services instantly with built-in service discovery and DNS
+                                        </li>
+                                        <li class="flex gap-3 items-start">
+                                            <svg class="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" fill="none"
+                                                 stroke="currentColor" viewBox="0 0 24 24">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                      d="M5 13l4 4L19 7"/>
+                                            </svg>
+                                            Secure container communication across machines without opening ports
+                                        </li>
+                                    </ul>
                                 </div>
-                                <p class="grow max-w-md text-sm text-zinc-500">Create tasks, projects, issues and more
-                                    in just seconds.</p>
                             </div>
-                            <figure>
-                                <img class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
-                                     src="./images/feature-post-05.png" width="342" height="280" alt="Feature Post 05">
-                            </figure>
                         </article>
                     </div>
                 </div>