Yusuf-Sabuwala/profen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

most

Browse Source
This commit is contained in:
Yusuf Sabuwala
2026-07-20 09:49:31 +00:00
parent 5b31247e50
commit bab5f508fb
13 changed files with 195 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.jsx
View File

@@ -1,3 +1,4 @@
import { useEffect } from 'react'
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
import Layout from './components/Layout'
import ErrorBoundary from './components/ErrorBoundary'
@@ -19,6 +20,13 @@ function NotFound() {
}
export default function App() {
useEffect(() => {
const preloader = document.getElementById("preloader")
if (preloader) {
preloader.classList.add("loaded")
setTimeout(() => preloader.remove(), 500)
}
}, [])
return (
<BrowserRouter>
<ErrorBoundary>

20
src/components/WhatsAppButton.jsx
View File

@@ -22,17 +22,19 @@ export default function WhatsAppButton() {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
z-index: 9999999;
width: 56px;
height: 56px;
border-radius: 50%;
background: #ffffff;
display: flex;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
visibility: visible !important;
opacity: 1 !important;
}
.whatsapp-float:hover {
transform: scale(1.08);
@@ -51,8 +53,18 @@ export default function WhatsAppButton() {
@media (max-width: 767px) {
.whatsapp-float {
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
right: calc(16px + env(safe-area-inset-right, 0px));
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
width: 52px !important;
height: 52px !important;
z-index: 9999999 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.whatsapp-float svg {
width: 26px !important;
height: 26px !important;
}
}
`}</style>

2
src/components/about/AboutExpertise.jsx
View File

@@ -63,7 +63,7 @@ export default function AboutExpertise() {
<img decoding="async" src="/assets/images/choose_feature_2.svg" alt="choose_feature_2" />
</div>
<h3 className="box-title"><a href="../about/index.html">OUR VISION</a></h3>
<p className="box-text">Be a top engineering solutions provider in the UAE, known for innovation and quality.heating, and misting systems.</p>
<p className="box-text">Be a top engineering solutions provider in the UAE, known for innovation and quality. Heating, and misting systems.</p>
<a href="../about/index.html" className="th-btn btn-sm th_btn">
Read More<i className="far fa-arrow-right ms-2"></i>
</a>

4
src/components/about/AboutIntro.jsx
View File

@@ -59,7 +59,7 @@ export default function AboutIntro() {
<div className="checklist">
<ul>
<li>Professional &amp; Certified</li>
<li>Uncompromized Quality Check</li>
<li>Uncompromised Quality Check</li>
</ul>
</div>
</div>
@@ -104,7 +104,7 @@ export default function AboutIntro() {
</div>
<div className="media-body">
<p className="box-label">Call Us</p>
<h6 className="box-link"><a href="tel:+971 4 320 0869">+971 4 320 0869</a></h6>
<h6 className="box-link"><a href="tel:+97143200869">+971 4 320 0869</a></h6>
</div>
</div>
</div>

4
src/components/home/HomeAbout.jsx
View File

@@ -36,7 +36,7 @@ export default function HomeAbout() {
About Us
</span>
<h2 className="sec-title">Building Future with Integrity</h2>
<p>Profen Engineering, your trusted partner in comprehensive Sustainability, MEP &amp;Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry.</p>
<p>Profen Engineering, your trusted partner in comprehensive Sustainability, MEP &amp; Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry.</p>
</div>
</div>
</div>
@@ -95,7 +95,7 @@ export default function HomeAbout() {
</div>
<div className="media-body">
<p className="box-label">Call Us</p>
<h6 className="box-link"><a href="tel: +97143200869"> +971 4 320 0869</a></h6>
<h6 className="box-link"><a href="tel:+97143200869"> +971 4 320 0869</a></h6>
</div>
</div>
</div>

8
src/components/home/HomeHero.jsx
View File

@@ -15,7 +15,7 @@ export default function HomeHero() {
</h1>
<p className="hero-text">Promist is a specialized brand, dedicated to delivering innovative, high-performance misting and evaporative cooling solutions.</p>
<div className="btn-group">
<Link to="/service/misting-solutions" className="th-btn rounded-12 style2 th_btn">Our All Services<i className="fas fa-arrow-right ms-2"></i></Link>
<Link to="/service/misting-solutions" className="th-btn rounded-12 style2 th_btn">View the service<i className="fas fa-arrow-right ms-2"></i></Link>
</div>
</div>
</div>
@@ -32,7 +32,7 @@ export default function HomeHero() {
</h1>
<p className="hero-text">Designed for extreme climatic conditions, PRO-SHIELD enhances system efficiency while significantly reducing energy consumption.</p>
<div className="btn-group">
<Link to="/service/adiabatic-pre-cooling-system" className="th-btn rounded-12 style2 th_btn">Our All Services<i className="fas fa-arrow-right ms-2"></i></Link>
<Link to="/service/adiabatic-pre-cooling-system" className="th-btn rounded-12 style2 th_btn">View the service<i className="fas fa-arrow-right ms-2"></i></Link>
</div>
</div>
</div>
@@ -47,9 +47,9 @@ export default function HomeHero() {
<span className="title1">Chill Out or Heat Up</span>
<span className="title2"><span className="text-theme">We've got Your </span> Perfect Solution</span>
</h1>
<p className="hero-text">Our Heat and Chill pump can be used for heating or cooling swimming pool. spa or other tank water cooling System.</p>
<p className="hero-text">Our Heat and Chill pump can be used for heating or cooling swimming pool, spa or other tank water cooling system.</p>
<div className="btn-group">
<Link to="/service/chiller-hot-cool-solutions" className="th-btn rounded-12 style2 th_btn">Our All Services<i className="fas fa-arrow-right ms-2"></i></Link>
<Link to="/service/chiller-hot-cool-solutions" className="th-btn rounded-12 style2 th_btn">View the service<i className="fas fa-arrow-right ms-2"></i></Link>
</div>
</div>
</div>

4
src/components/home/HomeProjects.jsx
View File

@@ -62,7 +62,7 @@ export default function HomeProjects() {
<div className="box-content">
<p className="box-subtitle">Heating Solution</p>
<h3 className="box-title"><a href="/project">Swimming Pool Heating</a></h3>
<p className="box-text">Heat Pumps – Energy-efficient heating for year-round pool comfort, Electric Heaters – Fast and precise temperature control,Solar Pool Heaters – Eco-friendly and cost-saving solutions</p>
<p className="box-text">Heat Pumps – Energy-efficient heating for year-round pool comfort, Electric Heaters – Fast and precise temperature control, Solar Pool Heaters – Eco-friendly and cost-saving solutions</p>
</div>
</div>
</div>
@@ -130,7 +130,7 @@ export default function HomeProjects() {
<div className="box-content">
<p className="box-subtitle">Cooling Solution</p>
<h3 className="box-title"><a href="/project">Swimming Pool Cooling</a></h3>
<p className="box-text">Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control,Energy-Efficient Pool Cooling Systems</p>
<p className="box-text">Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control, Energy-Efficient Pool Cooling Systems</p>
</div>
</div>
</div>

4
src/components/home/HomeServicesSection.jsx
View File

@@ -4,7 +4,7 @@ const SERVICES = [
{ slug: "adiabatic-pre-cooling-system", title: "Adiabatic Pre-Cooling System", img: "/assets/images/img-1.jpg", icon: "/assets/images/service_block_4.svg" },
{ slug: "misting-solutions", title: "Promist Misting Solutions", img: "/assets/images/IMG-9.jpg", icon: "/assets/images/why_feature_6.svg" },
{ slug: "chiller-hot-cool-solutions", title: "Chiller Hot &amp; Cool Solution", img: "/assets/images/IMG-4.jpg", icon: "/assets/images/title_icon2.svg" },
{ slug: "building-management-system", title: "Building Mngmt System", img: "/assets/images/bms.jpg", icon: "/assets/images/why_feature_2.svg" },
{ slug: "building-management-system", title: "Building Management System", img: "/assets/images/bms.jpg", icon: "/assets/images/why_feature_2.svg" },
{ slug: "interior-fit-out-works", title: "Interior &amp; Fit-Out Work", img: "/assets/images/IMG-6.jpg", icon: "/assets/images/why_feature_1.svg" },
{ slug: "building-contracting-works", title: "Building Contracting Works", img: "/assets/images/IMG-3.jpg", icon: "/assets/images/why_feature_3.svg" },
{ slug: "metal-construction-fabrications", title: "Metal Construction &amp; Fabrications", img: "/assets/images/IMG-2.jpg", icon: "/assets/images/why_feature_5.svg" },
@@ -53,7 +53,7 @@ export default function HomeServicesSection() {
>
<div className="elementor-widget-container">
<div className="btn-wrapper">
<Link className="th-btn th_btn style2 rounded-12" to="/contact">View All Services<i className="far fa-arrow-right"></i></Link>
<Link className="th-btn th_btn style2 rounded-12" to="/contact">View the service<i className="far fa-arrow-right"></i></Link>
</div>
</div>
</div>

2
src/components/sections/Header.jsx
View File

@@ -14,7 +14,7 @@ const SERVICE_SUBITEMS = [
{ label: 'Adiabatic Pre-Cooling System', slug: 'adiabatic-pre-cooling-system' },
{ label: 'Promist Misting Solutions', slug: 'misting-solutions' },
{ label: 'Chiller Hot & Cool Solution', slug: 'chiller-hot-cool-solutions' },
{ label: 'Building Mngmt System', slug: 'building-management-system' },
{ label: 'Building Management System', slug: 'building-management-system' },
{ label: 'Interior & Fit-Out Work', slug: 'interior-fit-out-works' },
{ label: 'Building Contracting Works', slug: 'building-contracting-works' },
{ label: 'Metal Construction & Fabrications', slug: 'metal-construction-fabrications' },

158
src/components/services/ServicesHero.jsx
View File

@@ -1,158 +0,0 @@
import { Link } from "react-router-dom"
export default function ServicesHero() {
return (
<div
className="elementor-element elementor-element-e471ccf e-flex e-con-boxed e-con e-parent"
data-id="e471ccf"
data-element_type="container"
data-e-type="container"
>
<div className="e-con-inner">
{/* Section Title */}
<div
className="elementor-element elementor-element-58994a2 elementor-widget__width-initial elementor-widget elementor-widget-rakarsectiontitle"
data-id="58994a2"
data-element_type="widget"
data-e-type="widget"
data-widget_type="rakarsectiontitle.default"
>
<div className="elementor-widget-container">
<div className="title-area text-center">
<span className="sub-title">
<img decoding="async" src="/assets/images/title_icon.svg" alt="Shape" />
Our Services
</span>
<h2 className="sec-title">What Services We Offer</h2>
<p>Welcome to Rakar renovation, we provide a robust synopsis for high level overviews. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
</div>
</div>
</div>
{/* Service Cards Grid */}
<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">
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">08</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/price_1_3.svg" alt="price_1_3" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/adiabatic-pre-cooling-system">Adiabatic Pre-Cooling System</Link></h3>
<p className="box-text">Designed to optimize your cooling efficiency while reducing energy consumption.</p>
<Link to="/service/adiabatic-pre-cooling-system" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">07</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/price_1_1.svg" alt="price_1_1" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/misting-solutions">Misting Solutions</Link></h3>
<p className="box-text">We specialize in providing high-performance misting solutions designed to keep you cool.</p>
<Link to="/service/misting-solutions" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">01</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/service_card_2.svg" alt="service_card_2" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/electro-mechanical-works">Electro-Mechanical Works</Link></h3>
<p className="box-text">We, at Profen, specialize in comprehensive electro-mechanical solutions,..</p>
<Link to="/service/electro-mechanical-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">02</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/service_grid_1.svg" alt="service_grid_1" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/landscaping-fencing-works">Landscaping &amp; Fencing</Link></h3>
<p className="box-text">Our expert team ensures exceptional design, durable materials,..</p>
<Link to="/service/landscaping-fencing-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">03</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/service_card_4.svg" alt="service_card_4" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/metal-construction-fabrications">Metal Construction &amp; Fabrications</Link></h3>
<p className="box-text">We ensure superior craftsmanship, strength, and reliability in every...</p>
<Link to="/service/metal-construction-fabrications" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">04</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/service_card_7.svg" alt="service_card_7" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/building-contracting-works">Building Contracting Works</Link></h3>
<p className="box-text">We provide comprehensive building contracting services, delivering..</p>
<Link to="/service/building-contracting-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">05</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/service_card_3.svg" alt="service_card_3" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/interior-fit-out-works">Interior &amp; Fit-Out Works</Link></h3>
<p className="box-text">You are looking to revamp a home, office, or commercial space,..</p>
<Link to="/service/interior-fit-out-works" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
<div className="col-xxl-3 col-lg-4 col-md-6">
<div className="service-card">
<div className="box-number">06</div>
<div className="box-icon">
<img decoding="async" src="/assets/images/service_card_8.svg" alt="service_card_8" />
</div>
<p className="box-subtitle">Service And Repairs</p>
<h3 className="box-title"><Link to="/service/chiller-hot-cool-solutions">Chiller Hot &amp; Cool Solutions</Link></h3>
<p className="box-text">We specialize in providing advanced chiller systems for both heating and cooling</p>
<Link to="/service/chiller-hot-cool-solutions" className="th-btn btn-sm th_btn">Read More<i className="far fa-arrow-right ms-2"></i></Link>
</div>
</div>
</div>
</div>
</div>
{/* Divider */}
<div
className="elementor-element elementor-element-72617d9 elementor-widget-divider--view-line elementor-widget elementor-widget-divider"
data-id="72617d9"
data-element_type="widget"
data-e-type="widget"
data-widget_type="divider.default"
>
<div className="elementor-widget-container">
<div className="elementor-divider">
<span className="elementor-divider-separator"></span>
</div>
</div>
</div>
</div>
</div>
)
}

106
src/css/dynamic.css
View File

@@ -120,7 +120,8 @@ img { max-width: 100%; height: auto; }
@media (max-width: 767px) {
/* === Header: reduce overlap and size === */
.header-layout5 { margin-bottom: 0 !important; }
.header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; }
.header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; margin-top: 16px !important;}
.menu-wrap .col { padding-top: 8px !important; }
.header-layout5 .header-logo { transform: none !important; padding: 8px 0 !important; }
.header-layout5 .header-logo img { max-width: 140px !important; }
.header-layout5 .header-button { transform: none !important; padding-top: 8px !important; }
@@ -280,6 +281,18 @@ img { max-width: 100%; height: auto; }
.header-top .header-links li:not(:last-child):after {
display: none;
}
/* Tab menu: force one row on mobile */
.tab-menu2 {
flex-wrap: nowrap !important;
gap: 6px !important;
}
.tab-menu2 .tab-btn {
font-size: 13px !important;
padding: 6px 14px !important;
line-height: 36px !important;
white-space: nowrap !important;
border-radius: 20px !important;
}
}
/* ── STICKY NAV: compress on scroll ── */
@@ -365,11 +378,22 @@ img { max-width: 100%; height: auto; }
}
@media (max-width: 767px) {
.hero-5 {
margin-top: 24px;
}
.hero-5 .hero-inner {
min-height: 460px;
height: 460px !important;
min-height: 460px !important;
max-height: 460px !important;
}
.hero-5 .swiper-slide {
height: 460px !important;
}
.hero-5 .swiper-wrapper {
height: 460px !important;
}
.hero-style5 {
padding: 80px 0;
padding: 70px 0 30px 0;
}
.hero-style5 .hero-title {
font-size: 32px;
@@ -680,13 +704,25 @@ img { max-width: 100%; height: auto; }
}
/* Reset brand-inner: remove desktop margin-right:200px, hide decorative shapes */
.brand-sec3 .brand-inner {
[data-id="7e4b13e"] .brand-sec3 .brand-inner {
margin-right: 0 !important;
padding: 12px 0 !important;
background: transparent !important;
display: none !important;
}
.brand-sec3 .brand-inner:before,
.brand-sec3 .brand-inner:after {
[data-id="7e4b13e"] .brand-sec3 .brand-inner:before,
[data-id="7e4b13e"] .brand-sec3 .brand-inner:after {
display: none !important;
}
/* HomePartners sponsor cloud: override margin-right to fill viewport */
[data-id="998ec08"] .brand-sec3 .brand-inner {
margin-right: 0 !important;
padding: 16px 0 !important;
background: transparent !important;
}
[data-id="998ec08"] .brand-sec3 .brand-inner:before,
[data-id="998ec08"] .brand-sec3 .brand-inner:after {
display: none !important;
}
@@ -706,7 +742,7 @@ img { max-width: 100%; height: auto; }
/* Logo images: BIG, full-width within card */
.brand-sec3 .brand-card img {
max-height: 60px !important;
max-height: 80px !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
@@ -986,3 +1022,59 @@ img { max-width: 100%; height: auto; }
-webkit-filter: none !important;
filter: none !important;
}
/* ══════════════════════════════════════════════════════════════
WHATSAPP BUTTON: ensure always visible on all devices
══════════════════════════════════════════════════════════════ */
.whatsapp-float {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 99999 !important;
}
@media (max-width: 767px) {
.whatsapp-float {
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
right: calc(16px + env(safe-area-inset-right, 0px)) !important;
width: 52px !important;
height: 52px !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 99999 !important;
}
.whatsapp-float svg {
width: 26px !important;
height: 26px !important;
}
.elementor-23 .elementor-element.elementor-element-fb76345 {
padding-top: 20px !important;
}
.elementor-23 .elementor-element.elementor-element-998ec08{
margin-bottom: 0px !important;
}
.elementor-23 .elementor-element.elementor-element-9ff3146 {
padding-bottom: 20px !important;
}
.footer-contact-area {
padding: 0px !important;
}
.call-btn {
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
.customer-box {
padding: 8px 19px !important;
}
}
/* ══════════════════════════════════════════════════════════════
FIX 5: Hero Spacing — match hero-to-services gap with header-to-hero gap
The brand/sponsor section (HomeClients) already overlaps hero by 72px,
providing visual separation. Reduce services section padding-top to 0
so the total gap equals header-to-hero gap (~0px desktop, ~24px mobile).
══════════════════════════════════════════════════════════════ */

10
src/hooks/useLayoutInit.js
View File

@@ -4,15 +4,23 @@ export default function useLayoutInit() {
const initialized = useRef(false)
useEffect(() => {
// Dual guard: useRef + window.__rakarInit
// useRef protects against re-renders in same mount cycle
// window.__rakarInit protects against React 19 strict mode
// unmount/remount cycle where useRef may be reset
if (initialized.current) return
initialized.current = true
if (window.__rakarInit) return
let destroyed = false
let rafId = null
function tryInit() {
if (destroyed) return false
if (typeof window.rakar_content_load_scripts === 'function') {
window.rakar_content_load_scripts()
if (!window.__rakarInit) {
window.__rakarInit = true
window.rakar_content_load_scripts()
}
window.__layoutReady = true
window.dispatchEvent(new Event('layout-ready'))
return true