feat: lw7 - day 5 community assets

apps/www/components/LaunchWeek/Releases/LW7/Day5.tsx

@@ -5,7 +5,7 @@ import { useMobileViewport } from '~/hooks/useMobileViewport'
 import { CartTitle, MultistepSectionHeader, SectionButtons, StyledArticleBadge } from './components'
 
 import { WeekDayProps } from '~/components/LaunchWeek/lw7_days'
-import { opacityVariant4, scaleOpacityVariant2 } from './LW7Releases'
+import { opacityVariant4, scaleOpacityVariant, scaleOpacityVariant2 } from './LW7Releases'
 
 import styles from './day5.module.css'
 
@@ -18,6 +18,17 @@ const getDay5Motion = (index: number) => {
   }
 }
 
+const getDay5Community02Motion = (index: number) => {
+  switch (index) {
+    case 0:
+      return opacityVariant4
+    case 1:
+      return scaleOpacityVariant
+    default:
+      return undefined
+  }
+}
+
 const Day5 = ({ day }: { day: WeekDayProps }) => {
   const isMobile = useMobileViewport(767)
   const isTablet = useMobileViewport(1023)
@@ -30,7 +41,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
           className={`
                       relative overflow-hidden flex-1 flex flex-col items-center gap-5 lg:items-start justify-between
                       basis-1/2 lg:flex-shrink xl:basis-2/3 w-full border rounded-xl px-4 sm:px-8 lg:px-14 py-10 xs:text-2xl text-xl sm:text-2xl md:text-xl text-center shadow-lg
-                      h-[400px]
+                      min-h-[400px]
                     `}
           initial="default"
           animate="default"
@@ -67,7 +78,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
           className={`
                       relative overflow-hidden flex-1 flex flex-col items-center gap-5 lg:items-start justify-between
                       basis-1/2 lg:basis-1/3 w-full border rounded-xl px-4 sm:px-8 lg:px-14 py-10 xs:text-2xl text-xl sm:text-2xl md:text-xl text-center shadow-lg
-                      h-[400px]
+                      min-h-[400px]
                     `}
           initial="default"
           animate="default"
@@ -84,7 +95,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
                 !!layer.img && (
                   <motion.div
                     className={['absolute inset-0 w-full h-full -z-10'].join(' ')}
-                    variants={getDay5Motion(i)}
+                    variants={getDay5Community02Motion(i)}
                   >
                     <Image
                       src={!!layer.mobileImg && isTablet ? (layer.mobileImg as any) : layer.img}
@@ -93,7 +104,7 @@ const Day5 = ({ day }: { day: WeekDayProps }) => {
                       )}
                       layout="fill"
                       objectPosition={!!layer.mobileImg && isTablet ? '50% 50%' : '50% 50%'}
-                      objectFit="cover"
+                      objectFit={i === 1 && isTablet ? 'contain' : 'cover'}
                       quality={100}
                     />
                   </motion.div>

apps/www/components/LaunchWeek/lw7_days.ts

@@ -33,6 +33,12 @@ const images = {
   '04-sso-01-mobile': '/images/launchweek/seven/day4/sso-support-01-mobile.jpg',
   '04-sso-02': '/images/launchweek/seven/day4/sso-support-02.png',
   '04-sso-02-mobile': '/images/launchweek/seven/day4/sso-support-02-mobile.png',
+  '05-community-01-001': '/images/launchweek/seven/day5/community/community-01-01.jpg',
+  '05-community-01-002': '/images/launchweek/seven/day5/community/community-01-02.png',
+  '05-community-02-001':
+    '/images/launchweek/seven/day5/community/community-02-01-Postgrest-v11.jpg',
+  '05-community-02-002':
+    '/images/launchweek/seven/day5/community/community-02-02-Postgrest-v11.png',
   '05-studio-01-base': '/images/launchweek/seven/day5/studio/studio-01-commandK.jpg',
   '05-studio-01-base-mobile': '/images/launchweek/seven/day5/studio/studio-01-commandK-mobile.jpg',
   '05-studio-02-base': '/images/launchweek/seven/day5/studio/studio-02-wrappers.jpg',
@@ -279,8 +285,10 @@ const days: WeekDayProps[] = [
             blog: '/blog/supabase-auth-sso-pkce',
             bg_layers: [
               {
-                img: images['04-sso-01'],
-                mobileImg: images['04-sso-01-mobile'],
+                img: images['05-community-01-001'],
+              },
+              {
+                img: images['05-community-01-002'],
               },
             ],
             steps: [],
@@ -291,8 +299,10 @@ const days: WeekDayProps[] = [
             docs: '/docs',
             bg_layers: [
               {
-                img: images['04-sso-01'],
-                mobileImg: images['04-sso-01-mobile'],
+                img: images['05-community-02-001'],
+              },
+              {
+                img: images['05-community-02-002'],
               },
             ],
             steps: [],