feature: New Readme

README.md

@@ -1,7 +1,82 @@
-# Vue 3 + Vite
+<a name="readme-top"></a>
+<br />
+<div align="center">
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+[![LinkedIn][linkedin-logo]][linkedin-url]
 
-## Recommended IDE Setup
+  <a href="https://github.com/xyvs/pokedex">
+    <img src="images/logo.png" alt="Logo" width="80" height="80">
+  </a>
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+  <h3 align="center">pokedexyvs</h3>
+
+[![Vue][vue-logo]][vue-url]
+[![Tailwind][tailwind-logo]][tailwind-url]
+[![Vercel][vercel-logo]][vercel-url]
+
+
+  <p align="center">
+    And very stylish pokedex web app made with Vue.js and TailwindCSS.
+    <br />
+    <a href="https://pokedex.xyvs.io"><strong>View Demo »</strong></a>
+  </p>
+</div>
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+[![pokedexyvs][product-screenshot]](https://example.com)
+
+This a pokedex web app made with Vue.js, it's using the [PokeApi](https://pokeapi.co/) to get the data, it's inspired this design on [Dribbble](https://dribbble.com/shots/2859891--025-Pikachu) and it's also deployed on [Vercel](https://vercel.com/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+This is an example of how you may give instructions on setting up your project locally.
+To get a local copy up and running follow these simple example steps.
+
+
+### Installation
+
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/xyvs/pokedex
+   ```
+2. Install NPM packages
+   ```sh
+   npm install
+   ```
+4. Run the dev enviroment
+   ```js
+   npm run dev
+   ```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[product-screenshot]: images/screenshot.png
+
+[linkedin-logo]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin
+[linkedin-url]: https://www.linkedin.com/in/jofranmtz/
+
+[vue-logo]: https://img.shields.io/badge/Vue-black?style=for-the-badge&logo=vuedotjs&logoColor=fff
+[vue-url]: https://vuejs.org
+
+[tailwind-logo]: https://img.shields.io/badge/Tailwind-black?style=for-the-badge&logo=tailwindcss&logoColor=fff
+[tailwind-url]: https://tailwindcss.com
+
+[vercel-logo]: https://img.shields.io/badge/Vercel-black?style=for-the-badge&logo=vercel&logoColor=fff
+[vercel-url]: https://vercel.com

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">
+            <div class="text-lg space-y-4 text-center">
-                Sit quis aut ipsum minima pariatur Totam laboriosam totam qui modi a Aliquam tenetur impedit quisquam nemo
+                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>.
-                assumenda repudiandae sed Eligendi facere rem sequi voluptas vel? Fugit laudantium vero officia.
+
+            </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 />