import Footer from "../../components/Footer"; import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { useTranslation } from "react-i18next"; // for multilinguality const DrivethruLandingPage = () => { const { t } = useTranslation(); // for multilinguality const features = [ { title: t("feature_easy_upload_title"), description: t("feature_easy_upload_desc"), icon: ( ), }, { title: t("feature_secure_title"), description: t("feature_secure_desc"), icon: ( ), }, { title: t("feature_sharing_title"), description: t("feature_sharing_desc"), icon: ( ), }, { title: t("feature_access_anywhere_title"), description: t("feature_access_anywhere_desc"), icon: ( ), }, ]; const howItWorks = [ { title: t("how_create_account_title"), description: t("how_create_account_desc"), icon: ( ), }, { title: t("how_upload_files_title"), description: t("how_upload_files_desc"), icon: ( ), }, { title: t("how_manage_files_title"), description: t("how_manage_files_desc"), icon: ( ), }, { title: t("how_access_anytime_title"), description: t("how_access_anytime_desc"), icon: ( ), }, ]; // UseEffect and handle....click function to handle set and handle the animation of features.. const [activeIndex, setActiveIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); useEffect(() => { if (!isPaused) { const interval = setInterval(() => { setActiveIndex((prevIndex) => (prevIndex + 1) % features.length); }, 3000); return () => clearInterval(interval); } }, [isPaused, features.length]); // Handle user interaction const handleFeatureClick = (index) => { setActiveIndex(index); setIsPaused(true); setTimeout(() => setIsPaused(false), 1000); }; const [activeIndex1, setActiveIndex1] = useState(0); const [isPaused1, setIsPaused1] = useState(false); useEffect(() => { if (!isPaused1) { const interval = setInterval(() => { setActiveIndex1((prevIndex) => (prevIndex + 1) % howItWorks.length); }, 3000); return () => clearInterval(interval); } }, [isPaused1, howItWorks.length]); const handleFeatureClick1 = (index) => { setActiveIndex1(index); setIsPaused1(true); setTimeout(() => setIsPaused1(false), 1000); }; return (

{/* Hero Section */}

{/* Left Side - Text Content */}

{t("skycrate")}

{t("hero_subtitle")}

{t("hero_desc")}

{/* Buttons */}

{t("get_started")} {t("login")}

{/* Right Side - Image */}

{/* Features Section */}

{t("key_features")}

{/* Left Side - Image */}

{/* Right Side - Feature List */}

{features.map((feature, index) => (

handleFeatureClick(index)} >

{feature.icon}

{feature.title}

{index === activeIndex && (

{feature.description}

)}

))}

{/* How It Works Section */}

{t("how_it_works")}

{/* Left Side - Feature List */}

{howItWorks.map((howItWork, index) => (

handleFeatureClick1(index)} >

{howItWork.icon}

{howItWork.title}

{index === activeIndex1 && (

{howItWork.description}

)}

))}

{/* Right Side - Image */}

); }; export default DrivethruLandingPage;