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

Merge branch 'thor/lw7-tickets-referrals' of github.com:supabase/supabase into thor/lw7-tickets-referrals

Browse Source
This commit is contained in:
Terry Sutton committed 2023-03-06 09:37:25 -03:30
2 parents 292e90f5ea 2c3aa9e9b0
commit 32e647df49
11 files changed
+112 -110
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/www/components/LaunchWeek/LW7BgGraphic.tsx
+3 -3
View File
@@ -9,18 +9,18 @@ export default function LW7BgGraphic() {
// Map scrollYProgress from these values:
[0, 0.5],
// Into these scale values:
[1, 1.8]
[1, 1.4]
)
const graphicsY = useTransform(
scrollYProgress,
// Map scrollYProgress from these values:
[0, 0.5],
// Into these values:
[0, 120]
[0, 200]
)
return (
<div className="relative h-[640px] overflow-hidden before:content[' '] before:absolute before:bottom-0 before:h-[400px] before:z-20 before:w-full before:bg-gradient-to-t before:from-[#1C1C1C] before:via-[#1C1C1C40] before:to-transparent">
<div className="relative h-[700px] overflow-hidden before:content[' '] before:absolute before:bottom-0 before:h-[400px] before:z-20 before:w-full before:bg-gradient-to-t before:from-[#1C1C1C] before:via-[#1C1C1C40] before:to-transparent">
<motion.div
className="absolute bottom-0 w-full h-full"
style={{
apps/www/components/LaunchWeek/LaunchSection/LaunchWeekLogoHeader.tsx
+2 -2
View File
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
export function LaunchWeekLogoHeader() {
return (
<div className="flex flex-col gap-3 items-center justify-center xl:justify-start">
<div className="flex flex-col gap-1 lg:gap-3 items-center justify-center xl:justify-start">
<motion.div
className={classNames(
styleUtils.appear,
@@ -16,7 +16,7 @@ export function LaunchWeekLogoHeader() {
animate={{ y: 0, opacity: 1 }}
transition={{ ease: 'circOut', delay: 0.2, duration: 0.8 }}
>
<h1 className="flex gap-[24px] justify-center font-normal uppercase text-[32px] items-center">
<h1 className="flex gap-[24px] justify-center font-normal uppercase text-[28px] md:text-[32px] items-center">
<span className="tracking-[4px] text-white">Launch week</span>
<span className="flex justify-center">
<Image src="/images/launchweek/seven/lw7-seven.svg" width={40} height={40} />
apps/www/components/LaunchWeek/Ticket/ActualTicket.tsx
+3 -2
View File
@@ -61,7 +61,7 @@ export default function Ticket({
return (
<div
className="grid grid-cols-1 xl:grid-cols-12 gap-8 xl:gap-8 2xl:gap-16 p-2 bg-[#a988d748] rounded-2xl items-stretch h-auto"
className="w-full max-w-[800px] xl:max-w-[1100px] flex flex-col items-center xl:grid xl:grid-cols-12 gap-4 xl:gap-8 2xl:gap-16 p-2 bg-[#a988d748] rounded-2xl xl:items-stretch h-auto"
id="wayfinding--ticket-visual-wrapper-container"
>
<div
@@ -113,12 +113,13 @@ export default function Ticket({
</div>
<div
ref={divRef}
className="flex flex-col h-full justify-center gap-6 col-span-4 2xl:col-span-3"
className="flex flex-col !w-full h-full justify-center gap-6 col-span-full xl:col-span-4 xl:pr-8 2xl:pr-16"
>
<div
className={`
text-scale-1200
flex flex-col
w-full
items-center
text-center xl:text-left
xl:items-start
apps/www/components/LaunchWeek/Ticket/TicketForm.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export default function TicketForm({ defaultUsername = '', setTicketGenerationSt
}, [session])
return formState === 'error' ? (
<div>
<div className="h-full">
<div className={cn(formStyles['form-row'], ticketFormStyles['form-row'])}>
<div className={cn(formStyles['input-label'], formStyles.error)}>
<div className={cn(formStyles.input, formStyles['input-text'])}>{errorMsg}</div>
apps/www/components/LaunchWeek/Ticket/TicketNumber.tsx
+76 -43
View File
@@ -9,57 +9,90 @@ export default function TicketNumber({ number, size }: Props) {
return (
<>
<div
className={[
'absolute bottom-10 lg:bottom-0 dark:text-white',
size === 'small' ? 'right-12' : 'right-24',
].join(' ')}
className="md:absolute md:flex inset-0 top-auto md:left-auto md:right-0 md:top-0 md:w-[110px] md:h-100% dark:text-white"
id="wayfinding--ticket-number-outer"
>
<div
className={[
'leading-[1] w-[370px] text-center bg-clip-text lg:transform lg:rotate-90 lg:translate-y-100 origin-bottom-right bg-gradient-to-r from-white via-white',
size === 'small' ? 'text-[20px] w-[220px]' : 'text-[20px] lg:text-[42px] ',
'flex flex-col md:flex-row items-center justify-center w-full text-center',
size === 'small' ? 'text-[20px]' : 'text-[30px] md:text-[42px] ',
].join(' ')}
id="wayfinding--ticket-number-inner"
>
№ {prefix}
{number}
</div>
</div>
<div
className={[
'absolute top-3 w-4',
size === 'small' ? 'h-[200px] right-12' : 'h-[290px] right-28',
].join(' ')}
id="wayfinding--ticket-stitch"
>
<svg
width="2"
height={size === 'small' ? '210' : '328'}
viewBox="0 0 2 328"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.601562 0.988281V327.763"
stroke="url(#paint0_linear_1736_81388)"
strokeDasharray="2 2"
/>
<defs>
<linearGradient
id="paint0_linear_1736_81388"
x1="1.10156"
y1="0.988281"
x2="1.10156"
y2="327.763"
gradientUnits="userSpaceOnUse"
{/* Mobile line */}
<div className="block md:hidden">
<svg
width="234"
height="2"
viewBox="0 0 234 2"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<stop stopColor="white" stopOpacity="0" />
<stop offset="0.53125" stopColor="white" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
<path
d="M0.0390625 1L233.294 0.99999"
stroke="url(#paint0_linear_1701_100991)"
stroke-width="0.71381"
stroke-dasharray="1.43 1.43"
/>
<defs>
<linearGradient
id="paint0_linear_1701_100991"
x1="0.0390625"
y1="0.5"
x2="233.294"
y2="0.49999"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="white" stop-opacity="0" />
<stop offset="0.53125" stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</div>
{/* Vertical line: desktop */}
<div
className="h-full hidden md:flex items-center absolute left-0"
id="wayfinding--ticket-stitch"
>
<svg
width="2"
height={size === 'small' ? '210' : '328'}
viewBox="0 0 2 328"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.601562 0.988281V327.763"
stroke="url(#paint0_linear_1736_81388)"
strokeDasharray="2 2"
/>
<defs>
<linearGradient
id="paint0_linear_1736_81388"
x1="1.10156"
y1="0.988281"
x2="1.10156"
y2="327.763"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" stopOpacity="0" />
<stop offset="0.53125" stopColor="white" />
<stop offset="1" stopColor="white" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
</div>
<div
className={[
'md:absolute py-8 md:w-[max-content] leading-[1] bg-clip-text md:transform md:rotate-90 md:origin-center bg-gradient-to-r from-white via-white',
size === 'small' ? 'md:px-12' : 'md:px-24',
].join(' ')}
>
№ {prefix}
{number}
</div>
</div>
</div>
</>
)
apps/www/components/LaunchWeek/Ticket/TicketProfile.tsx
+2 -2
View File
@@ -26,7 +26,7 @@ export default function TicketProfile({
golden = false,
}: Props) {
return (
<div className="grid gap-4 items-center justify-center" id="wayfinding--ticket-middle">
<div className="grid gap-4 items-center justify-center px-2" id="wayfinding--ticket-middle">
{username && (
<span
className={cn('rounded-full inline-block mx-auto', styles.wrapper, styles.rounded, {
@@ -56,7 +56,7 @@ export default function TicketProfile({
)}
</span>
)}
<div className={styles.text}>
<div>
{username ? (
<p
className={`${cn(
apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx
+23 -24
View File
@@ -37,29 +37,22 @@ export default function TicketVisual({
const basePath = router.basePath
return (
<>
<div
className={[
styles.visual,
golden ? styles['visual--gold'] : '',
session ? styles['visual--logged-in'] : '',
'flex relative flex-col flex-1 justify-between rounded-xl bg-black w-full h-full box-border',
].join(' ')}
style={{
['--size' as string]: size,
}}
id="wayfinding--ticket-visual-inner-container"
>
<TicketHeader />
<div className={cn(styles['horizontal-ticket'])} id="wayfinding--TicketMono-container">
<TicketMono golden={golden} />
</div>
<div className={styles['vertical-ticket']}>
<TicketMonoMobile golden={golden} />
</div>
<div
className={[
styles.visual,
golden ? styles['visual--gold'] : '',
session ? styles['visual--logged-in'] : '',
'flex relative flex-col flex-1 justify-between rounded-xl bg-black w-full h-full box-border',
].join(' ')}
style={{
['--size' as string]: size,
}}
id="wayfinding--ticket-visual-inner-container"
>
<div className="flex flex-col items-center justify-between w-full h-full flex-1 md:pr-[110px]">
{username && <TicketHeader />}
<div
className="absolute top-[90px] lg:-translate-y-1/2 w-full lg:top-1/2 flex justify-center"
className="flex-1 w-full h-full md:h-auto flex flex-col justify-center"
id="wayfinding--TicketProfile-container"
>
<TicketProfile
@@ -71,8 +64,14 @@ export default function TicketVisual({
golden={golden}
/>
</div>
<TicketNumber number={ticketNumber} />
</div>
</>
<TicketNumber number={ticketNumber} />
<div className="hidden md:flex absolute inset-0" id="wayfinding--TicketMono-container">
<TicketMono golden={golden} />
</div>
<div className="flex md:hidden absolute inset-0">
<TicketMonoMobile golden={golden} />
</div>
</div>
)
}
apps/www/components/LaunchWeek/Ticket/ticket-mono-mobile.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default function TicketMonoMobile({ golden = false }: { golden?: boolean
<svg
width="100%"
height="100%"
viewBox="0 0 330 560"
viewBox="0 0 330 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
apps/www/components/LaunchWeek/Ticket/ticket-profile.module.css
-12
View File
@@ -12,24 +12,12 @@
}
}
/* .text {
flex: 1;
margin-left: 10px;
} */
/*
@media (min-width: 768px) {
.text {
margin-left: calc(15px * var(--size));
}
} */
.name {
font-size: 24px;
display: inline-block;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0;
max-width: 300px;
}
.name-golden {
apps/www/components/LaunchWeek/Ticket/ticket-visual.module.css
-18
View File
@@ -72,24 +72,6 @@
}
}
.horizontal-ticket {
display: none;
}
.vertical-ticket {
display: flex;
}
@media (min-width: 768px) {
.horizontal-ticket {
display: flex;
}
.vertical-ticket {
display: none;
}
}
.logo {
z-index: 1;
position: absolute;
apps/www/pages/launch-week/index.tsx
+1 -2
View File
@@ -107,8 +107,7 @@ export default function TicketHome({ users }: Props) {
<div className="bg-[#1C1C1C] -mt-20">
<div className="relative bg-lw7 pt-20">
<div className="relative z-10">
{/* <SectionContainer className="flex flex-col justify-between items-center min-h-[800px] h-[calc(100vh_-_75px)] gap-4"> */}
<SectionContainer className="flex flex-col justify-between items-center !pb-16 gap-16">
<SectionContainer className="flex flex-col justify-between items-center py-10 !pb-16 gap-8 lg:gap-16 !mx-auto !px-2">
<LaunchWeekLogoHeader />
{supabase && (