Jacaranda Images | Fine Art Prints & Photography<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Playfair+Display:ital@1&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0627\u0644\u0623\u0628\u064a\u0636 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0628\u0642\u0648\u0629 \u0625\u062c\u0628\u0627\u0631\u064a\u0629 \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062a\u0635\u0641\u062d *\/\r\n html, body, *, *::before, *::after, a, button, input, textarea, select, .cursor-link, svg, path {\r\n cursor: none !important;\r\n }\r\n\r\n body { font-family: 'Inter', sans-serif; position: relative; }\r\n .font-serif { font-family: 'Playfair Display', serif; }\r\n\r\n \/* --- \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0627\u0644\u0645\u062e\u0635\u0635 \u0627\u0644\u0645\u062d\u062f\u062b --- *\/\r\n .cursor-dot {\r\n position: fixed;\r\n width: 8px;\r\n height: 8px;\r\n background: #9333ea;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 100000;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.2s ease;\r\n }\r\n .cursor-ring {\r\n position: fixed;\r\n width: 35px;\r\n height: 35px;\r\n border: 1px solid rgba(147, 51, 234, 0.4);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 99999;\r\n transform: translate(-50%, -50%);\r\n transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;\r\n }\r\n .cursor-ring.active {\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(147, 51, 234, 0.1);\r\n }\r\n\r\n \/* --- \u0623\u0646\u0645\u064a\u0634\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 --- *\/\r\n @keyframes drift {\r\n 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }\r\n 20% { opacity: 0.3; }\r\n 100% { transform: translate(-150px, -100vh) rotate(360deg); opacity: 0; }\r\n }\r\n @keyframes textReveal {\r\n from { transform: translateY(100%); }\r\n to { transform: translateY(0); }\r\n }\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .text-line { overflow: hidden; display: block; }\r\n .animate-reveal {\r\n display: block;\r\n transform: translateY(100%);\r\n animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n .petal {\r\n position: absolute;\r\n background: rgba(167, 139, 250, 0.2);\r\n border-radius: 50%;\r\n filter: blur(8px);\r\n pointer-events: none;\r\n z-index: 20;\r\n }\r\n #lightbox { display: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#fafafa] text-[#2d2d2d] selection:bg-purple-200 overflow-x-hidden\">\r\n\r\n \r\n <div id=\"cursor-dot\" class=\"cursor-dot hidden md:block\"><\/div>\r\n <div id=\"cursor-ring\" class=\"cursor-ring hidden md:block\"><\/div>\r\n\r\n \r\n <section id=\"home\" class=\"relative h-screen flex items-center justify-center overflow-hidden bg-stone-950\">\r\n <div id=\"petals-container\" class=\"absolute inset-0 pointer-events-none z-20\"><\/div>\r\n <div id=\"hero-bg\" class=\"absolute inset-0 w-full h-full opacity-50 scale-110\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1459749411177-042180ce673c?auto=format&fit=crop&q=80&w=2000\" \r\n class=\"w-full h-full object-cover grayscale brightness-50\" alt=\"Jacaranda background\">\r\n <\/div>\r\n <div class=\"relative z-30 text-center px-4 max-w-5xl\">\r\n <h1 class=\"text-6xl md:text-8xl font-light text-white mb-6 leading-none tracking-tight\">\r\n <span class=\"text-line\"><span class=\"animate-reveal\" style=\"animation-delay: 0.1s;\">THE ART OF<\/span><\/span>\r\n <span class=\"text-line italic font-serif text-purple-300\"><span class=\"animate-reveal\" style=\"animation-delay: 0.3s;\">Paper & Image<\/span><\/span>\r\n <\/h1>\r\n <p class=\"text-lg md:text-xl text-stone-300 mb-10 max-w-xl mx-auto font-light leading-relaxed reveal\" style=\"transition-delay: 0.6s;\">\r\n A curated space in Jabal Amman dedicated to exceptional fine art prints and limited editions.\r\n <\/p>\r\n <div class=\"reveal\" style=\"transition-delay: 0.8s;\">\r\n <a href=\"#gallery\" class=\"bg-white text-black px-10 py-4 rounded-full inline-flex items-center gap-2 hover:bg-purple-50 transition-all transform hover:-translate-y-1 font-bold uppercase text-[10px] tracking-widest shadow-xl cursor-link\">\r\n Explore Collection <i data-lucide=\"arrow-right\" class=\"w-3 h-3\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"gallery\" class=\"py-24 px-6 md:px-12 max-w-7xl mx-auto\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-20 gap-8 reveal\">\r\n <div>\r\n <span class=\"text-purple-600 font-bold tracking-[0.3em] text-[10px] uppercase mb-2 block\">Curated<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-light text-stone-800 tracking-tight\">Recent Works<\/h2>\r\n <\/div>\r\n <div id=\"filter-buttons\" class=\"flex flex-wrap gap-3\">\r\n <button data-filter=\"All\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all bg-stone-900 text-white border-stone-900 shadow-lg\">All<\/button>\r\n <button data-filter=\"Prints\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300\">Prints<\/button>\r\n <button data-filter=\"Photography\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300\">Photography<\/button>\r\n <button data-filter=\"Sketches\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300\">Sketches<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"artwork-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\" class=\"py-24 bg-white relative overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-6 md:px-12 grid grid-cols-1 lg:grid-cols-2 gap-20 items-center\">\r\n <div class=\"relative reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1493306411421-5c7e9c522b3a?auto=format&fit=crop&q=80&w=1000\" \r\n class=\"rounded-sm shadow-2xl relative z-10 w-full grayscale hover:grayscale-0 transition-all duration-1000\" alt=\"Gallery Interior\">\r\n <div class=\"absolute -top-10 -left-10 w-32 h-32 bg-purple-50 rounded-full z-0\"><\/div>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <span class=\"text-purple-600 font-bold tracking-[0.3em] text-[10px] uppercase mb-4 block\">Since 2009<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-light mb-8 text-stone-800 leading-tight\">Artistic Excellence in the Heart of Amman<\/h2>\r\n <p class=\"text-stone-600 leading-relaxed mb-6 text-lg font-light\">\r\n Jacaranda Images was founded to bring a new perspective to the Jordanian art scene.\r\n <\/p>\r\n <div class=\"flex gap-12 pt-8 border-t border-stone-100\">\r\n <div>\r\n <div class=\"text-4xl font-light text-stone-900 mb-1 tracking-tight\">15+<\/div>\r\n <div class=\"text-[10px] font-bold text-stone-400 uppercase tracking-widest\">Years of Art<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"py-24 bg-stone-50 px-6 md:px-12\">\r\n <div class=\"max-w-7xl mx-auto bg-white rounded-sm shadow-2xl overflow-hidden flex flex-col lg:flex-row reveal\">\r\n <div class=\"lg:w-2\/5 p-12 md:p-16 bg-stone-900 text-white flex flex-col justify-between\">\r\n <div>\r\n <h2 class=\"text-4xl font-light mb-12 tracking-tight\">Connect with Us<\/h2>\r\n <div class=\"space-y-10\">\r\n <div class=\"flex items-start gap-5 group cursor-link\">\r\n <i data-lucide=\"map-pin\" class=\"text-purple-400 mt-1 shrink-0 group-hover:scale-110 transition-transform\"><\/i>\r\n <div>\r\n <p class=\"font-medium text-lg mb-1\">Jabal Amman, Rainbow St.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:w-3\/5 p-12 md:p-16\">\r\n <h3 class=\"text-2xl font-light mb-10 text-stone-800\">Direct Message<\/h3>\r\n <form id=\"contact-form\" class=\"space-y-8\" onsubmit=\"event.preventDefault();\">\r\n <input type=\"text\" placeholder=\"Full Name\" class=\"w-full pb-3 border-b border-stone-200 outline-none bg-transparent\">\r\n <button class=\"bg-stone-900 text-white px-10 py-4 rounded-full font-bold uppercase text-[10px] tracking-widest cursor-link\">Send Message<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"py-16 px-6 text-center\">\r\n <p class=\"text-stone-400 text-[10px] tracking-widest uppercase italic\">\u00a9 <span id=\"year\"><\/span> Jacaranda Images \u2022 Amman<\/p>\r\n <\/footer>\r\n\r\n \r\n <div id=\"lightbox\" class=\"fixed inset-0 z-[100] bg-white\/98 backdrop-blur-xl flex items-center justify-center p-6 transition-all duration-500\">\r\n <button id=\"close-lightbox\" class=\"absolute top-10 right-10 text-stone-900 hover:text-purple-600 transition-all p-4 cursor-link\">\r\n <i data-lucide=\"x\" class=\"w-8 h-8\"><\/i>\r\n <\/button>\r\n <div class=\"max-w-6xl w-full flex flex-col md:flex-row gap-16 items-center\">\r\n <img decoding=\"async\" id=\"lightbox-img\" src=\"\" class=\"w-full max-h-[75vh] object-contain shadow-2xl\">\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const initJacarandaApp = () => {\r\n if (typeof lucide === 'undefined') {\r\n setTimeout(initJacarandaApp, 100);\r\n return;\r\n }\r\n\r\n const artworks = [\r\n { id: 1, title: \"Amman from Above\", artist: \"Ahmed Kamal\", type: \"Photography\", img: \"https:\/\/images.unsplash.com\/photo-1541963463532-d68292c34b19?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 2, title: \"Paper Abstraction\", artist: \"Layla Hassan\", type: \"Prints\", img: \"https:\/\/images.unsplash.com\/photo-1579783902614-a3fb3927b6a5?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 3, title: \"Lines of Jabal Amman\", artist: \"Sami Nasser\", type: \"Sketches\", img: \"https:\/\/images.unsplash.com\/photo-1515405290399-33351837b94b?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 4, title: \"Jacaranda Bloom\", artist: \"Maria Silva\", type: \"Prints\", img: \"https:\/\/images.unsplash.com\/photo-1554188248-986adbb73be4?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 5, title: \"Silent Portrait\", artist: \"Yasin Taha\", type: \"Photography\", img: \"https:\/\/images.unsplash.com\/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 6, title: \"Geometric Composition\", artist: \"Farah Oun\", type: \"Sketches\", img: \"https:\/\/images.unsplash.com\/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=800\" },\r\n ];\r\n\r\n lucide.createIcons();\r\n document.getElementById('year').innerText = new Date().getFullYear();\r\n\r\n \/\/ Custom Cursor Logic\r\n const dot = document.getElementById('cursor-dot');\r\n const ring = document.getElementById('cursor-ring');\r\n let mouseX = 0, mouseY = 0, ringX = 0, ringY = 0;\r\n\r\n window.addEventListener('mousemove', (e) => {\r\n mouseX = e.clientX; mouseY = e.clientY;\r\n if (dot) {\r\n dot.style.left = mouseX + 'px';\r\n dot.style.top = mouseY + 'px';\r\n }\r\n });\r\n\r\n const animateRing = () => {\r\n ringX += (mouseX - ringX) * 0.15;\r\n ringY += (mouseY - ringY) * 0.15;\r\n if (ring) {\r\n ring.style.left = ringX + 'px';\r\n ring.style.top = ringY + 'px';\r\n }\r\n requestAnimationFrame(animateRing);\r\n };\r\n animateRing();\r\n\r\n \/\/ Function to attach hover logic for cursor\r\n const attachCursorHover = () => {\r\n document.querySelectorAll('a, button, .cursor-link, input, textarea, select').forEach(el => {\r\n el.addEventListener('mouseenter', () => {\r\n if (ring) ring.classList.add('active');\r\n });\r\n el.addEventListener('mouseleave', () => {\r\n if (ring) ring.classList.remove('active');\r\n });\r\n });\r\n };\r\n\r\n \/\/ Hero Parallax\r\n const heroBg = document.getElementById('hero-bg');\r\n window.addEventListener('mousemove', (e) => {\r\n const moveX = (e.clientX - window.innerWidth \/ 2) \/ 100;\r\n const moveY = (e.clientY - window.innerHeight \/ 2) \/ 100;\r\n if (heroBg) heroBg.style.transform = `scale(1.1) translate(${moveX}px, ${moveY}px)`;\r\n });\r\n\r\n \/\/ Generate Petals\r\n const container = document.getElementById('petals-container');\r\n if (container) {\r\n for (let i = 0; i < 12; i++) {\r\n const petal = document.createElement('div');\r\n petal.className = 'petal';\r\n const size = Math.random() * 20 + 10;\r\n petal.style.width = size + 'px'; petal.style.height = size + 'px';\r\n petal.style.left = Math.random() * 100 + '%'; petal.style.bottom = '-50px';\r\n petal.style.animation = `drift ${Math.random() * 10 + 10}s infinite linear`;\r\n petal.style.animationDelay = Math.random() * 5 + 's';\r\n container.appendChild(petal);\r\n }\r\n }\r\n\r\n \/\/ Scroll Reveal Observer\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('reveal-visible'); });\r\n }, { threshold: 0.1 });\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n\r\n \/\/ Gallery Rendering\r\n const grid = document.getElementById('artwork-grid');\r\n window.renderGallery = (type = 'All') => {\r\n grid.innerHTML = '';\r\n const filtered = type === 'All' ? artworks : artworks.filter(a => a.type === type);\r\n filtered.forEach((art, index) => {\r\n const item = document.createElement('div');\r\n item.className = 'group reveal reveal-visible cursor-link';\r\n item.style.transitionDelay = (index * 100) + 'ms';\r\n item.innerHTML = `\r\n <div class=\"relative overflow-hidden bg-stone-100 aspect-[3\/4] mb-6 rounded-sm shadow-sm group-hover:shadow-xl transition-all duration-500 cursor-pointer\" onclick=\"openLightbox(${art.id})\">\r\n <img decoding=\"async\" src=\"${art.img}\" alt=\"${art.title}\" class=\"w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105\">\r\n <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[1px]\">\r\n <div class=\"bg-white\/90 p-3 rounded-full transform translate-y-4 group-hover:translate-y-0 transition-transform\">\r\n <i data-lucide=\"maximize-2\" class=\"text-black w-5 h-5\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <h3 class=\"text-xl font-light mb-1\">${art.title}<\/h3>\r\n <p class=\"text-stone-400 text-[10px] uppercase tracking-widest font-bold italic\">${art.artist} \u2022 ${art.type}<\/p>\r\n `;\r\n grid.appendChild(item);\r\n });\r\n lucide.createIcons();\r\n attachCursorHover(); \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0641\u0639\u064a\u0644 \u0647\u0648\u0641\u0631 \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0644\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062c\u062f\u064a\u062f\u0629\r\n }\r\n renderGallery();\r\n\r\n \/\/ Filters Logic\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.filter-btn').forEach(b => b.className = 'filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300');\r\n btn.className = 'filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all bg-stone-900 text-white border-stone-900 shadow-lg';\r\n renderGallery(btn.dataset.filter);\r\n });\r\n });\r\n\r\n \/\/ Lightbox Logic\r\n const lightbox = document.getElementById('lightbox');\r\n window.openLightbox = (id) => {\r\n const art = artworks.find(a => a.id === id);\r\n document.getElementById('lightbox-img').src = art.img;\r\n lightbox.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n };\r\n document.getElementById('close-lightbox').addEventListener('click', () => {\r\n lightbox.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n });\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0627\u0644\u0645\u062e\u0635\u0635\r\n attachCursorHover();\r\n };\r\n\r\n window.addEventListener('DOMContentLoaded', initJacarandaApp);\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","protected":false},"excerpt":{"rendered":"<p>Jacaranda Images | Fine Art Prints & Photography THE ART OF Paper & Image A curated space in Jabal Amman dedicated to exceptional fine art prints and limited editions. Explore Collection Curated Recent Works All Prints Photography Sketches Since 2009 Artistic Excellence in the Heart of Amman Jacaranda Images was founded to bring a new […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":5,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"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 Jacaranda Images | Fine Art Prints & Photography<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Playfair+Display:ital@1&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0627\u0644\u0623\u0628\u064a\u0636 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a \u0628\u0642\u0648\u0629 \u0625\u062c\u0628\u0627\u0631\u064a\u0629 \u0639\u0644\u0649 \u0643\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0645\u062a\u0635\u0641\u062d *\/\r\n html, body, *, *::before, *::after, a, button, input, textarea, select, .cursor-link, svg, path {\r\n cursor: none !important;\r\n }\r\n\r\n body { font-family: 'Inter', sans-serif; position: relative; }\r\n .font-serif { font-family: 'Playfair Display', serif; }\r\n\r\n \/* --- \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0627\u0644\u0645\u062e\u0635\u0635 \u0627\u0644\u0645\u062d\u062f\u062b --- *\/\r\n .cursor-dot {\r\n position: fixed;\r\n width: 8px;\r\n height: 8px;\r\n background: #9333ea;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 100000;\r\n transform: translate(-50%, -50%);\r\n transition: transform 0.2s ease;\r\n }\r\n .cursor-ring {\r\n position: fixed;\r\n width: 35px;\r\n height: 35px;\r\n border: 1px solid rgba(147, 51, 234, 0.4);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n z-index: 99999;\r\n transform: translate(-50%, -50%);\r\n transition: width 0.3s ease, height 0.3s ease, background 0.3s ease, border-color 0.3s ease;\r\n }\r\n .cursor-ring.active {\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(147, 51, 234, 0.1);\r\n }\r\n\r\n \/* --- \u0623\u0646\u0645\u064a\u0634\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 --- *\/\r\n @keyframes drift {\r\n 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }\r\n 20% { opacity: 0.3; }\r\n 100% { transform: translate(-150px, -100vh) rotate(360deg); opacity: 0; }\r\n }\r\n @keyframes textReveal {\r\n from { transform: translateY(100%); }\r\n to { transform: translateY(0); }\r\n }\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n .reveal-visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .text-line { overflow: hidden; display: block; }\r\n .animate-reveal {\r\n display: block;\r\n transform: translateY(100%);\r\n animation: textReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;\r\n }\r\n .petal {\r\n position: absolute;\r\n background: rgba(167, 139, 250, 0.2);\r\n border-radius: 50%;\r\n filter: blur(8px);\r\n pointer-events: none;\r\n z-index: 20;\r\n }\r\n #lightbox { display: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-[#fafafa] text-[#2d2d2d] selection:bg-purple-200 overflow-x-hidden\">\r\n\r\n \r\n <div id=\"cursor-dot\" class=\"cursor-dot hidden md:block\"><\/div>\r\n <div id=\"cursor-ring\" class=\"cursor-ring hidden md:block\"><\/div>\r\n\r\n \r\n <section id=\"home\" class=\"relative h-screen flex items-center justify-center overflow-hidden bg-stone-950\">\r\n <div id=\"petals-container\" class=\"absolute inset-0 pointer-events-none z-20\"><\/div>\r\n <div id=\"hero-bg\" class=\"absolute inset-0 w-full h-full opacity-50 scale-110\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1459749411177-042180ce673c?auto=format&fit=crop&q=80&w=2000\" \r\n class=\"w-full h-full object-cover grayscale brightness-50\" alt=\"Jacaranda background\">\r\n <\/div>\r\n <div class=\"relative z-30 text-center px-4 max-w-5xl\">\r\n <h1 class=\"text-6xl md:text-8xl font-light text-white mb-6 leading-none tracking-tight\">\r\n <span class=\"text-line\"><span class=\"animate-reveal\" style=\"animation-delay: 0.1s;\">THE ART OF<\/span><\/span>\r\n <span class=\"text-line italic font-serif text-purple-300\"><span class=\"animate-reveal\" style=\"animation-delay: 0.3s;\">Paper & Image<\/span><\/span>\r\n <\/h1>\r\n <p class=\"text-lg md:text-xl text-stone-300 mb-10 max-w-xl mx-auto font-light leading-relaxed reveal\" style=\"transition-delay: 0.6s;\">\r\n A curated space in Jabal Amman dedicated to exceptional fine art prints and limited editions.\r\n <\/p>\r\n <div class=\"reveal\" style=\"transition-delay: 0.8s;\">\r\n <a href=\"#gallery\" class=\"bg-white text-black px-10 py-4 rounded-full inline-flex items-center gap-2 hover:bg-purple-50 transition-all transform hover:-translate-y-1 font-bold uppercase text-[10px] tracking-widest shadow-xl cursor-link\">\r\n Explore Collection <i data-lucide=\"arrow-right\" class=\"w-3 h-3\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"gallery\" class=\"py-24 px-6 md:px-12 max-w-7xl mx-auto\">\r\n <div class=\"flex flex-col md:flex-row justify-between items-end mb-20 gap-8 reveal\">\r\n <div>\r\n <span class=\"text-purple-600 font-bold tracking-[0.3em] text-[10px] uppercase mb-2 block\">Curated<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-light text-stone-800 tracking-tight\">Recent Works<\/h2>\r\n <\/div>\r\n <div id=\"filter-buttons\" class=\"flex flex-wrap gap-3\">\r\n <button data-filter=\"All\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all bg-stone-900 text-white border-stone-900 shadow-lg\">All<\/button>\r\n <button data-filter=\"Prints\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300\">Prints<\/button>\r\n <button data-filter=\"Photography\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300\">Photography<\/button>\r\n <button data-filter=\"Sketches\" class=\"filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300\">Sketches<\/button>\r\n <\/div>\r\n <\/div>\r\n <div id=\"artwork-grid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\" class=\"py-24 bg-white relative overflow-hidden\">\r\n <div class=\"max-w-7xl mx-auto px-6 md:px-12 grid grid-cols-1 lg:grid-cols-2 gap-20 items-center\">\r\n <div class=\"relative reveal\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1493306411421-5c7e9c522b3a?auto=format&fit=crop&q=80&w=1000\" \r\n class=\"rounded-sm shadow-2xl relative z-10 w-full grayscale hover:grayscale-0 transition-all duration-1000\" alt=\"Gallery Interior\">\r\n <div class=\"absolute -top-10 -left-10 w-32 h-32 bg-purple-50 rounded-full z-0\"><\/div>\r\n <\/div>\r\n <div class=\"reveal\">\r\n <span class=\"text-purple-600 font-bold tracking-[0.3em] text-[10px] uppercase mb-4 block\">Since 2009<\/span>\r\n <h2 class=\"text-4xl md:text-5xl font-light mb-8 text-stone-800 leading-tight\">Artistic Excellence in the Heart of Amman<\/h2>\r\n <p class=\"text-stone-600 leading-relaxed mb-6 text-lg font-light\">\r\n Jacaranda Images was founded to bring a new perspective to the Jordanian art scene.\r\n <\/p>\r\n <div class=\"flex gap-12 pt-8 border-t border-stone-100\">\r\n <div>\r\n <div class=\"text-4xl font-light text-stone-900 mb-1 tracking-tight\">15+<\/div>\r\n <div class=\"text-[10px] font-bold text-stone-400 uppercase tracking-widest\">Years of Art<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"py-24 bg-stone-50 px-6 md:px-12\">\r\n <div class=\"max-w-7xl mx-auto bg-white rounded-sm shadow-2xl overflow-hidden flex flex-col lg:flex-row reveal\">\r\n <div class=\"lg:w-2\/5 p-12 md:p-16 bg-stone-900 text-white flex flex-col justify-between\">\r\n <div>\r\n <h2 class=\"text-4xl font-light mb-12 tracking-tight\">Connect with Us<\/h2>\r\n <div class=\"space-y-10\">\r\n <div class=\"flex items-start gap-5 group cursor-link\">\r\n <i data-lucide=\"map-pin\" class=\"text-purple-400 mt-1 shrink-0 group-hover:scale-110 transition-transform\"><\/i>\r\n <div>\r\n <p class=\"font-medium text-lg mb-1\">Jabal Amman, Rainbow St.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"lg:w-3\/5 p-12 md:p-16\">\r\n <h3 class=\"text-2xl font-light mb-10 text-stone-800\">Direct Message<\/h3>\r\n <form id=\"contact-form\" class=\"space-y-8\" onsubmit=\"event.preventDefault();\">\r\n <input type=\"text\" placeholder=\"Full Name\" class=\"w-full pb-3 border-b border-stone-200 outline-none bg-transparent\">\r\n <button class=\"bg-stone-900 text-white px-10 py-4 rounded-full font-bold uppercase text-[10px] tracking-widest cursor-link\">Send Message<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"py-16 px-6 text-center\">\r\n <p class=\"text-stone-400 text-[10px] tracking-widest uppercase italic\">\u00a9 <span id=\"year\"><\/span> Jacaranda Images \u2022 Amman<\/p>\r\n <\/footer>\r\n\r\n \r\n <div id=\"lightbox\" class=\"fixed inset-0 z-[100] bg-white\/98 backdrop-blur-xl flex items-center justify-center p-6 transition-all duration-500\">\r\n <button id=\"close-lightbox\" class=\"absolute top-10 right-10 text-stone-900 hover:text-purple-600 transition-all p-4 cursor-link\">\r\n <i data-lucide=\"x\" class=\"w-8 h-8\"><\/i>\r\n <\/button>\r\n <div class=\"max-w-6xl w-full flex flex-col md:flex-row gap-16 items-center\">\r\n <img decoding=\"async\" id=\"lightbox-img\" src=\"\" class=\"w-full max-h-[75vh] object-contain shadow-2xl\">\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const initJacarandaApp = () => {\r\n if (typeof lucide === 'undefined') {\r\n setTimeout(initJacarandaApp, 100);\r\n return;\r\n }\r\n\r\n const artworks = [\r\n { id: 1, title: \"Amman from Above\", artist: \"Ahmed Kamal\", type: \"Photography\", img: \"https:\/\/images.unsplash.com\/photo-1541963463532-d68292c34b19?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 2, title: \"Paper Abstraction\", artist: \"Layla Hassan\", type: \"Prints\", img: \"https:\/\/images.unsplash.com\/photo-1579783902614-a3fb3927b6a5?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 3, title: \"Lines of Jabal Amman\", artist: \"Sami Nasser\", type: \"Sketches\", img: \"https:\/\/images.unsplash.com\/photo-1515405290399-33351837b94b?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 4, title: \"Jacaranda Bloom\", artist: \"Maria Silva\", type: \"Prints\", img: \"https:\/\/images.unsplash.com\/photo-1554188248-986adbb73be4?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 5, title: \"Silent Portrait\", artist: \"Yasin Taha\", type: \"Photography\", img: \"https:\/\/images.unsplash.com\/photo-1544005313-94ddf0286df2?auto=format&fit=crop&q=80&w=800\" },\r\n { id: 6, title: \"Geometric Composition\", artist: \"Farah Oun\", type: \"Sketches\", img: \"https:\/\/images.unsplash.com\/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=800\" },\r\n ];\r\n\r\n lucide.createIcons();\r\n document.getElementById('year').innerText = new Date().getFullYear();\r\n\r\n \/\/ Custom Cursor Logic\r\n const dot = document.getElementById('cursor-dot');\r\n const ring = document.getElementById('cursor-ring');\r\n let mouseX = 0, mouseY = 0, ringX = 0, ringY = 0;\r\n\r\n window.addEventListener('mousemove', (e) => {\r\n mouseX = e.clientX; mouseY = e.clientY;\r\n if (dot) {\r\n dot.style.left = mouseX + 'px';\r\n dot.style.top = mouseY + 'px';\r\n }\r\n });\r\n\r\n const animateRing = () => {\r\n ringX += (mouseX - ringX) * 0.15;\r\n ringY += (mouseY - ringY) * 0.15;\r\n if (ring) {\r\n ring.style.left = ringX + 'px';\r\n ring.style.top = ringY + 'px';\r\n }\r\n requestAnimationFrame(animateRing);\r\n };\r\n animateRing();\r\n\r\n \/\/ Function to attach hover logic for cursor\r\n const attachCursorHover = () => {\r\n document.querySelectorAll('a, button, .cursor-link, input, textarea, select').forEach(el => {\r\n el.addEventListener('mouseenter', () => {\r\n if (ring) ring.classList.add('active');\r\n });\r\n el.addEventListener('mouseleave', () => {\r\n if (ring) ring.classList.remove('active');\r\n });\r\n });\r\n };\r\n\r\n \/\/ Hero Parallax\r\n const heroBg = document.getElementById('hero-bg');\r\n window.addEventListener('mousemove', (e) => {\r\n const moveX = (e.clientX - window.innerWidth \/ 2) \/ 100;\r\n const moveY = (e.clientY - window.innerHeight \/ 2) \/ 100;\r\n if (heroBg) heroBg.style.transform = `scale(1.1) translate(${moveX}px, ${moveY}px)`;\r\n });\r\n\r\n \/\/ Generate Petals\r\n const container = document.getElementById('petals-container');\r\n if (container) {\r\n for (let i = 0; i < 12; i++) {\r\n const petal = document.createElement('div');\r\n petal.className = 'petal';\r\n const size = Math.random() * 20 + 10;\r\n petal.style.width = size + 'px'; petal.style.height = size + 'px';\r\n petal.style.left = Math.random() * 100 + '%'; petal.style.bottom = '-50px';\r\n petal.style.animation = `drift ${Math.random() * 10 + 10}s infinite linear`;\r\n petal.style.animationDelay = Math.random() * 5 + 's';\r\n container.appendChild(petal);\r\n }\r\n }\r\n\r\n \/\/ Scroll Reveal Observer\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('reveal-visible'); });\r\n }, { threshold: 0.1 });\r\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\r\n\r\n \/\/ Gallery Rendering\r\n const grid = document.getElementById('artwork-grid');\r\n window.renderGallery = (type = 'All') => {\r\n grid.innerHTML = '';\r\n const filtered = type === 'All' ? artworks : artworks.filter(a => a.type === type);\r\n filtered.forEach((art, index) => {\r\n const item = document.createElement('div');\r\n item.className = 'group reveal reveal-visible cursor-link';\r\n item.style.transitionDelay = (index * 100) + 'ms';\r\n item.innerHTML = `\r\n <div class=\"relative overflow-hidden bg-stone-100 aspect-[3\/4] mb-6 rounded-sm shadow-sm group-hover:shadow-xl transition-all duration-500 cursor-pointer\" onclick=\"openLightbox(${art.id})\">\r\n <img decoding=\"async\" src=\"${art.img}\" alt=\"${art.title}\" class=\"w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-105\">\r\n <div class=\"absolute inset-0 bg-black\/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[1px]\">\r\n <div class=\"bg-white\/90 p-3 rounded-full transform translate-y-4 group-hover:translate-y-0 transition-transform\">\r\n <i data-lucide=\"maximize-2\" class=\"text-black w-5 h-5\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <h3 class=\"text-xl font-light mb-1\">${art.title}<\/h3>\r\n <p class=\"text-stone-400 text-[10px] uppercase tracking-widest font-bold italic\">${art.artist} \u2022 ${art.type}<\/p>\r\n `;\r\n grid.appendChild(item);\r\n });\r\n lucide.createIcons();\r\n attachCursorHover(); \/\/ \u0625\u0639\u0627\u062f\u0629 \u062a\u0641\u0639\u064a\u0644 \u0647\u0648\u0641\u0631 \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0644\u0644\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u062c\u062f\u064a\u062f\u0629\r\n }\r\n renderGallery();\r\n\r\n \/\/ Filters Logic\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.filter-btn').forEach(b => b.className = 'filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all border-stone-200 text-stone-400 hover:border-purple-300');\r\n btn.className = 'filter-btn cursor-link px-6 py-2 rounded-full border text-[10px] font-bold uppercase tracking-widest transition-all bg-stone-900 text-white border-stone-900 shadow-lg';\r\n renderGallery(btn.dataset.filter);\r\n });\r\n });\r\n\r\n \/\/ Lightbox Logic\r\n const lightbox = document.getElementById('lightbox');\r\n window.openLightbox = (id) => {\r\n const art = artworks.find(a => a.id === id);\r\n document.getElementById('lightbox-img').src = art.img;\r\n lightbox.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n };\r\n document.getElementById('close-lightbox').addEventListener('click', () => {\r\n lightbox.style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n });\r\n\r\n \/\/ \u062a\u0634\u063a\u064a\u0644 \u0627\u0644\u0643\u064a\u0631\u0633\u0631 \u0627\u0644\u0645\u062e\u0635\u0635\r\n attachCursorHover();\r\n };\r\n\r\n window.addEventListener('DOMContentLoaded', initJacarandaApp);\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","protected":false},"excerpt":{"rendered":"<p>Jacaranda Images | Fine Art Prints & Photography THE ART OF Paper & Image A curated space in Jabal Amman dedicated to exceptional fine art prints and limited editions. Explore Collection Curated Recent Works All Prints Photography Sketches Since 2009 Artistic Excellence in the Heart of Amman Jacaranda Images was founded to bring a new […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":5,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":77,"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/77"}],"wp:attachment":[{"href":"https:\/\/jacaranda.qtechdemo.website\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}