add some motion

apps/www/components/LaunchWeek/15/LW15Hackathon.tsx

@@ -5,19 +5,36 @@ import { Button, cn } from 'ui'
 
 import SectionContainer from 'components/Layouts/SectionContainer'
 import Image from 'next/image'
+import { DEFAULT_EASE } from '../../../lib/animations'
+
+const MotionImage = motion(Image)
 
 const LW15Hackathon: FC = () => {
   const ref = React.useRef(null)
   const isInView = useInView(ref, { margin: '-25%', once: true })
 
   const variants = {
+    initial: {},
     reveal: {
       transition: {
         type: 'spring',
         damping: 10,
         mass: 0.75,
         stiffness: 100,
-        staggerChildren: 0.08,
+        staggerChildren: 0.15,
+      },
+    },
+  }
+
+  const imageVariants = {
+    initial: {
+      y: '100%',
+    },
+    reveal: {
+      y: 0,
+      transition: {
+        ease: DEFAULT_EASE,
+        duration: 0.5,
       },
     },
   }
@@ -28,9 +45,15 @@ const LW15Hackathon: FC = () => {
         className="!max-w-none lg:!container lw-nav-anchor lg:grid lg:grid-cols-5 gap-4 lg:gap-2"
         id="build-stage"
       >
-        <div className="flex flex-col md:gap-4 h-full justify-between col-span-2 lg:min-h-[500px]">
-          <div className="relative flex-grow-[1]">
-            <Image
+        <motion.div
+          ref={ref}
+          variants={variants}
+          animate={isInView ? 'reveal' : 'initial'}
+          className="flex flex-col md:gap-4 h-full justify-between col-span-2 lg:min-h-[500px]"
+        >
+          <div className="relative flex-grow-[1] overflow-hidden">
+            <MotionImage
+              variants={imageVariants}
               src="/images/launchweek/15/lw15-galaxy-hackathon.png"
               alt="Hackathon"
               width={1000}
@@ -39,8 +62,9 @@ const LW15Hackathon: FC = () => {
               className="absolute w-full inset-0 h-full object-cover object-top"
             />
           </div>
-          <div className="relative flex-grow-[2]">
-            <Image
+          <div className="relative flex-grow-[2] overflow-hidden">
+            <MotionImage
+              variants={imageVariants}
               src="/images/launchweek/15/lw15-galaxy-hackathon.png"
               alt="Hackathon"
               width={1000}
@@ -49,8 +73,9 @@ const LW15Hackathon: FC = () => {
               className="absolute w-full inset-0 h-full object-cover object-top"
             />
           </div>
-          <div className="relative flex-grow-[3]">
-            <Image
+          <div className="relative flex-grow-[3] overflow-hidden">
+            <MotionImage
+              variants={imageVariants}
               src="/images/launchweek/15/lw15-galaxy-hackathon.png"
               alt="Hackathon"
               width={1000}
@@ -59,7 +84,7 @@ const LW15Hackathon: FC = () => {
               className="absolute w-full inset-0 h-full object-cover object-top"
             />
           </div>
-        </div>
+        </motion.div>
         <div className="w-full h-full flex flex-col justify-between gap-4 lg:col-span-3">
           <div className="flex flex-col h-full gap-4">
             <div className="flex flex-col sm:flex-row justify-between text-xs gap-4">

apps/www/components/LaunchWeek/15/LW15MainStage.tsx

@@ -1,8 +1,10 @@
+import 'swiper/css'
 import React from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { cn } from 'ui'
 import { useTheme } from 'next-themes'
+import { Swiper, SwiperSlide } from 'swiper/react'
 
 import SectionContainer from 'components/Layouts/SectionContainer'
 import { mainDays, WeekDayProps } from './data'
@@ -13,20 +15,23 @@ const LW15MainStage = ({ className }: { className?: string }) => {
   const days = mainDays(isDark!)
 
   return (
-    <SectionContainer
-      className={cn(
-        'relative !max-w-none !pt-8 lg:!pt-10 lg:!container flex flex-col gap-4',
-        className
-      )}
-      id="main-stage"
-    >
-      <h3 className="text-2xl lg:text-3xl">Main Stage</h3>
-      <div className="flex flex-nowrap justify-between gap-2">
-        {days.map((day) => (
-          <DayCard day={day} key={day.dd} />
-        ))}
-      </div>
-    </SectionContainer>
+    <div className="relative pb-16 md:pb-24 lg:pb-24">
+      <SectionContainer
+        className={cn(
+          'relative !max-w-none !pb-4 md:pb-4 !pt-8 xl:!pt-10 xl:!container flex flex-col gap-4',
+          className
+        )}
+        id="main-stage"
+      >
+        <h3 className="text-2xl lg:text-3xl">Main Stage</h3>
+        <div className="hidden xl:flex flex-nowrap justify-between gap-2">
+          {days.map((day) => (
+            <DayCard day={day} key={day.dd} />
+          ))}
+        </div>
+      </SectionContainer>
+      <CardsSlider slides={days} className="xl:hidden" />
+    </div>
   )
 }
 
@@ -34,7 +39,7 @@ const DayCard = ({ day }: { day: WeekDayProps }) => (
   <Link
     href={day.blog!}
     className={cn(
-      'flex-1 group/main w-auto aspect-[217/275] relative overflow-hidden rounded border text-white'
+      'group/main block w-full h-full xl:flex-1 xl:h-auto xl:aspect-[217/275] relative overflow-hidden rounded border text-white'
     )}
   >
     <CardBG day={day} />
@@ -83,4 +88,42 @@ const CardBG = ({ day }: { day: WeekDayProps }) => (
   </div>
 )
 
+interface Props {
+  className?: string
+  slides: WeekDayProps[]
+}
+
+const CardsSlider: React.FC<Props> = ({ slides, className }) => (
+  <div className={cn('relative px-6 lg:px-16', className)}>
+    <Swiper
+      initialSlide={0}
+      spaceBetween={12}
+      slidesPerView={1.5}
+      breakpoints={{
+        540: {
+          slidesPerView: 2.5,
+        },
+        720: {
+          slidesPerView: 3.5,
+        },
+        960: {
+          slidesPerView: 4.5,
+        },
+      }}
+      speed={400}
+      watchOverflow
+      threshold={2}
+      updateOnWindowResize
+      allowTouchMove
+      className="!w-full !overflow-visible"
+    >
+      {slides.map((day: WeekDayProps, i: number) => (
+        <SwiperSlide className={cn('flex w-full aspect-[217/275]')} key={`${day.id}-mobile-${i}`}>
+          <DayCard day={day} />
+        </SwiperSlide>
+      ))}
+    </Swiper>
+  </div>
+)
+
 export default LW15MainStage