fix(docs): book component

Fix snaps

Author: GuzmanPI

apps/scully-docs/src/app/components/book/book.component.html

@@ -1,8 +1,8 @@
-<div>
+<a [href]="href">
   <img src="assets/book.png" alt="Book icon" />
 
   <div class="card-content">
     <h3>{{ header }}</h3>
     <p>{{ text }}</p>
   </div>
-</div>
+</a>

apps/scully-docs/src/app/components/book/book.component.ts

@@ -8,6 +8,7 @@ import { Component, Input, OnInit } from '@angular/core';
 export class BookComponent implements OnInit {
   @Input() header: string;
   @Input() text: string;
+  @Input() href: string;
 
   constructor() {}
 

apps/scully-docs/src/app/landing/landing.component.css

@@ -145,6 +145,7 @@ main {
   .guide-2 {
     grid-column-start: inherit;
     grid-column-end: inherit;
+    cursor: pointer;
   }
 }
 

apps/scully-docs/src/app/landing/landing.component.html

@@ -54,7 +54,7 @@ <h3>FEATURES</h3>
       [header]="'Runtime Tooling'"
       text="
       Scully gives developers the necessary tools
-      to Jamstackify any Angular project, 
+      to Jamstackify any Angular project,
       including fine-grained control where needed.
       "
       [iconUrl]="'assets/machine-learning.png'"
@@ -109,15 +109,17 @@ <h3>TOOLS & RESOURCES</h3>
 </div>
 
 <div class="container-tools">
-  <div class="guide-1" [routerLink]="'/docs/getting-started'">
+  <div class="guide-1">
     <app-book
+      [href]="'docs/getting-started/'"
       [header]="'Guides'"
       [text]="'Easy step by step guides to help get you started.'"
     >
     </app-book>
   </div>
-  <div class="guide-2" [routerLink]="'/docs/blog'">
+  <div class="guide-2">
     <app-book
+      [href]="'docs/blog/'"
       [header]="'Create a Blog'"
       [text]="
         'Easy step by step to create your own blog in less than 5 minutes.'

apps/scully-docs/src/styles.css

@@ -203,7 +203,7 @@ nav > app-button > a.router-link-active:active {
 }
 
 /* BOOKS */
-app-book > div {
+app-book > a {
   width: 90%;
   margin: auto;
   min-height: 160px;
@@ -218,21 +218,22 @@ app-book > div {
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  text-decoration: none;
 }
 
-app-book > div > img {
+app-book > a > img {
   height: 80px;
   margin: 40px;
 }
 
-app-book > div > .card-content > h3 {
+app-book > a > .card-content > h3 {
   color: var(--scully-green);
   margin-bottom: 0;
   margin-top: 5px;
   text-align: left;
 }
 
-app-book > div > .card-content > p {
+app-book > a > .card-content > p {
   text-align: left;
   line-height: 2;
   margin-bottom: 0;