footer like reference
Made-with: Cursor
This commit is contained in:
“kirukib”
parent
70fe418345
commit
957058d512
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user