Highlight top features better on the site

This commit is contained in:
Vikram Rangnekar
2019-08-19 21:30:00 -04:00
parent aa9a4e3dc4
commit 72f8650ac0
5 changed files with 52 additions and 61 deletions

View File

@ -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 class="xl:w-2/4 p-4 md:p-16 xl:pr-4">
<div class="text-center xl:text-left">
<div>
<div class="p-4 pt-12 border-white border-b-4">
<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"
>
@ -37,17 +37,8 @@
</div>
</div>
</div>
<div class="xl:w-2/4 hidden xl:block">
<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">
<div class="border-white border-b-4">
<img
v-if="data.heroImage"
:src="$withBase(data.heroImageMobile)"
@ -56,46 +47,10 @@
</div>
</div>
<div class="flex flex-col xl:flex-row border-b mb-8">
<div class="xl:w-2/4 pt-8 pl-4 md:pl-16 xl:border-r">
<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 class="theme-default-content markdown">
<Content />
</div>
<div
class="mx-auto text-center py-8"
v-if="data.footer"