Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests 1 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

47
src/components/sections/IndexHero.tsx
View File

@@ -1,10 +1,13 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useRef } from "react";
import Link from "next/link";
import gsap from "gsap";
import { ShimmerText } from "@/animations/Reveal";
export default function IndexHero() {
const [activeSlide, setActiveSlide] = useState(0);
const containerRef = useRef<HTMLDivElement>(null);
// Auto-slide every 6 seconds
useEffect(() => {
@@ -18,6 +21,36 @@ export default function IndexHero() {
setActiveSlide(index);
};
// GSAP slide transition effect
useEffect(() => {
if (!containerRef.current) return;
// Find the currently active slide inside the container
const activeItem = containerRef.current.querySelector(".owl-item.active");
if (!activeItem) return;
const heading = activeItem.querySelector(".heading-content");
const text = activeItem.querySelector(".text-content");
if (heading && text) {
// Clear previous animations if any
gsap.killTweensOf([heading, text]);
// Premium elegant reveal with cubic elastic feel
gsap.fromTo(
heading,
{ y: 55, opacity: 0, scale: 0.95 },
{ y: 0, opacity: 1, scale: 1, duration: 1.1, ease: "power4.out" }
);
gsap.fromTo(
text,
{ y: 30, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.95, ease: "power3.out", delay: 0.25 }
);
}
}, [activeSlide]);
return (
<div className="elementor-element elementor-element-741f56c e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent" data-id="741f56c" data-element_type="container" data-e-type="container">
<div className="elementor-element elementor-element-6c7cbcb elementor-widget elementor-widget-logico_content_slider" data-id="6c7cbcb" data-element_type="widget" data-e-type="widget" data-widget_type="logico_content_slider.default">
@@ -25,7 +58,7 @@ export default function IndexHero() {
<div className="logico-content-slider-widget">
<div className="content-slider-wrapper">
<div className="content-slider-container">
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag">
<div className="content-slider owl-carousel owl-theme nav-view-vertical nav-h-position-right nav-v-position-bottom owl-loaded owl-drag" ref={containerRef}>
<div className="owl-stage-outer" style={{ position: "relative", overflow: "hidden", height: "800px" }}>
<div className="owl-stage" style={{ position: "relative", width: "100%", height: "100%" }}>
@@ -45,7 +78,10 @@ export default function IndexHero() {
<div className="slide-content">
<div className="slide-content-inner">
<h1 className="content-slider-item-heading logico-content-wrapper-1">
<span className="heading-content">ONE CONNECTED SYSTEM.<br />ONE PROMISE KEPT.</span>
<span className="heading-content block">
ONE CONNECTED SYSTEM.<br />
<ShimmerText className="font-extrabold">ONE PROMISE KEPT.</ShimmerText>
</span>
</h1>
<div className="content-slider-item-text logico-content-wrapper-2">
<div className="text-content">
@@ -75,7 +111,10 @@ export default function IndexHero() {
<div className="slide-content">
<div className="slide-content-inner">
<h1 className="content-slider-item-heading logico-content-wrapper-1">
<span className="heading-content">AI-POWERED<br />CONNECTED LOGISTICS</span>
<span className="heading-content block">
<ShimmerText className="font-extrabold">AI-POWERED</ShimmerText><br />
CONNECTED LOGISTICS
</span>
</h1>
<div className="content-slider-item-text logico-content-wrapper-2">
<div className="text-content">