foot
This commit is contained in:
@@ -10,23 +10,9 @@ const SOCIAL_LINKS = [
|
||||
]
|
||||
|
||||
const CONTACT_INFO = [
|
||||
{ icon: 'fas fa-location-dot', text: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' },
|
||||
{ icon: 'fas fa-phone-volume', label: 'Call Us:', text: '+971 4 320 0869', link: 'tel:+97143200869' },
|
||||
{ icon: 'fas fa-envelope', label: 'Email Us:', text: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' },
|
||||
]
|
||||
|
||||
const FOOTER_SERVICES_1 = [
|
||||
{ label: 'Electro-Mechanical Works', path: '/service/electro-mechanical-works' },
|
||||
{ label: 'Landscaping & Fencing Works', path: '/service/landscaping-fencing-works' },
|
||||
{ label: 'Building Contracting Works', path: '/service/building-contracting-works' },
|
||||
{ label: 'Interior & Fit-Out Works', path: '/service/interior-fit-out-works' },
|
||||
]
|
||||
|
||||
const FOOTER_SERVICES_2 = [
|
||||
{ label: 'Metal Construction & Fabrications', path: '/service/metal-construction-fabrications' },
|
||||
{ label: 'Chiller Hot & Cool Solutions', path: '/service/chiller-hot-cool-solutions' },
|
||||
{ label: 'Misting Solutions', path: '/service/misting-solutions' },
|
||||
{ label: 'Adiabatic Pre-Cooling System', path: '/service/adiabatic-pre-cooling-system' },
|
||||
{ icon: 'fas fa-location-dot', title: 'Address', text: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' },
|
||||
{ icon: 'fas fa-phone-volume', title: 'Call Us:', text: '+971 4 320 0869', link: 'tel:+97143200869' },
|
||||
{ icon: 'fas fa-envelope', title: 'Email Us:', text: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' },
|
||||
]
|
||||
|
||||
const FOOTER_LINKS = [
|
||||
@@ -41,146 +27,140 @@ export default function Footer() {
|
||||
useNavFix(ref)
|
||||
|
||||
return (
|
||||
<footer ref={ref}>
|
||||
<style id="elementor-post-1098">{`
|
||||
.elementor-1098 .elementor-element.elementor-element-6bbd41e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1098 .elementor-element.elementor-element-6bbd41e:not(.elementor-motion-effects-element-type-background), .elementor-1098 .elementor-element.elementor-element-6bbd41e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#01003D;}.elementor-1098 .elementor-element.elementor-element-4b4c392{--display:flex;}.elementor-1098 .elementor-element.elementor-element-7a7bb64 .label{color:#FFFFFF;font-size:12px;}.elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text, .elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text a, .elementor-1098 .elementor-element.elementor-element-7a7bb64 .box-text span{color:#FFFFFF;font-size:14px;}.elementor-1098 .elementor-element.elementor-element-953ab14{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:100px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-1098 .elementor-element.elementor-element-c5d6f05 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-8e3fc7b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-c7fa0b1 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:50px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-a684744 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:50px 12px 0px 12px;}.elementor-1098 .elementor-element.elementor-element-66137ae{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}
|
||||
<footer ref={ref} className="footer-wrapper pf-footer">
|
||||
<style>{`
|
||||
/* Self-contained footer CSS. Deliberately NOT using the Elementor
|
||||
e-con/e-flex classes here — those pull flex-direction, widths,
|
||||
and background from CSS custom properties in kit.css that kept
|
||||
silently overriding the layout. Everything below is !important
|
||||
so nothing external can hijack it again. */
|
||||
.pf-footer{
|
||||
background-color:#01003D !important;
|
||||
}
|
||||
.pf-footer .pf-inset{
|
||||
max-width:1620px;
|
||||
margin:0 auto;
|
||||
padding:0 24px;
|
||||
}
|
||||
.pf-footer .pf-widgets-row{
|
||||
display:flex !important;
|
||||
flex-direction:row !important;
|
||||
flex-wrap:wrap !important;
|
||||
justify-content:space-between !important;
|
||||
align-items:flex-start !important;
|
||||
gap:40px;
|
||||
max-width:1620px;
|
||||
margin:0 auto;
|
||||
padding:64px 24px 48px;
|
||||
}
|
||||
.pf-footer .pf-about-col{
|
||||
flex:1 1 0;
|
||||
}
|
||||
.pf-footer .pf-links-col{
|
||||
flex:0 0 240px;
|
||||
}
|
||||
.pf-footer .pf-heading-red{
|
||||
color:#ED1C24 !important;
|
||||
}
|
||||
.pf-footer .pf-copyright-line{
|
||||
width:100%;
|
||||
border-top:1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
.pf-footer .pf-copyright-inner{
|
||||
max-width:1620px;
|
||||
margin:0 auto;
|
||||
padding:22px 24px;
|
||||
}
|
||||
/* contact bar — 3 equal, evenly-spaced, centered cells (own classes,
|
||||
not fighting the theme's .footer-contact-wrap/.footer-contact) */
|
||||
.pf-footer .pf-contact-wrap{
|
||||
display:flex;
|
||||
width:100%;
|
||||
}
|
||||
.pf-footer .pf-contact-cell{
|
||||
flex:1 1 0;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:16px;
|
||||
padding:0 24px;
|
||||
text-align:left;
|
||||
}
|
||||
.pf-footer .pf-contact-divider{
|
||||
width:1px;
|
||||
align-self:stretch;
|
||||
background-color:#ddd;
|
||||
}
|
||||
/* guarantee the About paragraph fills its column no matter what
|
||||
.about-text's own max-width is set to elsewhere in the theme CSS */
|
||||
.pf-footer .about-text{
|
||||
max-width:none !important;
|
||||
width:100% !important;
|
||||
}
|
||||
`}</style>
|
||||
<div className="elementor elementor-1098" data-elementor-id="1098" data-elementor-type="wp-post">
|
||||
<div className="elementor-element elementor-element-6bbd41e e-con-full e-flex e-con e-parent" data-e-type="container" data-element_type="container" data-id="6bbd41e">
|
||||
|
||||
{/* Footer widgets */}
|
||||
<div className="elementor-element elementor-element-953ab14 e-flex e-con-boxed e-con e-child" data-e-type="container" data-element_type="container" data-id="953ab14">
|
||||
<div className="e-con-inner">
|
||||
{[
|
||||
{
|
||||
title: 'Get in Touch',
|
||||
content: (
|
||||
<div className="footer-widget">
|
||||
<div className="widget widget_about">
|
||||
<div className="th-widget-about">
|
||||
<div className="about-logo" style={{ maxWidth: 180 }}>
|
||||
<a href="/"><img alt="logo footer" src="/assets/images/logo_pe-Rd-Wh-001.svg" /></a>
|
||||
</div>
|
||||
<p className="about-text" style={{ color: '#f5f5f5', lineHeight: 1.8 }}>
|
||||
Profen Engineering LLC is a leading multidisciplinary engineering and construction company based in Dubai, UAE. With years of expertise, we deliver comprehensive MEP, building contracting, metal fabrication, interior fit-out, landscaping, and misting solutions.
|
||||
</p>
|
||||
<div className="th-widget-social">
|
||||
{SOCIAL_LINKS.map((s, i) => (
|
||||
<a key={i} href={s.url} target="_blank" rel="noopener noreferrer"><i className={s.icon}></i></a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Contact Info',
|
||||
content: (
|
||||
<div className="footer-widget">
|
||||
<div className="widget widget_contact">
|
||||
<h3 className="widget_title" style={{ color: '#ED1C24' }}>Contact Info</h3>
|
||||
<div className="th-widget-contact">
|
||||
{CONTACT_INFO.map((c, i) => (
|
||||
<div key={i} className="contact-feature">
|
||||
<div className="icon-btn"><i className={c.icon}></i></div>
|
||||
<div className="media-body">
|
||||
{c.label && <p className="box-label" style={{ color: '#aaa', margin: 0, fontSize: 12 }}>{c.label}</p>}
|
||||
<p className="box-text" style={{ margin: 0 }}><a href={c.link} {...(c.target ? { target: c.target, rel: 'noopener noreferrer' } : {})} style={{ color: '#fff' }}>{c.text}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Services 1',
|
||||
content: (
|
||||
<div className="widget widget_nav_menu footer-widget">
|
||||
<h3 className="widget_title" style={{ color: '#ED1C24' }}>Our Services</h3>
|
||||
<div className="menu-all-pages-container">
|
||||
<ul className="menu">
|
||||
{FOOTER_SERVICES_1.map((item, i) => (
|
||||
<li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Services 2',
|
||||
content: (
|
||||
<div className="widget widget_nav_menu footer-widget">
|
||||
<h3 className="widget_title" style={{ color: '#ED1C24' }}>More Services</h3>
|
||||
<div className="menu-all-pages-container">
|
||||
<ul className="menu">
|
||||
{FOOTER_SERVICES_2.map((item, i) => (
|
||||
<li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Useful Links',
|
||||
content: (
|
||||
<div className="widget widget_nav_menu footer-widget">
|
||||
<h3 className="widget_title" style={{ color: '#ED1C24' }}>Useful Links</h3>
|
||||
<div className="menu-all-pages-container">
|
||||
<ul className="menu style2">
|
||||
{FOOTER_LINKS.map((item, i) => (
|
||||
<li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
].map((section, i) => (
|
||||
<div key={i} className={`elementor-element elementor-element-${['c5d6f05', '8e3fc7b', 'c7fa0b1', 'a684744', '66137ae'][i] || 'extra'} e-con-full e-flex e-con e-child`} data-e-type="container" data-element_type="container" data-id={['c5d6f05', '8e3fc7b', 'c7fa0b1', 'a684744', '66137ae'][i] || 'extra'}>
|
||||
<div className="elementor-element elementor-element-7a7bb64 elementor-widget elementor-widget-rakarabout" data-id="7a7bb64" data-element_type="widget" data-e-type="widget" data-widget_type="rakarabout.default">
|
||||
<div className="elementor-widget-container">
|
||||
{section.content}
|
||||
</div>
|
||||
{/* Contact bar — white rounded card, own classes for guaranteed 3-cell centering */}
|
||||
<div className="pf-inset">
|
||||
<div className="footer-contact-area">
|
||||
<div className="pf-contact-wrap" style={{ padding: '20px 40px' }}>
|
||||
{CONTACT_INFO.map((c, i) => (
|
||||
<div key={i} style={{ display: 'contents' }}>
|
||||
{i > 0 && <div className="pf-contact-divider"></div>}
|
||||
<div className="pf-contact-cell">
|
||||
<div className="box-icon"><i className={c.icon}></i></div>
|
||||
<div className="media-body">
|
||||
{c.title && <p className="box-title" style={{ fontSize: 12, color: '#888', marginBottom: 4 }}>{c.title}</p>}
|
||||
<p className="box-text">
|
||||
<a href={c.link} {...(c.target ? { target: c.target, rel: 'noopener noreferrer' } : {})}>{c.text}</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* WhatsApp Chat Embed — replaced Elfsight widget with direct WhatsApp link */}
|
||||
<div className="elementor-element elementor-element-32890cd elementor-widget elementor-widget-shortcode" data-e-type="widget" data-element_type="widget" data-id="32890cd" data-widget_type="shortcode.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-shortcode">
|
||||
<a
|
||||
href="https://wa.me/971564148980"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="footer-whatsapp-link"
|
||||
style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#25D366', textDecoration: 'none' }}
|
||||
>
|
||||
<i className="fab fa-whatsapp" style={{ fontSize: 20 }}></i>
|
||||
<span>Chat with us on WhatsApp</span>
|
||||
</a>
|
||||
</div>
|
||||
{/* Footer widgets — Get in Touch + Useful Links, same row, About column wide */}
|
||||
<div className="pf-widgets-row">
|
||||
<div className="pf-about-col">
|
||||
<div className="footer-widget">
|
||||
<div className="widget widget_about">
|
||||
<div className="th-widget-about">
|
||||
<div className="about-logo" style={{ maxWidth: 180 }}>
|
||||
<a href="/"><img alt="logo footer" src="/assets/images/logo_pe-Rd-Wh-001.svg" /></a>
|
||||
</div>
|
||||
<p className="about-text" style={{ color: '#f5f5f5', lineHeight: 1.8 }}>
|
||||
Profen Engineering LLC is a leading multidisciplinary engineering and construction company based in Dubai, UAE. With years of expertise, we deliver comprehensive MEP, building contracting, metal fabrication, interior fit-out, landscaping, and misting solutions.
|
||||
</p>
|
||||
<div className="th-social">
|
||||
{SOCIAL_LINKS.map((s, i) => (
|
||||
<a key={i} href={s.url} target="_blank" rel="noopener noreferrer"><i className={s.icon}></i></a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright */}
|
||||
<div className="elementor-element elementor-element-d43fabc e-flex e-con-boxed e-con e-child" data-e-type="container" data-element_type="container" data-id="d43fabc">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-ed6bb39 elementor-widget elementor-widget-html" data-e-type="widget" data-element_type="widget" data-id="ed6bb39" data-widget_type="html.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p className="copyright-text">Copyright <i className="fas fa-copyright"></i> 2026 <a href="/">Profen Engineering LLC</a>. All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pf-links-col">
|
||||
<div className="widget widget_nav_menu footer-widget">
|
||||
<h3 className="widget_title pf-heading-red">Useful Links</h3>
|
||||
<div className="menu-all-pages-container">
|
||||
<ul className="menu style2">
|
||||
{FOOTER_LINKS.map((item, i) => (
|
||||
<li key={i} className="menu-item"><Link to={item.path}>{item.label}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Copyright — full-width divider line, text inset from the edges */}
|
||||
<div className="pf-copyright-line">
|
||||
<div className="pf-copyright-inner">
|
||||
<p className="copyright-text">Copyright <i className="fas fa-copyright"></i> 2026 <a href="/">Profen Engineering LLC</a>. All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user