Hero Component - Copy this React, Tailwind Component to your project

import React from "react"; import { Button } from "@nextui-org/react"; import imagen from "../assets/imagen3.jpg"; import { Link } from "react-router-dom"; import { motion, useAnimation } from "framer-motion"; import { useInView } from "react-intersection-observer"; export default function FeaturedSection() { // Animations const controls = useAnimation(); const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 }); React.useEffect(() => { if (inView) { controls.start({ opacity: 1, y: 0 }); } else { controls.start({ opacity: 0, y: 50 }); } }, [controls, inView]); return ( <section className="relative pt-6 pb-6 "> <div className="container mx-auto relative flex flex-col lg:flex-row items-center lg:items-start lg:justify-center"> {/* Imagen más alta y visible */} <div className="w-full lg:w-8/12 relative lg:mb-0 mb-8 hidden lg:block"> <img src={imagen} alt="Fire Protection Systems" className="w-full h-[500px] lg:h-[650px] object-cover rounded-lg shadow-lg" style={{ zIndex: 5, // Imagen al fondo para superposición del texto position: "relative", }} /> </div> {/* Contenedor con degradado centrado en la parte derecha */} <motion.div ref={ref} animate={controls} initial={{ opacity: 0, y: 50 }} transition={{ duration: 0.8 }} className="absolute lg:w-4/12 w-full p-8 lg:p-12 bg-gradient-to-b from-red-200 to-red-400 rounded-lg shadow-lg lg:right-0 lg:top-1/4 lg:transform lg:-translate-x-1/4" style={{ zIndex: 10, // Para que el degradado esté encima de la imagen }} > <h4 className="text-3xl font-bold text-white mb-4"> Prosperity Fire Protection, LLC </h4> <p className="text-lg font-light text-white mb-4"> We specialize in the design, installation, and maintenance of cutting-edge Sprinkler Systems, ensuring rapid and effective response in the event of a fire. </p> <p className="text-lg font-light text-white mb-4"> Our experienced team is committed to delivering superior protection, tailored to your unique requirements. </p> <p className="text-lg font-semibold text-white mb-6"> Contractors License # SCR-G-2916031 </p> {/* Botones estilizados */} <div className="flex space-x-4"> <Link to="/about-us"> <Button auto className="bg-white text-red-700 font-bold py-2 px-4 rounded-full cursor-pointer hover:bg-gray-200 hover:scale-105 transition-transform" > Learn More About Us </Button> </Link> </div> </motion.div> </div> </section> ); }