Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix contect page

Browse Source
This commit is contained in:
Aravind R
2026-06-06 16:33:26 +05:30
parent ab67fec091
commit a16d51f2fa
7 changed files with 718 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/sections/ContactMap.tsx
View File

@@ -1,5 +1,15 @@
import React from "react";
import ContactMapEmbed from "@/components/map/ContactMapEmbed";
/**
* Contact / Location section.
*
* The section's layout (20px side padding, 40px top margin, the 25px top-rounded
* card that flows into the footer, and the 500px / 360px responsive heights) is
* preserved verbatim from the original Elementor markup so there is no visual
* regression. Only the *content* of the embed has changed: the Google Maps
* iframe is replaced by an interactive Leaflet satellite map (ContactMapEmbed).
*/
export default function ContactMap() {
return (
<div className="elementor-element elementor-element-7304a53 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="7304a53" data-element_type="container" data-e-type="container">
@@ -7,36 +17,47 @@ export default function ContactMap() {
.elementor-element-7304a53 {
--padding-left: 20px;
--padding-right: 20px;
--margin-top: 40px;
--margin-top: 12px;
--margin-bottom: 0px;
/* Reduce the large gap above the map (was 40px). */
margin-top: 12px !important;
padding-top: 0 !important;
/* Real side padding so the map is inset like the hero/footer sections
(the --padding-* vars only work with elementor-frontend.css, which
isn't loaded, so the map was going edge-to-edge). Matches
.custom-standard-hero-container: 20px desktop / 10px mobile. */
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
/* The section computes to display:inline here (the --display:flex var
isn't mapped without elementor-frontend.css), so its padding never
constrained the block child. Force flex so the padding insets the map. */
display: flex;
flex-direction: column;
width: 100%;
}
.elementor-element-7304a53 .elementor-custom-embed {
border-radius: 25px 25px 0 0;
/* Rounded on all corners so the map reads as a self-contained card
(bottom was square before, leaving a hard edge above the footer gap). */
border-radius: 25px;
overflow: hidden;
background: #ededed;
background: #0b0b0b;
line-height: 0;
}
.elementor-element-7304a53 .elementor-custom-embed iframe {
display: block;
filter: grayscale(100%);
@media (max-width: 840px) {
.elementor-element-7304a53 {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 768px) {
.elementor-element-7304a53 .elementor-custom-embed { height: 360px !important; }
}
` }} />
<div className="elementor-element elementor-element-5a3eed4 elementor-widget elementor-widget-google_maps" data-id="5a3eed4" data-element_type="widget" data-e-type="widget" data-widget_type="google_maps.default">
<div className="elementor-element elementor-element-5a3eed4 elementor-widget" data-id="5a3eed4" data-element_type="widget" data-e-type="widget">
<div className="elementor-widget-container">
<div className="elementor-custom-embed" style={{ width: "100%", height: "500px" }}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3806.1918122409634!2d78.35579498480733!3d17.45053110831999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb93b8c5a049b3%3A0x6f4b5999fccad985!2sJayabheri%20Enclave%2C%20Gachibowli%2C%20Hyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1778663239768!5m2!1sen!2sin"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen={true}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Doormile Location Map"
/>
<ContactMapEmbed />
</div>
</div>
</div>