rearrange the intro some (#3383)

* rearrange the intro some

* minimalist

* add place to add a "section"

* vale

astro/src/content/quickstarts/_landing-preamble.md

@@ -0,0 +1,14 @@
+---
+---
+Learn how you would use FusionAuth to add authentication and authorization to an application in the framework or language of your choice in 15 minutes or less.
+
+Each quickstart includes a complete runnable application and a shell application you can build out by following the step-by-step integration instructions. Application examples include: [traditional web applications](#web-application), [single-page applications](#spa), [mobile applications](#mobile-app), and [APIs protected with access tokens](#api).
+
+These quickstarts help you rapidly evaluate FusionAuth and see how an integration works, rather than serve as a blueprint for integrating FusionAuth into your current system. For that, see the [Getting Started](/docs/get-started/) documentation.
+
+You'll need the following to work through any quickstarts.
+
+- Git, for cloning the example repository
+- Docker, to run FusionAuth and its dependencies
+- An editor, to update files
+- The language, platform or framework; for example, Xcode to run the iOS quickstart or Java for the Spring example

astro/src/pages/docs/quickstarts/index.astro

@@ -1,20 +1,17 @@
 ---
 import Layout from "../../../layouts/Quickstart.astro";
 import Section from "../../../components/quickstarts/QuickstartSection.astro"
+import Preamble from "../../../content/quickstarts/_landing-preamble.md";
 import { quickstartSections } from './quickstart-sections';
----
 
-<Layout frontmatter={{disableTOC: true}} title="Quickstarts" description="Explore step-by-step Quickstart guides from FusionAuth to seamlessly integrate authentication into your application. Start building secure and scalable solutions in minutes." >
-    <div class="block group rounded-lg">
-        <div class="flex object-fill justify-between">
-            <div class="flex flex-col justify-center">
-                <h1 class="mb-0 font-extrabold text-3xl sm:leading-tight md:text-4xl lg:text-5xl">Quickstarts</h1>
-                <p class="font-normal text-s">Step-by-step guides to quickly integrate FusionAuth into your application.</p>
-            </div>
-            <img class="ml-50 my-0 h-28 lg:h-52 self-end" src="/img/icons/quickstart.svg" alt="quickstart">
-        </div>
+const image = "/img/icons/quickstart.svg";
+
+const title = 'Quickstarts';
+const section = ''; // Change this to "Quickstarts" if you want to give the index page a different title;
+---
 
-    </div>
+<Layout frontmatter={{disableTOC: true}} {section} icon={image} darkIcon={image} {title} description="Explore step-by-step quickstart guides from FusionAuth to seamlessly integrate authentication into your application." >
+  <Preamble/>
   { quickstartSections && quickstartSections.map(section =>
       <div class="mb-7">
           <Section title={section.title} icon={section.icon} desc={section.desc} anchorTag={section.anchorTag} quickstarts={section.articles}/>