import Footer from "../../components/Footer"; import React from "react" import { useState, useEffect } from "react" const DrivethruLandingPage = () => { const features = [ { title: "Easy Upload & Access", description: "Drag & drop, instant access.", icon: ( ) }, { title: "Secure & Private", description: "End-to-end encryption.", icon: ( ) }, { title: "Seamless Sharing", description: "Share files with one click.", icon: ( ) }, { title: "Access Anywhere", description: "Works on all devices.", icon: ( ) } ]; const howItWorks = [ { title: "Create an account", description: "Sign up in seconds.", icon: ( ) }, { title: "Upload files", description: "Drag & drop or select from your device.", icon: ( ) }, { title: "Manage files", description: "Rename, move, or delete easily.", icon: ( ) }, { title: "Access anytime", description: "Open files from any device.", 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]); // 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]); const handleFeatureClick1 = (index) => { setActiveIndex1(index); setIsPaused1(true); setTimeout(() => setIsPaused1(false), 1000); }; return (

{/* Hero Section */}

{/* Left Side - Text Content */}

Drive-thru

Store, Access & Share Your Files — Anytime, Anywhere!

A simple, secure, and fast cloud storage solution for all your files. Upload, organize, and access with ease.

{/* Buttons */}

{/* Right Side - Image */}

{/* Features Section */}

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 */}

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;