page
;
+};
+
+export default page;
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
index 69f7b2c77..04064b833 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/new-product-modal.tsx
@@ -1,4 +1,5 @@
// components/admin/NewProductModal.tsx
+
import { zodResolver } from "@hookform/resolvers/zod";
import { AnimatePresence, motion } from "framer-motion";
import { Loader, X } from "lucide-react";
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
index 271c00fce..a49fddded 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-detail-modal.tsx
@@ -1,3 +1,5 @@
+"use client";
+
import { AnimatePresence, motion } from "framer-motion";
import { Loader2, X } from "lucide-react";
import { useSession } from "next-auth/react";
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/productcadrcomponent.tsx b/src/app/dashboard/(user-dashboard)/products/_components/productcadrcomponent.tsx
new file mode 100644
index 000000000..e77bc85ed
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/_components/productcadrcomponent.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import Image, { StaticImageData } from "next/image";
+
+interface ProductCardProperties {
+ title: string;
+ price: string;
+ description: string;
+ inStock: boolean;
+ imageUrl: string | StaticImageData;
+}
+
+const Delete = () => {
+ alert("Are you sure you want to delete");
+};
+
+const Edit = () => {
+ alert("Proceed to edit");
+};
+
+const ProductCard: React.FC
+
+ );
+};
+
+export default ProductCard;
diff --git a/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx
new file mode 100644
index 000000000..55ba4ce42
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/mainproductdetailpage/page.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { ChangeEvent, FormEvent, useState } from "react";
+
+import user from "../../../../../../public/images/user.png";
+
+const Discard = () => {
+ alert("Changes discard");
+};
+
+const ProductDetail = () => {
+ const [textValue, setTextValue] = useState
+
+
+
+ {title}
+{price}
+{description}
+ + {inStock ? "In stock" : "Out of stock"} + +
+
+
+
+
+
+
+
+ );
+};
+
+export default ProductDetail;
diff --git a/src/app/dashboard/(user-dashboard)/products/productcard/page.tsx b/src/app/dashboard/(user-dashboard)/products/productcard/page.tsx
new file mode 100644
index 000000000..baca39210
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/productcard/page.tsx
@@ -0,0 +1,19 @@
+import productimage from "/public/images/productimage.png";
+
+import ProductCard from "../_components/productcadrcomponent";
+
+const Home: React.FC = () => {
+ return (
+
+
+ Comments
+ {comments.map((comment, index) => ( +
+
+ ))}
+
+
+
+
+
+ {comment.name}
+{`${comment.date} ${comment.time}`}
+{comment.comment}
+
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/src/components/layouts/homepage/HowItWorks.tsx b/src/components/layouts/homepage/HowItWorks.tsx
index 5bc3fb226..1b96b066c 100644
--- a/src/components/layouts/homepage/HowItWorks.tsx
+++ b/src/components/layouts/homepage/HowItWorks.tsx
@@ -7,8 +7,9 @@ const HowItWorks = () => {
return (
-
-
+
+ {/* Text Content */}
+
-
{t("howItWorksTitlePrefix")}{" "} {t("howItWorksTitleHighlight")} @@ -18,11 +19,39 @@ const HowItWorks = () => {
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
-
- {
-
-
+
+
-
- {
-
-
+
+ {
+ return (
+