{"id":541,"date":"2026-02-02T15:54:13","date_gmt":"2026-02-02T15:54:13","guid":{"rendered":"https:\/\/emaaralwatan.com\/about\/"},"modified":"2026-02-14T04:59:43","modified_gmt":"2026-02-14T04:59:43","slug":"about","status":"publish","type":"page","link":"https:\/\/emaaralwatan.com\/ar\/about\/","title":{"rendered":"\u0645\u0646 \u0646\u062d\u0646"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n EW \u2013 Emaar Al Watan | About<\/title>\r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <!-- Tailwind (CDN) -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n \/* ----- all keyframes & utility classes from the original <style> block ----- *\/\r\n @keyframes float1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-25px) rotate(8deg)} }\r\n @keyframes float2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(18px) rotate(-6deg)} }\r\n @keyframes float3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(12px,-18px)} 66%{transform:translate(-8px,10px)} }\r\n @keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }\r\n @keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }\r\n @keyframes pulse-soft { 0%,100%{opacity:0.06} 50%{opacity:0.12} }\r\n @keyframes dash-draw { to{stroke-dashoffset:0} }\r\n @keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }\r\n @keyframes typewriter { from{width:0} to{width:100%} }\r\n @keyframes blink { 50%{border-color:transparent} }\r\n @keyframes wave { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-8px)} 75%{transform:translateY(8px)} }\r\n @keyframes orbit { from{transform:rotate(0deg) translateX(180px) rotate(0deg)} to{transform:rotate(360deg) translateX(180px) rotate(-360deg)} }\r\n @keyframes glow-pulse { 0%,100%{box-shadow:0 0 20px rgba(29,45,62,0.1)} 50%{box-shadow:0 0 40px rgba(29,45,62,0.2)} }\r\n\r\n .shimmer-text {\r\n background: linear-gradient(90deg, #1D2D3E 0%, #4a7a9b 30%, #1D2D3E 50%, #4a7a9b 70%, #1D2D3E 100%);\r\n background-size: 200% auto;\r\n -webkit-background-clip: text; background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: shimmer 3.5s linear infinite;\r\n }\r\n .glass { background:rgba(255,255,255,0.6); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(29,45,62,0.06); }\r\n .glass-strong { background:rgba(255,255,255,0.82); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); border:1px solid rgba(29,45,62,0.1); }\r\n .playfair { font-family:'Playfair Display', serif; }\r\n .text-main { color: #1D2D3E; }\r\n\r\n ::-webkit-scrollbar { width:5px }\r\n ::-webkit-scrollbar-track { background:transparent }\r\n ::-webkit-scrollbar-thumb { background:rgba(29,45,62,0.25); border-radius:3px }\r\n\r\n .img-shine { position:relative; overflow:hidden; }\r\n .img-shine::after {\r\n content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;\r\n background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);\r\n transition:0.6s;\r\n }\r\n .img-shine:hover::after { left:100%; }\r\n\r\n .line-anim { stroke-dasharray:1000; stroke-dashoffset:1000; animation: dash-draw 3s ease forwards; }\r\n .hover-lift { transition: transform 0.4s ease, box-shadow 0.4s ease; }\r\n .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(29,45,62,0.12); }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n <div id=\"root\"><\/div>\r\n\r\n <!-- Load React and ReactDOM from CDN (UMD) - using stable v18 -->\r\n <script src=\"https:\/\/unpkg.com\/react@18.2.0\/umd\/react.production.min.js\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18.2.0\/umd\/react-dom.production.min.js\"><\/script>\r\n\r\n <!-- Plain JavaScript \u2013 no Babel, no TypeScript -->\r\n <script>\r\n (function() {\r\n \/\/ Safety check: if React is not loaded, show error\r\n if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {\r\n document.getElementById('root').innerHTML = '<div style=\"color:red; padding:2rem; text-align:center;\">Failed to load React libraries. Please check your internet connection.<\/div>';\r\n return;\r\n }\r\n\r\n const { useRef, useEffect, useState, useCallback } = React;\r\n\r\n \/\/ ----- HOOK: useInView (replaces import) -----\r\n function useInView(threshold = 0.15) {\r\n const ref = useRef(null);\r\n const [inView, setInView] = useState(false);\r\n useEffect(() => {\r\n const el = ref.current;\r\n if (!el) return;\r\n const obs = new IntersectionObserver(\r\n ([e]) => { if (e.isIntersecting) { setInView(true); obs.unobserve(el); } },\r\n { threshold }\r\n );\r\n obs.observe(el);\r\n return () => obs.disconnect();\r\n }, [threshold]);\r\n return { ref, inView };\r\n }\r\n\r\n \/\/ ----- REVEAL wrapper -----\r\n function Reveal({ children, dir = \"up\", delay = 0, className = \"\" }) {\r\n const { ref, inView } = useInView(0.08);\r\n const transforms = {\r\n up: \"translateY(70px)\",\r\n down: \"translateY(-70px)\",\r\n left: \"translateX(-70px)\",\r\n right: \"translateX(70px)\",\r\n scale: \"scale(0.85)\",\r\n };\r\n return React.createElement('div', {\r\n ref: ref,\r\n className: className,\r\n style: {\r\n opacity: inView ? 1 : 0,\r\n transform: inView ? \"none\" : transforms[dir],\r\n transition: `opacity 0.9s cubic-bezier(.22,1,.36,1) ${delay}s, transform 0.9s cubic-bezier(.22,1,.36,1) ${delay}s`,\r\n }\r\n }, children);\r\n }\r\n\r\n \/\/ ----- 3D TILT CARD -----\r\n function TiltCard({ children, className = \"\" }) {\r\n const cardRef = useRef(null);\r\n const handleMove = useCallback((e) => {\r\n const c = cardRef.current; if (!c) return;\r\n const r = c.getBoundingClientRect();\r\n const x = ((e.clientX - r.left) \/ r.width - 0.5) * 8;\r\n const y = ((e.clientY - r.top) \/ r.height - 0.5) * -8;\r\n c.style.transform = `perspective(800px) rotateY(${x}deg) rotateX(${y}deg) scale3d(1.02,1.02,1.02)`;\r\n }, []);\r\n const handleLeave = useCallback(() => {\r\n const c = cardRef.current;\r\n if (c) c.style.transform = \"perspective(800px) rotateY(0) rotateX(0) scale3d(1,1,1)\";\r\n }, []);\r\n return React.createElement('div', {\r\n ref: cardRef,\r\n onMouseMove: handleMove,\r\n onMouseLeave: handleLeave,\r\n className: className,\r\n style: { transition: \"transform 0.4s ease-out\", transformStyle: \"preserve-3d\" }\r\n }, children);\r\n }\r\n\r\n \/\/ ----- ANIMATED COUNTER -----\r\n function Counter({ target, suffix = \"\" }) {\r\n const { ref, inView } = useInView(0.3);\r\n const [count, setCount] = useState(0);\r\n useEffect(() => {\r\n if (!inView) return;\r\n let rafId;\r\n const dur = 2200; const t0 = Date.now();\r\n const step = () => {\r\n const p = Math.min((Date.now() - t0) \/ dur, 1);\r\n setCount(Math.round((1 - Math.pow(1 - p, 3)) * target));\r\n if (p < 1) {\r\n rafId = requestAnimationFrame(step);\r\n }\r\n };\r\n rafId = requestAnimationFrame(step);\r\n return () => {\r\n if (rafId) cancelAnimationFrame(rafId);\r\n };\r\n }, [inView, target]);\r\n return React.createElement('span', { ref: ref }, count, suffix);\r\n }\r\n\r\n \/\/ ----- PARTICLE BACKGROUND (canvas) -----\r\n function ParticleCanvas() {\r\n const canvasRef = useRef(null);\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext(\"2d\");\r\n if (!ctx) return;\r\n\r\n let animId;\r\n const particles = [];\r\n\r\n const resize = () => {\r\n canvas.width = window.innerWidth;\r\n canvas.height = document.documentElement.scrollHeight;\r\n };\r\n resize();\r\n window.addEventListener(\"resize\", resize);\r\n\r\n const COUNT = 90;\r\n for (let i = 0; i < COUNT; i++) {\r\n particles.push({\r\n x: Math.random() * canvas.width,\r\n y: Math.random() * canvas.height,\r\n r: Math.random() * 2 + 0.5,\r\n dx: (Math.random() - 0.5) * 0.35,\r\n dy: (Math.random() - 0.5) * 0.35,\r\n opacity: Math.random() * 0.4 + 0.1,\r\n pulse: Math.random() * Math.PI * 2,\r\n });\r\n }\r\n\r\n const draw = () => {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n particles.forEach((p, i) => {\r\n p.x += p.dx; p.y += p.dy; p.pulse += 0.015;\r\n if (p.x < 0) p.x = canvas.width;\r\n if (p.x > canvas.width) p.x = 0;\r\n if (p.y < 0) p.y = canvas.height;\r\n if (p.y > canvas.height) p.y = 0;\r\n\r\n const glow = Math.sin(p.pulse) * 0.12 + p.opacity;\r\n ctx.beginPath();\r\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\r\n ctx.fillStyle = `rgba(29,45,62,${glow})`;\r\n ctx.fill();\r\n\r\n for (let j = i + 1; j < particles.length; j++) {\r\n const p2 = particles[j];\r\n const dist = Math.hypot(p.x - p2.x, p.y - p2.y);\r\n if (dist < 140) {\r\n ctx.beginPath();\r\n ctx.moveTo(p.x, p.y);\r\n ctx.lineTo(p2.x, p2.y);\r\n ctx.strokeStyle = `rgba(29,45,62,${0.05 * (1 - dist \/ 140)})`;\r\n ctx.lineWidth = 0.5;\r\n ctx.stroke();\r\n }\r\n }\r\n });\r\n animId = requestAnimationFrame(draw);\r\n };\r\n draw();\r\n\r\n return () => { \r\n cancelAnimationFrame(animId); \r\n window.removeEventListener(\"resize\", resize); \r\n };\r\n }, []);\r\n return React.createElement('canvas', { ref: canvasRef, className: \"pointer-events-none fixed inset-0 z-0\" });\r\n }\r\n\r\n \/\/ ----- MAIN APP -----\r\n function App() {\r\n const C = \"#1D2D3E\";\r\n\r\n return React.createElement('div', {\r\n className: \"relative min-h-screen overflow-x-hidden\",\r\n style: { background: \"rgba(248,250,252,0.85)\", fontFamily: \"'Inter', sans-serif\" }\r\n },\r\n \/\/ Particle canvas\r\n React.createElement(ParticleCanvas, null),\r\n\r\n \/\/ Floating geometric shapes (fixed)\r\n React.createElement('div', { className: \"pointer-events-none fixed inset-0 z-0 overflow-hidden\" },\r\n React.createElement('div', { className: \"absolute top-[8%] left-[4%] w-36 h-36 opacity-[0.035]\", style: { animation: \"float1 22s ease-in-out infinite\" } },\r\n React.createElement('svg', { viewBox: \"0 0 100 100\", fill: \"none\", stroke: C, strokeWidth: \"0.8\" },\r\n React.createElement('polygon', { points: \"50,2 95,25 95,75 50,98 5,75 5,25\" })\r\n )\r\n ),\r\n React.createElement('div', { className: \"absolute top-[35%] right-[6%] w-28 h-28 opacity-[0.04]\", style: { animation: \"float2 18s ease-in-out infinite\" } },\r\n React.createElement('svg', { viewBox: \"0 0 100 100\", fill: \"none\", stroke: C, strokeWidth: \"1\" },\r\n React.createElement('polygon', { points: \"50,2 95,25 95,75 50,98 5,75 5,25\" })\r\n )\r\n ),\r\n React.createElement('div', { className: \"absolute top-[55%] left-[8%] w-44 h-44 rounded-full opacity-[0.03]\", style: { border: `1px solid ${C}`, animation: \"float3 28s ease-in-out infinite\" } }),\r\n React.createElement('div', { className: \"absolute top-[20%] right-[12%] w-24 h-24 rounded-full opacity-[0.03]\", style: { border: `1px solid ${C}`, animation: \"float1 20s ease-in-out infinite\" } }),\r\n React.createElement('div', { className: \"absolute bottom-[18%] right-[4%] w-32 h-32 opacity-[0.035]\", style: { animation: \"float2 24s ease-in-out infinite\" } },\r\n React.createElement('svg', { viewBox: \"0 0 100 100\", fill: \"none\", stroke: C, strokeWidth: \"0.8\" },\r\n React.createElement('polygon', { points: \"50,5 95,95 5,95\" })\r\n )\r\n ),\r\n React.createElement('div', { className: \"absolute bottom-[35%] left-[18%] w-20 h-20 opacity-[0.04]\", style: { animation: \"float3 19s ease-in-out infinite\" } },\r\n React.createElement('svg', { viewBox: \"0 0 100 100\", fill: \"none\", stroke: C, strokeWidth: \"1\" },\r\n React.createElement('rect', { x: \"10\", y: \"10\", width: \"80\", height: \"80\", rx: \"4\" })\r\n )\r\n ),\r\n React.createElement('div', { className: \"absolute top-[70%] right-[25%] w-16 h-16 opacity-[0.03]\", style: { animation: \"float1 16s ease-in-out infinite\" } },\r\n React.createElement('svg', { viewBox: \"0 0 100 100\", fill: \"none\", stroke: C, strokeWidth: \"1.2\" },\r\n React.createElement('circle', { cx: \"50\", cy: \"50\", r: \"40\" }),\r\n React.createElement('circle', { cx: \"50\", cy: \"50\", r: \"20\" })\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 1: HERO\r\n React.createElement('section', { className: \"relative z-10 flex min-h-screen items-center justify-center px-4\" },\r\n React.createElement('div', { className: \"absolute inset-0 flex items-center justify-center pointer-events-none\" },\r\n React.createElement('div', { className: \"absolute w-[500px] h-[500px] rounded-full opacity-[0.04]\", style: { background: `radial-gradient(circle, ${C} 0%, transparent 70%)`, animation: \"pulse-soft 5s ease-in-out infinite\" } }),\r\n React.createElement('div', { className: \"absolute w-[380px] h-[380px] rounded-full opacity-[0.03]\", style: { border: `1px solid ${C}`, animation: \"spin-slow 80s linear infinite\" } }),\r\n React.createElement('div', { className: \"absolute w-[280px] h-[280px] rounded-full opacity-[0.04]\", style: { border: `1px dashed ${C}`, animation: \"spin-slow 50s linear infinite reverse\" } }),\r\n React.createElement('div', { className: \"absolute w-[380px] h-[380px]\", style: { animation: \"spin-slow 20s linear infinite\" } },\r\n React.createElement('div', { className: \"absolute top-0 left-1\/2 -translate-x-1\/2 w-2.5 h-2.5 rounded-full\", style: { background: C, opacity: 0.15 } })\r\n ),\r\n React.createElement('div', { className: \"absolute w-[280px] h-[280px]\", style: { animation: \"spin-slow 15s linear infinite reverse\" } },\r\n React.createElement('div', { className: \"absolute bottom-0 left-1\/2 -translate-x-1\/2 w-2 h-2 rounded-full\", style: { background: C, opacity: 0.12 } })\r\n )\r\n ),\r\n React.createElement('div', { className: \"relative z-10 text-center max-w-4xl mx-auto\" },\r\n React.createElement(Reveal, { dir: \"scale\" },\r\n React.createElement('div', { className: \"mb-8 inline-flex items-center gap-3 rounded-full border px-6 py-2.5\", style: { borderColor: `rgba(29,45,62,0.1)`, background: \"rgba(255,255,255,0.5)\", backdropFilter: \"blur(10px)\" } },\r\n React.createElement('div', { className: \"w-2 h-2 rounded-full animate-pulse\", style: { background: C } }),\r\n React.createElement('span', { className: \"text-[11px] font-semibold uppercase tracking-[0.25em] text-main\" }, \"About Emaar Al Watan\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.15 },\r\n React.createElement('h1', { className: \"shimmer-text playfair\", style: { fontSize: \"clamp(5rem, 14vw, 11rem)\", fontWeight: 900, lineHeight: 0.9, letterSpacing: \"-0.03em\" } }, \"EW\")\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.35 },\r\n React.createElement('div', { className: \"mt-6 mx-auto max-w-xl\" },\r\n React.createElement('p', { className: \"text-sm sm:text-base md:text-lg font-light leading-relaxed tracking-wide text-main\", style: { opacity: 0.75 } },\r\n \"Human expertise driven by technology\", React.createElement('br', { className: \"hidden sm:block\" }), \"to ensure asset sustainability\"\r\n )\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.55 },\r\n React.createElement('div', { className: \"mt-12 flex items-center justify-center gap-4\" },\r\n React.createElement('div', { className: \"h-px w-20\", style: { background: `linear-gradient(90deg, transparent, rgba(29,45,62,0.3))` } }),\r\n React.createElement('div', { className: \"w-10 h-10 rounded-full flex items-center justify-center animate-bounce\", style: { border: `1px solid rgba(29,45,62,0.15)` } },\r\n React.createElement('svg', { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2\" },\r\n React.createElement('path', { d: \"M12 5v14M5 12l7 7 7-7\" })\r\n )\r\n ),\r\n React.createElement('div', { className: \"h-px w-20\", style: { background: `linear-gradient(90deg, rgba(29,45,62,0.3), transparent)` } })\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 2: The Lifecycle Philosophy\r\n React.createElement('section', { className: \"relative z-10 px-4 py-20 sm:py-32\" },\r\n React.createElement('div', { className: \"mx-auto max-w-7xl\" },\r\n React.createElement('div', { className: \"grid gap-12 lg:gap-20 lg:grid-cols-12 items-center\" },\r\n \/\/ Image\r\n React.createElement('div', { className: \"lg:col-span-5 order-2 lg:order-1\" },\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.1 },\r\n React.createElement(TiltCard, { className: \"group relative\" },\r\n React.createElement('div', { className: \"glass-strong rounded-[2rem] p-2.5 shadow-2xl\", style: { boxShadow: `0 25px 80px rgba(29,45,62,0.1)` } },\r\n React.createElement('div', { className: \"relative rounded-[1.6rem] overflow-hidden img-shine\" },\r\n React.createElement('img', {\r\n src: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/1770780116353-019c4ab7-6b45-72c6-8036-72f3a464daa1-683x1024.png\",\r\n alt: \"EW Team\",\r\n className: \"w-full h-[520px] object-cover transition-transform duration-700 group-hover:scale-105\"\r\n }),\r\n React.createElement('div', { className: \"absolute inset-0\", style: { background: \"linear-gradient(to top, rgba(29,45,62,0.55) 0%, rgba(29,45,62,0.1) 40%, transparent 70%)\" } }),\r\n React.createElement('div', { className: \"absolute bottom-0 left-0 right-0 p-5\" },\r\n React.createElement('div', { className: \"glass rounded-xl px-4 py-3 flex items-center gap-3\" },\r\n React.createElement('div', { className: \"w-8 h-8 rounded-lg flex items-center justify-center\", style: { background: C } },\r\n React.createElement('svg', { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"white\", strokeWidth: \"2\" },\r\n React.createElement('path', { d: \"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5\" })\r\n )\r\n ),\r\n React.createElement('div', null,\r\n React.createElement('p', { className: \"text-[10px] uppercase tracking-widest text-white\/50\" }, \"Since\"),\r\n React.createElement('p', { className: \"text-xs font-bold text-white\" }, \"Engineering Excellence\")\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n React.createElement('div', { className: \"absolute -top-4 -right-4 w-20 h-20 rounded-full\", style: { border: `2px solid rgba(29,45,62,0.08)`, animation: \"pulse-soft 4s ease-in-out infinite\" } }),\r\n React.createElement('div', { className: \"absolute -bottom-3 -left-3 w-14 h-14 rounded-full\", style: { border: `2px solid rgba(29,45,62,0.06)`, animation: \"pulse-soft 5s ease-in-out infinite 1s\" } })\r\n )\r\n )\r\n ),\r\n \/\/ Text\r\n React.createElement('div', { className: \"lg:col-span-7 order-1 lg:order-2\" },\r\n React.createElement(Reveal, { dir: \"right\" },\r\n React.createElement('div', { className: \"inline-flex items-center gap-2 mb-4\" },\r\n React.createElement('div', { className: \"w-10 h-px\", style: { background: C } }),\r\n React.createElement('span', { className: \"text-[11px] font-bold uppercase tracking-[0.3em] text-main\" }, \"Our Philosophy\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"right\", delay: 0.1 },\r\n React.createElement('h2', { className: \"playfair text-main leading-[1.1]\", style: { fontSize: \"clamp(2.2rem, 5vw, 3.8rem)\", fontWeight: 800 } },\r\n \"The Lifecycle\", React.createElement('br'),\r\n React.createElement('span', { className: \"shimmer-text\" }, \"Philosophy\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"right\", delay: 0.18 },\r\n React.createElement('p', { className: \"mt-3 text-base sm:text-lg font-light italic text-main\", style: { opacity: 0.55 } }, \"A Story Written in Concrete and Data\")\r\n ),\r\n React.createElement(Reveal, { dir: \"right\", delay: 0.25 },\r\n React.createElement('div', { className: \"glass-strong mt-8 rounded-2xl p-7 shadow-lg hover-lift\", style: { boxShadow: \"0 8px 40px rgba(29,45,62,0.06)\" } },\r\n React.createElement('p', { className: \"text-sm sm:text-[15px] leading-[1.9] text-main\", style: { opacity: 0.8 } },\r\n \"Our journey didn't start in an office; it began in the heart of the Kingdom's most ambitious construction sites. We watched cities rise and realized that a building's true life begins after the last brick is laid. That's why we founded EW\u2014to tell a new story where construction isn't the end, but a \", \r\n React.createElement('strong', null, \"smart, sustainable beginning\"), \".\"\r\n )\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"right\", delay: 0.35 },\r\n React.createElement('div', { className: \"mt-6 flex items-start gap-4 rounded-xl pl-5 py-4\", style: { borderLeft: `4px solid ${C}`, background: \"rgba(29,45,62,0.03)\" } },\r\n React.createElement('div', { className: \"mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0\", style: { background: \"rgba(29,45,62,0.08)\" } },\r\n React.createElement('svg', { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2.5\" },\r\n React.createElement('path', { d: \"M9 12l2 2 4-4\" }),\r\n React.createElement('circle', { cx: \"12\", cy: \"12\", r: \"10\" })\r\n )\r\n ),\r\n React.createElement('p', { className: \"text-sm font-semibold text-main leading-relaxed\" }, \"Bottom Line: An engineering vision integrating execution and operation in one lifecycle.\")\r\n )\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 3: Stats Bar\r\n React.createElement('section', { className: \"relative z-10 px-4 py-12\" },\r\n React.createElement('div', { className: \"mx-auto max-w-6xl\" },\r\n React.createElement(Reveal, { dir: \"up\" },\r\n React.createElement('div', { className: \"glass-strong rounded-[2rem] p-8 sm:p-14 shadow-xl\", style: { boxShadow: \"0 15px 60px rgba(29,45,62,0.07)\", animation: \"glow-pulse 6s ease-in-out infinite\" } },\r\n React.createElement('div', { className: \"grid gap-10 sm:grid-cols-2 lg:grid-cols-4\" },\r\n [\r\n { n:150, s:\"+\", l:\"Projects Completed\", icon:\"M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z\" },\r\n { n:98, s:\"%\", l:\"Client Satisfaction\", icon:\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" },\r\n { n:500, s:\"+\", l:\"Assets Managed\", icon:\"M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z\" },\r\n { n:10, s:\"+\", l:\"Years of Excellence\", icon:\"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 6v6l4 2\" },\r\n ].map(function(s, i) {\r\n return React.createElement(Reveal, { key: i, dir: \"up\", delay: i * 0.1 },\r\n React.createElement('div', { className: \"group text-center\" },\r\n React.createElement('div', { className: \"mx-auto mb-4 w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:rotate-6\", style: { background: \"rgba(29,45,62,0.06)\" } },\r\n React.createElement('svg', { width: \"22\", height: \"22\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"1.5\" },\r\n React.createElement('path', { d: s.icon })\r\n )\r\n ),\r\n React.createElement('p', { className: \"text-3xl sm:text-4xl font-black text-main playfair\" },\r\n React.createElement(Counter, { target: s.n, suffix: s.s })\r\n ),\r\n React.createElement('p', { className: \"mt-1.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-main\", style: { opacity: 0.4 } }, s.l)\r\n )\r\n )\r\n })\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 4: Digital DNA\r\n React.createElement('section', { className: \"relative z-10 px-4 py-20 sm:py-32\" },\r\n React.createElement('div', { className: \"mx-auto max-w-7xl\" },\r\n React.createElement('div', { className: \"grid gap-12 lg:gap-20 lg:grid-cols-12 items-center\" },\r\n React.createElement('div', { className: \"lg:col-span-7\" },\r\n React.createElement(Reveal, { dir: \"left\" },\r\n React.createElement('div', { className: \"inline-flex items-center gap-2 mb-4\" },\r\n React.createElement('div', { className: \"w-10 h-px\", style: { background: C } }),\r\n React.createElement('span', { className: \"text-[11px] font-bold uppercase tracking-[0.3em] text-main\" }, \"The Driving Force\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.1 },\r\n React.createElement('h2', { className: \"playfair text-main leading-[1.1]\", style: { fontSize: \"clamp(2rem, 5vw, 3.5rem)\", fontWeight: 800 } },\r\n \"Digital DNA:\", React.createElement('br'),\r\n React.createElement('span', { className: \"shimmer-text\" }, \"IoT Integration\"), React.createElement('br'),\r\n \"& Smart Asset\", React.createElement('br'), \"Transformation\"\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.18 },\r\n React.createElement('p', { className: \"mt-3 text-sm font-semibold text-main\", style: { opacity: 0.5 } }, \"Translating data into decisions to boost asset efficiency.\")\r\n ),\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.25 },\r\n React.createElement('div', { className: \"glass-strong mt-8 rounded-2xl p-7 shadow-lg hover-lift\", style: { boxShadow: \"0 8px 40px rgba(29,45,62,0.06)\" } },\r\n React.createElement('p', { className: \"text-sm sm:text-[15px] leading-[1.9] text-main\", style: { opacity: 0.8 } },\r\n \"EW's strength lies in the fusion of \", React.createElement('strong', null, \"Expertise and Digitalization.\"), \" We don't just fit-out offices; we build the stages where the Kingdom's next big ideas are born. By blending high-end finishes with a digital nervous system, we transform cold structures into vibrant, compliant ecosystems that inspire people to create, protected by the highest safety standards from day one.\"\r\n )\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.35 },\r\n React.createElement('div', { className: \"mt-6 flex items-start gap-4 rounded-xl pl-5 py-4\", style: { borderLeft: `4px solid ${C}`, background: \"rgba(29,45,62,0.03)\" } },\r\n React.createElement('div', { className: \"mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0\", style: { background: \"rgba(29,45,62,0.08)\" } },\r\n React.createElement('svg', { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2.5\" },\r\n React.createElement('path', { d: \"M9 12l2 2 4-4\" }),\r\n React.createElement('circle', { cx: \"12\", cy: \"12\", r: \"10\" })\r\n )\r\n ),\r\n React.createElement('p', { className: \"text-sm font-semibold text-main leading-relaxed\" }, \"Bottom Line: Translating data into decisions to boost asset efficiency.\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.42 },\r\n React.createElement('div', { className: \"mt-7 flex flex-wrap gap-2.5\" },\r\n [\"ISO 9001\", \"ISO 41001\", \"Smart Integration\", \"Quality Assured\", \"IoT Ready\"].map(function(tag, i) {\r\n return React.createElement('span', { key: i, className: \"rounded-full px-4 py-2 text-[11px] font-bold uppercase tracking-wider text-main transition-all duration-300 hover:shadow-md cursor-default\", style: { border: `1px solid rgba(29,45,62,0.12)`, background: \"rgba(29,45,62,0.03)\" } }, tag)\r\n })\r\n )\r\n )\r\n ),\r\n React.createElement('div', { className: \"lg:col-span-5\" },\r\n React.createElement(Reveal, { dir: \"right\", delay: 0.15 },\r\n React.createElement(TiltCard, { className: \"group relative\" },\r\n React.createElement('div', { className: \"glass-strong rounded-[2rem] p-2.5 shadow-2xl\", style: { boxShadow: \"0 25px 80px rgba(29,45,62,0.1)\" } },\r\n React.createElement('div', { className: \"relative rounded-[1.6rem] overflow-hidden img-shine\" },\r\n React.createElement('img', {\r\n src: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/1770779235932-019c4aaa-487e-7a56-b485-4f1cdfcf68fd.png\",\r\n alt: \"Digital DNA\",\r\n className: \"w-full h-[480px] object-cover transition-transform duration-700 group-hover:scale-105\"\r\n }),\r\n React.createElement('div', { className: \"absolute inset-0\", style: { background: \"linear-gradient(135deg, rgba(29,45,62,0.4) 0%, transparent 55%)\" } }),\r\n React.createElement('div', { className: \"absolute top-5 left-5\" },\r\n React.createElement('div', { className: \"flex items-center gap-2 rounded-full px-4 py-2\", style: { background: \"rgba(29,45,62,0.85)\", backdropFilter: \"blur(10px)\" } },\r\n React.createElement('div', { className: \"w-2 h-2 rounded-full bg-emerald-400 animate-pulse\" }),\r\n React.createElement('span', { className: \"text-[11px] font-semibold text-white tracking-wide\" }, \"IoT Connected\")\r\n )\r\n ),\r\n React.createElement('div', { className: \"absolute top-5 right-5\" },\r\n React.createElement('div', { className: \"rounded-xl px-3 py-2\", style: { background: \"rgba(29,45,62,0.7)\", backdropFilter: \"blur(10px)\" } },\r\n React.createElement('div', { className: \"flex items-center gap-2\" },\r\n React.createElement('svg', { width: \"14\", height: \"14\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"#4ade80\", strokeWidth: \"2\" },\r\n React.createElement('path', { d: \"M22 12h-4l-3 9L9 3l-3 9H2\" })\r\n ),\r\n React.createElement('span', { className: \"text-[10px] font-bold text-emerald-400\" }, \"LIVE\")\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 5: Day-One Readiness\r\n React.createElement('section', { className: \"relative z-10 px-4 py-20 sm:py-32\" },\r\n React.createElement('div', { className: \"mx-auto max-w-7xl\" },\r\n React.createElement('div', { className: \"text-center mb-16\" },\r\n React.createElement(Reveal, { dir: \"up\" },\r\n React.createElement('div', { className: \"inline-flex items-center gap-3 mb-4\" },\r\n React.createElement('div', { className: \"w-12 h-px\", style: { background: `linear-gradient(90deg, transparent, ${C})` } }),\r\n React.createElement('span', { className: \"text-[11px] font-bold uppercase tracking-[0.3em] text-main\" }, \"Seamless Handover\"),\r\n React.createElement('div', { className: \"w-12 h-px\", style: { background: `linear-gradient(90deg, ${C}, transparent)` } })\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.1 },\r\n React.createElement('h2', { className: \"playfair text-main\", style: { fontSize: \"clamp(2.2rem, 5vw, 3.8rem)\", fontWeight: 800 } },\r\n \"Day-One \", React.createElement('span', { className: \"shimmer-text\" }, \"Readiness\")\r\n )\r\n )\r\n ),\r\n React.createElement('div', { className: \"grid gap-12 lg:gap-20 lg:grid-cols-12 items-center\" },\r\n React.createElement('div', { className: \"lg:col-span-7\" },\r\n React.createElement(Reveal, { dir: \"left\", delay: 0.15 },\r\n React.createElement('div', { className: \"glass-strong rounded-[2rem] p-8 sm:p-10 shadow-2xl hover-lift\", style: { boxShadow: \"0 20px 70px rgba(29,45,62,0.08)\" } },\r\n React.createElement('div', { className: \"flex items-center gap-5 mb-7\" },\r\n React.createElement('div', { className: \"w-16 h-16 rounded-2xl flex items-center justify-center shadow-lg\", style: { background: C, boxShadow: `0 8px 30px rgba(29,45,62,0.3)` } },\r\n React.createElement('svg', { width: \"30\", height: \"30\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"white\", strokeWidth: \"1.5\" },\r\n React.createElement('path', { d: \"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" })\r\n )\r\n ),\r\n React.createElement('div', null,\r\n React.createElement('h3', { className: \"text-xl font-bold text-main playfair\" }, \"Digital Pulse\"),\r\n React.createElement('p', { className: \"text-xs text-main mt-0.5\", style: { opacity: 0.45 } }, \"Zero Operational Delays\")\r\n )\r\n ),\r\n React.createElement('p', { className: \"text-sm sm:text-[15px] leading-[1.9] text-main\", style: { opacity: 0.8 } },\r\n \"Most construction stories end with a messy handover. Ours ends with a \", React.createElement('strong', null, \"Digital Pulse.\"), \" The moment we hand over the keys, your facility is already \", React.createElement('strong', null, \"awake.\"), \" With every asset tagged and every system live, you don't just move into a building\u2014you inherit a fully operational ecosystem.\"\r\n ),\r\n React.createElement('div', { className: \"my-7 h-px w-full\", style: { background: \"linear-gradient(90deg, transparent, rgba(29,45,62,0.12), transparent)\" } }),\r\n React.createElement('p', { className: \"text-sm sm:text-[15px] leading-[1.9] text-main\", style: { opacity: 0.8 } },\r\n \"At EW, we eliminate the \", React.createElement('strong', null, \"first-day friction,\"), \" ensuring that your journey from construction to peak performance is instantaneous, seamless, and powered by data.\"\r\n ),\r\n React.createElement('div', { className: \"mt-7 flex items-start gap-4 rounded-xl pl-5 py-4\", style: { borderLeft: `4px solid ${C}`, background: \"rgba(29,45,62,0.04)\" } },\r\n React.createElement('div', { className: \"mt-0.5 w-8 h-8 rounded-lg flex items-center justify-center shrink-0\", style: { background: \"rgba(29,45,62,0.08)\" } },\r\n React.createElement('svg', { width: \"16\", height: \"16\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2.5\" },\r\n React.createElement('path', { d: \"M9 12l2 2 4-4\" }),\r\n React.createElement('circle', { cx: \"12\", cy: \"12\", r: \"10\" })\r\n )\r\n ),\r\n React.createElement('p', { className: \"text-sm font-semibold text-main leading-relaxed\" }, \"Bottom Line: Smart handover ensuring zero operational delays.\")\r\n ),\r\n React.createElement('div', { className: \"mt-7 grid grid-cols-3 gap-3\" },\r\n [\r\n {label:\"Assets Tagged\", val:\"100%\", color:\"#10b981\"},\r\n {label:\"Systems Live\", val:\"Active\", color:\"#3b82f6\"},\r\n {label:\"Data Sync\", val:\"Real-time\", color:\"#8b5cf6\"},\r\n ].map(function(item, i) {\r\n return React.createElement('div', { key: i, className: \"rounded-xl p-3 text-center\", style: { background: \"rgba(29,45,62,0.03)\", border: \"1px solid rgba(29,45,62,0.06)\" } },\r\n React.createElement('div', { className: \"flex items-center justify-center gap-1.5 mb-1\" },\r\n React.createElement('div', { className: \"w-1.5 h-1.5 rounded-full animate-pulse\", style: { background: item.color } }),\r\n React.createElement('span', { className: \"text-[10px] font-bold uppercase tracking-wider\", style: { color: item.color } }, item.val)\r\n ),\r\n React.createElement('p', { className: \"text-[9px] uppercase tracking-widest text-main\", style: { opacity: 0.4 } }, item.label)\r\n )\r\n })\r\n )\r\n )\r\n )\r\n ),\r\n React.createElement('div', { className: \"lg:col-span-5\" },\r\n React.createElement(Reveal, { dir: \"right\", delay: 0.2 },\r\n React.createElement(TiltCard, { className: \"group relative\" },\r\n React.createElement('div', { className: \"glass-strong rounded-[2rem] p-2.5 shadow-2xl\", style: { boxShadow: \"0 25px 80px rgba(29,45,62,0.1)\" } },\r\n React.createElement('div', { className: \"relative rounded-[1.6rem] overflow-hidden img-shine\" },\r\n React.createElement('img', {\r\n src: \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/%D8%B9%D9%84%D9%85-copy.jpg-1-1024x768.jpeg\",\r\n alt: \"EW Day-One Readiness\",\r\n className: \"w-full h-[480px] object-cover transition-transform duration-700 group-hover:scale-105\"\r\n }),\r\n React.createElement('div', { className: \"absolute inset-0\", style: { background: \"linear-gradient(to top, rgba(29,45,62,0.6) 0%, rgba(29,45,62,0.15) 40%, transparent 70%)\" } }),\r\n React.createElement('div', { className: \"absolute bottom-0 left-0 right-0 p-5\" },\r\n React.createElement('div', { className: \"rounded-xl px-5 py-4\", style: { background: \"rgba(29,45,62,0.8)\", backdropFilter: \"blur(16px)\" } },\r\n React.createElement('div', { className: \"flex items-center justify-between\" },\r\n React.createElement('div', null,\r\n React.createElement('p', { className: \"text-[9px] uppercase tracking-[0.2em] text-white\/40\" }, \"System Status\"),\r\n React.createElement('p', { className: \"text-sm font-bold text-white mt-0.5\" }, \"All Systems Live\")\r\n ),\r\n React.createElement('div', { className: \"flex items-center gap-2\" },\r\n React.createElement('div', { className: \"w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse\" }),\r\n React.createElement('span', { className: \"text-xs font-bold text-emerald-400\" }, \"Active\")\r\n )\r\n ),\r\n React.createElement('div', { className: \"mt-3 space-y-1.5\" },\r\n [{w:\"100%\",l:\"Operations\"},{w:\"98%\",l:\"Safety\"},{w:\"95%\",l:\"Efficiency\"}].map(function(b, i) {\r\n return React.createElement('div', { key: i, className: \"flex items-center gap-2\" },\r\n React.createElement('span', { className: \"text-[8px] uppercase tracking-wider text-white\/30 w-16\" }, b.l),\r\n React.createElement('div', { className: \"flex-1 h-1 rounded-full overflow-hidden\", style: { background: \"rgba(255,255,255,0.1)\" } },\r\n React.createElement('div', { className: \"h-full rounded-full transition-all duration-1000\", style: { width: b.w, background: \"linear-gradient(90deg, #10b981, #3b82f6)\" } })\r\n )\r\n )\r\n })\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 6: Why Choose EW cards\r\n React.createElement('section', { className: \"relative z-10 px-4 py-20 sm:py-28\" },\r\n React.createElement('div', { className: \"mx-auto max-w-6xl\" },\r\n React.createElement('div', { className: \"text-center mb-16\" },\r\n React.createElement(Reveal, { dir: \"up\" },\r\n React.createElement('h2', { className: \"playfair text-main\", style: { fontSize: \"clamp(2rem, 4vw, 3rem)\", fontWeight: 800 } },\r\n \"Why \", React.createElement('span', { className: \"shimmer-text\" }, \"Choose EW\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.1 },\r\n React.createElement('p', { className: \"mt-3 text-sm text-main mx-auto max-w-md\", style: { opacity: 0.5 } }, \"Every detail is engineered for excellence, sustainability, and smart performance.\")\r\n )\r\n ),\r\n React.createElement('div', { className: \"grid gap-5 sm:grid-cols-2 lg:grid-cols-3\" },\r\n [\r\n { icon:\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\", title:\"Safety First\", desc:\"Protected by the highest safety standards from day one with comprehensive ISO compliance.\" },\r\n { icon:\"M2 3h20v14H2zM8 21h8M12 17v4\", title:\"Smart Systems\", desc:\"IoT integration and digital nervous systems that make buildings intelligent and responsive.\" },\r\n { icon:\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\", title:\"Full Compliance\", desc:\"ISO 9001 & ISO 41001 certified \u2014 every step is strictly governed and quality-assured.\" },\r\n { icon:\"M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z\", title:\"Asset Tagging\", desc:\"Every asset tagged, tracked, and managed with precision digital documentation.\" },\r\n { icon:\"M22 12h-4l-3 9L9 3l-3 9H2\", title:\"Data-Driven\", desc:\"Real-time analytics and IoT data powering smarter decisions for peak performance.\" },\r\n { icon:\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\", title:\"Instant Handover\", desc:\"Smart handover ensuring zero operational delays \u2014 your facility is 'awake' from day one.\" },\r\n ].map(function(card, i) {\r\n return React.createElement(Reveal, { key: i, dir: \"up\", delay: i * 0.07 },\r\n React.createElement(TiltCard, { className: \"h-full\" },\r\n React.createElement('div', { className: \"glass-strong group h-full rounded-2xl p-7 transition-all duration-500 hover:shadow-2xl cursor-default hover-lift\", style: { boxShadow: \"0 4px 20px rgba(29,45,62,0.04)\" } },\r\n React.createElement('div', { className: \"mb-5 w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:rotate-6\", style: { background: \"rgba(29,45,62,0.06)\" } },\r\n React.createElement('svg', { width: \"26\", height: \"26\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"1.5\" },\r\n React.createElement('path', { d: card.icon })\r\n )\r\n ),\r\n React.createElement('h3', { className: \"text-base font-bold text-main mb-2 playfair\" }, card.title),\r\n React.createElement('p', { className: \"text-[13px] leading-relaxed text-main\", style: { opacity: 0.6 } }, card.desc)\r\n )\r\n )\r\n )\r\n })\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Section 7: Closing CTA\r\n React.createElement('section', { className: \"relative z-10 px-4 py-20 sm:py-28\" },\r\n React.createElement('div', { className: \"mx-auto max-w-4xl\" },\r\n React.createElement(Reveal, { dir: \"scale\" },\r\n React.createElement('div', { className: \"relative overflow-hidden rounded-[2.5rem] p-10 sm:p-16 text-center\", style: { background: C } },\r\n React.createElement('div', { className: \"absolute -left-16 -top-16 w-48 h-48 rounded-full opacity-[0.08]\", style: { background: \"radial-gradient(circle, white 0%, transparent 70%)\", animation: \"float1 14s ease-in-out infinite\" } }),\r\n React.createElement('div', { className: \"absolute -bottom-20 -right-20 w-72 h-72 rounded-full opacity-[0.06]\", style: { background: \"radial-gradient(circle, white 0%, transparent 70%)\", animation: \"float2 18s ease-in-out infinite\" } }),\r\n React.createElement('div', { className: \"absolute right-16 top-8 w-24 h-24 rounded-full\", style: { border: \"1px solid rgba(255,255,255,0.06)\", animation: \"spin-slow 35s linear infinite\" } }),\r\n React.createElement('div', { className: \"absolute left-16 bottom-8 w-16 h-16 rounded-full\", style: { border: \"1px solid rgba(255,255,255,0.04)\", animation: \"spin-slow 25s linear infinite reverse\" } }),\r\n React.createElement('div', { className: \"relative z-10\" },\r\n React.createElement('div', { className: \"mb-6 inline-flex items-center gap-2 rounded-full px-4 py-1.5\", style: { background: \"rgba(255,255,255,0.08)\", border: \"1px solid rgba(255,255,255,0.1)\" } },\r\n React.createElement('div', { className: \"w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse\" }),\r\n React.createElement('span', { className: \"text-[10px] font-semibold uppercase tracking-[0.2em] text-white\/60\" }, \"Let's Build Together\")\r\n ),\r\n React.createElement('h2', { className: \"playfair text-white\", style: { fontSize: \"clamp(1.8rem, 4vw, 3rem)\", fontWeight: 800, lineHeight: 1.2 } },\r\n \"Building the Future,\", React.createElement('br'),\r\n React.createElement('span', { className: \"inline-block mt-2\", style: { background: \"linear-gradient(90deg, white, #93c5fd, white)\", WebkitBackgroundClip: \"text\", WebkitTextFillColor: \"transparent\", backgroundClip: \"text\" } },\r\n \"One Asset at a Time\"\r\n )\r\n ),\r\n React.createElement('p', { className: \"mx-auto mt-6 max-w-lg text-sm sm:text-[15px] leading-relaxed text-white\/50\" },\r\n \"Partner with EW to transform your construction projects into intelligent, sustainable ecosystems that perform from day one.\"\r\n ),\r\n React.createElement('div', { className: \"mt-10 flex flex-wrap items-center justify-center gap-4\" },\r\n React.createElement('button', { className: \"group rounded-full bg-white px-8 py-3.5 text-sm font-bold text-main transition-all duration-300 hover:shadow-xl hover:shadow-white\/20 hover:scale-105\" }, \"Get in Touch\"),\r\n React.createElement('button', { className: \"rounded-full px-8 py-3.5 text-sm font-medium text-white transition-all duration-300 hover:bg-white\/10\", style: { border: \"1px solid rgba(255,255,255,0.15)\" } }, \"Learn More \u2192\")\r\n )\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Footer\r\n React.createElement('footer', { className: \"relative z-10 px-4 py-10\", style: { borderTop: \"1px solid rgba(29,45,62,0.06)\" } },\r\n React.createElement('div', { className: \"mx-auto max-w-7xl flex flex-col items-center gap-4 sm:flex-row sm:justify-between\" },\r\n React.createElement('div', { className: \"flex items-center gap-3\" },\r\n React.createElement('span', { className: \"text-2xl font-black text-main playfair\" }, \"EW\"),\r\n React.createElement('div', { className: \"w-px h-5\", style: { background: \"rgba(29,45,62,0.15)\" } }),\r\n React.createElement('span', { className: \"text-xs text-main\", style: { opacity: 0.35 } }, \"Emaar Al Watan\")\r\n ),\r\n React.createElement('p', { className: \"text-[11px] text-main\", style: { opacity: 0.3 } }, \"\u00a9 2025 Emaar Al Watan. All rights reserved.\")\r\n )\r\n )\r\n );\r\n }\r\n\r\n \/\/ Render the app\r\n ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App, null));\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>EW \u2013 Emaar Al Watan | About<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-541","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/comments?post=541"}],"version-history":[{"count":33,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/541\/revisions"}],"predecessor-version":[{"id":2197,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/541\/revisions\/2197"}],"wp:attachment":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/media?parent=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}