mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
Merge branch 'feat/new_website' of github.com:supabase/supabase into feat/new_website
This commit is contained in:
Joshen Lim committed
commit
3d2f4aadff
13 files changed
+433
-246
No files matched your search
@@ -57,13 +57,13 @@ const ArticleThumb = (props: any) => {
|
||||
{iconMarkup}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm font-medium text-brand-600">
|
||||
<p className="text-sm font-medium text-gray-600">
|
||||
<a href="#" className="hover:underline capitalize">
|
||||
{type}
|
||||
</a>
|
||||
</p>
|
||||
<a href="#" className="block mt-2">
|
||||
<p className="text-xl font-semibold text-gray-900">{title}</p>
|
||||
<p className="text-xl text-gray-900">{title}</p>
|
||||
<p className="mt-3 text-base text-gray-500">
|
||||
{description}
|
||||
</p>
|
||||
|
||||
@@ -5,7 +5,7 @@ type Props = {
|
||||
}
|
||||
|
||||
const Container: FunctionComponent = ({ children }: Props) => {
|
||||
return <div className="container mx-auto px-5">
|
||||
return <div className="container mx-auto border-r-2 border-l-2 border-gray-50">
|
||||
{children}
|
||||
</div>
|
||||
}
|
||||
|
||||
+29
-56
@@ -1,9 +1,10 @@
|
||||
import Badge from './badge'
|
||||
import Solutions from './../data/Solutions.json'
|
||||
import SectionHeader from './UI/SectionHeader'
|
||||
|
||||
const Features = () => {
|
||||
const IconSections = Object.values(Solutions).map((solution) => {
|
||||
const { name, description, description_short, icon, label, url } = solution
|
||||
const { name, description, icon, label, url } = solution
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -28,67 +29,39 @@ const Features = () => {
|
||||
<div className="mt-5">
|
||||
<dd className="mt-2 text-base text-gray-500">{description}</dd>
|
||||
</div>
|
||||
<div className="mt-5">
|
||||
<dd className="mt-2 text-base text-gray-600 underline">Learn more link</dd>
|
||||
</div>
|
||||
{url && (
|
||||
<div className="mt-5">
|
||||
<dd className="mt-2 text-sm text-brand-600 underline">Learn more link</dd>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
// <!-- This example requires Tailwind CSS v2.0+ -->
|
||||
<div className="bg-gray-50 overflow-hidden py-12">
|
||||
<div className="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-0">
|
||||
<div className="lg:col-span-1">
|
||||
<small>A better way to build products</small>
|
||||
<h2 className="text-3xl text-gray-900 sm:text-4xl">
|
||||
Build Faster and Focus on Your Core Products
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-0">
|
||||
<svg
|
||||
className="absolute top-0 left-full transform -translate-x-1/2 -translate-y-3/4 lg:left-auto lg:right-full lg:translate-x-2/3 lg:translate-y-1/4"
|
||||
width="404"
|
||||
height="784"
|
||||
fill="none"
|
||||
viewBox="0 0 404 784"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="8b1b5f72-e944-4457-af67-0c6d15a99f38"
|
||||
x="0"
|
||||
y="0"
|
||||
width="20"
|
||||
height="20"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="4"
|
||||
height="4"
|
||||
className="text-gray-200"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="404" height="784" fill="url(#8b1b5f72-e944-4457-af67-0c6d15a99f38)" />
|
||||
</svg>
|
||||
|
||||
<div className="relative lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div className="relative lg:grid lg:grid-cols-2 lg:gap-x-8 lg:col-span-7">
|
||||
<dl className="mt-10 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
|
||||
{IconSections}
|
||||
</dl>
|
||||
</div>
|
||||
<div className="lg:col-span-5">
|
||||
<div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
image here
|
||||
</h2>
|
||||
<div className="bg-gray-50 overflow-hidden py-12 sm:px-6 lg:px-16">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<SectionHeader
|
||||
title={'Build Faster'}
|
||||
title_alt={' and Focus on Your Core Products'}
|
||||
subtitle={'A better way to build products'}
|
||||
/>
|
||||
<div className="mt-16 grid grid-cols-12 gap-8">
|
||||
<div className="relative pb-12 col-span-12">
|
||||
<div className="relative lg:grid lg:grid-cols-12 lg:gap-x-8">
|
||||
<div className="relative lg:grid lg:grid-cols-2 lg:gap-x-8 lg:col-span-7">
|
||||
<dl className="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-8 sm:gap-y-10 lg:mt-0 lg:col-span-2">
|
||||
{IconSections}
|
||||
</dl>
|
||||
</div>
|
||||
<div className="lg:col-span-5">
|
||||
<div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
image here
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,7 +69,7 @@ const Footer = () => {
|
||||
<div className="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
|
||||
Solutions
|
||||
Product
|
||||
</h3>
|
||||
<ul className="mt-4 space-y-4">
|
||||
<li>
|
||||
|
||||
+5
-86
@@ -2,7 +2,7 @@ import Link from 'next/link'
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="relative bg-dark-100 overflow-hidden">
|
||||
<div className="relative bg-dark-100 overflow-hidden px-16">
|
||||
<div className="hidden sm:block sm:absolute sm:inset-0" aria-hidden="true">
|
||||
<svg
|
||||
className="absolute bottom-0 right-0 transform translate-x-1/2 mb-48 text-gray-700 lg:top-0 lg:mt-28 lg:mb-0 xl:transform-none xl:translate-x-0"
|
||||
@@ -26,96 +26,15 @@ const Hero = () => {
|
||||
<rect width="364" height="384" fill="url(#eab71dd9-9d7a-47bd-8044-256344ee00d0)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="relative pt-6 pb-16 sm:pb-24">
|
||||
<div className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
|
||||
<div className="px-5 pt-4 flex items-center justify-between">
|
||||
<div>
|
||||
<img
|
||||
className="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/workflow-mark-brand-600.svg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="-mr-2">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1" role="none">
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
role="menuitem"
|
||||
>
|
||||
Product
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
role="menuitem"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
role="menuitem"
|
||||
>
|
||||
Marketplace
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#"
|
||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
role="menuitem"
|
||||
>
|
||||
Company
|
||||
</a>
|
||||
</div>
|
||||
<div role="none">
|
||||
<a
|
||||
href="#"
|
||||
className="block w-full px-5 py-3 text-center font-medium text-brand-600 bg-gray-50 hover:bg-gray-100"
|
||||
role="menuitem"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="mt-16 sm:mt-24">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
|
||||
<div className="px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
|
||||
<div className="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
|
||||
<div>
|
||||
|
||||
<h1 className="mt-4 text-4xl font-bold text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
|
||||
<h1 className="mt-4 text-4xl text-white sm:mt-5 sm:leading-none lg:mt-6 lg:text-5xl xl:text-6xl">
|
||||
<span className="md:block">The Open Source</span>
|
||||
<span className="text-brand-400 md:block">Firebase Alternative</span>
|
||||
</h1>
|
||||
@@ -128,7 +47,7 @@ const Hero = () => {
|
||||
<div className="mt-10 sm:flex sm:justify-center lg:justify-start">
|
||||
<div className="rounded-md shadow">
|
||||
<a href="#" className="inline-flex items-center px-4 py-2 border border-transparent text-med font-medium rounded-md shadow-sm text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
|
||||
Get started
|
||||
Start your project
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
import React from 'react'
|
||||
import ArticleThumb from './../ArticleThumb'
|
||||
import ProjectExamples from "./../../data/ProjectExamples.json"
|
||||
import SectionHeader from '../UI/SectionHeader'
|
||||
|
||||
const BuiltExamples = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div className="relative bg-gray-50 pt-16 pb-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8 sm:px-6 lg:px-16">
|
||||
<div className="absolute inset-0">
|
||||
<div className="bg-white h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div className="relative max-w-7xl mx-auto">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<SectionHeader title={'What you can build'}
|
||||
title_alt={' with Supabase'}
|
||||
subtitle={'Built with supabase'}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="relative max-w-7xl mx-auto">
|
||||
<div>
|
||||
<small>Built with supabase</small>
|
||||
<h2 className="text-3xl tracking-tight text-gray-900 sm:text-4xl">
|
||||
@@ -20,6 +27,8 @@ const BuiltExamples = () => {
|
||||
atque, ducimus sed.
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="relative max-w-7xl mx-auto">
|
||||
<div className="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
|
||||
<ArticleThumb article={
|
||||
// @ts-ignore
|
||||
|
||||
@@ -31,7 +31,7 @@ const CodeExamples = () => {
|
||||
onClick={() => handleClick(id)}
|
||||
className={
|
||||
'm-1 mb-4 rounded-md border border-gray-200 px-4 py-2 text-base font-medium text-gray focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:w-auto sm:text-sm' +
|
||||
(example === id ? ' border-brand-100 bg-brand-100 text-brand' : ' hover:bg-gray-200')
|
||||
(example === id ? ' border-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200')
|
||||
}
|
||||
>
|
||||
{
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import SectionHeader from '../UI/SectionHeader'
|
||||
import Badge from './../badge'
|
||||
|
||||
import CodeExamples from './CodeExamples'
|
||||
@@ -6,17 +7,11 @@ const MadeForDevelopers = () => {
|
||||
return (
|
||||
<div className="py-16 bg-gray-50 overflow-hidden lg:py-24">
|
||||
<div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||
<div className="relative mt-12 lg:mt-24 lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
|
||||
<div className="relative col-span-12 text-center">
|
||||
<small>MADE FOR DEVELOPERS</small>
|
||||
<h2 className="text-3xl tracking-tight leading-8 text-gray-900 sm:text-4xl">
|
||||
Supafast easy-to-use APIs that do the hard work for you
|
||||
</h2>
|
||||
<p className="mt-4 max-w-3xl mx-auto text-xl text-gray-500">
|
||||
We inspect your database and provide APIs instantly so you can stop building
|
||||
repetitive CRUD endpoints and focus on your product.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<SectionHeader className="text-center" title={'Supafast easy-to-use APIs'} title_alt={' that do the hard work for you'} subtitle={'MADE FOR DEVELOPERS'} paragraph={'We inspect your database and provide APIs instantly so you can stop building repetitive CRUD endpoints and focus on your product.'} />
|
||||
|
||||
<div className="relative lg:grid lg:grid-cols-12 lg:gap-8 lg:items-center">
|
||||
|
||||
<div className="mt-2 col-span-10 col-start-2">
|
||||
<CodeExamples />
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ const Layout = ({ preview, children }: Props) => {
|
||||
<>
|
||||
<Meta />
|
||||
<Nav />
|
||||
<div className="min-h-screen">
|
||||
<div className="min-h-screen bg-gray-100">
|
||||
<main>{children}</main>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
+316
-54
@@ -1,49 +1,163 @@
|
||||
import React, { useState, useLayoutEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
import FlyOut from './nav/FlyOut'
|
||||
|
||||
import Solutions from './../data/Solutions.json'
|
||||
import Badge from './badge'
|
||||
import Transition from '../lib/Transition'
|
||||
|
||||
const Nav = () => {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
function toggleOpen() {
|
||||
console.log('toggleOpen')
|
||||
setOpen(!open)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if(open) {
|
||||
console.log('open if')
|
||||
// Prevent scrolling on mount
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
const iconSections = Object.values(Solutions).map((solution) => {
|
||||
const { name, description, icon, label, url } = solution
|
||||
|
||||
const content = (
|
||||
<div className="mb-3 flex md:h-full lg:flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-900 text-white sm:h-12 sm:w-12">
|
||||
{/* <!-- Heroicon name: chart-bar --> */}
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
||||
<div>
|
||||
<p className="text-base font-medium text-gray-900">
|
||||
{name} {label && <Badge>{label}</Badge>}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-gray-500">{description}</p>
|
||||
</div>
|
||||
{url && (
|
||||
<p className="mt-2 text-sm font-medium text-brand-600 lg:mt-4">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return url ? (
|
||||
<a
|
||||
href="#"
|
||||
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
|
||||
>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<div className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150">
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
<nav className="bg-white shadow" style={{zIndex: 500}}>
|
||||
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
|
||||
<div className="relative flex justify-between h-16">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
|
||||
|
||||
<button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-expanded="false">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
|
||||
<svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
|
||||
<svg className="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<img className="block lg:hidden h-8 w-auto" src="https://supabase.io/supabase-light.svg" alt="Workflow" />
|
||||
<img className="hidden lg:block h-8 w-auto" src="https://supabase.io/supabase-light.svg" alt="Workflow" />
|
||||
</div>
|
||||
<div className="hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-brand-500 text-sm font-medium text-gray-900">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
||||
Team
|
||||
</a>
|
||||
<a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
||||
Projects
|
||||
</a>
|
||||
<a href="#" className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
||||
Calendar
|
||||
</a>
|
||||
<FlyOut/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
||||
{/* <button className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
|
||||
<nav className="bg-white shadow" style={{ zIndex: 500 }}>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="relative flex justify-between h-16">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 flex items-center sm:hidden"
|
||||
onClick={() => toggleOpen()}
|
||||
>
|
||||
<button
|
||||
className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span className="sr-only">Open main menu</span>
|
||||
|
||||
<svg
|
||||
className="block h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
className="hidden h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<img
|
||||
className="block lg:hidden h-8 w-auto"
|
||||
src="https://supabase.io/supabase-light.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
<img
|
||||
className="hidden lg:block h-8 w-auto"
|
||||
src="https://supabase.io/supabase-light.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
</div>
|
||||
<div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
|
||||
<FlyOut />
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
>
|
||||
Developers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
>
|
||||
Company
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
|
||||
{/* <button className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
|
||||
<span className="sr-only">View notifications</span>
|
||||
|
||||
<svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
@@ -51,8 +165,7 @@ const Nav = () => {
|
||||
</svg>
|
||||
</button> */}
|
||||
|
||||
|
||||
{/* <div className="ml-3 relative">
|
||||
{/* <div className="ml-3 relative">
|
||||
<div>
|
||||
<button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500" id="user-menu" aria-haspopup="true">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
@@ -66,21 +179,170 @@ const Nav = () => {
|
||||
<a href="#" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:hidden">
|
||||
<div className="pt-2 pb-4 space-y-1">
|
||||
<a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-brand-500 text-base font-medium text-brand-700 bg-brand-50">Dashboard</a>
|
||||
<a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Team</a>
|
||||
<a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Projects</a>
|
||||
<a href="#" className="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300">Calendar</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Transition
|
||||
appear={true}
|
||||
show={open}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
|
||||
<div className="p-4 md:p-8 h-full h-screen fixed bg-white transform lg:hidden overflow-y-scroll -inset-y-0" style={{zIndex: 999}}>
|
||||
{/* <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden"> */}
|
||||
<div className="absolute right-4 top-4 items-center justify-between">
|
||||
<div className="-mr-2">
|
||||
<button
|
||||
onClick={() => toggleOpen()}
|
||||
type="button"
|
||||
className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
|
||||
>
|
||||
<span className="sr-only">Close menu</span>
|
||||
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* </div> */}
|
||||
<div className="mt-6 mb-12">
|
||||
<div className="pt-2 pb-4 space-y-1">
|
||||
<a
|
||||
href="#"
|
||||
className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
|
||||
>
|
||||
Product
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
|
||||
>
|
||||
Developers
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
|
||||
>
|
||||
Company
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="block pl-3 pr-4 py-2 text-base font-medium text-gray-600 hover:text-gray-800 hover:bg-gray-50 hover:border-gray-300"
|
||||
>
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<p className="mb-6 text-sm text-gray-400">Products available:</p>
|
||||
{iconSections}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Nav
|
||||
|
||||
|
||||
// <div className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
|
||||
// <div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
|
||||
// <div className="px-5 pt-4 flex items-center justify-between">
|
||||
// <div>
|
||||
// <img
|
||||
// className="h-8 w-auto"
|
||||
// src="https://tailwindui.com/img/logos/workflow-mark-brand-600.svg"
|
||||
// alt=""
|
||||
// />
|
||||
// </div>
|
||||
// <div className="-mr-2">
|
||||
// <button
|
||||
// type="button"
|
||||
// className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-brand-500"
|
||||
// >
|
||||
// <span className="sr-only">Close menu</span>
|
||||
|
||||
// <svg
|
||||
// className="h-6 w-6"
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// fill="none"
|
||||
// viewBox="0 0 24 24"
|
||||
// stroke="currentColor"
|
||||
// aria-hidden="true"
|
||||
// >
|
||||
// <path
|
||||
// strokeLinecap="round"
|
||||
// strokeLinejoin="round"
|
||||
// strokeWidth="2"
|
||||
// d="M6 18L18 6M6 6l12 12"
|
||||
// />
|
||||
// </svg>
|
||||
// </button>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
|
||||
// <div className="px-2 pt-2 pb-3 space-y-1" role="none">
|
||||
// <a
|
||||
// href="#"
|
||||
// className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
// role="menuitem"
|
||||
// >
|
||||
// Product
|
||||
// </a>
|
||||
|
||||
// <a
|
||||
// href="#"
|
||||
// className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
// role="menuitem"
|
||||
// >
|
||||
// Features
|
||||
// </a>
|
||||
|
||||
// <a
|
||||
// href="#"
|
||||
// className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
// role="menuitem"
|
||||
// >
|
||||
// Marketplace
|
||||
// </a>
|
||||
|
||||
// <a
|
||||
// href="#"
|
||||
// className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50"
|
||||
// role="menuitem"
|
||||
// >
|
||||
// Company
|
||||
// </a>
|
||||
// </div>
|
||||
// <div role="none">
|
||||
// <a
|
||||
// href="#"
|
||||
// className="block w-full px-5 py-3 text-center font-medium text-brand-600 bg-gray-50 hover:bg-gray-100"
|
||||
// role="menuitem"
|
||||
// >
|
||||
// Log in
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import Transition from '../../lib/Transition'
|
||||
import Badge from '../badge'
|
||||
|
||||
import Solutions from './../../data/Solutions.json'
|
||||
|
||||
@@ -21,39 +22,51 @@ const FlyOut = () => {
|
||||
}, [])
|
||||
|
||||
const iconSections = Object.values(Solutions).map((solution) => {
|
||||
const { name, description, description_short, icon, label, url } = solution
|
||||
return (
|
||||
const { name, description, icon, label, url } = solution
|
||||
|
||||
const content = (
|
||||
<div className="flex md:h-full lg:flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-900 text-white sm:h-12 sm:w-12">
|
||||
{/* <!-- Heroicon name: chart-bar --> */}
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
||||
<div>
|
||||
<p className="text-base font-medium text-gray-900">
|
||||
{name} {label && <Badge>{label}</Badge>}
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-gray-500">{description}</p>
|
||||
</div>
|
||||
{url && (
|
||||
<p className="mt-2 text-sm font-medium text-brand-600 lg:mt-4">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return url ? (
|
||||
<a
|
||||
href="#"
|
||||
className="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150"
|
||||
>
|
||||
<div className="flex md:h-full lg:flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="inline-flex items-center justify-center h-10 w-10 rounded-md bg-gray-900 text-white sm:h-12 sm:w-12">
|
||||
{/* <!-- Heroicon name: chart-bar --> */}
|
||||
<svg
|
||||
className="h-6 w-6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d={icon} />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
|
||||
<div>
|
||||
<p className="text-base font-medium text-gray-900">{name}</p>
|
||||
<p className="mt-1 text-sm text-gray-500">{description}</p>
|
||||
</div>
|
||||
<p className="mt-2 text-sm font-medium text-brand-600 lg:mt-4">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{content}
|
||||
</a>
|
||||
) : (
|
||||
<div className="-m-3 p-3 flex flex-col justify-between rounded-lg transition ease-in-out duration-150">
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
@@ -64,7 +77,7 @@ const FlyOut = () => {
|
||||
className="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
onClick={() => handleToggle()}
|
||||
>
|
||||
<span>Solutions</span>
|
||||
<span>Product</span>
|
||||
<svg
|
||||
className="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"description": "Store, organize, and serve any amount of assets from anywhere. Any media, including videos of any size and format.",
|
||||
"description_short": "",
|
||||
"label": "Coming soon",
|
||||
"url" : "https://supabase.io/docs"
|
||||
"url" : ""
|
||||
},
|
||||
"functions": {
|
||||
"name": "Functions",
|
||||
@@ -29,6 +29,6 @@
|
||||
"description": "Trigger backend code automatically with database events, without ever worrying about scaling a server.",
|
||||
"description_short": "",
|
||||
"label": "Coming soon Q1 2021",
|
||||
"url" : "https://supabase.io/docs"
|
||||
"url" : ""
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,22 @@ module.exports = {
|
||||
darkMode: 'media', // 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
'sm': '640px',
|
||||
// => @media (min-width: 640px) { ... }
|
||||
|
||||
'md': '768px',
|
||||
// => @media (min-width: 768px) { ... }
|
||||
|
||||
'lg': '1024px',
|
||||
// => @media (min-width: 1024px) { ... }
|
||||
|
||||
'xl': '1280px',
|
||||
// => @media (min-width: 1280px) { ... }
|
||||
|
||||
'2xl': '1536px',
|
||||
// => @media (min-width: 1536px) { ... }
|
||||
},
|
||||
colors: {
|
||||
'accent-1': '#FAFAFA',
|
||||
'accent-2': '#EAEAEA',
|
||||
|
||||
Reference in new issue
Block a user