mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
X stuff (#19433)
* lwx word * add secret ticket * add secret ticket assets * cleanup * secret ticket copy * update mobile ticket * add loading state after claiming ticket * update matched letter styling * improve game logic and github signin * update og functions * rebuild * properly remove game event listenere * bigger compliment * remove weird file
This commit is contained in:
Francesco Sansalvadore authored and GitHub committed
1 parent
fc5d389a9f
commit
d00b3d199f
28 files changed
+449
-358
No files matched your search
@@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
|
||||
import useWinningChances from '../hooks/useWinningChances'
|
||||
|
||||
export default function ReferralIndicator() {
|
||||
|
||||
@@ -6,9 +6,10 @@ import { useBreakpoint } from 'common'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
isGameMode?: boolean
|
||||
}
|
||||
|
||||
const LWXBackground = ({ className }: Props) => {
|
||||
const LWXBackground = ({ className, isGameMode = false }: Props) => {
|
||||
const { ticketState } = useConfData()
|
||||
const containerRef = useRef(null)
|
||||
const isMobile = useBreakpoint()
|
||||
@@ -20,7 +21,7 @@ const LWXBackground = ({ className }: Props) => {
|
||||
|
||||
const handleGlow = (event: any) => {
|
||||
if (isMobile) return setGradientPos({ x: 70, y: 40 })
|
||||
if (!ref.current || !containerRef.current || hasTicket) return null
|
||||
if (!ref.current || !containerRef.current || hasTicket || isGameMode) return null
|
||||
|
||||
const containerRefElement = containerRef.current as HTMLDivElement
|
||||
|
||||
@@ -74,7 +75,8 @@ const LWXBackground = ({ className }: Props) => {
|
||||
md:w-[247px] md:h-[247px] md:translate-y-3 md:mt-auto
|
||||
xl:w-[285px] xl:h-[285px] xl:translate-y-2
|
||||
2xl:w-[342px] 2xl:h-[342px] 2xl:translate-y-px
|
||||
`
|
||||
`,
|
||||
isGameMode && 'hidden'
|
||||
)}
|
||||
viewBox="0 0 186 185"
|
||||
fill="none"
|
||||
@@ -157,7 +159,10 @@ const LWXBackground = ({ className }: Props) => {
|
||||
<Image
|
||||
src="/images/launchweek/lwx/lwx_bg.svg"
|
||||
alt=""
|
||||
className="absolute w-full !h-[400px] md:!h-full inset-0 mt-10 object-cover object-center overflow-visible"
|
||||
className={cn(
|
||||
'absolute w-full !h-[400px] md:!h-full inset-0 mt-10 object-cover object-center overflow-visible',
|
||||
isGameMode && 'opacity-30'
|
||||
)}
|
||||
role="presentation"
|
||||
fill
|
||||
priority
|
||||
|
||||
@@ -0,0 +1,213 @@
|
||||
import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
|
||||
import { Button, cn } from 'ui'
|
||||
import { SITE_ORIGIN } from '~/lib/constants'
|
||||
import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
|
||||
import { VALID_KEYS } from '~/components/LaunchWeek/hooks/useLwxGame'
|
||||
|
||||
const COMPLIMENTS = [
|
||||
'Congratulations!',
|
||||
'You won!',
|
||||
'Hurray!',
|
||||
'Great job!',
|
||||
'Nice job!',
|
||||
"That's right!",
|
||||
]
|
||||
|
||||
interface Props {
|
||||
setIsGameMode: Dispatch<SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
const LWXGame = ({ setIsGameMode }: Props) => {
|
||||
const { supabase, userData: user } = useConfData()
|
||||
const word = process.env.NEXT_PUBLIC_LWX_GAME_WORD ?? 'database'
|
||||
const winningWord = word?.split('')
|
||||
const [currentWord, setCurrentWord] = useState<string[]>(Array(winningWord.length))
|
||||
const [gameState, setGameState] = useState<'playing' | 'winner' | 'loading'>('playing')
|
||||
const [hasKeyDown, setHasKeyDown] = useState(false)
|
||||
const [attempts, setAttempts] = useState(1)
|
||||
const hasWon = currentWord.join('') === winningWord.join('')
|
||||
const winningCompliment = useMemo(
|
||||
() => COMPLIMENTS[Math.floor(Math.random() * COMPLIMENTS.length)],
|
||||
[]
|
||||
)
|
||||
|
||||
const searchAndAddToCurrentWord = (key: string) => {
|
||||
setAttempts(attempts + 1)
|
||||
|
||||
for (let index = 0; index < winningWord?.length; index++) {
|
||||
const isAlreadyPresent = key === currentWord[index]
|
||||
if (isAlreadyPresent) return
|
||||
|
||||
const isMatch = key === winningWord[index]
|
||||
|
||||
if (isMatch) {
|
||||
const newCurrentWord = currentWord
|
||||
newCurrentWord[index] = key
|
||||
|
||||
setCurrentWord(newCurrentWord)
|
||||
if (hasWon) setGameState('winner')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
const newKey = event.key.toLocaleLowerCase()
|
||||
|
||||
if (!(event.metaKey || event.ctrlKey) && VALID_KEYS.includes(newKey)) {
|
||||
setHasKeyDown(true)
|
||||
searchAndAddToCurrentWord(newKey)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
setHasKeyDown(false)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', onKeyDown)
|
||||
|
||||
return () => window.removeEventListener('keydown', onKeyDown)
|
||||
}, [onKeyDown])
|
||||
|
||||
async function handleGithubSignIn() {
|
||||
const redirectTo = `${SITE_ORIGIN}/launch-week/${
|
||||
user.username ? '?referral=' + user.username : ''
|
||||
}`
|
||||
|
||||
supabase?.auth.signInWithOAuth({
|
||||
provider: 'github',
|
||||
options: {
|
||||
redirectTo,
|
||||
},
|
||||
})
|
||||
}
|
||||
const handleClaimTicket = async (e: any) => {
|
||||
e.preventDefault()
|
||||
|
||||
setGameState('loading')
|
||||
|
||||
if (supabase) {
|
||||
if (user.id) {
|
||||
await supabase
|
||||
.from('lwx_tickets')
|
||||
.update({ metadata: { ...user.metadata, hasSecretTicket: hasWon } })
|
||||
.eq('username', user.username)
|
||||
.then((res) => {
|
||||
if (res.error) return console.log('error', res.error)
|
||||
setIsGameMode(false)
|
||||
})
|
||||
} else {
|
||||
localStorage.setItem('lwx_hasSecretTicket', 'true')
|
||||
|
||||
handleGithubSignIn()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (gameState === 'loading')
|
||||
return (
|
||||
<div className="relative w-full mt-[100px] md:mt-44 lg:mt-32 xl:mt-32 2xl:mt-[120px] flex flex-col items-center gap-6 text-foreground">
|
||||
<svg
|
||||
className="animate-spinner opacity-50 w-5 h-5 md:w-6 md:h-6"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 62 61"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M61 31C61 14.4315 47.5685 1 31 1C14.4315 1 1 14.4315 1 31"
|
||||
stroke="white"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center text-center gap-12 md:gap-16">
|
||||
<div className="flex flex-col items-center h-10 text-foreground-light">
|
||||
<div
|
||||
className={cn(
|
||||
'absolute flex flex-col gap-2 opacity-0 translate-y-2 transition-all',
|
||||
hasWon && 'opacity-100 translate-y-0'
|
||||
)}
|
||||
>
|
||||
<p className="tracking-wider text-foreground text-lg font-mono uppercase">
|
||||
{winningCompliment}
|
||||
</p>
|
||||
<p className="text-foreground-lighter font-san text-sm">
|
||||
Claim and share the secret ticket to boost your chances of winning swag.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute flex justify-center opacity-0 translate-y-2 transition-all',
|
||||
!hasWon && 'opacity-100 translate-y-0'
|
||||
)}
|
||||
>
|
||||
Guess the word
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-2 flex-wrap font-mono h-16">
|
||||
{winningWord.map((letter, i) => {
|
||||
const isMatch = letter === currentWord[i]
|
||||
return (
|
||||
<div
|
||||
key={`${currentWord[i]}-${i}`}
|
||||
className={cn(
|
||||
'w-6 md:w-14 aspect-square bg-[#06080930] backdrop-blur-sm flex items-center hover:border-strong justify-center uppercase border rounded-sm md:rounded-lg transition-colors',
|
||||
isMatch && 'border-stronger bg-foreground text-[#060809]',
|
||||
hasWon && 'animate-pulse !border-foreground',
|
||||
hasKeyDown && 'border-strong'
|
||||
)}
|
||||
>
|
||||
{currentWord[i]}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<form onSubmit={handleClaimTicket} className="flex flex-col items-center h-10">
|
||||
<Button
|
||||
type="secondary"
|
||||
onClick={() => null}
|
||||
htmlType="submit"
|
||||
className={cn(
|
||||
'absolute opacity-0 translate-y-2 transition-all',
|
||||
hasWon && 'opacity-100 translate-y-0'
|
||||
)}
|
||||
>
|
||||
Claim secret ticket
|
||||
</Button>
|
||||
</form>
|
||||
<div className="flex gap-4 md:gap-10 items-center h-10 text-xs text-foreground-lighter">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="outline"
|
||||
onClick={() => null}
|
||||
disabled
|
||||
className="pointer-events-none"
|
||||
size="tiny"
|
||||
>
|
||||
A-Z
|
||||
</Button>
|
||||
<span>Play</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-foreground-muted">
|
||||
<Button
|
||||
type="outline"
|
||||
onClick={() => null}
|
||||
disabled
|
||||
className="pointer-events-none"
|
||||
size="tiny"
|
||||
>
|
||||
Esc
|
||||
</Button>
|
||||
<span>Exit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LWXGame
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import Image from 'next/image'
|
||||
import { IconEdit, IconEdit2, IconX, cn } from 'ui'
|
||||
import { IconEdit2, IconX, cn } from 'ui'
|
||||
|
||||
import Panel from '~/components/Panel'
|
||||
import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
|
||||
@@ -11,14 +11,13 @@ import { useBreakpoint, useParams } from 'common'
|
||||
export default function Ticket() {
|
||||
const { userData: user, showCustomizationForm, setShowCustomizationForm } = useConfData()
|
||||
const isMobile = useBreakpoint()
|
||||
const { golden = false, bg_image_id: bgImageId = '1' } = user
|
||||
const { golden = false, bg_image_id: bgImageId = '1', metadata } = user
|
||||
const [imageHasLoaded, setImageHasLoaded] = useState(false)
|
||||
const params = useParams()
|
||||
const sharePage = !!params.username
|
||||
const ticketType = metadata?.hasSecretTicket ? 'secret' : golden ? 'platinum' : 'regular'
|
||||
|
||||
const fallbackImg = `/images/launchweek/lwx/tickets/lwx_ticket_bg_${
|
||||
golden ? 'platinum' : 'regular'
|
||||
}.png`
|
||||
const fallbackImg = `/images/launchweek/lwx/tickets/lwx_ticket_bg_${ticketType}.png`
|
||||
|
||||
const ticketBg = {
|
||||
regular: {
|
||||
@@ -29,6 +28,10 @@ export default function Ticket() {
|
||||
background: `/images/launchweek/lwx/tickets/lwx_ticket_bg_platinum.png`,
|
||||
background_mobile: `/images/launchweek/lwx/tickets/lwx_ticket_platinum_mobile.png`,
|
||||
},
|
||||
secret: {
|
||||
background: `/images/launchweek/lwx/tickets/lwx_ticket_bg_secret.png`,
|
||||
background_mobile: `/images/launchweek/lwx/tickets/lwx_ticket_secret_mobile.png`,
|
||||
},
|
||||
}
|
||||
|
||||
function handleCustomizeTicket() {
|
||||
@@ -56,14 +59,12 @@ export default function Ticket() {
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 h-full p-6 md:p-12 z-30 flex flex-col justify-between w-full md:h-full flex-1 overflow-hidden">
|
||||
<div className="absolute inset-0 h-full p-6 md:p-10 z-30 flex flex-col justify-end md:justify-between w-full md:h-full flex-1 overflow-hidden">
|
||||
<TicketProfile />
|
||||
<TicketFooter />
|
||||
</div>
|
||||
<Image
|
||||
src={
|
||||
ticketBg[golden ? 'platinum' : 'regular'][!isMobile ? 'background' : 'background_mobile']
|
||||
}
|
||||
src={ticketBg[ticketType][!isMobile ? 'background' : 'background_mobile']}
|
||||
alt={`Launch Week X ticket background #${bgImageId}`}
|
||||
placeholder="blur"
|
||||
blurDataURL={fallbackImg}
|
||||
@@ -72,7 +73,8 @@ export default function Ticket() {
|
||||
fill
|
||||
className={cn(
|
||||
'absolute inset-0 object-cover object-right opacity-0 transition-opacity duration-1000',
|
||||
imageHasLoaded && 'opacity-100'
|
||||
imageHasLoaded && 'opacity-100',
|
||||
isMobile && 'object-left-top'
|
||||
)}
|
||||
priority
|
||||
quality={100}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { SITE_URL, TWEET_TEXT, TWEET_TEXT_GOLDEN } from '~/lib/constants'
|
||||
import { SITE_URL, TWEET_TEXT, TWEET_TEXT_GOLDEN, TWEET_TEXT_SECRET } from '~/lib/constants'
|
||||
import { Button, IconLinkedinSolid, IconTwitterX, cn } from 'ui'
|
||||
import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
|
||||
import { useParams } from '~/hooks/useParams'
|
||||
@@ -8,14 +8,15 @@ import { useBreakpoint } from 'common'
|
||||
|
||||
export default function TicketActions() {
|
||||
const { userData, supabase } = useConfData()
|
||||
const { golden, username } = userData
|
||||
const { golden, username, metadata } = userData
|
||||
const [_imgReady, setImgReady] = useState(false)
|
||||
const [_loading, setLoading] = useState(false)
|
||||
const isTablet = useBreakpoint(1280)
|
||||
const downloadLink = useRef<HTMLAnchorElement>()
|
||||
const link = `${SITE_URL}/tickets/${username}?lw=x${golden ? `&platinum=true` : ''}`
|
||||
const permalink = encodeURIComponent(link)
|
||||
const text = golden ? TWEET_TEXT_GOLDEN : TWEET_TEXT
|
||||
const hasSecretTicket = metadata?.hasSecretTicket
|
||||
const text = hasSecretTicket ? TWEET_TEXT_SECRET : golden ? TWEET_TEXT_GOLDEN : TWEET_TEXT
|
||||
const encodedText = encodeURIComponent(text)
|
||||
const tweetUrl = `https://twitter.com/intent/tweet?url=${permalink}&text=${encodedText}`
|
||||
const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${permalink}`
|
||||
|
||||
@@ -5,11 +5,14 @@ import { IconCheck, IconCopy, cn } from 'ui'
|
||||
|
||||
export default function TicketCopy({ sharePage }: { sharePage: boolean }) {
|
||||
const { userData } = useConfData()
|
||||
const { username, golden } = userData
|
||||
const { username, golden, metadata } = userData
|
||||
const [copyEnabled, setCopyEnabled] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const buttonRef = useRef<HTMLButtonElement>(null)
|
||||
const url = `${SITE_URL}/tickets/${username}?lw=x${golden ? `&platinum=true` : ''}`
|
||||
const hasSecretTicket = metadata?.hasSecretTicket
|
||||
const url = `${SITE_URL}/tickets/${username}?lw=x${
|
||||
hasSecretTicket ? '&secret=true' : golden ? `&platinum=true` : ''
|
||||
}`
|
||||
|
||||
useEffect(() => {
|
||||
if (navigator.clipboard) {
|
||||
|
||||
@@ -30,7 +30,12 @@ const TicketCustomizationForm = ({ className }: { className?: string }) => {
|
||||
|
||||
const handleFormSubmit = async () => {
|
||||
setFormState('saving')
|
||||
const payload = { metadata: formData }
|
||||
const payload = {
|
||||
metadata: {
|
||||
...user.metadata,
|
||||
...formData,
|
||||
},
|
||||
}
|
||||
|
||||
if (supabase) {
|
||||
await supabase
|
||||
|
||||
@@ -7,8 +7,10 @@ import { cn } from 'ui'
|
||||
|
||||
export default function TicketFooter() {
|
||||
const { userData: user } = useConfData()
|
||||
const { ticketNumber, golden } = user
|
||||
const SupabaseLogo = golden
|
||||
const { ticketNumber, golden, metadata } = user
|
||||
const hasLightTicket = golden || metadata?.hasSecretTicket
|
||||
|
||||
const SupabaseLogo = hasLightTicket
|
||||
? '/images/launchweek/lwx/logos/supabase_lwx_logo_light.png'
|
||||
: '/images/launchweek/lwx/logos/supabase_lwx_logo_dark.png'
|
||||
|
||||
@@ -16,7 +18,7 @@ export default function TicketFooter() {
|
||||
<div
|
||||
className={cn(
|
||||
'relative z-10 w-full flex flex-col gap-2 font-mono text-foreground leading-none uppercase tracking-[3px]',
|
||||
golden ? 'text-[#11181C]' : 'text-white'
|
||||
hasLightTicket ? 'text-[#11181C]' : 'text-white'
|
||||
)}
|
||||
>
|
||||
<Image
|
||||
@@ -24,7 +26,7 @@ export default function TicketFooter() {
|
||||
alt="Supabase Logo for Launch Week X"
|
||||
width="30"
|
||||
height="30"
|
||||
className="mb-1"
|
||||
className="mb-1 hidden md:block"
|
||||
priority
|
||||
quality={100}
|
||||
/>
|
||||
|
||||
@@ -15,7 +15,7 @@ export default function TicketForm() {
|
||||
SupabaseClient['channel']
|
||||
> | null>(null)
|
||||
const [errorMsg] = useState('')
|
||||
const { supabase, session, setUserData, ticketState, setTicketState, userData } = useConfData()
|
||||
const { supabase, session, setUserData, setTicketState, userData } = useConfData()
|
||||
const router = useRouter()
|
||||
|
||||
// Triggered on session
|
||||
@@ -24,9 +24,17 @@ export default function TicketForm() {
|
||||
const username = session.user.user_metadata.user_name
|
||||
const name = session.user.user_metadata.full_name
|
||||
const email = session.user.email
|
||||
const hasSecretTicket = localStorage.getItem('lwx_hasSecretTicket') === 'true'
|
||||
|
||||
await supabase
|
||||
.from('lwx_tickets')
|
||||
.insert({ email, name, username, referred_by: router.query?.referral ?? null })
|
||||
.insert({
|
||||
email,
|
||||
name,
|
||||
username,
|
||||
referred_by: router.query?.referral ?? null,
|
||||
...(hasSecretTicket && { metadata: { hasSecretTicket: true } }),
|
||||
})
|
||||
.eq('email', email)
|
||||
.select()
|
||||
.single()
|
||||
|
||||
@@ -4,6 +4,7 @@ import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
|
||||
export default function TicketProfile() {
|
||||
const { userData: user } = useConfData()
|
||||
const { username, name, metadata, golden } = user
|
||||
const hasLightTicket = golden || metadata?.hasSecretTicket
|
||||
|
||||
const HAS_ROLE = !!metadata?.role
|
||||
const HAS_COMPANY = !!metadata?.company
|
||||
@@ -13,14 +14,14 @@ export default function TicketProfile() {
|
||||
<div className="relative z-10 flex gap-4">
|
||||
<div
|
||||
className={cn(
|
||||
'text-foreground-light flex flex-col gap-1 text-left text-xl md:max-w-[300px]',
|
||||
golden ? 'text-[#7E868C]' : 'text-[#8B9092]'
|
||||
'text-foreground-light flex flex-col gap-1 text-left text-xl md:max-w-[300px] mb-8',
|
||||
hasLightTicket ? 'text-[#7E868C]' : 'text-[#8B9092]'
|
||||
)}
|
||||
>
|
||||
<p
|
||||
className={cn(
|
||||
'text-2xl text-foreground leading-[105%]',
|
||||
golden ? 'text-[#11181C]' : 'text-white'
|
||||
hasLightTicket ? 'text-[#11181C]' : 'text-white'
|
||||
)}
|
||||
>
|
||||
{name || username || 'Your Name'}
|
||||
|
||||
@@ -16,14 +16,18 @@ import CountdownComponent from '../Countdown'
|
||||
import LaunchWeekPrizeSection from '../LaunchWeekPrizeSection'
|
||||
import TicketPresence from './TicketPresence'
|
||||
import TicketActions from './TicketActions'
|
||||
import useLwxGame from '../../hooks/useLwxGame'
|
||||
import LWXGame from './LWXGame'
|
||||
|
||||
const TicketingFlow = () => {
|
||||
const { ticketState, userData } = useConfData()
|
||||
const { ticketState, userData, showCustomizationForm } = useConfData()
|
||||
const { isGameMode, setIsGameMode } = useLwxGame(showCustomizationForm)
|
||||
|
||||
const isLoading = ticketState === 'loading'
|
||||
const isRegistering = ticketState === 'registration'
|
||||
const hasTicket = ticketState === 'ticket'
|
||||
const isLoading = !isGameMode && ticketState === 'loading'
|
||||
const isRegistering = !isGameMode && ticketState === 'registration'
|
||||
const hasTicket = !isGameMode && ticketState === 'ticket'
|
||||
const hasPlatinumTicket = userData.golden
|
||||
const hasSecretTicket = userData.metadata?.hasSecretTicket
|
||||
|
||||
const transition = DEFAULT_TRANSITION
|
||||
const initial = INITIAL_BOTTOM
|
||||
@@ -36,20 +40,24 @@ const TicketingFlow = () => {
|
||||
<>
|
||||
<SectionContainer className="relative flex flex-col !pt-8 lg:!pt-20 items-center gap-5 text-center h-auto lg:min-h-[886px]">
|
||||
<h1 className="sr-only">Supabase Launch Week X | {LWX_DATE}</h1>
|
||||
{!hasTicket && (
|
||||
<div className="flex flex-col items-center gap-1 text-light font-mono uppercase ">
|
||||
<p className="flex items-center gap-3 leading-none">
|
||||
<span className="text-lg text-foreground tracking-[2px]">Launch Week</span>{' '}
|
||||
<Image
|
||||
src="/images/launchweek/lwx/logos/lwx_logo.svg"
|
||||
alt="Supabase Launch Week X icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</p>
|
||||
<CountdownComponent date={LWX_LAUNCH_DATE} showCard={false} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-center gap-1 text-light font-mono uppercase transition-all opacity-0 invisible',
|
||||
!isGameMode && !hasTicket && 'opacity-100 visible'
|
||||
)}
|
||||
>
|
||||
<p className="flex items-center gap-3 leading-none">
|
||||
<span className="text-lg text-foreground tracking-[2px]">Launch Week</span>{' '}
|
||||
<Image
|
||||
src="/images/launchweek/lwx/logos/lwx_logo.svg"
|
||||
alt="Supabase Launch Week X icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
</p>
|
||||
<CountdownComponent date={LWX_LAUNCH_DATE} showCard={false} />
|
||||
</div>
|
||||
<div className="relative min-h-[500px] md:min-h-[634px] z-10 w-full flex flex-col justify-center items-center gap-5 md:gap-10 text-center">
|
||||
<LazyMotion features={domAnimation}>
|
||||
<AnimatePresence exitBeforeEnter key={ticketState}>
|
||||
@@ -113,9 +121,14 @@ const TicketingFlow = () => {
|
||||
<TicketContainer />
|
||||
</div>
|
||||
<div className="order-first xl:h-full max-w-md gap-3 flex flex-col items-center justify-center xl:items-start xl:justify-start xl:text-left">
|
||||
{hasPlatinumTicket ? (
|
||||
{hasSecretTicket ? (
|
||||
<p className="text-2xl lg:text-3xl">
|
||||
<span className="text-foreground-lighter">Congrats!</span> You've maximized
|
||||
<span className="text-foreground-lighter">You got the secret ticket.</span>{' '}
|
||||
Share it to increase your chances of winning even more.
|
||||
</p>
|
||||
) : hasPlatinumTicket ? (
|
||||
<p className="text-2xl lg:text-3xl">
|
||||
<span className="text-foreground-lighter">Congrats!</span> You maximized
|
||||
your chances and have a platinum ticket now.
|
||||
</p>
|
||||
) : winningChances !== 2 ? (
|
||||
@@ -129,6 +142,7 @@ const TicketingFlow = () => {
|
||||
<span className="">Keep sharing to increase your chances.</span>
|
||||
</p>
|
||||
)}
|
||||
<CountdownComponent date={LWX_LAUNCH_DATE} showCard={false} />
|
||||
{!hasPlatinumTicket && <TicketPresence />}
|
||||
<div className="w-full h-auto text-center md:text-left border border-muted flex flex-col md:flex-row items-stretch rounded-lg bg-[#060809] mt-2 md:mt-8 overflow-hidden">
|
||||
<div className="flex flex-col md:w-2/3 gap-1 pb-6">
|
||||
@@ -162,6 +176,17 @@ const TicketingFlow = () => {
|
||||
</div>
|
||||
</m.div>
|
||||
)}
|
||||
{!showCustomizationForm && isGameMode && (
|
||||
<m.div
|
||||
key="ticket"
|
||||
initial={initial}
|
||||
animate={animate}
|
||||
exit={exit}
|
||||
className="w-full flex justify-center text-foreground !h-[500px]"
|
||||
>
|
||||
<LWXGame setIsGameMode={setIsGameMode} />
|
||||
</m.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</LazyMotion>
|
||||
</div>
|
||||
@@ -171,6 +196,7 @@ const TicketingFlow = () => {
|
||||
'absolute z-0 top-0 left-0 right-0 bottom-0 w-full flex items-center justify-center opacity-100 transition-opacity',
|
||||
hasTicket && 'opacity-20'
|
||||
)}
|
||||
isGameMode={isGameMode as boolean}
|
||||
/>
|
||||
</SectionContainer>
|
||||
<SectionContainer className="!pt-4 lg:pb-40">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Session, SupabaseClient } from '@supabase/supabase-js'
|
||||
import { createContext, useContext } from 'react'
|
||||
|
||||
export type TicketState = 'registration' | 'ticket' | 'loading'
|
||||
export type TicketState = 'registration' | 'ticket' | 'loading' | 'game'
|
||||
|
||||
export type UserData = {
|
||||
id?: string
|
||||
@@ -16,6 +16,7 @@ export type UserData = {
|
||||
role?: string
|
||||
company?: string
|
||||
location?: string
|
||||
hasSecretTicket?: boolean
|
||||
}
|
||||
sharedOnTwitter?: string
|
||||
sharedOnLinkedIn?: string
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import useConfData from './use-conf-data'
|
||||
|
||||
export const VALID_KEYS = [
|
||||
'a',
|
||||
'b',
|
||||
'c',
|
||||
'd',
|
||||
'e',
|
||||
'f',
|
||||
'g',
|
||||
'h',
|
||||
'i',
|
||||
'j',
|
||||
'k',
|
||||
'l',
|
||||
'm',
|
||||
'n',
|
||||
'o',
|
||||
'p',
|
||||
'q',
|
||||
'r',
|
||||
's',
|
||||
't',
|
||||
'u',
|
||||
'v',
|
||||
'w',
|
||||
'x',
|
||||
'y',
|
||||
'z',
|
||||
]
|
||||
|
||||
const useLwxGame = (showCustomizationForm?: boolean) => {
|
||||
const [isGameMode, setIsGameMode] = useState(false)
|
||||
const { ticketState } = useConfData()
|
||||
|
||||
function onKeyDown(event: KeyboardEvent) {
|
||||
if (showCustomizationForm) return
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
setIsGameMode(false)
|
||||
}
|
||||
|
||||
const newKey = event.key.toLocaleLowerCase()
|
||||
|
||||
if (!(event.metaKey || event.ctrlKey) && VALID_KEYS.includes(newKey)) {
|
||||
if (!isGameMode) setIsGameMode(true)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!showCustomizationForm) window.addEventListener('keydown', onKeyDown)
|
||||
|
||||
return () => window.removeEventListener('keydown', onKeyDown)
|
||||
}, [showCustomizationForm])
|
||||
|
||||
return { isGameMode, setIsGameMode }
|
||||
}
|
||||
|
||||
export default useLwxGame
|
||||
@@ -43,4 +43,5 @@ export const LWX_LAUNCH_DATE = '2023-12-11T08:00:00.000-08:00'
|
||||
export const TWEET_TEXT =
|
||||
'#SupaLaunchWeek 🆇 is coming December 11-15 🚀\n\nClaim your ticket for a chance to win @supabase swag:\n'
|
||||
export const TWEET_TEXT_GOLDEN = `I turned my #SupaLaunchWeek 🆇 ticket Platinum! 🩶😎\n\nClaim your own ticket to win @supabase swag:\n`
|
||||
export const TWEET_TEXT_SECRET = `I found a secret #SupaLaunchWeek 🆇 ticket! \n\nGuess the word at supabase.com/launch-week to get yours:\n`
|
||||
export const SITE_NAME = 'Supabase'
|
||||
@@ -11,7 +11,7 @@ import { TicketState, ConfDataContext, UserData } from '~/components/LaunchWeek/
|
||||
import TicketingFlow from '~/components/LaunchWeek/X/Ticket/TicketingFlow'
|
||||
|
||||
export default function TicketHome() {
|
||||
const { basePath, query } = useRouter()
|
||||
const { query } = useRouter()
|
||||
|
||||
const TITLE = 'Supabase Launch Week X | 11-15 December 2023'
|
||||
const DESCRIPTION =
|
||||
@@ -40,7 +40,7 @@ export default function TicketHome() {
|
||||
supabase.auth.getSession().then(({ data: { session } }) => setSession(session))
|
||||
const {
|
||||
data: { subscription },
|
||||
} = supabase.auth.onAuthStateChange((event, session) => {
|
||||
} = supabase.auth.onAuthStateChange((_event, session) => {
|
||||
setSession(session)
|
||||
})
|
||||
|
||||
|
||||
@@ -143,9 +143,13 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
user = data
|
||||
}
|
||||
|
||||
const ogImageUrl = `https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lwx/og/${
|
||||
user?.golden ? 'platinum' : 'regular'
|
||||
}/${username}.png`
|
||||
const ticketType = user?.metadata?.hasSecretTicket
|
||||
? 'secret'
|
||||
: user?.golden
|
||||
? 'platinum'
|
||||
: 'regular'
|
||||
|
||||
const ogImageUrl = `https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lwx/og/${ticketType}/${username}.png`
|
||||
|
||||
return {
|
||||
props: {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 285 KiB |
@@ -1,124 +0,0 @@
|
||||
<svg width="786" height="390" viewBox="0 0 786 390" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_539_24082)">
|
||||
<rect width="786" height="390" fill="url(#paint0_linear_539_24082)"/>
|
||||
<g style="mix-blend-mode:screen" opacity="0.4">
|
||||
<rect x="501.945" y="-76.4521" width="101.778" height="671.06" transform="rotate(45 501.945 -76.4521)" fill="url(#paint1_linear_539_24082)"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:screen" opacity="0.4">
|
||||
<rect x="789.945" y="-76.4521" width="101.778" height="671.06" transform="rotate(45 789.945 -76.4521)" fill="url(#paint2_linear_539_24082)"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:screen" opacity="0.4">
|
||||
<rect x="501.945" y="-76.4521" width="101.778" height="671.06" transform="rotate(45 501.945 -76.4521)" fill="url(#paint3_linear_539_24082)"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:screen" opacity="0.4">
|
||||
<rect x="341.344" y="-204.052" width="101.778" height="671.06" transform="rotate(45 341.344 -204.052)" fill="url(#paint4_linear_539_24082)"/>
|
||||
</g>
|
||||
<mask id="mask0_539_24082" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-231" y="-291" width="1635" height="1075">
|
||||
<rect x="-231" y="-291" width="1634.96" height="1074.97" fill="url(#paint5_radial_539_24082)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_539_24082)">
|
||||
<path d="M518.408 -165.724H590.489M518.408 -165.724V-93.6428H590.489V-165.724M518.408 -165.724V-237.807L590.489 -165.724M446.329 -237.807H518.41V-165.726M446.329 -237.807V-165.726M446.329 -237.807H374.248V-165.726M518.41 -165.726H446.329M518.41 -165.726V-93.6428M446.329 -165.726L518.41 -93.6428M446.329 -165.726V-93.6428M446.329 -165.726H374.248M446.329 -165.726L374.248 -93.6428M518.41 -93.6428V-21.5621H446.329M518.41 -93.6428L446.329 -21.5621M518.41 -93.6428H446.329M662.574 -93.6452V-165.726L590.492 -165.726L662.574 -93.6452ZM662.574 -93.6452H734.655V-21.5639L662.574 -93.6452ZM590.495 122.604V50.5227M518.414 50.5227H590.495M590.495 50.5227H662.576M590.495 410.924V338.842M590.495 410.924L518.414 338.842H590.495M590.495 410.924L662.576 338.842H590.495M590.495 410.924L662.576 410.922V338.839M590.495 410.924L662.576 338.839M590.495 410.924V483.005H662.576L590.495 410.924ZM734.653 -21.5621H662.571M734.653 -21.5621L662.571 -93.6434M734.653 -21.5621V50.521L806.734 50.5192V122.602M734.653 -21.5621L806.734 -21.5639V-93.6452H734.653V-21.5621ZM662.571 -21.5621V-93.6434M662.571 -21.5621V50.521M662.571 -93.6434V-165.726M662.571 -93.6434L734.653 -165.726M734.653 -237.807H662.571V-165.726M734.653 -237.807V-165.726M734.653 -237.807H806.734V-165.726M662.571 -165.726H734.653M734.653 -165.726H806.734M734.653 -165.726L806.734 -93.6428M734.653 -165.726V-93.6428H806.734M518.408 50.521L590.489 -21.5603H518.408V50.3485M446.329 -21.5621V50.521L374.248 50.5192M446.329 -21.5621L374.248 -21.5639V-93.6452H446.329V-21.5621ZM446.329 -21.5621L374.248 50.5192M590.495 -165.726H662.576V-237.807L590.495 -165.726ZM590.495 -165.726V-93.6428H662.576L590.495 -165.726ZM518.408 -93.6452H590.489V-21.5639M518.408 -93.6452L590.489 -21.5639M518.408 -93.6452H446.326V-21.5639L518.408 -93.6452ZM518.408 -93.6452V-21.5639H590.489M590.495 -21.5639H662.576V-93.6452H590.495V-21.5639ZM590.495 -21.5639V50.5192M590.495 -21.5639L518.414 50.5192H590.495M590.495 -21.5639L662.576 50.5192H590.495M446.329 -93.6428H374.248M302.163 -21.5639H230.082V-93.6452H302.163V-21.5639ZM302.163 -21.5639V50.5192M302.163 -21.5639L230.082 50.5192M302.163 -21.5639L374.244 -21.5621M302.163 -21.5639L374.244 -93.6434V-21.5621M374.242 -165.724H302.16M374.242 -165.724V-93.6428H302.16V-165.724M374.242 -165.724V-237.807M302.16 -165.724L374.242 -237.807M302.16 -165.724V-237.807H374.242M374.248 -165.726V-93.6428M230.084 50.521V-21.5603H302.165L230.084 50.521ZM230.084 50.521V122.604M230.084 50.521L158.003 122.604M230.084 50.521H158.003V122.604M157.997 -21.5621H230.078M157.997 -21.5621L230.078 -93.6434V-21.5621M157.997 -21.5621V50.521M157.997 -21.5621L85.9154 -21.5639V-93.6452H157.997V-21.5621ZM157.997 -21.5621L85.9154 50.5192M230.078 -21.5621V50.521H157.997M157.997 50.521L85.9154 50.5192M157.997 50.521V122.604M302.163 -165.724V-93.6428H230.082M302.163 -165.724L230.082 -93.6428M302.163 -165.724L230.082 -165.726M302.163 -165.724V-237.807H230.082V-165.726M230.082 -93.6428V-165.726M230.082 50.5192H302.163M230.082 50.5192V122.602M302.163 50.5192L374.244 50.521V-21.5621M302.163 50.5192V-21.5603L374.244 -21.5621M302.163 50.5192V122.604M878.802 -21.5639H950.884V-93.6452H878.802V-21.5639ZM878.802 -21.5639V50.5192M878.802 -21.5639L950.884 50.5192M878.802 -21.5639L806.721 -21.5621M878.802 -21.5639L806.721 -93.6434V-21.5621M806.74 -165.724H878.821M806.74 -165.724V-93.6428H878.821V-165.724M806.74 -165.724V-237.807M878.821 -165.724L806.74 -237.807M878.821 -165.724V-237.807H806.74M806.734 -165.726V-93.6428M950.89 50.521V-21.5603H878.808L950.89 50.521ZM950.89 50.521V122.604M950.89 50.521L1022.97 122.604M950.89 50.521H1022.97V122.604M1022.97 -21.5621H950.887M1022.97 -21.5621L950.887 -93.6434V-21.5621M1022.97 -21.5621V50.521M1022.97 -21.5621L1095.05 -21.5639V-93.6452H1022.97V-21.5621ZM1022.97 -21.5621L1095.05 50.5192M950.887 -21.5621V50.521H1022.97M1022.97 50.521L1095.05 50.5192M1022.97 50.521V122.604M878.802 -165.724V-93.6428H950.884M878.802 -165.724L950.884 -93.6428M878.802 -165.724L950.884 -165.726M878.802 -165.724V-237.807H950.884V-165.726M950.884 -93.6428V-165.726M950.884 50.5192H878.802M950.884 50.5192V122.602M878.802 50.5192L806.721 50.521V-21.5621M878.802 50.5192V-21.5603L806.721 -21.5621M878.802 50.5192V122.604M374.242 50.521V-21.5603H446.323L374.242 50.521ZM374.242 50.521V122.604M374.242 50.521L302.16 122.604M374.242 50.521H302.16V122.604M374.248 50.5192V122.602M590.495 266.758V338.839M518.414 338.839H590.495M590.495 338.839H662.576M806.74 50.521V-21.5603H734.659M806.74 50.521V122.604M806.74 50.521L878.821 122.604M806.74 50.521H878.821V122.604M230.084 -165.724H158.003M230.084 -165.724V-93.6428H158.003V-165.724M230.084 -165.724V-237.807M158.003 -165.724L230.084 -237.807M158.003 -165.724V-237.807H230.084M85.9178 50.521V-21.5603H157.999L85.9178 50.521ZM85.9178 50.521V122.604M85.9178 50.521L13.8365 122.604M85.9178 50.521H13.8365V122.604M13.8389 -21.5621H85.9202M13.8389 -21.5621L85.9202 -93.6434L85.9202 -21.5621M13.8389 -21.5621V50.521M13.8389 -21.5621L-58.2424 -21.5639V-93.6452H13.8389V-21.5621ZM13.8389 -21Line truncated
|
||||
</g>
|
||||
<g filter="url(#filter0_di_539_24082)">
|
||||
<path d="M662.408 50.9627C662.782 50.5918 663.288 50.3838 663.815 50.3838H733.074C734.178 50.3838 735.074 51.2792 735.074 52.3838V121.638C735.074 122.168 734.863 122.676 734.489 123.051L663.078 194.588L662.995 124.456C662.993 123.355 662.103 122.462 661.002 122.458L590.464 122.208L662.408 50.9627Z" fill="url(#paint6_angular_539_24082)" style="mix-blend-mode:difference" shape-rendering="crispEdges"/>
|
||||
<path d="M517.999 338.709C518.531 338.709 519.041 338.497 519.416 338.12L590.874 266.371L520.846 266.62C519.735 266.624 518.834 265.723 518.838 264.612L519.143 194.29L447.335 266.042C446.959 266.417 446.748 266.926 446.748 267.457V336.709C446.748 337.814 447.644 338.709 448.748 338.709H517.999Z" fill="url(#paint7_angular_539_24082)" style="mix-blend-mode:difference" shape-rendering="crispEdges"/>
|
||||
<path d="M517.557 50.5294C518.086 50.5294 518.593 50.7386 518.968 51.1112L590.464 122.208L663.078 194.588L734.323 266.31C734.695 266.684 734.904 267.191 734.904 267.719V336.807C734.904 337.912 734.009 338.807 732.904 338.807H663.786C663.254 338.807 662.744 338.595 662.368 338.218L590.874 266.371L519.143 194.29L447.012 122.795C446.633 122.42 446.42 121.908 446.42 121.375V52.5294C446.42 51.4249 447.316 50.5295 448.42 50.5294L517.557 50.5294Z" fill="url(#paint8_angular_539_24082)" style="mix-blend-mode:difference" shape-rendering="crispEdges"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_539_24082)">
|
||||
<path d="M663.078 194.588L734.489 123.051C734.863 122.676 735.074 122.168 735.074 121.638V52.3838C735.074 51.2792 734.178 50.3838 733.074 50.3838H663.815C663.288 50.3838 662.782 50.5918 662.408 50.9627L590.464 122.208M663.078 194.588L662.995 124.456C662.993 123.355 662.103 122.462 661.002 122.458L590.464 122.208M663.078 194.588L590.464 122.208M663.078 194.588L734.323 266.31C734.695 266.684 734.904 267.191 734.904 267.719V336.807C734.904 337.912 734.009 338.807 732.904 338.807H663.786C663.254 338.807 662.744 338.595 662.368 338.218L590.874 266.371M590.464 122.208L518.968 51.1112C518.593 50.7386 518.086 50.5294 517.557 50.5294L448.42 50.5294C447.316 50.5295 446.42 51.4249 446.42 52.5294V121.375C446.42 121.908 446.633 122.42 447.012 122.795L519.143 194.29M590.874 266.371L519.416 338.12C519.041 338.497 518.531 338.709 517.999 338.709H448.748C447.644 338.709 446.748 337.814 446.748 336.709V267.457C446.748 266.926 446.959 266.417 447.335 266.042L519.143 194.29M590.874 266.371L520.846 266.62C519.735 266.624 518.834 265.723 518.838 264.612L519.143 194.29M590.874 266.371L519.143 194.29" stroke="url(#paint9_linear_539_24082)" shape-rendering="crispEdges"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:color-burn" filter="url(#filter2_f_539_24082)">
|
||||
<ellipse cx="598.487" cy="-16.3943" rx="573.34" ry="417.538" fill="#9D9D9D"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_di_539_24082" x="429.42" y="38.3838" width="322.653" height="322.423" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="5"/>
|
||||
<feGaussianBlur stdDeviation="8.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.733529 0 0 0 0 0.733529 0 0 0 0 0.733529 0 0 0 0.4 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_539_24082"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_539_24082" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_539_24082"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_539_24082" x="388.77" y="-7.26621" width="403.953" height="403.723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="28.575"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_539_24082"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_539_24082" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_f_539_24082" x="-180.853" y="-639.932" width="1558.68" height="1247.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="103" result="effect1_foregroundBlur_539_24082"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_539_24082" x1="257.358" y1="-30.9085" x2="685.119" y2="388.42" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.257613" stop-color="#D4D5D6"/>
|
||||
<stop offset="0.349618" stop-color="#CDD1D2"/>
|
||||
<stop offset="1" stop-color="#C1C1C1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_539_24082" x1="593.634" y1="75.4107" x2="552.834" y2="594.608" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#919799"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_539_24082" x1="1119.07" y1="328.808" x2="640.354" y2="569.194" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white" stop-opacity="0.06"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_539_24082" x1="593.634" y1="75.4107" x2="552.834" y2="594.608" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#919799"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_539_24082" x1="433.033" y1="-52.1889" x2="392.233" y2="467.008" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#919799"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint5_radial_539_24082" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(609.948 23.6208) rotate(92.1429) scale(627.546 954.456)">
|
||||
<stop stop-color="#D9D9D9"/>
|
||||
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint6_angular_539_24082" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(663.06 194.021) rotate(45) scale(260.355 260.531)">
|
||||
<stop offset="0.00212703" stop-color="#E1E1E1"/>
|
||||
<stop offset="0.249763" stop-color="#D1D1D1"/>
|
||||
<stop offset="0.500815" stop-color="white"/>
|
||||
<stop offset="0.619792" stop-color="#E0E0E0"/>
|
||||
<stop offset="0.755338" stop-color="white"/>
|
||||
<stop offset="0.998186" stop-color="#DDDDDD"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint7_angular_539_24082" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(663.06 194.021) rotate(45) scale(260.355 260.531)">
|
||||
<stop offset="0.00212703" stop-color="#E1E1E1"/>
|
||||
<stop offset="0.249763" stop-color="#D1D1D1"/>
|
||||
<stop offset="0.500815" stop-color="white"/>
|
||||
<stop offset="0.619792" stop-color="#E0E0E0"/>
|
||||
<stop offset="0.755338" stop-color="white"/>
|
||||
<stop offset="0.998186" stop-color="#DDDDDD"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint8_angular_539_24082" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(663.06 194.021) rotate(45) scale(260.355 260.531)">
|
||||
<stop offset="0.00212703" stop-color="#E1E1E1"/>
|
||||
<stop offset="0.249763" stop-color="#D1D1D1"/>
|
||||
<stop offset="0.500815" stop-color="white"/>
|
||||
<stop offset="0.619792" stop-color="#E0E0E0"/>
|
||||
<stop offset="0.755338" stop-color="white"/>
|
||||
<stop offset="0.998186" stop-color="#DDDDDD"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint9_linear_539_24082" x1="571.064" y1="32.1559" x2="773.846" y2="333.486" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.542658" stop-color="#E6E6E6"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_539_24082">
|
||||
<rect width="786" height="390" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 126 KiB |
@@ -1,117 +0,0 @@
|
||||
<svg width="786" height="390" viewBox="0 0 786 390" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_539_24057)">
|
||||
<rect width="786" height="390" fill="url(#paint0_linear_539_24057)"/>
|
||||
<rect x="501.945" y="-76.4521" width="101.778" height="671.06" transform="rotate(45 501.945 -76.4521)" fill="url(#paint1_linear_539_24057)"/>
|
||||
<rect x="789.945" y="-76.4521" width="101.778" height="671.06" transform="rotate(45 789.945 -76.4521)" fill="url(#paint2_linear_539_24057)"/>
|
||||
<rect x="341.344" y="-203.052" width="101.778" height="671.06" transform="rotate(45 341.344 -203.052)" fill="url(#paint3_linear_539_24057)"/>
|
||||
<mask id="mask0_539_24057" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-231" y="-291" width="1635" height="1075">
|
||||
<rect x="-231" y="-291" width="1634.96" height="1074.97" fill="url(#paint4_radial_539_24057)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_539_24057)">
|
||||
<path d="M518.408 -165.724H590.489M518.408 -165.724V-93.6428H590.489V-165.724M518.408 -165.724V-237.807L590.489 -165.724M446.329 -237.807H518.41V-165.726M446.329 -237.807V-165.726M446.329 -237.807H374.248V-165.726M518.41 -165.726H446.329M518.41 -165.726V-93.6428M446.329 -165.726L518.41 -93.6428M446.329 -165.726V-93.6428M446.329 -165.726H374.248M446.329 -165.726L374.248 -93.6428M518.41 -93.6428V-21.5621H446.329M518.41 -93.6428L446.329 -21.5621M518.41 -93.6428H446.329M662.574 -93.6452V-165.726L590.492 -165.726L662.574 -93.6452ZM662.574 -93.6452H734.655V-21.5639L662.574 -93.6452ZM590.495 122.604V50.5227M590.495 122.604L518.414 50.5227H590.495M590.495 122.604L662.576 50.5227H590.495M590.495 410.924V338.842M590.495 410.924L518.414 338.842H590.495M590.495 410.924L662.576 338.842H590.495M590.495 410.924L662.576 410.922V338.839M590.495 410.924L662.576 338.839M590.495 410.924V483.005H662.576L590.495 410.924ZM734.653 -21.5621H662.571M734.653 -21.5621L662.571 -93.6434M734.653 -21.5621V50.521M734.653 -21.5621L806.734 -21.5639V-93.6452H734.653V-21.5621ZM662.571 -21.5621V-93.6434M662.571 -21.5621V50.521H734.653M662.571 -93.6434V-165.726M662.571 -93.6434L734.653 -165.726M734.653 50.521L806.734 50.5192V122.602M734.653 50.521V122.602M734.653 -237.807H662.571V-165.726M734.653 -237.807V-165.726M734.653 -237.807H806.734V-165.726M662.571 -165.726H734.653M734.653 -165.726H806.734M734.653 -165.726L806.734 -93.6428M734.653 -165.726V-93.6428H806.734M518.408 50.521L590.489 -21.5603H518.408V50.3485M446.329 -21.5621V50.521M446.329 -21.5621L374.248 -21.5639V-93.6452H446.329V-21.5621ZM446.329 -21.5621L374.248 50.5192M446.329 50.521H518.41M446.329 50.521L374.248 50.5192M446.329 50.521V122.604M590.495 -165.726H662.576V-237.807L590.495 -165.726ZM590.495 -165.726V-93.6428H662.576L590.495 -165.726ZM518.408 -93.6452H590.489V-21.5639M518.408 -93.6452L590.489 -21.5639M518.408 -93.6452H446.326V-21.5639L518.408 -93.6452ZM518.408 -93.6452V-21.5639H590.489M590.495 -21.5639H662.576V-93.6452H590.495V-21.5639ZM590.495 -21.5639V50.5192M590.495 -21.5639L518.414 50.5192H590.495M590.495 -21.5639L662.576 50.5192H590.495M446.329 -93.6428H374.248M302.163 -21.5639H230.082V-93.6452H302.163V-21.5639ZM302.163 -21.5639V50.5192M302.163 -21.5639L230.082 50.5192M302.163 -21.5639L374.244 -21.5621M302.163 -21.5639L374.244 -93.6434V-21.5621M374.242 -165.724H302.16M374.242 -165.724V-93.6428H302.16V-165.724M374.242 -165.724V-237.807M302.16 -165.724L374.242 -237.807M302.16 -165.724V-237.807H374.242M374.248 -165.726V-93.6428M230.084 50.521V-21.5603H302.165L230.084 50.521ZM230.084 50.521V122.604M230.084 50.521L158.003 122.604M230.084 50.521H158.003V122.604M157.997 -21.5621H230.078M157.997 -21.5621L230.078 -93.6434V-21.5621M157.997 -21.5621V50.521M157.997 -21.5621L85.9154 -21.5639V-93.6452H157.997V-21.5621ZM157.997 -21.5621L85.9154 50.5192M230.078 -21.5621V50.521H157.997M157.997 50.521L85.9154 50.5192M157.997 50.521V122.604M302.163 -165.724V-93.6428H230.082M302.163 -165.724L230.082 -93.6428M302.163 -165.724L230.082 -165.726M302.163 -165.724V-237.807H230.082V-165.726M230.082 -93.6428V-165.726M230.082 50.5192H302.163M230.082 50.5192V122.602M302.163 50.5192L374.244 50.521V-21.5621M302.163 50.5192V-21.5603L374.244 -21.5621M302.163 50.5192V122.604M878.802 -21.5639H950.884V-93.6452H878.802V-21.5639ZM878.802 -21.5639V50.5192M878.802 -21.5639L950.884 50.5192M878.802 -21.5639L806.721 -21.5621M878.802 -21.5639L806.721 -93.6434V-21.5621M806.74 -165.724H878.821M806.74 -165.724V-93.6428H878.821V-165.724M806.74 -165.724V-237.807M878.821 -165.724L806.74 -237.807M878.821 -165.724V-237.807H806.74M806.734 -165.726V-93.6428M950.89 50.521V-21.5603H878.808L950.89 50.521ZM950.89 50.521V122.604M950.89 50.521L1022.97 122.604M950.89 50.521H1022.97V122.604M1022.97 -21.5621H950.887M1022.97 -21.5621L950.887 -93.6434V-21.5621M1022.97 -21.5621V50.521M1022.97 -21.5621L1095.05 -21.5639V-93.6452H1022.97V-21.5621ZM1022.97 -21.5621L1095.05 50.5192M950.887 -21.5621V50.521H1022.97M1022.97 50.521L1095.05 50.5192M1022.97 50.521V122.604M878.802 -165.724V-93.6428H950.884M878.802 -165.724L950.884 -93.6428M878.802 -165.724L950.884 -165.726M878.802 -165.724V-237.807H950.884V-165.726M950.884 -93.6428V-165.726M950.884 50.5192H878.802M950.884 50.5192V122.602M878.802 50.5192L806.721 50.521V-21.5621M878.802 50.5192V-21.5603L806.721 -21.5621M878.802 50.5192V122.604M374.242 50.521V-21.5603H446.323L374.242 50.521ZM374.242 50.521V122.604M374.242 50.521L302.16 122.604M374.242 50.521H302.16V122.604M374.248 50.5192V122.602M590.495 266.758V338.839M590.495 266.758L518.414 338.839H590.495M590.495 266.758L662.576 338.839M590.495 338.839H662.576M806.74 50.521V-21.5603H734.659M806.74 50.521V122.604M806.74 50.521L878.821 122.604M806.74 50.521H878.821V122.604M230.084 -165.724H158.003M230.084 -165.724V-93.6428H158.003V-165.724M230.084 -165.724V-237.807M158.003 -165.724L230.084 -237.807M158.003 -165.724V-237.807H230.084M85.9178 50.521V-21.5603H157.999L85.9178 50.521ZM85.9178 50.521V122.604M85.9178 50.521L13.8365 122.604M85.9178 50.521H13.Line truncated
|
||||
</g>
|
||||
<g filter="url(#filter0_dii_539_24057)">
|
||||
<path d="M662.408 50.9627C662.782 50.5918 663.288 50.3838 663.815 50.3838H733.074C734.178 50.3838 735.074 51.2792 735.074 52.3838V121.638C735.074 122.168 734.863 122.676 734.489 123.051L663.078 194.588L662.995 124.456C662.993 123.355 662.103 122.462 661.002 122.458L590.464 122.208L662.408 50.9627Z" fill="url(#paint5_radial_539_24057)" fill-opacity="0.14" shape-rendering="crispEdges"/>
|
||||
<path d="M662.408 50.9627C662.782 50.5918 663.288 50.3838 663.815 50.3838H733.074C734.178 50.3838 735.074 51.2792 735.074 52.3838V121.638C735.074 122.168 734.863 122.676 734.489 123.051L663.078 194.588L662.995 124.456C662.993 123.355 662.103 122.462 661.002 122.458L590.464 122.208L662.408 50.9627Z" fill="url(#paint6_angular_539_24057)" fill-opacity="0.39" style="mix-blend-mode:difference" shape-rendering="crispEdges"/>
|
||||
<path d="M517.999 338.709C518.531 338.709 519.041 338.497 519.416 338.12L590.874 266.371L520.846 266.62C519.735 266.624 518.834 265.723 518.838 264.612L519.143 194.29L447.335 266.042C446.959 266.417 446.748 266.926 446.748 267.457V336.709C446.748 337.814 447.644 338.709 448.748 338.709H517.999Z" fill="url(#paint7_radial_539_24057)" fill-opacity="0.14" shape-rendering="crispEdges"/>
|
||||
<path d="M517.999 338.709C518.531 338.709 519.041 338.497 519.416 338.12L590.874 266.371L520.846 266.62C519.735 266.624 518.834 265.723 518.838 264.612L519.143 194.29L447.335 266.042C446.959 266.417 446.748 266.926 446.748 267.457V336.709C446.748 337.814 447.644 338.709 448.748 338.709H517.999Z" fill="url(#paint8_angular_539_24057)" fill-opacity="0.39" style="mix-blend-mode:difference" shape-rendering="crispEdges"/>
|
||||
<path d="M517.557 50.5294C518.086 50.5294 518.593 50.7386 518.968 51.1112L590.464 122.208L663.078 194.588L734.323 266.31C734.695 266.684 734.904 267.191 734.904 267.719V336.807C734.904 337.912 734.009 338.807 732.904 338.807H663.786C663.254 338.807 662.744 338.595 662.368 338.218L590.874 266.371L519.143 194.29L447.012 122.795C446.633 122.42 446.42 121.908 446.42 121.375V52.5294C446.42 51.4249 447.316 50.5295 448.42 50.5294L517.557 50.5294Z" fill="url(#paint9_radial_539_24057)" fill-opacity="0.14" shape-rendering="crispEdges"/>
|
||||
<path d="M517.557 50.5294C518.086 50.5294 518.593 50.7386 518.968 51.1112L590.464 122.208L663.078 194.588L734.323 266.31C734.695 266.684 734.904 267.191 734.904 267.719V336.807C734.904 337.912 734.009 338.807 732.904 338.807H663.786C663.254 338.807 662.744 338.595 662.368 338.218L590.874 266.371L519.143 194.29L447.012 122.795C446.633 122.42 446.42 121.908 446.42 121.375V52.5294C446.42 51.4249 447.316 50.5295 448.42 50.5294L517.557 50.5294Z" fill="url(#paint10_angular_539_24057)" fill-opacity="0.39" style="mix-blend-mode:difference" shape-rendering="crispEdges"/>
|
||||
<path d="M663.078 194.588L734.489 123.051C734.863 122.676 735.074 122.168 735.074 121.638V52.3838C735.074 51.2792 734.178 50.3838 733.074 50.3838H663.815C663.288 50.3838 662.782 50.5918 662.408 50.9627L590.464 122.208M663.078 194.588L662.995 124.456C662.993 123.355 662.103 122.462 661.002 122.458L590.464 122.208M663.078 194.588L590.464 122.208M663.078 194.588L734.323 266.31C734.695 266.684 734.904 267.191 734.904 267.719V336.807C734.904 337.912 734.009 338.807 732.904 338.807H663.786C663.254 338.807 662.744 338.595 662.368 338.218L590.874 266.371M590.464 122.208L518.968 51.1112C518.593 50.7386 518.086 50.5294 517.557 50.5294L448.42 50.5294C447.316 50.5295 446.42 51.4249 446.42 52.5294V121.375C446.42 121.908 446.633 122.42 447.012 122.795L519.143 194.29M590.874 266.371L519.416 338.12C519.041 338.497 518.531 338.709 517.999 338.709H448.748C447.644 338.709 446.748 337.814 446.748 336.709V267.457C446.748 266.926 446.959 266.417 447.335 266.042L519.143 194.29M590.874 266.371L520.846 266.62C519.735 266.624 518.834 265.723 518.838 264.612L519.143 194.29M590.874 266.371L519.143 194.29" stroke="url(#paint11_linear_539_24057)" shape-rendering="crispEdges"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dii_539_24057" x="388.77" y="-7.26621" width="403.953" height="403.723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset/>
|
||||
<feGaussianBlur stdDeviation="28.575"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_539_24057"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_539_24057" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="-2" dy="-2"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_539_24057"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="2" dy="2"/>
|
||||
<feGaussianBlur stdDeviation="2.5"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="effect2_innerShadow_539_24057" result="effect3_innerShadow_539_24057"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_539_24057" x1="520.912" y1="-50.2277" x2="405.041" y2="393.147" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0E1315"/>
|
||||
<stop offset="1" stop-color="#060809"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_539_24057" x1="503.664" y1="273.396" x2="605.582" y2="234.042" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#090D0D"/>
|
||||
<stop offset="1" stop-color="#070B0C" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_539_24057" x1="791.664" y1="273.396" x2="893.582" y2="234.042" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#090D0D"/>
|
||||
<stop offset="1" stop-color="#070B0C" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_539_24057" x1="343.062" y1="146.797" x2="444.981" y2="107.442" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#090D0D"/>
|
||||
<stop offset="1" stop-color="#070B0C" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint4_radial_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(586.482 246.487) rotate(90) scale(404.241 614.823)">
|
||||
<stop stop-color="#D9D9D9"/>
|
||||
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint5_radial_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(451.422 55.6849) rotate(41.9428) scale(348.911 309.176)">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.194164" stop-color="white"/>
|
||||
<stop offset="0.571134"/>
|
||||
<stop offset="1" stop-color="#080808"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint6_angular_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(663.06 194.021) rotate(43.8978) scale(212.741 212.885)">
|
||||
<stop offset="0.00212703" stop-color="#262C2C"/>
|
||||
<stop offset="0.249763" stop-color="#7E858D"/>
|
||||
<stop offset="0.500815" stop-color="#9DA7A7"/>
|
||||
<stop offset="0.504181" stop-color="#414B4B"/>
|
||||
<stop offset="0.755338" stop-color="#979F9F"/>
|
||||
<stop offset="0.998186" stop-color="#8FA8AA"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint7_radial_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(451.422 55.6849) rotate(41.9428) scale(348.911 309.176)">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.194164" stop-color="white"/>
|
||||
<stop offset="0.571134"/>
|
||||
<stop offset="1" stop-color="#080808"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint8_angular_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(663.06 194.021) rotate(43.8978) scale(212.741 212.885)">
|
||||
<stop offset="0.00212703" stop-color="#262C2C"/>
|
||||
<stop offset="0.249763" stop-color="#7E858D"/>
|
||||
<stop offset="0.500815" stop-color="#9DA7A7"/>
|
||||
<stop offset="0.504181" stop-color="#414B4B"/>
|
||||
<stop offset="0.755338" stop-color="#979F9F"/>
|
||||
<stop offset="0.998186" stop-color="#8FA8AA"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint9_radial_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(451.422 55.6849) rotate(41.9428) scale(348.911 309.176)">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="0.194164" stop-color="white"/>
|
||||
<stop offset="0.571134"/>
|
||||
<stop offset="1" stop-color="#080808"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint10_angular_539_24057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(663.06 194.021) rotate(43.8978) scale(212.741 212.885)">
|
||||
<stop offset="0.00212703" stop-color="#262C2C"/>
|
||||
<stop offset="0.249763" stop-color="#7E858D"/>
|
||||
<stop offset="0.500815" stop-color="#9DA7A7"/>
|
||||
<stop offset="0.504181" stop-color="#414B4B"/>
|
||||
<stop offset="0.755338" stop-color="#979F9F"/>
|
||||
<stop offset="0.998186" stop-color="#8FA8AA"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint11_linear_539_24057" x1="488.235" y1="38.1482" x2="759.564" y2="315.766" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#8A8A8A"/>
|
||||
<stop offset="0.626409" stop-color="#3F4141"/>
|
||||
<stop offset="0.995941" stop-color="#1E1E1E"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_539_24057">
|
||||
<rect width="786" height="390" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 270 KiB After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 273 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
@@ -20,13 +20,19 @@ const LW_TABLE = 'lwx_tickets'
|
||||
const LW_MATERIALIZED_VIEW = 'lwx_tickets_golden'
|
||||
|
||||
const STYLING_CONGIF = {
|
||||
REG: {
|
||||
regular: {
|
||||
BACKGROUND: '#303030',
|
||||
FOREGROUND: '#F8F9FA',
|
||||
FOREGROUND_LIGHT: '#8B9092',
|
||||
BORDER: '#303030',
|
||||
},
|
||||
PLATINUM: {
|
||||
platinum: {
|
||||
BACKGROUND: '#f1f1f1',
|
||||
FOREGROUND: '#11181C',
|
||||
FOREGROUND_LIGHT: '#6c7277',
|
||||
BORDER: '#CFCFCF',
|
||||
},
|
||||
secret: {
|
||||
BACKGROUND: '#f1f1f1',
|
||||
FOREGROUND: '#11181C',
|
||||
FOREGROUND_LIGHT: '#6c7277',
|
||||
@@ -78,21 +84,28 @@ export async function handler(req: Request) {
|
||||
|
||||
const platinum = (!!data?.sharedOnTwitter && !!data?.sharedOnLinkedIn) ?? false
|
||||
if (assumePlatinum && !platinum) return await fetch(`${STORAGE_URL}/assets/golden_no_meme.png`)
|
||||
const ticketType = data.metadata?.hasSecretTicket ? 'secret' : platinum ? 'platinum' : 'regular'
|
||||
|
||||
// Else, generate image and upload to storage.
|
||||
const BACKGROUND = {
|
||||
REG: {
|
||||
regular: {
|
||||
OG: `${STORAGE_URL}/assets/og_bg_regular.png?t=2023-11-27T22%3A32%3A21.973Z`,
|
||||
BG: `${STORAGE_URL}/assets/lwx_ticket_bg_regular.png`,
|
||||
LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_reg.png`,
|
||||
// LOGO: `${STORAGE_URL}/assets/logos/supabase_lwx_logo_dark.png`,
|
||||
},
|
||||
PLATINUM: {
|
||||
platinum: {
|
||||
OG: `${STORAGE_URL}/assets/og_bg_platinum.png?t=2023-11-27T22%3A31%3A58.719Z`,
|
||||
BG: `${STORAGE_URL}/assets/lwx_ticket_bg_platinum.png`,
|
||||
LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_platinum.png`,
|
||||
// LOGO: `${STORAGE_URL}/assets/logos/supabase_lwx_logo_light.png`,
|
||||
},
|
||||
secret: {
|
||||
OG: `${STORAGE_URL}/assets/og_bg_secret.png?t=2023-11-27T22%3A31%3A58.719Z`,
|
||||
BG: `${STORAGE_URL}/assets/lwx_ticket_bg_secret.png`,
|
||||
LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_platinum.png`,
|
||||
// LOGO: `${STORAGE_URL}/assets/logos/supabase_lwx_logo_light.png`,
|
||||
},
|
||||
}
|
||||
|
||||
const fontData = await font
|
||||
@@ -121,7 +134,7 @@ export async function handler(req: Request) {
|
||||
height: '628px',
|
||||
position: 'relative',
|
||||
fontFamily: '"Circular"',
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND,
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -141,7 +154,7 @@ export async function handler(req: Request) {
|
||||
right: '-1px',
|
||||
zIndex: '0',
|
||||
}}
|
||||
src={platinum ? BACKGROUND.PLATINUM.OG : BACKGROUND.REG.OG}
|
||||
src={BACKGROUND[ticketType].OG}
|
||||
/>
|
||||
{/* Ticket */}
|
||||
<img
|
||||
@@ -156,10 +169,10 @@ export async function handler(req: Request) {
|
||||
zIndex: '1',
|
||||
margin: 'auto',
|
||||
borderRadius: '20px',
|
||||
border: `1px solid ${STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].BORDER}`,
|
||||
border: `1px solid ${STYLING_CONGIF[ticketType].BORDER}`,
|
||||
boxShadow: '0px 4px 45px rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
src={platinum ? BACKGROUND.PLATINUM.BG : BACKGROUND.REG.BG}
|
||||
src={BACKGROUND[ticketType].BG}
|
||||
/>
|
||||
|
||||
{/* Name & username */}
|
||||
@@ -182,7 +195,7 @@ export async function handler(req: Request) {
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND,
|
||||
margin: '0',
|
||||
padding: '0',
|
||||
fontSize: '36',
|
||||
@@ -196,7 +209,7 @@ export async function handler(req: Request) {
|
||||
|
||||
<div
|
||||
style={{
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND_LIGHT,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND_LIGHT,
|
||||
opacity: 0.8,
|
||||
display: 'flex',
|
||||
fontSize: '32',
|
||||
@@ -226,16 +239,12 @@ export async function handler(req: Request) {
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', marginBottom: '10', marginLeft: '-10' }}>
|
||||
<img
|
||||
src={platinum ? BACKGROUND['PLATINUM']['LOGO'] : BACKGROUND['REG']['LOGO']}
|
||||
width={65}
|
||||
height={65}
|
||||
/>
|
||||
<img src={BACKGROUND[ticketType].LOGO} width={65} height={65} />
|
||||
</div>
|
||||
{/* Ticket No */}
|
||||
<p
|
||||
style={{
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND_LIGHT,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND_LIGHT,
|
||||
margin: '0',
|
||||
marginBottom: '5',
|
||||
display: 'flex',
|
||||
@@ -289,17 +298,13 @@ export async function handler(req: Request) {
|
||||
// Upload image to storage.
|
||||
const { error: storageError } = await supabaseAdminClient.storage
|
||||
.from('images')
|
||||
.upload(
|
||||
`lwx/og/${platinum ? 'platinum' : 'regular'}/${username}.png`,
|
||||
generatedTicketImage.body!,
|
||||
{
|
||||
contentType: 'image/png',
|
||||
// cacheControl: `${60 * 60 * 24 * 7}`,
|
||||
cacheControl: `0`,
|
||||
// Update cached og image, people might need to update info
|
||||
upsert: true,
|
||||
}
|
||||
)
|
||||
.upload(`lwx/og/${ticketType}/${username}.png`, generatedTicketImage.body!, {
|
||||
contentType: 'image/png',
|
||||
// cacheControl: `${60 * 60 * 24 * 7}`,
|
||||
cacheControl: `0`,
|
||||
// Update cached og image, people might need to update info
|
||||
upsert: true,
|
||||
})
|
||||
|
||||
if (storageError) throw new Error(`storageError: ${storageError.message}`)
|
||||
|
||||
@@ -319,9 +324,7 @@ export async function handler(req: Request) {
|
||||
|
||||
const NEW_TIMESTAMP = new Date()
|
||||
|
||||
return await fetch(
|
||||
`${STORAGE_URL}/og/${platinum ? 'platinum' : 'regular'}/${username}.png?t=${NEW_TIMESTAMP}`
|
||||
)
|
||||
return await fetch(`${STORAGE_URL}/og/${ticketType}/${username}.png?t=${NEW_TIMESTAMP}`)
|
||||
} catch (error) {
|
||||
return new Response(JSON.stringify({ error: error.message }), {
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' },
|
||||
|
||||
@@ -19,12 +19,17 @@ const LW_TABLE = 'lwx_tickets'
|
||||
const LW_MATERIALIZED_VIEW = 'lwx_tickets_golden'
|
||||
|
||||
const STYLING_CONGIF = {
|
||||
REG: {
|
||||
regular: {
|
||||
BACKGROUND: '#303030',
|
||||
FOREGROUND: '#F8F9FA',
|
||||
FOREGROUND_LIGHT: '#707070',
|
||||
},
|
||||
PLATINUM: {
|
||||
platinum: {
|
||||
BACKGROUND: '#f1f1f1',
|
||||
FOREGROUND: '#11181C',
|
||||
FOREGROUND_LIGHT: '#7E868C',
|
||||
},
|
||||
secret: {
|
||||
BACKGROUND: '#f1f1f1',
|
||||
FOREGROUND: '#11181C',
|
||||
FOREGROUND_LIGHT: '#7E868C',
|
||||
@@ -76,17 +81,22 @@ export async function handler(req: Request) {
|
||||
|
||||
const platinum = (!!data?.sharedOnTwitter && !!data?.sharedOnLinkedIn) ?? false
|
||||
if (assumePlatinum && !platinum) return await fetch(`${STORAGE_URL}/assets/golden_no_meme.png`)
|
||||
const ticketType = data.metadata?.hasSecretTicket ? 'secret' : platinum ? 'platinum' : 'regular'
|
||||
|
||||
// Else, generate image and upload to storage.
|
||||
const BACKGROUND = {
|
||||
REG: {
|
||||
regular: {
|
||||
BG: `${STORAGE_URL}/assets/lwx_ticket_bg_regular.png?t=2023-11-27T12%3A35%3A58.316Z`,
|
||||
LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_reg.png`,
|
||||
},
|
||||
PLATINUM: {
|
||||
platinum: {
|
||||
BG: `${STORAGE_URL}/assets/lwx_ticket_bg_platinum.png?t=2023-11-27T12%3A35%3A58.316Z`,
|
||||
LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_platinum.png`,
|
||||
},
|
||||
secret: {
|
||||
BG: `${STORAGE_URL}/assets/lwx_ticket_bg_secret.png?t=2023-11-27T12%3A35%3A58.316Z`,
|
||||
LOGO: `${STORAGE_URL}/assets/logos/supabase_logo_platinum.png`,
|
||||
},
|
||||
}
|
||||
|
||||
const fontData = await font
|
||||
@@ -106,8 +116,8 @@ export async function handler(req: Request) {
|
||||
width: '1200px',
|
||||
height: '628px',
|
||||
position: 'relative',
|
||||
backgroundColor: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].BACKGROUND,
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND,
|
||||
backgroundColor: STYLING_CONGIF[ticketType].BACKGROUND,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND,
|
||||
fontFamily: '"Circular"',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
@@ -128,7 +138,7 @@ export async function handler(req: Request) {
|
||||
right: '-1px',
|
||||
zIndex: '0',
|
||||
}}
|
||||
src={platinum ? BACKGROUND['PLATINUM'].BG : BACKGROUND['REG'].BG}
|
||||
src={BACKGROUND[ticketType].BG}
|
||||
/>
|
||||
|
||||
{/* Name & username */}
|
||||
@@ -151,7 +161,7 @@ export async function handler(req: Request) {
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND,
|
||||
margin: '0',
|
||||
padding: '0',
|
||||
fontSize: '44',
|
||||
@@ -166,7 +176,7 @@ export async function handler(req: Request) {
|
||||
{/* Username */}
|
||||
<div
|
||||
style={{
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND_LIGHT,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND_LIGHT,
|
||||
opacity: 0.8,
|
||||
display: 'flex',
|
||||
fontSize: '38',
|
||||
@@ -196,16 +206,12 @@ export async function handler(req: Request) {
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', marginBottom: '10', marginLeft: '-10' }}>
|
||||
<img
|
||||
src={platinum ? BACKGROUND['PLATINUM']['LOGO'] : BACKGROUND['REG']['LOGO']}
|
||||
width={65}
|
||||
height={65}
|
||||
/>
|
||||
<img src={BACKGROUND[ticketType].LOGO} width={65} height={65} />
|
||||
</div>
|
||||
{/* Ticket No */}
|
||||
<p
|
||||
style={{
|
||||
color: STYLING_CONGIF[platinum ? 'PLATINUM' : 'REG'].FOREGROUND_LIGHT,
|
||||
color: STYLING_CONGIF[ticketType].FOREGROUND_LIGHT,
|
||||
margin: '0',
|
||||
marginBottom: '5',
|
||||
display: 'flex',
|
||||
@@ -259,27 +265,19 @@ export async function handler(req: Request) {
|
||||
// Upload image to storage.
|
||||
const { error: storageError } = await supabaseAdminClient.storage
|
||||
.from('images')
|
||||
.upload(
|
||||
`lwx/tickets/${platinum ? 'platinum' : 'regular'}/${username}.png`,
|
||||
generatedTicketImage.body!,
|
||||
{
|
||||
contentType: 'image/png',
|
||||
// cacheControl: `${60 * 60 * 24 * 7}`,
|
||||
cacheControl: `0`,
|
||||
// Update cached og image, people might need to update info
|
||||
upsert: true,
|
||||
}
|
||||
)
|
||||
.upload(`lwx/tickets/${ticketType}/${username}.png`, generatedTicketImage.body!, {
|
||||
contentType: 'image/png',
|
||||
// cacheControl: `${60 * 60 * 24 * 7}`,
|
||||
cacheControl: `0`,
|
||||
// Update cached og image, people might need to update info
|
||||
upsert: true,
|
||||
})
|
||||
|
||||
if (storageError) throw new Error(`storageError: ${storageError.message}`)
|
||||
|
||||
const NEW_TIMESTAMP = new Date()
|
||||
|
||||
return await fetch(
|
||||
`${STORAGE_URL}/tickets/${
|
||||
platinum ? 'platinum' : 'regular'
|
||||
}/${username}.png?t=${NEW_TIMESTAMP}`
|
||||
)
|
||||
return await fetch(`${STORAGE_URL}/tickets/${ticketType}/${username}.png?t=${NEW_TIMESTAMP}`)
|
||||
} catch (error) {
|
||||
return new Response(JSON.stringify({ error: error.message }), {
|
||||
headers: { ...corsHeaders, 'Content-Type': 'application/json' },
|
||||
|
||||
Reference in new issue
Block a user