add contact call-to-action button and improve contact layout

src/pages/contact/contact.css

@@ -67,6 +67,35 @@ h1 {
   text-decoration: none;
 }
 
+.contact-card button.contact-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.72rem 1rem;
+  border: 1px solid rgba(88, 166, 255, 0.45);
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(31, 111, 235, 0.22), rgba(47, 129, 247, 0.08));
+  color: #e6edf3;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 10px 22px rgba(31, 111, 235, 0.14);
+  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
+}
+
+.contact-card button.contact-cta:hover,
+.contact-card button.contact-cta:focus-visible {
+  transform: translateY(-1px);
+  border-color: #58a6ff;
+  background: linear-gradient(135deg, rgba(31, 111, 235, 0.35), rgba(47, 129, 247, 0.16));
+  box-shadow: 0 14px 28px rgba(31, 111, 235, 0.22);
+  outline: none;
+}
+
+.contact-card button.contact-cta:active {
+  transform: translateY(0);
+}
+
 .note .card {
   border-color: rgba(47, 129, 247, 0.45);
   background: linear-gradient(120deg, rgba(31, 111, 235, 0.16), rgba(22, 27, 34, 0.92));
@@ -77,6 +106,23 @@ h1 {
   margin-top: 0.75rem;
 }
 
+.contact-inline {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-top: 0.1rem;
+}
+
+.contact-inline a {
+  word-break: break-word;
+}
+
+.contact-inline .contact-cta {
+  margin-left: auto;
+}
+
 @media (max-width: 760px) {
   .page {
     padding-top: 0.5rem;

src/pages/contact/contact.html

@@ -13,10 +13,15 @@
       @for (channel of channels; track channel.label) {
       <app-card cardClass="contact-card">
         <p class="label">{{ channel.label }}</p>
-        @if (channel.href) {
-        <a [href]="channel.href">{{ channel.value }}</a>
+        @if (channel.href && channel.hrefLabel) {
+          <div class="contact-inline">
+            <a [href]="channel.href">{{ channel.value }}</a>
+            <button class="contact-cta" type="button" (click)="gotoHref(channel.href)">{{channel.hrefLabel}}</button>
+          </div>
+        } @else if (channel.href) {
+          <a [href]="channel.href">{{ channel.value }}</a>
         } @else {
-        <p class="value">{{ channel.value }}</p>
+          <p class="value">{{ channel.value }}</p>
         }
       </app-card>
       }

src/pages/contact/contact.ts

@@ -5,6 +5,7 @@ interface Channel {
   label: string;
   value: string;
   href?: string;
+  hrefLabel?: string;
 }
 
 @Component({
@@ -19,14 +20,19 @@ export class Contact {
       label: 'Email',
       value: 'tikaiz@gmx.at',
       href: 'mailto:tikaiz@gmx.at',
+      hrefLabel: 'Send an email',
     },
     {
       label: 'Location',
-      value: 'Remote / UTC+2',
+      value: 'Remote / UTC+1',
     },
     {
       label: 'Availability',
       value: 'Open to freelance and full-time roles',
     },
   ];
+
+  protected gotoHref(href: string) {
+    window.location.href = href;
+  }
 }