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