UI Components; layout

src/pages/index.astro

@@ -34,11 +34,6 @@ import Footer from "../components/Footer.astro";
           title="Github"
           body="See my public projects over at Github. ❤️"
         />
-        <!--Card
-          href="/showcase"
-          title="Showcase"
-          body="Try out some components I made recently."
-        /-->
         <Card
           href="/social"
           title="Social"
@@ -46,7 +41,7 @@ import Footer from "../components/Footer.astro";
         />
         <Card
           href="/showcase"
-          title="Showcase"
+          title="UI Components"
           body="See demos of opensource components I created."
         />
       </ul>

src/pages/showcase/astro-github-stats.astro

@@ -11,18 +11,6 @@ import GithubStats from "astro-github-stats";
     <h1>Astro GitHub Stats</h1>
     <p>Embed GitHub stats on your Astro page</p>
 
-    <h3>Account Stats</h3>
-    <GithubStats username="ayoayco" />
-
-    <h3>Account Top Languages</h3>
-    <GithubStats username="ayoayco" topLanguages={true} />
-
-    <h3>Repo card</h3>
-    <GithubStats username="withastro" repo="astro" />
-
-    <h3>Account Stats with Icons</h3>
-    <GithubStats username="ayoayco" showIcons={true} />
-
     <h3>Links</h3>
     <ol>
       <li>
@@ -37,6 +25,18 @@ import GithubStats from "astro-github-stats";
       </li>
     </ol>
 
+    <h3>Account Stats</h3>
+    <GithubStats username="ayoayco" />
+
+    <h3>Account Top Languages</h3>
+    <GithubStats username="ayoayco" topLanguages={true} />
+
+    <h3>Repo card</h3>
+    <GithubStats username="withastro" repo="astro" />
+
+    <h3>Account Stats with Icons</h3>
+    <GithubStats username="ayoayco" showIcons={true} />
+
     <Footer />
   </main>
 </Layout>

src/pages/showcase/astro-reactive-form.astro

@@ -61,12 +61,6 @@ const characteristicsForm: FormGroup = new FormGroup(
     <h1>Astro Reactive Form </h1>
     <p>Generate a dynamic form based on your data, and modify programatically.</p>
 
-    <h3>Simple single form group</h3>
-    <Form formGroups={simpleForm} />
-
-    <h3>Multiple Form Groups</h3>
-    <Form formGroups={[nameForm, characteristicsForm]} />
-
     <h3>Links</h3>
     <ol>
       <li>
@@ -80,6 +74,14 @@ const characteristicsForm: FormGroup = new FormGroup(
         >
       </li>
     </ol>
+
+    <h3>Simple single form group</h3>
+    <Form formGroups={simpleForm} />
+
+    <h3>Multiple Form Groups</h3>
+    <Form formGroups={[nameForm, characteristicsForm]} />
+
+
     <Footer />
   </main>
 </Layout>

src/pages/showcase/index.astro

@@ -8,7 +8,7 @@ import Back from "../../components/Back.astro";
 <Layout title="Ayo Ayco | Showcase">
   <main>
     <Back url="/" />
-    <h1>Showcase <span class="text-gradient">Components</span></h1>
+    <h1>UI <span class="text-gradient">Components</span></h1>
     <ul role="list">
       <Card
         href="/showcase/astro-reactive-form"