diff --git a/apps/www/components/LaunchWeek/LaunchSection/index.tsx b/apps/www/components/LaunchWeek/LaunchSection/index.tsx
index 3036a1754d6..e10f77d4b91 100644
--- a/apps/www/components/LaunchWeek/LaunchSection/index.tsx
+++ b/apps/www/components/LaunchWeek/LaunchSection/index.tsx
@@ -1,8 +1,9 @@
-import { TruckIcon } from '@heroicons/react/outline'
-import { Badge } from '@supabase/ui'
+import { PlayIcon, TruckIcon, XIcon } from '@heroicons/react/outline'
+import { Badge, Modal } from '@supabase/ui'
-import _days from './../days.json'
+import { useState } from 'react'
import { Article, Product, WeekDayProps } from '../types'
+import _days from './../days.json'
import ArticleButtonListItem from './ArticleButtonListItem'
import ProductButton from './ProductButton'
import ProductButtonListItem from './ProductButtonListItem'
@@ -12,6 +13,7 @@ const days = _days as WeekDayProps[]
export const LaunchSection = (props: WeekDayProps) => {
const lastIndex = props.index === days.length - 1
const nextDayNotShipped = props.shipped && !days[props.index + 1]?.shipped
+ const [videoVisible, setVideoVisible] = useState(false)
return (
@@ -26,13 +28,62 @@ export const LaunchSection = (props: WeekDayProps) => {
/>
) : (
-
-

-
+ <>
+
+

+
setVideoVisible(true)}
+ className="
+ absolute
+ top-0
+ left-0
+ flex
+ h-full
+ w-full
+ items-center
+ justify-center
+ "
+ >
+
+
+
+
+ setVideoVisible(false)}
+ hideFooter
+ header={
+
+ {props.title}
+
+ setVideoVisible(false)}
+ />
+
+ }
+ >
+
+
+ >
)}
)}
diff --git a/apps/www/components/LaunchWeek/types.d.ts b/apps/www/components/LaunchWeek/types.d.ts
index 6c886c89497..767d9d57111 100644
--- a/apps/www/components/LaunchWeek/types.d.ts
+++ b/apps/www/components/LaunchWeek/types.d.ts
@@ -31,4 +31,5 @@ export interface WeekDayProps {
products?: Announcement[]
index: number
shippingHasStarted?: boolean
+ youtube_id?: string
}
diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css
index b17c78a7b53..cfb0f189dbb 100644
--- a/apps/www/styles/index.css
+++ b/apps/www/styles/index.css
@@ -284,3 +284,18 @@ launch week
background-position-y: -780px;
}
}
+
+.video-container {
+ position: relative;
+ width: 100%;
+ padding-bottom: 56.25%;
+}
+
+.video-container iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+}