Fixed getting stated page + scaling + analytics for docs. (#18383)

Co-authored-by: MaanavD <maanavdalal@microsoft.com>

_includes/footer_custom.html

@@ -0,0 +1,3 @@
+{%- assign url = page.url -%}
+
+<p class="text-small text-grey-dk-100 mb-0">For documentation questions, please <a href="https://github.com/microsoft/onnxruntime/issues/new?labels=component:documentation&title=[Documentation%20Request]&body=%5BEnter%20feedback%20here%5D%0A%0A---%0A%23%23%23%23%20Document%20Details%0A*%20Title%3A%20{{ page.title | url_encode }}%0A*%20Page%3A%20%5B{{ url | absolute_url | url_encode }}%5D({{ url | absolute_url | url_encode }})%0A*%20Page%20Source%3A%20{{ page.name | url_encode }}" target="_blank">file an issue</a></p>

_includes/header_custom.html

@@ -0,0 +1,32 @@
+<meta property="og:image" content="/images/logos/onnxruntime/ORT_icon_for_light_bg.png" />
+
+<script type="text/javascript" 
+  src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-3.min.js">
+</script>
+
+<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>

src/routes/+page.svelte

@@ -33,10 +33,7 @@
 <Hero />
 <Customers />
 <CodeBlocks />
-<div class="divider px-10" />
-<Saos once={true} animation={'slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<Videos />
-</Saos>
+<Videos />
 <Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
 	<GenerativeAi />
 </Saos>
@@ -47,7 +44,6 @@
 	<Performance />
 </Saos>
 
-<div class="divider px-10" />
 <Saos once={true} animation={'slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
 	<TrainingAndInference />
 </Saos>

src/routes/components/code-blocks.svelte

@@ -158,6 +158,7 @@
 			{/if}
 		</div>
 	</div>
+	<div class="divider px-6" />
 </div>
 
 <style>

src/routes/components/training-and-inference.svelte

@@ -7,6 +7,7 @@
 </script>
 
 <div class="container mx-auto px-10 my-10">
+	<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,

src/routes/getting-started/+page.svelte

@@ -14,7 +14,12 @@
 <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>
-	<Table />
+	<div class="lg:hidden">
+		The installation table is visible on desktop only.
+	</div>
+	<div class="hidden lg:grid">
+		<Table />
+	</div>
 	<p class="pt-4">
 		For more in-depth installation instructions, check out the <a
 			href="https://onnxruntime.ai/docs/tutorials/"
@@ -23,7 +28,7 @@
 	</p>
 </div>
 <div class="container mx-auto px-10 my-10">
-	<div class="grid grid-cols-3">
+	<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
@@ -36,12 +41,12 @@
 				>
 			</div>
 		</div>
-		<img src={githublogo} alt="GitHub Logo" />
+		<img class="hidden lg:grid h-48 mx-auto" src={githublogo} alt="GitHub Logo" />
 	</div>
 </div>
 
 <div class="container mx-auto px-10 my-10">
-	<div class="grid grid-cols-3">
+	<div class="grid grid-cols-2 md:grid-cols-3">
 		<div class="col-span-2">
 			<h1 class="text-4xl">Tutorials</h1>
 			<h1 class="text-2xl pb-2">
@@ -52,8 +57,8 @@
 				>ONNX Runtime Tutorials →</a
 			>
 		</div>
-		<div class="col-span-1">
-			<div class="m-auto">
+		<div class="col-span-1 mx-auto">
+			<div class="m-10">
 				<ImageTutorials widthscale={0.5} heightscale={0.5} />
 			</div>
 		</div>