docs: update and add site links (#478)

* docs: update and add site links

* fix typo

README.md

@@ -1,55 +1,122 @@
-<h1 align="center">Hi 👋, we're FrontendCafé </h1>
-<h3 align="center">A community of people interested in technology and computing where we talk about programming languages, web design, infrastructure, we share doubts, we ask and we answer.</h3>
+<h1 align="center">Hi 👋, we're FrontendCafé</h1>
 
-<h3 align="left">Languages and Tools:</h3>
-<p align="left"> <a href="https://nextjs.org/" target="_blank"> <img src="https://cdn.worldvectorlogo.com/logos/nextjs-3.svg" alt="nextjs" width="40" height="40"/> </a> <a href="https://tailwindcss.com/" target="_blank"> <img src="https://www.vectorlogo.zone/logos/tailwindcss/tailwindcss-icon.svg" alt="tailwind" width="40" height="40"/> </a> <a href="https://www.typescriptlang.org/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/typescript/typescript-original.svg" alt="typescript" width="40" height="40"/> </a> </p>
+A community of people interested in technology and computing where we talk about programming languages, web design, infrastructure, we share doubts, we ask and we answer.
 
-<h3 align="left">Getting Started</h3>
+## Project Links
 
-- Install dependencies:
+- Website: [https://frontend.cafe/](https://frontend.cafe/)
+- CMS Dashboard: [https://frontend.cafe/studio](https://frontend.cafe/studio)
+<!-- - Storybook:  -->
 
-```bash
-npm install / yarn install
-```
+## Languages and Tools
 
-- Contact an administrator to request environment variables; if you have been granted access to the vercel project, just run
+<a href="https://www.typescriptlang.org/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/typescript.svg" alt="TypeScript" title='TypeScript' width="40" height="40"/>
+</a>
+<a href="https://react.dev/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/react-2.svg" alt="React" title="React" width="40" height="40"/>
+</a>
+<a href="https://nextjs.org/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/next-js.svg" alt="NextJS" title="NextJS" width="40" height="40"/>
+</a>
+<a href="https://tailwindcss.com/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/tailwindcss.svg" alt="Tailwind CSS" title="Tailwind CSS" width="40" height="40"/>
+</a>
+<a href="https://www.sanity.io/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/sanity.svg" alt="Sanity" title="Sanity" width="40" height="40"/>
+</a>
+<a href="https://storybook.js.org/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/storybook-1.svg" alt="Storybook" title="Storybook" width="40" height="40"/>
+</a>
+
+## Getting Started
+
+These instructions will help you install and run the project locally.
+
+### Prerequisites
+
+Before you run the project, make sure that you have the following tools and software installed on your computer:
+
+- [Git](https://git-scm.com/downloads)
+- [Node.js](https://nodejs.org/en/download/) `20.8.0+`
+- [PNPM](https://pnpm.io/installation) `v8.x`
+- [Vercel CLI](https://vercel.com/docs/cli#installing-vercel-cli)
+
+### Installation
+
+To install the project on your local machine, follow these steps:
+
+1. Clone the repository.
+
+   ```bash
+   git clone https://github.com/hifrontendcafe/website.git
+   ```
 
-```bash
-vercel env pull
-```
+2. Navigate to the project directory.
 
-Tip: Make sure you run it in the project directory!
+   ```bash
+   cd website
+   ```
 
-Once run, you should be asked to `link` the project:
+3. Install project dependencies by running the command:
 
-```bash
-vercel link
-```
+   ```bash
+   pnpm install
+   ```
 
-1. Set up “~/Documents/dev/js/fec/website”?: `y`.
-2. Make sure you choose the `frontendcafe` organization.
-3. Found project “hifrontendcafe/website”: `y`.
+4. Get the enviroment variables from Vercel.
 
-- Run the development server:
+   > [!NOTE]
+   > Contact an administrator to request environment variables; if you already have been granted access to the Vercel's project, just run it.
 
-```bash
-npm run dev / yarn dev
-```
+   ```bash
+   vercel env pull
+   ```
 
-- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+   > [!IMPORTANT]
+   > Make sure you run it in the project directory!
 
-<h3 align="left">Connect with us:</h3>
-<p align="left">
-<a href="https://twitter.com/frontendcafe" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/twitter.svg" alt="frontendcafe" height="30" width="40" /></a>
-<a href="https://www.linkedin.com/company/frontendcafe/" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/linkedin.svg" alt="FrontendCafé " height="30" width="40" /></a>
-<a href="https://discord.gg/frontendcafe" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/[email protected]/icons/discord.svg" alt="https://discord.gg/frontendcafe" height="30" width="40" /></a>
-</p>
+5. Link the local repository with the Vercel project.
+
+   ```bash
+   vercel link --yes -S hifrontendcafe -p website
+   ```
+
+### Running locally
+
+To run the project, follow these steps:
+
+1. Start the development server by executing the command:
+
+   ```bash
+   pnpm run dev
+   ```
+
+2. Open a web browser and navigate to [`http://localhost:3000`](https://localhost:3000/) to view the project's home page.
+
+## Connect with us
+
+<a href="https://twitter.com/frontendcafe" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/twitter-3.svg" alt="FrontendCafé Twitter" height="30" width="30" />
+</a>
+<a href="https://www.linkedin.com/company/frontendcafe/" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/linkedin-icon-2.svg" alt="FrontendCafé LinkedIn" height="30" width="30" />
+</a>
+<a href="https://discord.gg/frontendcafe" target="_blank" style="margin:0px 6px">
+  <img src="https://cdn.worldvectorlogo.com/logos/discord.svg" alt="FrontendCafé Discord" height="30" width="30" />
+</a>
+
+<br/>
+
+<a href="https://twitter.com/frontendcafe" target="_blank" style="margin:0px 6px">
+  <img src="https://img.shields.io/twitter/follow/frontendcafe?logo=twitter&style=for-the-badge" alt="FrontendCafé Twitter" />
+</a>
 
-<p align="left"> <a href="https://twitter.com/frontendcafe" target="blank"><img src="https://img.shields.io/twitter/follow/frontendcafe?logo=twitter&style=for-the-badge" alt="frontendcafe" /></a> </p>
+---
 
-<a href="https://vercel.com/?utm_source=hifrontendcafe&utm_campaign=oss">
-  <img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg" alt="Powered by Vercel" />
+<a href="https://vercel.com/?utm_source=hifrontendcafe&utm_campaign=oss" style="margin:0px 6px" >
+  <img src="https://www.datocms-assets.com/31049/1618983297-powered-by-vercel.svg" alt="Powered by Vercel" title="Powered by Vercel" />
 </a>
-<a href="https://sanity.io">
-  <img src="https://cdn.sanity.io/images/3do82whm/next/51af00784c5addcf63ae7f0c416756acca7e63ac-353x71.svg?w=190&fm=png&dl=sanity-logo.png" alt="Sanity" />
+<a href="https://sanity.io" style="margin:0px 6px" >
+  <img src="https://cdn.sanity.io/images/3do82whm/next/51af00784c5addcf63ae7f0c416756acca7e63ac-353x71.svg?w=190&fm=png&dl=sanity-logo.png" alt="Sanity" title="Sanity" />
 </a>