everydayserieswebsite/components/Hero/hero2.tsx

"use client";
import React from 'react';
import { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const slides = [
  {
    title: "Turn Your Expertise into Intelligent AI Agents",
    description: "Effortlessly convert your existing services into AI-powered agents. Empower your business with innovative, interactive tools that open new revenue streams.",
    buttonText: "Get Started Today",
    buttonLink: "#",
    image: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60" // Semi-transparent overlay for better text readability
  },
  {
    title: "Design Without Coding",
    description: "Leverage our drag-and-drop builder to create custom AI solutions—no programming skills required. Your ideas, our platform, endless possibilities.",
    buttonText: "Explore the Builder",
    buttonLink: "#",
    image: "https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  },
  {
    title: "Unleash Your Creative Potentialr",
    description: "From forms and video editing to AI writing and newsletters, our fully integrated creative suite brings your vision to life with the power of AI.",
    buttonText: "Discover Our Tools",
    buttonLink: "#",
    image: "https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=1796&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  },
  {
    title: "Monetize Your Skills & Services",
    description: "Build your own community or tap into our marketplace to sell AI-powered subscriptions to SMBs. Turn your expertise into a recurring revenue engine.",
    buttonText: "Learn How to Monetize",
    buttonLink: "#",
    image: "https://plus.unsplash.com/premium_photo-1661338826350-49e4fd1b004e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  },
  {
    title: "Step Into the Future of Business",
    description: "Embrace the next era of innovation. Transform, scale, and thrive with our AI-powered platform that adapts to your business needs.",
    buttonText: "Start Your Free Trial",
    buttonLink: "#",
    image: "https://plus.unsplash.com/premium_photo-1661425631372-6f9530fc211f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    overlayClass: "bg-black/60"
  }
];

const HeroCarousel = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 10000);

    return () => clearInterval(timer);
  }, []);

  const nextSlide = () => {
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };

  const prevSlide = () => {
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  return (
    <div className='h-screen flex flex-col items-end justify-end'>
    <div className="relative h-[700px] w-full overflow-hidden">
      {/* Slides */}
      <div className="relative h-full w-full">
        {slides.map((slide, index) => (
          <div
            key={index}
            className={`absolute inset-0 h-full w-full transition-all duration-700 ${
              currentSlide === index ? 'opacity-100' : 'opacity-0'
            }`}
          >
            {/* Background Image */}
            <div 
              className="absolute inset-0 bg-cover bg-center bg-no-repeat transition-transform duration-700"
              style={{ 
                backgroundImage: `url(${slide.image})`,
                transform: currentSlide === index ? 'scale(1.05)' : 'scale(1)'
              }}
            />
            {/* Overlay */}
            <div className={`absolute inset-0 ${slide.overlayClass}`} />
            
            {/* Content */}
            <div className="relative flex h-full flex-col items-start justify-end py-40 px-20 text-left">
              <div className="max-w-3xl">
                <h1 className="mb-6 text-6xl  text-white drop-shadow-lg">
                  {slide.title}
                </h1>
                <p className="mb-8 text-xl text-white drop-shadow-lg">
                  {slide.description}
                </p>
                <a
                  href={slide.buttonLink}
                  className="rounded-lg mt-10 bg-white px-8 py-3 text-lg font-semibold text-gray-900 transition-colors hover:bg-gray-100"
                >
                  {slide.buttonText}
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Navigation Buttons */}
      <button
        onClick={prevSlide}
        className="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
      >
        <ChevronLeft size={28} />
      </button>
      <button
        onClick={nextSlide}
        className="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-white/20 p-3 text-white backdrop-blur-sm transition-all hover:bg-white/30"
      >
        <ChevronRight size={28} />
      </button>

      {/* Slide Indicators */}
      <div className="absolute bottom-8 left-1/2 flex -translate-x-1/2 space-x-3">
        {slides.map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentSlide(index)}
            className={`h-2 rounded-full transition-all ${
              currentSlide === index ? 'w-8 bg-white' : 'w-2 bg-white/50'
            }`}
          />
        ))}
      </div>
    </div>
    </div>
  );
};

export default HeroCarousel;