Merge pull request #16030 from supabase/fix/lw8-bugs

lw8: smol fixes

apps/www/components/Hero/Hero.tsx

@@ -31,7 +31,7 @@ const Hero = () => {
 
   return (
     <div className="relative -mt-[65px]">
-      <SectionContainer className="py-12 md:py-16 lg:py-20">
+      <SectionContainer className="py-12 md:py-16 lg:py-20 overflow-hidden">
         <div className="relative">
           <div className="mx-auto">
             <div className="mx-auto max-w-2xl lg:col-span-6 lg:flex lg:items-center justify-center text-center">

apps/www/components/LaunchWeek/8/TicketBrickWallSlider.tsx

@@ -56,13 +56,16 @@ export function TicketBrickWallSlider({ users, reverse, speed = 50000, animate }
                   <div className="relative w-full pt-[50%] transform rounded-md md:rounded-lg overflow-hidden bg-gradient-to-b from-[#22282a] to-[#030A0C]">
                     <div className="absolute inset-[1px] w-[calc(100%-2px)] h-[calc(100%-2px)] rounded-md md:rounded-lg overflow-hidden p-[1px]">
                       <Image
-                        src={getOgUrl(user.username!, !!user.golden)}
+                        src={
+                          getOgUrl(user.username!, !!user.golden) ??
+                          '/images/launchweek/8/lw8-ticket-empty.jpg'
+                        }
                         alt={user.username}
                         layout="fill"
                         objectFit="cover"
                         objectPosition="center"
                         placeholder="blur"
-                        blurDataURL="/images/blur.png"
+                        blurDataURL="/images/launchweek/8/lw8-ticket-empty.jpg"
                         className="absolute inset-[1px] rounded-md md:rounded-lg"
                       />
                     </div>

apps/www/components/LaunchWeek/8/TicketsGrid.tsx

@@ -32,7 +32,9 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
         const isOddRow = divider % 2 === 0
         // Delay should be no more than pageCount for new loaded users
         const recalculatedDelay = i >= pageCount * 2 ? (i - pageCount * (offset - 1)) / 15 : i / 15
-        const imgUrl = getTicketImageUrl(user.username!, !!user.golden)
+        const imgUrl =
+          getTicketImageUrl(user.username!, !!user.golden) ??
+          '/images/launchweek/8/lw8-ticket-empty.jpg'
 
         return (
           <Link
@@ -66,7 +68,7 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
                   objectFit="cover"
                   objectPosition="center"
                   placeholder="blur"
-                  blurDataURL="/images/blur.png"
+                  blurDataURL="/images/launchweek/8/lw8-ticket-empty.jpg"
                 />
               </div>
             </motion.a>
@@ -88,7 +90,7 @@ export default function TicketsGrid({ loadedUsers, isLoading, pageCount, offset
               },
             }}
           >
-            <div className="absolute inset-0 rounded-lg sm:rounded-xl bg-gradient-to-b from-[#58585820] to-[#ffffff10] p-[1px] overflow-hidden">
+            <div className="absolute inset-0 rounded-lg sm:rounded-xl bg-gradient-to-b from-[#1c1c1c] to-[#121212] p-[1px] overflow-hidden">
               <div className="absolute inset-[1px] rounded-lg sm:rounded-xl bg-gradient-to-b from-[#1c1c1c] to-[#121212]" />
             </div>
           </motion.div>

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

@@ -6,6 +6,7 @@ import { Button } from 'ui'
 import Link from 'next/link'
 import { motion } from 'framer-motion'
 import { createClient } from '@supabase/supabase-js'
+import { debounce } from 'lodash'
 
 import { SITE_ORIGIN, SITE_URL } from '~/lib/constants'
 import { useTheme } from 'common/Providers'
@@ -81,6 +82,16 @@ export default function TicketsPage({ users }: Props) {
     }
   }
 
+  useEffect(() => {
+    const handleDebouncedScroll = debounce(() => !isLast && handleScroll(), 200)
+
+    window.addEventListener('scroll', handleDebouncedScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleDebouncedScroll)
+    }
+  }, [])
+
   useEffect(() => {
     toggleTheme(true)
     document.body.className = 'dark bg-[#020405]'