This commit is contained in:
Francesco Sansalvadore authored and GitHub committed 2024-04-20 20:45:06 +02:00
1 parent ddd16eaefd
commit 9c452145ae
9 files changed
+37 -69

No files matched your search

+5 -1
View File
@@ -24,7 +24,11 @@ const Hero = () => {
<div className="relative z-10 lg:h-auto pt-[90px] lg:pt-[90px] lg:min-h-[300px] flex flex-col items-center justify-center sm:mx-auto md:w-3/4 lg:mx-0 lg:w-full gap-4 lg:gap-8">
<div className="flex flex-col items-center">
<div className="z-40 w-full flex justify-center -mt-4 lg:-mt-12 mb-8">
<AnnouncementBadge url="/ga-week#day-5" badge="GA Week" announcement="Day 5" />
<AnnouncementBadge
url="/ga-week"
badge="GA Week"
announcement="View everything we shipped"
/>
</div>
<h1 className="text-foreground text-4xl sm:text-5xl sm:leading-none lg:text-7xl">
<span className="block text-[#F4FFFA00] bg-clip-text bg-gradient-to-b from-foreground to-foreground-light">
@@ -15,7 +15,6 @@ export default function LaunchWeekPrizeSection({ className }: { className?: stri
)}
>
<h2 className="w-full text-sm font-mono uppercase tracking-[1px]">Awards</h2>
<p className="text-2xl text-foreground-lighter">Generate your ticket for a chance to win.</p>
<div className="w-full pt-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mx-auto h-auto text-foreground">
<LaunchWeekPrizeCard
@@ -52,9 +51,6 @@ export default function LaunchWeekPrizeSection({ className }: { className?: stri
headphones!
</p>
</div>
<div className="w-full mt-3 md:mt-6">
<PrizeActions />
</div>
</div>
</div>
}
@@ -100,21 +100,23 @@ const LWXStickyNav: FC = () => {
</ul>
</div>
<div>
<Link
href="#ticket"
className="flex items-center gap-2 text-xs text-foreground-light hover:text-foreground transition-colors"
>
{hasTicket ? `${DISPLAY_NAME}'s ticket` : 'Claim ticket'}
<Image
src={getTicketIcon()}
alt=""
width={24}
height={24}
aria-hidden
className="w-auto h-4 shadow"
priority
/>
</Link>
{hasTicket && (
<Link
href="#ticket"
className="flex items-center gap-2 text-xs text-foreground-light hover:text-foreground transition-colors"
>
{DISPLAY_NAME}'s ticket
<Image
src={getTicketIcon()}
alt=""
width={24}
height={24}
aria-hidden
className="w-auto h-4 shadow"
priority
/>
</Link>
)}
</div>
</SectionContainer>
</nav>
@@ -269,7 +269,7 @@ const days: (isDark?: boolean) => WeekDayProps[] = (isDark = true) => [
d: 5,
dd: 'Fri',
shipped: true,
isToday: true,
isToday: false,
hasCountdown: false,
blog: '/blog/security-performance-advisor',
date: '19 April',
@@ -1,11 +1,9 @@
import React, { useEffect, useRef } from 'react'
import dynamic from 'next/dynamic'
import { AnimatePresence, m, LazyMotion, domAnimation, useInView } from 'framer-motion'
import React, { useRef } from 'react'
import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion'
import { Badge, cn } from 'ui'
import { DEFAULT_TRANSITION, INITIAL_BOTTOM, getAnimation } from '~/lib/animations'
import { LW11_DATE, LW11_LAUNCH_DATE_END } from '~/lib/constants'
import useWinningChances from '../../hooks/useWinningChances'
import useLwGame from '../../hooks/useLwGame'
import useConfData from '~/components/LaunchWeek/hooks/use-conf-data'
import SectionContainer from '~/components/Layouts/SectionContainer'
@@ -15,16 +13,13 @@ import TicketForm from './TicketForm'
import CountdownComponent from '../Countdown'
import TicketActions from './TicketActions'
const LWGame = dynamic(() => import('./LW11Game'))
const TicketingFlow = () => {
const sectionRef = useRef<HTMLDivElement>(null)
const { ticketState, userData, showCustomizationForm } = useConfData()
const { isGameMode, setIsGameMode } = useLwGame(ticketState !== 'ticket' || showCustomizationForm)
const { ticketState, userData } = useConfData()
const isLoading = !isGameMode && ticketState === 'loading'
const isRegistering = !isGameMode && ticketState === 'registration'
const hasTicket = !isGameMode && ticketState === 'ticket'
const isLoading = ticketState === 'loading'
const isRegistering = ticketState === 'registration'
const hasTicket = ticketState === 'ticket'
const hasPlatinumTicket = userData.platinum
const hasSecretTicket = userData.secret
const metadata = userData?.metadata
@@ -36,14 +31,6 @@ const TicketingFlow = () => {
const winningChances = useWinningChances()
const isInView = useInView(sectionRef)
useEffect(() => {
if (!isInView) setIsGameMode(false)
return () => setIsGameMode(false)
}, [isInView])
return (
<>
<SectionContainer ref={sectionRef} className="relative !pt-8 lg:!pt-20 gap-5 h-full flex-1">
@@ -87,24 +74,15 @@ const TicketingFlow = () => {
exit={exit}
className={cn(
'w-full min-h-[400px] max-w-md mx-auto flex flex-col justify-center gap-8 lg:gap-12 opacity-0 invisible',
!isGameMode && !hasTicket && 'opacity-100 visible'
!hasTicket && 'opacity-100 visible'
)}
>
<div className="flex flex-col gap-2">
<h2 className="text-foreground text-2xl">Claim your ticket</h2>
</div>
<div className="flex flex-col gap-1 font-mono text-sm">
<h2 className="text-foreground text-2xl">Time to participate has expired</h2>
<span className="font-mono text-foreground-lighter text-xs leading-3">
Time to participate
See you next Launch Week.
</span>
<CountdownComponent
date={LW11_LAUNCH_DATE_END}
showCard={false}
className="[&_*]:leading-4"
size="large"
/>
</div>
<TicketForm />
</m.div>
)}
{hasTicket && (
@@ -164,17 +142,6 @@ const TicketingFlow = () => {
</div>
</m.div>
)}
{isInView && !showCustomizationForm && isGameMode && (
<m.div
key="ticket"
initial={initial}
animate={animate}
exit={exit}
className="w-full flex justify-center text-foreground !h-[500px]"
>
<LWGame setIsGameMode={setIsGameMode} />
</m.div>
)}
</AnimatePresence>
</LazyMotion>
</div>
+1 -1
View File
@@ -48,7 +48,7 @@ export const LWX_DATE = 'Dec 11-15 / 8am PT'
export const LWX_LAUNCH_DATE = '2023-12-11T08:00:00.000-07:00'
export const LW11_DATE = 'April 15-19 / 7am PT'
export const LW11_LAUNCH_DATE = '2024-04-15T07:00:00.000-07:00'
export const LW11_LAUNCH_DATE_END = '2024-04-20T07:00:00.000-07:00'
export const LW11_LAUNCH_DATE_END = '2024-04-21T23:59:59.000-07:00'
export const TWEET_TEXT = '👁️⚡👁️'
export const TWEET_TEXT_GOLDEN = `👁️⚡👁️`
export const TWEET_TEXT_PLATINUM = `👁️⚡👁️`
@@ -43,12 +43,11 @@ const PromoToast = () => {
<p className="text-foreground flex flex-col text-lg w-full leading-6 mb-1">
General Availability Week
</p>
<span className="uppercase font-mono">Day 5</span>
</div>
<div className="relative z-10 flex items-center space-x-2">
<Button asChild type="secondary">
<Link target="_blank" rel="noreferrer" href="https://supabase.com/ga-week#day-5">
<Link target="_blank" rel="noreferrer" href="https://supabase.com/ga-week">
Learn more
</Link>
</Button>
@@ -23,7 +23,7 @@ export function LW11CountdownBanner() {
>
<p className="flex gap-1.5 items-center">{announcement.text}</p>
<Button size="tiny" type="default" className="px-2 !leading-none text-xs" asChild>
<Link href="https://supabase.com/ga-week#day-5">Learn more</Link>
<Link href="https://supabase.com/ga-week">Learn more</Link>
</Button>
</div>
</div>
@@ -1,7 +1,7 @@
{
"show": true,
"text": "General Availability Week: Day 5",
"text": "Supabase has reached General Availability",
"launchDate": "2024-04-15T07:00:00.000-08:00",
"link": "https://supabase.com/ga-week#day-5",
"link": "https://supabase.com/ga-week",
"badge": "Learn more"
}