Followup Release

src/app/artifacts/page.tsx

@@ -46,7 +46,7 @@ export default function ModelsPage() {
 						<ProButtons />
 					</div>
 					<ProImage
-						className="flex-1 translate-x-[10%] translate-y-[20%] scale-110"
+						className="absolute translate-x-[30%] translate-y-[15%] scale-[40%]"
 						src={ACP}
 						alt="Screenshot of the ZenML Pro Artifact Control Plane"
 					/>

src/app/models/page.tsx

@@ -59,7 +59,7 @@ export default function ModelsPage() {
 						<ProButtons />
 					</div>
 					<ProImage
-						className="flex-1 translate-x-[10%] translate-y-[20%] scale-110"
+						className="absolute translate-x-[30%] translate-y-[15%] scale-[40%]"
 						src={MCP}
 						alt="Screenshot of the ZenML Pro Artifact Control Plane"
 					/>

src/components/MetadataCards.tsx

@@ -15,15 +15,11 @@ import { isUrl } from "../lib/url";
 type Props = { metadata: MetadataMap };
 
 export function MetadataCards({ metadata }: Props) {
-	const dictMetadata = Object.values(metadata || {}).filter((val) => isObject(val));
+	const dictMetadata = Object.entries(metadata || {}).filter(([_, val]) => isObject(val));
 	return (
 		<>
-			{dictMetadata.map((metadataObj, idx) => (
-				<NestedCollapsible
-					key={idx}
-					data={metadataObj as Record<string, unknown>}
-					title={Object.keys({ metadataObj })[0]}
-				/>
+			{dictMetadata.map(([key, metadataObj], idx) => (
+				<NestedCollapsible key={idx} data={metadataObj as Record<string, unknown>} title={key} />
 			))}
 		</>
 	);

src/components/pro/ProCta.tsx

@@ -78,7 +78,10 @@ export function ProButtons() {
 export function ProImage({ className, ...rest }: ImgHTMLAttributes<HTMLImageElement>) {
 	return (
 		<img
-			className={cn("w-full shrink-0 rounded-md border border-theme-border-moderate", className)}
+			className={cn(
+				"hidden w-full shrink-0 rounded-md border border-theme-border-moderate 2xl:block",
+				className
+			)}
 			{...rest}
 		/>
 	);