{"id":153,"date":"2026-06-01T08:37:55","date_gmt":"2026-06-01T08:37:55","guid":{"rendered":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/?page_id=153"},"modified":"2026-06-01T11:26:35","modified_gmt":"2026-06-01T11:26:35","slug":"create-a-premium-animated-website-design","status":"publish","type":"page","link":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/create-a-premium-animated-website-design\/","title":{"rendered":"Create a premium animated website design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"153\" class=\"elementor elementor-153\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-facc5dc elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"facc5dc\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-20682bc1\" data-id=\"20682bc1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2b145fa0 elementor-widget elementor-widget-html\" data-id=\"2b145fa0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:wght@300;400;600&display=swap\" rel=\"stylesheet\">\n<style>\n        :root {\n            --primary: #0f172a;\n            --accent: #c5a059;\n            --accent-hover: #b38f4d;\n            --white: #ffffff;\n            --text-muted: rgba(255, 255, 255, 0.8);\n            --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Plus Jakarta Sans', sans-serif;\n            background-color: var(--primary);\n            overflow-x: hidden;\n        }\n\n        .hero-section {\n            position: relative;\n            height: 100vh;\n            width: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n            overflow: hidden;\n            color: var(--white);\n        }\n\n        .hero-bg {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 1;\n        }\n\n        .hero-bg img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            animation: slowZoom 20s infinite alternate linear;\n        }\n\n        .hero-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0) 100%);\n            z-index: 2;\n        }\n\n        .hero-content {\n            position: relative;\n            z-index: 3;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 40px;\n            width: 100%;\n        }\n\n        .hero-inner {\n            max-width: 700px;\n        }\n\n        .badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            padding: 8px 16px;\n            background: rgba(197, 160, 89, 0.15);\n            border: 1px solid rgba(197, 160, 89, 0.3);\n            border-radius: 100px;\n            color: var(--accent);\n            font-size: 14px;\n            font-weight: 600;\n            letter-spacing: 1px;\n            text-transform: uppercase;\n            margin-bottom: 30px;\n            opacity: 0;\n            transform: translateY(20px);\n            animation: fadeInUp 0.8s forwards 0.2s;\n        }\n\n        .badge span {\n            width: 8px;\n            height: 8px;\n            background: var(--accent);\n            border-radius: 50%;\n            display: inline-block;\n            box-shadow: 0 0 10px var(--accent);\n        }\n\n        h1 {\n            font-family: 'Playfair Display', serif;\n            font-size: clamp(48px, 8vw, 84px);\n            line-height: 1.1;\n            margin-bottom: 24px;\n            opacity: 0;\n            transform: translateY(30px);\n            animation: fadeInUp 1s forwards 0.4s;\n        }\n\n        h1 span {\n            display: block;\n            color: var(--accent);\n            font-style: italic;\n        }\n\n        p {\n            font-size: 18px;\n            line-height: 1.8;\n            color: var(--text-muted);\n            margin-bottom: 40px;\n            max-width: 540px;\n            opacity: 0;\n            transform: translateY(20px);\n            animation: fadeInUp 1s forwards 0.6s;\n        }\n\n        .cta-group {\n            display: flex;\n            gap: 20px;\n            opacity: 0;\n            transform: translateY(20px);\n            animation: fadeInUp 1s forwards 0.8s;\n        }\n\n        .btn {\n            padding: 18px 36px;\n            border-radius: 4px;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 16px;\n            transition: var(--transition);\n            display: inline-block;\n        }\n\n        .btn-primary {\n            background: var(--accent);\n            color: var(--primary);\n            border: 1px solid var(--accent);\n        }\n\n        .btn-primary:hover {\n            background: var(--accent-hover);\n            border-color: var(--accent-hover);\n            transform: translateY(-3px);\n            box-shadow: 0 10px 20px rgba(0,0,0,0.2);\n        }\n\n        .btn-outline {\n            background: transparent;\n            color: var(--white);\n            border: 1px solid rgba(255,255,255,0.3);\n        }\n\n        .btn-outline:hover {\n            border-color: var(--white);\n            background: rgba(255,255,255,0.05);\n            transform: translateY(-3px);\n        }\n\n        .scroll-indicator {\n            position: absolute;\n            bottom: 40px;\n            left: 40px;\n            z-index: 3;\n            display: flex;\n            align-items: center;\n            gap: 15px;\n            color: var(--text-muted);\n            font-size: 12px;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            opacity: 0;\n            animation: fadeIn 1s forwards 1.2s;\n        }\n\n        .scroll-line {\n            width: 40px;\n            height: 1px;\n            background: var(--accent);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .scroll-line::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: var(--white);\n            animation: scrollProgress 2s infinite ease-in-out;\n        }\n\n        @keyframes slowZoom {\n            0% { transform: scale(1); }\n            100% { transform: scale(1.15); }\n        }\n\n        @keyframes fadeInUp {\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        @keyframes fadeIn {\n            to { opacity: 1; }\n        }\n\n        @keyframes scrollProgress {\n            0% { left: -100%; }\n            50% { left: 0%; }\n            100% { left: 100%; }\n        }\n\n        @media (max-width: 768px) {\n            .hero-content {\n                padding: 0 24px;\n            }\n            h1 {\n                font-size: 42px;\n            }\n            .cta-group {\n                flex-direction: column;\n                gap: 12px;\n            }\n            .btn {\n                width: 100%;\n                text-align: center;\n            }\n            .scroll-indicator {\n                display: none;\n            }\n        }\n    <\/style>\n<section class=\"hero-section\" data-section-id=\"s1\">\n    <div class=\"hero-bg\">\n        <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=2000\" alt=\"Luxury Modern Estate\">\n    <\/div>\n    <div class=\"hero-overlay\"><\/div>\n    \n    <div class=\"hero-content\">\n        <div class=\"hero-inner\">\n            <div class=\"badge\">\n                <span><\/span> New Collection 2024\n            <\/div>\n            <h1>\n                Architectural Masterpieces \n                <span>Beyond Expectations<\/span>\n            <\/h1>\n            <p>\n                Discover an exclusive portfolio of ultra-luxury residences curated for those who demand excellence in every detail. Where visionary design meets unparalleled comfort.\n            <\/p>\n            <div class=\"cta-group\">\n                <a href=\"#\" class=\"btn btn-primary\">View Residences<\/a>\n                <a href=\"#\" class=\"btn btn-outline\">Book Private Tour<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"scroll-indicator\">\n        <div class=\"scroll-line\"><\/div>\n        <span>Scroll to Explore<\/span>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27fe9f20 elementor-widget elementor-widget-html\" data-id=\"27fe9f20\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\n\n\n        :root {\n            --primary-gold: #C5A059;\n            --deep-navy: #0F172A;\n            --accent-cream: #FDFCF7;\n            --text-light: #F8FAFC;\n            --text-muted: #94A3B8;\n            --border-color: rgba(197, 160, 89, 0.2);\n            --font-heading: 'Playfair Display', serif;\n            --font-body: 'Plus Jakarta Sans', sans-serif;\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        section[data-section-id=\"s1\"] {\n            background-color: var(--deep-navy);\n            padding: 100px 20px;\n            overflow: hidden;\n            position: relative;\n        }\n\n        section[data-section-id=\"s1\"]::before {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            height: 1px;\n            background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);\n            opacity: 0.3;\n        }\n\n        .container {\n            max-width: 1600px;\n            margin: 0 auto;\n        }\n\n        .header-content {\n            text-align: center;\n            margin-bottom: 70px;\n        }\n\n        .header-content span {\n            color: var(--primary-gold);\n            font-family: var(--font-body);\n            text-transform: uppercase;\n            letter-spacing: 4px;\n            font-size: 0.75rem;\n            font-weight: 600;\n            display: block;\n            margin-bottom: 15px;\n        }\n\n        .header-content h2 {\n            color: var(--text-light);\n            font-family: var(--font-heading);\n            font-size: clamp(2rem, 5vw, 3rem);\n            line-height: 1.2;\n        }\n\n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 20px;\n        }\n\n        .stat-card {\n            padding: 40px 20px;\n            text-align: center;\n            position: relative;\n            transition: transform 0.3s ease;\n        }\n\n        .stat-card:not(:last-child)::after {\n            content: \"\";\n            position: absolute;\n            right: 0;\n            top: 20%;\n            height: 60%;\n            width: 1px;\n            background-color: var(--border-color);\n        }\n\n        .stat-value {\n            font-family: var(--font-heading);\n            font-size: clamp(2.5rem, 6vw, 4rem);\n            color: var(--primary-gold);\n            margin-bottom: 10px;\n            display: block;\n        }\n\n        .stat-label {\n            font-family: var(--font-body);\n            color: var(--text-light);\n            font-size: 0.9rem;\n            font-weight: 400;\n            letter-spacing: 1px;\n            opacity: 0.9;\n        }\n\n        .stat-subtext {\n            display: block;\n            font-family: var(--font-body);\n            color: var(--text-muted);\n            font-size: 0.75rem;\n            margin-top: 8px;\n            text-transform: uppercase;\n        }\n\n        @media (max-width: 992px) {\n            .stats-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 40px;\n            }\n            .stat-card:nth-child(2)::after {\n                display: none;\n            }\n            .stat-card {\n                border-bottom: 1px solid var(--border-color);\n            }\n            .stat-card:nth-child(3), .stat-card:nth-child(4) {\n                border-bottom: none;\n            }\n        }\n\n        @media (max-width: 576px) {\n            .stats-grid {\n                grid-template-columns: 1fr;\n            }\n            .stat-card::after {\n                display: none;\n            }\n            .stat-card {\n                border-bottom: 1px solid var(--border-color);\n                padding: 30px 0;\n            }\n            .stat-card:last-child {\n                border-bottom: none;\n            }\n            section[data-section-id=\"s1\"] {\n                padding: 60px 20px;\n            }\n        }\n        \n        <\/style>\n    \n<section data-section-id=\"s1\">\n    <div class=\"container\">\n        <div class=\"header-content\">\n            <span>Legacy of Excellence<\/span>\n            <h2>Milestones in Luxury Real Estate<\/h2>\n        <\/div>\n        \n        <div class=\"stats-grid\">\n            <div class=\"stat-card\">\n                <span class=\"stat-value\">1,250+<\/span>\n                <span class=\"stat-label\">Properties Sold<\/span>\n                <span class=\"stat-subtext\">Premium Residences<\/span>\n            <\/div>\n\n            <div class=\"stat-card\">\n                <span class=\"stat-value\">$4.2B<\/span>\n                <span class=\"stat-label\">Total Volume<\/span>\n                <span class=\"stat-subtext\">Lifetime Transactions<\/span>\n            <\/div>\n\n            <div class=\"stat-card\">\n                <span class=\"stat-value\">25+<\/span>\n                <span class=\"stat-label\">Years Experience<\/span>\n                <span class=\"stat-subtext\">Market Leadership<\/span>\n            <\/div>\n\n            <div class=\"stat-card\">\n                <span class=\"stat-value\">98%<\/span>\n                <span class=\"stat-label\">Client Retention<\/span>\n                <span class=\"stat-subtext\">Trusted Worldwide<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1bc4be28 elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"1bc4be28\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1b043440\" data-id=\"1b043440\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a2fe9c0 elementor-widget elementor-widget-html\" data-id=\"a2fe9c0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap\" rel=\"stylesheet\">\n<style>\n        :root {\n            --bg-deep: #080808;\n            --bg-surface: #121212;\n            --accent: #c5a059;\n            --text-main: #ffffff;\n            --text-muted: #888888;\n            --border: rgba(255, 255, 255, 0.08);\n            --transition: cubic-bezier(0.23, 1, 0.32, 1);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            background-color: var(--bg-deep);\n            color: var(--text-main);\n            font-family: 'Inter', sans-serif;\n            overflow-x: hidden;\n        }\n\n        .project-section {\n            padding: 120px 5% 160px;\n            max-width: 1400px;\n            margin: 0 auto;\n            position: relative;\n        }\n\n        .header-stack {\n            margin-bottom: 80px;\n            max-width: 700px;\n        }\n\n        .section-label {\n            display: block;\n            text-transform: uppercase;\n            letter-spacing: 0.3em;\n            font-size: 12px;\n            color: var(--accent);\n            margin-bottom: 20px;\n            font-weight: 500;\n        }\n\n        .section-title {\n            font-family: 'Playfair Display', serif;\n            font-size: clamp(2.5rem, 5vw, 4.5rem);\n            line-height: 1.1;\n            font-weight: 400;\n            margin-bottom: 30px;\n        }\n\n        .section-desc {\n            color: var(--text-muted);\n            font-size: 1.1rem;\n            line-height: 1.6;\n            max-width: 500px;\n        }\n\n        .projects-grid {\n            display: grid;\n            grid-template-columns: repeat(12, 1fr);\n            gap: 40px 30px;\n        }\n\n        .project-card {\n            grid-column: span 6;\n            position: relative;\n            text-decoration: none;\n            color: inherit;\n            display: block;\n            group: hover;\n        }\n\n        .project-card.upcoming {\n            grid-column: span 4;\n            margin-top: 40px;\n        }\n\n        @media (max-width: 1024px) {\n            .project-card, .project-card.upcoming {\n                grid-column: span 12;\n            }\n        }\n\n        .image-container {\n            position: relative;\n            width: 100%;\n            aspect-ratio: 16\/10;\n            overflow: hidden;\n            background: #1a1a1a;\n            border: 1px solid var(--border);\n        }\n\n        .image-container img {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            filter: grayscale(40%);\n            transition: transform 1.2s var(--transition), filter 1.2s var(--transition);\n        }\n\n        .project-card:hover .image-container img {\n            transform: scale(1.05);\n            filter: grayscale(0%);\n        }\n\n        .status-badge {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            background: rgba(0, 0, 0, 0.6);\n            backdrop-filter: blur(10px);\n            padding: 8px 16px;\n            font-size: 10px;\n            letter-spacing: 0.1em;\n            text-transform: uppercase;\n            border: 1px solid rgba(255, 255, 255, 0.2);\n            z-index: 2;\n        }\n\n        .project-info {\n            padding-top: 25px;\n        }\n\n        .project-meta {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 10px;\n        }\n\n        .project-category {\n            font-size: 12px;\n            color: var(--accent);\n            text-transform: uppercase;\n            letter-spacing: 0.1em;\n        }\n\n        .project-year {\n            font-size: 12px;\n            color: var(--text-muted);\n        }\n\n        .project-name {\n            font-family: 'Playfair Display', serif;\n            font-size: 1.8rem;\n            font-weight: 400;\n            margin-bottom: 8px;\n        }\n\n        .project-location {\n            font-size: 0.9rem;\n            color: var(--text-muted);\n        }\n\n        \/* Ongoing Label Stylings *\/\n        .ongoing .status-badge {\n            color: var(--accent);\n            border-color: var(--accent);\n        }\n\n        \/* Upcoming Section Divider *\/\n        .category-divider {\n            grid-column: span 12;\n            height: 1px;\n            background: linear-gradient(to right, var(--accent), transparent);\n            margin: 80px 0 20px;\n            opacity: 0.3;\n        }\n\n        .category-header {\n            grid-column: span 12;\n            font-family: 'Playfair Display', serif;\n            font-size: 2rem;\n            margin-bottom: 20px;\n        }\n\n        \/* Animation *\/\n        @keyframes fadeInUp {\n            from {\n                opacity: 0;\n                transform: translateY(40px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .animate-in {\n            animation: fadeInUp 1.2s var(--transition) forwards;\n        }\n\n        .delay-1 { animation-delay: 0.2s; }\n        .delay-2 { animation-delay: 0.4s; }\n        .delay-3 { animation-delay: 0.6s; }\n\n        \/* Modern Scroll Animation (Pure CSS) *\/\n        @supports (animation-timeline: view()) {\n            .project-card {\n                animation: fadeInUp linear both;\n                animation-timeline: view();\n                animation-range: entry 10% cover 30%;\n            }\n        }\n    <\/style>\n<section class=\"project-section\" data-section-id=\"s1\">\n    <div class=\"header-stack animate-in\">\n        <span class=\"section-label\">Our Portfolio<\/span>\n        <h2 class=\"section-title\">Architectural Narratives in Motion<\/h2>\n        <p class=\"section-desc\">From current masterworks under realization to the visionary blueprints of tomorrow, explore our commitment to redefined luxury.<\/p>\n    <\/div>\n\n    <div class=\"projects-grid\">\n        <!-- Ongoing Project 1 -->\n        <a href=\"#\" class=\"project-card ongoing animate-in delay-1\">\n            <div class=\"image-container\">\n                <span class=\"status-badge\">Phase: Construction<\/span>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=1200\" alt=\"Obsidian Tower\">\n            <\/div>\n            <div class=\"project-info\">\n                <div class=\"project-meta\">\n                    <span class=\"project-category\">Residential High-Rise<\/span>\n                    <span class=\"project-year\">2024<\/span>\n                <\/div>\n                <h3 class=\"project-name\">The Obsidian Tower<\/h3>\n                <p class=\"project-location\">Dubai Marina, UAE<\/p>\n            <\/div>\n        <\/a>\n\n        <!-- Ongoing Project 2 -->\n        <a href=\"#\" class=\"project-card ongoing animate-in delay-2\">\n            <div class=\"image-container\">\n                <span class=\"status-badge\">Phase: Interior Fit-out<\/span>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1613490493576-7fde63acd811?auto=format&fit=crop&q=80&w=1200\" alt=\"Azure Retreat\">\n            <\/div>\n            <div class=\"project-info\">\n                <div class=\"project-meta\">\n                    <span class=\"project-category\">Private Sanctuary<\/span>\n                    <span class=\"project-year\">2024<\/span>\n                <\/div>\n                <h3 class=\"project-name\">Azure Coast Retreat<\/h3>\n                <p class=\"project-location\">Maldives Archipelago<\/p>\n            <\/div>\n        <\/a>\n\n        <div class=\"category-divider\"><\/div>\n        <h3 class=\"category-header\">Future Blueprints<\/h3>\n\n        <!-- Upcoming Project 1 -->\n        <a href=\"#\" class=\"project-card upcoming animate-in\">\n            <div class=\"image-container\">\n                <span class=\"status-badge\">Concept<\/span>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800\" alt=\"Nebula Heights\">\n            <\/div>\n            <div class=\"project-info\">\n                <div class=\"project-meta\">\n                    <span class=\"project-category\">Mixed Use<\/span>\n                    <span class=\"project-year\">2025<\/span>\n                <\/div>\n                <h3 class=\"project-name\">Nebula Heights<\/h3>\n                <p class=\"project-location\">Singapore Central<\/p>\n            <\/div>\n        <\/a>\n\n        <!-- Upcoming Project 2 -->\n        <a href=\"#\" class=\"project-card upcoming animate-in delay-1\">\n            <div class=\"image-container\">\n                <span class=\"status-badge\">Planning<\/span>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=800\" alt=\"Ethereal Gardens\">\n            <\/div>\n            <div class=\"project-info\">\n                <div class=\"project-meta\">\n                    <span class=\"project-category\">Sustainable Living<\/span>\n                    <span class=\"project-year\">2026<\/span>\n                <\/div>\n                <h3 class=\"project-name\">Ethereal Gardens<\/h3>\n                <p class=\"project-location\">Kyoto, Japan<\/p>\n            <\/div>\n        <\/a>\n\n        <!-- Upcoming Project 3 -->\n        <a href=\"#\" class=\"project-card upcoming animate-in delay-2\">\n            <div class=\"image-container\">\n                <span class=\"status-badge\">Design<\/span>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1475855581690-80accde3ae2b?auto=format&fit=crop&q=80&w=800\" alt=\"Lumina Pavilion\">\n            <\/div>\n            <div class=\"project-info\">\n                <div class=\"project-meta\">\n                    <span class=\"project-category\">Cultural Venue<\/span>\n                    <span class=\"project-year\">2025<\/span>\n                <\/div>\n                <h3 class=\"project-name\">Lumina Pavilion<\/h3>\n                <p class=\"project-location\">Oslo, Norway<\/p>\n            <\/div>\n        <\/a>\n    <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>New Collection 2024 Architectural Masterpieces Beyond Expectations Discover an exclusive portfolio of ultra-luxury residences curated for those who demand excellence in every detail. Where visionary design meets unparalleled comfort. View Residences Book Private Tour Scroll to Explore Legacy of Excellence Milestones in Luxury Real Estate 1,250+ Properties Sold Premium Residences $4.2B Total Volume Lifetime Transactions &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/create-a-premium-animated-website-design\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\"> &#8220;Create a premium animated website design&#8221;<\/span><\/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-153","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/pages\/153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":15,"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/pages\/153\/revisions"}],"predecessor-version":[{"id":170,"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/pages\/153\/revisions\/170"}],"wp:attachment":[{"href":"https:\/\/mobiledevicemanagementbd.com\/kobetrading_ie\/wp-json\/wp\/v2\/media?parent=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}