feat: add secrets video (#581)

Author: Cahllagerfeld

src/app/settings/Menu.tsx

@@ -12,7 +12,7 @@ type MenuProps = {
 export function SettingsMenu({ items }: MenuProps) {
 	return (
 		<nav className="flex w-full flex-col items-center">
-			<ul className="flex w-full flex-row items-center gap-1 lg:flex-col lg:items-start">
+			<ul className="flex w-full flex-row flex-wrap items-center gap-1 lg:flex-col lg:items-start">
 				{items.map((item) => (
 					<li key={item.name} className="lg:w-full">
 						<NavLink end to={item.href}>

src/app/settings/page.tsx

@@ -11,7 +11,7 @@ export default function SettingsPage() {
 
 	return (
 		<div className="layout-container flex flex-col gap-7 pt-5 lg:flex-row lg:px-10">
-			<div className="flex w-[200px] shrink-0 flex-col gap-4">
+			<div className="flex shrink-0 flex-col gap-4 lg:w-[200px]">
 				<div className="flex flex-col gap-4">
 					<p className="text-text-xs font-semibold uppercase text-theme-text-tertiary">Server</p>
 					<DisplayServer />

src/app/settings/secrets/Fragments.tsx

@@ -4,6 +4,8 @@ import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import { Fragment } from "react/jsx-runtime";
 import { generateCommandList } from "@/components/fallback-pages/Commands";
 import { secretCommands } from "@/contents/secrets";
+import { VideoModal } from "@/components/VideoModal";
+import SecretsVideo from "@/assets/illustrations/secrets-video.svg";
 
 export function InfoBox() {
 	return (
@@ -17,14 +19,30 @@ export function InfoBox() {
 }
 
 export function HeaderBox() {
+	const videoLink =
+		"https://zenml.portal.trainn.co/share/R0A37qU8LVfcvPi6wxdhaQ/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 Secrets</h2>
 				<p className="mt-2 text-text-lg text-theme-text-secondary">
 					Learn about using ZenML Secrets for a secure, centralized management of your pipeline
 					secrets and configurations.
 				</p>
+				<VideoModal videoLink={videoLink} buttonText="Watch the Starter Guide (1 min)" />
+			</div>
+			<div className="flex w-full items-center justify-center bg-primary-50 lg:w-1/3">
+				<VideoModal
+					fallbackImage={
+						<img
+							src={SecretsVideo}
+							alt="Purple squares with text indicating a starter guide for secrets"
+							className="h-full w-full"
+						/>
+					}
+					videoLink={videoLink}
+					isButton={false}
+				/>
 			</div>
 		</Box>
 	);

src/app/stacks/Fragments.tsx

@@ -34,7 +34,7 @@ export function HeaderBox() {
 					Get started with ZenML Stacks and Stack Components in this starter guide video. Set up
 					Your Stack from local to cloud.
 				</p>
-				<VideoModal videoLink={videoLink} buttonText="Watch the Starter Guide (5 min)" />
+				<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