Skip to content

Commit c235769

Browse files
kemaldotearthkemaldotearth
authored
fix(www): brand asset page tidy up (supabase#40319)
feat: quick brand asset page revamp
1 parent ac6db41 commit c235769

File tree

1 file changed

+48
-48
lines changed

1 file changed

+48
-48
lines changed

‎apps/www/pages/brand-assets.tsx‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { Download } from 'lucide-react'
1111
import { NextSeo } from 'next-seo'
1212
import Image from 'next/image'
1313
import SectionContainer from '~/components/Layouts/SectionContainer'
14+
import Link from 'next/link'
1415

1516
const Index = () => {
1617
// base path for images
@@ -38,82 +39,81 @@ const Index = () => {
3839
<Layout>
3940
<Container>
4041
<SectionContainer className="pb-0 md:pb-0 lg:pb-0">
41-
<div className="max-w-xl">
42-
<h1 className="text-foreground text-5xl">Brand assets</h1>
43-
<p className="text-foreground text-2xl">Download official Supabase logos</p>
44-
<p className="text-foreground text-sm">
42+
<h1 className="h1">Brand assets</h1>
43+
<p className="text-foreground text-xl">Download official Supabase logos</p>
44+
<div className="mt-2 sm:max-w-xl max-w-none">
45+
<p className="text-foreground-lighter text-sm">
4546
All Supabase trademarks, logos, or other brand elements can never be modified or
4647
used for any other purpose other than to represent Supabase Inc.
4748
</p>
4849
</div>
4950
</SectionContainer>
50-
<SectionContainer>
51-
<div className="shadow-small grid grid-cols-12 rounded-lg border border-default">
52-
<div className="relative col-span-12 h-60 w-full overflow-auto rounded-lg lg:col-span-5">
51+
<SectionContainer className="grid grid-cols-1 md:grid-cols-2 gap-5 lg:pt-12">
52+
<div className="shadow-small flex flex-col rounded-lg border border-default bg-surface-75 overflow-hidden">
53+
<div className="relative aspect-video w-full overflow-auto border-b">
5354
<Image
5455
src={supabaseLogoPreview}
5556
alt="Supabase logo Preview"
5657
layout="fill"
5758
objectFit="cover"
5859
/>
5960
</div>
60-
<div className="col-span-12 flex items-center lg:col-span-7">
61-
<div className="p-16">
61+
<div className="flex items-center p-5">
62+
<div className="gap-y-4 flex flex-col h-full justify-between">
6263
<div className="space-y-2">
63-
<h1 className="text-foreground text-4xl">Supabase logos</h1>
64-
<p className="text-foreground-light text-sm">
65-
<p>
66-
Download Supabase official logos, including as SVG's, in both light and dark
67-
theme.
68-
</p>
69-
<p>Do not use any other color for the wordmark.</p>
64+
<h3 className="h3">Supabase logos</h3>
65+
<p className="text-foreground-lighter text-sm">
66+
Download Supabase official logos, including as SVG's, in both light and dark
67+
theme.
68+
</p>
69+
<p className="text-foreground-lighter text-sm">
70+
Do not use any other color for the wordmark.
7071
</p>
71-
<form method="get" action={`/brand-assets.zip`}>
72-
<Button htmlType="submit" type="default" iconRight={<Download />}>
73-
Download logo kit
74-
</Button>
75-
</form>
7672
</div>
73+
<form method="get" action={`/brand-assets.zip`} className="mt-3">
74+
<Button htmlType="submit" type="default" iconRight={<Download />}>
75+
Download logo kit
76+
</Button>
77+
</form>
7778
</div>
7879
</div>
7980
</div>
80-
</SectionContainer>
81-
<SectionContainer className="sm:pt-0 md:pt-0 lg:pt-0 xl:pt-0">
82-
<div className="shadow-small grid grid-cols-12 rounded-lg border border-default">
83-
<div className="relative col-span-12 h-60 w-full overflow-auto rounded-lg lg:col-span-5 flex items-center justify-center">
81+
<div className="shadow-small flex flex-col rounded-lg border border-default bg-surface-75 overflow-hidden">
82+
<div className="relative aspect-video w-full overflow-auto flex items-center justify-center border-b">
8483
<Image
8584
src="https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase-dark.svg"
8685
alt="Connect Supabase Button"
8786
width={154}
8887
height={31}
8988
/>
9089
</div>
91-
<div className="col-span-12 flex items-center lg:col-span-7">
92-
<div className="p-16">
90+
<div className="flex items-center p-5">
91+
<div className="gap-y-4 flex flex-col h-full justify-between">
9392
<div className="space-y-2">
94-
<h1 className="text-foreground text-4xl">Supabase Integrations</h1>
95-
<p className="text-foreground-light text-sm">
96-
<p>
97-
When building a{' '}
98-
<a
99-
className="underline"
100-
href="/docs/guides/platform/oauth-apps/build-a-supabase-integration"
101-
>
102-
Supabase Integration
103-
</a>
104-
, use this "Connect Supabase" button to initiate the OAuth redirect.
105-
</p>
106-
<p>Do not use any other color for the wordmark.</p>
93+
<h3 className="h3">Supabase Integrations</h3>
94+
<p className="text-foreground-lighter text-sm">
95+
When building a{' '}
96+
<Link
97+
className="text-brand underline"
98+
href="/docs/guides/platform/oauth-apps/build-a-supabase-integration"
99+
>
100+
Supabase Integration
101+
</Link>
102+
, use this "Connect Supabase" button to initiate the OAuth redirect.
103+
</p>
104+
<p className="text-foreground-lighter text-sm">
105+
Do not use any other color for the wordmark.
107106
</p>
108-
<form
109-
method="get"
110-
action={`https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase.zip`}
111-
>
112-
<Button htmlType="submit" type="default" iconRight={<Download />}>
113-
Download button kit
114-
</Button>
115-
</form>
116107
</div>
108+
<form
109+
method="get"
110+
action={`https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/supabase-brand-assets/connect-supabase/connect-supabase.zip`}
111+
className="mt-3"
112+
>
113+
<Button htmlType="submit" type="default" iconRight={<Download />}>
114+
Download button kit
115+
</Button>
116+
</form>
117117
</div>
118118
</div>
119119
</div>

0 commit comments

Comments
 (0)