leumas-private-shared/src/LMS-WildCard-Helpers/LMSWildcards.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import { useState } from 'react';

function FeatureCard({ title, description, image }) {
  return (
    <div 
      className="flex flex-col justify-center items-center h-full text-white p-8 bg-opacity-50 relative"
      style={{ backgroundImage: `url(${image})`, backgroundSize: 'cover', backgroundPosition: 'center' }}
    >
      <div className="absolute inset-0 bg-black opacity-50"></div>
      <h2 className="text-4xl mb-4 z-10">{title}</h2>
      <p className="text-xl z-10">{description}</p>
    </div>
  );
}

function ImageSlideshow({ slides, headerText }) {
  const [currentSlide, setCurrentSlide] = useState(0);

  return (
    <div className="h-screen bg-gray-800 overflow-hidden">
      <header className="absolute top-8 left-1/2 transform -translate-x-1/2 z-10">
        <h1 className="text-5xl text-white">{headerText}</h1>
      </header>
      <main className="h-full w-full relative">
        {slides.map((slide, index) => (
          <div 
            key={index} 
            className={`absolute h-full w-full transition-transform duration-1000 ease-in-out transform ${index !== currentSlide && 'translate-x-full'}`}
          >
            <FeatureCard {...slide} />
          </div>
        ))}
      </main>
      <footer className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 flex space-x-4">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`w-4 h-4 ${index === currentSlide ? 'bg-blue-500' : 'bg-white' } rounded-full`}
          />
        ))}
      </footer>
    </div>
  );
}

export default ImageSlideshow;