framer done

framer/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "motion": "^11.15.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

framer/src/App.jsx

@@ -1,12 +1,15 @@
-import React from 'react'
+import React from "react";
+import Background from "./components/Background";
+import Forground from "./components/Forground";
 
 const App = () => {
   return (
-    <div>
-
-    </div>
-  )
-}
+ <div className="relative w-full h-screen  bg-zinc-800">
+  <Background />
+  <Forground />
 
-export default App
+ </div>
+  );
+};
 
+export default App;

framer/src/components/Background.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const Background = () => {
+  return (
+    <div className='h-screen fixed w-full z-[2]'>
+    <div className="text-zinc-600 w-full absolute top-[10%]  flex justify-center text-xl font-semibold leading-none">Document</div>
+    <h1 className=" absolute text-[10vw] font-semibold leading-none tracking-tight text-zinc-700 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      DOCS.
+    </h1>
+  </div>
+  )
+}
+
+export default Background

framer/src/components/Card.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { MdContactPage } from "react-icons/md";
+import { LuDownload } from "react-icons/lu";
+import { LuEyeClosed } from "react-icons/lu";
+import { motion } from "motion/react"
+
+const Card = ({data , reference})=> {
+  return (
+    <motion.div drag dragConstraints={reference} whileDrag={{scale:1.2}} className="relative w-60 h-72 bg-zinc-900/90  px-5 py-10 text-white rounded-[30px] overflow-hidden">
+      <MdContactPage className="text-xl   " />
+      <p className="text-sm  mt-5 font-semibold leading-tight">
+       {data.desc}
+      </p>
+      <div className="footer absolute bottom-0 w-full  left-0 ">
+        <div className="flex items-center justify-between py-4 px-8 mb-1">
+          <h5 className="text-xs">{data.size}</h5>
+          <span className="bg-zinc-200 px-2 py-2 rounded-full flex items-center justify-center  ">
+            {data.close? <LuDownload className="text-sm text-[#000]" />:< LuEyeClosed className="text-sm text-[#000]" />}
+
+          </span>
+        </div>
+        {
+          data.tag.isOpened&& <div className={`"w-full ${data.tag.tagColor === "teal" ? "bg-teal-600":"bg-blue-700"} px-4 py-4 flex justify-center items-center"`}>
+          <h1 className="font-semibold text-sm ">{data.tag.tagTitle}</h1>
+        </div>
+        }
+
+      </div>
+    </motion.div>
+  );
+};
+
+export default Card;

framer/src/components/Forground.jsx

@@ -0,0 +1,42 @@
+import React, { useRef } from 'react'
+import Card from './Card'
+
+
+const Forground = () => {
+  const ref = useRef(null)
+
+  const data = [
+    {
+      desc:" Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendusillum ut voluptates sequi?",
+    size:"0.4mb",
+    close : false,
+    tag :{isOpened:true , tagTitle:"Download Now " , tagColor:"green" },
+
+    },
+    {
+      desc:" Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendusillum ut voluptates sequi?",
+    size:"0.4mb",
+    close : false,
+    tag :{isOpened:false , tagTitle:"Download Now " , tagColor:"green" },
+
+    },
+    {
+      desc:" Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendusillum ut voluptates sequi?",
+    size:"0.4mb",
+    close : true,
+    tag :{isOpened:true , tagTitle:"Submit Now" , tagColor:"teal" },
+
+    }
+  ]
+  return (
+    <div ref={ref} className=" fixed inset-0  w-full h-full top-0 left-0 p-5  flex gap-5 z-[3] flex-wrap overflow-hidden">
+
+{data.map((item,index)=>(
+<Card reference={ref} data={item}/>
+))}
+
+    </div>
+  )
+}
+
+export default Forground

framer/src/index.css

@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+
+*{
+    font-family: "Poppins", sans-serif;
+}
+
+::selection{
+    color: aquamarine;
+}