add dependency tab

rubenfiszel · rubenfiszel · commit d41ce4db92be · 2023-02-20T14:11:39.000+01:00
diff --git a/src/landing/ScriptSection.tsx b/src/landing/ScriptSection.tsx
@@ -69,14 +69,23 @@ const newTabs = [
 			{
 				title: 'Autogenerated UI',
 				description:
-					'Share your app with non-technical users without spending time building the UI. It’s automatically generated from script parameters, and customizable.',
+					'Share your app with non-technical users without spending time building the UI. It\'s automatically generated from script parameters, and customizable.',
 				icon: FormInputIcon,
 				caption:
 					'Adding a new parameter to your script will automatically add a new field to the UI.',
 				video: {
 					videoSrc: '/videos/autogenerated-ui.mp4',
 					videoLength: '26'
 				}
+			},
+			{
+				title: 'Automatic Dependency Management',
+				description:
+					'Windmill automatically infers your dependencies and generate lockfiles to guarantee reproducible execution. Dependencies are cached for instant executions.',
+				icon: FormInputIcon,
+				svg: '/images/script-dependency.svg',
+				height: '600px',
+				caption: 'Infer dependencies from your imports'
 			}
 		]
 	},
diff --git a/src/landing/tabs/TabContent.tsx b/src/landing/tabs/TabContent.tsx
@@ -41,13 +41,16 @@ export default function TabContent({ data, color }) {
 				<img
 					className="border-2 rounded-xl object-cover w-full h-full"
 					src={data[selectedIndex].imageSrc}
-				/>
+					style={{ maxHeight: data[selectedIndex].height }}
+
+					/>
 			);
 		} else if (data[selectedIndex].svg) {
 			return (
 				<img
-					className="border-2 p-2 bg-white rounded-xl object-cover w-full h-full"
+					className="border-2 p-2 bg-white rounded-xl object-cover w-full mx-auto h-full"
 					src={data[selectedIndex].svg}
+					style={{ maxHeight: data[selectedIndex].height }}
 				/>
 			);
 		} else {
diff --git a/static/images/script-dependency.svg b/static/images/script-dependency.svg
