(feature/PRD-387-video-repository): video repository section (#595)

Author: atzin-escandia

src/app/settings/repositories/Fragments.tsx

@@ -4,6 +4,8 @@ import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import { repositoryCommands } from "@/contents/repositories";
 import { Fragment } from "react/jsx-runtime";
 import { generateCommandList } from "@/components/fallback-pages/Commands";
+import { VideoModal } from "@/components/VideoModal";
+import ReposVideo from "@/assets/illustrations/repos-video.svg?url";
 
 export function InfoBox() {
 	return (
@@ -17,6 +19,9 @@ export function InfoBox() {
 }
 
 export function HeaderBox() {
+	const videoLink =
+		"https://zenml.portal.trainn.co/share/koVfVubiXfXLXtVcDAqPyg/embed?autoplay=false";
+
 	return (
 		<Box className="flex flex-col-reverse items-stretch overflow-hidden md:flex-row">
 			<div className="w-full p-7 md:w-2/3">
@@ -25,6 +30,20 @@ export function HeaderBox() {
 					Get started with ZenML Repositories for streamlined pipeline versioning and faster Docker
 					builds.
 				</p>
+				<VideoModal videoLink={videoLink} buttonText="Watch the Starter Guide (2 min)" />
+			</div>
+			<div className="flex w-full items-center justify-center bg-primary-50 lg:w-1/3">
+				<VideoModal
+					fallbackImage={
+						<img
+							src={ReposVideo}
+							alt="Purple squares with text indicating a starter guide for secrets"
+							className="h-full w-full"
+						/>
+					}
+					videoLink={videoLink}
+					isButton={false}
+				/>
 			</div>
 		</Box>
 	);