1"use client";
2
3export const FileFolder3D = () => {
4  return (
5    <section className="relative flex flex-col items-center justify-center w-full h-full min-h-screen">
6      <div className="file group relative w-60 h-40 cursor-pointer origin-bottom z-50" style={{ perspective: "1500px" }}>
7        {/* Main folder container */}
8        <div className="work-5 bg-sky-500 w-full h-full origin-top rounded-2xl rounded-tl-none group-hover:shadow-[0_20px_40px_rgba(0,0,0,.2)] transition-all ease duration-300 relative after:absolute after:content-[''] after:bottom-[99%] after:left-0 after:w-20 after:h-4 after:bg-sky-500 after:rounded-t-2xl before:absolute before:content-[''] before:-top-[15px] before:left-[75.5px] before:w-4 before:h-4 before:bg-sky-500 before:[clip-path:polygon(0_35%,0%_100%,50%_100%)]"></div>
9
10        {/* Layered papers */}
11        <div className="work-4 absolute inset-1 bg-zinc-400 rounded-2xl transition-all ease duration-300 origin-bottom select-none group-hover:[transform:rotateX(-20deg)]"></div>
12        <div className="work-3 absolute inset-1 bg-zinc-300 rounded-2xl transition-all ease duration-300 origin-bottom group-hover:[transform:rotateX(-30deg)]"></div>
13        <div className="work-2 absolute inset-1 bg-zinc-200 rounded-2xl transition-all ease duration-300 origin-bottom group-hover:[transform:rotateX(-38deg)]"></div>
14
15        {/* Top paper */}
16        <div className="work-1 absolute bottom-0 bg-gradient-to-t from-sky-400 to-sky-300 w-full h-[156px] rounded-2xl rounded-tr-none after:absolute after:content-[''] after:bottom-[99%] after:right-0 after:w-[146px] after:h-[16px] after:bg-sky-300 after:rounded-t-2xl before:absolute before:content-[''] before:-top-[10px] before:right-[142px] before:size-3 before:bg-sky-300 before:[clip-path:polygon(100%_14%,50%_100%,100%_100%)] transition-all ease duration-300 origin-bottom flex items-end group-hover:shadow-[inset_0_20px_40px_#7dd3fc,_inset_0_-20px_40px_#0284c7] group-hover:[transform:rotateX(-46deg)_translateY(1px)]"></div>
17      </div>
18    </section>
19  );
20};
21