update about page
This commit is contained in:
@@ -115,89 +115,109 @@ export default function EVLogisticSection() {
|
||||
<style dangerouslySetInnerHTML={{ __html: `
|
||||
/* Custom CSS Scoped to EV Logistics Section - New Premium Look */
|
||||
.ev-logistic-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 1320px;
|
||||
margin: 10px auto 120px auto; /* Centered horizontally with auto margins */
|
||||
padding: 80px 60px; /* Restored original balanced left/right paddings */
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
gap: 60px;
|
||||
position: relative;
|
||||
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 */
|
||||
box-sizing: border-box !important;
|
||||
background: #ffffff !important;
|
||||
font-family: 'Manrope', sans-serif !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* ENLARGED Left Column - Image columns takes up 60% for high visual weight */
|
||||
.ev-logistic-header {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
align-self: stretch !important;
|
||||
border-bottom: 2px solid rgba(17, 17, 17, 0.09) !important;
|
||||
padding-bottom: 16px !important;
|
||||
margin-bottom: 48px !important;
|
||||
display: block !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.ev-logistic-body-grid {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
width: 100% !important;
|
||||
gap: 40px !important;
|
||||
}
|
||||
|
||||
/* Balanced Left Column - Image column takes up 58% */
|
||||
.ev-logistic-image-col {
|
||||
flex: 1 1 60%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* Align left edge */
|
||||
position: relative;
|
||||
min-height: 580px;
|
||||
margin-left: -150px; /* Shifted left towards boundary */
|
||||
flex: 1 1 58% !important;
|
||||
max-width: 58% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
position: relative !important;
|
||||
min-height: auto !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Branded glow spotlight halo behind the vehicle */
|
||||
.ev-logistic-image-glow {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(circle, rgba(192, 18, 39, 0.05) 0%, rgba(192, 18, 39, 0.01) 55%, transparent 75%);
|
||||
filter: blur(54px);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
position: absolute !important;
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
width: 80% !important;
|
||||
height: 70% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
background: radial-gradient(circle, rgba(192, 18, 39, 0.05) 0%, rgba(192, 18, 39, 0.01) 55%, transparent 75%) !important;
|
||||
filter: blur(54px) !important;
|
||||
z-index: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Increased max-width wrapper so image scales much larger */
|
||||
/* Image wrapper scaling naturally inside its column container */
|
||||
.ev-logistic-image-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1000px; /* Enlarged vehicle size */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
transform: scale(1.25);
|
||||
transform-origin: left center;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
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-origin: left center !important;
|
||||
margin-left: -80px !important; /* Offset image to the left to anchor it to the container edge */
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: none; /* Blends solid white JPEG edges seamlessly into pure white background */
|
||||
will-change: transform;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
object-fit: contain !important;
|
||||
filter: none !important; /* Blends solid white JPEG edges seamlessly into pure white background */
|
||||
will-change: transform !important;
|
||||
}
|
||||
|
||||
/* Balanced right column - takes up 40% for crisp textual reading */
|
||||
/* Balanced right column - takes up 42% for crisp textual reading */
|
||||
.ev-logistic-content-col {
|
||||
flex: 1 1 40%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1 1 42% !important;
|
||||
max-width: 42% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.ev-logistic-kicker {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0px; /* Expands to 3px on scroll */
|
||||
text-transform: lowercase;
|
||||
color: #888888;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 10px; /* Shifted exactly 10px to the right as requested */
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 2.1429em !important;
|
||||
letter-spacing: 0px !important; /* Expands to 3px on scroll */
|
||||
text-transform: lowercase !important;
|
||||
color: #111111 !important;
|
||||
margin: 0 !important;
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
will-change: transform, opacity, letter-spacing;
|
||||
text-align: left !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.ev-logistic-title-wrapper {
|
||||
@@ -384,23 +404,27 @@ export default function EVLogisticSection() {
|
||||
/* Responsiveness constraints */
|
||||
@media (max-width: 1024px) {
|
||||
.ev-logistic-section {
|
||||
flex-direction: column;
|
||||
padding: 60px 24px;
|
||||
gap: 50px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.ev-logistic-body-grid {
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
}
|
||||
|
||||
.ev-logistic-image-col {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
min-height: auto;
|
||||
margin-left: 0; /* Reset margins on mobile */
|
||||
justify-content: center; /* Center layout on mobile */
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper {
|
||||
max-width: 580px;
|
||||
transform: none; /* Reset scaling on mobile */
|
||||
max-width: 580px !important;
|
||||
transform: none !important; /* Reset scale transform on mobile/tablet */
|
||||
margin-left: 0 !important; /* Reset left margin offset on mobile/tablet */
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.ev-logistic-content-col {
|
||||
@@ -416,11 +440,6 @@ export default function EVLogisticSection() {
|
||||
@media (max-width: 768px) {
|
||||
.ev-logistic-section {
|
||||
padding: 40px 16px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.ev-logistic-image-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.ev-logistic-title {
|
||||
@@ -443,90 +462,94 @@ export default function EVLogisticSection() {
|
||||
ref={containerRef}
|
||||
className="ev-logistic-section"
|
||||
>
|
||||
{/* Left Column: Enlarged Floating Wrapper & Ambient glow */}
|
||||
<div className="ev-logistic-image-col">
|
||||
<div className="ev-logistic-image-glow"></div>
|
||||
|
||||
<div ref={imageWrapperRef} className="ev-logistic-image-wrapper">
|
||||
<Image
|
||||
ref={imageRef as any}
|
||||
src="/images/ev.jpeg"
|
||||
alt="EV Logistics"
|
||||
width={1050}
|
||||
height={854}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
{/* Top Header Row with / features / kicker */}
|
||||
<div className="ev-logistic-header">
|
||||
<div className="ev-logistic-kicker">/ features /</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Refined Accordion list with letter-by-letter animation */}
|
||||
<div className="ev-logistic-content-col">
|
||||
{/* Animated features kicker */}
|
||||
<div className="ev-logistic-kicker">/ features /</div>
|
||||
|
||||
{/* 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"> </span>
|
||||
</span>
|
||||
))}
|
||||
</h3>
|
||||
<div className="ev-logistic-body-grid">
|
||||
{/* Left Column: Enlarged Floating Wrapper & Ambient glow */}
|
||||
<div className="ev-logistic-image-col">
|
||||
<div className="ev-logistic-image-glow"></div>
|
||||
|
||||
<div ref={imageWrapperRef} className="ev-logistic-image-wrapper">
|
||||
<Image
|
||||
ref={imageRef}
|
||||
src="/images/ev.jpeg"
|
||||
alt="EV Logistics"
|
||||
width={1050}
|
||||
height={854}
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ev-logistic-accordion">
|
||||
{ACCORDION_DATA.map((item) => (
|
||||
<div
|
||||
key={item.index}
|
||||
className={`ev-logistic-accordion-item ${openIndex === item.index ? "active" : ""}`}
|
||||
>
|
||||
<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>
|
||||
{/* Right Column: Refined Accordion list with letter-by-letter animation */}
|
||||
<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"> </span>
|
||||
</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>
|
||||
))}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="ev-logistic-accordion">
|
||||
{ACCORDION_DATA.map((item) => (
|
||||
<div
|
||||
key={item.index}
|
||||
className={`ev-logistic-accordion-item ${openIndex === item.index ? "active" : ""}`}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Underline track & sweep animated red bar */}
|
||||
<div className="ev-logistic-accordion-progress-track">
|
||||
<div className="ev-logistic-accordion-progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user