first commit
This commit is contained in:
17
src/components/layout/BodyClasses.tsx
Normal file
17
src/components/layout/BodyClasses.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { getBodyClasses } from "@/lib/bodyClasses";
|
||||
|
||||
/**
|
||||
* Applies production WP/Elementor body classes per route.
|
||||
* Owns document.body.className — no other component should set it.
|
||||
*/
|
||||
export default function BodyClasses() {
|
||||
const pathname = usePathname();
|
||||
useEffect(() => {
|
||||
document.body.className = getBodyClasses(pathname);
|
||||
}, [pathname]);
|
||||
return null;
|
||||
}
|
||||
14
src/components/layout/BodyOverlay.tsx
Normal file
14
src/components/layout/BodyOverlay.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useHeaderUI } from "./HeaderUIProvider";
|
||||
|
||||
/**
|
||||
* Production: `<div class="body-overlay"></div>` is a direct child of body
|
||||
* (rendered by both index.php line 6 and header.php line 5 — production has two; we render one).
|
||||
* CSS (in vendor-theme-core.css and elementor-frontend-inline-css.css) styles it as fixed-position fullscreen overlay.
|
||||
*/
|
||||
export default function BodyOverlay() {
|
||||
const { isMenuOpen, isSidebarOpen, closeAll } = useHeaderUI();
|
||||
const active = isMenuOpen || isSidebarOpen;
|
||||
return <div className={`body-overlay${active ? " active" : ""}`} onClick={closeAll} />;
|
||||
}
|
||||
495
src/components/layout/Footer.tsx
Normal file
495
src/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,495 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
const socialIconSpacing = {
|
||||
"--grid-column-gap": "52px",
|
||||
"--grid-row-gap": "18px",
|
||||
columnGap: "52px",
|
||||
rowGap: "18px",
|
||||
} as React.CSSProperties;
|
||||
|
||||
const [showScrollTop, setShowScrollTop] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
fullName: "",
|
||||
email: "",
|
||||
subject: "",
|
||||
message: "",
|
||||
});
|
||||
const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle");
|
||||
|
||||
// Handle scroll to top button visibility
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 300) {
|
||||
setShowScrollTop(true);
|
||||
} else {
|
||||
setShowScrollTop(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setFormStatus("submitting");
|
||||
try {
|
||||
// Simulate API submission
|
||||
console.log("Footer contact form submitted:", formData);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
setFormStatus("success");
|
||||
setFormData({ fullName: "", email: "", subject: "", message: "" });
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setFormStatus("error");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<footer
|
||||
data-rocket-location-hash="1eeca93394c4fc14089e9d12a2a92e22"
|
||||
itemScope
|
||||
itemType="https://schema.org/WPFooter"
|
||||
id="colophon"
|
||||
role="contentinfo"
|
||||
>
|
||||
<div className="footer-width-fixer">
|
||||
<div data-elementor-type="wp-post" data-elementor-id="6585" className="elementor elementor-6585">
|
||||
<div className="elementor-element elementor-element-3cd920c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="3cd920c" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-b29b8fc e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="b29b8fc" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-ef6fa6d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ef6fa6d" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-9990148 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9990148" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-8899bdf elementor-absolute elementor-widget elementor-widget-image" data-id="8899bdf" data-element_type="widget" data-e-type="widget" data-settings="{"_position":"absolute"}" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<img width="965" height="474" src="/images/bg-map.png" className="attachment-full size-full wp-image-1148" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a0e7516 elementor-widget elementor-widget-logico_heading" data-id="a0e7516" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">/ get in touch /</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-687d944 elementor-widget elementor-widget-logico_heading" data-id="687d944" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h3 className="logico-title" style={{ color: "white" }}>
|
||||
We are always ready to help you and answer your questions
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-670d1b2 elementor-widget elementor-widget-text-editor" data-id="670d1b2" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Connecting businesses with fast, secure, smart deliveries.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-2631b42 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="2631b42" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-df89993 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="df89993" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-69b6892 elementor-widget elementor-widget-logico_heading" data-id="69b6892" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Call Center</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-87be926 elementor-widget elementor-widget-text-editor" data-id="87be926" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>Tel : +91 86886 97941</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-f5d8e63 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="f5d8e63" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-774e540 elementor-widget elementor-widget-logico_heading" data-id="774e540" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Our Location</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9c1cf03 elementor-widget elementor-widget-text-editor" data-id="9c1cf03" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-645be8d e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child" data-id="645be8d" data-element_type="container" data-e-type="container">
|
||||
<div className="e-con-inner">
|
||||
<div className="elementor-element elementor-element-a96d151 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a96d151" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-37e647f elementor-widget elementor-widget-logico_heading" data-id="37e647f" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Email</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-ba67644 elementor-widget elementor-widget-text-editor" data-id="ba67644" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
|
||||
<div className="elementor-widget-container">
|
||||
<p>
|
||||
<a href="mailto:care@doormile.com">care@doormile.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-9ba4b82 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="9ba4b82" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-e9a5d79 elementor-widget elementor-widget-logico_heading" data-id="e9a5d79" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Social network</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a6bccba elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="a6bccba" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-3fbe893" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">Facebook</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-x-twitter elementor-repeater-item-64ac94e" href="https://x.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">X</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in elementor-repeater-item-38e1bcc" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">LinkedIn</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem"style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-b0d5e1f" href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">YouTube</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a5c503d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="a5c503d" data-element_type="container" data-e-type="container" data-settings="{"background_background":"classic"}">
|
||||
<div className="elementor-element elementor-element-535776a elementor-widget elementor-widget-logico_heading" data-id="535776a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Get in Touch</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-0e6fedf elementor-widget elementor-widget-logico_wpforms" data-id="0e6fedf" data-element_type="widget" data-e-type="widget" data-widget_type="logico_wpforms.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-wpforms-widget">
|
||||
<div className="wpforms-container wpforms-render-modern" id="wpforms-369">
|
||||
<form id="wpforms-form-369" className="wpforms-validate wpforms-form" onSubmit={handleSubmit}>
|
||||
<div className="wpforms-field-container">
|
||||
<div className="wpforms-field-wrapper logico-form-field">
|
||||
<div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Full name</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="footer-field-name">Full name</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="footer-field-name"
|
||||
className="wpforms-field-large"
|
||||
name="fullName"
|
||||
value={formData.fullName}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="wpforms-field-wrapper logico-form-field">
|
||||
<div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Email</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="footer-field-email">Email</label>
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
id="footer-field-email"
|
||||
className="wpforms-field-large"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="wpforms-field-wrapper logico-form-field">
|
||||
<div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Subject</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="footer-field-subject">Subject</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
id="footer-field-subject"
|
||||
className="wpforms-field-large"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="wpforms-field-wrapper logico-form-field">
|
||||
<div className="logico-label-wrapper" style={{marginBottom:"12px"}}>
|
||||
<div className="logico-label-placeholder">
|
||||
<div className="logico-label-placeholder-text">Message</div>
|
||||
</div>
|
||||
<label className="wpforms-field-label" htmlFor="footer-field-message">Message</label>
|
||||
</div>
|
||||
<textarea
|
||||
id="footer-field-message"
|
||||
className="wpforms-field-large"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div className="wpforms-submit-container">
|
||||
<button
|
||||
type="submit"
|
||||
id="wpforms-submit-369"
|
||||
className="logico-alter-button wpforms-submit"
|
||||
disabled={formStatus === "submitting"}
|
||||
>
|
||||
{formStatus === "submitting" ? "Sending..." : "Send a message"}
|
||||
</button>
|
||||
{formStatus === "success" && (
|
||||
<div style={{ color: "#4caf50", marginTop: "10px", fontSize: "14px" }}>
|
||||
Message sent successfully!
|
||||
</div>
|
||||
)}
|
||||
{formStatus === "error" && (
|
||||
<div style={{ color: "#f44336", marginTop: "10px", fontSize: "14px" }}>
|
||||
Something went wrong. Please try again.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-e183a77 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="e183a77" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-5219697 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5219697" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-e6af8aa elementor-widget__width-initial elementor-widget elementor-widget-logico_heading" data-id="e6af8aa" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<h2 className="logico-title">
|
||||
Delivered <span style={{ color: "#c01227" }}>on time</span> with no hassle.
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-ba22941 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="ba22941" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-54629ca elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="54629ca" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-divider">
|
||||
<span className="elementor-divider-separator"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-3f1ba7a e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="3f1ba7a" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-64e2e81 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="64e2e81" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-b5c897d elementor-widget elementor-widget-image" data-id="b5c897d" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
|
||||
<div className="elementor-widget-container">
|
||||
<Link href="/">
|
||||
<img width="300" height="57" src="/images/logo-slogan.png" style={{ width: "280px", height: "auto" }} className="attachment-full size-full wp-image-5851" alt="Doormile Tagline" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-e4e6486 elementor-shape-square elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="e4e6486" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="elementor-social-icons-wrapper elementor-grid" role="list" style={socialIconSpacing}>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-facebook-f" href="https://www.facebook.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">Facebook</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-facebook-f" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-x-twitter" href="https://x.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">X</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-linkedin-in" href="https://www.linkedin.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">LinkedIn</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-linkedin-in" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
<span className="elementor-grid-item" role="listitem" style={{padding:"0 15px"}}>
|
||||
<a className="elementor-icon elementor-social-icon elementor-social-icon-youtube" href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
|
||||
<span className="elementor-screen-only">YouTube</span>
|
||||
<svg aria-hidden="true" className="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-5b73dd3 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="5b73dd3" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-10ead4d elementor-widget elementor-widget-logico_heading" data-id="10ead4d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Solutions</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-b2507df elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="b2507df" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
|
||||
<div className="elementor-widget-container">
|
||||
<ul className="logico-custom-menu-widget">
|
||||
<li>
|
||||
<Link href="/miletruth">MileTruth™</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/how-it-works">How It Works</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/solutions">Use Cases</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">Request Demo</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-451f15c e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="451f15c" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-0ec06ff elementor-widget elementor-widget-logico_heading" data-id="0ec06ff" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Services</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-a219b7d elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="a219b7d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
|
||||
<div className="elementor-widget-container">
|
||||
<ul className="logico-custom-menu-widget">
|
||||
<li>
|
||||
<Link href="/about-us">About Us</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/about-us#women-entrepreneurship">Women entrepreneurship</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/blog">Blog</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact">Contact</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-44a1f5d e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="44a1f5d" data-element_type="container" data-e-type="container">
|
||||
<div className="elementor-element elementor-element-0edc8fd elementor-widget elementor-widget-logico_heading" data-id="0edc8fd" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-title">Legal</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="elementor-element elementor-element-189484a elementor-widget elementor-widget-logico_custom_navigation_menu" data-id="189484a" data-element_type="widget" data-e-type="widget" data-widget_type="logico_custom_navigation_menu.default">
|
||||
<div className="elementor-widget-container">
|
||||
<ul className="logico-custom-menu-widget">
|
||||
<li>
|
||||
<Link href="/privacy-policy">Privacy Policy</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/terms-of-service">Terms Service</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/cookie-policy">Cookie Policy</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Scroll to Top Button */}
|
||||
<div
|
||||
className={`footer-scroll-top ${showScrollTop ? "active" : ""}`}
|
||||
onClick={scrollToTop}
|
||||
style={{ cursor: "pointer" }}
|
||||
></div>
|
||||
|
||||
{/* Vendor CSS hard-codes font-family: "Manrope" but next/font/google exposes the loaded
|
||||
font only through --font-manrope (it has a hashed internal name). Re-map the footer
|
||||
bottom-section titles to the loaded font and supply the base divider widget border. */}
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
.elementor-6585 .elementor-element.elementor-element-e6af8aa .logico-title,
|
||||
.elementor-6585 .elementor-element.elementor-element-3f1ba7a .logico-title,
|
||||
.elementor-6585 .elementor-element.elementor-element-3f1ba7a .logico-custom-menu-widget {
|
||||
font-family: var(--font-manrope), system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
}
|
||||
/* The divider widget is a flex child that should grow via Elementor's
|
||||
--container-widget-flex-grow variable, but the base rule wiring that
|
||||
variable to flex-grow lives in elementor-frontend.css (not loaded). */
|
||||
.elementor-6585 .elementor-element.elementor-element-54629ca {
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-54629ca .elementor-divider-separator {
|
||||
display: block;
|
||||
border-top: var(--divider-border-width, 1px) var(--divider-border-style, solid) var(--divider-color, #CBCBCB);
|
||||
}
|
||||
|
||||
/* Production renders footer social icons at ~25px; ours default to 50px because the
|
||||
base Elementor icon-size rule (font-size + SVG width:1em) is in elementor-frontend.css
|
||||
which isn't loaded. Match prod for both upper (a6bccba) and lower (e4e6486) groups. */
|
||||
.elementor-6585 .elementor-element.elementor-element-a6bccba .elementor-social-icon,
|
||||
.elementor-6585 .elementor-element.elementor-element-e4e6486 .elementor-social-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
.elementor-6585 .elementor-element.elementor-element-a6bccba .elementor-social-icon svg,
|
||||
.elementor-6585 .elementor-element.elementor-element-e4e6486 .elementor-social-icon svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
523
src/components/layout/Header.tsx
Normal file
523
src/components/layout/Header.tsx
Normal file
@@ -0,0 +1,523 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* 1:1 translation of doormile-site/includes/layout/header.php.
|
||||
* Only PHP syntax, href routes, and image paths are replaced.
|
||||
* All Elementor wrapper divs, classes, data-* attributes, IDs, srcset/sizes, inline styles, and the trailing <style> block are preserved verbatim.
|
||||
* Menu open/close + sidebar state is read from HeaderUIProvider so BodyOverlay (sibling at body level) can react.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useHeaderUI } from "./HeaderUIProvider";
|
||||
|
||||
// Mirror of header.php $current_page_map (lines 24-35)
|
||||
const CURRENT_PAGE_MAP: Record<string, string> = {
|
||||
"/": "home",
|
||||
"/how-it-works": "how-it-works",
|
||||
"/miletruth": "miletruth",
|
||||
"/solutions": "solutions",
|
||||
"/about-us": "about",
|
||||
"/blog": "blogs",
|
||||
};
|
||||
|
||||
// Mirror of header.php $current_page_aliases (lines 37-44)
|
||||
const CURRENT_PAGE_ALIASES: Record<string, string[]> = {
|
||||
home: ["home"],
|
||||
"how-it-works": ["how-it-works", "how-its-works"],
|
||||
miletruth: ["miletruth"],
|
||||
solutions: ["solutions"],
|
||||
about: ["about", "about-us", "women"],
|
||||
blogs: ["blogs"],
|
||||
};
|
||||
|
||||
export default function Header() {
|
||||
const pathname = usePathname();
|
||||
const { isMenuOpen, isSidebarOpen, toggleMenu, toggleSidebar, closeAll } = useHeaderUI();
|
||||
|
||||
const isHome = pathname === "/";
|
||||
const currentPage = CURRENT_PAGE_MAP[pathname] ?? "";
|
||||
|
||||
// Mirror of header.php $dm_header_active (lines 45-47)
|
||||
const dmHeaderActive = (key: string) =>
|
||||
(CURRENT_PAGE_ALIASES[key] ?? []).includes(currentPage) ? " active" : "";
|
||||
|
||||
// Mirror of header.php <script> block (lines 628-660):
|
||||
// - on doc.ready: $('.header-hide-until-scroll').addClass('header-visible-scrolled')
|
||||
// - on scroll: toggleClass('dm-header-scrolled', scrollTop > 50)
|
||||
const [visibleScrolled, setVisibleScrolled] = useState(false);
|
||||
const [dmHeaderScrolled, setDmHeaderScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handle = requestAnimationFrame(() => {
|
||||
setVisibleScrolled(true);
|
||||
});
|
||||
return () => cancelAnimationFrame(handle);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setDmHeaderScrolled(window.scrollY > 50);
|
||||
onScroll();
|
||||
window.addEventListener("scroll", onScroll);
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
// Mirror of header.php $header_style (line 21): inline opacity:0;visibility:hidden on home (before JS adds .header-visible-scrolled)
|
||||
const headerInlineStyle = isHome && !visibleScrolled ? { opacity: 0, visibility: "hidden" as const } : undefined;
|
||||
|
||||
const wrapperClass = [
|
||||
"elementor-element",
|
||||
"elementor-element-466de1b",
|
||||
"e-con-full",
|
||||
"sticky-container-on",
|
||||
"e-flex",
|
||||
"cut-corner-no",
|
||||
"e-con",
|
||||
"e-parent",
|
||||
"header-hide-until-scroll",
|
||||
visibleScrolled ? "header-visible-scrolled" : "",
|
||||
dmHeaderScrolled ? "dm-header-scrolled" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<>
|
||||
<header id="masthead" itemScope itemType="https://schema.org/WPHeader">
|
||||
<p className="main-title bhf-hidden" itemProp="headline">
|
||||
<Link href="/" title="Doormile" rel="home">Doormile</Link>
|
||||
</p>
|
||||
<div data-elementor-type="wp-post" data-elementor-id="5180" className="elementor elementor-5180">
|
||||
<div
|
||||
className={wrapperClass}
|
||||
data-id="466de1b"
|
||||
data-element_type="container"
|
||||
data-settings='{"position":"absolute"}'
|
||||
style={headerInlineStyle}
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-e052838 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="e052838"
|
||||
data-element_type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-d681ece e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="d681ece"
|
||||
data-element_type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-472172e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="472172e"
|
||||
data-element_type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-2f31137 elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-widget elementor-widget-logico_slide_sidebar"
|
||||
data-id="2f31137"
|
||||
data-element_type="widget"
|
||||
data-widget_type="logico_slide_sidebar.default"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="logico-slide-sidebar-widget">
|
||||
<div className="dropdown-trigger" data-id="2f31137" onClick={toggleSidebar}>
|
||||
<span className="dropdown-trigger-icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{ zIndex: 100000 }}
|
||||
className={`slide-sidebar-wrapper slide-sidebar-position-left${isSidebarOpen ? " active" : ""}`}
|
||||
id="side-panel-2f31137"
|
||||
>
|
||||
<div className="slide-sidebar-close" onClick={closeAll}></div>
|
||||
<div className="slide-sidebar">
|
||||
<div className="slide-sidebar-content">
|
||||
<div id="block-37" className="widget widget_block">
|
||||
<div className="widget-wrapper">
|
||||
<div className="wp-block-group is-layout-constrained wp-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
|
||||
className="wp-block-heading has-text-font-font-family"
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0px",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Our Location
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<p>5th Floor, Vision Ultima, Street No.3, Jayabheri Enclave, Gachibowli, Hyderabad, Telangana 500032.</p>
|
||||
|
||||
<div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<div className="wp-block-title">
|
||||
<h6
|
||||
className="wp-block-heading has-text-font-font-family"
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0px",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Contact Us
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<p>Tel : +91 86886 97941</p>
|
||||
|
||||
<div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<div className="wp-block-title">
|
||||
<h6
|
||||
className="wp-block-heading has-text-font-font-family"
|
||||
style={{
|
||||
fontSize: "18px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: 700,
|
||||
letterSpacing: "0px",
|
||||
textTransform: "none",
|
||||
}}
|
||||
>
|
||||
Email
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a href="mailto:care@doormile.com" data-wplink-edit="true">care@doormile.com</a>
|
||||
</p>
|
||||
|
||||
<div style={{ height: "3px" }} aria-hidden="true" className="wp-block-spacer"></div>
|
||||
|
||||
<ul
|
||||
className="wp-block-social-links has-icon-color is-style-logos-only has-background is-layout-flex wp-block-social-links-is-layout-flex"
|
||||
style={{ backgroundColor: "#1f1f1f" }}
|
||||
>
|
||||
<li
|
||||
style={{ color: "#ffffff" }}
|
||||
className="wp-social-link wp-social-link-facebook has-white-color wp-block-social-link"
|
||||
>
|
||||
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/" className="wp-block-social-link-anchor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
|
||||
</svg>
|
||||
<span className="wp-block-social-link-label screen-reader-text">Facebook</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
style={{ color: "#ffffff" }}
|
||||
className="wp-social-link wp-social-link-x has-white-color wp-block-social-link"
|
||||
>
|
||||
<a rel="noopener nofollow" target="_blank" href="https://x.com/" className="wp-block-social-link-anchor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
||||
<path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />
|
||||
</svg>
|
||||
<span className="wp-block-social-link-label screen-reader-text">X</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
style={{ color: "#ffffff" }}
|
||||
className="wp-social-link wp-social-link-linkedin has-white-color wp-block-social-link"
|
||||
>
|
||||
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/" className="wp-block-social-link-anchor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
||||
<path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z" />
|
||||
</svg>
|
||||
<span className="wp-block-social-link-label screen-reader-text">LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li
|
||||
style={{ color: "#ffffff" }}
|
||||
className="wp-social-link wp-social-link-youtube has-white-color wp-block-social-link"
|
||||
>
|
||||
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/" className="wp-block-social-link-anchor">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
|
||||
<path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z" />
|
||||
</svg>
|
||||
<span className="wp-block-social-link-label screen-reader-text">YouTube</span>
|
||||
</a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-element elementor-element-846e53d elementor-widget elementor-widget-site-logo"
|
||||
data-id="846e53d"
|
||||
data-element_type="widget"
|
||||
data-widget_type="site-logo.default"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="hfe-site-logo">
|
||||
<Link data-elementor-open-lightbox="" className="elementor-clickable" href="/">
|
||||
<div className="hfe-site-logo-set">
|
||||
<div className="hfe-site-logo-container">
|
||||
<Image width={400} height={76} className="hfe-site-logo-img logo-desktop elementor-animation-" src="/images/doormile-white.png" alt="doormile-logo" priority />
|
||||
<Image width={400} height={76} className="hfe-site-logo-img logo-mobile elementor-animation-" src="/images/doormile-black.png" alt="doormile-logo" priority />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-element elementor-element-e44ee7e e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="e44ee7e"
|
||||
data-element_type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-0b7bf6f logico-breakpoint-laptop elementor-widget__width-auto elementor-widget elementor-widget-logico_navigation_menu"
|
||||
data-id="0b7bf6f"
|
||||
data-element_type="widget"
|
||||
data-widget_type="logico_navigation_menu.default"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="header-menu-container">
|
||||
<nav>
|
||||
<ul id="menu-main-menu" className="main-menu">
|
||||
<li id="menu-item-10508" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
|
||||
<Link href="/">Home</Link>
|
||||
</li>
|
||||
<li id="menu-item-10509" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
|
||||
<Link href="/how-it-works">How It Works</Link>
|
||||
</li>
|
||||
<li id="menu-item-10510" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
|
||||
<Link href="/miletruth">MileTruth™ AI</Link>
|
||||
</li>
|
||||
<li id="menu-item-10511" className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions">Solutions</Link>
|
||||
</li>
|
||||
<li id="menu-item-10512" className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10512${dmHeaderActive("about")}`}>
|
||||
<Link href="/about-us">About</Link>
|
||||
</li>
|
||||
<li id="menu-item-10535" className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
|
||||
<Link href="/blog">Blogs</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div className="menu-trigger" data-id="0b7bf6f" onClick={toggleMenu}>
|
||||
<span className="menu-trigger-icon">
|
||||
<span className="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{ zIndex: 100000 }}
|
||||
className={`mobile-header-menu-container${isMenuOpen ? " active" : ""}`}
|
||||
id="mobile-header-0b7bf6f"
|
||||
>
|
||||
<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>
|
||||
<div className="header-icon menu-close" onClick={closeAll}>
|
||||
<span className="menu-close-icon"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul id="menu-main-menu-1" className="main-menu">
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10508${dmHeaderActive("home")}`}>
|
||||
<Link href="/" onClick={closeAll}>Home</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10509${dmHeaderActive("how-it-works")}`}>
|
||||
<Link href="/how-it-works" onClick={closeAll}>How It Works</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-10510${dmHeaderActive("miletruth")}`}>
|
||||
<Link href="/miletruth" onClick={closeAll}>MileTruth™ AI</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-10511${dmHeaderActive("solutions")}`}>
|
||||
<Link href="/solutions" onClick={closeAll}>Solutions</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10512${dmHeaderActive("about")}`}>
|
||||
<Link href="/about-us" onClick={closeAll}>About</Link>
|
||||
</li>
|
||||
<li className={`menu-item menu-item-type-post_type menu-item-object-page menu-item-10535${dmHeaderActive("blogs")}`}>
|
||||
<Link href="/blog" onClick={closeAll}>Blogs</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="header-mobile-contacts">
|
||||
<div className="contact-item contact-item-phone">
|
||||
<span className="contact-item-label">Phone</span>
|
||||
<div className="contact-item-value">
|
||||
<p>Tel : +91 86886 97941</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="contact-item contact-item-email">
|
||||
<span className="contact-item-label">Email</span>
|
||||
<div className="contact-item-value">
|
||||
<p>
|
||||
<a href="mailto:care@doormile.com" data-wplink-edit="true">care@doormile.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="header-mobile-socials">
|
||||
<ul className="mobile-menu-socials wrapper-socials">
|
||||
<li>
|
||||
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook" rel="noreferrer">
|
||||
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/" target="_blank" aria-label="X (Twitter)" rel="noreferrer">
|
||||
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/" target="_blank" aria-label="LinkedIn" rel="noreferrer">
|
||||
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.youtube.com/" target="_blank" aria-label="YouTube" rel="noreferrer">
|
||||
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="header-mobile-button">
|
||||
<Link className="logico-alter-button" href="/contact" target="_blank">Get in Touch</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="elementor-element elementor-element-f961133 e-con-full elementor-hidden-laptop elementor-hidden-tablet_extra elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex cut-corner-no sticky-container-off e-con e-child"
|
||||
data-id="f961133"
|
||||
data-element_type="container"
|
||||
>
|
||||
<div
|
||||
className="elementor-element elementor-element-cabdb09 elementor-widget elementor-widget-logico_header_button"
|
||||
data-id="cabdb09"
|
||||
data-element_type="widget"
|
||||
data-widget_type="logico_header_button.default"
|
||||
>
|
||||
<div className="elementor-widget-container">
|
||||
<div className="header-button-container">
|
||||
<Link href="/contact" target="_blank" className="header-button header-button-animation-fade">
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{/* Inline <style> block — 1:1 translation of header.php lines 600-627 */}
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
#masthead .elementor-element.elementor-element-466de1b {
|
||||
position: absolute !important;
|
||||
top: 5px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: auto !important;
|
||||
transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease !important;
|
||||
z-index: 10000 !important;
|
||||
}
|
||||
|
||||
/* .e-con's --padding-* falls through two competing stylesheets and lands at 10px locally
|
||||
(vs 0 in production). Zero out the pill wrappers so the navbar matches prod height (~122px). */
|
||||
#masthead .elementor-element.elementor-element-e052838,
|
||||
#masthead .elementor-element.elementor-element-d681ece {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
#masthead {
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* Production pins the wrapper via Elementor sticky-effects JS (not shipped here).
|
||||
Force position:fixed once scrolled past 50px so the header stays in viewport. */
|
||||
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
|
||||
position: fixed !important;
|
||||
background: #4b4b4baa !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18) !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled .elementor-element.elementor-element-e052838 {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
#masthead .header-menu-container .main-menu > li.active > a:before {
|
||||
background-color: #ffffff !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
49
src/components/layout/HeaderUIProvider.tsx
Normal file
49
src/components/layout/HeaderUIProvider.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
|
||||
|
||||
type HeaderUIContextValue = {
|
||||
isMenuOpen: boolean;
|
||||
isSidebarOpen: boolean;
|
||||
toggleMenu: () => void;
|
||||
toggleSidebar: () => void;
|
||||
closeAll: () => void;
|
||||
};
|
||||
|
||||
const HeaderUIContext = createContext<HeaderUIContextValue | null>(null);
|
||||
|
||||
/**
|
||||
* Provider for header UI state (mobile menu + slide sidebar open/closed).
|
||||
* Lifted out of Header so BodyOverlay (sibling of header in production DOM) can read it.
|
||||
*/
|
||||
export function HeaderUIProvider({ children }: { children: ReactNode }) {
|
||||
const [isMenuOpen, setMenuOpen] = useState(false);
|
||||
const [isSidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const toggleMenu = useCallback(() => {
|
||||
setMenuOpen((o) => !o);
|
||||
setSidebarOpen(false);
|
||||
}, []);
|
||||
|
||||
const toggleSidebar = useCallback(() => {
|
||||
setSidebarOpen((o) => !o);
|
||||
setMenuOpen(false);
|
||||
}, []);
|
||||
|
||||
const closeAll = useCallback(() => {
|
||||
setMenuOpen(false);
|
||||
setSidebarOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<HeaderUIContext.Provider value={{ isMenuOpen, isSidebarOpen, toggleMenu, toggleSidebar, closeAll }}>
|
||||
{children}
|
||||
</HeaderUIContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useHeaderUI() {
|
||||
const ctx = useContext(HeaderUIContext);
|
||||
if (!ctx) throw new Error("useHeaderUI must be used inside <HeaderUIProvider>");
|
||||
return ctx;
|
||||
}
|
||||
Reference in New Issue
Block a user