`Live Site`

The LPIS template will reproduce the functioning of Figma variants. Information such as components texts and images will be as easy to populate using Astro props. All of them will use common structures seen in the internet with small subtlety to the rest to make it as appealing.

In general, fundamental criteria of excellence when creating a website need to be present, such as responsiveness, performance and legibility, as well as great user experience and SEO.

`Road Map`

<aside> <img src="/icons/checkmark_green.svg" alt="/icons/checkmark_green.svg" width="40px" /> Global Styling With CSS

Utilize global styling with tailwind to overwrite default styling in all pages text according to Figma.

Use a proper and justifiable reset to all CSS within global styling.

</aside>

<aside> <img src="/icons/checkmark_green.svg" alt="/icons/checkmark_green.svg" width="40px" /> Local Variables From Figma To The Project

Use color variables, spacing's, fonts and other tokens from Figma variables in tailwind to have easy access to all colors in the design system.

</aside>

<aside> <img src="/icons/checkmark_green.svg" alt="/icons/checkmark_green.svg" width="40px" /> Variant System With Props

Prop drilling inside all components so as to source unique images to each used component.

</aside>

<aside> <img src="/icons/light-bulb_yellow.svg" alt="/icons/light-bulb_yellow.svg" width="40px" /> ViewTransitions

View transitions on all pages.

</aside>

<aside> <img src="/icons/light-bulb_yellow.svg" alt="/icons/light-bulb_yellow.svg" width="40px" /> Translations

Have the site change between portuguese and english.

</aside>

`Languages And Technologies`

<aside> <img src="/icons/code_gray.svg" alt="/icons/code_gray.svg" width="40px" /> Stack

https://github.com/ThiagoThalisson/LPISTemplate

</aside>