import { Button } from '@/components/ui/button'; import WebLayout from '@/layouts/WebLayout'; import { Head, Link } from '@inertiajs/react'; import { motion } from 'framer-motion'; import { ArrowRight } from 'lucide-react'; import { useEffect, useState } from 'react'; export default function ServicePublicIndex({ services }: { services: any[] }) { const [bgImage, setBgImage] = useState(''); const fallbackImage = '/images/logo.png'; // Use your own fallback image URL useEffect(() => { let intervalId; if (Array.isArray(services) && services.length > 0) { const validImages = services.map((h) => h?.image?.trim()).filter((img) => img); // filter out empty or undefined images if (validImages.length > 1) { // Set an initial image setBgImage(validImages[Math.floor(Math.random() * validImages.length)]); intervalId = setInterval(() => { const randomImage = validImages[Math.floor(Math.random() * validImages.length)]; setBgImage(randomImage); }, 3000); // change every 3 seconds } else { // Only one image or none available setBgImage(validImages[0] || fallbackImage); } } else { setBgImage(fallbackImage); } return () => { if (intervalId) clearInterval(intervalId); }; }, [services]); return (

Our Services

With over five decades of experience, we provide comprehensive engineering and construction services to meet the diverse needs of our clients.

{services && services.map((service, index) => (

{service.title}

{service.description}

Learn More

))}

Need a Customized Solution?

Our team of experts is ready to work with you to develop tailored solutions for your specific project requirements.

); }