ud

src/App.js

@@ -55,12 +55,52 @@ const App = () => {
             <img src={logo} className="intro-logo" alt="Bright Cleaners Logo" />
             <div className="dropoff-section mt-8 text-center">
               <h2 className="intr-child text-4xl font-bold mb-4 text-white">Ready to Drop Off?</h2>
-              <button className="dropoff-btn">Drop Off Now</button>
+              <button className="dropoff-btn btn-primary" onClick={() => document.getElementById('my_modal_1').showModal()}>Drop Off Now!</button>
+<dialog id="my_modal_1" className="modal">
+  <div className="modal-box bg-white text-black p-6 rounded-lg shadow-lg">
+    <h3 className="font-bold text-lg">Drop Off Your Apparel for Service</h3>
+    <p className="py-4">Please fill out the information below to drop off your apparel for our services. We will take care of the rest!</p>
+    <form method="dialog" className="form-container flex flex-col items-center gap-4">
+      <label className="input-group input-group-vertical w-full">
+        <span className="text-black">Name</span>
+        <input type="text" className="input input-bordered w-full text-white bg-gray-800" placeholder="Your Name" required />
+      </label>
+      <label className="input-group input-group-vertical w-full">
+        <span className="text-black">Email</span>
+        <input type="email" className="input input-bordered w-full text-white bg-gray-800" placeholder="[email protected]" required />
+      </label>
+      <label className="input-group input-group-vertical w-full">
+        <span className="text-black">Contact Number</span>
+        <input type="tel" className="input input-bordered w-full text-white bg-gray-800" placeholder="Your Phone Number" required />
+      </label>
+      <label className="input-group input-group-vertical w-full">
+        <span className="text-black">Service Type</span>
+        <select className="select select-bordered w-full text-white bg-gray-800" required>
+          <option disabled selected>Select Service</option>
+          <option>Dry Cleaning</option>
+          <option>Tailoring</option>
+          <option>Shoe Repair</option>
+        </select>
+      </label>
+      <label className="input-group input-group-vertical w-full">
+        <span className="text-black">Instructions</span>
+        <textarea className="textarea textarea-bordered w-full text-white bg-gray-800" placeholder="Any special instructions for your service" rows="3"></textarea>
+      </label>
+      <div className="modal-action flex justify-center gap-4">
+        <button type="button" className="btn bg-black text-white hover:bg-gray-700" onClick={() => document.getElementById('my_modal_1').close()}>Close</button>
+        <button type="submit" className="btn bg-white text-black border border-black hover:bg-gray-200">Submit</button>
+      </div>
+    </form>
+  </div>
+</dialog>
+
+
             </div>
           </div>
         </section>
 
         <section id="services" className="services-section text-center py-12 bg-light text-white">
+        <div class="border-top"></div>
           <h2 className="text-3xl font-bold mb-4">Our Services</h2>
           <p className="text-lg mb-8">Providing top-notch care for your clothes and shoes</p>
 

src/components/app.css

@@ -43,7 +43,7 @@ body {
 }
 
 .intro-section {
-  background-image: url('gallery/intro-section-bg.jpg'); /* Replace with the path to your image */
+  background-image: url('gallery/intro-section-bg.png'); /* Replace with the path to your image */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -63,8 +63,8 @@ body {
   width: 600px;
   position: relative;
   z-index: 1; /* Ensure it stays above other elements */
-  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.7)); /* Add stronger shadow and glow */
-  animation: move-up 1s ease-out; /* Apply the move-up animation */
+  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 15px rgba(0, 0, 0, 0.3)); /* Subtle black shadow */
+  animation: move-up 1s ease-out;
 }
 
 .intro-logo::after {
@@ -76,7 +76,7 @@ body {
   bottom: -10px;
   border: 4px solid rgba(255, 255, 255, 0.7); /* Thicker border to make it stand out */
   pointer-events: none; /* Make sure the border is not interactive */
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 255, 255, 0.7); /* Stronger shadow and glow */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.3); /* Subtle black shadow */
   border-radius: 10px; /* Slightly rounded corners for a smoother look */
   animation: move-up 1s ease-out; /* Apply the move-up animation */
 }
@@ -124,6 +124,14 @@ body {
   margin-bottom: 1rem;
 }
 
+.modal-box {
+  background-color: white; /* Change the background color to white */
+  color: black; /* Ensure text color is black for readability */
+  padding: 20px; /* Add padding for better spacing */
+  border-radius: 8px; /* Optional: Add border radius for rounded corners */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Add a subtle shadow for better visibility */
+}
+
 
 .services-section {
   background-color: #3A73CD;