creat Card component fot CardSlider

package.json

@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@splidejs/react-splide": "^0.7.12",
+    "@tanstack/react-query": "^4.29.7",
+    "@tanstack/react-query-devtools": "^4.29.7",
     "@types/node": "20.2.1",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
@@ -19,6 +22,7 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
   }

src/components/CardSlider/CardForSlider.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const CardForSlider = () => {
+  return (
+    <div className="bg-white shadow-lg rounded-lg p-2 flex flex-col gap-2">
+      <div className="relative">
+        <img src="./images/products/1.jpg" alt="" className="rounded-lg" />
+        <p className="absolute top-3 right-4">مردانه</p>
+      </div>
+      <div className="px-4 flex pb-6">
+        <h2 className="font-semibold">پلیور مردانه کروم مدل یقه اسکی</h2>
+      </div>
+      <div className="flex justify-end px-4">
+        <h2>
+          <span className="font-medium">1,144,500 </span>
+          <span className="text-gray-600 font-light">تومان</span>
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default CardForSlider;

src/components/CardSlider/CardSlider.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import CardForSlider from "./CardForSlider";
+
+const CardSlider = () => {
+  return (
+    <div className=" w-full p-4 flex bg-neutral-200" dir="rtl">
+      <div className="flex flex-col p-4 gap-32 items-center">
+        <h1>زنانه</h1>
+        <button>مشاهده همه</button>
+      </div>
+      <div className="flex gap-4">
+        <CardForSlider />
+        <CardForSlider />
+        <CardForSlider />
+        <CardForSlider />
+      </div>
+    </div>
+  );
+};
+
+export default CardSlider;

src/components/Footer/Footer.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div className="flex justify-between py-4 px-12 border-t " dir="rtl">
+      <div className="flex flex-col gap-2">
+        <h2 className="border-b p-2">خرید</h2>
+        <a>زنانه</a>
+        <a>مردانه</a>
+        <a>بچگانه</a>
+        <a>زیبایی و سلامت</a>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h2 className="border-b p-2">خدمات مشتریان</h2>
+        <a>پاسخ به پرسش های متداول</a>
+        <a>رویه بازگرداندن کالا</a>
+        <a>شرایط استفاده</a>
+        <a>حریم خصوصی</a>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h2 className="border-b p-2">اطلاعات زاک استور</h2>
+        <a>درباره زاک استور</a>
+        <a>تماس با زاک استور</a>
+        <a>همکاری با زاک استور</a>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h2 className="border-b p-2">خرید</h2>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;