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

Chore/lwd3 (#10943)

Browse Source 
* day3 first pass

* add hover images for light mode

* preload open day bg image

* add glow per card first pass

* open past days, fix glow placement

* blog link update, light mode glow gradients

* fix title colors
This commit is contained in:
Francisco Mazzoni authored and GitHub committed 2022-12-14 12:26:24 -03:00
1 parent 309d1f554c
commit 54f7aecc5b
6 files changed
+90 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/www/components/LaunchWeek/lw6_days.json
+13 -5
View File
@@ -47,16 +47,24 @@
]
},
{
"title": "Day 3",
"shipped": false,
"title": "Multi-factor Authentication",
"shipped": true,
"date": "14 Dec 2022",
"description": "Day 3",
"description": "Multi-factor Authentication",
"d": 3,
"dd": "Wednesday",
"youtube_id": "6bGQotxisoY",
"youtube_id": "CGZr5tybW18",
"blogpost": "https://supabase.com/blog",
"docs": "https://supabase.com/docs",
"steps": []
"steps": [
{
"title": "Multi-factor Authentication",
"blog": "/blog/mfa-auth-via-rls",
"docs": "/docs/guides/auth/auth-mfa",
"isNew": false,
"description": ""
}
]
},
{
"title": "Day 4",
apps/www/pages/launch-week/index.tsx
+77 -28
View File
@@ -38,7 +38,7 @@ export default function launchweek() {
const { isDarkMode } = useTheme()
const title = 'Launch Week 6'
const description = 'Supabase Launch Week 6 | 12-18 Dec 2022'
const liveDay = 'Tuesday'
const liveDay = 'Wednesday'
const [supabase] = useState(() =>
createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!)
@@ -93,7 +93,7 @@ export default function launchweek() {
const AccordionHeader = ({ date, day, title, shipped }: any) => {
return (
<div className="flex flex-1 flex-col sm:flex-row">
<div className="flex gap-4 min-w-[320px] items-center">
<div className="flex gap-4 min-w-[380px] items-center">
{liveDay === day ? (
<Badge className="bg-gradient-to-r from-[#0E3737C2] to-[#67947F] hover:to-[#39617D94] dark:hover:to-[#A6FFD899] text-whiteA-1200 dark:text-black font-normal !py-1 !px-4 dark:from-white dark:via-white dark:to-[#1a7a4c75] bg-slate-1200 border-[#DFFFF1]">
Currently Happening
@@ -264,7 +264,7 @@ export default function launchweek() {
justified={false}
bordered={false}
chevronAlign="right"
defaultValue={[day2.d.toString()]}
defaultValue={[day1.d.toString(), day2.d.toString(), day3.d.toString()]}
>
<div className="border-b pb-3">
<Accordion.Item
@@ -281,7 +281,15 @@ export default function launchweek() {
id={day1.d.toString()}
>
{day1.steps.length > 0 && (
<div className="h-[400px] flex flex-col lg:flex-row">
<div className="h-[400px] flex flex-col lg:flex-row group/day1 relative overflow-hidden">
<div
className="absolute group-hover/day1:scale-105 opacity-60 group-hover/day1:opacity-100 w-full h-full -z-10 transition-all duration-500"
style={{
background: `radial-gradient(650px 150px at 50% 100%, ${
isDarkMode ? '#103633' : '#b8e8e7'
}, transparent)`,
}}
></div>
<div
className={`flex flex-col flex-1 items-center gap-5 lg:items-start lg:justify-between border rounded-xl h-full relative overflow-hidden after:opacity- after:absolute after:bg-no-repeat after:bg-[center_bottom] lg:after:bg-[right_15%_top_100px] xl:after:bg-[right_15%_top_60px] after:bg-[length:300px_180px] after:lg:bg-[length:450px_300px] after:xl:bg-[length:528px_367px] after:bg-[url('/images/launchweek/docs-update-bg.png')] after:top-0 after:right-0 after:bottom-0 after:left-0 p-14 text-2xl before:absolute before:w-full before:h-full before:top-52 before:right-0 before:bottom-0 before:left-0 before:border-[#1f3536] before:-z-10 !px-3 sm:!px-14`}
>
@@ -291,7 +299,6 @@ export default function launchweek() {
Redesigned
</Badge>
</div>
<SectionButtons
docs={day1.steps[0].docs}
blog={day1.steps[0].blog}
@@ -321,8 +328,16 @@ export default function launchweek() {
{day2.steps.length > 0 && (
<div className="h-[800px] lg:h-[400px] flex flex-col gap-5 lg:flex-row">
<div
className={`flex-1 flex flex-col items-center gap-5 lg:items-start justify-between basis-1/2 lg:basis-2/3 border rounded-xl h-full p-14 xs:text-2xl text-xl text-center bg-no-repeat bg-[url('/images/launchweek/image-processing-bg-light-alt.png')] xs:bg-[url('/images/launchweek/image-processing-bg-light.png')] dark:bg-[url('/images/launchweek/image-processing-bg-alt.png')] xs:dark:bg-[url('/images/launchweek/image-processing-bg.png')] bg-[right_30px_top_35px] lg:bg-[top_25px_right_25px] bg-contain`}
className={`relative overflow-hidden group/2 flex-1 flex flex-col items-center gap-5 lg:items-start justify-between basis-1/2 lg:basis-2/3 border rounded-xl h-full p-14 xs:text-2xl text-xl text-center bg-no-repeat bg-[url('/images/launchweek/image-processing-bg-light-alt.png')] xs:bg-[url('/images/launchweek/image-processing-bg-light.png')] dark:bg-[url('/images/launchweek/image-processing-bg-alt.png')] xs:dark:bg-[url('/images/launchweek/image-processing-bg.png')] bg-[right_30px_top_35px] lg:bg-[top_25px_right_25px] bg-contain`}
>
<div
className="top-0 absolute group-hover/2:scale-105 opacity-60 group-hover/2:opacity-100 w-full h-full -z-10 transition-all duration-500"
style={{
background: `radial-gradient(90% 130px at 80% 0px, ${
isDarkMode ? '#103633' : '#b8e8e7'
}, transparent)`,
}}
></div>
<div className="flex items-center justify-between flex-col-reverse lg:flex-row lg:justify-start gap-2 text-black dark:text-white">
<div>{day2.steps[0].title}</div>
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
@@ -332,8 +347,16 @@ export default function launchweek() {
<SectionButtons docs={day2.steps[0].docs} blog={day2.steps[0].blog} />
</div>
<div
className={`flex-1 flex flex-col items-center justify-between basis-1/2 lg:basis-1/3 border rounded-xl h-full bg-no-repeat p-14 text-2xl bg-[url('/images/launchweek/cdn-caching-bg-light.png')] dark:bg-[url('/images/launchweek/cdn-caching-bg.png')] bg-[top_170px_center] lg:bg-[center_bottom] bg-contain`}
className={`relative overflow-hidden group/3 flex-1 flex flex-col items-center justify-between basis-1/2 lg:basis-1/3 border rounded-xl h-full bg-no-repeat p-14 text-2xl bg-[url('/images/launchweek/cdn-caching-bg-light.png')] dark:bg-[url('/images/launchweek/cdn-caching-bg.png')] bg-[top_170px_center] lg:bg-[center_bottom] bg-contain`}
>
<div
className="top-0 absolute group-hover/3:scale-105 opacity-60 group-hover/3:opacity-100 w-full h-full -z-10 transition-all duration-500"
style={{
background: `radial-gradient(90% 130px at 50% 0px, ${
isDarkMode ? '#103633' : '#b8e8e7'
}, transparent)`,
}}
></div>
<div className="flex flex-col items-center gap-2 min-w-[300px]">
<Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
New
@@ -364,30 +387,44 @@ export default function launchweek() {
id={day3.d.toString()}
>
{day3.steps.length > 0 && (
<div className="h-[800px] lg:h-[400px] flex flex-col gap-5 lg:flex-row">
<div className="h-[400px] flex gap-5 group">
<div
className={`flex flex-col justify-between flex-1 basis-1/2 lg:basis-2/3 border rounded-xl h-full p-14 text-2xl bg-no-repeat bg-contain bg-[url('/images/launchweek/vault-bg-light.png')] dark:bg-[url('/images/launchweek/vault-bg.png')] bg-[center_bottom]`}
className={`flex flex-col text-center items-center lg:items-start justify-between flex-1 border rounded-xl h-full bg-no-repeat p-14 text-2xl relative`} // bg-[url('/images/launchweek/mfa-bg-light.png')] dark:bg-[url('/images/launchweek/mfa-bg.png')] bg-[bottom_right_30%] bg-contain
>
<div className="flex items-center">
<div className="absolute top-0 right-0 w-full h-full -z-20 ">
<Image
src={
isDarkMode
? '/images/launchweek/mfa-dark.png'
: '/images/launchweek/mfa-light.png'
}
layout="fill"
objectFit="cover"
quality={100}
priority
/>
</div>
<div className="absolute top-0 right-0 w-full h-full -z-10 opacity-0 group-hover:opacity-100 duration-500 transition-all">
<Image
src={
isDarkMode
? '/images/launchweek/mfa-dark-hover.png'
: '/images/launchweek/mfa-light-hover.png'
}
layout="fill"
objectFit="cover"
quality={100}
/>
</div>
<div className="flex items-center justify-between flex-col-reverse lg:flex-row lg:justify-start text-black dark:text-white">
<span>{day3.steps[0].title}</span>
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#598973]">
New
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#DFFFF1]">
Updated
</Badge>
</div>
<SectionButtons docs={day3.steps[0].docs} blog={day3.steps[0].blog} />
</div>
<div
className={`flex-1 flex flex-col items-center justify-between basis-1/2 lg:basis-1/3 border rounded-xl h-full bg-no-repeat p-14 text-2xl bg-[url('/images/launchweek/encryption-bg-light.png')] dark:bg-[url('/images/launchweek/encryption-bg.svg')] bg-contain bg-[center_center] shadow-[inset_0px_130px_50px_-52p_rgb(10,31,30)]`}
>
{/* inset 0px 130px 50px -52px #121f1e; */}
<div className="flex flex-col items-center gap-2 min-w-[300px]">
<Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#598973]">
New
</Badge>
<span className="text-center">{day3.steps[1].title}</span>
</div>
<SectionButtons docs={day3.steps[1].docs} blog={day3.steps[1].blog} />
</div>
</div>
)}
</Accordion.Item>
@@ -407,18 +444,30 @@ export default function launchweek() {
id={day4.d.toString()}
>
{day4.steps.length > 0 && (
<div className="h-[400px] flex gap-5">
<div className="h-[800px] lg:h-[400px] flex flex-col gap-5 lg:flex-row">
<div
className={`flex flex-col justify-between flex-1 border rounded-xl h-full bg-no-repeat p-14 text-2xl bg-[url('/images/launchweek/mfa-bg-light.png')] dark:bg-[url('/images/launchweek/mfa-bg.png')] bg-[bottom_right_30%] bg-contain`}
className={`flex flex-col justify-between flex-1 basis-1/2 lg:basis-2/3 border rounded-xl h-full p-14 text-2xl bg-no-repeat bg-contain bg-[url('/images/launchweek/vault-bg-light.png')] dark:bg-[url('/images/launchweek/vault-bg.png')] bg-[center_bottom]`}
>
<div className="flex items-center">
<span>{day4.steps[0].title}</span>
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-white to-[#1a7a4ca1] border-[#598973]">
Updated
<Badge className="!bg-transparent h-fit ml-4 text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#598973]">
New
</Badge>
</div>
<SectionButtons docs={day4.steps[0].docs} blog={day4.steps[0].blog} />
</div>
<div
className={`flex-1 flex flex-col items-center justify-between basis-1/2 lg:basis-1/3 border rounded-xl h-full bg-no-repeat p-14 text-2xl bg-[url('/images/launchweek/encryption-bg-light.png')] dark:bg-[url('/images/launchweek/encryption-bg.svg')] bg-contain bg-[center_center] shadow-[inset_0px_130px_50px_-52p_rgb(10,31,30)]`}
>
{/* inset 0px 130px 50px -52px #121f1e; */}
<div className="flex flex-col items-center gap-2 min-w-[300px]">
<Badge className="!bg-transparent h-fit text-sm !py-1 !px-4 text-transparent bg-clip-text bg-gradient-to-r from-[#99bbab] to-[#396f55] border-[#598973] dark:from-white dark:to-[#1a7a4ca1] dark:border-[#598973]">
New
</Badge>
<span className="text-center">{day4.steps[1].title}</span>
</div>
<SectionButtons docs={day4.steps[1].docs} blog={day4.steps[1].blog} />
</div>
</div>
)}
</Accordion.Item>
apps/www/public/images/launchweek/mfa-dark-hover.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

apps/www/public/images/launchweek/mfa-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

apps/www/public/images/launchweek/mfa-light-hover.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 KiB

apps/www/public/images/launchweek/mfa-light.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB