LW7: make background glow gold based on ticket

apps/www/components/LaunchWeek/Ticket/ActualTicket.tsx

@@ -63,7 +63,7 @@ export default function Ticket({
 
   return (
     <div
-      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"
+      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 p-2 bg-[#a988d748] rounded-2xl xl:items-stretch h-auto"
       id="wayfinding--ticket-visual-wrapper-container"
     >
       <div
@@ -116,7 +116,7 @@ export default function Ticket({
       </div>
       <div
         ref={divRef}
-        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"
+        className="flex flex-col !w-full h-full justify-center gap-6 col-span-full xl:col-span-4 xl:pr-8"
       >
         <div
           className={`

apps/www/components/LaunchWeek/Ticket/hooks/use-conf-data.ts

@@ -8,9 +8,9 @@ export type UserData = {
   ticketNumber?: number
   username?: string
   name?: string
-  golden?: boolean
+  golden?: boolean | string
   referrals?: number
-  bgImageId?: number
+  bgImageId?: number | string
   sharedOnTwitter?: string
   sharedOnLinkedIn?: string
 }

apps/www/pages/launch-week/index.tsx

@@ -35,12 +35,15 @@ export default function TicketHome({ users }: Props) {
   const { query, pathname } = useRouter()
   const isLauchWeekPage = pathname.includes('launch-week')
   const ticketNumber = query.ticketNumber?.toString()
+  const bgImageId = query.bgImageId?.toString()
 
   const defaultUserData = {
     id: query.id?.toString(),
     ticketNumber: ticketNumber ? parseInt(ticketNumber, 10) : undefined,
     name: query.name?.toString(),
     username: query.username?.toString(),
+    golden: !!query.golden,
+    bgImageId: bgImageId ? parseInt(bgImageId, 10) : undefined,
   }
 
   useEffect(() => {
@@ -113,8 +116,12 @@ export default function TicketHome({ users }: Props) {
               </SectionContainer>
               <LW7BgGraphic />
             </div>
-            {/* TODO: set gold gradient if ticket is gold */}
-            <div className="bg-lw7-gradient absolute inset-0 z-0" />
+            <div
+              className={[
+                'bg-lw7-gradient absolute inset-0 z-0',
+                defaultUserData?.golden && 'gold',
+              ].join(' ')}
+            />
           </div>
 
           <LaunchWeekPrizeSection className="-mt-20 md:-mt-60" />

apps/www/pages/launch-week/launchWeek.css

@@ -11,8 +11,12 @@
   background: radial-gradient(72.03% 66.03% at 50% 69.72%, #3fcf8e 0%, transparent 100%);
 }
 
+.bg-lw7-gradient.gold {
+  background: radial-gradient(72.03% 66.03% at 50% 69.72%, #ffd132 0%, transparent 100%);
+}
+
 .opacity-pulse {
-  animation: opacity-pulse 2.5s ease-in-out infinite alternate both;
+  animation: opacity-pulse 3.5s ease-in-out infinite alternate both;
 }
 
 .glass-tile-gradient {
@@ -42,7 +46,7 @@
 
 @keyframes opacity-pulse {
   0% {
-    opacity: 0.5;
+    opacity: 0.75;
   }
   100% {
     opacity: 1;

apps/www/pages/launch-week/tickets/[username].tsx

@@ -9,6 +9,7 @@ import { createClient } from '@supabase/supabase-js'
 import { useEffect, useState } from 'react'
 import { FastGlobOptionsWithoutCwd } from 'globby'
 import { useTheme } from 'common/Providers'
+import { IconArrowDown } from 'ui'
 import LaunchWeekPrizeSection from '~/components/LaunchWeek/LaunchSection/LaunchWeekPrizeSection'
 import { LaunchWeekLogoHeader } from '~/components/LaunchWeek/LaunchSection/LaunchWeekLogoHeader'
 import TicketBrickWall from '~/components/LaunchWeek/LaunchSection/TicketBrickWall'
@@ -82,10 +83,18 @@ export default function TicketShare({ user, users }: Props) {
                   }}
                   sharePage
                 />
+                <div>
+                  <a href="#lw-7-prizes" className="flex items-center text-white text-sm gap-4">
+                    See the prizes{' '}
+                    <span className="bounce-loop">
+                      <IconArrowDown w={10} h={12} />
+                    </span>
+                  </a>
+                </div>
               </SectionContainer>
               <LW7BgGraphic />
             </div>
-            <div className="bg-lw7-gradient absolute inset-0 z-0 opacity-pulse" />
+            <div className={['bg-lw7-gradient absolute inset-0 z-0', golden && 'gold'].join(' ')} />
           </div>
           <LaunchWeekPrizeSection className="-mt-20 md:-mt-60" />
           <TicketBrickWall users={users} />