{"id":2,"date":"2025-07-18T12:22:15","date_gmt":"2025-07-18T12:22:15","guid":{"rendered":"https:\/\/rukachocolatier.in\/?page_id=2"},"modified":"2025-08-11T09:38:56","modified_gmt":"2025-08-11T09:38:56","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/rukachocolatier.in\/?page_id=2","title":{"rendered":"Get In Touch"},"content":{"rendered":"\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');\n        \n        .font-playfair { font-family: 'Playfair Display', serif; }\n        .font-inter { font-family: 'Inter', sans-serif; }\n        \n        .chocolate-gradient {\n            background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);\n        }\n        \n        .contact-card {\n            backdrop-filter: blur(10px);\n            background: rgba(255, 255, 255, 0.95);\n            box-shadow: 0 20px 40px rgba(139, 69, 19, 0.1);\n        }\n        \n        .form-input:focus {\n            border-color: #8B4513;\n            box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);\n        }\n        \n        .hover-lift {\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\n        }\n        \n        .hover-lift:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 25px 50px rgba(139, 69, 19, 0.15);\n        }\n    <\/style>\n    <!-- EmailJS SDK -->\n<script src=\"https:\/\/cdn.emailjs.com\/dist\/email.min.js\"><\/script>\n<script>\n    (function(){\n        emailjs.init(\"RYu2Itg4OBKlMTADn\"); \/\/ Replace with your EmailJS Public Key\n    })();\n<\/script>\n\n<\/head>\n<body class=\"font-inter bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 min-h-screen\">\n    <!-- Header -->\n\n\n    <!-- Main Content -->\n    <main class=\"container mx-auto px-6 py-12\">\n        <!-- Page Title -->\n        <div class=\"text-center mb-16\">\n            <h2 class=\"font-playfair text-5xl font-bold text-amber-900 mb-4\">Get In Touch<\/h2>\n            <p class=\"text-xl text-amber-700 max-w-2xl mx-auto\">\n                We&#8217;d love to hear from you. Send us a message and we&#8217;ll respond as soon as possible.\n            <\/p>\n        <\/div>\n\n        <div class=\"grid lg:grid-cols-3 gap-12 max-w-7xl mx-auto\">\n            <!-- Contact Form -->\n            <div class=\"lg:col-span-2\">\n                <div class=\"contact-card rounded-2xl p-8 hover-lift\">\n                    <h3 class=\"font-playfair text-3xl font-semibold text-amber-900 mb-6\">Send us a Message<\/h3>\n                    <p class=\"text-amber-600 mb-8\">This is a demo contact form. In a real implementation, form submissions would be handled by a backend service.<\/p>\n                    \n                    <form class=\"space-y-6\" onsubmit=\"handleFormSubmit(event)\">\n                        <div class=\"grid md:grid-cols-2 gap-6\">\n                            <div>\n                                <label for=\"firstName\" class=\"block text-sm font-semibold text-amber-800 mb-2\">First Name *<\/label>\n                                <input type=\"text\" id=\"firstName\" name=\"firstName\" required\n                                    class=\"form-input w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:outline-none transition-all duration-300\">\n                            <\/div>\n                            <div>\n                                <label for=\"lastName\" class=\"block text-sm font-semibold text-amber-800 mb-2\">Last Name *<\/label>\n                                <input type=\"text\" id=\"lastName\" name=\"lastName\" required\n                                    class=\"form-input w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:outline-none transition-all duration-300\">\n                            <\/div>\n                        <\/div>\n                        \n                        <div>\n                            <label for=\"email\" class=\"block text-sm font-semibold text-amber-800 mb-2\">Email Address *<\/label>\n                            <input type=\"email\" id=\"email\" name=\"email\" required\n                                class=\"form-input w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:outline-none transition-all duration-300\">\n                        <\/div>\n                        \n                        <div>\n                            <label for=\"phone\" class=\"block text-sm font-semibold text-amber-800 mb-2\">Phone Number<\/label>\n                            <input type=\"tel\" id=\"phone\" name=\"phone\"\n                                class=\"form-input w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:outline-none transition-all duration-300\">\n                        <\/div>\n                        \n                        <div>\n                            <label for=\"subject\" class=\"block text-sm font-semibold text-amber-800 mb-2\">Subject *<\/label>\n                            <select id=\"subject\" name=\"subject\" required\n                                class=\"form-input w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:outline-none transition-all duration-300\">\n                                <option value=\"\">Select a subject<\/option>\n                                <option value=\"general\">General Inquiry<\/option>\n                                <option value=\"orders\">Orders &#038; Shipping<\/option>\n                                <option value=\"wholesale\">Wholesale Opportunities<\/option>\n                                <option value=\"custom\">Custom Orders<\/option>\n                                <option value=\"feedback\">Feedback<\/option>\n                            <\/select>\n                        <\/div>\n                        \n                        <div>\n                            <label for=\"message\" class=\"block text-sm font-semibold text-amber-800 mb-2\">Message *<\/label>\n                            <textarea id=\"message\" name=\"message\" rows=\"6\" required\n                                class=\"form-input w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:outline-none transition-all duration-300 resize-vertical\"\n                                placeholder=\"Tell us about your inquiry...\"><\/textarea>\n                        <\/div>\n                        \n                        <button type=\"submit\" \n                            class=\"w-full chocolate-gradient text-white font-semibold py-4 px-8 rounded-lg hover:opacity-90 transition-all duration-300 transform hover:scale-105\">\n                            Send Message\n                        <\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n\n            <!-- Contact Information -->\n            <div class=\"space-y-8\">\n                <!-- Contact Details -->\n                <div class=\"contact-card rounded-2xl p-8 hover-lift\">\n                    <h3 class=\"font-playfair text-2xl font-semibold text-amber-900 mb-6\">Contact Information<\/h3>\n                    \n                    <div class=\"space-y-6\">\n                        <div class=\"flex items-start space-x-4\">\n                            <div class=\"w-10 h-10 chocolate-gradient rounded-full flex items-center justify-center flex-shrink-0\">\n                                <span class=\"text-white text-lg\">\ud83d\udccd<\/span>\n                            <\/div>\n                            <div>\n                                <h4 class=\"font-semibold text-amber-800 mb-1\">Address<\/h4>\n                                <p class=\"text-amber-600\">417 Ruka Chocolatier<br>Rishi Nagar, Pitampura<br>Delhi, India<\/p>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"flex items-start space-x-4\">\n                            <div class=\"w-10 h-10 chocolate-gradient rounded-full flex items-center justify-center flex-shrink-0\">\n                                <span class=\"text-white text-lg\">\ud83d\udcde<\/span>\n                            <\/div>\n                            <div>\n                                <h4 class=\"font-semibold text-amber-800 mb-1\">Phone<\/h4>\n                                <p class=\"text-amber-600\">+91 9971438020<br><\/p>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"flex items-start space-x-4\">\n                            <div class=\"w-10 h-10 chocolate-gradient rounded-full flex items-center justify-center flex-shrink-0\">\n                                <span class=\"text-white text-lg\">\u2709\ufe0f<\/span>\n                            <\/div>\n                            <div>\n                                <h4 class=\"font-semibold text-amber-800 mb-1\">Email<\/h4>\n                                <p class=\"text-amber-600\">rukachocolatier@gmail.com<br>navyakwatra09@gmail.com<\/p>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Business Hours -->\n                <div class=\"contact-card rounded-2xl p-8 hover-lift\">\n                    <h3 class=\"font-playfair text-2xl font-semibold text-amber-900 mb-6\">Business Hours<\/h3>\n                    \n                    <div class=\"space-y-3\">\n                        <div class=\"flex justify-between items-center\">\n                            <span class=\"font-medium text-amber-800\">Monday &#8211; Friday<\/span>\n                            <span class=\"text-amber-600\">9:00 AM &#8211; 7:00 PM<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between items-center\">\n                            <span class=\"font-medium text-amber-800\">Saturday<\/span>\n                            <span class=\"text-amber-600\">10:00 AM &#8211; 6:00 PM<\/span>\n                        <\/div>\n                        <div class=\"flex justify-between items-center\">\n                            <span class=\"font-medium text-amber-800\">Sunday<\/span>\n                            <span class=\"text-amber-600\">12:00 PM &#8211; 5:00 PM<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"mt-6 p-4 bg-amber-50 rounded-lg\">\n                        <p class=\"text-sm text-amber-700\">\n                            <strong>Holiday Hours:<\/strong> Please call ahead during holidays as our hours may vary.\n                        <\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Quick Links -->\n                <div class=\"contact-card rounded-2xl p-8 hover-lift\">\n                    <h3 class=\"font-playfair text-2xl font-semibold text-amber-900 mb-6\">Quick Links<\/h3>\n                    \n                    <div class=\"space-y-3\">\n                    \n                        <a href=\"#\" class=\"block text-amber-600 hover:text-amber-800 transition-colors\">\n                            \u2753 Frequently Asked Questions\n                        <\/a>\n                        <a href=\"#\" class=\"block text-amber-600 hover:text-amber-800 transition-colors\">\n                            \ud83c\udfea Wholesale Inquiries\n                        <\/a>\n                        <a href=\"#\" class=\"block text-amber-600 hover:text-amber-800 transition-colors\">\n                            \ud83c\udf81 Corporate Gifts\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        \n\n    <!-- Success Modal -->\n    <div id=\"successModal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden\">\n        <div class=\"bg-white rounded-2xl p-8 max-w-md mx-4 text-center\">\n            <div class=\"text-6xl mb-4\">\u2705<\/div>\n            <h3 class=\"font-playfair text-2xl font-semibold text-amber-900 mb-4\">Message Sent!<\/h3>\n            <p class=\"text-amber-600 mb-6\">Thank you for contacting us. We&#8217;ll get back to you within 24 hours.<\/p>\n            <button onclick=\"closeModal()\" \n                class=\"chocolate-gradient text-white font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition-all duration-300\">\n                Close\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- EmailJS SDK -->\n<script src=\"https:\/\/cdn.emailjs.com\/dist\/email.min.js\"><\/script>\n<script>\n    (function(){\n        emailjs.init(\"RYu2Itg4OBKlMTADn\"); \/\/ Your EmailJS Public Key\n    })();\n\n    function handleFormSubmit(event) {\n        event.preventDefault();\n        \n        emailjs.sendForm('service_tdwsv6d', 'template_sppz6ei', event.target)\n            .then(function(response) {\n                console.log('SUCCESS!', response.status, response.text);\n                alert('\u2705 Your message has been sent successfully!');\n                event.target.reset();\n            }, function(error) {\n                console.log('FAILED...', error);\n                alert('\u274c Something went wrong. Please try again.');\n            });\n    }\n        \n        function closeModal() {\n            document.getElementById('successModal').classList.add('hidden');\n        }\n        \n        function showMapInfo() {\n            \/\/ Create a custom modal for map directions\n            const modal = document.createElement('div');\n            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';\n            modal.innerHTML = `\n                <div class=\"bg-white rounded-2xl p-8 max-w-md mx-4 text-center\">\n                    <div class=\"text-6xl mb-4\">\ud83d\uddfa\ufe0f<\/div>\n                    <h3 class=\"font-playfair text-2xl font-semibold text-amber-900 mb-4\">Get Directions<\/h3>\n                    <p class=\"text-amber-600 mb-4\">Our store is located at:<\/p>\n                    <div class=\"bg-amber-50 p-4 rounded-lg mb-6\">\n                        <p class=\"font-semibold text-amber-800\">123 Chocolate Avenue<br>Sweet City, SC 12345<\/p>\n                    <\/div>\n                    <p class=\"text-sm text-amber-600 mb-6\">In a real implementation, this would open your default maps application with directions to our store.<\/p>\n                    <button onclick=\"this.closest('.fixed').remove()\" \n                        class=\"chocolate-gradient text-white font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition-all duration-300\">\n                        Close\n                    <\/button>\n                <\/div>\n            `;\n            document.body.appendChild(modal);\n        }\n        \n        \/\/ Close modal when clicking outside\n        document.addEventListener('click', function(event) {\n            if (event.target.id === 'successModal') {\n                closeModal();\n            }\n        });\n    <\/script>\n<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'96d5ce7cb15454c0',t:'MTc1NDg5NTEwOS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Get In Touch We&#8217;d love to hear from you. Send us a message and we&#8217;ll respond as soon as possible. Send us a Message This is a demo contact form. In a real implementation, form submissions would be handled by a backend service. First Name * Last Name * Email Address * Phone Number Subject [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":13,"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/rukachocolatier.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}