refactor(footer): improve contact actions and restore brand icons

src/components/FooterSection.module.css

@@ -2,7 +2,7 @@
   position: relative;
   width: 100%;
   max-width: var(--layout-frame);
-  height: 30rem;
+  height: 34rem;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -16,7 +16,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 30rem;
+  height: 34rem;
   z-index: 1;
 }
 
@@ -49,7 +49,12 @@
   color: var(--text-secondary);
   font-weight: 500;
   letter-spacing: var(--letter-spacing-eyebrow);
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.emailButton {
+  min-height: 3rem;
+  margin-bottom: 2rem;
 }
 
 .socialRow {
@@ -68,6 +73,8 @@
   transition:
     color var(--motion-duration-fast) ease,
     transform var(--motion-duration-default) var(--motion-ease-out);
+  min-width: 5rem;
+  min-height: 4.75rem;
 }
 
 .socialItem:focus-visible {
@@ -89,9 +96,10 @@
   width: 100%;
   height: 100%;
   fill: currentColor;
+  stroke: none;
 }
 
-.giteaCutout {
+.socialIcon .giteaCutout {
   fill: var(--bg-page);
 }
 
@@ -105,7 +113,7 @@
 @media (max-width: 900px) {
   .footerSection {
     height: auto;
-    min-height: 30rem;
+    min-height: 34rem;
     padding: var(--space-10) var(--layout-page-gutter) var(--space-9);
   }
 
@@ -127,7 +135,7 @@
 
 @media (max-width: 560px) {
   .footerSection {
-    min-height: 35rem;
+    min-height: 38rem;
     padding-top: var(--space-9);
   }
 
@@ -144,6 +152,11 @@
     letter-spacing: 0.08em;
   }
 
+  .emailButton {
+    width: 100%;
+    max-width: 20rem;
+  }
+
   .socialRow {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));

src/components/FooterSection.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import Image from 'next/image';
+import { Mail } from 'lucide-react';
 import { useTheme } from '@/context/ThemeContext';
 import styles from './FooterSection.module.css';
 
@@ -61,42 +62,45 @@ export const FooterSection: React.FC = () => {
           Open to opportunities and interesting projects.
         </p>
 
-        {/* 4 Social / Contact Links */}
+        <a href="mailto:amirhosseinkhalili901@gmail.com" className={`pill-btn pill-btn-primary ${styles.emailButton}`}>
+          <Mail size={19} strokeWidth={2} aria-hidden="true" />
+          Send me an email
+        </a>
+
         <div className={styles.socialRow}>
-          {/* Phone */}
           <a href="tel:+989388263077" className={styles.socialItem} aria-label="Call 09388263077">
             <span className={styles.socialIcon}><PhoneIcon /></span>
             <span className={styles.socialLabel}>09388263077</span>
           </a>
 
-          {/* LinkedIn */}
           <a
             href="https://linkedin.com/in/amiirkhl"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.socialItem}
+            aria-label="LinkedIn profile"
           >
             <span className={styles.socialIcon}><LinkedInIcon /></span>
             <span className={styles.socialLabel}>@amiirkhl</span>
           </a>
 
-          {/* Git / Coffee */}
           <a
             href="https://git.amiirkhl.ir"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.socialItem}
+            aria-label="Personal Git server"
           >
             <span className={styles.socialIcon}><GiteaIcon /></span>
             <span className={styles.socialLabel}>git.amiirkhl.ir</span>
           </a>
 
-          {/* Telegram */}
           <a
             href="https://t.me/amiirkhl"
             target="_blank"
             rel="noopener noreferrer"
             className={styles.socialItem}
+            aria-label="Telegram profile"
           >
             <span className={styles.socialIcon}><TelegramIcon /></span>
             <span className={styles.socialLabel}>@amiirkhl</span>