final

src/components/sections/Breadcrumb.jsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom'
+
+export default function Breadcrumb({ title, items = [] }) {
+  return (
+    <div className="breadcumb-banner">
+      <div className="breadcumb-wrapper" id="breadcumbwrap">
+        <div className="container">
+          <div className="breadcumb-content">
+            <h1 className="breadcumb-title">{title}</h1>
+            <ul className="breadcumb-menu">
+              {items.map((item, i) => (
+                <li key={i}>
+                  {item.link ? <Link to={item.link}>{item.label}</Link> : item.label}
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sections/Button.jsx

@@ -0,0 +1,9 @@
+export default function Button({ text, link, style = 'style4', rounded, icon = 'far fa-arrow-right' }) {
+  return (
+    <div className="btn-wrapper">
+      <a className={`th-btn th_btn${style ? ' ' + style : ''}${rounded ? ' rounded-' + rounded : ''}`} href={link}>
+        {text}{icon && <i className={`${icon} ms-2`}></i>}
+      </a>
+    </div>
+  )
+}

src/components/sections/ContactForm.jsx

@@ -0,0 +1,48 @@
+export default function ContactForm({ heading, subtitle, style = 'default' }) {
+  const light = style === 'light'
+  const wrapperClass = light
+    ? 'input-light ajax-contact pb-30 pb-md-0'
+    : 'ajax-contact'
+  return (
+    <div className={wrapperClass}>
+      {heading && <h2 className="sec-title">{heading}</h2>}
+      <div className="wpcf7 no-js" id="wpcf7-f523-p48-o1" lang="en-US" dir="ltr" data-wpcf7-id="523">
+        <div className="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p><ul></ul></div>
+        <form action="/contact" method="post" className="wpcf7-form init" aria-label="Contact form" noValidate="noValidate" data-status="init">
+          <div className="row">
+            <div className="form-group col-md-6">
+              <span className="wpcf7-form-control-wrap"><input size="40" maxLength="400" className="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Your Name" type="text" name="name" /></span>
+              {light ? <i className="fas fa-user"></i> : <i className="fal fa-user"></i>}
+            </div>
+            <div className="form-group col-md-6">
+              <span className="wpcf7-form-control-wrap"><input size="40" maxLength="400" className="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" placeholder="Email Address" type="email" name="email" /></span>
+              {light ? <i className="fas fa-envelope"></i> : <i className="fal fa-envelope"></i>}
+            </div>
+            <div className="form-group col-md-6">
+              <span className="wpcf7-form-control-wrap"><input className="wpcf7-form-control wpcf7-number wpcf7-validates-as-required wpcf7-validates-as-number form-control" aria-required="true" aria-invalid="false" placeholder="Phone Number" type="number" name="phone" /></span>
+              {light ? <i className="fas fa-phone"></i> : <i className="fal fa-phone"></i>}
+            </div>
+            <div className="form-group col-md-6">
+              <span className="wpcf7-form-control-wrap">
+                <select className="wpcf7-form-control wpcf7-select wpcf7-validates-as-required form-select nice-select" aria-required="true" aria-invalid="false" name="subject">
+                  <option value="">Select Subject</option>
+                  <option value="General Query">General Query</option>
+                  <option value="Help Support">Help Support</option>
+                  <option value="Sales Support">Sales Support</option>
+                </select>
+              </span>
+              {light ? <i className="fas fa-chevron-down"></i> : <i className="fal fa-chevron-down"></i>}
+            </div>
+            <div className="form-group col-12">
+              <span className="wpcf7-form-control-wrap"><textarea cols="40" rows="10" maxLength="2000" className="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" placeholder="Your Message" name="message"></textarea></span>
+              {light ? <i className="fas fa-pencil"></i> : <i className="fal fa-pencil"></i>}
+            </div>
+            <div className="form-btn col-12">
+              <button className="th-btn">Send Message Now<i className="far fa-arrow-right ms-2"></i></button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

src/components/sections/ContactInfo.jsx

@@ -0,0 +1,21 @@
+export default function ContactInfo({ items }) {
+  return (
+    <div className="row gy-4">
+      {items.map((item, i) => (
+        <div key={i} className="col-xl-4 col-md-6">
+          <div className="team-contact">
+            <div className="icon-btn"><i className={item.icon}></i></div>
+            <div className="media-body">
+              <h5 className="box-title label">{item.label}</h5>
+              <p className="box-text">
+                {item.link ? (
+                  <a href={item.link} {...(item.target ? { target: item.target, rel: 'noopener noreferrer' } : {})}>{item.value}</a>
+                ) : item.value}
+              </p>
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/sections/Divider.jsx

@@ -0,0 +1,11 @@
+export default function Divider() {
+  return (
+    <div className="elementor-element elementor-element-a69b4f9 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-e-type="widget" data-element_type="widget" data-id="a69b4f9" data-widget_type="divider.default">
+      <div className="elementor-widget-container">
+        <div className="elementor-divider">
+          <span className="elementor-divider-separator"></span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sections/FeatureCards.jsx

@@ -0,0 +1,41 @@
+export default function FeatureCards({ features, layout = 'default' }) {
+  if (layout === 'choose') {
+    return (
+      <div className="choose-feature-wrap">
+        {features.map((f, i) => (
+          <div key={i} className="choose-feature">
+            <div className="box-icon"><img decoding="async" src={f.icon} alt={f.title} /></div>
+            <h3 className="box-title">{f.title}</h3>
+          </div>
+        ))}
+      </div>
+    )
+  }
+  if (layout === 'process') {
+    return (
+      <div className="contact-process-wrap no-bg">
+        {features.map((f, i) => (
+          <div key={i} className="contact-process">
+            <div className="box-number">{String(i + 1).padStart(2, '0')}</div>
+            <div className="media-body">
+              <h3 className="box-title">{f.title}</h3>
+              <p className="box-text">{f.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+  // default: about-media layout
+  return (
+    <div className="about-media-wrap">
+      {features.map((f, i) => (
+        <div key={i} className="about-media">
+          <div className="box-icon"><img decoding="async" src={f.icon} alt={f.title} /></div>
+          <h3 className="box-title">{f.title}</h3>
+          <p className="box-text">{f.description}</p>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/sections/Footer.jsx

@@ -0,0 +1,188 @@
+import { useRef } from 'react'
+import { Link } from 'react-router-dom'
+import { useNavFix } from '../../hooks/useNavFix'
+
+const SOCIAL_LINKS = [
+  { icon: 'fab fa-facebook-f', url: 'https://www.facebook.com' },
+  { icon: 'fab fa-twitter', url: 'https://www.twitter.com' },
+  { icon: 'fab fa-instagram', url: 'https://www.instagram.com' },
+  { icon: 'fab fa-linkedin-in', url: 'https://www.linkedin.com' },
+]
+
+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' },
+  { label: 'Landscaping & Fencing Works', path: '/service' },
+  { label: 'Building Contracting Works', path: '/service' },
+  { label: 'Interior & Fit-Out Works', path: '/service' },
+]
+
+const FOOTER_SERVICES_2 = [
+  { label: 'Metal Construction & Fabrications', path: '/service' },
+  { label: 'Chiller Hot & Cool Solutions', path: '/service' },
+  { label: 'Misting Solutions', path: '/service' },
+  { label: 'Adiabatic Pre-Cooling System', path: '/service' },
+]
+
+const FOOTER_LINKS = [
+  { label: 'About Profen Engineering', path: '/about' },
+  { label: 'Our Services', path: '/service' },
+  { label: 'Our Projects', path: '/project' },
+  { label: 'Reach Us', path: '/contact' },
+]
+
+export default function Footer() {
+  const ref = useRef(null)
+  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;}
+      `}</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="/wp-content/uploads/2026/01/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>
+                  </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>
+                </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>
+          </div>
+
+        </div>
+      </div>
+    </footer>
+  )
+}

src/components/sections/GoogleMap.jsx

@@ -0,0 +1,11 @@
+export default function GoogleMap({ src, title }) {
+  return (
+    <div className="elementor-element elementor-element-a99529c elementor-widget elementor-widget-google_maps" data-e-type="widget" data-element_type="widget" data-id="a99529c" data-widget_type="google_maps.default">
+      <div className="elementor-widget-container">
+        <div className="elementor-custom-embed">
+          <iframe loading="lazy" src={src} title={title} aria-label={title}></iframe>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sections/Header.jsx

@@ -0,0 +1,131 @@
+import { useLocation, Link } from 'react-router-dom'
+import { useRef } from 'react'
+import { useNavFix } from '../../hooks/useNavFix'
+
+const NAV_ITEMS = [
+  { label: 'HOME', path: '/' },
+  { label: 'ABOUT US', path: '/about' },
+  { label: 'SERVICES', path: '/service' },
+  { label: 'PROJECT', path: '/project' },
+  { label: 'CONTACT', path: '/contact' },
+]
+
+export default function Header() {
+  const { pathname } = useLocation()
+  const ref = useRef(null)
+  useNavFix(ref)
+
+  const isActive = (path) => {
+    if (path === '/') return pathname === '/'
+    return pathname.startsWith(path)
+  }
+
+  return (
+    <header ref={ref}>
+      <style id="elementor-post-945">{`
+.elementor-945 .elementor-element.elementor-element-1697af5{--display:flex;--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-945 .elementor-element.elementor-element-a628d9c .header-top{background:#ED1C24;}.elementor-945 .elementor-element.elementor-element-a628d9c .main-menu>ul>li>a, .elementor-945 .elementor-element.elementor-element-a628d9c .main-menu ul.sub-menu li a{font-size:15px;font-weight:600;}
+      `}</style>
+      <div className="elementor elementor-945" data-elementor-id="945" data-elementor-type="wp-post">
+        <div className="elementor-element elementor-element-1697af5 e-con-full e-flex e-con e-parent" data-e-type="container" data-element_type="container" data-id="1697af5">
+          <div className="elementor-element elementor-element-a628d9c elementor-widget elementor-widget-rakarheader" data-e-type="widget" data-element_type="widget" data-id="a628d9c" data-widget_type="rakarheader.default">
+            <div className="elementor-widget-container">
+
+              {/* Mobile Menu */}
+              <div className="th-menu-wrapper">
+                <div className="th-menu-area text-center">
+                  <button className="th-menu-toggle"><i className="fas fa-times"></i></button>
+                  <div className="mobile-logo">
+                    <a href="/"><img alt="logo" src="/wp-content/uploads/2026/01/logo_pe-Rd-Wh-001.svg" /></a>
+                  </div>
+                  <div className="th-mobile-menu">
+                    <ul>
+                      {NAV_ITEMS.map(item => (
+                        <li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
+                          <Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+
+              {/* Search Popup */}
+              <div className="popup-search-box d-none d-lg-block">
+                <button className="searchClose"><i className="fas fa-times"></i></button>
+                <form action="index.html" method="get">
+                  <input name="s" placeholder="What are you looking for?" required="" type="search" value="" />
+                  <button type="submit"><i className="fas fa-search"></i></button>
+                </form>
+              </div>
+
+              {/* Main Header */}
+              <div className="th-header header-layout5">
+                {/* Top Bar */}
+                <div className="header-top">
+                  <div className="container">
+                    <div className="row justify-content-center justify-content-lg-between align-items-center gy-2">
+                      <div className="col-auto d-none d-lg-block">
+                        <div className="header-links">
+                          <ul>
+                            <li><i className="fas fa-location-dot text-white"></i> <a href="https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7" target="_blank" rel="noopener noreferrer">Al Qusais Industrial Area-3, Dubai, UAE</a></li>
+                            <li><i className="fas fa-clock text-white"></i> Monday to Saturday: 8 am - 5 pm</li>
+                          </ul>
+                        </div>
+                      </div>
+                      <div className="col-auto">
+                        <div className="header-links">
+                          <ul>
+                            <li><i className="fas fa-headset" style={{ color: '#fff' }}></i> <a href="tel:+97143200869">TALK TO US</a></li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Sticky Nav */}
+                <div className="sticky-wrapper">
+                  <div className="container">
+                    <div className="menu-area">
+                      <div className="row align-items-start justify-content-between">
+                        <div className="col-auto d-none d-lg-block">
+                          <div className="header-logo">
+                            <a href="/"><img alt="logo_pe Rd Wh 70" src="/wp-content/uploads/2024/07/logo_pe-Rd-Wh-70.png" /></a>
+                          </div>
+                        </div>
+                        <div className="col">
+                          <div className="menu-wrap">
+                            <div className="header-logo d-block d-lg-none">
+                              <a href="/"><img alt="logo_pe new bk 70" src="/wp-content/uploads/2024/07/logo_pe-new-bk-70.png" /></a>
+                            </div>
+                            <nav className="main-menu d-none d-lg-inline-block">
+                              <ul className="rakar-menu">
+                                {NAV_ITEMS.map(item => (
+                                  <li key={item.path} className={`menu-item menu-item-type-post_type menu-item-object-page ${isActive(item.path) ? 'current-menu-item' : ''}`}>
+                                    <Link to={item.path} {...(isActive(item.path) ? { 'aria-current': 'page' } : {})}>{item.label}</Link>
+                                  </li>
+                                ))}
+                              </ul>
+                            </nav>
+                            <button className="simple-icon searchBoxToggler d-none d-lg-inline-block" type="button"><i className="far fa-search"></i></button>
+                            <button className="th-menu-toggle d-block d-lg-none" type="button"><i className="far fa-bars"></i></button>
+                          </div>
+                        </div>
+                        <div className="col-auto d-none d-xl-block">
+                          <div className="header-button">
+                            <a className="th-btn rounded-12 style3 th_btn" href="/contact">Get A Quote<i className="fas fa-arrow-right ms-2"></i></a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}

src/components/sections/PhoneWidget.jsx

@@ -0,0 +1,11 @@
+export default function PhoneWidget({ phone, label = 'Call Us' }) {
+  return (
+    <div className="call-btn">
+      <div className="play-btn"><i className="fas fa-phone"></i></div>
+      <div className="media-body">
+        <p className="box-label">{label}</p>
+        <h6 className="box-link"><a href={`tel:${phone.replace(/\s/g, '')}`}>{phone}</a></h6>
+      </div>
+    </div>
+  )
+}

src/components/sections/ProjectFilterGrid.jsx

@@ -0,0 +1,51 @@
+import { Link } from 'react-router-dom'
+
+const FILTERS = ['All', 'Misting', 'Pro-Sheild Adiabatic Cooling', 'Electrical Renovation', 'Swimming pool', 'MEP']
+const FILTER_CLASSES = { 'All': '*', 'Misting': '.cat1', 'Pro-Sheild Adiabatic Cooling': '.cat3', 'Electrical Renovation': '.cat2', 'Swimming pool': '.cat4', 'MEP': '.cat5' }
+
+const PROJECTS = [
+  { category: 'cat1', image: '/wp-content/uploads/2025/02/PIC-3.jpg', alt: 'PIC 3', title: 'Outdoor Misting', description: 'Our outdoor misting project includes the design, installation, and maintenance of a state-of-the-art misting system tailored to your specific outdoor space.' },
+  { category: 'cat3', image: '/wp-content/uploads/2025/02/PIC-2.jpg', alt: 'PIC 2', title: 'Adiabatic Cooling', description: 'An advanced energy-efficient cooling solution designed to enhance the performance of HVAC, refrigeration, and industrial cooling systems.' },
+  { category: 'cat2', image: '/wp-content/uploads/2024/07/project_2_2.jpg', alt: 'project_2_2', title: 'Electrical renovation', description: 'Our electrical renovation project is designed to upgrade old, inefficient, or unsafe electrical systems to meet modern standards and energy efficiency' },
+  { category: 'cat5', image: '/wp-content/uploads/2024/07/project_2_4.jpg', alt: 'project_2_4', title: 'MEP Works', description: 'we provide plumbing solutions for residential, commercial & industrial projects, ensuring efficient water distribution, drainage & sanitation systems.' },
+  { category: 'cat1', image: '/wp-content/uploads/2025/02/PIC-4.jpg', alt: 'PIC 4', title: 'Landscaping Project', description: 'Our landscaping projects focus on aesthetics, functionality, and sustainability, ensuring a harmonious blend of nature and architecture.' },
+  { category: 'cat4', image: '/wp-content/uploads/2025/02/PIC-7.jpg', alt: 'PIC 7', title: 'Pool Hot & Cool Project', description: 'Our Swimming Pool Hot & Cool Project includes customized temperature control systems that enhance comfort, improve efficiency & reduce energy costs.' },
+]
+
+export default function ProjectFilterGrid() {
+  return (
+    <div className="rakar-fluid">
+      <div className="builder-page-wrapper">
+        <div data-elementor-type="wp-page" data-elementor-id="36" className="elementor elementor-36">
+          <div className="elementor-element elementor-element-116e028 e-flex e-con-boxed e-con e-parent" data-id="116e028" data-element_type="container" data-e-type="container">
+            <div className="e-con-inner">
+              <div className="elementor-element elementor-element-860beb9 elementor-widget elementor-widget-rakarprojectfilter" data-id="860beb9" data-element_type="widget" data-e-type="widget" data-widget_type="rakarprojectfilter.default">
+                <div className="elementor-widget-container">
+                  <div className="filter-menu indicator-active filter-menu-active">
+                    {FILTERS.map((f, i) => (
+                      <button key={f} data-filter={FILTER_CLASSES[f]} className={`tab-btn${i === 0 ? ' active' : ''}`} type="button">{f}</button>
+                    ))}
+                  </div>
+                  <div className="row gy-4 filter-active">
+                    {PROJECTS.map((p, i) => (
+                      <div key={i} className={`col-xxl-3 col-lg-4 col-md-6 filter-item ${p.category}`}>
+                        <div className="project-grid">
+                          <div className="box-img"><img decoding="async" src={p.image} alt={p.alt} /></div>
+                          <div className="box-content">
+                            <h3 className="box-title"><Link to="/contact">{p.title}</Link></h3>
+                            <p className="box-text">{p.description}</p>
+                            <Link to="/contact" className="th-btn2 style2 btn-sm th_btn">Learn More<i className="far fa-arrow-right"></i></Link>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sections/SectionTitle.jsx

@@ -0,0 +1,14 @@
+export default function SectionTitle({ subtitle, heading, description, alignment = 'left', subtitleIcon, dark }) {
+  return (
+    <div className={`title-area text-${alignment}`}>
+      {subtitle && (
+        <span className={`sub-title${subtitleIcon || dark ? '2' : ''}${dark ? ' shape-white' : ''}`}>
+          {subtitleIcon && <img decoding="async" src={subtitleIcon} alt="Shape" />}
+          {subtitle}
+        </span>
+      )}
+      {heading && <h2 className="sec-title">{heading}</h2>}
+      {description && <p>{description}</p>}
+    </div>
+  )
+}

src/components/sections/ServiceBody.jsx

@@ -0,0 +1,18 @@
+import ServiceContentBlocks from './ServiceContentBlocks'
+
+export default function ServiceBody({ blocks }) {
+  return (
+    <>
+      <div className="elementor-element elementor-element-b3af1a5 elementor-widget elementor-widget-heading" data-id="b3af1a5" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default">
+        <div className="elementor-widget-container">
+          {/* ponytail: heading widget kept for structural compatibility; title rendered in breadcrumb */}
+        </div>
+      </div>
+      <div className="elementor-element elementor-element-6cfa376 elementor-widget elementor-widget-text-editor" data-id="6cfa376" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
+        <div className="elementor-widget-container">
+          <ServiceContentBlocks blocks={blocks} />
+        </div>
+      </div>
+    </>
+  )
+}

src/components/sections/ServiceBreadcrumb.jsx

@@ -0,0 +1,17 @@
+export default function ServiceBreadcrumb({ title }) {
+  return (
+    <div className="breadcumb-banner">
+      <div className="breadcumb-wrapper" id="breadcumbwrap">
+        <div className="container">
+          <div className="breadcumb-content">
+            <h1 className="breadcumb-title">{title}</h1>
+            <ul className="breadcumb-menu">
+              <li><a href="/">Home</a></li>
+              <li>{title}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sections/ServiceContentBlocks.jsx

@@ -0,0 +1,34 @@
+function renderText(text) {
+  if (!text.includes('**')) return text
+  const parts = text.split(/(\*\*[^*]+\*\*)/)
+  return parts.map((part, i) => {
+    if (part.startsWith('**') && part.endsWith('**')) {
+      return <strong key={i}>{part.slice(2, -2)}</strong>
+    }
+    return part
+  })
+}
+
+export default function ServiceContentBlocks({ blocks }) {
+  return (
+    <>
+      {blocks.map((block, i) => {
+        switch (block.type) {
+          case 'paragraph':
+            return <p key={i}>{renderText(block.text)}</p>
+          case 'heading':
+            const Tag = `h${block.level}`
+            return <Tag key={i}><strong>{block.text}</strong></Tag>
+          case 'list':
+            return (
+              <ul key={i}>
+                {block.items.map((item, j) => <li key={j}>{item}</li>)}
+              </ul>
+            )
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}

src/components/sections/ServiceGridSection.jsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router-dom"
+import { SERVICE_CARDS } from "../../data/service-grid-data"
+
+export default function ServiceGridSection() {
+  return (
+    <div
+      className="elementor-element elementor-element-97218ac elementor-widget elementor-widget-rakarservice"
+      data-id="97218ac"
+      data-element_type="widget"
+      data-e-type="widget"
+      data-widget_type="rakarservice.default"
+    >
+      <div className="elementor-widget-container">
+        <div className="row gy-4">
+          {SERVICE_CARDS.map((card) => (
+            <div key={card.number} className="col-xxl-3 col-lg-4 col-md-6">
+              <div className="service-card">
+                <div className="box-number">{card.number}</div>
+                <div className="box-icon">
+                  <img decoding="async" src={card.icon} alt={card.title} />
+                </div>
+                <p className="box-subtitle">{card.subtitle}</p>
+                <h3 className="box-title">
+                  <Link to={`/service/${card.slug}`}>{card.title}</Link>
+                </h3>
+                <p className="box-text">{card.text}</p>
+                <Link to={`/service/${card.slug}`} className="th-btn btn-sm th_btn">
+                  Read More<i className="far fa-arrow-right ms-2"></i>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/sections/ServiceImage.jsx

@@ -0,0 +1,19 @@
+export default function ServiceImage({ src, srcSet, width, height, alt }) {
+  return (
+    <div className="elementor-element elementor-element-2837963 elementor-widget elementor-widget-image" data-id="2837963" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
+      <div className="elementor-widget-container">
+        <img
+          fetchPriority="high"
+          decoding="async"
+          width={width}
+          height={height}
+          src={src}
+          className="attachment-full size-full wp-image-3201"
+          alt={alt || ''}
+          srcSet={srcSet}
+          sizes="(max-width: 872px) 100vw, 872px"
+        />
+      </div>
+    </div>
+  )
+}

src/components/sections/ServiceSidebar.jsx

@@ -0,0 +1,31 @@
+import { Link } from 'react-router-dom'
+import { SERVICE_SIDEBAR_ITEMS, MENU_ITEM_IDS } from '../../config'
+
+export default function ServiceSidebar({ activeSlug }) {
+  return (
+    <div className="elementor-element elementor-element-205732a elementor-widget elementor-widget-sidebar" data-id="205732a" data-element_type="widget" data-e-type="widget" data-widget_type="sidebar.default">
+      <div className="elementor-widget-container">
+        <div id="nav_menu-2" className="widget widget_nav_menu">
+          <div className="menu-service-side-panel-container">
+            <ul id="menu-service-side-panel" className="menu">
+              {SERVICE_SIDEBAR_ITEMS.map((item) => (
+                <li
+                  key={item.postId}
+                  id={`menu-item-${MENU_ITEM_IDS[item.slug]}`}
+                  className={`menu-item menu-item-type-post_type menu-item-object-page ${activeSlug === item.slug ? 'current-menu-item' : ''}`}
+                >
+                  <Link
+                    to={`/service/${item.slug}`}
+                    {...(activeSlug === item.slug ? { 'aria-current': 'page' } : {})}
+                  >
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}