final promist link up

src/App.jsx

@@ -9,6 +9,8 @@ import ServiceDetail from './pages/ServiceDetail'
 import Project from './pages/Project'
 import Contact from './pages/Contact'
 
+const PAGE_LOAD = performance.now()
+
 function NotFound() {
   return (
     <div style={{ padding: '120px 24px', textAlign: 'center' }}>
@@ -21,12 +23,19 @@ function NotFound() {
 
 export default function App() {
   useEffect(() => {
-    const preloader = document.getElementById("preloader")
+    const el = document.getElementById("preloader")
-    if (preloader) {
+    if (!el) return
-      preloader.classList.add("loaded")
+
-      setTimeout(() => preloader.remove(), 500)
+    const elapsed = performance.now() - PAGE_LOAD
-    }
+    const minShow = 1500 // ms — let user perceive the brand
+    const delay = Math.max(0, minShow - elapsed)
+
+    setTimeout(() => {
+      el.classList.add("loaded")
+      setTimeout(() => el.remove(), 500)
+    }, delay)
   }, [])
+
   return (
     <BrowserRouter>
       <ErrorBoundary>

src/components/home/HomeServicesSection.jsx

@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 
 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: "misting-solutions", title: "Promist Misting Solutions", img: "/assets/images/IMG-9.jpg", icon: "/assets/images/why_feature_6.svg", external: true },
   { 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 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" },
@@ -73,7 +73,13 @@ export default function HomeServicesSection() {
                     <img className="service-bg" decoding="async" src={s.img} alt={s.title} />
                     <div className="service-overlay"></div>
                     <div className="service-content">
-                      <h3 className="service-title"><Link to={`/service/${s.slug}`}>{s.title}</Link></h3>
+                      <h3 className="service-title">
+                        {s.external ? (
+                          <a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">{s.title}</a>
+                        ) : (
+                          <Link to={`/service/${s.slug}`}>{s.title}</Link>
+                        )}
+                      </h3>
                     </div>
                   </div>
                 </div>

src/components/sections/ContactForm.jsx

@@ -1,48 +1,89 @@
+import { useState } from 'react'
+
 export default function ContactForm({ heading, subtitle, style = 'default' }) {
   const light = style === 'light'
-  const wrapperClass = light
+  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: '', message: '' })
-    ? 'input-light ajax-contact pb-30 pb-md-0'
+
-    : 'ajax-contact'
+  const handleChange = (e) => {
+    setForm(prev => ({ ...prev, [e.target.name]: e.target.value }))
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const { name, email, phone, subject, message } = form
+    const body = encodeURIComponent(
+      `Name: ${name}\nEmail: ${email}\nPhone: ${phone}\nSubject: ${subject}\n\n${message}`
+    )
+    const mailto = `mailto:info@profeng.ae?subject=${encodeURIComponent(subject || 'Contact Form')}&body=${body}`
+    window.location.href = mailto
+  }
+
   return (
-    <div className={wrapperClass}>
+    <div className={light ? 'input-light ajax-contact pb-30 pb-md-0' : 'ajax-contact'}>
       {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">
+      <form onSubmit={handleSubmit}>
-        <div className="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p><ul></ul></div>
+        <div className="row">
-        <form action="/contact" method="post" className="wpcf7-form init" aria-label="Contact form" noValidate="noValidate" data-status="init">
+          <div className="form-group col-md-6">
-          <div className="row">
+            <span className="wpcf7-form-control-wrap">
-            <div className="form-group col-md-6">
+              <input
-              <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>
+                className="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control"
-              {light ? <i className="fas fa-user"></i> : <i className="fal fa-user"></i>}
+                aria-required="true" placeholder="Your Name" type="text" name="name"
-            </div>
+                value={form.name} onChange={handleChange} required
-            <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>
+            </span>
-              {light ? <i className="fas fa-envelope"></i> : <i className="fal fa-envelope"></i>}
+            {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 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 className="form-group col-md-6">
-      </div>
+            <span className="wpcf7-form-control-wrap">
+              <input
+                className="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email form-control"
+                aria-required="true" placeholder="Email Address" type="email" name="email"
+                value={form.email} onChange={handleChange} required
+              />
+            </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" placeholder="Phone Number" type="tel" name="phone"
+                value={form.phone} onChange={handleChange} required
+              />
+            </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" name="subject"
+                value={form.subject} onChange={handleChange} required
+              >
+                <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" placeholder="Your Message" name="message"
+                value={form.message} onChange={handleChange} required
+              ></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" type="submit">Send Message Now<i className="far fa-arrow-right ms-2"></i></button>
+          </div>
+        </div>
+      </form>
     </div>
   )
 }

src/components/sections/Header.jsx

@@ -12,7 +12,7 @@ const NAV_ITEMS = [
 
 const SERVICE_SUBITEMS = [
   { label: 'Adiabatic Pre-Cooling System', slug: 'adiabatic-pre-cooling-system' },
-  { label: 'Promist Misting Solutions', slug: 'misting-solutions' },
+  { label: 'Promist Misting Solutions', slug: 'misting-solutions', external: true },
   { label: 'Chiller Hot & Cool Solution', slug: 'chiller-hot-cool-solutions' },
   { label: 'Building Management System', slug: 'building-management-system' },
   { label: 'Interior & Fit-Out Work', slug: 'interior-fit-out-works' },
@@ -62,7 +62,11 @@ export default function Header() {
                               <ul className="sub-menu" style={{ display: mobileServicesOpen ? 'block' : 'none' }}>
                                 {SERVICE_SUBITEMS.map(s => (
                                   <li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
-                                    <Link to={`/service/${s.slug}`}>{s.label}</Link>
+                                    {s.external ? (
+                                      <a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">{s.label}</a>
+                                    ) : (
+                                      <Link to={`/service/${s.slug}`}>{s.label}</Link>
+                                    )}
                                   </li>
                                 ))}
                               </ul>
@@ -140,7 +144,11 @@ export default function Header() {
                                         <ul className="sub-menu">
                                           {SERVICE_SUBITEMS.map(s => (
                                             <li key={s.slug} className={`menu-item${pathname === `/service/${s.slug}` ? ' current-menu-item' : ''}`}>
-                                              <Link to={`/service/${s.slug}`}>{s.label}</Link>
+                                              {s.external ? (
+                                                <a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">{s.label}</a>
+                                              ) : (
+                                                <Link to={`/service/${s.slug}`}>{s.label}</Link>
+                                              )}
                                             </li>
                                           ))}
                                         </ul>
@@ -160,7 +168,7 @@ export default function Header() {
                         </div>
                         <div className="col-auto d-none d-xl-block">
                           <div className="header-button">
-                            <a href="/service/misting-solutions">
+                            <a href="http://promist.profen.openexplorer.xyz" target="_blank" rel="noopener noreferrer">
                               <img src="/assets/images/Promist-Logo-1.png" alt="Promist" style={{ height: '40px' }} />
                             </a>
                           </div>