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

fix how to work , about,blog

Browse Source
This commit is contained in:
Aravind R
2026-05-29 18:02:58 +05:30
parent 0a65d2e04a
commit 88722329d5
30 changed files with 2881 additions and 866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/app/globals.css
View File

@@ -1,6 +1,30 @@
/* Tailwind utilities ONLY — preflight/base and components are disabled so production Elementor/WordPress CSS controls body, typography, colors, spacing, and resets. */
@import "tailwindcss/utilities";
/* ============================================================
GLOBAL FONT OVERRIDE — Strict Manrope Default
Forced on all textual and structural elements while protecting
third-party icon fonts (FontAwesome, Fontello, Eicons, etc.).
============================================================ */
html {
scroll-behavior: smooth;
}
*, *::before, *::after {
font-family: var(--font-manrope), "Manrope", system-ui, -apple-system, sans-serif;
}
*:not(i):not(svg):not(path):not(canvas):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="eicon-"]):not([class*="fontello"]) {
font-family: var(--font-manrope), "Manrope", system-ui, -apple-system, sans-serif !important;
}
/* Smoother text rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
@media (min-width: 1025px) {
#masthead .elementor-element.elementor-element-466de1b {
top: 5px !important;
@@ -10,7 +34,7 @@
#masthead .elementor-element.elementor-element-e052838 {
margin-left: 1.4% !important;
border-radius: 28px !important;
background: rgba(31, 31, 31, 0.82) !important;
background: transparent !important;
}
#masthead .elementor-element.elementor-element-d681ece {
@@ -542,7 +566,7 @@
margin: 0 !important;
letter-spacing: -0.5px !important;
text-transform: none !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}
/* Hover state content wrapper */
@@ -589,7 +613,7 @@
margin: 0 !important;
font-weight: 600 !important;
letter-spacing: -0.2px !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}
.industry-card-section-title {
@@ -600,7 +624,7 @@
margin-bottom: 10px !important;
text-transform: uppercase !important;
opacity: 0.9 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}
.industry-card-list {
@@ -621,7 +645,7 @@
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
}
.industry-card-link:hover .industry-card-list-item {
@@ -681,7 +705,7 @@
font-size: 24px !important;
font-weight: 700 !important;
margin: 0 !important;
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
font-family: var(--font-manrope), 'Manrope', system-ui, -apple-system, sans-serif !important;
text-transform: none !important;
letter-spacing: -0.5px !important;
}
@@ -690,3 +714,88 @@
padding-left: clamp(20px, 4vw, 50px) !important;
padding-right: clamp(20px, 4vw, 50px) !important;
}
/* Custom premium animations keyframes */
@keyframes shimmer-sweep {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
/* ============================================================
CUSTOM STANDARDIZED HERO STYLES
Ensures all subpage hero sections have the exact same height,
width, framing margin/padding, and border-radius as the
Home Page content slider / hero container.
============================================================ */
/* Outer parent layout wrapper mirroring .elementor-element-741f56c */
.custom-standard-hero-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
box-sizing: border-box !important;
padding: 20px 20px 20px 20px !important; /* Top, Right, Bottom, Left margin framing */
display: flex !important;
flex-direction: column !important;
position: relative !important;
}
/* Inner hero card mirroring .owl-stage-outer border-radius and slider dimensions */
.custom-standard-hero-card {
position: relative !important;
width: 100% !important;
height: 800px !important;
min-height: 800px !important;
border-radius: 25px !important;
overflow: hidden !important;
box-shadow: none !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Dark background tint overlay to match home sliders and protect text contrast */
.custom-standard-hero-card::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.95) 100%) !important;
z-index: 1 !important;
}
.custom-standard-hero-card > * {
position: relative !important;
z-index: 2 !important;
}
/* Responsive constraints to keep all heroes matching the home page carousel perfectly */
@media (max-width: 1024px) {
.custom-standard-hero-container {
padding: 10px 10px 10px 10px !important;
}
.custom-standard-hero-card {
height: 620px !important;
min-height: 620px !important;
border-radius: 25px !important;
}
}
@media (max-width: 767px) {
.custom-standard-hero-container {
padding: 10px 10px 10px 10px !important;
}
.custom-standard-hero-card {
height: 560px !important;
min-height: 560px !important;
border-radius: 22px !important;
}
}

2
src/app/how-it-works/page.tsx
View File

@@ -1,6 +1,7 @@
import React from "react";
import HowItWorksHero from "../../components/sections/HowItWorksHero";
import Miles3 from "../../components/sections/Miles3";
import WhyChooseDoormile from "../../components/sections/WhyChooseDoormile";
import TheDoormileWay from "../../components/sections/TheDoormileWay";
export const metadata = {
@@ -16,6 +17,7 @@ export default function HowItWorksPage() {
<div data-elementor-type="wp-page" data-elementor-id="59" className="elementor elementor-59">
<HowItWorksHero />
<Miles3 />
<WhyChooseDoormile />
<TheDoormileWay />
</div>
</div>

33
src/app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Manrope } from "next/font/google";
import { Manrope, Space_Grotesk } from "next/font/google";
import "./globals.css";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
@@ -7,11 +7,18 @@ import BodyClasses from "@/components/layout/BodyClasses";
import BodyOverlay from "@/components/layout/BodyOverlay";
import { HeaderUIProvider } from "@/components/layout/HeaderUIProvider";
import { SHARED_BODY_CLASSES } from "@/lib/bodyClasses";
import AnimationProvider from "@/animations/AnimationProvider";
const manrope = Manrope({
subsets: ["latin"],
variable: "--font-manrope",
weight: ["300", "400", "500", "600", "700", "800"],
weight: ["200", "300", "400", "500", "600", "700", "800"],
});
const spaceGrotesk = Space_Grotesk({
subsets: ["latin"],
variable: "--font-space-grotesk",
weight: ["400", "500", "600", "700"],
});
export const metadata: Metadata = {
@@ -29,7 +36,7 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en-US" className={manrope.variable}>
<html lang="en-US" className={`${manrope.variable} ${spaceGrotesk.variable}`}>
<head>
{/* FontAwesome icons */}
<link
@@ -63,16 +70,18 @@ export default function RootLayout({
*/}
<body className={SHARED_BODY_CLASSES}>
<BodyClasses />
<HeaderUIProvider>
<BodyOverlay />
<div className="body-container">
<div id="page" className="hfeed site">
<Header />
{children}
<Footer />
<AnimationProvider>
<HeaderUIProvider>
<BodyOverlay />
<div className="body-container">
<div id="page" className="hfeed site">
<Header />
{children}
<Footer />
</div>
</div>
</div>
</HeaderUIProvider>
</HeaderUIProvider>
</AnimationProvider>
</body>
</html>
);