🐞 feat: Add contact information section to footer with address, email, and phone icons
This commit is contained in:
Keith Solomon
+30
-3
@@ -61,12 +61,39 @@ $footerNav = ! empty( $locations['footer_navigation'] )
|
||||
</div>
|
||||
|
||||
|
||||
<div class="contact">
|
||||
<?php
|
||||
$address = getFieldValue( 'contact_info.address' ) ? getFieldValue( 'contact_info.address' ) : '';
|
||||
$phone = getFieldValue( 'contact_info.phone' ) ? getFieldValue( 'contact_info.phone' ) : '';
|
||||
$email = getFieldValue( 'contact_info.email' ) ? getFieldValue( 'contact_info.email' ) : '';
|
||||
?>
|
||||
|
||||
<?php dynamic_sidebar( 'footer-1' ); ?>
|
||||
<?php if ( $address ) : ?>
|
||||
<div class="contact__item contact__address mt-6">
|
||||
<p><?php echo wp_kses_post( $address ); ?></p>
|
||||
</div>
|
||||
<?php
|
||||
endif;
|
||||
|
||||
if ( $email ) :
|
||||
?>
|
||||
<div class="contact__item contact__email mt-4">
|
||||
<p><a href="mailto:<?php echo esc_attr( $email ); ?>" class="text-cwc-blue-01 hover:underline"><?php echo esc_html( $email ); ?></a></p>
|
||||
</div>
|
||||
<?php
|
||||
endif;
|
||||
|
||||
if ( $phone ) :
|
||||
?>
|
||||
<div class="contact__item contact__phone mt-4">
|
||||
<p><a href="tel:<?php echo esc_attr( preg_replace( '/\D+/', '', $phone ) ); ?>" class="text-cwc-blue-01 hover:underline"><?php echo esc_html( $phone ); ?></a></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right flex flex-col justify-end items-end">
|
||||
<?php dynamic_sidebar( 'footer-2' ); ?>
|
||||
<?php dynamic_sidebar( 'footer-1' ); ?>
|
||||
|
||||
<x-back-to-top></x-back-to-top>
|
||||
|
||||
@@ -77,7 +104,7 @@ $footerNav = ! empty( $locations['footer_navigation'] )
|
||||
null,
|
||||
array(
|
||||
'circle' => true,
|
||||
'classes' => 'social-icons p-0 text-18px',
|
||||
'classes' => 'social-icons p-0 text-14px bg-white! text-cwc-blue-02! hover:opacity-80!',
|
||||
)
|
||||
);
|
||||
?>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.3 0H2.7C1.98392 0 1.29716 0.276562 0.790812 0.768845C0.284464 1.26113 0 1.92881 0 2.625V11.375C0 12.0712 0.284464 12.7389 0.790812 13.2312C1.29716 13.7234 1.98392 14 2.7 14H15.3C16.0161 14 16.7028 13.7234 17.2092 13.2312C17.7155 12.7389 18 12.0712 18 11.375V2.625C18 1.92881 17.7155 1.26113 17.2092 0.768845C16.7028 0.276562 16.0161 0 15.3 0ZM14.697 1.75L9 5.90625L3.303 1.75H14.697ZM15.3 12.25H2.7C2.46131 12.25 2.23239 12.1578 2.0636 11.9937C1.89482 11.8296 1.8 11.6071 1.8 11.375V2.84375L8.46 7.7C8.61579 7.81359 8.80527 7.875 9 7.875C9.19473 7.875 9.38421 7.81359 9.54 7.7L16.2 2.84375V11.375C16.2 11.6071 16.1052 11.8296 15.9364 11.9937C15.7676 12.1578 15.5387 12.25 15.3 12.25Z" fill="#8FC9E6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 818 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C11.3869 0 13.6761 0.948211 15.364 2.63604C17.0518 4.32387 18 6.61305 18 9C18 12.074 16.324 14.59 14.558 16.395C13.6757 17.2871 12.7129 18.0958 11.682 18.811L11.256 19.101L11.056 19.234L10.679 19.474L10.343 19.679L9.927 19.921C9.64463 20.0822 9.32513 20.1669 9 20.1669C8.67487 20.1669 8.35537 20.0822 8.073 19.921L7.657 19.679L7.137 19.359L6.945 19.234L6.535 18.961C5.42283 18.2085 4.3869 17.3491 3.442 16.395C1.676 14.589 0 12.074 0 9C0 6.61305 0.948211 4.32387 2.63604 2.63604C4.32387 0.948211 6.61305 0 9 0ZM9 2C7.14348 2 5.36301 2.7375 4.05025 4.05025C2.7375 5.36301 2 7.14348 2 9C2 11.322 3.272 13.36 4.871 14.996C5.55853 15.692 6.30166 16.3308 7.093 16.906L7.551 17.232C7.699 17.3353 7.84133 17.4313 7.978 17.52L8.368 17.77L8.711 17.979L9 18.148L9.455 17.879L9.822 17.649C10.0173 17.525 10.2263 17.386 10.449 17.232L10.907 16.906C11.6983 16.3308 12.4415 15.692 13.129 14.996C14.728 13.361 16 11.322 16 9C16 7.14348 15.2625 5.36301 13.9497 4.05025C12.637 2.7375 10.8565 2 9 2ZM9 5C10.0609 5 11.0783 5.42143 11.8284 6.17157C12.5786 6.92172 13 7.93913 13 9C13 10.0609 12.5786 11.0783 11.8284 11.8284C11.0783 12.5786 10.0609 13 9 13C7.93913 13 6.92172 12.5786 6.17157 11.8284C5.42143 11.0783 5 10.0609 5 9C5 7.93913 5.42143 6.92172 6.17157 6.17157C6.92172 5.42143 7.93913 5 9 5ZM9 7C8.46957 7 7.96086 7.21071 7.58579 7.58579C7.21071 7.96086 7 8.46957 7 9C7 9.53043 7.21071 10.0391 7.58579 10.4142C7.96086 10.7893 8.46957 11 9 11C9.53043 11 10.0391 10.7893 10.4142 10.4142C10.7893 10.0391 11 9.53043 11 9C11 8.46957 10.7893 7.96086 10.4142 7.58579C10.0391 7.21071 9.53043 7 9 7Z" fill="#8FC9E6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.50045 0.251886C5.63912 1.08206 6.50102 2.24845 7.2349 3.32019L7.81009 4.16568C7.98872 4.42669 8.07045 4.74192 8.04114 5.05681C8.01183 5.37171 7.87334 5.66645 7.64962 5.89003L6.42709 7.1123L6.55602 7.38632C6.87156 8.0254 7.41611 8.94571 8.23563 9.76596C8.80243 10.3222 9.44025 10.801 10.1325 11.1901L10.4634 11.3677L10.7582 11.5137L10.8898 11.5741L12.1115 10.3519C12.3358 10.1274 12.6319 9.98894 12.9481 9.96076C13.2642 9.93258 13.5802 10.0165 13.8407 10.1977L14.7549 10.8314C15.7935 11.5615 16.878 12.3935 17.721 13.4733C17.8667 13.6607 17.9594 13.8838 17.9894 14.1193C18.0194 14.3548 17.9855 14.594 17.8914 14.8119C17.1368 16.5723 15.2273 18.0713 13.2411 17.9974L12.9707 17.983L12.7606 17.9649L12.528 17.9379L12.2746 17.9036L11.9997 17.8577L11.7058 17.8L11.3938 17.7306L11.0638 17.6458L10.7167 17.5467L10.3543 17.4295C8.69002 16.8652 6.57765 15.7565 4.41029 13.5896C2.24293 11.4227 1.1349 9.31167 0.570521 7.64772L0.453317 7.28536L0.354145 6.93833L0.269398 6.60843L0.199076 6.29655C0.178788 6.19886 0.159854 6.1009 0.142277 6.0027L0.0971989 5.72778L0.0611362 5.47449L0.0349908 5.24193L0.0169594 5.03191L0.00253447 4.7615C-0.0704924 2.78206 1.44504 0.859417 3.19768 0.108566C3.40863 0.0174967 3.63963 -0.0171762 3.86803 0.00794982C4.09642 0.0330758 4.31435 0.117137 4.50045 0.251886ZM3.66469 1.88158C2.69822 2.38636 1.76239 3.54012 1.80476 4.69479L1.8228 4.99045L1.84263 5.17523L1.86878 5.38255L1.90484 5.6106L1.95082 5.86028L2.00942 6.12889L2.08155 6.41733L2.1681 6.7229L2.27087 7.0456C2.30874 7.15556 2.34901 7.26824 2.39168 7.38361L2.53052 7.73696L2.6892 8.10382C3.25538 9.34953 4.17859 10.808 5.68691 12.3151C7.19433 13.8222 8.65306 14.7461 9.89902 15.3122L10.266 15.4708L10.6194 15.6096C10.7348 15.6529 10.8475 15.6931 10.9575 15.7304L11.2802 15.8332L11.5868 15.9197L11.8744 15.9918L12.143 16.0504L12.3928 16.0964L12.6218 16.1324L12.8291 16.1595L13.013 16.1775L13.3087 16.1955C14.4483 16.2379 15.6113 15.3077 16.1144 14.354C15.4725 13.6013 14.6755 12.9839 13.7965 12.3619L13.1221 11.8923L12.9508 12.0717L12.5848 12.471L12.391 12.6747C11.8626 13.2128 11.246 13.6698 10.5067 13.3715L10.3029 13.2859L10.0541 13.1741L9.91525 13.1083L9.61052 12.956L9.27604 12.7757C8.43039 12.3035 7.65199 11.7199 6.96172 11.0405C6.28222 10.3504 5.6985 9.57215 5.22621 8.72667L5.04589 8.39316L4.89263 8.08759L4.71592 7.7L4.62937 7.49448C4.34898 6.80132 4.73485 6.21633 5.22801 5.70975L5.42996 5.51145L5.93213 5.04904L6.11245 4.87777L5.68601 4.25312C5.0522 3.33371 4.43283 2.50444 3.66379 1.88068L3.66469 1.88158ZM11.8356 3.49235L11.9402 3.50407C12.5964 3.6198 13.1992 3.94029 13.6621 4.41958C14.1249 4.89888 14.4242 5.51238 14.5168 6.17216C14.5499 6.40037 14.4942 6.63256 14.3612 6.82097C14.2283 7.00939 14.0281 7.13968 13.802 7.18506C13.5759 7.23044 13.3409 7.18745 13.1456 7.06493C12.9502 6.94241 12.8092 6.74969 12.7516 6.5264L12.7308 6.42274C12.6946 6.16414 12.5842 5.92157 12.413 5.72434C12.2418 5.52711 12.0171 5.38367 11.7662 5.31134L11.6264 5.27979C11.4 5.23967 11.1975 5.1146 11.0603 4.93015C10.9231 4.7457 10.8616 4.51581 10.8883 4.2875C10.915 4.05919 11.028 3.84971 11.2041 3.70191C11.3801 3.5541 11.6061 3.47914 11.8356 3.49235ZM11.8419 0.752152C13.2766 0.752152 14.6525 1.32195 15.6669 2.3362C16.6814 3.35045 17.2513 4.72607 17.2513 6.16044C17.251 6.39018 17.163 6.61116 17.0053 6.77822C16.8476 6.94528 16.632 7.04581 16.4026 7.05927C16.1732 7.07274 15.9473 6.99812 15.7711 6.85066C15.5949 6.7032 15.4816 6.49404 15.4545 6.2659L15.4482 6.16044C15.4481 5.24514 15.0998 4.36414 14.474 3.69609C13.8482 3.02805 12.9916 2.62298 12.0781 2.56303L11.8419 2.55491C11.6028 2.55491 11.3735 2.45995 11.2044 2.29091C11.0353 2.12186 10.9403 1.89259 10.9403 1.65353C10.9403 1.41447 11.0353 1.1852 11.2044 1.01616C11.3735 0.847119 11.6028 0.752152 11.8419 0.752152Z" fill="#8FC9E6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -18,6 +18,33 @@
|
||||
|
||||
a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
|
||||
}
|
||||
|
||||
.contact__item {
|
||||
@apply flex justify-start items-start font-light text-white text-14px mb-2;
|
||||
|
||||
p { @apply m-0 p-0; }
|
||||
|
||||
a { @apply text-white hover:text-secondary-400 focus-visible:text-secondary-400; }
|
||||
|
||||
&::before {
|
||||
@apply inline-block mr-2;
|
||||
|
||||
content: "";
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
&.contact__phone::before {
|
||||
background: url("../../static/img/footer-phone.svg") no-repeat center center;
|
||||
}
|
||||
&.contact__email::before {
|
||||
background: url("../../static/img/footer-email.svg") no-repeat center center;
|
||||
}
|
||||
&.contact__address::before {
|
||||
background: url("../../static/img/footer-map.svg") no-repeat center center;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
@@ -52,19 +52,20 @@ Lineicons regular icon font
|
||||
.circular-icon {
|
||||
@apply box-content bg-secondary rounded-full text-white flex justify-center items-center;
|
||||
|
||||
--size: 2rem;
|
||||
--size: 1.5rem;
|
||||
height: var(--size);
|
||||
text-align: center;
|
||||
width: var(--size);
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
height: var(--size);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
margin-top: 0.5rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: var(--size);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&i::before, span { line-height: var(--size) !important; }
|
||||
|
||||
@@ -29,7 +29,7 @@ if ( $circle ) {
|
||||
foreach ( $sites as $name => $url ) {
|
||||
if ( $url ) {
|
||||
?>
|
||||
<a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?> p-0 leading-none pb-1">
|
||||
<a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?> p-0 leading-none">
|
||||
<?php get_template_part( 'views/icons/' . $name ); ?>
|
||||
<span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user