feat : new-landing-page

src/css/custom.css

@@ -596,4 +596,19 @@ div.testimonials a:hover .wm-name {
 
 video:fullscreen {
 	object-fit: contain !important; 
+}
+
+/* Improve readability of BenchmarkVisualization chart text */
+.benchmark-chart-container canvas {
+	filter: brightness(1.2) contrast(1.1);
+}
+
+.benchmark-chart-container[data-theme="dark"] {
+	--chart-text-color: #ffffff;
+	--chart-axis-color: #e5e7eb;
+}
+
+.benchmark-chart-container[data-theme="light"] {
+	--chart-text-color: #1f2937;
+	--chart-axis-color: #4b5563;
 }

src/landing/AppAnimation.tsx

@@ -131,7 +131,7 @@ export default function AppAnimation({ active, only }) {
 		variant5: {
 			top: 360,
 			left: 300,
-			text: 'Build complex apps with our 50+ atomic components, and add code only when needed.',
+			//text: 'Build complex apps with our 50+ atomic components, and add code only when needed.',
 			displayArrow: false
 		}
 	};

src/landing/CallToAction.jsx

@@ -1,85 +1,36 @@
 import React, { useState } from 'react';
-import { useColorMode } from '@docusaurus/theme-common';
+import { ArrowRight } from 'lucide-react';
 import BookDemoModal from '../components/BookDemoModal';
 
-export default function CallToAction({ color }) {
-	const { colorMode } = useColorMode();
-	const [bookDemoOpen, setBookDemoOpen] = useState(false);
+export default function CallToAction() {
+      const [bookDemoOpen, setBookDemoOpen] = useState(false);
 
-	const colorMap = {
-		blue: {
-			light: '#bfdbfe',
-			dark: '#3b82f6'
-		},
-		orange: {
-			light: '#fb923c',
-			dark: '#7c2d12'
-		},
-		green: {
-			light: '#bbf7d0',
-			dark: '#10b981'
-		}
-	};
-
-	const c = colorMap[color ?? 'blue'][colorMode];
-
-	return (
-		<div className="w-full py-16">
-			<div className="">
-				<div className="relative isolate overflow-hidden bg-gray-900 dark:bg-white px-6 py-24 text-center rounded-3xl sm:px-16">
-					<h2 className="mx-auto max-w-4xl text-4xl font-bold tracking-tight text-white dark:text-gray-900">
-						Build endpoints, workflows & ETLs, UIs with code only where it matters
-					</h2>
-					<p className="mx-auto mt-6 max-w-4xl text-lg leading-8 text-gray-300 dark:text-gray-600">
-						Get started building your internal tool in under 10 minutes
-					</p>
-					<div className="mt-10 flex items-center justify-center gap-x-6">
-						<a
-							href="https://app.windmill.dev/user/login"
-							onClick={() => window.plausible('try-cloud')}
-							data-analytics='"try-cloud"'
-							className="rounded-md bg-white px-3.5 py-1.5 text-base hover:text-blue-500 font-semibold leading-7 text-gray-900 shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white !no-underline"
-							rel="nofollow"
-						>
-							Get started for free
-						</a>
-						<button
-							onClick={() => setBookDemoOpen(true)}
-							className="text-base font-semibold leading-7 text-white !no-underline dark:text-gray-900 cursor-pointer bg-transparent border-none"
-						>
-							Schedule a demo <span aria-hidden="true">→</span>
-						</button>
-					</div>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 1024 1024"
-						className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
-						aria-hidden="true"
-					>
-						<circle
-							cx={512}
-							cy={512}
-							r={512}
-							fill="url(#827591b1-ce8c-4110-b064-7cb85a0b12171)"
-							fillOpacity="0.7"
-						/>
-						<defs>
-							<radialGradient
-								id="827591b1-ce8c-4110-b064-7cb85a0b12171"
-								cx={0}
-								cy={0}
-								r={1}
-								gradientUnits="userSpaceOnUse"
-								gradientTransform="translate(512 512) rotate(90) scale(512)"
-							>
-								<stop stopColor={c} />
-								<stop offset={1} stopColor={c} stopOpacity={0} />
-							</radialGradient>
-						</defs>
-					</svg>
-				</div>
-			</div>
-			<BookDemoModal open={bookDemoOpen} setOpen={setBookDemoOpen} />
-		</div>
-	);
-}
+      return (
+              <div className="w-full">
+                      <div className="dark:bg-gray-900 bg-gray-50 px-8 sm:px-12 py-10 text-center rounded-xl">
+                              <h2 className="mx-auto max-w-4xl text-3xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-br from-blue-500 to-blue-700 dark:from-blue-400 dark:to-blue-600 sm:text-4xl">
+                                      Start building with Windmill
+                              </h2>
+                              <div className="mt-6 flex flex-col sm:flex-row items-center justify-center gap-4">
+                                      <a
+                                              href="https://app.windmill.dev/user/login"
+                                              onClick={() => window.plausible('try-cloud')}
+                                              data-analytics='"try-cloud"'
+                                              className="rounded-lg bg-blue-600 hover:bg-blue-700 px-6 py-3 text-base font-semibold text-white shadow-sm transition-colors !no-underline"
+                                              rel="nofollow"
+                                      >
+                                              Get started for free
+                                      </a>
+                                      <button
+                                              onClick={() => setBookDemoOpen(true)}
+                                              className="group flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white bg-transparent border-none cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                      >
+                                              Schedule a demo
+                                              <ArrowRight size={20} className="group-hover:translate-x-1 transition-transform" />
+                                      </button>
+                              </div>
+                      </div>
+                      <BookDemoModal open={bookDemoOpen} setOpen={setBookDemoOpen} />
+              </div>
+      );
+}

src/landing/CombinedAnimation.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export default function CombinedAnimation() {
+	const [currentIndex, setCurrentIndex] = useState(0);
+
+	const images = [
+		{ 
+			id: 'script', 
+			src: '/illustrations/animscripts.png', 
+			alt: 'VS Code editor with test panel and execution results',
+			label: 'Scripts',
+			subtitle: 'Write scripts in 20+ languages (Python, TS, Go, Bash...)'
+		},
+		{ 
+			id: 'flow', 
+			src: '/illustrations/animflows.png', 
+			alt: 'Flow diagram with execution logs and performance metrics',
+			label: 'Flows',
+			subtitle: 'Orchestrate scripts into scalable workflows'
+		},
+		{ 
+			id: 'app', 
+			src: '/illustrations/animapps.png', 
+			alt: 'App builder with button, table, and code editor',
+			label: 'Apps',
+			subtitle: 'Generate production-ready frontends with AI'
+		}
+	];
+
+	// Auto-switch every 4 seconds
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setDirection(1); // Always forward for auto-advance
+			setCurrentIndex((prev) => (prev + 1) % images.length);
+		}, 4000);
+
+		return () => clearInterval(interval);
+	}, [images.length]);
+
+	const slideVariants = {
+		enter: (direction: number) => ({
+			x: direction > 0 ? '100%' : '-100%',
+			opacity: 0
+		}),
+		center: {
+			x: 0,
+			opacity: 1
+		},
+		exit: (direction: number) => ({
+			x: direction > 0 ? '-100%' : '100%',
+			opacity: 0
+		})
+	};
+
+	const [direction, setDirection] = useState(0);
+
+	const goToSlide = (index: number) => {
+		const newDirection = index > currentIndex ? 1 : -1;
+		setDirection(newDirection);
+		setCurrentIndex(index);
+	};
+
+	return (
+		<div className="relative w-full overflow-hidden rounded-lg px-0">
+			{/* Title and Subtitle - Hidden on mobile, visible on desktop */}
+			<div className="hidden md:block text-center">
+				<AnimatePresence mode="wait">
+					<motion.div
+						key={currentIndex}
+						initial={{ opacity: 0, y: -10 }}
+						animate={{ opacity: 1, y: 0 }}
+						exit={{ opacity: 0, y: 10 }}
+						transition={{ duration: 0.3 }}
+					>
+						<div className="text-lg md:text-xl font-semibold text-gray-900 dark:text-white">
+							{images[currentIndex].label}
+						</div>
+						<div className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1">
+							{images[currentIndex].subtitle}
+						</div>
+					</motion.div>
+				</AnimatePresence>
+			</div>
+			{/* Image container */}
+			<div className="relative w-full min-h-[250px] md:min-h-[400px]">
+				<AnimatePresence mode="wait" custom={direction}>
+					<motion.div
+						key={currentIndex}
+						custom={direction}
+						variants={slideVariants}
+						initial="enter"
+						animate="center"
+						exit="exit"
+						transition={{
+							x: { type: 'spring', stiffness: 300, damping: 30 },
+							opacity: { duration: 0.2 }
+						}}
+						className="absolute inset-0 w-full flex items-center justify-center"
+					>
+						<img
+							src={images[currentIndex].src}
+							alt={images[currentIndex].alt}
+							className="w-full h-auto max-w-full object-contain rounded-lg"
+							loading="lazy"
+							onError={(e) => {
+								console.error('Failed to load image:', images[currentIndex].src);
+								(e.target as HTMLImageElement).style.display = 'none';
+							}}
+						/>
+					</motion.div>
+				</AnimatePresence>
+			</div>
+
+			{/* Navigation dots */}
+			<div className="absolute bottom-2 md:bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2 z-10">
+				{images.map((_, index) => (
+					<button
+						key={index}
+						onClick={() => goToSlide(index)}
+						className={`h-1.5 md:h-2 rounded-full transition-all ${
+							index === currentIndex
+								? 'w-6 md:w-8 bg-white dark:bg-gray-200'
+								: 'w-1.5 md:w-2 bg-white/50 dark:bg-gray-500/50 hover:bg-white/75 dark:hover:bg-gray-400/75'
+						}`}
+						aria-label={`Go to ${images[index].label}`}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
+

src/landing/CorePrinciple.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import LandingSection from './LandingSection';
+import { ArrowRight } from 'lucide-react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+// @ts-ignore
+import polyGlott from '/illustrations/polyglot.json';
+// @ts-ignore
+import secrets from '/illustrations/secrets.json';
+// @ts-ignore
+import thirdparty from '/illustrations/thirdparty.json';
+
+// Client-only component that renders a static frame of a Lottie animation
+function StaticLottie({ animationData }: { animationData: unknown }) {
+	const { useLottie } = require('lottie-react');
+	const { View, goToAndStop, getDuration } = useLottie({
+		animationData,
+		loop: false,
+		autoplay: false
+	});
+
+	React.useEffect(() => {
+		// Go to 90% of the animation
+		const totalFrames = getDuration(true);
+		if (totalFrames > 0) {
+			goToAndStop(Math.floor(totalFrames * 0.90), true);
+		}
+	}, [goToAndStop, getDuration]);
+
+	return View;
+}
+
+interface FeatureCardProps {
+	title: string;
+	description: string;
+	actionLink: string;
+	actionUrl?: string;
+	lottieData?: unknown;
+}
+
+function FeatureCard({ title, description, actionLink, actionUrl, lottieData }: FeatureCardProps) {
+	return (
+		<div className="flex flex-col h-full rounded-lg bg-gray-50 dark:bg-gray-800/50 backdrop-blur-sm p-6 shadow-lg border border-gray-200 dark:border-gray-700/50 group">
+			<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-3">{title}</h3>
+			<p className="text-gray-600 dark:text-gray-300 mb-4 flex-grow text-base leading-relaxed">
+				{description}
+			</p>
+			<a
+				href={actionUrl || '#'}
+				className="text-sm text-blue-600 dark:text-blue-400 flex flex-row items-center gap-2 group-hover:ml-2 transition-all mb-4 hover:text-blue-700 dark:hover:text-blue-300"
+				target={actionUrl && actionUrl.startsWith('http') ? '_blank' : undefined}
+				rel={actionUrl && actionUrl.startsWith('http') ? 'noopener noreferrer' : undefined}
+			>
+				{actionLink}
+				<ArrowRight size={24} />
+			</a>
+			{lottieData && (
+				<div className="mt-auto bg-gray-100 dark:bg-gray-700/80 rounded-md p-4 min-h-[180px] flex items-center justify-center overflow-hidden">
+					<div className="w-full h-full flex items-center justify-center rounded-md">
+						<BrowserOnly fallback={<div className="w-full h-full" />}>
+							{() => <StaticLottie animationData={lottieData} />}
+						</BrowserOnly>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default function CorePrinciple() {
+	return (
+		<LandingSection bgClass="py-16">
+			<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">
+						Our core principles
+					</h1>
+					<span className="text-lg text-gray-700 max-w-3xl dark:text-gray-200">
+						The foundational beliefs that guide how we build Windmill.
+					</span>
+				</div>
+
+				{/* 3 cards in a row */}
+				<div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
+					<FeatureCard
+						title="Avoid vendor lock-in"
+						description="Open source and self-hostable. Your code, your data, your infrastructure. Deploy anywhere—cloud, on-premises, or air-gapped."
+						actionLink="View on GitHub"
+						actionUrl="https://github.com/windmill-labs/"
+						lottieData={polyGlott}
+					/>
+					<FeatureCard
+						title="Seamless enterprise integration"
+						description="Connect to databases (PostgreSQL, MySQL, Snowflake), cloud platforms (AWS, Azure, GCP), message queues (Kafka, SQS, NATS), and 100+ APIs."
+						actionLink="Explore integrations"
+						actionUrl="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
+						lottieData={thirdparty}
+					/>
+					<FeatureCard
+						title="Enterprise-grade security"
+						description="Granular RBAC, SSO, Secret Management, and comprehensive Audit Logs. Deploy in regulated industries with air-gapped support."
+						actionLink="Explore enterprise features"
+						actionUrl="https://www.windmill.dev/docs/misc/enterprise_onboarding"
+						lottieData={secrets}
+					/>
+				</div>
+			</div>
+		</LandingSection>
+	);
+}