From f5357d7918544f78839f221b2cfa56e0d7e2edd5 Mon Sep 17 00:00:00 2001
From: Maanav Dalal <maanavdalal@microsoft.com>
Date: Wed, 13 Nov 2024 16:45:46 -0800
Subject: [PATCH] Fixed some accessibility, and moved homepage things around.
 (#22832)

Addresses #21638

Changed install to genai, moved genai section up, accessibility changes
in docs/install.

Still todo (another PR, soon to come):

- Change theme for accessibility
- Change videos linked on homepage
- Update homepage content to more closely reflect current ORT status.

Preview at : https://maanavd.github.io/onnxruntime/
---
 docs/install/index.md                           | 16 ++++++++--------
 src/routes/+page.svelte                         |  2 +-
 src/routes/components/customers.svelte          |  4 ++--
 src/routes/components/generative-ai-hero.svelte |  2 +-
 src/routes/components/hero.svelte               | 10 +++++-----
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/install/index.md b/docs/install/index.md
index 33a9d2881e..df22767464 100644
--- a/docs/install/index.md
+++ b/docs/install/index.md
@@ -294,7 +294,7 @@ pip install -i https://aiinfra.pkgs.visualstudio.com/PublicPackages/_packaging/O
     <!-- TODO (baijumeswani) - Update to Training link once published -->
     <td><a href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime">Microsoft.ML.OnnxRuntime.Training</a></td>
     <td>
-      <pre lang="bash">dotnet add package Microsoft.ML.OnnxRuntime.Training</pre>
+      <code>dotnet add package Microsoft.ML.OnnxRuntime.Training</code>
     </td>
   </tr>
   <!-- <tr>
@@ -323,7 +323,7 @@ pip install -i https://aiinfra.pkgs.visualstudio.com/PublicPackages/_packaging/O
     <td>Python</td>
     <td><a href="https://pypi.org/project/onnxruntime-training/">onnxruntime-training</a></td>
     <td>
-      <pre lang="bash">pip install onnxruntime-training</pre>
+      <code>pip install onnxruntime-training</code>
     </td>
   </tr>
   <tr>
@@ -345,19 +345,19 @@ pip install -i https://aiinfra.pkgs.visualstudio.com/PublicPackages/_packaging/O
     <td><a href="https://mvnrepository.com/artifact/com.microsoft.onnxruntime/onnxruntime-android">onnxruntime-training-android</a></td>
     <td>In your Android Studio Project, make the following changes to:
       <ol>
-        <li>build.gradle (Project):
-          <pre lang="gradle">
+        <li>build.gradle (Project): 
+          <code>
 repositories {
     mavenCentral()
 }
-          </pre>
+          </code>
         </li>
-        <li>build.gradle (Module):
-          <pre lang="gradle">
+        <li>build.gradle (Module): 
+          <code>
 dependencies {
     implementation 'com.microsoft.onnxruntime:onnxruntime-training-android:latest.release'
 }
-          </pre>
+          </code>
         </li>
       </ol>
     </td>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 84249666de..a99341fec4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -66,9 +66,9 @@
 
 <Hero />
 <Customers />
+<GenerativeAi />
 <CodeBlocks />
 <VideoGallery {videos} />
-<GenerativeAi />
 <CrossPlatform />
 <Performance />
 <TrainingAndInference />
diff --git a/src/routes/components/customers.svelte b/src/routes/components/customers.svelte
index 6c6c7dce06..5ffa0a1934 100644
--- a/src/routes/components/customers.svelte
+++ b/src/routes/components/customers.svelte
@@ -226,7 +226,7 @@
 		direction="left"
 		speed="slow"
 	/>
-	<div class="container mx-auto md:px-16 px-8 lg:my-10">
+	<!-- <div class="container mx-auto md:px-16 px-8 lg:my-10">
 		<h2 class="text-2xl pt-10 pb-4">Learn more about how to use ONNX Runtime with</h2>
 		<div class="grid md:grid-cols-3 grid-cols-1 gap-4 mx-auto pb-10">
 			<a
@@ -245,5 +245,5 @@
 				><img class="px-10 py-5" src={huggingfacelogoTitle} alt="HuggingFace Logo" /></a
 			>
 		</div>
-	</div>
+	</div> -->
 </div>
diff --git a/src/routes/components/generative-ai-hero.svelte b/src/routes/components/generative-ai-hero.svelte
index bff3953cc7..589c99e555 100644
--- a/src/routes/components/generative-ai-hero.svelte
+++ b/src/routes/components/generative-ai-hero.svelte
@@ -3,7 +3,7 @@
 	import Ortgenerativeai from '../../images/undraw/image_ortgenerativeai.svelte';
 </script>
 
-<div class="container mx-auto px-10 mb-10">
+<div class="container mx-auto px-10 my-10">
 	<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
 		<div class="">
 			<h2 class="text-4xl">Generative AI</h2>
diff --git a/src/routes/components/hero.svelte b/src/routes/components/hero.svelte
index a1124c55f0..d236af65c0 100644
--- a/src/routes/components/hero.svelte
+++ b/src/routes/components/hero.svelte
@@ -24,7 +24,7 @@
 		'C++',
 		'Browser'
 	];
-	let activeWord = 'Cross-Platform';
+	let activeWord = 'Edge';
 	let currentWord = 0;
 	let cycleWord = () => {
 		currentWord = (currentWord + 1) % words.length;
@@ -37,7 +37,7 @@
 	};
 	setTimeout(cycleWord, 2000);
 	let pythonCode = 'pip install onnxruntime';
-	let nugetCode = 'nuget install Microsoft.ML.OnnxRuntime';
+	let gaiCode = 'pip install onnxruntime-genai';
 	let copied = false;
 	let copy = async (code: string) => {
 		try {
@@ -112,11 +112,11 @@
 					</div>
 					<div class="grid grid-cols-6 border-solid border-2 border-secondary">
 						<div class="col-span-5">
-							<Highlight language={bash} code={nugetCode} />
+							<Highlight language={bash} code={gaiCode} />
 						</div>
 						<button
 							aria-label="copy nuget code"
-							on:click={() => copy(nugetCode)}
+							on:click={() => copy(gaiCode)}
 							class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200"
 							><span class="min-w-6 h-6"><FaRegClipboard /></span></button
 						>
@@ -127,7 +127,7 @@
 				</p> -->
 				<p class="text-lg mt-2">
 					<a class="text-blue-700 font-medium" href="./getting-started"
-						>Don't see your favorite platform? See the many others we support →</a
+						>Interested in using other languages? See the many others we support →</a
 					>
 				</p>
 			</div>