{"id":2,"date":"2025-05-20T13:33:25","date_gmt":"2025-05-20T13:33:25","guid":{"rendered":"https:\/\/bcodes.top\/estatein\/?page_id=2"},"modified":"2025-05-22T12:16:43","modified_gmt":"2025-05-22T12:16:43","slug":"home","status":"publish","type":"page","link":"https:\/\/bcodes.top\/estatein\/","title":{"rendered":"Home"},"content":{"rendered":"\n            <div class=\"bg-[#141414]\">\n                <div class=\"container lg:px-8\">\n                    <div class=\"lg:h-[622px] h-auto lg:mx-0 flex lg:flex-row flex-col lg:gap-x-14 lg:gap-y-6 gap-y-4\">\n                        <!-- Mobile: Image First -->\n                        <div class=\"hero-image order-first lg:order-last lg:w-1\/2 lg:max-w-2xl relative mb-10 lg:mb-0 \">\n                                                            <div class=\"absolute lg:top-20 lg:-left-20 left-0 top-auto -bottom-10 z-10\">\n                                    <img decoding=\"async\" src=\"https:\/\/bcodes.top\/estatein\/wp-content\/uploads\/2025\/05\/hero-tag.webp\" \n                                        alt=\"Hero tag\" \n                                        class=\"lg:w-auto w-[117px] h-auto\"\n                                        loading=\"lazy\"\n                                        width=\"175\"\n                                        height=\"175\">\n                                <\/div>\n                                                                                        <img decoding=\"async\" src=\"https:\/\/bcodes.top\/estatein\/wp-content\/uploads\/2025\/05\/hero.webp\" \n                                    alt=\"Discover Your Dream Property with Estatein\" \n                                    class=\" h-full object-cover lg:mt-0 lg:rounded-none rounded-lg\"\n                                    loading=\"lazy\"\n                                    width=\"690\"\n                                    height=\"622\">\n                                                    <\/div>\n                        \n                        <!-- Mobile: Text Second -->\n                        <div class=\"hero-text order-last lg:order-first lg:w-1\/2 w-full flex flex-col items-start justify-center lg:mr-10 gap-y-5\">\n                                                                                            <h1 class=\"lg:ml-14 lg:max-w-lg max-w-xs text-[28px] font-bold tracking-tight lg:text-[46px] mb-0 lg:leading-[55px] leading-[33px]\">\n                                    Discover Your Dream Property with Estatein                                <\/h1>\n                            \n                            <div class=\"hero-desc lg:ml-14 mt-6 max-w-3xl lg:mt-0 \">\n                                                                    <p>Your journey to finding the perfect property begins here. Explore our listings to find the home that matches your dreams.<\/p>                                \n                                <div class=\"mt-10 flex items-center gap-x-6\">\n                                                                        <div class=\"rounded-lg outline outline-1 outline-offset-[-1px] outline-neutral-800 inline-flex justify-center items-center gap-2\">\n                                        <a href=\"https:\/\/bcodes.top\/estatein\/services\/\" class=\"px-5 py-3.5 justify-start text-white text-sm font-primary-medium leading-[21px]\">\n                                            Learn More                                        <\/a>\n                                    <\/div>\n                                                                        \n                                                                        <div class=\"bg-[#6f3bf6] rounded-lg inline-flex justify-center items-center gap-2\">\n                                        <a href=\"https:\/\/bcodes.top\/estatein\/services\/\" class=\"px-5 py-3.5 justify-start text-white text-sm font-primary-medium leading-[21px]\">\n                                            Browse Properties                                        <\/a>\n                                    <\/div>\n                                                                    <\/div>\n                                                                <div class=\"hero-count w-full self-stretch inline-flex flex-wrap justify-start items-start gap-4 mt-[50px]\"\n                                    x-data=\"{ \n                                        counts: [\n                                            { current: 0, target: 200, label: 'Happy Customers' },\n                                            { current: 0, target: 10000, label: 'Properties For Clients' },\n                                            { current: 0, target: 16, label: 'Years of Experience' }\n                                        ],\n                                        animateCount(index) {\n                                            const item = this.counts[index];\n                                            let start = 0;\n                                            const duration = 2000; \/\/ 2 seconds duration\n                                            const steps = 100; \/\/ More steps for smoother animation\n                                            const increment = item.target \/ steps;\n                                            const interval = duration \/ steps;\n                                            \n                                            const timer = setInterval(() => {\n                                                start += increment;\n                                                if (start >= item.target) {\n                                                    item.current = item.target;\n                                                    clearInterval(timer);\n                                                } else {\n                                                    item.current = Math.floor(start);\n                                                }\n                                            }, interval);\n                                        },\n                                        init() {\n                                            const observer = new IntersectionObserver((entries) => {\n                                                if (entries[0].isIntersecting) {\n                                                    this.counts.forEach((_, index) => this.animateCount(index));\n                                                    observer.disconnect();\n                                                }\n                                            }, { threshold: 0.1 });\n                                            observer.observe($el);\n                                        }\n                                    }&#8221;\n                                >\n                                                                        <div class=\"w-[calc(50%-8px)] lg:w-auto lg:flex-1 px-5 py-3.5 bg-[#191919] rounded-[10px] outline outline-1 outline-offset-[-1px] outline-neutral-800 inline-flex flex-col justify-start items-start gap-0.5\">\n                                        <div class=\"self-stretch justify-start text-white text-3xl font-bold leading-[45px]\">\n                                            <span x-text=\"counts[0].current\"><\/span>+\n                                        <\/div>\n                                        <div class=\"self-stretch justify-start text-[#999999] text-base font-medium leading-normal\">Happy Customers<\/div>\n                                    <\/div>\n                                                                                                            <div class=\"w-[calc(50%-8px)] lg:w-auto lg:flex-1 px-5 py-3.5 bg-[#191919] rounded-[10px] outline outline-1 outline-offset-[-1px] outline-neutral-800 inline-flex flex-col justify-start items-start gap-0.5\">\n                                        <div class=\"self-stretch justify-start text-white text-3xl font-bold leading-[45px]\">\n                                            <span x-text=\"counts[1].current\"><\/span>+\n                                        <\/div>\n                                        <div class=\"self-stretch justify-start text-[#999999] text-base font-medium leading-normal\">Properties For Clients<\/div>\n                                    <\/div>\n                                                                                                            <div class=\"w-full text-center lg:text-left lg:w-auto lg:flex-1 px-5 py-3.5 bg-[#191919] rounded-[10px] outline outline-1 outline-offset-[-1px] outline-neutral-800 inline-flex flex-col justify-start items-start gap-0.5\">\n                                        <div class=\"self-stretch justify-start text-white text-3xl font-bold leading-[45px]\">\n                                            <span x-text=\"counts[2].current\"><\/span>+\n                                        <\/div>\n                                        <div class=\"self-stretch justify-start text-[#999999] text-base font-medium leading-normal\">Years of Experience<\/div>\n                                    <\/div>\n                                                                    <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n                \n\n\n                <div class=\"cta flex bg-[--color-grey-08] w-full border-t border-b border-neutral-800 bg-cover bg-center bg-no-repeat mobile-bg desktop-bg\"\n                                            style=\"--mobile-bg: url('https:\/\/bcodes.top\/estatein\/wp-content\/uploads\/2025\/05\/cta-bg-mobile.webp');\n                                                        --desktop-bg: url('https:\/\/bcodes.top\/estatein\/wp-content\/uploads\/2025\/05\/cta-bg.webp');\n                            \"\n                                    >\n                    <div class=\"container mx-auto w-full cta-content px-4 sm:px-6 md:px-20 py-8 md:py-[60px] flex flex-col lg:flex-row lg:inline-flex justify-start items-center gap-6 lg:gap-[150px] overflow-hidden\">\n                        <div class=\"flex-1 inline-flex flex-col justify-start items-start gap-2 relative z-10\">\n                                                        <h2 class=\"self-stretch mb-0 justify-start text-white text-[28px] md:text-[38px] font-primary-semibold leading-tight md:leading-[57px]\">\n                                Start Your Real Estate Journey Today                            <\/h2>\n                                                        \n                                                        <div class=\"self-stretch justify-start text-[#999999] text-sm lg:text-base font-primary-medium lg:leading-normal leading-[21px]\">\n                                <p>Your dream property is just a click away. Whether you&#8217;re looking for a new home, a strategic investment, or expert real estate advice, Estatein is here to assist you every step of the way. Take the first step towards your real estate goals and explore our available properties or get in touch with our team for personalized assistance.<\/p>                            <\/div>\n                                                    <\/div>\n                        \n                                                <a href=\"https:\/\/bcodes.top\/estatein\/contact\/\" class=\"w-full lg:w-auto -mt-4 md:mt-0 px-5 py-3.5 bg-[--color-purple-60] rounded-lg flex justify-center items-center gap-2 relative z-10\" aria-label=\"Explore Properties\">\n                            <span class=\"justify-start text-white text-sm font-primary-medium leading-[21px]\">\n                                Explore Properties                            <\/span>\n                        <\/a>\n                                            <\/div>\n                <\/div>\n                ","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-fullwidth.php","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":33,"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":89,"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/pages\/2\/revisions\/89"}],"wp:attachment":[{"href":"https:\/\/bcodes.top\/estatein\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}