update how it works card update
This commit is contained in:
@@ -142,23 +142,26 @@ export default function Header() {
|
||||
>
|
||||
<div className="slide-sidebar-close" onClick={closeAll}></div>
|
||||
<div className="slide-sidebar">
|
||||
<div className="slide-sidebar-content">
|
||||
{/* Header — does not scroll. */}
|
||||
<div className="slide-sidebar-header">
|
||||
<figure className="wp-block-image size-full is-resized">
|
||||
<Image
|
||||
width={305}
|
||||
height={58}
|
||||
src="/images/doormile-logo.png"
|
||||
alt="Doormile logo"
|
||||
className="wp-image-5851"
|
||||
style={{ width: "210px", height: "auto" }}
|
||||
sizes="(max-width: 305px) 100vw, 305px"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
{/* Scrollable content — tabIndex makes it keyboard-scrollable. */}
|
||||
<div className="slide-sidebar-content" tabIndex={0} role="region" aria-label="Menu content">
|
||||
<div id="block-37" className="widget widget_block">
|
||||
<div className="widget-wrapper">
|
||||
<div className="dm-block-group is-layout-constrained dm-block-group-is-layout-constrained">
|
||||
<figure className="wp-block-image size-full is-resized">
|
||||
<Image
|
||||
width={305}
|
||||
height={58}
|
||||
src="/images/doormile-logo.png"
|
||||
alt="Doormile logo"
|
||||
className="wp-image-5851"
|
||||
style={{ width: "150px", height: "auto" }}
|
||||
sizes="(max-width: 305px) 100vw, 305px"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div style={{ height: "46px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<div className="wp-block-title">
|
||||
<h6
|
||||
@@ -171,11 +174,87 @@ export default function Header() {
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Our Location
|
||||
Address
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
|
||||
<h6
|
||||
className="wp-block-heading has-text-font-font-family"
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0px",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Hyderabad
|
||||
</h6>
|
||||
<p>
|
||||
5th Floor, Vision Ultima,
|
||||
<br />
|
||||
Street No.3, Jayabheri Enclave,
|
||||
<br />
|
||||
Gachibowli, Hyderabad,
|
||||
<br />
|
||||
Telangana 500032.
|
||||
</p>
|
||||
|
||||
<div style={{ height: "12px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<h6
|
||||
className="wp-block-heading has-text-font-font-family"
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0px",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Coimbatore
|
||||
</h6>
|
||||
<p>
|
||||
Mayflower Valencia,
|
||||
<br />
|
||||
Near Nava India Bus Stop,
|
||||
<br />
|
||||
Avinashi Road,
|
||||
<br />
|
||||
Udayampalayam,
|
||||
<br />
|
||||
Tamil Nadu 641037.
|
||||
</p>
|
||||
|
||||
<div style={{ height: "12px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<h6
|
||||
className="wp-block-heading has-text-font-font-family"
|
||||
style={{
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0px",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Bengaluru
|
||||
</h6>
|
||||
<p>
|
||||
C612, 6th Floor,
|
||||
<br />
|
||||
Trifecta Starlight,
|
||||
<br />
|
||||
ITPL Road,
|
||||
<br />
|
||||
Garudacharapalya,
|
||||
<br />
|
||||
Mahadevapura,
|
||||
<br />
|
||||
Bangalore 560048,
|
||||
<br />
|
||||
Karnataka, India.
|
||||
</p>
|
||||
|
||||
<div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
@@ -272,19 +351,21 @@ export default function Header() {
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div style={{ height: "137px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<div className="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
|
||||
<div className="wp-block-button is-style-simple is-style-theme">
|
||||
<Link href="/contact" className="wp-block-button__link wp-element-button" style={{ borderRadius: "10px" }}>
|
||||
Get in touch
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA — pinned at the bottom; never scrolls away. */}
|
||||
<div className="slide-sidebar-cta">
|
||||
<div className="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
|
||||
<div className="wp-block-button is-style-simple is-style-theme">
|
||||
<Link href="/contact" className="wp-block-button__link wp-element-button" style={{ borderRadius: "10px" }}>
|
||||
Get in touch
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -362,14 +443,6 @@ export default function Header() {
|
||||
>
|
||||
<div className="mobile-header-row">
|
||||
<div className="header-icons-container">
|
||||
<div className="header-icon mini-cart">
|
||||
<a href="#" className="mini-cart-trigger">
|
||||
<i className="mini-cart-count"></i>
|
||||
</a>
|
||||
</div>
|
||||
<a className="header-icon search-link" href="#">
|
||||
<span className="search-trigger-icon"></span>
|
||||
</a>
|
||||
<div className="header-icon login-logout">
|
||||
<a href="#" title="Login/Register" className="link-login"></a>
|
||||
</div>
|
||||
@@ -491,6 +564,69 @@ export default function Header() {
|
||||
suppressHydrationWarning
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
/* ── Off-canvas menu: full-height flex column ──
|
||||
Header (logo) at top, scrollable content in the middle, and the
|
||||
"Get in touch" CTA pinned at the bottom — so the panel stays
|
||||
usable however much content (e.g. multiple office addresses) it
|
||||
holds. Scoped to #side-panel-2f31137; no other sidebar is touched.
|
||||
Width, colors, the slide-in animation, and open/close behaviour
|
||||
(driven by the .active class on the wrapper) are all unchanged. */
|
||||
#side-panel-2f31137 .slide-sidebar {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
height: 100% !important;
|
||||
padding: 0 !important; /* the three sections own their padding */
|
||||
overflow: hidden !important; /* scrolling lives on the content area */
|
||||
}
|
||||
/* Fit the *visible* viewport. The panel height is calc(100vh - 20px),
|
||||
but on mobile 100vh is the larger, URL-bar-inclusive height, which
|
||||
pushed the bottom of the scroll list + the CTA below the fold and
|
||||
made scrolling appear broken. dvh tracks the actually-visible area;
|
||||
vh is kept as a fallback for older browsers. */
|
||||
#side-panel-2f31137.slide-sidebar-wrapper {
|
||||
height: calc(100vh - 20px);
|
||||
height: calc(100dvh - 20px) !important;
|
||||
}
|
||||
#side-panel-2f31137 .slide-sidebar-header {
|
||||
flex: 0 0 auto;
|
||||
padding: 52px 36px 18px; /* top clears the floating close button */
|
||||
text-align: center; /* centre the logo */
|
||||
}
|
||||
#side-panel-2f31137 .slide-sidebar-header figure {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#side-panel-2f31137 .slide-sidebar-header img {
|
||||
display: inline-block; /* centred by the header's text-align */
|
||||
}
|
||||
#side-panel-2f31137 .slide-sidebar-content {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0; /* let the flex child shrink so it can scroll */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
|
||||
overscroll-behavior: contain; /* don't chain scroll to the page */
|
||||
padding: 18px 60px 8px; /* top gap below the logo header */
|
||||
}
|
||||
#side-panel-2f31137 .slide-sidebar-content:focus-visible {
|
||||
outline: none; /* container is scroll-focusable, not a control */
|
||||
}
|
||||
#side-panel-2f31137 .slide-sidebar-cta {
|
||||
flex: 0 0 auto;
|
||||
padding: 16px 60px 36px;
|
||||
}
|
||||
/* Compact, readable address blocks (tighter line + lead-in than the
|
||||
default 1.75em body spacing). */
|
||||
#side-panel-2f31137 .slide-sidebar-content p {
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
/* Larger social icons — the logos-only block style renders them at 18px. */
|
||||
#side-panel-2f31137 .wp-block-social-links.is-style-logos-only .wp-block-social-link a svg {
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
}
|
||||
|
||||
#masthead .elementor-element.elementor-element-466de1b {
|
||||
position: absolute !important;
|
||||
top: 5px !important;
|
||||
|
||||
Reference in New Issue
Block a user