{"id":790,"date":"2026-01-21T15:51:37","date_gmt":"2026-01-21T07:51:37","guid":{"rendered":"https:\/\/e-shion-machinery.com\/?page_id=790"},"modified":"2026-01-23T15:40:53","modified_gmt":"2026-01-23T07:40:53","slug":"%e1%83%9b%e1%83%90%e1%83%93%e1%83%9a%e1%83%9d%e1%83%91%e1%83%90","status":"publish","type":"page","link":"https:\/\/e-shion-machinery.com\/ka\/thank-you\/","title":{"rendered":"\u10db\u10d0\u10d3\u10da\u10dd\u10d1\u10d0"},"content":{"rendered":"\n<main class=\"min-h-screen bg-gradient-to-b from-blue-50 to-white\">\n  <!-- Hero Section with Enhanced Animation -->\n  <section class=\"relative pt-28 pb-20 md:pt-36 md:pb-24 text-white overflow-hidden bg-gradient-to-br from-blue-900 via-blue-800 to-indigo-900\">\n    <!-- Animated Background Elements -->\n    <div class=\"absolute inset-0 opacity-20\">\n      <div class=\"absolute top-0 right-0 w-72 h-72 -mt-32 -mr-32 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full animate-pulse-slow\"><\/div>\n      <div class=\"absolute bottom-0 left-0 w-96 h-96 -mb-48 -ml-48 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full animate-pulse-medium\"><\/div>\n      <div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 w-64 h-64 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full animate-pulse-fast\"><\/div>\n    <\/div>\n    \n    <!-- Shimmer Effect -->\n    <div class=\"absolute inset-0 bg-gradient-to-t from-transparent via-white\/5 to-transparent animate-shimmer\"><\/div>\n    \n    <div class=\"container mx-auto px-4 relative z-10\">\n      <div class=\"max-w-3xl mx-auto text-center\">\n        <!-- Success Icon with Enhanced Animation -->\n        <div class=\"relative mb-10\">\n          <div class=\"w-24 h-24 rounded-full bg-gradient-to-r from-emerald-400 to-cyan-400 flex items-center justify-center mx-auto mb-8 shadow-2xl shadow-emerald-500\/30 animate-scale-in\">\n            <svg class=\"w-16 h-16 text-white animate-check-mark\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n              <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/>\n            <\/svg>\n          <\/div>\n          \n          <!-- Pulsing Rings -->\n          <div class=\"absolute inset-0 m-auto w-32 h-32 border-4 border-emerald-400\/20 rounded-full animate-ping-slow\"><\/div>\n          <div class=\"absolute inset-0 m-auto w-40 h-40 border-4 border-cyan-400\/10 rounded-full animate-ping-slower\"><\/div>\n        <\/div>\n        \n        <!-- Main Title -->\n        <h1 class=\"text-4xl md:text-5xl lg:text-6xl font-bold mb-6 animate-fade-in-up bg-gradient-to-r from-white to-cyan-100 bg-clip-text text-transparent\">\n          Thank You!\n        <\/h1>\n        \n        <!-- Subtitle -->\n        <p class=\"text-xl md:text-2xl opacity-95 mb-8 animate-fade-in-up animation-delay-200 leading-relaxed\">\n          Your message has been sent successfully. <span class=\"font-bold text-cyan-300\">We will contact you within 24 hours<\/span>.\n        <\/p>\n        \n        <!-- Action Buttons -->\n        <!--zeroy:block:start:block_1768987039876_emqfow3h0:type=php-->\n                  <div class=\"flex flex-wrap justify-center gap-4 animate-fade-in-up animation-delay-400\">\n            <!-- Back to Home Button -->\n            <a href=\"https:\/\/e-shion-machinery.com\/ka\/\" \n               class=\"group relative bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-medium py-3 px-8 rounded-lg inline-flex items-center transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-emerald-500\/30\">\n              <span class=\"relative z-10\">Back to Home<\/span>\n              <svg class=\"w-5 h-5 ml-2 relative z-10 transform group-hover:translate-x-1 transition-transform duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6\"\/>\n              <\/svg>\n            <\/a>\n            \n            <!-- Contact Again Button -->\n            <a href=\"https:\/\/e-shion-machinery.com\/ka\/contact\" \n               class=\"group relative bg-white\/10 backdrop-blur-sm border-2 border-white\/30 hover:border-white\/50 text-white font-medium py-3 px-8 rounded-lg inline-flex items-center transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:shadow-white\/20\">\n              <span class=\"relative z-10\">Contact Again<\/span>\n              <svg class=\"w-5 h-5 ml-2 relative z-10 transform group-hover:translate-x-1 transition-transform duration-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\/>\n              <\/svg>\n            <\/a>\n          <\/div>\n        <!--zeroy:block:end:block_1768987039876_emqfow3h0-->\n      <\/div>\n    <\/div>\n    \n    <!-- Gradient Transition -->\n    <div class=\"absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-white to-transparent\"><\/div>\n  <\/section>\n  \n\n  <!-- Timeline Section -->\n  <section class=\"py-16 bg-gradient-to-br from-blue-50 via-white to-indigo-50\">\n    <div class=\"container mx-auto px-4\">\n      <div class=\"max-w-3xl mx-auto text-center\">\n        <h2 class=\"text-3xl md:text-4xl font-bold text-blue-900 mb-6\">What's Next?<\/h2>\n        <p class=\"text-lg text-gray-600 mb-10 leading-relaxed\">Here's what you can expect after submitting your inquiry<\/p>\n        \n        <div class=\"relative\">\n          <!-- Animated Timeline -->\n          <div class=\"absolute left-1\/2 transform -translate-x-1\/2 h-full w-2 bg-gradient-to-b from-blue-400 via-indigo-400 to-cyan-400 z-0 hidden md:block animate-pulse-timeline\"><\/div>\n          \n          <!-- Timeline Steps -->\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-10 relative z-10\">\n            <!-- Step 1 -->\n            <div class=\"text-right md:text-left animate-fade-in-right animation-delay-100\">\n              <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 text-white text-xl font-bold mb-4 shadow-lg shadow-blue-500\/30 group-hover:scale-110 transition-transform duration-300\">\n                <span class=\"transform group-hover:scale-125 transition-transform\">1<\/span>\n              <\/div>\n              <h3 class=\"text-xl font-bold text-gray-900 mb-2\">Confirmation Email<\/h3>\n              <p class=\"text-gray-600\">You'll receive an email confirming we've received your inquiry<\/p>\n            <\/div>\n            \n            <!-- Step 2 -->\n            <div class=\"md:text-right text-left md:col-start-2 animate-fade-in-left animation-delay-200\">\n              <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-xl font-bold mb-4 shadow-lg shadow-indigo-500\/30 group-hover:scale-110 transition-transform duration-300\">\n                <span class=\"transform group-hover:scale-125 transition-transform\">2<\/span>\n              <\/div>\n              <h3 class=\"text-xl font-bold text-gray-900 mb-2\">Technical Review<\/h3>\n              <p class=\"text-gray-600\">Our engineers will review your requirements<\/p>\n            <\/div>\n            \n            <!-- Step 3 -->\n            <div class=\"text-right md:text-left animate-fade-in-right animation-delay-300\">\n              <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xl font-bold mb-4 shadow-lg shadow-purple-500\/30 group-hover:scale-110 transition-transform duration-300\">\n                <span class=\"transform group-hover:scale-125 transition-transform\">3<\/span>\n              <\/div>\n              <h3 class=\"text-xl font-bold text-gray-900 mb-2\">Personal Contact<\/h3>\n              <p class=\"text-gray-600\">A sales representative will contact you within 24 hours<\/p>\n            <\/div>\n            \n            <!-- Step 4 -->\n            <div class=\"md:text-right text-left md:col-start-2 animate-fade-in-left animation-delay-400\">\n              <div class=\"inline-flex items-center justify-center w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white text-xl font-bold mb-4 shadow-lg shadow-pink-500\/30 group-hover:scale-110 transition-transform duration-300\">\n                <span class=\"transform group-hover:scale-125 transition-transform\">4<\/span>\n              <\/div>\n              <h3 class=\"text-xl font-bold text-gray-900 mb-2\">Solution Proposal<\/h3>\n              <p class=\"text-gray-600\">You'll receive a customized proposal for your needs<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n\n<!-- Custom Animations and Styles -->\n<style>\n\/* Custom Animations *\/\n@keyframes pulse-slow {\n  0%, 100% { opacity: 0.2; transform: scale(1); }\n  50% { opacity: 0.3; transform: scale(1.05); }\n}\n\n@keyframes pulse-medium {\n  0%, 100% { opacity: 0.2; transform: scale(1) rotate(0deg); }\n  50% { opacity: 0.25; transform: scale(1.1) rotate(5deg); }\n}\n\n@keyframes pulse-fast {\n  0%, 100% { opacity: 0.2; transform: scale(1); }\n  50% { opacity: 0.3; transform: scale(1.1); }\n}\n\n@keyframes shimmer {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n\n@keyframes scale-in {\n  0% { transform: scale(0); opacity: 0; }\n  70% { transform: scale(1.1); opacity: 0.8; }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n@keyframes ping-slow {\n  0% { transform: scale(1); opacity: 0.8; }\n  100% { transform: scale(1.5); opacity: 0; }\n}\n\n@keyframes ping-slower {\n  0% { transform: scale(1); opacity: 0.6; }\n  100% { transform: scale(2); opacity: 0; }\n}\n\n@keyframes pulse-timeline {\n  0%, 100% { opacity: 0.8; }\n  50% { opacity: 1; }\n}\n\n@keyframes fade-in-up {\n  0% { opacity: 0; transform: translateY(30px); }\n  100% { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes fade-in-right {\n  0% { opacity: 0; transform: translateX(-30px); }\n  100% { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fade-in-left {\n  0% { opacity: 0; transform: translateX(30px); }\n  100% { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes check-mark {\n  0% { transform: scale(0); opacity: 0; }\n  50% { transform: scale(1.2); opacity: 1; }\n  100% { transform: scale(1); opacity: 1; }\n}\n\n\/* Apply Animations *\/\n.animate-pulse-slow {\n  animation: pulse-slow 6s ease-in-out infinite;\n}\n\n.animate-pulse-medium {\n  animation: pulse-medium 4s ease-in-out infinite;\n}\n\n.animate-pulse-fast {\n  animation: pulse-fast 3s ease-in-out infinite;\n}\n\n.animate-shimmer {\n  animation: shimmer 3s ease-in-out infinite;\n}\n\n.animate-scale-in {\n  animation: scale-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;\n}\n\n.animate-ping-slow {\n  animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n\n.animate-ping-slower {\n  animation: ping-slower 3s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n\n.animate-pulse-timeline {\n  animation: pulse-timeline 2s ease-in-out infinite;\n}\n\n.animate-check-mark {\n  animation: check-mark 0.6s ease-out forwards;\n}\n\n.animate-fade-in-up {\n  animation: fade-in-up 0.8s ease-out forwards;\n  opacity: 0;\n}\n\n.animate-fade-in-right {\n  animation: fade-in-right 0.8s ease-out forwards;\n  opacity: 0;\n}\n\n.animate-fade-in-left {\n  animation: fade-in-left 0.8s ease-out forwards;\n  opacity: 0;\n}\n\n.animation-delay-100 {\n  animation-delay: 0.1s;\n}\n\n.animation-delay-200 {\n  animation-delay: 0.2s;\n}\n\n.animation-delay-300 {\n  animation-delay: 0.3s;\n}\n\n.animation-delay-400 {\n  animation-delay: 0.4s;\n}\n<\/style>\n\n<!-- Interactive Effects Script -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Add hover effects to timeline items\n  const timelineItems = document.querySelectorAll('.group');\n  timelineItems.forEach(item => {\n    item.addEventListener('mouseenter', function() {\n      this.style.transform = 'translateY(-5px)';\n    });\n    \n    item.addEventListener('mouseleave', function() {\n      this.style.transform = 'translateY(0)';\n    });\n  });\n  \n  \/\/ Add click ripple effect to buttons\n  document.querySelectorAll('a[href]').forEach(link => {\n    link.addEventListener('click', function(e) {\n      \/\/ Create ripple effect\n      const ripple = document.createElement('span');\n      const rect = this.getBoundingClientRect();\n      const size = Math.max(rect.width, rect.height);\n      const x = e.clientX - rect.left - size \/ 2;\n      const y = e.clientY - rect.top - size \/ 2;\n      \n      ripple.style.cssText = `\n        position: absolute;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 0.4);\n        transform: scale(0);\n        animation: ripple 0.6s linear;\n        width: ${size}px;\n        height: ${size}px;\n        top: ${y}px;\n        left: ${x}px;\n        pointer-events: none;\n      `;\n      \n      this.appendChild(ripple);\n      \n      \/\/ Remove ripple after animation\n      setTimeout(() => {\n        ripple.remove();\n      }, 600);\n    });\n  });\n  \n  \/\/ Add page load confetti effect\n  setTimeout(() => {\n    createConfetti();\n  }, 500);\n});\n\nfunction createConfetti() {\n  const colors = ['#3b82f6', '#06b6d4', '#10b981', '#8b5cf6', '#ec4899'];\n  const container = document.querySelector('main');\n  \n  for (let i = 0; i < 50; i++) {\n    const confetti = document.createElement('div');\n    const size = Math.random() * 10 + 5;\n    const color = colors[Math.floor(Math.random() * colors.length)];\n    const left = Math.random() * 100;\n    const animationDuration = Math.random() * 2 + 2;\n    const animationDelay = Math.random() * 1;\n    \n    confetti.style.cssText = `\n      position: fixed;\n      width: ${size}px;\n      height: ${size}px;\n      background: ${color};\n      border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};\n      left: ${left}%;\n      top: -20px;\n      z-index: 9999;\n      opacity: 0.7;\n      animation: confetti-fall ${animationDuration}s linear ${animationDelay}s forwards;\n    `;\n    \n    container.appendChild(confetti);\n    \n    \/\/ Remove confetti after animation\n    setTimeout(() => {\n      confetti.remove();\n    }, (animationDuration + animationDelay) * 1000);\n  }\n}\n\n\/\/ Add confetti fall animation\nconst style = document.createElement('style');\nstyle.textContent = `\n  @keyframes ripple {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n  \n  @keyframes confetti-fall {\n    0% {\n      transform: translateY(0) rotate(0deg);\n      opacity: 0.7;\n    }\n    100% {\n      transform: translateY(100vh) rotate(360deg);\n      opacity: 0;\n    }\n  }\n`;\ndocument.head.appendChild(style);\n<\/script>","protected":false},"excerpt":{"rendered":"<p>Thank You! Your message has been sent successfully. We will contact you within 24 hours. Back to Home Contact Again What&#8217;s Next? Here&#8217;s what you can expect after submitting your inquiry 1 Confirmation Email You&#8217;ll receive an email confirming we&#8217;ve received your inquiry 2 Technical Review Our engineers will review your requirements 3 Personal Contact [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-landing.php","meta":{"_acf_changed":false,"_zeroy_edited":true,"_zeroy_last_edited":"2026-01-21 17:31:52","footnotes":""},"class_list":["post-790","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/pages\/790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/comments?post=790"}],"version-history":[{"count":0,"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/pages\/790\/revisions"}],"wp:attachment":[{"href":"https:\/\/e-shion-machinery.com\/ka\/wp-json\/wp\/v2\/media?parent=790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}