ignore: cloud lander

cloud/app/src/routes/index.css

@@ -309,27 +309,27 @@
     grid-template-rows: var(--images-height);
     border-top: 2px solid var(--color-border);
 
-    & > div.left {
+    & > [data-slot="left"] {
       display: flex;
       grid-row: 1;
       grid-column: 1;
     }
 
-    & > div.right {
+    & > [data-slot="right"] {
       display: grid;
       grid-template-rows: 1fr 1fr;
       grid-row: 1;
       grid-column: 2;
       border-left: 2px solid var(--color-border);
 
-      & > div.row1 {
+      & > [data-slot="row1"] {
         display: flex;
         grid-row: 1;
         border-bottom: 2px solid var(--color-border);
         height: calc(var(--images-height) / 2);
       }
 
-      & > div.row2 {
+      & > [data-slot="row2"] {
         display: flex;
         grid-row: 2;
         height: calc(var(--images-height) / 2);
@@ -384,24 +384,24 @@
       }
     }
 
-    & > div.left figure {
+    & > [data-slot="left"] figure {
       height: var(--images-height);
       box-sizing: border-box;
     }
 
-    & > div.right figure {
+    & > [data-slot="right"] figure {
       height: calc(var(--images-height) / 2);
       box-sizing: border-box;
     }
 
-    & > div.left img {
+    & > [data-slot="left"] img {
       width: 100%;
       height: 100%;
       min-width: 0;
       object-fit: contain;
     }
 
-    & > div.right img {
+    & > [data-slot="right"] img {
       width: 100%;
       height: calc(100% - 2rem);
       object-fit: contain;
@@ -415,30 +415,30 @@
         grid-template-rows: auto auto;
       }
 
-      & > div.left {
+      & > [data-slot="left"] {
         grid-row: 1;
         grid-column: 1;
       }
 
-      & > div.right {
+      & > [data-slot="right"] {
         grid-row: 2;
         grid-column: 1;
         border-left: none;
         border-top: 2px solid var(--color-border);
 
-        & > div.row1,
-        & > div.row2 {
+        & > [data-slot="row1"],
+        & > [data-slot="row2"] {
           height: auto;
         }
       }
 
-      & > div.left figure,
-      & > div.right figure {
+      & > [data-slot="left"] figure,
+      & > [data-slot="right"] figure {
         height: auto;
       }
 
-      & > div.left img,
-      & > div.right img {
+      & > [data-slot="left"] img,
+      & > [data-slot="right"] img {
         width: 100%;
         height: auto;
         max-height: none;

cloud/app/src/routes/index.tsx

@@ -151,7 +151,7 @@ export default function Home() {
         </section>
 
         <section data-component="screenshots">
-          <div class="left">
+          <div data-slot="left">
             <figure>
               <figcaption>opencode TUI with the tokyonight theme</figcaption>
               <a href="/docs/cli">
@@ -159,8 +159,8 @@ export default function Home() {
               </a>
             </figure>
           </div>
-          <div class="right">
-            <div class="row1">
+          <div data-slot="right">
+            <div data-slot="row1">
               <figure>
                 <figcaption>opencode in VS Code</figcaption>
                 <a href="/docs/ide">
@@ -168,7 +168,7 @@ export default function Home() {
                 </a>
               </figure>
             </div>
-            <div class="row2">
+            <div data-slot="row2">
               <figure>
                 <figcaption>opencode in GitHub</figcaption>
                 <a href="/docs/github">