ud

src/App.js

@@ -9,6 +9,7 @@ import shoeRepairImage1 from './components/img/shoe-repair.svg';
 // import shoeRepairImage2 from './components/gallery/intro-section-bg.png';
 import Footer from './components/Footer';
 import location from './components/img/location.svg';
+import phone from './components/img/phone.svg';
 import './components/cards.css';
 import './components/app.css';
 import './components/intro-sect.css';
@@ -134,7 +135,7 @@ const App = () => {
         <section id="location" className="location-section text-black bg-white py-12">
           <h2 className="location-header text-4xl font-bold mb-8 text-center">Our Location</h2>
 
-          <div className="container mx-auto px-4">
+          <div className="container px-4">
             <div className="content-container flex flex-wrap md:flex-nowrap justify-center md:justify-between mb-8">
               <div className="map-container w-full md:w-1/2 md:pr-4 mb-8 md:mb-0">
                 <iframe
@@ -148,15 +149,25 @@ const App = () => {
                   title="Bright Cleaners Location"
                 ></iframe>
               </div>
-              <div className="hours-container md:w-1/2 md:pl-4">
-  <div className="address-container flex flex-col items-center md:flex-row md:justify-start mt-8">
+              <div className="hours-container">
+  <div className="address-container flex flex-col items-center md:flex-row md:justify-start">
     <div className="address-details">
-      <h3 className="text-2xl font-semibold mb-2">Address</h3>
-      <a href="https://www.google.com/maps/place/1234+Clean+St,+Houston,+TX+77001" target="_blank" rel="noopener noreferrer">
+      <h3 className="text-2xl font-semibold">Address</h3>
+      <a href="https://maps.app.goo.gl/85Xovp1RnUkospT58" target="_blank" rel="noopener noreferrer">
         <p>
-          <img src={location} alt="Marker Icon" />1234 Clean St.
+          <img src={location} alt="Marker Icon" />1401 Wirt Rd # D,
+        </p>
+        <p>Houston, TX 77055</p>
+      </a>
+    </div>
+  </div>
+
+  <div className="address-container flex flex-col items-center md:flex-row md:justify-start">
+    <div className="phone-details">
+      <a href="tel:+17134653407">
+        <p>
+          <img src={phone} alt="Phone} Icon" />(713)465-3407
         </p>
-        <p>Houston, TX 77001</p>
       </a>
     </div>
   </div>
@@ -172,24 +183,6 @@ const App = () => {
             </div>
           </div>
         </section>
-
-        <section id="contact" className="contact-section text-white py-12">
-          <div className="container mx-auto px-4">
-            <h2 className="contact-header text-4xl font-bold mb-4 text-center">Contact Us</h2>
-            <p className="text-lg mb-8 text-center">Get in touch with us for any inquiries or to schedule a service. We're here to help!</p>
-            <div className="contact-info text-center">
-              <p>
-                <strong>Phone:</strong> (123) 456-7890
-              </p>
-              <p>
-                <strong>Email:</strong> [email protected]
-              </p>
-              <p>
-                <strong>Address:</strong> 123 Clean St, Clean City, CC 12345
-              </p>
-            </div>
-          </div>
-        </section>
       </main>
       <Footer />
     </div>

src/components/location.css

@@ -44,7 +44,7 @@
 
 .hours-container h3 {
   font-family: 'Courgette', sans-serif;
-  margin-bottom: 1rem;
+  margin-bottom: 5px;
 }
 
 .hours-container p {
@@ -63,33 +63,20 @@
     width: 100%; /* Full width for iframe */
     height: 300px; /* Adjust height for mobile */
   }
-
-  .hours-container {
-    width: 100%;
-    padding: 1rem;
-  }
 }
 
-/* Tablet view adjustments */
-@media (min-width: 769px) and (max-width: 1024px) {
-  .map-container {
-    min-width: 100%; /* Take full width of the container */
-  }
-
-  .map-container iframe {
-    width: 100%; /* Full width for iframe */
-  }
-
+/* Desktop view adjustments */
+@media (min-width: 1025px) {
   .hours-container {
-    min-width: 100%;
+    width: 50%; /* Adjust width for desktop view */
   }
 }
+
 .address-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start; /* Align items to the start (left) */
   justify-content: center;
-  margin-top: 2rem;
 }
 
 @media (min-width: 768px) {
@@ -100,34 +87,38 @@
   }
 }
 
-.address-details {
+/* Shared Styles */
+.address-details, .phone-details {
   text-align: left; /* Ensure text is aligned to the left */
 }
 
 .address-details h3 {
   font-size: 1.5rem;
   font-weight: 600;
-  margin-bottom: 0.5rem;
+  margin-bottom: 10px;
 }
 
-.address-details a {
+.address-details a, .phone-details a {
   text-decoration: none; /* Remove underline from the link */
   color: inherit; /* Inherit text color */
 }
 
-.address-details a:hover {
+.address-details a:hover, .phone-details a:hover {
   text-decoration: underline; /* Underline on hover */
 }
 
-.address-details p {
+.address-details p, .phone-details p {
   display: flex; /* Use flexbox for the p element */
   align-items: center; /* Align items vertically */
-  margin: 0;
 }
 
-.address-details img {
+.address-details img, .phone-details img {
   margin-right: 0.5rem; /* Space between image and text */
   width: 1.5rem; /* Adjust size as needed */
   height: 1.5rem; /* Adjust size as needed */
 }
 
+/* Unique Styles */
+.phone-details p {
+  margin-bottom: 20px; /* Additional bottom margin for phone details */
+}