update

Author: rubenfiszel

src/landing/DeveloperExperienceSection.tsx

@@ -19,7 +19,16 @@ interface FeatureCardProps {
 	lottieData?: unknown;
 }
 
-function FeatureCard({ title, description, href, actionText = 'Learn more', image, imageAlt, video, lottieData }: FeatureCardProps) {
+function FeatureCard({
+	title,
+	description,
+	href,
+	actionText = 'Learn more',
+	image,
+	imageAlt,
+	video,
+	lottieData
+}: FeatureCardProps) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const videoRef = useRef<HTMLVideoElement>(null);
 	const [hasBeenVisible, setHasBeenVisible] = useState(false);
@@ -45,18 +54,17 @@ function FeatureCard({ title, description, href, actionText = 'Learn more', imag
 	}, [hasBeenVisible, video]);
 
 	return (
-		<div ref={containerRef} className="dark:bg-gray-900 bg-gray-50 w-full p-6 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8">
+		<div
+			ref={containerRef}
+			className="dark:bg-gray-900 bg-gray-50 w-full p-6 rounded-xl grid grid-cols-1 md:grid-cols-5 gap-8"
+		>
 			<a
 				href={href}
 				target="_blank"
 				className="col-span-2 group text-black dark:text-white !no-underline hover:text-black hover:dark:text-white cursor-pointer flex flex-col justify-center"
 			>
-				<div className="font-medium text-2xl mb-4 group-hover:ml-2 transition-all">
-					{title}
-				</div>
-				<div className="text-md mb-4 group-hover:ml-2 transition-all max-w-sm">
-					{description}
-				</div>
+				<div className="font-medium text-2xl mb-4 group-hover:ml-2 transition-all">{title}</div>
+				<div className="text-md mb-4 group-hover:ml-2 transition-all max-w-sm">{description}</div>
 				<div className="text-sm text-blue-500 dark:text-blue-300 flex flex-row items-center gap-2 group-hover:ml-2 transition-all">
 					{actionText}
 					<ArrowRight size={20} />
@@ -98,9 +106,14 @@ function BenchmarkCard() {
 	return (
 		<div className="dark:bg-gray-900 bg-gray-50 w-full p-6 rounded-xl">
 			<div className="mb-4">
-				<h3 className="text-2xl font-medium text-gray-900 dark:text-white mb-4">Run at any scale with best performance</h3>
+				<h3 className="text-2xl font-medium text-gray-900 dark:text-white mb-4">
+					Run at any scale with best performance
+				</h3>
 				<p className="text-md text-gray-600 dark:text-gray-300 mb-4">
-					We engineered Windmill to be the fastest orchestrator in the industry, ensuring your most demanding workloads never bottleneck. From a single-node VPS to 1,000-node K8s clusters, auto-scale on demand or isolate critical tasks with dedicated worker groups on Kubernetes and Docker.
+					We engineered Windmill to be the fastest orchestrator in the industry, ensuring your most
+					demanding workloads never bottleneck. From a single-node VPS to 1,000-node K8s clusters,
+					auto-scale on demand or isolate critical tasks with dedicated worker groups on Kubernetes
+					and Docker.
 				</p>
 				<a
 					href="https://www.windmill.dev/docs/misc/benchmarks/competitors"
@@ -121,14 +134,14 @@ function BenchmarkCard() {
 					title="Switch between short and long running tasks"
 					onChange={() => setChart(chart === 'long' ? 'short' : 'long')}
 					className={`${
-						chart === 'short'
-							? 'bg-blue-500 dark:bg-blue-900'
-							: 'bg-gray-200 dark:bg-gray-800'
+						chart === 'short' ? 'bg-blue-500 dark:bg-blue-900' : 'bg-gray-200 dark:bg-gray-800'
 					} relative inline-flex h-[24px] w-[48px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
 				>
 					<span
 						aria-hidden="true"
-						className={`${chart === 'short' ? 'translate-x-6' : 'translate-x-0'} pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
+						className={`${
+							chart === 'short' ? 'translate-x-6' : 'translate-x-0'
+						} pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
 					/>
 				</Switch>
 				<span className={classNames('font-light text-sm text-gray-900 dark:text-white')}>
@@ -150,7 +163,14 @@ function BenchmarkCard() {
 									<BenchmarkVisualization
 										usecase="fibonacci_40_10"
 										language="python"
-										engines={['airflow', 'kestra', 'prefect', 'temporal', 'windmill', 'windmill_dedicated']}
+										engines={[
+											'airflow',
+											'kestra',
+											'prefect',
+											'temporal',
+											'windmill',
+											'windmill_dedicated'
+										]}
 										workers={1}
 										title="40 lightweight tasks comparison"
 										maintainAspectRatio={false}
@@ -162,7 +182,14 @@ function BenchmarkCard() {
 									<BenchmarkVisualization
 										usecase="fibonacci_10_33"
 										language="python"
-										engines={['airflow', 'kestra', 'prefect', 'temporal', 'windmill', 'windmill_dedicated']}
+										engines={[
+											'airflow',
+											'kestra',
+											'prefect',
+											'temporal',
+											'windmill',
+											'windmill_dedicated'
+										]}
 										workers={1}
 										title="10 long running tasks comparison"
 										maintainAspectRatio={false}
@@ -186,10 +213,11 @@ export default function DeveloperExperienceSection() {
 			<div className="w-full">
 				<div className="mb-12 text-left">
 					<h1 className="tracking-tight leading-tight text-left font-bold text-transparent bg-clip-text bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-400 dark:to-blue-600">
-						Made for developers, used across the whole organization
+						Run in production
 					</h1>
 					<span className="text-lg text-gray-700 dark:text-gray-200">
-					We make it easy for developers to build internal software and deploy it across their whole organization with no overhead.
+						Review, deploy and run on the most scalable and reliable infra with workers managed by
+						Windmill, and all observability, alerting and error handling built-in (+export to OTEL)
 					</span>
 				</div>
 				<div className="flex flex-col gap-6">