footer like reference

Made-with: Cursor

src/email/EmailShell.tsx

@@ -7,7 +7,6 @@ import {
   Section,
   Text,
   Heading,
-  Hr,
   Img,
   Preview,
   Link,
@@ -116,37 +115,17 @@ 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={{ backgroundColor: '#f3f4f6', padding: '22px 16px 16px' }}>
-          <Section style={{ padding: '18px 0 28px' }}>
+            <Text style={{ margin: 0, color: brand.textColor, fontSize: 14, fontWeight: 800, lineHeight: '20px' }}>
-            <Section
+              Need Help?
-              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>
 
-              <Row>
+            <Section style={{ marginTop: 12 }}>
-                <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>
-
-                <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 }}
+                    style={{ color: brand.primaryColor, textDecoration: 'none', fontSize: 12, fontWeight: 600 }}
                   >
                     {brand.footer.email}
                   </Link>
@@ -176,22 +155,29 @@ export function EmailShell({ brand, title, previewText, children }: EmailShellPr
                   </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',
+                  padding: '8px 10px',
-                  borderRadius: 999,
+                  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',
+                  padding: '8px 10px',
-                  borderRadius: 999,
+                  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',
+                  padding: '8px 10px',
-                  borderRadius: 999,
+                  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',
+                  padding: '8px 10px',
-                  borderRadius: 999,
+                  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>