component updates

src/components/CallToAction.astro

@@ -1,32 +1,17 @@
 <div class="container">
   <div class="call-to-action mb-32 mt-24 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24">
     <h2 class="text-center text-3xl md:text-5xl">Contact us today!</h2>
-    <a href="mailto:info@alexsguardian.net" class="text-center text-lg"> Contact Us</a>
+    <a href="mailto:info@alexsguardian.net">
+      <button class=`rounded-md border border-[var(--neutral-800)] py-2 px-4 text-center text-2xl transition-all shadow-sm hover:shadow-lg text-[var(--neutral-900)] hover:text-[var(--neutral-200)] hover:bg-[var(--highlight-blue-400)] hover:border-[var(--neutral-800)] focus:text-white focus:bg-[var(--highlight-blue-400)] focus:border-[var(--neutral-800)] active:border-[var(--neutral-800)] active:text-[var(--neutral-200)] active:bg-[var(--highlight-blue-400)] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` type="button">
+        Contact Us
+      </button>
+    </a>
   </div>
 </div>
 
 <style lang="scss">
   .call-to-action {
     color: var(--neutral-900);
-    background-image: linear-gradient(40deg, var(--primary-100), var(--secondary-200));
-  }
-
-  .call-to-action a:not(button),
-  .call-to-action a:not(button):visited {
-    padding: 1rem;
-    color: var(--neutral-900);
-    font-weight: bold;
-    border: 3px solid var(--neutral-900);
-    border-radius: 3px;
-    text-decoration: none;
-    transition:
-      color 0.15s ease-in-out,
-      background-color 0.15s ease-in-out;
-
-    &:where(:hover, :focus) {
-      color: var(--neutral-100);
-      background-color: var(--neutral-900);
-      text-decoration: underline;
-    }
+    background-image: linear-gradient(40deg, var(--highlight-blue-300) 45%, var(--highlight-purple-200));
   }
 </style>

src/components/Header.astro

@@ -18,20 +18,22 @@ import { Icon } from 'astro-icon/components'
       <a href="/contact/">Contact</a>
     </li>
     -->
+    <li class="submenu-item">
+      <a href="/scams/">Scams</a>
+    </li>
+    <li class="submenu-item">
+      <a href="/about/">About</a>
+    </li>
     <li class="menu-item has-dropdown">
       <button aria-haspopup="true" aria-expanded="false">Extras</button>
       <ul class="dropdown-menu">
-        <li class="submenu-item">
-          <a href="/about/">About</a>
-        </li>
+
         <li class="menu-item">
           <a href="https://blog.alexsguardian.net" title="external link" rel="external noopener noreferrer"
             >Alex's Blog</a
           >
         </li>
-        <li class="submenu-item">
-          <a href="/scams/">Scams</a>
-        </li>
+
         <!-- Add back once the support page is complete.   
         <li class="menu-item">
           <a href="/support/">Support</a>

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
-import { Icon } from 'astro-icon/components'
+import { Icon } from 'astro-icon/components';
 
-const { src = '/hero.webp' } = Astro.props
+const { src = '/hero.webp' } = Astro.props;
 ---
 
 <section class="hero my-24">
@@ -15,9 +15,11 @@ const { src = '/hero.webp' } = Astro.props
           <slot>Transparent IT, No Surprises.</slot>
         </h3>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
-          <a class="button has-icon color-secondary" href="mailto:info@alexsguardian.net">
-            <Icon name="ion:email" />
-            Contact Us
+          <a href="mailto:info@alexsguardian.net" class="!no-underline">
+            <button class=`flex items-center rounded-md bg-[var(--highlight-blue-400)] py-2 px-8 border border-transparent text-center text-lg text-[var(--neutral-200)] transition-all shadow-sm hover:shadow-lg focus:bg-[var(--highlight-blue-500)] focus:shadow-none active:bg-[var(--highlight-blue-500)] hover:bg-[var(--highlight-blue-500)] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none` type="button">
+              <Icon name="ion:email" class="pr-2 h-10 w-10"/>
+              Contact Us         
+            </button>
           </a>
         </div>
       </div>
@@ -29,7 +31,6 @@ const { src = '/hero.webp' } = Astro.props
         decoding="async"
         height="743"
         width="710"
-
       />
     </div>
   </div>
@@ -39,14 +40,14 @@ const { src = '/hero.webp' } = Astro.props
 
 <style lang="scss">
   .text-gradient {
-    background: linear-gradient(315deg, var(--hl-purple) 25%, var(--primary-200));
+    background: linear-gradient(270deg, var(--highlight-purple-400) 25%, var(--highlight-blue-400) 75%);
     background-clip: border-box;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
 
   :global(.darkmode .text-gradient) {
-    background: linear-gradient(315deg, var(--hl-purple) 25%, var(--primary-200));
+    background: linear-gradient(270deg, var(--highlight-purple-300) 25%, var(--highlight-blue-400) 75%);
     background-clip: border-box;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

src/components/Navigation.astro

@@ -291,7 +291,7 @@ import logo from '../assets/img/logo.svg'
         .has-dropdown > button:focus {
           text-decoration: underline;
           text-decoration-thickness: 1px;
-          text-decoration-style: wavy;
+          text-decoration-style: solid;
           text-underline-offset: 7px;
         }