WIP

docs/index.md

@@ -43,8 +43,64 @@ const Repl = defineClientComponent(() => {
     text-align: center;
     margin-top: 4rem;
   }
+
+  .postgres-new {
+    display: flex;
+    flex-direction: row;
+    background: var(--vp-c-bg-soft);
+    border-radius: 12px;
+    margin-top: 4rem;
+  }
+
+  .postgres-new > .info {
+    padding: 24px;
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  .postgres-new > .image {
+    display: block;
+    flex-shrink: 1;
+    width: 70%;
+  }
+
+  .postgres-new > .image > img {
+    margin: -4% 0 -6% 0;
+  }
+
+  .postgres-new h3 {
+    margin: 0;
+  }
+
+  .postgres-new-btn {
+    border-color: var(--vp-button-alt-border);
+    color: var(--vp-button-alt-text);
+    background-color: var(--vp-button-alt-bg);
+    border-radius: 20px;
+    padding: 0 20px;
+    line-height: 38px;
+    font-size: 14px;
+    display: inline-block;
+    border: 1px solid transparent;
+    text-align: center;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+    text-decoration: none;
+  }
 </style>
 
+<!-- <div class="postgres-new">
+  <div class="info">
+    <h3>Experience <a href="https://postgres.new">postgres.new</a></h3>
+    <p>An AI Postgres assistant<br> built on PGlite.</p>
+    <a class="postgres-new-btn" href="/docs/about">What would you like to create?</a>
+  </div>
+  <div class="image">
+    <img src="./public/img/postgres-new.png">
+  </div>
+</div> -->
+
 <div class="try-it-now">
 
   ### Try PGlite Now