Featured Section - Copy this React, Tailwind Component to your project

Visually improve the following component 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> ); }