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

update ev section

Browse Source
This commit is contained in:
Aravind R
2026-06-12 17:07:38 +05:30
parent ba34c80761
commit 2bc01b5952
3 changed files with 168 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
next.config.ts
View File

@@ -1,6 +1,10 @@
import type { NextConfig } from "next";
import path from "path";
const nextConfig: NextConfig = {
turbopack: {
root: path.resolve(__dirname),
},
output: "export",
// Required by the How It Works 3D experience. React StrictMode double-invokes
// mount/effects in dev, which tears down and re-creates the WebGL context of

474
src/components/sections/EVLogisticSection.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect, useRef } from "react";
import React, { useEffect, useRef } from "react";
import Image from "next/image";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
@@ -9,43 +9,61 @@ if (typeof window !== "undefined") {
gsap.registerPlugin(ScrollTrigger);
}
const ACCORDION_DATA = [
const CARDS_DATA = [
{
index: 1,
num: "01",
title: "Battery-First Planning",
desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought."
desc: "Routes are optimized around battery levels and charging windows, not retrofitted as an afterthought.",
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="2" y="7" width="16" height="10" rx="2" ry="2" />
<line x1="22" y1="11" x2="22" y2="13" />
<line x1="6" y1="11" x2="10" y2="11" />
<line x1="6" y1="13" x2="12" y2="13" />
</svg>
)
},
{
index: 2,
num: "02",
title: "Energy-Aware Routing",
desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency."
desc: "Our algorithms factor in terrain, traffic, and payload weight to maximize range efficiency.",
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
</svg>
)
},
{
index: 3,
num: "03",
title: "Smart Charging Integration",
desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers."
desc: "Seamless coordination with charging infrastructure to eliminate range anxiety for drivers.",
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 2v10" />
<path d="M18 8V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v2a4 4 0 0 0 4 4h4a4 4 0 0 0 4-4Z" />
<path d="M10 22v-6" />
<path d="M14 22v-6" />
</svg>
)
},
{
index: 4,
num: "04",
title: "Carbon Footprint Tracking",
desc: "Real-time emissions monitoring and sustainability reports for every delivery."
desc: "Real-time emissions monitoring and sustainability reports for every delivery.",
icon: (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 3.5 2 5.5a7 7 0 0 1-7 7h-3" />
<path d="M12 22V12" />
</svg>
)
}
];
export default function EVLogisticSection() {
const [openIndex, setOpenIndex] = useState<number | null>(4); // Default to item 4 open to match user's screenshot layout
const containerRef = useRef<HTMLDivElement>(null);
const imageWrapperRef = useRef<HTMLDivElement>(null);
const imageRef = useRef<HTMLImageElement>(null);
const toggleAccordion = (index: number) => {
setOpenIndex((prev) => (prev === index ? null : index));
};
useEffect(() => {
const container = containerRef.current;
const img = imageRef.current;
@@ -85,7 +103,7 @@ export default function EVLogisticSection() {
stagger: 0.02, // Rapid letter-by-letter wave reveal!
ease: "power4.out",
}, "-=0.45")
.to(container.querySelectorAll(".ev-logistic-accordion-item"), {
.to(container.querySelectorAll(".ev-feature-card"), {
opacity: 1,
y: 0,
duration: 0.6,
@@ -113,14 +131,14 @@ export default function EVLogisticSection() {
return (
<>
<style dangerouslySetInnerHTML={{ __html: `
/* Custom CSS Scoped to EV Logistics Section - New Premium Look */
/* Custom CSS Scoped to EV Logistics Section */
.ev-logistic-section {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 1320px !important;
margin: 10px auto 120px auto !important; /* Centered horizontally with auto margins */
padding: 80px 60px !important; /* Restored original balanced left/right paddings */
max-width: 1480px !important;
margin: 10px auto 120px auto !important;
padding: 80px 40px !important;
box-sizing: border-box !important;
background: #ffffff !important;
font-family: 'Manrope', sans-serif !important;
@@ -132,7 +150,7 @@ export default function EVLogisticSection() {
max-width: 100% !important;
align-self: stretch !important;
border-bottom: 2px solid rgba(17, 17, 17, 0.09) !important;
padding-bottom: 16px !important;
padding-bottom: 24px !important;
margin-bottom: 48px !important;
display: block !important;
text-align: left !important;
@@ -144,13 +162,13 @@ export default function EVLogisticSection() {
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
gap: 40px !important;
gap: 3% !important;
}
/* Balanced Left Column - Image column takes up 58% */
/* Left Column - Image column takes up 45% */
.ev-logistic-image-col {
flex: 1 1 58% !important;
max-width: 58% !important;
flex: 0 0 45% !important;
max-width: 45% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
@@ -182,23 +200,23 @@ export default function EVLogisticSection() {
justify-content: flex-start !important;
overflow: visible !important;
position: relative !important;
transform: scale(1.15) !important; /* Scale up image to make it larger and more dominant */
transform: scale(1.15) !important;
transform-origin: left center !important;
margin-left: -80px !important; /* Offset image to the left to anchor it to the container edge */
margin-left: -80px !important;
}
.ev-logistic-image-wrapper img {
width: 100% !important;
height: auto !important;
object-fit: contain !important;
filter: none !important; /* Blends solid white JPEG edges seamlessly into pure white background */
filter: none !important;
will-change: transform !important;
}
/* Balanced right column - takes up 42% for crisp textual reading */
/* Right column - takes up 52% for grid cards */
.ev-logistic-content-col {
flex: 1 1 42% !important;
max-width: 42% !important;
flex: 0 0 52% !important;
max-width: 52% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
@@ -209,10 +227,10 @@ export default function EVLogisticSection() {
font-size: 14px !important;
font-weight: 400 !important;
line-height: 2.1429em !important;
letter-spacing: 0px !important; /* Expands to 3px on scroll */
letter-spacing: 0px !important;
text-transform: lowercase !important;
color: #111111 !important;
margin: 0 !important;
margin: 0 0 16px 0 !important;
opacity: 0;
transform: translateY(-12px);
will-change: transform, opacity, letter-spacing;
@@ -221,243 +239,132 @@ export default function EVLogisticSection() {
}
.ev-logistic-title-wrapper {
margin-bottom: 48px;
margin: 0 !important;
}
/* Expanded clean headings look from the screenshot */
.ev-logistic-title {
font-size: clamp(45px, 6.2vw, 96px);
font-weight: 500;
line-height: 0.95;
text-transform: uppercase;
color: #111111;
margin: 0 10px 0 0; /* Clean margin-right to shift title away from borders */
letter-spacing: -1.8px;
font-size: clamp(40px, 5.5vw, 80px) !important;
font-weight: 500 !important;
line-height: 0.95 !important;
text-transform: uppercase !important;
color: #111111 !important;
margin: 0 10px 0 0 !important;
letter-spacing: -1.8px !important;
}
/* CSS for robust letter-by-letter animation wrapping */
.ev-word-inline {
display: inline-block;
white-space: nowrap; /* Prevents awkward character line breaks */
display: inline-block !important;
white-space: nowrap !important;
}
.ev-char-wrapper {
display: inline-block;
overflow: hidden;
vertical-align: top;
display: inline-block !important;
overflow: hidden !important;
vertical-align: top !important;
}
.ev-char {
display: inline-block;
display: inline-block !important;
transform: translateY(110%);
opacity: 0;
will-change: transform, opacity;
}
.ev-char-space {
display: inline-block;
display: inline-block !important;
}
.ev-logistic-accordion {
display: flex;
flex-direction: column;
width: 100%;
/* Card Grid Layout */
.ev-feature-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
width: 100% !important;
}
/* Sleek horizontal grid borders */
.ev-logistic-accordion-item {
width: 100%;
border-top: 1px solid #e5e7eb;
/* Premium Theme White Card */
.ev-feature-card {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border: 1px solid rgba(17, 17, 17, 0.09) !important;
border-radius: 20px !important;
padding: 30px !important;
color: #555555 !important;
height: 100% !important;
box-sizing: border-box !important;
opacity: 0;
transform: translateY(20px);
will-change: transform, opacity;
transition: background-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
border-color 0.45s cubic-bezier(0.25, 1, 0.5, 1),
border-radius 0.45s cubic-bezier(0.25, 1, 0.5, 1),
box-shadow 0.45s cubic-bezier(0.25, 1, 0.5, 1);
transition: border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
box-shadow: 0 4px 24px rgba(17, 17, 17, 0.02) !important;
}
.ev-logistic-accordion-item:last-child {
border-bottom: 1px solid #e5e7eb;
.ev-feature-card:hover {
border-color: #c01227 !important;
box-shadow: 0 20px 40px rgba(192, 18, 39, 0.08), 0 4px 12px rgba(17, 17, 17, 0.03) !important;
transform: translateY(-8px) !important;
}
/* Soft highlight on row hover */
.ev-logistic-accordion-item:hover {
background: rgba(192, 18, 39, 0.015);
/* Red Icon Wrapper */
.ev-feature-icon-wrapper {
margin-bottom: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 54px !important;
height: 54px !important;
background: rgba(192, 18, 39, 0.06) !important;
border: 1px solid rgba(192, 18, 39, 0.18) !important;
border-radius: 50% !important;
color: #c01227 !important;
transition: all 0.3s ease !important;
}
/* ---- Active (expanded) item: subtle premium highlight ----
A soft ~5% red tint, a 16–20px rounded container, a 3px red
accent on the left (drawn as an inset shadow so the row never
shifts) and an extremely soft shadow for quiet depth. The grid
dividers directly above and below the active row are hidden so
the tinted block reads as one clean, rounded surface — refined
and integrated, never a floating "card". overflow:hidden clips
the progress bar to the rounded corners (it does not clip the
element's own outer shadow). */
.ev-logistic-accordion-item.active {
background: rgba(192, 18, 39, 0.045);
border-top-color: transparent;
border-radius: 16px;
overflow: hidden;
box-shadow:
inset 3px 0 0 0 #c01227,
0 4px 14px -12px rgba(17, 17, 17, 0.12);
}
.ev-logistic-accordion-item.active + .ev-logistic-accordion-item {
border-top-color: transparent;
}
.ev-logistic-accordion-item.active:last-child {
border-bottom-color: transparent;
}
/* Comfortable internal padding on the active row so the content
feels more structured and clears the left accent. */
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
padding-left: 28px;
padding-right: 28px;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
padding-left: 28px;
padding-right: 28px;
.ev-feature-card:hover .ev-feature-icon-wrapper {
background: rgba(192, 18, 39, 0.12) !important;
border-color: #c01227 !important;
transform: scale(1.1) !important;
box-shadow: 0 0 12px rgba(192, 18, 39, 0.15) !important;
}
/* Spacious row padding for luxurious design - INCREASED font size for headers */
.ev-logistic-accordion-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 16px;
cursor: pointer;
background: transparent;
border: none;
text-align: left;
outline: none;
font-family: 'Manrope', sans-serif;
font-size: clamp(24px, 2.2vw, 30px); /* Increased to clamp up to 30px! */
font-weight: 700;
color: #111111;
transition: color 0.3s ease,
padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
.ev-feature-icon-wrapper svg {
width: 24px !important;
height: 24px !important;
stroke: currentColor !important;
}
.ev-logistic-accordion-header span:first-child {
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
display: inline-block;
/* Title & Description Inside Cards */
.ev-feature-card-title {
font-family: 'Manrope', sans-serif !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.3em !important;
color: #c01227 !important;
margin: 0 0 12px 0 !important;
text-transform: none !important;
}
/* Row text horizontal slide nudge */
.ev-logistic-accordion-header:hover {
color: #c01227;
}
.ev-logistic-accordion-header:hover span:first-child {
transform: translateX(10px);
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
color: #111111;
}
.ev-logistic-accordion-arrow-container {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.ev-logistic-accordion-arrow-container svg {
width: 20px;
height: 20px;
stroke-width: 2.5;
}
/* Inactive arrows: point down-right ↘ */
.ev-logistic-accordion-item:not(.active) .ev-logistic-accordion-arrow-container {
transform: rotate(90deg);
color: #111111;
}
/* Active arrows: point up-right ↗ in brand red */
.ev-logistic-accordion-item.active .ev-logistic-accordion-arrow-container {
transform: rotate(0deg);
color: #c01227;
}
/* Hover: rotate smooth to diagonal up-right */
.ev-logistic-accordion-header:hover .ev-logistic-accordion-arrow-container {
transform: rotate(0deg);
color: #c01227;
}
.ev-logistic-accordion-content {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-content {
max-height: 160px;
opacity: 1;
}
/* Balanced text spacing inside descriptions - INCREASED font size for descriptions */
.ev-logistic-accordion-content-inner {
padding: 0 16px 28px 16px;
font-size: clamp(18px, 1.5vw, 20px); /* Increased to clamp up to 20px! */
line-height: 1.6;
color: #555555;
font-weight: 500;
transition: padding 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Underline track & sweeping active red bar */
.ev-logistic-accordion-progress-track {
position: relative;
width: 100%;
height: 1.5px;
background: transparent;
margin-top: -1.5px;
overflow: hidden;
}
.ev-logistic-accordion-progress-bar {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #c01227;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
will-change: transform;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-progress-bar {
transform: scaleX(1);
}
/* The active row now carries its own highlight (tint + left accent),
so the bottom sweeping red bar is redundant and clashes with the
rounded corners — hide it while the row is expanded. */
.ev-logistic-accordion-item.active .ev-logistic-accordion-progress-track {
display: none;
.ev-feature-card-desc {
font-family: 'Manrope', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
color: #555555 !important;
margin: 0 !important;
}
/* Responsiveness constraints */
@media (max-width: 1024px) {
.ev-logistic-section {
padding: 60px 24px;
margin-bottom: 60px;
padding: 60px 24px !important;
margin-bottom: 60px !important;
}
/* Base rules above use !important (flex-direction:row, the 58/42%
column widths), so these overrides MUST also use !important or the
grid never stacks and the image/text stay squished side-by-side. */
.ev-logistic-body-grid {
flex-direction: column !important;
gap: 50px !important;
@@ -467,13 +374,13 @@ export default function EVLogisticSection() {
flex: 1 1 100% !important;
max-width: 100% !important;
min-height: auto !important;
justify-content: center !important; /* Center layout on mobile */
justify-content: center !important;
}
.ev-logistic-image-wrapper {
max-width: 580px !important;
transform: none !important; /* Reset scale transform on mobile/tablet */
margin-left: 0 !important; /* Reset left margin offset on mobile/tablet */
transform: none !important;
margin-left: 0 !important;
justify-content: center !important;
}
@@ -483,41 +390,22 @@ export default function EVLogisticSection() {
}
.ev-logistic-title {
font-size: 38px;
font-size: clamp(32px, 5vw, 60px) !important;
}
}
@media (max-width: 768px) {
.ev-logistic-section {
padding: 40px 16px;
padding: 40px 16px !important;
}
.ev-logistic-title {
font-size: 32px;
font-size: 32px !important;
}
.ev-logistic-accordion-header {
font-size: 19px;
padding: 22px 8px;
}
.ev-logistic-accordion-content-inner {
padding: 0;
font-size: 15.5px;
}
/* Keep the active row's comfortable padding proportional on phones
(smaller bump than desktop so it never crowds the narrow column). */
.ev-logistic-accordion-item.active {
border-radius: 16px;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-header {
padding-left: 16px;
padding-right: 16px;
}
.ev-logistic-accordion-item.active .ev-logistic-accordion-content-inner {
padding-left: 16px;
padding-right: 16px;
.ev-feature-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
`}} />
@@ -526,9 +414,23 @@ export default function EVLogisticSection() {
ref={containerRef}
className="ev-logistic-section"
>
{/* Top Header Row with / features / kicker */}
{/* Top Header Row with / features / kicker and Full-Width Title */}
<div className="ev-logistic-header">
<div className="ev-logistic-kicker">/ Build Electric Vehicles /</div>
<div className="ev-logistic-title-wrapper">
<h3 className="ev-logistic-title">
{headingWords.map((word, wordIndex) => (
<span key={wordIndex} className="ev-word-inline">
{word.split("").map((letter, letterIndex) => (
<span key={letterIndex} className="ev-char-wrapper">
<span className="ev-char">{letter}</span>
</span>
))}
<span className="ev-char-space">&nbsp;</span>
</span>
))}
</h3>
</div>
</div>
<div className="ev-logistic-body-grid">
@@ -548,69 +450,19 @@ export default function EVLogisticSection() {
</div>
</div>
{/* Right Column: Refined Accordion list with letter-by-letter animation */}
{/* Right Column: 2x2 Grid of Feature Cards */}
<div className="ev-logistic-content-col">
{/* Character-by-character masked entrance wave reveal on scroll */}
<div className="ev-logistic-title-wrapper">
<h3 className="ev-logistic-title">
{headingWords.map((word, wordIndex) => (
<span key={wordIndex} className="ev-word-inline">
{word.split("").map((letter, letterIndex) => (
<span key={letterIndex} className="ev-char-wrapper">
<span className="ev-char">{letter}</span>
</span>
))}
<span className="ev-char-space">&nbsp;</span>
</span>
))}
</h3>
</div>
<div className="ev-logistic-accordion">
{ACCORDION_DATA.map((item) => (
<div className="ev-feature-grid">
{CARDS_DATA.map((item) => (
<div
key={item.index}
className={`ev-logistic-accordion-item ${openIndex === item.index ? "active" : ""}`}
className="ev-feature-card"
>
<button
className="ev-logistic-accordion-header"
onClick={() => toggleAccordion(item.index)}
aria-expanded={openIndex === item.index}
>
<span>{item.num}. {item.title}</span>
<span className="ev-logistic-accordion-arrow-container">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="7" y1="17" x2="17" y2="7"></line>
<polyline points="7 7 17 7 17 17"></polyline>
</svg>
</span>
</button>
<div className="ev-logistic-accordion-content">
<div className="ev-logistic-accordion-content-inner">
{/* Kinetic slide-up and fade subtitle reveal */}
<p style={{
transform: openIndex === item.index ? "translateY(0)" : "translateY(12px)",
opacity: openIndex === item.index ? 1 : 0,
transition: "transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease",
transitionDelay: "0.08s",
margin: 0
}}>
{item.desc}
</p>
</div>
</div>
{/* Underline track & sweep animated red bar */}
<div className="ev-logistic-accordion-progress-track">
<div className="ev-logistic-accordion-progress-bar"></div>
<div className="ev-feature-icon-wrapper">
{item.icon}
</div>
<h4 className="ev-feature-card-title">{item.title}</h4>
<p className="ev-feature-card-desc">{item.desc}</p>
</div>
))}
</div>

2
src/components/sections/WomenSection.tsx
View File

@@ -284,7 +284,7 @@ export default function WomenSection() {
</div>
<div className="elementor-element elementor-element-0d307dd elementor-widget elementor-widget-text-editor" data-id="0d307dd" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default">
<div className="elementor-widget-container">
<p>Doormile empowers women in last-mile delivery.</p>
<p>Doormile empowers women to lead the future of logistics.</p>
</div>
</div>
</div>