import React, { useState, useEffect, Suspense } from 'react'; import { ArrowLeft, ArrowRight } from "@phosphor-icons/react"; import { Button } from '@/components/ui/button'; import { Skeleton } from '@/components/ui/skeleton'; const useCases = [ { title: "Streamlined Workflow", description: "Our platform simplifies your daily tasks, allowing you to focus on what matters most. Increase productivity and reduce stress with our intuitive interface.", image: "/api/placeholder/600/400" }, { title: "Data-Driven Insights", description: "Harness the power of your data with our advanced analytics tools. Make informed decisions and stay ahead of the competition.", image: "/api/placeholder/600/400" }, { title: "Seamless Collaboration", description: "Connect with your team like never before. Our real-time collaboration features ensure everyone stays on the same page, no matter where they are.", image: "/api/placeholder/600/400" } ]; const UseCaseSlider = () => { const [currentIndex, setCurrentIndex] = useState(0); useEffect(() => { const timer = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % useCases.length); }, 5000); return () => clearInterval(timer); }, []); const handlePrev = () => { setCurrentIndex((prevIndex) => (prevIndex - 1 + useCases.length) % useCases.length); }; const handleNext = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % useCases.length); }; return (

{useCases[currentIndex].title}

{useCases[currentIndex].description}

{useCases.map((_, index) => (

))}

); }; const LandingPageSection = () => { return (

Platform Use Cases

); }; export default LandingPageSection;

🎢 Use Case Slider