From 957058d512ddf4da38dd5c06db3cdd336634b2c0 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:38:31 +0300
Subject: [PATCH] footer like reference

Made-with: Cursor
---
 src/email/EmailShell.tsx | 143 ++++++++++++++++++++-------------------
 1 file changed, 75 insertions(+), 68 deletions(-)

diff --git a/src/email/EmailShell.tsx b/src/email/EmailShell.tsx
index fdfd4ee..f28b6b8 100644
--- a/src/email/EmailShell.tsx
+++ b/src/email/EmailShell.tsx
@@ -7,7 +7,6 @@ import {
   Section,
   Text,
   Heading,
-  Hr,
   Img,
   Preview,
   Link,
@@ -116,82 +115,69 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
 
           <Section style={{ padding: '22px 0' }}>{children}</Section>
 
-          <Hr style={{ borderColor: brand.secondaryColor, opacity: 0.2 }} />
-          <Section style={{ padding: '18px 0 28px' }}>
-            <Section
-              style={{
-                border: `1px solid ${brand.secondaryColor}`,
-                borderRadius: 12,
-                padding: 14,
-                backgroundColor: 'rgba(255,255,255,0.55)',
-              }}
-            >
-              <Text style={{ margin: '0 0 10px', color: brand.textColor, fontSize: 12, fontWeight: 700, lineHeight: '18px' }}>
-                Contact
-              </Text>
+          <Section style={{ backgroundColor: '#f3f4f6', padding: '22px 16px 16px' }}>
+            <Text style={{ margin: 0, color: brand.textColor, fontSize: 14, fontWeight: 800, lineHeight: '20px' }}>
+              Need Help?
+            </Text>
 
-              <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>
+            <Section style={{ marginTop: 12 }}>
+              {brand.footer.email ? (
+                <ContactLine icon={<IconMail />} iconColor={brand.primaryColor}>
+                  <Link
+                    href={`mailto:${brand.footer.email}`}
+                    style={{ color: brand.primaryColor, textDecoration: 'none', fontSize: 12, fontWeight: 600 }}
+                  >
+                    {brand.footer.email}
+                  </Link>
+                </ContactLine>
+              ) : null}
 
-                <Column style={{ width: '50%', verticalAlign: 'top', paddingLeft: 8 }}>
-                  {brand.footer.email ? (
-                    <ContactLine icon={<IconMail />} iconColor={brand.primaryColor}>
+              {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={`mailto:${brand.footer.email}`}
-                        style={{ color: brand.primaryColor, textDecoration: 'none', fontSize: 12, lineHeight: '18px', fontWeight: 600 }}
+                        href={telHref(brand.footer.phone1)}
+                        style={{ color: brand.primaryColor, textDecoration: 'none', fontWeight: 600 }}
                       >
-                        {brand.footer.email}
+                        {brand.footer.phone1}
                       </Link>
-                    </ContactLine>
-                  ) : null}
+                    ) : 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}
 
-                  {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>
+              {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}
             </Section>
 
-            <Section style={{ margin: '14px 0 0', padding: 0 }}>
+            <Section style={{ marginTop: 16, padding: 0 }}>
               <Text style={{ margin: '0 0 8px', color: brand.textColor, fontSize: 12, opacity: 0.85, lineHeight: '18px' }}>
-                Follow us
+                Social
               </Text>
+
               <Link
                 href={brand.footer.socialFacebookUrl || '#'}
                 style={{
                   display: 'inline-block',
                   marginRight: 8,
                   marginBottom: 8,
-                  padding: '8px 12px',
-                  borderRadius: 999,
+                  padding: '8px 10px',
+                  borderRadius: 10,
                   backgroundColor: brand.primaryColor,
                   color: '#ffffff',
                   textDecoration: 'none',
@@ -212,8 +198,8 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
                   display: 'inline-block',
                   marginRight: 8,
                   marginBottom: 8,
-                  padding: '8px 12px',
-                  borderRadius: 999,
+                  padding: '8px 10px',
+                  borderRadius: 10,
                   backgroundColor: brand.primaryColor,
                   color: '#ffffff',
                   textDecoration: 'none',
@@ -239,8 +225,8 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
                   display: 'inline-block',
                   marginRight: 8,
                   marginBottom: 8,
-                  padding: '8px 12px',
-                  borderRadius: 999,
+                  padding: '8px 10px',
+                  borderRadius: 10,
                   backgroundColor: brand.primaryColor,
                   color: '#ffffff',
                   textDecoration: 'none',
@@ -259,8 +245,8 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
                 href={brand.footer.socialLinkedInUrl || '#'}
                 style={{
                   display: 'inline-block',
-                  padding: '8px 12px',
-                  borderRadius: 999,
+                  padding: '8px 10px',
+                  borderRadius: 10,
                   backgroundColor: brand.primaryColor,
                   color: '#ffffff',
                   textDecoration: 'none',
@@ -276,10 +262,31 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
                 </svg>
               </Link>
             </Section>
+          </Section>
 
-            <Text style={{ margin: '14px 0 0', color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
+          <Section style={{ padding: '14px 16px 26px', textAlign: 'center' }}>
+            <Text style={{ margin: 0, color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
               © {new Date().getFullYear()} {brand.hotelName}. All rights reserved.
             </Text>
+            {brand.footer.address ? (
+              <Text style={{ margin: '8px 0 0', color: brand.textColor, fontSize: 12, lineHeight: '18px' }}>
+                {brand.footer.address}
+              </Text>
+            ) : null}
+
+            <Text style={{ margin: '12px 0 0', color: '#6b7280', fontSize: 11, lineHeight: '16px' }}>
+              <Link href="#" style={{ color: '#6b7280', textDecoration: 'underline' }}>
+                Unsubscribe
+              </Link>
+              {' '}|{' '}
+              <Link href="#" style={{ color: '#6b7280', textDecoration: 'underline' }}>
+                Privacy Policy
+              </Link>
+              {' '}|{' '}
+              <Link href="#" style={{ color: '#6b7280', textDecoration: 'underline' }}>
+                Terms of Service
+              </Link>
+            </Text>
           </Section>
         </Container>
       </Body>