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

update contect page

Browse Source
This commit is contained in:
Aravind R
2026-06-04 15:49:51 +05:30
parent b2d64bd335
commit d5987b5dd1
3 changed files with 221 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.ts
View File

@@ -1,7 +1,9 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: "export",
images: {
unoptimized: true,
formats: ["image/avif", "image/webp"],
},
};

4
src/components/layout/Header.tsx
View File

@@ -449,7 +449,7 @@ export default function Header() {
</ul>
</div>
<div className="header-mobile-button">
<Link className="logico-alter-button" href="/contact" target="_blank">Get in Touch</Link>
<Link className="logico-alter-button" href="/contact">Get in Touch</Link>
</div>
</div>
</div>
@@ -470,7 +470,7 @@ export default function Header() {
>
<div className="elementor-widget-container">
<div className="header-button-container">
<Link href="/contact" target="_blank" className="header-button header-button-animation-fade">
<Link href="/contact" className="header-button header-button-animation-fade">
Contact Us
</Link>
</div>

236
src/components/sections/ContactsHero.tsx
View File

@@ -6,32 +6,229 @@ export default function ContactsHero() {
<>
<style dangerouslySetInnerHTML={{ __html: `
.contacts-hero-custom {
background-color: #1f1f1f !important;
background-image: linear-gradient(rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.95) 100%), url('/images/home2-slide-1.jpg') !important;
background-color: #0b0b0b !important;
background-image: url('/images/home2-slide-1.jpg') !important;
background-size: cover !important;
background-position: center !important;
}
.contacts-hero-card-custom {
position: relative !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.contacts-hero-bg-overlay {
position: absolute !important;
inset: 0 !important;
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.95) 100%) !important;
z-index: 1 !important;
}
/* Ambient Glowing Orbs */
.contacts-hero-glow-red {
position: absolute !important;
bottom: -15% !important;
right: -10% !important;
width: min(500px, 75vw) !important;
height: min(500px, 75vw) !important;
background: radial-gradient(circle, rgba(192, 18, 39, 0.24) 0%, rgba(192, 18, 39, 0) 70%) !important;
filter: blur(70px) !important;
pointer-events: none !important;
z-index: 1 !important;
animation: float-glow 10s ease-in-out infinite alternate !important;
}
.contacts-hero-glow-blue {
position: absolute !important;
top: -15% !important;
left: -10% !important;
width: min(450px, 60vw) !important;
height: min(450px, 60vw) !important;
background: radial-gradient(circle, rgba(0, 150, 255, 0.06) 0%, rgba(0, 150, 255, 0) 70%) !important;
filter: blur(75px) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Abstract Tech Grid */
.contacts-hero-grid {
position: absolute !important;
inset: 0 !important;
background-image:
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px) !important;
background-size: 50px 50px !important;
opacity: 0.8 !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Glassmorphic Center Card */
.contacts-hero-glass-card {
position: relative !important;
z-index: 3 !important;
background: rgba(10, 10, 10, 0.55) !important;
backdrop-filter: blur(24px) saturate(180%) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 30px !important;
padding: 60px 50px !important;
max-width: 820px !important;
width: 90% !important;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
text-align: center !important;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, border-color 0.6s ease !important;
}
.contacts-hero-glass-card:hover {
transform: translateY(-5px) scale(1.005) !important;
box-shadow: 0 45px 90px rgba(192, 18, 39, 0.14), 0 30px 60px rgba(0, 0, 0, 0.6) !important;
border-color: rgba(192, 18, 39, 0.3) !important;
}
/* Spaced kicker */
.contacts-hero-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 24px !important;
}
.contacts-hero-kicker-line {
display: block !important;
width: 24px !important;
height: 1.5px !important;
background: #C01227 !important;
border-radius: 1px !important;
}
.contacts-hero-kicker-text {
font-size: 13px !important;
font-weight: 850 !important;
letter-spacing: 4px !important;
color: #C01227 !important;
text-transform: uppercase !important;
font-family: var(--font-manrope), "Manrope", sans-serif !important;
}
/* Bold modern typography */
.contacts-hero-title {
font-size: clamp(34px, 5.2vw, 62px) !important;
font-weight: 850 !important;
line-height: 1.15 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: -1.8px !important;
margin: 0 0 20px 0 !important;
font-family: var(--font-manrope), "Manrope", sans-serif !important;
}
.contacts-hero-title-highlight {
background: linear-gradient(135deg, #ffffff 40%, #c01227 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* Description text */
.contacts-hero-desc {
font-size: clamp(15px, 1.22vw, 18px) !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.75) !important;
max-width: 600px !important;
margin: 0 auto 36px auto !important;
font-weight: 500 !important;
font-family: var(--font-manrope), "Manrope", sans-serif !important;
}
/* Breadcrumb capsule */
.contacts-hero-breadcrumbs {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 8px 22px !important;
border-radius: 30px !important;
transition: background 0.3s, border-color 0.3s !important;
}
.contacts-hero-breadcrumbs:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
.contacts-breadcrumb-link {
color: rgba(255, 255, 255, 0.65) !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 600 !important;
transition: color 0.2s !important;
font-family: var(--font-manrope), "Manrope", sans-serif !important;
}
.contacts-breadcrumb-link:hover {
color: #ffffff !important;
}
.contacts-breadcrumb-del {
color: rgba(255, 255, 255, 0.3) !important;
font-size: 11px !important;
}
.contacts-breadcrumb-cur {
color: #C01227 !important;
font-size: 13px !important;
font-weight: 700 !important;
font-family: var(--font-manrope), "Manrope", sans-serif !important;
}
@keyframes float-glow {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-15px, -25px) scale(1.08); }
}
@media (max-width: 768px) {
.contacts-hero-glass-card {
padding: 40px 24px !important;
width: 95% !important;
}
}
`}} />
<div className="custom-standard-hero-container">
<div className="custom-standard-hero-card contacts-hero-custom">
<div className="e-con-inner" style={{ position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
<div className="elementor-element elementor-element-ea205b5 elementor-widget elementor-widget-logico_page_title_line" style={{ textAlign: "center", zIndex: 5 }}>
<div className="elementor-widget-container">
<h1 className="page-title logico-title-h2" style={{ color: "#fff", fontSize: "clamp(34px, 5.5vw, 68px)", fontWeight: 850, textTransform: "uppercase", letterSpacing: "-1.5px", margin: 0 }}>
Contacts
</h1>
</div>
</div>
<div className="contacts-hero-card-custom">
<div className="contacts-hero-bg-overlay"></div>
<div className="contacts-hero-grid"></div>
<div className="contacts-hero-glow-red"></div>
<div className="contacts-hero-glow-blue"></div>
<div
className="elementor-element elementor-element-3d13f28 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs"
style={{ position: "absolute", bottom: "40px", left: "50%", transform: "translateX(-50%)", zIndex: 10 }}
>
<div className="elementor-widget-container">
<nav className="breadcrumbs" style={{ background: "rgba(255, 255, 255, 0.1)", backdropFilter: "blur(10px)", padding: "10px 24px", borderRadius: "30px", border: "1px solid rgba(255, 255, 255, 0.15)" }}>
<Link href="/" style={{ color: "#fff", fontWeight: 600 }}>Home</Link>
<span className="delimiter" style={{ color: "rgba(255, 255, 255, 0.6)", margin: "0 8px" }}>/</span>
<span className="current" style={{ color: "#C01227", fontWeight: 700 }}>Contacts</span>
<div className="contacts-hero-glass-card">
<div className="contacts-hero-kicker">
<span className="contacts-hero-kicker-line"></span>
<span className="contacts-hero-kicker-text">24/7 support & sales</span>
<span className="contacts-hero-kicker-line"></span>
</div>
<h1 className="contacts-hero-title">
Get In <span className="contacts-hero-title-highlight">Touch</span>
</h1>
<p className="contacts-hero-desc">
Have questions about our smart delivery network, pricing plans, or partner ecosystem? Let&apos;s build the future of logistics together.
</p>
<div>
<nav className="contacts-hero-breadcrumbs">
<Link href="/" className="contacts-breadcrumb-link">Home</Link>
<span className="contacts-breadcrumb-del">/</span>
<span className="contacts-breadcrumb-cur">Contacts</span>
</nav>
</div>
</div>
@@ -42,3 +239,4 @@ export default function ContactsHero() {
);
}