feat: add connectors video (#598)

Author: Cahllagerfeld

src/app/settings/connectors/Fragments.tsx

@@ -1,6 +1,8 @@
+import ConnectorsVideo from "@/assets/illustrations/connectors-video.svg";
 import { InfoBox as InfoBoxPrimitive } from "@/components/Infobox";
-import { Box } from "@zenml-io/react-component-library";
-import { ConnectorsSelect } from "./ConnectorsSelect";
+import { VideoModal } from "@/components/VideoModal";
+import { CommandListItem, generateCommandList } from "@/components/fallback-pages/Commands";
+import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import {
 	AWSSection,
 	AzureSection,
@@ -9,9 +11,9 @@ import {
 	GCPSection,
 	KubernetesSection
 } from "@/contents/connectors";
+import { Box } from "@zenml-io/react-component-library";
 import { Fragment, useState } from "react";
-import { CommandListItem, generateCommandList } from "@/components/fallback-pages/Commands";
-import { HelpBox } from "@/components/fallback-pages/Helpbox";
+import { ConnectorsSelect } from "./ConnectorsSelect";
 
 export function InfoBox() {
 	return (
@@ -25,14 +27,30 @@ export function InfoBox() {
 }
 
 export function HeaderBox() {
+	const videoLink =
+		"https://zenml.portal.trainn.co/share/V6magMJZZvMptz1wdnUmPA/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">
+		<Box className="flex flex-col-reverse items-stretch overflow-hidden lg:flex-row">
+			<div className="w-full p-7 lg:w-2/3">
 				<h2 className="text-display-xs font-semibold">Learn More about Connectors</h2>
 				<p className="mt-2 text-text-lg text-theme-text-secondary">
 					Dive into Service Connector Types for a documented approach to secure authentication and
 					authorization practices.
 				</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={ConnectorsVideo}
+							alt="Purple squares with text indicating a starter guide for secrets"
+							className="h-full w-full"
+						/>
+					}
+					videoLink={videoLink}
+					isButton={false}
+				/>
 			</div>
 		</Box>
 	);