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>
This commit is contained in:
Calum Muir
parent
db9f9d255a
commit
5fdc7da0fe
3 changed files with 84 additions and 34 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue