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