From 7a5bef06226699e31e58af2acba01d1c9b9891ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D8=AD=D8=B3=DB=8C=D9=86=20=D9=85=D8=B9=D8=B5=D9=88=D9=85?=
 =?UTF-8?q?=DB=8C=20=D9=BE=D9=88=D8=B1?= <hosseinmasoomi506@gmail.com>
Date: Mon, 17 Feb 2025 02:11:47 +0330
Subject: [PATCH] pdp response and check ck editor

---
 src/app/products/[...id]/page.jsx        | 23 ++++++--
 src/view/Landing/components/Products.jsx | 10 ++++
 src/view/Products/index.jsx              | 68 ++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 src/view/Products/index.jsx

diff --git a/src/app/products/[...id]/page.jsx b/src/app/products/[...id]/page.jsx
index 15115dd..8d8a19a 100644
--- a/src/app/products/[...id]/page.jsx
+++ b/src/app/products/[...id]/page.jsx
@@ -1,12 +1,25 @@
-import ProductData from "@comp/AppsComponent/ProductData/page";
-import { notFound, redirect } from "next/navigation";
+import Product from "src/view/Products";
+
+const page = async ({ params, searchParams }) => {
+  const data = {
+    id: 1,
+    persianName: "Hydrating Cream",
+    englishName: "Hydrating Cream",
+    description:
+      "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates impedit officia eos quo aliquam soluta iste earum aliquid harum doloremque iure consectetur vel, cumque autem id, numquam quisquam mollitia velit. . Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates impedit officia eos quo aliquam soluta iste earum aliquid harum doloremque iure consectetur vel, cumque autem id, numquam quisquam mollitia velit. .  ",
+    cost: 250000,
+    costWithDiscount: 200000,
+    hasDiscount: true,
+    discountPercent: 20,
+    stock: 5,
+    mainImage: "4",
+  };
 
-async function getData(id) {
   return (
     <>
       <Product params={params} data={data} />
     </>
   );
-}
+};
 
-export default Page;
+export default page;
diff --git a/src/view/Landing/components/Products.jsx b/src/view/Landing/components/Products.jsx
index 5c3190a..64e35cd 100644
--- a/src/view/Landing/components/Products.jsx
+++ b/src/view/Landing/components/Products.jsx
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";
 import CardNormal from "src/components/Cards/CardNormal/page";
 
@@ -220,6 +221,15 @@ const Products = () => {
             </div>
           ))}
         </div>
+
+        <div className="flex justify-center">
+          <Link href={"categories/Product-20Listing-Page"}>
+            <button className="btn btn-primary px-10 text-sm ">
+              {" "}
+              See All Products
+            </button>
+          </Link>
+        </div>
       </div>
     </div>
   );
diff --git a/src/view/Products/index.jsx b/src/view/Products/index.jsx
new file mode 100644
index 0000000..e9bb8f0
--- /dev/null
+++ b/src/view/Products/index.jsx
@@ -0,0 +1,68 @@
+import React from "react";
+import test from "../../assets/images/product/1.png";
+import Navbar from "src/components/NavBar";
+import Image from "next/image";
+const Product = ({ data }) => {
+  const testDataCk =
+    '<h1 style="color:#ff6347;">Hydrating Cream - Ultimate Skincare Solution</h1><p style="color:#4682b4;">Discover the power of deep hydration with our <strong>premium Hydrating Cream</strong>. Designed to nourish and protect your skin, this cream is enriched with essential vitamins and natural extracts.</p><h2 style="color:#32cd32;">Why Choose Our Hydrating Cream?</h2><p style="color:#8a2be2;">Our formula ensures your skin remains <em>moisturized</em> and <em>rejuvenated</em> throughout the day. It absorbs quickly and leaves no greasy residue, making it perfect for all skin types.</p><ul><li style="color:#ff4500;"><strong>Deep Moisturization</strong> - Keeps your skin hydrated for 24 hours.</li><li style="color:#00ced1;"><strong>Natural Ingredients</strong> - Aloe vera, shea butter, and vitamin E.</li><li style="color:#daa520;"><strong>Non-Greasy Formula</strong> - Lightweight and easy to apply.</li><li style="color:#dc143c;"><strong>Suitable for All Skin Types</strong> - Works for dry, oily, and combination skin.</li></ul><h2 style="color:#ff69b4;">Key Benefits</h2><p style="color:#2e8b57;">✔ Restores skins natural glow<br>✔ Prevents dryness and flakiness<br>✔ Reduces fine lines and wrinkles<br>✔ Soothes irritation and redness</p><h2 style="color:#1e90ff;">How to Use?</h2><p style="color:#8b0000;">Apply a small amount of Hydrating Cream to your face and neck. Gently massage in circular motions until fully absorbed. Use morning and night for best results.</p><h2 style="color:#ff8c00;">Ingredients</h2><p style="color:#4b0082;">Water, Glycerin, Aloe Vera Extract, Shea Butter, Vitamin E, Hyaluronic Acid, Essential Oils, Antioxidants.</p><h2 style="color:#ff0000;">Customer Reviews</h2><p style="color:#006400;"><strong>⭐⭐⭐⭐⭐</strong> "Absolutely love this cream! My skin feels so soft and refreshed!" - Sarah K.</p><p style="color:#8b4513;"><strong>⭐⭐⭐⭐⭐</strong> "Best moisturizer I’ve ever used. Highly recommended!" - David R.</p><h2 style="color:#800080;">Frequently Asked Questions</h2><p style="color:#191970;"><strong>Q: Is this suitable for sensitive skin?</strong> <br>A: Yes! Our formula is dermatologically tested and safe for sensitive skin.</p><p style="color:#a52a2a;"><strong>Q: Can I use this under makeup?</strong> <br>A: Absolutely! It creates a perfect base for smooth makeup application.</p><h2 style="color:#ff1493;">Final Thoughts</h2><p style="color:#008b8b;">Hydrating Cream is your go-to solution for lasting hydration and healthy skin. Experience the difference with our expertly crafted formula. </p><p style="color:#cd5c5c;"><strong>Get yours today and say hello to beautifully hydrated skin!</strong></p>';
+
+  return (
+    <>
+      <Navbar theme={1} />
+
+      <div className="flex flex-col md:flex-row  lg:px-20 ">
+        <div className="lg:col-span-3 ">
+          <div className="w-full rounded-3xl">
+            <div className="flex justify-center xs:pb-[10px]  ">
+              <div className="w-[500px]">
+                <Image
+                  src={test}
+                  width={350}
+                  height={350}
+                  className=" mx-auto !object-cover"
+                  alt={data.persianName}
+                  priority
+                  loading="eager"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="lg:col-span-3 xs:px-5 lg:px-0 ">
+          <div className="text-left mt-7">
+            <h1 className="text-lg font-medium ">{data.englishName} </h1>
+            <p className="mb-0 text-sm text-gray-400">{data.englishName} </p>
+          </div>
+
+          <div className="flex my-4">
+            <div className="px-3 py-1 ml-2 rounded-full bg-primary-400">
+              <p className="mb-0 text-sm text-white ">orginal </p>
+            </div>
+
+            <div className="px-3 py-1 ml-2 rounded-full bg-danger-100">
+              <p className="mb-0 text-sm text-white ">off today </p>
+            </div>
+
+            <div className="px-3 py-1 ml-2 rounded-full bg-secondary-500">
+              <p className="mb-0 text-sm text-white ">no stock</p>
+            </div>
+          </div>
+
+          <div>
+            <div className="flex justify-between mt-3 text-left">
+              <h2 className="mb-0 text-sm text-gray-400">
+                {data?.description}
+              </h2>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="xs:px-5 lg:px-20 pb-20">
+        <div dangerouslySetInnerHTML={{ __html: testDataCk }} />
+      </div>
+    </>
+  );
+};
+
+export default Product;