feature: New Readme

src/components/About.vue

@@ -3,15 +3,45 @@ import Footer from './Footer.vue'
 </script>
 
 <template>
-    <div class="w-screen h-screen bg-neutral-950 text-neutral-50 flex flex-col items-center justify-between p-4 lg:p-12">
+    <div class="w-screen h-screen bg-zinc-900 text-slate-100 flex flex-col items-center justify-between p-4 lg:p-12">
         <div></div>
-        <div class="space-y-8 text-center lg:w-[50rem]">
+        <div class="text-center lg:w-[50rem] flex flex-col gap-8 items-center">
+
             <div class="text-5xl font-semibold">
-                About
+                pokedex
             </div>
-            <div class="text-lg">
-                Sit quis aut ipsum minima pariatur Totam laboriosam totam qui modi a Aliquam tenetur impedit quisquam nemo
-                assumenda repudiandae sed Eligendi facere rem sequi voluptas vel? Fugit laudantium vero officia.
+            <div class="text-lg space-y-4 text-center">
+                A pokedex web app build with Vue 3 and TailwindCSS and using the <a href="https://pokeapi.co/" target="_blank" class="text-primary-500 hover:underline">PokeAPI</a>.
+
+            </div>
+
+            <div class="space-y-4">
+
+                <p>Here are a couple of popular pokemons:</p>
+
+                <ul class="flex items-center gap-2 text-sm">
+
+                    <li class="bg-teal-800 hover:bg-teal-700 text-teal-100 rounded px-2 py-1">
+                        <a href="/pokemon/1">Bulbasaur</a>
+                    </li>
+
+                    <li class="bg-amber-700 hover:bg-amber-600 text-amber-100 rounded px-2 py-1">
+                        <a href="/pokemon/4">Charmander</a>
+                    </li>
+                    
+                    <li class="bg-cyan-700 hover:bg-cyan-600 text-cyan-100 rounded px-2 py-1">
+                        <a href="/pokemon/7">Squirtle</a> 
+                    </li>
+
+                    <li class="bg-yellow-600 hover:bg-yellow-500 text-yellow-100 rounded px-2 py-1">
+                        <a href="/pokemon/25">Pikachu</a>
+                    </li>
+
+                    <li class="bg-yellow-800 hover:bg-yellow-700 text-yellow-100 rounded px-2 py-1">
+                        <a href="/pokemon/133">Eevee</a>
+                    </li>
+
+                </ul>
             </div>
         </div>
         <Footer />