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

113
src/components/sections/EVSection.tsx
View File

@@ -1,13 +1,64 @@
"use client";
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef } from "react";
import Link from "next/link";
import { ScrollReveal, SlideReveal } from "@/animations/Reveal";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
if (typeof window !== "undefined") {
gsap.registerPlugin(ScrollTrigger);
}
export default function EVSection() {
const [hasMounted, setHasMounted] = useState(false);
const headingContainerRef = useRef<HTMLDivElement>(null);
const bannerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
setHasMounted(true);
// 1. Heading Scroll-Triggered Animation (Up & Down, Replay)
const headingEl = headingContainerRef.current;
if (headingEl) {
const trigger = ScrollTrigger.create({
trigger: headingEl,
start: "top 88%",
onEnter: () => {
headingEl.classList.add("animated");
},
onEnterBack: () => {
headingEl.classList.add("animated");
},
onLeave: () => {
headingEl.classList.remove("animated");
},
onLeaveBack: () => {
headingEl.classList.remove("animated");
},
});
return () => trigger?.kill();
}
}, []);
useEffect(() => {
// 2. Banner Native Background Parallax (GSAP ScrollTrigger)
const banner = bannerRef.current;
if (!banner) return;
const parallaxTrigger = ScrollTrigger.create({
trigger: banner,
start: "top bottom",
end: "bottom top",
scrub: true,
onUpdate: (self) => {
// Subtle background offset to create beautiful native parallax depth
const yOffset = self.progress * 120;
gsap.set(banner, {
backgroundPosition: `center ${yOffset}px`,
});
},
});
return () => parallaxTrigger?.kill();
}, []);
const renderAnimatedText = () => {
@@ -16,6 +67,8 @@ export default function EVSection() {
{ text: "Not Adapted.", highlight: false }
];
let letterCount = 0;
return lines.map((line, lineIdx) => {
const words = line.text.split(/\s+/);
return (
@@ -25,13 +78,15 @@ export default function EVSection() {
return (
<span key={wordIdx} className="word" style={{ display: "inline-block", marginRight: "0.2em", whiteSpace: "nowrap" }}>
{letters.map((letter, letterIdx) => {
const delay = (lineIdx * 0.2) + (wordIdx * 0.1) + (letterIdx * 0.03);
const delay = `${letterCount / 50}s`;
letterCount++;
return (
<span
key={letterIdx}
className={`letter ${hasMounted ? "animated" : ""}`}
className="letter"
style={{
["--delay" as any]: `${delay}s`,
animationDelay: delay,
["--delay" as any]: delay,
}}
>
{letter}
@@ -54,38 +109,40 @@ export default function EVSection() {
.logico-title .word {
display: inline-block;
white-space: nowrap;
margin-right: 0.1em;
margin-right: 0.15em;
}
.letter {
display: inline-block;
opacity: 0;
transform: translateY(0.5em);
}
.letter.animated {
animation: fadeInUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
animation-delay: var(--delay);
/* Native, scroll-triggered heading reveal matching WordPress/Elementor */
.logico_heading_animation .word .letter {
opacity: 0 !important;
transform: translateY(120%) !important;
animation: none !important;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
.logico_heading_animation.animated .word .letter {
opacity: 0 !important;
transform: translateY(120%) !important;
animation: fadeIn 0.35s forwards, logico_heading_animation 0.7s cubic-bezier(.26, -.14, 0, 1.01) forwards !important;
}
`}} />
<div className="elementor-element elementor-element-bbc6760 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="bbc6760" data-element_type="container" data-e-type="container">
{/* Parallax placeholder background */}
{/* Background Banner with Native GSAP Background Scroll Parallax */}
<div
ref={bannerRef}
className="elementor-element elementor-element-7da6646 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child"
data-id="7da6646"
data-element_type="container"
data-e-type="container"
data-settings="{&quot;background_background&quot;:&quot;classic&quot;}"
style={{
backgroundPosition: "center center",
backgroundPosition: "center 0px",
backgroundImage: "url(/images/home4-banner-4.png)",
backgroundSize: "cover"
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}}
></div>
@@ -116,15 +173,17 @@ export default function EVSection() {
<div className="e-con-inner">
<div className="elementor-element elementor-element-90cc867 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="90cc867" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div className="elementor-widget-container">
<div className="logico-title">/ EV-Native Design /</div>
<ScrollReveal delay={0.05} duration={0.7} yOffset={20}>
<div className="elementor-element elementor-element-24c0280 elementor-widget__width-inherit elementor-widget elementor-widget-logico_heading" data-id="24c0280" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div className="elementor-widget-container">
<div className="logico-title">/ EV-Native Design /</div>
</div>
</div>
</div>
</ScrollReveal>
<div className="elementor-element elementor-element-2ed47f3 e-con-full e-grid cut-corner-no sticky-container-off e-con e-child" data-id="2ed47f3" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-36efec7 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="36efec7" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading logico_heading_animation" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div ref={headingContainerRef} className="elementor-element elementor-element-778840d elementor-widget elementor-widget-logico_heading logico_heading_animation" data-id="778840d" data-element_type="widget" data-e-type="widget" data-widget_type="logico_heading.default">
<div className="elementor-widget-container">
<h3 className="logico-title" data-animate="true">
{renderAnimatedText()}
@@ -133,11 +192,12 @@ export default function EVSection() {
</div>
<div className="elementor-element elementor-element-bbfb67f elementor-widget elementor-widget-image" data-id="bbfb67f" data-element_type="widget" data-e-type="widget" data-widget_type="image.default">
<div className="elementor-widget-container">
<img decoding="async" width="626" height="692" src="/images/home4-pic-1.png" className="attachment-full size-full wp-image-6789" alt="EV Truck" />
<img decoding="async" width="626" height="692" src="/images/home4-pic-1.png" className="attachment-full size-full wp-image-6789" alt="EV Truck" style={{ objectFit: "cover", width: "100%", height: "auto" }} />
</div>
</div>
</div>
<SlideReveal direction="right" delay={0.15} duration={0.9}>
<div className="elementor-element elementor-element-b2c956f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child" data-id="b2c956f" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-1a450c2 elementor-absolute elementor-widget elementor-widget-image" data-id="1a450c2" data-element_type="widget" data-e-type="widget" data-settings="{&quot;_position&quot;:&quot;absolute&quot;}" data-widget_type="image.default">
<div className="elementor-widget-container">
@@ -261,6 +321,7 @@ export default function EVSection() {
</div>
</div>
</SlideReveal>
</div>
</div>