pdp response and check ck editor
parent
5b35dfacdd
commit
7a5bef0622
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue