Upload New File

bentobox.jsx

+import React from "react";
+import first from "./Frame 20.png";
+import second from "./Frame22.png";
+import third from "./Frame 21.png";
+function Bento() {
+    return (
+        <>
+            <div className="bg-[#E9FAFF] relative p-4">
+                <h2 className="text-blue-600 py-2 text-4xl text-center font-light mb-6">
+                    Get Start now
+                </h2>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">        
+                    <div className="col-span-2 row-span-2 group relative overflow-hidden rounded-lg shadow-lg">
+                        <img src={first} alt="Large Item" className="w-full h-full object-cover"/>                   
+                        <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-1000 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
+                                background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
+                            }}>
+                            <p className="text-white text-center font-extrabold text-6xl">
+                              <span className="block">Seller</span>
+                              <span className="block">Registration</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div className="col-span-2 row-span-1 group relative overflow-hidden rounded-lg shadow-lg">
+                        <img src={second} alt="Small Item 1" className="w-full h-full"/>
+                        <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-1000 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
+                                background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
+                            }}>
+                            <p className="text-white text-center font-extrabold text-4xl">
+                              <span className="block">Buyer</span>
+                              <span className="block">Registration</span>
+                            </p>
+                        </div>
+                     </div>
+                     <div className="col-span-2 row-span-1 group relative overflow-hidden rounded-lg shadow-lg">
+                        <img src={third} alt="Small Item 2" className="w-full h-full"/>
+                        <div className="absolute inset-x-0 bottom-0 h-full flex flex-col items-center justify-center bg-black/40 bg-opacity-0 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-[cubic-bezier(0.4,0,0.2,1)]"  style={{
+                                background: "linear-gradient(to top, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.3) 70%)"
+                            }}>
+                            <p className="text-white text-center font-extrabold text-4xl">
+                              <span className="block">Agent</span>
+                              <span className="block">Login</span>
+                            </p>
+                        </div>
+                     </div>
+                </div>
+            </div>
+        </>
+    );
+}
+export default Bento;
\ No newline at end of file