Highlight top features better on the site

docs/.vuepress/components/HomeLayout.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="bg-white ">
+  <div class="container mx-auto" style="background-color: #f3f9fd;">
   <div class="mt-16">
   <main aria-labelledby="main-title" >
     <Navbar
       @toggle-sidebar="toggleSidebar"
     />
 
-    <div class="flex flex-col xl:flex-row border-b pb-8">
+    <div>
-      <div class="xl:w-2/4 p-4 md:p-16 xl:pr-4">
+      <div class="p-4 pt-12 border-white border-b-4">
-        <div class="text-center xl:text-left">
+        <div class="text-center">
           <h1 v-if="data.heroText !== null" class="text-5xl">{{ data.heroText || $title || 'Hello' }}</h1>
           
           <p class="text-2xl text-gray-600 leading-tight mt-4 xl:mt-0">
@@ -22,11 +22,11 @@
         </div>
 
         <div
-          class="flex flex-wrap"
+          class="flex flex-wrap mx-2 md:mx-20"
           v-if="data.features && data.features.length"
         >
           <div
-            class="w-2/4"
+            class="w-2/4 md:w-1/3"
             v-for="(feature, index) in data.features"
             :key="index"
           >
@@ -38,16 +38,7 @@
         </div>
       </div>
 
-      <div class="xl:w-2/4 hidden xl:block">
+      <div class="border-white border-b-4">
-       <img
-          class="mt-8 border rounded shadow-xl"
-          v-if="data.heroImage"
-          :src="$withBase(data.heroImage)"
-          :alt="data.heroAlt || 'hero'"
-        >
-      </div>
-
-      <div class="block xl:hidden">
        <img
           v-if="data.heroImage"
           :src="$withBase(data.heroImageMobile)"
@@ -56,44 +47,8 @@
       </div>
     </div>
 
-    <div class="flex flex-col xl:flex-row border-b mb-8">
+    <div class="theme-default-content markdown">
-      <div class="xl:w-2/4 pt-8 pl-4 md:pl-16 xl:border-r">
+      <Content />
-      <h1 class="font-semibold text-2xl mb-8">Try the demo</h1>
-
-      <pre class="text-xs md:text-lg text-black">
-<span class="text-green-700"># download super graph source</span>
-git clone https://github.com/dosco/super-graph.git
-
-<span class="text-green-700"># setup the demo rails app & database and run it</span>
-./demo start
-
-<span class="text-green-700"># signin to the demo app (user1@demo.com / 123456)</span>
-open http://localhost:3000
-
-<span class="text-green-700"># try the super graph web ui</span>
-open http://localhost:8080
-      </pre>
-      </div>
-
-      <div class="xl:w-2/4 pt-8 pl-4 md:pl-16">
-      <h1 class="font-semibold text-2xl mb-8">Try a query</h1>
-
-      <pre class="text-xs md:text-lg text-black">
-<span class="text-green-700"># query to fetch users and their products</span>
-query {
-  users {
-    id
-    email
-    picture : avatar
-    products(limit: 2, where: { price: { gt: 10 } }) {
-      id
-      name
-      description
-    }
-  }
-}
-      </pre>
-      </div>
     </div>
       
     <div

docs/.vuepress/styles/index.styl

@@ -1,5 +1,17 @@
 @tailwind base;
 
+@css {
+  .markdown h1 {
+    @apply font-semibold text-2xl border-0 py-4
+  }
+  .markdown h2, .markdown h3, .markdown h4 {
+    @apply font-semibold text-xl border-0 py-4
+  }
+  .markdown p {
+    @apply py-2 text-lg
+  }
+}
+
 @tailwind components;
 
 @tailwind utilities;

docs/README.md

@@ -17,15 +17,30 @@ features:
   details: Can read Rails cookies and supports rails database conventions.
 - title: Serverless
   details: Designed for App Engine, Kubernetes, CloudRun, Horeku, AWS Fargate, etc  
-- title: Fast and Secure
+- title: Go Lang
-  details: Go is a language created at Google to build secure and fast web services. 
+  details: Go is a language created at Google to build fast and secure web services. 
 - title: Free and Open Source
   details: Not a VC funded startup. Not even a startup just good old open source code
 footer: MIT Licensed | Copyright © 2018-present Vikram Rangnekar
 ---
 
+## Try the demo
 
-## Try out GraphQL
+```bash
+# download super graph source
+git clone https://github.com/dosco/super-graph.git
+
+# setup the demo rails app & database and run it
+./demo start
+
+# signin to the demo app (user1@demo.com / 123456)
+open http://localhost:3000
+
+# try the super graph web ui
+open http://localhost:8080
+```
+
+## Try a query
 
 ```graphql
 query {
@@ -42,9 +57,9 @@ query {
 }
 ```
 
-## Why I built Super Graph?
+## Why Super Graph?
 
-Honestly, cause it was more fun than my real work. After working on several product though my career I found myself hating building CRUD APIs (Create, Update, Delete, List, Show). It was always the same thing figure out what the UI needs then build an endpoint for it, if related data is needed than join with another table. I didn't want to write that code anymore I wanted the computer to just do it.
+After working on several product though my career I found building CRUD APIs (Create, Update, Delete, List, Show) to be a big part of the job. It was always the same thing figure out what the UI needs then build an endpoint for it, if related data is needed than join with another table. I didn't want to write that code anymore I wanted the computer to just do it.
 
 I always liked GraphQL it sounded friendly, but it still required me to write all the same database query code. Sure the API was nicer but it took a lot of work sometime even more than a simple REST API would have. I wanted a GraphQL server that just worked the second you deployed it without having to write a line of code.
 

docs/tailwind.config.js

@@ -1,3 +1,11 @@
+// tailwind.config.js
+module.exports = {
+  theme: {},
+  variants: {},
+  plugins: [],
+}
+
+/*
 module.exports = {
   prefix: '',
   important: false,
@@ -489,3 +497,4 @@ module.exports = {
   corePlugins: {},
   plugins: [],
 }
+*/