Skip to content

Added initial scaffold [WIP] #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Added initial scaffold [WIP] #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9f3adea
Added initial scaffold
Pipe-Runner Feb 11, 2021
6e1df54
Removed redundant sections
Pipe-Runner Feb 11, 2021
419bfe7
Brand colors applied
Pipe-Runner Feb 11, 2021
410a4e1
Fixed tailwind config for production
Pipe-Runner Feb 11, 2021
ec9e527
added some content on home page
hnagrath09 Feb 13, 2021
6ab7a5c
Added feature content
Pipe-Runner Feb 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions components/cta/cta.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react'

export default function CTA() {
return (
<>
<div className="bg-white">
<div className="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div className="overflow-hidden rounded-lg shadow-xl bg-brand-primary lg:grid lg:grid-cols-2 lg:gap-4">
<div className="px-6 pt-10 pb-12 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
<div className="lg:self-center">
<h2 className="text-3xl font-extrabold text-white sm:text-4xl">
<span className="block">Ready to dive in?</span>
</h2>
<p className="mt-4 text-lg leading-6 text-gray-50">
Try Dopplr today to see the difference.
</p>
<a
href="/"
className="inline-flex items-center px-6 py-3 mt-8 text-base font-medium bg-white border border-transparent rounded-md shadow text-brand-dark hover:bg-indigo-50"
>
Sign up
</a>
</div>
</div>
<div className="-mt-6 aspect-w-5 aspect-h-3 md:aspect-w-2 md:aspect-h-1">
<img
className="object-cover object-left-top transform translate-x-6 translate-y-6 rounded-md sm:translate-x-16 lg:translate-y-20"
src="/dopplr-snapshot.png"
alt="App screenshot"
/>
</div>
</div>
</div>
</div>
</>
)
}
3 changes: 3 additions & 0 deletions components/cta/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import CTA from './cta'

export default CTA
77 changes: 77 additions & 0 deletions components/faq/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import React from 'react'

export default function FAQ() {
return (
<div className="bg-white">
<div className="max-w-7xl mx-auto py-16 px-4 divide-y-2 divide-gray-200 sm:py-24 sm:px-6 lg:px-8">
<h2 className="text-3xl font-extrabold text-gray-900">
Frequently asked questions
</h2>
<div className="mt-6 pt-10">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
<div>
<dt className="text-lg leading-6 font-medium text-gray-900">
What's the best thing about Switzerland?
</dt>
<dd className="mt-2 text-base text-gray-500">
I don't know, but the flag is a big plus. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Quas cupiditate laboriosam
fugiat.
</dd>
</div>

<div>
<dt className="text-lg leading-6 font-medium text-gray-900">
Why do you never see elephants hiding in trees?
</dt>
<dd className="mt-2 text-base text-gray-500">
Because they're so good at it. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
</dd>
</div>

<div>
<dt className="text-lg leading-6 font-medium text-gray-900">
How do you make holy water?
</dt>
<dd className="mt-2 text-base text-gray-500">
You boil the hell out of it. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
</dd>
</div>

<div>
<dt className="text-lg leading-6 font-medium text-gray-900">
Why can't you hear a pterodactyl go to the bathroom?
</dt>
<dd className="mt-2 text-base text-gray-500">
Because the pee is silent. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
</dd>
</div>

<div>
<dt className="text-lg leading-6 font-medium text-gray-900">
What do you call someone with no body and no nose?
</dt>
<dd className="mt-2 text-base text-gray-500">
Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quas cupiditate laboriosam fugiat.
</dd>
</div>

<div>
<dt className="text-lg leading-6 font-medium text-gray-900">
Why did the invisible man turn down the job offer?
</dt>
<dd className="mt-2 text-base text-gray-500">
He couldn't see himself doing it. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
</dd>
</div>
</dl>
</div>
</div>
</div>
)
}
3 changes: 3 additions & 0 deletions components/faq/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import FAQ from './faq'

export default FAQ
150 changes: 150 additions & 0 deletions components/feature/feature.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import { CheckCircle, Graph, Editor, Database } from '../../icons'

export default function Feature() {
return (
<>
<div className="relative pt-16 pb-32 overflow-hidden bg-white">
<div className="relative">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div className="max-w-xl px-4 mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0">
<div>
<div>
<span className="flex items-center justify-center w-12 h-12 rounded-md bg-brand-primary">
<Editor />
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
Powerful editor for writing queries
</h2>
<p className="mt-4 text-lg text-gray-500">
Dopplr provides powerful web-based code editor to write SQL
queries on your databases.
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>Auto-complete and syntax highlighting</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>Code Formatting and keyboard shortcuts</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>
Completely customizable using different themes and fonts
</span>
</p>
</div>
</div>
</div>
<div className="mt-12 sm:mt-16 lg:mt-0">
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<img
className="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src="/dopplr-editor-snapshot.jpg"
alt="Dopplr Editor Snapshot"
/>
</div>
</div>
</div>
</div>
<div className="mt-24">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div className="max-w-xl px-4 mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div>
<div>
<span className="flex items-center justify-center w-12 h-12 rounded-md bg-brand-primary">
<Graph />
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
Beautiful data visualization
</h2>
<p className="mt-4 text-lg text-gray-500">
Dopplr comes with a huge set of highly customizable
visualization tools for your data
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>A myriad of graphs to choose from</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>Granular configuration for graph axes</span>
</p>
</div>
</div>
</div>
<div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
<div className="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<img
className="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
src="/dopplr-graph-snapshot.jpg"
alt="Dopplr Graph Snapshot"
/>
</div>
</div>
</div>
</div>
<div className="relative mt-24">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div className="max-w-xl px-4 mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0">
<div>
<div>
<span className="flex items-center justify-center w-12 h-12 rounded-md bg-brand-primary">
<Database />
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
Extensive database support
</h2>
<p className="mt-4 text-lg text-gray-500">
Dopplr provides connectors for well known databases
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>Postgres</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>MySQL</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>
Vertica
</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>
Hive
</span>
</p>
<p className="flex items-center mt-4 space-x-2 text-lg text-gray-500">
<CheckCircle />
<span>
And many more...
</span>
</p>
</div>
</div>
</div>
<div className="mt-12 sm:mt-16 lg:mt-0">
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<img
className="w-full shadow-xl rounded-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src="/dopplr-database-snapshot.jpg"
alt="Dopplr Editor Snapshot"
/>
</div>
</div>
</div>
</div>
</div>
</>
)
}
3 changes: 3 additions & 0 deletions components/feature/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Feature from './feature'

export default Feature
55 changes: 55 additions & 0 deletions components/footer/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react'
import { Github, Twitter, Facebook } from '../../icons'

export default function Footer() {
return (
<footer className="bg-white">
<div className="px-4 py-12 mx-auto overflow-hidden max-w-7xl sm:px-6 lg:px-8">
<nav
className="flex flex-wrap justify-center -mx-5 -my-2"
aria-label="Footer"
>
<div className="px-5 py-2">
<a href="/" className="text-base text-gray-500 hover:text-gray-900">
About
</a>
</div>

<div className="px-5 py-2">
<a href="/" className="text-base text-gray-500 hover:text-gray-900">
Blog
</a>
</div>

<div className="px-5 py-2">
<a href="/" className="text-base text-gray-500 hover:text-gray-900">
Jobs
</a>
</div>
</nav>
<div className="flex justify-center mt-8 space-x-6">
<a href="/" className="text-gray-400 hover:text-gray-500">
<span className="sr-only">Facebook</span>
<Facebook />
</a>

<a href="/" className="text-gray-400 hover:text-gray-500">
<span className="sr-only">Twitter</span>
<Twitter />
</a>

<a
href="https://github.com/dopplr-labs/dopplr"
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">GitHub</span>
<Github />
</a>
</div>
<p className="mt-8 text-base text-center text-gray-400">
© 2020 Dopplr, Inc. All rights reserved.
</p>
</div>
</footer>
)
}
3 changes: 3 additions & 0 deletions components/footer/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Footer from './footer'

export default Footer
Loading