fix: add collapsible function to templates and fix design bugs (#4305)

* Updated colors

* Fixed design for small screens

* Change border radius

* Changed size of text on templates description

* Fix shine effect on small screens

* Fixed icons on starter templates

* Updated mono font to JetBrains

* Updated icon hit area for X

* Added gradient wrapper and x-gradient

* Changed colors and font weights for nav component

* Added zoom on hover of gradient

* Fixed input size

* Fixed all templates to show everything

* Hide scrollbar

* Change text size of card

* Removed title of the categories

* Removed unused currentTab from templatecategory

* Updated position of search icon

* Updated style of inputs

* Updated search clear button

* Fixed bug on small screens

* Added no results query

* Fixed background on get started cards

* Added focus ring on nav component

* Added tab index to search and sidebar buttons

* Added keyboard navigation to templates

* Updated templatesModal to use ShadCN Sidebar

* Implemented collapsible sidebar

* Fix collapsible to work on mobile but be overlaying content

* Added noise to styleUtils

* Updated padding and sizes for mobile

* Updated text size

* Updated font family to inter

* Made get started components fetch title and description from the flow

* Updated description on get started component

* Updated naming of sidebar

* Updated description of start from scratch

* Updated color of selected sidebar item

* Changed text color for sidebar not active items

* changed description sizes

* changed to line clamp

* Reduced gap between icon and category text

* Fixed no results state

* Fixed X icon only appearing on hover

* Fix auto focus issue

* fixed hover color of primary button

* Fixed gradients to use stops if it exists and stop using random gradient

* removed random gradient

* Fixed design of cards in templates

* Updated nav to go through tests

* Fixed focus on input

* [autofix.ci] apply automated fixes

* New color

* fix testes

* Fixed starter projects test

* ✨ (starter-projects.spec.ts): add Page import to test function parameters for better code readability and maintainability
📝 (starter-projects.spec.ts): refactor test to include a function for waiting for template visibility, improving code readability and reducing duplication

---------

Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

docs/css/custom.css

@@ -8,7 +8,7 @@
   --ifm-navbar-link-hover-color: initial;
   --ifm-navbar-padding-vertical: 0;
   --ifm-navbar-item-padding-vertical: 0;
-  --ifm-font-family-base: -apple-system, BlinkMacSystemFont, Inter, Helvetica,
+  --ifm-font-family-base: Inter, -apple-system, BlinkMacSystemFont, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
   --ifm-font-family-monospace: "SFMono-Regular", "Roboto Mono", Consolas,
     "Liberation Mono", Menlo, Courier, monospace;
@@ -118,17 +118,15 @@ body {
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("/logos/gitLight.svg")
-    no-repeat;
+  background: url("/logos/gitLight.svg") no-repeat;
 }
 
-[data-theme='dark'] .header-github-link:before {
+[data-theme="dark"] .header-github-link:before {
   content: "";
   width: 24px;
   height: 24px;
   display: flex;
-  background: url("/logos/gitDark.svg")
-    no-repeat;
+  background: url("/logos/gitDark.svg") no-repeat;
 }
 
 /* Twitter */
@@ -145,7 +143,7 @@ body {
   background-size: contain;
 }
 
-[data-theme='dark'] .header-twitter-link::before {
+[data-theme="dark"] .header-twitter-link::before {
   content: "";
   width: 24px;
   height: 24px;
@@ -164,7 +162,7 @@ body {
   opacity: 0.6;
 }
 
-[data-theme='dark'] .header-discord-link::before {
+[data-theme="dark"] .header-discord-link::before {
   content: "";
   width: 24px;
   height: 24px;
@@ -241,6 +239,8 @@ body {
   min-height: 70px;
 }
 
-.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(:first-child) {
-  margin-top: 0.25rem!important;
-}
+.theme-doc-sidebar-item-category.theme-doc-sidebar-item-category-level-2.menu__list-item:not(
+    :first-child
+  ) {
+  margin-top: 0.25rem !important;
+}