From bab5f508fb59ba6ed2d7f3361b5521c044dc41d5 Mon Sep 17 00:00:00 2001 From: yusuf0279 Date: Mon, 20 Jul 2026 09:49:31 +0000 Subject: [PATCH] most --- index.html | 50 ++++++- src/App.jsx | 8 + src/components/WhatsAppButton.jsx | 20 ++- src/components/about/AboutExpertise.jsx | 2 +- src/components/about/AboutIntro.jsx | 4 +- src/components/home/HomeAbout.jsx | 4 +- src/components/home/HomeHero.jsx | 8 +- src/components/home/HomeProjects.jsx | 4 +- src/components/home/HomeServicesSection.jsx | 4 +- src/components/sections/Header.jsx | 2 +- src/components/services/ServicesHero.jsx | 158 -------------------- src/css/dynamic.css | 106 ++++++++++++- src/hooks/useLayoutInit.js | 10 +- 13 files changed, 195 insertions(+), 185 deletions(-) delete mode 100644 src/components/services/ServicesHero.jsx diff --git a/index.html b/index.html index bb4441e..866a233 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,57 @@ + -
+ +
+
+ + +
+
+
diff --git a/src/App.jsx b/src/App.jsx index 2abaf29..7df5549 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -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 ( diff --git a/src/components/WhatsAppButton.jsx b/src/components/WhatsAppButton.jsx index 5c0baf5..cc9ef9c 100644 --- a/src/components/WhatsAppButton.jsx +++ b/src/components/WhatsAppButton.jsx @@ -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; } } `} diff --git a/src/components/about/AboutExpertise.jsx b/src/components/about/AboutExpertise.jsx index e3e1e62..de78861 100644 --- a/src/components/about/AboutExpertise.jsx +++ b/src/components/about/AboutExpertise.jsx @@ -63,7 +63,7 @@ export default function AboutExpertise() { choose_feature_2

OUR VISION

-

Be a top engineering solutions provider in the UAE, known for innovation and quality.heating, and misting systems.

+

Be a top engineering solutions provider in the UAE, known for innovation and quality. Heating, and misting systems.

Read More diff --git a/src/components/about/AboutIntro.jsx b/src/components/about/AboutIntro.jsx index db36c9f..1b6cff8 100644 --- a/src/components/about/AboutIntro.jsx +++ b/src/components/about/AboutIntro.jsx @@ -59,7 +59,7 @@ export default function AboutIntro() {
  • Professional & Certified
    • -
  • Uncompromized Quality Check
    • +
  • Uncompromised Quality Check
@@ -104,7 +104,7 @@ export default function AboutIntro() {

Call Us

-
+971 4 320 0869
+
+971 4 320 0869
diff --git a/src/components/home/HomeAbout.jsx b/src/components/home/HomeAbout.jsx index 0fa53f4..6f43c48 100644 --- a/src/components/home/HomeAbout.jsx +++ b/src/components/home/HomeAbout.jsx @@ -36,7 +36,7 @@ export default function HomeAbout() { About Us

Building Future with Integrity

-

Profen Engineering, your trusted partner in comprehensive Sustainability, MEP &Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry.

+

Profen Engineering, your trusted partner in comprehensive Sustainability, MEP & Construction Services. With a commitment to excellence, innovation, and client satisfaction, we stand as a beacon of reliability in the construction industry.

@@ -95,7 +95,7 @@ export default function HomeAbout() {

Call Us

-
+971 4 320 0869
+
+971 4 320 0869
diff --git a/src/components/home/HomeHero.jsx b/src/components/home/HomeHero.jsx index 5ee2645..e99be63 100644 --- a/src/components/home/HomeHero.jsx +++ b/src/components/home/HomeHero.jsx @@ -15,7 +15,7 @@ export default function HomeHero() {

Promist is a specialized brand, dedicated to delivering innovative, high-performance misting and evaporative cooling solutions.

- Our All Services + View the service
@@ -32,7 +32,7 @@ export default function HomeHero() {

Designed for extreme climatic conditions, PRO-SHIELD enhances system efficiency while significantly reducing energy consumption.

- Our All Services + View the service
@@ -47,9 +47,9 @@ export default function HomeHero() { Chill Out or Heat Up We've got Your Perfect Solution -

Our Heat and Chill pump can be used for heating or cooling swimming pool. spa or other tank water cooling System.

+

Our Heat and Chill pump can be used for heating or cooling swimming pool, spa or other tank water cooling system.

- Our All Services + View the service
diff --git a/src/components/home/HomeProjects.jsx b/src/components/home/HomeProjects.jsx index 958d57b..c5e3cf8 100644 --- a/src/components/home/HomeProjects.jsx +++ b/src/components/home/HomeProjects.jsx @@ -62,7 +62,7 @@ export default function HomeProjects() {

Heating Solution

Swimming Pool Heating

-

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

+

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

@@ -130,7 +130,7 @@ export default function HomeProjects() {

Cooling Solution

Swimming Pool Cooling

-

Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control,Energy-Efficient Pool Cooling Systems

+

Pool Chillers – Lowers water temperature during hot summer months, Heat/Cool Pumps – Versatile solution for year-round temperature control, Energy-Efficient Pool Cooling Systems

diff --git a/src/components/home/HomeServicesSection.jsx b/src/components/home/HomeServicesSection.jsx index 9ff5048..7927d13 100644 --- a/src/components/home/HomeServicesSection.jsx +++ b/src/components/home/HomeServicesSection.jsx @@ -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 & 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 & 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 & Fabrications", img: "/assets/images/IMG-2.jpg", icon: "/assets/images/why_feature_5.svg" }, @@ -53,7 +53,7 @@ export default function HomeServicesSection() { >
- View All Services + View the service
diff --git a/src/components/sections/Header.jsx b/src/components/sections/Header.jsx index 305b152..f18c2ef 100644 --- a/src/components/sections/Header.jsx +++ b/src/components/sections/Header.jsx @@ -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' }, diff --git a/src/components/services/ServicesHero.jsx b/src/components/services/ServicesHero.jsx deleted file mode 100644 index 17fd4d7..0000000 --- a/src/components/services/ServicesHero.jsx +++ /dev/null @@ -1,158 +0,0 @@ -import { Link } from "react-router-dom" -export default function ServicesHero() { - return ( -
-
- {/* Section Title */} -
-
-
- - Shape - Our Services - -

What Services We Offer

-

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.

-
-
-
- - {/* Service Cards Grid */} -
-
-
-
-
-
08
-
- price_1_3 -
-

Service And Repairs

-

Adiabatic Pre-Cooling System

-

Designed to optimize your cooling efficiency while reducing energy consumption.

- Read More -
-
-
-
-
07
-
- price_1_1 -
-

Service And Repairs

-

Misting Solutions

-

We specialize in providing high-performance misting solutions designed to keep you cool.

- Read More -
-
-
-
-
01
-
- service_card_2 -
-

Service And Repairs

-

Electro-Mechanical Works

-

We, at Profen, specialize in comprehensive electro-mechanical solutions,..

- Read More -
-
-
-
-
02
-
- service_grid_1 -
-

Service And Repairs

-

Landscaping & Fencing

-

Our expert team ensures exceptional design, durable materials,..

- Read More -
-
-
-
-
03
-
- service_card_4 -
-

Service And Repairs

-

Metal Construction & Fabrications

-

We ensure superior craftsmanship, strength, and reliability in every...

- Read More -
-
-
-
-
04
-
- service_card_7 -
-

Service And Repairs

-

Building Contracting Works

-

We provide comprehensive building contracting services, delivering..

- Read More -
-
-
-
-
05
-
- service_card_3 -
-

Service And Repairs

-

Interior & Fit-Out Works

-

You are looking to revamp a home, office, or commercial space,..

- Read More -
-
-
-
-
06
-
- service_card_8 -
-

Service And Repairs

-

Chiller Hot & Cool Solutions

-

We specialize in providing advanced chiller systems for both heating and cooling

- Read More -
-
-
-
-
- - {/* Divider */} -
-
-
- -
-
-
-
-
- ) -} diff --git a/src/css/dynamic.css b/src/css/dynamic.css index 626a0ff..6fcb4c4 100644 --- a/src/css/dynamic.css +++ b/src/css/dynamic.css @@ -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). + ══════════════════════════════════════════════════════════════ */ + diff --git a/src/hooks/useLayoutInit.js b/src/hooks/useLayoutInit.js index 941c16f..34c8859 100644 --- a/src/hooks/useLayoutInit.js +++ b/src/hooks/useLayoutInit.js @@ -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