{"id":2,"date":"2025-10-08T12:01:04","date_gmt":"2025-10-08T12:01:04","guid":{"rendered":"https:\/\/wp.cleaningbd.com\/?page_id=2"},"modified":"2025-11-16T12:14:27","modified_gmt":"2025-11-16T12:14:27","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/wp.cleaningbd.com\/?page_id=2","title":{"rendered":"Book a Service"},"content":{"rendered":"\n<?php\n\/**\n * Template Name: Cleaning Booking Page\n * Description: Full HTML, CSS, JS structure compatible with Elementor and WordPress\n *\/\n\nget_header(); \/\/ WordPress header\n?>\n\n<style>\n:root {\n    --primary-blue: #0A74DA; \/* Vibrant Blue *\/\n    --secondary-teal: #10B981; \/* Fresh Teal *\/\n}\nbody {\n    font-family: 'Inter', sans-serif;\n    background-color: #f7f7f7;\n    scroll-behavior: smooth;\n}\n.text-primary-blue { color: var(--primary-blue); }\n.bg-primary-blue { background-color: var(--primary-blue); }\n.border-primary-blue { border-color: var(--primary-blue); }\n.text-secondary-teal { color: var(--secondary-teal); }\n.bg-secondary-teal { background-color: var(--secondary-teal); }\n\n\/* Focus styles for inputs *\/\ninput:focus, select:focus, textarea:focus {\n    outline: 2px solid var(--secondary-teal);\n    border-color: var(--secondary-teal);\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);\n}\n<\/style>\n\n<!-- Tailwind CSS CDN -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<main class=\"py-20\">\n    <div class=\"max-w-5xl mx-auto px-4 sm:px-5 lg:px-10\">\n        <header class=\"text-center mb-10\">\n<\/br>\n            <h1 class=\"text-5xl md:text-5xl font-extrabold text-primary-blue mb-4\">Book Your Professional Cleaning Service<\/h1>\n            <p class=\"text-xl text-gray-600 max-w-2xl mx-auto\">Fill out the details below to secure your preferred date and time for a professional cleaning service in Dhaka.<\/p>\n        <\/header>\n\n        <!-- Booking Form -->\n        <div class=\"bg-white p-8 md:p-12 rounded-2xl shadow-2xl border-t-8 border-secondary-teal\">\n            <form id=\"booking-form\" class=\"space-y-6\">\n                <h2 class=\"text-2xl font-bold text-gray-900 mb-6 border-b pb-3 border-gray-200\">1. Service &#038; Availability<\/h2>\n                <div>\n                    <label for=\"service\" class=\"block text-sm font-medium text-gray-700 mb-2\">Select Service <span class=\"text-red-500\">*<\/span><\/label>\n                    <select id=\"service\" name=\"service\" required class=\"w-full px-4 py-1 border border-gray-300 rounded-lg transition duration-200 bg-white\">\n                        <option value=\"\" disabled selected>Choose a cleaning package&#8230;<\/option>\n                        <option value=\"Residential Deep Clean\">Residential Deep Cleaning<\/option>\n                        <option value=\"Commercial Office Cleaning\">Commercial\/Office Cleaning<\/option>\n                        <option value=\"Carpet &#038; Upholstery\">Carpet &#038; Upholstery Cleaning<\/option>\n                        <option value=\"Post-Construction Clean\">Post-Construction Cleanup<\/option>\n                        <option value=\"Car Washing\">Premium Car Washing<\/option>\n                        <option value=\"Specialized Request\">Other Specialized Request<\/option>\n                    <\/select>\n                <\/div>\n\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                    <div>\n                        <label for=\"date\" class=\"block text-sm font-medium text-gray-700 mb-2\">Preferred Date <span class=\"text-red-500\">*<\/span><\/label>\n                        <input type=\"date\" id=\"date\" name=\"date\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-200\">\n                    <\/div>\n                    <div>\n                        <label for=\"time\" class=\"block text-sm font-medium text-gray-700 mb-2\">Preferred Time <span class=\"text-red-500\">*<\/span><\/label>\n                        <input type=\"time\" id=\"time\" name=\"time\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-200\">\n                    <\/div>\n                <\/div>\n\n                <h2 class=\"text-2xl font-bold text-gray-900 mb-6 pt-4 border-b pb-3 border-gray-200\">2. Your Contact Information<\/h2>\n                <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                    <div>\n                        <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-2\">Full Name <span class=\"text-red-500\">*<\/span><\/label>\n                        <input type=\"text\" id=\"name\" name=\"name\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-200\">\n                    <\/div>\n                    <div>\n                        <label for=\"phone\" class=\"block text-sm font-medium text-gray-700 mb-2\">Phone Number <span class=\"text-red-500\">*<\/span><\/label>\n                        <input type=\"tel\" id=\"phone\" name=\"phone\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-200\" placeholder=\"e.g., 01xxxxxxxxx\">\n                    <\/div>\n                <\/div>\n\n                <div>\n                    <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">Email Address <span class=\"text-red-500\">*<\/span><\/label>\n                    <input type=\"email\" id=\"email\" name=\"email\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-200\" placeholder=\"you@example.com\">\n                <\/div>\n\n                <div>\n                    <label for=\"address\" class=\"block text-sm font-medium text-gray-700 mb-2\">Service Address (Dhaka area only) <span class=\"text-red-500\">*<\/span><\/label>\n                    <textarea id=\"address\" name=\"address\" rows=\"3\" required class=\"w-full px-4 py-3 border border-gray-300 rounded-lg transition duration-200\" placeholder=\"House number, Road, Area, Dhaka\"><\/textarea>\n                <\/div>\n\n                <div class=\"pt-4 text-center\">\n                    <button type=\"submit\" id=\"submit-button\" class=\"w-full md:w-3\/4 lg:w-1\/2 px-8 py-3 bg-primary-blue text-white font-bold rounded-xl hover:bg-primary-blue\/90 transition duration-300 transform hover:scale-[1.01] shadow-lg\">\n                        Confirm Booking Request\n                    <\/button>\n                    <p id=\"form-message\" class=\"mt-6 font-semibold text-lg text-secondary-teal opacity-0 transition duration-500 h-6\"><\/p>\n                <\/div>\n            <\/form>\n        <\/div>\n    <\/div>\n<\/main>\n\n<script>\ndocument.getElementById('booking-form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    const submitButton = document.getElementById('submit-button');\n    const messageElement = document.getElementById('form-message');\n\n    const serviceSelect = document.getElementById('service');\n    if (serviceSelect.value === \"\") {\n        messageElement.textContent = 'Please select a service first.';\n        messageElement.classList.remove('opacity-0', 'text-secondary-teal');\n        messageElement.classList.add('opacity-100', 'text-red-500');\n        return;\n    }\n\n    submitButton.disabled = true;\n    submitButton.textContent = 'Processing Request...';\n    messageElement.classList.remove('opacity-100', 'text-red-500', 'text-secondary-teal');\n    messageElement.classList.add('opacity-0');\n\n    setTimeout(() => {\n        messageElement.textContent = 'Booking Confirmed! A representative will contact you shortly to finalize details.';\n        messageElement.classList.remove('opacity-0', 'text-red-500');\n        messageElement.classList.add('opacity-100', 'text-secondary-teal');\n\n        submitButton.disabled = false;\n        submitButton.textContent = 'Confirm Booking Request';\n        event.target.reset();\n\n        setTimeout(() => {\n            messageElement.classList.remove('opacity-100');\n            messageElement.classList.add('opacity-0');\n        }, 6000);\n    }, 2000); \n});\n<\/script>\n        <!-- CTA Section -->\n        <section class=\"py-16 md:py-20 bg-secondary-teal\">\n            <div class=\"max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n                <h2 class=\"text-3xl md:text-4xl font-extrabold text-white mb-4\">Ready to Experience the Cleaning BD Difference?<\/h2>\n                <p class=\"text-xl text-white\/90 mb-8\">Let our commitment to quality and trust transform your space.<\/p>\n                <a href=\"contact.html\" class=\"inline-flex items-center justify-center px-8 py-4 border border-white text-base font-semibold rounded-xl text-secondary-teal bg-white hover:bg-gray-100 transition duration-300 transform hover:scale-105\">Contact Us to Book Your Service<\/a>\n            <\/div>\n        <\/section>\n    <\/main>\n\n    <!-- Footer -->\n    <footer class=\"py-10 bg-gray-900 text-white mt-16\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left\">\n            <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n                <div>\n                    <h3 class=\"text-2xl font-extrabold tracking-tight text-primary-blue mb-3\">cleaningBD<\/h3>\n                    <p class=\"text-gray-400 text-sm\">Making Bangladesh Shine, One Space at a Time&#8230;<\/p>\n                <\/div>\n                <div>\n                    <h4 class=\"text-lg font-semibold mb-3 text-white\">Quick Links<\/h4>\n                    <ul class=\"space-y-2 text-sm\">\n                        <li><a href=\"index.html\" class=\"text-gray-400 hover:text-primary-blue transition duration-300\">Home<\/a><\/li>\n                        <li><a href=\"services.html\" class=\"text-gray-400 hover:text-primary-blue transition duration-300\">Services<\/a><\/li>\n                        <li><a href=\"about.html\" class=\"text-gray-400 hover:text-primary-blue transition duration-300\">About<\/a><\/li>\n                        <li><a href=\"contact.html\" class=\"text-gray-400 hover:text-primary-blue transition duration-300\">Contact<\/a><\/li>\n                        <li><a href=\"booking.html\" class=\"text-gray-400 hover:text-primary-blue transition duration-300\">Cleaning Shop<\/a><\/li>\n                    <\/ul>\n                <\/div>\n                <div>\n                    <h4 class=\"text-lg font-semibold mb-3 text-white\">Top Services<\/h4>\n                    <ul class=\"space-y-2 text-sm\">\n                        <li><span class=\"text-gray-400\">Residential Cleaning<\/span><\/li>\n                        <li><span class=\"text-gray-400\">Commercial Cleaning<\/span><\/li>\n                        <li><span class=\"text-gray-400\">Carpet &#038; Floor Cleaning<\/span><\/li>\n                        <li><span class=\"text-gray-400\">Car Washing<\/span><\/li>\n                    <\/ul>\n                <\/div>\n                <div>\n                    <h4 class=\"text-lg font-semibold mb-3 text-white\">Contact Us<\/h4>\n                    <a href=\"tel:01622347721\" class=\"text-xl font-bold text-primary-blue hover:text-primary-blue\/80 transition duration-300\">01624-390400<\/a>\n                    <p class=\"mt-4 text-gray-400 text-sm\">&copy; 2015 CleaningBD. All rights reserved.<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n\n<?php\nget_footer(); \/\/ WordPress footer\n?>\n","protected":false},"excerpt":{"rendered":"<p>Book Your Professional Cleaning Service Fill out the details below to secure your preferred date and time for a professional [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":30,"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/wp.cleaningbd.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}