Palm Avenue | Modern Premium Real Estate<\/title>\r\n <meta name=\"description\" content=\"Palm Avenue - Ultra-luxury living with 3D immersive technology.\">\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@300;400;600&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n :root {\r\n --gold: #D4AF37;\r\n --black: #0a0a0a;\r\n --dark-grey: #1a1a1a;\r\n --white: #ffffff;\r\n --glass: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { \r\n background-color: var(--black); \r\n color: var(--white); \r\n font-family: 'Montserrat', sans-serif; \r\n overflow-x: hidden; \r\n }\r\n\r\n h1, h2, .premium-font { font-family: 'Playfair Display', serif; }\r\n\r\n \/* --- Preloader --- *\/\r\n #preloader {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n background: var(--black); z-index: 9999;\r\n display: flex; justify-content: center; align-items: center;\r\n }\r\n .loader-logo { color: var(--gold); font-size: 2rem; letter-spacing: 5px; animation: pulse 2s infinite; }\r\n\r\n \/* --- Navbar --- *\/\r\n nav {\r\n position: fixed; top: 0; width: 100%; padding: 20px 50px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n z-index: 1000; transition: 0.4s;\r\n backdrop-filter: blur(10px); background: rgba(0,0,0,0.2);\r\n border-bottom: 1px solid var(--glass);\r\n }\r\n .logo { color: var(--gold); font-size: 1.5rem; font-weight: bold; text-decoration: none; }\r\n .nav-links a { color: white; text-decoration: none; margin-left: 30px; font-size: 0.9rem; transition: 0.3s; }\r\n .nav-links a:hover { color: var(--gold); }\r\n\r\n \/* --- Hero Section --- *\/\r\n .hero {\r\n height: 100vh; width: 100%; position: relative;\r\n display: flex; align-items: center; overflow: hidden;\r\n }\r\n #hero-video {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n object-fit: cover; opacity: 0.4; z-index: -1;\r\n }\r\n .hero-content { padding-left: 10%; z-index: 2; pointer-events: none; }\r\n .hero h1 { font-size: 5rem; line-height: 1.1; margin-bottom: 20px; }\r\n .hero p { font-size: 1.2rem; margin-bottom: 30px; color: #ccc; }\r\n .cta-btn {\r\n padding: 15px 40px; background: var(--gold); color: black;\r\n text-decoration: none; font-weight: bold; border-radius: 5px;\r\n display: inline-block; transition: 0.3s; pointer-events: auto;\r\n }\r\n .cta-btn:hover { background: white; transform: scale(1.05); }\r\n\r\n \/* --- 3D Canvas Containers --- *\/\r\n #hero-3d { position: absolute; right: 0; top: 0; width: 50%; height: 100vh; z-index: 1; }\r\n #map-3d { width: 100%; height: 500px; background: #111; cursor: grab; margin-top: 50px; }\r\n\r\n \/* --- Sections General --- *\/\r\n section { padding: 100px 10%; position: relative; }\r\n .section-title { font-size: 3rem; margin-bottom: 50px; text-align: center; color: var(--gold); }\r\n\r\n \/* --- About Section (Cards) --- *\/\r\n .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\r\n .about-card {\r\n background: var(--dark-grey); padding: 40px; border-radius: 15px;\r\n border: 1px solid var(--glass); transition: 0.4s;\r\n }\r\n .about-card:hover { transform: translateY(-10px); border-color: var(--gold); }\r\n .about-card i { font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; }\r\n\r\n \/* --- Gallery --- *\/\r\n .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }\r\n .gallery-item { height: 300px; background: #222; overflow: hidden; border-radius: 10px; }\r\n .gallery-item img { \r\n width: 100%; height: 100%; object-fit: cover; \r\n transition: 0.5s; filter: grayscale(100%);\r\n }\r\n .gallery-item:hover img { transform: scale(1.1); filter: grayscale(0%); }\r\n\r\n \/* --- Payment Plan --- *\/\r\n .payment-table { width: 100%; border-collapse: collapse; margin-top: 30px; }\r\n .payment-table th, .payment-table td { \r\n padding: 20px; border-bottom: 1px solid var(--glass); text-align: left; \r\n }\r\n .payment-table tr:hover { background: rgba(212, 175, 55, 0.1); }\r\n\r\n \/* --- Contact Form --- *\/\r\n .contact-container { display: flex; gap: 50px; }\r\n .contact-form { flex: 1; display: flex; flex-direction: column; gap: 20px; }\r\n .contact-form input, .contact-form textarea {\r\n padding: 15px; background: var(--dark-grey); border: 1px solid var(--glass);\r\n color: white; border-radius: 5px; outline: none;\r\n }\r\n .contact-form input:focus { border-color: var(--gold); }\r\n\r\n \/* --- Footer --- *\/\r\n footer { padding: 50px; text-align: center; border-top: 1px solid var(--glass); color: #666; }\r\n\r\n \/* --- Responsive --- *\/\r\n @media (max-width: 768px) {\r\n .hero h1 { font-size: 3rem; }\r\n #hero-3d { display: none; }\r\n .hero-content { padding-left: 5%; padding-right: 5%; text-align: center; }\r\n .gallery-grid { grid-template-columns: 1fr; }\r\n .contact-container { flex-direction: column; }\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n 100% { opacity: 0.5; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"preloader\">\r\n <div class=\"loader-logo\">PALM AVENUE<\/div>\r\n <\/div>\r\n\r\n \r\n <nav>\r\n <a href=\"#\" class=\"logo\">PALM AVENUE<\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#highlights\">Highlights<\/a>\r\n <a href=\"#map\">3D Map<\/a>\r\n <a href=\"#gallery\">Gallery<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <section class=\"hero\" id=\"home\">\r\n <video id=\"hero-video\" autoplay muted loop>\r\n <source src=\"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-modern-apartment-building-at-sunset-14115-large.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div id=\"hero-3d\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1>LIVING AT THE <br><span style=\"color:var(--gold)\">PEAK OF LUXURY<\/span><\/h1>\r\n <p>Experience Palm Avenue - A curated ecosystem of <br>high-end residences and smart architecture.<\/p>\r\n <a href=\"#contact\" class=\"cta-btn\">Book an Exclusive Tour<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\">\r\n <h2 class=\"section-title\">The Foundation<\/h2>\r\n <div class=\"about-grid\">\r\n <div class=\"about-card\">\r\n <i class=\"fas fa-gem\"><\/i>\r\n <h3>Premium Design<\/h3>\r\n <p>Architectural brilliance meet aesthetic perfection in every square foot.<\/p>\r\n <\/div>\r\n <div class=\"about-card\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <h3>Smart Security<\/h3>\r\n <p>24\/7 AI-integrated surveillance and biometrics for your peace of mind.<\/p>\r\n <\/div>\r\n <div class=\"about-card\">\r\n <i class=\"fas fa-leaf\"><\/i>\r\n <h3>Eco Conscious<\/h3>\r\n <p>Sustainable energy solutions and vertical gardens integrated into the structure.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"map\">\r\n <h2 class=\"section-title\">Interactive Masterplan<\/h2>\r\n <p style=\"text-align: center; margin-bottom: 20px;\">Rotate and explore the digital twin of Palm Avenue<\/p>\r\n <div id=\"map-3d\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"payment\">\r\n <h2 class=\"section-title\">Investment Plan<\/h2>\r\n <table class=\"payment-table\">\r\n <thead>\r\n <tr>\r\n <th>Installment Phase<\/th>\r\n <th>Percentage (%)<\/th>\r\n <th>Amount (USD)<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td>Booking Amount<\/td><td>10%<\/td><td>$50,000<\/td><\/tr>\r\n <tr><td>Confirmation<\/td><td>15%<\/td><td>$75,000<\/td><\/tr>\r\n <tr><td>30 Monthly Installments<\/td><td>50%<\/td><td>$250,000<\/td><\/tr>\r\n <tr><td>On Possession<\/td><td>25%<\/td><td>$125,000<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/section>\r\n\r\n \r\n <section id=\"gallery\">\r\n <h2 class=\"section-title\">A Visual Journey<\/h2>\r\n <div class=\"gallery-grid\">\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=800&q=80\" alt=\"Exteriors\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80\" alt=\"Interior\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512915928907-67678ff2931d?auto=format&fit=crop&w=800&q=80\" alt=\"Lobby\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\">\r\n <h2 class=\"section-title\">Contact Concierge<\/h2>\r\n <div class=\"contact-container\">\r\n <div class=\"contact-info\">\r\n <h3>Palm Avenue HQ<\/h3>\r\n <p>Main Boulevard, Phase 8<\/p>\r\n <p>+92 300 0000000<\/p>\r\n <p>info@palmavenue.com<\/p>\r\n <\/div>\r\n <form class=\"contact-form\">\r\n <input type=\"text\" placeholder=\"Your Name\" required>\r\n <input type=\"email\" placeholder=\"Your Email\" required>\r\n <textarea rows=\"5\" placeholder=\"Inquiry Details\"><\/textarea>\r\n <button type=\"submit\" class=\"cta-btn\" style=\"border:none; cursor: pointer;\">Send Inquiry<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n © 2024 Palm Avenue. All Rights Reserved.\r\n <\/footer>\r\n\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ 1. PRELOADER\r\n window.addEventListener('load', () => {\r\n const tl = gsap.timeline();\r\n tl.to(\"#preloader\", { opacity: 0, duration: 1, delay: 1, onComplete: () => {\r\n document.getElementById('preloader').style.display = 'none';\r\n }});\r\n tl.from(\".hero-content h1\", { y: 100, opacity: 0, duration: 1 }, \"-=0.5\");\r\n });\r\n\r\n \/\/ 2. THREE.JS HERO ANIMATION (Floating Luxury Shape)\r\n const scene = new THREE.Scene();\r\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ 2 \/ window.innerHeight, 0.1, 1000);\r\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n renderer.setSize(window.innerWidth \/ 2, window.innerHeight);\r\n document.getElementById('hero-3d').appendChild(renderer.domElement);\r\n\r\n const geometry = new THREE.IcosahedronGeometry(2, 0);\r\n const material = new THREE.MeshPhongMaterial({ color: 0xD4AF37, wireframe: true });\r\n const shape = new THREE.Mesh(geometry, material);\r\n scene.add(shape);\r\n\r\n const light = new THREE.PointLight(0xffffff, 1, 100);\r\n light.position.set(10, 10, 10);\r\n scene.add(light);\r\n camera.position.z = 5;\r\n\r\n function animateHero() {\r\n requestAnimationFrame(animateHero);\r\n shape.rotation.y += 0.005;\r\n shape.rotation.x += 0.005;\r\n renderer.render(scene, camera);\r\n }\r\n animateHero();\r\n\r\n \/\/ 3. THREE.JS INTERACTIVE MAP (Simplified City Model)\r\n const mapScene = new THREE.Scene();\r\n const mapCamera = new THREE.PerspectiveCamera(75, window.innerWidth \/ 500, 0.1, 1000);\r\n const mapRenderer = new THREE.WebGLRenderer({ antialias: true });\r\n mapRenderer.setSize(window.innerWidth * 0.8, 500);\r\n document.getElementById('map-3d').appendChild(mapRenderer.domElement);\r\n\r\n \/\/ Create a simple procedural \"Building Block\"\r\n for(let i=0; i<15; i++) {\r\n const h = Math.random() * 5 + 2;\r\n const geo = new THREE.BoxGeometry(1, h, 1);\r\n const mat = new THREE.MeshPhongMaterial({ color: 0x333333 });\r\n const b = new THREE.Mesh(geo, mat);\r\n b.position.x = (Math.random() - 0.5) * 10;\r\n b.position.z = (Math.random() - 0.5) * 10;\r\n b.position.y = h\/2;\r\n mapScene.add(b);\r\n }\r\n const mapLight = new THREE.DirectionalLight(0xD4AF37, 1);\r\n mapLight.position.set(5, 10, 5);\r\n mapScene.add(mapLight);\r\n mapScene.add(new THREE.AmbientLight(0x404040));\r\n mapCamera.position.set(10, 10, 10);\r\n mapCamera.lookAt(0,0,0);\r\n\r\n function animateMap() {\r\n requestAnimationFrame(animateMap);\r\n mapScene.rotation.y += 0.002; \/\/ Slow auto-rotate\r\n mapRenderer.render(mapScene, mapCamera);\r\n }\r\n animateMap();\r\n\r\n \/\/ 4. GSAP SCROLL ANIMATIONS\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n gsap.from(\".about-card\", {\r\n scrollTrigger: {\r\n trigger: \"#about\",\r\n start: \"top 80%\"\r\n },\r\n y: 50,\r\n opacity: 0,\r\n duration: 0.8,\r\n stagger: 0.2\r\n });\r\n\r\n gsap.from(\".payment-table tr\", {\r\n scrollTrigger: {\r\n trigger: \"#payment\",\r\n start: \"top 80%\"\r\n },\r\n x: -50,\r\n opacity: 0,\r\n duration: 0.6,\r\n stagger: 0.1\r\n });\r\n\r\n \/\/ 5. MOUSE MOVEMENT PARALLAX (Hero)\r\n window.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth) - 0.5;\r\n const y = (e.clientY \/ window.innerHeight) - 0.5;\r\n \r\n gsap.to(shape.position, {\r\n x: x * 2,\r\n y: -y * 2,\r\n duration: 1\r\n });\r\n });\r\n\r\n \/\/ Handle window resize\r\n window.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ 2 \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth \/ 2, window.innerHeight);\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\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>Palm Avenue | Modern Premium Real Estate PALM AVENUE PALM AVENUE About Highlights 3D Map Gallery Contact LIVING AT THE PEAK OF LUXURY Experience Palm Avenue – A curated ecosystem of high-end residences and smart architecture. Book an Exclusive Tour The Foundation Premium Design Architectural brilliance meet aesthetic perfection in every square foot. Smart Security … <a title=\"Elementor #32\" class=\"read-more\" href=\"https:\/\/blog.bioblogic.com\/?page_id=32\" aria-label=\"Read more about Elementor #32\">Read more<\/a><\/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-32","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":4,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Palm Avenue | Modern Premium Real Estate<\/title>\r\n <meta name=\"description\" content=\"Palm Avenue - Ultra-luxury living with 3D immersive technology.\">\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@300;400;600&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n <style>\r\n :root {\r\n --gold: #D4AF37;\r\n --black: #0a0a0a;\r\n --dark-grey: #1a1a1a;\r\n --white: #ffffff;\r\n --glass: rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n body { \r\n background-color: var(--black); \r\n color: var(--white); \r\n font-family: 'Montserrat', sans-serif; \r\n overflow-x: hidden; \r\n }\r\n\r\n h1, h2, .premium-font { font-family: 'Playfair Display', serif; }\r\n\r\n \/* --- Preloader --- *\/\r\n #preloader {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n background: var(--black); z-index: 9999;\r\n display: flex; justify-content: center; align-items: center;\r\n }\r\n .loader-logo { color: var(--gold); font-size: 2rem; letter-spacing: 5px; animation: pulse 2s infinite; }\r\n\r\n \/* --- Navbar --- *\/\r\n nav {\r\n position: fixed; top: 0; width: 100%; padding: 20px 50px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n z-index: 1000; transition: 0.4s;\r\n backdrop-filter: blur(10px); background: rgba(0,0,0,0.2);\r\n border-bottom: 1px solid var(--glass);\r\n }\r\n .logo { color: var(--gold); font-size: 1.5rem; font-weight: bold; text-decoration: none; }\r\n .nav-links a { color: white; text-decoration: none; margin-left: 30px; font-size: 0.9rem; transition: 0.3s; }\r\n .nav-links a:hover { color: var(--gold); }\r\n\r\n \/* --- Hero Section --- *\/\r\n .hero {\r\n height: 100vh; width: 100%; position: relative;\r\n display: flex; align-items: center; overflow: hidden;\r\n }\r\n #hero-video {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n object-fit: cover; opacity: 0.4; z-index: -1;\r\n }\r\n .hero-content { padding-left: 10%; z-index: 2; pointer-events: none; }\r\n .hero h1 { font-size: 5rem; line-height: 1.1; margin-bottom: 20px; }\r\n .hero p { font-size: 1.2rem; margin-bottom: 30px; color: #ccc; }\r\n .cta-btn {\r\n padding: 15px 40px; background: var(--gold); color: black;\r\n text-decoration: none; font-weight: bold; border-radius: 5px;\r\n display: inline-block; transition: 0.3s; pointer-events: auto;\r\n }\r\n .cta-btn:hover { background: white; transform: scale(1.05); }\r\n\r\n \/* --- 3D Canvas Containers --- *\/\r\n #hero-3d { position: absolute; right: 0; top: 0; width: 50%; height: 100vh; z-index: 1; }\r\n #map-3d { width: 100%; height: 500px; background: #111; cursor: grab; margin-top: 50px; }\r\n\r\n \/* --- Sections General --- *\/\r\n section { padding: 100px 10%; position: relative; }\r\n .section-title { font-size: 3rem; margin-bottom: 50px; text-align: center; color: var(--gold); }\r\n\r\n \/* --- About Section (Cards) --- *\/\r\n .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\r\n .about-card {\r\n background: var(--dark-grey); padding: 40px; border-radius: 15px;\r\n border: 1px solid var(--glass); transition: 0.4s;\r\n }\r\n .about-card:hover { transform: translateY(-10px); border-color: var(--gold); }\r\n .about-card i { font-size: 2.5rem; color: var(--gold); margin-bottom: 20px; }\r\n\r\n \/* --- Gallery --- *\/\r\n .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }\r\n .gallery-item { height: 300px; background: #222; overflow: hidden; border-radius: 10px; }\r\n .gallery-item img { \r\n width: 100%; height: 100%; object-fit: cover; \r\n transition: 0.5s; filter: grayscale(100%);\r\n }\r\n .gallery-item:hover img { transform: scale(1.1); filter: grayscale(0%); }\r\n\r\n \/* --- Payment Plan --- *\/\r\n .payment-table { width: 100%; border-collapse: collapse; margin-top: 30px; }\r\n .payment-table th, .payment-table td { \r\n padding: 20px; border-bottom: 1px solid var(--glass); text-align: left; \r\n }\r\n .payment-table tr:hover { background: rgba(212, 175, 55, 0.1); }\r\n\r\n \/* --- Contact Form --- *\/\r\n .contact-container { display: flex; gap: 50px; }\r\n .contact-form { flex: 1; display: flex; flex-direction: column; gap: 20px; }\r\n .contact-form input, .contact-form textarea {\r\n padding: 15px; background: var(--dark-grey); border: 1px solid var(--glass);\r\n color: white; border-radius: 5px; outline: none;\r\n }\r\n .contact-form input:focus { border-color: var(--gold); }\r\n\r\n \/* --- Footer --- *\/\r\n footer { padding: 50px; text-align: center; border-top: 1px solid var(--glass); color: #666; }\r\n\r\n \/* --- Responsive --- *\/\r\n @media (max-width: 768px) {\r\n .hero h1 { font-size: 3rem; }\r\n #hero-3d { display: none; }\r\n .hero-content { padding-left: 5%; padding-right: 5%; text-align: center; }\r\n .gallery-grid { grid-template-columns: 1fr; }\r\n .contact-container { flex-direction: column; }\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n 100% { opacity: 0.5; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"preloader\">\r\n <div class=\"loader-logo\">PALM AVENUE<\/div>\r\n <\/div>\r\n\r\n \r\n <nav>\r\n <a href=\"#\" class=\"logo\">PALM AVENUE<\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#about\">About<\/a>\r\n <a href=\"#highlights\">Highlights<\/a>\r\n <a href=\"#map\">3D Map<\/a>\r\n <a href=\"#gallery\">Gallery<\/a>\r\n <a href=\"#contact\">Contact<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <section class=\"hero\" id=\"home\">\r\n <video id=\"hero-video\" autoplay muted loop>\r\n <source src=\"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-modern-apartment-building-at-sunset-14115-large.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div id=\"hero-3d\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1>LIVING AT THE <br><span style=\"color:var(--gold)\">PEAK OF LUXURY<\/span><\/h1>\r\n <p>Experience Palm Avenue - A curated ecosystem of <br>high-end residences and smart architecture.<\/p>\r\n <a href=\"#contact\" class=\"cta-btn\">Book an Exclusive Tour<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\">\r\n <h2 class=\"section-title\">The Foundation<\/h2>\r\n <div class=\"about-grid\">\r\n <div class=\"about-card\">\r\n <i class=\"fas fa-gem\"><\/i>\r\n <h3>Premium Design<\/h3>\r\n <p>Architectural brilliance meet aesthetic perfection in every square foot.<\/p>\r\n <\/div>\r\n <div class=\"about-card\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <h3>Smart Security<\/h3>\r\n <p>24\/7 AI-integrated surveillance and biometrics for your peace of mind.<\/p>\r\n <\/div>\r\n <div class=\"about-card\">\r\n <i class=\"fas fa-leaf\"><\/i>\r\n <h3>Eco Conscious<\/h3>\r\n <p>Sustainable energy solutions and vertical gardens integrated into the structure.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"map\">\r\n <h2 class=\"section-title\">Interactive Masterplan<\/h2>\r\n <p style=\"text-align: center; margin-bottom: 20px;\">Rotate and explore the digital twin of Palm Avenue<\/p>\r\n <div id=\"map-3d\"><\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"payment\">\r\n <h2 class=\"section-title\">Investment Plan<\/h2>\r\n <table class=\"payment-table\">\r\n <thead>\r\n <tr>\r\n <th>Installment Phase<\/th>\r\n <th>Percentage (%)<\/th>\r\n <th>Amount (USD)<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr><td>Booking Amount<\/td><td>10%<\/td><td>$50,000<\/td><\/tr>\r\n <tr><td>Confirmation<\/td><td>15%<\/td><td>$75,000<\/td><\/tr>\r\n <tr><td>30 Monthly Installments<\/td><td>50%<\/td><td>$250,000<\/td><\/tr>\r\n <tr><td>On Possession<\/td><td>25%<\/td><td>$125,000<\/td><\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/section>\r\n\r\n \r\n <section id=\"gallery\">\r\n <h2 class=\"section-title\">A Visual Journey<\/h2>\r\n <div class=\"gallery-grid\">\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&w=800&q=80\" alt=\"Exteriors\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=800&q=80\" alt=\"Interior\"><\/div>\r\n <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512915928907-67678ff2931d?auto=format&fit=crop&w=800&q=80\" alt=\"Lobby\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\">\r\n <h2 class=\"section-title\">Contact Concierge<\/h2>\r\n <div class=\"contact-container\">\r\n <div class=\"contact-info\">\r\n <h3>Palm Avenue HQ<\/h3>\r\n <p>Main Boulevard, Phase 8<\/p>\r\n <p>+92 300 0000000<\/p>\r\n <p>info@palmavenue.com<\/p>\r\n <\/div>\r\n <form class=\"contact-form\">\r\n <input type=\"text\" placeholder=\"Your Name\" required>\r\n <input type=\"email\" placeholder=\"Your Email\" required>\r\n <textarea rows=\"5\" placeholder=\"Inquiry Details\"><\/textarea>\r\n <button type=\"submit\" class=\"cta-btn\" style=\"border:none; cursor: pointer;\">Send Inquiry<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n © 2024 Palm Avenue. All Rights Reserved.\r\n <\/footer>\r\n\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ 1. PRELOADER\r\n window.addEventListener('load', () => {\r\n const tl = gsap.timeline();\r\n tl.to(\"#preloader\", { opacity: 0, duration: 1, delay: 1, onComplete: () => {\r\n document.getElementById('preloader').style.display = 'none';\r\n }});\r\n tl.from(\".hero-content h1\", { y: 100, opacity: 0, duration: 1 }, \"-=0.5\");\r\n });\r\n\r\n \/\/ 2. THREE.JS HERO ANIMATION (Floating Luxury Shape)\r\n const scene = new THREE.Scene();\r\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ 2 \/ window.innerHeight, 0.1, 1000);\r\n const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });\r\n renderer.setSize(window.innerWidth \/ 2, window.innerHeight);\r\n document.getElementById('hero-3d').appendChild(renderer.domElement);\r\n\r\n const geometry = new THREE.IcosahedronGeometry(2, 0);\r\n const material = new THREE.MeshPhongMaterial({ color: 0xD4AF37, wireframe: true });\r\n const shape = new THREE.Mesh(geometry, material);\r\n scene.add(shape);\r\n\r\n const light = new THREE.PointLight(0xffffff, 1, 100);\r\n light.position.set(10, 10, 10);\r\n scene.add(light);\r\n camera.position.z = 5;\r\n\r\n function animateHero() {\r\n requestAnimationFrame(animateHero);\r\n shape.rotation.y += 0.005;\r\n shape.rotation.x += 0.005;\r\n renderer.render(scene, camera);\r\n }\r\n animateHero();\r\n\r\n \/\/ 3. THREE.JS INTERACTIVE MAP (Simplified City Model)\r\n const mapScene = new THREE.Scene();\r\n const mapCamera = new THREE.PerspectiveCamera(75, window.innerWidth \/ 500, 0.1, 1000);\r\n const mapRenderer = new THREE.WebGLRenderer({ antialias: true });\r\n mapRenderer.setSize(window.innerWidth * 0.8, 500);\r\n document.getElementById('map-3d').appendChild(mapRenderer.domElement);\r\n\r\n \/\/ Create a simple procedural \"Building Block\"\r\n for(let i=0; i<15; i++) {\r\n const h = Math.random() * 5 + 2;\r\n const geo = new THREE.BoxGeometry(1, h, 1);\r\n const mat = new THREE.MeshPhongMaterial({ color: 0x333333 });\r\n const b = new THREE.Mesh(geo, mat);\r\n b.position.x = (Math.random() - 0.5) * 10;\r\n b.position.z = (Math.random() - 0.5) * 10;\r\n b.position.y = h\/2;\r\n mapScene.add(b);\r\n }\r\n const mapLight = new THREE.DirectionalLight(0xD4AF37, 1);\r\n mapLight.position.set(5, 10, 5);\r\n mapScene.add(mapLight);\r\n mapScene.add(new THREE.AmbientLight(0x404040));\r\n mapCamera.position.set(10, 10, 10);\r\n mapCamera.lookAt(0,0,0);\r\n\r\n function animateMap() {\r\n requestAnimationFrame(animateMap);\r\n mapScene.rotation.y += 0.002; \/\/ Slow auto-rotate\r\n mapRenderer.render(mapScene, mapCamera);\r\n }\r\n animateMap();\r\n\r\n \/\/ 4. GSAP SCROLL ANIMATIONS\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n gsap.from(\".about-card\", {\r\n scrollTrigger: {\r\n trigger: \"#about\",\r\n start: \"top 80%\"\r\n },\r\n y: 50,\r\n opacity: 0,\r\n duration: 0.8,\r\n stagger: 0.2\r\n });\r\n\r\n gsap.from(\".payment-table tr\", {\r\n scrollTrigger: {\r\n trigger: \"#payment\",\r\n start: \"top 80%\"\r\n },\r\n x: -50,\r\n opacity: 0,\r\n duration: 0.6,\r\n stagger: 0.1\r\n });\r\n\r\n \/\/ 5. MOUSE MOVEMENT PARALLAX (Hero)\r\n window.addEventListener('mousemove', (e) => {\r\n const x = (e.clientX \/ window.innerWidth) - 0.5;\r\n const y = (e.clientY \/ window.innerHeight) - 0.5;\r\n \r\n gsap.to(shape.position, {\r\n x: x * 2,\r\n y: -y * 2,\r\n duration: 1\r\n });\r\n });\r\n\r\n \/\/ Handle window resize\r\n window.addEventListener('resize', () => {\r\n camera.aspect = window.innerWidth \/ 2 \/ window.innerHeight;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(window.innerWidth \/ 2, window.innerHeight);\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\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>Palm Avenue | Modern Premium Real Estate PALM AVENUE PALM AVENUE About Highlights 3D Map Gallery Contact LIVING AT THE PEAK OF LUXURY Experience Palm Avenue – A curated ecosystem of high-end residences and smart architecture. Book an Exclusive Tour The Foundation Premium Design Architectural brilliance meet aesthetic perfection in every square foot. Smart Security … <a title=\"Elementor #32\" class=\"read-more\" href=\"https:\/\/blog.bioblogic.com\/?page_id=32\" aria-label=\"Read more about Elementor #32\">Read more<\/a><\/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-32","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":4,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}