From 5fdc7da0fe5a04e0a784c01b7b7f827aa79d0547 Mon Sep 17 00:00:00 2001
From: Calum Muir <calumamuir@outlook.com>
Date: Thu, 30 Apr 2026 20:30:35 +0000
Subject: [PATCH] Add Instagram links alongside Facebook throughout the site

Desktop nav, mobile menu, footer social icons, and contact page
"Follow us" section all now include an Instagram icon linking to
https://www.instagram.com/HighlandGroupRDA.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/SiteFooter.astro | 13 +++++++
 src/components/SiteHeader.astro | 60 +++++++++++++++++++++------------
 src/pages/contact.astro         | 45 ++++++++++++++++++-------
 3 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
index 70d4bd7..c28d7e0 100644
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -91,6 +91,19 @@ const year = new Date().getFullYear();
                             <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                         </svg>
                     </a>
+                    <a
+                        href="https://www.instagram.com/HighlandGroupRDA"
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="Highland Group RDA on Instagram"
+                        class="inline-flex items-center justify-center h-9 w-9 rounded-full border border-black/25 text-black hover:border-black/50 transition-colors"
+                    >
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
+                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
+                        </svg>
+                    </a>
                 </div>
             </div>
 
diff --git a/src/components/SiteHeader.astro b/src/components/SiteHeader.astro
index c555a9a..b0ae71d 100644
--- a/src/components/SiteHeader.astro
+++ b/src/components/SiteHeader.astro
@@ -59,21 +59,32 @@ const lineClass = isDark ? "bg-white" : "bg-black";
                     <span
                         class="inline-flex items-center justify-center h-8 w-8 rounded-full border border-black/20 text-black"
                     >
-                        <svg
-                            viewBox="0 0 24 24"
-                            class="h-6 w-6"
-                            aria-hidden="true"
-                            focusable="false"
-                        >
-                            <path
-                                fill="currentColor"
-                                d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"
-                            ></path>
+                        <svg viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" focusable="false">
+                            <path fill="currentColor" d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"></path>
                         </svg>
                     </span>
                     Facebook
                 </a>
             </li>
+            <li>
+                <a
+                    class="flex items-center gap-3 border-b border-black/10 pb-4"
+                    href="https://www.instagram.com/HighlandGroupRDA"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    <span
+                        class="inline-flex items-center justify-center h-8 w-8 rounded-full border border-black/20 text-black"
+                    >
+                        <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
+                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
+                        </svg>
+                    </span>
+                    Instagram
+                </a>
+            </li>
         </ul>
     </nav>
 </div>
@@ -122,20 +133,27 @@ const lineClass = isDark ? "bg-white" : "bg-black";
                     }
                     <li class="hidden sm:block">
                         <a
-                            class={`inline-flex items-center justify-center h-10 w-10 sm:h-10 sm:w-10 rounded-full border ${borderClass} ${textClass}`}
+                            class={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
                             href={facebookHref}
                             aria-label="Highland Group RDA on Facebook"
                         >
-                            <svg
-                                viewBox="0 0 24 24"
-                                class="h-6 w-6 sm:h-6 sm:w-6"
-                                aria-hidden="true"
-                                focusable="false"
-                            >
-                                <path
-                                    fill="currentColor"
-                                    d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"
-                                ></path>
+                            <svg viewBox="0 0 24 24" class="h-6 w-6" aria-hidden="true" focusable="false">
+                                <path fill="currentColor" d="M14 8.5h2.5V6H14c-1.9 0-3 1.2-3 3v2H9v2.5h2V18h2.5v-4.5h2l.5-2.5h-2.5V9c0-.3.2-.5.5-.5z"></path>
+                            </svg>
+                        </a>
+                    </li>
+                    <li class="hidden sm:block">
+                        <a
+                            class={`inline-flex items-center justify-center h-10 w-10 rounded-full border ${borderClass} ${textClass}`}
+                            href="https://www.instagram.com/HighlandGroupRDA"
+                            target="_blank"
+                            rel="noreferrer"
+                            aria-label="Highland Group RDA on Instagram"
+                        >
+                            <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
+                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                             </svg>
                         </a>
                     </li>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 4c27efa..cbe0064 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -187,19 +187,38 @@ const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
 
                         <div style="padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.12); margin-bottom: 36px;">
                             <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px;">Follow us</p>
-                            <a
-                                href="/facebook"
-                                style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
-                                onmouseover="this.style.textDecoration='underline'"
-                                onmouseout="this.style.textDecoration='none'"
-                            >
-                                <span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
-                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                                        <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
-                                    </svg>
-                                </span>
-                                Facebook
-                            </a>
+                            <div style="display: flex; flex-direction: column; gap: 12px;">
+                                <a
+                                    href="/facebook"
+                                    style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
+                                    onmouseover="this.style.textDecoration='underline'"
+                                    onmouseout="this.style.textDecoration='none'"
+                                >
+                                    <span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
+                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
+                                        </svg>
+                                    </span>
+                                    Facebook
+                                </a>
+                                <a
+                                    href="https://www.instagram.com/HighlandGroupRDA"
+                                    target="_blank"
+                                    rel="noreferrer"
+                                    style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
+                                    onmouseover="this.style.textDecoration='underline'"
+                                    onmouseout="this.style.textDecoration='none'"
+                                >
+                                    <span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
+                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
+                                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
+                                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
+                                        </svg>
+                                    </span>
+                                    Instagram
+                                </a>
+                            </div>
                         </div>
 
                         <!-- Map -->