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

<section className="relative py 24 overflow hidden bg gradient to br from red 600 via red 500 to red 400"> {/* Background Pattern */} <div className="absolute inset 0 opacity 10"> <div className="absolute inset 0" style={{ backgroundImage: 'radial gradient(circle at 25px 25px, white 2%, transparent 0%)', backgroundSize: '50px 50px' }} /> </div> <div className="container mx auto px 4 relative"> <div className="flex flex col lg:flex row items center justify between gap 12"> {/* Left Content */} <div className="lg:w 1/2 text white z 10"> <div className="inline flex items center px 4 py 2 bg red 700/30 rounded full text sm mb 8"> <span className="animate pulse mr 2">🩸</span> <span>Mỗi giọt máu là một món quà của sự sống</span> </div> <h1 className="text 4xl lg:text 6xl font bold mb 6 leading tight"> Giọt Máu Hi Vọng <span className="block text 2xl lg:text 3xl font normal mt 4 text red 100"> Kết nối yêu thương Lan tỏa sự sống </span> </h1> <p className="text lg mb 8 text red 50 leading relaxed max w xl"> Mỗi giọt máu hiến tặng là một cơ hội để cứu sống người khác. Hãy chung tay vì một cộng đồng khỏe mạnh và nhân ái. </p> <div className="flex flex wrap gap 4"> <Button size="lg" variant="secondary" className="group font semibold" > Tham Gia Ngay <ArrowRight className="ml 2 h 4 w 4 group hover:translate x 1 transition transform" /> </Button> <Button size="lg" variant="outline" className="bg transparent border white text white hover:bg white/10" > Tìm Hiểu Thêm </Button> </div> {/* Stats */} <div className="grid grid cols 3 gap 8 mt 12 pt 12 border t border red 400/30"> {stats.map((stat, index) => ( <div key={index}> <div className="text 3xl font bold">{stat.value}</div> <div className="text red 100 mt 1">{stat.label}</div> </div> ))} </div> </div> {/* Right Image */} <HeroImage /> </div> </div> </section> thay đổi màu cho đúng template