box

app/components/box1.js

@@ -0,0 +1,38 @@
+'use client'
+import { useEffect, useState } from "react";
+
+export default function Box1({ salary }) {
+  const [funds, setFunds] = useState(false)
+  const [insurance, setInsurance] = useState(false)
+  const [oldMomDad, setOldMomDad] = useState(false)
+  const [charity, setCharity] = useState(false)
+  const [reduction, setReduction] = useState(0)
+
+  useEffect(() => {
+    let newreduction = 0
+    if (funds) {
+      newreduction += 5000
+    }
+    if (insurance) {
+      newreduction += 5000
+    }
+    if (oldMomDad) {
+      newreduction += 2000
+    }
+    if (charity) {
+      newreduction += 2000
+    }
+    setReduction(newreduction)
+  }, [funds, insurance, oldMomDad, charity])
+
+  return (
+    <div>
+      <p className="font-bold">Salary : {salary}</p>
+      <div><input type="checkbox" Checked={funds} onChange={() => { setFunds(!funds) }} /> Funds</div>
+      <div><input type="checkbox" Checked={insurance} onChange={() => { setInsurance(!insurance) }} /> Insurance</div>
+      <div><input type="checkbox" Checked={oldMomDad} onChange={() => { setOldMomDad(!oldMomDad) }} /> OldMomDad</div>
+      <div><input type="checkbox" Checked={charity} onChange={() => { setCharity(!charity) }} /> Charity</div>
+      <p className="font-bold">reduction : {reduction}</p>
+    </div>
+  );
+}

app/components/box2.js

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import Box from '@mui/material/Box';
+import Box1 from "./box1";
+export default function Box2({ salary }) {
+
+
+  return (
+    <div className="flex">
+      <Box sx={{ minWidth: 500 }} className="p-20 relative flex justify-center items-center flex-col h-96 w-[1000px]" >
+        <div className="w-full h-full absolute  translate-x-56 translate-y-24 scale-x-75 scale-y-75 pointer-events-none rotate-90">
+          <Image src={"/tape.png"} width={800} height={95}
+            className="object-top " />
+        </div>
+        <div className="w-full h-full absolute -translate-x-96 translate-y-24 scale-x-75 scale-y-75 pointer-events-none rotate-90 ">
+          <Image src={"/tape.png"} width={800} height={95}
+            className="object-top " />
+        </div>
+        <div className="w-full h-full absolute top-100 translate-x-10 pointer-events-none -z-10">
+          <Image src={"/kadak.png"} fill
+            className="object-top -z-10"/>
+        </div>
+        <div className="flex gap-16 ">
+          <Box1 salary={salary} />
+          <Box1 salary={salary} />
+        </div>
+      </Box>
+    </div>
+  );
+}

app/globals.css

@@ -2,32 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

app/page.js

@@ -1,22 +1,16 @@
-import Image from "next/image";
-import Filterbox from "./components/filter";
+"use client"
+import { useEffect, useState } from "react";
+import Box2 from "./components/box2";
+import Box1 from "./components/box1";
 
-const data = [{
-  "salary": 25000,
-  "reduction": 5000,
-  "how":[
-    {
-      "Funds" : {type:"Funds",name:"name"},
-      "Funds" : {type:"Funds",name:"name"},
-      "Funds" : {type:"Funds",name:"name"},
-    }
-  ],
-}]
 export default function Home() {
+
   return (
-    <main className="">
-        <Filterbox/>
-        {}
+    <main className="flex gap-5 relative">
+      <div className="bg-[#DEF9C4] -z-20 absolute w-full h-full"></div>
+      <div className="min-h-screen  flex w-full justify-center mt-52">
+        <Box2 salary={25000} />
+      </div>
     </main>
   );
 }

package.json

@@ -9,14 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^5.16.4",
+    "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.5"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }