fix: External links in docs, and link to CTA component

Author: Lissy93

src/app/components/home-things/cta/cta.component.ts

@@ -16,25 +16,33 @@ import { RouterModule } from '@angular/router';
         Alternatively, check out our GitHub repo to run on your own infrastructure.
       </p>
       <div class="flex justify-center sm:justify-end w-full flex-wrap gap-3 my-3">
+        <!-- View on GitHub GitHub -->
         <a href="https://github.com/lissy93/domain-locker" target="_blank" rel="noopener noreferrer">
-          <p-button 
-            label="View on GitHub" 
-            severity="secondary" 
-            icon="pi pi-github" 
-            class="min-w-48" 
-            styleClass="w-full" 
+          <p-button
+            label="View on GitHub"
+            severity="secondary"
+            icon="pi pi-github"
+            class="min-w-48"
+            styleClass="w-full"
           ></p-button>
         </a>
-        <a [href]=" isDemo ? 'https://domain-locker.com/login?newUser=true' : '#'">
+        <!-- Get Started -->
+        <a *ngIf="isDemo" href="https://domain-locker.com/login?newUser=true">
           <p-button
-            routerLink="/login"
-            [queryParams]="{ newUser: 'true' }"
-            label="Get Started" 
-            class="min-w-48" 
-            icon="pi pi-arrow-circle-right" 
-            styleClass="w-full" 
-          ></p-button>
+            label="Get Started"
+            class="min-w-48"
+            icon="pi pi-arrow-circle-right"
+            styleClass="w-full"
+          />
         </a>
+        <p-button
+          routerLink="/login"
+          [queryParams]="{ newUser: 'true' }"
+          label="Get Started"
+          class="min-w-48"
+          icon="pi pi-arrow-circle-right"
+          styleClass="w-full"
+        />
       </div>
     </div>
   `,

src/app/pages/about/[slug].page.html

@@ -4,9 +4,13 @@
   <h2>{{ linksTitle }}</h2>
   <ul class="pl-4">
     <li *ngFor="let link of links">
-      <a [routerLink]="link.link" class="text-primary font-semibold no-underline">{{ link.title }}</a>
+      <a *ngIf="link.link" [routerLink]="link.link" class="text-primary font-semibold no-underline">
+        {{ link.title }}
+      </a>
+      <a *ngIf="link.href" [href]="link.href" class="text-primary font-semibold no-underline">
+        {{ link.title }}
+      </a>
       @if (link.description) { - <span class="opacity-70 italic">{{ link.description }}</span> }
-      
     </li>
   </ul>
 </section>