import { useState, useEffect } from 'react'; const Comp = ({ onLinkClick, onFormSubmit, slide1Card1Title = 'Card Title 1', slide1Card1TitleFontF = 'var(--font-family-heading)', slide1Card1TitleFontW = 'var(--font-weight-heading)', slide1Card1TitleFontS = '', slide1Card1Subtitle = 'Card Subtitle 1', slide1Card1SubtitleFontF = 'var(--font-family)', slide1Card1SubtitleFontW = 'var(--font-weight)', slide1Card1SubtitleFontS = '', slide1Card1GradientColor1 = '#01191d', slide1Card1GradientColor2 = '#4d6776', slide1Card2Title = 'Card Title 2', slide1Card2TitleFontF = 'var(--font-family-heading)', slide1Card2TitleFontW = 'var(--font-weight-heading)', slide1Card2TitleFontS = '', slide1Card2Subtitle = 'Card Subtitle 2', slide1Card2SubtitleFontF = 'var(--font-family)', slide1Card2SubtitleFontW = 'var(--font-weight)', slide1Card2SubtitleFontS = '', slide1Card2GradientColor1 = '#01191d', slide1Card2GradientColor2 = '#4d6776', slide1Image1 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678935_alessio-soggetti-PdGBci-4jR8-unsplash.webp?alt=media&token=1646b241-46c6-46bc-8799-1dc12d86f80c', slide1Image2 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678951_johny-goerend-yWG7dAAKNek-unsplash.webp?alt=media&token=28aab39a-9c0b-4367-8e18-596962328ec6', slide1Image3 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678960_neom-r4ZSR0cKJw8-unsplash.webp?alt=media&token=1d5b55b5-e341-4bc5-9dd5-4f4021acdf75', slide1Card3Title = 'Card Title 3', slide1Card3TitleFontF = 'var(--font-family-heading)', slide1Card3TitleFontW = 'var(--font-weight-heading)', slide1Card3TitleFontS = '', slide1Card3Subtitle = 'Card Subtitle 3', slide1Card3SubtitleFontF = 'var(--font-family)', slide1Card3SubtitleFontW = 'var(--font-weight)', slide1Card3SubtitleFontS = '', slide1Card3GradientColor1 = '#01191d', slide1Card3GradientColor2 = '#4d6776', slide1Video = '', slide2Card1Title = 'Card Title 1', slide2Card1TitleFontF = 'var(--font-family-heading)', slide2Card1TitleFontW = 'var(--font-weight-heading)', slide2Card1TitleFontS = '', slide2Card1Subtitle = 'Card Subtitle 1', slide2Card1SubtitleFontF = 'var(--font-family)', slide2Card1SubtitleFontW = 'var(--font-weight)', slide2Card1SubtitleFontS = '', slide2Card1GradientColor1 = '#01191d', slide2Card1GradientColor2 = '#4d6776', slide2Card2Title = 'Card Title 2', slide2Card2TitleFontF = 'var(--font-family-heading)', slide2Card2TitleFontW = 'var(--font-weight-heading)', slide2Card2TitleFontS = '', slide2Card2Subtitle = 'Card Subtitle 2', slide2Card2SubtitleFontF = 'var(--font-family)', slide2Card2SubtitleFontW = 'var(--font-weight)', slide2Card2SubtitleFontS = '', slide2Card2GradientColor1 = '#01191d', slide2Card2GradientColor2 = '#4d6776', slide2Image1 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678944_dave-hoefler-23mWSDzAIBc-unsplash.webp?alt=media&token=654f4795-03f9-4cab-ac83-823532411186', slide2Image2 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678953_koushik-chowdavarapu-JT8IWAaxpQk-unsplash.webp?alt=media&token=0cf3367b-fc05-4f63-a8ad-9969b6b83959', slide2Image3 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678946_jeff-king-bJHWJeiHfHc-unsplash.webp?alt=media&token=49f0d4a1-f8f8-40f5-98ab-24163cc9be3a', slide2Card3Title = 'Card Title 3', slide2Card3TitleFontF = 'var(--font-family-heading)', slide2Card3TitleFontW = 'var(--font-weight-heading)', slide2Card3TitleFontS = '', slide2Card3Subtitle = 'Card Subtitle 3', slide2Card3SubtitleFontF = 'var(--font-family)', slide2Card3SubtitleFontW = 'var(--font-weight)', slide2Card3SubtitleFontS = '', slide2Card3GradientColor1 = '#01191d', slide2Card3GradientColor2 = '#4d6776', slide2Video = '', slide3Card1Title = 'Card Title 1', slide3Card1TitleFontF = 'var(--font-family-heading)', slide3Card1TitleFontW = 'var(--font-weight-heading)', slide3Card1TitleFontS = '', slide3Card1Subtitle = 'Card Subtitle 1', slide3Card1SubtitleFontF = 'var(--font-family)', slide3Card1SubtitleFontW = 'var(--font-weight)', slide3Card1SubtitleFontS = '', slide3Card1GradientColor1 = '#01191d', slide3Card1GradientColor2 = '#4d6776', slide3Card2Title = 'Card Title 2', slide3Card2TitleFontF = 'var(--font-family-heading)', slide3Card2TitleFontW = 'var(--font-weight-heading)', slide3Card2TitleFontS = '', slide3Card2Subtitle = 'Card Subtitle 2', slide3Card2SubtitleFontF = 'var(--font-family)', slide3Card2SubtitleFontW = 'var(--font-weight)', slide3Card2SubtitleFontS = '', slide3Card2GradientColor1 = '#01191d', slide3Card2GradientColor2 = '#4d6776', slide3Image1 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678935_alessio-soggetti-PdGBci-4jR8-unsplash.webp?alt=media&token=1646b241-46c6-46bc-8799-1dc12d86f80c', slide3Image2 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678951_juli-kosolapova-pZ-XFIrJMtE-unsplash.webp?alt=media&token=53900450-0738-4174-be8a-247f84a63b90', slide3Image3 = 'https://firebasestorage.googleapis.com/v0/b/digisell-io.appspot.com/o/media%2Fplaceholders%2Fimages%2F1746806678936_ashim-d-silva-S2Q5mdOrrVc-unsplash.webp?alt=media&token=0e177f82-7dc6-4782-a51d-7d1d021c5e9a', slide3Card3Title = 'Card Title 3', slide3Card3TitleFontF = 'var(--font-family-heading)', slide3Card3TitleFontW = 'var(--font-weight-heading)', slide3Card3TitleFontS = '', slide3Card3Subtitle = 'Card Subtitle 3', slide3Card3SubtitleFontF = 'var(--font-family)', slide3Card3SubtitleFontW = 'var(--font-weight)', slide3Card3SubtitleFontS = '', slide3Card3GradientColor1 = '#01191d', slide3Card3GradientColor2 = '#4d6776', slide3Video = '', backgroundColor = '#f1f3f5', borderRadius = 8, imageBorderRadius = 8, buttonBackgroundColor = '#01191d', buttonTextColor = '#ffffff', buttonBorderRadius = 6, animationEnabled = true, animationDuration = 800, initialAnimationEnabled = true, initialAnimationDuration = 1200, initialAnimationDelay = 100 }) => { const [currentSlide, setCurrentSlide] = useState(0); const [isMobile, setIsMobile] = useState(window.innerWidth < 768); const [animatedElements, setAnimatedElements] = useState([]); const [initialAnimationComplete, setInitialAnimationComplete] = useState(false); const [initialAnimationStarted, setInitialAnimationStarted] = useState(false); useEffect(() => { const handleResize = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); // Initial animation on component mount useEffect(() => { if (initialAnimationEnabled && !initialAnimationStarted) { setInitialAnimationStarted(true); // Generate random directions for each card and image const directions = []; const possibleDirections = ['top', 'right', 'bottom', 'left', 'top-right', 'bottom-right', 'bottom-left', 'top-left']; // Create 7 random directions (4 for top row, 3 for bottom row) for (let i = 0; i < 7; i++) { const randomIndex = Math.floor(Math.random() * possibleDirections.length); directions.push(possibleDirections[randomIndex]); } setAnimatedElements(directions); // Reset animation after it completes const timer = setTimeout(() => { setAnimatedElements([]); setInitialAnimationComplete(true); }, initialAnimationDuration + 100); return () => clearTimeout(timer); } }, [initialAnimationEnabled, initialAnimationStarted, initialAnimationDuration]); // Animation when slide changes (only after initial animation is complete) useEffect(() => { if (animationEnabled && initialAnimationComplete) { // Generate random directions for each card and image const directions = []; const possibleDirections = ['top', 'right', 'bottom', 'left', 'top-right', 'bottom-right', 'bottom-left', 'top-left']; // Create 7 random directions (4 for top row, 3 for bottom row) for (let i = 0; i < 7; i++) { const randomIndex = Math.floor(Math.random() * possibleDirections.length); directions.push(possibleDirections[randomIndex]); } setAnimatedElements(directions); // Reset animation after it completes const timer = setTimeout(() => { setAnimatedElements([]); }, animationDuration + 100); return () => clearTimeout(timer); } }, [currentSlide, animationEnabled, animationDuration, initialAnimationComplete]); const slides = [ { card1: { title: slide1Card1Title, titleFontF: slide1Card1TitleFontF, titleFontW: slide1Card1TitleFontW, titleFontS: slide1Card1TitleFontS, subtitle: slide1Card1Subtitle, subtitleFontF: slide1Card1SubtitleFontF, subtitleFontW: slide1Card1SubtitleFontW, subtitleFontS: slide1Card1SubtitleFontS, gradientColor1: slide1Card1GradientColor1, gradientColor2: slide1Card1GradientColor2 }, card2: { title: slide1Card2Title, titleFontF: slide1Card2TitleFontF, titleFontW: slide1Card2TitleFontW, titleFontS: slide1Card2TitleFontS, subtitle: slide1Card2Subtitle, subtitleFontF: slide1Card2SubtitleFontF, subtitleFontW: slide1Card2SubtitleFontW, subtitleFontS: slide1Card2SubtitleFontS, gradientColor1: slide1Card2GradientColor1, gradientColor2: slide1Card2GradientColor2 }, card3: { title: slide1Card3Title, titleFontF: slide1Card3TitleFontF, titleFontW: slide1Card3TitleFontW, titleFontS: slide1Card3TitleFontS, subtitle: slide1Card3Subtitle, subtitleFontF: slide1Card3SubtitleFontF, subtitleFontW: slide1Card3SubtitleFontW, subtitleFontS: slide1Card3SubtitleFontS, gradientColor1: slide1Card3GradientColor1, gradientColor2: slide1Card3GradientColor2 }, image1: slide1Image1, image2: slide1Image2, image3: slide1Image3, video: slide1Video }, { card1: { title: slide2Card1Title, titleFontF: slide2Card1TitleFontF, titleFontW: slide2Card1TitleFontW, titleFontS: slide2Card1TitleFontS, subtitle: slide2Card1Subtitle, subtitleFontF: slide2Card1SubtitleFontF, subtitleFontW: slide2Card1SubtitleFontW, subtitleFontS: slide2Card1SubtitleFontS, gradientColor1: slide2Card1GradientColor1, gradientColor2: slide2Card1GradientColor2 }, card2: { title: slide2Card2Title, titleFontF: slide2Card2TitleFontF, titleFontW: slide2Card2TitleFontW, titleFontS: slide2Card2TitleFontS, subtitle: slide2Card2Subtitle, subtitleFontF: slide2Card2SubtitleFontF, subtitleFontW: slide2Card2SubtitleFontW, subtitleFontS: slide2Card2SubtitleFontS, gradientColor1: slide2Card2GradientColor1, gradientColor2: slide2Card2GradientColor2 }, card3: { title: slide2Card3Title, titleFontF: slide2Card3TitleFontF, titleFontW: slide2Card3TitleFontW, titleFontS: slide2Card3TitleFontS, subtitle: slide2Card3Subtitle, subtitleFontF: slide2Card3SubtitleFontF, subtitleFontW: slide2Card3SubtitleFontW, subtitleFontS: slide2Card3SubtitleFontS, gradientColor1: slide2Card3GradientColor1, gradientColor2: slide2Card3GradientColor2 }, image1: slide2Image1, image2: slide2Image2, image3: slide2Image3, video: slide2Video }, { card1: { title: slide3Card1Title, titleFontF: slide3Card1TitleFontF, titleFontW: slide3Card1TitleFontW, titleFontS: slide3Card1TitleFontS, subtitle: slide3Card1Subtitle, subtitleFontF: slide3Card1SubtitleFontF, subtitleFontW: slide3Card1SubtitleFontW, subtitleFontS: slide3Card1SubtitleFontS, gradientColor1: slide3Card1GradientColor1, gradientColor2: slide3Card1GradientColor2 }, card2: { title: slide3Card2Title, titleFontF: slide3Card2TitleFontF, titleFontW: slide3Card2TitleFontW, titleFontS: slide3Card2TitleFontS, subtitle: slide3Card2Subtitle, subtitleFontF: slide3Card2SubtitleFontF, subtitleFontW: slide3Card2SubtitleFontW, subtitleFontS: slide3Card2SubtitleFontS, gradientColor1: slide3Card2GradientColor1, gradientColor2: slide3Card2GradientColor2 }, card3: { title: slide3Card3Title, titleFontF: slide3Card3TitleFontF, titleFontW: slide3Card3TitleFontW, titleFontS: slide3Card3TitleFontS, subtitle: slide3Card3Subtitle, subtitleFontF: slide3Card3SubtitleFontF, subtitleFontW: slide3Card3SubtitleFontW, subtitleFontS: slide3Card3SubtitleFontS, gradientColor1: slide3Card3GradientColor1, gradientColor2: slide3Card3GradientColor2 }, image1: slide3Image1, image2: slide3Image2, image3: slide3Image3, video: slide3Video } ]; const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % slides.length); }; const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length); }; // Get animation style based on direction const getAnimationStyle = (index) => { if ((!animationEnabled && initialAnimationComplete) || (!initialAnimationEnabled && !initialAnimationComplete) || !animatedElements[index]) return {}; const direction = animatedElements[index]; let translateX = '0'; let translateY = '0'; const distance = '80px'; // Increased distance for more dramatic effect // Set initial position based on direction if (direction.includes('left')) translateX = `-${distance}`; if (direction.includes('right')) translateX = distance; if (direction.includes('top')) translateY = `-${distance}`; if (direction.includes('bottom')) translateY = distance; const duration = initialAnimationComplete ? animationDuration : initialAnimationDuration; const delay = initialAnimationComplete ? 0 : index * initialAnimationDelay; return { animation: `fadeIn ${duration}ms ease-out ${delay}ms forwards`, opacity: 0, transform: `translate(${translateX}, ${translateY})`, transition: `transform ${duration}ms ease-out, opacity ${duration}ms ease-out` }; }; const renderCard = (card, index) => (

{card.title}

{card.subtitle}

); const renderImage = (imageSrc, index) => (

); const currentSlideData = slides[currentSlide]; return (

{/* Top Row */}

{renderCard(currentSlideData.card1, 0)} {renderImage(currentSlideData.image1, 1)} {renderCard(currentSlideData.card2, 2)} {renderImage(currentSlideData.image2, 3)}

{/* Bottom Row */}

{renderImage(currentSlideData.image3, 4)} {renderCard(currentSlideData.card3, 5)}

{currentSlideData.video ? (

{/* Navigation Buttons */}

); };