ignore: lander styles

packages/web/src/components/Lander.astro

@@ -18,6 +18,7 @@ const imageAttrs = {
 };
 
 const github = config.social.filter(s => s.icon === 'github')[0];
+const discord = config.social.filter(s => s.icon === 'discord')[0];
 
 const command = "curl -fsSL"
 const protocol = "https://"
@@ -53,7 +54,7 @@ if (image) {
 
     <section class="cta">
       <div class="col1">
-        <a href="/docs">Docs</a>
+        <a href="/docs">Get Started</a>
       </div>
       <div class="col2">
       <button class="command" data-command={`${command} ${protocol}${url} ${bash}`}>
@@ -66,9 +67,6 @@ if (image) {
           </span>
         </button>
       </div>
-      <div class="col3">
-        <a href={github.href}>GitHub</a>
-      </div>
     </section>
 
     <section class="content">
@@ -83,18 +81,37 @@ if (image) {
     </section>
 
     <section class="images">
-      <div>
-        <p>opencode TUI with the tokyonight theme</p>
-        <Image width={600} src={Screenshot} alt="opencode TUI with the tokyonight theme" />
+      <div class="left">
+        <figure>
+          <figcaption>opencode TUI with the tokyonight theme</figcaption>
+          <Image src={Screenshot} alt="opencode TUI with the tokyonight theme" />
+        </figure>
+      </div>
+      <div class="right">
+        <div class="row1">
+          <figure>
+            <figcaption>opencode in VS Code</figcaption>
+            <Image src={Screenshot} alt="opencode in VS Code" />
+          </figure>
+        </div>
+        <div class="row2">
+          <figure>
+            <figcaption>opencode TUI with the tokyonight theme</figcaption>
+            <Image src={Screenshot} alt="opencode TUI with the tokyonight theme" />
+          </figure>
+        </div>
       </div>
     </section>
 
     <section class="footer">
       <div class="col1">
-        <span>Version: Beta</span>
+        <a href={github.href}>GitHub</a>
       </div>
       <div class="col2">
-        <span>Author: <a href="https://sst.dev">SST</a></span>
+        <a href={discord.href}>Discord</a>
+      </div>
+      <div class="col3">
+      <span>&copy;2025 <a href="https://anoma.ly">Anomaly Innovations</a></span>
       </div>
     </section>
 </div>
@@ -102,7 +119,7 @@ if (image) {
 <style>
 .hero {
   --padding: 3rem;
-  --vertical-padding: 2rem;
+  --vertical-padding: 1.5rem;
   --heading-font-size: var(--sl-text-3xl);
 
   margin: 1rem;
@@ -111,7 +128,7 @@ if (image) {
 @media (max-width: 30rem) {
   .hero {
     --padding: 1rem;
-    --vertical-padding: 1rem;
+    --vertical-padding: 0.75rem;
     --heading-font-size: var(--sl-text-2xl);
 
     margin: 0.5rem;
@@ -143,31 +160,29 @@ section.cta {
 
   @media (max-width: 50rem) {
     flex-direction: column;
-
-    & > div.col1 { order: 1; }
-    & > div.col3 { order: 2; }
-    & > div.col2 { order: 3; }
   }
 
   & > div {
     line-height: 1.4;
-    padding: calc(var(--padding) / 2) 1rem;
+    padding: var(--vertical-padding) var(--padding);
 
     a {
       font-size: 1rem;
     }
   }
-  & > div.col1, & > div.col3 {
-    flex: 1 1 auto;
+  & > div.col1 {
+    flex: 0 0 auto;
     text-align: center;
     text-transform: uppercase;
 
     @media (max-width: 50rem) {
-      padding-bottom: calc(var(--padding) / 2 + 4px);
+      padding-bottom: calc(var(--vertical-padding) + 4px);
     }
   }
   & > div.col2 {
-    flex: 0 0 auto;
+    flex: 1;
+    padding-left: 1rem;
+    padding-right: 1rem;
   }
 
   & > div + div {
@@ -261,13 +276,40 @@ section.content {
 }
 
 section.images {
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  justify-content: space-between;
+  --images-height: 600px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: var(--images-height);
   border-top: 2px solid var(--sl-color-border);
 
-  & > div {
+  & > div.left {
+    display: flex;
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  & > div.right {
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-row: 1;
+    grid-column: 2;
+    border-left: 2px solid var(--sl-color-border);
+
+    & > div.row1 {
+      display: flex;
+      grid-row: 1;
+      border-bottom: 2px solid var(--sl-color-border);
+      height: calc(var(--images-height) / 2);
+    }
+    
+    & > div.row2 {
+      display: flex;
+      grid-row: 2;
+      height: calc(var(--images-height) / 2);
+    }
+  }
+
+  figure {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -276,51 +318,93 @@ section.images {
     border-width: 0;
     border-style: solid;
     border-color: var(--sl-color-border);
+    min-height: 0;
+    overflow: hidden;
 
-    & > div, p {
+    & > div, figcaption {
+      display: flex;
+      align-items: center;
+    }
+
+    & > div {
       flex: 1;
+      min-height: 0;
       display: flex;
       align-items: center;
+      justify-content: center;
     }
-  }
 
-  p {
-    letter-spacing: -0.03125rem;
-    text-transform: uppercase;
-    color: var(--sl-color-text-dimmed);
+    figcaption {
+      letter-spacing: -0.03125rem;
+      text-transform: uppercase;
+      color: var(--sl-color-text-dimmed);
+      flex-shrink: 0;
 
-    @media (max-width: 30rem) {
-      font-size: 0.75rem;
+      @media (max-width: 30rem) {
+        font-size: 0.75rem;
+      }
     }
   }
 
-  img {
-    align-self: center;
+  & > div.left figure {
+    height: var(--images-height);
+    box-sizing: border-box;
+  }
+
+  & > div.right figure {
+    height: calc(var(--images-height) / 2);
+    box-sizing: border-box;
+  }
+
+  & > div.left img {
     width: 100%;
-    max-width: 600px;
-    height: auto;
+    height: 100%;
+    min-width: 0;
+    object-fit: contain;
   }
 
-  & > div + div {
-    border-width: 0 0 0 2px;
+  & > div.right img {
+    width: 100%;
+    height: calc(100% - 2rem);
+    object-fit: contain;
+    display: block;
   }
 
   @media (max-width: 30rem) {
     & {
-      flex-direction: column;
+      --images-height: auto;
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto;
     }
-    & > div + div {
-      border-width: 2px 0 0 0;
+
+    & > div.left {
+      grid-row: 1;
+      grid-column: 1;
     }
-  }
-}
 
-section.approach {
-  border-top: 2px solid var(--sl-color-border);
-  padding: var(--padding);
+    & > div.right {
+      grid-row: 2;
+      grid-column: 1;
+      border-left: none;
+      border-top: 2px solid var(--sl-color-border);
+
+      & > div.row1,
+      & > div.row2 {
+        height: auto;
+      }
+    }
+
+    & > div.left figure,
+    & > div.right figure {
+      height: auto;
+    }
 
-  p + p {
-    margin-top: var(--vertical-padding);
+    & > div.left img,
+    & > div.right img {
+      width: 100%;
+      height: auto;
+      max-height: none;
+    }
   }
 }
 
@@ -333,12 +417,42 @@ section.footer {
     flex: 1;
     text-align: center;
     text-transform: uppercase;
-    padding: calc(var(--padding) / 2) 0.5rem;
+    padding: var(--vertical-padding) 0.5rem;
   }
 
   & > div + div {
     border-left: 2px solid var(--sl-color-border);
   }
+
+  /* Below 800px: first two columns shrink to content, third expands */
+  @media (max-width: 50rem) {
+    & > div.col1,
+    & > div.col2 {
+      flex: 0 0 auto;
+      padding-left: calc(var(--padding) / 2);
+      padding-right: calc(var(--padding) / 2);
+    }
+
+    & > div.col3 {
+      flex: 1;
+    }
+  }
+
+  /* Mobile: third column on its own row */
+  @media (max-width: 30rem) {
+    flex-wrap: wrap;
+
+    & > div.col1,
+    & > div.col2 {
+      flex: 1;
+    }
+
+    & > div.col3 {
+      flex: 1 0 100%;
+      border-left: none;
+      border-top: 2px solid var(--sl-color-border);
+    }
+  }
 }
 </style>