mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Add new shade of black and update articlethumb cards
This commit is contained in:
Joshen Lim committed
1 parent
386219a161
commit
f32bb6a310
12 files changed
+72
-82
No files matched your search
@@ -6,7 +6,7 @@ const AdminAccess = () => {
|
||||
const [tabId, setTabId] = useState('tabTableEditor')
|
||||
|
||||
return (
|
||||
<div className="py-16 bg-gray-50 dark:bg-dark-100 overflow-hidden lg:py-24">
|
||||
<div className="py-16 bg-gray-50 dark:bg-dark-200 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 items-center">
|
||||
<div className="relative">
|
||||
@@ -15,22 +15,20 @@ const AdminAccess = () => {
|
||||
title_alt={' without leaving the dashboard'}
|
||||
subtitle={'Admin Access'}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-52 items-center">
|
||||
<div className="grid grid-cols-2 gap-40 items-center">
|
||||
<Tabs
|
||||
tabId={tabId}
|
||||
setTabId={setTabId}
|
||||
/>
|
||||
<div className="shadow-lg">
|
||||
<div className="w-full rounded-t-md h-5 bg-dark-200 flex items-center justify-start px-2">
|
||||
<div className="h-2 w-2 mr-2 rounded-full bg-dark-300"/>
|
||||
<div className="h-2 w-2 mr-2 rounded-full bg-dark-300"/>
|
||||
<div className="h-2 w-2 mr-2 rounded-full bg-dark-300"/>
|
||||
<div className="w-full rounded-t-md h-5 bg-dark-300 flex items-center justify-start px-2">
|
||||
<div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
|
||||
<div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
|
||||
<div className="h-2 w-2 mr-2 rounded-full bg-dark-400"/>
|
||||
</div>
|
||||
<div className="bg-dark-100" style={{height: 305}}>
|
||||
<video className="rounded-b-md" src={`videos/${tabId}.mp4`} autoPlay loop muted>
|
||||
Your browser does not support the video tag
|
||||
</video>
|
||||
</div>
|
||||
<video className="rounded-b-md" src={`videos/${tabId}.mp4`} autoPlay loop muted>
|
||||
Your browser does not support the video tag
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,13 +21,9 @@ const ArticleThumb = (props: any) => {
|
||||
// avatar_url :string;
|
||||
// }
|
||||
|
||||
// console.log(props.article)
|
||||
|
||||
// @ts-ignore
|
||||
const AuthorProfile: User = Authors[author]
|
||||
|
||||
// console.log(AuthorProfile)
|
||||
|
||||
const iconMarkup = icons && icons.map((icon :any) => {
|
||||
return (
|
||||
<img
|
||||
@@ -39,11 +35,8 @@ const ArticleThumb = (props: any) => {
|
||||
)
|
||||
})
|
||||
|
||||
// console.log(icons)
|
||||
// console.log(iconMarkup)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col rounded-sm shadow-lg overflow-hidden">
|
||||
<div className="flex flex-col rounded-md shadow-lg overflow-hidden">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="h-48 w-full object-cover"
|
||||
@@ -51,56 +44,56 @@ const ArticleThumb = (props: any) => {
|
||||
alt={title}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
|
||||
<div className="flex-1 bg-white p-6 flex flex-col justify-between dark:bg-dark-600">
|
||||
<div className="flex-1">
|
||||
{icons && (
|
||||
<div className="-mt-12 mb-6 flex -space-x-3">
|
||||
{iconMarkup}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm font-medium text-gray-600">
|
||||
<p className="text-sm font-medium text-gray-600 dark:text-dark-100">
|
||||
<a href="#" className="hover:underline capitalize">
|
||||
{type}
|
||||
</a>
|
||||
</p>
|
||||
<a href="#" className="block mt-2">
|
||||
<p className="text-xl text-gray-900">{title}</p>
|
||||
<p className="mt-3 text-base text-gray-500">
|
||||
<p className="text-xl text-gray-900 dark:text-white">{title}</p>
|
||||
<p className="mt-3 text-base text-gray-500 dark:text-dark-100">
|
||||
{description}
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{ AuthorProfile && (
|
||||
<div className="mt-6 flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<a href="#">
|
||||
<span className="sr-only">{AuthorProfile.name}</span>
|
||||
<img
|
||||
className="h-10 w-10 rounded-full"
|
||||
src={AuthorProfile.avatar_url}
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
<a href="#" className="hover:underline">
|
||||
{AuthorProfile.name}
|
||||
<div className="mt-6 flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<a href="#">
|
||||
<span className="sr-only">{AuthorProfile.name}</span>
|
||||
<img
|
||||
className="h-10 w-10 rounded-full"
|
||||
src={AuthorProfile.avatar_url}
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</p>
|
||||
<div className="flex space-x-1 text-sm text-gray-500">
|
||||
<time dateTime="2020-03-16">Mar 16, 2020</time>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>6 min read</span>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
||||
<a href="#" className="hover:underline">
|
||||
{AuthorProfile.name}
|
||||
</a>
|
||||
</p>
|
||||
<div className="flex space-x-1 text-sm text-gray-500 dark:text-dark-100">
|
||||
<time dateTime="2020-03-16">Mar 16, 2020</time>
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>6 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{ cta && (
|
||||
<div className="mt-6 flex items-center">
|
||||
<a href={url}>Learn more</a>
|
||||
)}
|
||||
{ cta && (
|
||||
<div className="mt-6 flex items-center text-sm text-brand-600">
|
||||
<a href={url}>{AuthorProfile ? 'Learn more' : 'View Project'}</a>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -4,7 +4,7 @@ const Benchmark = () => {
|
||||
return (
|
||||
<>
|
||||
{/* Figma ref */}
|
||||
<div className="bg-white dark:bg-dark-100 pt-16 pb-4 px-4 sm:px-6 lg:px-8">
|
||||
<div className="bg-white dark:bg-dark-200 pt-16 pb-4 px-4 sm:px-6 lg:px-8">
|
||||
<div className="bg-white grid grid-cols-12 gap-4 items-center shadow-lg rounded-md">
|
||||
<div className="w-full h-full col-span-2 bg-gray-700 rounded-l-md flex items-center justify-center">
|
||||
<img className="w-3/4" src="images/benchmark.svg" />
|
||||
@@ -24,7 +24,7 @@ const Benchmark = () => {
|
||||
</div>
|
||||
|
||||
{/* Other */}
|
||||
<div className="bg-white dark:bg-dark-100">
|
||||
<div className="bg-white dark:bg-dark-200">
|
||||
<div className="mx-auto py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="bg-gray-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-12 lg:gap-4">
|
||||
<div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20 col-span-8">
|
||||
|
||||
@@ -5,9 +5,9 @@ import ProjectExamples from "data/ProjectExamples.json"
|
||||
const BuiltExamples = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="relative bg-gray-50 dark:bg-dark-100 py-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-16">
|
||||
<div className="relative bg-gray-50 dark:bg-dark-200 py-16 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-16">
|
||||
<div className="absolute inset-0">
|
||||
<div className="bg-white dark:bg-dark-100 h-1/3 sm:h-2/3"></div>
|
||||
<div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<SectionHeader
|
||||
|
||||
@@ -6,9 +6,9 @@ const CaseStudies = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="relative bg-gray-50 dark:bg-dark-200 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div className="relative bg-gray-50 dark:bg-dark-300 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
|
||||
<div className="absolute inset-0">
|
||||
<div className="bg-white dark:bg-dark-200 h-1/3 sm:h-2/3"></div>
|
||||
<div className="bg-white dark:bg-dark-300 h-1/3 sm:h-2/3"></div>
|
||||
</div>
|
||||
<div className="relative max-w-7xl mx-auto">
|
||||
<div>
|
||||
|
||||
@@ -31,7 +31,7 @@ const Features = () => {
|
||||
</div>
|
||||
{url && (
|
||||
<div className="mt-5">
|
||||
<dd className="mt-2 text-sm text-brand-600 underline">Learn more link</dd>
|
||||
<dd className="mt-2 text-sm text-brand-600">Learn more link</dd>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -39,7 +39,7 @@ const Features = () => {
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 dark:bg-dark-200 overflow-hidden py-12 sm:px-6 lg:px-16">
|
||||
<div className="bg-gray-50 dark:bg-dark-300 overflow-hidden py-12 sm:px-6 lg:px-16">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<SectionHeader
|
||||
title={'Build Faster'}
|
||||
|
||||
@@ -2,7 +2,7 @@ import FooterLinks from "data/Footer.json"
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="bg-white dark:bg-dark-300" aria-labelledby="footerHeading">
|
||||
<footer className="bg-white dark:bg-dark-400" aria-labelledby="footerHeading">
|
||||
<h2 id="footerHeading" className="sr-only">Footer</h2>
|
||||
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
|
||||
|
||||
@@ -26,10 +26,12 @@ const CodeExamples = () => {
|
||||
type="button"
|
||||
key={id + "-button"}
|
||||
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-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200')
|
||||
}
|
||||
className={`
|
||||
m-1 mb-4 rounded-md border border-gray-200 px-4 py-2 text-base font-medium text-gray transition
|
||||
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-transparent sm:w-auto sm:text-sm
|
||||
${example === id ? ' border-gray-900 bg-gray-900 text-white' : ' hover:bg-gray-200 dark:hover:text-black'}
|
||||
dark:text-white
|
||||
`}
|
||||
>
|
||||
{
|
||||
// @ts-ignore
|
||||
|
||||
@@ -4,7 +4,7 @@ import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
|
||||
|
||||
const MadeForDevelopers = () => {
|
||||
return (
|
||||
<div className="py-16 bg-gray-50 dark:bg-dark-200 overflow-hidden lg:py-16">
|
||||
<div className="py-16 bg-gray-50 dark:bg-dark-300 overflow-hidden lg:py-16">
|
||||
<div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
|
||||
|
||||
<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.'} />
|
||||
@@ -19,15 +19,15 @@ const MadeForDevelopers = () => {
|
||||
<dl className="mt-12 space-y-10 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-12 col-span-8 col-start-3">
|
||||
<div className="lg:border-r-2 lg:border-gray-200 pr-6">
|
||||
<div className="mt-5">
|
||||
<dt className="text-lg leading-6 font-medium text-gray-900">
|
||||
<dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
|
||||
TypeScript support
|
||||
</dt>
|
||||
<dd className="mt-2 text-base text-gray-500 mb-6">
|
||||
<dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
|
||||
Type definitions for both server side and client side
|
||||
</dd>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center text-xs font-medium rounded text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
|
||||
className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
|
||||
>
|
||||
Explore more
|
||||
</button>
|
||||
@@ -36,16 +36,16 @@ const MadeForDevelopers = () => {
|
||||
|
||||
<div>
|
||||
<div className="mt-5">
|
||||
<dt className="text-lg leading-6 font-medium text-gray-900 flex">
|
||||
<dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex">
|
||||
Local emulator
|
||||
<Badge>Coming Q1 2021</Badge>
|
||||
</dt>
|
||||
<dd className="mt-2 text-base text-gray-500 mb-6">
|
||||
<dd className="mt-2 text-base text-gray-500 mb-6 dark:text-dark-100">
|
||||
Develop locally and push to production when you're ready
|
||||
</dd>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center text-xs font-medium rounded text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
|
||||
className="inline-flex items-center text-xs font-medium rounded transition text-brand-600 hover:text-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500"
|
||||
>
|
||||
Get notified
|
||||
</button>
|
||||
|
||||
@@ -122,7 +122,7 @@ const Nav = () => {
|
||||
)
|
||||
|
||||
return (
|
||||
<nav className="bg-white dark:bg-dark-300 z-50 shadow-lg sticky">
|
||||
<nav className="bg-white dark:bg-dark-400 z-50 shadow-lg sticky">
|
||||
<div className="container mx-auto relative flex justify-between h-16">
|
||||
|
||||
<HamburgerButton toggleFlyOut={() => setOpen(true)} />
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import Link from 'next/link'
|
||||
import Button from 'components/button'
|
||||
|
||||
const Hero = () => {
|
||||
return (
|
||||
<div className="relative bg-dark-300 overflow-hidden px-16">
|
||||
<div className="relative bg-dark-400 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"
|
||||
@@ -45,13 +46,7 @@ const Hero = () => {
|
||||
Storage and serverless functions coming soon
|
||||
</p>
|
||||
|
||||
<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">
|
||||
Start your project
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="mt-10 py-3" text="Start your project" url="#"/>
|
||||
|
||||
<p className="mt-8 text-sm text-gray-400 tracking-wide sm:mt-10">
|
||||
backed by
|
||||
|
||||
@@ -37,10 +37,12 @@ module.exports = {
|
||||
'900': '#1C583D',
|
||||
},
|
||||
dark: {
|
||||
100: '#3A3A3A',
|
||||
200: '#292929',
|
||||
300: '#202020',
|
||||
400: '#1E1E1E',
|
||||
100: '#828282',
|
||||
200: '#3A3A3A',
|
||||
300: '#292929',
|
||||
400: '#202020',
|
||||
500: '#1E1E1E',
|
||||
600: '#424242',
|
||||
},
|
||||
// Joshen: Adding our Figma palette here
|
||||
neutral: {
|
||||
|
||||
Reference in new issue
Block a user