108 lines
5.3 KiB
JavaScript
108 lines
5.3 KiB
JavaScript
import React from "react";
|
||
import test from "../../assets/images/product/1.png";
|
||
import Navbar from "src/components/NavBar";
|
||
import Image from "next/image";
|
||
import GalleryBox from "src/components/GalleryBox";
|
||
import Footer from "../Landing/components/Footer";
|
||
|
||
const Product = ({ data }) => {
|
||
const testDataCk =
|
||
"<h1>Hydrating Cream</h1><p><strong>A deeply moisturizing cream</strong> that keeps your skin hydrated all day long. Formulated with natural ingredients, this cream penetrates deep into the skin, providing long-lasting moisture and nourishment.</p><h2>Product Features</h2><ul> <li><strong>Deep Hydration:</strong> Keeps skin hydrated for 24 hours</li> <li><strong>Lightweight Formula:</strong> Absorbs quickly without greasy residue</li> <li><strong>Rich in Vitamins:</strong> Contains Vitamin E and Aloe Vera</li> <li><strong>Dermatologically Tested:</strong> Safe for all skin types</li> <li><strong>Paraben-Free:</strong> No harmful chemicals</li></ul><h2>Why Choose Hydrating Cream?</h2><p>Our Hydrating Cream is enriched with the best natural ingredients to provide long-lasting hydration. <strong>Perfect for dry, sensitive, and combination skin.</strong></p><blockquote> <p>“This is the best moisturizer I’ve ever used! My skin feels soft and hydrated all day.” - <em>Customer Review</em></p></blockquote><h2>Directions for Use</h2><p>Apply a small amount to clean skin and massage gently until fully absorbed. Use in the morning and evening for best results.</p><h2>Customer Reviews</h2><p><strong>★★★★★ - Amazing!</strong> I love how light yet moisturizing this cream is.</p><p><strong>★★★★★ - Highly Recommended</strong> My skin has never felt better!</p><p><strong>★★★★☆ - Great Product</strong> Works well but I wish it came in a larger size.</p><h2>FAQs</h2><ul> <li><strong>Is this suitable for sensitive skin?</strong> Yes! It is dermatologically tested and safe for all skin types.</li> <li><strong>Can I use this under makeup?</strong> Absolutely! It absorbs quickly and works well as a base.</li> <li><strong>Does this have SPF?</strong> No, but it can be layered with sunscreen.</li></ul><h2>Order Now</h2><p>Get your Hydrating Cream today and experience the difference! Available exclusively on our official store.</p>";
|
||
|
||
return (
|
||
<>
|
||
<Navbar theme={1} />
|
||
|
||
<div className="flex flex-col md:flex-row lg:px-20 ">
|
||
<div className="lg:col-span-3 ">
|
||
<GalleryBox />
|
||
</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-0 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>
|
||
<p className="font-bold text-2xl py-8">
|
||
|
||
${data.cost.toLocaleString()}
|
||
</p>
|
||
<button className="btn btn-primary px-20 text-base ">
|
||
{" "}
|
||
Contact and consultation
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="xs:px-5 lg:px-20 py-16">
|
||
<table className="w-full text-left border-collapse lg:px-20">
|
||
<thead>
|
||
<tr className="bg-gray-200">
|
||
<th className="p-2 border-b">Property</th>
|
||
<th className="p-2 border-b">Value</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td className="p-2 border-b">Brand</td>
|
||
<td className="p-2 border-b">Nature's Essence</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="p-2 border-b">Volume</td>
|
||
<td className="p-2 border-b">250ml</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="p-2 border-b">Ingredients</td>
|
||
<td className="p-2 border-b">
|
||
<ul className="list-disc pl-4">
|
||
<li>Aloe Vera</li>
|
||
<li>Chamomile</li>
|
||
<li>Tea Tree Oil</li>
|
||
<li>Rosemary Extract</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td className="p-2 border-b">Category</td>
|
||
<td className="p-2 border-b">Hair Care</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="p-2 border-b">For Hair Type</td>
|
||
<td className="p-2 border-b">All Hair Types</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="xs:px-5 lg:px-20 pb-20 ">
|
||
<div className="content" dangerouslySetInnerHTML={{ __html: testDataCk }} />
|
||
</div>
|
||
|
||
<Footer />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Product;
|