EW \u2013 Emaar Al Watan | Project Portfolio<\/title>\r\n \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 \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n \/* ----- \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0631\u0643\u0627\u062a \u0648\u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0645\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0623\u0635\u0644\u064a ----- *\/\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\r\n \/* \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0644\u0644\u062c\u0648\u0627\u0644 *\/\r\n @media (max-width: 640px) {\r\n .hero-p { font-size: 0.9rem !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased overflow-x-hidden\">\r\n <div id=\"root\"><\/div>\r\n\r\n \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 \r\n <script>\r\n (function() {\r\n if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {\r\n document.getElementById('root').innerHTML = '<div style=\"color:red; padding:2rem; text-align:center;\">\u0641\u0634\u0644 \u062a\u062d\u0645\u064a\u0644 \u0645\u0643\u062a\u0628\u0627\u062a React. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u062a\u0635\u0627\u0644 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a.<\/div>';\r\n return;\r\n }\r\n\r\n const { useRef, useEffect, useState, useCallback } = React;\r\n\r\n \/\/ ----- HOOK: useInView -----\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 \/\/ ----- \u0645\u0643\u0648\u0646 Reveal -----\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 \/\/ ----- \u0645\u0643\u0648\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0630\u0627\u062a \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f (Tilt) -----\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) * 6; \/\/ \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u062c\u0648\u0627\u0644\r\n const y = ((e.clientY - r.top) \/ r.height - 0.5) * -6;\r\n c.style.transform = `perspective(800px) rotateY(${x}deg) rotateX(${y}deg) scale3d(1.01,1.01,1.01)`;\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 \/\/ ----- \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0645\u0639\u062f\u0644\u0629 \u0644\u062a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649) -----\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 = 70; \/\/ \u062a\u0642\u0644\u064a\u0644 \u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0644\u0644\u062c\u0648\u0627\u0644\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.3,\r\n dy: (Math.random() - 0.5) * 0.3,\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 < 100) { \/\/ \u062a\u0642\u0644\u064a\u0644 \u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0631\u0628\u0637 \u0644\u0644\u062c\u0648\u0627\u0644\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.04 * (1 - dist \/ 100)})`;\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 \/\/ ----- \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0631\u0626\u064a\u0633\u064a -----\r\n function App() {\r\n const C = \"#1D2D3E\";\r\n\r\n \/\/ \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\r\n const projects = [\r\n { icon: \"home\", title: \"Private Villa \u2013 Mr. Bandar Abdulrahim\", desc: \"High-end interior fit-out works for private villa.\", location: \"Riyadh\", year: \"2025\", badge: \"Residential\", status: \"Ongoing\" },\r\n { icon: \"home\", title: \"Private Villa \u2013 Dr. Mohammed Salah\", desc: \"Bespoke interior finishing works for private residence.\", location: \"Riyadh\", year: \"2025\", badge: \"Residential\", status: \"Ongoing\" },\r\n { icon: \"home\", title: \"Luxury Residence 03\", desc: \"Turnkey interior fit-out including mockups and handover.\", location: \"Riyadh\", year: \"2026\", badge: \"Residential\", status: \"Ongoing\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 04\", desc: \"Interior finishes, ceilings and flooring works.\", location: \"Riyadh\", year: \"2023\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 05\", desc: \"Luxury villa renovation and interior works.\", location: \"Jeddah\", year: \"2023\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 06\", desc: \"Custom interior works and joinery coordination.\", location: \"Riyadh\", year: \"2024\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 07\", desc: \"Turnkey interior works and handover documentation.\", location: \"Riyadh\", year: \"2024\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 01\", desc: \"Interior fit-out works for corporate office.\", location: \"Riyadh\", year: \"2023\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 02\", desc: \"Office interior finishing project.\", location: \"Jeddah\", year: \"2023\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 03\", desc: \"Corporate office renovation and supervision.\", location: \"Riyadh\", year: \"2024\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 04\", desc: \"Interior fit-out works with QA\/QC.\", location: \"Riyadh\", year: \"2025\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Auditorium \u2013 MEWA Branch\", desc: \"Auditorium interior works and acoustic coordination.\", location: \"Saudi Arabia\", year: \"2023\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Ministry Branch \u2013 Northern Borders\", desc: \"Interior fit-out works for ministry branch.\", location: \"Northern Borders\", year: \"2023\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Ministry Branch \u2013 Asir Region\", desc: \"Interior finishing works for government facility.\", location: \"Asir\", year: \"2024\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Ministry Branch \u2013 Qassim Region\", desc: \"Interior fit-out works and handover support.\", location: \"Qassim\", year: \"2024\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"city\", title: \"Saudi Exports Authority HQ\", desc: \"Interior fit-out works for headquarters.\", location: \"KAFD \u2013 Tower 505\", year: \"2024\", badge: \"Office \/ Gov\", status: \"Completed\" },\r\n { icon: \"briefcase\", title: \"PIF Office Project\", desc: \"Interior fit-out works for office space.\", location: \"KAFD \u2013 Tower 116\", year: \"2024\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"city\", title: \"Landmark High-Rise Office\", desc: \"Interior works in one of Riyadh\u2019s tallest towers.\", location: \"Riyadh\", year: \"2024\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"industry\", title: \"Aramco Headquarters \u2013 KAFD\", desc: \"Interior finishing coordination and QA\/QC support.\", location: \"KAFD\", year: \"2023\", badge: \"Corporate\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Commercial Office \u2013 Mixed Use\", desc: \"Interior fit-out works for office building.\", location: \"Riyadh\", year: \"2025\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Compound Facilities\", desc: \"Interior works for residential compound facilities.\", location: \"Riyadh\", year: \"2025\", badge: \"Residential \/ FM\", status: \"Completed\" },\r\n { icon: \"tools\", title: \"FM Support \u2013 Offices\", desc: \"Post-handover facility management support.\", location: \"Riyadh\", year: \"2025\", badge: \"Facility Mgmt\", status: \"Ongoing\" },\r\n { icon: \"tools\", title: \"FM Support \u2013 Residential\", desc: \"FM transition and reporting for residential projects.\", location: \"Riyadh & Jeddah\", year: \"2026\", badge: \"Facility Mgmt\", status: \"Ongoing\" }\r\n ];\r\n\r\n \/\/ \u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u0635\u0648\u0631 (23 \u0635\u0648\u0631\u0629)\r\n const projectImages = [\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/70cc2c41-52a5-43a4-826e-ad4f5787b414-scaled.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/DSC02980-scaled-1300x1300-1.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/b1922b52-323a-4804-94ac-78b0d3d20004.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/52f2ea21-829b-4b22-b8a9-37c982f04203-1-scaled.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/WhatsApp-Image-2026-01-29-at-17.02.26-3.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/8c0c3afc-9433-410e-846b-7d73837d8a55.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/WhatsApp-Image-2026-01-29-at-17.02.26.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/25-client-stories-bnp-paribas-relocates-its-saudi-arabia-gallery1.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-01-29-at-17.02.27.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-01-29-at-17.02.26.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-01-29-at-17.02.26-3.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/DSC02980-scaled-1300x1300-1.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-3.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-bnp-paribas-relocates-its-saudi-arabia-gallery2.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/Picture7.png\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-6.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-3.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/c670bb06-95d8-4bfa-af39-2dcad8e05606.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/kafd_022.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-4.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/20230812_123125.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/Picture4.png\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/20230617_155505-scaled-1.jpg\"\r\n ];\r\n\r\n \/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629 \u0644\u0644\u0623\u0644\u0648\u0627\u0646\r\n const badgeColor = (badge) => {\r\n if (badge.includes('Residential')) return '#6c5ce7';\r\n if (badge.includes('Commercial') || badge.includes('Corporate') || badge.includes('Office')) return '#2980b9';\r\n if (badge.includes('Government')) return '#16a085';\r\n if (badge.includes('FM') || badge.includes('Facility')) return '#f1c40f';\r\n return '#6c5ce7';\r\n };\r\n\r\n const statusColor = (status) => {\r\n return status === 'Completed' ? '#2ecc71' : '#f39c12';\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 React.createElement(ParticleCanvas, null),\r\n\r\n \/\/ \u0627\u0644\u0623\u0634\u0643\u0627\u0644 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 \u0627\u0644\u0639\u0627\u0626\u0645\u0629 (\u0645\u0635\u063a\u0631\u0629 \u0644\u0644\u062c\u0648\u0627\u0644)\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-24 h-24 sm:w-36 sm: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-20 h-20 sm:w-28 sm: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-32 h-32 sm:w-44 sm: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-16 h-16 sm:w-24 sm: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-24 h-24 sm:w-32 sm: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-14 h-14 sm:w-20 sm: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 ),\r\n\r\n \/\/ \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a: HERO (\u0645\u062d\u0633\u0651\u0646 \u0644\u0644\u062c\u0648\u0627\u0644 - \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0622\u0646 PROJECTS \u0648\u0628\u062d\u062c\u0645 \u0623\u0635\u063a\u0631)\r\n React.createElement('section', { className: \"relative z-10 flex items-center justify-center px-4 py-12 md:py-0 md:min-h-screen\" },\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-[300px] h-[300px] sm:w-[500px] sm: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-[220px] h-[220px] sm:w-[380px] sm: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-[160px] h-[160px] sm:w-[280px] sm: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-[220px] h-[220px] sm:w-[380px] sm: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 h-2 sm:w-2.5 sm:h-2.5 rounded-full\", style: { background: C, opacity: 0.15 } })\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-6 sm:mb-8 inline-flex items-center gap-2 sm:gap-3 rounded-full border px-4 sm:px-6 py-2 sm: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-[10px] sm:text-[11px] font-semibold uppercase tracking-[0.2em] sm:tracking-[0.25em] text-main\" }, \"Our work\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.15 },\r\n \/\/ \u062a\u0645 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0646\u0635 \u0645\u0646 PORTFOLIO \u0625\u0644\u0649 PROJECTS \u0648\u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637\r\n React.createElement('h1', { \r\n className: \"shimmer-text playfair text-[12vw] sm:text-[10vw] md:text-[8rem] font-black leading-[0.8] sm:leading-[0.9] tracking-[-0.03em] break-words whitespace-normal\",\r\n style: { wordBreak: 'break-word' }\r\n }, \"PROJECTS\")\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.35 },\r\n React.createElement('div', { className: \"mt-4 sm:mt-6 mx-auto max-w-xl px-2 sm:px-0\" },\r\n React.createElement('p', { className: \"text-sm sm:text-base md:text-lg font-light leading-relaxed tracking-wide text-main hero-p\", style: { opacity: 0.75 } },\r\n \"A record of landmark interior and facility projects shaping the kingdom\"\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-3 sm:gap-4\" },\r\n React.createElement('div', { className: \"h-px w-12 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\", sm: { 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-12 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 \/\/ \u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 (\u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a) - \u0645\u062d\u0633\u0646\u0629 \u0644\u0644\u062c\u0648\u0627\u0644\r\n React.createElement('section', { className: \"relative z-10 px-2 sm:px-4 py-12 sm:py-20 md:py-32\" },\r\n React.createElement('div', { className: \"mx-auto max-w-7xl\" },\r\n React.createElement('div', { className: \"grid gap-3 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 items-stretch\" },\r\n projects.map(function(project, idx) {\r\n return React.createElement(Reveal, { key: idx, dir: \"up\", delay: (idx % 8) * 0.05 },\r\n React.createElement(TiltCard, { className: \"h-full\" },\r\n React.createElement('div', { \r\n className: \"glass-strong group relative h-full rounded-xl sm:rounded-2xl p-4 sm:p-6 transition-all duration-500 hover:shadow-2xl cursor-default hover-lift flex flex-col\",\r\n style: { boxShadow: \"0 4px 20px rgba(29,45,62,0.04)\" }\r\n },\r\n \/\/ \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 - \u062d\u062c\u0645 \u0645\u062a\u062c\u0627\u0648\u0628\r\n React.createElement('div', { className: \"mb-3 sm:mb-4 w-16 h-16 sm:w-20 sm:h-20 rounded-xl sm:rounded-2xl overflow-hidden transition-all duration-500 group-hover:scale-110 group-hover:rotate-6\", style: { background: \"rgba(29,45,62,0.06)\" } },\r\n React.createElement('img', {\r\n src: projectImages[idx],\r\n alt: project.title,\r\n className: \"w-full h-full object-cover rounded-xl sm:rounded-2xl\",\r\n loading: \"lazy\"\r\n })\r\n ),\r\n \/\/ \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0648\u0648\u0635\u0641\u0647\r\n React.createElement('h3', { className: \"text-sm sm:text-base font-bold text-main mb-1 playfair line-clamp-2\" }, project.title),\r\n React.createElement('p', { className: \"text-xs sm:text-[13px] leading-relaxed text-main mb-2 sm:mb-3 line-clamp-2\", style: { opacity: 0.7 } }, project.desc),\r\n \r\n \/\/ \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0627\u0644\u0633\u0646\u0629\r\n React.createElement('div', { className: \"flex items-center gap-2 sm:gap-3 text-[11px] sm:text-[12px] text-main mb-2 sm:mb-3 flex-wrap\", style: { opacity: 0.65 } },\r\n React.createElement('span', { className: \"flex items-center gap-1\" },\r\n React.createElement('svg', { width: \"10\", height: \"10\", sm: { width: \"12\", height: \"12\" }, viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2\" },\r\n React.createElement('path', { d: \"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" }),\r\n React.createElement('circle', { cx: \"12\", cy: \"10\", r: \"3\" })\r\n ),\r\n project.location\r\n ),\r\n React.createElement('span', { className: \"flex items-center gap-1\" },\r\n React.createElement('svg', { width: \"10\", height: \"10\", sm: { width: \"12\", height: \"12\" }, viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2\" },\r\n React.createElement('rect', { x: \"3\", y: \"4\", width: \"18\", height: \"18\", rx: \"2\", ry: \"2\" }),\r\n React.createElement('line', { x1: \"16\", y1: \"2\", x2: \"16\", y2: \"6\" }),\r\n React.createElement('line', { x1: \"8\", y1: \"2\", x2: \"8\", y2: \"6\" }),\r\n React.createElement('line', { x1: \"3\", y1: \"10\", x2: \"21\", y2: \"10\" })\r\n ),\r\n project.year\r\n )\r\n ),\r\n\r\n \/\/ \u0634\u0627\u0631\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0648\u0627\u0644\u062d\u0627\u0644\u0629\r\n React.createElement('div', { className: \"mt-auto flex flex-wrap items-center gap-1 sm:gap-2 pt-1 sm:pt-2\" },\r\n React.createElement('span', { \r\n className: \"text-[8px] sm:text-[10px] font-bold uppercase tracking-wider px-2 sm:px-3 py-1 sm:py-1.5 rounded-full\",\r\n style: { background: badgeColor(project.badge), color: project.badge.includes('FM') ? '#000' : '#fff', opacity: 0.9 }\r\n }, project.badge),\r\n React.createElement('span', { \r\n className: \"text-[8px] sm:text-[10px] font-bold uppercase tracking-wider px-2 sm:px-3 py-1 sm:py-1.5 rounded-full\",\r\n style: { background: statusColor(project.status) + '30', color: statusColor(project.status), border: `1px solid ${statusColor(project.status)}` }\r\n }, project.status)\r\n )\r\n )\r\n )\r\n )\r\n })\r\n )\r\n )\r\n ),\r\n\r\n \/\/ \u062a\u0630\u064a\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n React.createElement('footer', { className: \"relative z-10 px-4 py-6 sm: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-3 sm:flex-row sm:justify-between\" },\r\n React.createElement('div', { className: \"flex items-center gap-2 sm:gap-3\" },\r\n React.createElement('span', { className: \"text-xl sm:text-2xl font-black text-main playfair\" }, \"EW\"),\r\n React.createElement('div', { className: \"w-px h-4 sm:h-5\", style: { background: \"rgba(29,45,62,0.15)\" } }),\r\n React.createElement('span', { className: \"text-[10px] sm:text-xs text-main\", style: { opacity: 0.35 } }, \"Emaar Al Watan\")\r\n ),\r\n React.createElement('p', { className: \"text-[10px] sm: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 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<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>EW \u2013 Emaar Al Watan | Project Portfolio<\/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":"default","site-content-style":"default","site-sidebar-style":"default","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-543","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/543","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=543"}],"version-history":[{"count":69,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/543\/revisions"}],"predecessor-version":[{"id":2420,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/543\/revisions\/2420"}],"wp:attachment":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/media?parent=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 | Project Portfolio<\/title>\r\n \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 \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n \/* ----- \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0631\u0643\u0627\u062a \u0648\u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0645\u0646 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0623\u0635\u0644\u064a ----- *\/\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\r\n \/* \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0644\u0644\u062c\u0648\u0627\u0644 *\/\r\n @media (max-width: 640px) {\r\n .hero-p { font-size: 0.9rem !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased overflow-x-hidden\">\r\n <div id=\"root\"><\/div>\r\n\r\n \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 \r\n <script>\r\n (function() {\r\n if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {\r\n document.getElementById('root').innerHTML = '<div style=\"color:red; padding:2rem; text-align:center;\">\u0641\u0634\u0644 \u062a\u062d\u0645\u064a\u0644 \u0645\u0643\u062a\u0628\u0627\u062a React. \u064a\u0631\u062c\u0649 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u062a\u0635\u0627\u0644 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a.<\/div>';\r\n return;\r\n }\r\n\r\n const { useRef, useEffect, useState, useCallback } = React;\r\n\r\n \/\/ ----- HOOK: useInView -----\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 \/\/ ----- \u0645\u0643\u0648\u0646 Reveal -----\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 \/\/ ----- \u0645\u0643\u0648\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0630\u0627\u062a \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u062b\u0644\u0627\u062b\u064a \u0627\u0644\u0623\u0628\u0639\u0627\u062f (Tilt) -----\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) * 6; \/\/ \u062a\u0642\u0644\u064a\u0644 \u0627\u0644\u062d\u0633\u0627\u0633\u064a\u0629 \u0644\u0644\u062c\u0648\u0627\u0644\r\n const y = ((e.clientY - r.top) \/ r.height - 0.5) * -6;\r\n c.style.transform = `perspective(800px) rotateY(${x}deg) rotateX(${y}deg) scale3d(1.01,1.01,1.01)`;\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 \/\/ ----- \u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a (\u0645\u0639\u062f\u0644\u0629 \u0644\u062a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649) -----\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 = 70; \/\/ \u062a\u0642\u0644\u064a\u0644 \u0639\u062f\u062f \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0644\u0644\u062c\u0648\u0627\u0644\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.3,\r\n dy: (Math.random() - 0.5) * 0.3,\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 < 100) { \/\/ \u062a\u0642\u0644\u064a\u0644 \u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0631\u0628\u0637 \u0644\u0644\u062c\u0648\u0627\u0644\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.04 * (1 - dist \/ 100)})`;\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 \/\/ ----- \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0631\u0626\u064a\u0633\u064a -----\r\n function App() {\r\n const C = \"#1D2D3E\";\r\n\r\n \/\/ \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639\r\n const projects = [\r\n { icon: \"home\", title: \"Private Villa \u2013 Mr. Bandar Abdulrahim\", desc: \"High-end interior fit-out works for private villa.\", location: \"Riyadh\", year: \"2025\", badge: \"Residential\", status: \"Ongoing\" },\r\n { icon: \"home\", title: \"Private Villa \u2013 Dr. Mohammed Salah\", desc: \"Bespoke interior finishing works for private residence.\", location: \"Riyadh\", year: \"2025\", badge: \"Residential\", status: \"Ongoing\" },\r\n { icon: \"home\", title: \"Luxury Residence 03\", desc: \"Turnkey interior fit-out including mockups and handover.\", location: \"Riyadh\", year: \"2026\", badge: \"Residential\", status: \"Ongoing\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 04\", desc: \"Interior finishes, ceilings and flooring works.\", location: \"Riyadh\", year: \"2023\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 05\", desc: \"Luxury villa renovation and interior works.\", location: \"Jeddah\", year: \"2023\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 06\", desc: \"Custom interior works and joinery coordination.\", location: \"Riyadh\", year: \"2024\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Fit-Out 07\", desc: \"Turnkey interior works and handover documentation.\", location: \"Riyadh\", year: \"2024\", badge: \"Residential\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 01\", desc: \"Interior fit-out works for corporate office.\", location: \"Riyadh\", year: \"2023\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 02\", desc: \"Office interior finishing project.\", location: \"Jeddah\", year: \"2023\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 03\", desc: \"Corporate office renovation and supervision.\", location: \"Riyadh\", year: \"2024\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Corporate Office Fit-Out 04\", desc: \"Interior fit-out works with QA\/QC.\", location: \"Riyadh\", year: \"2025\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Auditorium \u2013 MEWA Branch\", desc: \"Auditorium interior works and acoustic coordination.\", location: \"Saudi Arabia\", year: \"2023\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Ministry Branch \u2013 Northern Borders\", desc: \"Interior fit-out works for ministry branch.\", location: \"Northern Borders\", year: \"2023\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Ministry Branch \u2013 Asir Region\", desc: \"Interior finishing works for government facility.\", location: \"Asir\", year: \"2024\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"landmark\", title: \"Ministry Branch \u2013 Qassim Region\", desc: \"Interior fit-out works and handover support.\", location: \"Qassim\", year: \"2024\", badge: \"Government\", status: \"Completed\" },\r\n { icon: \"city\", title: \"Saudi Exports Authority HQ\", desc: \"Interior fit-out works for headquarters.\", location: \"KAFD \u2013 Tower 505\", year: \"2024\", badge: \"Office \/ Gov\", status: \"Completed\" },\r\n { icon: \"briefcase\", title: \"PIF Office Project\", desc: \"Interior fit-out works for office space.\", location: \"KAFD \u2013 Tower 116\", year: \"2024\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"city\", title: \"Landmark High-Rise Office\", desc: \"Interior works in one of Riyadh\u2019s tallest towers.\", location: \"Riyadh\", year: \"2024\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"industry\", title: \"Aramco Headquarters \u2013 KAFD\", desc: \"Interior finishing coordination and QA\/QC support.\", location: \"KAFD\", year: \"2023\", badge: \"Corporate\", status: \"Completed\" },\r\n { icon: \"building\", title: \"Commercial Office \u2013 Mixed Use\", desc: \"Interior fit-out works for office building.\", location: \"Riyadh\", year: \"2025\", badge: \"Commercial\", status: \"Completed\" },\r\n { icon: \"home\", title: \"Residential Compound Facilities\", desc: \"Interior works for residential compound facilities.\", location: \"Riyadh\", year: \"2025\", badge: \"Residential \/ FM\", status: \"Completed\" },\r\n { icon: \"tools\", title: \"FM Support \u2013 Offices\", desc: \"Post-handover facility management support.\", location: \"Riyadh\", year: \"2025\", badge: \"Facility Mgmt\", status: \"Ongoing\" },\r\n { icon: \"tools\", title: \"FM Support \u2013 Residential\", desc: \"FM transition and reporting for residential projects.\", location: \"Riyadh & Jeddah\", year: \"2026\", badge: \"Facility Mgmt\", status: \"Ongoing\" }\r\n ];\r\n\r\n \/\/ \u0631\u0648\u0627\u0628\u0637 \u0627\u0644\u0635\u0648\u0631 (23 \u0635\u0648\u0631\u0629)\r\n const projectImages = [\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/70cc2c41-52a5-43a4-826e-ad4f5787b414-scaled.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/DSC02980-scaled-1300x1300-1.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/b1922b52-323a-4804-94ac-78b0d3d20004.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/52f2ea21-829b-4b22-b8a9-37c982f04203-1-scaled.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/WhatsApp-Image-2026-01-29-at-17.02.26-3.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/8c0c3afc-9433-410e-846b-7d73837d8a55.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/WhatsApp-Image-2026-01-29-at-17.02.26.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/25-client-stories-bnp-paribas-relocates-its-saudi-arabia-gallery1.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-01-29-at-17.02.27.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-01-29-at-17.02.26.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-01-29-at-17.02.26-3.jpeg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/02\/DSC02980-scaled-1300x1300-1.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-3.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-bnp-paribas-relocates-its-saudi-arabia-gallery2.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/Picture7.png\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-6.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-3.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/c670bb06-95d8-4bfa-af39-2dcad8e05606.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/kafd_022.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/25-client-stories-jll-delivers-saudi-industrial-gallery-4.webp\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/20230812_123125.jpg\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/Picture4.png\",\r\n \"https:\/\/emaaralwatan.com\/wp-content\/uploads\/2026\/03\/20230617_155505-scaled-1.jpg\"\r\n ];\r\n\r\n \/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629 \u0644\u0644\u0623\u0644\u0648\u0627\u0646\r\n const badgeColor = (badge) => {\r\n if (badge.includes('Residential')) return '#6c5ce7';\r\n if (badge.includes('Commercial') || badge.includes('Corporate') || badge.includes('Office')) return '#2980b9';\r\n if (badge.includes('Government')) return '#16a085';\r\n if (badge.includes('FM') || badge.includes('Facility')) return '#f1c40f';\r\n return '#6c5ce7';\r\n };\r\n\r\n const statusColor = (status) => {\r\n return status === 'Completed' ? '#2ecc71' : '#f39c12';\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 React.createElement(ParticleCanvas, null),\r\n\r\n \/\/ \u0627\u0644\u0623\u0634\u0643\u0627\u0644 \u0627\u0644\u0647\u0646\u062f\u0633\u064a\u0629 \u0627\u0644\u0639\u0627\u0626\u0645\u0629 (\u0645\u0635\u063a\u0631\u0629 \u0644\u0644\u062c\u0648\u0627\u0644)\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-24 h-24 sm:w-36 sm: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-20 h-20 sm:w-28 sm: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-32 h-32 sm:w-44 sm: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-16 h-16 sm:w-24 sm: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-24 h-24 sm:w-32 sm: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-14 h-14 sm:w-20 sm: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 ),\r\n\r\n \/\/ \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0631\u0626\u064a\u0633\u064a: HERO (\u0645\u062d\u0633\u0651\u0646 \u0644\u0644\u062c\u0648\u0627\u0644 - \u0627\u0644\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0622\u0646 PROJECTS \u0648\u0628\u062d\u062c\u0645 \u0623\u0635\u063a\u0631)\r\n React.createElement('section', { className: \"relative z-10 flex items-center justify-center px-4 py-12 md:py-0 md:min-h-screen\" },\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-[300px] h-[300px] sm:w-[500px] sm: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-[220px] h-[220px] sm:w-[380px] sm: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-[160px] h-[160px] sm:w-[280px] sm: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-[220px] h-[220px] sm:w-[380px] sm: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 h-2 sm:w-2.5 sm:h-2.5 rounded-full\", style: { background: C, opacity: 0.15 } })\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-6 sm:mb-8 inline-flex items-center gap-2 sm:gap-3 rounded-full border px-4 sm:px-6 py-2 sm: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-[10px] sm:text-[11px] font-semibold uppercase tracking-[0.2em] sm:tracking-[0.25em] text-main\" }, \"Our work\")\r\n )\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.15 },\r\n \/\/ \u062a\u0645 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0646\u0635 \u0645\u0646 PORTFOLIO \u0625\u0644\u0649 PROJECTS \u0648\u062a\u0635\u063a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u062e\u0637\r\n React.createElement('h1', { \r\n className: \"shimmer-text playfair text-[12vw] sm:text-[10vw] md:text-[8rem] font-black leading-[0.8] sm:leading-[0.9] tracking-[-0.03em] break-words whitespace-normal\",\r\n style: { wordBreak: 'break-word' }\r\n }, \"PROJECTS\")\r\n ),\r\n React.createElement(Reveal, { dir: \"up\", delay: 0.35 },\r\n React.createElement('div', { className: \"mt-4 sm:mt-6 mx-auto max-w-xl px-2 sm:px-0\" },\r\n React.createElement('p', { className: \"text-sm sm:text-base md:text-lg font-light leading-relaxed tracking-wide text-main hero-p\", style: { opacity: 0.75 } },\r\n \"A record of landmark interior and facility projects shaping the kingdom\"\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-3 sm:gap-4\" },\r\n React.createElement('div', { className: \"h-px w-12 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\", sm: { 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-12 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 \/\/ \u0634\u0628\u0643\u0629 \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 (\u0627\u0644\u0628\u0637\u0627\u0642\u0627\u062a) - \u0645\u062d\u0633\u0646\u0629 \u0644\u0644\u062c\u0648\u0627\u0644\r\n React.createElement('section', { className: \"relative z-10 px-2 sm:px-4 py-12 sm:py-20 md:py-32\" },\r\n React.createElement('div', { className: \"mx-auto max-w-7xl\" },\r\n React.createElement('div', { className: \"grid gap-3 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 items-stretch\" },\r\n projects.map(function(project, idx) {\r\n return React.createElement(Reveal, { key: idx, dir: \"up\", delay: (idx % 8) * 0.05 },\r\n React.createElement(TiltCard, { className: \"h-full\" },\r\n React.createElement('div', { \r\n className: \"glass-strong group relative h-full rounded-xl sm:rounded-2xl p-4 sm:p-6 transition-all duration-500 hover:shadow-2xl cursor-default hover-lift flex flex-col\",\r\n style: { boxShadow: \"0 4px 20px rgba(29,45,62,0.04)\" }\r\n },\r\n \/\/ \u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0635\u0648\u0631\u0629 - \u062d\u062c\u0645 \u0645\u062a\u062c\u0627\u0648\u0628\r\n React.createElement('div', { className: \"mb-3 sm:mb-4 w-16 h-16 sm:w-20 sm:h-20 rounded-xl sm:rounded-2xl overflow-hidden transition-all duration-500 group-hover:scale-110 group-hover:rotate-6\", style: { background: \"rgba(29,45,62,0.06)\" } },\r\n React.createElement('img', {\r\n src: projectImages[idx],\r\n alt: project.title,\r\n className: \"w-full h-full object-cover rounded-xl sm:rounded-2xl\",\r\n loading: \"lazy\"\r\n })\r\n ),\r\n \/\/ \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 \u0648\u0648\u0635\u0641\u0647\r\n React.createElement('h3', { className: \"text-sm sm:text-base font-bold text-main mb-1 playfair line-clamp-2\" }, project.title),\r\n React.createElement('p', { className: \"text-xs sm:text-[13px] leading-relaxed text-main mb-2 sm:mb-3 line-clamp-2\", style: { opacity: 0.7 } }, project.desc),\r\n \r\n \/\/ \u0627\u0644\u0645\u0648\u0642\u0639 \u0648\u0627\u0644\u0633\u0646\u0629\r\n React.createElement('div', { className: \"flex items-center gap-2 sm:gap-3 text-[11px] sm:text-[12px] text-main mb-2 sm:mb-3 flex-wrap\", style: { opacity: 0.65 } },\r\n React.createElement('span', { className: \"flex items-center gap-1\" },\r\n React.createElement('svg', { width: \"10\", height: \"10\", sm: { width: \"12\", height: \"12\" }, viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2\" },\r\n React.createElement('path', { d: \"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z\" }),\r\n React.createElement('circle', { cx: \"12\", cy: \"10\", r: \"3\" })\r\n ),\r\n project.location\r\n ),\r\n React.createElement('span', { className: \"flex items-center gap-1\" },\r\n React.createElement('svg', { width: \"10\", height: \"10\", sm: { width: \"12\", height: \"12\" }, viewBox: \"0 0 24 24\", fill: \"none\", stroke: C, strokeWidth: \"2\" },\r\n React.createElement('rect', { x: \"3\", y: \"4\", width: \"18\", height: \"18\", rx: \"2\", ry: \"2\" }),\r\n React.createElement('line', { x1: \"16\", y1: \"2\", x2: \"16\", y2: \"6\" }),\r\n React.createElement('line', { x1: \"8\", y1: \"2\", x2: \"8\", y2: \"6\" }),\r\n React.createElement('line', { x1: \"3\", y1: \"10\", x2: \"21\", y2: \"10\" })\r\n ),\r\n project.year\r\n )\r\n ),\r\n\r\n \/\/ \u0634\u0627\u0631\u0629 \u0627\u0644\u062a\u0635\u0646\u064a\u0641 \u0648\u0627\u0644\u062d\u0627\u0644\u0629\r\n React.createElement('div', { className: \"mt-auto flex flex-wrap items-center gap-1 sm:gap-2 pt-1 sm:pt-2\" },\r\n React.createElement('span', { \r\n className: \"text-[8px] sm:text-[10px] font-bold uppercase tracking-wider px-2 sm:px-3 py-1 sm:py-1.5 rounded-full\",\r\n style: { background: badgeColor(project.badge), color: project.badge.includes('FM') ? '#000' : '#fff', opacity: 0.9 }\r\n }, project.badge),\r\n React.createElement('span', { \r\n className: \"text-[8px] sm:text-[10px] font-bold uppercase tracking-wider px-2 sm:px-3 py-1 sm:py-1.5 rounded-full\",\r\n style: { background: statusColor(project.status) + '30', color: statusColor(project.status), border: `1px solid ${statusColor(project.status)}` }\r\n }, project.status)\r\n )\r\n )\r\n )\r\n )\r\n })\r\n )\r\n )\r\n ),\r\n\r\n \/\/ \u062a\u0630\u064a\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n React.createElement('footer', { className: \"relative z-10 px-4 py-6 sm: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-3 sm:flex-row sm:justify-between\" },\r\n React.createElement('div', { className: \"flex items-center gap-2 sm:gap-3\" },\r\n React.createElement('span', { className: \"text-xl sm:text-2xl font-black text-main playfair\" }, \"EW\"),\r\n React.createElement('div', { className: \"w-px h-4 sm:h-5\", style: { background: \"rgba(29,45,62,0.15)\" } }),\r\n React.createElement('span', { className: \"text-[10px] sm:text-xs text-main\", style: { opacity: 0.35 } }, \"Emaar Al Watan\")\r\n ),\r\n React.createElement('p', { className: \"text-[10px] sm: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 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<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>EW \u2013 Emaar Al Watan | Project Portfolio<\/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":"default","site-content-style":"default","site-sidebar-style":"default","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-543","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/543","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=543"}],"version-history":[{"count":69,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/543\/revisions"}],"predecessor-version":[{"id":2420,"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/pages\/543\/revisions\/2420"}],"wp:attachment":[{"href":"https:\/\/emaaralwatan.com\/ar\/wp-json\/wp\/v2\/media?parent=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}