From d8c0040e7dc43420c68b2618063678bddb201f57 Mon Sep 17 00:00:00 2001
From: Adeeb Shihadeh <adeebshihadeh@gmail.com>
Date: Thu, 21 May 2026 13:57:23 -0700
Subject: [PATCH] got questions?

---
 src/lib/components/ContactBanner.svelte | 233 ++++++++++++++++++++++++
 src/lib/icons/features/email.svg        |   3 +
 src/lib/icons/features/phone.svg        |   3 +
 src/routes/+layout.svelte               |   6 +-
 4 files changed, 242 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/ContactBanner.svelte
 create mode 100644 src/lib/icons/features/email.svg
 create mode 100644 src/lib/icons/features/phone.svg

diff --git a/src/lib/components/ContactBanner.svelte b/src/lib/components/ContactBanner.svelte
new file mode 100644
index 00000000..089b8723
--- /dev/null
+++ b/src/lib/components/ContactBanner.svelte
@@ -0,0 +1,233 @@
+<script>
+  import PhoneIcon from "$lib/icons/features/phone.svg?raw";
+  import ChatIcon from "$lib/icons/features/contact.svg?raw";
+  import EmailIcon from "$lib/icons/features/email.svg?raw";
+
+  export let eyebrow = "Got questions?";
+  export let title = "We're here to help.";
+  export let phoneNumber = "1-800-GO-COMMA";
+  export let phoneHref = "tel:+18004626662";
+  export let email = "support@comma.ai";
+  export let chatFallbackHref = "";
+
+  $: resolvedChatFallbackHref = chatFallbackHref || `mailto:${email}?subject=Support%20question`;
+
+  function openLiveChat() {
+    if (typeof window === "undefined") return;
+
+    if (window.tidioChatApi && typeof window.tidioChatApi.open === "function") {
+      window.tidioChatApi.open();
+      return;
+    }
+
+    window.location.href = resolvedChatFallbackHref;
+  }
+</script>
+
+<section class="contact-banner dark" aria-labelledby="contact-banner-title">
+  <div class="container contact-banner-container">
+    <hgroup>
+      <p>{eyebrow}</p>
+      <h2 id="contact-banner-title">{title}</h2>
+    </hgroup>
+
+    <div class="contact-methods" aria-label="Contact options">
+      <a class="contact-method phone" href={phoneHref} aria-label={`Call us at ${phoneNumber}`}>
+        <span class="method-icon">{@html PhoneIcon}</span>
+        <span class="method-copy">
+          <span class="method-label">Call us at</span>
+          <strong>{phoneNumber}</strong>
+        </span>
+      </a>
+
+      <button class="contact-method" type="button" on:click={openLiveChat} aria-label="Open live chat">
+        <span class="method-icon">{@html ChatIcon}</span>
+        <span class="method-copy">
+          <span class="method-label">Live chat</span>
+          <strong>Talk to us</strong>
+        </span>
+      </button>
+
+      <a class="contact-method" href={`mailto:${email}`} aria-label={`Email us at ${email}`}>
+        <span class="method-icon">{@html EmailIcon}</span>
+        <span class="method-copy">
+          <span class="method-label">Email us</span>
+          <strong>{email}</strong>
+        </span>
+      </a>
+    </div>
+  </div>
+</section>
+
+<style>
+  .contact-banner {
+    background-color: #000;
+    border-top: 1px solid rgba(255, 255, 255, 0.14);
+    padding: 4rem 0;
+  }
+
+  .contact-banner-container {
+    display: grid;
+    grid-template-columns: minmax(14rem, 0.6fr) minmax(0, 1.4fr);
+    align-items: center;
+    gap: 3rem;
+  }
+
+  hgroup {
+    margin: 0;
+  }
+
+  p {
+    color: var(--color-accent);
+    font-family: JetBrains Mono, monospace;
+    font-size: 0.9rem;
+    line-height: 1.2;
+    letter-spacing: 0;
+    text-transform: uppercase;
+    margin: 0 0 0.75rem;
+  }
+
+  h2 {
+    color: white;
+    font-size: 3rem;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0;
+    margin: 0;
+  }
+
+  .contact-methods {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+  }
+
+  .contact-method {
+    min-height: 10rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 1.5rem;
+    color: white;
+    background-color: #111;
+    border: 1px solid rgba(255, 255, 255, 0.28);
+    padding: 1.25rem;
+    text-align: left;
+    font: inherit;
+    letter-spacing: 0;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+  }
+
+  .contact-method.phone {
+    color: black;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .contact-method.phone .method-icon,
+  .contact-method.phone .method-label,
+  .contact-method.phone strong {
+    color: black;
+  }
+
+  .method-icon {
+    color: currentColor;
+    width: 3rem;
+    height: 3rem;
+    display: block;
+  }
+
+  .method-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .method-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .method-label {
+    color: currentColor;
+    opacity: 0.68;
+    font-family: JetBrains Mono, monospace;
+    font-size: 0.78rem;
+    line-height: 1.1;
+    letter-spacing: 0;
+    text-transform: uppercase;
+  }
+
+  strong {
+    color: currentColor;
+    font-size: 1.35rem;
+    font-weight: 600;
+    line-height: 1.05;
+    letter-spacing: 0;
+    overflow-wrap: anywhere;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .contact-method:hover {
+      background-color: #1d1d1d;
+      border-color: rgba(255, 255, 255, 0.52);
+    }
+
+    .contact-method.phone:hover {
+      color: black;
+      background-color: var(--color-accent-hover);
+      border-color: var(--color-accent-hover);
+    }
+  }
+
+  .contact-method:active {
+    background-color: #1d1d1d;
+    border-color: rgba(255, 255, 255, 0.52);
+  }
+
+  .contact-method.phone:active {
+    color: black;
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  @media screen and (max-width: 1024px) {
+    .contact-banner-container {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+  }
+
+  @media screen and (max-width: 768px) {
+    .contact-banner {
+      padding: 3rem 0;
+    }
+
+    h2 {
+      font-size: 2.25rem;
+    }
+
+    .contact-methods {
+      grid-template-columns: 1fr;
+    }
+
+    .contact-method {
+      min-height: 7.5rem;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+
+  @media screen and (max-width: 375px) {
+    h2 {
+      font-size: 2rem;
+    }
+
+    strong {
+      font-size: 1.15rem;
+    }
+  }
+</style>
diff --git a/src/lib/icons/features/email.svg b/src/lib/icons/features/email.svg
new file mode 100644
index 00000000..ad5dab74
--- /dev/null
+++ b/src/lib/icons/features/email.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8 13H40V35H8V13ZM12 17V18.4L24 26.4L36 18.4V17H12ZM12 22.8V31H36V22.8L24 30.8L12 22.8Z" fill="CurrentColor"/>
+</svg>
diff --git a/src/lib/icons/features/phone.svg b/src/lib/icons/features/phone.svg
new file mode 100644
index 00000000..bfa8d157
--- /dev/null
+++ b/src/lib/icons/features/phone.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 8H32C34.2091 8 36 9.79086 36 12V36C36 38.2091 34.2091 40 32 40H16C13.7909 40 12 38.2091 12 36V12C12 9.79086 13.7909 8 16 8ZM16 12V34H32V12H16ZM21 37H27V35H21V37Z" fill="CurrentColor"/>
+</svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e4aa556e..661e1304 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -22,7 +22,7 @@
   import { updateCart } from '$lib/utils/shopify';
   import { printConsoleBanner } from '$lib/utils/console';
 
-  import HeaderBanner from "$lib/components/HeaderBanner.svelte";
+  import ContactBanner from "$lib/components/ContactBanner.svelte";
   import HeaderMenu from "$lib/components/HeaderMenu.svelte";
   import ShoppingCart from "$lib/components/ShoppingCart.svelte";
   import {
@@ -131,12 +131,12 @@
   />
 {/if}
 
-<!--<HeaderBanner />-->
-
 <main>
   <slot></slot>
 </main>
 
+<ContactBanner />
+
 <footer>
   <div class="container">
     <Grid columns={4} wrapMode="single" alignItems="start" size="large">