quick update

Author: vkarpov15

package.json

@@ -3,8 +3,12 @@
   "dependencies": {
     "tailwindcss": "3.x"
   },
+  "devDependencies": {
+    "serve": "14.2.4"
+  },
   "scripts": {
     "postinstall": "npm run tailwind",
+    "start": "serve ./public",
     "tailwind": "tailwindcss -o ./public/tw.css",
     "tailwind:watch": "tailwindcss -o ./public/tw.css --watch"
   }

public/index.html

@@ -89,12 +89,6 @@ <h1 class="text-5xl font-semibold text-gray-900 sm:text-7xl">The MongoDB UI Buil
       </div>
     </div>
 
-    <div class="mt-16 w-full">
-      <div class="mx-auto max-w-5xl">
-        <img src="screenshot1.png" class="rounded-lg w-full shadow-md">
-      </div>
-    </div>
-
     <div class="bg-white py-24 sm:py-32 mt-16">
       <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <div class="grid grid-cols-1 items-center gap-x-8 gap-y-16 lg:grid-cols-2">
@@ -119,58 +113,60 @@ <h2 class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:te
         <h2 class="text-center text-base/7 font-semibold text-red-berry-800">Ship faster</h2>
         <p class="mx-auto mt-2 max-w-lg text-balance text-center text-4xl font-semibold tracking-tight text-gray-950 sm:text-5xl">Effortless, Secure Data Management</p>
         <div class="mt-10 grid gap-4 sm:mt-16 lg:grid-cols-3 lg:grid-rows-2">
-          <div class="relative lg:row-span-2">
+          <div class="relative lg:col-span-3">
             <div class="absolute inset-px rounded-lg bg-white lg:rounded-l-[2rem]"></div>
             <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
               <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
                 <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Instant Access to Your Data</p>
-                <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Mongoose Studio is a Node.js app that can run as a sidecar to your Node.js application. If your app runs on app.acme.com, your data is at app.acme.com/studio. No more juggling local, development, and production connection strings.</p>
+                <p class="mt-2 text-sm/6 text-gray-600 max-lg:text-center">Mongoose Studio is a Node.js app that can run as a sidecar to your Node.js application. If your app runs on app.acme.com, your data is at app.acme.com/studio. No more juggling local, development, and production connection strings.</p>
               </div>
-              <div class="px-8 mt-4">
-                <img class="size-full object-cover object-top rounded-lg" src="screenshot2.png" alt="">
+              <div class="px-8 mt-4 overflow-hidden max-h-[300px] mb-4">
+                <img class="size-full object-cover object-top rounded-lg" src="screenshot1.png" alt="">
               </div>
             </div>
             <div class="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 lg:rounded-l-[2rem]"></div>
           </div>
-          <div class="relative max-lg:row-start-1">
+          <div class="relative lg:row-span-2 lg:col-span-1">
             <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-t-[2rem]"></div>
             <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
               <div class="px-8 pt-8 sm:px-10 sm:pt-10">
                 <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Production-Ready Security</p>
                 <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Stop copying connection strings and giving everyone admin access to production. Log in via GitHub OAuth and use role-based access control for secure access to production data.</p>
               </div>
               <div class="flex flex-1 items-center justify-center px-8 max-lg:pb-12 max-lg:pt-10 sm:px-10 lg:pb-2">
-                <img class="w-full max-lg:max-w-xs" src="screenshot3.png" alt="">
+                <img class="w-full max-lg:max-w-xs" src="studio-oauth.png" alt="">
               </div>
             </div>
             <div class="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 max-lg:rounded-t-[2rem]"></div>
           </div>
-          <div class="relative max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
-            <div class="absolute inset-px rounded-lg bg-white"></div>
-            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)]">
-              <div class="px-8 pt-8 sm:px-10 sm:pt-10">
-                <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Collaboration Made Easy</p>
-                <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Share queries, dashboards, and documents via links. No screenshots, no friction.</p>
-              </div>
-              <div class="flex flex-1 items-center justify-center px-8 max-lg:pb-12 max-lg:pt-10 sm:px-10 lg:pb-2">
-                <img class="w-full max-lg:max-w-xs" src="screenshot-link.png" alt="">
-              </div>
-            </div>
-            <div class="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5"></div>
-          </div>
-          <div class="relative lg:row-span-2">
+
+          <div class="relative lg:col-span-2">
             <div class="absolute inset-px rounded-lg bg-white max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"></div>
             <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
               <div class="px-8 pb-3 pt-8 sm:px-10 sm:pb-0 sm:pt-10">
                 <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Charts and Dashboards Built In</p>
                 <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Transform raw data into actionable dashboards—all within the same sleek UI.</p>
               </div>
               <div class="flex px-8 max-lg:pb-12 max-lg:pt-10 sm:px-10 lg:pb-2">
-                <img class="w-full max-lg:max-w-xs" src="screenshot-chart.png" alt="">
+                <img class="w-full max-lg:max-w-xs" src="studio-dashboard.png" alt="">
               </div>
             </div>
             <div class="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5 max-lg:rounded-b-[2rem] lg:rounded-r-[2rem]"></div>
           </div>
+
+          <div class="relative lg:col-span-3">
+            <div class="absolute inset-px rounded-lg bg-white"></div>
+            <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(theme(borderRadius.lg)+1px)]">
+              <div class="px-8 pt-8 sm:px-10 sm:pt-10">
+                <p class="mt-2 text-lg font-medium tracking-tight text-gray-950 max-lg:text-center">Collaboration Made Easy</p>
+                <p class="mt-2 max-w-lg text-sm/6 text-gray-600 max-lg:text-center">Share queries, dashboards, and documents with your team via links. No screenshots, no friction.</p>
+              </div>
+              <div class="flex flex-1 px-8 max-lg:pb-12 max-lg:pt-10 sm:px-10 lg:pb-2 overflow-hidden max-h-[280px]">
+                <img class="w-full object-cover object-top" src="screenshot3.png" alt="">
+              </div>
+            </div>
+            <div class="pointer-events-none absolute inset-px rounded-lg shadow ring-1 ring-black/5"></div>
+          </div>
         </div>
       </div>
     </div>