feat(hero): add upcoming actions and LinkedIn contact CTA

src/components/HeroSection.module.css

@@ -19,7 +19,7 @@
   z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   padding: clamp(1.125rem, 2.5vw, 2rem) var(--layout-page-gutter) 0;
 }
 
@@ -202,17 +202,23 @@
 }
 
 .heroButton {
-  min-width: clamp(5rem, 9vw, 7.5rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: clamp(6.5rem, 10vw, 8.25rem);
   height: clamp(2.5rem, 4.5vw, 3.25rem);
   padding: 0 clamp(1rem, 2vw, 1.75rem);
+  gap: 0.5rem;
   border-width: 2px;
   font-size: clamp(0.8125rem, 1.1vw, 1rem);
 }
 
-.heroButtonOutline {
+.heroButtonUpcoming {
-  border-color: var(--color-blue-600);
+  border-color: var(--border-default);
-  background: transparent;
+  background: color-mix(in srgb, var(--bg-raised) 68%, transparent);
-  color: var(--color-blue-700);
+  color: var(--text-secondary);
+  cursor: default;
+  opacity: 0.78;
 }
 
 .heroButtonPrimary {
@@ -226,10 +232,10 @@
   outline-offset: 3px;
 }
 
-[data-theme="dark"] .heroButtonOutline {
+[data-theme="dark"] .heroButtonUpcoming {
-  border-color: var(--color-blue-white);
+  border-color: var(--border-default);
-  background: transparent;
+  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
-  color: var(--text-primary);
+  color: var(--text-secondary);
 }
 
 [data-theme="dark"] .heroButtonPrimary {
@@ -367,9 +373,8 @@
 
   .actionButtons {
     display: grid;
-    grid-template-columns: repeat(2, clamp(5rem, 9vw, 7.5rem));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-    width: fit-content;
+    width: min(100%, 21rem);
-    max-width: none;
     gap: 0.5rem;
   }
 
@@ -379,9 +384,9 @@
 
   .heroButton {
     min-width: 0;
-    width: auto;
+    width: 100%;
     height: 2.75rem;
-    padding: 0 0.375rem;
+    padding: 0 0.75rem;
     font-size: 0.875rem;
   }
 }
@@ -410,21 +415,11 @@
     color: var(--accent-default);
   }
 
-  .heroButtonOutline:hover {
-    border-color: var(--color-blue-700);
-    background: rgba(255, 255, 255, 0.2);
-  }
-
   .heroButtonPrimary:hover {
     border-color: var(--color-blue-700);
     background: var(--color-blue-700);
   }
 
-  [data-theme="dark"] .heroButtonOutline:hover {
-    border-color: var(--color-blue-100);
-    background: rgba(130, 181, 255, 0.12);
-  }
-
   [data-theme="dark"] .heroButtonPrimary:hover {
     border-color: var(--color-blue-white);
     background: var(--color-blue-white);

src/components/HeroSection.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Image from 'next/image';
-import { Moon, Sun } from 'lucide-react';
+import { BookOpenText, GraduationCap, MessageCircle, Moon, Sun } from 'lucide-react';
 import { useTheme } from '@/context/ThemeContext';
 import styles from './HeroSection.module.css';
 
@@ -58,14 +58,35 @@ export const HeroSection: React.FC = () => {
 
         {/* Action Buttons */}
         <div className={styles.actionButtons}>
-          <a href="#about" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
+          <button
-            About
+            type="button"
-          </a>
+            className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`}
-          <a href="#projects" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
+            aria-label="Blog, coming soon"
-            Work
+            title="Coming soon"
-          </a>
+            disabled
-          <a href="#footer" className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`}>
+          >
-            Contact
+            <BookOpenText size={17} strokeWidth={2} aria-hidden="true" />
+            Blog
+          </button>
+          <button
+            type="button"
+            className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`}
+            aria-label="Courses, coming soon"
+            title="Coming soon"
+            disabled
+          >
+            <GraduationCap size={18} strokeWidth={2} aria-hidden="true" />
+            Courses
+          </button>
+          <a
+            href="https://www.linkedin.com/messaging/compose/?recipient=ACoAAEJsAwMBCv3L9dYcEXWam-l3pLOJ3UspX7w"
+            target="_blank"
+            rel="noreferrer"
+            className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`}
+            aria-label="Get in touch on LinkedIn"
+          >
+            <MessageCircle size={17} strokeWidth={2} aria-hidden="true" />
+            Get in touch
           </a>
         </div>