clean up intro page

Author: 1ilit

docs/customizing-editor.md

@@ -1 +1,4 @@
+---
+sidebar_position: 3
+---
 # Customizing the editor

docs/how-it-works.md

@@ -1 +1,4 @@
+---
+sidebar_position: 7
+---
 # How it works

docs/intro.md

@@ -3,14 +3,20 @@ sidebar_position: 1
 slug: /
 ---
 
-import Card from '../src/components/Card'; 
-import Flex from '../src/components/Flex';
+import Card from '../src/components/Card'; import Flex from '../src/components/Flex';
 
 # Get started
 
-Welcome to DrawDB! Start designing, visualizing, and generating SQL scripts for your database schema in just a few steps – no sign-up required.
+**drawDB** is a free and online open source database diagram editor where you can visiaulize your schema, share your diagram, export SQL scripts, reverse engineer DDL scripts, and much more...
 
 <Flex>
-  <Card title="Create a diagram" link='/create-diagram'>Create a diagram</Card>
-  <Card title="Create a new diagram" link='/create-diagram'>Create a new diagram</Card>
+  <Card title="Create a Diagram" link="/create-diagram">Define tables and relationships to start building your diagram.</Card>
+  <Card title="Set Up the Editor" link="/customizing-editor">Adjust editor settings for a personalized design experience.</Card>
+</Flex>
+
+<br/>
+
+<Flex>
+  <Card title="Share the Diagram" link="/share">Share your diagram with others for collaboration or feedback.</Card>
+  <Card title="How It All Works" link="/how-it-works">Understand how drawDB works under the hood.</Card>
 </Flex>

docs/share.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 6
 ---
 
 # Sharing a diagram

docs/templates.md

@@ -0,0 +1,4 @@
+---
+sidebar_position: 5
+---
+# Templates

sidebars.js

@@ -15,19 +15,6 @@
 const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
 };
 
 export default sidebars;

src/components/Card/index.js

@@ -4,7 +4,17 @@ import styles from './styles.module.css';
 export default function Card({title, link, children}) {
   return (
     <a className={styles.card} href={link}>
-      <div className={styles.card__title}>{title}</div>
+      <div className={styles.card__title}>
+        {title}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 320 512"
+          width={18}
+          height={18}
+          fill="currentColor">
+          <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" />
+        </svg>
+      </div>
       <div className={styles.card__body}>{children}</div>
     </a>
   );

src/components/Card/styles.module.css

@@ -9,13 +9,18 @@
 }
 
 .card:hover {
-  color: var(--color-1);
+  background-color: var(--color-2);
+  transition: all ease-in-out 300ms;
 }
 
 .card__title {
   font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .card__body {
   font-size: small;
+  opacity: 0.8;
 }