From 70fe418345e6613d75f30e9163aea0db7aee986f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ckirukib=E2=80=9D?= <“kirubeljkl679@gmail.com”>
Date: Thu, 2 Apr 2026 11:33:40 +0300
Subject: [PATCH] improve contact section

Made-with: Cursor
---
 src/email/EmailShell.tsx | 99 ++++++++++++++++++++++++++--------------
 1 file changed, 64 insertions(+), 35 deletions(-)

diff --git a/src/email/EmailShell.tsx b/src/email/EmailShell.tsx
index 6eaa606..fdfd4ee 100644
--- a/src/email/EmailShell.tsx
+++ b/src/email/EmailShell.tsx
@@ -48,6 +48,17 @@ function IconPhone() {
   )
 }
 
+function IconMapPin() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={{ display: 'block' }}>
+      <path
+        fill="currentColor"
+        d="M12 2C8.1 2 5 5.1 5 9c0 5.3 7 13 7 13s7-7.7 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"
+      />
+    </svg>
+  )
+}
+
 function telHref(phone: string) {
   // Remove spaces and dashes so tel links work reliably across clients.
   const cleaned = phone.replace(/[\\s-]/g, '')
@@ -56,15 +67,17 @@ function telHref(phone: string) {
 
 function ContactLine({
   icon,
+  iconColor,
   children,
 }: {
   icon: ReactNode
+  iconColor: string
   children: ReactNode
 }) {
   return (
     <Row style={{ margin: '0 0 8px' }}>
-      <Column style={{ width: 24, paddingRight: 8, verticalAlign: 'top' }}>
-        <Text style={{ margin: 0, color: 'inherit', display: 'block' }}>{icon}</Text>
+      <Column style={{ width: 24, paddingRight: 10, verticalAlign: 'top' }}>
+        <Text style={{ margin: 0, color: iconColor, display: 'block' }}>{icon}</Text>
       </Column>
       <Column style={{ width: 'auto', verticalAlign: 'top' }}>{children}</Column>
     </Row>
@@ -113,42 +126,58 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
                 backgroundColor: 'rgba(255,255,255,0.55)',
               }}
             >
-              {brand.footer.address ? (
-                <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
-                  {brand.footer.address}
-                </Text>
-              ) : null}
+              <Text style={{ margin: '0 0 10px', color: brand.textColor, fontSize: 12, fontWeight: 700, lineHeight: '18px' }}>
+                Contact
+              </Text>
 
-              {brand.footer.email ? (
-                <ContactLine icon={<IconMail />}>
-                  <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
-                    <Link
-                      href={`mailto:${brand.footer.email}`}
-                      style={{ color: brand.primaryColor, textDecoration: 'none' }}
-                    >
-                      {brand.footer.email}
-                    </Link>
-                  </Text>
-                </ContactLine>
-              ) : null}
+              <Row>
+                <Column style={{ width: '50%', verticalAlign: 'top', paddingRight: 8 }}>
+                  {brand.footer.address ? (
+                    <ContactLine icon={<IconMapPin />} iconColor={brand.primaryColor}>
+                      <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
+                        {brand.footer.address}
+                      </Text>
+                    </ContactLine>
+                  ) : null}
+                </Column>
 
-              {brand.footer.phone1 || brand.footer.phone2 ? (
-                <ContactLine icon={<IconPhone />}>
-                  <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
-                    {brand.footer.phone1 ? (
-                      <Link href={telHref(brand.footer.phone1)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
-                        {brand.footer.phone1}
+                <Column style={{ width: '50%', verticalAlign: 'top', paddingLeft: 8 }}>
+                  {brand.footer.email ? (
+                    <ContactLine icon={<IconMail />} iconColor={brand.primaryColor}>
+                      <Link
+                        href={`mailto:${brand.footer.email}`}
+                        style={{ color: brand.primaryColor, textDecoration: 'none', fontSize: 12, lineHeight: '18px', fontWeight: 600 }}
+                      >
+                        {brand.footer.email}
                       </Link>
-                    ) : null}
-                    {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
-                    {brand.footer.phone2 ? (
-                      <Link href={telHref(brand.footer.phone2)} style={{ color: brand.primaryColor, textDecoration: 'none' }}>
-                        {brand.footer.phone2}
-                      </Link>
-                    ) : null}
-                  </Text>
-                </ContactLine>
-              ) : null}
+                    </ContactLine>
+                  ) : null}
+
+                  {brand.footer.phone1 || brand.footer.phone2 ? (
+                    <ContactLine icon={<IconPhone />} iconColor={brand.primaryColor}>
+                      <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
+                        {brand.footer.phone1 ? (
+                          <Link
+                            href={telHref(brand.footer.phone1)}
+                            style={{ color: brand.primaryColor, textDecoration: 'none', fontWeight: 600 }}
+                          >
+                            {brand.footer.phone1}
+                          </Link>
+                        ) : null}
+                        {brand.footer.phone1 && brand.footer.phone2 ? ' · ' : ''}
+                        {brand.footer.phone2 ? (
+                          <Link
+                            href={telHref(brand.footer.phone2)}
+                            style={{ color: brand.primaryColor, textDecoration: 'none', fontWeight: 600 }}
+                          >
+                            {brand.footer.phone2}
+                          </Link>
+                        ) : null}
+                      </Text>
+                    </ContactLine>
+                  ) : null}
+                </Column>
+              </Row>
             </Section>
 
             <Section style={{ margin: '14px 0 0', padding: 0 }}>