feat: align hero styling with portfolio design

Refine hero controls, buttons, contact icons, and avatar treatment across light and dark themes.

src/components/HeroSection.module.css

@@ -6,11 +6,13 @@
 }
 
 .topBar {
-  position: relative;
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 2;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 36px 60px 0 60px;
+  justify-content: space-between;
+  padding: 72px 60px 0;
 }
 
 .iconButton {
@@ -19,32 +21,40 @@
   justify-content: center;
   width: var(--size-icon-button);
   height: var(--size-icon-button);
-  border-radius: 50%;
+  padding: 0;
-  background: rgba(255, 255, 255, 0.4);
+  border: 0;
-  backdrop-filter: blur(10px);
+  background: transparent;
-  border: 1px solid var(--border-default);
+  color: var(--color-blue-700);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.2s ease, transform 0.2s ease;
-  color: var(--text-primary);
 }
 
 .iconButton:hover {
-  background: rgba(255, 255, 255, 0.7);
+  color: var(--color-blue-500);
-  transform: scale(1.05);
+  transform: translateY(-1px);
+}
+
+.iconButton:focus-visible {
+  border-radius: var(--radius-sm);
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 4px;
 }
 
 [data-theme="dark"] .iconButton {
-  background: rgba(9, 28, 63, 0.6);
-  border-color: var(--border-default);
   color: var(--text-primary);
 }
 
 [data-theme="dark"] .iconButton:hover {
-  background: rgba(16, 63, 127, 0.8);
+  color: var(--accent-default);
 }
 
-.controlIcon {
+.controlIcon,
-  color: var(--text-primary);
+.themeIcon {
+  color: currentColor;
+}
+
+.themeIcon {
+  fill: currentColor;
 }
 
 .heroContent {
@@ -52,89 +62,139 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-top: 74px;
   text-align: center;
-  padding-top: 10px;
 }
 
 .avatarWrapper {
-  margin-bottom: 24px;
+  margin-bottom: 26px;
 }
 
 .avatarRingOuter {
-  padding: 4px;
-  border-radius: 50%;
-  border: 3px solid var(--color-blue-700);
-  background: transparent;
   display: inline-block;
+  padding: 6px;
+  border: 3px solid var(--color-blue-700);
+  border-radius: 50%;
+  background: transparent;
   box-shadow: 0 8px 24px var(--shadow-color);
 }
 
 [data-theme="dark"] .avatarRingOuter {
-  border-color: var(--color-blue-300);
+  border-color: var(--color-blue-white);
 }
 
 .avatarContainer {
-  width: 192px;
-  height: 192px;
-  border-radius: 50%;
-  overflow: hidden;
   position: relative;
-  border: 2px solid #ffffff;
+  width: 208px;
+  height: 208px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 50%;
 }
 
 .avatarImg {
-  object-fit: cover;
   width: 100%;
   height: 100%;
+  object-fit: cover;
 }
 
 .heroTitle {
+  margin-bottom: 14px;
+  color: var(--text-primary);
   font-size: var(--font-size-display-hero);
   line-height: var(--line-height-display-hero);
-  color: var(--text-primary);
+  text-shadow: none;
-  margin-bottom: 12px;
-  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .heroSubtitle {
+  margin-bottom: 40px;
+  color: var(--text-primary);
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--text-primary);
-  margin-bottom: 32px;
-  opacity: 0.9;
 }
 
 .actionButtons {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 20px;
-  margin-bottom: 36px;
+  margin-bottom: 34px;
 }
 
-.actionButtons a {
+.heroButton {
-  min-width: 110px;
+  width: 176px;
+  height: 56px;
+  padding: 0 28px;
+  border-width: 3px;
+  font-size: var(--font-size-body-default);
+}
+
+.heroButtonOutline {
+  border-color: var(--color-blue-600);
+  background: transparent;
+  color: var(--color-blue-700);
+  backdrop-filter: none;
+}
+
+.heroButtonOutline:hover {
+  border-color: var(--color-blue-700);
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.heroButtonPrimary {
+  border-color: var(--color-blue-600);
+  background: var(--color-blue-600);
+  color: var(--color-blue-white);
+}
+
+.heroButtonPrimary:hover {
+  border-color: var(--color-blue-700);
+  background: var(--color-blue-700);
+}
+
+.heroButton:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 3px;
+}
+
+[data-theme="dark"] .heroButtonOutline {
+  border-color: var(--color-blue-white);
+  background: transparent;
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .heroButtonOutline:hover {
+  border-color: var(--color-blue-100);
+  background: rgba(130, 181, 255, 0.12);
+}
+
+[data-theme="dark"] .heroButtonPrimary {
+  border-color: var(--color-blue-white);
+  background: var(--color-blue-100);
+  color: var(--color-blue-950);
+}
+
+[data-theme="dark"] .heroButtonPrimary:hover {
+  border-color: var(--color-blue-white);
+  background: var(--color-blue-white);
 }
 
 .contactBar {
   display: inline-flex;
   align-items: center;
-  gap: 20px;
+  gap: 16px;
-  padding: 10px 24px;
+  padding: 0;
-  border-radius: var(--radius-pill);
+  border: 0;
-  background: rgba(255, 255, 255, 0.4);
+  background: transparent;
-  backdrop-filter: blur(12px);
+  color: var(--color-blue-700);
-  border: 1px solid var(--border-default);
   font-size: var(--font-size-body-small);
-  line-height: var(--line-height-body-small);
   font-weight: 500;
-  color: var(--text-primary);
+  line-height: var(--line-height-body-small);
 }
 
 [data-theme="dark"] .contactBar {
-  background: rgba(9, 28, 63, 0.6);
+  color: var(--text-primary);
-  border-color: var(--border-default);
 }
 
 .contactItem {
@@ -146,15 +206,27 @@
 }
 
 .contactItem:hover {
-  opacity: 0.8;
+  opacity: 0.75;
+}
+
+.contactItem:focus-visible {
+  border-radius: 2px;
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 4px;
 }
 
 .contactIcon {
-  color: var(--accent-default);
+  flex: 0 0 auto;
+  color: currentColor;
+}
+
+.filledIcon {
+  fill: currentColor;
 }
 
 .contactDivider {
   width: 1px;
-  height: 16px;
+  height: 22px;
-  background-color: var(--border-default);
+  background: var(--color-blue-500);
+  opacity: 0.7;
 }

src/components/HeroSection.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Image from 'next/image';
-import { Moon, Sun, Languages, Mail, Phone, MapPin } from 'lucide-react';
+import { Moon, Sun, Languages, Phone } from 'lucide-react';
 import { useTheme } from '@/context/ThemeContext';
 import styles from './HeroSection.module.css';
 
@@ -20,9 +20,9 @@ export const HeroSection: React.FC = () => {
           title={`Switch to ${theme === 'light' ? 'Dark' : 'Light'} Mode`}
         >
           {theme === 'light' ? (
-            <Moon size={20} className={styles.controlIcon} />
+            <Moon size={28} strokeWidth={1.8} className={styles.themeIcon} />
           ) : (
-            <Sun size={20} className={styles.controlIcon} />
+            <Sun size={28} strokeWidth={1.8} className={styles.controlIcon} />
           )}
         </button>
 
@@ -31,7 +31,7 @@ export const HeroSection: React.FC = () => {
           aria-label="Switch Language"
           title="Farsi version coming soon"
         >
-          <Languages size={20} className={styles.controlIcon} />
+          <Languages size={28} strokeWidth={2} className={styles.controlIcon} />
         </button>
       </div>
 
@@ -64,13 +64,13 @@ export const HeroSection: React.FC = () => {
 
         {/* Action Buttons */}
         <div className={styles.actionButtons}>
-          <a href="#about" className="pill-btn pill-btn-outline">
+          <a href="#about" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
             About
           </a>
-          <a href="#projects" className="pill-btn pill-btn-outline">
+          <a href="#projects" className={`pill-btn ${styles.heroButton} ${styles.heroButtonOutline}`}>
             Work
           </a>
-          <a href="#footer" className="pill-btn pill-btn-primary">
+          <a href="#footer" className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`}>
             Contact
           </a>
         </div>
@@ -78,21 +78,45 @@ export const HeroSection: React.FC = () => {
         {/* Contact Info Strip */}
         <div className={styles.contactBar}>
           <a href="mailto:amirhosseinkhalili901@gmail.com" className={styles.contactItem}>
-            <Mail size={16} className={styles.contactIcon} />
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              className={styles.contactIcon}
+            >
+              <path
+                fill="currentColor"
+                d="M3 5h3l6 5 6-5h3v14h-3V9l-6 5-6-5v10H3V5Z"
+              />
+            </svg>
             <span>amirhosseinkhalili901@gmail.com</span>
           </a>
 
           <div className={styles.contactDivider} />
 
           <a href="tel:+989388263077" className={styles.contactItem}>
-            <Phone size={16} className={styles.contactIcon} />
+            <Phone size={20} strokeWidth={1.8} className={`${styles.contactIcon} ${styles.filledIcon}`} />
             <span>+98 9388263077</span>
           </a>
 
           <div className={styles.contactDivider} />
 
           <div className={styles.contactItem}>
-            <MapPin size={16} className={styles.contactIcon} />
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+              className={styles.contactIcon}
+            >
+              <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
+                clipRule="evenodd"
+              />
+            </svg>
             <span>Karaj, Alborz, Iran</span>
           </div>
         </div>