diff --git a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx b/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx index 2c9913f11ae..be4d6272131 100644 --- a/apps/www/components/LaunchWeek/15/LW15Hackathon.tsx +++ b/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" > -
-
- +
+ { className="absolute w-full inset-0 h-full object-cover object-top" />
-
- + { className="absolute w-full inset-0 h-full object-cover object-top" />
-
- + { className="absolute w-full inset-0 h-full object-cover object-top" />
-
+
diff --git a/apps/www/components/LaunchWeek/15/LW15MainStage.tsx b/apps/www/components/LaunchWeek/15/LW15MainStage.tsx index e9678ae74d4..beff3968505 100644 --- a/apps/www/components/LaunchWeek/15/LW15MainStage.tsx +++ b/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 ( - -

Main Stage

-
- {days.map((day) => ( - - ))} -
-
+
+ +

Main Stage

+
+ {days.map((day) => ( + + ))} +
+
+ +
) } @@ -34,7 +39,7 @@ const DayCard = ({ day }: { day: WeekDayProps }) => ( @@ -83,4 +88,42 @@ const CardBG = ({ day }: { day: WeekDayProps }) => (
) +interface Props { + className?: string + slides: WeekDayProps[] +} + +const CardsSlider: React.FC = ({ slides, className }) => ( +
+ + {slides.map((day: WeekDayProps, i: number) => ( + + + + ))} + +
+) + export default LW15MainStage