connection form sections

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/WelcomeMessage.tsx

@@ -0,0 +1,15 @@
+import DoltLink from "@components/links/DoltLink";
+import DoltgresLink from "@components/links/DoltgresLink";
+import css from "./index.module.css";
+
+export default function WelcomeMessage() {
+  return (
+    <div className={css.welcome}>
+      <h1>Welcome to the Dolt Workbench</h1>
+      <p>
+        Connect the workbench to any MySQL or PostgreSQL compatible database.
+        Use <DoltLink /> or <DoltgresLink /> to unlock version control features.
+      </p>
+    </div>
+  );
+}

web/renderer/components/pageComponents/ConnectionsPage/NewConnection/index.module.css

@@ -1,11 +1,31 @@
+.container {
+  @apply py-20 bg-stone-50;
+  a {
+    @apply text-[#FF8964];
+  }
+  a:hover {
+    @apply text-coral-400;
+  }
+}
+
 .databaseForm {
-  @apply w-full max-w-xl mx-auto;
+  @apply w-full max-w-2xl mx-auto;
 
   h3 {
     @apply mb-4;
   }
 }
 
+.welcome {
+  @apply text-center;
+  h1 {
+    @apply font-semibold;
+  }
+  p {
+    @apply text-xl  my-6 leading-8;
+  }
+}
+
 .whiteContainer {
   @apply max-w-xl w-full border rounded-lg py-10 bg-white mx-auto;
 }
@@ -17,6 +37,10 @@
   }
 }
 
+.top {
+  @apply mx-10;
+}
+
 .section {
   @apply px-14 py-4;
 }
@@ -30,7 +54,7 @@
 }
 
 .middle {
-  @apply border-y pt-8;
+  @apply pt-8;
 }
 
 .or {