initial

src/components/Layout.jsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 import { Outlet, useLocation } from 'react-router-dom'
 import Header from './Header'
 import Footer from './Footer'
+import WhatsAppButton from './WhatsAppButton'
 import useThemeAssets from '../hooks/useThemeAssets'
 import useLayoutInit from '../hooks/useLayoutInit'
 
@@ -12,20 +13,32 @@ export default function Layout() {
   useLayoutInit()
 
   useEffect(() => {
-    function tryRemovePreloader() {
-      if (window.__removePreloader && window.__cssReady && window.__layoutReady) {
+    let removed = false
+    const removePreloader = () => {
+      if (removed) return
+      removed = true
+      if (window.__removePreloader) {
         setTimeout(window.__removePreloader, 800)
+      }
+    }
+    const tryRemove = () => {
+      if (window.__removePreloader && window.__cssReady && window.__layoutReady && document.readyState === 'complete') {
+        removePreloader()
         return true
       }
       return false
     }
-    if (tryRemovePreloader()) return
-    const onReady = () => tryRemovePreloader()
+    if (tryRemove()) return
+    const onReady = () => tryRemove()
     document.addEventListener('css-ready', onReady)
     window.addEventListener('layout-ready', onReady)
+    window.addEventListener('load', onReady)
+    const fallback = setTimeout(removePreloader, 15000)
     return () => {
       document.removeEventListener('css-ready', onReady)
       window.removeEventListener('layout-ready', onReady)
+      window.removeEventListener('load', onReady)
+      clearTimeout(fallback)
     }
   }, [])
 
@@ -57,10 +70,22 @@ export default function Layout() {
     const style = document.createElement('style')
     style.id = 'rakar_opt-dynamic-css'
     style.textContent = `
+      :root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";}
       .header-logo .logo img{width:260px;}
       .th-menu-wrapper .mobile-logo img{width:180px;}
       .th-menu-wrapper .mobile-logo{background-color:#0a004c;}
       .breadcumb-wrapper{background-repeat:no-repeat;background-position:center center;background-image:url('/wp-content/uploads/2024/07/breadcumb-bg.jpg');background-size:cover;}
+      .hero-inner{position:relative;}
+      .hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1;pointer-events:none;}
+      .hero-inner .container{position:relative;z-index:2;}
+      .hero-style5 .sub-title2.sub{color:#fff !important;}
+      .hero-style5 .hero-title,.hero-style5 .hero-text{color:#fff !important;}
+      .slider-area .slider-arrow{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.2);color:#fff;border:none;cursor:pointer;transition:0.3s;font-size:18px;}
+      .slider-area .slider-arrow:hover{background:#FA2D39;}
+      .slider-area .slider-controller{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px;}
+      .slider-area .slider-pagination{display:flex;align-items:center;gap:6px;}
+      .slider-area .slider-pagination button{width:12px;height:12px;border-radius:50%;border:none;background:#999;opacity:0.4;cursor:pointer;padding:0;transition:0.3s;}
+      .slider-area .slider-pagination button.active{opacity:1;background:#FA2D39;}
     `
     document.head.appendChild(style)
     return () => style.remove()
@@ -71,6 +96,7 @@ export default function Layout() {
       <Header />
       <Outlet />
       <Footer />
+      <WhatsAppButton />
     </>
   )
 }

src/components/WhatsAppButton.jsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react'
+
+const PHONE = '971564148980'
+const WHATSAPP_URL = `https://wa.me/${PHONE}`
+
+export default function WhatsAppButton() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    setVisible(true)
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <>
+      <a
+        href={WHATSAPP_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="whatsapp-float"
+        aria-label="Chat on WhatsApp"
+      >
+        <svg viewBox="0 0 32 32" width="28" height="28" fill="white">
+          <path d="M16 0C7.2 0 0 7.2 0 16c0 3.1 0.9 6 2.5 8.5L1.6 30.4l6.2-1.6C10.2 29.9 13 31 16 31c8.8 0 16-7.2 16-16S24.8 0 16 0zm8.1 22.7c-0.4 1.1-1.6 2-2.7 2.3-0.7 0.2-1.6 0.3-5.1-1.1-4.3-1.7-7.1-5.9-7.3-6.2-0.2-0.3-1.7-2.3-1.7-4.4s1.1-3.1 1.5-3.6c0.4-0.4 0.9-0.6 1.2-0.6 0.3 0 0.6 0 0.9 0 0.3 0 0.7-0.1 1.1 0.8 0.4 0.9 1.3 3.1 1.4 3.3 0.1 0.2 0.2 0.5 0 0.8s-0.3 0.5-0.5 0.7c-0.2 0.2-0.4 0.5-0.6 0.7-0.2 0.2-0.4 0.5-0.2 0.9 0.2 0.4 0.9 1.5 2 2.4 1.4 1.1 2.5 1.5 2.9 1.6 0.4 0.2 0.7 0.1 1-0.1 0.3-0.2 1.2-1.4 1.5-1.9 0.3-0.5 0.7-0.4 1.1-0.2 0.4 0.2 2.5 1.2 2.9 1.4 0.4 0.2 0.7 0.3 0.8 0.5 0.1 0.2 0.1 1.1-0.3 2.2z"/>
+        </svg>
+      </a>
+      <style>{`
+        .whatsapp-float {
+          position: fixed;
+          bottom: 24px;
+          right: 24px;
+          z-index: 9999;
+          width: 56px;
+          height: 56px;
+          border-radius: 50%;
+          background: #25D366;
+          display: flex;
+          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;
+        }
+        .whatsapp-float:hover {
+          transform: scale(1.08);
+          box-shadow: 0 6px 16px rgba(0,0,0,0.35);
+        }
+      `}</style>
+    </>
+  )
+}