{"id":544,"date":"2026-02-02T15:54:13","date_gmt":"2026-02-02T15:54:13","guid":{"rendered":"https:\/\/emaaralwatan.com\/contact\/"},"modified":"2026-03-15T14:02:11","modified_gmt":"2026-03-15T14:02:11","slug":"contact","status":"publish","type":"page","link":"https:\/\/emaaralwatan.com\/ar\/contact\/","title":{"rendered":"\u0627\u0644\u062a\u0648\u0627\u0635\u0644"},"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 | Contact<\/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 (kept but unused, safe) -----\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 (Contact page) -----\r\n function App() {\r\n const C = \"#1D2D3E\";\r\n\r\n \/\/ Contact data with icon paths (simple, elegant line icons)\r\n const contacts = [\r\n { \r\n label: \"Website\", \r\n value: \"www.emaaralwatan.com\", \r\n icon: \"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.66 0 3-4 3-9s-1.34-9-3-9m0 18c-1.66 0-3-4-3-9s1.34-9 3-9\",\r\n link: \"https:\/\/www.emaaralwatan.com\"\r\n },\r\n { \r\n label: \"Email\", \r\n value: \"info@ew-spu.com\", \r\n icon: \"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z M22 6L12 13 2 6\",\r\n link: \"mailto:info@ew-spu.com\"\r\n },\r\n { \r\n label: \"LinkedIn\", \r\n value: \"linkedin.com\/company\/ew-spu\", \r\n icon: \"M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z M2 9h4v12H2z M4 2a2 2 0 110 4 2 2 0 010-4z\",\r\n link: \"https:\/\/linkedin.com\/company\/ew-spu\"\r\n },\r\n { \r\n label: \"Instagram\", \r\n value: \"instagram.com\/ew_spu\", \r\n icon: \"M12 2c2.7 0 3 0 4 .1 1 .1 1.7.3 2.3.6.6.3 1.2.7 1.7 1.2.5.5.9 1.1 1.2 1.7.3.6.5 1.3.6 2.3.1 1 .1 1.3.1 4s0 3-.1 4c-.1 1-.3 1.7-.6 2.3-.3.6-.7 1.2-1.2 1.7-.5.5-1.1.9-1.7 1.2-.6.3-1.3.5-2.3.6-1 .1-1.3.1-4 .1s-3 0-4-.1c-1-.1-1.7-.3-2.3-.6-.6-.3-1.2-.7-1.7-1.2-.5-.5-.9-1.1-1.2-1.7-.3-.6-.5-1.3-.6-2.3-.1-1-.1-1.3-.1-4s0-3 .1-4c.1-1 .3-1.7.6-2.3.3-.6.7-1.2 1.2-1.7.5-.5 1.1-.9 1.7-1.2.6-.3 1.3-.5 2.3-.6 1-.1 1.3-.1 4-.1z M12 6a6 6 0 000 12 6 6 0 000-12z M19.5 5.5a1 1 0 11-2 0 1 1 0 012 0z\",\r\n link: \"https:\/\/instagram.com\/ew_spu\"\r\n },\r\n { \r\n label: \"Snapchat\", \r\n value: \"snapchat.com\/add\/ew_spu\", \r\n icon: \"M12,2 C8,2 4,6 4,10 C4,14 6,16 6,16 L6,22 L18,22 L18,16 C18,16 20,14 20,10 C20,6 16,2 12,2 Z M8,10 C8.5,10 9,10.5 9,11 C9,11.5 8.5,12 8,12 C7.5,12 7,11.5 7,11 C7,10.5 7.5,10 8,10 Z M16,10 C16.5,10 17,10.5 17,11 C17,11.5 16.5,12 16,12 C15.5,12 15,11.5 15,11 C15,10.5 15.5,10 16,10 Z M12,14 C13.5,14 14.5,15 14.5,15 L9.5,15 C9.5,15 10.5,14 12,14 Z\",\r\n link: \"https:\/\/snapchat.com\/add\/ew_spu\"\r\n }\r\n ];\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) \u2014 same as original for consistency\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 (Contact) \u2013 \u0645\u062d\u0633\u0651\u0646 \u0644\u0644\u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0645\u062d\u0645\u0648\u0644\u0629\r\n React.createElement('section', { className: \"relative z-10 flex min-h-screen items-center justify-center px-4 py-12 sm:py-0\" },\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 px-2\" },\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\" }, \"Get in touch\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.15 },\r\n React.createElement('h1', { \r\n className: \"shimmer-text playfair\", \r\n style: { \r\n fontSize: \"clamp(3.2rem, 10vw, 11rem)\", \/\/ \u0623\u0635\u063a\u0631 \u0639\u0644\u0649 \u0627\u0644\u0645\u062d\u0645\u0648\u0644\r\n fontWeight: 900, \r\n lineHeight: 1, \r\n letterSpacing: \"-0.03em\" \r\n } \r\n }, \"CONTACT\")\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.35 },\r\n React.createElement('div', { className: \"mt-4 mx-auto max-w-xs sm:max-w-xl\" },\r\n React.createElement('p', { \r\n className: \"text-xs sm:text-base md:text-lg font-light leading-relaxed tracking-wide text-main break-words\", \r\n style: { opacity: 0.75 } \r\n },\r\n \"Let's connect and build something exceptional together\" \/\/ \u0628\u062f\u0648\u0646 <br> \u0644\u0636\u0645\u0627\u0646 \u0639\u062f\u0645 \u0627\u0644\u062a\u0642\u0633\u064a\u0645\r\n )\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.55 },\r\n React.createElement('div', { className: \"mt-8 sm:mt-12 flex items-center justify-center gap-4\" },\r\n React.createElement('div', { className: \"h-px w-16 sm:w-20\", style: { background: `linear-gradient(90deg, transparent, rgba(29,45,62,0.3))` } }),\r\n React.createElement('div', { className: \"w-8 h-8 sm:w-10 sm: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: \"14\", height: \"14\", 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-16 sm: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: Contact Cards (5 items, fully responsive) with visible buttons\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-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 items-stretch\" },\r\n contacts.map(function(contact, idx) {\r\n return React.createElement(Reveal, { key: idx, dir: \"up\", delay: idx * 0.08 },\r\n React.createElement(TiltCard, { className: \"h-full\" },\r\n \/\/ Make the entire card a clickable link\r\n React.createElement('a', { \r\n href: contact.link,\r\n target: \"_blank\",\r\n rel: \"noopener noreferrer\",\r\n className: \"block h-full no-underline text-inherit\",\r\n style: { textDecoration: 'none', color: 'inherit' }\r\n },\r\n React.createElement('div', { \r\n className: \"glass-strong group relative h-full rounded-2xl p-6 transition-all duration-500 hover:shadow-2xl cursor-pointer hover-lift flex flex-col items-center text-center\",\r\n style: { boxShadow: \"0 4px 20px rgba(29,45,62,0.04)\" }\r\n },\r\n React.createElement('div', { className: \"mb-5 w-16 h-16 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: \"28\", height: \"28\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"1.5\" },\r\n React.createElement('path', { d: contact.icon })\r\n )\r\n ),\r\n React.createElement('h3', { className: \"text-sm font-bold text-main mb-2 playfair tracking-wide\" }, contact.label),\r\n React.createElement('p', { className: \"text-[12px] leading-relaxed text-main break-all px-1\", style: { opacity: 0.7 } }, contact.value),\r\n \r\n \/\/ Visible button instead of hover-only link\r\n React.createElement('div', { className: \"mt-4 w-full\" },\r\n React.createElement('span', { \r\n className: \"inline-flex items-center justify-center gap-2 px-4 py-2 text-[11px] font-semibold uppercase tracking-wider rounded-full border transition-all duration-300 group-hover:bg-opacity-20\",\r\n style: { \r\n borderColor: C,\r\n color: C,\r\n background: \"rgba(29,45,62,0.04)\",\r\n }\r\n }, \r\n \"Open\", \r\n React.createElement('svg', { width: \"14\", height: \"14\", viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: \"2\" },\r\n React.createElement('path', { d: \"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6 M15 3h6v6 M10 14L21 3\" })\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 3: Closing CTA (inspired by original, adapted for contact)\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-8 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 talk\")\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 \"Ready to elevate your\", 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 \"next project?\"\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 \"Whether you need smart asset management or a digital-first partner, we're just a message away.\"\r\n ),\r\n React.createElement('div', { className: \"mt-10 flex flex-wrap items-center justify-center gap-4\" },\r\n React.createElement('a', { \r\n href: \"mailto:info@ew-spu.com\", \r\n 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\",\r\n style: { textDecoration: 'none' }\r\n }, \"Email Us\"),\r\n React.createElement('a', { \r\n href: \"https:\/\/linkedin.com\/company\/ew-spu\", \r\n target: \"_blank\", \r\n rel: \"noopener noreferrer\",\r\n className: \"rounded-full px-8 py-3.5 text-sm font-medium text-white transition-all duration-300 hover:bg-white\/10\", \r\n style: { border: \"1px solid rgba(255,255,255,0.15)\", textDecoration: 'none' }\r\n }, \"LinkedIn \u2192\")\r\n )\r\n )\r\n )\r\n )\r\n )\r\n ),\r\n\r\n \/\/ Footer (same as original)\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 | Contact<\/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-544","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/544","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=544"}],"version-history":[{"count":21,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/544\/revisions"}],"predecessor-version":[{"id":2458,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/544\/revisions\/2458"}],"wp:attachment":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/media?parent=544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}