fix: add contact and social icons

tests/functional/tests/portal.spec.ts

@@ -60,6 +60,8 @@ test("provides usable contact actions", async ({ page }) => {
     "https://facebook.com/",
   );
   await expect(page.locator(".social-links .social-icon")).toHaveCount(2);
+  await expect(page.locator(".contact-actions .contact-icon")).toHaveCount(3);
+  await expect(page.locator(".contact-info .contact-icon")).toHaveCount(1);
 });
 
 test("supports mobile navigation without horizontal overflow", async ({ page }) => {

wordpress/theme/azionelab/front-page.php

@@ -187,7 +187,10 @@ $social_links = array_values(
                 <p class="eyebrow">Parliamone</p>
                 <h2 id="contacts-title">Vieni a conoscerci</h2>
                 <p class="lead">Non serve esperienza: basta la curiosità di incontrare il teatro e il gruppo.</p>
+                <div class="contact-info">
+                    <?php echo azionelab_contact_icon( 'address' ); ?>
                     <p><strong>Dove</strong><br><?php echo esc_html( azionelab_mod( 'contact_address' ) ); ?></p>
+                </div>
                 <?php if ( $social_links ) : ?>
                     <div class="social-promo">
                         <p class="social-promo-title">Seguici sui social</p>
@@ -203,9 +206,9 @@ $social_links = array_values(
                 <?php endif; ?>
             </div>
             <div class="contact-actions">
-                <a class="contact-action" href="mailto:<?php echo esc_attr( sanitize_email( azionelab_mod( 'contact_email' ) ) ); ?>"><span>Scrivi una mail</span><strong><?php echo esc_html( azionelab_mod( 'contact_email' ) ); ?></strong></a>
+                <a class="contact-action" href="mailto:<?php echo esc_attr( sanitize_email( azionelab_mod( 'contact_email' ) ) ); ?>"><?php echo azionelab_contact_icon( 'email' ); ?><span>Scrivi una mail</span><strong><?php echo esc_html( azionelab_mod( 'contact_email' ) ); ?></strong></a>
-                <a class="contact-action" href="tel:<?php echo esc_attr( azionelab_phone_href( azionelab_mod( 'contact_phone' ) ) ); ?>"><span>Chiama</span><strong><?php echo esc_html( azionelab_mod( 'contact_phone' ) ); ?></strong></a>
+                <a class="contact-action" href="tel:<?php echo esc_attr( azionelab_phone_href( azionelab_mod( 'contact_phone' ) ) ); ?>"><?php echo azionelab_contact_icon( 'phone' ); ?><span>Chiama</span><strong><?php echo esc_html( azionelab_mod( 'contact_phone' ) ); ?></strong></a>
-                <a class="contact-action" href="https://wa.me/<?php echo esc_attr( azionelab_whatsapp_href( azionelab_mod( 'contact_whatsapp' ) ) ); ?>" rel="noopener noreferrer"><span>WhatsApp</span><strong><?php echo esc_html( azionelab_mod( 'contact_whatsapp' ) ); ?></strong></a>
+                <a class="contact-action" href="https://wa.me/<?php echo esc_attr( azionelab_whatsapp_href( azionelab_mod( 'contact_whatsapp' ) ) ); ?>" rel="noopener noreferrer"><?php echo azionelab_contact_icon( 'whatsapp' ); ?><span>WhatsApp</span><strong><?php echo esc_html( azionelab_mod( 'contact_whatsapp' ) ); ?></strong></a>
             </div>
         </div>
     </section>

wordpress/theme/azionelab/functions.php

@@ -79,11 +79,31 @@ function azionelab_whatsapp_href( string $number ): string {
 
 function azionelab_social_icon( string $network ): string {
     if ( 'instagram' === $network ) {
-        return '<svg class="social-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4.5" y="4.5" width="15" height="15" rx="4.2" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="12" r="3.5" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="16.8" cy="7.2" r="1.1" fill="currentColor"/></svg>';
+        return '<svg class="social-icon social-icon-instagram" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><defs><linearGradient id="azl-instagram-gradient" x1="3" y1="21" x2="21" y2="3" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#feda75"/><stop offset="0.28" stop-color="#fa7e1e"/><stop offset="0.55" stop-color="#d62976"/><stop offset="0.78" stop-color="#962fbf"/><stop offset="1" stop-color="#4f5bd5"/></linearGradient></defs><rect x="3.6" y="3.6" width="16.8" height="16.8" rx="5.1" fill="url(#azl-instagram-gradient)"/><circle cx="12" cy="12" r="4.1" fill="none" stroke="#fff" stroke-width="1.9"/><circle cx="16.8" cy="7.35" r="1.15" fill="#fff"/></svg>';
     }
 
     if ( 'facebook' === $network ) {
-        return '<svg class="social-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M14.2 8.4h2.3V5.1c-.4-.1-1.7-.2-3.1-.2-3.1 0-5.1 1.8-5.1 5.1v2.8H5v3.7h3.3V24h4.1v-7.5h3.3l.5-3.7h-3.8v-2.4c0-1.1.3-2 1.8-2Z"/></svg>';
+        return '<svg class="social-icon social-icon-facebook" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="2.5" y="2.5" width="19" height="19" rx="4.5" fill="#1877f2"/><path fill="#fff" d="M13.45 21.5v-7.35h2.48l.37-2.88h-2.85V9.43c0-.83.23-1.4 1.43-1.4h1.52V5.46c-.26-.04-1.17-.12-2.22-.12-2.2 0-3.7 1.34-3.7 3.8v2.13H8v2.88h2.48v7.35h2.97Z"/></svg>';
+    }
+
+    return '';
+}
+
+function azionelab_contact_icon( string $type ): string {
+    if ( 'email' === $type ) {
+        return '<svg class="contact-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="14" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="m4.5 7 7.5 6 7.5-6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></svg>';
+    }
+
+    if ( 'phone' === $type ) {
+        return '<svg class="contact-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8.1 4.2 10 8.6l-2 1.5c1.2 2.4 3.1 4.3 5.6 5.7l1.6-2 4.5 1.9c.4.2.7.6.6 1.1l-.6 3c-.1.6-.7 1-1.3.9C10.5 19.9 4.2 13.6 3.4 5.7c-.1-.6.3-1.2.9-1.3l3-.6c.4-.1.8.1 1 .4Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/></svg>';
+    }
+
+    if ( 'whatsapp' === $type ) {
+        return '<svg class="contact-icon contact-icon-whatsapp" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4.5 20.2 5.7 16A8.1 8.1 0 1 1 9 19.2l-4.5 1Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.8"/><path d="M9.2 8.4c.2-.4.4-.4.7-.4h.5c.2 0 .4.1.5.4l.7 1.6c.1.3 0 .5-.2.7l-.4.5c.7 1.2 1.6 2.1 2.9 2.8l.6-.7c.2-.2.4-.3.7-.2l1.6.8c.3.1.4.3.4.6v.5c0 .4-.2.7-.6.9-.5.3-1.3.4-2.3.1-2.8-.8-5.3-3.2-6.1-6.1-.3-1-.1-1.8.4-2.1Z" fill="currentColor"/></svg>';
+    }
+
+    if ( 'address' === $type ) {
+        return '<svg class="contact-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 21s6.2-5.5 6.2-11.1A6.2 6.2 0 0 0 5.8 9.9C5.8 15.5 12 21 12 21Z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.8"/><circle cx="12" cy="9.9" r="2.2" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>';
     }
 
     return '';

wordpress/theme/azionelab/style.css

@@ -182,9 +182,14 @@ blockquote { margin: 2rem 0 0; padding-left: 1.5rem; border-left: 3px solid var(
 .contacts .eyebrow { color: var(--color-primary-soft); }
 .contacts .lead { color: rgba(255, 248, 239, 0.8); }
 .contact-grid { display: grid; gap: 2.5rem; }
+.contact-info { display: grid; position: relative; margin-top: 1.6rem; padding-left: 3rem; }
+.contact-info p { margin: 0; }
+.contact-info .contact-icon { top: 0.1rem; left: 0; color: var(--color-sand); }
 .contact-actions { display: grid; gap: 0.8rem; }
-.contact-action { display: grid; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 0.9rem; text-decoration: none; }
+.contact-action { display: grid; position: relative; padding: 1rem 1.1rem 1rem 4rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 0.9rem; text-decoration: none; }
 .contact-action span { color: var(--color-sand); font-size: 0.78rem; text-transform: uppercase; }
+.contact-icon { position: absolute; top: 1rem; left: 1.1rem; width: 2rem; height: 2rem; color: var(--color-primary-soft); }
+.contact-icon-whatsapp { color: #25d366; }
 .social-promo { margin-top: 1.6rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 248, 239, 0.22); }
 .social-promo-title { margin-bottom: 0.8rem; color: var(--color-sand); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; }
 .social-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@@ -192,9 +197,7 @@ blockquote { margin: 2rem 0 0; padding-left: 1.5rem; border-left: 3px solid var(
 .social-link-instagram span { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #8134af 100%); background-clip: text; color: transparent; font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.55rem; font-weight: 700; }
 .social-link-facebook span { color: #1877f2; font-family: var(--font-sans); font-size: 1.42rem; font-weight: 850; letter-spacing: -0.05em; }
 .social-links a:hover { background: white; transform: translateY(-2px); }
-.social-icon { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; }
+.social-icon { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; }
-.social-link-instagram .social-icon { color: #dd2a7b; }
-.social-link-facebook .social-icon { color: #1877f2; }
 .site-footer { padding-block: 2rem; color: #f7efe4; background: var(--color-dark-text); }
 .site-footer a { color: #fff8ef; }
 .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; font-size: 0.85rem; }