[popup created] frontend ready.

public/styles/styles.css

@@ -168,7 +168,7 @@ body{
   left: 0;
   right: 0;
   background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
-  color: white;
+  color: rgb(60, 46, 46);
   padding: 20px;
   transition: opacity 0.5s ease;
   opacity: 0;
@@ -177,3 +177,108 @@ body{
 .card:hover .card-overlay {
   opacity: 1;
 }
+
+
+#container-queryfloating {
+  background-color: #fff; 
+  position: fixed;
+  min-height: 60%;
+  max-height: 70%;
+  top: 50%;
+  padding: 30px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  place-items: center;
+  visibility: hidden;
+  line-height: 1.5;
+  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.185);
+}
+
+#container-queryfloating::after {
+  content: '';
+  position: absolute; 
+  width: 900px;
+  height: 900px;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.container-close {
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  background-color: #fff;
+  width: 45px;
+  height: 45px;
+
+  display: grid;
+  place-items: center;
+  font-size: 1.7rem;
+  color: #2E4052;
+  border-radius: 50%;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.164);
+  cursor: pointer;
+}
+
+#container-queryfloating img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.container-text {
+  padding: 10px 40px;
+}
+
+.container-text h2 {
+  font-size: 1.2rem;
+  color: #1A2250;
+}
+
+.container-text p {
+  font-size: 14px;
+  color: #3B4169;
+  margin: 10px 0;
+}
+
+.container-text input,
+.container-text button {
+  width: 100%;
+  border: none;
+  padding: 14px;
+  border-radius: 3px;
+}
+
+.container-text input { 
+  background-color: rgb(233, 233, 233);
+  margin: 5px 0 10px;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #c92200;
+}
+
+.container-text button {
+  background-image: linear-gradient(to right, #ff3f3f, #f16f32);
+  display: block;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  box-shadow: 0 5px 20px #89caff94;
+  transition: box-shadow .3s ease-in-out;
+}
+
+.container-text button:hover {
+  box-shadow: none;
+}
+
+.container-text span {
+  display: block;
+  text-align: center;
+  margin: 20px 0 0;
+  color: #BABDCB;
+  font-size: 12px;
+}

views/components/navbar.ejs

@@ -88,5 +88,7 @@
                 </ul>
             </div>
         </div>
-    </sub-nav> -->
+    </sub-nav> 
 </nav>
+
+

views/components/numberInputPopup.ejs

@@ -0,0 +1,52 @@
+<!-- <div id="numberInputPopup" class="fixed w inset-0 z-40 bg bg-opacity-50 flex items-center justify-center hidden">
+    <div class="bg-white p-6 rounded-lg shadow-lg">
+        <h2 class="text-lg font-bold mb-2">Enter a Number</h2>
+        <form id="numberForm">
+            <input type="number" id="numberInput" class="border p-2 rounded w-full mb-3" required>
+            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Submit</button>
+        </form>
+    </div>
+</div> -->
+
+<div id="container-queryfloating">
+    <div class="container-close"
+        onclick=hidePopup()>&times;</div>
+    <img
+        src="./assets/home/image1110.jpg"
+        alt="image">
+    <div class="container-text">
+        <h1 class="text-3xl text-black">Enter Phone Number</h1>
+        <p>You are just one click away from <br> your dream living.</p>
+        <input  id="numberInput" 
+                class="border p-2 rounded w-full mb-3" 
+                placeholder="+91 90XXXXXXXX"
+                required>
+        <button 
+                type="submit" 
+                >CONNECT</button>
+        <span>No spams included</span>
+    </div>
+</div>
+
+
+<script> 
+        function showPopup() {
+            document.getElementById("container-queryfloating").style.visibility = "visible"
+        }
+    
+        function hidePopup() {
+            document.getElementById("container-queryfloating").style.visibility = "hidden"
+        }
+    
+        // Show the popup every 20 seconds
+        setInterval(showPopup, 3000);
+    
+        // Close the popup when the form is submitted
+        document.getElementById("numberForm").addEventListener("submit", function (e) {
+            e.preventDefault();
+            const numberValue = document.getElementById("numberInput").value;
+            console.log("Entered Number:", numberValue);
+            hidePopup();
+        }); 
+ 
+</script>

views/pages/home.ejs

@@ -4,6 +4,7 @@
     <%- include('../includes/head', title="Home Ornate-Wall") %>
 <body>
     <%- include('../components/navbar') %>   
+    <%- include('../components/numberInputPopup') %>   
     <%- include('../components/heroSection') %>  
     <%- include('../components/Approach') %>   
     <%- include('../components/DesignExpertiseSection') %>