Added full color onnx logo. Also went through most of faith's suggest…

…ions.

src/images/undraw/image_largemodeltraining.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	stroke="black"
 	width={176 * widthscale}
 	height={126 * heightscale}
 	viewBox="0 0 176 126"

src/images/undraw/image_ondevtraining.svelte

@@ -1,5 +1,5 @@
 <svg
-	stroke="currentColor"
+	stroke="black"
 	width="112"
 	height="137"
 	viewBox="0 0 112 137"

src/images/undraw/image_ortcrossplatform.svelte

@@ -1,5 +1,5 @@
 <svg
-	class=""
+	stroke="currentColor"
 	width="338.4"
 	height="194.4"
 	viewBox="0 0 188 108"

src/images/undraw/image_ortgenerativeai.svelte

@@ -1,4 +1,5 @@
 <svg
+	stroke="currentColor"
 	width="361.5"
 	height="165"
 	viewBox="0 0 241 110"

src/images/undraw/image_ortmobile.svelte

@@ -1,5 +1,5 @@
 <svg
-	stroke="currentColor"
+	stroke="black"
 	width="165"
 	height="137"
 	viewBox="0 0 165 137"

src/images/undraw/image_ortperf.svelte

@@ -1,4 +1,5 @@
 <svg
+	stroke="currentColor"
 	width="360"
 	height="235.5"
 	viewBox="0 0 240 157"

src/images/undraw/image_ortweb.svelte

@@ -1,5 +1,5 @@
 <svg
-	stroke="currentColor"
+	stroke="black"
 	width="172"
 	height="136"
 	viewBox="0 0 172 136"

src/routes/+error.svelte

@@ -1,13 +1,13 @@
 <script>
 	import { base } from '$app/paths';
-	import OnnxIcon from '../images/onnx-icon.svelte';
+	import OnnxLight from '../images/ONNX-Light.svelte';
 </script>
 
 <div class="container mx-auto text-center">
 	<div class="flex items-center justify-center">
 		<h1 class="text-9xl">4</h1>
 		<div>
-			<OnnxIcon width={75} height={75} />
+			<OnnxLight width={100} height={100} />
 		</div>
 		<h1 class="text-9xl">4</h1>
 	</div>

src/routes/components/code-blocks.svelte

@@ -53,24 +53,26 @@
 			<h1 class="text-xl mb-4">
 				Use ONNX Runtime with your favorite language, or dive right into the tutorials.
 			</h1>
-			<a href="./getting-started" class="btn btn-secondary rounded-sm btn-block mb-4 text-slate-100"
+			<div class="join join-vertical gap-4 w-full">
+				<a href="./getting-started" class="btn btn-primary rounded-sm btn-block"
 				>Quickstart</a
 			>
 			<a
 				rel="external"
 				href="./docs/tutorials"
-				class="btn btn-secondary rounded-sm btn-block mb-4 text-slate-100">Tutorials</a
+				class="btn btn-primary rounded-sm btn-block">Tutorials</a
 			>
 			<a
 				rel="external"
 				href="./docs/install"
-				class="btn btn-secondary rounded-sm btn-block mb-4 text-slate-100">Install ONNX Runtime</a
+				class="btn btn-primary rounded-sm btn-block">Install ONNX Runtime</a
 			>
 			<a
 				rel="external"
 				href="./docs/execution-providers"
-				class="btn btn-secondary rounded-sm btn-block mb-4 text-slate-100">Hardware acceleration</a
+				class="btn btn-primary rounded-sm btn-block">Hardware acceleration</a
 			>
+			</div>
 		</div>
 		<div class="hidden lg:block col-span-2 mx-auto tab-container">
 			<div class="tabs">

src/routes/components/cross-platform.svelte

@@ -11,9 +11,9 @@
 			<h1 class="text-4xl">Cross-Platform</h1>
 			<br /><br />
 			<p class="text-xl">
-				Take advantage of the benefits of ONNX Runtime without changing your technology stack.
-				Access ONNX RunTime using your preferred API - C#, C++, C, Python, or Java. Support for
-				Linux, Windows, and Mac allows you to build and deploy applications without worry.
+				Take advantage of ONNX Runtime without changing your technology stack. Support for Linux,
+				Windows, Mac, iOS, Android, and web allows you to build and deploy applications consistently
+				across a variety of devices.
 			</p>
 		</div>
 		<div class="m-auto lg:hidden">

src/routes/components/customers.svelte

@@ -3,7 +3,15 @@
 	import anime from 'animejs';
 	import pytorchlogo from '../../images/logos/PyTorch_logo_black.svg';
 	import windowslogo from '../../images/logos/Windows_logo_and_wordmark.svg';
-	import huggingfacelogo from '../../images/logos/hf-logo-with-title.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 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;
@@ -26,21 +34,21 @@
 	});
 
 	let handleEnter = (e: any) => {
-		if (interact){
+		if (interact) {
 			anime({
-			targets: e.target,
-			scale: 1.1,
-			duration: 1500
-		});
+				targets: e.target,
+				scale: 1.1,
+				duration: 1500
+			});
 		}
 	};
 	let handleLeave = (e: any) => {
-		if (interact){
+		if (interact) {
 			anime({
-			targets: e.target,
-			scale: 1,
-			duration: 1500
-		});
+				targets: e.target,
+				scale: 1,
+				duration: 1500
+			});
 		}
 	};
 </script>
@@ -51,46 +59,74 @@
 	<div
 		class="grid lg:grid-cols-8 md:grid-cols-4 grid-cols-2 gap-4 mx-auto justify-items-center pt-10"
 	>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/amd-logo.png" alt="AMD" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={amdLogo} alt="AMD" />
 		</button>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/huggingface-logo.png" alt="HuggingFace" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={huggingfaceLogo} alt="HuggingFace" />
 		</button>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/intel-logo.png" alt="Intel" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={intelLogo} alt="Intel" />
 		</button>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/nvidia.png" alt="Nvidia" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={nvidiaLogo} alt="Nvidia" />
 		</button>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/adobe-logo.png" alt="Adobe" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={adobeLogo} alt="Adobe" />
 		</button>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/visual-studio-logo.png" alt="Microsoft" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={unrealEngineLogo} alt="Unreal Engine" />
 		</button>
-		<button on:mouseenter={handleEnter} on:mouseleave={handleLeave} class="partner cursor-default bg-secondary rounded">
-			<img src="https://onnxruntime.ai/images/logos/oracle-logo.png" alt="Oracle" />
+		<button
+			on:mouseenter={handleEnter}
+			on:mouseleave={handleLeave}
+			class="partner cursor-default bg-slate-300 border-solid border-2 border-secondary rounded"
+		>
+			<img src={oracleLogo} alt="Oracle" />
 		</button>
-			<a
+		<a
 			on:mouseenter={handleEnter}
 			on:mouseleave={handleLeave}
 			href="./testimonials"
-			class="w-full partner bg-secondary rounded flex items-center justify-center"
+			class="w-full partner bg-slate-300 border-solid border-2 border-secondary rounded flex items-center justify-center"
 		>
-			<p class="underline">...and many more</p>
+			<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>
+	<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-secondary rounded-sm h-full"
+		<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-secondary rounded-sm h-full"
+		<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-secondary rounded-sm h-full"
-			><img class="px-10 py-5" src={huggingfacelogo} alt="HuggingFace 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
 		>
 	</div>
 </div>

src/routes/components/header.svelte

@@ -5,7 +5,7 @@
 	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
 	import FaYoutube from 'svelte-icons/fa/FaYoutube.svelte';
 	import FaLinkedinIn from 'svelte-icons/fa/FaLinkedinIn.svelte';
-	import OnnxIcon from '../../images/onnx-icon.svelte';
+	import OnnxLight from '../../images/ONNX-Light.svelte';
 	onMount(() => {
 		themeChange(false);
 	});
@@ -63,11 +63,11 @@
 		</div>
 		<a href="./" class="btn btn-ghost normal-case text-xl">
 			<div class="hidden lg:inline">
-				<OnnxIcon width={32} height={32} />
+				<OnnxLight width={32} height={32} />
 			</div>
 			ONNXRuntime
 			<div class="lg:hidden">
-				<OnnxIcon width={32} height={32} />
+				<OnnxLight width={32} height={32} />
 			</div>
 		</a>
 	</div>

src/routes/components/hero.svelte

@@ -6,7 +6,8 @@
 	import { Highlight } from 'svelte-highlight';
 	import { bash } from 'svelte-highlight/languages';
 	import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
-	import OnnxIcon from '../../images/onnx-icon.svelte';
+	import OnnxLight from '../../images/ONNX-Light.svelte';
+	import OnnxDark from '../../images/ONNX-Dark.svelte';
 	import { fade, fly, blur } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
@@ -83,7 +84,7 @@
 				</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">
-					<div class="grid grid-cols-6 bg-white">
+					<div class="grid grid-cols-6 border-solid border-2 border-secondary">
 						<div class="col-span-5">
 							<Highlight language={bash} code={pythonCode} />
 						</div>
@@ -94,7 +95,7 @@
 							><span class="w-6 h-6"><FaRegClipboard /></span></button
 						>
 					</div>
-					<div class="grid grid-cols-6 bg-white">
+					<div class="grid grid-cols-6 border-solid border-2 border-secondary">
 						<div class="col-span-5">
 							<Highlight language={bash} code={nugetCode} />
 						</div>
@@ -110,13 +111,13 @@
 					<a class="underline" href="http://">More interested in training? More info here.</a>
 				</p> -->
 				<p class="text-lg mt-2">
-					<a class="text-blue-500" href="./getting-started"
-						>Don't see your favourite platform? See the many others we support →</a
+					<a class="text-blue-500 font-medium" href="./getting-started"
+						>Don't see your favorite platform? See the many others we support →</a
 					>
 				</p>
 			</div>
-			<div class="hidden lg:inline">
-				<OnnxIcon width={233} height={220} />
+			<div class="hidden lg:inline mx-auto">
+				<OnnxLight width={300} height={300} />
 			</div>
 		</div>
 	</div>

src/routes/components/landing-hero.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
+	import OnnxLight from '../../images/ONNX-Light.svelte';
 	export let title: string;
 	export let description: string;
 	export let imgsrc: string;
 	export let imgalt: string;
-	import OnnxIcon from '../../images/onnx-icon.svelte';
-	if (imgsrc == 'onnxruntimelogo') {
-	}
 </script>
 
 <div class="container mx-auto px-10 my-10">
@@ -20,7 +18,7 @@
 		</div>
 		{#if imgsrc == 'onnxruntimelogo'}
 			<div class="m-auto">
-				<OnnxIcon />
+				<OnnxLight />
 			</div>
 		{:else}
 			<img class="m-auto" src={imgsrc} alt={imgalt} />

src/routes/components/performance.svelte

@@ -8,13 +8,12 @@
 			<h1 class="text-4xl">Performance</h1>
 			<br /><br />
 			<p class="text-xl">
-				ONNX Runtime provides high performance for running deep learning models on a range of
-				hardwares. Based on usage scenario requirements, latency, throughput, memory utilization,
-				and model/application size are common dimensions for how performance is measured.
+				ONNX Runtime runs performantly on a range of hardware, excelling in performance dimensions
+				including latency, throughput, memory utilization, and model and application size.
 				<br /><br />
-				While ORT out-of-box aims to provide good performance for the most common usage patterns, there
-				are model optimization techniques and runtime configurations that can be utilized to improve
-				performance for specific use cases and models..
+				In addition to high performance out-of-box for the most common usage patterns, additional 
+				<a href="https://onnxruntime.ai/docs/performance/" class="text-blue-500">model optimization techniques</a> and runtime configurations can further improve performance for specific
+				use cases and models.
 			</p>
 		</div>
 		<div class="m-auto overflow:hidden">