Simplified the Signal Messenger integration

Made it more subtle and intuitive
Maintained consistency between footer and main contact section
Improved the overall contact section design

public/css/components.css

@@ -114,24 +114,47 @@
     border-radius: var(--border-radius);
     border: 1px solid var(--border-color);
     margin: var(--spacing-xl) 0;
+    text-align: center;
 }
 
 .contact-info:hover {
     border-color: var(--primary);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
     transition: all 0.3s ease;
 }
 
-.contact-info a {
-    color: var(--primary);
-    text-decoration: none;
-    display: block;
-    margin: var(--spacing-sm) 0;
-    transition: opacity var(--transition-speed) ease;
+.contact-info p {
+    margin-bottom: var(--spacing-lg);
+    color: var(--text);
 }
 
-.contact-info a:hover {
-    opacity: 0.8;
+.contact-links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.contact-link {
+    color: var(--text) !important;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--border-radius);
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+}
+
+.contact-link:hover {
+    color: var(--primary) !important;
+    border-color: var(--primary);
+    opacity: 1;
+}
+
+.contact-link i {
+    font-size: 1.2em;
+    color: var(--primary);
 }
 
 /* Quote Styles */