dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-11 12:25:05 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: add more typography components

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2021-02-10 16:07:51 +08:00
1 parent 04d97945ab
commit 247eb28d2a
4 files changed
+39 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

www/components/CTABanner/index.tsx
+7 -9
View File
@@ -1,4 +1,4 @@
import { Button } from '@supabase/ui'
import { Button, Typography } from '@supabase/ui'
const CTABanner = (props: any) => {
const { darkerBg } = props
@@ -10,16 +10,14 @@ const CTABanner = (props: any) => {
`}
>
<div className="col-span-12">
<h4 className="flex flex-col sm:flex-row sm:justify-center font-normal text-white text-2xl lg:text-3xl">
<span className="block">Build in a weekend, scale to millions.</span>
</h4>
{/* <p className="font-normal mt-1 text-gray-500 dark:text-dark-100 lg:text-3xl">
Build in a weekend, scale to millions.
</p> */}
<Typography.Title level={2}>
<span style={{ color: '#bbbbbb' }}>Build in a weekend,</span>
<span style={{ color: '#ffffff' }}> scale to millions</span>
</Typography.Title>
</div>
<div className="col-span-12">
<div className="col-span-12 mt-4">
<a href="https://app.supabase.io/api/login">
<Button>Start your project</Button>
<Button size="medium">Start your project</Button>
</a>
</div>
</div>
www/components/CaseStudies/benchmark.tsx
+9 -6
View File
@@ -1,4 +1,4 @@
import { Button } from '@supabase/ui'
import { Button, Typography } from '@supabase/ui'
import { useRouter } from 'next/router'
const Benchmark = () => {
@@ -16,15 +16,18 @@ const Benchmark = () => {
src={`${basePath}/images/benchmark--mobile.svg`}
/>
<div className="px-12 py-5 lg:px-0 lg:py-0">
<p className="text-xl text-white">Built for speed and reliability</p>
<p className="text-dark-300 mt-2">
<span className="block">
{/* <p className="text-xl text-white">Built for speed and reliability</p> */}
<Typography.Title level={4}>
<span className="text-white">Built for speed and reliability</span>
</Typography.Title>
<Typography.Text type="secondary">
<span className="block text-gray-300">
Supabase outperforms equivalent systems by more than 300%.
</span>
<span className="block">
<span className="block text-gray-300">
Sign up for our public benchmark release and we'll send it to your inbox.
</span>
</p>
</Typography.Text>
</div>
</div>
<div className="pb-12 px-12 col-span-1 lg:pb-0 lg:px-0 lg:col-span-2 rounded-r-md">
www/components/Hero.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { Button } from '@supabase/ui'
import { Button, Typography } from '@supabase/ui'
import { useRouter } from 'next/router'
const Hero = () => {
@@ -38,7 +38,7 @@ const Hero = () => {
<div className="md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex lg:items-center">
<div className="sm:mx-auto md:w-3/4 lg:w-full lg:mx-0">
<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="block">The Open Source</span>
<span className="block text-white">The Open Source</span>
<span className="text-brand-600 md:ml-0 block">Firebase Alternative</span>
</h1>
<p className="mt-5 text-base text-dark-200 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
www/components/MadeForDevelopers/index.tsx
+21 -14
View File
@@ -1,5 +1,6 @@
import Button from 'components/Button'
import Badge from 'components/Badge'
// import Button from 'components/Button'
// import Badge from 'components/Badge'
import { Badge, Button, Typography } from '@supabase/ui'
import SectionHeader from 'components/UI/SectionHeader'
import CodeExamples from 'components/MadeForDevelopers/CodeExamples'
@@ -36,22 +37,28 @@ const MadeForDevelopers = () => {
return (
<div className={blockClass} key={`dev_feature_${idx}`}>
<div className="lg:mt-5">
<dt className="text-lg leading-6 font-medium text-gray-900 dark:text-white flex flex-row sm:flex-col xl:flex-row">
{feature.name}
<dt className="flex flex-row sm:flex-col xl:flex-row">
<Typography.Title level={4}>{feature.name}</Typography.Title>
{feature.badge && (
<Badge className="ml-3 sm:ml-0 sm:w-20 sm:mt-2 xl:ml-3 xl:mt-0 xl:w-auto">
{feature.badge}
</Badge>
<div className="block xl:ml-3">
<Badge
dot
// className="ml-3 sm:ml-0 sm:w-20 sm:mt-2 xl:ml-3 xl:mt-0 xl:w-auto"
>
{feature.badge}
</Badge>
</div>
)}
</dt>
<dd className="mt-3 text-base text-gray-500 mb-6 dark:text-dark-300">
{feature.description}
<dd className="my-3">
<Typography.Text type="secondary">
{feature.description}
</Typography.Text>
</dd>
<Button
type="secondary"
text={feature.badge ? 'Get notified' : 'Explore more'}
url={feature.url}
/>
<Typography.Link href={feature.url}>
{feature.badge ? 'Get notified' : 'Explore more'}
</Typography.Link>
</div>
</div>
)