{"id":49,"date":"2026-04-03T19:12:32","date_gmt":"2026-04-03T19:12:32","guid":{"rendered":"https:\/\/blog.bioblogic.com\/?page_id=49"},"modified":"2026-04-03T19:14:00","modified_gmt":"2026-04-03T19:14:00","slug":"elementor-49","status":"publish","type":"page","link":"https:\/\/blog.bioblogic.com\/?page_id=49","title":{"rendered":"Elementor #49"},"content":{"rendered":"\t\t
\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 | The Pinnacle of Luxury Living<\/title>\r\n <meta name=\"description\" content=\"Palm Avenue - Ultra-luxury living with 3D immersive technology.\">\r\n \r\n <!-- Fonts & Icons -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@700;900&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 --gold-bright: #f1c40f;\r\n --black-pure: #050505;\r\n --black-card: #121212;\r\n --dark-grey: #1a1a1a;\r\n --white: #ffffff;\r\n --glass: rgba(255, 255, 255, 0.05);\r\n --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background-color: var(--black-pure);\r\n color: var(--white);\r\n font-family: 'Montserrat', sans-serif;\r\n overflow-x: hidden;\r\n line-height: 1.6;\r\n }\r\n\r\n h1, h2, h3, .premium-font { font-family: 'Playfair Display', serif; }\r\n\r\n \/* --- Custom Scrollbar --- *\/\r\n ::-webkit-scrollbar { width: 8px; }\r\n ::-webkit-scrollbar-track { background: var(--black-pure); }\r\n ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 10px; }\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-pure); 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: 8px; animation: pulse 2s infinite; font-weight: 900; }\r\n\r\n \/* --- Navbar --- *\/\r\n nav {\r\n position: fixed; top: 0; width: 100%; padding: 25px 5%;\r\n display: flex; justify-content: space-between; align-items: center;\r\n z-index: 1000; transition: var(--transition);\r\n backdrop-filter: blur(15px); background: rgba(0,0,0,0.7);\r\n border-bottom: 1px solid var(--glass);\r\n }\r\n .logo { color: var(--gold); font-size: 1.6rem; font-weight: 900; text-decoration: none; letter-spacing: 2px; }\r\n .nav-links a { color: white; text-decoration: none; margin-left: 30px; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }\r\n .nav-links a:hover { color: var(--gold); }\r\n .resident-btn { border: 1px solid var(--gold); padding: 8px 20px; border-radius: 50px; color: var(--gold) !important; }\r\n .resident-btn:hover { background: var(--gold); color: black !important; }\r\n\r\n \/* --- Hero Section --- *\/\r\n .hero { height: 100vh; width: 100%; position: relative; display: flex; align-items: center; overflow: hidden; }\r\n #hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; z-index: -1; }\r\n .hero-content { padding-left: 10%; z-index: 2; max-width: 800px; }\r\n .hero h1 { font-size: 5.5rem; line-height: 1; margin-bottom: 20px; text-transform: uppercase; }\r\n .hero p { font-size: 1.1rem; margin-bottom: 35px; color: #aaa; letter-spacing: 1px; max-width: 500px; }\r\n #hero-3d { position: absolute; right: 0; top: 0; width: 50%; height: 100vh; z-index: 1; }\r\n\r\n .cta-btn { \r\n padding: 18px 45px; background: var(--gold); color: black; \r\n text-decoration: none; font-weight: bold; border-radius: 2px; \r\n display: inline-block; transition: var(--transition); \r\n text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;\r\n }\r\n .cta-btn:hover { background: var(--white); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }\r\n\r\n \/* --- Stats Section --- *\/\r\n .stats-bar {\r\n background: var(--black-card);\r\n display: flex; justify-content: space-around;\r\n padding: 60px 10%; border-top: 1px solid var(--glass);\r\n border-bottom: 1px solid var(--glass);\r\n }\r\n .stat-item { text-align: center; }\r\n .stat-item h2 { color: var(--gold); font-size: 2.5rem; margin-bottom: 5px; }\r\n .stat-item p { font-size: 0.8rem; text-transform: uppercase; color: #666; letter-spacing: 2px; }\r\n\r\n \/* --- General Section Styling --- *\/\r\n section { padding: 120px 10%; position: relative; }\r\n .section-title { font-size: 3.5rem; margin-bottom: 15px; text-align: center; color: var(--white); }\r\n .section-subtitle { text-align: center; color: var(--gold); text-transform: uppercase; letter-spacing: 5px; font-size: 0.9rem; margin-bottom: 60px; display: block;}\r\n\r\n \/* --- Amenities Grid --- *\/\r\n .amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }\r\n .amenity-card { \r\n height: 400px; position: relative; overflow: hidden; border-radius: 5px;\r\n display: flex; flex-direction: column; justify-content: flex-end; padding: 30px;\r\n }\r\n .amenity-card img { \r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; \r\n object-fit: cover; z-index: -1; transition: 0.5s; opacity: 0.6;\r\n }\r\n .amenity-card:hover img { transform: scale(1.1); opacity: 0.8; }\r\n .amenity-card h3 { font-size: 1.5rem; color: var(--gold); }\r\n .amenity-card p { font-size: 0.9rem; margin-top: 10px; color: #ddd; }\r\n\r\n \/* --- Interactive Map Section --- *\/\r\n #map-3d { \r\n width: 100%; height: 600px; background: #080808; \r\n border-radius: 10px; border: 1px solid var(--glass);\r\n box-shadow: 0 0 50px rgba(0,0,0,1);\r\n }\r\n\r\n \/* --- Testimonials --- *\/\r\n .testimonial-slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }\r\n .testimonial-card { \r\n background: var(--black-card); padding: 40px; border-left: 3px solid var(--gold);\r\n font-style: italic;\r\n }\r\n .testimonial-card p { color: #ccc; margin-bottom: 20px; }\r\n .testimonial-card span { font-style: normal; color: var(--gold); font-weight: bold; text-transform: uppercase; font-size: 0.8rem; }\r\n\r\n \/* --- News Section --- *\/\r\n .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }\r\n .news-item { background: var(--black-card); border: 1px solid var(--glass); transition: 0.3s; }\r\n .news-item:hover { border-color: var(--gold); }\r\n .news-img { width: 100%; height: 200px; background: #222; }\r\n .news-content { padding: 25px; }\r\n .news-date { color: var(--gold); font-size: 0.7rem; margin-bottom: 10px; display: block; }\r\n .news-item h4 { margin-bottom: 10px; }\r\n\r\n \/* --- Contact Form --- *\/\r\n .contact-container { display: flex; gap: 80px; align-items: center; }\r\n .contact-form { flex: 1; display: flex; flex-direction: column; gap: 20px; }\r\n .contact-form input, .contact-form textarea { \r\n padding: 18px; background: #111; border: 1px solid var(--glass); \r\n color: white; outline: none; transition: 0.3s;\r\n }\r\n .contact-form input:focus { border-color: var(--gold); }\r\n\r\n \/* --- Footer --- *\/\r\n footer { \r\n padding: 80px 10% 40px; border-top: 1px solid var(--glass); \r\n background: #000; text-align: center;\r\n }\r\n .footer-logo { font-size: 2rem; color: var(--gold); font-weight: 900; margin-bottom: 20px; display: block; text-decoration: none;}\r\n .social-links { margin: 30px 0; }\r\n .social-links a { color: white; margin: 0 15px; font-size: 1.5rem; transition: 0.3s; }\r\n .social-links a:hover { color: var(--gold); }\r\n .copy { font-size: 0.8rem; color: #444; margin-top: 40px; }\r\n\r\n \/* --- Responsive --- *\/\r\n @media (max-width: 992px) {\r\n .hero h1 { font-size: 3.5rem; }\r\n .news-grid { grid-template-columns: 1fr; }\r\n .contact-container { flex-direction: column; }\r\n #hero-3d { display: none; }\r\n .hero-content { padding: 0 5%; text-align: center; }\r\n }\r\n\r\n @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Loading Animation -->\r\n <div id=\"preloader\">\r\n <div class=\"loader-logo\">PALM AVENUE<\/div>\r\n <\/div>\r\n\r\n <!-- Navigation -->\r\n <nav id=\"navbar\">\r\n <a href=\"#\" class=\"logo\">PALM AVENUE<\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#about\">The Estate<\/a>\r\n <a href=\"#amenities\">Amenities<\/a>\r\n <a href=\"#map\">3D Masterplan<\/a>\r\n <a href=\"#news\">Updates<\/a>\r\n <a href=\"#contact\">Concierge<\/a>\r\n <a href=\"#\" class=\"resident-btn\"><i class=\"fa-solid fa-user-lock\"><\/i> Resident Portal<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Hero Section -->\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 <span style=\"color:var(--gold); letter-spacing: 5px; font-size: 0.9rem;\">ESTABLISHED 2024<\/span>\r\n <h1>CRAFTING <br><span style=\"color:var(--gold)\">LEGACIES<\/span><\/h1>\r\n <p>Beyond architecture. Beyond luxury. Palm Avenue is a curated ecosystem for the world's most discerning individuals.<\/p>\r\n <a href=\"#contact\" class=\"cta-btn\">Request Private Viewing<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Stats Section -->\r\n <div class=\"stats-bar\">\r\n <div class=\"stat-item\">\r\n <h2 class=\"counter\">50<\/h2>\r\n <p>Acres of Greenery<\/p>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <h2 class=\"counter\">12<\/h2>\r\n <p>Premium Penthouses<\/p>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <h2 class=\"counter\">24\/7<\/h2>\r\n <p>Concierge Service<\/p>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <h2 class=\"counter\">0%<\/h2>\r\n <p>Carbon Footprint<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Amenities Section -->\r\n <section id=\"amenities\">\r\n <span class=\"section-subtitle\">Exquisite Lifestyle<\/span>\r\n <h2 class=\"section-title\">The Palm Club<\/h2>\r\n <div class=\"amenities-grid\">\r\n <div class=\"amenity-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=800&q=80\" alt=\"Gym\">\r\n <h3>Zenith Fitness<\/h3>\r\n <p>State-of-the-art AI integrated training equipment and private trainers.<\/p>\r\n <\/div>\r\n <div class=\"amenity-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584132967334-10e028bd69f7?auto=format&fit=crop&w=800&q=80\" alt=\"Pool\">\r\n <h3>Infinity Lagoon<\/h3>\r\n <p>Temperature-controlled olympic pool overlooking the city skyline.<\/p>\r\n <\/div>\r\n <div class=\"amenity-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=800&q=80\" alt=\"Spa\">\r\n <h3>Oasis Spa<\/h3>\r\n <p>Traditional healing meets modern hydrotherapy in a serene setting.<\/p>\r\n <\/div>\r\n <div class=\"amenity-card\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514362545857-3bc16c4c7d1b?auto=format&fit=crop&w=800&q=80\" alt=\"Bar\">\r\n <h3>Vintner's Lounge<\/h3>\r\n <p>Private wine cellars and a rooftop cigar bar for members.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- 3D Interactive Map -->\r\n <section id=\"map\" style=\"background: #000;\">\r\n <span class=\"section-subtitle\">Digital Twin<\/span>\r\n <h2 class=\"section-title\">Explore the Masterplan<\/h2>\r\n <div id=\"map-3d\"><\/div>\r\n <\/section>\r\n\r\n <!-- News & Events Section -->\r\n <section id=\"news\">\r\n <span class=\"section-subtitle\">The Avenue Journal<\/span>\r\n <h2 class=\"section-title\">Latest Updates<\/h2>\r\n <div class=\"news-grid\">\r\n <div class=\"news-item\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=500&q=80\" class=\"news-img\" alt=\"News\">\r\n <div class=\"news-content\">\r\n <span class=\"news-date\">MARCH 15, 2024<\/span>\r\n <h4>Phase II Construction Milestone<\/h4>\r\n <p>Structural completion of the North Tower achieved ahead of schedule.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"news-item\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=500&q=80\" class=\"news-img\" alt=\"News\">\r\n <div class=\"news-content\">\r\n <span class=\"news-date\">APRIL 02, 2024<\/span>\r\n <h4>Annual Spring Gala<\/h4>\r\n <p>Join us for an evening of jazz and fine dining at the Grand Plaza.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"news-item\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=500&q=80\" class=\"news-img\" alt=\"News\">\r\n <div class=\"news-content\">\r\n <span class=\"news-date\">MAY 20, 2024<\/span>\r\n <h4>Smart Home Integration<\/h4>\r\n <p>New partnership with 'Lumina' for advanced AI voice controls.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Testimonials Section -->\r\n <section id=\"testimonials\" style=\"background: #080808;\">\r\n <span class=\"section-subtitle\">Resident Voices<\/span>\r\n <h2 class=\"section-title\">The Community<\/h2>\r\n <div class=\"testimonial-slider\">\r\n <div class=\"testimonial-card\">\r\n <p>\"Palm Avenue isn't just a home; it's a statement of how life should be lived. The attention to detail is unparalleled.\"<\/p>\r\n <span>\u2014 Jonathan R., CEO of TechGlobal<\/span>\r\n <\/div>\r\n <div class=\"testimonial-card\">\r\n <p>\"The security and privacy provided here give me total peace of mind. It\u2019s a sanctuary in the middle of the city.\"<\/p>\r\n <span>\u2014 Sarah L., International Architect<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Contact Section -->\r\n <section id=\"contact\">\r\n <div class=\"contact-container\">\r\n <div class=\"contact-info\" style=\"flex: 0.8;\">\r\n <h2 class=\"premium-font\" style=\"font-size: 3rem; color: var(--gold);\">Let's Connect<\/h2>\r\n <p style=\"margin: 20px 0; color: #888;\">Schedule a private tour of our model villas or speak with a property consultant.<\/p>\r\n <div style=\"margin-top: 40px;\">\r\n <p><i class=\"fas fa-location-dot\" style=\"color:var(--gold); margin-right: 15px;\"><\/i> 77 Palm Boulevard, Luxury District<\/p>\r\n <p style=\"margin: 20px 0;\"><i class=\"fas fa-phone\" style=\"color:var(--gold); margin-right: 15px;\"><\/i> +1 (800) PALM-AVE<\/p>\r\n <p><i class=\"fas fa-envelope\" style=\"color:var(--gold); margin-right: 15px;\"><\/i> concierge@palmavenue.com<\/p>\r\n <\/div>\r\n <\/div>\r\n <form class=\"contact-form\">\r\n <input type=\"text\" placeholder=\"Full Name\" required>\r\n <input type=\"email\" placeholder=\"Email Address\" required>\r\n <select style=\"padding: 18px; background: #111; border: 1px solid var(--glass); color: white; outline: none;\">\r\n <option>Interest: Penthouse<\/option>\r\n <option>Interest: Villa<\/option>\r\n <option>Interest: Investment<\/option>\r\n <\/select>\r\n <textarea rows=\"5\" placeholder=\"Your Message\"><\/textarea>\r\n <button type=\"submit\" class=\"cta-btn\" style=\"border:none; cursor: pointer;\">Send Message<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer>\r\n <a href=\"#\" class=\"footer-logo\">PALM AVENUE<\/a>\r\n <div class=\"social-links\">\r\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-linkedin\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-facebook\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-x-twitter\"><\/i><\/a>\r\n <\/div>\r\n <p class=\"copy\">© 2024 Palm Avenue Luxury Societies. Designed for the Elite.<\/p>\r\n <\/footer>\r\n\r\n <!-- Scripts -->\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 span, .hero-content h1, .hero-content p, .hero-content .cta-btn\", { \r\n y: 50, opacity: 0, duration: 1, stagger: 0.2 \r\n }, \"-=0.5\");\r\n });\r\n\r\n \/\/ 2. NAVBAR SCROLL EFFECT\r\n window.onscroll = function() {\r\n const nav = document.getElementById('navbar');\r\n if (window.pageYOffset > 100) {\r\n nav.style.padding = \"15px 5%\";\r\n nav.style.background = \"rgba(0,0,0,0.95)\";\r\n } else {\r\n nav.style.padding = \"25px 5%\";\r\n nav.style.background = \"rgba(0,0,0,0.7)\";\r\n }\r\n };\r\n\r\n \/\/ 3. THREE.JS HERO ANIMATION (Floating Diamond 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.OctahedronGeometry(2, 0);\r\n const material = new THREE.MeshPhongMaterial({ \r\n color: 0xD4AF37, \r\n wireframe: true,\r\n emissive: 0x221100\r\n });\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 scene.add(new THREE.AmbientLight(0x404040));\r\n camera.position.z = 5;\r\n\r\n function animateHero() {\r\n requestAnimationFrame(animateHero);\r\n shape.rotation.y += 0.003;\r\n shape.rotation.x += 0.002;\r\n renderer.render(scene, camera);\r\n }\r\n animateHero();\r\n\r\n \/\/ 4. THREE.JS INTERACTIVE MAP (More complex blocks)\r\n const mapScene = new THREE.Scene();\r\n const mapCamera = new THREE.PerspectiveCamera(75, window.innerWidth \/ 600, 0.1, 1000);\r\n const mapRenderer = new THREE.WebGLRenderer({ antialias: true });\r\n mapRenderer.setSize(document.getElementById('map-3d').offsetWidth, 600);\r\n document.getElementById('map-3d').appendChild(mapRenderer.domElement);\r\n\r\n \/\/ Procedural City Grid\r\n for(let i=0; i<40; i++) {\r\n const h = Math.random() * 6 + 1;\r\n const geo = new THREE.BoxGeometry(0.8, h, 0.8);\r\n const mat = new THREE.MeshPhongMaterial({ \r\n color: i % 5 === 0 ? 0xD4AF37 : 0x222222,\r\n transparent: true,\r\n opacity: 0.9\r\n });\r\n const b = new THREE.Mesh(geo, mat);\r\n b.position.x = (Math.random() - 0.5) * 15;\r\n b.position.z = (Math.random() - 0.5) * 15;\r\n b.position.y = h\/2;\r\n mapScene.add(b);\r\n }\r\n\r\n const mapLight = new THREE.DirectionalLight(0xffffff, 1);\r\n mapLight.position.set(10, 20, 10);\r\n mapScene.add(mapLight);\r\n mapScene.add(new THREE.AmbientLight(0x333333));\r\n mapCamera.position.set(12, 12, 12);\r\n mapCamera.lookAt(0,0,0);\r\n\r\n function animateMap() {\r\n requestAnimationFrame(animateMap);\r\n mapScene.rotation.y += 0.001;\r\n mapRenderer.render(mapScene, mapCamera);\r\n }\r\n animateMap();\r\n\r\n \/\/ 5. GSAP SCROLL ANIMATIONS\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n gsap.from(\".amenity-card\", {\r\n scrollTrigger: { trigger: \"#amenities\", start: \"top 80%\" },\r\n y: 100, opacity: 0, duration: 1, stagger: 0.2\r\n });\r\n\r\n gsap.from(\".news-item\", {\r\n scrollTrigger: { trigger: \"#news\", start: \"top 80%\" },\r\n scale: 0.9, opacity: 0, duration: 0.8, stagger: 0.2\r\n });\r\n\r\n \/\/ Mouse Parallax for Hero Shape\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 gsap.to(shape.position, { x: x * 2, y: -y * 2, duration: 2 });\r\n gsap.to(shape.rotation, { x: y * 0.5, y: x * 0.5, duration: 2 });\r\n });\r\n\r\n \/\/ Resize handler\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 <\/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 | The Pinnacle of Luxury Living PALM AVENUE PALM AVENUE The Estate Amenities 3D Masterplan Updates Concierge Resident Portal ESTABLISHED 2024 CRAFTING LEGACIES Beyond architecture. Beyond luxury. Palm Avenue is a curated ecosystem for the world’s most discerning individuals. Request Private Viewing 50 Acres of Greenery 12 Premium Penthouses 24\/7 Concierge Service 0% … <a title=\"Elementor #49\" class=\"read-more\" href=\"https:\/\/blog.bioblogic.com\/?page_id=49\" aria-label=\"Read more about Elementor #49\">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-49","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/49","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=49"}],"version-history":[{"count":4,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":53,"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=\/wp\/v2\/pages\/49\/revisions\/53"}],"wp:attachment":[{"href":"https:\/\/blog.bioblogic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}