diff --git a/src/components/sections/hero/HeroExpand.tsx b/src/components/sections/hero/HeroExpand.tsx
index dedb1fc..a8206b6 100644
--- a/src/components/sections/hero/HeroExpand.tsx
+++ b/src/components/sections/hero/HeroExpand.tsx
@@ -1,146 +1,90 @@
-import { useEffect, useRef, useState } from "react";
-import { AnimatePresence, motion, useScroll, useTransform } from "motion/react";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import AutoFillText from "@/components/ui/AutoFillText";
-import { useButtonClick } from "@/hooks/useButtonClick";
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
-const StaggerText = ({ text }: { text: string }) => (
-
- {[...text].map((char, index) => (
-
- {char}
-
- ))}
-
-);
-
-type HeroExpandProps = {
+interface HeroExpandProps {
title: string;
+ description: string;
primaryButton: { text: string; href: string };
- secondaryButton: { text: string; href: string };
+ secondaryButton?: { text: string; href: string };
onComplete?: () => void;
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+}
-const HeroExpand = ({
- title,
- videoSrc,
- imageSrc,
- primaryButton,
+export default function HeroExpand({
+ title,
+ description,
+ primaryButton,
secondaryButton,
- onComplete,
-}: HeroExpandProps) => {
- const [showLoader, setShowLoader] = useState(true);
- const [expanded, setExpanded] = useState(false);
- const handlePrimaryClick = useButtonClick(primaryButton.href);
- const handleSecondaryClick = useButtonClick(secondaryButton.href);
+ onComplete
+}: HeroExpandProps) {
+ const [isExpanded, setIsExpanded] = useState(false);
+ const timerRef = useRef();
- const sectionRef = useRef(null);
- const { scrollYProgress } = useScroll({
- target: sectionRef,
- offset: ["start start", "end start"],
- });
- const videoY = useTransform(scrollYProgress, [0, 1], ["0px", "150px"]);
- const videoScale = useTransform(scrollYProgress, [0, 1], [1, 1.1]);
+ const handleComplete = useCallback(() => {
+ if (onComplete) onComplete();
+ }, [onComplete]);
useEffect(() => {
- const expandTimer = setTimeout(() => setExpanded(true), 600);
- const hideTimer = setTimeout(() => {
- setShowLoader(false);
- onComplete?.();
- }, 1500);
+ timerRef.current = setTimeout(() => {
+ setIsExpanded(true);
+ handleComplete();
+ }, 1000);
+
return () => {
- clearTimeout(expandTimer);
- clearTimeout(hideTimer);
+ if (timerRef.current) clearTimeout(timerRef.current);
};
- }, []);
+ }, [handleComplete]);
return (
- <>
+
- {showLoader && (
-
+
-
+
+
+ {description}
+
+
+
+
-
-
+ {primaryButton.text}
+
+ {secondaryButton && (
+
+ {secondaryButton.text}
+
+
+ )}
- )}
-
-
-
-
+
+
);
-};
-
-export default HeroExpand;
+}