Large UX updates, replaced banner, moved analytics, linted everything (#20004)

https://maanavd.github.io/onnxruntime/ ### Description Many changes, most small, but quite a few. Listed here: - Infinitely scrolling testimonial banner on homepage - New Microsoft-approved cookie consent banner (only shows up in correct regions, here's a screen of it working): ![image](https://github.com/microsoft/onnxruntime/assets/24942306/b210b55f-d0cb-413a-a5c7-7156e003414a) You can duplicate this behavior if you want using: [this link](https://eng.ms/docs/cloud-ai-platform/devdiv/one-engineering-system-1es/1es-docs/wcp/privacy/wcp-cookie-consent-api#cookie-consent-library---javascript:~:text=siteConsent.manageConsent()%3B%0A%20%20%20%20%7D-,How%20to%20test%20if%20banner%20is%20loading%20for%20EU%20visitors,-You%20can%20use) - removed SAOS animations, relying on native tailwind animations - ran a linting pass - easter egg for hovering onnxruntime pinwheel --------- Co-authored-by: MaanavD <maanavdalal@microsoft.com>
2026-07-17 18:40:28 +00:00 · 2024-03-21 14:40:45 -07:00 · 2024-03-21 14:40:45 -07:00 · e8b82b6f3f
commit e8b82b6f3f
parent 2442ba9eec
36 changed files with 1090 additions and 844 deletions
--- a/package.json
+++ b/package.json
@ -47,10 +47,12 @@
 	"type": "module",
 	"dependencies": {
 		"animejs": "^3.2.1",
+		"clsx": "^2.1.0",
 		"mdsvex-relative-images": "^1.0.3",
-		"saos": "^1.3.1",
 		"svelte-icons": "^2.1.0",
+		"svelte-motion": "^0.12.2",
 		"sveltejs-adapter-ipfs": "^0.4.12",
+		"tailwind-merge": "^2.2.2",
 		"theme-change": "^2.5.0"
 	}
 }
--- a/src/app.html
+++ b/src/app.html
@ -3,10 +3,104 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
+		<!-- Google Analytics -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156955408-1"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('consent', 'default', {
+				ad_storage: 'denied',
+				analytics_storage: 'denied'
+			});
+			gtag('js', new Date());
+			gtag('config', 'UA-156955408-1');
+		</script>
+		<!-- Adobe Analytics -->
+		<script type="text/javascript">
+			const analytics = new oneDS.ApplicationInsights();
+			var config = {
+				instrumentationKey:
+					'360b0e675e0044398fd28c8bdf711b8e-1fe5434d-ee99-4837-99cc-a3a16462d82d-7262',
+				channelConfiguration: {
+					// Post channel configuration
+					eventsLimitInMem: 50
+				},
+				propertyConfiguration: {
+					// Properties Plugin configuration
+					env: 'PROD' // Environment can be set to PPE or PROD as needed.
+				},
+				webAnalyticsConfiguration: {
+					// Web Analytics Plugin configuration
+					//urlCollectQuery:true,
+					autoCapture: {
+						scroll: true,
+						pageView: true,
+						onLoad: true,
+						onUnload: true,
+						click: true,
+						resize: true,
+						jsError: true
+					}
+				}
+			};
+			//Initialize SDK
+			analytics.initialize(config, []);
+		</script>
+		<!-- MS Analytics -->
+		<script
+			type="text/javascript"
+			src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-3.min.js"
+		></script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
+		<div id="cookie-banner"></div>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
+	<script>
+		let choices = {
+			marketing: false,
+			tracking: false,
+			analytics: {
+				label: 'Analytics',
+				description:
+					'We use analytics cookies to track visits, helping create a better experience for you!',
+				value: true
+			},
+			necessary: {
+				label: 'Necessary',
+				description: 'Used for cookie control.',
+				value: true
+			}
+		};
+
+		WcpConsent.init(
+			'en-US',
+			'cookie-banner',
+			function (err, _siteConsent) {
+				if (!err) {
+					siteConsent = _siteConsent; //siteConsent is used to get the current consent
+				} else {
+					console.log('Error initializing WcpConsent: ' + err);
+				}
+			},
+			onConsentChanged,
+			WcpConsent.themes.light
+		);
+
+		function onConsentChanged(categoryPreferences) {
+			if (categoryPreferences.Analytics) {
+				// Google Analytics
+				gtag('consent', 'update', {
+					ad_storage: 'granted',
+					analytics_storage: 'granted'
+				});
+				// Adobe Analytics
+			}
+		}
+	</script>
 </html>
--- a/src/images/undraw/image_HF2.svelte
+++ b/src/images/undraw/image_HF2.svelte
@ -2,6 +2,7 @@
 	export let widthscale = 1;
 	export let heightscale = 1;
 </script>
+
 <svg
 	stroke="currentColor"
 	width={109 * widthscale}
--- a/src/images/undraw/image_HF3.svelte
+++ b/src/images/undraw/image_HF3.svelte
@ -2,6 +2,7 @@
 	export let widthscale = 1;
 	export let heightscale = 1;
 </script>
+
 <svg
 	stroke="currentColor"
 	width={110 * widthscale}
--- a/src/images/undraw/image_events.svelte
+++ b/src/images/undraw/image_events.svelte
@ -5,7 +5,7 @@
 	height="153.568145"
 	viewBox="0 0 801.19718 614.27258"
 	xmlns:xlink="http://www.w3.org/1999/xlink"
-    stroke="#fff"
+	stroke="#fff"
 	><path
 		d="M743.1742,755.17457c-.78106.66616-1.587,1.31586-2.40141,1.95737H641.90134c-.56742-.64151-1.13525-1.29121-1.69424-1.95737a109.34753,109.34753,0,0,1-11.999-17.641c-8.11741-14.6227-10.914-33.79337-10.914-53.31768,0-1.19253.00843-2.385.03293-3.57752.09076-5.47737.39515-10.96291.84732-16.358.08232-.93757.16465-1.86691.255-2.79625.73207-7.739,1.7601-15.27235,2.92787-22.31229.14778-.89646.296-1.78469.45218-2.66469a365.995,365.995,0,0,1,9.55665-41.42544s.13171.03293.38631.09869c.73207.20561,2.48373.69086,5.05822,1.45571,7.089,2.1054,20.404,6.34913,35.75893,12.6571.83889.33717,1.68581.6908,2.54116,1.05267A283.26673,283.26673,0,0,1,712.72809,629.237c.74853.45232,1.48863.91288,2.22873,1.37343v.06581l-1.61994,52.44587,14.47472-43.6624q4.42855,3.3678,8.46276,6.98236c.7401.65793,1.4802,1.33232,2.19581,2.03141a81.02719,81.02719,0,0,1,15.46139,19.28578C775.586,706.79966,766.4984,735.50218,743.1742,755.17457Z"
 		transform="translate(-199.40141 -142.86371)"
--- a/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte
+++ b/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte
@ -0,0 +1,80 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { onMount } from 'svelte';
+
+	export let items: {
+		href: string;
+		src: any;
+		alt: string;
+	}[];
+	export let direction: 'left' | 'right' | undefined = 'left';
+	export let speed: 'fast' | 'normal' | 'slow' | undefined = 'fast';
+	export let pauseOnHover: boolean | undefined = true;
+	export let className: string | undefined = undefined;
+
+	let containerRef: HTMLDivElement;
+	let scrollerRef: HTMLUListElement;
+
+	onMount(() => {
+		addAnimation();
+	});
+
+	let start = false;
+
+	function addAnimation() {
+		if (containerRef && scrollerRef) {
+			const scrollerContent = Array.from(scrollerRef.children);
+
+			scrollerContent.forEach((item) => {
+				const duplicatedItem = item.cloneNode(true);
+				if (scrollerRef) {
+					scrollerRef.appendChild(duplicatedItem);
+				}
+			});
+
+			getDirection();
+			getSpeed();
+			start = true;
+		}
+	}
+	const getDirection = () => {
+		if (containerRef) {
+			if (direction === 'left') {
+				containerRef.style.setProperty('--animation-direction', 'forwards');
+			} else {
+				containerRef.style.setProperty('--animation-direction', 'reverse');
+			}
+		}
+	};
+	const getSpeed = () => {
+		if (containerRef) {
+			if (speed === 'fast') {
+				containerRef.style.setProperty('--animation-duration', '20s');
+			} else if (speed === 'normal') {
+				containerRef.style.setProperty('--animation-duration', '40s');
+			} else {
+				containerRef.style.setProperty('--animation-duration', '80s');
+			}
+		}
+	};
+</script>
+
+<div bind:this={containerRef} class={cn('scroller relative z-2 overflow-hidden ', className)}>
+	<ul
+		bind:this={scrollerRef}
+		class={cn(
+			' flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4',
+			start && 'animate-scroll ',
+			pauseOnHover && 'hover:[animation-play-state:paused]'
+		)}
+	>
+		{#each items as item, idx (item.alt)}
+			<a
+				href={item.href}
+				class="bg-slate-300 m-auto relative h-28 w-[200px] max-w-full flex-shrink-0 hover:scale-105 transition duration-200 rounded-md border border-2 border-secondary md:w-[200px]"
+			>
+				<img class="h-28 p-2 m-auto" src={item.src} alt={item.alt} />
+			</a>
+		{/each}
+	</ul>
+</div>
--- a/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.ts
+++ b/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.ts
@ -0,0 +1,3 @@
+import InfiniteMovingCards from './InfiniteMovingCards.svelte';
+
+export { InfiniteMovingCards };
--- a/src/lib/utils/cn.ts
+++ b/src/lib/utils/cn.ts
@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -4,14 +4,13 @@
 	import Footer from './components/footer.svelte';
 	import oneLight from 'svelte-highlight/styles/one-light';
 	import { fade } from 'svelte/transition';
-	import Analytics from './components/analytics.svelte';
 	import { page } from '$app/stores';
 	export let data;
 </script>

 <svelte:head>
 	{@html oneLight}
-	
+
 	<title
 		>ONNX Runtime | {data.pathname == '/'
 			? 'Home'
@ -42,7 +41,6 @@
 	<meta property="og:url" content="https://onnxruntime.ai" />
 	<meta property="og:type" content="website" />
 </svelte:head>
-<Analytics />
 <div class="selection:bg-info">
 	{#if !$page.url.pathname.startsWith('/blogs/')}
 		<Header />
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -10,26 +10,25 @@
 	import IoIosClose from 'svelte-icons/io/IoIosClose.svelte';
 	import { onMount } from 'svelte';
 	import anime from 'animejs';
-	import Saos from 'saos';

 	let removetoast = (e: any) => {
 		e.target.parentNode.parentNode.remove();
 	};

 	let videos = [
-        {
-            title: 'What is ONNX Runtime (ORT)?',
-            link: 'https://www.youtube-nocookie.com/embed/M4o4YRVba4o?si=LHc-2AhKt3TrY60g'
-        },
-        {
-            title: 'Converting Models to ONNX Format',
-            link: 'https://www.youtube-nocookie.com/embed/lRBsmnBE9ZA?si=l5i0Q2P7VtSJyGK1'
-        },
-        {
-            title: 'Optimize Training and Inference with ONNX Runtime (ORT/ACPT/DeepSpeed)',
-            link: 'https://www.youtube-nocookie.com/embed/lC7d_7waHLM?si=U4252VEd1t5ioZUN'
-        }
-    ];
+		{
+			title: 'What is ONNX Runtime (ORT)?',
+			link: 'https://www.youtube-nocookie.com/embed/M4o4YRVba4o?si=LHc-2AhKt3TrY60g'
+		},
+		{
+			title: 'Converting Models to ONNX Format',
+			link: 'https://www.youtube-nocookie.com/embed/lRBsmnBE9ZA?si=l5i0Q2P7VtSJyGK1'
+		},
+		{
+			title: 'Optimize Training and Inference with ONNX Runtime (ORT/ACPT/DeepSpeed)',
+			link: 'https://www.youtube-nocookie.com/embed/lC7d_7waHLM?si=U4252VEd1t5ioZUN'
+		}
+	];

 	onMount(() => {
 		anime({
@ -48,21 +47,11 @@
 <Hero />
 <Customers />
 <CodeBlocks />
-<VideoGallery {videos}/>
-<Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<GenerativeAi />
-</Saos>
-<Saos once={true} animation={'slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<CrossPlatform />
-</Saos>
-<Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<Performance />
-</Saos>
-
-<Saos once={true} animation={'slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<TrainingAndInference />
-</Saos>
-
+<VideoGallery {videos} />
+<GenerativeAi />
+<CrossPlatform />
+<Performance />
+<TrainingAndInference />
 <div class="toast z-10 opacity-0 hidden">
 	<div class="alert alert-info">
 		<svg
--- a/src/routes/blogs/+page.svelte
+++ b/src/routes/blogs/+page.svelte
@ -48,7 +48,8 @@
 				'We are thrilled to announce the official launch of ONNX Runtime Web featuring WebGPU, which is now available in the ONNX Runtime 1.17 release.',
 			link: 'https://cloudblogs.microsoft.com/opensource/2024/02/29/onnx-runtime-web-unleashes-generative-ai-in-the-browser-using-webgpu/',
 			image: WebGPUImage,
-			imgalt: 'Comparison of ONNX Runtime Web with WebGPU EP on GPU vs. WASM EP on CPU for segment anything example'
+			imgalt:
+				'Comparison of ONNX Runtime Web with WebGPU EP on GPU vs. WASM EP on CPU for segment anything example'
 		},
 		{
 			title: 'ONNX Runtime 1.17: CUDA 12 support, Phi-2 optimizations, WebGPU, and more!',
@ -62,8 +63,7 @@
 		{
 			title: 'Accelerating Phi-2, CodeLlama, Gemma and other Gen AI models with ONNX Runtime',
 			date: 'February 26th, 2024',
-			blurb:
-				'Improvements with ONNX Runtime for inferencing popular Gen AI models.',
+			blurb: 'Improvements with ONNX Runtime for inferencing popular Gen AI models.',
 			link: 'blogs/accelerating-phi-2',
 			image: Phi2Image,
 			imgalt: 'Phi2 float16 token generation throughput comparison'
@ -303,7 +303,8 @@
 	];
 	let blogsCommunity = [
 		{
-			title: 'Efficient image generation with Stable Diffusion models and ONNX Runtime using AMD GPUs',
+			title:
+				'Efficient image generation with Stable Diffusion models and ONNX Runtime using AMD GPUs',
 			date: 'February 23, 2024',
 			link: 'https://rocm.blogs.amd.com/artificial-intelligence/stable-diffusion-onnx-runtime/README.html',
 			blurb:
@ -322,11 +323,12 @@
 			blurb:
 				'During the annual Student Cluster Competition (SCC), UC San Diego undergraduate students achieved third place. Their success was fueled by optimizing performance using industry benchmarks, including the MLPerf Inference Benchmark. The seamless support for PyTorch and ONNX Runtime enabled them to port and fine-tune their code efficiently.',
 			link: 'https://www.hpcwire.com/off-the-wire/uc-san-diego-students-win-mlperf-contest-at-sc23/'
-		},	
+		},
 		{
 			title: 'Human Capital Management (HCM) - Sentence Similarity Language Model using Java',
 			date: 'December 5, 2023',
-			blurb: 'Using ONNX Runtime, the HCM team was able to deploy a sentence similarity language model using Java, demonstrating how easy it is to use with multiple languages.',
+			blurb:
+				'Using ONNX Runtime, the HCM team was able to deploy a sentence similarity language model using Java, demonstrating how easy it is to use with multiple languages.',
 			link: 'https://www.linkedin.com/pulse/hcm-sentence-similarity-language-model-using-java-jonathon-palmieri-tdlpc%3FtrackingId=CN2PPVO4Toqh8r6JsAYMIw%253D%253D/?trackingId=ByNomo0pQFKM%2F%2BWEknVs7Q%3D%3D'
 		}
 	];
--- a/src/routes/blogs/accelerating-llama-2/+page.svelte
+++ b/src/routes/blogs/accelerating-llama-2/+page.svelte
@ -51,7 +51,9 @@
 		and
 		<a href="https://www.linkedin.com/in/parinitaparinita/" class="text-blue-500">Parinita Rahi</a>
 	</p>
-	<p class="text-neutral">14TH NOVEMBER, 2023 <span class="italic text-stone-500">(Updated 22nd November)</span></p>
+	<p class="text-neutral">
+		14TH NOVEMBER, 2023 <span class="italic text-stone-500">(Updated 22nd November)</span>
+	</p>
 	<div class="py-4">
 		<p class="mb-4">
 			Interested in running Llama2 faster? Let us explore how ONNX Runtime can propel your Llama2
--- a/src/routes/blogs/blog-post-featured.svelte
+++ b/src/routes/blogs/blog-post-featured.svelte
@ -32,7 +32,7 @@
 			<div class="card-body">
 				<h2 class="card-title">{title}</h2>
 				<p>{description}</p>
-				<img src={image} alt={imgalt}/>
+				<img src={image} alt={imgalt} />
 				<div class="text-right text-blue-500">
 					{date}
 				</div>
--- a/src/routes/blogs/github-markdown-light.css
+++ b/src/routes/blogs/github-markdown-light.css
--- a/src/routes/blogs/post.svelte
+++ b/src/routes/blogs/post.svelte
@ -31,10 +31,6 @@
 	 * @type {undefined}
 	 */
 	export let updated;
-	/**
-	 * @type {any}
-	 */
-	export let image;
 	/**
 	 * @type {any}
 	 */
@ -91,4 +87,3 @@
 	</article>
 </div>
 <Footer pathvar="" />
-
--- a/src/routes/components/analytics.svelte
+++ b/src/routes/components/analytics.svelte
@ -1,84 +0,0 @@
-<script>
-	import '@beyonk/gdpr-cookie-consent-banner/banner.css'; // optional, you can also define your own styles
-	import GdprBanner from '@beyonk/gdpr-cookie-consent-banner';
-	let choices = {
-		marketing: false,
-		tracking: false,
-		analytics: {
-			label: 'Analytics',
-			description: 'We use analytics cookies to track visits, helping create a better experience for you!',
-			value: true
-		}, 
-		necessary: {
-			label: 'Necessary',
-			description: 'Used for cookie control.',
-			value: true
-		}
-	}
-	function initAnalytics() {
-		// Google Analytics
-		gtag('consent', 'update', {
-			ad_storage: 'granted',
-			analytics_storage: 'granted'
-		});
-		// Adobe Analytics
-	}
-</script>
-
-<GdprBanner heading="Your Cookie Settings" cookieName="analytics" description="Your cookies are your choice! At ONNX Runtime, we use analytics cookies solely to track visits, helping create a better experience for you!" on:analytics={initAnalytics} showEditIcon={false} choices={choices}/>
-
-<svelte:head>
-	<!-- Google Analytics -->
-	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156955408-1"></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag() {
-			dataLayer.push(arguments);
-		}
-		gtag('consent', 'default', {
-			ad_storage: 'denied',
-			analytics_storage: 'denied'
-		});
-		gtag('js', new Date());
-		gtag('config', 'UA-156955408-1');
-	</script>
-	<!-- Adobe Analytics -->
-	<script type="text/javascript">
-		const analytics = new oneDS.ApplicationInsights();
-		var config = {
-			instrumentationKey:
-				'360b0e675e0044398fd28c8bdf711b8e-1fe5434d-ee99-4837-99cc-a3a16462d82d-7262',
-			channelConfiguration: {
-				// Post channel configuration
-				eventsLimitInMem: 50
-			},
-			propertyConfiguration: {
-				// Properties Plugin configuration
-				env: 'PROD' // Environment can be set to PPE or PROD as needed.
-			},
-			webAnalyticsConfiguration: {
-				// Web Analytics Plugin configuration
-				//urlCollectQuery:true,
-				autoCapture: {
-					scroll: true,
-					pageView: true,
-					onLoad: true,
-					onUnload: true,
-					click: true,
-					resize: true,
-					jsError: true
-				}
-			}
-		};
-		//Initialize SDK
-		analytics.initialize(config, []);
-	</script>
-	<!-- MS Analytics -->
-	<script
-		type="text/javascript"
-		src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-3.min.js"
-	>
-	</script>
-
-	
-</svelte:head>
--- a/src/routes/components/code-blocks.svelte
+++ b/src/routes/components/code-blocks.svelte
@ -76,10 +76,7 @@
 				>
 					Python
 				</p>
-				<p
-					on:mouseenter={handleClick}
-					class="tab tab-lg {activeTab === 'C#' ? 'tab-active' : ''}"
-				>
+				<p on:mouseenter={handleClick} class="tab tab-lg {activeTab === 'C#' ? 'tab-active' : ''}">
 					C#
 				</p>
 				<p
@ -94,16 +91,12 @@
 				>
 					Java
 				</p>
-				<p
-					on:mouseenter={handleClick}
-					class="tab tab-lg {activeTab === 'C++' ? 'tab-active' : ''}"
-				>
+				<p on:mouseenter={handleClick} class="tab tab-lg {activeTab === 'C++' ? 'tab-active' : ''}">
 					C++
 				</p>
 				<button
 					on:click={handleClick}
-					class="tab tab-lg {activeTab === 'More..' ? 'tab-active' : ''}"
-					>More..</button
+					class="tab tab-lg {activeTab === 'More..' ? 'tab-active' : ''}">More..</button
 				>
 			</div>
 			{#if activeTab === 'Python'}
--- a/src/routes/components/cross-platform.svelte
+++ b/src/routes/components/cross-platform.svelte
@ -11,7 +11,9 @@
 			<h1 class="text-4xl">Cross-Platform</h1>
 			<br /><br />
 			<p class="text-xl">
-				Do you program in Python? C#? C++? Java? JavaScript? Rust? No problem. ONNX Runtime has you covered with support for many languages. And it runs on Linux, Windows, Mac, iOS, Android, and even in web browsers.
+				Do you program in Python? C#? C++? Java? JavaScript? Rust? No problem. ONNX Runtime has you
+				covered with support for many languages. And it runs on Linux, Windows, Mac, iOS, Android,
+				and even in web browsers.
 			</p>
 		</div>
 		<div class="m-auto lg:hidden">
--- a/src/routes/components/customers.svelte
+++ b/src/routes/components/customers.svelte
@ -1,145 +1,207 @@
 <script lang="ts">
-	import { base } from '$app/paths';
-	import anime from 'animejs';
+	import InfiniteMovingCards from '$lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte';
 	import pytorchlogo from '../../images/logos/PyTorch_logo_black.svg';
 	import windowslogo from '../../images/logos/Windows_logo_and_wordmark.svg';
 	import huggingfacelogoTitle from '../../images/logos/hf-logo-with-title.svg';
-	import amdLogo from '../../images/logos/amd-logo.png';
-	import huggingfaceLogo from '../../images/logos/huggingface-logo.png';
-	import intelLogo from '../../images/logos/intel-logo.png';
-	import nvidiaLogo from '../../images/logos/nvidia.png';
 	import adobeLogo from '../../images/logos/adobe-logo.png';
+	import amdLogo from '../../images/logos/amd-logo.png';
+	import antgroupLogo from '../../images/logos/antgroup-logo.png';
+	import ATLASLogo from '../../images/logos/ATLAS-logo.png';
+	import bazaarvoiceLogo from '../../images/logos/bazaarvoice-logo.png';
+	import clearbladeLogo from '../../images/logos/clearblade-logo.png';
+	import deezerLogo from '../../images/logos/deezer-logo.png';
+	import hypefactorsLogo from '../../images/logos/hypefactors-logo.png';
+	import infarmLogo from '../../images/logos/infarm-logo.png';
+	import intelLogo from '../../images/logos/intel-logo.png';
+	import intelligenzaEticaLogo from '../../images/logos/intelligenza-etica-logo.png';
+	import navitaireAmadeusLogo from '../../images/logos/navitaire-amadeus-logo.png';
+	import PeakSpeedLogo from '../../images/logos/PeakSpeed_logo.png';
+	import piecesLogo from '../../images/logos/pieces-logo.png';
+	import redisLogo from '../../images/logos/redis-logo.png';
+	import RockchipLogo from '../../images/logos/Rockchip-logo.png';
+	import samtecLogo from '../../images/logos/samtec-logo.png';
+	import sasLogo from '../../images/logos/sas-logo.png';
+	import teradataLogo from '../../images/logos/teradata-logo.png';
+	import topazlabsLogo from '../../images/logos/topazlabs-logo.png';
+	import ueLogo from '../../images/logos/ue-logo.png';
+	import usdaLogo from '../../images/logos/usda-logo.png';
+	import vespaLogo from '../../images/logos/vespa-logo.png';
+	import writerLogo from '../../images/logos/writer-logo.png';
+	import xilinxLogo from '../../images/logos/xilinx-logo.png';
+	import huggingfaceLogo from '../../images/logos/huggingface-logo.png';
+	import nvidiaLogo from '../../images/logos/nvidia.png';
 	import oracleLogo from '../../images/logos/oracle-logo.png';
-	import unrealEngineLogo from '../../images/logos/ue-logo.png';

-	import { onMount } from 'svelte';
-	// Prevents animations from being messed up when they first start
-	let interact = false;
-	onMount(() => {
-		anime({
-			targets: '.partner',
-			translateY: -20,
-			direction: 'alternate',
-			loop: false,
-			delay: function (el, i, l) {
-				return 500 + i * 50;
-			},
-			endDelay: function (el, i, l) {
-				return (l - i) * 50;
-			}
-		});
-		setTimeout(() => {
-			interact = true;
-		}, 1000);
-	});
-
-	let handleEnter = (e: any) => {
-		if (interact) {
-			anime({
-				targets: e.target,
-				scale: 1.1,
-				duration: 1500
-			});
+	const testimonials = [
+		{
+			href: './testimonials#Adobe',
+			src: adobeLogo,
+			alt: 'Adobe'
+		},
+		{
+			href: './testimonials#AMD',
+			src: amdLogo,
+			alt: 'AMD'
+		},
+		{
+			href: './testimonials#Ant%20Group',
+			src: antgroupLogo,
+			alt: 'Ant Group'
+		},
+		{
+			href: './testimonials#Atlas%20Experiment',
+			src: ATLASLogo,
+			alt: 'ATLAS'
+		},
+		{
+			href: './testimonials#Bazaarvoice',
+			src: bazaarvoiceLogo,
+			alt: 'Bazaarvoice'
+		},
+		{
+			href: './testimonials#ClearBlade',
+			src: clearbladeLogo,
+			alt: 'ClearBlade'
+		},
+		{
+			href: './testimonials#Deezer',
+			src: deezerLogo,
+			alt: 'Deezer'
+		},
+		{
+			href: './testimonials#Hugging%20Face',
+			src: huggingfaceLogo,
+			alt: 'Hugging Face'
+		},
+		{
+			href: './testimonials#Hypefactors',
+			src: hypefactorsLogo,
+			alt: 'Hypefactors'
+		},
+		{
+			href: './testimonials#InFarm',
+			src: infarmLogo,
+			alt: 'InFarm'
+		},
+		{
+			href: './testimonials#Intel',
+			src: intelLogo,
+			alt: 'Intel'
+		},
+		{
+			href: './testimonials#Intelligenza%20Etica',
+			src: intelligenzaEticaLogo,
+			alt: 'Intelligenza Etica'
+		},
+		{
+			href: './testimonials#Navitaire',
+			src: navitaireAmadeusLogo,
+			alt: 'Navitaire'
+		},
+		{
+			href: './testimonials#NVIDIA',
+			src: nvidiaLogo,
+			alt: 'NVIDIA'
+		},
+		{
+			href: './testimonials#Oracle',
+			src: oracleLogo,
+			alt: 'Oracle'
+		},
+		{
+			href: './testimonials#Peakspeed',
+			src: PeakSpeedLogo,
+			alt: 'Peakspeed'
+		},
+		{
+			href: './testimonials#Pieces.app',
+			src: piecesLogo,
+			alt: 'Pieces'
+		},
+		{
+			href: './testimonials#Redis',
+			src: redisLogo,
+			alt: 'Redis'
+		},
+		{
+			href: './testimonials#Rockchip',
+			src: RockchipLogo,
+			alt: 'Rockchip'
+		},
+		{
+			href: './testimonials#Samtec',
+			src: samtecLogo,
+			alt: 'Samtec'
+		},
+		{
+			href: './testimonials#SAS',
+			src: sasLogo,
+			alt: 'SAS'
+		},
+		{
+			href: './testimonials#Teradata',
+			src: teradataLogo,
+			alt: 'Teradata'
+		},
+		{
+			href: './testimonials#Topaz%20Labs',
+			src: topazlabsLogo,
+			alt: 'Topaz Labs'
+		},
+		{
+			href: './testimonials#Unreal%20Engine',
+			src: ueLogo,
+			alt: 'Unreal Engine'
+		},
+		{
+			href: './testimonials#United%20States%20Department%20of%20Agriculture,%20Agricultural%20Research%20Service',
+			src: usdaLogo,
+			alt: 'USDA'
+		},
+		{
+			href: './testimonials#Vespa.ai',
+			src: vespaLogo,
+			alt: 'Vespa'
+		},
+		{
+			href: './testimonials#Writer',
+			src: writerLogo,
+			alt: 'Writer'
+		},
+		{
+			href: './testimonials#Xilinx',
+			src: xilinxLogo,
+			alt: 'Xilinx'
 		}
-	};
-	let handleLeave = (e: any) => {
-		if (interact) {
-			anime({
-				targets: e.target,
-				scale: 1,
-				duration: 1500
-			});
-		}
-	};
+	];
 </script>

-<div class="container mx-auto md:px-10 px-4 lg:my-5">
+<div class="lg:my-5">
 	<h1 class="text-3xl my-5 text-center">Trusted By</h1>
 	<div class="divider" />
-	<div
-		class="grid lg:grid-cols-8 md:grid-cols-4 grid-cols-2 gap-4 mx-auto justify-items-center pt-10"
-	>
-		<a
-			href="./testimonials#AMD"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full w-full"
-		>
-			<img class="h-20 mx-auto"src={amdLogo} alt="AMD" />
-		</a>
-		<a
-			href="./testimonials#Hugging%20Face"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full w-full"
-		>
-			<img class="h-20 mx-auto"src={huggingfaceLogo} alt="HuggingFace" />
-		</a>
-		<a
-			href="./testimonials#Intel"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full"
-		>
-			<img class="h-20 mx-auto"src={intelLogo} alt="Intel" />
-		</a>
-		<a
-			href="./testimonials#NVIDIA"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full"
-		>
-			<img class="h-20 mx-auto"src={nvidiaLogo} alt="Nvidia" />
-		</a>
-		<a
-			href="./testimonials#Adobe"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full"
-		>
-			<img class="h-20 mx-auto"src={adobeLogo} alt="Adobe" />
-		</a>
-		<a
-			href="./testimonials#Unreal%20Engine"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full"
-		>
-			<img class="h-20 mx-auto"src={unrealEngineLogo} alt="Unreal Engine" />
-		</a>
-		<a
-			href="./testimonials#Oracle"
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full"
-		>
-			<img class="h-20 mx-auto"src={oracleLogo} alt="Oracle" />
-		</a>
-		<a
-			on:mouseenter={handleEnter}
-			on:mouseleave={handleLeave}
-			href="./testimonials"
-			class="w-full partner bg-slate-300 border-solid border-2 border-secondary rounded flex items-center justify-center"
-		>
-			<p class="underline text-black">...and many more</p>
-		</a>
-	</div>
-	<h1 class="text-2xl pt-10 pb-4">Learn more about how to use ONNX Runtime with</h1>
-	<div class="grid md:grid-cols-3 grid-cols-1 gap-4 mx-auto pb-10">
-		<a
-			href="./pytorch"
-			class="btn btn-primary bg-slate-300 border-solid border-2 border-secondary rounded h-full"
-			><img class="px-10 py-5" src={pytorchlogo} alt="PyTorch Logo" /></a
-		>
-		<a
-			href="./windows"
-			class="btn btn-primary bg-slate-300 border-solid border-2 border-secondary rounded h-full"
-			><img class="px-10 py-5" src={windowslogo} alt="Windows Logo" /></a
-		>
-		<a
-			href="./huggingface"
-			class="btn btn-primary bg-slate-300 border-solid border-2 border-secondary rounded h-full"
-			><img class="px-10 py-5" src={huggingfacelogoTitle} alt="HuggingFace Logo" /></a
-		>
+	<InfiniteMovingCards
+		items={testimonials.sort(() => Math.random() - 0.5)}
+		direction="left"
+		speed="slow"
+	/>
+	<div class="container mx-auto md:px-16 px-8 lg:my-10">
+		<h1 class="text-2xl pt-10 pb-4">Learn more about how to use ONNX Runtime with</h1>
+		<div class="grid md:grid-cols-3 grid-cols-1 gap-4 mx-auto pb-10">
+			<a
+				href="./pytorch"
+				class="pt-2 hover:scale-105 transition duration-200 bg-slate-300 border-solid border-2 border-secondary rounded h-full"
+				><img class="px-10 py-5" src={pytorchlogo} alt="PyTorch Logo" /></a
+			>
+			<a
+				href="./windows"
+				class="pt-2 hover:scale-105 transition duration-200 bg-slate-300 border-solid border-2 border-secondary rounded h-full"
+				><img class="px-10 py-5" src={windowslogo} alt="Windows Logo" /></a
+			>
+			<a
+				href="./huggingface"
+				class=" hover:scale-105 transition duration-200 bg-slate-300 border-solid border-2 border-secondary rounded h-full"
+				><img class="px-10 py-5" src={huggingfacelogoTitle} alt="HuggingFace Logo" /></a
+			>
+		</div>
 	</div>
 </div>
--- a/src/routes/components/generative-ai-hero.svelte
+++ b/src/routes/components/generative-ai-hero.svelte
@ -9,8 +9,10 @@
 			<h1 class="text-4xl">Generative AI</h1>
 			<br /><br />
 			<p class="text-xl">
-				Integrate the power of Generative AI and Large language Models (LLMs) in your apps and services with ONNX Runtime. No matter what language you develop in or what platform you need to run on, you can make use of state-of-the-art models
-				for image synthesis, text generation, and more.
+				Integrate the power of Generative AI and Large language Models (LLMs) in your apps and
+				services with ONNX Runtime. No matter what language you develop in or what platform you need
+				to run on, you can make use of state-of-the-art models for image synthesis, text generation,
+				and more.
 			</p>
 			<br />
 			<!-- a href="./generative-ai" class="btn btn-primary">Learn more about ORT & Generative AI →</a -->
--- a/src/routes/components/hero.svelte
+++ b/src/routes/components/hero.svelte
@ -11,7 +11,19 @@
 	import { fade, fly, blur } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';

-	let words = ['Cross-Platform', 'GPU', 'Python', 'CPU', 'Mobile', 'C#', 'Edge', 'JavaScript', 'Java', 'C++', 'Browser'];
+	let words = [
+		'Cross-Platform',
+		'GPU',
+		'Python',
+		'CPU',
+		'Mobile',
+		'C#',
+		'Edge',
+		'JavaScript',
+		'Java',
+		'C++',
+		'Browser'
+	];
 	let activeWord = 'Cross-Platform';
 	let currentWord = 0;
 	let cycleWord = () => {
@ -69,20 +81,21 @@
 	<div class="hero-content md:my-20">
 		<div class="grid grid-cols-2 md:grid-cols-5 gap-4">
 			<div class="col-span-4 self-center md:mr-20">
-				<h1 class="text-5xl">Accelerated
-				{#key activeWord}
-					<span
-						class="text-5xl"
-						in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }}
-					>
-						{activeWord}
-					</span>
-				{/key}
+				<h1 class="text-5xl">
+					Accelerated
+					{#key activeWord}
+						<span
+							class="text-5xl"
+							in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }}
+						>
+							{activeWord}
+						</span>
+					{/key}
 				</h1>
 				<h1 class="text-5xl">Machine Learning</h1>
 				<p class="py-3">
-					Production-grade AI engine to speed up training and inferencing in your existing technology
-					stack.
+					Production-grade AI engine to speed up training and inferencing in your existing
+					technology stack.
 				</p>
 				<p class="text-xl my-4">In a rush? Get started easily:</p>
 				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@ -93,7 +106,7 @@
 						<button
 							aria-label="copy python code"
 							on:click={() => copy(pythonCode)}
-							class="col-span-1 btn rounded-none h-full"
+							class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200"
 							><span class="w-6 h-6"><FaRegClipboard /></span></button
 						>
 					</div>
@ -104,7 +117,7 @@
 						<button
 							aria-label="copy nuget code"
 							on:click={() => copy(nugetCode)}
-							class="col-span-1 btn rounded-none h-full"
+							class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200"
 							><span class="w-6 h-6"><FaRegClipboard /></span></button
 						>
 					</div>
@ -118,7 +131,7 @@
 					>
 				</p>
 			</div>
-			<div class="hidden lg:inline mx-auto">
+			<div class="hidden lg:inline mx-auto hover:rotate-180 transition duration-500">
 				<OnnxLight width={300} height={300} />
 			</div>
 		</div>
--- a/src/routes/components/performance.svelte
+++ b/src/routes/components/performance.svelte
@ -8,8 +8,13 @@
 			<h1 class="text-4xl">Performance</h1>
 			<br /><br />
 			<p class="text-xl">
-				CPU, GPU, NPU - no matter what hardware you run on, ONNX Runtime optimizes for latency, throughput, memory utilization, and binary size. In addition to excellent out-of-the-box performance for common usage patterns, additional
-				<a href="https://onnxruntime.ai/docs/performance/" class="text-blue-500">model optimization techniques</a> and runtime configurations are available to further improve performance for specific use cases and models.
+				CPU, GPU, NPU - no matter what hardware you run on, ONNX Runtime optimizes for latency,
+				throughput, memory utilization, and binary size. In addition to excellent out-of-the-box
+				performance for common usage patterns, additional
+				<a href="https://onnxruntime.ai/docs/performance/" class="text-blue-500"
+					>model optimization techniques</a
+				> and runtime configurations are available to further improve performance for specific use cases
+				and models.
 			</p>
 		</div>
 		<div class="m-auto overflow:hidden">
--- a/src/routes/components/training-and-inference.svelte
+++ b/src/routes/components/training-and-inference.svelte
@ -10,18 +10,20 @@
 	<div class="divider" />
 	<h1 class="text-4xl pb-2">ONNX Runtime Inferencing</h1>
 	<p class="text-xl pb-4">
-		ONNX Runtime powers AI in Microsoft products including Windows, Office, Azure Cognitive Services, and Bing,
-		as well as in thousands of other projects across the world. ONNX Runtime is cross-platform, supporting cloud, edge, web, and mobile experiences. 
+		ONNX Runtime powers AI in Microsoft products including Windows, Office, Azure Cognitive
+		Services, and Bing, as well as in thousands of other projects across the world. ONNX Runtime is
+		cross-platform, supporting cloud, edge, web, and mobile experiences.
 	</p>
-	 <a href="./inference" class="btn btn-primary rounded-sm">Learn more about ONNX Runtime Inferencing →</a>
+	<a href="./inference" class="btn btn-primary rounded-sm"
+		>Learn more about ONNX Runtime Inferencing →</a
+	>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10">
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid xl:grid-cols-4 place-items-center">
 				<div class="col-span-3 text-black">
 					<h1 class="text-2xl pb-2">Web Browsers</h1>
 					<p class="text-lg">
-						Run PyTorch and other ML models in the web browser with ONNX
-						Runtime Web.
+						Run PyTorch and other ML models in the web browser with ONNX Runtime Web.
 					</p>
 				</div>
 				<div class="hidden xl:grid">
@ -49,16 +51,23 @@
 	<p class="text-xl pb-4">
 		ONNX Runtime reduces costs for large model training and enables on-device training.
 	</p>
-	<a href="./training" class="btn btn-primary rounded-sm">Learn more about ONNX Runtime Training →</a>
+	<a href="./training" class="btn btn-primary rounded-sm"
+		>Learn more about ONNX Runtime Training →</a
+	>
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10">
 		<div class="bg-slate-300 p-4 rounded">
 			<div class="grid xl:grid-cols-4 place-items-center">
 				<div class="col-span-3 text-black">
 					<h1 class="text-2xl pb-2">Large Model Training</h1>
 					<p class="text-lg">
-						Accelerate training of popular models,
-						including <a href="https://huggingface.co/" class="text-blue-500">Hugging Face</a> models like Llama-2-7b and curated models from the <a href="https://ml.azure.com/" class="text-blue-500">Azure AI |
-							Machine Learning Studio</a> model catalog.
+						Accelerate training of popular models, including <a
+							href="https://huggingface.co/"
+							class="text-blue-500">Hugging Face</a
+						>
+						models like Llama-2-7b and curated models from the
+						<a href="https://ml.azure.com/" class="text-blue-500"
+							>Azure AI | Machine Learning Studio</a
+						> model catalog.
 					</p>
 				</div>
 				<div class="hidden xl:grid">
--- a/src/routes/components/videogallery.svelte
+++ b/src/routes/components/videogallery.svelte
@ -29,9 +29,9 @@
 			</div>
 		{/each}
 	</div>
-    {#if title == true}
-	<a href="https://www.youtube.com/@ONNXRuntime" class="btn rounded-sm btn-primary mr-4">
-		ONNX Runtime YouTube channel →
-	</a>
-    {/if}
+	{#if title == true}
+		<a href="https://www.youtube.com/@ONNXRuntime" class="btn rounded-sm btn-primary mr-4">
+			ONNX Runtime YouTube channel →
+		</a>
+	{/if}
 </div>
--- a/src/routes/components/winarm.svelte
+++ b/src/routes/components/winarm.svelte
@ -19,24 +19,46 @@
 			Follow these steps to setup your device to use ONNX Runtime (ORT) with the built in NPU:
 			<ol class="list-decimal ml-10">
 				<li>
-					<a class="text-blue-500" href="https://qpm.qualcomm.com/main/tools/details/qualcomm_ai_engine_direct">Download</a> the Qualcomm AI Engine Direct SDK (QNN SDK)
+					<a
+						class="text-blue-500"
+						href="https://qpm.qualcomm.com/main/tools/details/qualcomm_ai_engine_direct">Download</a
+					> the Qualcomm AI Engine Direct SDK (QNN SDK)
+				</li>
+				<li>
+					<a
+						class="text-blue-500"
+						href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime.QNN">Download</a
+					> and install the ONNX Runtime with QNN package
 				</li>
-				<li><a class="text-blue-500" href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime.QNN">Download</a> and install the ONNX Runtime with QNN package</li>
 				<li>Start using the ONNX Runtime API in your application.</li>
 			</ol>
-			<br><br>
+			<br /><br />
 			<p class="text-xl text-blue-500">Optimizing models for the NPU</p>
-			<a class="text-blue-500" href="https://onnx.ai/">ONNX</a> is a standard format for representing ML models authored in frameworks like PyTorch,
-			TensorFlow, and others. ONNX Runtime can run any ONNX model, however to make use of the NPU,
-			you currently need to quantize the ONNX model to QDQ model.
-				<br>
-				See our <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/c_cxx/QNN_EP/mobilenetv2_classification">C# tutorial</a> for an example of how this is done.
+			<a class="text-blue-500" href="https://onnx.ai/">ONNX</a> is a standard format for
+			representing ML models authored in frameworks like PyTorch, TensorFlow, and others. ONNX
+			Runtime can run any ONNX model, however to make use of the NPU, you currently need to quantize
+			the ONNX model to QDQ model.
+			<br />
+			See our
+			<a
+				class="text-blue-500"
+				href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/c_cxx/QNN_EP/mobilenetv2_classification"
+				>C# tutorial</a
+			>
+			for an example of how this is done.
 			<br />
 			Many models can be optimized for the NPU using this process. Even if a model cannot be optimized
 			for the NPU, it can still be run by ONNX Runtime on the CPU.
-			<br><br>
+			<br /><br />
 			<p class="text-xl text-blue-500">Getting Help</p>
-			For help with ONNX Runtime, you can <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime/discussions">start a discussion</a> on GitHub or <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime/issues">file an issue</a>.
+			For help with ONNX Runtime, you can<a
+				class="text-blue-500"
+				href="https://github.com/microsoft/onnxruntime/discussions">start a discussion</a
+			>
+			on GitHub or
+			<a class="text-blue-500" href="https://github.com/microsoft/onnxruntime/issues"
+				>file an issue</a
+			>.
 		</div>
 		<div class="m-auto">
 			<img src={windowsdevkit} alt="Windows Dev kit" />
--- a/src/routes/events/event-post.svelte
+++ b/src/routes/events/event-post.svelte
@ -6,7 +6,7 @@
 	export let link: string;
 	export let image: string;
 	export let imagealt: string;
-	export let linkarr: { name: string, link: string}[];
+	export let linkarr: { name: string; link: string }[];
 	let handleEnter = (e: any) => {
 		anime({
 			targets: e.target,
--- a/src/routes/generative-ai/+page.svelte
+++ b/src/routes/generative-ai/+page.svelte
@ -26,10 +26,9 @@
 			<div class="card-body">
 				<h2 class="card-title pb-4">Run Stable Diffusion outside of a Python environment</h2>
 				<div class="card-actions">
-					
 					<a
 						href="https://onnxruntime.ai/docs/tutorials/csharp/stable-diffusion-csharp.html"
-						class="btn-primary btn ">Inference Stable Diffusion →</a
+						class="btn-primary btn">Inference Stable Diffusion →</a
 					>
 				</div>
 			</div>
@ -40,10 +39,9 @@
 					Speed up inference of Stable Diffusion on NVIDIA and AMD GPUs
 				</h2>
 				<div class="card-actions">
-					
 					<a
 						href="https://medium.com/microsoftazure/accelerating-stable-diffusion-inference-with-onnx-runtime-203bd7728540"
-						class="btn btn-primary ">Accelerate Stable Diffusion →</a
+						class="btn btn-primary">Accelerate Stable Diffusion →</a
 					>
 				</div>
 			</div>
--- a/src/routes/getting-started/+page.svelte
+++ b/src/routes/getting-started/+page.svelte
@ -14,9 +14,7 @@
 <div class="container mx-auto px-10 my-10">
 	<h1 class="text-4xl pb-4">Get Started</h1>
 	<h1 class="text-2xl pb-4">Installation Instructions</h1>
-	<div class="lg:hidden">
-		The installation table is visible on desktop only.
-	</div>
+	<div class="lg:hidden">The installation table is visible on desktop only.</div>
 	<div class="hidden lg:grid">
 		<Table />
 	</div>
@ -31,10 +29,14 @@
 	<div class="grid grid-cols-2 lg:grid-cols-3">
 		<div class="col-span-2">
 			<h1 class="text-4xl pb-4">GitHub</h1>
-			If you are interested in joining the ONNX Runtime open source community, you might want to join us on GitHub where you can
-			interact with other users and developers, participate in <a href="https://github.com/microsoft/onnxruntime/discussions" class="text-blue-500">discussions</a>, and get help with any
-			<a href="https://github.com/microsoft/onnxruntime/issues" class="text-blue-500">issues</a> you encounter. You can also contribute to the project by reporting bugs, suggesting features,
-			or submitting pull requests.
+			If you are interested in joining the ONNX Runtime open source community, you might want to join
+			us on GitHub where you can interact with other users and developers, participate in<a
+				href="https://github.com/microsoft/onnxruntime/discussions"
+				class="text-blue-500">discussions</a
+			>, and get help with any
+			<a href="https://github.com/microsoft/onnxruntime/issues" class="text-blue-500">issues</a> you
+			encounter. You can also contribute to the project by reporting bugs, suggesting features, or
+			submitting pull requests.
 			<div class="py-4">
 				<a href="https://github.com/microsoft/onnxruntime" class="btn btn-primary rounded-sm mr-4"
 					>ONNX Runtime GitHub →</a
--- a/src/routes/getting-started/table.svelte
+++ b/src/routes/getting-started/table.svelte
@ -53,9 +53,24 @@
 	const TrainingScenarios = ['Large Model Training', 'On-Device Training'];
 	const TrainingScenarioIds = ['ot_large_model', 'ot_on_device'];
 	const TrainingPlatforms = ['Linux', 'Windows', 'Mac', 'Android', 'iOS', 'Web browser'];
-	const TrainingPlatformIds = ['ot_linux', 'ot_windows', 'ot_mac', 'ot_android', 'ot_ios', 'ot_web'];
+	const TrainingPlatformIds = [
+		'ot_linux',
+		'ot_windows',
+		'ot_mac',
+		'ot_android',
+		'ot_ios',
+		'ot_web'
+	];
 	const TrainingAPIs = ['Python', 'C', 'C++', 'C#', 'Java', 'Obj-C', 'JavaScript'];
-	const TrainingAPIIds = ['ot_python', 'ot_c', 'ot_cplusplus', 'ot_csharp', 'ot_java', 'ot_objc', 'ot_js'];
+	const TrainingAPIIds = [
+		'ot_python',
+		'ot_c',
+		'ot_cplusplus',
+		'ot_csharp',
+		'ot_java',
+		'ot_objc',
+		'ot_js'
+	];
 	const TrainingVersions = ['CUDA 11.8', 'CUDA 12.2', 'ROCm', 'CPU'];
 	const TrainingVersionIds = ['ot_CUDA118', 'ot_CUDA122', 'ot_ROCm', 'ot_CPU'];
 	const TrainingBuilds = ['Stable', 'Preview (Nightly)'];
@ -146,8 +161,8 @@
 			"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",

 		'mac,C++,X64,DefaultCPU':
-		"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",
-		
+			"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",
+
 		'mac,C#,X64,DefaultCPU':
 			"Download .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>",

@ -163,16 +178,18 @@
 		'mac,Python,ARM64,CoreML': 'pip install onnxruntime',

 		'mac,objectivec,X64,DefaultCPU': "Add 'onnxruntime-objc' using CocoaPods.",
-		
+
 		'mac,objectivec,ARM64,DefaultCPU': "Add 'onnxruntime-objc' using CocoaPods.",
-		
+
 		'mac,objectivec,X64,CoreML': "Add 'onnxruntime-objc' using CocoaPods.",
-		
+
 		'mac,objectivec,ARM64,CoreML': "Add 'onnxruntime-objc' using CocoaPods.",

-		'mac,C-API,X64,CoreML': "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",
+		'mac,C-API,X64,CoreML':
+			"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",

-		'mac,C++,X64,CoreML': "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",
+		'mac,C++,X64,CoreML':
+			"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",

 		'linux,Python,X64,DefaultCPU': 'pip install onnxruntime',

@ -582,7 +599,7 @@

 		//mac m1
 		'mac,C-API,ARM64,CoreML':
-		"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",
+			"Add 'onnxruntime-c' using CocoaPods or download the .tgz file from&nbsp;<a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.",

 		'mac,C#,ARM64,CoreML':
 			"Install Nuget package&nbsp;<a class='text-blue-500' href='https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime' target='_blank'>Microsoft.ML.OnnxRuntime</a> <br/>Refer to <a class='text-blue-500' href='http://www.onnxruntime.ai/docs/execution-providers/CoreML-ExecutionProvider.html#requirements' target='_blank'>docs</a> for requirements.",
@ -823,12 +840,9 @@
 		'ot_ios,ot_on_device,ot_cplusplus,ot_X64,ot_CPU,ot_nightly':
 			"Follow build instructions from&nbsp;<a class='text-blue-500' href='https://onnxruntime.ai/docs/build/ios.html' target='_blank'>here</a>",

-		'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_stable':
-			"npm install onnxruntime-web",
-
-		'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_nightly':
-			"npm install onnxruntime-web@dev",
+		'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_stable': 'npm install onnxruntime-web',

+		'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_nightly': 'npm install onnxruntime-web@dev'
 	};
 	onMount(() => {
 		var supportedOperatingSystemsNew = [
@ -1821,7 +1835,7 @@
 		Select the configuration you want to use and run the corresponding installation script.
 	</p>
 	<div>
-		<div class="tabs tabs-bordered ">
+		<div class="tabs tabs-bordered">
 			{#each tabs as tab, index}
 				<li
 					class="nav-item tab tab-lg"
--- a/src/routes/huggingface/+page.svelte
+++ b/src/routes/huggingface/+page.svelte
@ -50,8 +50,9 @@
 			<a href="https://huggingface.co/spaces/onnx/export" class="btn btn-primary rounded-sm"
 				>Export PyTorch models to ONNX →</a
 			>
-			<a href="https://huggingface.co/docs/transformers/serialization" class="btn btn-primary rounded-sm"
-				>Other ONNX export options →</a
+			<a
+				href="https://huggingface.co/docs/transformers/serialization"
+				class="btn btn-primary rounded-sm">Other ONNX export options →</a
 			>
 		</div>
 		<div class="mx-auto md:pt-10">
--- a/src/routes/inference/+page.svelte
+++ b/src/routes/inference/+page.svelte
@ -42,7 +42,9 @@
 	<div class="grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mx-auto">
 		<div class="card bg-base-300">
 			<div class="card-body items-center text-center">
-				<h2 class="card-title">Improve inference latency, throughput, memory utilization, and binary size</h2>
+				<h2 class="card-title">
+					Improve inference latency, throughput, memory utilization, and binary size
+				</h2>
 			</div>
 		</div>
 		<div class="card bg-base-300">
@ -62,7 +64,6 @@
 				<h2 class="card-title">Deploy a classic ML Python model in a C#/C++/Java app</h2>
 			</div>
 		</div>
-		
 	</div>
 </div>

@ -79,9 +80,8 @@
 			<div class="card bg-base-300">
 				<div class="card-body items-center text-center">
 					<h2 class="card-title">Image Classification</h2>
-					This example app uses image classification to continuously classify the objects
-					detected from the device's camera in real-time and displays the most probable inference results
-					on the screen.
+					This example app uses image classification to continuously classify the objects detected from
+					the device's camera in real-time and displays the most probable inference results on the screen.
 					<div class="card-actions mt-auto mb-2 justify-center">
 						<a
 							href="https://github.com/microsoft/onnxruntime-inference-examples/blob/main/mobile/examples/image_classification/android"
@ -93,7 +93,8 @@
 			<div class="card bg-base-300">
 				<div class="card-body items-center text-center">
 					<h2 class="card-title">Speech Recognition</h2>
-					This example app uses speech recognition to transcribe speech from the audio recorded by the device.
+					This example app uses speech recognition to transcribe speech from the audio recorded by the
+					device.
 					<div class="card-actions mt-auto mb-2 justify-center">
 						<!-- <a
 							href="https://github.com/microsoft/onnxruntime-inference-examples/blob/main/mobile/examples/speech_recognition/android"
@ -109,9 +110,9 @@
 			<div class="card bg-base-300">
 				<div class="card-body items-center text-center">
 					<h2 class="card-title">Object Detection</h2>
-					This example app uses object detection to continuously detect the objects in the
-					frames seen by the iOS device's back camera and display the detected object's bounding boxes,
-					detected class, and corresponding inference confidence.
+					This example app uses object detection to continuously detect the objects in the frames seen
+					by the iOS device's back camera and display the detected object's bounding boxes, detected
+					class, and corresponding inference confidence.
 					<div class="card-actions mt-auto mb-2 justify-center">
 						<a
 							href="https://github.com/microsoft/onnxruntime-inference-examples/blob/main/mobile/examples/object_detection/android"
@ -143,8 +144,7 @@
 		</div>
 		<a
 			href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/mobile"
-			class="text-2xl text-blue-500"
-			>See more examples of ONNX Runtime Mobile on GitHub. →</a
+			class="text-2xl text-blue-500">See more examples of ONNX Runtime Mobile on GitHub. →</a
 		>
 	</div>
 </div>
@ -155,7 +155,9 @@
 			<br /><br />
 			<p class="text-xl">
 				ONNX Runtime Web allows JavaScript developers to run and deploy machine learning models in
-				browsers, which provides cross-platform portability with a common implementation. This can simplify the distribution experience as it avoids additional libraries and driver installations.
+				browsers, which provides cross-platform portability with a common implementation. This can
+				simplify the distribution experience as it avoids additional libraries and driver
+				installations.
 			</p>
 			<br />
 			<a href="https://www.youtube.com/watch?v=vYzWrT3A7wQ" class="btn btn-primary"
@ -170,7 +172,8 @@
 		<h1 class="text-3xl">Examples</h1>
 		<div class="grid gap-10 grid-cols-1 md:grid-cols-2">
 			<div class="">
-				<p><br/>
+				<p>
+					<br />
 					<b>ONNX Runtime Web Demo</b> is an interactive demo portal that showcases live use of ONNX
 					Runtime Web in VueJS. View these examples to experience the power of ONNX Runtime Web.
 				</p>
@ -235,7 +238,8 @@
 			<div class="card bg-base-200">
 				<div class="card-body items-center text-center">
 					<h2 class="card-title">Natural Language Processing (NLP)</h2>
-					This example demonstrates how to create custom Excel functions to implement BERT NLP models with ONNX Runtime Web to enable deep learning in spreadsheet tasks.
+					This example demonstrates how to create custom Excel functions to implement BERT NLP models
+					with ONNX Runtime Web to enable deep learning in spreadsheet tasks.
 					<div class="card-actions mt-auto mb-2 justify-center">
 						<a
 							href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js/ort-whisper"
@ -257,7 +261,10 @@
 		<div class="col-span-2">
 			<h1 class="text-4xl">On-Device Training</h1>
 			<br /><br />
-			<p class="text-xl">ONNX Runtime on-device training extends the Inference ecosystem to leverage data on the device to train models.</p>
+			<p class="text-xl">
+				ONNX Runtime on-device training extends the Inference ecosystem to leverage data on the
+				device to train models.
+			</p>
 			<br />
 			<a href="./training#on-device-training" class="btn btn-primary"
 				>Learn more about on-device training →</a
--- a/src/routes/testimonials/+page.svelte
+++ b/src/routes/testimonials/+page.svelte
@ -37,8 +37,7 @@
 			title: 'Adobe',
 			quote:
 				'With ONNX Runtime, Adobe Target got flexibility and standardization in one package: flexibility for our customers to train ML models in the frameworks of their choice, and standardization to robustly deploy those models at scale for fast inference, to deliver true, real-time personalized experiences.',
-			author:
-				'Georgiana Copil, Senior Computer Scientist, Adobe',
+			author: 'Georgiana Copil, Senior Computer Scientist, Adobe',
 			imgsrc: adobelogo,
 			imgalt: 'Adobe logo'
 		},
--- a/src/routes/training/+page.svelte
+++ b/src/routes/training/+page.svelte
@ -26,11 +26,12 @@
 			<h1 class="text-3xl">Large Model Training</h1>
 			<br /><br />
 			<p class="text-xl">
-				ORTModule accelerates training of large transformer based PyTorch models. The training time and
-				training cost is reduced with a few lines of code change. It is built on top of highly successful and
-				proven technologies of ONNX Runtime and ONNX format. It is composable with technologies like DeepSpeed and 
-				accelerates pre-training and finetuning for state of the art LLMs. It is integrated in the Hugging Face Optimum
-				library which provides an ORTTrainer API to use ONNX Runtime as the backend for training acceleration. 
+				ORTModule accelerates training of large transformer based PyTorch models. The training time
+				and training cost is reduced with a few lines of code change. It is built on top of highly
+				successful and proven technologies of ONNX Runtime and ONNX format. It is composable with
+				technologies like DeepSpeed and accelerates pre-training and finetuning for state of the art
+				LLMs. It is integrated in the Hugging Face Optimum library which provides an ORTTrainer API
+				to use ONNX Runtime as the backend for training acceleration.
 			</p>
 			<br />
 			<div class="bg-white w-100 md:w-1/2 p-4">
@ -146,16 +147,16 @@
 <div class="container mx-auto px-10 my-10">
 	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-10">
 		<div class="col-span-2">
-			<h1 class="text-4xl" id = "on-device-training">On-Device Training</h1>
+			<h1 class="text-4xl" id="on-device-training">On-Device Training</h1>
 			<br /><br />
 			<p class="text-xl">
 				On-Device Training refers to the process of training a model on an edge device, such as
 				mobile phones, embedded devices, gaming consoles, web browsers, etc. This is in contrast to
 				training a model on a server or a cloud. On-Device Training extends the Inference ecosystem
-				 to leverage data on the device for providing customized user experiences on the edge. Once the model 
-				 is trained on the device, it can be used to get an Inference model for deployment, update 
-				 global weights for federated learning or create a checkpoint for future use. It 
-				 also preserves user privacy by training on the device.
+				to leverage data on the device for providing customized user experiences on the edge. Once
+				the model is trained on the device, it can be used to get an Inference model for deployment,
+				update global weights for federated learning or create a checkpoint for future use. It also
+				preserves user privacy by training on the device.
 			</p>
 			<br />
 			<a
--- a/src/routes/winarm/+page.svelte
+++ b/src/routes/winarm/+page.svelte
@ -1,4 +1,5 @@
 <script>
-	import Winarm from "../components/winarm.svelte";
+	import Winarm from '../components/winarm.svelte';
 </script>
-<Winarm/>
+
+<Winarm />
--- a/src/routes/windows/+page.svelte
+++ b/src/routes/windows/+page.svelte
@ -98,7 +98,8 @@
 				<div class="card-actions">
 					<a
 						href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery"
-						class="btn btn-primary hidden md:grid rounded-sm">Check out the Windows ML Sample Gallery →</a
+						class="btn btn-primary hidden md:grid rounded-sm"
+						>Check out the Windows ML Sample Gallery →</a
 					>
 					<a
 						href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery"
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +1,22 @@
+import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
+
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,svelte,js,ts}'],
 	theme: {
-		extend: {}
+		extend: {
+			animation:{
+				scroll: 
+				'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite'
+			},
+			keyframes:{
+				scroll: {
+					to: {
+						transform: 'translate(calc(-50% - 0.5rem))'
+					}
+				}
+			}
+		}
 	},
 	plugins: [require('daisyui')],
 	daisyui: {
@ -27,3 +41,14 @@ export default {
 		utils: true
 	}
 };
+
+function addVariablesForColors({ addBase, theme }) {
+	let allColors = flattenColorPalette(theme('colors'));
+	let newVars = Object.fromEntries(
+		Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+	);
+
+	addBase({
+		':root': newVars
+	});
+}